/* =====================================================================
   آکادمی عبری — سیستم طراحی مدرن نرم/تمیز
   تم: سبز پسته‌ای (اصلی) + انبه‌ای (تأکید)  |  موبایل: تجربه‌ی اپ نیتیو
   ===================================================================== */

@font-face {
    font-family: "YekanBakh";
    src: url('../fonts/YekanBakhMedium.ttf') format("truetype");
    font-display: swap;
}
@font-face {
    font-family: "nast";
    src: url('../fonts/QuranTaha.ttf') format("truetype");
    font-display: swap;
}

:root {
    /* سبز زیتونی (رنگ اصلی برند) */
    --brand:        #6E8C2E;
    --brand-600:    #5C7526;
    --brand-700:    #475B1C;
    --brand-100:    #DBE4BD;
    --brand-50:     #F0F3E0;

    /* انبه‌ای (تأکید/CTA) */
    --mango:        #F7941D;
    --mango-600:    #E27C05;
    --mango-700:    #C56A00;
    --mango-100:    #FFE3BE;
    --mango-50:     #FFF5E8;

    /* خنثی‌ها */
    --ink:          #20260f;
    --body:         #4c5237;
    --muted:        #898d77;
    --line:         #eceee2;
    --bg:           #f7f8f1;
    --card:         #ffffff;

    /* گرادیان‌ها */
    --grad-brand:   linear-gradient(135deg, #8AA53A 0%, #5C7526 100%);
    --grad-mango:   linear-gradient(135deg, #FFA836 0%, #F0820A 100%);
    --grad-hero:    linear-gradient(135deg, #475B1C 0%, #6E8C2E 50%, #8AA53A 100%);
    --grad-soft:    linear-gradient(180deg, #F0F3E0 0%, #F7F8F1 100%);
    --link:         #0d6efd;
    --link-hover:   #0a58ca;

    /* سایه‌ها — نرم و لایه‌ای */
    --sh-xs:    0 1px 3px rgba(29,39,22,.05);
    --sh-sm:    0 4px 14px rgba(73,116,48,.07);
    --sh:       0 10px 30px rgba(73,116,48,.10);
    --sh-lg:    0 20px 48px rgba(73,116,48,.14);
    --sh-mango: 0 10px 26px rgba(247,148,29,.32);

    /* گردی */
    --r-sm:  12px;
    --r:     18px;
    --r-lg:  24px;
    --r-xl:  30px;
    --r-pill: 999px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    font-family: "YekanBakh", Tahoma, sans-serif;
    background-color: var(--bg);
    color: var(--body);
    line-height: 1.85;
    -webkit-tap-highlight-color: transparent;
    overflow-x: clip;
}

a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); }
::selection { background: var(--mango-100); color: var(--ink); }

img { max-width: 100%; }

/* اسکرول‌بار نازک */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: var(--brand-100); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--brand); }

/* ============================ پایه‌های رنگی (override) ============= */
.bg-primary       { background: var(--brand) !important; }
.bg-brand-soft    { background: var(--brand-50) !important; }
.bg-mango         { background: var(--mango) !important; }
.bg-mango-soft    { background: var(--mango-50) !important; }
.text-primary     { color: var(--brand-700) !important; }
.text-brand       { color: var(--brand) !important; }
.text-mango       { color: var(--mango-600) !important; }
.text-second      { color: #fff !important; }
.text-muted       { color: var(--muted) !important; }
.rounded-4 { border-radius: var(--r) !important; }
.rounded-5 { border-radius: var(--r-lg) !important; }
.shadow-sm { box-shadow: var(--sh-sm) !important; }
.shadow    { box-shadow: var(--sh) !important; }
.border, .card { border-color: var(--line) !important; }

/* ============================ دکمه‌ها ============================= */
.btn { font-weight: 700; border-radius: var(--r-pill); transition: transform .15s, box-shadow .2s, background .2s; }
.btn:active { transform: scale(.97); }
.btn-primary { background: var(--grad-brand); border: none; color: #fff; box-shadow: var(--sh-sm); }
.btn-primary:hover, .btn-primary:focus { background: var(--brand-600); color: #fff; box-shadow: var(--sh); }
.btn-outline-primary { color: var(--brand-700); border: 1.5px solid var(--brand-100); background: #fff; }
.btn-outline-primary:hover { background: var(--brand-50); border-color: var(--brand); color: var(--brand-700); }
.btn-outline-second { color: var(--mango-600); border: 1.5px solid var(--mango-100); background: var(--mango-50); }
.btn-outline-second:hover { background: var(--mango); color: #fff; border-color: var(--mango); }
.btn-mango { background: var(--grad-mango); border: none; color: #fff !important; box-shadow: var(--sh-mango); }
.btn-mango:hover, .btn-mango:focus { color: #fff; filter: brightness(1.03); box-shadow: var(--sh-lg); }
.btn-second { background: var(--brand-50); color: var(--ink); }
.badge.bg-primary { background: var(--brand) !important; }
.badge.bg-mango   { background: var(--mango) !important; color: #fff; }

/* ============================ هدر دسکتاپ ========================= */
.fd-header {
    position: sticky; top: 0; z-index: 1030;
    background: rgba(255,255,255,.96);
    backdrop-filter: saturate(160%) blur(10px);
    border-bottom: 1px solid transparent;
    transition: box-shadow .25s, border-color .25s;
}
.fd-header.scrolled { box-shadow: 0 6px 26px rgba(73,116,48,.10); border-bottom-color: var(--line); }
.fd-header::before { content:""; display:block; height:3px; background: var(--grad-mango); }

.fd-topbar { background: var(--brand-700); color: #fff; font-size: .8rem; }
.fd-topbar a { color: rgba(255,255,255,.9); }
.fd-topbar a:hover { color: var(--mango-100); }

.fd-navbar { display: flex; align-items: center; gap: 1rem; padding: .7rem 0; }
.fd-logo { display: flex; align-items: center; gap: .65rem; }
.fd-logo img { width: 48px; height: 48px; border-radius: 14px; object-fit: cover; box-shadow: var(--sh-xs); }
.fd-logo .brand-name { font-weight: 800; color: var(--brand-700); line-height: 1.15; }
.fd-logo .brand-sub  { font-size: .72rem; color: var(--muted); }

.fd-search {
    flex: 1; display: flex; align-items: center;
    background: var(--bg); border: 1.5px solid var(--line);
    border-radius: var(--r-pill); padding: .35rem .35rem .35rem 1rem;
    transition: border-color .2s, box-shadow .2s, background .2s;
}
.fd-search:focus-within { border-color: var(--brand); background: #fff; box-shadow: 0 0 0 4px rgba(111,168,75,.12); }
.fd-search input { border: none; background: transparent; outline: none; flex: 1; font-size: .92rem; color: var(--ink); }
.fd-search button { border: none; background: var(--grad-mango); color: #fff; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: var(--sh-mango); }

.fd-nav { display: flex; align-items: center; gap: .15rem; flex-wrap: wrap; }
.fd-nav-link {
    display: inline-flex; align-items: center; gap: .4rem;
    color: var(--body); font-weight: 700; font-size: .9rem;
    padding: .55rem .85rem; border-radius: var(--r-sm); transition: all .18s; white-space: nowrap;
}
.fd-nav-link i { color: var(--brand); font-size: 1.05rem; }
.fd-nav-link:hover { background: var(--brand-50); color: var(--brand-700); transform: translateY(-1px); }
.fd-nav-link.active { background: var(--brand-50); color: var(--brand-700); }

.fd-btn-login {
    display: inline-flex; align-items: center; gap: .45rem;
    background: var(--grad-brand); color: #fff !important;
    padding: .55rem 1.1rem; border-radius: var(--r-pill);
    font-weight: 700; white-space: nowrap; box-shadow: var(--sh-sm);
}
.fd-btn-login:hover { color: #fff !important; box-shadow: var(--sh); transform: translateY(-1px); }

/* ============================ اپ‌بار موبایل ====================== */
.app-bar {
    position: sticky; top: 0; z-index: 1030;
    display: flex; align-items: center; justify-content: space-between; gap: .6rem;
    padding: .55rem .9rem; padding-top: calc(.55rem + env(safe-area-inset-top));
    background: rgba(255,255,255,.92); backdrop-filter: saturate(160%) blur(10px);
    border-bottom: 1px solid var(--line);
}
.app-bar .ab-btn {
    width: 42px; height: 42px; border-radius: 14px; border: none;
    background: var(--brand-50); color: var(--brand-700); font-size: 1.3rem;
    display: flex; align-items: center; justify-content: center;
}
.app-bar .ab-btn:active { transform: scale(.92); }
.app-bar .ab-title { display: flex; align-items: center; gap: .5rem; font-weight: 800; color: var(--brand-700); min-width: 0; }
.app-bar .ab-title img { width: 34px; height: 34px; border-radius: 10px; object-fit: cover; flex: 0 0 auto; }
.app-bar .ab-title span { font-size: .92rem; max-width: 46vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* جستجوی سریع زیر اپ‌بار */
.app-quicksearch { padding: .7rem .9rem 0; }

/* ============================ نوار تب پایین (نیتیو) ============== */
.app-tabbar {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 1040;
    height: 64px; padding-bottom: env(safe-area-inset-bottom);
    background: rgba(255,255,255,.94); backdrop-filter: saturate(180%) blur(14px);
    border-top: 1px solid var(--line);
    box-shadow: 0 -8px 28px rgba(73,116,48,.09);
    display: flex; align-items: center; justify-content: space-around;
}
.tab-item {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
    color: var(--muted); font-size: .66rem; font-weight: 700; padding-top: 6px; position: relative;
    transition: color .2s;
}
.tab-item i { font-size: 1.4rem; transition: transform .2s; }
.tab-item.active { color: var(--mango-600); }
.tab-item.active i { transform: translateY(-2px) scale(1.05); }
.tab-item.active::before {
    content: ""; position: absolute; top: 0; width: 22px; height: 3px; border-radius: 3px; background: var(--grad-mango);
}
.tab-fab {
    flex: 0 0 auto; width: 62px; height: 62px; border-radius: 50%;
    margin-top: -26px; border: 4px solid var(--bg);
    background: var(--grad-mango); color: #fff; font-size: 1.55rem;
    display: flex; align-items: center; justify-content: center;
    box-shadow: var(--sh-mango); transition: transform .2s;
}
.tab-fab:active { transform: scale(.9); }

/* ============================ اوورلی جستجو ====================== */
.search-overlay {
    position: fixed; inset: 0; z-index: 1060;
    background: rgba(29,39,22,.5); backdrop-filter: blur(5px);
    opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s;
}
.search-overlay.open { opacity: 1; visibility: visible; }
.search-sheet {
    background: #fff; border-radius: 0 0 var(--r-lg) var(--r-lg); padding: 1.1rem 1.1rem 1.5rem;
    transform: translateY(-110%); transition: transform .32s cubic-bezier(.2,.9,.3,1);
    box-shadow: var(--sh-lg);
}
.search-overlay.open .search-sheet { transform: translateY(0); }
.search-sheet .fd-search { background: var(--bg); }
.search-sheet h6 { color: var(--muted); font-weight: 700; }
.search-suggest a {
    display: inline-flex; align-items: center; gap: .35rem; background: var(--brand-50);
    color: var(--brand-700); padding: .35rem .8rem; border-radius: var(--r-pill); font-size: .82rem; font-weight: 700;
}
.search-suggest a:hover { background: var(--brand); color: #fff; }

/* ============================ offcanvas (منوی بیشتر) ============ */
.offcanvas { background: #fff; border-radius: 0 var(--r-lg) var(--r-lg) 0; }
.offcanvas-header { background: var(--grad-brand); color: #fff; }
.menu-button {
    font-size: .95rem; background: var(--brand-50); color: var(--ink) !important; border: none;
    padding: .8rem 1rem; margin: .2rem 0; border-radius: 14px !important;
    display: flex; align-items: center; gap: .7rem; font-weight: 700; transition: all .18s;
}
.menu-button:hover, .menu-button:active { background: var(--grad-brand); color: #fff !important; }
.menu-button i { color: var(--brand); }
.menu-button:hover i, .menu-button:active i { color: #fff; }
.avatar { width: 42px; height: 42px; border: 2px solid #fff; border-radius: 50%; object-fit: cover; box-shadow: var(--sh-xs); }
#typed-text2 { font-size: 14px; font-family: "nast"; }

/* ============================ هیرو/اسلایدر (واکنش‌گرا و بهینه) === */
.hero-slider { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh); background: var(--brand-50); position: relative; }
.hero-slider .carousel-item { height: 400px; transition: opacity .6s ease; }
.hero-slider .carousel-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-slider .carousel-control-prev, .hero-slider .carousel-control-next { width: 9%; opacity: 0; transition: opacity .25s; }
.hero-slider:hover .carousel-control-prev, .hero-slider:hover .carousel-control-next { opacity: .95; }
.hero-slider .carousel-control-prev-icon, .hero-slider .carousel-control-next-icon { width: 46px; height: 46px; background-color: rgba(29,39,22,.45); border-radius: 50%; background-size: 42%; }
.hero-slider .carousel-indicators { margin-bottom: .8rem; }
.hero-slider .carousel-indicators [data-bs-target] { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.65); border: 0; margin: 0 4px; opacity: 1; transition: width .25s, background .25s; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.hero-slider .carousel-indicators .active { width: 28px; border-radius: 6px; background: var(--mango); }
@media (max-width: 991.98px) { .hero-slider .carousel-item { height: 290px; } .hero-slider .carousel-control-prev, .hero-slider .carousel-control-next { opacity: .9; } }
@media (max-width: 767.98px)  { .hero-slider .carousel-item { height: 200px; } }
@media (max-width: 400px)     { .hero-slider .carousel-item { height: 168px; } }

.hero-banner {
    background: var(--grad-hero); border-radius: var(--r-lg); color: #fff;
    padding: 2.4rem 2rem; position: relative; overflow: hidden;
}
.hero-banner::after { content:""; position:absolute; top:-70px; left:-50px; width:280px; height:280px; border-radius:50%; background: radial-gradient(circle, rgba(247,148,29,.4), transparent 70%); }
.hero-banner::before { content:""; position:absolute; bottom:-90px; right:-40px; width:220px; height:220px; border-radius:50%; background: radial-gradient(circle, rgba(255,255,255,.18), transparent 70%); }
.hero-banner h1 { font-weight: 800; font-size: 2rem; position: relative; }
.hero-chip { display:inline-block; background: rgba(255,255,255,.18); color:#fff; padding:.3rem 1rem; border-radius: var(--r-pill); font-size:.82rem; font-weight:700; margin-bottom:1rem; }

/* ============================ هیرو دو ستونه‌ی صفحه اصلی ======== */
.home-hero { position: relative; margin: .5rem 0 2.5rem; }
.section-eyebrow { display:inline-flex; align-items:center; gap:.4rem; background: var(--mango-50); color: var(--mango-700); font-weight:800; font-size:.78rem; padding:.4rem .95rem; border-radius: var(--r-pill); margin-bottom: 1.1rem; }
.hero-headline { font-weight: 900; font-size: 2.7rem; line-height: 1.4; color: var(--ink); margin-bottom: 1rem; letter-spacing: -.5px; }
.hero-headline .accent { background: var(--grad-mango); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.hero-sub { font-size: 1.06rem; color: var(--muted); margin-bottom: 1.6rem; max-width: 44ch; }
.hero-actions { display:flex; flex-wrap:wrap; gap:.7rem; margin-bottom: 1.7rem; }
.hero-trust { display:flex; flex-wrap:wrap; gap: 1.6rem; }
.hero-trust .ht b { display:block; font-size:1.4rem; font-weight:900; color: var(--brand-700); line-height:1; }
.hero-trust .ht span { font-size:.8rem; color: var(--muted); }
.hero-visual { position: relative; }
.hero-visual .float-card { position:absolute; z-index:3; background:#fff; border:1px solid var(--line); border-radius: var(--r); box-shadow: var(--sh-lg); padding:.65rem 1rem; display:flex; align-items:center; gap:.6rem; font-weight:800; font-size:.85rem; color: var(--ink); }
.hero-visual .float-card i { width:38px; height:38px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:1.2rem; }
.hero-visual .fc-1 { bottom: -14px; right: -8px; }
.hero-visual .fc-1 i { background: var(--mango-50); color: var(--mango-600); }
.hero-visual .fc-2 { top: -14px; left: -8px; }
.hero-visual .fc-2 i { background: var(--brand-50); color: var(--brand-700); }

/* کاشی دسته‌بندی */
.cat-tiles { display:grid; grid-template-columns: repeat(8, 1fr); gap: .9rem; }
.cat-tile { display:flex; flex-direction:column; align-items:center; gap:.6rem; background:#fff; border:1px solid var(--line); border-radius: var(--r); padding:1.15rem .5rem; text-align:center; transition: transform .2s, box-shadow .2s, border-color .2s; }
.cat-tile:hover { transform: translateY(-5px); box-shadow: var(--sh); border-color: var(--brand-100); }
.cat-tile .ct-icon { width:54px; height:54px; border-radius:16px; display:flex; align-items:center; justify-content:center; font-size:1.55rem; background: var(--grad-brand); color:#fff; }
.cat-tile:nth-child(3n) .ct-icon { background: var(--grad-mango); }
.cat-tile:nth-child(4n) .ct-icon { background: var(--brand-700); }
.cat-tile span { font-size:.82rem; font-weight:800; color: var(--ink); }

/* بخش «چرا ما» با پس‌زمینه‌ی تینت */
.why-section { background: var(--grad-soft); border: 1px solid var(--brand-100); border-radius: var(--r-xl); padding: 2.6rem 1.5rem; }

/* آکاردئون سوالات متداول */
.faq-accordion .accordion-item { border: 1px solid var(--line); border-radius: var(--r) !important; margin-bottom: .8rem; overflow: hidden; background: #fff; }
.faq-accordion .accordion-button { font-weight: 800; color: var(--ink); background: #fff; padding: 1.1rem 1.2rem; }
.faq-accordion .accordion-button:not(.collapsed) { color: var(--brand-700); background: var(--brand-50); box-shadow: none; }
.faq-accordion .accordion-button:focus { box-shadow: none; }
.faq-accordion .accordion-button::after { background-size: 1rem; }
.faq-accordion .accordion-body { color: var(--body); line-height: 2; }

/* کارت محصول فروشگاه — باکس به اندازه‌ی تصویر، نمایش کامل */
.product-card .thumb { background: #fff; }
.product-card .thumb img { width: 100%; height: auto; display: block; }

/* کارت قیمت محصول (برجسته) */
.price-card { background: var(--brand-50); border: 1px solid var(--brand-100); border-radius: var(--r); padding: 1rem 1.2rem; }
.price-card .pc-label { color: var(--muted); font-size: .88rem; }
.price-card .price-old { color: var(--muted); text-decoration: line-through; font-size: .95rem; }
.price-card .off-pill { background: var(--grad-mango); color: #fff; font-size: .74rem; font-weight: 800; padding: .22rem .7rem; border-radius: var(--r-pill); }
.price-card .pc-now { font-size: 1.95rem; font-weight: 900; color: var(--brand-700); line-height: 1.2; margin-top: .15rem; }
.price-card .pc-now.free { color: var(--mango-600); }

/* اسلایدر افقی کارت‌ها (آخرین محصولات/مقالات) */
.hscroll { display: flex; gap: 1rem; overflow-x: auto; padding: .4rem .2rem 1rem; scroll-snap-type: x mandatory; scroll-behavior: smooth; }
.hscroll::-webkit-scrollbar { height: 8px; }
.hscroll::-webkit-scrollbar-track { background: transparent; }
.hscroll::-webkit-scrollbar-thumb { background: var(--brand-100); border-radius: 8px; }
.hscroll::-webkit-scrollbar-thumb:hover { background: var(--brand); }
.hscroll > * { scroll-snap-align: start; flex: 0 0 auto; width: 270px; }
@media (max-width: 575.98px) { .hscroll > * { width: 80vw; max-width: 300px; } }
.ptype-badge { position:absolute; top:.7rem; right:.7rem; background: rgba(255,255,255,.95); color: var(--brand-700); font-size:.72rem; font-weight:800; padding:.25rem .7rem; border-radius: var(--r-pill); box-shadow: var(--sh-xs); }

/* مراحل / فرآیند */
.step-card { background:#fff; border:1px solid var(--line); border-radius: var(--r); padding: 1.4rem; height:100%; position: relative; transition: transform .2s, box-shadow .2s; }
.step-card:hover { transform: translateY(-4px); box-shadow: var(--sh); }
.step-num { width:42px; height:42px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-weight:900; color:#fff; background: var(--grad-mango); margin-bottom:.8rem; }
.step-card h6 { font-weight:800; color: var(--ink); }

/* کارت پلن/تعرفه */
.plan-card { background:#fff; border:1.5px solid var(--line); border-radius: var(--r-lg); padding: 1.8rem 1.4rem; height:100%; text-align:center; transition: all .2s; }
.plan-card:hover { transform: translateY(-6px); box-shadow: var(--sh-lg); border-color: var(--brand-100); }
.plan-card.featured { border-color: var(--mango); box-shadow: var(--sh); position: relative; }
.plan-card.featured::before { content:"پیشنهاد ویژه"; position:absolute; top:-12px; right:50%; transform:translateX(50%); background: var(--grad-mango); color:#fff; font-size:.72rem; font-weight:800; padding:.25rem .9rem; border-radius: var(--r-pill); white-space:nowrap; }
.plan-card .plan-icon { width:64px; height:64px; border-radius:20px; margin:0 auto 1rem; display:flex; align-items:center; justify-content:center; font-size:1.9rem; background: var(--brand-50); color: var(--brand-700); }
.plan-card h5 { font-weight:800; color: var(--ink); }
.plan-list { list-style:none; padding:0; margin:1rem 0; text-align:start; }
.plan-list li { padding:.45rem 0; border-bottom:1px dashed var(--line); font-size:.88rem; display:flex; align-items:center; gap:.5rem; }
.plan-list li:last-child { border-bottom:none; }
.plan-list li i { color: var(--brand); }

@media (max-width: 991.98px) {
  .hero-headline { font-size: 1.95rem; }
  .cat-tiles { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 575.98px) {
  .hero-headline { font-size: 1.7rem; line-height: 1.5; }
  .hero-sub { font-size: .98rem; }
  .cat-tiles { grid-template-columns: repeat(3, 1fr); gap:.6rem; }
  .cat-tile { padding: .9rem .35rem; }
  .cat-tile .ct-icon { width:46px; height:46px; font-size:1.3rem; }
}

/* ============================ آمار (کارت شیشه‌ای روشن) ========== */
.stats-strip {
    background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
    box-shadow: var(--sh); padding: 1.4rem 1rem;
}
.stat-cell { text-align: center; padding: .4rem; }
.stat-cell .stat-icon {
    width: 52px; height: 52px; border-radius: 16px; margin: 0 auto .55rem;
    display: flex; align-items: center; justify-content: center; font-size: 1.5rem;
    background: var(--brand-50); color: var(--brand-700);
}
.stat-cell:nth-child(2n) .stat-icon { background: var(--mango-50); color: var(--mango-600); }
.stat-cell h4 { font-size: 1.6rem; font-weight: 800; color: var(--ink); margin: 0; }
.stat-cell span { font-size: .82rem; color: var(--muted); }

/* ============================ عنوان بخش ======================== */
.section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.2rem; }
.section-title { font-weight: 800; color: var(--ink); position: relative; padding-right: .95rem; margin: 0; font-size: 1.25rem; }
.section-title::before { content:""; position:absolute; right:0; top:50%; transform:translateY(-50%); width:6px; height:1.3em; border-radius:6px; background: var(--grad-mango); }
.section-title small { display:block; font-size:.75rem; font-weight:600; color: var(--muted); margin-top: 2px; }
.link-all { display:inline-flex; align-items:center; gap:.35rem; color: var(--brand-700); font-weight:700; font-size:.88rem; background: var(--brand-50); padding:.4rem .9rem; border-radius: var(--r-pill); }
.link-all:hover { background: var(--brand); color:#fff; }

/* ============================ کارت دوره ======================== */
.course-card {
    background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
    overflow: hidden; height: 100%; display: flex; flex-direction: column;
    transition: transform .22s, box-shadow .22s, border-color .22s;
}
.course-card:hover { transform: translateY(-6px); box-shadow: var(--sh-lg); border-color: var(--brand-100); }
/* باکس به اندازه‌ی خودِ تصویر؛ تصویر کامل و بدون فشرده‌سازی/برش */
.course-card .thumb { position: relative; overflow: hidden; background: #fff; line-height: 0; }
.course-card .thumb img { width: 100%; height: auto; display: block; transition: transform .4s; }
.course-card:hover .thumb img { transform: scale(1.03); }
.course-card .level-badge { position:absolute; top:.7rem; right:.7rem; background: rgba(255,255,255,.95); color: var(--brand-700); font-size:.72rem; font-weight:800; padding:.28rem .75rem; border-radius: var(--r-pill); box-shadow: var(--sh-xs); }
.course-card .off-badge { position:absolute; top:.7rem; left:.7rem; background: var(--grad-mango); color:#fff; font-size:.72rem; font-weight:800; padding:.28rem .7rem; border-radius: var(--r-pill); box-shadow: var(--sh-mango); }
.course-card .card-body { padding: 1.05rem; display: flex; flex-direction: column; flex: 1; }
.course-card .title { font-weight: 800; color: var(--ink); font-size: 1rem; line-height: 1.6; margin-bottom: .4rem; }
.course-card .title a { color: inherit; }
.course-card .title a:hover { color: var(--brand-700); }
.course-card .desc { font-size: .82rem; color: var(--muted); margin-bottom: .8rem; }
.course-meta { display: flex; align-items: center; gap: 1rem; font-size: .78rem; color: var(--muted); margin-bottom: .7rem; }
.course-meta i { color: var(--brand); }
.instructor-row { display: flex; align-items: center; gap: .5rem; font-size: .8rem; color: var(--body); }
.instructor-row img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; }
.rating { color: var(--mango-600); font-size: .82rem; font-weight: 800; }
.rating .count { color: var(--muted); font-weight: 500; }
.course-foot { margin-top: auto; padding-top: .85rem; border-top: 1px dashed var(--line); display: flex; align-items: center; justify-content: space-between; }
.price-tag { font-weight: 800; color: var(--brand-700); font-size: 1.05rem; }
.price-tag.free { color: var(--mango-600); }
.price-old { font-size: .76rem; color: var(--muted); text-decoration: line-through; }
.home-course-grid .course-card .card-body { padding: .88rem; }
.home-course-grid .course-card .title { font-size: .94rem; line-height: 1.55; }
.home-course-grid .course-card .desc { font-size: .78rem; margin-bottom: .65rem; }
.home-course-grid .course-meta { font-size: .74rem; gap: .7rem; margin-bottom: .55rem; }
.home-course-grid .instructor-row { font-size: .76rem; }
.home-course-grid .price-tag { font-size: .96rem; }

/* ============================ chip اسکرول‌شونده / سگمنت ======== */
.chip-scroller { display: flex; gap: .55rem; overflow-x: auto; padding: .2rem .1rem .6rem; scroll-snap-type: x mandatory; -ms-overflow-style: none; scrollbar-width: none; }
.chip-scroller::-webkit-scrollbar { display: none; }
.cat-pill { flex: 0 0 auto; scroll-snap-align: start; border: 1.5px solid var(--line); background: #fff; color: var(--body); padding: .5rem 1.15rem; border-radius: var(--r-pill); font-size: .85rem; font-weight: 700; transition: all .18s; white-space: nowrap; }
.cat-pill:hover { border-color: var(--brand); color: var(--brand-700); }
.cat-pill.active { background: var(--grad-brand); border-color: transparent; color: #fff; box-shadow: var(--sh-sm); }

.segmented { display: inline-flex; background: var(--brand-50); border-radius: var(--r-pill); padding: 4px; gap: 2px; }
.segmented a { padding: .4rem 1rem; border-radius: var(--r-pill); font-size: .82rem; font-weight: 700; color: var(--brand-700); }
.segmented a.active { background: #fff; color: var(--mango-600); box-shadow: var(--sh-xs); }

/* ============================ کارت امکانات ===================== */
.feature-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.7rem 1.3rem; text-align: center; transition: transform .2s, box-shadow .2s; height: 100%; }
.feature-card:hover { transform: translateY(-5px); box-shadow: var(--sh); }
.feature-card .f-icon { width: 64px; height: 64px; border-radius: 20px; margin: 0 auto 1rem; display: flex; align-items: center; justify-content: center; font-size: 1.9rem; background: var(--brand-50); color: var(--brand-700); }
.feature-card:nth-child(2n) .f-icon { background: var(--mango-50); color: var(--mango-600); }
.feature-card h6 { font-weight: 800; color: var(--ink); }

/* ============================ بنر CTA ========================== */
.cta-banner { background: var(--grad-hero); border-radius: var(--r-lg); color: #fff; padding: 2.3rem; position: relative; overflow: hidden; }
.cta-banner::after { content:""; position:absolute; bottom:-60px; right:-30px; width:220px; height:220px; border-radius:50%; background: radial-gradient(circle, rgba(247,148,29,.45), transparent 70%); }
.cta-banner h3 { font-weight: 800; position: relative; }

/* ============================ نوار لوگوها (مارکی گردشی) ======= */
.marquee { overflow: hidden; position: relative; width: 100%; padding: .3rem 0;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.marquee-track { display: flex; gap: 1rem; width: max-content; animation: marquee 30s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track.marquee-rev { animation-direction: reverse; }
.marquee-track .logo-box { flex: 0 0 auto; width: 165px; height: 92px; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }

.logo-swiper .swiper-slide { display: flex; align-items: center; justify-content: center; }
.logo-swiper .logo-box { background:#fff; border:1px solid var(--line); border-radius: var(--r); padding: 1rem; width: 100%; height: 92px; display:flex; align-items:center; justify-content:center; box-shadow: var(--sh-xs); }
.logo-swiper img { max-height: 60px; width: auto; filter: grayscale(35%); opacity: .9; transition: all .2s; }
.logo-swiper .logo-box:hover img { filter: none; opacity: 1; }

/* ============================ کارت مقاله ====================== */
.blog-card { border-radius: var(--r-lg); overflow: hidden; background:#fff; border: 1px solid var(--line); transition: transform .2s, box-shadow .2s; height: 100%; display: flex; flex-direction: column; position: relative; }
.blog-card:hover { transform: translateY(-5px); box-shadow: var(--sh-lg); }
.blog-card img { height: 190px; object-fit: contain; width: 100%; background: #fff; }
.blog-card .card-body { flex: 1; display: flex; flex-direction: column; padding: 1.05rem; }
.blog-card .category-badge { position: absolute; top: 12px; right: 12px; z-index: 1; background: var(--grad-mango) !important; color: #fff; font-size: .72rem; font-weight: 700; padding: .3rem .8rem; border-radius: var(--r-pill); box-shadow: var(--sh-mango); }
.blog-card h6 { font-weight: 800; color: var(--ink); min-height: 48px; }
.blog-card .read-time { font-size: .8rem; color: var(--muted); margin-top: auto; }

/* ============================ جزئیات مقاله =================== */
.featured-image { border-radius: var(--r-lg); margin-bottom: 20px; overflow: hidden; }
.article-content h2 { font-size: 1.5rem; margin: 1.6rem 0 1rem; color: var(--brand-700); font-weight: 800; }
.article-content h3 { font-size: 1.25rem; margin: 1.3rem 0 .8rem; color: var(--ink); font-weight: 800; }
.article-content p { line-height: 2.1; margin-bottom: 1rem; text-align: justify; color: var(--body); }
.article-content ul, .article-content ol { margin-right: 1.6rem; margin-bottom: 1rem; line-height: 2.1; }
.article-content img { max-width: 100%; border-radius: var(--r); margin: 1.2rem auto; display: block; }
.article-content blockquote { border-right: 4px solid var(--mango); background: var(--mango-50); padding: 1rem 1.2rem; border-radius: 0 var(--r) var(--r) 0; margin: 1.2rem 0; }
.login-required-placeholder { display: inline-flex; align-items: center; flex-wrap: wrap; gap: .55rem; max-width: 100%; margin: .35rem 0; padding: .65rem .8rem; border: 1px dashed var(--mango-600); border-radius: var(--r-sm); background: #fff9e8; color: var(--ink); font-size: .9rem; line-height: 1.7; }
.login-required-placeholder > i { color: var(--mango-600); }
.login-required-placeholder > a { display: inline-flex; align-items: center; padding: .25rem .7rem; border-radius: var(--r-pill); background: var(--brand); color: #fff !important; font-weight: 700; text-decoration: none; white-space: nowrap; }
.login-required-placeholder > a:hover { background: var(--brand-700); }
.article-meta { background: var(--brand-50); border-radius: var(--r); padding: 1rem; font-size: .9rem; color: var(--muted); }
.share-buttons a { width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; background: var(--brand-50); border-radius: 14px; color: var(--link); margin: 0 4px; transition: all .2s; }
.share-buttons a:hover { background: var(--brand-50); color: var(--link-hover); transform: translateY(-2px); }
.comment { border-bottom: 1px dashed var(--line); padding-bottom: 1rem; margin-bottom: 1rem; }
.comment:last-child { border-bottom: none; }
.comment .avatar { width: 44px; height: 44px; border-radius: 50%; }

/* ============================ جزئیات دوره ==================== */
.course-hero-banner { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh); }
.course-hero-banner img { width: 100%; object-fit: cover; }
.buy-box { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh); padding: 1.5rem; position: sticky; top: 96px; }
.buy-box .price-now { font-size: 1.7rem; font-weight: 800; color: var(--brand-700); }
.buy-box .price-now.free { color: var(--mango-600); }
.info-list { list-style: none; padding: 0; margin: 1.2rem 0 0; }
.info-list li { display: flex; align-items: center; gap: .6rem; padding: .6rem 0; border-bottom: 1px dashed var(--line); font-size: .88rem; color: var(--body); }
.info-list li:last-child { border-bottom: none; }
.info-list li i { color: var(--brand); width: 20px; text-align: center; }
.nav-tabs { border-bottom: 2px solid var(--line); gap: .3rem; }
.nav-tabs .nav-link { border: none; color: var(--muted); font-weight: 800; border-radius: var(--r-sm) var(--r-sm) 0 0; }
.nav-tabs .nav-link.active { color: var(--brand-700); background: var(--brand-50); border-bottom: 3px solid var(--mango); }
.section-accordion .accordion-button { font-weight: 800; color: var(--ink); background: var(--brand-50); border-radius: 14px !important; }
.section-accordion .accordion-button:not(.collapsed) { background: var(--brand-100); color: var(--brand-700); }
.section-accordion .accordion-button:focus { box-shadow: none; }
.lesson-item { border-right: 3px solid var(--brand); padding: .55rem 1rem .55rem 0; margin-bottom: .5rem; display: flex; align-items: center; justify-content: space-between; background: #fff; border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.lesson-item .duration { font-size: .8rem; color: var(--muted); }
.lesson-item i { color: var(--brand); }

/* ============================ صفحات داخلی (legacy) =========== */
.hero-about { background: var(--grad-hero); color:#fff; border-radius: var(--r-lg); padding: 2.2rem; position: relative; overflow: hidden; }
.hero-about::after { content:""; position:absolute; top:-60px; left:-40px; width:240px; height:240px; border-radius:50%; background: radial-gradient(circle, rgba(247,148,29,.35), transparent 70%); }
.hero-about h1, .hero-about h3 { position: relative; }
.team-member { border-radius: var(--r); overflow: hidden; box-shadow: var(--sh-sm); transition: transform .3s; }
.team-member:hover { transform: translateY(-10px); }
.team-member img { height: 200px; object-fit: cover; }
.team-member .info { padding: 1rem; background: #fff; }
.team-member .name { font-weight: bold; color: var(--brand-700); }
.team-member .role { font-size: .9rem; color: var(--muted); }
.value-item, .contact-item { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1.5rem; }
.value-icon, .contact-icon { font-size: 1.8rem; color: var(--brand); min-width: 50px; text-align: center; }
.value-text h5, .contact-text h6 { font-weight: bold; color: var(--brand-700); }
.contact-card, .order-form { background: #fff; border-radius: var(--r-lg); box-shadow: var(--sh-sm); padding: 2rem; }
.contact-text p { color: #555; }
.contact-text a { color: var(--link); }
.contact-text a:hover { color: var(--link-hover); }
.hours { background: var(--brand-50); border-radius: var(--r); padding: 1rem; font-size: .95rem; }
.hours .day { font-weight: bold; }
.service-card { border: 2px solid var(--line); border-radius: var(--r); padding: 1.2rem; cursor: pointer; transition: all .3s; }
.service-card:hover, .service-card.selected { border-color: var(--brand); background: var(--brand-50); }
.price-estimate { background: var(--mango-50); border-radius: var(--r); padding: 1rem; border: 1px solid var(--mango-100); }
.file-upload { border: 2px dashed var(--line); border-radius: var(--r); padding: 1.5rem; text-align: center; cursor: pointer; }
.file-upload:hover { border-color: var(--brand); background: var(--brand-50); }

/* ============================ فرم‌ها ========================= */
.form-control, .form-select, textarea { border-radius: 14px; padding: .75rem 1rem; border: 1.5px solid var(--line); background: #fff; color: var(--ink); }
.form-control:focus, .form-select:focus, textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 4px rgba(111,168,75,.12); }
.form-label { font-weight: 700; color: var(--brand-700); }

/* ============================ ورود/OTP ====================== */
.auth-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--grad-soft); padding: 1rem; }
.login-card { width: 440px; max-width: 95vw; border-radius: var(--r-xl) !important; box-shadow: var(--sh-lg); border: 1px solid var(--line); }
.otp-input-group { gap: 10px; }
.otp-input { width: 48px !important; height: 56px !important; font-size: 24px !important; text-align: center; padding: 0 !important; border-radius: 14px; }
.otp-input:focus { border-color: var(--brand); box-shadow: 0 0 0 4px rgba(111,168,75,.18); }

/* ============================ فوتر ========================== */
.fd-footer { margin-top: 4rem; }
.fd-footer .footer-main { background: var(--grad-hero); color: #fff; border-radius: var(--r-xl) var(--r-xl) 0 0; padding: 2.6rem 1.6rem 1.6rem; position: relative; overflow: hidden; }
.fd-footer .footer-main::after { content:""; position:absolute; top:-50px; left:-30px; width:200px; height:200px; border-radius:50%; background: radial-gradient(circle, rgba(247,148,29,.25), transparent 70%); }
.fd-footer h6 { font-weight: 800; margin-bottom: 1rem; color: #fff; }
.fd-footer a { color: rgba(255,255,255,.85); }
.fd-footer a:hover { color: var(--mango-100); }
.fd-footer ul { list-style: none; padding: 0; }
.fd-footer ul li { margin-bottom: .55rem; font-size: .9rem; }
.fd-footer .social-btn { width: 44px; height: 44px; border-radius: 14px; background: rgba(255,255,255,.14); display: inline-flex; align-items: center; justify-content: center; margin: 0 4px; transition: all .2s; }
.fd-footer .social-btn:hover { background: var(--grad-mango); transform: translateY(-2px); }
.fd-copyright { background: var(--brand-700); color: rgba(255,255,255,.8); text-align: center; padding: .8rem; font-size: .82rem; }

/* ============================ چنل‌آرت تمام‌عرض ============== */
.channel-art { width: 100%; line-height: 0; }
.channel-art img { width: 100%; height: auto; display: block; }

/* بنر بخش‌های صفحه */
.page-banner { display: block; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-sm); line-height: 0; transition: transform .2s, box-shadow .2s; }
.page-banner:hover { transform: translateY(-3px); box-shadow: var(--sh); }
.page-banner img { width: 100%; height: auto; display: block; }

/* ============================ دکمه پشتیبانی شناور ============ */
.support-fab { position: fixed; bottom: 2rem; left: 2rem; z-index: 1045; }
.support-btn { width: 58px; height: 58px; border-radius: 50%; border: none; background: var(--grad-brand); color: #fff; font-size: 1.6rem; box-shadow: var(--sh-lg); display: flex; align-items: center; justify-content: center; transition: transform .2s; }
.support-btn:active { transform: scale(.9); }
/* منو به‌صورت absolute بالای دکمه باز می‌شود تا فضای اضافی اشغال نکند */
.support-menu { position: absolute; bottom: calc(100% + .6rem); left: 0; display: flex; flex-direction: column; gap: .5rem; opacity: 0; visibility: hidden; transform: translateY(12px); transition: .22s; }
.support-fab.open .support-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.support-opt { display: flex; align-items: center; gap: .5rem; background: #fff; border: 1px solid var(--line); border-radius: var(--r-pill); padding: .5rem 1rem; font-weight: 800; font-size: .85rem; color: var(--ink); box-shadow: var(--sh); white-space: nowrap; }
.support-opt:hover { color: var(--brand-700); }
.support-opt img { width: 22px; height: 22px; }
.support-opt.tg i { color: #229ED9; font-size: 1.25rem; }
@media (max-width: 991.98px) { .support-fab { bottom: calc(80px + env(safe-area-inset-bottom)); left: 1rem; } .support-btn { width: 52px; height: 52px; font-size: 1.35rem; } }

/* ============================ نمادهای اعتماد فوتر =========== */
.footer-badges { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.footer-badges .badge-box { background: #fff; border-radius: 12px; padding: 6px; min-height: 74px; display: flex; align-items: center; justify-content: center; }
.footer-badges .badge-box img { max-height: 62px; width: auto; }
.footer-badges .badge-ph { background: rgba(255,255,255,.1); border: 1px dashed rgba(255,255,255,.4); color: #fff; border-radius: 12px; height: 74px; width: 78px; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: .6rem; text-align: center; gap: 3px; }
.footer-badges .badge-ph i { font-size: 1.4rem; }
.footer-credit { background: #1a230d; color: rgba(255,255,255,.75); text-align: center; padding: .7rem; font-size: .8rem; }
.footer-credit a { color: var(--mango-100); font-weight: 700; }

/* ============================ سبد خرید ====================== */
.cart-link { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 14px; background: var(--brand-50); color: var(--brand-700); font-size: 1.25rem; }
.cart-link:hover { background: var(--brand); color: #fff; }
.cart-badge { position: absolute; top: -5px; left: -6px; background: var(--grad-mango); color: #fff; font-size: .62rem; font-weight: 800; min-width: 18px; height: 18px; border-radius: 9px; display: flex; align-items: center; justify-content: center; padding: 0 4px; box-shadow: var(--sh-mango); }
.tab-item { position: relative; }
.tab-item .cart-badge { top: 2px; left: 50%; transform: translateX(6px); }

.cart-row { display: flex; align-items: center; gap: 1rem; padding: 1rem; border: 1px solid var(--line); border-radius: var(--r); background: #fff; margin-bottom: .8rem; }
.cart-row .c-img { width: 74px; height: 74px; object-fit: contain; border-radius: 12px; background: var(--brand-50); flex: 0 0 auto; }
.cart-row .c-title { font-weight: 800; color: var(--ink); }
.qty-stepper { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: var(--r-pill); overflow: hidden; }
.qty-stepper button { border: none; background: var(--brand-50); color: var(--brand-700); width: 34px; height: 34px; font-weight: 800; font-size: 1.1rem; }
.qty-stepper button:hover { background: var(--brand); color: #fff; }
.qty-stepper input { width: 44px; text-align: center; border: none; outline: none; font-weight: 700; background: #fff; }
.cart-summary { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.5rem; box-shadow: var(--sh-sm); position: sticky; top: 96px; }
.cart-summary .row-line { display: flex; justify-content: space-between; align-items: center; padding: .55rem 0; border-bottom: 1px dashed var(--line); font-size: .92rem; }
.cart-summary .row-line.total { border-bottom: none; font-weight: 800; font-size: 1.15rem; color: var(--brand-700); }
.coupon-box { display: flex; gap: .5rem; }
@media (max-width: 991.98px) { .cart-summary { position: static; } }

/* ============================ صفحه‌بندی ===================== */
.pagination .page-link { color: var(--brand-700); border: 1.5px solid var(--line); border-radius: 12px !important; margin: 0 3px; font-weight: 700; }
.pagination .page-item.active .page-link { background: var(--grad-brand); border-color: transparent; color: #fff; }
.pagination .page-link:hover { background: var(--brand-50); }

/* ============================ Swiper ======================== */
.swiper-button-next, .swiper-button-prev { color: var(--brand) !important; }
.swiper-pagination-bullet-active { background: var(--mango) !important; }

/* ============================ انیمیشن ورود =================== */
@keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
.reveal { animation: fadeUp .5s ease both; }

/* ============================ ریسپانسیو ==================== */
@media (max-width: 991.98px) {
    body { padding-bottom: calc(66px + env(safe-area-inset-bottom)); }
    .hero-banner h1 { font-size: 1.5rem; }
    .buy-box { position: static; }
    .section-title { font-size: 1.1rem; }
    .stat-cell h4 { font-size: 1.3rem; }
    main.container { padding-left: 14px; padding-right: 14px; }
}
@media (min-width: 992px) {
    .app-tabbar, .app-bar, .app-quicksearch { display: none !important; }
}
/* ============================ نوار خرید سریع موبایل ============ */
.quick-buy-bar {
  background: var(--brand-50);
  border: 1px solid var(--brand-100);
  border-radius: var(--r);
  padding: 1rem 1.25rem;
}

.quick-buy-bar .price-now {
  font-weight: 800;
  color: var(--brand-700);
  font-size: 1.2rem;
  line-height: 1.2;
}

.quick-buy-bar .price-now.free {
  color: var(--mango-600);
}

.quick-buy-bar .price-old {
  color: var(--muted);
  text-decoration: line-through;
  font-size: 0.85rem;
  margin-bottom: 0.15rem;
}

.quick-buy-bar .off-pill {
  display: inline-block;
  background: var(--grad-mango);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 800;
  padding: 0.2rem 0.6rem;
  border-radius: var(--r-pill);
  margin-right: 0.5rem;
}

@media (min-width: 768px) {
  .quick-buy-bar {
    display: none;
  }
}

/* ============================ نوار خرید چسبان موبایل ============ */
.mobile-sticky-cta {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1050;
  background: #fff;
  border-top: 1px solid var(--line);
  padding: 0.75rem 1rem;
  padding-bottom: calc(0.75rem + env(safe-area-inset-bottom));
  box-shadow: 0 -4px 20px rgba(73,116,48,0.12);
  display: flex;
  align-items: center;
  gap: 1rem;
}

.mobile-sticky-cta .cta-price {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 90px;
}

.mobile-sticky-cta .cta-price .old-price {
  font-size: 0.72rem;
  color: var(--muted);
  text-decoration: line-through;
  line-height: 1;
}

.mobile-sticky-cta .cta-price .discount {
  font-size: 0.68rem;
  color: var(--mango-600);
  font-weight: 700;
  line-height: 1;
}

.mobile-sticky-cta .cta-price .now-price {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--brand-700);
  line-height: 1.2;
}

.mobile-sticky-cta .cta-price .free {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--mango-600);
  line-height: 1.2;
}

.mobile-sticky-cta .cta-button {
  flex: 1;
}

.mobile-sticky-cta .btn {
  padding: 0.65rem 1rem;
  font-size: 0.88rem;
  border-radius: var(--r-pill);
  white-space: nowrap;
}

@media (min-width: 768px) {
  .mobile-sticky-cta {
    display: none;
  }
}

/* تنظیم padding-bottom برای body در موبایل تا content پشت CTA پنهان نشود */
@media (max-width: 767.98px) {
  body {
    padding-bottom: calc(75px + env(safe-area-inset-bottom)) !important;
  }

  /* buy-box اصلی در موبایل static شود */
  .buy-box {
    position: static !important;
    margin-top: 2rem;
    margin-bottom: 2rem;
  }
}