/* ---------------- پایه‌ی رنگ پروژه ---------------- */
:root{
    --teal:        #48c4b7;
    --teal-dark:   #3aa99f;
    --border-teal: #48c4b780;
}

/* ---------------- Instagram Post Styles ---------------- */
.post-media-swiper {
    width: 100%;
    height: auto;
}

.post-media-swiper .swiper-slide {
    width: auto;
    height: auto;
}

.post-media-swiper .swiper-slide img,
.post-media-swiper .swiper-slide video {
    max-width: 100%;
    max-height: 100vh;
    width: auto;
    height: auto;
    object-fit: contain;
}

.post-media-swiper .swiper-slide img {
    display: block;
}

.post-media-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: auto;
}

/* ---------------- کانتینر اصلی ---------------- */
.profile-wrap{
    max-width: 1280px;   /* عرض کلی دقیقاً مثل دیوار */
    margin-inline: auto;
}

/* ---------------- سایدبار راست ---------------- */
.profile-sidebar{
    width: 230px;                        /* پهنای ثابت */
    border-inline-end: 1px solid var(--border);
    padding-inline-end: 24px;        /* فاصله از فرم */
}
.profile-avatar{
    width: 56px;height: 56px;border-radius: 30px;
    background:#e1f6f4 url('/assets/images/user.svg') center/60% no-repeat;
}


/* ---------------- فرم (ستون چپ) ---------------- */
.form-area{
    --gap: 40px;        /* فاصله‌ٔ بالا–پایین بخش‌‌ها */
    padding-inline-start: 40px;
}
.section-title{
    font-size:1.05rem;font-weight:700;margin:0 0 12px
}
.helper-text{
    font-size:.83rem;color:var(--text-muted);margin-bottom:20px
}

/* ---------------- فیلدهای ورودی ---------------- */
form .form-control,.form-select{
    height:50px;font-size:.92rem;
    border:1px solid var(--border-teal)!important;
    border-radius:var(--roundMain);
    background:transparent
}
form .form-control:focus,.form-select:focus{
    border-color:var(--teal);box-shadow:none
}

/* ---------------- لوگو (آپلود) ---------------- */
.logo-drop{
    width: 156px;height: 156px;
    border:2px dashed var(--border-teal);border-radius:var(--roundMain);
    display:flex;align-items:center;justify-content:center;cursor:pointer;
    transition:border-color .25s
}
.logo-drop:hover{border-color:var(--teal)}
.logo-drop i{font-size:2rem;color:var(--teal)}

/* ---------------- شبکه‌های اجتماعی ---------------- */
.input-group-text{background:transparent;border-end:0}
.input-group .form-control{border-start:0}

/* ---------------- دکمه ثبت ---------------- */
.btn-save{
    margin-top:56px;width:220px;max-width:100%;
    height:48px;font-weight:700;border-radius:var(--roundbtn);
    background:var(--teal);border:none
}
.btn-save:hover{background:var(--teal-dark)}
.input-group-text {

    border-width: 1px;
    border-color: #a6ded8;
}
.dark-theme .input-group-text {
    border-color: #306b65;
}
.dark-theme .form-control {

    color: #ffffff;
}

/* ---------------- دارک‌مود تفاوت ---------------- */
.dark-theme .profile-avatar{background:#2a2a2a url('/assets/images/user-dark.svg') center/60% no-repeat}
.dark-theme .logo-drop i{color:#b8fff4}

/* دکمۀ شناور پایین موبایل */
.bottom-menu-btn{
    position: fixed;
    bottom: 12px;
    right: 12px;
    z-index: 1040;                 /* بالاتر از هر چیز غیر modal */
    background: var(--teal);
    color:#fff;border:none;
    border-radius: 50px;
    padding: .55rem 1.2rem;
    box-shadow: 0 4px 12px rgba(0,0,0,.15);
    display:flex;align-items:center;gap:.35rem;
}
.bottom-menu-btn i{font-size:1.2rem}

/* ارتفاع Bottom-Sheet */

@media (max-width:991.98px){      /* بوت‌استرپ lg- */
    .profile-sidebar{display:none!important}
}
#cropBtn{border-radius:0px;font-weight:700}
/* دکمه سبز روی عکس */
.btn-teal    {background:#48c4b7;color:#fff;font-weight:700;border:none;border-radius:0px}
.btn-teal:hover{background:#3aa99f}
/* مربع آپلود */
.logo-drop{
    width:156px;height:156px;border:2px dashed var(--border-teal);
    display:flex;align-items:center;justify-content:center;
    transition:border-color .25s
}
.logo-drop:hover{border-color:var(--teal)}
.upload-icon{color:var(--teal)}

/* input روی کل مربع کلیک‌پذیر است */
.logo-input{top:0;left:0}

/* دکمۀ روی تصویر در مودال */
#cropBtn{border-radius:0px;font-weight:700}
#cropModal .btn-teal{border-radius:0px;font-weight:700}
#cropModal .btn-close-custom{background:none;border:none;color:#fff;font-size:1.8rem}
/* رنگ دکمه ذخیره */
.btn-teal{background:#48c4b7;color:#fff}
.btn-teal:hover{background:#3aa99f}
.btn-cancel{
    margin-top: 56px;
    width: 220px;
    max-width: 100%;
    height: 48px;
    font-weight: 700;
    border-radius: 0px;
    border: none;
    line-height: 32px;
}

.follow-box{background:var(--surface);border:1px solid var(--border);transition:transform .2s,box-shadow .2s;}
.follow-box:hover{transform:translateY(-4px);box-shadow:0 6px 18px rgba(0,0,0,.08);}
.biz-logo{width:130px;height:130px;display:flex;align-items:center;justify-content:center;}
.biz-logo img{max-width:100%;max-height:100%;object-fit:contain;}
.btn-outline-teal{border:1px solid var(--border-teal);color:var(--text-primary);border-radius: var(--roundMain);font-weight:600;    font-size: 15px;}
.btn-outline-teal:hover{background:var(--green);color:#fff;border-color:var(--green);}
.dark-theme .btn-outline-teal{color:#fff;}
.dark-theme .follow-box{background:var(--surface-soft);border-color:var(--border);}
@media (max-width: 991.98px){
    .form-area{
        padding-inline-start: 0px;
    }
}
.input-group-text{
    border-radius:var(--roundMain);
}
/* ===== Pricing ===== */
.billing-toggle{
    display:flex; gap:.35rem; background:var(--surface); border:1px solid var(--border);
    padding:4px; border-radius:14px;
}
.billing-toggle .toggle-btn{
    border:none; background:transparent; padding:.4rem .9rem; font-weight:700;
    border-radius:10px; color:var(--text-primary);
}
.billing-toggle .toggle-btn.active{ background:var(--surface-soft); }
.billing-toggle .deal-pill{
    font-size:.72rem; background:rgba(44,186,125,.12); color:var(--green);
    padding:.1rem .45rem; border-radius:999px; margin-right:.4rem;
}

.pricing-grid{
    display:grid; gap:18px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 992px){ .pricing-grid{ grid-template-columns: 1fr; } }

.plan-card{
    background:var(--surface); border:1px solid var(--border); border-radius:18px;
    padding:22px; display:flex; flex-direction:column; gap:14px;
    transition:transform .2s, box-shadow .2s;
}
.plan-card:hover{ transform:translateY(-4px); box-shadow:0 10px 28px rgba(0,0,0,.06); }
.plan-card.featured{ outline:2px solid var(--green); }
.plan-head{ display:flex; align-items:center; gap:10px; }
.plan-icon{ width:34px; height:34px; border-radius:10px; background:var(--surface-soft);
    display:flex; align-items:center; justify-content:center; font-size:18px; }
.plan-name{ font-weight:800; }
.plan-sub{ color:var(--text-muted); font-size:.92rem; }

.plan-price{ display:flex; align-items:center; gap:.45rem; margin-top:6px; }
.plan-price .price{ font-size:2rem; font-weight:900; line-height:1; }
.plan-price .per{ color:var(--text-muted); }
.off-badge{
    margin-right:auto; font-size:.78rem; padding:.1rem .5rem; border-radius:999px;
    background:rgba(44,186,125,.12); color:var(--green); font-weight:700;
}

.plan-features{ list-style:none; padding:0; margin:8px 0 6px 0; display:flex; flex-direction:column; gap:.45rem; }
.plan-features li{ display:flex; align-items:flex-start; gap:.5rem; }
.plan-features i{ font-size:1rem; color:var(--green); position:relative; top:.2rem; }

/* Dark tweaks */
.dark-theme .billing-toggle .toggle-btn.active{ background:#2a2a2a; }
#toggleMoreInfo:hover {
    background-color: inherit
}
#extraMobiles i{
    position: relative;
    top: 2px;
}
.dark-theme .cursor-pointer span {
    color: white !important;
}
.ad-actions {
    border-top: 1px solid var(--border);
    
    padding: .6rem .85rem;
    display: flex;
    justify-content: flex-start;
    gap: 1.25rem;
    font-size: .85rem;
}

.ad-actions a {
    display: inline-flex;
    align-items: center;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

.ad-actions i {
    margin-left: .25rem
}
.dark-theme .totl-section{
    background: #121212 !important;
}
.dark-theme .invoice-value {
  
    color: white;
}