/* The store page built from sections (App\Libraries\Storefront) — head, section bar,
   sections, slim footer. Loaded by partials/_header_tmp only while the admin switch is on.
   Clean system: grey stage, white cards, soft shadows, brand colour from --mds-color-main. */

/* Tokens on :root — this file loads only on store pages, and the store's rows/buttons also live outside
   .sf-sections (the /consultation and /links pages): scoped tokens left those cards without a background. */
:root {
    --sf-ink: #1d1d1f; --sf-body: #424245; --sf-muted: #6e6e73; --sf-line: #d2d2d7;
    --sf-card: #fff; --sf-main: var(--mds-color-main, #F1641E);
    --sf-shadow: 0 4px 20px rgba(0,0,0,.04), 0 1px 3px rgba(0,0,0,.05);
    --sf-shadow-up: 0 18px 40px rgba(0,0,0,.09), 0 2px 6px rgba(0,0,0,.05);
}

/* Moving between the store's pages (store → product → consultation): the browser cross-fades the page and
   keeps the seller panel still, so it feels like only the content changed — with real pages (SEO, links,
   speed) and no JavaScript. Browsers without it simply load the page as before. */
@view-transition { navigation: auto; }
@media (min-width: 992px) { .sf-side-row .sf-head { view-transition-name: sf-seller; } }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

/* The store's top bar under the site bar: empty when the page's head / side panel carries the seller — no strip */
.header-seller-shop .main-menu:not(:has(.seller-public-header)) { display: none; }

/* ── Buttons: ONE size, TWO roles (CLAUDE.md «Store buttons & rows»). Change a number here → every
   store button follows. MAIN = store colour, only for what brings money (buy, book). SECONDARY = white
   with a line, for everything else (open a form, view all, contact, follow). ── */
:root { --sf-btn-h: 48px; --sf-btn-fs: 16px; --sf-btn-r: 12px; --sf-btn-pad: 20px; }
.sf-cta, .sf-row-cta, .sf-all, .sf-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: var(--sf-btn-h); padding: 0 var(--sf-btn-pad); border-radius: var(--sf-btn-r);
    font-size: var(--sf-btn-fs); font-weight: 700; line-height: 1.2; text-align: center; white-space: nowrap;
    text-decoration: none !important; cursor: pointer; transition: filter .15s, border-color .15s;
}
.sf-row-cta, .sf-all, .sf-btn {
    background: #fff; border: 1px solid #d2d2d7; color: #1d1d1f !important;
}
.sf-row:hover .sf-row-cta, .sf-all:hover, .sf-btn:hover { border-color: #1d1d1f; }
.sf-cta, .sf-row-cta.sf-row-cta--main {
    background: var(--mds-color-main, #F1641E); border-color: transparent; color: var(--sf-on-main, #fff) !important;
}
.sf-cta:hover, .sf-row:hover .sf-row-cta.sf-row-cta--main { filter: brightness(1.06); border-color: transparent; }

/* ── Head: the one identity block ── */
.sf-head {
    position: relative; margin: 18px auto 0; padding: 28px 20px 24px;
    background: var(--sf-card); border-radius: 22px; box-shadow: var(--sf-shadow);
    text-align: center; overflow: hidden;
}
.sf-cover { margin: -28px -20px 0; height: 150px; background: #eee; }
.sf-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* phones: the banner at its own shape too (never cut), a tall picture capped */
@media (max-width: 991.98px) { .sf-cover { height: auto; max-height: 180px; } .sf-cover img { height: auto; max-height: 180px; } }
.sf-avatar { display: inline-block; line-height: 0; }
.sf-avatar img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; border: 4px solid #fff; box-shadow: 0 4px 14px rgba(0,0,0,.12); }
/* the photo sits UNDER the banner, never on it: sellers write their name / offer in the banner's middle,
   and a photo laid over it covered exactly that text */
.sf-head--cover .sf-avatar { margin-top: 16px; position: relative; }
.sf-head--photo .sf-avatar img { width: 168px; height: 168px; border-radius: 26px; }
.sf-id { margin-top: 10px; }
.sf-name { margin: 0; font-size: 26px; font-weight: 800; line-height: 1.35; letter-spacing: -.01em; color: var(--sf-ink); }
.sf-name a { color: inherit; text-decoration: none; }
.sf-verified { display: inline-flex; vertical-align: middle; color: var(--sf-main); font-size: 18px; margin-inline-start: 4px; }
.sf-bio { margin: 12px auto 0; max-width: 560px; }
.sf-bio p { margin: 0; color: var(--sf-body); font-size: 16px; line-height: 1.8; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sf-bio.is-open p { -webkit-line-clamp: unset; display: block; }
.sf-more { margin-top: 2px; padding: 6px 4px; border: 0; background: none; color: var(--sf-ink); font-weight: 700; font-size: 15px; text-decoration: underline; cursor: pointer; }
.sf-social { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 16px 0 0; padding: 0; list-style: none; }
.sf-social a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: #f5f5f7; color: var(--sf-ink); font-size: 18px; text-decoration: none; transition: background-color .2s, color .2s; }
.sf-social a:hover { background: var(--sf-main); color: var(--sf-on-main, #fff); }
.sf-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 18px; }
.sf-actions form { margin: 0; }

/* No picture → the name's first letter in the store's colour (storefront/_avatar). */
.sf-avatar .nm-av-letter { border: 4px solid #fff; box-shadow: 0 4px 14px rgba(0,0,0,.12); box-sizing: content-box; width: 96px !important; height: 96px !important; font-size: 42px !important; }
.sf-head--photo .sf-avatar .nm-av-letter { width: 168px !important; height: 168px !important; border-radius: 26px; font-size: 72px !important; }
@media (max-width: 575px) { .sf-avatar .nm-av-letter { width: 84px !important; height: 84px !important; font-size: 36px !important; } }

/* ── The seller pages' frame: on a computer the seller is a side column that never changes from page
   to page (store home, sub-pages, product, consultation — Stan's pattern); only the main column does.
   Markup: #wrapper.nm-store-page > .container > .row.sf-side-row (the head) + .row (the page). ── */
@media (min-width: 992px) {
    /* full width: a white panel from the top of the page to the bottom (a third of the screen), the
       page beside it on the grey stage, its content capped so lines stay readable */
    #wrapper.nm-store-page { padding-top: 0; }
    .nm-store-page > .container { display: grid; grid-template-columns: minmax(320px, 33%) minmax(0, 1fr); column-gap: 0; align-items: start; max-width: none; width: 100%; padding: 0; }
    .nm-store-page > .container > * { grid-column: 2; min-width: 0; width: 100%; max-width: 880px; margin: 0 auto; padding-left: 40px; padding-right: 40px; }
    .nm-store-page > .container > * > [class*="col-"] { padding-left: 0; padding-right: 0; }
    /* spans the rows of the main column, so it runs the page's full height */
    .nm-store-page > .container > .sf-side-row { grid-column: 1; grid-row: 1 / span 6; align-self: stretch; max-width: none; margin: 0; padding: 0; background: var(--sf-card); box-shadow: 1px 0 0 rgba(0,0,0,.05), -1px 0 0 rgba(0,0,0,.05); }
    .sf-side-row > .col-12, .sf-side-row .profile-page-top { height: 100%; padding: 0; margin: 0; }
    /* the seller centred in the panel and held STILL from the top of the page to the very end — fixed to the
       window (sticky moved it up at the bottom: its box ends where the page column ends, before the footer).
       The site bar scrolls over its top edge; the column underneath keeps the panel's place in the layout. */
    .sf-side-row .sf-head { position: fixed; top: 0; bottom: 0; inset-inline-start: 0; z-index: 1; width: var(--sf-panel, max(320px, 33%)); overflow-y: auto; margin: 0; padding: 40px 32px;
        display: flex; flex-direction: column; justify-content: center; align-items: center; border-radius: 0;
        /* the panel paints ITS OWN white: the column under it ends with the page, so a short store (empty, few
           products) showed the grey stage through the panel, as a band that moved on scroll */
        background: var(--sf-card); box-shadow: 1px 0 0 rgba(0,0,0,.05), -1px 0 0 rgba(0,0,0,.05); }
    .sf-side-row .sf-head { box-sizing: border-box; overflow-x: hidden; }
    .sf-side-row .sf-head > * { width: 100%; max-width: 340px; min-width: 0; box-sizing: border-box; }
    /* a long name or an unbroken bio word wraps inside the panel — never runs past its edge */
    .sf-side-row .sf-name, .sf-side-row .sf-bio p { overflow-wrap: anywhere; }
    .sf-side-row .sf-avatar { width: auto; }
    .sf-side-row .sf-cover { margin: 0; border-radius: 16px; overflow: hidden; }
    .nm-store-page > .container > .row:not(.sf-side-row) { padding-top: 24px; padding-bottom: 48px; }
    /* the panel runs down to the footer: the theme's 45px gap above #footer left a grey band under it */
    body:has(.sf-side-row) #footer { margin-top: 0; }
    body:has(.sf-side-row) #header { position: relative; z-index: 30; }
    /* …and THROUGH it: the footer belongs to the page column — the panel's white continues to the very bottom
       beside it (one width token, the same as the panel's column) */
    body:has(.sf-side-row) { --sf-panel: max(320px, 33%); }
    body:has(.sf-side-row) .sf-foot {
        padding-left: 40px; padding-right: 40px; padding-inline-start: calc(var(--sf-panel) + 40px);
        background: linear-gradient(to right, var(--sf-card) var(--sf-panel), rgba(0,0,0,.05) var(--sf-panel), rgba(0,0,0,.05) calc(var(--sf-panel) + 1px), var(--nm-stage, #f5f5f7) calc(var(--sf-panel) + 1px));
    }
    [dir="rtl"] body:has(.sf-side-row) .sf-foot, body:has(.sf-side-row)[dir="rtl"] .sf-foot {
        background: linear-gradient(to left, var(--sf-card) var(--sf-panel), rgba(0,0,0,.05) var(--sf-panel), rgba(0,0,0,.05) calc(var(--sf-panel) + 1px), var(--nm-stage, #f5f5f7) calc(var(--sf-panel) + 1px));
    }
    /* the banner is not in the panel on a computer: it is too narrow for a wide strip (1920×480 → ~70px,
       its text unreadable) — the store home shows it at the page's width (.sf-banner, storefront/_banner) */
    .sf-side-row .sf-cover { display: none; }
    .sf-side-row .sf-head--cover .sf-avatar { margin-top: 0; }
    /* «large photo» in the side panel: large, but leaving the name and buttons in the first view */
    .sf-side-row .sf-head--photo .sf-avatar img, .sf-side-row .sf-head--photo .sf-avatar .nm-av-letter { width: 150px !important; height: 150px !important; }
    .sf-side-row .sf-name { font-size: 22px; }
    /* the panel has the room: the bio shows whole (up to 6 lines) — «المزيد» only for a really long one */
    .sf-side-row .sf-bio p { -webkit-line-clamp: 6; }
    .sf-side-row .sf-actions .sf-btn, .sf-side-row .sf-actions form { flex: 1 1 100%; }
    .sf-side-row .sf-actions form .sf-btn { width: 100%; }
}
/* a sub-page on a phone: the head is one row (photo · name) that leads home */
@media (max-width: 991.98px) {
    .sf-head--sub { display: flex; align-items: center; gap: 12px; padding: 12px 16px; text-align: start; border-radius: 18px; }
    .sf-head--sub .sf-cover, .sf-head--sub .sf-bio, .sf-head--sub .sf-social, .sf-head--sub .sf-actions { display: none; }
    .sf-head--sub .sf-avatar { margin: 0; }
    .sf-head--sub .sf-avatar img, .sf-head--sub .sf-avatar .nm-av-letter { width: 52px !important; height: 52px !important; border-radius: 50%; border-width: 2px; font-size: 22px !important; }
    .sf-head--sub .sf-id { margin: 0; min-width: 0; }
    .sf-head--sub .sf-name { font-size: 19px; }
}

/* ── The store's banner at the page's width (computers; phones show it in the head) — its own shape,
      never cut: a wide strip keeps both ends; only a tall picture is capped ── */
.sf-banner { display: none; }
@media (min-width: 992px) {
    .sf-banner { display: block; margin: 0 0 6px; border-radius: 18px; overflow: hidden; background: var(--sf-card); box-shadow: var(--sf-shadow); }
    .sf-banner img { display: block; width: 100%; height: auto; max-height: 320px; object-fit: cover; }
}

/* ── Section bar: one row, scrolls sideways if needed, stays at hand ── */
.sf-nav { position: sticky; top: 0; z-index: 20; margin: 14px auto 0; }
.sf-nav-row { display: flex; gap: 8px; overflow-x: auto; padding: 6px 2px; scrollbar-width: none; -webkit-overflow-scrolling: touch; justify-content: safe center; }
.sf-nav-row::-webkit-scrollbar { display: none; }
.sf-nav a { flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; background: #fff; box-shadow: var(--sf-shadow); color: var(--sf-ink); font-size: 15px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.sf-nav a.is-on, .sf-nav a:hover { background: var(--sf-ink); color: #fff; text-decoration: none; }

/* ── Sections ── */
.sf-sections { padding: 6px 0 10px; }
/* ONE space between every two sections and under every section title — change it here only */
:root { --sf-sec-gap: 48px; --sf-sec-head-gap: 16px; }
.sf-sec { margin-top: var(--sf-sec-gap); scroll-margin-top: 72px; }
.sf-sections > .sf-sec:first-child, .sf-nav + .sf-sections > .sf-sec:first-child { margin-top: 24px; }
.sf-sec-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; margin: 0 0 var(--sf-sec-head-gap); }
.sf-sec-head h2 { margin: 0; font-size: 22px; font-weight: 800; color: var(--sf-ink); letter-spacing: -.01em; }
.sf-all-wrap { display: flex; justify-content: center; margin-top: 18px; }
.sf-all { min-width: 200px; }
.sf-empty { margin: 40px 0; text-align: center; color: var(--sf-muted); font-size: 16px; }

/* On the seller's own store every card is theirs — no name under each one. */
.nm-store-page .product-card .product-seller { display: none; }

/* the clear button on product cards (store sections, /products) */
.sf-cta { display: flex; width: 100%; margin-top: 12px; }
/* «free» on the store's cards in the store's colour (the theme painted it green) */
.nm-store-page .price-free { color: var(--mds-color-main, #F1641E) !important; }
.nm-feat .sf-cta { display: inline-flex; width: auto; align-self: flex-start; min-width: 200px; }

/* ── Rows: ONE row for consultations and forms (icon · title + description + facts · button) ── */
.sf-rows { display: flex; flex-direction: column; gap: 12px; }
.sf-row { display: flex; align-items: center; gap: 14px; padding: 16px 18px; background: var(--sf-card); border-radius: 16px; box-shadow: var(--sf-shadow); color: inherit; text-decoration: none; transition: transform .25s cubic-bezier(.4,0,.2,1), box-shadow .25s cubic-bezier(.4,0,.2,1); }
.sf-row:hover { transform: translateY(-3px); box-shadow: var(--sf-shadow-up); text-decoration: none; color: inherit; }
.sf-row-ico { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 12px; background: #f5f5f7; display: inline-flex; align-items: center; justify-content: center; font-size: 22px; }
.sf-row-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.sf-row-title { font-weight: 800; font-size: 17px; color: var(--sf-ink); }
.sf-row-facts { display: flex; flex-wrap: wrap; gap: 6px 16px; color: var(--sf-muted, #6e6e73); font-size: 15px; }
.sf-row-facts b { color: var(--sf-ink); }
.sf-row-cta { flex: 0 0 auto; }

/* links */
/* one column on every screen, like the consultation and form rows: no link left alone on a half row (5 = 2+2+1),
   and a long Arabic name reads whole */
.sf-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.sf-link a { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 10px 16px; background: var(--sf-card); border-radius: 16px; box-shadow: var(--sf-shadow); color: var(--sf-ink); font-size: 16px; font-weight: 700; text-decoration: none; transition: transform .25s cubic-bezier(.4,0,.2,1), box-shadow .25s cubic-bezier(.4,0,.2,1); }
.sf-link a:hover { transform: translateY(-3px); box-shadow: var(--sf-shadow-up); text-decoration: none; color: var(--sf-ink); }
.sf-link img { flex: 0 0 auto; width: 52px; height: 52px; border-radius: 12px; object-fit: cover; }
.sf-link-ico { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 12px; background: #f5f5f7; display: inline-flex; align-items: center; justify-content: center; color: var(--sf-main); font-size: 18px; }
.sf-link-label { min-width: 0; overflow-wrap: anywhere; }
.sf-link--aff a { background-image: linear-gradient(0deg, rgba(25,187,155,.06), rgba(25,187,155,.06)); }

/* ── Slim footer ── */
.sf-foot { background: var(--nm-stage, #f5f5f7); padding: 34px 0 96px; text-align: center; }
.sf-foot-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; margin: 0 0 10px; padding: 0; list-style: none; }
.sf-foot-links a, .sf-foot-links button, .sf-foot-links span { display: inline-flex; align-items: center; min-height: 44px; border: 0; background: none; padding: 0; color: var(--sf-body); font-size: 15px; text-decoration: none; cursor: pointer; }
.sf-foot-links a:hover, .sf-foot-links button:hover { color: var(--sf-ink); text-decoration: underline; }
.sf-foot-links span { cursor: default; }
.sf-foot-copy { margin: 0; color: var(--sf-muted); font-size: 14px; }

/* ── Phones ── */
@media (max-width: 575px) {
    .sf-head { margin-top: 12px; padding: 22px 16px 20px; border-radius: 18px; }
    .sf-cover { margin: -22px -16px 0; }
    .sf-avatar img { width: 84px; height: 84px; }
    .sf-head--photo .sf-avatar img { width: 140px; height: 140px; }
    .sf-name { font-size: 23px; }
    .sf-nav-row { justify-content: flex-start; }
    :root { --sf-sec-gap: 36px; }
    .sf-sec-head h2 { font-size: 20px; }
    .sf-row { flex-wrap: wrap; }
    .sf-row-cta { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
    .sf-row, .sf-link a { transition: none; }
    .sf-row:hover, .sf-link a:hover { transform: none; }
}

/* The seller's «آراء العملاء» strip (storefront/_testimonials): swipe on a phone, arrows on a computer. */
.sf-ts { position: relative; }
.sf-ts-title { font-size: 19px; font-weight: 800; color: #1d1d1f; margin: 0 0 12px; }
.sf-ts-rail { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 4px 2px 8px; }
.sf-ts-rail::-webkit-scrollbar { display: none; }
.sf-ts-card { flex: 0 0 min(86%, 320px); scroll-snap-align: start; margin: 0; background: var(--nm-stage, #f5f5f7); border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.sf-ts-video { position: relative; border: 0; padding: 0; background: #000; border-radius: 12px; overflow: hidden; cursor: pointer; aspect-ratio: 16 / 9; width: 100%; }
.sf-ts-video img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .9; }
.sf-ts-play { position: absolute; inset: 0; margin: auto; width: 58px; height: 58px; border-radius: 50%; background: var(--mds-color-main, #F1641E); color: var(--sf-on-main, #fff); display: flex; align-items: center; justify-content: center; font-size: 22px; box-shadow: 0 6px 18px rgba(0,0,0,.25); }
.sf-ts-frame { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 12px; }
video.sf-ts-frame { background: #000; object-fit: contain; } /* phone clips are upright: shown whole */
.sf-ts-stars { color: #b45309; font-size: 16px; letter-spacing: 1px; }
.sf-ts-quote { margin: 0; padding: 0; border: 0; font-size: 16px; line-height: 1.8; color: #424245; }
.sf-ts-who { display: flex; align-items: center; gap: 10px; margin-top: auto; }
.sf-ts-who img, .sf-ts-who .nm-av-letter { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; font-size: 17px !important; }
.sf-ts-who b { display: block; color: #1d1d1f; font-size: 15px; }
.sf-ts-who small { display: block; color: #6e6e73; font-size: 13px; }
/* On the store home the stage is grey: white cards (room for the shadow), arrows on the heading row */
.sf-sec .sf-ts-rail { padding: 6px 6px 18px; margin: -6px -6px -18px; } /* room for the shadow, no extra gap */
.sf-sec .sf-ts-card { background: var(--sf-card); box-shadow: var(--sf-shadow); }
/* phone: a row UNDER the strip — arrow · dots · arrow (thumb-sized; many visitors never guess they can swipe) */
.sf-ts-arrows { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; direction: ltr; }
.sf-ts-arrow { width: 44px; height: 44px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; padding: 0; border-radius: 50%;
    border: 1px solid #d2d2d7; background: #fff; color: #1d1d1f; cursor: pointer; transition: opacity .2s; }
.sf-ts-arrow:hover:not(:disabled) { border-color: var(--mds-color-main, #F1641E); color: var(--mds-color-main, #F1641E); }
.sf-ts-arrow:disabled { opacity: .35; cursor: default; }
.sf-ts-dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; }
[dir="rtl"] .sf-ts-dots { direction: rtl; } /* the first testimonial's dot on the right, where the strip starts */
.sf-ts-dots i { width: 8px; height: 8px; border-radius: 50%; background: #c7c7cc; transition: background .2s, transform .2s; }
.sf-ts-dots i.is-on { background: var(--mds-color-main, #F1641E); transform: scale(1.25); }
@media (min-width: 768px) {
    /* computer: the two arrows on the title row, opposite the title (left in Arabic, right in English) — never over it */
    .sf-ts-arrows { gap: 8px; margin: 0; position: absolute; top: 0; right: 0; }
    [dir="rtl"] .sf-ts-arrows { right: auto; left: 0; }
    .sf-sec .sf-ts-arrows { top: -54px; }
    .sf-ts-arrow { width: 40px; height: 40px; }
    .sf-ts-dots { display: none; }
}
@media (prefers-reduced-motion: reduce) { .sf-ts-rail { scroll-behavior: auto; } }

/* ── «Done» card — a step finished inside the store frame (free product sent by email, …): one centred card,
      the store colour on its icon, a big button back to the store ── */
.sf-done { max-width: 560px; margin: 8px auto 32px; padding: 34px 28px; background: var(--sf-card); border-radius: 22px; box-shadow: var(--sf-shadow); text-align: center; }
.sf-done-ic { width: 76px; height: 76px; margin: 0 auto 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--sf-main); background: color-mix(in srgb, var(--sf-main) 12%, #fff); }
.sf-done h1 { font-size: 26px; font-weight: 800; line-height: 1.35; letter-spacing: -.01em; color: var(--sf-ink); margin: 0 0 12px; }
.sf-done-text { font-size: 17px; line-height: 1.9; color: var(--sf-body); margin: 0 0 18px; overflow-wrap: anywhere; }
.sf-done-email { display: inline-block; padding: 2px 12px; border-radius: 999px; background: #f5f5f7; color: var(--sf-ink); font-weight: 700; }
.sf-done-hint { font-size: 16px; line-height: 1.8; color: var(--sf-muted); background: #f5f5f7; border-radius: 14px; padding: 12px 16px; margin: 0 0 22px; }
.sf-done-btn { display: flex; align-items: center; justify-content: center; min-height: var(--sf-btn-h); border-radius: var(--sf-btn-r); font-size: var(--sf-btn-fs); font-weight: 700; background: var(--sf-main) !important; border-color: var(--sf-main) !important; color: var(--sf-on-main, #fff) !important; }
.sf-done-more { margin: 18px 0 0; font-size: 16px; }
.sf-done-more a { color: var(--sf-muted); text-decoration: underline; }
@media (max-width: 575px) { .sf-done { margin: 4px auto 24px; padding: 26px 18px; } .sf-done h1 { font-size: 23px; } }