/*
 * On-site checkout (lib/Checkout.php).
 *
 * Self-contained on purpose: this page is served on the reseller's own domain
 * with none of WHMCS's theme loaded, so it cannot lean on the client area's
 * stylesheet or on Bootstrap. --sfr-primary / --sfr-accent are written into the
 * document head from the reseller's brand kit. --sfr-btn / --sfr-bg carry the
 * reseller's checkout-design overrides (button colour and page background),
 * each falling back to the brand primary / a neutral grey when unset.
 */

*, *::before, *::after { box-sizing: border-box; }

.sfrc-body {
    margin: 0;
    padding: 0;
    background: var(--sfr-bg, #f5f6f8);
    color: #111827;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--sfr-accent, #1e40af); }

/* ------------------------------- shell -------------------------------- */

.sfrc-top {
    background: var(--sfr-primary, #2563eb);
    padding: 16px 20px;
}
.sfrc-top-inner {
    max-width: 1060px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 12px;
}
.sfrc-top img { height: 34px; width: auto; display: block; }
/* The studio's logo is inline SVG rather than an image URL, so it needs a box
   to size against — an unconstrained <svg> renders at whatever the viewBox
   suggests, which is usually far too large for a header strip. */
.sfrc-top-mark { display: flex; align-items: center; height: 34px; flex: none; }
.sfrc-top-mark svg { width: 34px; height: 34px; display: block; }
/* The studio's mark can also be an uploaded image of unknown proportions —
   pin the height and let the width follow so a wide wordmark is not squashed. */
.sfrc-top-mark img { height: 34px; width: auto; max-width: 180px; object-fit: contain; display: block; }

/* Initials, used only when no mark exists anywhere. Reversed out of the header
   so it reads as a deliberate badge rather than a missing image. */
.sfrc-top-mono {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex: none;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}
.sfrc-top-name {
    color: #fff;
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}
/*
 * The two-part wordmark carried over from the reseller's site.
 *
 * The studio draws the name as <b>first</b><i>second</i> with no space between
 * them — the weight contrast is what separates the words, not whitespace. These
 * rules reproduce that here so the header reads identically to the page the
 * customer arrived from, and reset <i> because the second half is a word, not
 * an aside.
 */
.sfrc-top-name b { font-weight: 700; }
.sfrc-top-name i { font-style: normal; font-weight: 300; opacity: 0.9; }

.sfrc-wrap {
    max-width: 1060px;
    margin: 0 auto;
    padding: 28px 20px 48px;
}

.sfrc-head { margin-bottom: 22px; }
.sfrc-head h1 {
    margin: 0 0 4px;
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}
.sfrc-head p { margin: 0; color: #6b7280; }

.sfrc-foot {
    margin-top: 32px;
    padding-top: 16px;
    border-top: 1px solid #e5e7eb;
    color: #6b7280;
    font-size: 0.85rem;
    text-align: center;
}
.sfrc-foot a { color: #6b7280; }

/* ------------------------------- layout ------------------------------- */

.sfrc-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr);
    gap: 22px;
    align-items: start;
}
@media (max-width: 860px) {
    .sfrc-grid { grid-template-columns: 1fr; }
    .sfrc-summary { order: -1; }
}

.sfrc-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
    padding: 22px;
}
.sfrc-card + .sfrc-card { margin-top: 18px; }
.sfrc-card h2 {
    margin: 0 0 16px;
    font-size: 1.02rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #374151;
}

/* ------------------------------- forms -------------------------------- */

.sfrc-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
@media (max-width: 560px) { .sfrc-row { grid-template-columns: 1fr; } }

.sfrc-field { margin-bottom: 14px; }
.sfrc-field label {
    display: block;
    margin-bottom: 5px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #374151;
}
.sfrc-field .sfrc-opt { font-weight: 400; color: #9ca3af; }

/* password is listed with the rest: the sign-in page is built from these same
   classes, and without it the one field on that page renders as the browser's
   raw default beside a styled email box. */
/* A control carrying [hidden] must stay hidden. The rule below sets width and
   padding but no display, so the UA's [hidden] still wins here — this states
   it outright so adding `display` to that rule later cannot quietly reveal the
   stand-in state/city controls. */
.sfrc-field [hidden] { display: none !important; }

.sfrc-field input[type=text],
.sfrc-field input[type=email],
.sfrc-field input[type=tel],
.sfrc-field input[type=password],
.sfrc-field select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #d1d5db;
    border-radius: 7px;
    font: inherit;
    color: inherit;
    background: #fff;
}
.sfrc-field input:focus,
.sfrc-field select:focus {
    outline: none;
    border-color: var(--sfr-primary, #2563eb);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
}
.sfrc-hint {
    margin: 5px 0 0;
    font-size: 0.8rem;
    color: #6b7280;
}
.sfrc-field.has-error input,
.sfrc-field.has-error select { border-color: #dc2626; }
.sfrc-err {
    margin: 5px 0 0;
    font-size: 0.8rem;
    color: #b91c1c;
}

/* Honeypot — off-screen rather than display:none, which some bots skip. */
.sfrc-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.sfrc-alert {
    margin-bottom: 18px;
    padding: 12px 14px;
    border-radius: 8px;
    border: 1px solid #fecaca;
    background: #fef2f2;
    color: #991b1b;
    font-size: 0.9rem;
}
.sfrc-alert-info {
    border-color: #bfdbfe;
    background: #eff6ff;
    color: #1e40af;
}

/* --------------------------- payment methods -------------------------- */

.sfrc-methods { display: grid; gap: 10px; }
.sfrc-method {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 12px 14px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    cursor: pointer;
}
.sfrc-method:hover { border-color: var(--sfr-primary, #2563eb); }
.sfrc-method input { margin: 0; accent-color: var(--sfr-primary, #2563eb); }
.sfrc-method span { font-weight: 500; }

.sfrc-terms {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-top: 18px;
    font-size: 0.88rem;
    color: #4b5563;
}
.sfrc-terms input { margin-top: 3px; accent-color: var(--sfr-primary, #2563eb); }

/* ------------------------------- summary ------------------------------ */

.sfrc-summary { position: sticky; top: 20px; }
.sfrc-sum-name { font-size: 1.05rem; font-weight: 700; margin: 0 0 4px; }
.sfrc-sum-cycle { color: #6b7280; font-size: 0.85rem; margin: 0 0 14px; }
.sfrc-sum-desc {
    margin: 0 0 16px;
    padding: 0;
    list-style: none;
    font-size: 0.87rem;
    color: #4b5563;
}
.sfrc-sum-desc li { padding-left: 18px; position: relative; margin-bottom: 5px; }
.sfrc-sum-desc li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    color: var(--sfr-primary, #2563eb);
    font-weight: 700;
}
.sfrc-sum-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-top: 14px;
    border-top: 1px solid #e5e7eb;
}
.sfrc-sum-total span { color: #6b7280; font-size: 0.88rem; }
.sfrc-sum-total strong { font-size: 1.5rem; letter-spacing: -0.02em; }

/* Reseller-defined reassurance lines under the order summary. */
.sfrc-badges ul {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.87rem;
    color: #4b5563;
}
.sfrc-badges li {
    padding-left: 24px;
    position: relative;
    margin-bottom: 8px;
}
.sfrc-badges li:last-child { margin-bottom: 0; }
.sfrc-badges li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    top: -1px;
    color: var(--sfr-btn, var(--sfr-primary, #2563eb));
    font-weight: 700;
}

/* ------------------------------- buttons ------------------------------ */

.sfrc-btn {
    display: inline-block;
    width: 100%;
    padding: 12px 18px;
    border: 0;
    border-radius: 8px;
    background: var(--sfr-btn, var(--sfr-primary, #2563eb));
    color: #fff;
    font: inherit;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}
.sfrc-btn:hover { filter: brightness(0.92); color: #fff; }
.sfrc-btn-ghost {
    background: transparent;
    border: 1px solid #d1d5db;
    color: #374151;
}
.sfrc-btn-ghost:hover { background: #f3f4f6; color: #111827; }
.sfrc-btn-row { margin-top: 20px; }

/* --------------------------- gateway output --------------------------- */

/*
 * The gateway module's own markup lands here untouched — it is WHMCS's, not
 * ours, and rewriting it would break the modules we most want to support. All
 * we do is make its button look like it belongs on this page.
 */
.sfrc-gateway { margin-top: 8px; }
.sfrc-gateway form { margin: 0; }
.sfrc-gateway input[type=submit],
.sfrc-gateway button[type=submit],
.sfrc-gateway .btn {
    display: inline-block;
    width: 100%;
    padding: 12px 18px;
    border: 0;
    border-radius: 8px;
    background: var(--sfr-primary, #2563eb);
    color: #fff;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}
.sfrc-gateway p { margin: 0 0 10px; }

.sfrc-instructions {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 14px 16px;
    font-size: 0.92rem;
}

/* ------------------------------ confirmation -------------------------- */

.sfrc-done { max-width: 620px; margin: 0 auto; text-align: center; }
.sfrc-tick {
    width: 62px;
    height: 62px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: var(--sfr-primary, #2563eb);
    color: #fff;
    font-size: 30px;
    line-height: 62px;
    font-weight: 700;
}
.sfrc-tick-wait { background: #f59e0b; }
.sfrc-done h1 { margin: 0 0 8px; font-size: 1.5rem; }
.sfrc-done p { color: #4b5563; }
.sfrc-detail {
    margin: 22px 0;
    text-align: left;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
}
.sfrc-detail div {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 14px;
    font-size: 0.9rem;
}
.sfrc-detail div + div { border-top: 1px solid #e5e7eb; }
.sfrc-detail span { color: #6b7280; }
.sfrc-detail strong { font-weight: 600; text-align: right; word-break: break-word; }

/* ---------------------------- custom sections ------------------------- */

/*
 * Blocks the reseller added on the Checkout page of the Rebrand studio. The
 * markup inside is theirs (allowlist-filtered in lib/CheckoutDesign.php), so
 * this only sets the typography it lands in — enough that unstyled content
 * reads correctly, loose enough that their own CSS can take it anywhere.
 */
.sfrc-custom > h2 { margin: 0 0 10px; }
.sfrc-custom p { margin: 0 0 10px; }
.sfrc-custom p:last-child { margin-bottom: 0; }
.sfrc-custom ul, .sfrc-custom ol { margin: 0 0 10px; padding-left: 20px; }
.sfrc-custom li { margin-bottom: 4px; }
.sfrc-custom img { max-width: 100%; height: auto; }
.sfrc-custom table { width: 100%; border-collapse: collapse; }
.sfrc-custom th, .sfrc-custom td {
    padding: 8px 10px;
    border-bottom: 1px solid #e5e7eb;
    text-align: left;
    font-size: 0.92rem;
}
.sfrc-custom h3 { margin: 14px 0 6px; font-size: 1.02rem; }
.sfrc-custom h4 { margin: 12px 0 6px; font-size: 0.95rem; }
.sfrc-custom > :first-child { margin-top: 0; }
.sfrc-custom + .sfrc-custom { margin-top: 14px; }
div.sfrc-custom:not(.sfrc-card) { margin-bottom: 14px; }

/* --------------------------- inherited skin --------------------------- */

/*
 * Applied when the reseller ticked "Match my website design".
 *
 * The studio writes their design pack and palette into the document head as a
 * :root block plus the pack's own stylesheet — the same CSS their landing page
 * uses. That stylesheet styles the site's class contract (.wrap, .btn, header,
 * footer, .plan ...), which covers the header and footer we carry across but
 * knows nothing about this form's sfrc-* classes.
 *
 * This block is the bridge: it re-expresses the checkout in terms of the
 * variables that contract defines, so the form picks up their fonts, palette,
 * corner radius and surfaces without the design pack needing to know the
 * checkout exists. Everything degrades through the second value in var() when a
 * pack leaves something undefined.
 */
/*
 * --sfr-bg-set / --sfr-btn-set exist only when the reseller actually picked a
 * colour on the studio's Colours pane. That is what makes "leave it blank to
 * follow your design" work: with nothing set, var() falls through to the design
 * pack's own --canvas / --accent instead of to the brand-kit primary, which is
 * always populated and would otherwise quietly win.
 */
.sfrc-skinned {
    background: var(--sfr-bg-set, var(--canvas, var(--sfr-bg, #f5f6f8)));
    color: var(--ink, #111827);
    font-family: var(--font-body, inherit);
}
.sfrc-skinned a { color: var(--accent, var(--sfr-accent, #1e40af)); }

.sfrc-skinned .sfrc-wrap { max-width: var(--maxw, 1060px); }

.sfrc-skinned .sfrc-head h1,
.sfrc-skinned .sfrc-card h2,
.sfrc-skinned .sfrc-done h1 {
    font-family: var(--font-head, inherit);
    color: var(--ink, #111827);
}
.sfrc-skinned .sfrc-head p,
.sfrc-skinned .sfrc-done p,
.sfrc-skinned .sfrc-hint,
.sfrc-skinned .sfrc-sum-cycle,
.sfrc-skinned .sfrc-detail span { color: var(--muted, #6b7280); }

.sfrc-skinned .sfrc-card {
    background: var(--panel, #fff);
    border-color: var(--line, #e5e7eb);
    /* Packs go as far as 0 for a hard-edged look; clamped so the form does not
       end up more rounded than the site it is sitting inside. */
    border-radius: min(var(--r, 10px), 22px);
}
.sfrc-skinned .sfrc-instructions,
.sfrc-skinned .sfrc-detail,
.sfrc-skinned .sfrc-method {
    background: var(--bg-2, #f9fafb);
    border-color: var(--line, #e5e7eb);
}
.sfrc-skinned .sfrc-detail div + div,
.sfrc-skinned .sfrc-custom th,
.sfrc-skinned .sfrc-custom td { border-color: var(--line, #e5e7eb); }

.sfrc-skinned .sfrc-field label { color: var(--ink, #374151); }
.sfrc-skinned .sfrc-field input[type=text],
.sfrc-skinned .sfrc-field input[type=email],
.sfrc-skinned .sfrc-field input[type=tel],
.sfrc-skinned .sfrc-field input[type=password],
.sfrc-skinned .sfrc-field select {
    background: var(--panel, #fff);
    border-color: var(--line-2, #d1d5db);
    border-radius: min(var(--r, 8px), 12px);
    color: var(--ink, #111827);
    font-family: var(--font-body, inherit);
}
.sfrc-skinned .sfrc-field input:focus,
.sfrc-skinned .sfrc-field select:focus {
    border-color: var(--accent, var(--sfr-primary, #2563eb));
    box-shadow: 0 0 0 3px var(--glow, rgba(37, 99, 235, 0.15));
}

/* The button keeps an explicit override when one is set — a reseller who chose
   a checkout button colour meant it, design pack or not. */
.sfrc-skinned .sfrc-btn {
    background: var(--sfr-btn-set, var(--accent, #2563eb));
    color: var(--on-accent, #fff);
    border-radius: min(var(--r, 8px), 14px);
    font-family: var(--font-head, inherit);
}
.sfrc-skinned .sfrc-btn-ghost {
    background: transparent;
    color: var(--accent, #2563eb);
    border-color: var(--accent, #2563eb);
}
.sfrc-skinned .sfrc-sum-total strong { color: var(--ink, #111827); }
.sfrc-skinned .sfrc-badges li::before,
.sfrc-skinned .sfrc-sum-desc li::before { color: var(--accent, #2563eb); }
.sfrc-skinned .sfrc-tick { background: var(--accent, #2563eb); color: var(--on-accent, #fff); }

/* The carried-over site header and footer are full-bleed on the landing page
   and must stay that way here; the centred column is only for the form. */
.sfrc-skinned > header,
.sfrc-skinned > footer { max-width: none; }

/*
 * Undoing the parts of a design pack that only make sense on a landing page.
 *
 * A pack is written for a document that opens with a full-height hero, so it
 * pins the header over the page and lays a fixed decorative grid behind
 * everything. Both assume content that starts below the fold. The checkout is a
 * form that starts at the top, so a fixed header would sit on the first field
 * and the grid would print over the cards.
 *
 * These rules are scoped to .sfrc-skinned, so they only apply where a pack has
 * actually been carried across, and they change position and layering only —
 * the pack keeps its own colour, type and spacing.
 */
.sfrc-skinned > header {
    position: static;
    /* Never gets the .scrolled class here (that is set by the site's own
       script, which the checkout does not load), so it needs a surface of its
       own or it renders transparent over the page background. */
    background: var(--panel, var(--sfr-primary, #2563eb));
    border-bottom: 1px solid var(--line, rgba(0, 0, 0, 0.08));
}
/* The decorative overlay is drawn on the page's own ::before. */
.sfrc-skinned::before { display: none !important; }

/* Keep the form above anything the pack positions at z-index 0. */
.sfrc-skinned .sfrc-wrap { position: relative; z-index: 1; }

/*
 * The one rule in a design pack that actively breaks this page.
 *
 * "form" is part of the design contract every pack is written against, and it
 * means one thing there: the contact form in the landing page's last section.
 * So packs style the bare element — a bordered, padded, shadowed card laid out
 * as two columns:
 *
 *     form{border:1px solid …;border-radius:22px;padding:30px;background:#fff;
 *          display:grid;grid-template-columns:1fr 1fr;gap:16px}
 *
 * details.tpl wraps the entire checkout in a <form>, so inheriting a pack put
 * the whole order page inside that card and crammed it into the left-hand
 * column of a two-column grid — the checkout ending up stuck to one side with
 * empty space beside it.
 *
 * A class beats a bare element on specificity, so this wins wherever it lands
 * in the cascade, including under a pack the reseller uploaded themselves.
 */
.sfrc-skinned form {
    display: block;
    border: 0;
    border-radius: 0;
    padding: 0;
    margin: 0;
    background: none;
    box-shadow: none;
    max-width: none;
    gap: 0;
}

/* Packs strip link underlines for a nav bar full of them. In body copy — the
   terms link, anything inside a custom section — that leaves no way to see
   what is clickable. */
.sfrc-skinned .sfrc-card a:not(.sfrc-btn),
.sfrc-skinned .sfrc-custom a { text-decoration: underline; }

/*
 * The mobile menu is a JavaScript component, so it is not carried over. Packs
 * hide .nav-links and reveal .burger below their breakpoint, which would leave
 * this header with no navigation at all — !important because the rule being
 * overridden lives inside the pack's own media query.
 */
.sfrc-skinned > header .nav-links {
    display: flex !important;
    flex-wrap: wrap;
    gap: 8px 18px;
}
.sfrc-skinned > header .burger,
.sfrc-skinned > header .mmenu { display: none !important; }

@media (max-width: 700px) {
    /* At this width the link row is taller than it is useful; the logo and the
       call to action carry the header on their own. */
    .sfrc-skinned > header .nav-links { display: none !important; }
    .sfrc-skinned > header .nav { height: auto; padding: 12px 0; }
}

/* ------------------------------ sign-in ------------------------------- */

/*
 * The branded login and password-reset pages (lib/CustomerLogin.php).
 *
 * Narrower than the checkout because there is one decision to make, not twelve —
 * a full-width card for two fields reads as an empty page. Everything else is
 * inherited from the checkout's own classes, so the reseller's design pack,
 * colours and custom CSS reach this page without knowing it exists.
 */
.sfrc-auth { max-width: 430px; margin: 0 auto; }
.sfrc-auth .sfrc-head { text-align: center; }
.sfrc-auth .sfrc-btn { width: 100%; justify-content: center; }
.sfrc-auth .sfrc-btn-row { margin-top: 18px; }
.sfrc-auth .sfrc-terms { margin-top: 14px; }

.sfrc-auth-alt {
    margin: 16px 0 0;
    text-align: center;
    font-size: 0.9rem;
}
.sfrc-auth-back {
    margin: 18px 0 0;
    text-align: center;
    font-size: 0.85rem;
}
.sfrc-auth-back a { color: #6b7280; }
.sfrc-skinned .sfrc-auth-back a { color: var(--muted, #6b7280); }

/* The unskinned .sfrc-alert-info is defined with the other alerts above; this is
   only its design-pack counterpart. */
.sfrc-skinned .sfrc-alert-info {
    background: var(--bg-2, #eff6ff);
    border-color: var(--line, #bfdbfe);
    color: var(--ink, #1e40af);
}

/* ----- phone: code picker and number as two separate fields -----
   They used to be welded together, the select clipped to 84px because it
   showed "+91". It now shows "India (+91)", and each sits in its own labelled
   field: the pair reads as two questions with two answers, which is what
   stopped customers typing the dial code into the number box as well.

   Both are ordinary full-width controls inside their grid column, so there is
   nothing to style but the truncation — country names vary a lot in length and
   the column does not. */
#f-dial {
    width: 100%;
    text-overflow: ellipsis;
}

/* ==================== site chrome, without a design pack ====================
 *
 * The reseller's header and footer are carried onto the checkout and sign-in
 * pages ALWAYS — see stampCheckout() in assets/rebrand/studio.js on why that is
 * not left to the inherit toggle. The design PACK is what the toggle controls,
 * and with it off the markup arrived here with nothing to style it: no .wrap,
 * no .nav, no .btn. The result was the site's navigation as a bare stack of
 * underlined links above the order form — worse than the plain brand strip it
 * replaced, and only on the pages of resellers who had deliberately turned the
 * pack off.
 *
 * So this is the floor: enough for the chrome to read as a header and a footer
 * on its own. Every rule is scoped to :not(.sfrc-skinned) so it cannot fight
 * the pack when there is one — under a pack these elements are styled by the
 * pack's own rules and this must stay out of the way entirely.
 */
.sfrc-body:not(.sfrc-skinned) .sfrc-site-head,
.sfrc-body:not(.sfrc-skinned) .sfrc-site-foot { --sfr-chrome-line: #e5e7eb; }

.sfrc-body:not(.sfrc-skinned) .sfrc-site-head {
    background: #fff;
    border-bottom: 1px solid var(--sfr-chrome-line);
}
.sfrc-body:not(.sfrc-skinned) .sfrc-site-foot {
    background: #fff;
    border-top: 1px solid var(--sfr-chrome-line);
    margin-top: 40px;
    padding: 32px 0 24px;
    font-size: .9rem;
}

/* The pack's own container width, restated so the chrome lines up with the
   checkout column instead of running to the edge of the viewport. */
.sfrc-body:not(.sfrc-skinned) .sfrc-site-head .wrap,
.sfrc-body:not(.sfrc-skinned) .sfrc-site-foot .wrap {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}

.sfrc-body:not(.sfrc-skinned) .sfrc-site-head .nav {
    display: flex;
    align-items: center;
    gap: 20px;
    min-height: 64px;
    flex-wrap: wrap;
}
.sfrc-body:not(.sfrc-skinned) .logo {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    text-decoration: none;
    color: inherit;
    font-size: 1.15rem;
    font-weight: 700;
}
.sfrc-body:not(.sfrc-skinned) .logo b { font-weight: 800; }
/* The wordmark's second half is drawn in an <i> purely for the weight contrast
   the studio gives it. Italic here would be a different name from the one on
   the reseller's home page. */
.sfrc-body:not(.sfrc-skinned) .logo i { font-style: normal; font-weight: 400; }
.sfrc-body:not(.sfrc-skinned) .logo svg,
.sfrc-body:not(.sfrc-skinned) .logo img { height: 30px; width: auto; }

.sfrc-body:not(.sfrc-skinned) .nav-links {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin-left: auto;
}
.sfrc-body:not(.sfrc-skinned) .nav-links a {
    color: #4b5563;
    text-decoration: none;
    font-size: .92rem;
}
.sfrc-body:not(.sfrc-skinned) .nav-links a:hover { color: var(--sfr-btn, #2563eb); }

.sfrc-body:not(.sfrc-skinned) .nav-cta {
    display: flex;
    align-items: center;
    gap: 10px;
}
/* .btn is the pack's button class, and the chrome's two nav buttons carry it.
   Unstyled they rendered as plain links, so the call to action on the header a
   customer just came from vanished on the order page. */
.sfrc-body:not(.sfrc-skinned) .nav-cta .btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 8px;
    border: 1px solid var(--sfr-btn, #2563eb);
    font-size: .88rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
.sfrc-body:not(.sfrc-skinned) .nav-cta .btn-ghost {
    color: var(--sfr-btn, #2563eb);
    background: none;
}
.sfrc-body:not(.sfrc-skinned) .nav-cta .btn-primary {
    color: #fff;
    background: var(--sfr-btn, #2563eb);
}
/* The arrow is decorative and the studio sizes it against the pack's type
   scale; left alone it can arrive taller than the button it sits in. */
.sfrc-body:not(.sfrc-skinned) .nav-cta .btn svg { width: 14px; height: 14px; }

.sfrc-body:not(.sfrc-skinned) .foot-grid {
    display: grid;
    grid-template-columns: 1.6fr repeat(auto-fit, minmax(140px, 1fr));
    gap: 26px;
}
.sfrc-body:not(.sfrc-skinned) .foot-brand p {
    margin-top: 10px;
    color: #6b7280;
    max-width: 46ch;
}
.sfrc-body:not(.sfrc-skinned) .foot-col h4 {
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #6b7280;
    margin-bottom: 10px;
}
.sfrc-body:not(.sfrc-skinned) .foot-col a {
    display: block;
    padding: 3px 0;
    color: #4b5563;
    text-decoration: none;
}
.sfrc-body:not(.sfrc-skinned) .foot-col a:hover { text-decoration: underline; }
.sfrc-body:not(.sfrc-skinned) .socials {
    display: flex;
    gap: 10px;
    margin-top: 14px;
}
.sfrc-body:not(.sfrc-skinned) .socials a { color: #6b7280; }
.sfrc-body:not(.sfrc-skinned) .socials svg { width: 18px; height: 18px; }
.sfrc-body:not(.sfrc-skinned) .foot-bottom {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 26px;
    padding-top: 16px;
    border-top: 1px solid var(--sfr-chrome-line);
    color: #6b7280;
    font-size: .84rem;
}

@media (max-width: 700px) {
    /* Same trade the skinned header makes at this width: the links are taller
       than they are useful, and the mark plus the call to action carry it. */
    .sfrc-body:not(.sfrc-skinned) .nav-links { display: none; }
    .sfrc-body:not(.sfrc-skinned) .sfrc-site-head .nav { min-height: 56px; }
}

/* ---- captcha on the branded sign-in ----
   The provider's widget is a fixed-size iframe, so it is centred rather than
   stretched — a 304px box left-aligned in a 430px card reads as misaligned
   rather than deliberate. Margin matches the field rhythm above it. */
.sfrc-captcha {
    margin-top: 16px;
    display: flex;
    justify-content: center;
}
.sfrc-captcha > div { max-width: 100%; }

/* ---- the store: a reseller's catalogue at /store -----------------------
   Cards rather than a table: this is a page someone chooses from, and the
   published site's pricing section — which these customers have already seen
   — presents the same products the same way. */
.sfrc-store-group { margin-bottom: 28px; }
.sfrc-store-group-head {
    font-size: 1.05rem;
    margin: 0 0 12px;
}
.sfrc-store-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
}
.sfrc-store-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 18px;
    display: flex;
    flex-direction: column;
}
.sfrc-skinned .sfrc-store-card {
    background: var(--panel, #fff);
    border-color: var(--line, #e5e7eb);
    border-radius: var(--r, 10px);
}
.sfrc-store-card h3 { margin: 0 0 6px; font-size: 1rem; }
.sfrc-store-price { font-size: 1.5rem; font-weight: 700; }
.sfrc-store-price small { font-size: .8rem; font-weight: 400; opacity: .7; }
.sfrc-store-feats {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
    font-size: .88rem;
}
.sfrc-store-feats li { padding: 3px 0; }
/* Pushes the button to the bottom so cards of unequal length still line their
   calls to action up. */
.sfrc-store-card .sfrc-btn-row { margin-top: auto; padding-top: 14px; }

/* "Ordering as …" — replaces the details form for a customer who is already
   signed in (details.tpl). Quiet on purpose: it is a confirmation, not a
   field they have to act on. */
.sfrc-signedin { margin: 4px 0 0; font-size: .95rem; }

/* ---- signed-in customer strip -----------------------------------------
   Sits above the reseller's own header on every branded page, and only when
   BrandedPage found a signed-in customer of that reseller. Deliberately quiet:
   it is a way back, not a call to action, and the page below it is doing the
   selling. */
.sfrc-userbar {
    /* #b91c1c is --sf-primary from the client-area theme, so the strip reads as
       the same furniture on the branded pages as it does inside the account.
       Not taken from the design pack: this bar belongs to the ACCOUNT, and a
       reseller whose palette is green would otherwise get a green bar on the
       shop and a red one everywhere else. */
    background: #b91c1c;
    color: #fff;
    font-size: .82rem;
}
.sfrc-userbar-inner {
    max-width: var(--maxw, 1200px);
    margin: 0 auto;
    padding: 7px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.sfrc-userbar a { color: inherit; text-decoration: none; }
.sfrc-userbar a:hover { text-decoration: underline; }
.sfrc-userbar-out { opacity: .75; }

/* ---- domain search on the store page ----------------------------------
   Written to match the published site's own search block, which these
   customers have already used before they had an account — same shape, same
   row layout, same three states. Colours come from the design pack when one is
   inherited and fall back to neutrals otherwise, exactly as the cards above. */
/*
 * Both selectors, and the second is the one that matters.
 *
 * ".sfrc-skinned form { display: block }" further up exists to stop a design
 * pack boxing the checkout's own form. This IS a form, so that rule (0,1,1)
 * beat a bare .sfrc-dom-search (0,1,0) and turned the flex row back into a
 * block — the input then fell back to its default width and would not grow,
 * which is the stunted search box on the store page.
 *
 * Qualifying with the element name matches that specificity, and sitting later
 * in the file wins the tie. max-width is restated for the same reason.
 */
.sfrc-dom-search,
.sfrc-skinned form.sfrc-dom-search {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    width: 100%;
    max-width: none;
}
.sfrc-dom-search input[type="text"] {
    /* Sized to match .dom-search on the reseller's published home page — same
       padding, radius and type size — so the box a customer used before they
       had an account is the box they meet inside it. It stretches to the full
       content width rather than the 640px the home page centres it in: here it
       sits above a full-width grid of packages, and a narrow field floating
       over wide cards reads as unfinished rather than deliberate. */
    flex: 1 1 260px;
    min-width: 0;          /* or a long name forces the button off the row */
    padding: 15px 18px;
    border: 1px solid #d1d5db;
    border-radius: 12px;
    font-size: 1rem;
}
.sfrc-dom-search input[type="text"]:focus {
    outline: none;
    border-color: var(--sfr-btn, #2563eb);
}
.sfrc-skinned .sfrc-dom-search input[type="text"] {
    border-color: var(--line-2, #d1d5db);
    border-radius: 12px;
    font-family: var(--font-body, inherit);
}
/* .sfrc-btn is width:100% by design — the cards want a full-width call to
   action. In this flex row that makes the button claim the whole line and
   pushes the input onto its own, which is what the search box was doing:
   a stunted field above a stretched button. flex alone does not undo an
   explicit width, so it is reset here. */
.sfrc-dom-search .sfrc-btn {
    flex: 0 0 auto;
    width: auto;
    min-width: 130px;
    /* Matches the input's new height, or the button sits short beside it. */
    padding: 15px 22px;
    border-radius: 12px;
}

.sfrc-dom-results { margin-top: 14px; }
.sfrc-dom-msg {
    padding: 14px;
    text-align: center;
    font-size: .9rem;
    color: #6b7280;
    border: 1px dashed #e5e7eb;
    border-radius: 8px;
}
.sfrc-dom-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 14px 18px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    margin-bottom: 10px;
}
.sfrc-skinned .sfrc-dom-row { border-color: var(--line, #e5e7eb); border-radius: var(--r, 8px); }
/* A taken or unresolved name still gets a row — telling somebody their first
   choice is gone is the answer they came for — but it recedes. */
.sfrc-dom-row.is-off { opacity: .62; }
.sfrc-dom-name { font-weight: 600; word-break: break-all; }
.sfrc-dom-price { margin-left: auto; font-weight: 700; white-space: nowrap; }

.sfrc-dom-tag {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 30px;
    flex: none;
}
.sfrc-dom-tag.ok { background: rgba(22,163,74,.12); color: #15803d; }
/* Neutral, not red: "Taken" and "Unable to check" are both answers, and a
   failed lookup dressed as a refusal is the bug this state exists to avoid. */
.sfrc-dom-tag.no { background: rgba(107,114,128,.12); color: #4b5563; }

/* The Buy button on a result row sits inline with it, so it is smaller than
   the full-width buttons the cards use. */
.sfrc-btn-sm {
    padding: 7px 14px;
    font-size: .85rem;
    width: auto;
    flex: 0 0 auto;
}

@media (max-width: 520px) {
    .sfrc-dom-price { margin-left: 0; }
}