/* FIX (2026-10-13, P11-T1): রং লোগোর সবুজ (মূল #2e8036) + লাল (#d63a33 / #ec4b43) — আগের নেভি/নীল/সোনালি থেকে; বিস্তারিত docs/SMARTSCHOOL_UPDATE_2026-10-13_BN.md */
/* =====================================================================
   SmartSchool Uniform BD — FRONTEND PRO (2026-09-28)
   ---------------------------------------------------------------------
   এই ফাইলটা app.css ও pro-ui.css-এর *পরে* লোড হয় (layouts/frontend, auth, admin-auth)।
   পুরনো class-নাম (su-*, auth-*, cart-*, track-*, …) সব অক্ষত — এখানে শুধু নতুন
   component (sf-* = "SmartSchool Frontend") আর কিছু পুরনো নিয়মের উপর polish।
   ভাগসমূহ: ১ token · ২ base/typography · ৩ header+drawer · ৪ wizard steps · ৫ hero ·
   ৬ home sections · ৭ footer · ৮ motion/effects · ৯ wizard-পাতার polish · ১০ auth ·
   ১১ admin-auth (split) · ১২ responsive · ১৩ reduced-motion/print
   ===================================================================== */

/* ---------- ১. Design tokens ---------- */
:root {
    --sf-navy: #2e8036;
    --sf-navy-2: #276e2e;
    --sf-navy-900: #215c27;
    --sf-blue: #2c8337;
    --sf-sky: #4caf50;
    --sf-gold: #d63a33;
    --sf-gold-2: #b72f29;
    --sf-green: #12955b;
    --sf-rose: #e11d48;
    --sf-ink: #14231a;
    --sf-muted: #696d74;
    --sf-line: #e2e5e9;
    --sf-bg: #f5f9f5;
    --sf-card: #ffffff;
    --sf-radius: 20px;
    --sf-radius-sm: 12px;
    --sf-shadow-sm: 0 6px 18px rgba(46, 128, 54, .06);
    --sf-shadow-md: 0 16px 40px rgba(46, 128, 54, .10);
    --sf-shadow-lg: 0 30px 70px rgba(46, 128, 54, .16);
    --sf-font: 'Inter', 'Noto Sans Bengali', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --sf-header-h: 72px;
    --sf-ease: cubic-bezier(.22, 1, .36, 1);
}

/* ---------- ২. Base & typography ---------- */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body.sf-body {
    font-family: var(--sf-font);
    color: var(--sf-ink);
    background: var(--sf-bg);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    /* পাতা খোলার সময় নরম fade-in (JS ছাড়াই) — শুধু opacity: body-তে transform animate করলে
       position:fixed (drawer/backdrop) body-র সাপেক্ষে হয়ে পুরো পাতার সমান লম্বা হয়ে যেত */
    animation: sfBodyIn .45s var(--sf-ease) both;
}
body.sf-body :lang(bn) { letter-spacing: 0; }
body.sf-body h1, body.sf-body h2, body.sf-body h3 { font-weight: 800; line-height: 1.18; }
body.sf-body h1:lang(en), body.sf-body h2:lang(en) { letter-spacing: -.03em; }
/* iOS-এ ইনপুটে চাপলে জুম হয়ে আটকে যাওয়া বন্ধ (১৬px-এর নিচে হলে জুম করে) */
body.sf-body input, body.sf-body select, body.sf-body textarea { font-size: 16px; }
body.sf-body ::selection { background: rgba(46, 128, 54, .16); }
.sf-container { width: min(1180px, calc(100% - 32px)); margin-inline: auto; }
.sf-visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sf-skip { position: absolute; left: 12px; top: -60px; z-index: 200; background: var(--sf-navy); color: #fff; padding: 10px 14px; border-radius: 10px; font-weight: 700; transition: top .2s; }
.sf-skip:focus { top: 12px; }

/* main শেল — পুরনো .su-shell/.su-app-card-এর উপর polish */
.sf-main { flex: 1 0 auto; width: 100%; }
.sf-main .su-shell { width: min(1180px, calc(100% - 32px)); margin: 22px auto 34px; }
.sf-main .su-app-card {
    border-radius: 28px;
    border: 1px solid rgba(46, 128, 54, .10);
    background: linear-gradient(160deg, #ffffff, #fbfdfb 60%, #f5fbf6);
    box-shadow: var(--sf-shadow-md);
    padding: clamp(18px, 3vw, 34px);
    min-height: 420px;
}
.sf-main .su-app-card:before { display: none; }
/* বাংলা/English মিশ্র hero-শিরোনামের প্রথম পর্দার ফাঁকা জায়গা কমানো */
.sf-main .su-center-section { margin-top: clamp(26px, 5vw, 60px); }
/* label centered থাকত (.su-center-section text-align:center inherit) — এখন ফর্মের লেখা বাঁয়ে */
.sf-main .su-center-section form, .sf-main .su-center-section .su-form-card { text-align: left; }

/* ---------- ৩. Header + mobile drawer ---------- */
.sf-header {
    position: sticky; top: 0; z-index: 90;
    background: rgba(255, 255, 255, .78);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    backdrop-filter: blur(16px) saturate(160%);
    border-bottom: 1px solid rgba(46, 128, 54, .08);
    transition: box-shadow .25s, background .25s;
}
.sf-header.is-scrolled { background: rgba(255, 255, 255, .92); box-shadow: 0 10px 30px rgba(46, 128, 54, .10); }
.sf-header__inner { min-height: var(--sf-header-h); display: flex; align-items: center; gap: 14px; }
.sf-logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; flex: 0 0 auto; }
.sf-logo img { display: block; height: 44px; width: auto; max-width: min(220px, 48vw); object-fit: contain; }
.sf-nav { display: flex; align-items: center; gap: 6px; margin-left: 6px; flex-wrap: nowrap; }
.sf-nav__link {
    display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
    min-height: 40px; padding: 8px 14px; border-radius: 999px;
    color: var(--sf-navy); font-weight: 700; font-size: 14px; text-decoration: none;
    border: 1px solid transparent; transition: background .2s, color .2s, transform .2s, box-shadow .2s;
}
.sf-nav__link:hover { background: rgba(46, 128, 54, .07); transform: translateY(-1px); }
.sf-nav__link.active { background: var(--sf-navy); color: #fff; box-shadow: 0 10px 22px rgba(46, 128, 54, .22); }
.sf-header__actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.sf-header__actions .su-lang-switch { margin: 0; }
.sf-cart-btn {
    position: relative; display: inline-flex; align-items: center; gap: 7px;
    min-height: 40px; padding: 8px 14px; border-radius: 999px; text-decoration: none;
    background: #fff; border: 1px solid rgba(46, 128, 54, .16); color: var(--sf-navy); font-weight: 800; font-size: 14px;
    transition: transform .2s, box-shadow .2s, background .2s;
}
.sf-cart-btn:hover, .sf-cart-btn.active { background: var(--sf-navy); color: #fff; transform: translateY(-1px); box-shadow: 0 10px 22px rgba(46, 128, 54, .22); }
.sf-cart-badge {
    position: absolute; top: -7px; right: -6px; min-width: 20px; height: 20px; padding: 0 6px;
    border-radius: 999px; background: var(--sf-gold); color: #ffffff; font-size: 11.5px; font-weight: 900;
    display: inline-grid; place-items: center; box-shadow: 0 4px 12px rgba(214, 58, 51, .5);
    animation: sfPop .35s var(--sf-ease) both;
}
.sf-cart-badge[data-count="0"] { display: none; }
.sf-btn-admin { background: linear-gradient(135deg, #317337, #2e8036); color: #fff; border-color: transparent; }
.sf-btn-admin:hover { background: linear-gradient(135deg, #215c27, #276e2e); color: #fff; }
.sf-btn-login { background: #eef8ef; }
.sf-btn-logout { background: #fff; border: 1px solid rgba(46, 128, 54, .16); color: var(--sf-navy); font-weight: 800; cursor: pointer; min-height: 40px; padding: 8px 14px; border-radius: 999px; display: inline-flex; align-items: center; gap: 7px; font-size: 14px; }
.sf-btn-logout:hover { background: #fee2e2; color: #991b1b; border-color: #fecaca; }
.sf-burger {
    display: none; width: 44px; height: 44px; border-radius: 12px; border: 1px solid rgba(46, 128, 54, .16);
    background: #fff; color: var(--sf-navy); cursor: pointer; place-items: center; flex: 0 0 auto;
}
.sf-burger:hover { background: #eef8ef; }

/* Drawer (ফোন/ট্যাব) — [hidden] থাকলে CSS না এলেও পাতায় ভেসে ওঠে না */
.sf-backdrop { position: fixed; inset: 0; background: rgba(33, 92, 39, .55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); z-index: 120; opacity: 0; transition: opacity .25s; }
.sf-backdrop[hidden] { display: none; }
.sf-backdrop.is-open { opacity: 1; }
.sf-drawer {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 130; width: min(340px, 88vw);
    background: #fff; box-shadow: -20px 0 60px rgba(33, 92, 39, .25);
    display: flex; flex-direction: column; transform: translateX(104%);
    transition: transform .34s var(--sf-ease); padding-bottom: env(safe-area-inset-bottom);
}
.sf-drawer[hidden] { display: none; }
.sf-drawer.is-open { transform: translateX(0); }
.sf-drawer__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--sf-line); }
.sf-drawer__head img { height: 40px; width: auto; max-width: 180px; object-fit: contain; display: block; }
.sf-drawer__close { width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--sf-line); background: #f8fcf8; color: var(--sf-navy); display: grid; place-items: center; cursor: pointer; }
.sf-drawer__nav { display: grid; gap: 4px; padding: 12px; overflow: auto; }
.sf-drawer__nav a, .sf-drawer__nav button {
    display: flex; align-items: center; gap: 12px; padding: 13px 14px; border-radius: 14px;
    color: var(--sf-ink); font-weight: 700; text-decoration: none; background: transparent; border: 0; font: inherit; cursor: pointer; text-align: left; width: 100%;
}
.sf-drawer__nav a .su-icon, .sf-drawer__nav button .su-icon { width: 20px; height: 20px; color: var(--sf-navy); }
.sf-drawer__nav a:hover, .sf-drawer__nav a.active { background: #eef8ef; color: var(--sf-navy); }
.sf-drawer__nav a.admin-entry { background: linear-gradient(135deg, #317337, #2e8036); color: #fff; }
.sf-drawer__nav a.admin-entry .su-icon { color: #fff; }
.sf-drawer__nav .sf-drawer__logout { color: #991b1b; }
.sf-drawer__foot { margin-top: auto; padding: 14px 16px 18px; border-top: 1px solid var(--sf-line); display: grid; gap: 10px; font-size: 13px; color: var(--sf-muted); }
.sf-drawer__foot .su-lang-switch { justify-self: start; margin: 0; }
body.sf-drawer-open { overflow: hidden; }

/* ---------- ৪. Wizard step bar ---------- */
.sf-steps { width: min(1180px, calc(100% - 32px)); margin: 18px auto 0; }
.sf-steps__list { list-style: none; margin: 0; padding: 6px; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; background: rgba(255, 255, 255, .8); border: 1px solid rgba(46, 128, 54, .10); border-radius: 999px; box-shadow: var(--sf-shadow-sm); }
.sf-steps__list::-webkit-scrollbar { display: none; }
/* FIX (2026-10-15, P21 F-15): বাকি ধাপের লেখা গাঢ় — আগে #989da5 / #8d9198 (সাদায় ~২.৭:১, পড়া কঠিন); এখন ~৫.৬:১ */
.sf-steps__item { flex: 1 0 auto; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 999px; color: #5f6670; font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.sf-steps__num { width: 26px; height: 26px; border-radius: 50%; display: inline-grid; place-items: center; background: #eef3ee; color: #5b6169; font-size: 12px; font-weight: 900; transition: all .25s; }
.sf-steps__item.is-done { color: var(--sf-navy); }
.sf-steps__item.is-done .sf-steps__num { background: var(--sf-navy); color: #fff; }
.sf-steps__item.is-current { background: var(--sf-navy); color: #fff; box-shadow: 0 8px 20px rgba(46, 128, 54, .25); }
.sf-steps__item.is-current .sf-steps__num { background: #fff; color: var(--sf-navy); animation: sfPulseRing 1.8s ease-in-out infinite; }

/* ---------- ৫. Home hero ---------- */
.sf-hero {
    position: relative; overflow: hidden; isolation: isolate;
    color: #fff;
    background:
        radial-gradient(900px 500px at 12% -10%, rgba(44, 131, 55, .55), transparent 60%),
        radial-gradient(700px 500px at 100% 0%, rgba(76, 175, 80, .35), transparent 60%),
        linear-gradient(135deg, #215c27 0%, #2e8036 55%, #3d9446 100%);
}
.sf-hero::before { /* সূক্ষ্ম grid */
    content: ""; position: absolute; inset: 0; z-index: -1; opacity: .18; pointer-events: none;
    background-image: linear-gradient(rgba(255,255,255,.14) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.14) 1px, transparent 1px);
    background-size: 44px 44px;
    -webkit-mask-image: radial-gradient(ellipse at 50% 30%, #000 30%, transparent 75%);
    mask-image: radial-gradient(ellipse at 50% 30%, #000 30%, transparent 75%);
}
.sf-blob { position: absolute; z-index: -1; border-radius: 50%; filter: blur(50px); opacity: .55; pointer-events: none; animation: sfBlob 14s ease-in-out infinite alternate; }
.sf-blob--1 { width: 420px; height: 420px; left: -120px; top: -140px; background: #40ab4a; }
.sf-blob--2 { width: 360px; height: 360px; right: -90px; top: 40px; background: #4caf50; animation-delay: -5s; }
.sf-blob--3 { width: 280px; height: 280px; left: 40%; bottom: -160px; background: #d63a33; opacity: .28; animation-delay: -9s; }
.sf-hero__grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: clamp(24px, 4vw, 56px); align-items: center; padding: clamp(46px, 7vw, 92px) 0 clamp(54px, 7vw, 96px); }
.sf-kicker { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px 7px 8px; border-radius: 999px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .22); color: #e4f5e6; font-size: 12.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.sf-kicker .sf-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sf-gold); box-shadow: 0 0 0 4px rgba(214, 58, 51, .25); animation: sfPulseDot 1.6s ease-in-out infinite; }
.sf-hero__title { font-size: clamp(32px, 5.2vw, 58px); margin: 18px 0 14px; line-height: 1.1; text-wrap: balance; }
/* FIX (2026-10-13, P11-T1): জোর-দেওয়া শব্দ সাদা, নিচে লোগোর লাল দাগ (সবুজের উপর গোলাপি লেখা পড়তে কষ্ট হতো) */
.sf-hero__title em { font-style: normal; color: #fff; position: relative; white-space: nowrap; }
.sf-hero__title em::after { content: ""; position: absolute; left: 0; right: 0; bottom: .04em; height: .2em; background: linear-gradient(90deg, rgba(236,75,67,.35), rgba(236,75,67,.95), rgba(236,75,67,.35)); border-radius: 4px; z-index: -1; }
.sf-hero__lead { font-size: clamp(15px, 1.4vw, 18px); color: #d5ebd7; max-width: 560px; margin: 0 0 26px; line-height: 1.7; }
.sf-hero__search { position: relative; display: flex; align-items: center; background: #fff; border-radius: 18px; padding: 6px; box-shadow: 0 24px 60px rgba(16, 48, 15, .35), inset 0 0 0 1px rgba(46,128,54,.06); max-width: 640px; }
.sf-hero__search .sf-search-icon { color: var(--sf-muted); margin: 0 4px 0 14px; flex: 0 0 auto; }
.sf-hero__search input { flex: 1; min-width: 0; border: 0; outline: 0; height: 56px; padding: 0 10px; font-size: 17px; color: var(--sf-ink); background: transparent; box-shadow: none; }
.sf-hero__search input:focus { box-shadow: none; border: 0; }
.sf-hero__search button { flex: 0 0 auto; height: 56px; padding: 0 22px; border: 0; border-radius: 14px; background: linear-gradient(135deg, var(--sf-gold), var(--sf-gold-2)); color: #ffffff; font-weight: 900; font-size: 15px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: transform .2s, box-shadow .2s, filter .2s; }
.sf-hero__search button:hover { transform: translateY(-1px); box-shadow: 0 12px 26px rgba(214, 58, 51, .45); filter: brightness(1.04); }
.sf-ac { position: absolute; left: 6px; right: 6px; top: calc(100% + 8px); background: #fff; border-radius: 16px; box-shadow: 0 28px 60px rgba(16, 48, 15, .30); border: 1px solid var(--sf-line); overflow: hidden; z-index: 30; color: var(--sf-ink); text-align: left; }
.sf-ac[hidden] { display: none; }
.sf-ac__item { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 12px; padding: 12px 14px; cursor: pointer; text-decoration: none; color: inherit; border-bottom: 1px solid #f0f5f1; }
.sf-ac__item:last-child { border-bottom: 0; }
.sf-ac__item:hover, .sf-ac__item.is-active { background: #eef8ef; }
.sf-ac__item .sf-ac__ico { width: 40px; height: 40px; border-radius: 12px; background: #eef8ef; color: var(--sf-navy); display: grid; place-items: center; }
.sf-ac__item strong { display: block; font-size: 14.5px; }
.sf-ac__item small { color: var(--sf-muted); }
.sf-ac__item .sf-ac__go { color: var(--sf-navy); font-weight: 800; font-size: 12px; }
.sf-ac__empty { padding: 14px; color: var(--sf-muted); font-size: 14px; }
.sf-hero__chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 18px; color: #c4e2c7; font-size: 13px; font-weight: 700; }
.sf-hero__chips a { color: #fff; text-decoration: none; padding: 7px 12px; border-radius: 999px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .2); font-weight: 700; font-size: 13px; transition: background .2s, transform .2s; }
.sf-hero__chips a:hover { background: rgba(255, 255, 255, .22); transform: translateY(-1px); }
.sf-hero__trust { display: flex; flex-wrap: wrap; gap: 14px 22px; margin-top: 26px; color: #d5ebd7; font-size: 13.5px; font-weight: 700; }
.sf-hero__trust span { display: inline-flex; align-items: center; gap: 7px; }
.sf-hero__trust .su-icon { color: #ffd0cc; }

/* hero-র ডান দিকের ভাসমান ছবি */
.sf-hero__art { position: relative; min-height: 420px; display: grid; place-items: center; perspective: 1200px; }
.sf-art-card {
    position: absolute; width: min(255px, 46%); aspect-ratio: 3 / 4; border-radius: 26px;
    background: linear-gradient(160deg, rgba(255,255,255,.98), rgba(237,248,238,.96));
    box-shadow: 0 40px 80px rgba(16, 48, 15, .45), inset 0 1px 0 #fff;
    padding: 14px; display: grid; grid-template-rows: 1fr auto; gap: 8px; transform-style: preserve-3d;
    animation: sfFloatY 6s ease-in-out infinite;
}
.sf-art-card img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 18px 24px rgba(46, 128, 54, .25)); }
.sf-art-card figcaption { color: var(--sf-navy); font-weight: 800; font-size: 13px; text-align: center; }
.sf-art-card--boys { left: 2%; top: 4%; transform: rotate(-6deg); }
.sf-art-card--girls { right: 2%; top: 26%; animation-delay: -3s; transform: rotate(5deg); }
.sf-float-badge {
    position: absolute; display: inline-flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 14px;
    background: rgba(255, 255, 255, .96); color: var(--sf-ink); font-size: 12.5px; font-weight: 800; box-shadow: 0 16px 36px rgba(16, 48, 15, .35);
    animation: sfFloatY 5s ease-in-out infinite;
}
.sf-float-badge .sf-float-badge__ico { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; background: #e9fbf2; color: #087545; }
.sf-float-badge--ai { left: 0; bottom: 4%; animation-delay: -1.5s; }
.sf-float-badge--ai .sf-float-badge__ico { background: #eef8ef; color: var(--sf-navy); }
.sf-float-badge--delivery { right: 0; top: 4%; animation-delay: -4s; }
.sf-float-badge--delivery .sf-float-badge__ico { background: #fff3f2; color: var(--sf-gold-2); }
.sf-float-badge--fit { right: 16%; bottom: 0; animation-delay: -2.4s; }
.sf-hero__wave { display: block; width: 100%; height: 54px; color: var(--sf-bg); margin-bottom: -1px; }

/* ---------- ৬. Home sections ---------- */
.sf-section { padding: clamp(40px, 6vw, 76px) 0; }
.sf-section--tight { padding-top: 0; }
.sf-section__head { text-align: center; max-width: 720px; margin: 0 auto clamp(24px, 4vw, 40px); }
.sf-section__head .sf-eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: #e4f5e6; color: var(--sf-navy); font-size: 12px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.sf-section__head h2 { font-size: clamp(24px, 3.2vw, 36px); margin: 14px 0 10px; }
.sf-section__head p { margin: 0; color: var(--sf-muted); font-size: 16px; line-height: 1.7; }

/* trust band (সংখ্যা) */
.sf-trust { margin-top: -30px; position: relative; z-index: 2; }
.sf-trust__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.sf-stat { background: #fff; border: 1px solid rgba(46, 128, 54, .10); border-radius: 20px; padding: 20px 20px 18px; box-shadow: var(--sf-shadow-md); display: grid; grid-template-columns: 46px 1fr; gap: 12px; align-items: center; }
.sf-stat__ico { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: linear-gradient(135deg, #eef8ef, #dcefdf); color: var(--sf-navy); }
.sf-stat strong { display: block; font-size: 26px; color: var(--sf-navy); letter-spacing: -.02em; line-height: 1.1; }
.sf-stat span { color: var(--sf-muted); font-size: 13px; font-weight: 700; }

/* কীভাবে কাজ করে */
.sf-how { position: relative; }
.sf-how__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; position: relative; }
.sf-how__grid::before { content: ""; position: absolute; left: 12%; right: 12%; top: 44px; height: 2px; background: repeating-linear-gradient(90deg, #c1dec4 0 10px, transparent 10px 18px); z-index: 0; }
.sf-how__card { position: relative; z-index: 1; background: #fff; border: 1px solid rgba(46, 128, 54, .10); border-radius: 22px; padding: 22px 20px; text-align: center; box-shadow: var(--sf-shadow-sm); transition: transform .3s var(--sf-ease), box-shadow .3s; }
.sf-how__card:hover { transform: translateY(-6px); box-shadow: var(--sf-shadow-md); border-color: rgba(46, 128, 54, .22); }
.sf-how__num { width: 56px; height: 56px; margin: 0 auto 14px; border-radius: 18px; display: grid; place-items: center; background: linear-gradient(135deg, var(--sf-navy), var(--sf-blue)); color: #fff; box-shadow: 0 12px 24px rgba(46, 128, 54, .28); position: relative; }
.sf-how__num .su-icon { width: 24px; height: 24px; }
.sf-how__num b { position: absolute; top: -8px; right: -8px; width: 24px; height: 24px; border-radius: 50%; background: var(--sf-gold); color: #ffffff; font-size: 12px; display: grid; place-items: center; box-shadow: 0 6px 14px rgba(214,58,51,.45); }
.sf-how__card h3 { font-size: 17px; margin: 0 0 8px; }
.sf-how__card p { margin: 0; color: var(--sf-muted); font-size: 14px; line-height: 1.65; }

/* জনপ্রিয় স্কুল */
.sf-schools__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.sf-school-card { display: grid; gap: 12px; background: #fff; border: 1px solid rgba(46, 128, 54, .10); border-radius: 22px; padding: 16px; text-decoration: none; color: inherit; box-shadow: var(--sf-shadow-sm); transition: transform .3s var(--sf-ease), box-shadow .3s, border-color .3s; position: relative; overflow: hidden; }
.sf-school-card::after { content: ""; position: absolute; inset: auto -40% -60% auto; width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(circle, rgba(44,131,55,.16), transparent 70%); transition: transform .4s; }
.sf-school-card:hover { transform: translateY(-6px); box-shadow: var(--sf-shadow-md); border-color: rgba(46, 128, 54, .24); }
.sf-school-card:hover::after { transform: scale(1.3); }
.sf-school-card__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sf-school-card__pair img { width: 100%; aspect-ratio: 3 / 4; object-fit: contain; border-radius: 14px; background: linear-gradient(160deg, #f8fcf8, #ebf6ec); border: 1px solid #dcefdf; padding: 6px; transition: transform .35s var(--sf-ease); }
.sf-school-card:hover .sf-school-card__pair img { transform: scale(1.04); }
.sf-school-card strong { font-size: 15.5px; line-height: 1.3; }
.sf-school-card small { color: var(--sf-muted); display: flex; align-items: center; gap: 5px; }
.sf-school-card .sf-link-arrow { color: var(--sf-navy); font-weight: 800; font-size: 13px; display: inline-flex; align-items: center; gap: 6px; }
.sf-school-card:hover .sf-link-arrow .su-icon { transform: translateX(3px); }
.sf-link-arrow .su-icon { transition: transform .25s; }

/* feature cards */
.sf-features__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.sf-feature { background: #fff; border: 1px solid rgba(46, 128, 54, .10); border-radius: 24px; padding: 24px; box-shadow: var(--sf-shadow-sm); transition: transform .3s var(--sf-ease), box-shadow .3s; position: relative; overflow: hidden; }
.sf-feature:hover { transform: translateY(-6px); box-shadow: var(--sf-shadow-md); }
.sf-feature__ico { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; margin-bottom: 16px; }
.sf-feature--ai .sf-feature__ico { background: #eef8ef; color: var(--sf-navy); }
.sf-feature--ar .sf-feature__ico { background: #e9fbf2; color: #087545; }
.sf-feature--track .sf-feature__ico { background: #fff3f2; color: var(--sf-gold-2); }
.sf-feature h3 { margin: 0 0 8px; font-size: 18px; }
.sf-feature p { margin: 0; color: var(--sf-muted); line-height: 1.7; font-size: 14.5px; }
.sf-feature ul { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 7px; }
.sf-feature li { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; color: #41464d; font-weight: 600; }
.sf-feature li .su-icon { color: var(--sf-green); margin-top: 2px; flex: 0 0 auto; }

/* FAQ */
.sf-faq { max-width: 820px; margin: 0 auto; display: grid; gap: 10px; }
.sf-faq details { background: #fff; border: 1px solid rgba(46, 128, 54, .10); border-radius: 16px; box-shadow: var(--sf-shadow-sm); overflow: hidden; }
.sf-faq summary { list-style: none; cursor: pointer; padding: 16px 18px; font-weight: 800; display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--sf-ink); }
.sf-faq summary::-webkit-details-marker { display: none; }
.sf-faq summary .sf-faq__plus { width: 28px; height: 28px; border-radius: 9px; background: #eef8ef; color: var(--sf-navy); display: grid; place-items: center; flex: 0 0 auto; transition: transform .25s, background .25s; transform: rotate(45deg); /* x আইকন ৪৫° ঘুরে + */ }
.sf-faq details[open] summary .sf-faq__plus { transform: rotate(0deg); background: var(--sf-navy); color: #fff; }
.sf-faq details p { margin: 0; padding: 0 18px 18px; color: var(--sf-muted); line-height: 1.75; font-size: 14.5px; animation: sfPageIn .3s ease both; }

/* CTA band */
.sf-cta { border-radius: 28px; padding: clamp(26px, 4vw, 44px); color: #fff; position: relative; overflow: hidden; display: grid; grid-template-columns: 1.3fr .7fr; gap: 20px; align-items: center; background: radial-gradient(600px 300px at 100% 0%, rgba(214,58,51,.35), transparent 60%), linear-gradient(135deg, #215c27, #2e8036 70%, #3d9446); box-shadow: var(--sf-shadow-lg); }
.sf-cta h2 { font-size: clamp(22px, 3vw, 32px); margin: 8px 0 8px; }
.sf-cta p { margin: 0; color: #d5ebd7; line-height: 1.7; }
.sf-cta__actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.sf-cta .su-btn.gold { background: linear-gradient(135deg, var(--sf-gold), var(--sf-gold-2)); color: #ffffff; border-color: transparent; }
.sf-cta .su-btn.glass { background: rgba(255, 255, 255, .12); color: #fff; border-color: rgba(255, 255, 255, .3); }
.sf-cta .su-btn.glass:hover { background: rgba(255, 255, 255, .2); }

/* ---------- ৭. Footer ---------- */
.sf-footer { margin-top: auto; background: linear-gradient(180deg, #215c27, #2c7133); color: #c4dfc7; position: relative; overflow: hidden; }
.sf-footer::before { content: ""; position: absolute; inset: 0; background: radial-gradient(500px 220px at 0% 0%, rgba(44,131,55,.25), transparent 60%); pointer-events: none; }
.sf-footer__grid { position: relative; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.1fr; gap: 28px; padding: clamp(36px, 5vw, 56px) 0 26px; }
.sf-footer__brand img { height: 46px; width: auto; max-width: 220px; object-fit: contain; display: block; background: #fff; padding: 6px 10px; border-radius: 12px; }
.sf-footer__brand p { margin: 14px 0 0; line-height: 1.75; font-size: 14px; max-width: 360px; color: #b2d6b6; }
.sf-footer h4 { color: #fff; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; margin: 0 0 14px; }
.sf-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.sf-footer ul a { color: #c4dfc7; text-decoration: none; font-size: 14px; display: inline-flex; align-items: center; gap: 8px; transition: color .2s, transform .2s; }
.sf-footer ul a:hover { color: #fff; transform: translateX(3px); }
.sf-footer__contact li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; }
.sf-footer__contact .su-icon { color: #ffd0cc; margin-top: 2px; flex: 0 0 auto; }
.sf-footer__contact a { color: #fff; }
.sf-pay { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.sf-pay span { display: inline-flex; align-items: center; padding: 6px 10px; border-radius: 9px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); font-size: 12px; font-weight: 800; letter-spacing: .02em; color: #fff; }
.sf-pay .bkash { color: #ff77b6; }
.sf-pay .nagad { color: #ffb15c; }
.sf-pay .ssl { color: #9adba0; }
.sf-pay .cod { color: #a7f3d0; }
.sf-footer__bottom { position: relative; border-top: 1px solid rgba(255, 255, 255, .10); padding: 16px 0 calc(16px + env(safe-area-inset-bottom)); display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; justify-content: space-between; font-size: 13px; color: #b1b8c1; }
.sf-footer__bottom a { color: #d8ecda; text-decoration: none; }
.sf-footer__bottom a:hover { color: #fff; }
/* FIX (2026-09-28, H4): পুরনো footer-এর সাদা লেখা সাদা কার্ডে অদৃশ্য ছিল — নিরাপত্তার জন্য রং ঠিক করে দেওয়া (যদি কোথাও পুরনো markup থাকে) */
.su-footer-message { color: var(--sf-muted); border-top-color: var(--sf-line); }

/* ---------- ৮. Motion & effects ---------- */
@keyframes sfPageIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes sfBodyIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes sfPop { 0% { transform: scale(.4); } 70% { transform: scale(1.18); } 100% { transform: scale(1); } }
@keyframes sfFloatY { 0%, 100% { transform: translateY(0) rotate(var(--sf-rot, 0deg)); } 50% { transform: translateY(-12px) rotate(var(--sf-rot, 0deg)); } }
@keyframes sfBlob { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(40px, 30px) scale(1.15); } }
@keyframes sfPulseDot { 0%, 100% { box-shadow: 0 0 0 4px rgba(214,58,51,.25); } 50% { box-shadow: 0 0 0 8px rgba(214,58,51,.08); } }
@keyframes sfPulseRing { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,.5); } 50% { box-shadow: 0 0 0 6px rgba(255,255,255,0); } }
@keyframes sfShine { 0% { transform: translateX(-120%) skewX(-20deg); } 100% { transform: translateX(220%) skewX(-20deg); } }
@keyframes sfRipple { to { transform: scale(2.6); opacity: 0; } }
@keyframes sfCheck { to { stroke-dashoffset: 0; } }
@keyframes sfScaleIn { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.sf-art-card--boys { --sf-rot: -6deg; }
.sf-art-card--girls { --sf-rot: 5deg; }

/* scroll-এ ভেসে ওঠা (frontend-pro.js — IntersectionObserver) */
[data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--sf-ease), transform .7s var(--sf-ease); transition-delay: calc(var(--i, 0) * 90ms); }
[data-reveal="left"] { transform: translateX(-26px); }
[data-reveal="right"] { transform: translateX(26px); }
[data-reveal="zoom"] { transform: scale(.94); }
[data-reveal].is-visible { opacity: 1; transform: none; }
html.sf-no-js [data-reveal] { opacity: 1; transform: none; } /* JS না চললেও সব দেখাবে */

/* বোতাম: ripple + shine */
.sf-body .su-btn, .aa-body .su-btn { position: relative; overflow: hidden; isolation: isolate; border-radius: 12px; gap: 8px; }
.sf-body .su-btn.primary::after { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent); transform: translateX(-120%) skewX(-20deg); pointer-events: none; }
.sf-body .su-btn.primary:hover::after { animation: sfShine .9s ease; }
.sf-ripple { position: absolute; border-radius: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; background: rgba(255, 255, 255, .45); transform: scale(0); animation: sfRipple .6s ease-out forwards; pointer-events: none; }
.sf-body .su-btn.outline .sf-ripple, .sf-body .su-btn.ghost .sf-ripple { background: rgba(46, 128, 54, .16); }
.sf-body .su-btn:active { transform: translateY(0) scale(.99); }
.sf-body .su-btn.gold { background: linear-gradient(135deg, var(--sf-gold), var(--sf-gold-2)); color: #ffffff; border-color: transparent; }

/* hover-এ কার্ড হালকা কাত (data-tilt, শুধু pointer:fine) */
[data-tilt] { transition: transform .25s var(--sf-ease), box-shadow .25s; will-change: transform; }

/* ---------- ৯. Wizard পাতাগুলোর polish (পুরনো class-এর উপর) ---------- */
.sf-crumbs { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 10px; margin: 6px 0 22px; text-align: center; }
.sf-crumbs .sf-crumb { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; background: #eef8ef; color: var(--sf-navy); font-weight: 800; font-size: 13.5px; }
.sf-crumbs .sf-crumb.is-current { background: var(--sf-navy); color: #fff; }
.sf-crumbs .sf-crumb-sep { color: #adb3bc; }
.sf-main .su-back { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; padding: 8px 12px; border-radius: 999px; background: #fff; border: 1px solid var(--sf-line); font-size: 13.5px; transition: background .2s, transform .2s; }
.sf-main .su-back:hover { background: #eef8ef; transform: translateX(-2px); }
.sf-main .su-title-block h1 { font-size: clamp(28px, 4.4vw, 44px); }
.sf-main .su-title-block p { color: var(--sf-muted); font-size: 16px; }
.sf-main .su-search-box { border-radius: 18px; box-shadow: var(--sf-shadow-md); }
.sf-main .su-pills a { border-radius: 999px; transition: all .2s; }
.sf-main .su-pills a:hover { background: var(--sf-navy); color: #fff; border-color: var(--sf-navy); transform: translateY(-1px); }
/* ফলাফলের সারি */
.sf-main .result-list { border-radius: 20px; box-shadow: var(--sf-shadow-sm); }
.sf-main .result-row { transition: background .2s; }
.sf-main .result-row:hover { background: #f7fbf7; }
.sf-main .result-row-uniform { grid-template-columns: auto 1fr auto; }
.sf-main .result-uniform-pair img { transition: transform .3s var(--sf-ease); }
.sf-main .result-row:hover .result-uniform-pair img { transform: scale(1.06); }
.sf-main .su-result-search { border-radius: 16px; box-shadow: var(--sf-shadow-sm); }
/* ক্লাস ও ছেলে/মেয়ে কার্ড */
.sf-main .class-card { border-radius: 18px; }
.sf-main .class-uniform-pair img { transition: transform .3s var(--sf-ease); }
.sf-main .class-card:hover .class-uniform-pair img { transform: translateY(-3px) scale(1.05); }
.sf-main .gender-card { border-radius: 24px; }
.sf-main .gender-uniform-frame { overflow: hidden; }
.sf-main .gender-uniform-frame img { transition: transform .45s var(--sf-ease); }
.sf-main .gender-card:hover .gender-uniform-frame img { transform: scale(1.06) translateY(-4px); }
.sf-main .gender-card strong { font-size: 20px; }
/* preview */
.sf-main .preview-content-card { border-radius: 26px; }
.sf-main .preview-content-info dl { border: 1px solid var(--sf-line); border-radius: 16px; padding: 16px; background: #fff; gap: 12px 20px; }
.sf-main .preview-content-info dt { font-size: 13px; color: var(--sf-muted); font-weight: 700; }
.sf-main .preview-content-info dd { font-size: 15px; }
.sf-main .preview-content-info .sf-price { font-size: 22px; color: var(--sf-navy); }
.sf-preview-gallery { display: flex; gap: 8px; justify-content: center; margin-top: 12px; }
.sf-preview-gallery button { width: 58px; height: 70px; border-radius: 12px; border: 2px solid var(--sf-line); background: #fff; padding: 4px; cursor: pointer; }
.sf-preview-gallery button.is-active { border-color: var(--sf-navy); }
.sf-preview-gallery img { width: 100%; height: 100%; object-fit: contain; }
/* measurement */
.sf-main .measure-help, .sf-main .su-form-card, .sf-main .auto-card, .sf-main .cart-card, .sf-main .track-card, .sf-main .su-details-card { border-radius: 22px; }
.sf-main .confidence-ring { position: relative; color: var(--sf-navy); background: conic-gradient(var(--sf-navy) 0 var(--sf-conf, 88%), #e8f0e9 var(--sf-conf, 88%) 100%); }
/* FIX (2026-09-28, L21): "88%" লেখা সাদা ছিল, ring-এর হালকা অংশে পড়া যেত না — এখন ভেতরে সাদা চাকতি, লেখা নেভি */
.sf-main .confidence-ring::before { content: ""; position: absolute; inset: 10px; border-radius: 50%; background: #fff; }
.sf-main .confidence-ring strong, .sf-main .confidence-ring span { position: relative; z-index: 1; }
.sf-main .confidence-ring span { color: var(--sf-muted); }
.sf-main .ai-camera-box { border-radius: 20px; }
.sf-main .ai-quality-mini p { border-radius: 14px; }
.sf-main .consent-check { border-radius: 14px; }
.sf-main .qty-control { border-radius: 14px; }
.sf-main .qty-control button { transition: background .2s; font-weight: 800; }
.sf-main .qty-control button:hover { background: #eef8ef; }
/* কার্ট */
.sf-main .cart-header h2 { font-size: clamp(22px, 3vw, 30px); margin: 0; }
.sf-main .cart-badge { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; background: #eef8ef; }
.sf-main .cart-row { border-radius: 18px; padding: 18px; margin-bottom: 8px; border: 1px solid #f0f1f3; transition: background .2s; }
.sf-main .cart-row:hover { background: #fbfdfb; }
.sf-main .cart-measures span { padding: 5px 10px; border-radius: 999px; background: #f3f8f3; font-size: 13px; color: #41464d; }
.sf-main .cart-total { border-top: 1px dashed var(--sf-line); margin-top: 8px; }
.sf-main .link-danger { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 10px; }
.sf-main .link-danger:hover { background: #fee2e2; }
.sf-hold-timer { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; background: #fff7e6; color: #a05a00; font-weight: 800; font-size: 13.5px; border: 1px solid #fde8c2; }
.sf-hold-timer.is-expired { background: #fee2e2; color: #991b1b; border-color: #fecaca; }
.sf-main .cart-actions { gap: 10px; flex-wrap: wrap; align-items: center; }
/* checkout */
.sf-checkout-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 10px 0 18px; }
.sf-checkout-steps span { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px; background: #fff; border: 1px solid var(--sf-line); font-weight: 800; font-size: 13.5px; color: var(--sf-muted); }
.sf-checkout-steps span b { width: 24px; height: 24px; border-radius: 50%; display: inline-grid; place-items: center; background: #eef3ee; color: #8d9198; font-size: 12px; }
.sf-checkout-steps span.is-current { color: var(--sf-navy); border-color: var(--sf-navy); }
.sf-checkout-steps span.is-current b, .sf-checkout-steps span.is-done b { background: var(--sf-navy); color: #fff; }
.sf-main .payment-card { border-radius: 14px; cursor: pointer; transition: border-color .2s, box-shadow .2s, background .2s; margin-bottom: 8px; }
.sf-main .payment-card:hover { border-color: var(--sf-navy); }
.sf-main .payment-card:has(input:checked) { border-color: var(--sf-navy); background: #f5faf5; box-shadow: 0 0 0 3px rgba(46,128,54,.10); }
.sf-main .checkout-total { padding: 16px 18px; border-radius: 16px; background: #fff; border: 1px solid var(--sf-line); flex-wrap: wrap; }
.sf-main .checkout-total strong { font-size: 20px; color: var(--sf-navy); }
/* confirmation */
.sf-main .confirm-box .success-mark { position: relative; box-shadow: 0 16px 36px rgba(18, 149, 91, .35); animation: sfScaleIn .5s var(--sf-ease) both; }
.sf-main .confirm-box .success-mark svg { width: 44px; height: 44px; }
.sf-main .confirm-box .success-mark svg path { stroke-dasharray: 60; stroke-dashoffset: 60; animation: sfCheck .6s .35s var(--sf-ease) forwards; }
.sf-main .confirm-details { border-radius: 18px; box-shadow: var(--sf-shadow-sm); }
.sf-main .confirm-details strong { color: var(--sf-navy); }
/* ট্র্যাক */
.sf-main .track-card { box-shadow: var(--sf-shadow-md); }
.sf-main .track-card > p { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; margin: 0; border-bottom: 1px dashed var(--sf-line); }
.sf-main .track-card > p:last-of-type { border-bottom: 0; }
/* student dashboard */
/* payment gateway page */
.sf-main .payment-panel, .sf-main .payment-security-card { border-radius: 26px; }
.sf-main .payment-security-card p { display: flex; align-items: center; gap: 10px; }
.sf-main .payment-security-card p .su-icon { color: var(--sf-green); flex: 0 0 auto; }
/* AR */
.sf-main .ar-phone-frame { border-radius: 34px; }

/* ---------- ১০. Auth (student login / register) ---------- */
.sf-body.auth-only-body { animation: none; }
.sf-body.auth-only-body::before { content: ""; position: fixed; inset: 0; z-index: -1; background: radial-gradient(700px 400px at 8% 8%, rgba(44,131,55,.20), transparent 60%), radial-gradient(600px 400px at 92% 20%, rgba(76,175,80,.18), transparent 60%), radial-gradient(500px 300px at 50% 100%, rgba(214,58,51,.14), transparent 60%), linear-gradient(135deg, #f7fbf7, #eef8ef 58%, #ffffff); }
.sf-body .auth-card { border-radius: 28px; box-shadow: var(--sf-shadow-lg); animation: sfPageIn .5s var(--sf-ease) both; }
.sf-body .auth-head h1 { font-size: clamp(24px, 3.6vw, 32px); }
.sf-body .auth-badge { gap: 8px; }
.sf-pw-field { position: relative; }
.sf-pw-field input { padding-right: 48px; }
.sf-pw-toggle { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border-radius: 10px; border: 0; background: transparent; color: var(--sf-muted); cursor: pointer; display: grid; place-items: center; }
.sf-pw-toggle:hover { background: #eef8ef; color: var(--sf-navy); }
.sf-body .auth-links a { border-radius: 14px; }
.sf-body .auth-register-form { border-radius: 26px; }
.sf-body .auth-register-form .admin-card-head { border-bottom: 1px solid var(--sf-line); padding-bottom: 10px; }
.sf-auth-back { display: inline-flex; align-items: center; gap: 6px; color: var(--sf-muted); font-weight: 700; font-size: 13.5px; text-decoration: none; margin-top: 4px; }
.sf-auth-back:hover { color: var(--sf-navy); }

/* ---------- ১১. Admin login — আলাদা split-screen layout ---------- */
.aa-body { margin: 0; min-height: 100vh; font-family: var(--sf-font); color: var(--sf-ink); background: #f5f9f5; }
.aa-shell { min-height: 100vh; display: grid; grid-template-columns: 1.05fr .95fr; }
.aa-brand { position: relative; overflow: hidden; isolation: isolate; color: #fff; padding: clamp(28px, 4vw, 56px); display: flex; flex-direction: column; justify-content: space-between; gap: 30px;
    background: radial-gradient(900px 500px at 0% 0%, rgba(44,131,55,.5), transparent 60%), radial-gradient(700px 500px at 100% 100%, rgba(76,175,80,.35), transparent 60%), linear-gradient(160deg, #215c27 0%, #2e8036 60%, #3d9446 100%); }
.aa-brand::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .16; background-image: linear-gradient(rgba(255,255,255,.16) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.16) 1px, transparent 1px); background-size: 42px 42px; -webkit-mask-image: radial-gradient(ellipse at 40% 40%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse at 40% 40%, #000 20%, transparent 75%); }
.aa-brand .sf-blob { opacity: .5; }
.aa-brand__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.aa-brand__logo { display: inline-flex; background: #fff; padding: 8px 12px; border-radius: 14px; box-shadow: 0 14px 34px rgba(16,48,15,.35); }
.aa-brand__logo img { height: 44px; width: auto; max-width: 200px; object-fit: contain; display: block; }
.aa-brand__mid h1 { font-size: clamp(28px, 3.6vw, 44px); margin: 16px 0 12px; line-height: 1.12; }
.aa-brand__mid p { color: #d5ebd7; line-height: 1.75; max-width: 520px; margin: 0 0 24px; font-size: 15.5px; }
.aa-features { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; max-width: 520px; }
.aa-features li { display: grid; grid-template-columns: 44px 1fr; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 16px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); animation: sfPageIn .6s var(--sf-ease) both; animation-delay: calc(var(--i, 0) * 120ms); }
.aa-features .aa-ico { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; background: rgba(255,255,255,.14); color: #ffd0cc; }
.aa-features strong { display: block; font-size: 14.5px; }
.aa-features span { color: #c4e2c7; font-size: 13px; }
.aa-brand__bottom { display: flex; flex-wrap: wrap; gap: 8px; color: #c4e2c7; font-size: 12.5px; font-weight: 700; }
.aa-brand__bottom span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.14); }
.aa-brand__bottom .sf-dot { width: 8px; height: 8px; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 4px rgba(52,211,153,.25); animation: sfPulseDot 1.8s ease-in-out infinite; }
.aa-form-wrap { display: grid; place-items: center; padding: clamp(22px, 4vw, 56px) clamp(16px, 4vw, 48px); position: relative; }
.aa-form-wrap::before { content: ""; position: absolute; inset: 0; background: radial-gradient(600px 300px at 100% 0%, rgba(214,58,51,.10), transparent 60%); pointer-events: none; }
.aa-card { position: relative; width: min(460px, 100%); background: #fff; border: 1px solid rgba(46,128,54,.12); border-radius: 28px; padding: clamp(22px, 3vw, 36px); box-shadow: var(--sf-shadow-lg); animation: sfPageIn .55s var(--sf-ease) both; }
.aa-card__head { margin-bottom: 20px; }
.aa-card__head .aa-shield { width: 58px; height: 58px; border-radius: 18px; display: grid; place-items: center; background: linear-gradient(135deg, #317337, #2e8036); color: #fff; box-shadow: 0 14px 30px rgba(46,128,54,.32); margin-bottom: 14px; }
.aa-card__head h2 { margin: 0 0 6px; font-size: 26px; }
.aa-card__head p { margin: 0; color: var(--sf-muted); font-size: 14.5px; line-height: 1.6; }
.aa-card label { margin: 14px 0 7px; }
.aa-card input:not([type="checkbox"]) { min-height: 50px; border-radius: 12px; }
.aa-card .su-check { margin: 14px 0 18px; font-weight: 700; color: #41464d; }
.aa-card .su-btn { min-height: 50px; font-size: 15.5px; }
.aa-card__links { margin-top: 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.aa-card__links a { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 11px 12px; border-radius: 12px; background: #f8fcf8; border: 1px solid rgba(46,128,54,.12); color: var(--sf-navy); font-weight: 800; font-size: 13.5px; text-decoration: none; transition: all .2s; }
.aa-card__links a:hover { background: var(--sf-navy); color: #fff; transform: translateY(-1px); }
.aa-card__foot { margin-top: 16px; display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--sf-muted); font-size: 12.5px; }
.aa-card__foot .su-lang-switch { margin: 0; }
.aa-secure { display: inline-flex; align-items: center; gap: 6px; }
.aa-secure .su-icon { color: var(--sf-green); }

/* ---------- ১২. Responsive ---------- */
@media (max-width: 1100px) {
    .sf-trust__grid, .sf-how__grid, .sf-schools__grid { grid-template-columns: repeat(2, 1fr); }
    .sf-how__grid::before { display: none; }
    .sf-features__grid { grid-template-columns: 1fr; }
    .sf-footer__grid { grid-template-columns: 1fr 1fr; }
    .sf-nav__link { padding: 8px 11px; font-size: 13.5px; }
}
@media (max-width: 1024px) {
    .sf-nav { display: none; }
    .sf-burger { display: grid; }
    .sf-header__actions .sf-hide-mobile { display: none; }
    .sf-hero__grid { grid-template-columns: 1fr; text-align: center; }
    .sf-hero__lead, .sf-hero__search { margin-inline: auto; }
    .sf-hero__chips, .sf-hero__trust { justify-content: center; }
    .sf-hero__art { min-height: 380px; margin-top: 10px; }
    .sf-cta { grid-template-columns: 1fr; }
    .sf-cta__actions { justify-content: flex-start; }
    .aa-shell { grid-template-columns: 1fr; }
    .aa-brand { min-height: auto; padding: 22px 18px; gap: 18px; }
    .aa-brand__mid h1 { font-size: 26px; margin: 12px 0 8px; }
    .aa-brand__mid p { font-size: 14px; margin-bottom: 14px; }
    .aa-features { grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .aa-features li { grid-template-columns: 1fr; text-align: center; padding: 10px; }
    .aa-features .aa-ico { margin: 0 auto; }
    .aa-features span { display: none; }
    .aa-brand__bottom { display: none; }
    .aa-form-wrap { padding: 22px 16px 34px; }
}
@media (max-width: 768px) {
    :root { --sf-header-h: 62px; }
    .sf-logo img { height: 38px; }
    .sf-hero__title { font-size: clamp(28px, 8vw, 38px); }
    .sf-hero__search { border-radius: 16px; padding: 5px; }
    .sf-hero__search input { height: 50px; font-size: 16px; }
    .sf-hero__search button { height: 50px; padding: 0 16px; }
    .sf-hero__search button span { display: none; }
    .sf-hero__art { min-height: 330px; }
    .sf-art-card { width: min(190px, 46%); }
    .sf-float-badge { font-size: 12px; padding: 7px 10px; }
    .sf-checkout-steps { grid-template-columns: 1fr; gap: 6px; }
    .sf-main .track-card > p { flex-direction: column; gap: 2px; }
    .sf-steps__item span.sf-steps__label { display: none; }
    .sf-steps__item.is-current span.sf-steps__label { display: inline; }
}
@media (max-width: 560px) {
    .sf-container, .sf-steps, .sf-main .su-shell { width: calc(100% - 20px); }
    .sf-main .su-app-card { border-radius: 20px; padding: 16px; }
    .sf-trust__grid, .sf-how__grid, .sf-schools__grid { grid-template-columns: 1fr; }
    .sf-stat { padding: 16px; }
    .sf-footer__grid { grid-template-columns: 1fr; gap: 22px; }
    .sf-footer__bottom { flex-direction: column; align-items: flex-start; }
    .sf-hero__art { min-height: 290px; }
    .sf-art-card { width: 46%; }
    .sf-float-badge--fit { right: 4%; }
    .sf-cart-btn span.sf-cart-label { display: none; }
    .sf-cart-btn { padding: 8px 11px; }
    .aa-card__links { grid-template-columns: 1fr; }
    .aa-features { grid-template-columns: 1fr 1fr 1fr; }
    .sf-main .cart-row { grid-template-columns: 1fr; }
    .sf-main .cart-actions .su-btn { width: 100%; }
    .sf-main .checkout-total { flex-direction: column; align-items: flex-start; gap: 6px; }
}
@media (max-width: 380px) {
    .sf-hero__chips a { font-size: 12px; padding: 6px 10px; }
    .aa-features { grid-template-columns: 1fr; }
}
@media (hover: none) { [data-tilt] { transform: none !important; } }

/* ---------- ১৩. Reduced motion & print ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
    [data-reveal] { opacity: 1; transform: none; }
}
@media print {
    .sf-header, .sf-footer, .sf-steps, .sf-drawer, .sf-backdrop, .sf-hero__art { display: none !important; }
    .sf-main .su-app-card { box-shadow: none; border: 0; }
}

/* ---------- ১৪. Measurement v3 (P5 — 2026-09-29) ---------- */
/* FIX (2026-09-29, P5-1): measurement পাতার নতুন অংশ — catalog-এর ঘর, "?" সাহায্য, দ্রুত মোড, ফিটিং পছন্দ, দর্জির নোট,
   সংরক্ষিত মাপের ব্যানার, যাচাই-প্যানেল, পোশাকের মাপ; আর কার্ট/চেকআউট/কনফার্মেশন/ট্র্যাক/ড্যাশবোর্ডের মাপ-snapshot।
   hidden attribute সবসময় জেতে (.su-btn-এর display:inline-flex যেন লুকানো বোতাম দেখিয়ে না ফেলে)। */
.ai-measure-layout [hidden], .sf-msnap [hidden], .sf-unit-toggle [hidden] { display: none !important; }
.ai-measure-layout > section, .ai-measure-layout .editable-measurements { min-width: 0; }

/* মাপের ঘর (label + "?" + input + সাহায্য) */
.sf-mfield { display: grid; gap: 6px; min-width: 0; align-content: start; }
.sf-mfield__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.sf-mfield__head label { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.ai-input-card > .sf-mfield { margin-top: 14px; }
.sf-help-btn {
    flex: 0 0 auto; width: 28px; height: 28px; padding: 0; border-radius: 50%; cursor: pointer;
    border: 1px solid var(--sf-line); background: #f5faf5; color: var(--sf-navy);
    font-weight: 900; font-size: 13px; line-height: 1; display: inline-grid; place-items: center;
    transition: background .2s, color .2s, border-color .2s;
}
.sf-help-btn:hover, .sf-help-btn[aria-expanded="true"] { background: var(--sf-navy); border-color: var(--sf-navy); color: #fff; }
.sf-help-btn:focus-visible, .sf-unit-btn:focus-visible, .sf-vissue__apply:focus-visible { outline: 3px solid rgba(44, 131, 55, .45); outline-offset: 2px; }
.sf-help-pop { margin-top: 2px; padding: 10px 12px; border-radius: var(--sf-radius-sm); background: #f5faf5; border: 1px solid #dcefdf; color: #41464e; font-size: 13px; line-height: 1.55; animation: sfPageIn .2s ease both; overflow-wrap: anywhere; }
.sf-help-pop p { margin: 0; }
.sf-help-pop__video { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; color: var(--sf-navy); font-weight: 800; text-decoration: underline; }
.sf-field-error { color: #b91c1c; font-size: 12.5px; font-weight: 700; }
.sf-mfield.has-error input { border-color: var(--sf-rose); box-shadow: 0 0 0 3px rgba(225, 29, 72, .12); }
.sf-mfield.has-review input { border-color: #f59e0b; box-shadow: 0 0 0 3px rgba(245, 158, 11, .14); }
.sf-mfield.has-warning input { border-color: #eab308; }

/* FIX (2026-09-29, P5-3): দ্রুত মোড — CSS না এলে সাধারণ checkbox + লেখা */
.sf-quick-toggle { position: relative; display: flex; align-items: center; gap: 12px; margin: 16px 0 0; padding: 10px 12px; border: 1px solid var(--sf-line); border-radius: 14px; background: #fbfdfb; cursor: pointer; }
.sf-quick-toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.sf-switch { position: relative; flex: 0 0 auto; width: 44px; height: 26px; border-radius: 999px; background: #d3d6d9; transition: background .2s; }
.sf-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(33, 92, 39, .25); transition: transform .2s var(--sf-ease); }
.sf-quick-toggle input:checked + .sf-switch { background: var(--sf-navy); }
.sf-quick-toggle input:checked + .sf-switch::after { transform: translateX(18px); }
.sf-quick-toggle input:focus-visible + .sf-switch { outline: 3px solid rgba(44, 131, 55, .45); outline-offset: 2px; }
/* app.css-এর "label span { color: লাল }" (আবশ্যিক * চিহ্নের জন্য) এখানে না লাগে */
.sf-quick-toggle__text, .sf-fit__body { color: var(--sf-ink); }
.sf-quick-toggle__text { display: grid; gap: 2px; min-width: 0; }
.sf-quick-toggle__text small { color: var(--sf-muted); font-weight: 600; font-size: 12.5px; }
.sf-quick-note { margin: 8px 0 0; padding: 9px 12px; border-radius: 12px; background: #fff7e6; border: 1px solid #fde8c2; color: #a05a00; font-size: 13px; font-weight: 700; }

/* FIX (2026-09-29, P5-4): ফিটিং পছন্দ — radio-কার্ড (৩-কলামের পাতায় কার্ড সরু, তাই এক কলাম; মাঝারি পর্দায় ৩ কলাম) */
.sf-fit { border: 0; margin: 16px 0 0; padding: 0; min-width: 0; }
.sf-fit legend { padding: 0; margin: 0 0 8px; font-weight: 800; font-size: 14px; }
.sf-fit__options { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.sf-fit__option { position: relative; margin: 0; cursor: pointer; }
.sf-fit__option input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.sf-fit__body { position: relative; display: grid; gap: 2px; height: 100%; padding: 10px 12px 10px 38px; border: 1px solid var(--sf-line); border-radius: 14px; background: #fff; transition: border-color .2s, background .2s, box-shadow .2s; }
.sf-fit__body::before { content: ""; position: absolute; left: 12px; top: 12px; width: 16px; height: 16px; box-sizing: border-box; border-radius: 50%; border: 2px solid #adb3bc; background: #fff; }
.sf-fit__body strong { color: var(--sf-ink); font-size: 14px; }
.sf-fit__body small { color: var(--sf-muted); font-weight: 600; font-size: 12.5px; line-height: 1.45; }
.sf-fit__option:hover .sf-fit__body { border-color: #adb3bc; }
.sf-fit__option input:checked + .sf-fit__body { border-color: var(--sf-navy); background: #f5faf5; box-shadow: 0 0 0 3px rgba(46, 128, 54, .10); }
.sf-fit__option input:checked + .sf-fit__body::before { border-color: var(--sf-navy); background: radial-gradient(circle, var(--sf-navy) 0 3.5px, #fff 4.5px); }
.sf-fit__option input:focus-visible + .sf-fit__body { outline: 3px solid rgba(44, 131, 55, .45); outline-offset: 2px; }
.ai-input-card textarea { min-height: 78px; }
.sf-notes__counter { display: block; margin-top: 4px; text-align: right; color: var(--sf-muted); font-size: 12px; font-weight: 700; }

/* FIX (2026-09-29, P5-1): ঐচ্ছিক বাড়তি মাপ (ভাঁজ-করা) */
.sf-advanced { margin-top: 14px; border: 1px dashed #c1dec4; border-radius: 14px; background: #fbfdfb; min-width: 0; }
.sf-advanced > summary { list-style: none; cursor: pointer; padding: 12px 14px; display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--sf-navy); font-weight: 800; font-size: 14px; }
.sf-advanced > summary::-webkit-details-marker { display: none; }
.sf-advanced > summary::after { content: "+"; flex: 0 0 auto; width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; background: #eef8ef; color: var(--sf-navy); font-weight: 900; }
.sf-advanced[open] > summary::after { content: "−"; background: var(--sf-navy); color: #fff; }
.sf-advanced.has-issue > summary { color: #b45309; }
.sf-advanced.has-issue > summary::after { background: #fff7e6; color: #b45309; }
.sf-advanced__hint { margin: 0 14px; color: var(--sf-muted); font-size: 12.5px; line-height: 1.5; }
.sf-advanced > .editable-measurements { margin-top: 10px; padding: 0 14px 14px; }

/* FIX (2026-09-29, P5-2): সংরক্ষিত মাপের ব্যানার (form-grid-এর পুরো সারি জুড়ে) */
.sf-saved-banner { grid-column: 1 / -1; display: flex; align-items: center; flex-wrap: wrap; gap: 12px 14px; padding: 14px 16px; border-radius: 18px; border: 1px solid #b6e6bb; background: linear-gradient(135deg, #eef8ef, #f8fcf8); box-shadow: var(--sf-shadow-sm); min-width: 0; }
.sf-saved-banner.is-applied { border-color: #bbf7d0; background: linear-gradient(135deg, #ecfdf5, #f8fffb); }
.sf-saved-banner__icon { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: #fff; color: var(--sf-navy); }
.sf-saved-banner__text { flex: 1 1 220px; display: grid; gap: 2px; min-width: 0; }
.sf-saved-banner__text span { color: var(--sf-muted); font-size: 13.5px; }
.sf-saved-banner__actions { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.sf-saved-banner .su-btn { white-space: normal; text-align: center; line-height: 1.35; }

/* FIX (2026-09-29, P5-3): লাইভ যাচাই-প্যানেল — error লাল, review কমলা, warning হলুদ */
.sf-vpanel, .sf-garment { margin: 14px 0; padding: 14px; border: 1px solid var(--sf-line); border-radius: 16px; background: #fff; min-width: 0; }
.sf-vpanel[data-status="error"] { border-color: #fecaca; background: #fffafa; }
.sf-vpanel[data-status="review"] { border-color: #fde8c2; }
.sf-vpanel[data-status="warning"] { border-color: #fde68a; }
.sf-vpanel__head, .sf-garment__head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 10px; }
.sf-vpanel__head h4, .sf-garment__head h4 { margin: 0; font-size: 15px; color: var(--sf-ink); }
.sf-vpanel__meta { margin: 6px 0 0; color: var(--sf-muted); font-size: 12.5px; }
.sf-vpanel__list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.sf-vissue { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 6px 10px; align-items: start; padding: 10px; border-radius: 12px; border: 1px solid #f0f1f3; background: #fbfdfb; font-size: 13px; line-height: 1.5; }
.sf-vissue__icon { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--sf-muted); color: #fff; font-weight: 900; font-size: 13px; }
.sf-vissue__body { min-width: 0; color: #343941; overflow-wrap: anywhere; }
.sf-vissue__apply { grid-column: 2; justify-self: start; padding: 5px 12px; border: 1px solid currentColor; border-radius: 999px; background: #fff; font-weight: 800; font-size: 12.5px; cursor: pointer; transition: background .2s; }
.sf-vissue.is-error { background: #fef2f2; border-color: #fecaca; }
.sf-vissue.is-error .sf-vissue__icon { background: #dc2626; }
.sf-vissue.is-error .sf-vissue__apply { color: #b91c1c; }
.sf-vissue.is-review { background: #fff7e6; border-color: #fde8c2; }
.sf-vissue.is-review .sf-vissue__icon { background: #d97706; }
.sf-vissue.is-review .sf-vissue__apply { color: #a05a00; }
.sf-vissue.is-warning { background: #fefce8; border-color: #fde68a; }
.sf-vissue.is-warning .sf-vissue__icon { background: #ca8a04; }
.sf-vissue.is-warning .sf-vissue__apply { color: #854d0e; }
.sf-vissue.is-ok { background: #f0fdf4; border-color: #bbf7d0; }
.sf-vissue.is-ok .sf-vissue__icon { background: var(--sf-green); }
.sf-vissue__apply:hover { background: #f8faf8; }
.sf-vpill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: #eef3ee; color: var(--sf-muted); font-size: 12px; font-weight: 800; line-height: 1.3; }
.sf-vpill::before { content: ""; flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.sf-vpill:empty { display: none; }
.sf-vpill.is-ok { background: #e9fbf2; color: #087545; }
.sf-vpill.is-warning { background: #fefce8; color: #854d0e; }
.sf-vpill.is-review { background: #fff7e6; color: #a05a00; }
.sf-vpill.is-error { background: #fee2e2; color: #b91c1c; }

/* FIX (2026-09-29, P5-4): পোশাকের মাপ ও মাপের টেবিল */
.sf-garment { background: linear-gradient(160deg, #fff, #f7fbf7); }
.sf-garment__summary { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.sf-garment__summary li { display: grid; gap: 2px; padding: 8px 10px; border-radius: 10px; background: #fff; border: 1px solid #f0f1f3; font-size: 13px; }
.sf-garment__summary strong { color: var(--sf-navy); }
.sf-garment__summary span { color: #41464d; overflow-wrap: anywhere; }
.sf-garment__empty { margin: 8px 0 0; color: var(--sf-muted); font-size: 13px; }
/* FIX (2026-09-29, P5-4): সীমার বাইরের মান থাকলে পোশাকের মাপ পুরনো — ঝাপসা + বার্তা */
.sf-garment__stale { margin: 8px 0 0; padding: 8px 10px; border-radius: 10px; background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; font-size: 12.5px; font-weight: 700; }
.sf-garment.is-stale .sf-garment__summary, .sf-garment.is-stale .sf-garment__details, .sf-garment.is-stale [data-garment-fit] { opacity: .45; filter: grayscale(.5); }
.sf-garment__details, .sf-msnap__details { margin-top: 8px; }
.sf-garment__details > summary, .sf-msnap__details > summary { font-size: 13.5px; padding: 4px 0; }
.sf-table-scroll { width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: 8px; }
.sf-mtable { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.sf-mtable caption { caption-side: top; text-align: left; padding: 2px 0 6px; font-weight: 800; color: var(--sf-navy); }
.sf-mtable th, .sf-mtable td { padding: 6px 5px; border-bottom: 1px solid #f0f1f3; text-align: right; white-space: nowrap; }
.sf-mtable th[scope="row"], .sf-mtable thead th:first-child { text-align: left; white-space: normal; min-width: 72px; }
.sf-mtable thead th { color: var(--sf-muted); font-size: 11.5px; font-weight: 800; }
.sf-mtable td strong { color: var(--sf-navy); }

/* FIX (2026-09-29, P5-4): কার্ট/চেকআউট/কনফার্মেশন/ট্র্যাকের মাপ-snapshot (partials/measurement-snapshot) */
.sf-msnap { display: grid; gap: 8px; margin: 10px 0; min-width: 0; }
.sf-msnap__chips { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.sf-chip { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding: 5px 10px; border-radius: 999px; border: 1px solid #e6efe7; background: #f3f8f3; color: #41464d; font-size: 12.5px; font-weight: 700; overflow-wrap: anywhere; }
.sf-chip strong { color: var(--sf-ink); }
.sf-chip.is-size { background: var(--sf-navy); border-color: var(--sf-navy); color: #fff; }
.sf-chip.is-fit { background: #eef8ef; border-color: #dcefdf; color: var(--sf-navy); }
.sf-chip.is-more { background: #fff; color: var(--sf-muted); }
.sf-msnap__empty { margin: 0; color: var(--sf-muted); font-size: 13.5px; }
.sf-msnap__caption { margin: 6px 0 0; font-weight: 800; font-size: 13px; color: var(--sf-ink); }
.sf-msnap__caption small { color: var(--sf-muted); font-weight: 700; }
.sf-mgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(118px, 100%), 1fr)); gap: 6px; margin: 4px 0 0; }
.sf-mgrid > div { min-width: 0; padding: 7px 10px; border-radius: 10px; border: 1px solid #f0f1f3; background: #f8fcf8; }
.sf-mgrid dt { color: var(--sf-muted); font-size: 12px; font-weight: 700; overflow-wrap: anywhere; }
.sf-mgrid dd { margin: 2px 0 0; color: var(--sf-ink); font-size: 14px; font-weight: 800; }
.sf-mgrid dd small { color: var(--sf-muted); font-size: 11.5px; font-weight: 700; }
.sf-msnap__details { border-top: 1px dashed var(--sf-line); padding-top: 6px; }
.sf-msnap__note { margin: 6px 0 0; color: var(--sf-muted); font-size: 12px; }
.sf-msnap__notes { margin: 6px 0 0; color: #41464d; font-size: 13px; overflow-wrap: anywhere; }

/* FIX (2026-09-29, P5-1): কার্টের একক-বোতাম (server-এ POST — JS লাগে না) */
.sf-unit-toggle { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; padding: 5px 5px 5px 12px; border-radius: 999px; border: 1px solid var(--sf-line); background: #fff; box-shadow: var(--sf-shadow-sm); color: var(--sf-muted); font-size: 13px; font-weight: 700; max-width: 100%; }
.sf-unit-toggle form { margin: 0; display: inline-flex; }
.sf-unit-btn { min-width: 44px; min-height: 34px; padding: 5px 12px; border-radius: 999px; border: 1px solid transparent; background: transparent; color: var(--sf-navy); font-weight: 800; font-size: 13px; cursor: pointer; transition: background .2s, color .2s; }
.sf-unit-btn:hover { background: #eef8ef; }
.sf-unit-btn.is-active { background: var(--sf-navy); color: #fff; }

/* FIX (2026-09-29, P5-4): চেকআউটের অর্ডার-সারাংশ (checkout-grid-এর পুরো সারি) */
.sf-order-summary { grid-column: 1 / -1; min-width: 0; }
.sf-order-summary__item { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 12px 0; border-bottom: 1px dashed var(--sf-line); }
.sf-order-summary__item:last-child { border-bottom: 0; }
.sf-order-summary__item img, .sf-order-summary__ph { width: 56px; height: 70px; object-fit: contain; border-radius: 10px; background: #f5faf5; }
.sf-order-summary__ph { display: block; background: linear-gradient(#b8e1bc 0 42%, #282e37 42%); }
.sf-order-summary__info { min-width: 0; }
.sf-order-summary__info h4 { margin: 0; font-size: 15px; }
.sf-order-summary__info p { margin: 2px 0 0; color: var(--sf-muted); font-size: 13px; }
.sf-order-summary__price { color: var(--sf-navy); font-weight: 800; white-space: nowrap; }

/* FIX (2026-09-29, P5-4): কনফার্মেশন / ট্র্যাকের "এই অর্ডারের মাপ" */
.sf-order-measure { display: grid; gap: 12px; margin: 22px 0 8px; text-align: left; min-width: 0; }
.sf-order-measure__title { margin: 0; font-size: 18px; }
.sf-order-measure__item { min-width: 0; padding: 14px 16px; border: 1px solid var(--sf-line); border-radius: 16px; background: #fff; box-shadow: var(--sf-shadow-sm); }
.sf-order-measure__item h3 { margin: 0; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 10px; font-size: 15px; }
.sf-order-measure__item h3 small { color: var(--sf-muted); font-weight: 700; }
.track-card .sf-order-measure { margin-top: 16px; }

/* CHANGE (2026-10-18, P22): ড্যাশবোর্ডের "মাপের প্রোফাইল" কার্ড (.sf-mprofile…) আর নেই — সন্তানের কার্ডে মাপ এখন portal-dashboard.css-এ */

@media (min-width: 561px) and (max-width: 1200px) {
    .sf-fit__options { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
    .sf-saved-banner { padding: 12px; }
    .sf-saved-banner__actions, .sf-saved-banner__actions .su-btn { width: 100%; }
    .sf-order-summary__item { grid-template-columns: 56px minmax(0, 1fr); gap: 10px; }
    .sf-order-summary__price { grid-column: 2; }
    .sf-unit-toggle { border-radius: 16px; }
}
@media print {
    .sf-vpanel, .sf-garment, .sf-help-btn, .sf-unit-toggle { display: none !important; }
}

/* ---------- ১৫. Measurement v3 — Phase 6 (P6-6: ৩-মোড, "আমার মাপ", পাবলিক গাইড) ---------- */
/* FIX (2026-09-29, P6-6): hidden attribute সবসময় জেতে (.su-btn-এর display:inline-flex যেন লুকানো জিনিস দেখিয়ে না ফেলে) */
.sf-mp-card [hidden], .sf-guide [hidden], .sf-mode [hidden] { display: none !important; }

/* FIX (2026-09-29, P6-6): ৩-মোডের segmented control (measurement পাতার Basic কার্ডের মাথায়)।
   JS না চললে লুকানো (পাতা তখন AI-ক্যামেরা মোডে, Phase 5-এর মতো); ≤ 480px-এ তিনটে পুরো-চওড়া বোতাম। */
html.sf-no-js .sf-mode { display: none; }
.sf-mode { border: 0; margin: 2px 0 12px; padding: 0; min-width: 0; }
.sf-mode legend { padding: 0; margin: 0 0 8px; font-weight: 800; font-size: 14px; color: var(--sf-ink); }
.sf-mode__options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: 14px; background: #eef5ee; border: 1px solid var(--sf-line); }
.sf-mode__option { position: relative; display: block; margin: 0; cursor: pointer; min-width: 0; }
.sf-mode__option input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.sf-mode__body { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 58px; height: 100%; padding: 8px 6px; border-radius: 10px; color: var(--sf-muted); font-weight: 800; font-size: 12.5px; line-height: 1.25; text-align: center; transition: background .2s, color .2s, box-shadow .2s; }
/* app.css-এর "label span { লাল }" (আবশ্যিক * চিহ্ন) এখানে নয় */
.sf-mode__label { color: inherit; overflow-wrap: anywhere; }
.sf-mode__option:hover .sf-mode__body { color: var(--sf-navy); background: rgba(255, 255, 255, .65); }
.sf-mode__option input:checked + .sf-mode__body { background: #fff; color: var(--sf-navy); box-shadow: 0 4px 12px rgba(46, 128, 54, .14); }
.sf-mode__option input:focus-visible + .sf-mode__body { outline: 3px solid rgba(44, 131, 55, .45); outline-offset: 1px; }
.sf-mode__hint { margin: 8px 0 0; color: var(--sf-muted); font-size: 12.5px; line-height: 1.5; }
/* হাতে-ফিতা মোড: বাঁয়ের কার্ডে টিপস, auto-কার্ডে ছোট নির্দেশনা */
.sf-manual-tips { margin-top: 14px; padding: 12px 14px; border-radius: 14px; background: #f5faf5; border: 1px solid #dcefdf; min-width: 0; }
.sf-manual-tips__title { margin: 0 0 6px; font-weight: 800; font-size: 13.5px; color: var(--sf-navy); }
.sf-manual-tips ul { margin: 0 0 12px; padding-left: 18px; display: grid; gap: 4px; color: #41464d; font-size: 13px; line-height: 1.5; }
.sf-manual-tips .su-btn { white-space: normal; text-align: left; line-height: 1.35; }
.sf-manual-hint { margin: -4px 0 8px; color: var(--sf-muted); font-size: 12.5px; line-height: 1.5; }
/* "?" সাহায্যের ভেতরে পুরো গাইডের লিংক */
.sf-help-pop__video { margin-right: 12px; }
.sf-help-pop__guide { display: inline-flex; align-items: center; gap: 4px; margin-top: 8px; color: var(--sf-navy); font-weight: 800; text-decoration: underline; }

/* FIX (2026-09-29, P6-6): "আমার মাপ" পাতা — প্রোফাইল-কার্ড, ভার্সন-ইতিহাস টেবিল, তুলনা */
.sf-mp-hero { align-items: flex-start; flex-wrap: wrap; }
.sf-mp-hero > div:first-child { flex: 1 1 320px; min-width: 0; }
.sf-mp-hero__actions { align-items: center; }
.sf-mp-hero .sf-unit-toggle { margin: 0; }
.sf-mp-jump { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 4px; }
.sf-mp-jump a { padding: 7px 12px; border-radius: 999px; background: #eef8ef; color: var(--sf-navy); font-weight: 800; font-size: 13px; text-decoration: none; overflow-wrap: anywhere; }
.sf-mp-jump a:hover { background: var(--sf-navy); color: #fff; }
.sf-mp-card { margin-top: 16px; min-width: 0; scroll-margin-top: calc(var(--sf-header-h) + 16px); }
.sf-mp-card__head { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 12px; }
.sf-mp-card__title { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1 1 240px; }
.sf-mp-card__title > div { min-width: 0; }
.sf-mp-card__title h3 { margin: 0; font-size: 18px; overflow-wrap: anywhere; }
.sf-mp-card__title small { display: block; margin-top: 2px; color: var(--sf-muted); font-weight: 600; overflow-wrap: anywhere; }
.sf-mp-card__avatar { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; background: linear-gradient(135deg, #eef8ef, #dcefdf); color: var(--sf-navy); }
.sf-mp-card__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.sf-mp-card__actions .su-btn { white-space: normal; text-align: center; line-height: 1.35; }
.sf-mp-summary { padding: 12px 14px; border: 1px solid #f0f1f3; border-radius: 16px; background: #fbfdfb; min-width: 0; }
.sf-mp-summary__line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; font-size: 13.5px; color: #41464d; }
.sf-mp-summary__line strong { color: var(--sf-ink); }
.sf-mp-summary__hint { margin: 6px 0 0; color: var(--sf-muted); font-size: 12.5px; line-height: 1.5; }
.sf-mp-summary .sf-msnap { margin: 10px 0 0; }
.sf-mp-history { margin-top: 16px; min-width: 0; }
.sf-mp-history h4 { margin: 0 0 8px; font-size: 15px; }
.sf-mp-history h4 small { color: var(--sf-muted); font-weight: 700; }
.sf-mp-table-wrap { width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid #f0f1f3; border-radius: 14px; background: #fff; }
.sf-mp-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.sf-mp-table th, .sf-mp-table td { padding: 9px 10px; border-bottom: 1px solid #f0f1f3; text-align: left; vertical-align: middle; }
.sf-mp-table thead th { background: #f5faf5; color: var(--sf-muted); font-size: 11.5px; font-weight: 800; letter-spacing: .02em; white-space: nowrap; }
.sf-mp-table thead th small { font-weight: 700; }
.sf-mp-table tbody tr:last-child > * { border-bottom: 0; }
.sf-mp-table tbody tr.is-active { background: #f3fbf7; }
.sf-mp-table tbody th { font-weight: 800; white-space: nowrap; }
.sf-mp-vno { font-weight: 900; color: var(--sf-navy); margin-right: 6px; }
.sf-mp-sub { display: block; color: var(--sf-muted); font-size: 11.5px; font-weight: 600; }
/* কাজের ঘর: বোতাম আর "Compare with current" ওপর-নিচে (টেবিল চওড়া না হয়); তারিখ এক লাইনে */
.sf-mp-table td.sf-mp-actions { white-space: nowrap; }
.sf-mp-actions-inner { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.sf-mp-actions form { display: inline-flex; margin: 0; vertical-align: middle; }
.sf-mp-date { white-space: nowrap; }
.sf-mp-table .sf-vpill, .sf-mp-table .sf-mp-pill { white-space: nowrap; }
.sf-mp-link { color: var(--sf-navy); font-weight: 800; font-size: 12.5px; }
.sf-mp-pill { display: inline-flex; align-items: center; padding: 4px 9px; border-radius: 999px; background: #eef3ee; color: #41464d; font-size: 11.5px; font-weight: 800; line-height: 1.3; white-space: nowrap; }
.sf-mp-pill.is-current { background: #e9fbf2; color: #087545; }
.sf-mp-pill.is-staff { background: #f3e8ff; color: #6b21a8; }
.sf-mp-pill.is-restored { background: #fff3f2; color: #9a5b00; }
.sf-mp-pill.is-quick { background: #fff7e6; color: #a05a00; }
.sf-mp-pill.is-manual { background: #e4f4e5; color: #33863b; }
.sf-mp-pill.is-ai { background: #eef8ef; color: var(--sf-navy); }
.sf-mp-compare { margin-top: 16px; padding: 12px 14px; border: 1px dashed #c1dec4; border-radius: 16px; background: #fbfdfb; min-width: 0; }
.sf-mp-compare__title { margin: 0 0 8px; font-weight: 800; font-size: 14px; }
.sf-mp-compare__fields { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.sf-mp-compare__field { flex: 1 1 180px; min-width: 0; }
.sf-mp-compare__field label { margin: 0 0 6px; font-size: 13px; }
.sf-mp-compare__field select { width: 100%; max-width: 100%; }
.sf-mp-compare__arrow { padding-bottom: 12px; color: var(--sf-muted); font-weight: 900; }
.sf-mp-empty { padding: 22px; }
.sf-mp-empty p { margin: 0 0 12px; }
/* তুলনার পাতা */
.sf-mp-sides { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; }
.sf-mp-side { display: grid; gap: 8px; align-content: start; padding: 12px 14px; border: 1px solid #f0f1f3; border-radius: 16px; background: #fbfdfb; min-width: 0; }
.sf-mp-side.is-active { border-color: #bbf7d0; background: #f6fef9; }
.sf-mp-side__title { margin: 0; color: var(--sf-muted); font-size: 11.5px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.sf-mp-side__no { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.sf-mp-side__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sf-mp-side form { margin: 0; }
.sf-mp-side .su-btn { white-space: normal; text-align: center; line-height: 1.35; }
.sf-mp-compare__summary { margin: 4px 0 10px; font-weight: 800; color: var(--sf-navy); }
.sf-mp-table--compare td, .sf-mp-table--compare thead th { text-align: right; }
.sf-mp-table--compare th[scope="row"], .sf-mp-table--compare thead th:first-child { text-align: left; }
.sf-delta { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sf-delta.is-up { background: #dbf1dd; color: #3b8543; }
.sf-delta.is-down { background: #fee2e2; color: #b91c1c; }
.sf-delta.is-same { background: #eef3ee; color: var(--sf-muted); }
.sf-delta.is-none { color: var(--sf-muted); }
.sf-mp-compare__back { margin-top: 12px; }

/* FIX (2026-09-29, P6-6): পাবলিক মাপের গাইড (/measurement-guide) — full_bleed পাতা, প্রতিটা অংশ সাদা কার্ড */
.sf-guide-page { padding: clamp(18px, 3vw, 34px) 0 clamp(30px, 5vw, 60px); }
.sf-guide { display: grid; gap: clamp(16px, 2.4vw, 26px); min-width: 0; }
.sf-guide__hero { text-align: center; padding: clamp(22px, 4vw, 44px) clamp(16px, 3vw, 32px); border-radius: 28px; border: 1px solid rgba(46, 128, 54, .10); background: radial-gradient(600px 260px at 10% 0%, rgba(44, 131, 55, .14), transparent 60%), radial-gradient(500px 240px at 100% 100%, rgba(214, 58, 51, .12), transparent 60%), linear-gradient(160deg, #ffffff, #f1faf2); box-shadow: var(--sf-shadow-md); }
.sf-guide__hero h1 { font-size: clamp(26px, 4.2vw, 42px); margin: 12px auto 10px; max-width: 780px; text-wrap: balance; }
.sf-guide__lead { margin: 0 auto; color: var(--sf-muted); font-size: 16px; line-height: 1.7; max-width: 640px; }
.sf-guide__gender { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin: 18px 0 0; padding: 4px; border-radius: 999px; background: #eef5ee; border: 1px solid var(--sf-line); }
.sf-guide__gender-link { min-width: 96px; padding: 8px 18px; border-radius: 999px; color: var(--sf-navy); font-weight: 800; text-decoration: none; transition: background .2s, color .2s; }
.sf-guide__gender-link:hover { background: rgba(255, 255, 255, .8); }
.sf-guide__gender-link.is-current { background: var(--sf-navy); color: #fff; box-shadow: 0 6px 16px rgba(46, 128, 54, .22); }
.sf-guide__facts { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; color: #41464d; font-size: 13.5px; font-weight: 700; }
.sf-guide__facts li { display: inline-flex; align-items: center; gap: 6px; }
.sf-guide__facts .su-icon { color: var(--sf-green); }
.sf-guide__section { min-width: 0; padding: clamp(16px, 3vw, 28px); border-radius: 24px; border: 1px solid rgba(46, 128, 54, .10); background: #fff; box-shadow: var(--sf-shadow-sm); scroll-margin-top: calc(var(--sf-header-h) + 16px); }
.sf-guide__section > h2 { font-size: clamp(21px, 2.6vw, 28px); margin: 0 0 12px; }
.sf-guide__intro { margin: -2px 0 14px; color: var(--sf-muted); line-height: 1.65; }
.sf-guide__before { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.sf-guide__checklist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.sf-guide__checklist li { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 1px solid #f0f1f3; border-radius: 14px; background: #fbfdfb; font-size: 14px; line-height: 1.55; color: #343941; min-width: 0; }
.sf-guide__checklist .su-icon { flex: 0 0 auto; margin-top: 3px; color: var(--sf-green); }
.sf-guide__unit { padding: 16px; border-radius: 16px; background: linear-gradient(160deg, #eef8ef, #f8fcf8); border: 1px solid #dcefdf; min-width: 0; }
.sf-guide__unit h3 { margin: 0 0 6px; font-size: 16px; }
.sf-guide__unit p { margin: 0; color: #41464d; font-size: 14px; line-height: 1.6; }
.sf-guide__unit .sf-guide__unit-eg { margin-top: 10px; font-weight: 800; color: var(--sf-navy); }
/* ধাপে ধাপে: বাঁয়ে sticky ছবি, ডানে কার্ড */
.sf-guide__layout { display: grid; grid-template-columns: minmax(220px, 290px) minmax(0, 1fr); gap: clamp(18px, 3vw, 32px); align-items: start; }
.sf-guide__figure { position: sticky; top: calc(var(--sf-header-h) + 16px); z-index: 5; margin: 0; padding: 14px; border: 1px solid #e6efe7; border-radius: 20px; background: #fff; box-shadow: var(--sf-shadow-sm); display: grid; justify-items: center; gap: 10px; min-width: 0; }
.sf-figure { width: 100%; max-width: 260px; height: auto; overflow: visible; }
.sf-guide__caption { margin: 0; text-align: center; color: var(--sf-muted); font-size: 12.5px; font-weight: 700; line-height: 1.5; min-height: 2.6em; overflow-wrap: anywhere; }
.sf-figure .sf-mpoint { cursor: pointer; transition: opacity .2s; }
.sf-figure .sf-mline, .sf-figure .sf-mtick, .sf-figure .sf-mguide { transition: stroke .2s, stroke-width .2s; }
.sf-figure .sf-mbadge circle, .sf-figure .sf-mbadge text { transition: fill .2s, stroke .2s; }
.sf-figure.has-active .sf-mpoint { opacity: .2; }
.sf-figure.has-active .sf-mpoint.is-active { opacity: 1; }
.sf-figure .sf-mpoint.is-active .sf-mline, .sf-figure .sf-mpoint.is-active .sf-mtick { stroke: var(--sf-gold-2); stroke-width: 3.5; }
.sf-figure .sf-mpoint.is-active .sf-mguide { stroke: var(--sf-gold); }
.sf-figure .sf-mpoint.is-active .sf-mbadge circle { fill: var(--sf-navy); stroke: var(--sf-navy); }
.sf-figure .sf-mpoint.is-active .sf-mbadge text { fill: #fff; }
.sf-guide__tiers { display: grid; gap: 22px; min-width: 0; }
.sf-guide__tier h3 { margin: 0 0 4px; font-size: 18px; display: flex; align-items: center; gap: 8px; }
.sf-guide__tier h3::before { content: ""; flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%; background: var(--sf-navy); }
.sf-guide__tier.is-auto h3::before { background: var(--sf-blue); }
.sf-guide__tier.is-advanced h3::before { background: var(--sf-gold); }
.sf-guide__tier-hint { margin: 0 0 10px; color: var(--sf-muted); font-size: 13.5px; line-height: 1.55; }
.sf-gpoints { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 12px; }
.sf-gpoint { display: grid; gap: 8px; align-content: start; min-width: 0; padding: 14px; border: 1px solid #e6efe7; border-radius: 16px; background: #fff; box-shadow: var(--sf-shadow-sm); transition: border-color .2s, box-shadow .2s, background .2s; scroll-margin-top: calc(var(--sf-header-h) + 20px); cursor: pointer; }
.sf-gpoint:hover, .sf-gpoint.is-active { border-color: var(--sf-navy); box-shadow: 0 10px 26px rgba(46, 128, 54, .12); }
.sf-gpoint.is-active { background: #fbfdfb; }
.sf-gpoint:target { border-color: var(--sf-gold); box-shadow: 0 0 0 3px rgba(214, 58, 51, .25); }
.sf-gpoint__head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.sf-gpoint__num { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: #eef8ef; color: var(--sf-navy); font-weight: 900; font-size: 13px; transition: background .2s, color .2s; }
.sf-gpoint.is-active .sf-gpoint__num { background: var(--sf-navy); color: #fff; }
.sf-gpoint__name { margin: 0; font-size: 15.5px; min-width: 0; overflow-wrap: anywhere; }
.sf-gpoint__req { margin-left: auto; padding: 3px 8px; border-radius: 999px; background: #fee2e2; color: #b91c1c; font-size: 11px; font-weight: 800; white-space: nowrap; }
.sf-gpoint__help { margin: 0; color: #41464d; font-size: 14px; line-height: 1.6; }
.sf-gpoint__range { margin: 0; padding: 7px 10px; border-radius: 10px; background: #f5faf5; color: var(--sf-navy); font-size: 13px; font-weight: 700; line-height: 1.45; overflow-wrap: anywhere; }
.sf-gpoint__range.is-catalog { background: #f8faf8; color: var(--sf-muted); }
.sf-gpoint__for { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--sf-muted); font-size: 12.5px; font-weight: 700; }
.sf-gpoint__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.sf-gpoint__show, .sf-gpoint__video { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--sf-line); background: #fff; color: var(--sf-navy); font: inherit; font-weight: 800; font-size: 12.5px; text-decoration: none; cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.sf-gpoint__show:hover { border-color: var(--sf-navy); }
.sf-gpoint__show[aria-pressed="true"] { background: var(--sf-navy); border-color: var(--sf-navy); color: #fff; }
.sf-gpoint__video { background: #fff3f2; border-color: #fde8c2; color: #9a5b00; }
.sf-gpoint__show:focus-visible, .sf-gpoint__video:focus-visible, .sf-guide__gender-link:focus-visible, .sf-garment-map__item a:focus-visible { outline: 3px solid rgba(44, 131, 55, .45); outline-offset: 2px; }
/* কোন পোশাকে কোন মাপ */
.sf-garment-map { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap: 12px; }
.sf-garment-map__item { padding: 14px; border: 1px solid #e6efe7; border-radius: 16px; background: #fbfdfb; min-width: 0; }
.sf-garment-map__item h3 { margin: 0 0 8px; font-size: 16px; }
.sf-garment-map__item ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.sf-garment-map__item a { display: flex; align-items: center; gap: 8px; color: #343941; text-decoration: none; font-weight: 700; font-size: 13.5px; overflow-wrap: anywhere; }
.sf-garment-map__item a:hover { color: var(--sf-navy); text-decoration: underline; }
.sf-garment-map__no { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: #eef8ef; color: var(--sf-navy); font-size: 11px; font-weight: 900; }
.sf-guide .sf-faq { max-width: none; }
.sf-guide__cta { margin: 0; }

@media (max-width: 1024px) {
    .sf-guide__before { grid-template-columns: 1fr; }
    /* ট্যাবলেট: ছবির কলাম সরু, তবু পাশাপাশি (sticky) */
    .sf-guide__layout { grid-template-columns: minmax(170px, 210px) minmax(0, 1fr); }
    .sf-guide__figure { padding: 10px; }
}
@media (max-width: 700px) {
    /* ফোন: ছবি ওপরে ছোট করে sticky (নিচে কার্ড সরে), পাশে কোন মাপ হাইলাইট তার লেখা */
    .sf-guide__layout { grid-template-columns: minmax(0, 1fr); }
    .sf-guide__figure { top: calc(var(--sf-header-h) + 6px); grid-template-columns: auto minmax(0, 1fr); justify-items: start; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 16px; box-shadow: 0 10px 24px rgba(46, 128, 54, .14); }
    .sf-figure { width: auto; height: min(28vh, 230px); max-width: 40vw; }
    .sf-guide__caption { text-align: left; font-size: 13px; min-height: 0; }
}
@media (min-width: 761px) and (max-width: 1100px) {
    /* ট্যাবলেট: ভার্সন-ইতিহাসের ১১ কলাম ধরে না — প্রতিটা সারি ৪-কলামের কার্ড, ওপরে ছোট করে কলামের নাম */
    .sf-mp-table-wrap:has(.sf-mp-table--history) { border: 0; overflow: visible; background: transparent; }
    .sf-mp-table--history, .sf-mp-table--history tbody { display: block; width: 100%; }
    .sf-mp-table--history thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .sf-mp-table--history tbody tr { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px 14px; padding: 10px 14px; margin-bottom: 10px; border: 1px solid #f0f1f3; border-radius: 14px; background: #fff; }
    .sf-mp-table--history tbody tr.is-active { border-color: #bbf7d0; background: #f6fef9; }
    .sf-mp-table--history tbody th, .sf-mp-table--history tbody td { display: block; padding: 5px 0; border: 0; white-space: normal; min-width: 0; overflow-wrap: anywhere; }
    .sf-mp-table--history [data-label]::before { content: attr(data-label); display: block; margin-bottom: 2px; color: var(--sf-muted); font-size: 11.5px; font-weight: 700; }
    .sf-mp-table--history tbody th[scope="row"], .sf-mp-table--history tbody td.sf-mp-actions { grid-column: 1 / -1; }
    .sf-mp-table--history tbody th[scope="row"]::before, .sf-mp-table--history tbody td.sf-mp-actions::before { content: none; }
    .sf-mp-table--history .sf-mp-actions-inner { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
}
@media (max-width: 760px) {
    /* "আমার মাপ"-এর টেবিল: প্রতিটা সারি একটা কার্ড, বাঁয়ে কলামের নাম (data-label) */
    .sf-mp-table-wrap { border: 0; overflow: visible; background: transparent; }
    .sf-mp-table, .sf-mp-table tbody, .sf-mp-table tr, .sf-mp-table th, .sf-mp-table td { display: block; width: 100%; }
    .sf-mp-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .sf-mp-table tbody tr { padding: 6px 12px; margin-bottom: 10px; border: 1px solid #f0f1f3; border-radius: 14px; background: #fff; }
    .sf-mp-table tbody tr.is-active { border-color: #bbf7d0; background: #f6fef9; }
    .sf-mp-table tbody th, .sf-mp-table tbody td { position: relative; min-height: 34px; padding: 7px 0 7px 42%; border-bottom: 1px dashed #f0f1f3; text-align: left; white-space: normal; overflow-wrap: anywhere; }
    .sf-mp-table tbody tr > *:last-child { border-bottom: 0; }
    .sf-mp-table [data-label]::before { content: attr(data-label); position: absolute; left: 0; top: 8px; width: 38%; color: var(--sf-muted); font-size: 12px; font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; }
    .sf-mp-table tbody th[scope="row"] { padding-left: 0; font-size: 14px; }
    .sf-mp-table tbody th[scope="row"]::before, .sf-mp-table tbody td.sf-mp-actions::before { content: none; }
    .sf-mp-table tbody td.sf-mp-actions { padding-left: 0; white-space: normal; }
    .sf-mp-actions-inner { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
    .sf-mp-table--compare td, .sf-mp-table--compare thead th { text-align: left; }
    .sf-mp-sides { grid-template-columns: minmax(0, 1fr); }
    .sf-mp-compare__arrow { display: none; }
}
@media (max-width: 560px) {
    .sf-guide__checklist { grid-template-columns: minmax(0, 1fr); }
    .sf-guide__gender-link { min-width: 0; padding: 8px 16px; }
    .sf-mp-card__actions, .sf-mp-card__actions .su-btn { width: 100%; }
    .sf-mp-hero__actions { width: 100%; justify-content: flex-start; }
}
@media (max-width: 480px) {
    .sf-mode__options { grid-template-columns: minmax(0, 1fr); }
    .sf-mode__body { flex-direction: row; justify-content: flex-start; min-height: 46px; padding: 10px 12px; font-size: 14px; text-align: left; }
}
@media print {
    .sf-guide__figure { position: static; box-shadow: none; }
    .sf-gpoint__actions, .sf-guide__gender, .sf-guide__cta, .sf-mp-compare, .sf-mp-actions form, .sf-mp-hero__actions { display: none !important; }
}

/* ---------- ১৬-C. অর্ডারের timeline, বদল/ফেরত ফর্ম, পেমেন্ট শুরু (P7-4 / P7-5 / P7-6 — 2026-09-29) ---------- */
/* FIX (2026-09-29, P7-5): partials/order-timeline — app.css-এর পুরনো .track-timeline (৬-কলামের অনুভূমিক grid) এখানে সব পর্দায় উলম্ব:
   বাঁয়ে বিন্দু + নিচের দিকে সংযোগ-রেখা (ধাপ done হলে নেভি), ডানে লেবেল, তারিখ, বিস্তারিত। done/current-এর রং ও pulse app.css থেকেই। */
.sf-otl { display: grid; gap: 12px; margin: 16px 0 18px; text-align: left; min-width: 0; }
.sf-otl__summary { display: grid; gap: 8px; min-width: 0; }
.sf-otl__bar { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 8px; margin: 0; border: 0; border-radius: 999px; background: #e8f0e9; color: var(--sf-navy); overflow: hidden; }
.sf-otl__bar::-webkit-progress-bar { background: #e8f0e9; border-radius: 999px; }
.sf-otl__bar::-webkit-progress-value { background: linear-gradient(90deg, var(--sf-navy), var(--sf-blue)); border-radius: 999px; }
.sf-otl__bar::-moz-progress-bar { background: linear-gradient(90deg, var(--sf-navy), var(--sf-blue)); border-radius: 999px; }
.sf-otl.is-delivered .sf-otl__bar::-webkit-progress-value { background: var(--sf-green); }
.sf-otl.is-delivered .sf-otl__bar::-moz-progress-bar { background: var(--sf-green); }
.sf-otl .sf-otl__eta { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 10px 12px; border-radius: 12px; background: #eef8ef; border: 1px solid #dcefdf; color: var(--sf-navy); font-weight: 700; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.sf-otl__eta .su-icon { flex: 0 0 auto; margin-top: 3px; }
.sf-otl__eta em, .sf-eta-line em { font-style: normal; color: #a05a00; }
/* ধাপের তালিকা (পুরনো class-এর উপর — .sf-otl-এর ভেতরে) */
.sf-otl .track-timeline { grid-template-columns: minmax(0, 1fr); gap: 0; margin: 0; padding: 0; }
.sf-otl .track-step { grid-template-columns: 32px minmax(0, 1fr); justify-items: start; align-items: start; gap: 12px; padding: 0 0 16px; text-align: left; }
.sf-otl .track-step:last-child { padding-bottom: 0; }
.sf-otl .track-step::before { display: none; }
.sf-otl .track-step::after { content: ""; position: absolute; left: 15px; top: 34px; bottom: 2px; width: 3px; border-radius: 2px; background: #e7e9eb; }
.sf-otl .track-step:last-child::after { display: none; }
.sf-otl .track-step.done::after { background: var(--sf-navy); }
.sf-otl .track-step.skipped .track-dot { background: #f8faf8; border-style: dashed; color: #a1a5ab; }
.sf-otl .track-step.is-cancelled .track-dot { background: #fef2f2; border-color: #dc2626; color: #dc2626; box-shadow: none; animation: none; }
.sf-otl__body { display: grid; gap: 2px; min-width: 0; padding-top: 5px; }
.sf-otl .track-label { font-size: 14.5px; line-height: 1.35; overflow-wrap: anywhere; }
.sf-otl .track-step.skipped .track-label { color: #a1a5ab; text-decoration: line-through; font-weight: 700; }
.sf-otl .track-step.is-cancelled .track-label { color: #b91c1c; }
.sf-otl__at { color: var(--sf-muted); font-size: 12.5px; font-weight: 700; }
.sf-otl__detail { color: #41464d; font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.sf-otl .track-step.upcoming .sf-otl__detail { color: var(--sf-muted); }
/* স্কুল থেকে সংগ্রহ: জায়গা, ঠিকানা, সময়, নির্দেশনা */
.sf-otl__pickup { min-width: 0; padding: 12px 14px; border-radius: 14px; border: 1px solid #bbf7d0; background: #f6fef9; }
.sf-otl .sf-otl__pickup-title { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; color: #087545; }
.sf-otl__pickup dl { display: grid; gap: 6px; margin: 0; }
.sf-otl__pickup dl > div { display: grid; grid-template-columns: minmax(96px, 32%) minmax(0, 1fr); gap: 8px; min-width: 0; }
.sf-otl__pickup dt { color: var(--sf-muted); font-size: 12.5px; font-weight: 700; }
.sf-otl__pickup dd { margin: 0; font-size: 13.5px; overflow-wrap: anywhere; }
/* compact — student dashboard-এর অর্ডার-কার্ড */
.sf-otl--compact { gap: 6px; margin: 10px 0 0; }
.sf-otl--compact .sf-otl__bar { height: 6px; }
.sf-otl .sf-otl__now { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin: 0; font-size: 13.5px; min-width: 0; }
.sf-otl .sf-otl__now strong { display: inline; color: var(--sf-navy); }
.sf-otl .sf-otl__now span { min-width: 0; color: var(--sf-muted); overflow-wrap: anywhere; }
.sf-otl--compact.is-cancelled .sf-otl__now strong { color: #b91c1c; }
.sf-otl--compact.is-delivered .sf-otl__now strong { color: #087545; }
.sf-otl--compact .sf-otl__eta { padding: 6px 10px; border-radius: 10px; font-size: 12.5px; }
.confirm-box .sf-otl { margin: 4px 0 18px; }

/* FIX (2026-09-29, P7-4): বদল/ফেরতের লিংক ও ইঙ্গিত (confirmation / track / dashboard) */
.sf-exchange-link { gap: 8px; }
.sf-exchange-hint { display: block; margin-top: 10px; font-size: 13px; }
.confirm-box .sf-exchange-hint { margin: 12px 0 0; text-align: center; }

/* FIX (2026-09-29, P7-4): বদল/ফেরতের পাতা (frontend/exchange + partials/exchange-form, exchange-requests) */
.sf-exchange { display: grid; gap: 18px; margin-top: 18px; min-width: 0; }
.sf-exchange__head { display: grid; gap: 8px; justify-items: start; min-width: 0; }
.sf-exchange__head h1 { margin: 0; font-size: clamp(26px, 4vw, 38px); }
.sf-exchange__head p { margin: 0; max-width: 70ch; color: var(--sf-muted); }
.sf-exchange__flash { margin: 0; padding: 12px 14px; border: 1px solid #dcefdf; border-radius: 14px; background: #eef8ef; color: var(--sf-navy); font-weight: 700; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.sf-exchange__flash.is-success { background: #f0fdf4; border-color: #bbf7d0; color: #087545; }
.sf-exchange__flash.is-warning { background: #fff7e6; border-color: #fde8c2; color: #a05a00; }
.sf-exchange__flash.is-error { background: #fef2f2; border-color: #fecaca; color: #b91c1c; }
.sf-exchange__form .sf-exchange__flash { margin-bottom: 4px; }
.sf-exchange__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 18px; align-items: start; }
.sf-exchange h2 { margin: 0 0 12px; font-size: 19px; }
.sf-exchange__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0 0 14px; }
.sf-exchange__facts > div { min-width: 0; padding: 10px 12px; border: 1px solid #f0f1f3; border-radius: 12px; background: #f8fcf8; }
.sf-exchange__facts dt { color: var(--sf-muted); font-size: 12px; font-weight: 700; }
.sf-exchange__facts dd { margin: 2px 0 0; color: var(--sf-ink); font-weight: 800; overflow-wrap: anywhere; }
.sf-exchange__subtitle { margin: 0 0 8px; font-size: 15px; }
.sf-exchange__items { display: grid; gap: 8px; margin: 0 0 14px; padding: 0; list-style: none; }
.sf-exchange__items li { display: grid; gap: 2px; min-width: 0; padding: 10px 12px; border: 1px dashed var(--sf-line); border-radius: 12px; overflow-wrap: anywhere; }
.sf-exchange__items small { color: var(--sf-muted); }
.sf-exchange .sf-req { color: #dc2626; }
.sf-exchange__types { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; min-width: 0; margin: 14px 0 0; padding: 0; border: 0; }
.sf-exchange__types legend { padding: 0; margin: 0 0 8px; font-weight: 800; font-size: 14px; }
.sf-exchange__type { position: relative; display: flex; align-items: flex-start; gap: 10px; min-width: 0; margin: 0; padding: 12px; border: 1px solid var(--sf-line); border-radius: 14px; background: #fff; cursor: pointer; transition: border-color .2s, box-shadow .2s, background .2s; }
.sf-exchange__type input { flex: 0 0 auto; width: auto; margin: 3px 0 0; accent-color: var(--sf-navy); }
.sf-exchange__type .sf-exchange__type-body { display: grid; gap: 2px; min-width: 0; color: var(--sf-ink); }
.sf-exchange__type-body strong { font-size: 14px; }
.sf-exchange__type-body small { color: var(--sf-muted); font-weight: 600; font-size: 12.5px; line-height: 1.4; }
.sf-exchange__type:hover { border-color: var(--sf-navy); }
.sf-exchange__type:has(input:checked) { border-color: var(--sf-navy); background: #f5faf5; box-shadow: 0 0 0 3px rgba(46, 128, 54, .10); }
.sf-exchange__type:has(input:focus-visible) { outline: 2px solid var(--sf-navy); outline-offset: 2px; }
.sf-exchange__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
.sf-exchange__row > div { min-width: 0; }
.sf-exchange__hint { display: block; margin: 6px 0 0; font-size: 12.5px; line-height: 1.45; }
.sf-exchange__form .sf-field-error { display: block; margin-top: 6px; }
.sf-exchange [aria-invalid="true"] { border-color: #dc2626; }
.sf-exchange__consent { margin-top: 16px; }
.sf-exchange__closed .sf-exchange__notice { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 6px; padding: 12px 14px; border: 1px solid #fde8c2; border-radius: 14px; background: #fff7e6; color: #a05a00; font-weight: 700; line-height: 1.5; }
.sf-exchange__notice .su-icon { flex: 0 0 auto; margin-top: 3px; }
.sf-exchange__list { display: grid; gap: 10px; }
.sf-exchange__list h2 { margin: 0 0 4px; }
.sf-exchange__request { display: grid; gap: 4px; min-width: 0; padding: 12px 14px; border: 1px solid #f0f1f3; border-radius: 14px; background: #fbfdfb; }
.sf-exchange__request-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; }
.sf-exchange__request p { margin: 0; overflow-wrap: anywhere; }
.sf-exchange__request .sf-exchange__request-meta { color: var(--sf-muted); font-size: 13px; }
.sf-exchange__request .sf-exchange__request-note { color: #41464d; font-size: 13px; font-style: italic; }
.sf-exchange__request form { margin: 6px 0 0; }
.sf-exchange__empty { margin: 0; color: var(--sf-muted); }

/* FIX (2026-09-29, P7-6): পেমেন্ট পাতার "Start payment" ফর্ম ও আগের ব্যর্থ চেষ্টার বার্তা */
.payment-panel .sf-pay-start { margin: 0; }
.payment-panel .sf-pay-start + small { display: block; margin-top: 8px; }
.payment-panel .sf-pay-note { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 10px 12px; border-radius: 12px; font-weight: 700; font-size: 13.5px; }
.payment-panel .sf-pay-note.is-warning { border: 1px solid #fde8c2; background: #fff7e6; color: #a05a00; }

@media (max-width: 900px) {
    .sf-exchange__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
    .sf-exchange__types, .sf-exchange__row { grid-template-columns: minmax(0, 1fr); }
    .sf-otl__pickup dl > div { grid-template-columns: minmax(0, 1fr); gap: 0; }
}
@media print {
    .sf-otl__bar, .sf-exchange__form, .sf-exchange__request form { display: none !important; }
}

/* ---------- ১৬-A. Delivery — checkout-এর ডেলিভারি কার্ড, স্কুল-পিকআপ, ব্যাক-অর্ডার (Phase 7, Agent A) ---------- */
/* FIX (2026-09-29, P7-1/P7-2/P7-3): ডেলিভারি কার্ড ও ব্যাক-অর্ডারের কার্ড checkout-grid-এর পুরো সারি; দুটো radio কার্ড পাশাপাশি
   (ফোনে ওপর-নিচে)। app.css-এর "label span { লাল }" (আবশ্যিক * চিহ্ন) এই কার্ডগুলোর লেখায় নয়। */
.checkout-grid > .sf-delivery, .checkout-grid > .sf-backorder { grid-column: 1 / -1; }
.sf-delivery__options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; min-width: 0; margin: 0; padding: 0; border: 0; }
.sf-delivery__legend { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.sf-main .sf-delivery__option { display: flex; align-items: flex-start; gap: 12px; min-width: 0; margin: 0; padding: 16px 18px; border: 1px solid var(--sf-line); border-radius: 16px; background: #fff; font-weight: 600; cursor: pointer; transition: border-color .2s, box-shadow .2s, background .2s; }
.sf-main .sf-delivery__option:hover { border-color: var(--sf-navy); }
.sf-main .sf-delivery__option:has(input:checked) { border-color: var(--sf-navy); background: #f5faf5; box-shadow: 0 0 0 3px rgba(46, 128, 54, .10); }
.sf-delivery__option input { width: auto; flex: 0 0 auto; margin-top: 4px; accent-color: var(--sf-navy); }
.sf-delivery__option span, .sf-backorder__accept span { color: inherit; }
.sf-delivery__body { display: grid; gap: 4px; min-width: 0; }
.sf-delivery__title { display: inline-flex; align-items: center; gap: 8px; color: var(--sf-ink); font-weight: 800; }
.sf-delivery__option .sf-delivery__fee { justify-self: start; padding: 3px 10px; border-radius: 999px; background: #ebf6ec; color: var(--sf-navy); font-size: 14px; font-weight: 800; }
.sf-delivery__eta, .sf-delivery__free { color: var(--sf-muted); font-size: 12.5px; font-weight: 600; overflow-wrap: anywhere; }
.sf-delivery__free { color: var(--sf-green); }
.sf-delivery__option [hidden], .sf-pickup [hidden] { display: none !important; }
.sf-delivery__note { margin: 12px 0 0; font-size: 13px; }
.sf-delivery__status { margin: 10px 0 0; color: #a05a00; font-size: 13px; font-weight: 600; }
.sf-delivery__status[hidden] { display: none; }
.sf-delivery .sf-field-error, .sf-backorder .sf-field-error { margin: 10px 0 0; }
/* pickup-এর অংশ — JS না চললে radio বাছলেই দেখায় (:has), JS চললে hidden attribute দিয়ে */
.sf-pickup { margin-top: 14px; padding: 14px 16px; border: 1px dashed #b8d9bc; border-radius: 14px; background: #f8fcf8; }
.sf-pickup[hidden] { display: none; }
html.sf-no-js .sf-delivery:has(input[value="school_pickup"]:checked) .sf-pickup[hidden] { display: block; }
.sf-pickup label { margin-top: 0; }
.sf-pickup__details { display: grid; gap: 8px; margin: 12px 0 0; }
.sf-pickup__details > div { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 10px; }
.sf-pickup__details dt { color: var(--sf-muted); font-size: 13px; font-weight: 700; }
.sf-pickup__details dd { margin: 0; font-size: 14px; white-space: pre-line; overflow-wrap: anywhere; }
.sf-pickup__note { margin: 10px 0 0; font-size: 12.5px; }
/* ঠিকানার কার্ড pickup-এ লুকানো (hidden attribute; grid-এর ঘর ফাঁকা থাকে না) */
.checkout-grid > [data-address-card][hidden] { display: none; }
/* সারাংশ: ETA লাইন পুরো সারিতে; quote আসার সময় সংখ্যা একটু ঝাপসা */
.sf-main .checkout-total .sf-eta-line { display: inline-flex; flex-basis: 100%; align-items: center; justify-content: flex-end; gap: 6px; color: var(--sf-muted); font-size: 13.5px; font-weight: 700; }
.checkout-grid.is-quoting [data-delivery-fee], .checkout-grid.is-quoting [data-delivery-total], .checkout-grid.is-quoting [data-delivery-eta] { opacity: .55; transition: opacity .2s; }
/* ব্যাক-অর্ডার */
.sf-main .sf-backorder { border-color: #fcd34d; background: #fffdf5; }
.sf-backorder h3 { display: flex; align-items: center; gap: 8px; color: #92400e; }
.sf-backorder__list { display: grid; gap: 8px; margin: 0 0 14px; padding-left: 1.1rem; }
.sf-backorder__list li span { display: block; color: #78350f; font-size: 13.5px; }
.sf-main .sf-backorder__accept { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 12px 14px; border: 1px solid #fcd34d; border-radius: 12px; background: #fff; font-size: 14px; font-weight: 700; cursor: pointer; }
.sf-backorder__accept input { width: auto; flex: 0 0 auto; margin-top: 3px; accent-color: var(--sf-navy); }
@media (max-width: 760px) {
    .sf-delivery__options { grid-template-columns: minmax(0, 1fr); }
    .sf-pickup__details > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
    .sf-main .checkout-total .sf-eta-line { justify-content: flex-start; }
}

/* =====================================================================
   §১৭-C — FIX (2026-09-29, P8-6): স্কুলের জন্য পাতা (/for-schools), হোমের মতামত-কার্ড ও "Are you a school?" strip,
   header-এর "For schools" লিংক। শুধু নতুন .sf-b2b-* / .sf-quote* / .sf-school-strip* / .sf-trust__grid--auto /
   .sf-nav__link--schools class — আগের কোনো নিয়ম বদলায় না। ছবি/আইকনের মাপ HTML-এও আছে (CSS না এলেও ঠিক থাকে)।
   ===================================================================== */

/* header: "For schools" (শুধু guest-দের desktop nav-এ) — header-এর container সর্বোচ্চ 1180px; ১২১২px-এর নিচে container সরু,
   তখন জায়গা নেই → লুকানো (drawer/footer-এ সবসময় আছে) */
@media (min-width: 1025px) and (max-width: 1211.98px) {
    .sf-nav__link--schools { display: none; }
}
/* লিংকটা থাকলে (≥১২১২px) প্রতিটা nav-লিংকের পাশের padding ২px কম — নাহলে "Student Login" দুই লাইনে ভাঙত (৩px কম পড়ত) */
@media (min-width: 1212px) {
    .sf-nav--with-schools .sf-nav__link { padding-left: 12px; padding-right: 12px; }
}
/* পুরনো সমস্যা (Playwright-এ ধরা, font লোডের পরে মাপা): সরু desktop-এ header-এর জিনিস ধরত না — লগইন করা অবস্থায়
   (Profile + Admin Panel + Logout) ১০২৫–১১৪৫px-এ ৪১px পর্যন্ত কম পড়ত (১০২৫-এ পাতা পাশে সরত, "Admin Panel" দুই লাইনে ভাঙত),
   guest-এর English header ১০২৫–১০৪০px-এ ১৭px পর্যন্ত ("Student Login" দুই লাইনে)। শুধু এই প্রস্থগুলোতে লিংক/বোতামের আইকন
   লুকানো (লেখা অক্ষত) */
@media (min-width: 1025px) and (max-width: 1049.98px) {
    .sf-header .sf-nav__link .su-icon { display: none; }
}
@media (min-width: 1025px) and (max-width: 1149.98px) {
    .sf-header--auth .sf-nav__link .su-icon,
    .sf-header--auth .sf-btn-admin .su-icon,
    .sf-header--auth .sf-btn-logout .su-icon { display: none; }
    .sf-header--auth .sf-btn-admin { white-space: nowrap; }
}

/* হোম: "Are you a school?" strip */
.sf-school-strip-wrap { padding-bottom: clamp(34px, 5vw, 60px); }
.sf-school-strip {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px 20px;
    padding: 20px 24px; border-radius: 22px;
    background: linear-gradient(135deg, #fff7e6 0%, #ffffff 48%, #eef8ef 100%);
    border: 1px solid rgba(214, 58, 51, .38); box-shadow: var(--sf-shadow-sm);
}
.sf-school-strip__ico { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: linear-gradient(135deg, var(--sf-navy), var(--sf-blue)); color: #fff; box-shadow: 0 12px 24px rgba(46, 128, 54, .25); }
.sf-school-strip__text h2 { font-size: clamp(18px, 2.2vw, 23px); margin: 0 0 4px; }
.sf-school-strip__text p { margin: 0; color: var(--sf-muted); line-height: 1.6; font-size: 14.5px; }
.sf-school-strip__btn { white-space: nowrap; gap: 8px; }

/* মতামতের কার্ড (হোম + /for-schools) */
.sf-quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 16px; }
.sf-quote {
    position: relative; overflow: hidden; margin: 0; display: flex; flex-direction: column; gap: 14px;
    background: #fff; border: 1px solid rgba(46, 128, 54, .10); border-radius: 22px; padding: 22px;
    box-shadow: var(--sf-shadow-sm); transition: transform .3s var(--sf-ease), box-shadow .3s;
}
.sf-quote::before { content: "\201C"; position: absolute; right: 16px; top: -10px; font: 900 96px/1 Georgia, 'Times New Roman', serif; color: rgba(46, 128, 54, .07); pointer-events: none; }
.sf-quote:hover { transform: translateY(-4px); box-shadow: var(--sf-shadow-md); }
.sf-quote.is-featured { border-color: rgba(214, 58, 51, .45); box-shadow: 0 16px 40px rgba(214, 58, 51, .14); }
.sf-quote__stars { display: flex; gap: 2px; line-height: 0; }
.sf-quote__text { margin: 0; flex: 1 1 auto; }
.sf-quote__text p { margin: 0; color: #30353c; font-size: 15px; line-height: 1.75; white-space: pre-line; overflow-wrap: anywhere; }
.sf-quote__who { display: flex; align-items: center; gap: 12px; min-width: 0; }
.sf-quote__photo { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; border: 2px solid #fff; box-shadow: 0 6px 16px rgba(46, 128, 54, .18); }
.sf-quote__avatar { background: linear-gradient(135deg, var(--sf-navy), var(--sf-blue)); color: #fff; font-weight: 900; font-size: 15px; letter-spacing: .02em; box-shadow: 0 6px 16px rgba(46, 128, 54, .22); }
.sf-quote__meta { display: grid; gap: 2px; min-width: 0; }
.sf-quote__meta strong { font-size: 14.5px; color: var(--sf-ink); overflow-wrap: anywhere; }
.sf-quote__meta small { color: var(--sf-muted); font-size: 12.5px; line-height: 1.45; overflow-wrap: anywhere; }

/* /for-schools — hero */
.sf-b2b-hero__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(24px, 4vw, 56px); align-items: center; padding: clamp(46px, 7vw, 88px) 0 clamp(64px, 7vw, 100px); }
.sf-b2b-hero .sf-hero__title { font-size: clamp(30px, 4.6vw, 52px); }
.sf-b2b-hero__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.sf-b2b-hero .su-btn.glass { background: rgba(255, 255, 255, .12); color: #fff; border-color: rgba(255, 255, 255, .3); }
.sf-b2b-hero .su-btn.glass:hover { background: rgba(255, 255, 255, .2); }
.sf-b2b-hero__card {
    color: #fff; border-radius: 24px; padding: clamp(18px, 2.4vw, 26px);
    background: rgba(255, 255, 255, .10); border: 1px solid rgba(255, 255, 255, .22);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 30px 60px rgba(16, 48, 15, .30);
}
.sf-b2b-hero__card h2 { margin: 0 0 14px; font-size: 18px; color: #fff; }
.sf-b2b-hero__card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.sf-b2b-hero__card li { display: flex; gap: 10px; align-items: flex-start; font-weight: 700; font-size: 14.5px; line-height: 1.5; color: #e4f5e6; }
.sf-b2b-hero__card li .su-icon { color: #ffd0cc; flex: 0 0 auto; margin-top: 2px; }

/* লাইভ সংখ্যা — ৪ বা ৫টা কার্ড, জায়গামতো সারি ভাঙে */
.sf-trust__grid--auto { grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); }

/* সুবিধা */
.sf-b2b-benefits__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.sf-b2b-benefit {
    display: flex; flex-direction: column; gap: 8px; background: #fff; border: 1px solid rgba(46, 128, 54, .10);
    border-radius: 22px; padding: 22px; box-shadow: var(--sf-shadow-sm); transition: transform .3s var(--sf-ease), box-shadow .3s;
}
.sf-b2b-benefit:hover { transform: translateY(-5px); box-shadow: var(--sf-shadow-md); }
.sf-b2b-benefit__ico { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; margin-bottom: 6px; background: #eef8ef; color: var(--sf-navy); }
.sf-b2b-benefit--measurement-day .sf-b2b-benefit__ico, .sf-b2b-benefit--sms .sf-b2b-benefit__ico { background: #e9fbf2; color: #087545; }
.sf-b2b-benefit--fit .sf-b2b-benefit__ico { background: #fff3f2; color: var(--sf-gold-2); }
.sf-b2b-benefit--reports .sf-b2b-benefit__ico { background: #e4f4e5; color: #2f8638; }
.sf-b2b-benefit h3 { margin: 0; font-size: 17px; }
.sf-b2b-benefit p { margin: 0; color: var(--sf-muted); font-size: 14.5px; line-height: 1.7; }
.sf-b2b-benefit .sf-link-arrow { margin-top: auto; padding-top: 6px; color: var(--sf-navy); font-weight: 800; font-size: 13.5px; text-decoration: none; }
.sf-b2b-benefit .sf-link-arrow:hover .su-icon { transform: translateX(3px); }

/* প্রশ্নোত্তরের লিংক */
.sf-b2b-faq .sf-faq details p a { color: var(--sf-navy); font-weight: 800; }

/* আগ্রহের ফর্ম */
.sf-b2b-lead { background: linear-gradient(180deg, rgba(232, 245, 234, 0) 0%, #e8f5ea 100%); overflow-x: clip; } /* Phase 8 integrate: data-reveal="right" ফর্ম-কার্ড reveal-এর আগে +26px সরে থাকে — মোবাইলে আড়াআড়ি স্ক্রল ঠেকাতে */
.sf-b2b-lead__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(20px, 4vw, 48px); align-items: start; }
.sf-b2b-lead__intro .sf-eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: #e4f5e6; color: var(--sf-navy); font-size: 12px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.sf-b2b-lead__intro h2 { font-size: clamp(24px, 3.2vw, 34px); margin: 14px 0 10px; }
.sf-b2b-lead__intro > p { margin: 0; color: var(--sf-muted); font-size: 16px; line-height: 1.7; }
.sf-b2b-lead__points { list-style: none; margin: 18px 0; padding: 0; display: grid; gap: 10px; }
.sf-b2b-lead__points li { display: flex; gap: 10px; align-items: center; font-weight: 700; color: #30353c; }
.sf-b2b-lead__points .su-icon { color: var(--sf-green); flex: 0 0 auto; }
.sf-b2b-lead__intro .sf-b2b-lead__contact { font-size: 14.5px; overflow-wrap: anywhere; }
.sf-b2b-lead__contact a { color: var(--sf-navy); font-weight: 800; text-decoration: none; }
.sf-b2b-lead__contact a:hover { text-decoration: underline; }
.sf-main .sf-b2b-form { position: relative; border-radius: 24px; padding: clamp(18px, 3vw, 30px); box-shadow: var(--sf-shadow-md); border-color: rgba(46, 128, 54, .10); }
.sf-b2b-form__title { margin: 0 0 2px; font-size: 20px; }
.sf-b2b-form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.sf-b2b-form__alert { margin: 12px 0 0; padding: 10px 12px; border-radius: 12px; background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; font-weight: 700; font-size: 14px; }
.sf-b2b-form .sf-field-error { display: block; margin-top: 6px; }
.sf-b2b-form__hint { display: block; margin-top: 6px; font-size: 12.5px; }
.sf-b2b-form [aria-invalid="true"] { border-color: #dc2626; background: #fffafa; }
.sf-b2b-form__consent { margin: 16px 0 0; font-size: 14px; line-height: 1.55; cursor: pointer; }
.sf-b2b-form__submit { margin-top: 16px; gap: 8px; }
.sf-b2b-form__privacy { margin: 10px 0 0; font-size: 12.5px; text-align: center; }

/* জমার পরে "ধন্যবাদ" */
.sf-b2b-thanks { text-align: center; padding: 16px 4px; }
.sf-b2b-thanks__mark { width: 66px; height: 66px; margin: 0 auto 14px; border-radius: 50%; display: grid; place-items: center; background: var(--sf-green); color: #fff; box-shadow: 0 16px 36px rgba(18, 149, 91, .30); animation: sfScaleIn .5s var(--sf-ease) both; }
.sf-b2b-thanks h3 { margin: 0 0 8px; font-size: 22px; }
.sf-b2b-thanks p { margin: 0 0 6px; color: #41464d; line-height: 1.65; overflow-wrap: anywhere; }
.sf-b2b-thanks__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 16px; }

/* responsive */
@media (max-width: 1100px) {
    .sf-b2b-benefits__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1024px) {
    .sf-b2b-hero__grid { grid-template-columns: minmax(0, 1fr); text-align: center; }
    .sf-b2b-hero__actions { justify-content: center; }
    .sf-b2b-hero__card { text-align: left; width: 100%; max-width: 560px; margin-inline: auto; }
    .sf-b2b-lead__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
    .sf-school-strip { grid-template-columns: auto minmax(0, 1fr); padding: 18px; }
    .sf-school-strip__btn { grid-column: 1 / -1; width: 100%; white-space: normal; }
}
@media (max-width: 640px) {
    .sf-b2b-benefits__grid, .sf-b2b-form__row { grid-template-columns: minmax(0, 1fr); }
    .sf-b2b-hero__actions .su-btn { flex: 1 1 100%; }
    .sf-b2b-thanks__actions .su-btn { flex: 1 1 100%; }
}
@media print {
    .sf-b2b-form, .sf-school-strip-wrap { display: none !important; }
}

/* ---------- ১৭-A. ফিট-ফিডব্যাক, ফিট গ্যারান্টি, বদলের ফর্মের ব্যানার (Phase 8, Agent A — 2026-09-29) ---------- */
/* FIX (2026-09-29, P8-1): "কেমন ফিট হলো?" পাতা (frontend/fit-feedback + partials/fit-item-card)।
   app.css-এর "label { block; margin }" আর "label span { লাল }" (আবশ্যিক * চিহ্ন) এই পাতার option-label-এ নয় — নিচে ফেরানো।
   radio-গুলো label-এর ভেতরে: CSS না এলেও সাধারণ radio + লেখা; SVG-র মাপ attribute-এ। */
.sf-fit[data-fit-page] { display: grid; gap: 18px; margin-top: 18px; min-width: 0; } /* FIX (2026-10-11, P10-C4): শুধু ফিট-মতামতের পাতা — আগে মাপের পাতার "Fit preference" fieldset-কেও (একই class) grid করে দিত */
.sf-fit__head { display: grid; gap: 8px; justify-items: start; min-width: 0; }
.sf-fit__head h1 { margin: 0; font-size: clamp(26px, 4vw, 38px); }
.sf-fit__head p { margin: 0; max-width: 70ch; color: var(--sf-muted); line-height: 1.6; }
.sf-fit__flash { margin: 0; padding: 12px 14px; border: 1px solid #dcefdf; border-radius: 14px; background: #eef8ef; color: var(--sf-navy); font-weight: 700; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.sf-fit__flash.is-success { background: #f0fdf4; border-color: #bbf7d0; color: #087545; }
.sf-fit__flash.is-warning { background: #fff7e6; border-color: #fde8c2; color: #a05a00; }
.sf-fit__flash.is-error { background: #fef2f2; border-color: #fecaca; color: #b91c1c; }
.sf-fit__closed { display: grid; gap: 12px; justify-items: start; }
.sf-fit__closed h2 { margin: 0; font-size: 19px; }
.sf-fit__notice { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 12px 14px; border: 1px solid #fde8c2; border-radius: 14px; background: #fff7e6; color: #a05a00; font-weight: 700; line-height: 1.5; }
.sf-fit__notice .su-icon { flex: 0 0 auto; margin-top: 3px; }
.sf-fit__thanks { display: flex; align-items: flex-start; gap: 16px; border-color: #bbf7d0; background: linear-gradient(180deg, #f6fef9, #fff); }
.sf-fit__thanks h2 { margin: 0 0 6px; font-size: 20px; color: #087545; }
.sf-fit__thanks p { margin: 0 0 8px; line-height: 1.6; }
.sf-fit__thanks-mark { flex: 0 0 auto; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--sf-green); box-shadow: 0 12px 28px rgba(18, 149, 91, .28); }
.sf-fit__thanks-exchange { color: #41464d; font-weight: 600; }
.sf-fit__form { display: grid; gap: 16px; min-width: 0; }
/* জমার পরে #fit-thanks / error-এ #fit-form-এ নামে — sticky header যেন শিরোনাম না ঢাকে */
.sf-fit__thanks, .sf-fit__form { scroll-margin-top: calc(var(--sf-header-h, 72px) + 16px); }
.sf-fit__submit { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.sf-fit__guarantee { display: flex; align-items: flex-start; gap: 8px; margin: 0; color: #087545; font-size: 13.5px; font-weight: 700; line-height: 1.5; }
.sf-fit__guarantee .su-icon { flex: 0 0 auto; margin-top: 2px; }
.sf-fit__guarantee a { color: var(--sf-navy); text-decoration: underline; margin-left: 4px; }

/* একটা আইটেমের কার্ড */
.sf-fit-card { display: grid; gap: 4px; min-width: 0; }
.sf-fit-card.is-answered { border-color: #bbf7d0; }
.sf-fit-card__head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 8px 12px; }
.sf-fit-card__title { min-width: 0; }
.sf-fit-card__title h2 { margin: 0; font-size: 19px; overflow-wrap: anywhere; }
.sf-fit-card__title p { margin: 4px 0 0; color: var(--sf-muted); font-size: 13.5px; font-weight: 600; }
.sf-fit-card__done { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: #f0fdf4; color: #087545; font-size: 12.5px; font-weight: 800; }
.sf-fit-card fieldset { min-width: 0; margin: 14px 0 0; padding: 0; border: 0; }
.sf-fit-card legend { padding: 0; margin: 0 0 8px; font-weight: 800; font-size: 14px; color: var(--sf-ink); }
.sf-fit-card legend small { font-weight: 600; }
.sf-fit-card > label { margin-top: 16px; }
.sf-fit-card textarea { min-height: 70px; }

/* overall — ৫টা মুখ (টাইট → ঠিকঠাক → ঢিলা) */
.sf-fit-scale__row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.sf-main .sf-fit-scale__option { position: relative; display: grid; justify-items: center; align-content: start; gap: 6px; min-width: 0; margin: 0; padding: 12px 6px; border: 1px solid var(--sf-line); border-radius: 14px; background: #fff; color: var(--sf-muted); font-size: 13px; font-weight: 700; text-align: center; cursor: pointer; transition: border-color .2s, box-shadow .2s, background .2s, color .2s; }
.sf-fit-scale__option input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.sf-main .sf-fit-scale__option span { color: inherit; }
.sf-fit-scale__label { line-height: 1.3; overflow-wrap: anywhere; }
.sf-fit-face { display: block; flex: 0 0 auto; }
.sf-fit-scale__option.is-good { color: #087545; }
.sf-fit-scale__option.is-slightly_tight, .sf-fit-scale__option.is-slightly_loose { color: #a05a00; }
.sf-fit-scale__option.is-too_tight, .sf-fit-scale__option.is-too_loose { color: #b91c1c; }
.sf-main .sf-fit-scale__option:hover { border-color: currentColor; }
.sf-main .sf-fit-scale__option:has(input:checked) { border-color: currentColor; background: #f8fcf8; box-shadow: 0 0 0 3px rgba(46, 128, 54, .10); }
.sf-main .sf-fit-scale__option.is-good:has(input:checked) { background: #f0fdf4; box-shadow: 0 0 0 3px rgba(18, 149, 91, .16); }
.sf-fit-scale__option:has(input:focus-visible) { outline: 2px solid var(--sf-navy); outline-offset: 2px; }
/* :has() নেই এমন পুরনো browser — radio নিজেই দেখা যায় */
@supports not selector(:has(*)) {
    .sf-fit-scale__option input { position: static; opacity: 1; width: auto; height: auto; }
}

/* পোশাকের অংশ — টাইট / ঠিক আছে / ঢিলা */
.sf-fit-points { display: grid; gap: 8px; }
.sf-fit-point { display: grid; grid-template-columns: minmax(84px, 26%) minmax(0, 1fr); align-items: center; gap: 8px 12px; padding: 8px 10px; border: 1px dashed var(--sf-line); border-radius: 12px; }
.sf-fit-point__name { font-weight: 800; font-size: 13.5px; color: var(--sf-ink); overflow-wrap: anywhere; }
.sf-fit-point__choices { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.sf-main .sf-fit-chip { display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 6px 12px; border: 1px solid var(--sf-line); border-radius: 999px; background: #fff; font-size: 13px; font-weight: 700; color: #41464d; cursor: pointer; transition: border-color .2s, background .2s; }
.sf-fit-chip input { width: auto; flex: 0 0 auto; margin: 0; accent-color: var(--sf-navy); }
.sf-main .sf-fit-chip span { color: inherit; }
.sf-main .sf-fit-chip.is-ok:has(input:checked) { border-color: #86efac; background: #f0fdf4; color: #087545; }
.sf-main .sf-fit-chip.is-tight:has(input:checked) { border-color: #fecaca; background: #fef2f2; color: #b91c1c; }
.sf-main .sf-fit-chip.is-loose:has(input:checked) { border-color: #fde8c2; background: #fff7e6; color: #a05a00; }
.sf-fit-chip:has(input:focus-visible) { outline: 2px solid var(--sf-navy); outline-offset: 2px; }

/* তারা (১–৫) — বাছাই করা তারা পর্যন্ত সোনালি (:has); না থাকলে শুধু বাছাই করা তারাটা */
.sf-fit-stars__row { display: flex; flex-wrap: wrap; gap: 4px; }
.sf-main .sf-fit-star { position: relative; display: inline-grid; place-items: center; width: 40px; height: 40px; margin: 0; border-radius: 10px; color: #d3d6d9; cursor: pointer; transition: color .15s, transform .15s; }
.sf-fit-star input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.sf-fit-star svg { fill: transparent; transition: fill .15s; }
.sf-main .sf-fit-star:hover { transform: scale(1.08); }
.sf-fit-star input:checked + svg { fill: #f5a524; color: #d97706; } /* P11-T1: রেটিং-তারা সোনালিই থাকে */
.sf-fit-stars__row:has(.sf-fit-star:nth-child(1) input:checked) .sf-fit-star:nth-child(-n+1),
.sf-fit-stars__row:has(.sf-fit-star:nth-child(2) input:checked) .sf-fit-star:nth-child(-n+2),
.sf-fit-stars__row:has(.sf-fit-star:nth-child(3) input:checked) .sf-fit-star:nth-child(-n+3),
.sf-fit-stars__row:has(.sf-fit-star:nth-child(4) input:checked) .sf-fit-star:nth-child(-n+4),
.sf-fit-stars__row:has(.sf-fit-star:nth-child(5) input:checked) .sf-fit-star:nth-child(-n+5) { color: #d97706; }
.sf-fit-stars__row:has(.sf-fit-star:nth-child(1) input:checked) .sf-fit-star:nth-child(-n+1) svg,
.sf-fit-stars__row:has(.sf-fit-star:nth-child(2) input:checked) .sf-fit-star:nth-child(-n+2) svg,
.sf-fit-stars__row:has(.sf-fit-star:nth-child(3) input:checked) .sf-fit-star:nth-child(-n+3) svg,
.sf-fit-stars__row:has(.sf-fit-star:nth-child(4) input:checked) .sf-fit-star:nth-child(-n+4) svg,
.sf-fit-stars__row:has(.sf-fit-star:nth-child(5) input:checked) .sf-fit-star:nth-child(-n+5) svg { fill: #f5a524; }
.sf-fit-star:has(input:focus-visible) { outline: 2px solid var(--sf-navy); outline-offset: 2px; }
@supports not selector(:has(*)) {
    .sf-fit-star input { position: static; opacity: 1; width: auto; height: auto; }
}

/* FIX (2026-09-29, P8-1): partials/order-timeline — পৌঁছানো অর্ডারে "Tell us how it fits" */
.sf-otl .sf-otl__fit, .sf-otl__fit { margin: 2px 0 0; }
.sf-otl__fit .su-btn { gap: 6px; }

/* FIX (2026-09-29, P8-5): বদলের ফর্মের ফিট-গ্যারান্টি ব্যানার — সময়ের ভেতরে সবুজ, শেষ হলে হলুদ */
.sf-exchange__guarantee { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 12px; padding: 10px 12px; border-radius: 12px; font-size: 13.5px; font-weight: 700; line-height: 1.5; overflow-wrap: anywhere; }
.sf-exchange__guarantee .su-icon { flex: 0 0 auto; margin-top: 2px; }
.sf-exchange__guarantee.is-active { border: 1px solid #bbf7d0; background: #f0fdf4; color: #087545; }
.sf-exchange__guarantee.is-ended { border: 1px solid #fde8c2; background: #fff7e6; color: #a05a00; }
.sf-exchange__guarantee a { color: var(--sf-navy); text-decoration: underline; margin-left: 4px; }

/* FIX (2026-09-29, P8-5): পাবলিক "ফিট গ্যারান্টি" পাতা (frontend/fit-guarantee — full_bleed, নিজের .sf-container) */
.sf-fg-page { padding: clamp(18px, 3vw, 34px) 0 clamp(30px, 5vw, 60px); }
.sf-fg { display: grid; gap: clamp(22px, 4vw, 40px); min-width: 0; }
.sf-fg__hero { position: relative; display: grid; gap: 10px; justify-items: start; padding: clamp(22px, 4vw, 40px); border-radius: 28px; background: radial-gradient(520px 260px at 100% 0%, rgba(18, 149, 91, .16), transparent 60%), linear-gradient(135deg, #f5f9f5, #ffffff); border: 1px solid rgba(46, 128, 54, .08); box-shadow: var(--sf-shadow-sm); overflow: hidden; }
.sf-fg__hero h1 { margin: 0; font-size: clamp(28px, 4.4vw, 44px); line-height: 1.15; color: var(--sf-ink); }
.sf-fg__lead { margin: 0; max-width: 62ch; color: #41464d; font-size: clamp(15px, 1.8vw, 17.5px); line-height: 1.7; }
.sf-fg__badge { display: inline-flex; align-items: center; gap: 10px; margin-top: 6px; padding: 10px 16px 10px 12px; border-radius: 999px; background: #fff; border: 1px solid #bbf7d0; color: #087545; box-shadow: var(--sf-shadow-sm); font-weight: 800; }
.sf-fg__badge strong { font-size: 22px; }
.sf-fg__section { display: grid; gap: 14px; min-width: 0; }
.sf-fg__section > h2 { margin: 0; font-size: clamp(21px, 2.8vw, 28px); color: var(--sf-ink); }
.sf-fg__intro { margin: 0; color: var(--sf-muted); line-height: 1.6; }
.sf-fg__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.sf-fg__card { display: grid; gap: 8px; align-content: start; min-width: 0; padding: 18px; border-radius: 20px; background: #fff; border: 1px solid rgba(46, 128, 54, .08); box-shadow: var(--sf-shadow-sm); }
.sf-fg__card h3 { margin: 0; font-size: 17px; }
.sf-fg__card p { margin: 0; color: var(--sf-muted); line-height: 1.6; font-size: 14.5px; }
.sf-fg__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: #eef8ef; color: var(--sf-navy); }
.sf-fg__steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.sf-fg__steps li { display: flex; align-items: flex-start; gap: 12px; min-width: 0; padding: 16px; border-radius: 18px; background: #fff; border: 1px solid rgba(46, 128, 54, .08); }
.sf-fg__steps h3 { margin: 0 0 4px; font-size: 15.5px; }
.sf-fg__steps p { margin: 0; color: var(--sf-muted); font-size: 14px; line-height: 1.55; }
.sf-fg__step-no { flex: 0 0 auto; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--sf-navy); color: #fff; font-weight: 800; }
.sf-fg__section > .su-btn { justify-self: start; gap: 8px; }
.sf-fg__timeline { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 18px 0 0; list-style: none; }
.sf-fg__timeline::before { content: ""; position: absolute; left: 8px; right: 8px; top: 6px; height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--sf-green) 0 66%, #f59e0b 66% 100%); }
.sf-fg__timeline li { position: relative; display: grid; gap: 4px; min-width: 0; padding-top: 10px; }
.sf-fg__timeline li::before { content: ""; position: absolute; left: 0; top: -18px; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 3px solid var(--sf-green); }
.sf-fg__timeline li.is-end::before { border-color: #f59e0b; }
.sf-fg__timeline strong { color: var(--sf-ink); }
.sf-fg__timeline span { color: var(--sf-muted); font-size: 14px; line-height: 1.55; }
.sf-fg__not { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; margin: 0; padding: 0; list-style: none; }
.sf-fg__not li { position: relative; padding: 12px 14px 12px 38px; border-radius: 14px; background: #fff; border: 1px solid #fee2e2; color: #41464d; line-height: 1.5; }
.sf-fg__not li::before { content: "✕"; position: absolute; left: 14px; top: 11px; color: #dc2626; font-weight: 800; }
.sf-fg .sf-faq { margin: 0; }
.sf-fg__cta { margin-top: 4px; }

@media (max-width: 1024px) {
    .sf-fg__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
    .sf-fg__cards, .sf-fg__not { grid-template-columns: minmax(0, 1fr); }
    .sf-fg__timeline { grid-template-columns: minmax(0, 1fr); padding: 0 0 0 26px; gap: 16px; }
    .sf-fg__timeline::before { left: 6px; right: auto; top: 6px; bottom: 6px; width: 4px; height: auto; background: linear-gradient(180deg, var(--sf-green) 0 66%, #f59e0b 66% 100%); }
    .sf-fg__timeline li { padding-top: 0; }
    .sf-fg__timeline li::before { left: -26px; top: 2px; }
    .sf-fg__cta { grid-template-columns: minmax(0, 1fr); }
    .sf-fg__cta .sf-cta__actions { justify-content: flex-start; }
}
@media (max-width: 560px) {
    .sf-fit-scale__row { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
    .sf-main .sf-fit-scale__option { padding: 10px 2px; font-size: 11.5px; }
    .sf-fit-point { grid-template-columns: minmax(0, 1fr); }
    /* ফোনে তিনটা chip এক সারিতে (টাইট / ঠিক আছে / ঢিলা) */
    .sf-fit-point__choices { gap: 4px; flex-wrap: nowrap; }
    .sf-main .sf-fit-chip { flex: 1 1 0; justify-content: center; gap: 4px; min-width: 0; padding: 6px 6px; font-size: 12.5px; }
    .sf-fit__thanks { flex-direction: column; }
    .sf-fg__steps { grid-template-columns: minmax(0, 1fr); }
}
@media print {
    .sf-fit__form button, .sf-otl__fit { display: none !important; }
}

/* ---------- ১৭-B. "Reorder for next session" — বৃদ্ধি-আন্দাজের আবার অর্ডার (Phase 8, Agent B — 2026-09-29) ---------- */
/* FIX (2026-09-29, P8-2): /reorder পাতার ছাত্র-কার্ড (শেষ অর্ডার, সংরক্ষিত মাপ, বৃদ্ধি, সাইজ আগে → আন্দাজি), কারণ/সতর্কতা,
   দুটো POST ফর্ম, মাপের তুলনা-টেবিল; ড্যাশবোর্ডের কার্ডে "Reorder" লিংক। শুধু নতুন .sf-reorder-* class — আগের নিয়ম অপরিবর্তিত।
   390px-এ সব এক কলামে; পাতা কখনো পাশে সরে না (টেবিল নিজের বাক্সে স্ক্রল হয়)। */
.sf-reorder-flash { margin: 14px 0 0; padding: 12px 14px; border: 1px solid #dcefdf; border-radius: 14px; background: #eef8ef; color: var(--sf-navy); font-weight: 700; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.sf-reorder-flash.is-success { background: #f0fdf4; border-color: #bbf7d0; color: #087545; }
.sf-reorder-flash.is-warning { background: #fff7e6; border-color: #fde8c2; color: #a05a00; }
.sf-reorder-flash.is-error { background: #fef2f2; border-color: #fecaca; color: #b91c1c; }
.sf-reorder-list { display: grid; gap: 16px; margin-top: 16px; }
.sf-reorder-card { min-width: 0; scroll-margin-top: calc(var(--sf-header-h) + 16px); }
.sf-main .sf-reorder-card.is-blocked { border-color: #fde8c2; }
.sf-reorder-card:target { box-shadow: 0 0 0 3px rgba(44, 131, 55, .28), var(--sf-shadow-sm); }
.sf-reorder-card__head { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px; margin-bottom: 14px; }
.sf-reorder-card__head > div { flex: 1 1 200px; min-width: 0; }
.sf-reorder-card__head h3 { margin: 0; font-size: 18px; overflow-wrap: anywhere; }
.sf-reorder-card__head small { display: block; margin-top: 2px; color: var(--sf-muted); font-weight: 600; overflow-wrap: anywhere; }
.sf-reorder-card__avatar { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; background: linear-gradient(135deg, #eef8ef, #dcefdf); color: var(--sf-navy); }
.sf-reorder-badge { flex: 0 0 auto; padding: 4px 12px; border-radius: 999px; background: #f1f2f4; color: var(--sf-muted); font-size: 12.5px; font-weight: 800; white-space: nowrap; }
.sf-reorder-badge.is-up { background: #fff7e6; color: #a05a00; }
.sf-reorder-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); gap: 10px; margin: 0 0 14px; }
.sf-reorder-facts > div { min-width: 0; padding: 12px 14px; border: 1px solid var(--sf-line); border-radius: var(--sf-radius-sm); background: #fbfdfb; }
.sf-reorder-facts dt { margin: 0 0 4px; color: var(--sf-muted); font-size: 12px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; }
.sf-reorder-facts dd { margin: 0; font-size: 14px; overflow-wrap: anywhere; }
.sf-reorder-facts dd strong { display: block; }
.sf-reorder-facts dd small { display: block; margin-top: 2px; color: var(--sf-muted); font-size: 12.5px; }
.sf-reorder-sizes { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.sf-reorder-size { display: inline-grid; place-items: center; min-width: 44px; height: 36px; padding: 0 10px; border: 1px solid var(--sf-line); border-radius: 10px; background: #fff; font-weight: 800; }
.sf-reorder-facts .sf-reorder-size.is-new { display: inline-grid; border-color: var(--sf-navy); background: var(--sf-navy); color: #fff; }
.sf-reorder-note { margin: 0 0 14px; padding: 12px 14px; border-radius: var(--sf-radius-sm); font-size: 14px; line-height: 1.55; overflow-wrap: anywhere; }
.sf-reorder-note ul { margin: 6px 0 10px; padding-left: 1.1rem; }
.sf-reorder-note.is-blocked { border: 1px solid #fde8c2; background: #fff7e6; color: #7a4a00; }
ul.sf-reorder-note.is-warning { list-style: none; display: grid; gap: 6px; border: 1px solid #dcefdf; background: #f5faf5; color: var(--sf-ink); }
ul.sf-reorder-note.is-warning li { display: flex; align-items: flex-start; gap: 8px; }
ul.sf-reorder-note.is-warning svg { flex: 0 0 auto; margin-top: 3px; color: var(--sf-navy); }
.sf-reorder-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.sf-reorder-form { display: flex; flex-direction: column; justify-content: space-between; gap: 10px; min-width: 0; margin: 0; padding: 14px; border: 1px solid var(--sf-line); border-radius: var(--sf-radius-sm); background: #fff; }
.sf-reorder-form.is-predicted { border-color: #b8d9bc; background: #f8fcf8; }
.sf-reorder-form .su-btn { width: 100%; justify-content: center; white-space: normal; text-align: center; }
.sf-main .sf-reorder-confirm { display: flex; align-items: flex-start; gap: 10px; margin: 0; font-size: 13.5px; font-weight: 600; line-height: 1.45; cursor: pointer; }
.sf-reorder-confirm input { flex: 0 0 auto; width: auto; margin-top: 3px; accent-color: var(--sf-navy); }
/* app.css-এর "label span { লাল }" (আবশ্যিক * চিহ্ন) এই টিক-বাক্সের লেখায় নয় */
.sf-main .sf-reorder-confirm span { color: var(--sf-ink); }
.sf-reorder-form__hint { margin: 0; color: var(--sf-muted); font-size: 13.5px; }
.sf-reorder-price { margin: 10px 0 0; color: var(--sf-muted); font-size: 13.5px; font-weight: 700; }
.sf-reorder-details { margin-top: 12px; }
.sf-reorder-details > summary { cursor: pointer; color: var(--sf-navy); font-size: 14px; font-weight: 800; }
.sf-reorder-table-wrap { width: 100%; max-width: 100%; margin-top: 10px; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid #f0f1f3; border-radius: 14px; background: #fff; }
.sf-reorder-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.sf-reorder-table th, .sf-reorder-table td { padding: 8px 10px; border-bottom: 1px solid #f0f1f3; text-align: left; }
.sf-reorder-table thead th { background: #f5faf5; color: var(--sf-muted); font-size: 11.5px; font-weight: 800; white-space: nowrap; }
.sf-reorder-table tbody tr:last-child > * { border-bottom: 0; }
.sf-reorder-table tbody th { font-weight: 700; }
@media (max-width: 760px) {
    .sf-reorder-actions { grid-template-columns: minmax(0, 1fr); }
    .sf-reorder-card__head h3 { font-size: 16.5px; }
}
@media print {
    .sf-reorder-actions { display: none !important; }
}

/* =====================================================================
   §১৮ — FIX (2026-10-05, P9-4/P9-6/P9-7/P9-8/P9-9/P9-13 — Phase 9, Agent C): header-এর অ্যাকাউন্ট dropdown ও ডানে ভাষা টগল,
   ফোনের নিচের tab bar + sticky action-bar, drawer-এর অ্যাকাউন্ট-ব্লক, maintenance ব্যানার, হোমের ফোন-layout (খাটো hero,
   trust ২×২, ধাপের timeline, carousel), /schools পাতা, আর বিদ্যমান পাতাগুলোর ফোন-polish। শুধু নতুন class + ফোনের media
   query; আগের কোনো নিয়ম বদলায় না (desktop ≥ 992px — আগের 1024px-এর ফাঁকটা নিচে §১৮-A-তে ঢাকা)।
   ভাগ: A header · B tab bar + action-bar · C drawer · D হোম (ফোন) · E /schools · F পুরনো পাতার polish · G reduced-motion/print
   ===================================================================== */

/* ---------- §১৮-A. Header: অ্যাকাউন্ট dropdown, ভাষা টগল, breakpoint 992, maintenance ব্যানার ---------- */
:root { --sf-gutter: 16px; --sf-tabbar-h: 62px; --sf-mbanner-h: 40px; }
.sf-acct { position: relative; flex: 0 0 auto; }
.sf-acct__btn {
    display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 3px 10px 3px 3px; border-radius: 999px;
    background: #fff; border: 1px solid rgba(46, 128, 54, .16); color: var(--sf-navy); font-weight: 800; font-size: 14px;
    text-decoration: none; cursor: pointer; white-space: nowrap; transition: background .2s, color .2s, box-shadow .2s, transform .2s;
}
.sf-acct--guest .sf-acct__btn { padding: 8px 12px; background: #eef8ef; }
.sf-acct__btn:hover, .sf-acct__btn[aria-expanded="true"], .sf-acct__btn.is-active { background: var(--sf-navy); color: #fff; border-color: var(--sf-navy); box-shadow: 0 10px 22px rgba(46, 128, 54, .22); }
.sf-acct__btn:focus-visible { outline: 3px solid rgba(44, 131, 55, .45); outline-offset: 2px; }
.sf-acct__avatar { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; display: inline-grid; place-items: center; background: linear-gradient(135deg, var(--sf-navy), var(--sf-blue)); color: #fff; font-size: 12.5px; font-weight: 900; letter-spacing: .02em; line-height: 1; }
.sf-acct__btn[aria-expanded="true"] .sf-acct__avatar, .sf-acct__btn:hover .sf-acct__avatar { background: #fff; color: var(--sf-navy); }
.sf-acct__avatar--lg { width: 44px; height: 44px; font-size: 15px; }
.sf-acct__avatar--guest { background: #eef8ef; color: var(--sf-navy); }
.sf-acct__chev { flex: 0 0 auto; transition: transform .2s; }
.sf-acct__btn[aria-expanded="true"] .sf-acct__chev { transform: rotate(180deg); }
.sf-acct__menu {
    position: absolute; right: 0; top: calc(100% + 10px); width: 284px; max-width: calc(100vw - 24px); padding: 8px; z-index: 95;
    background: #fff; border: 1px solid rgba(46, 128, 54, .12); border-radius: 18px; box-shadow: 0 28px 60px rgba(16, 48, 15, .22);
    transform-origin: top right; animation: sfMenuIn .18s var(--sf-ease) both; text-align: left;
}
.sf-acct__menu[hidden] { display: none; }
.sf-acct__head { display: flex; align-items: center; gap: 12px; padding: 10px 10px 12px; margin-bottom: 6px; border-bottom: 1px solid var(--sf-line); }
.sf-acct__head--guest { display: grid; gap: 4px; }
.sf-acct__head strong { font-size: 14.5px; color: var(--sf-ink); overflow-wrap: anywhere; }
.sf-acct__head small { color: var(--sf-muted); font-size: 12.5px; line-height: 1.45; overflow-wrap: anywhere; }
.sf-acct__who { display: grid; gap: 2px; min-width: 0; }
.sf-acct__list { display: grid; gap: 2px; }
.sf-acct__item {
    display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 10px 12px; border-radius: 12px; border: 0;
    background: transparent; color: var(--sf-ink); font: inherit; font-weight: 700; font-size: 14px; text-decoration: none; cursor: pointer; text-align: left;
    transition: background .15s, color .15s;
}
.sf-acct__item .su-icon { color: var(--sf-navy); flex: 0 0 auto; }
.sf-acct__item:hover, .sf-acct__item:focus-visible, .sf-acct__item.is-current { background: #eef8ef; color: var(--sf-navy); outline: none; }
.sf-acct__item--primary { background: var(--sf-navy); color: #fff; }
.sf-acct__item--primary .su-icon { color: #ffd0cc; }
.sf-acct__item--primary:hover, .sf-acct__item--primary:focus-visible { background: var(--sf-navy-2); color: #fff; }
.sf-acct__item--danger { color: #991b1b; }
.sf-acct__item--danger .su-icon { color: #dc2626; }
.sf-acct__item--danger:hover, .sf-acct__item--danger:focus-visible { background: #fee2e2; color: #991b1b; }
.sf-acct__sep { display: block; height: 1px; margin: 6px 4px; background: var(--sf-line); }
.sf-acct__form { margin: 0; }
@keyframes sfMenuIn { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } }
/* ভাষা টগল — header-এর শেষে (burger-এর আগে) */
.sf-header__lang { display: inline-flex; flex: 0 0 auto; }
.sf-header__lang .su-lang-switch { margin: 0; padding: 3px; gap: 2px; border-radius: 999px; background: #eef3ee; border: 1px solid rgba(46, 128, 54, .10); }
/* FIX (2026-10-15, P21 F-15): ভাষার বোতাম ৪০px উঁচু (আগে ৩২px — আঙুলে চাপা কঠিন) */
.sf-header__lang .su-lang-btn { min-width: 40px; min-height: 40px; display: inline-grid; place-items: center; padding: 0 10px; border-radius: 999px; font-size: 12.5px; font-weight: 800; color: var(--sf-navy); line-height: 1; }
.sf-header__lang .su-lang-btn.active { background: var(--sf-navy); color: #fff; box-shadow: 0 6px 14px rgba(46, 128, 54, .22); }
.sf-header__lang .su-lang-btn:focus-visible { outline: 3px solid rgba(44, 131, 55, .45); outline-offset: 1px; }
.sf-nav__link[data-nav-schools] .su-icon { width: 16px; height: 16px; }
/* desktop ≥ 992px (আগের 1024px নিয়মের ফাঁক — 992–1024-এ nav দেখাও, burger নয়); সরু desktop-এ আইকন/লেবেল লুকিয়ে জায়গা */
@media (min-width: 992px) and (max-width: 1024px) {
    .sf-nav { display: flex; }
    .sf-burger { display: none; }
    .sf-header__actions .sf-hide-mobile { display: inline-flex; }
}
@media (min-width: 992px) and (max-width: 1149.98px) {
    .sf-header .sf-nav__link .su-icon { display: none; }
    .sf-header .sf-nav__link { padding-left: 10px; padding-right: 10px; }
    .sf-acct--auth .sf-acct__name, .sf-acct--auth .sf-acct__chev { display: none; }
    .sf-acct--auth .sf-acct__btn { padding: 3px; }
    .sf-header__actions .sf-cart-btn .sf-cart-label { display: none; }
    .sf-header__actions .sf-cart-btn { padding: 8px 11px; }
}
@media (max-width: 991.98px) {
    .sf-nav { display: none; }
    .sf-burger { display: grid; }
    .sf-acct, .sf-header__lang { display: none; }
    .sf-header__actions .sf-cart-btn { min-height: 44px; }
}
/* maintenance চালু — শুধু ছাড় পাওয়া admin-এর জন্য ব্যানার; header তার নিচে sticky (উচ্চতা JS মাপে, না চললে 40px) */
.sf-mbanner {
    position: sticky; top: 0; z-index: 91; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 14px;
    min-height: var(--sf-mbanner-h); padding: 8px 16px; background: linear-gradient(90deg, #fff4d6, #ffe8b3); color: #7a4a00;
    font-size: 13px; font-weight: 800; border-bottom: 1px solid #f5d58a; text-align: center;
}
.sf-mbanner__dot { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: #b72f29; box-shadow: 0 0 0 4px rgba(183, 47, 41, .22); animation: sfPulseDot 1.6s ease-in-out infinite; }
.sf-mbanner__link { display: inline-flex; align-items: center; gap: 4px; min-height: 28px; color: #7a4a00; text-decoration: underline; text-underline-offset: 2px; }
.sf-mbanner__link:hover { color: #4a2c00; }
body.sf-maintenance-preview .sf-header { top: var(--sf-mbanner-h); }

/* ---------- §১৮-B. ফোনের নিচের tab bar + sticky action-bar ---------- */
.sf-tabbar { display: none; }
.sf-actionbar { display: none; }
@media (max-width: 991.98px) {
    body.sf-has-tabbar { padding-bottom: calc(var(--sf-tabbar-h) + env(safe-area-inset-bottom)); }
    body.sf-has-tabbar .sf-footer__bottom { padding-bottom: 16px; }
    .sf-tabbar {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 110; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2px;
        height: calc(var(--sf-tabbar-h) + env(safe-area-inset-bottom)); padding: 5px 4px calc(5px + env(safe-area-inset-bottom));
        background: rgba(255, 255, 255, .94); -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%);
        border-top: 1px solid rgba(46, 128, 54, .10); box-shadow: 0 -10px 30px rgba(46, 128, 54, .08); transition: transform .3s var(--sf-ease);
    }
    body.sf-drawer-open .sf-tabbar, body.sf-actionbar-on .sf-tabbar, .sf-tabbar.is-keyboard { transform: translateY(110%); }
    .sf-tabbar__tab { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 50px; min-width: 0; border-radius: 14px; color: #72767d; text-decoration: none; font-size: 11.5px; font-weight: 800; line-height: 1.1; -webkit-tap-highlight-color: transparent; }
    .sf-tabbar__tab:focus-visible { outline: 3px solid rgba(44, 131, 55, .45); outline-offset: -3px; }
    .sf-tabbar__ico { position: relative; display: grid; place-items: center; width: 48px; height: 28px; border-radius: 999px; transition: background .25s, color .25s, transform .2s; }
    .sf-tabbar__ico .su-icon { width: 22px; height: 22px; }
    .sf-tabbar__tab.is-active { color: var(--sf-navy); }
    .sf-tabbar__tab.is-active .sf-tabbar__ico { background: var(--sf-navy); color: #fff; box-shadow: 0 8px 18px rgba(46, 128, 54, .28); }
    .sf-tabbar__tab:active .sf-tabbar__ico { transform: scale(.92); }
    .sf-tabbar__badge { position: absolute; top: -5px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--sf-gold); color: #ffffff; font-size: 11px; font-weight: 900; display: inline-grid; place-items: center; box-shadow: 0 4px 10px rgba(214, 58, 51, .45); }
    .sf-tabbar__badge[data-count="0"] { display: none; }
    .sf-tabbar__label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    /* sticky action-bar — আসল বোতামের proxy (JS initActionBar): measurement "Add to cart", cart "Proceed to checkout", checkout "Confirm order", preview "Take AI measurement" */
    body.sf-actionbar-on { padding-bottom: calc(78px + env(safe-area-inset-bottom)); }
    .sf-actionbar {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 112; display: flex; align-items: center; gap: 12px;
        padding: 10px var(--sf-gutter) calc(10px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .96);
        -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%);
        border-top: 1px solid rgba(46, 128, 54, .12); box-shadow: 0 -12px 30px rgba(46, 128, 54, .10);
        transform: translateY(110%); transition: transform .3s var(--sf-ease);
    }
    .sf-actionbar.is-visible { transform: none; }
    .sf-actionbar__meta { display: grid; gap: 1px; min-width: 0; flex: 1 1 auto; }
    .sf-actionbar__meta small { color: var(--sf-muted); font-size: 12px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .sf-actionbar__meta strong { color: var(--sf-navy); font-size: 17px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .sf-actionbar .su-btn { flex: 0 0 auto; min-height: 46px; padding: 10px 18px; white-space: nowrap; max-width: 100%; }
    .sf-actionbar.is-solo .su-btn { flex: 1 1 auto; }
}

/* ---------- §১৮-C. Drawer: মাথায় ভাষা টগল, অ্যাকাউন্ট-ব্লক ---------- */
.sf-drawer__head-tools { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.sf-drawer__head .su-lang-switch { margin: 0; padding: 3px; gap: 2px; border-radius: 999px; background: #eef3ee; border: 1px solid var(--sf-line); }
.sf-drawer__head .su-lang-btn { min-width: 38px; min-height: 32px; display: inline-grid; place-items: center; padding: 0 9px; border-radius: 999px; font-size: 12px; font-weight: 800; color: var(--sf-navy); line-height: 1; }
.sf-drawer__head .su-lang-btn.active { background: var(--sf-navy); color: #fff; }
.sf-drawer__account { display: grid; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--sf-line); background: linear-gradient(160deg, #f8fcf8, #eef8ef); }
.sf-drawer__who { display: flex; align-items: center; gap: 12px; min-width: 0; }
.sf-drawer__who-text { display: grid; gap: 2px; min-width: 0; }
.sf-drawer__who-text strong { font-size: 15px; color: var(--sf-ink); overflow-wrap: anywhere; }
.sf-drawer__who-text small { color: var(--sf-muted); font-size: 12.5px; line-height: 1.4; overflow-wrap: anywhere; }
.sf-drawer__account-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.sf-drawer__account-actions form { margin: 0; flex: 0 0 auto; }
.sf-drawer__account-actions .su-btn.mini { min-height: 40px; padding: 8px 14px; font-size: 13.5px; gap: 6px; }
.sf-drawer__account-actions .sf-drawer__logout { color: #991b1b; border-color: #fecaca; background: #fff; }
.sf-drawer__account-actions .sf-drawer__logout:hover { background: #fee2e2; }
.sf-drawer__nav { flex: 1 1 auto; min-height: 0; padding: 10px 12px; }
.sf-drawer__nav a { min-height: 48px; }
.sf-drawer__foot a { color: var(--sf-navy); font-weight: 700; text-decoration: none; }
.sf-drawer__foot span { overflow-wrap: anywhere; }

/* ---------- §১৮-D. হোম — "All schools" লিংক, ফোনে খাটো hero, trust ২×২, ধাপের timeline, carousel ---------- */
.sf-section__foot { display: flex; justify-content: flex-end; margin-top: 14px; }
.sf-link-arrow--all { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 8px 16px; border-radius: 999px; background: #fff; border: 1px solid var(--sf-line); color: var(--sf-navy); font-weight: 800; font-size: 13.5px; text-decoration: none; box-shadow: var(--sf-shadow-sm); transition: background .2s, color .2s, transform .2s; }
.sf-link-arrow--all:hover { background: var(--sf-navy); color: #fff; transform: translateY(-1px); }
.sf-link-arrow--all:hover .su-icon { transform: translateX(3px); }
.sf-hero__chips .sf-hero__chips-all { border-color: rgba(255, 208, 204, .55); color: #ffd0cc; }
.sf-how__body { min-width: 0; }
@media (max-width: 767.98px) {
    .sf-hero--home .sf-hero__grid { padding: 28px 0 36px; gap: 14px; }
    .sf-hero--home .sf-kicker { font-size: 11.5px; padding: 6px 10px 6px 7px; }
    .sf-hero--home .sf-hero__title { font-size: clamp(26px, 7.4vw, 34px); margin: 12px 0 8px; }
    .sf-hero--home .sf-hero__lead { font-size: 14.5px; line-height: 1.6; margin-bottom: 16px; }
    .sf-hero--home .sf-hero__chips { gap: 6px; margin-top: 14px; }
    .sf-hero--home .sf-hero__trust { gap: 8px 14px; margin-top: 16px; font-size: 12.5px; }
    .sf-hero--home .sf-hero__art { min-height: 236px; margin-top: 0; }
    .sf-hero--home .sf-art-card { width: 40%; padding: 10px; border-radius: 18px; }
    .sf-hero--home .sf-art-card figcaption { font-size: 12px; }
    .sf-hero--home .sf-float-badge { font-size: 11.5px; padding: 6px 9px; border-radius: 11px; }
    .sf-hero--home .sf-float-badge__ico { width: 24px; height: 24px; }
    /* trust band ২×২ */
    .sf-trust__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .sf-stat { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 14px 12px; border-radius: 16px; }
    .sf-stat__ico { width: 38px; height: 38px; border-radius: 11px; }
    .sf-stat strong { font-size: 21px; }
    .sf-stat span { font-size: 12.5px; }
    /* ধাপ: উলম্ব timeline — বাঁয়ে নম্বরের বুদবুদ, মাঝে dashed রেখা */
    .sf-how__grid--p9 { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .sf-how__grid--p9::before { display: block; left: 27px; right: auto; top: 28px; bottom: 36px; width: 2px; height: auto; background: repeating-linear-gradient(180deg, #c1dec4 0 10px, transparent 10px 18px); }
    .sf-how__grid--p9 .sf-how__card { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 14px; align-items: start; text-align: left; background: transparent; border: 0; box-shadow: none; padding: 0 0 18px; border-radius: 0; }
    .sf-how__grid--p9 .sf-how__card:last-child { padding-bottom: 0; }
    .sf-how__grid--p9 .sf-how__card:hover { transform: none; box-shadow: none; }
    .sf-how__grid--p9 .sf-how__num { margin: 0; }
    .sf-how__grid--p9 .sf-how__body { padding: 12px 14px; background: #fff; border: 1px solid rgba(46, 128, 54, .10); border-radius: 18px; box-shadow: var(--sf-shadow-sm); }
    .sf-how__grid--p9 .sf-how__card h3 { font-size: 16px; }
    .sf-how__grid--p9 .sf-how__card p { font-size: 13.5px; }
    /* জনপ্রিয় স্কুল ও ফিচার: পাশাপাশি snap-carousel, পরের কার্ডের একটু অংশ দেখা যায়; পাতার gutter পর্যন্ত bleed */
    .sf-schools__grid--p9, .sf-features__grid--p9 {
        display: flex; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
        scroll-padding-inline: var(--sf-gutter); padding: 6px var(--sf-gutter) 16px; margin-inline: calc(-1 * var(--sf-gutter));
        width: calc(100% + 2 * var(--sf-gutter)); scrollbar-width: none; -webkit-overflow-scrolling: touch;
    }
    .sf-schools__grid--p9::-webkit-scrollbar, .sf-features__grid--p9::-webkit-scrollbar { display: none; }
    .sf-schools__grid--p9 > *, .sf-features__grid--p9 > * { flex: 0 0 76%; scroll-snap-align: start; min-width: 0; }
    .sf-features__grid--p9 > * { flex-basis: 84%; }
    .sf-schools__grid--p9 .sf-school-card:hover, .sf-features__grid--p9 .sf-feature:hover { transform: none; }
    /* scroller-এর ভেতরে reveal-এর translateY(22px) উলম্ব স্ক্রল বানাত — এখানে শুধু হালকা zoom */
    .sf-schools__grid--p9 > [data-reveal]:not(.is-visible), .sf-features__grid--p9 > [data-reveal]:not(.is-visible) { transform: scale(.96); }
    .sf-feature { padding: 20px 18px; }
    .sf-feature h3 { font-size: 17px; }
    .sf-section__foot { margin-top: 6px; }
    .sf-cta__actions .su-btn { flex: 1 1 100%; }
    .sf-school-strip__text h2 { font-size: 18px; }
}
@media (max-width: 560px) {
    :root { --sf-gutter: 10px; }
    .sf-schools__grid--p9 > * { flex-basis: 80%; }
}

/* ---------- §১৮-E. /schools — hero-তে সার্চ + শহরের chip, জনপ্রিয় rail, grid (ফোনে list-কার্ড), pager, খালি অবস্থা ---------- */
.sf-dir__hero-inner { display: grid; justify-items: center; text-align: center; max-width: 820px; padding: clamp(30px, 5vw, 56px) 0 clamp(44px, 6vw, 72px); }
.sf-dir__title { font-size: clamp(28px, 4.4vw, 46px); margin: 16px 0 10px; }
.sf-dir__lead { margin: 0 auto 22px; }
.sf-dir__search { width: min(640px, 100%); }
.sf-dir__search input[type="search"] { -webkit-appearance: none; appearance: none; }
.sf-dir__search input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
.sf-dir__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 18px; max-width: 100%; }
.sf-dir__chip { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 7px 14px; border-radius: 999px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .22); color: #fff; font-size: 13.5px; font-weight: 700; text-decoration: none; white-space: nowrap; transition: background .2s, color .2s, transform .2s, box-shadow .2s; }
.sf-dir__chip b { font-size: 11.5px; font-weight: 900; padding: 2px 7px; border-radius: 999px; background: rgba(255, 255, 255, .18); line-height: 1.3; }
.sf-dir__chip:hover { background: rgba(255, 255, 255, .22); transform: translateY(-1px); }
.sf-dir__chip.is-active { background: #fff; color: var(--sf-navy); border-color: #fff; box-shadow: 0 10px 22px rgba(16, 48, 15, .25); }
.sf-dir__chip.is-active b { background: #eef8ef; color: var(--sf-navy); }
.sf-dir__chip:focus-visible { outline: 3px solid rgba(255, 208, 204, .8); outline-offset: 2px; }
.sf-dir__popular { margin-top: clamp(20px, 4vw, 36px); }
.sf-dir__list { margin-top: clamp(20px, 4vw, 36px); }
.sf-dir__head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 12px 20px; margin-bottom: 18px; }
.sf-dir__head h2 { margin: 0; font-size: clamp(21px, 2.6vw, 28px); overflow-wrap: anywhere; }
.sf-dir__head p { margin: 4px 0 0; color: var(--sf-muted); font-size: 14.5px; }
.sf-dir__head > div { min-width: 0; }
.sf-dir__clear { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--sf-line); background: #fff; color: var(--sf-navy); font-weight: 800; font-size: 13.5px; text-decoration: none; transition: background .2s, color .2s; }
.sf-dir__clear:hover { background: var(--sf-navy); color: #fff; }
.sf-dir__rail .sf-school-card { min-width: 0; }
.sf-dir__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.sf-dir-card { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 12px; min-width: 0; background: #fff; border: 1px solid rgba(46, 128, 54, .10); border-radius: 22px; padding: 14px; text-decoration: none; color: inherit; box-shadow: var(--sf-shadow-sm); transition: transform .3s var(--sf-ease), box-shadow .3s, border-color .3s; }
.sf-dir-card:hover { transform: translateY(-5px); box-shadow: var(--sf-shadow-md); border-color: rgba(46, 128, 54, .24); }
.sf-dir-card:focus-visible { outline: 3px solid rgba(44, 131, 55, .45); outline-offset: 2px; }
.sf-dir-card__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sf-dir-card__pair img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: contain; border-radius: 14px; background: linear-gradient(160deg, #f8fcf8, #ebf6ec); border: 1px solid #dcefdf; padding: 6px; transition: transform .35s var(--sf-ease); }
.sf-dir-card:hover .sf-dir-card__pair img { transform: scale(1.04); }
.sf-dir-card__body { display: grid; gap: 6px; align-content: start; min-width: 0; }
.sf-dir-card__body strong { font-size: 15.5px; line-height: 1.3; color: var(--sf-ink); overflow-wrap: anywhere; }
.sf-dir-card__body small { display: flex; align-items: center; gap: 5px; color: var(--sf-muted); font-size: 13px; overflow-wrap: anywhere; }
.sf-dir-card__body small .su-icon { flex: 0 0 auto; }
.sf-dir-card__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.sf-dir-card__tag { display: inline-flex; align-items: center; gap: 4px; padding: 4px 9px; border-radius: 999px; background: #f3f8f3; color: #41464d; font-size: 11.5px; font-weight: 800; line-height: 1.3; }
.sf-dir-card__tag.is-pickup { background: #e9fbf2; color: #087545; }
.sf-dir-card .sf-link-arrow { margin-top: auto; padding-top: 4px; display: inline-flex; align-items: center; gap: 6px; color: var(--sf-navy); font-weight: 800; font-size: 13px; }
.sf-dir-card:hover .sf-link-arrow .su-icon { transform: translateX(3px); }
.sf-dir__pager { margin-top: 22px; }
.sf-dir__pager .ss-pager { border: 1px solid rgba(46, 128, 54, .10); border-radius: 18px; box-shadow: var(--sf-shadow-sm); }
.sf-dir__empty { text-align: center; padding: clamp(30px, 6vw, 60px) 20px; background: #fff; border: 1px dashed #c1dec4; border-radius: 24px; }
.sf-dir__empty-ico { width: 60px; height: 60px; border-radius: 18px; display: inline-grid; place-items: center; background: #eef8ef; color: var(--sf-navy); margin-bottom: 12px; }
.sf-dir__empty h3 { margin: 0 0 6px; font-size: 20px; }
.sf-dir__empty p { margin: 0 auto; max-width: 48ch; color: var(--sf-muted); line-height: 1.6; }
.sf-dir__empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 16px; }
@media (max-width: 1100px) { .sf-dir__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px) { .sf-dir__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }
@media (max-width: 767.98px) {
    .sf-dir__hero-inner { padding: 26px 0 40px; }
    .sf-dir__title { font-size: clamp(25px, 7vw, 32px); margin: 12px 0 8px; }
    .sf-dir__lead { font-size: 14.5px; margin-bottom: 16px; }
    /* শহরের chip এক সারিতে পাশাপাশি স্ক্রল — gutter পর্যন্ত bleed */
    .sf-dir__chips { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; width: calc(100% + 2 * var(--sf-gutter)); margin-inline: calc(-1 * var(--sf-gutter)); padding: 2px var(--sf-gutter) 6px; scroll-snap-type: x proximity; scroll-padding-inline: var(--sf-gutter); }
    .sf-dir__chips::-webkit-scrollbar { display: none; }
    .sf-dir__chip { flex: 0 0 auto; scroll-snap-align: start; }
    .sf-dir__head { align-items: flex-start; margin-bottom: 14px; }
    .sf-dir__empty-actions .su-btn { flex: 1 1 100%; }
}
@media (max-width: 560px) {
    /* list-কার্ড: ছবি বাঁয়ে, লেখা ডানে — এক নজরে বেশি স্কুল */
    .sf-dir__grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
    .sf-dir-card { grid-template-columns: 108px minmax(0, 1fr); grid-template-rows: none; gap: 12px; align-items: center; padding: 10px; border-radius: 18px; }
    .sf-dir-card__pair { gap: 4px; }
    .sf-dir-card__pair img { padding: 3px; border-radius: 10px; }
    .sf-dir-card__body { gap: 5px; }
    .sf-dir-card__body strong { font-size: 15px; }
    .sf-dir-card .sf-link-arrow { padding-top: 2px; }
    .sf-dir-card:hover { transform: none; }
}

/* ---------- §১৮-F. বিদ্যমান পাতাগুলোর ফোন-polish (≤ 767px / ≤ 560px) — tap target ≥ 44px, লেখা ≥ 13px, এক কলাম ---------- */
@media (max-width: 767.98px) {
    /* সাধারণ: বোতাম ছোঁয়ার মাপ, back-লিংক/শিরোনামের ফাঁকা জায়গা কম */
    .sf-main .su-btn { min-height: 48px; }
    .sf-main .su-btn.mini { min-height: 44px; padding-top: 8px; padding-bottom: 8px; }
    .sf-main .su-back { margin-top: 0; min-height: 40px; }
    .sf-main .su-center-section { margin-top: 14px; }
    .sf-main .su-title-block.compact { margin-bottom: 18px; }
    .sf-main .su-title-block h1 { font-size: clamp(26px, 7vw, 34px); }
    .sf-main .su-title-block h2 { font-size: clamp(21px, 5.6vw, 26px); }
    .sf-main .su-title-block h3 { font-size: 17px; }
    .sf-main .su-muted, .sf-main .muted, .sf-main small { font-size: 13px; }
    .sf-main .cart-measures span, .sf-chip, .sf-vpill, .sf-mp-pill { font-size: 13px; }
    /* ফলাফল: সারির "Select" বোতাম পুরো ছোঁয়ার মাপে */
    .sf-main .result-row { gap: 10px; padding: 14px 12px; }
    .sf-main .su-result-search a { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; }
    /* ছেলে/মেয়ে: দুটো কার্ড পাশাপাশি — একসাথে দুটোই দেখা যায় */
    .sf-main .gender-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .sf-main .gender-card { min-height: 0; padding: 12px 10px; gap: 10px; }
    .sf-main .gender-uniform-frame { width: 100%; min-height: 150px; padding: 8px; border-radius: 18px; }
    .sf-main .gender-uniform-frame img { max-height: 140px; }
    .sf-main .gender-card strong { font-size: 17px; }
    .sf-main .uniform-gender-card span { font-size: 12.5px; overflow-wrap: anywhere; }
    /* ক্লাসের কার্ড */
    .sf-main .class-grid { gap: 10px; }
    .sf-main .class-uniform-card { min-height: 128px; padding: 12px; }
    /* preview: ছবি ছোট, বিস্তারিত তালিকা দুই কলামে (dt | dd) */
    .sf-main .uniform-photo-card { min-height: 0; padding: 14px 0; }
    .sf-main .uniform-photo-card img { max-height: 240px; }
    .sf-main .preview-content-media { min-height: 0; }
    .sf-main .preview-content-info dl { grid-template-columns: auto minmax(0, 1fr); gap: 10px 16px; padding: 12px 14px; }
    .sf-main .preview-content-info dd { font-size: 14px; }
    .sf-main .preview-content-info .sf-price { font-size: 20px; }
    /* measurement: ক্যামেরা বাক্স খাটো, badge ভাঙে, বোতাম পুরো চওড়া */
    .sf-main .ai-camera-box { min-height: 200px; }
    .sf-main .ai-badge { white-space: normal; }
    .sf-main .ai-input-card .su-btn, .sf-main .ai-result-card .su-btn { width: 100%; }
    .sf-main .ai-quality-mini p { font-size: 13px; }
    /* কার্ট */
    .sf-main .cart-header { margin-top: 10px; flex-wrap: wrap; gap: 8px; }
    .sf-main .cart-header h2 { font-size: 22px; }
    .sf-main .cart-card { padding: 14px; }
    .sf-main .cart-row { padding: 14px; }
    .sf-main .cart-info h3 { font-size: 16px; }
    .sf-main .cart-total { justify-content: space-between; font-size: 18px; }
    .sf-main .link-danger { min-height: 44px; }
    /* checkout: ৩ ধাপ এক সারিতে ছোট কার্ডে (নম্বর উপরে, লেখা নিচে) */
    .sf-checkout-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 8px 0 14px; }
    .sf-checkout-steps span { flex-direction: column; justify-content: flex-start; gap: 6px; padding: 8px 4px; text-align: center; font-size: 11.5px; line-height: 1.25; min-width: 0; overflow-wrap: anywhere; }
    .sf-main .su-form-card { padding: 16px 14px; }
    .sf-main .payment-card { min-height: 60px; padding: 10px 14px; }
    .sf-main .payment-card input { width: 20px; height: 20px; accent-color: var(--sf-navy); }
    .sf-main .checkout-grid { margin-top: 14px; gap: 12px; }
    .sf-main .checkout-btn { width: 100%; }
    /* confirmation / track */
    .sf-main .confirm-box { margin-top: 10px; }
    .sf-main .confirm-box h1 { font-size: clamp(24px, 6.4vw, 30px); }
    .sf-main .confirm-details { padding: 14px; gap: 12px; }
    .sf-main .confirm-actions .su-btn { flex: 1 1 100%; }
    .sf-main .track-card { padding: 16px 14px; }
    .sf-main .track-card > p { padding: 8px 0; }
    .sf-main .track-card > p span { font-size: 12.5px; color: var(--sf-muted); font-weight: 700; }
    /* student dashboard: metric ২×২, hero বোতাম পুরো চওড়া, অর্ডার-কার্ডের বোতাম দুই কলামে */
    .sf-main .student-portal-actions { gap: 8px; }
    .sf-main .admin-card-head { align-items: stretch; }
    /* ফর্ম: এক কলাম (checkout/register/lead) */
    .sf-main .form-grid.two { grid-template-columns: minmax(0, 1fr); }
    /* footer: লিংকের দুটো কলাম পাশাপাশি, brand ও যোগাযোগ পুরো সারি */
    .sf-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 16px; }
    .sf-footer__grid > .sf-footer__brand, .sf-footer__grid > div:nth-child(4) { grid-column: 1 / -1; }
    .sf-footer ul a, .sf-footer__contact li { min-height: 28px; }
}
@media (max-width: 560px) {
    .sf-main .cart-row { grid-template-columns: 88px minmax(0, 1fr); gap: 12px; align-items: start; }
    .sf-main .cart-row .cart-uniform img.mini-uniform-img { width: 88px !important; height: 112px !important; border-radius: 14px; padding: 5px; }
    .sf-main .cart-row .cart-uniform .mini-uniform { width: 88px; height: 112px; }
    .sf-main .cart-row > form { grid-column: 1 / -1; justify-self: end; margin-top: -4px; }
    .sf-main .cart-info p { margin: 6px 0; font-size: 14px; }
    .sf-main .track-card > p { flex-direction: column; gap: 2px; }
    .sf-footer__brand p { font-size: 13.5px; }
}
/* সোশ্যাল আইকন (footer) */
.sf-social { display: flex; gap: 8px; margin-top: 14px; }
.sf-social a { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); color: #fff; transition: background .2s, transform .2s; }
.sf-social a:hover { background: rgba(255, 255, 255, .18); transform: translateY(-2px); }

/* ---------- §১৮-G. Reduced motion & print ---------- */
@media (prefers-reduced-motion: reduce) {
    .sf-schools__grid--p9, .sf-features__grid--p9, .sf-dir__chips { scroll-behavior: auto; }
    .sf-acct__menu { animation: none; }
}
@media print {
    .sf-tabbar, .sf-actionbar, .sf-mbanner, .sf-acct__menu, .sf-dir__chips, .sf-dir__pager { display: none !important; }
    body.sf-has-tabbar, body.sf-actionbar-on { padding-bottom: 0; }
}

/* ---------- §১৮-H. FIX (2026-10-05, P9-13 — Agent C2): carousel-এর আগে/পরে বোতাম + প্রান্তের fade, action-bar-এর proxy বোতাম ---------- */
/* JS (frontend-pro.js initCarousels) track-এর পরে .sf-carousel__nav বসায় — শুধু ফোনে, আর শুধু স্ক্রল করা গেলে (.is-visible) */
.sf-carousel__nav { display: none; }
@media (max-width: 767.98px) {
    .sf-carousel__nav.is-visible { display: flex; justify-content: flex-start; gap: 8px; margin-top: 2px; }
    .sf-carousel__btn { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--sf-line); background: #fff; color: var(--sf-navy); cursor: pointer; box-shadow: var(--sf-shadow-sm); transition: background .2s, color .2s, opacity .2s; }
    .sf-carousel__btn:hover { background: var(--sf-navy); color: #fff; }
    .sf-carousel__btn:focus-visible { outline: 3px solid rgba(44, 131, 55, .45); outline-offset: 2px; }
    .sf-carousel__btn:disabled { opacity: .35; cursor: default; box-shadow: none; }
    .sf-carousel__btn:disabled:hover { background: #fff; color: var(--sf-navy); }
    /* হোমের "All schools" লিংক একই সারিতে ডানে (nav বাঁয়ে) */
    .sf-carousel__nav.is-visible + .sf-section__foot { margin-top: -44px; }
    /* ডান প্রান্তে হালকা fade — "আরও আছে" ইঙ্গিত; শেষ কার্ডে পৌঁছালে নেই */
    [data-carousel][data-carousel-at="start"], [data-carousel][data-carousel-at="middle"] { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), rgba(0, 0, 0, .15)); mask-image: linear-gradient(90deg, #000 calc(100% - 36px), rgba(0, 0, 0, .15)); }
    [data-carousel].is-scrollable { cursor: grab; }
}
/* action-bar-এর proxy বোতামের ভেতরের আইকন/লেখা আসল বোতামের মতোই — শুধু উচ্চতা বারের সাথে মেলে */
.sf-actionbar__btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.sf-actionbar__btn .su-icon { flex: 0 0 auto; }
/* drawer-এর তালিকা উপর থেকে সাজানো (grid-এর stretch-এ সারিগুলো ৭০px+ লম্বা হয়ে যেত) */
.sf-drawer__nav { align-content: start; }
/* ফোনে লেখার নিচের সীমা ১৩px (§6: text ≥ 13px) — আগের ছোট label/badge/eyebrow সবগুলো এক জায়গায় */
@media (max-width: 991.98px) {
    .sf-tabbar__tab { font-size: 13px; font-weight: 700; }
    .sf-tabbar { gap: 0; padding-left: 2px; padding-right: 2px; }
    .sf-tabbar__label:lang(en) { letter-spacing: -.01em; }
    .sf-tabbar__badge { min-width: 20px; height: 20px; font-size: 13px; top: -7px; right: 0; }
    .sf-steps__num, .sf-steps__label { font-size: 13px; }
    .sf-cart-badge { font-size: 13px; min-width: 21px; height: 21px; }
}
@media (max-width: 767.98px) {
    .sf-eyebrow, .sf-main .eyebrow, .sf-kicker { font-size: 13px; }
    .sf-hero--home .sf-kicker { font-size: 13px; }
    .sf-hero--home .sf-art-card figcaption { font-size: 13px; }
    .sf-hero--home .sf-hero__trust { font-size: 13px; }
    .sf-hero--home .sf-float-badge { font-size: 13px; }
    .sf-stat span { font-size: 13px; }
    .sf-how__num b { font-size: 13px; }
    .sf-dir__chip b { font-size: 13px; }
    .sf-dir-card__tag { font-size: 13px; }
    .sf-pay span { font-size: 13px; }
    .sf-acct__head small, .sf-drawer__who-text small, .sf-actionbar__meta small { font-size: 13px; }
    .sf-checkout-steps span { font-size: 13px; }
    .sf-main .track-card > p span { font-size: 13px; }
    .sf-main .uniform-gender-card span { font-size: 13px; }
    .sf-hero__chips a { font-size: 13px; }
}

/* FIX (2026-10-11, P10-P3): gateway থেকে ব্যর্থ হয়ে ফেরার বার্তা (confirmation পাতা) */
.sf-pay-return-note { display: flex; align-items: center; gap: 8px; max-width: 760px; margin: 0 auto 14px; padding: 11px 14px; border-radius: 12px; border: 1px solid #fde8c2; background: #fff7e6; color: #a05a00; font-weight: 700; font-size: 14px; line-height: 1.5; }
.sf-pay-return-note svg { flex: 0 0 auto; }

/* FIX (2026-10-11, P10-C3): হোম পাতার স্কুল-খোঁজার তালিকা (.sf-ac) — .sf-hero-র overflow:hidden শেষের ১–২টা ফল কেটে দিত
   (desktop-এ ৭টা ফল এলে)। এখন তালিকার উচ্চতা সীমিত, ভেতরে scroll। */
.sf-ac { max-height: min(45vh, 280px); overflow-y: auto; overscroll-behavior: contain; }

/* FIX (2026-10-11, P10-C5): checkout-এর "Cash on delivery" লেখা আগে লাল দেখাত (app.css-এর সাধারণ `label span` = required-তারকার
   লাল রং এটাকেও ধরত)। এখন bKash/Nagad-এর মতো নিজের রং। */
.payment-card .cod { color: #0f766e; font-size: 18px; font-weight: 900; }

/* FIX (2026-10-11, P10-C6): হোম পাতার #sf-faq / #sf-how / #sf-lead ইত্যাদিতে লাফ দিলে শিরোনাম sticky header-এর নিচে ঢাকা পড়ত */
.sf-section[id], section[id^="sf-"] { scroll-margin-top: calc(var(--sf-header-h, 72px) + 14px); }

/* FIX (2026-10-11, P10-C7): ফোনে খুব ছোট লেখা (১১–১১.৫px) পড়া কঠিন — ছোট পর্দায় কমপক্ষে ১২px; "?" সাহায্য-বোতাম
   আঙুলে চাপার মতো বড় (দেখতে একই ছোট বৃত্ত, শুধু চারপাশের চাপার জায়গা বড় — box-shadow-এর বাইরে outline নয়)। */
@media (max-width: 575.98px) {
    .ai-quality-mini span, .su-lang-btn, .sf-mtable thead th, .sf-gpoint__req, .sf-garment-map__no,
    .sf-main .sf-fit-scale__option { font-size: 12px; }
    .sf-help-btn { width: 34px; height: 34px; font-size: 14px; }
}

/* FIX (2026-10-11, P10-W1): ইউনিফর্ম এখনো যোগ হয়নি এমন ক্লাস/লিঙ্গের কার্ড — দেখা যায়, কিন্তু চাপা যায় না */
.class-card.is-unavailable, .gender-card.is-unavailable { opacity: .55; filter: grayscale(.6); cursor: not-allowed; pointer-events: none; box-shadow: none; }
.class-card.is-unavailable small, .gender-card.is-unavailable span { color: #72767d; font-weight: 700; }

/* FIX (2026-10-11, P10-M1/P10-M2): মাপের পাতা দুই ভাগে — ① ফোন-ক্যামেরায় মাপ (.sf-scan: বড় পর্দায় QR, ফোন/ট্যাবে বোতাম)
   ② নিজে লেখা। .sf-part = "১ / ২" চিহ্ন। ফোন/ট্যাব চেনার media query JS-এর (app.js bootMeasureScan) MOBILE_MQ-এর সাথে হুবহু এক। */
.sf-part { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 6px; color: var(--sf-navy); font-weight: 800; font-size: 13px; letter-spacing: .01em; }
.sf-part__no { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--sf-navy); color: #fff; font-size: 13px; font-weight: 900; flex: 0 0 auto; }
.ai-input-card > .sf-part + h3 { margin-top: 2px; }
.sf-scan .camera-head .sf-part { margin-bottom: 4px; }
.sf-scan__box { display: grid; gap: 10px; margin: 14px 0; padding: 14px; border-radius: 18px; border: 1px dashed #b9dcbc; background: radial-gradient(circle at 50% 0%, #f7fbf7, #eef8ef); text-align: center; min-width: 0; }
.sf-scan__qr { display: grid; justify-items: center; gap: 8px; min-width: 0; }
.sf-scan__qr-frame { display: grid; place-items: center; width: 216px; height: 216px; max-width: 100%; aspect-ratio: 1; padding: 8px; border-radius: 16px; background: #fff; border: 1px solid var(--sf-line); box-shadow: 0 10px 26px rgba(46, 128, 54, .1); }
.sf-scan__qr-frame svg { display: block; width: 100%; height: 100%; }
.sf-scan__qr-frame.is-expired svg { opacity: .16; filter: grayscale(1); }
.sf-scan__qr-placeholder { color: var(--sf-muted); font-size: 13px; font-weight: 700; padding: 0 12px; }
.sf-scan__qr-caption { margin: 0; font-weight: 700; color: var(--sf-ink); font-size: 14px; line-height: 1.45; }
.sf-scan__expiry { margin: 0; color: var(--sf-muted); font-size: 12.5px; }
.sf-scan__mobile { display: none; gap: 6px; justify-items: center; min-width: 0; }
.sf-scan__open { min-height: 52px; gap: 10px; white-space: normal; line-height: 1.3; }
.sf-linkbtn { border: 0; background: none; padding: 6px 4px; color: var(--sf-blue); font: inherit; font-weight: 700; font-size: 13.5px; line-height: 1.4; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; min-height: 40px; }
.sf-linkbtn:focus-visible { outline: 3px solid rgba(44, 131, 55, .45); outline-offset: 2px; border-radius: 6px; }
.sf-scan__status { margin: 0; padding: 9px 12px; border-radius: 12px; background: #fff; border: 1px solid var(--sf-line); color: #41464d; font-size: 13.5px; font-weight: 700; line-height: 1.45; overflow-wrap: anywhere; }
.sf-scan__status.is-ok { border-color: #bbf7d0; background: #ecfdf5; color: #0c6b41; }
.sf-scan__status.is-warn { border-color: #fde8c2; background: #fff7e6; color: #a05a00; }
.sf-scan__steps { margin: 0; padding: 0; list-style: none; counter-reset: sfscan; display: grid; gap: 10px; }
.sf-scan__steps li { position: relative; min-height: 24px; padding-left: 34px; color: #41464d; font-size: 13.5px; line-height: 1.55; counter-increment: sfscan; }
.sf-scan__steps li::before { content: counter(sfscan); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--sf-navy); color: #fff; font-size: 12.5px; font-weight: 800; }
.sf-scan__steps strong { color: var(--sf-navy); white-space: nowrap; }
.sf-scan__result { margin-top: 14px; padding: 12px 14px; border-radius: 16px; border: 1px solid #bbf7d0; background: linear-gradient(135deg, #ecfdf5, #f8fffb); }
.sf-scan__result-title { display: flex; align-items: center; gap: 8px; margin: 0; color: #0c6b41; font-weight: 800; line-height: 1.4; }
.sf-scan__result-meta { margin: 4px 0 10px; color: #41464d; font-size: 13px; overflow-wrap: anywhere; }
/* FIX (2026-10-12, P10-R4): সীমার বাইরের (আন্দাজে ভরা) মাপের নাম — হলুদ নোট */
.sf-scan__result-note { margin: -4px 0 10px; padding: 7px 10px; border-radius: 10px; border: 1px solid #fde8c2; background: #fff7e6; color: #8a4b00; font-size: 12.5px; font-weight: 700; line-height: 1.45; overflow-wrap: anywhere; }
.sf-scan__result-note[hidden] { display: none; }
/* FIX (2026-10-13, P12-Q9): QR-এর লিংকের সতর্কবার্তা (localhost → ফোন খুলতে পারে না; http → লাইভ ক্যামেরা নয়, ছবি-মোড চলে) */
.sf-scan__link-note { max-width: 260px; margin: 8px auto 0; padding: 7px 10px; border-radius: 10px; font-size: 12px; font-weight: 700; line-height: 1.45; text-align: left; overflow-wrap: anywhere; }
.sf-scan__link-note.is-warn { border: 1px solid #f6c9c6; background: #fff1f0; color: #9b1c14; }
.sf-scan__link-note.is-info { border: 1px solid #cfe3f7; background: #f1f7fe; color: #1f4f82; }
.sf-scan__link-note[hidden] { display: none; }
/* FIX (2026-10-14, P19-Q1): QR-এর নিচে স্ক্যান ছাড়া খোলার ঠিকানা + ৬ অঙ্কের কোড (ফোনের scanner-এর "security risk" বার্তা এড়াতে) */
.sf-scan__code { max-width: 270px; margin: 8px auto 0; padding: 8px 11px; border-radius: 12px; border: 1px dashed #b9dcbf; background: #f4fbf5; color: var(--sf-ink); font-size: 12.5px; font-weight: 600; line-height: 1.55; text-align: center; overflow-wrap: anywhere; }
.sf-scan__code[hidden] { display: none; }
.sf-scan__code-url { color: var(--sf-navy); font-weight: 800; }
.sf-scan__code-digits { display: inline-block; padding: 0 6px; border-radius: 6px; background: #fff; border: 1px solid #cfe6d2; color: #14381a; font: 800 15px/1.5 ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; letter-spacing: .08em; white-space: nowrap; }
.sf-scan__note { margin: 12px 0 0; color: var(--sf-muted); font-size: 12.5px; line-height: 1.5; }
.sf-tape-tips { margin-top: 14px; padding: 10px 14px; border-radius: 14px; background: #f5faf5; border: 1px solid #dcefdf; min-width: 0; }
.sf-tape-tips summary { cursor: pointer; font-weight: 800; font-size: 13.5px; color: var(--sf-navy); min-height: 30px; display: flex; align-items: center; }
.sf-tape-tips ul { margin: 8px 0 12px; padding-left: 18px; display: grid; gap: 4px; color: #41464d; font-size: 13px; line-height: 1.5; }
.sf-tape-tips .su-btn { white-space: normal; text-align: left; line-height: 1.35; }
.sf-measure-v4 .ai-result-card > h3 { margin-bottom: 6px; }
.sf-measure-v4 .ai-result-card > .sf-manual-hint { margin: 0 0 10px; }
.sf-measure-v4 .sf-quick-toggle { margin-top: 12px; }
.sf-measure-v4 [data-submit-button][disabled] { opacity: .7; cursor: progress; }
html.sf-no-js .sf-scan__box, html.sf-no-js .sf-scan__steps { display: none; }
@media (min-width: 1200px) {
    .sf-measure-v4.is-no-scan { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 899.98px), (hover: none) and (pointer: coarse) {
    .sf-scan__qr { display: none; }
    .sf-scan__mobile { display: grid; }
    .sf-scan.is-qr-forced .sf-scan__qr { display: grid; }
    .sf-scan__box { padding: 12px; }
}
@media (max-width: 380px) {
    .sf-scan__qr-frame { width: 188px; height: 188px; }
    .sf-scan__steps strong { white-space: normal; }
}
/* FIX (2026-10-11, P10-M1): কার্ট/অর্ডারের মাপের সারাংশে "ফোনের ক্যামেরায় মাপা" চিহ্ন */
.sf-chip.is-scan { background: #ecfdf5; border-color: #bbf7d0; color: #0c6b41; }
/* FIX (2026-10-20, P27-S1): অর্ডারের স্টাইল (হাফ হাতা, কাঁধে ব্যাজ …) */
.sf-chip.is-style { background: #f3f0ff; border-color: #ddd6fe; color: #4c1d95; }

/* ==========================================================================
   FIX (2026-10-20, P27) — মাপের পাতা v5: ① আপনার অর্ডার (অংশ + স্কুলের নিয়মে স্টাইল + নাম) ② ফোনের ক্যামেরা ③ ফিতার মাপ
   (পোশাক অনুযায়ী ভাগ, "সাধারণত X–Y", "আবার মেপেছি" টিক) ④ যাচাই ও কার্ট। রং/রেখা/কোণ আগের sf-* টোকেনেরই।
   ========================================================================== */
.sf-measure-v5 { align-items: start; }
.sf-measure-v5 > .sf-order { grid-column: 1 / -1; }
.sf-measure-v5 .sf-part { margin-bottom: 4px; }
.sf-measure-v5 [hidden] { display: none !important; }

/* ① অর্ডার */
.sf-order__head h3 { margin: 0 0 14px; }
.sf-order__grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 18px 26px; align-items: start; }
.sf-order__pieces { border: 0; margin: 0; padding: 0; min-width: 0; }
.sf-order__pieces legend, .sf-order__who label { padding: 0; margin: 0 0 8px; font-weight: 800; font-size: 14px; color: var(--sf-ink); }
.sf-piece-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.sf-piece { position: relative; margin: 0; cursor: pointer; min-width: 0; }
.sf-piece input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.sf-piece__body { position: relative; display: grid; gap: 3px; height: 100%; padding: 12px 12px 12px 40px; border: 1px solid var(--sf-line); border-radius: 16px; background: #fff; transition: border-color .2s, background .2s, box-shadow .2s; }
.sf-piece__body::before { content: ""; position: absolute; left: 13px; top: 14px; width: 17px; height: 17px; box-sizing: border-box; border-radius: 50%; border: 2px solid #adb3bc; background: #fff; }
.sf-piece__body strong { color: var(--sf-ink); font-size: 14.5px; line-height: 1.35; }
.sf-piece__body small { color: var(--sf-muted); font-size: 12.5px; font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; }
.sf-piece__price { margin-top: 4px; color: var(--sf-navy); font-weight: 900; font-size: 17px; letter-spacing: .01em; }
.sf-piece:hover .sf-piece__body { border-color: #adb3bc; }
.sf-piece input:checked + .sf-piece__body { border-color: var(--sf-navy); background: #f5faf5; box-shadow: 0 0 0 3px rgba(46, 128, 54, .10); }
.sf-piece input:checked + .sf-piece__body::before { border-color: var(--sf-navy); background: radial-gradient(circle, var(--sf-navy) 0 3.5px, #fff 4.5px); }
.sf-piece input:focus-visible + .sf-piece__body { outline: 3px solid rgba(44, 131, 55, .45); outline-offset: 2px; }
.sf-order__note { margin: 8px 0 0; color: var(--sf-muted); font-size: 12.5px; line-height: 1.5; }

.sf-order__styles { display: grid; gap: 12px; min-width: 0; }
.sf-style { display: grid; gap: 7px; border: 0; margin: 0; padding: 0; min-width: 0; }
.sf-style__label { padding: 0; font-weight: 800; font-size: 14px; color: var(--sf-ink); }
.sf-style__choices { display: flex; flex-wrap: wrap; gap: 8px; }
.sf-pill { position: relative; margin: 0; cursor: pointer; }
.sf-pill input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.sf-pill span { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 16px; border: 1.5px solid #cfd8d1; border-radius: 999px; background: #fff; color: #2f3a33; font-weight: 700; font-size: 13.5px; line-height: 1.25; transition: background .2s, border-color .2s, color .2s; }
.sf-pill:hover span { border-color: var(--sf-navy); }
.sf-pill input:checked + span { background: var(--sf-navy); border-color: var(--sf-navy); color: #fff; }
.sf-pill input:focus-visible + span { outline: 3px solid rgba(44, 131, 55, .45); outline-offset: 2px; }
.sf-style.has-error .sf-pill span { border-color: var(--sf-rose); }
.sf-style__hint { color: var(--sf-muted); font-size: 12px; font-weight: 600; }
.sf-style.is-fixed { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px; }
.sf-style__fixed { display: inline-flex; align-items: center; gap: 6px; justify-self: start; padding: 7px 12px; border-radius: 999px; background: #f1f5f2; color: #24352a; font-weight: 800; font-size: 13px; }
.sf-style__fixed small { color: var(--sf-muted); font-weight: 600; }
.sf-order__main { display: grid; gap: 16px; min-width: 0; }
.sf-order__who { display: grid; gap: 6px; max-width: 520px; }
.sf-order__who label small { color: var(--sf-muted); font-weight: 600; }
.sf-order__student { margin: 0; color: var(--sf-muted); font-size: 13.5px; }
.sf-order__student strong { color: var(--sf-ink); font-size: 15px; }

/* ③ ফিতার মাপ */
.sf-tape__lead { margin: 0 0 12px; color: #41464d; font-size: 13.5px; line-height: 1.55; }
.sf-tape__unit { display: grid; gap: 6px; }
.sf-tape__unit label { margin: 0; }
.sf-mgroup { margin-top: 18px; min-width: 0; }
.sf-mgroup__title { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; color: var(--sf-navy); font-weight: 800; font-size: 14px; }
.sf-mgroup__title::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--sf-line); }
.sf-mgroup__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; }
.sf-mgroup__choose { margin: 10px 0 0; padding: 9px 12px; border-radius: 12px; border: 1px dashed #c1dec4; background: #fbfdfb; color: var(--sf-navy); font-size: 13px; font-weight: 700; }
.sf-advanced .sf-mgroup__grid { margin-top: 10px; padding: 0 14px 14px; }
.sf-req { color: var(--sf-rose); }
.sf-mfield__hint { color: var(--sf-muted); font-size: 12px; font-weight: 600; line-height: 1.35; min-height: 1em; }
.sf-mfield__hint:empty { display: none; }
.sf-live-msg { font-size: 12.5px; font-weight: 700; line-height: 1.45; }
.sf-live-msg.is-error { color: #b91c1c; }
.sf-live-msg.is-review { color: #a05a00; }
.sf-live-msg.is-confirmed { color: #0c6b41; }
.sf-mfield.is-confirmed input { border-color: #86efac; box-shadow: 0 0 0 3px rgba(22, 163, 74, .10); }
.sf-confirm { display: flex; align-items: flex-start; gap: 8px; margin: 2px 0 0; padding: 8px 10px; border-radius: 12px; border: 1px solid #fde8c2; background: #fff7e6; color: #8a4b00; font-size: 12.5px; font-weight: 800; line-height: 1.4; cursor: pointer; }
.sf-confirm input { width: 18px; height: 18px; margin: 0; flex: 0 0 auto; accent-color: #b45309; }
.sf-mfield.is-confirmed .sf-confirm { border-color: #bbf7d0; background: #ecfdf5; color: #0c6b41; }
.sf-mfield.is-confirmed .sf-confirm input { accent-color: #15803d; }
.sf-tape__ar { margin-top: 16px; }

/* ④ যাচাই ও কার্ট */
.sf-finish > h3 { margin-bottom: 8px; }
.sf-measure-v5 .sf-vpanel { margin-top: 4px; }
.sf-vpanel__progress { color: var(--sf-muted); font-size: 12.5px; font-weight: 700; }
.sf-meter { height: 6px; margin: 10px 0 0; border-radius: 999px; background: #eef3ee; overflow: hidden; }
.sf-meter span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--sf-sky), var(--sf-navy)); transition: width .35s ease; }
.sf-vpanel[data-status="ok"] .sf-meter span { background: var(--sf-green); }
.sf-vpanel[data-status="ok"] { border-color: #bbf7d0; background: linear-gradient(160deg, #fff, #f3fcf6); }
.sf-vpill.is-wait { background: #eef1f4; color: #4b5563; }
.sf-vissue.is-wait { background: #f8fafc; border-color: #e2e8f0; }
.sf-vissue.is-wait .sf-vissue__icon { background: #64748b; }
.sf-vissue.is-info { background: #f1f7fe; border-color: #cfe3f7; }
.sf-vissue.is-info .sf-vissue__icon { background: #2563eb; }
.sf-order-total { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.sf-order-total div { padding: 10px 12px; }
.sf-order-total strong { font-size: 16px; overflow-wrap: anywhere; }
.sf-finish .consent-check { margin-top: 12px; }

/* জমার আগের মাপের তালিকা (SweetAlert) */
.sf-sheet-popup .swal2-html-container { text-align: left; margin: 10px 18px 0; }
.sf-sheet__lead { margin: 0 0 10px; color: #41464d; font-size: 14px; line-height: 1.55; }
.sf-sheet__meta { list-style: none; margin: 0 0 12px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.sf-sheet__meta li { display: grid; gap: 1px; padding: 7px 10px; border-radius: 10px; background: #f5faf5; border: 1px solid #e3f0e5; font-size: 13px; }
.sf-sheet__meta span { color: var(--sf-muted); font-size: 11.5px; font-weight: 700; }
.sf-sheet__meta strong { color: var(--sf-ink); overflow-wrap: anywhere; }
.sf-sheet__table { width: 100%; font-size: 13.5px; }
.sf-sheet__table th[scope="row"] { font-weight: 700; color: #343941; }
.sf-sheet__table small { color: #0c6b41; font-weight: 700; }

@media (max-width: 1199.98px) {
    .sf-order__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
    .sf-order-total { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .sf-order-total span { font-size: 11px; }
}
@media (max-width: 420px) {
    .sf-mgroup__grid { grid-template-columns: minmax(0, 1fr); }
    .sf-piece-list { grid-template-columns: minmax(0, 1fr); }
    .sf-sheet__meta { grid-template-columns: minmax(0, 1fr); }
    .sf-order-total { grid-template-columns: minmax(0, 1fr); }
}