/* =========================================================================
   Domain Name Search modal — SHARED component styling (2026-08-13 domain-search
   unification pass). Moved out of custom.css (NOT duplicated — the rules below no longer
   exist there) into its own file specifically because this modal is needed in MORE contexts
   than custom.css can reach: custom.css only ever loads on Smarty pages (guest AND logged-in —
   see includes/head.tpl), but this exact same modal is now also triggered from the standalone
   plain-PHP market/*.php pages (starting with market/domains.php), which never load custom.css
   at all. This file is linked by all three contexts:
     - Smarty (guest + logged-in): includes/head.tpl
     - Plain PHP market pages: market/_header.php
   so there is exactly ONE stylesheet backing window.VercaaDomainSearch.open()'s markup
   everywhere it's used, never a second hand-synced copy.

   Every token referenced below (var(--primary), var(--text), var(--bg-muted), etc.) already
   exists as a real custom property in BOTH contexts: custom.css's own :root token block on
   Smarty pages, and market/_tokens.css's alias layer on market pages (which points each of
   these same names at the market pages' own real --mc-* brand tokens — see that file's own
   "App token aliases" comment block, extended in this same pass to cover the handful of names
   this modal needed that guest-chrome.css hadn't already required). No new hex color values
   were introduced anywhere in this move.

   Rows are painted client-side by js/domain-search-modal.js from real /api/v2/store/domain/
   availability + /suggestions responses; every class below is referenced from that file's
   renderRow()/paintResults(). Colors are Vercaa's own tokens throughout — "pixel-perfect to
   hosting.com" (this component's original design reference) means matching hosting.com's
   LAYOUT/TYPOGRAPHY/INTERACTION pattern, not their brand palette.

   NOT moved here (deliberately left in custom.css): the body.app-cart-embed chrome-hiding rules
   a few hundred lines above this block's old location — those are still real, still used by the
   Support-ticket bottom sheet's own ?embed=1 iframe (includes/ticket-sheet.tpl), a completely
   separate, Smarty-only feature. Also dropped entirely (not moved, not kept): the old
   .app-domain-modal-iframe / .is-loaded rules — dead CSS from this modal's original
   <iframe>-of-the-Vue-widget era, confirmed unreferenced by any current markup or JS before this
   move (this hand-built renderer has never used an iframe).
   ========================================================================= */

/* ---- Backdrop — 80% black per motion doc §5 "True modal" measurement, own fade only (no scale). */
.app-domain-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1060;
    background: rgba(0, 0, 0, 0.8);
    opacity: 0;
    transition: opacity var(--duration-base) ease-in-out;
}
.app-domain-modal-backdrop.is-open { opacity: 1; }

/* ---- Dialog shell — fade + scale(0.95->1) + slight slide, ~200ms, ease-standard (motion doc §5). */
.app-domain-modal {
    position: fixed;
    inset: 0;
    z-index: 1061;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    pointer-events: none;
}
/* ---- Component-scoped "ink" token — ONE restrained dark, near-monochrome accent (not a bright
   brand color) for the Search button fill, row icon, "AVAILABLE" label, "SAVE X%" badge outline,
   and "Add to basket" outline+text, matching the hosting.com reference's own restrained treatment
   while staying strictly within Vercaa's own palette: reuses --primary-accented (the sitewide
   pressed/hover state of Vercaa's brand purple), never an invented one-off hex. Dark-theme
   override swaps to the brighter --primary itself purely for legibility on a near-black surface —
   same token family either way. Scoped as a custom property on .app-domain-modal (not a global
   :root token) since this is a deliberately distinct, near-monochrome application of the brand
   color for one component, not a new sitewide token. */
.app-domain-modal {
    --domain-ink: var(--primary-accented);
}
:root[data-theme="dark"] .app-domain-modal {
    /* 2026-08-14 dark-mode contrast fix: was `var(--primary)` (raw #a83fff) — a real WCAG audit found
       that only clears 4.33:1 against this dialog's own --bg-muted background (the "AVAILABLE" label,
       row icon, "SAVE X%" badge outline, and idle "Add to basket" outline+text all consume
       --domain-ink as TEXT/border here — a real AA fail). Repointed to custom.css's --primary-glow
       (#b55cff, 5.33:1 on --bg-muted) instead — see that token's own comment in custom.css for the
       full derivation. NOTE: --domain-ink is also used as a solid-fill BACKGROUND with white text in
       2 places (.app-domain-modal-search-btn below, and .app-domain-row-add:hover) — those do NOT
       inherit this value anymore; they're explicitly overridden to --primary-lifted just below,
       since a brighter fill would make their white text less readable, not more. */
    --domain-ink: var(--primary-glow);
}

.app-domain-modal-dialog {
    display: flex;
    flex-direction: column;
    width: 100%;
    /* min(94vw, 1480px) reads as "nearly full width" on typical laptop/desktop viewports
       (1280-1600px, the overwhelming majority of real usage) while still capping at a sane
       reading width on ultra-wide monitors so result rows don't stretch absurdly thin. */
    max-width: min(94vw, 1480px);
    height: min(820px, 100%);
    background: var(--bg-muted);
    color: var(--text);
    border-radius: var(--rounding-lg);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
    position: relative;
    overflow: hidden;
    opacity: 0;
    /* Bottom-sheet entrance ("a popup comes from down to top") — dialog starts fully below its
       own resting position (translateY(100%) of ITS OWN height). Shared open transition with
       .app-ticket-sheet-dialog (custom.css, Smarty-only) — see js/domain-search-modal.js's
       initDismissibleSheet(), used by both this modal and the ticket sheet, which also drives
       this same transform property live during a drag gesture. */
    transform: translateY(100%);
    transition: opacity var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard);
    pointer-events: auto;
}
.app-domain-modal.is-open .app-domain-modal-dialog { opacity: 1; transform: translateY(0); }

/* Drag-to-dismiss handle — wired live to initDismissibleSheet() in js/domain-search-modal.js.
   touch-action:none stops the browser's own scroll/refresh gesture from fighting the JS-driven
   drag on touch devices; cursor:grab/:active:grabbing signal the affordance on desktop too. */
.app-domain-modal-drag-handle {
    width: 40px;
    height: 4px;
    border-radius: 999px;
    background: var(--border);
    margin: 0.85rem auto 0;
    flex-shrink: 0;
    touch-action: none;
    cursor: grab;
}
.app-domain-modal-drag-handle:active { cursor: grabbing; }

.app-domain-modal-close {
    position: absolute;
    top: 1.1rem;
    right: 1.1rem;
    width: 32px;
    height: 32px;
    border: 0;
    background: transparent;
    color: var(--text);
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color var(--duration-fast) var(--ease-out);
}
.app-domain-modal-close svg { width: 20px; height: 20px; stroke-width: 2.25; }
.app-domain-modal-close:hover { background: var(--bg-accented); }

.app-domain-modal-title {
    font-family: var(--font-heading);
    text-align: center;
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--text);
    margin: 1rem 0 1.1rem;
    padding: 0 3.5rem;
    flex-shrink: 0;
}

/* ---- Full-bleed thin divider between the header and the search bar. A plain block child of the
   column-flex dialog stretches to the full cross-axis width by default (align-items:stretch), so
   no explicit width/margin is needed to make it edge-to-edge. */
.app-domain-modal-header-divider {
    height: 1px;
    background: var(--border-muted);
    flex-shrink: 0;
}

/* ---- Sticky search bar — stays fixed while results scroll beneath it. */
.app-domain-modal-search {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 1.25rem 2rem;
    flex-shrink: 0;
    position: sticky;
    top: 0;
    background: var(--bg-muted);
    z-index: 2;
}
.app-domain-modal-search-field {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    background: var(--bg);
    border: 1px solid var(--border-muted);
    border-radius: 999px;
    padding: 0.65rem 0.5rem 0.65rem 1.15rem;
    box-shadow: 0 1px 2px rgba(17, 24, 39, 0.05);
}
:root[data-theme="dark"] .app-domain-modal-search-field { background: var(--bg-lifted); }
.app-domain-modal-search-icon { width: 18px; height: 18px; color: var(--text-muted); flex-shrink: 0; }
.app-domain-modal-search-input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    background: transparent;
    color: var(--text);
    font-size: var(--text-md);
}
/* Sitewide `input:focus-visible{box-shadow:var(--focus-ring)}` would draw a hard-edged rectangle
   floating inside this rounded pill (the bare <input> itself is unrounded by design) — killed
   here and re-applied to the wrapper instead (see :focus-within rule below), so the ring actually
   follows the pill's own 999px radius. */
.app-domain-modal-search-input:focus { outline: none; }
.app-domain-modal-search-input:focus-visible { box-shadow: none; }
.app-domain-modal-search-field:focus-within {
    border-color: var(--focus-ring-color);
    box-shadow: var(--focus-ring), 0 1px 2px rgba(17, 24, 39, 0.05);
}
.app-domain-modal-search-clear {
    width: 22px;
    height: 22px;
    border-radius: 999px;
    border: 0;
    background: var(--border-muted);
    color: var(--text-lifted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background-color var(--duration-fast) var(--ease-out);
}
.app-domain-modal-search-clear svg { width: 11px; height: 11px; stroke-width: 2.5; }
.app-domain-modal-search-clear:hover { background: var(--border); }
.app-domain-modal-search-btn {
    flex-shrink: 0;
    border: 0;
    border-radius: 999px;
    padding: 0.65rem 1.5rem;
    background: var(--domain-ink);
    color: var(--white);
    font-weight: 700;
    font-size: var(--text-md);
    transition: filter var(--duration-slow) var(--ease-standard);
}
.app-domain-modal-search-btn:hover { filter: brightness(1.18); }
/* 2026-08-14 dark-mode contrast fix: this button fills its background from --domain-ink (now
   --primary-glow in dark mode, see that token's own override above) with hardcoded white text —
   --primary-glow is a BRIGHT text-on-dark color, so used as a fill under white text it would read
   even worse than the raw #a83fff it replaced (4.36:1 -> ~3.5:1). Pinned explicitly to
   --primary-lifted instead (white text on #8b2fd9 is 5.99:1, comfortably AA). */
:root[data-theme="dark"] .app-domain-modal-search-btn { background: var(--primary-lifted); }

@media (max-width: 640px) {
    .app-domain-modal-title { font-size: 1.25rem; padding: 0 3rem; }
    .app-domain-modal-search { padding: 1rem 1.25rem; }
}

/* ---- Body: loading state (indeterminate spinner, NOT a skeleton — a real multi-TLD/WHOIS search
   takes several seconds server-side, so a skeleton-row approach would look broken/stuck for that
   long) + the results list itself. */
.app-domain-modal-body {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
}
.app-domain-modal-loading {
    position: absolute;
    inset: 0;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.85rem;
    color: var(--text-lifted);
    font-weight: 600;
    background: var(--bg-muted);
    z-index: 1;
}
.app-domain-modal-loading.is-visible { display: flex; }
.app-domain-modal-spinner {
    width: 32px;
    height: 32px;
    color: var(--primary);
    animation: appDomainModalSpin 1s linear infinite;
}
@keyframes appDomainModalSpin { to { transform: rotate(360deg); } }

body.app-domain-modal-open { overflow: hidden; }

@media (max-width: 640px) {
    .app-domain-modal { padding: 0; }
    .app-domain-modal-dialog { max-width: 100%; height: 100%; border-radius: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .app-domain-modal-dialog,
    .app-domain-modal-backdrop {
        transition-duration: 0.01ms !important;
    }
}

/* =========================================================================
   Hand-built results renderer — every class below is referenced from
   js/domain-search-modal.js's renderRow()/paintResults(). Rows are painted client-side from real
   /api/v2/store/domain/availability + /suggestions responses; no result here is ever fabricated.
   ========================================================================= */

.app-domain-modal-results {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    padding: 0 2rem 1.75rem;
    -webkit-overflow-scrolling: touch;
}

.app-domain-row {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.35rem 0;
    animation: appDomainRowIn var(--duration-slow) var(--ease-standard);
}
.app-domain-row:not(.app-domain-row-taken):not(:last-child) {
    border-bottom: 1px solid var(--border-muted);
}
@keyframes appDomainRowIn {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

.app-domain-row-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    /* Outlined, not filled — a thin-stroke circle in the same restrained dark "ink" used for the
       label/badge/button below, not Vercaa's bright brand green (--success). See the
       --domain-ink token comment above. */
    border: 1.5px solid var(--domain-ink);
    color: var(--domain-ink);
}
.app-domain-row-icon svg { width: 19px; height: 19px; }
.app-domain-row-taken .app-domain-row-icon { border-color: var(--border-lifted); color: var(--text-lifted); }

.app-domain-row-main { flex: 1 1 auto; min-width: 0; }

.app-domain-row-label {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    /* "AVAILABLE" is the same dark-ink token (--domain-ink) as the icon/badge/button — one
       consistent ink color throughout, not a plain neutral gray. */
    color: var(--domain-ink);
    margin-bottom: 0.3rem;
}
.app-domain-row-exact-badge {
    border: 1px solid var(--border-lifted);
    color: var(--text-lifted);
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: none;
    letter-spacing: normal;
    padding: 0.05rem 0.5rem;
    border-radius: 999px;
    white-space: nowrap;
}

.app-domain-row-name {
    font-size: 1.4rem;
    line-height: 1.25;
    color: var(--text);
    word-break: break-word;
}
.app-domain-row-sld { font-weight: 500; }
.app-domain-row-tld { font-weight: 800; }

.app-domain-row-sub {
    font-size: var(--text-md);
    color: var(--text-lifted);
    margin-top: 0.35rem;
}
/* "Was $X.XX" — italic strikethrough. ", now $X.XX for the first year." stays plain, non-italic,
   non-strikethrough gray (the surrounding .app-domain-row-sub color) — only the struck "Was"
   clause is italic. */
.app-domain-row-strike { text-decoration: line-through; font-style: italic; color: var(--text-muted); }

.app-domain-row-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.45rem;
    flex-shrink: 0;
    margin-left: 0.5rem;
}
.app-domain-row-badge {
    /* Outlined pill, not filled/solid — a thin dark-ink border on a transparent/white fill, not a
       soft-tint solid background. */
    background: transparent;
    border: 1px solid var(--domain-ink);
    color: var(--domain-ink);
    font-size: var(--text-xs);
    font-weight: 700;
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    white-space: nowrap;
}
.app-domain-row-price { text-align: right; white-space: nowrap; }
.app-domain-row-price strong { font-size: 1.3rem; font-weight: 800; color: var(--text); }
.app-domain-row-price-suffix { font-size: var(--text-sm); color: var(--text-lifted); margin-left: 0.15rem; }

.app-domain-row-add {
    /* Outlined pill in its default state (dark-ink border + dark-ink text, white/transparent
       fill) — NOT solid/filled. Fills solid (ink background, white text) only on hover/focus. */
    border: 1.5px solid var(--domain-ink);
    color: var(--domain-ink);
    background: transparent;
    font-weight: 700;
    font-size: var(--text-sm);
    padding: 0.5rem 1.25rem;
    border-radius: 999px;
    white-space: nowrap;
    transition: background-color var(--duration-slow) var(--ease-standard), color var(--duration-slow) var(--ease-standard), border-color var(--duration-slow) var(--ease-standard);
}
.app-domain-row-add:hover:not(:disabled), .app-domain-row-add:focus-visible { background: var(--domain-ink); color: var(--white); border-color: var(--domain-ink); }
/* 2026-08-14 dark-mode contrast fix: this hover/focus fill also pulls --domain-ink as a BACKGROUND
   (with white text) — same "bright text-color token misused as a fill" problem as the Search button
   above. Pinned to --primary-lifted for dark mode (white text on #8b2fd9: 5.99:1). */
:root[data-theme="dark"] .app-domain-row-add:hover:not(:disabled),
:root[data-theme="dark"] .app-domain-row-add:focus-visible { background: var(--primary-lifted); border-color: var(--primary-lifted); }
.app-domain-row-add.is-loading { opacity: 0.7; }
/* Success/error states intentionally stay on the sitewide --primary/--error feedback colors (not
   --domain-ink) — a distinct color for "this action succeeded" vs. "just hovering" is a real,
   deliberate signal this project's interaction system already relies on elsewhere. */
.app-domain-row-add.is-added { background: var(--primary); color: var(--white); border-color: var(--primary); cursor: default; }
/* 2026-08-14 dark-mode contrast fix: white text on raw --primary is only 4.36:1 in any theme, but
   scoped as a dark-mode-only fix per this task's scope (this exact "Added to basket" success state,
   white-on-#a83fff, was one of the audit's named real failures). --primary-lifted matches the
   hover/focus fill immediately above for a consistent solid-fill color family in dark mode. */
:root[data-theme="dark"] .app-domain-row-add.is-added { background: var(--primary-lifted); border-color: var(--primary-lifted); }
/* 2026-08-14 verification-pass catch: this rule's text color used raw --error directly on top of
   --error-soft (the exact "text-on-soft-tint" role every OTHER soft/accented pairing in this project
   goes through --X-accented for, e.g. custom.css's .alert-danger/.app-icon-circle-danger) — a real
   WCAG fail in BOTH themes, not just dark: 3.91:1 in light mode, 3.42:1 in dark mode (12px/700
   weight, well under the large-text exemption, needs 4.5:1). --error-accented resolves correctly
   with no new hex for LIGHT mode (#a01229 on the opaque light --error-soft: 6.64:1). In dark mode
   --error-accented aliases to --error-glow, which was only ever measured against plain --bg-*
   surfaces (4.73-5.36:1 there) — NOT against this button's own actual background, the translucent
   --error-soft fill composited over the modal surface, which a live getComputedStyle probe measured
   at only 4.42:1 (still short of 4.5). Same root cause as custom.css's own "Fourth sweep pass":
   bright glow-text on top of that same color's soft-tint fill reads lower-contrast than on a plain
   surface. Fixed the identical way — a dark-mode-only override retargeting just the text to
   var(--text-accented) (guaranteed legible, no new hex), leaving the background/border on the real
   error red untouched so the "this failed" signal stays red in both modes. */
.app-domain-row-add.is-error { background: var(--error-soft); border-color: var(--error); color: var(--error-accented); }
:root[data-theme="dark"] .app-domain-row-add.is-error { color: var(--text-accented); }
.app-domain-row-add:disabled { cursor: default; }
/* theme.min.css ships a sitewide `[disabled]{opacity:var(--disabled-opacity)}` rule (25%, meant
   for genuinely-disabled/greyed-out controls elsewhere) — .is-added never declared its own
   opacity, so that inherited dim silently applied on top of its otherwise-correct solid
   green/white colors. Explicit opacity:1 restores full contrast for this confirmation state. */
.app-domain-row-add.is-added { opacity: 1; }
.app-domain-row-add-check { width: 12px; height: 12px; vertical-align: -1px; margin-right: 0.35rem; }
@keyframes appDomainAddPop {
    0% { transform: scale(1); }
    45% { transform: scale(1.05); }
    100% { transform: scale(1); }
}
.app-domain-row-add.is-added { animation: appDomainAddPop var(--duration-slow) var(--ease-standard); }

/* ---- TAKEN row — visually distinct card (bordered, separated from the plain flat list of
   AVAILABLE rows above/below it). */
.app-domain-row-taken {
    border: 1px solid var(--border);
    border-radius: var(--rounding-md);
    background: var(--bg-muted);
    padding: 1rem 1.1rem;
    margin: 0.6rem 0;
}

/* ---- "Load more results" — full-width bordered box, manual/click-to-load-more (not numbered
   pagination). Reveals more of the already-fetched suggestions list client-side. */
.app-domain-row-more {
    display: block;
    width: 100%;
    text-align: center;
    padding: 0.85rem 1rem;
    margin-top: 0.5rem;
    border: 1px solid var(--border);
    border-radius: var(--rounding-md);
    background: var(--bg-muted);
    color: var(--text-lifted);
    font-weight: 600;
    font-size: var(--text-md);
    transition: background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
}
.app-domain-row-more:hover { background: var(--bg-accented); border-color: var(--border-lifted); }

/* ---- Search button's own loading state — label swaps for a small spinning-circle loader while a
   search is in flight. Reuses appDomainModalSpin, defined above with the modal shell. */
.app-domain-modal-btn-spinner {
    width: 18px;
    height: 18px;
    display: block;
    margin: 0 auto;
    animation: appDomainModalSpin 1s linear infinite;
}

@media (max-width: 640px) {
    .app-domain-modal-results { padding: 0 1.25rem 1.5rem; }
    .app-domain-row { flex-wrap: wrap; }
    .app-domain-row-side {
        width: 100%;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        margin-left: 0;
        margin-top: 0.65rem;
        padding-left: calc(38px + 1rem);
    }
    .app-domain-row-taken { padding: 0.85rem 0.9rem; }
}

/* =========================================================================
   Checkout CTA bar — appears the first time "Add to basket" succeeds (js/domain-search-modal.js's
   showCartCheckoutBar(), wired from addToBasket()'s success branch). Pinned as the dialog's own
   last flex child (outside the scrolling results area), so it's visible without scrolling the
   instant the first domain is added. Entrance reuses the same fade+slide vocabulary as the dialog
   shell's own open transition rather than an abrupt layout jump. The button itself is a
   genuinely solid-filled CTA (unlike the outline "Add to basket" row buttons, which intentionally
   fill-on-hover), so its hover uses the sitewide filter:brightness(0.97) convention for solid
   buttons, not a color swap.
   ========================================================================= */
.app-domain-modal-cart-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-shrink: 0;
    padding: 0.9rem 1.25rem;
    background: var(--success-soft);
    border-top: 1px solid var(--border);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard);
}
.app-domain-modal-cart-bar[hidden] { display: none; }
.app-domain-modal-cart-bar.is-open { opacity: 1; transform: translateY(0); }
.app-domain-modal-cart-bar-info {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
    color: var(--success-accented);
    font-weight: 600;
    font-size: var(--text-md);
}
.app-domain-modal-cart-bar-icon { width: 20px; height: 20px; flex-shrink: 0; }
.app-domain-modal-cart-bar-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
    background: var(--primary);
    color: var(--white);
    font-weight: 700;
    font-size: var(--text-md);
    padding: 0.55rem 1.25rem;
    border-radius: 999px;
    white-space: nowrap;
    transition: filter var(--duration-slow) var(--ease-standard);
}
/* 2026-08-14 dark-mode contrast fix: same white-on-raw-#a83fff fail (4.36:1) as every other
   solid-fill consumer of --primary fixed in this file/custom.css (Search button, "Added to
   basket", etc.) -- this is the modal's sticky "View Cart & Checkout" bar, shown once at least one
   domain has been added. */
:root[data-theme="dark"] .app-domain-modal-cart-bar-btn { background: var(--primary-lifted); }
.app-domain-modal-cart-bar-btn svg { width: 15px; height: 15px; stroke-width: 2.25; }
.app-domain-modal-cart-bar-btn:hover,
.app-domain-modal-cart-bar-btn:focus-visible { filter: brightness(0.97); color: var(--white); }

@media (max-width: 640px) {
    .app-domain-modal-cart-bar { flex-wrap: wrap; }
    .app-domain-modal-cart-bar-btn { width: 100%; justify-content: center; }
}