/* ==========================================================================
   NEW (2026-10-21, Phase 28) — frontend-flow.css
   --------------------------------------------------------------------------
   মালিকের Phase 28-এর চাওয়াগুলোর style — layouts/frontend সব পাতায় এটা frontend-effects.css-এর পরে লোড করে
   (তাই আগের রং/রেখা/কোণের টোকেন — --sf-navy, --sf-line, --sf-muted … — একই থাকে, markup-এর পুরনো class অক্ষত)।
     §১  হোমের hero: নিচের ছোট লেখাটা (subtitle) ফোনে নয় (P28-H1)
     §২  অর্ডারের ধাপের সারি: আগের/বাছা ধাপ লিংক, এখনো না-বাছা ধাপ বন্ধ (P28-W1)
     §৩  বাছাই করা স্কুল / শ্রেণি / ছেলে-মেয়ে হাইলাইট — ফিরে এলে বোঝা যায় কোনটা বাছা হয়েছিল (P28-W2)
     §৪  নতুন ধাপ "আপনার অর্ডার" (P28-O1)
     §৫  ইউনিফর্মের পাতা: বাছাইয়ের তথ্য ইউনিফর্মের তথ্যের সাথে (P28-U1)
     §৬  মাপের পাতা: "কিসের মাপ" এক লাইনে, 3D preview-এর বোতাম (P28-M1/D1)
     §৭  মাপ মনে রাখা হয় — নোটিশ (মাপের পাতা, কার্ট, অর্ডার নিশ্চিত, ড্যাশবোর্ড) (P28-K1)
     §৮  স্কুল খোঁজা: একটা অক্ষর/শব্দ লিখলেই প্রস্তাব, মিলে যাওয়া অংশ গাঢ় (P28-S1)
     §৯  হোমের hero-র ইউনিফর্ম-কার্ড — কার্ডের লেখা আর ঢাকা পড়ে না, ফোন/ট্যাবে কার্ড কাটে না (P30-H1, 2026-10-26)
     §১০ ফর্মের শেষ ঘর আর "জমা দিন" বোতামের মাঝে ফাঁক — অর্ডার ট্র্যাক ও প্রোফাইল (P30-F1, 2026-10-26)
     §১১ ফোনে "অ্যাপ ইনস্টল করুন" ব্যানার ও footer-এর লিংক (P31-A1, 2026-10-26)
     §১২ মাপের পাতা — সহজ নকশা: বড় পর্দায় দুই কলাম, ভাগের এক লাইনের শিরোনাম, ভাঁজ করা নিয়ম/নোট, ফিটের তিন বোতাম,
         পরিমাণ-দাম-মোট এক বাক্সে (P34-D1, 2026-10-27)
   3D preview-এর নিজের style: uniform-3d.css (শুধু মাপের পাতায়)।
   ========================================================================== */

/* §১ ---------- হোমের hero ---------- */
@media (max-width: 767.98px) {
    .sf-hero .sf-hero__lead--desktop { display: none; }
}

/* §২ ---------- অর্ডারের ধাপের সারি (App\Support\OrderWizard::steps) ---------- */
.sf-steps__item { padding: 0; }
.sf-steps__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 38px;
    padding: 6px 12px 6px 6px;
    border-radius: 999px;
    color: inherit;
    text-decoration: none;
}
a.sf-steps__link { cursor: pointer; transition: background .2s ease, color .2s ease; }
a.sf-steps__link:hover { background: rgba(46, 128, 54, .10); color: var(--sf-navy-900, #215c27); }
a.sf-steps__link:focus-visible { outline: 3px solid rgba(44, 131, 55, .45); outline-offset: 2px; }
a.sf-steps__link:hover .sf-steps__label { text-decoration: underline; text-underline-offset: 3px; }
/* পরের ধাপ, কিন্তু আগেই বাছা হয়েছিল — খোলা যায় (ফাঁপা বৃত্ত) */
.sf-steps__item.is-open { color: var(--sf-navy); }
.sf-steps__item.is-open .sf-steps__num { background: #fff; color: var(--sf-navy); box-shadow: inset 0 0 0 2px var(--sf-navy); }
/* এখনো বাছা হয়নি — লিংক নয়, চাপলেও যাওয়া যায় না */
.sf-steps__item.is-locked { color: #9aa1a8; }
.sf-steps__item.is-locked .sf-steps__num { background: #f1f3f4; color: #a3a9b0; }
.sf-steps__item.is-locked .sf-steps__link { cursor: not-allowed; }
.sf-steps__item.is-current .sf-steps__link { color: #fff; }

/* §৩ ---------- বাছাই করা কার্ড/সারি ---------- */
body.sf-body .sf-picked {
    display: none;
    align-items: center;
    gap: 4px;
    padding: 3px 9px 3px 6px;
    border-radius: 999px;
    background: var(--sf-navy);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.3;
    white-space: nowrap;
    box-shadow: 0 6px 14px rgba(46, 128, 54, .25);
}
body.sf-body .sf-picked svg { flex: 0 0 auto; }
body.sf-body .is-selected .sf-picked { display: inline-flex; }
.class-card.is-selected,
.gender-card.is-selected { position: relative; }
.class-card > .sf-picked,
.gender-card > .sf-picked { position: absolute; top: 10px; right: 10px; z-index: 2; }
body.sf-body .sf-main .class-card.is-selected,
body.sf-body .sf-main .gender-card.is-selected {
    border-color: var(--sf-navy);
    box-shadow: 0 0 0 3px rgba(46, 128, 54, .28), 0 16px 32px rgba(46, 128, 54, .14);
}
body.sf-body .sf-main .class-card.is-selected { background: linear-gradient(180deg, #ffffff 0%, #eaf7ec 100%); }
body.sf-body .sf-main .class-card.is-selected strong,
body.sf-body .sf-main .gender-card.is-selected strong { color: var(--sf-navy-900, #215c27); }
.sf-main .result-row.is-selected { background: #f1f9f2; box-shadow: inset 4px 0 0 var(--sf-navy); }
.sf-main .result-row.is-selected .sf-picked { margin-left: 8px; vertical-align: 2px; }
.sf-main .result-row.is-selected .su-btn.primary { box-shadow: 0 0 0 3px rgba(46, 128, 54, .22); }

/* §৪ ---------- নতুন ধাপ "আপনার অর্ডার" ---------- */
.sf-order [hidden] { display: none !important; }
.sf-order-step .sf-order--step { padding: clamp(18px, 2.6vw, 30px); }
.sf-order--step .sf-order__head h2 { margin: 0 0 4px; font-size: clamp(20px, 2.1vw, 25px); letter-spacing: -.01em; }
.sf-order__lead { margin: 0 0 18px; color: var(--sf-muted); font-size: 14px; line-height: 1.6; max-width: 70ch; }
.sf-order--step .sf-piece__body { padding-right: 42px; }
.sf-piece__tick {
    position: absolute;
    top: 11px;
    right: 11px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--sf-navy);
    color: #fff;
    opacity: 0;
    transform: scale(.5);
    transition: opacity .2s ease, transform .25s var(--sf-ease, ease);
    pointer-events: none;
}
.sf-piece input:checked ~ .sf-piece__tick { opacity: 1; transform: none; }
.sf-order--step .sf-order__styles { padding: 16px; border: 1px solid #e3efe5; border-radius: 18px; background: #f8fbf8; }
.sf-order__styles-title { margin: 0 0 2px; color: var(--sf-ink); font-size: 15px; font-weight: 800; }
.sf-order--step .sf-style.is-fixed { padding: 6px 0; }
.sf-order-step__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 18px;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px dashed var(--sf-line);
}
.sf-order-step__note { display: inline-flex; align-items: flex-start; gap: 8px; margin: 0; max-width: 62ch; color: var(--sf-muted); font-size: 13px; line-height: 1.55; }
.sf-order-step__note svg { flex: 0 0 auto; margin-top: 1px; color: var(--sf-navy); }
.sf-order-step__go { min-width: 250px; justify-content: center; }
.sf-order-step__go[aria-busy="true"] { opacity: .75; cursor: progress; }
@media (max-width: 575.98px) {
    .sf-order-step__foot { justify-content: center; }
    .sf-order-step__go { width: 100%; min-width: 0; }
    .sf-order--step .sf-order__styles { padding: 12px; }
}

/* §৫ ---------- ইউনিফর্মের পাতা: বাছাইয়ের তথ্য ---------- */
.sf-main .preview-content-info dl .sf-choice-row { color: var(--sf-navy-900, #215c27); }
.sf-main .preview-content-info dl dt.sf-choice-row { display: flex; align-items: center; gap: 6px; }
.sf-main .preview-content-info dl dt.sf-choice-row::before {
    content: "";
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--sf-navy);
}
.sf-main .preview-content-info dl dd.sf-choice-row { color: var(--sf-navy-900, #215c27); }
.sf-main .preview-content-info dl .sf-choice-first { padding-top: 12px; border-top: 1px dashed #cfe5d2; }
.sf-main .preview-content-info dl dd.is-off { color: #8a9097; font-weight: 700; }
.sf-main .preview-content-info dl dd.is-off small { display: block; color: #a05a00; font-size: 12px; font-weight: 700; }
.sf-choice-change { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: -10px 0 18px; color: var(--sf-muted); font-size: 13px; }
.sf-choice-change a { display: inline-flex; align-items: center; gap: 5px; color: var(--sf-navy); font-weight: 800; text-underline-offset: 3px; }

/* §৬ ---------- মাপের পাতা ---------- */
.sf-measure-for {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    min-width: 0;
    padding: 12px 16px;
    border: 1px solid #d5ecd9;
    border-radius: 18px;
    background: linear-gradient(135deg, #f3fbf4, #ffffff);
}
.sf-measure-for__label { color: var(--sf-muted); font-size: 13px; font-weight: 700; }
.sf-measure-for__chips { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; flex: 1 1 260px; }
.sf-measure-for__chip { display: inline-flex; align-items: center; padding: 5px 11px; border-radius: 999px; background: #fff; border: 1px solid #cfe5d2; color: #1f4f26; font-size: 13px; font-weight: 800; overflow-wrap: anywhere; }
.sf-measure-for__chip.is-main { background: var(--sf-navy); border-color: var(--sf-navy); color: #fff; }
.sf-measure-for__change { display: inline-flex; align-items: center; gap: 5px; color: var(--sf-navy); font-size: 13px; font-weight: 800; text-underline-offset: 3px; white-space: nowrap; }

/* 3D preview-এর বোতাম — "কার্টে যোগ করুন"-এর ঠিক আগে; সব মাপ ঠিক না হলে বন্ধ */
.sf-3d-cta { display: grid; gap: 6px; margin-top: 14px; }
.sf-3d-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 50px;
    padding: 10px 18px;
    border: 2px solid var(--sf-navy);
    border-radius: 14px;
    background: #fff;
    color: var(--sf-navy-900, #215c27);
    font: inherit;
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
    transition: background .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.sf-3d-btn__cube { flex: 0 0 auto; }
.sf-3d-btn:not(:disabled):hover { background: #eef8ef; box-shadow: 0 10px 22px rgba(46, 128, 54, .16); transform: translateY(-1px); }
.sf-3d-btn:focus-visible { outline: 3px solid rgba(44, 131, 55, .45); outline-offset: 2px; }
.sf-3d-btn:disabled { border-style: dashed; border-color: #b9c4bc; color: #7d858c; background: #f6f8f7; cursor: not-allowed; }
.sf-3d-btn.is-ready { background: linear-gradient(135deg, #f2fbf3, #e3f5ff); }
.sf-3d-btn.is-ready::after {
    content: "";
    position: absolute;
    inset: -5px;
    border-radius: 18px;
    border: 2px solid rgba(46, 128, 54, .35);
    animation: sf3dReady 1.8s ease-out 2;
    pointer-events: none;
}
@keyframes sf3dReady { from { opacity: 1; transform: scale(.98); } to { opacity: 0; transform: scale(1.05); } }
.sf-3d-hint { margin: 0; color: var(--sf-muted); font-size: 12.5px; font-weight: 600; line-height: 1.45; text-align: center; }
.sf-3d-hint.is-ready { color: #0c6b41; }
@media (prefers-reduced-motion: reduce) {
    .sf-3d-btn.is-ready::after { animation: none; opacity: 0; }
}

/* §৭ ---------- মাপ মনে রাখা হয় ---------- */
.sf-keep {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-width: 0;
    margin: 0 0 16px;
    padding: 14px 16px;
    border: 1px solid #bfe6dc;
    border-radius: 18px;
    background: linear-gradient(135deg, #ecf8f5, #f7fcff);
    color: #18443a;
    text-align: left;
}
.sf-keep__icon { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: #fff; color: #0f7d6b; box-shadow: 0 6px 14px rgba(19, 162, 138, .12); }
.sf-keep__body { display: grid; gap: 3px; min-width: 0; }
.sf-keep__body strong { color: #0f5e51; font-size: 15px; line-height: 1.35; }
.sf-keep__body p { margin: 0; color: #2e5a50; font-size: 13.5px; line-height: 1.55; overflow-wrap: anywhere; }
.sf-keep__body a { color: #0f7d6b; font-weight: 800; text-underline-offset: 3px; }
.sf-keep__choices { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 4px 0 0; padding: 0; list-style: none; color: #2e5a50; font-size: 13px; font-weight: 700; }
.sf-keep__choices li { display: inline-flex; align-items: center; gap: 6px; }
.sf-keep__choices li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #13a28a; }
.sf-keep--compact { margin: 10px 0 0; padding: 10px 12px; border-radius: 14px; }
.sf-keep--compact .sf-keep__icon { width: 32px; height: 32px; border-radius: 10px; }
.sf-keep--compact .sf-keep__body strong { font-size: 14px; }
.confirm-box .sf-keep { margin: 18px 0 0; }
/* মাপের পাতার "সংরক্ষিত মাপ" ব্যানার — তিনটা পথ */
.sf-saved-banner__help { margin: 2px 0 0; color: #3d5b43; font-size: 12.5px; line-height: 1.5; }
.sf-saved-banner__actions .su-btn { min-height: 40px; }

/* §৮ ---------- স্কুল খোঁজার প্রস্তাব ---------- */
/* খোঁজার ফলাফলের পাতা: মিল ৩০টার বেশি হলে নিচে পরামর্শ (P28 review) */
.sf-main .sf-results-more { margin: 14px 0 0; color: var(--sf-muted, #5c6670); font-size: 14px; line-height: 1.5; text-align: center; }
.sf-ac__item mark { padding: 0 1px; border-radius: 3px; background: #fff1b8; color: inherit; font-weight: 900; }
.sf-ac__item small mark { background: #fff6d1; font-weight: 800; }
.sf-ac__item.is-selected-school { box-shadow: inset 3px 0 0 var(--sf-navy); }
.sf-ac__item .sf-ac__picked { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: var(--sf-navy); color: #fff; font-size: 11px; font-weight: 800; vertical-align: 1px; }
.sf-ac__all {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 14px;
    background: #f7fbf7;
    color: var(--sf-navy);
    font-size: 13.5px;
    font-weight: 800;
    text-decoration: none;
    border-top: 1px solid #e3efe5;
}
.sf-ac__all:hover, .sf-ac__all.is-active { background: #eaf6ec; }
.sf-ac__all small { color: var(--sf-muted); font-weight: 700; }
.sf-ac__status { padding: 12px 14px; color: var(--sf-muted); font-size: 13.5px; }
.sf-ac__empty strong { display: block; margin-bottom: 2px; color: var(--sf-ink); }
.sf-ac { max-height: min(70vh, 520px); overflow-y: auto; overscroll-behavior: contain; }
/* তালিকা এখন body-তে (hero-র overflow:hidden-এ কাটা পড়ে না) — JS ঘরের ঠিক নিচে বসায় */
.sf-ac.sf-ac--floating { position: absolute; right: auto; z-index: 1100; max-height: min(62vh, 480px); }
@media (max-width: 575.98px) {
    .sf-ac__item { grid-template-columns: 34px 1fr; gap: 10px; padding: 10px 12px; }
    .sf-ac__item .sf-ac__ico { width: 34px; height: 34px; border-radius: 10px; }
    .sf-ac__item .sf-ac__go { display: none; }
}

@media print {
    .sf-3d-cta, .sf-keep__icon { display: none !important; }
}

/* §৯ ---------- হোমের hero-র ইউনিফর্ম-কার্ড (ছেলে/মেয়ে) আর ভাসমান চিহ্ন ----------
   FIX (2026-10-26, P30-H1): আগে —
     • <figure>-এর browser-ডিফল্ট margin (উপরে-নিচে ১৬px, দুই পাশে ৪০px) কার্ড দুটোকে মাঝখানে ঠেলে দিত — তাই মেয়েদের কার্ড
       ছেলেদের কার্ডের লেখাটা ("ছেলেদের ইউনিফর্ম") ঢেকে দিত (ফোনে ৩২০–৬০০px, ডেস্কটপে ১৩৬৬px+);
     • ফোন/ট্যাবে কার্ডের মাপ পর্দার চওড়া থেকে আসত কিন্তু ছবির জায়গা স্থির (২৩৬px) — ৭৬৭px (ট্যাব)-এ কার্ড ২৪৬px পর্যন্ত নিচে
       বেরিয়ে নিচের সংখ্যা-কার্ডের (৭+ পার্টনার স্কুল …) নিচে কেটে যেত;
     • "যাচাই করা মাপ" / "ফিট আস্থা" চিহ্ন কার্ডের নিচের লেখার উপরে বসত (৩২০–১০২৪px আর ডেস্কটপে)।
   এখন: কার্ডের margin শূন্য (CSS-এর left/right যেখানে বলেছে কার্ড ঠিক সেখানে); ফোনে ছবির জায়গা পর্দা অনুযায়ী (২৭২–৪৬০px) আর
   কার্ড তার ভেতরেই; ট্যাবে (৭৬৮–১০২৪px) কার্ড-জোড়া মাঝখানে; চিহ্নগুলো কার্ডের পাশে শরীরের উচ্চতায় — মুখ বা নিচের লেখা ঢাকে না।
   ছোট ফোনে "ফিট আস্থা" চিহ্ন নেই (ঠিক নিচের সংখ্যা-কার্ডেই একই সংখ্যা আছে)। রং, ছায়া, ঘোরানো, ভেসে ওঠা — নকশা অপরিবর্তিত। */
@media (max-width: 767.98px) {
    body.sf-body .sf-hero--home .sf-hero__art { min-height: 0; height: clamp(272px, 70vw, 460px); margin-top: 4px; }
    body.sf-body .sf-hero--home .sf-art-card { margin: 0; width: auto; height: 74%; max-width: 46%; padding: 10px; }
    body.sf-body .sf-hero--home .sf-art-card img { min-height: 0; }
    body.sf-body .sf-hero--home .sf-art-card--boys { left: 2%; right: auto; top: 3%; }
    body.sf-body .sf-hero--home .sf-art-card--girls { right: 2%; left: auto; top: 15%; }
    body.sf-body .sf-hero--home .sf-float-badge--delivery { top: 0; right: 0; bottom: auto; left: auto; }
    body.sf-body .sf-hero--home .sf-float-badge--ai { left: 0; right: auto; top: auto; bottom: 0; }
    body.sf-body .sf-hero--home .sf-float-badge--fit { display: none; }
}
@media (min-width: 768px) {
    body.sf-body .sf-hero--home .sf-art-card { margin: 0; }
}
@media (min-width: 768px) and (max-width: 1024px) {
    body.sf-body .sf-hero--home .sf-hero__art { min-height: 400px; }
    body.sf-body .sf-hero--home .sf-art-card { width: 250px; }
    body.sf-body .sf-hero--home .sf-art-card--boys { left: calc(50% - 266px); right: auto; top: 3%; }
    body.sf-body .sf-hero--home .sf-art-card--girls { left: calc(50% + 16px); right: auto; top: 13%; }
    body.sf-body .sf-hero--home .sf-float-badge--delivery { right: auto; left: calc(50% + 150px); top: 0; }
    body.sf-body .sf-hero--home .sf-float-badge--ai { left: calc(50% - 320px); bottom: auto; top: 60%; }
    body.sf-body .sf-hero--home .sf-float-badge--fit { right: auto; left: calc(50% + 176px); bottom: auto; top: 66%; }
}
@media (min-width: 1025px) {
    body.sf-body .sf-hero--home .sf-float-badge--ai { bottom: auto; top: 46%; }
    body.sf-body .sf-hero--home .sf-float-badge--fit { bottom: auto; top: 66%; right: 0; }
}

/* §১০ ---------- ফর্মের শেষ ঘর আর "জমা দিন" বোতামের মাঝে ফাঁক ----------
   FIX (2026-10-26, P30-F1): "অর্ডার ট্র্যাক করুন" (/orders/track — মোবাইল নম্বরের ঘর) আর "প্রোফাইল" (/profile — ঘরের জাল) ফর্মে
   বোতামটা শেষ ঘরের গায়ে লেগে ছিল (০px ফাঁক, সব পর্দায়) — চাপার জায়গা আলাদা বোঝা যেত না। এখন ঘরগুলোর মাঝের মতোই ১৬px।
   শুধু ঘর (input/select/textarea) বা ঘরের জাল (.form-grid)-এর ঠিক পরের .su-btn — সাইটের আর কোনো ফর্মে এই গঠন নেই
   (সব গ্রাহক-পাতা মেপে দেখা), তাই অন্য কোথাও কিছু বদলায় না। */
body.sf-body form.su-form-card > input + .su-btn,
body.sf-body form.su-form-card > select + .su-btn,
body.sf-body form.su-form-card > textarea + .su-btn,
body.sf-body form.su-form-card > .form-grid + .su-btn { margin-top: 16px; }

/* §১১ ---------- ফোনে "অ্যাপ ইনস্টল করুন" ব্যানার (P31-A1) ----------
   NEW (2026-10-26): frontend/partials/pwa-install + pwa.js। নিচে ভেসে থাকে — ফোনে নিচের tab bar-এর ঠিক উপরে (--sf-tabbar-h), বড় পর্দায়
   ডান কোণে ছোট কার্ড। শুরুতে hidden (JS না চললে কখনো দেখায় না); দেখানোর সময় নিচ থেকে উঠে আসে (.is-visible)। পাতা পাশে সরে না
   (left/right + max-width), লম্বা লেখা ভাঙে। sticky বোতামের পাতায় pwa.js ব্যানার দেখায়ই না (ঢেকে যেত)। */
.sf-install { position: fixed; left: 12px; right: 12px; bottom: 16px; z-index: 115; display: flex; align-items: center; gap: 12px; max-width: 460px; margin: 0 0 0 auto; padding: 12px 12px 12px 14px; border-radius: 18px; background: #fff; border: 1px solid rgba(46, 128, 54, .16); box-shadow: 0 18px 44px -18px rgba(20, 60, 30, .45); transform: translateY(140%); opacity: 0; transition: transform .35s var(--sf-ease, ease), opacity .35s ease; }
.sf-install[hidden] { display: none !important; }
.sf-install.is-visible { transform: none; opacity: 1; }
.sf-install__icon { flex: none; width: 48px; height: 48px; border-radius: 12px; }
.sf-install__text { display: grid; gap: 2px; min-width: 0; flex: 1 1 auto; }
.sf-install__text strong { font-size: 14.5px; line-height: 1.3; color: var(--sf-ink, #14231a); overflow-wrap: anywhere; }
.sf-install__text span { font-size: 12.8px; line-height: 1.45; color: var(--sf-muted, #696d74); overflow-wrap: anywhere; }
.sf-install__text [hidden] { display: none !important; }
.sf-install__actions { display: flex; align-items: center; gap: 4px; flex: none; }
.sf-install__actions [hidden] { display: none !important; }
.sf-install__close { display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 10px; background: transparent; color: #72767d; cursor: pointer; }
.sf-install__close:hover, .sf-install__close:focus-visible { background: #f1f5f1; color: var(--sf-ink, #14231a); outline: none; }
.sf-footer__install { display: inline-flex; align-items: center; gap: 5px; margin-left: 14px; padding: 0; border: 0; background: none; font: inherit; color: #d8ecda; cursor: pointer; }
.sf-footer__install:hover { color: #fff; }
.sf-footer__install:focus-visible { outline: 2px solid rgba(255, 255, 255, .7); outline-offset: 3px; border-radius: 4px; }
.sf-footer__install[hidden] { display: none !important; }
@media (max-width: 991.98px) {
    .sf-install { bottom: calc(var(--sf-tabbar-h, 62px) + env(safe-area-inset-bottom) + 10px); margin: 0 auto; }
}
/* ছোট ফোন (৩২০–৪২০px): লেখা পুরো চওড়া পায় — "ইনস্টল" বোতাম লেখার নিচে, বন্ধের ✕ উপরে ডানে (আগে ৩২০px-এ নামটা মাঝখানে ভেঙে যেত) */
@media (max-width: 420px) {
    .sf-install { display: grid; grid-template-columns: 40px minmax(0, 1fr) 36px; grid-template-areas: "icon text close" "icon install install"; column-gap: 10px; row-gap: 8px; align-items: start; padding: 12px 10px 12px 12px; }
    .sf-install__icon { grid-area: icon; width: 40px; height: 40px; }
    .sf-install__text { grid-area: text; padding-top: 1px; }
    .sf-install__actions { display: contents; }
    .sf-install [data-pwa-install] { grid-area: install; justify-self: start; }
    .sf-install__close { grid-area: close; margin: -6px -4px 0 0; }
}
@media (prefers-reduced-motion: reduce) {
    .sf-install { transition: none; }
}

/* §১২ ---------- মাপের পাতা — সহজ নকশা (P34-D1) ----------
   FIX (2026-10-27, P34-D1): মালিকের চাওয়া — "মাপের পাতাটা আরো সুন্দর ও সহজ করো, একজন বলছে বেশি হিবিজিবি লাগছে"।
   frontend/measurement-এর form-এ নতুন class .sf-measure-p34 (পুরনো class-ও আছে) — নিচের সব নিয়ম শুধু এই পাতার।
     • বড় পর্দায় (≥992px) দুই কলাম: বাঁয়ে ① ফোনের ক্যামেরা আর তার নিচে ② মাপগুলো, ডানে ③ মিলিয়ে নিয়ে অর্ডার।
       আগে তিনটা সরু কলাম ছিল — সব লম্বা আর গাদাগাদি দেখাত। ছোট পর্দায় এক কলাম (আগের ক্রমেই)।
       (ডান কলাম বাঁয়ের দুই সারি জুড়ে থাকে; শেষ সারি 1fr — তাই ডান কলাম লম্বা হলে ফাঁকটা বাঁয়ের একদম নিচে পড়ে, দুই কার্ডের মাঝে নয়)
     • প্রতিটা ভাগের মাথায় একটাই শিরোনাম: নম্বর + এক লাইনের ছোট লেখা (.sf-mp-head)
     • ক্যামেরার নিয়ম, ফিতার নিয়ম, দর্জির নোট — তিনটাই একই রকম ভাঁজ করা বাক্স (+ / −)
     • "আগে উচ্চতা লিখুন" একবার (.sf-mp-note — উচ্চতা দিলে JS লুকায়)
     • মাপের ঘর ফোনেও পাশাপাশি দুটো (৩৬০px থেকে) — পাতা অনেক ছোট হয়
     • ফিট (স্লিম / সাধারণ / ঢিলা) পাশাপাশি তিন বোতাম; যেটা চালু তার ছোট বর্ণনা নিচে একবার (CSS :has — পুরনো browser-এ শুধু বোতাম)
     • পরিমাণ, দাম, সাইজের গ্রুপ, মোট — একটা বাক্সে রসিদের মতো (আগে তিনটা আলাদা বাক্স + পরিমাণ আলাদা) */
.measure-grid.ai-measure-layout.sf-measure-p34 { grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
@media (min-width: 992px) {
    .measure-grid.ai-measure-layout.sf-measure-p34 { grid-template-columns: minmax(0, 1.32fr) minmax(330px, 1fr); grid-template-rows: auto auto 1fr; gap: 18px 20px; }
    .measure-grid.ai-measure-layout.sf-measure-p34.has-saved { grid-template-rows: auto auto auto 1fr; }
    .measure-grid.ai-measure-layout.sf-measure-p34.is-no-scan { grid-template-rows: auto 1fr; }
    .measure-grid.ai-measure-layout.sf-measure-p34.is-no-scan.has-saved { grid-template-rows: auto auto 1fr; }
    .sf-measure-p34 > .sf-scan, .sf-measure-p34 > .sf-tape { grid-column: 1; }
    .sf-measure-p34 > .sf-finish { grid-column: 2; grid-row: 2 / span 2; }
    .sf-measure-p34.has-saved > .sf-finish { grid-row: 3 / span 2; }
    .sf-measure-p34.is-no-scan > .sf-finish { grid-row: 2; }
    .sf-measure-p34.is-no-scan.has-saved > .sf-finish { grid-row: 3; }
    /* ডান কলাম (③) মাপ লেখার সময় সাথে সাথে থাকে — নিচে মাপ লিখতে লিখতেই যাচাই আর "কার্টে যোগ করুন" দেখা যায় (আগে আবার উপরে যেতে হত)।
       sticky কাজ করার জন্য বাইরের কার্ডের overflow: hidden → clip (একই রকম কাটে, কিন্তু scroll-box বানায় না; পুরনো browser-এ hidden-ই থাকে) */
    body.sf-body .sf-main .su-app-card:has(> .sf-measure-p34) { overflow: clip; }
    .sf-measure-p34 > .sf-finish { position: sticky; top: calc(var(--sf-header-h, 72px) + 14px); }
}

/* কার্ড ও শিরোনাম */
.measure-grid.sf-measure-p34 > .sf-mp-card { padding: 22px; }
.sf-mp-head { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 16px; min-width: 0; }
.sf-mp-head > div { min-width: 0; }
.sf-mp-head .sf-part__no { width: 30px; height: 30px; margin-top: 1px; font-size: 15px; box-shadow: 0 6px 14px rgba(46, 128, 54, .22); }
.sf-measure-p34 .sf-mp-head h3 { margin: 0; color: var(--sf-ink); font-size: 19px; line-height: 1.3; }
.sf-mp-head .sf-mp-lead { margin: 3px 0 0; color: #4b5563; font-size: 13.5px; line-height: 1.55; }

/* ভাঁজ করা বাক্স — ক্যামেরার নিয়ম, ফিতার নিয়ম, দর্জির নোট (একই রকম) */
.sf-scan__how, .sf-measure-p34 .sf-tape-tips, .sf-notes { min-width: 0; margin: 0; padding: 0 14px; border: 1px solid #e0ede2; border-radius: 14px; background: #f8fbf8; }
.sf-scan__how[open], .sf-measure-p34 .sf-tape-tips[open], .sf-notes[open] { padding-bottom: 14px; }
.sf-scan__how > summary, .sf-measure-p34 .sf-tape-tips > summary, .sf-notes > summary {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 46px;
    padding: 8px 0;
    color: var(--sf-navy);
    font-size: 14px;
    font-weight: 800;
    line-height: 1.35;
    cursor: pointer;
}
.sf-scan__how > summary::-webkit-details-marker, .sf-measure-p34 .sf-tape-tips > summary::-webkit-details-marker, .sf-notes > summary::-webkit-details-marker { display: none; }
.sf-scan__how > summary::after, .sf-measure-p34 .sf-tape-tips > summary::after, .sf-notes > summary::after {
    content: "+";
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    margin-left: auto;
    border-radius: 8px;
    background: #eaf5ec;
    color: var(--sf-navy);
    font-weight: 900;
}
.sf-scan__how[open] > summary::after, .sf-measure-p34 .sf-tape-tips[open] > summary::after, .sf-notes[open] > summary::after { content: "−"; background: var(--sf-navy); color: #fff; }
.sf-scan__how > summary:focus-visible, .sf-measure-p34 .sf-tape-tips > summary:focus-visible, .sf-notes > summary:focus-visible { outline: 3px solid rgba(44, 131, 55, .45); outline-offset: 2px; border-radius: 10px; }
.sf-notes > summary small { color: var(--sf-muted); font-size: 12.5px; font-weight: 600; }

/* ① ফোনের ক্যামেরা */
.sf-measure-p34 .sf-scan__box { margin: 0; }
.sf-measure-p34 .sf-scan__how { margin-top: 12px; }
.sf-scan__how .sf-scan__steps { margin: 2px 0 0; }
.sf-measure-p34 .sf-scan__note { display: flex; align-items: flex-start; gap: 6px; }
.sf-measure-p34 .sf-scan__note svg { flex: 0 0 auto; margin-top: 2px; color: var(--sf-navy); }
html.sf-no-js .sf-scan__how { display: none; }

/* ② মাপগুলো */
.sf-tape__tools { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px 14px; min-width: 0; }
.sf-measure-p34 .sf-tape__unit { display: flex; align-items: center; gap: 6px 10px; flex: 0 1 auto; min-width: 0; min-height: 46px; }
.sf-measure-p34 .sf-tape__unit label { font-weight: 800; white-space: nowrap; }
.sf-measure-p34 .sf-tape__unit select { flex: 1 1 150px; width: auto; min-width: 0; max-width: 230px; }
.sf-measure-p34 .sf-tape-tips { flex: 1 1 240px; }
.sf-measure-p34 .sf-tape-tips ul { margin: 2px 0 12px; }
.sf-mp-note { display: flex; align-items: flex-start; gap: 8px; margin: 14px 0 0; padding: 10px 12px; border: 1px solid #d6e6f8; border-radius: 12px; background: #f1f7fe; color: #1f4f82; font-size: 13.5px; font-weight: 700; line-height: 1.5; }
.sf-mp-note svg { flex: 0 0 auto; margin-top: 2px; }
.sf-measure-p34 .sf-mgroup { margin-top: 18px; }
/* "?" বোতাম ছাড়া ঘরের (যেমন ওজন) input পাশের ঘরের input-এর সাথে এক সারিতে */
.sf-measure-p34 .sf-mfield__head { min-height: 30px; }
.sf-measure-p34 .sf-mgroup__title { font-size: 14.5px; }
.sf-measure-p34 .sf-advanced { margin-top: 18px; }

/* ③ মিলিয়ে নিয়ে অর্ডার */
.sf-measure-p34 .sf-vpanel { margin: 0 0 14px; }
.sf-measure-p34 .sf-garment { margin: 0 0 14px; }
.sf-measure-p34 .sf-fit { margin: 2px 0 14px; }
.sf-measure-p34 .sf-fit__options { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: 14px; background: #eef3ef; }
.sf-measure-p34 .sf-fit__body { display: flex; align-items: center; justify-content: center; min-height: 42px; padding: 8px 6px; border: 0; border-radius: 10px; background: transparent; text-align: center; }
.sf-measure-p34 .sf-fit__body::before { content: none; }
.sf-measure-p34 .sf-fit__body strong { font-size: 14px; line-height: 1.25; overflow-wrap: anywhere; }
.sf-measure-p34 .sf-fit__option:hover .sf-fit__body { border-color: transparent; background: #fff; }
.sf-measure-p34 .sf-fit__option input:checked + .sf-fit__body { background: var(--sf-navy); box-shadow: 0 6px 14px rgba(46, 128, 54, .22); }
.sf-measure-p34 .sf-fit__option input:checked + .sf-fit__body strong { color: #fff; }
.sf-measure-p34 .sf-fit__option input:focus-visible + .sf-fit__body { outline: 3px solid rgba(44, 131, 55, .45); outline-offset: 1px; }
.sf-fit__hint { display: none; margin: 8px 2px 0; color: var(--sf-muted); font-size: 13px; font-weight: 600; line-height: 1.5; }
.sf-fit:has(input[value="slim"]:checked) .sf-fit__hint[data-fit-hint="slim"],
.sf-fit:has(input[value="regular"]:checked) .sf-fit__hint[data-fit-hint="regular"],
.sf-fit:has(input[value="loose"]:checked) .sf-fit__hint[data-fit-hint="loose"] { display: block; }
.sf-notes textarea { display: block; width: 100%; min-height: 84px; }
.sf-notes .sf-notes__counter { margin: 4px 0 0; }

/* পরিমাণ + দাম + সাইজের গ্রুপ + মোট — একটা বাক্স (.payment-summary-box-এর ভেতরের সব div-এর বাক্স-রূপ এখানে বাদ) */
.sf-measure-p34 .sf-buyrow.sf-order-total { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin: 14px 0 0; padding: 2px 14px; border: 1px solid #dfece1; border-radius: 16px; background: #f8fbf8; }
.sf-measure-p34 .sf-buyrow.sf-order-total div { padding: 0; border: 0; border-radius: 0; background: none; }
.sf-measure-p34 .sf-buyrow.sf-order-total .sf-buyrow__qty { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px; padding: 10px 0; border-bottom: 1px dashed #d3e2d6; }
.sf-measure-p34 .sf-buyrow__qty label { margin: 0; color: var(--sf-ink); font-weight: 800; }
.sf-measure-p34 .sf-buyrow.sf-order-total .qty-control { flex: 0 0 auto; width: 150px; border: 1px solid #d6dbd8; border-radius: 12px; background: #fff; overflow: hidden; }
.sf-measure-p34 .sf-buyrow.sf-order-total .sf-buyrow__money { display: grid; gap: 6px; padding: 10px 0 12px; }
.sf-measure-p34 .sf-buyrow__money > div { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; min-width: 0; }
.sf-measure-p34 .sf-buyrow span { color: #4b5563; font-size: 13.5px; font-weight: 700; text-transform: none; }
.sf-measure-p34 .sf-buyrow strong { margin: 0; color: var(--sf-ink); font-size: 15px; text-align: right; }
.sf-measure-p34 .sf-buyrow .is-size { order: 1; }
.sf-measure-p34 .sf-buyrow.sf-order-total .is-total { order: 2; margin-top: 2px; padding-top: 9px; border-top: 1px solid #dbe7de; }
.sf-measure-p34 .sf-buyrow .is-total span { color: var(--sf-ink); font-size: 14.5px; font-weight: 800; }
.sf-measure-p34 .sf-buyrow .is-total strong { color: var(--sf-navy); font-size: 20px; font-weight: 900; }

@media (max-width: 575.98px) {
    .measure-grid.sf-measure-p34 > .sf-mp-card { padding: 16px 14px; }
    .sf-mp-head { gap: 10px; margin-bottom: 14px; }
    .sf-measure-p34 .sf-mp-head h3 { font-size: 17.5px; }
}
/* ফোনেও মাপের ঘর পাশাপাশি দুটো (আগে ৪২০px-এর নিচে এক কলাম — পাতা খুব লম্বা হত); ৩৬০px-এর নিচে এক কলাম */
@media (min-width: 360px) and (max-width: 420px) {
    .sf-measure-p34 .sf-mgroup__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 10px; }
}
/* "কার্টে যোগ করুন"-এর আগের মাপের তালিকা (SweetAlert): ফোনেও ছোট তথ্যগুলো দুই কলামে (আগে এক কলাম — মাপের সারণি নিচে লুকিয়ে যেত),
   স্টাইলের লম্বা লেখা পুরো সারি জুড়ে */
.sf-sheet__meta li.is-wide { grid-column: 1 / -1; }
@media (min-width: 340px) and (max-width: 420px) {
    .sf-sheet-popup .sf-sheet__meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* ফোনে পাশাপাশি দুই ঘর: নাম দুই লাইনে ভাঙলেও দুই ঘরের input একই উচ্চতায় শুরু হয় */
@media (min-width: 360px) and (max-width: 575.98px) {
    .sf-measure-p34 .sf-mgroup__grid .sf-mfield__head { min-height: 42px; }
}
@media (max-width: 359.98px) {
    .sf-measure-p34 .sf-mfield__head { min-height: 34px; }
}

/* ==========================================================================================================================
   P37 (2026-10-28) — মালিকের চাওয়া: "Your order-এর অংশ বাছাইয়ে দাম দেখানো যাবে না; মাপের পাতায় সব মাপ দেওয়ার পরে ok হলে তবেই দাম"
   ========================================================================================================================== */
/* ধাপ ৪ "আপনার অর্ডার" — অংশের তালিকার নিচে "দাম কোথায়" লাইন (order-options.blade.php → data-price-later) */
.sf-order__note.sf-order__price-later { display: flex; align-items: flex-start; gap: 6px; margin-top: 10px; }
.sf-order__price-later svg { flex: 0 0 auto; margin-top: 2px; color: var(--sf-navy); }

/* মাপের পাতা — "মিলিয়ে নিয়ে অর্ডার"-এর দাম/মোট (measurement.blade.php → data-price-gate; app.js → updatePriceGate):
   সব মাপ ঠিক না হওয়া পর্যন্ত মোটের জায়গায় তালার লাইন */
.sf-measure-p34 .sf-buyrow .sf-price-lock { order: 2; display: flex; align-items: flex-start; gap: 8px; margin: 2px 0 0; padding: 9px 0 0; border-top: 1px solid #dbe7de; color: #4b5563; font-size: 13.5px; font-weight: 700; line-height: 1.45; }
.sf-measure-p34 .sf-buyrow .sf-price-lock svg { flex: 0 0 auto; margin-top: 1px; color: var(--sf-navy); }
.sf-measure-p34 .sf-buyrow .sf-price-lock span { color: inherit; font-size: inherit; font-weight: inherit; }
/* লুকানো থাকলে সত্যিই লুকানো — ".sf-buyrow__money > div { display:flex }" নিয়ম hidden-কে ছাপিয়ে যেত */
.sf-measure-p34 .sf-buyrow__money > [hidden],
.sf-measure-p34 .sf-buyrow .sf-price-lock[hidden] { display: none; }
/* দাম দেখা দিলে ছোট্ট আসা (কম নড়াচড়া চাইলে নয়) */
@media (prefers-reduced-motion: no-preference) {
    .sf-measure-p34 [data-price-gate][data-price-ready="1"] > [data-price-row] { animation: sfP37PriceIn .4s ease both; }
}
@keyframes sfP37PriceIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ==========================================================================================================================
   P38 (2026-10-29) — মালিকের চাওয়া: হোমের শিরোনাম "your school uniform", hero-র তিনটা লেবেল বোতামের মতো নয়, ফোনে সংখ্যার সারি নেই ও
   লেখা কম, "আপনার অর্ডার" থেকে কিছু অংশ বাদ, ইউনিফর্মের পাতা সুন্দর, মাপের পাতা সহজ (যাচাইয়ের লেখায় চাপলে সেই ঘরে)
   ========================================================================================================================== */

/* §P38-H2 হোমের hero — "যাচাই করা মাপ / বাসায় ডেলিভারি / ফিট আস্থা" আর বোতামের মতো নয়।
   আগে: সাদা গোল-কোনা বাক্স + ছায়া + বাক্সের ভেতরে রঙিন চিহ্নের টাইল — দেখতে ঠিক বোতাম (মালিকের ছবিতে চিহ্ন ২, ৩, ৪)।
   এখন: কোনো বাক্স/ছায়া নেই — সবুজ পটের ওপর সরাসরি সাদা লেখা, পাশে সরু দাগের গোল চিহ্ন (ছবির পাশের লেবেলের মতো);
   mouse নিলে হাতের চিহ্ন হয় না, চাপা/বাছা যায় না। লেবেল কার্ডের ওপরে বসে না — কার্ডের পাশের ফাঁকা সবুজে
   (কম্পিউটারে: ডেলিভারি আর ফিট আস্থা ডানে ওপরে, যাচাই করা মাপ ছেলেদের কার্ডের নিচে; ট্যাবে: যাচাই ও ফিট কার্ডের নিচে;
   ফোনে আগের জায়গাতেই — ডেলিভারি ডানে ওপরে, যাচাই বাঁয়ে নিচে; ফিট আস্থা ফোনে আগের মতোই নেই)। */
body.sf-body .sf-hero--home .sf-float-badge {
    gap: 8px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: .01em;
    text-shadow: 0 1px 3px rgba(6, 36, 10, .5);
    white-space: nowrap;
    cursor: default;
    user-select: none;
    pointer-events: none;
}
body.sf-body .sf-hero--home .sf-float-badge .sf-float-badge__ico {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, .72);
    background: rgba(255, 255, 255, .14);
    box-shadow: none;
}
body.sf-body .sf-hero--home .sf-float-badge .sf-float-badge__ico svg { width: 13px; height: 13px; }
body.sf-body .sf-hero--home .sf-float-badge--ai .sf-float-badge__ico { color: #c9f7d0; }
body.sf-body .sf-hero--home .sf-float-badge--delivery .sf-float-badge__ico { color: #bdf1f8; }
body.sf-body .sf-hero--home .sf-float-badge--fit .sf-float-badge__ico { color: #ffe39a; }
@media (min-width: 1025px) {
    body.sf-body .sf-hero--home .sf-float-badge--delivery { top: 4%; right: 0; bottom: auto; left: auto; }
    body.sf-body .sf-hero--home .sf-float-badge--fit { top: calc(4% + 36px); right: 0; bottom: auto; left: auto; }
    body.sf-body .sf-hero--home .sf-float-badge--ai { top: auto; bottom: 0; left: 1%; right: auto; }
}
@media (min-width: 768px) and (max-width: 1024px) {
    body.sf-body .sf-hero--home .sf-float-badge--ai { top: calc(100% + 6px); bottom: auto; left: calc(50% - 250px); right: auto; }
    body.sf-body .sf-hero--home .sf-float-badge--fit { top: calc(100% + 14px); bottom: auto; left: calc(50% + 40px); right: auto; }
}
@media (max-width: 767.98px) {
    body.sf-body .sf-hero--home .sf-float-badge { font-size: 13px; gap: 6px; }
    body.sf-body .sf-hero--home .sf-float-badge .sf-float-badge__ico { width: 22px; height: 22px; }
}

/* §P38-M1 ফোনে হোমের সংখ্যার সারি (পার্টনার স্কুল · জেলা · গড় ফিট আস্থা · ডেলিভারির সময়) নেই — মালিকের mobile.png।
   শুধু হোমের সারি (data-home-trust); "স্কুলের জন্য" ও About পাতার সংখ্যা অপরিবর্তিত। ট্যাব/কম্পিউটারে আগের মতো। */
@media (max-width: 767.98px) {
    body.sf-body section.sf-trust[data-home-trust] { display: none; }
}

/* §P38-U ইউনিফর্মের পাতা (frontend/preview.blade.php — .sf-uni) — মালিকের চাওয়া (uni.png): "পুরা পেইজের ডিজাইন আরো সুন্দর"।
   বাঁয়ে ছবির নরম আলোর মঞ্চ (হালকা বিন্দুর নকশা, পায়ের নিচে ছায়া, কোণে ছেলে/মেয়ের লেবেল); ডানে নাম, তথ্যের টাইল (রঙের গোল নমুনাসহ),
   স্কুলের ব্যাজ/লোগোর লাইন, "আপনার অর্ডার"-এর হালকা-সবুজ কার্ড (রসিদের মতো সারি — বোতামের মতো chip নয়), বড় "মাপ দিন" বোতাম। */
body.sf-body .preview-content-card.sf-uni { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(20px, 3.2vw, 40px); align-items: stretch; }
body.sf-body .sf-uni .sf-uni__media {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: grid;
    place-items: center;
    min-height: 440px;
    padding: 46px 22px 22px;
    border: 1px solid #dcebdf;
    border-radius: 26px;
    background:
        radial-gradient(58% 44% at 50% 40%, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0) 72%),
        radial-gradient(110% 80% at 50% 108%, #d3eed9 0%, rgba(211, 238, 217, 0) 62%),
        linear-gradient(160deg, #f7fcf8, #e7f5ea);
    box-shadow: inset 0 1px 0 #fff, 0 22px 50px rgba(46, 128, 54, .10);
}
body.sf-body .sf-uni .sf-uni__media::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: radial-gradient(rgba(46, 128, 54, .16) 1px, transparent 1.4px);
    background-size: 18px 18px;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .25) 55%, transparent 80%);
    mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .25) 55%, transparent 80%);
}
body.sf-body .sf-uni .sf-uni__stage { position: static; width: min(100%, 420px); min-height: 0; gap: 0; }
body.sf-body .sf-uni .sf-uni__stage img { width: 100%; max-height: 540px; filter: drop-shadow(0 22px 22px rgba(24, 60, 28, .18)); }
/* পায়ের নিচের ছায়া (ছবির ঠিক নিচে) */
body.sf-body .sf-uni .sf-uni__stage::after {
    content: "";
    display: block;
    width: 56%;
    height: 18px;
    margin: -14px auto 0;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(20, 60, 26, .22), rgba(20, 60, 26, 0));
}
/* "ছেলেদের ইউনিফর্ম প্রিভিউ" — কোণের লেবেলেই একই কথা, তাই লেখাটা শুধু screen reader-এর জন্য */
body.sf-body .sf-uni .sf-uni__stage figcaption { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
body.sf-body .sf-uni .sf-uni__gender {
    position: absolute;
    top: 16px;
    left: 16px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border-radius: 999px;
    background: rgba(46, 128, 54, .09);
    color: #2a6b31;
    font-size: 12.5px;
    font-weight: 800;
    line-height: 1.3;
}
body.sf-body .sf-uni .sf-preview-gallery { position: relative; margin-top: 8px; }

body.sf-body .sf-uni .sf-uni__info { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
body.sf-body .sf-uni .sf-uni__title { margin: 0 0 16px; color: var(--sf-ink); font-size: clamp(24px, 2.6vw, 32px); line-height: 1.15; letter-spacing: -.02em; }

/* তথ্যের টাইল — দুই কলাম; বিজোড় সংখ্যা হলে শেষটা পুরো সারি */
body.sf-body .sf-uni dl.sf-uni__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; }
body.sf-body .sf-uni .sf-uni__fact { display: grid; align-content: start; gap: 5px; min-width: 0; padding: 12px 14px; border: 1px solid #e2ece4; border-radius: 16px; background: #fff; box-shadow: 0 6px 18px rgba(30, 70, 35, .05); }
body.sf-body .sf-uni .sf-uni__fact:last-child:nth-child(odd) { grid-column: 1 / -1; }
body.sf-body .sf-uni .sf-uni__fact dt { margin: 0; color: var(--sf-muted); font-size: 12.5px; font-weight: 700; line-height: 1.3; }
body.sf-body .sf-uni .sf-uni__fact dd { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; margin: 0; color: var(--sf-ink); font-size: 15px; font-weight: 800; line-height: 1.3; overflow-wrap: anywhere; }
body.sf-body .sf-uni .sf-uni__value { min-width: 0; }
body.sf-body .sf-uni .sf-uni__swatch { flex: 0 0 auto; width: 16px; height: 16px; border-radius: 50%; background: var(--sw, #ccc); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .16), 0 0 0 3px #fff, 0 0 0 4px #dfe9e1; }
body.sf-body .sf-uni .sf-uni__fact-ico { flex: 0 0 auto; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; background: #eef7ef; color: var(--sf-navy); }
body.sf-body .sf-uni .sf-uni__fact.is-off { border-style: dashed; background: #f7f9f7; box-shadow: none; }
body.sf-body .sf-uni .sf-uni__fact.is-off dd { color: #8a9097; }
body.sf-body .sf-uni .sf-uni__fact.is-off .sf-uni__swatch { opacity: .45; }
body.sf-body .sf-uni .sf-uni__fact dd small { flex-basis: 100%; color: #a05a00; font-size: 11.5px; font-weight: 700; }

/* স্কুলের ব্যাজ/লোগো — হালকা সোনালি এক লাইন */
body.sf-body .sf-uni .sf-uni__extras { display: flex; align-items: flex-start; gap: 10px; margin: 12px 0 0; padding: 11px 14px; border: 1px solid #f1dfae; border-radius: 14px; background: linear-gradient(90deg, #fff8e5, #fffdf6); color: #6b4e0b; font-size: 13.5px; line-height: 1.5; }
body.sf-body .sf-uni .sf-uni__extras-ico { flex: 0 0 auto; margin-top: 1px; color: #b7790b; }
body.sf-body .sf-uni .sf-uni__extras strong { color: #5a4108; }

/* আপনার অর্ডার — রসিদের মতো সারি */
body.sf-body .sf-uni .sf-uni__order { margin: 14px 0 0; padding: 14px 16px 10px; border: 1px solid #d3e9d6; border-radius: 18px; background: linear-gradient(160deg, #f2faf3, #e9f6eb); }
body.sf-body .sf-uni .sf-uni__order-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 6px; }
body.sf-body .sf-uni .sf-uni__order-head h4 { margin: 0; color: var(--sf-ink); font-size: 15.5px; }
body.sf-body .sf-uni .sf-uni__change { display: inline-flex; align-items: center; gap: 5px; min-height: 32px; color: var(--sf-navy); font-size: 13.5px; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
body.sf-body .sf-uni dl.sf-uni__choices { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; }
body.sf-body .sf-uni .sf-uni__choice { display: flex; align-items: baseline; justify-content: space-between; gap: 6px 14px; min-width: 0; padding: 8px 0; border-top: 1px dashed #c9e2cd; }
body.sf-body .sf-uni .sf-uni__choice:first-child { border-top: 0; }
body.sf-body .sf-uni .sf-uni__choice dt { display: flex; align-items: center; gap: 7px; margin: 0; color: #4b5563; font-size: 13.5px; font-weight: 700; }
body.sf-body .sf-uni .sf-uni__choice dt::before { content: ""; flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: var(--sf-navy); }
body.sf-body .sf-uni .sf-uni__choice dd { margin: 0; color: #1f5a25; font-size: 14.5px; font-weight: 800; text-align: right; overflow-wrap: anywhere; }
body.sf-body .sf-uni .sf-uni__choice dd small { color: var(--sf-muted); font-size: 12px; font-weight: 700; }
body.sf-body .sf-uni .sf-uni__choice.is-main dd { font-size: 15.5px; }

/* "মাপ দিন" — বড় বোতাম, নিচে পরের ধাপ */
body.sf-body .sf-uni .sf-uni__cta { margin-top: 18px; }
body.sf-body .sf-uni .sf-uni__cta > .su-btn { min-height: 54px; border-radius: 16px; font-size: 16.5px; gap: 10px; }
body.sf-body .sf-uni .sf-uni__next { display: flex; align-items: flex-start; justify-content: center; gap: 6px; margin: 10px 0 0; color: var(--sf-muted); font-size: 13px; line-height: 1.5; text-align: center; }
body.sf-body .sf-uni .sf-uni__next svg { flex: 0 0 auto; margin-top: 2px; }

@media (max-width: 860px) {
    body.sf-body .preview-content-card.sf-uni { grid-template-columns: minmax(0, 1fr); }
    body.sf-body .sf-uni .sf-uni__media { min-height: 0; }
}
@media (max-width: 767.98px) {
    body.sf-body .sf-uni .sf-uni__media { padding: 40px 12px 10px; border-radius: 22px; }
    body.sf-body .sf-uni .sf-uni__stage img { max-height: 300px; }
    body.sf-body .sf-uni .sf-uni__gender { top: 12px; left: 12px; }
    body.sf-body .sf-uni .sf-uni__title { margin-bottom: 12px; font-size: 22px; }
    body.sf-body .sf-uni .sf-uni__fact { padding: 10px 12px; border-radius: 14px; }
    body.sf-body .sf-uni .sf-uni__fact dd { font-size: 14px; }
    body.sf-body .sf-uni .sf-uni__next { display: none; } /* ফোনে লেখা কম (P38-M2) */
}
@media (max-width: 359.98px) {
    body.sf-body .sf-uni dl.sf-uni__facts { grid-template-columns: minmax(0, 1fr); }
    body.sf-body .sf-uni .sf-uni__fact:last-child:nth-child(odd) { grid-column: auto; }
}

/* §P38-M মাপের পাতা — আরো সহজ (মালিকের m.png: "সবচেয়ে বেশি complain — বেশ complex"; 1.png: "click করলে সেই মাপের জায়গায়")।
   শুধু form.sf-measure-p38-এ (frontend/measurement.blade.php); input-এর name/id/data-* অপরিবর্তিত। */

/* ক) একক এখন ঘরের ভেতরে ডানে ("উচ্চতা *" + [ ১৩৮  সেমি ]) — নামের পাশের একক screen reader-এর জন্য থাকে, পাতায় দেখায় না।
      ঘরের ডানের ছোট ওঠানামার তীর (number spinner) নেই — এককের লেখা ঢাকা পড়ত, আর মাপে ওগুলো কাজেও লাগে না */
.sf-measure-p38 .sf-mfield__box { position: relative; display: block; min-width: 0; }
.sf-measure-p38 .sf-mfield__box > input { width: 100%; padding-right: 58px; }
.sf-measure-p38 .sf-mfield__box > input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.sf-measure-p38 .sf-mfield__box > input::-webkit-outer-spin-button,
.sf-measure-p38 .sf-mfield__box > input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.sf-measure-p38 .sf-mfield__unit {
    position: absolute;
    top: 50%;
    right: 12px;
    max-width: 48px;
    overflow: hidden;
    transform: translateY(-50%);
    color: #6b7280;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    pointer-events: none;
}
.sf-measure-p38 .sf-mfield__head label > small { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* পাশাপাশি দুই ঘরের input একই উচ্চতায় — "?" বোতাম (ফোনে ৩৪px) থাকুক বা না থাকুক; নাম দুই লাইনে ভাঙলে P34-এর নিয়ম (৪২px) */
.sf-measure-p38 .sf-mfield__head { min-height: 34px; }

/* খ) যাচাই-প্যানেলের বার্তা → বোতাম (চাপলে সেই ঘরে); "এখনো বাকি" — মাপের নামের ছোট বোতাম */
.sf-measure-p38 .sf-vissue__go {
    display: block;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    line-height: inherit;
    text-align: left;
    cursor: pointer;
}
.sf-measure-p38 .sf-vissue__go::after { content: "→"; display: inline-block; margin-left: 6px; font-weight: 900; transition: transform .2s ease; }
.sf-measure-p38 .sf-vissue__go:hover { text-decoration: underline; text-underline-offset: 3px; }
.sf-measure-p38 .sf-vissue__go:hover::after { transform: translateX(3px); }
.sf-measure-p38 .sf-vissue__go:focus-visible { outline: 3px solid rgba(44, 131, 55, .45); outline-offset: 3px; border-radius: 6px; }
.sf-measure-p38 .sf-vissue__lead { display: block; margin: 1px 0 7px; font-weight: 700; }
.sf-measure-p38 .sf-vchips { display: flex; flex-wrap: wrap; gap: 6px; }
.sf-measure-p38 .sf-vchip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 30px;
    padding: 4px 11px;
    border: 1px solid #c3d4ea;
    border-radius: 999px;
    background: #fff;
    color: #1f4f82;
    font: inherit;
    font-size: 12.5px;
    font-weight: 800;
    line-height: 1.25;
    cursor: pointer;
}
.sf-measure-p38 .sf-vchip:not(.is-plain)::after { content: "→"; font-weight: 900; opacity: .7; }
.sf-measure-p38 .sf-vchip:not(.is-plain):hover { border-color: #8fb1dc; background: #eef5fd; }
.sf-measure-p38 .sf-vchip:focus-visible { outline: 3px solid rgba(31, 79, 130, .35); outline-offset: 2px; }
.sf-measure-p38 .sf-vchip.is-plain { cursor: default; }
/* লাফিয়ে আসা ঘর কয়েক মুহূর্ত হলুদ আভায় ঝলকায় */
.sf-measure-p38 .sf-mfield.is-jumped { border-radius: 12px; animation: sfP38Jump 1.8s ease both; }
@keyframes sfP38Jump {
    0%, 40% { background-color: rgba(255, 243, 205, .85); box-shadow: 0 0 0 8px rgba(255, 243, 205, .85), 0 0 0 10px rgba(245, 158, 11, .55); }
    100% { background-color: rgba(255, 243, 205, 0); box-shadow: 0 0 0 8px rgba(255, 243, 205, 0), 0 0 0 10px rgba(245, 158, 11, 0); }
}
@media (prefers-reduced-motion: reduce) {
    .sf-measure-p38 .sf-mfield.is-jumped { animation: none; box-shadow: 0 0 0 8px rgba(255, 243, 205, .85), 0 0 0 10px rgba(245, 158, 11, .55); }
}

/* গ) ক্যামেরার অংশ ছোট —
      কম্পিউটারে QR কোড আর নিজে থেকে নয় (data-qr-on-demand — app.js): শুধু একটা বোতাম "QR কোড দেখান — ফোন দিয়ে স্ক্যান করুন";
      চাপলে QR কোড বাঁয়ে ছোট করে (১৪৮px), পাশে কী করতে হবে (আগে ২১৬px-এর খাড়া বাক্স, সব লেখা নিচে নিচে)।
      ফোনে আগের মতোই বড় "ক্যামেরা চালু করে মাপ নিন" বোতাম + "অন্য ফোনে মাপুন (QR কোড দেখান)"।
      (কম্পিউটার চেনা app.js-এর একই নিয়মে: ৯০০px বা বেশি, আর আঙুলে-চলা পর্দা নয়) */
.sf-scan__qr-label--desk { display: none; }
@media (min-width: 900px) and (hover: hover), (min-width: 900px) and (pointer: fine) {
    .sf-measure-p38 .sf-scan:not(.is-qr-forced) .sf-scan__qr { display: none; }
    .sf-measure-p38 .sf-scan:not(.is-qr-forced) .sf-scan__mobile { display: grid; }
    .sf-measure-p38 .sf-scan__mobile > .sf-scan__open { display: none; }
    .sf-measure-p38 .sf-scan__mobile > [data-scan-show-qr] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        min-height: 46px;
        padding: 10px 20px;
        border: 1.5px solid var(--sf-navy);
        border-radius: 14px;
        background: #fff;
        color: var(--sf-navy);
        font-weight: 800;
        text-decoration: none;
    }
    .sf-measure-p38 .sf-scan__mobile > [data-scan-show-qr]:hover { background: #eef7ef; }
    .sf-measure-p38 .sf-scan__qr-label--phone { display: none; }
    .sf-measure-p38 .sf-scan__qr-label--desk { display: inline; }
    .sf-measure-p38 .sf-scan__qr { grid-template-columns: 148px minmax(0, 1fr); column-gap: 18px; row-gap: 6px; align-items: center; justify-items: start; text-align: left; }
    .sf-measure-p38 .sf-scan__qr > .sf-scan__qr-frame { grid-column: 1; grid-row: 1 / span 6; width: 148px; height: 148px; padding: 6px; }
    .sf-measure-p38 .sf-scan__qr > :not(.sf-scan__qr-frame) { grid-column: 2; max-width: none; margin-left: 0; margin-right: 0; text-align: left; }
    .sf-measure-p38 .sf-scan__qr > .su-btn { justify-self: start; }
}

/* ঘ) ফিতার নিয়ম ঘরগুলোর পরে; একক এক সারিতে; "আগে উচ্চতা লিখুন" নীল বাক্স নয় — ছোট এক লাইন; ওজনের নিচের স্থির ব্যাখ্যা নেই */
.sf-measure-p38 .sf-tape-tips { margin-top: 18px; }
.sf-measure-p38 .sf-tape__unit select { max-width: 200px; }
.sf-measure-p38 .sf-mp-note { margin: 12px 0 0; padding: 0; border: 0; background: none; color: #1f4f82; font-size: 13px; font-weight: 700; }
.sf-measure-p38 [data-weight-wrap] #m-weight-hint { display: none; }

/* ঙ) ওপরের "এই অর্ডারের মাপ" — বোতামের মতো chip নয়, সাধারণ লেখা: "পুরো সেট · হাফ হাতা · ফুল প্যান্ট" */
.sf-measure-p38 .sf-measure-for__chips { gap: 0; }
.sf-measure-p38 .sf-measure-for__chip { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: var(--sf-ink); font-weight: 700; }
.sf-measure-p38 .sf-measure-for__chip.is-main { background: none; color: var(--sf-navy); font-weight: 800; }
.sf-measure-p38 .sf-measure-for__chip + .sf-measure-for__chip::before { content: "·"; margin: 0 8px; color: #9aa3ad; font-weight: 800; }

/* চ) ফোনে কম লেখা — ক্যামেরার নিচের নোট আর সংরক্ষিত মাপের ব্যাখ্যা লুকানো (মূল কথা ওপরের লাইনেই আছে) */
@media (max-width: 767.98px) {
    .sf-measure-p38 .sf-scan__note,
    .sf-measure-p38 .sf-saved-banner__help { display: none; }
}

/* §P38-M2 ফোনে আরো কম লেখা (মালিকের চাওয়া: "Mobile view-এর জন্য আরো কিছু জায়গাতে লেখা কমিয়ে দিতে পারো") — শুধু ৭৬৭px পর্যন্ত:
   • অর্ডারের ধাপগুলোর (স্কুল → … → মাপ → কার্ট …) ওপরের সবুজ অংশে শিরোনামের নিচের ব্যাখ্যা-লাইন নেই (শিরোনাম + বাছাইয়ের ধারা থাকে);
     চেনা হয় hero-র ঠিক পরের ধাপের সারি (.sf-steps) দেখে — অন্য পাতার hero অপরিবর্তিত
   • "আপনার অর্ডার"-এর ওপরের ছোট ব্যাখ্যা আর নিচের "পরে বদলাতে পারবেন" লাইন নেই
   • হোম: অংশের শিরোনামের নিচের ছোট লেখা, "কীভাবে কাজ করে"-র প্রতিটা ধাপের ব্যাখ্যা, "কেন SmartSchool"-এর টিক-তালিকা আর নিচের
     "আপনার স্কুলকে যুক্ত করুন"-এর অনুচ্ছেদ নেই (শিরোনাম, চিহ্ন, বোতাম থাকে) */
@media (max-width: 767.98px) {
    body.sf-body .sf-page-hero:has(+ .sf-steps) .sf-page-hero__lead { display: none; }
    body.sf-body .sf-order-step .sf-order__lead,
    body.sf-body .sf-order-step .sf-order-step__note { display: none; }
    body.sf-body .sf-order-step .sf-order__head { margin-bottom: 12px; }
    body.sf-body #sf-how .sf-section__head > p,
    body.sf-body #sf-how .sf-how__body > p,
    body.sf-body #sf-schools .sf-section__head > p,
    body.sf-body #sf-features .sf-feature > ul,
    body.sf-body [data-home-cta] p,
    body.sf-body section[aria-labelledby="sf-logos-home-title"] .sf-logos__head > p { display: none; }
}