/* =========================================================
   SITEPEX — CHECKOUT
   =========================================================
   1.  RESET
   2.  BASE
   3.  TYPOGRAPHY
   4.  LAYOUT
   5.  TRUST STRIP
   6.  CARDS
   7.  FORM CONTROLS
   8.  BUTTONS
   9.  PLAN CARD
   10. DOMAIN CONFIGURATION
   11. CUSTOMER / LOGIN
   12. GST
   13. ORDER SUMMARY
   14. MOBILE DRAWER
   15. PAYMENT TRUST
   16. ALERTS + UTILITIES
   17. ANIMATIONS
   18. RESPONSIVE
   19. OTHER PAGES
   20. LEGACY — verify before deleting

   Merged duplicates:
     .domain-search-text            defined twice → margin:14px 0 -25px
     .domain-radio input[radio]     defined twice → merged
     .spx-domain-card               defined twice → merged
     .spx-domain-price              defined twice → identical, one removed
     .success-actions               30px then 20px → 20px was winning, kept

   Removed:
     .plan-summary-left / -right / .plan-price-row   markup no longer uses them
     .spx-domain-name{grid-area}                     parent is flex, no-op
     .spx-domain-btn{grid-area}                      same
     .spx-domain-card:hover                          no-op after border:none
========================================================= */


/* =========================================================
   1. RESET
========================================================= */

:root{
    /* Sticky header height — the summary offsets below it so it
       doesn't slide under the header on scroll */
    --spx-header-h:70px;

    /* Shared width for the plan and domain-period toggles */
    --spx-select-w:250px;
}

:root{
    --blue:#2563eb; --blue-d:#1d4ed8;
    --amber:#f59e0b; --amber-d:#d97706;
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    -webkit-tap-highlight-color: transparent;
}

html,
body{
    width:100%;
}

img{
    max-width:100%;
    height:auto;
}

hr{
    border:none;
    height:0.7px;
    background:#e5e7eb;
    margin:15px 0;
}


/* =========================================================
   2. BASE
========================================================= */

body{
    font-family:'DM Sans',sans-serif;
    background:#f6f7fb;
    color:#020205;
}

body,
input,
select,
textarea,
button{
    font-family:'DM Sans',sans-serif;
}


/* =========================================================
   3. TYPOGRAPHY
========================================================= */

h1{
    font-size:24px;
    font-weight:700;
    line-height:1.2;
    margin-bottom:30px;
}

.section-title{
    display:flex;
    align-items:center;
    gap:10px;
    /*margin-bottom:20px;*/
    font-size:16px;
    font-weight:600;
    color:#1f2937;
}

.section-icon{
    width:24px;
    height:24px;
    flex-shrink:0;
    object-fit:contain;
}

.section-title-summary{
    margin-bottom:18px;
    font-size:18px;
    font-weight:700;
    letter-spacing:-.01em;
    color:#0f172a;
}

.checkout-note{
    margin:6px 0 18px;
    font-size:14px;
    color:#6b7280;
}


/* =========================================================
   4. LAYOUT
========================================================= */

.container{
    width: 100%;
    max-width: 1208px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 40px;
    padding-right: 40px;
}

@media(max-width:767px){
    .container {
        max-width: 1160px;
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* ============ SitePex urgency bar (blue) ============ */
.spx-urgency{
    position:sticky; top:0; z-index:61; overflow:hidden; display:none;
    color:#dbe4f5; font-size:14px; font-weight:500; line-height:1.4;
    background:
        radial-gradient(130% 200% at 6% 50%, rgba(56,189,248,.20), transparent 58%),
        linear-gradient(135deg,#102142,#0a1628),
        #0a1628;                                   /* solid base */
}
/* Shown per device via the $spxShowUrgencyDesktop / $spxShowUrgencyMobile flags */
@media (min-width:769px){ .spx-urgency.spx-urg-desktop{ display:block; } }
@media (max-width:768px){ .spx-urgency.spx-urg-mobile { display:block; } }
.spx-urgency-inner{ display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:.55rem; padding:6px 16px; }
.spx-dot{ position:relative; width:8px; height:8px; border-radius:50%; background:#38bdf8; flex:0 0 auto; }
.spx-dot::after{
    content:""; position:absolute; inset:0; border-radius:50%;
    background:#38bdf8; opacity:.5;
    animation:spxPulse 1.9s infinite;
}
@keyframes spxPulse{
    0%   { transform:scale(1);   opacity:.5; }
    70%  { transform:scale(3.4); opacity:0; }
    100% { transform:scale(3.4); opacity:0; }
}
.spx-offer strong{ color:#fff; font-weight:800; letter-spacing:-.01em; }
.spx-accent{ color:#38bdf8; font-weight:700; }
.spx-free{ color:#c7d5ee; }
.spx-div{ width:1px; height:15px; background:rgba(255,255,255,.16); margin:0 .25rem; }
.spx-ends{ color:#c7d5ee; }
.spx-timer{ font-variant-numeric:tabular-nums; letter-spacing:.01em; white-space:nowrap; }
.spx-timer b{ color:#bfe0ff; font-weight:800; font-size:15px; }
.spx-timer i{ color:#7f9bc4; font-style:normal; font-weight:600; font-size:11.5px; margin:0 .32rem 0 1px; }
.spx-timer i:last-child{ margin-right:0; }
.spx-progress{ height:2px; background:rgba(255,255,255,.07); }
.spx-progress span{ display:block; height:100%; width:100%; background:linear-gradient(90deg,#2563eb,#38bdf8); box-shadow:0 0 8px rgba(56,189,248,.5); transition:width 1s linear; }
@media(max-width:560px){ .spx-urgency-inner{ font-size:12.5px; gap:.4rem; padding:6px 12px; } .spx-div{ display:none; } }

/* ---------- Sticky header ---------- */
.checkout-header{
    position:sticky; top:var(--spx-bar-h,0px); z-index:60;   /* offset = visible bar height (0 when hidden), set by JS */
    margin:0; padding:0;
    background-color:#fff;                         /* solid base — no show-through while scrolling */
    /*transition:background-color .25s ease, box-shadow .25s ease;*/
}
.checkout-header:not(.is-scrolled){
    background-color:transparent;                 /* transparent ONLY at the very top */
}
.checkout-header.is-scrolled{
    box-shadow:0 1px 3px rgba(15,23,42,.07);
}

.checkout-header-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    max-width:1480px;
    margin:0 auto;
    padding:14px 24px;
}

.checkout-logo-link{
    display:inline-block;
    width:auto;
    line-height:0;
}

.checkout-logo{
    display:block;
    height:42px;
    width:auto;
}

.chat-now-btn{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:9px 18px;
    font-family:inherit;
    font-size:14px;
    font-weight:600;
    color:#0f172a;
    background:transparent;
    border:1.5px solid #2563eb;
    border-radius:999px;
    cursor:pointer;
    transition:border-color .15s ease, color .15s ease, box-shadow .15s ease;
}

.chat-now-btn svg{
    color:#2563eb;
}

.chat-now-btn:hover{
    border-color:#2563eb;
    color:#2563eb;
    box-shadow:0 4px 12px rgba(37,99,235,.15);
}

.checkout-heading{
    margin:0 0 18px;
    font-size:18px;
    font-weight:600;
    letter-spacing:-.02em;
    color:#0f172a;
}

.checkout-grid{
    display:grid;
    grid-template-columns:1.8fr 1fr;
    gap:24px;
    align-items:start;
}

.checkout-left{
    display:flex;
    flex-direction:column;
    gap:28px;

    /*
     * Grid items default to min-width:auto, so they refuse to shrink
     * below their content. The brand rail's cards then pushed this column
     * wider than its track and shoved the order summary off screen —
     * overflow-x on the rail can't help once its container has grown.
     */
    min-width:0;
}

/*
 * Sticky needs two things the previous version didn't have:
 *
 * 1. Travel room. As a grid item with align-self:start the sidebar
 *    shrank to its own height, so a sticky element inside had nowhere
 *    to move — it just scrolled away. Stretching the column to the
 *    full row height gives the inner element the whole left column to
 *    travel down.
 *
 * 2. A height that fits. An element taller than the space below the
 *    header can never pin, so the card is capped and scrolls inside
 *    itself on short screens.
 */
.desktop-sidebar{
    align-self:stretch;
    min-width:0;
}

.sidebar-sticky{
    position:sticky;
    top:calc(var(--spx-header-h) + 40px);
    max-height:calc(100vh - var(--spx-header-h) - 40px);
    overflow-y:auto;
    overflow-x:hidden;

    /*
     * Deliberately NOT overscroll-behavior:contain.
     *
     * Containing the scroll trapped the wheel over the summary: the card
     * scrolled to its end and then simply stopped, so the page wouldn't
     * move while the pointer was anywhere over it. Letting it chain means
     * the summary scrolls if it needs to, then the page carries on — and
     * when the card fits, which it does on most desktop viewports, the
     * wheel goes straight to the page as expected.
     */
}

.sidebar-sticky::-webkit-scrollbar{
    width:8px;
}

.sidebar-sticky::-webkit-scrollbar-thumb{
    background:#dfe4ea;
    border:2px solid #f6f7fb;
    border-radius:999px;
}

.checkout-footer{
    margin-top:60px;
    padding:30px 20px;
}

.footer-inner{
    max-width:1200px;
    margin:0 auto;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:40px;
    font-size:14px;
}

.footer-copy{
    color:#94a3b8;
}

.footer-links{
    display:flex;
    gap:40px;
}

.footer-links a{
    color:#312e81;
    text-decoration:none;
    transition:.2s;
}

.footer-links a:hover{
    color:#2563eb;
}


/* =========================================================
   5. TRUST STRIP
========================================================= */

/* ---- Premium trust strip ---- */
.trust-strip {
    display: flex;
    width: fit-content;
    max-width: 100%;
    margin: 1.25rem auto;
    align-items: stretch;
    padding: .4rem;
    background: #fff;
    border: 1px solid #e9edf4;
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 8px 20px rgba(16,24,40,.05);
    /*transition: transform .18s ease, box-shadow .18s ease;*/
}
.trust-strip:hover {
    /*transform: translateY(-1px);*/
    /*box-shadow: 0 2px 4px rgba(16,24,40,.05), 0 18px 40px rgba(16,24,40,.09);*/
}

.trust-item,
.trust-item-center { display: flex; align-items: center; gap: .7rem; padding: .62rem 1.35rem; }

.trust-google {
    width: 68px; height: 28px; flex: 0 0 auto;
    background: url('/hosting/assets/images/trust/google-clr.svg') center / contain no-repeat;
}

.trust-title { display: flex; align-items: center; gap: .45rem; }
.rating-text { font-weight: 800; font-size: 1.06rem; color: #151c2e; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.trust-subtitle { font-size: .76rem; color: #6b7690; margin-top: 2px; }

/* ---- Dynamic stars — driven by --rating (out of 5) ---- */
.rating-stars {
    display: inline-block;
    position: relative;
    font-size: 15px;
    line-height: 1;
    letter-spacing: 2px;
    font-family: DM Sans, sans-serif;
    white-space: nowrap;
}
.rating-stars::before {
    content: "\2605\2605\2605\2605\2605";       /* empty stars */
    color: #dfe3ea;
}
.rating-stars::after {
    content: "\2605\2605\2605\2605\2605";       /* gold stars, clipped to the rating */
    color: #f5a623;
    position: absolute;
    left: 0; top: 0;
    width: calc(var(--rating, 5) / 5 * 100%);
    overflow: hidden;
}

.trust-item-center { font-size: .9rem; color: #3b465e; font-weight: 500; }
.trust-item-center strong { color: #151c2e; font-weight: 800; font-variant-numeric: tabular-nums; }

.trust-flag { width: 26px; height: 19px; border-radius: 4px; object-fit: cover; box-shadow: 0 0 0 1px rgba(0,0,0,.06);
    background: url('/hosting/assets/images/trust/flagIndia.svg') center / contain no-repeat;}
.trust-country { font-size: .86rem; color: #3b465e; }
.trust-country strong { color: #151c2e; font-weight: 700; }

.trust-divider {
    width: 1px; margin: .55rem 0;
    background: linear-gradient(to bottom, transparent, #e3e8f0 22%, #e3e8f0 78%, transparent);
}

@media (max-width: 768px) {
    .trust-strip {
        flex-direction: column; align-items: stretch; margin-left: auto; margin-right: auto; }
    .trust-item, .trust-item-center { justify-content: center; }
    .trust-divider {
        width: auto; height: 1px; margin: 0 1rem;
        background: linear-gradient(to right, transparent, #e3e8f0 22%, #e3e8f0 78%, transparent);
    }
}

@media (max-width: 560px) {
    .trust-strip { display: none; }
}


/* =========================================================
   6. CARDS
========================================================= */

.card{
    padding:28px;
    background:#fff;
    border:1px solid #eef1f5;
    border-radius:16px;
    box-shadow:0 8px 24px rgba(15,23,42,.05);
}

.checkout-card{
    margin-bottom:20px;
    padding:24px;
    background:#fff;
    /*border:1px solid #e5e7eb;*/
    border-radius:18px;
    box-shadow:0 6px 18px rgba(15,23,42,.05);
    transition:.25s ease;
}

.checkout-card:hover{
    box-shadow:0 12px 28px rgba(15,23,42,.08);
}


/* =========================================================
   7. FORM CONTROLS
========================================================= */

.form-group{
    margin-bottom:24px;
}

.form-group label{
    display:block;
    margin-top:-3px;
    margin-bottom:7px;
    font-size:14px;
    font-weight:400;
    color:#464646;
}

.required{
    color:#ef4444;
}

.two-col{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
}

input,
select{
    width:100%;
    height:44px;
    padding:0 16px;
    font-size:14px;
    background:#fff;
    border:1px solid #d7dde5;
    border-radius:6px;
}

input::placeholder{
    color:#94a3b8;
    font-size:14px;
    font-weight:400;
}

input:focus{
    outline:none;
    border:2px solid #2563eb;
}

input[readonly]{
    background:#f8fafc;
}

select{
    padding:0 50px 0 16px;
    appearance:none;
    -webkit-appearance:none;
    -moz-appearance:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 16px center;
    background-size:18px;
}

select:hover{
    border-color:#2563eb;
}

select:focus{
    outline:none;
    border-color:#2563eb;
    box-shadow:0 0 0 3px rgba(37,99,235,.12);
}

/* Phone */

.phone-group{
    display:flex;
    overflow:hidden;
    border:1px solid #d7dde5;
    border-radius:6px;
}

.phone-group input{
    flex:1;
    border:none;
    border-radius:0;
}

.phone-code{
    width:80px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    font-size:16px;
    background:#f8fafc;
    border-right:1px solid #d7dde5;
}

.country-flag{
    width:19px;
    height:14px;
    border-radius:2px;
    object-fit:cover;
}

/* Help text */

.form-hint{
    display:block;
    margin-top:8px;
    font-size:12px;
    color:#6b7280;
}

.help-text,
.help-text-complete{
    margin-top:10px;
    font-size:14px;
    line-height:1.5;
    color:#6b7280;
}

.help-text-small{
    margin-top:5px;
    font-size:12px;
    line-height:1.5;
    color:#6b7280;
}


/* =========================================================
   8. BUTTONS
========================================================= */

.checkout-btn{
    width:100%;
    height:52px;
    font-family:'DM Sans',sans-serif;
    font-size:15.5px;
    font-weight:600;
    color:#fff;
    background:#2563eb;
    border:none;
    border-radius:8px;
    cursor:pointer;
    transition:.2s;
}

.checkout-btn:hover{
    background:#1d4ed8;
    box-shadow:0 6px 16px rgba(37,99,235,.28);
}

.checkout-btn:disabled{
    opacity:.7;
    cursor:not-allowed;
}


/* =========================================================
   9. PLAN CARD
   =========================================================
   The grid keeps the price block optically centred against the
   whole left column. The old flex version floated the struck price
   above the badge and the number, so nothing lined up.
========================================================= */

.plan-summary{
    display:grid;
    grid-template-columns:minmax(220px,1fr) auto;
    grid-template-areas:
        "label price"
        "select price"
        "note  price";
    align-items:center;
    column-gap:32px;
}

.plan-label{
    grid-area:label;
    display:block;
    margin:0 0 8px;
    font-size:14px;
    font-weight:600;
    color:#18181A;
}

.plan-renew{
    grid-area:note;
    margin:8px 0 0;
    font-size:12px;
    line-height:1.5;
    color:#464646;
}

/* ---------- Coupon ---------- */

.coupon-row .coupon-row-label{
    display:inline-flex;
    align-items:center;
    gap:7px;
    color:#15803d;
    font-weight:600;
}

.coupon-row span:last-child{
    color:#15803d !important;
}

.coupon-box{
    margin-top: 18px;
}

.coupon-toggle{
    display:inline-flex;
    padding:0;
    font-family:inherit;
    font-size:16px;
    font-weight:600;
    color:#1d4ed8;
    background:none;
    border:0;
    cursor:pointer;
}

.coupon-toggle:hover{
    color:#2563eb;
    /*text-decoration:underline;*/
}

.coupon-form{
    display:flex;
    gap:10px;
    margin-top:12px;
}

.coupon-input{
    flex:1;
    min-width:0;
    height:52px;
    text-transform:uppercase;
}

.coupon-input::placeholder{
    text-transform:none;
}

.coupon-apply{
    position:relative;
    flex:none;
    min-width:92px;
    height:52px;
    font-family:inherit;
    font-size:14px;
    font-weight:700;
    color:#2563eb;
    background:#fff;
    border:1.5px solid #2563eb;
    border-radius:8px;
    cursor:pointer;
    transition:background .15s ease, color .15s ease;
}

.coupon-apply:hover{
    background:#eff6ff;
}

.coupon-apply.is-loading{
    color:transparent !important;
    pointer-events:none;
}

.coupon-apply.is-loading::after{
    content:"";
    position:absolute;
    top:50%;
    left:50%;
    width:16px;
    height:16px;
    margin:-8px 0 0 -8px;
    border:2px solid rgba(37,99,235,.25);
    border-top-color:#2563eb;
    border-radius:50%;
    animation:domainSpin .7s linear infinite;
}

.coupon-error{
    margin-top:9px;
    font-size:13px;
    line-height:1.45;
    color:#dc2626;
}

.coupon-applied{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    font-size:14px;
    color:#64748b;
}

.coupon-chip{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:5px 8px 5px 12px;
    font-size:13px;
    font-weight:600;
    color:#15803d;
    background:#dcfce7;
    border-radius:999px;
}

.coupon-remove{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:18px;
    height:18px;
    padding:0;
    font-size:15px;
    line-height:1;
    color:#15803d;
    background:none;
    border:0;
    border-radius:50%;
    cursor:pointer;
}

.coupon-remove:hover{
    color:#fff;
    background:#16a34a;
}

/* The coupon controls shimmer with everything else while recalculating */
.summary-loading .coupon-box{
    opacity:.35;
    pointer-events:none;
}

/* ---------- Promo banner ---------- */

.promo-banner{
    display:flex;
    align-items:center;
    gap:14px;
    margin:15px 0 0;
    padding:14px 16px;
    background:#eff6ff;
    border:1px solid #dbeafe;
    border-radius:12px;
}

.promo-banner-domain{
    margin:16px 0 0;
}

.promo-icon{
    flex:none;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:38px;
    height:38px;
    font-size:18px;
    font-weight:700;
    color:#fff;
    background:#2563eb;
    border-radius:10px;
}

.promo-text{
    flex:1;
    min-width:0;
    font-size:14px;
    line-height:1.45;
    color:#1e3a5f;
}

.promo-text strong{
    font-weight:700;
    color:#0f172a;
}

.promo-btn{
    position:relative;
    flex:none;
    min-width:118px;
    padding:10px 18px;
    font-family:inherit;
    font-size:14px;
    font-weight:600;
    color:#fff;
    background:#2563eb;
    border:0;
    border-radius:9px;
    cursor:pointer;
    transition:background .15s ease, box-shadow .15s ease;
}

.promo-btn:hover{
    background:#1d4ed8;
    box-shadow:0 6px 16px rgba(37,99,235,.28);
}

.promo-btn:focus-visible{
    outline:2px solid #1d4ed8;
    outline-offset:2px;
}

/* Spinner while the term switch settles */
.promo-btn.is-loading{
    color:transparent !important;
    pointer-events:none;
}

.promo-btn.is-loading::after{
    content:"";
    position:absolute;
    top:50%;
    left:50%;
    width:16px;
    height:16px;
    margin:-8px 0 0 -8px;
    border:2px solid rgba(255,255,255,.4);
    border-top-color:#fff;
    border-radius:50%;
    animation:domainSpin .7s linear infinite;
}

@media(max-width:640px){

    .promo-banner{
        flex-wrap:wrap;
        gap:12px;
    }

    .promo-text{
        /*flex:1 1 100%;*/
        order:2;
    }

    .promo-btn{
        order:3;
        width:100%;
    }

}

/* ---------- Domain block in the summary ---------- */

.summary-domain-head{
    margin:0 0 10px;
    font-size:15px;
    font-weight:600;
    color:#0f172a;
    word-break:break-all;
}

/*
 * The label is the anchor. Relying on the ROW meant the offset parent
 * depended on which ancestor happened to be positioned — the sticky
 * sidebar could win and the box escaped the card. This element is one
 * we control completely, and it always sits at the left of its row, so
 * a fixed-width box opening rightward from it always fits.
 */


/* Plan picker above the period row, regular mode only */
.product-picker{
    margin-bottom:22px;
}

.product-picker .spx-select{
    width:var(--spx-select-w);
    max-width:100%;
}

@media(max-width:640px){
    .product-picker .spx-select{
        width:100%;
    }
}

/* ---------- Custom dropdown ----------
   A native <select> can't hold a badge inside an option, so the real
   <select> is hidden and this button + list drives it. */

.plan-select-wrap{
    grid-area:select;
    position:relative;
    z-index:20;
    max-width:330px;
}

.spx-select-native{
    display:none;
}

.spx-select{
    position:relative;
    width:100%;
}

.plan-select-wrap .spx-select{
    width:var(--spx-select-w);
    max-width:100%;
}

.spx-select-trigger{
    position:relative;
    width:100%;
    height:52px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    padding:0 16px;
    font-family:inherit;
    font-size:14px;
    font-weight:400;
    text-align:left;
    color:#171C19;
    background:#fff;
    border:1px solid #b4b4b4;
    outline:1px solid #ffffff;
    border-radius:8px;
    cursor:pointer;
    transition:border-color .15s ease, box-shadow .15s ease;
}

/*.spx-select-trigger:hover{*/
/*    border:2px solid #2563eb;*/
/*}*/

.spx-select-trigger:focus-visible,
.spx-select.is-open .spx-select-trigger{
    border:1px solid #2563eb;
    outline:1px solid #2563eb;
}

/* Inside a form the toggle has to match the inputs beside it —
   same height, border and radius, or it reads as a different control */
.form-group .spx-select-trigger{
    height:44px;
    font-size:14px;
    border:1px solid #d7dde5;
    border-radius:6px;
}

.form-group .spx-select-trigger:hover{
    border-color:#2563eb;
}

.form-group .spx-select-panel{
    border-radius:6px;
}

.spx-select-value{
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}

/* Nothing chosen yet — read as a placeholder, not a value */
.spx-select.is-empty .spx-select-value{
    color:#94a3b8;
}

.spx-select.has-error .spx-select-trigger{
    border-color:#dc2626;
}

.spx-select-error{
    display:none;
    margin-top:8px;
    font-size:13px;
    color:#dc2626;
}

.spx-select.has-error + .spx-select-error{
    display:block;
}

.spx-select-arrow{
    flex:none;
    color:#64748b;
    transition:transform .18s ease;
}

.spx-select .spx-select-arrow svg,   /* or whatever wraps it */
.spx-select svg {
    width: 24px;
    height: 24px;
}

.spx-select.is-open .spx-select-arrow{
    transform:rotate(180deg);
}

.spx-select-panel{
    position:absolute;
    top:calc(100% + 3px);
    left:0;
    right:0;
    z-index:60;
    max-height:260px;
    margin:0;
    padding:6px;
    overflow-y:auto;
    list-style:none;
    background:#fff;
    border:1px solid #e6e6e6;
    border-radius:10px;
    box-shadow:0 18px 40px rgba(15,23,42,.14);
    opacity:0;
    visibility:hidden;
    transform:translateY(-4px);
    transition:
        opacity .15s ease,
        transform .15s ease,
        visibility .15s;
}

.spx-select.is-open .spx-select-panel{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

/* Flipped above the trigger when there's no room below */
.spx-select.is-up .spx-select-panel{
    top:auto;
    bottom:calc(100% + 8px);
    transform:translateY(4px);
}

.spx-select.is-up.is-open .spx-select-panel{
    transform:translateY(0);
}

.spx-select-option{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    white-space:nowrap;
    padding:12px 14px;
    font-size:14px;
    font-weight:400;
    color:#171C19;
    border-radius:8px;
    cursor:pointer;
    transition:background .12s ease;
}

/* Gap so a hovered row never merges into the selected one above it */
.spx-select-option + .spx-select-option{
    margin-top:4px;
}

.spx-select-option:hover,
.spx-select-option.is-active{
    background:#f1f3f7;
}

/* Blue rather than another grey, so the two states stay distinguishable
   even when they sit next to each other */
.spx-select-option.is-selected{
    font-weight:600;
    color:#1d4ed8;
    background:#eaf1fe;
}

.spx-select-option.is-selected:hover,
.spx-select-option.is-selected.is-active{
    background:#dde8fd;
}

.spx-select-badge{
    flex:none;
    padding:4px 10px;
    font-size:12px;
    font-weight:600;
    color:#2563eb;
    background:#eff6ff;
    border-radius:999px;
}

.spx-select-option.is-selected .spx-select-badge{
    background:#fff;
}

/* ---------- Loading spinner in the trigger ----------
   Drawn with ::after rather than a <span>, so every dropdown gets one
   without needing the element in its markup. */

.spx-select-spinner{
    display:none;
}

.spx-select.is-loading .spx-select-arrow{
    visibility:hidden;
}

.spx-select.is-loading .spx-select-trigger{
    pointer-events:none;
    color:#94a3b8;
}

.spx-select.is-loading .spx-select-trigger::after{
    content:"";
    position:absolute;
    top:50%;
    right:17px;
    width:17px;
    height:17px;
    margin-top:-9px;
    border:2px solid rgba(37,99,235,.2);
    border-top-color:#2563eb;
    border-radius:50%;
    animation:domainSpin .7s linear infinite;
}

.plan-pricing{
    grid-area:price;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:14px;
}

.plan-save{
    display:inline-flex;
    align-items:center;
    padding:4px 10px;
    font-size:12px;
    font-weight:600;
    color:#15803d;
    background:#dcfce7;
    border-radius:10px;
    white-space:nowrap;
}

.plan-price-stack{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    line-height:1;
}

.plan-price{
    font-size:18px;
    font-weight:600;
    line-height:1;
    letter-spacing:-.02em;
    color:#0f172a;
    font-variant-numeric:tabular-nums;
}

/* the "/mo" after the price */
.plan-price-unit{
    margin-left:1px;
    font-size:14px;
    font-weight:500;
    color:#64748b;
}

.plan-old-price{
    margin:7px 0 0;
    font-size:14px;
    font-weight:400;
    color:#464646;
    text-decoration:line-through;
    font-variant-numeric:tabular-nums;
}

.plan-divider{
    margin:18px 0 18px;
}

.domain-divider{
    margin:10px 0 20px;
}

.plan-benefit{
    position:relative;
    display:flex;
    align-items:center;
    gap:10px;
}

/*.plan-benefit-icon{*/
/*    width:34px;*/
/*    height:34px;*/
/*    flex-shrink:0;*/
/*    display:flex;*/
/*    align-items:center;*/
/*    justify-content:center;*/
/*    background:#e8f2ff;*/
/*    border-radius:50%;*/
/*}*/

.plan-benefit-icon img{
    width:18px;
}

.plan-benefit-icon { color: #009e5b; line-height: 0; }            /* green — free domain / +months */
.plan-benefit.is-nudge .plan-benefit-icon { color: #e69800; }    /* yellow — none apply */

/* flex:0 1 auto, not flex:1 — the text should hug its content so the
   info icon sits right after the sentence instead of at the card edge */
.plan-benefit-text{
    flex:0 1 auto;
    min-width:0;
    font-size:13.5px;
    line-height:1.5;
    color:#334155;
}

.plan-benefit-text strong{
    color:#0f172a;
    font-weight:600;
}

/* ---------- Info icon + tooltip ---------- */

.plan-benefit-info-wrap{
    position:relative;
    flex:none;
    display:flex;
    align-items:center;
    margin-left:-4px;
}

/* Was an inert <div>, now a real button */
.plan-benefit-info{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:20px;
    height:20px;
    padding:0;
    color:#0F172A;
    background:none;
    border:0;
    cursor:pointer;
    transition:color .15s ease;
}

.plan-benefit-info:hover,
.plan-benefit-info-wrap.is-open .plan-benefit-info{
    color:#0f172a;
}

.plan-benefit-info:focus-visible{
    outline:2px solid #2563eb;
    outline-offset:3px;
    border-radius:50%;
}

/* Centred under the icon */
.plan-tooltip{
    position:absolute;
    bottom:calc(100% + 10px);   /* open upward by default */
    top:auto;
    left:50%;
    z-index:80;
    width:260px;
    max-width:calc(100vw - 40px);
    padding:16px 18px;
    font-size:13.5px;
    font-weight:400;
    line-height:1.6;
    text-align:left;
    color:#fff;
    background:#04154f;
    border-radius:12px;
    box-shadow:0 14px 34px rgba(4,21,79,.28);
    opacity:0;
    visibility:hidden;
    transform:translate(-50%,4px);
    transition:
        opacity .15s ease,
        transform .15s ease,
        visibility .15s;
}

.plan-tooltip::before{
    content:"";
    position:absolute;
    bottom:-6px;
    top:auto;
    left:50%;
    margin-left:-7px;
    border-left:7px solid transparent;
    border-right:7px solid transparent;
    border-top:7px solid #04154f;
}

/* Flipped state — opens downward when there isn't room above */
.plan-benefit-info-wrap.tip-down .plan-tooltip{
    top:calc(100% + 10px);
    bottom:auto;
    transform:translate(-50%,-4px);
}
.plan-benefit-info-wrap.tip-down .plan-tooltip::before{
    top:-6px;
    bottom:auto;
    border-top:none;
    border-bottom:7px solid #04154f;
}

.plan-tooltip strong{
    color:#fff;
    font-weight:600;
}

.plan-benefit-info-wrap:hover .plan-tooltip,
.plan-benefit-info-wrap.is-open .plan-tooltip{
    opacity:1;
    visibility:visible;
    transform:translate(-50%,0);
}


/* =========================================================
   10. DOMAIN CONFIGURATION
========================================================= */

/* ---------- Radio options ---------- */

.domain-option{
    margin-bottom:10px;
}

.domain-radio{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:15px;
    font-weight:500;
    line-height:1;
    color:#1f2937;
    cursor:pointer;
    user-select:none;
}

.domain-radio span{
    display:inline-block;
    line-height:1.4;
    user-select:none;
}

.domain-radio input[type="radio"]{
    width:18px;
    height:18px;
    margin:0 5px 0 0;
    flex-shrink:0;
}

/* ---------- Boxes and hints ---------- */

/* Animated open/close. grid-template-rows 0fr → 1fr transitions to the
   content's real height, which max-height can't do without a magic number.
   The inner wrapper is what gets clipped.
   Shared by the domain boxes and the customer sign-in / details boxes. */

.spx-accordion{
    display:grid;
    grid-template-rows:0fr;
    margin:0;
    opacity:0;
    transition:
        grid-template-rows .32s ease,
        opacity .22s ease,
        margin .32s ease;
}

.spx-accordion-inner{
    overflow:hidden;
}

.spx-accordion.is-open{
    grid-template-rows:1fr;
    opacity:1;
}

#existing-domain-box.is-open{
    margin:14px 0 0;
}

/* Bottom margin so the results panel doesn't touch the
   "I will use my existing domain" option below it */
#new-domain-box.is-open{
    margin:14px 0 22px;
}

/* No chooser above it — the card fills the checkout card on its own */
#domainChooserHead[style*="none"] + #new-domain-box.is-open{
    margin:0;
}

/* ---------- Search / input field ---------- */

/* Sits under the section heading as a subtitle */
.domain-tlds{
    margin:16px 0 16px;
    font-size:14px;
    line-height:1.6;
    color:#464646;
}

.domain-tlds strong{
    font-weight:600;
    color:#0f172a;
}

.domain-field{
    position:relative;
}

.domain-field input{
    height:56px;
    padding:0 16px 0 50px;
    font-size:15px;
    border-radius:10px;
}

.domain-field-icon{
    position:absolute;
    top:50%;
    left:18px;
    width:20px;
    height:20px;
    margin-top:-10px;
    color:#64748b;
    pointer-events:none;
    transition:color .15s ease;
}

.domain-field:focus-within .domain-field-icon{
    color:#2563eb;
}

/* Trailing negative margins had to go — with overflow:hidden they
   clip the last few pixels of content instead of just overflowing. */

.domain-note-link{
    color:#2563eb;
    font-weight:600;
    text-decoration:none;
}

.domain-note-link:hover{
    text-decoration:underline;
}

/* Confirmation under the existing-domain field */
.domain-confirm{
    display:flex;
    align-items:center;
    gap:7px;
    margin-top:11px;
    font-size:13px;
    line-height:1.45;
    color:#15803d;
}

.domain-confirm-icon{
    flex:none;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:15px;
    height:15px;
    font-size:9px;
    font-weight:700;
    line-height:1;
    color:#fff;
    background:#16a34a;
    border-radius:50%;
}

.domain-confirm.is-error{
    color:#b91c1c;
}

.domain-confirm.is-error .domain-confirm-icon{
    background:#dc2626;
}

/* ---------- Search ---------- */

.domain-search-loader{
    display:flex;
    align-items:center;
    justify-content:center;
    padding:40px 0;
    min-height:0;
    height:auto;
}

.domain-search-content{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
}

.domain-spinner{
    width:52px;
    height:52px;
    border:4px solid rgba(37,99,235,.15);
    border-top-color:#2563eb;
    border-right-color:#2563eb;
    border-radius:50%;
    animation:domainSpin .8s linear infinite;
}

.domain-search-text{
    margin:14px 0 0;
    font-size:14px;
    text-align:center;
    color:#6b7280;
}

/* ---------- Results ---------- */

/* ---------- Results panel ----------
   A fixed-height scrollable list attached to the search box, so five
   extensions don't push the rest of the page down. Empty until a search
   returns, hence :not(:empty) for the border. */

#domain-results{
    margin:14px 0 0;
    max-height:296px;
    overflow-y:auto;
    overscroll-behavior:contain;
    border-radius:10px;
}

#domain-results:not(:empty){
    border:1px solid #e6eaf0;
}

/* No gap above "existing domain" until there are search results to show */
#domain-results:empty { display: none; }

#domain-results::-webkit-scrollbar{
    width:10px;
}

#domain-results::-webkit-scrollbar-thumb{
    background:#d5dbe4;
    border:3px solid #fff;
    border-radius:999px;
}

#domain-results::-webkit-scrollbar-thumb:hover{
    background:#b9c2cf;
}

.spx-domain-card{
    display:flex;
    align-items:center;
    gap:14px;
    margin:0;
    padding:13px 16px;
    border:none;
    border-bottom:1px solid #eef1f5;
    border-radius:0;
}

.spx-domain-card:last-child{
    border-bottom:none;
}

.spx-domain-card.unavailable{
    display:flex;
    align-items:center;
    justify-content:space-between;
    background:#fff;
    opacity:1;
}

.spx-domain-card.unavailable .spx-domain-name{
    color:#94a3b8;
}

.spx-domain-left{
    flex:1;
    min-width:0;
    display:flex;
    align-items:center;
}

.spx-domain-name{
    font-size:15px;
    font-weight:600;
    line-height:1.2;
    color:#0f172a;
    word-break:break-all;
}

.spx-domain-status{
    margin-top:6px;
    font-size:14px;
    font-weight:500;
}

.spx-domain-status.unavailable{
    margin:0;
    padding:5px 11px;
    font-size:12.5px;
    font-weight:500;
    color:#64748b;
    background:#f3f4f6;
    border:1px solid #e5e7eb;
    border-radius:999px;
    white-space:nowrap;
}

/* Prices sit side by side, not stacked — half the row height.
   A sibling of the name, so name / price / button share one centred row. */
.spx-domain-price{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:8px;
    margin:0;
    text-align:right;
    white-space:nowrap;
    line-height:1.2;
    font-variant-numeric:tabular-nums;
}

.domain-old-price{
    margin:0;
    font-size:13.5px;
    font-weight:400 !important;
    color:#94a3b8;
}

.domain-new-price{
    font-size:15px;
    font-weight:600;
    color:#0f172a;
}

.domain-new-price span{
    font-size:12.5px;
    font-weight:400;
    color:#64748b;
}

.spx-domain-free{
    padding:3px 9px;
    font-size:12px;
    font-weight:600;
    color:#15803d;
    background:#dcfce7;
    border-radius:999px;
    white-space:nowrap;
}


/* ---------- Rows are the control now ---------- */

/* Holds the search and the selected-domain card. Only one is ever
   visible; the spinner covers whichever is swapping out. */
.domain-stage{
    position:relative;
}

.domain-stage.is-loading{
    min-height:170px;
}

.domain-stage.is-loading > #domainSearchArea,
.domain-stage.is-loading > .sdc{
    opacity:0;
    pointer-events:none;
}

.domain-stage-loader{
    position:absolute;
    inset:0;
    z-index:5;
    display:flex;
    align-items:center;
    justify-content:center;
}

.domain-stage-loader .domain-spinner{
    width:46px;
    height:46px;
    border-width:3px;
}

.spx-domain-card.is-selectable{
    cursor:pointer;
    transition:background .12s ease;
}

.spx-domain-card.is-selectable:hover,
.spx-domain-card.is-selectable:focus-visible{
    outline:none;
    background:#f6f8fb;
}

.spx-domain-card.is-chosen{
    background:#eff6ff;
}

.spx-domain-go{
    flex:none;
    color:#94a3b8;
    transition:transform .15s ease, color .15s ease;
}

.spx-domain-card.is-selectable:hover .spx-domain-go{
    color:#2563eb;
    transform:translateX(2px);
}

/* =========================================================
   SELECTED DOMAIN CARD
========================================================= */

/* Sits alone in the card once chosen, so it carries its own spacing */
/*
 * Each domain is its own card. The parent .checkout-card drops its own
 * chrome when cards are showing (is-cards-only), so two domains read as
 * two panels rather than one long undivided box.
 */
.checkout-card.is-cards-only{
    padding:0;
    background:transparent;
    border:0;
    box-shadow:none;
}

.checkout-card.is-cards-only:hover{
    box-shadow:none;
}

.sdc{
    margin:0 0 20px;
    padding:26px 30px;
    background:#fff;
    /*border:1px solid #e5e7eb;*/
    border-radius:18px;
    box-shadow:0 6px 18px rgba(15,23,42,.05);
}

.sdc:last-child{
    margin-bottom:0;
}

@media(max-width:640px){

    .sdc{
        padding:22px 18px;
    }

}

.sdc-head{
    display:flex;
    align-items:center;
    gap:13px;
    margin-bottom:22px;
}

.sdc-icon{
    flex:none;
    display:flex;
    align-items:center;
    justify-content:center;
    width:40px;
    height:40px;
    color:#0f172a;
    background:#eff6ff;
    border-radius:8px;
}

.sdc-title{
    flex:1;
    min-width:0;
}

.sdc-name{
    font-size:16px;
    font-weight:700;
    color:#0f172a;
    word-break:break-all;
}

.sdc-sub{
    margin-top:2px;
    font-size:13px;
    color:#64748b;
}

.sdc-remove{
    flex:none;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:36px;
    height:36px;
    padding:0;
    color:#64748b;
    background:none;
    border:0;
    border-radius:9px;
    cursor:pointer;
    transition:color .15s ease, background .15s ease;
}

.sdc-remove:hover{
    color:#dc2626;
    background:#fef2f2;
}

.sdc-remove:focus-visible{
    outline:2px solid #dc2626;
    outline-offset:2px;
}

.sdc-label{
    display:block;
    margin-bottom:8px;
    font-size:14px;
    font-weight:600;
    color:#18181A;
}

.sdc-period-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
}

/* flex:none — as a flex item it was shrinking well below its width,
   which squashed the panel and gave it a horizontal scrollbar */
.sdc-period-row .spx-select{
    flex:none;
    width:var(--spx-select-w);
    max-width:60%;
}

.sdc-pricing{
    display:flex;
    align-items:center;
    gap:12px;
}

.sdc-badge{
    display:inline-flex;
    align-items:center;
    padding:5px 11px;
    font-size:12.5px;
    font-weight:600;
    color:#15803d;
    background:#dcfce7;
    border-radius:999px;
    white-space:nowrap;
}

.sdc-price-stack{
    text-align:right;
    line-height:1.15;
}

.sdc-price{
    font-size:20px;
    font-weight:700;
    color:#0f172a;
    font-variant-numeric:tabular-nums;
}

.sdc-old{
    margin-top:4px;
    font-size:14px;
    color:#515151;
    text-decoration:line-through;
    font-variant-numeric:tabular-nums;
}

/* Stated when the registry forbids a shorter term */
.sdc-period-note{
    margin:10px 0 0;
    font-size:12.5px;
    line-height:1.5;
    color:#64748b;
}

/* Term fixed by the registry — nothing to choose */
.spx-select.is-disabled{
    opacity:.55;
    pointer-events:none;
}

.spx-select.is-disabled .spx-select-trigger{
    cursor:not-allowed;
    background:#f8fafc;
}

.sdc-renew{
    margin:10px 0 0;
    font-size:12.5px;
    color:#64748b;
}

.sdc-note{
    display:flex;
    align-items:center;
    gap:8px;
    margin-top:16px;
    padding:8px 16px;
    font-size:14px;
    line-height:1.5;
    color:#0d6b31;
    background:#ecfdf5;
    border-radius:8px;
}

html, body { overflow-x: hidden; max-width: 100%; }

.sdc-note strong{
    font-weight:700;
}

.sdc-note-icon{
    flex:none;
    font-size:14px;
    color: #0d6b31; 
    line-height: 1;
}

.sdc-divider  { border: 0; border-top: 1px solid #e7ebf1; margin: 1rem 0 0; }
.sdc-privacy  { display: flex; align-items: center; gap: 10px; margin-top: 16px; font-size: 14px; }
.sdc-privacy-icon { line-height: 0; flex: 0 0 auto; }
.sdc-privacy-info { border: 0; background: none; padding: 0; margin-left: 2px; cursor: pointer; color: #98a2b3; line-height: 0; flex: 0 0 auto; }
.sdc-privacy-info:hover { color: #667085; }

@media(max-width:640px){

    .sdc-period-row{
        flex-direction:column;
        align-items:stretch;
        gap:14px;
    }

    .sdc-period-row .spx-select{
        width:100%;
        max-width:none;
    }

    .sidebar-sticky{
        position:static;
        max-height:none;
        overflow:visible;
    }

    /* Same reading order as the plan card: struck → price → badge */
    .sdc-pricing{
        flex-direction:row-reverse;
        justify-content:flex-end;
        align-items:baseline;
        gap:10px;
    }

    .sdc-price-stack{
        display:flex;
        flex-direction:row-reverse;
        align-items:baseline;
        gap:9px;
    }

    .sdc-old{
        margin:0;
    }

}


.spx-domain-btn{
    flex:none;
    min-width:104px;
    padding:7px 14px;
    font-size:13.5px;
    font-weight:500;
    color:#2563eb;
    background:#fff;
    border:1px solid #007fff;
    border-radius:8px;
    cursor:pointer;
    transition:.2s;
}

.spx-domain-btn:hover{
    background:#2563eb;
    color:#fff;
}

.selected-domain{
    background:#2563eb !important;
    border-color:#2563eb !important;
    color:#fff !important;
}

.selected-domain:hover{
    background:#dc2626 !important;
    border-color:#dc2626 !important;
}


/* =========================================================
   10b. PROTECT YOUR BRAND
   =========================================================
   Sits on the page background rather than in a .checkout-card, so it
   reads as a suggestion rather than another step to complete.
   Uses the site's own blue, not the purple from the reference.
========================================================= */

.brand-guard{
    margin:0 0 28px;
    padding:4px 2px 0;

    /* Flex item: same reason as .checkout-left above */
    min-width:0;
}

.brand-guard-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:20px;
    margin-bottom:20px;
}

.brand-guard-title{
    margin:0 0 5px;
    font-size:19px;
    font-weight:700;
    letter-spacing:-.01em;
    color:#0f172a;
}

.brand-guard-sub{
    margin:0;
    max-width:60ch;
    font-size:14px;
    line-height:1.55;
    color:#515151;
}

.brand-guard-nav{
    display:flex;
    flex:none;
    gap:10px;
}

.brand-guard-arrow{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:42px;
    height:42px;
    padding:0;
    color:#0f172a;
    background:#fff;
    border:1px solid #e2e8f0;
    border-radius:50%;
    cursor:pointer;
    transition:box-shadow .2s ease, border-color .2s ease, color .2s ease;
}

.brand-guard-arrow:hover{
    color:#2563eb;
    border-color:#2563eb;
    box-shadow:0 6px 16px rgba(15,23,42,.10);
}

.brand-guard-arrow:focus-visible{
    outline:2px solid #2563eb;
    outline-offset:2px;
}

/*
 * Four per view, the rest scrolled to.
 *
 * minmax(0,1fr) made the columns divide the VISIBLE width instead, so
 * however many suggestions there were they all squeezed in — two cards
 * filled the rail, nothing overflowed, and the arrows had nothing to
 * scroll. A fixed fraction of the viewport gives a real overflow.
 */
.brand-guard-rail{
    --bg-gap:16px;
    --bg-per-view:4;

    display:grid;
    grid-auto-flow:column;
    grid-auto-columns:calc(
        (100% - (var(--bg-per-view) - 1) * var(--bg-gap)) / var(--bg-per-view)
    );

    /* Lets the rail scroll rather than stretch its parent */
    min-width:0;
    max-width:100%;
    gap:var(--bg-gap);
    overflow-x:auto;
    scroll-snap-type:x proximity;
    scrollbar-width:none;
    padding-bottom:4px;
    cursor:grab;
}

.brand-guard-rail::-webkit-scrollbar{
    display:none;
}

/* While being dragged */
.brand-guard-rail.is-dragging{
    cursor:grabbing;
    scroll-snap-type:none;
    scroll-behavior:auto;
}

.brand-guard-rail.is-dragging .bg-card{
    pointer-events:none;   /* a drag shouldn't press a button */
}

.brand-guard-arrow[disabled]{
    opacity:.35;
    cursor:default;
    box-shadow:none;
}

.brand-guard-arrow[disabled]:hover{
    color:#0f172a;
    border-color:#e2e8f0;
    box-shadow:none;
}

.brand-guard-rail::-webkit-scrollbar{
    display:none;
}

.bg-card{
    display:flex;
    flex-direction:column;
    gap:14px;
    padding:20px;
    background:#fff;
    /*border:1px solid #e5e7eb;*/
    border-radius:16px;
    box-shadow:0 2px 8px rgba(15,23,42,.04);
    scroll-snap-align:start;
    transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.bg-card:hover{
    /*transform:translateY(-4px);*/
    border-color:#2563eb;
    /*box-shadow:0 12px 26px rgba(15,23,42,.10);*/
}

.bg-ext{
    font-size:26px;
    font-weight:700;
    letter-spacing:-.02em;
    color:#2563eb;
    word-break:break-all;
}

.bg-price{
    display:flex;
    flex-direction: column;
    align-items:baseline;
    flex-wrap:wrap;
    gap:3px;
    margin-top:auto;
    font-variant-numeric:tabular-nums;
}

.bg-was{
    font-size:16px;
    color:#515151;
    text-decoration:line-through;
}

.bg-now{
    font-size:18px;
    font-weight:600;
    color:#0f172a;
}

.bg-per{
    font-size:14px;
    font-weight:400;
    color:#515151;
}

.bg-add{
    height:46px;
    width:100%;
    font-family:inherit;
    font-size:14.5px;
    font-weight:600;
    color:#2563eb;
    background:#fff;
    border:1.5px solid #2563eb;
    border-radius:11px;
    cursor:pointer;
    transition:background .25s ease, color .25s ease, box-shadow .25s ease;
}

.bg-add:hover{
    color:#fff;
    background:#2563eb;
    /*box-shadow:0 6px 16px rgba(37,99,235,.25);*/
}

.bg-add:focus-visible{
    outline:2px solid #1d4ed8;
    outline-offset:2px;
}

.bg-add.is-added{
    color:#fff;
    background:#2563eb;
    border-color:#2563eb;
    cursor:default;
}

.bg-add .bg-spinner {
    display: inline-block;
    width: 15px; height: 15px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    opacity: .75;
    vertical-align: middle;
    animation: bgSpin .6s linear infinite;
}
@keyframes bgSpin { to { transform: rotate(360deg); } }

@media(max-width:900px){

    .brand-guard-rail{
        --bg-per-view:2;
    }

}

@media(max-width:640px){

    .brand-guard-head{
        flex-direction:column;
        gap:14px;
    }

    .brand-guard-nav{
        display:none;   /* swipe instead */
    }

    .brand-guard-rail{
        --bg-per-view:2.40;   /* a sliver of the next card hints at more */
        --bg-gap:12px;
    }

}

@media(prefers-reduced-motion:reduce){

    .bg-card,
    .bg-add,
    .brand-guard-arrow{
        transition:none;
    }

    .bg-card:hover{
        transform:none;
    }

}


/* =========================================================
   11. CUSTOMER / LOGIN
========================================================= */

.checkout-option{
    display:flex;
    align-items:center;
    gap:14px;
    font-size:14px;
    font-weight:500;
    color:#111827;
    cursor:pointer;
    user-select:none;
}

.checkout-option input[type="radio"]{
    width:18px;
    height:18px;
    margin:0;
    flex-shrink:0;
    accent-color:#0075FF;
    cursor:pointer;
}

.checkout-option span{
    flex:1;
    line-height:1.4;
}

#loginBox.is-open,
#registrationBox.is-open{
    margin-top:20px;
}

.login-success{
    display:flex;
    align-items:center;
    gap:18px;
    margin:18px 0;
    padding:18px 22px;
    background:#f8fafc;
    border:1px solid #e2e8f0;
    border-radius:12px;
}

.login-success-icon{
    width:32px;
    height:32px;
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:18px;
    font-weight:600;
    color:#fff;
    background:#16a34a;
    border-radius:50%;
}

.login-success-title{
    font-size:18px;
    font-weight:700;
    color:#111827;
}

.login-success-email{
    margin-top:4px;
    font-size:15px;
    color:#64748b;
}

.login-success a{
    display:inline-block;
    margin-top:10px;
    font-weight:600;
    color:#2563eb;
    text-decoration:none;
}

.login-success a:hover{
    text-decoration:underline;
}

/* Email availability */

.email-error{
    display:none;
    margin-top:8px;
    font-size:14px;
    color:#dc2626;
}

.email-exists-alert{
    margin-top:10px;
    padding:12px 14px;
    font-size:14px;
    line-height:1.5;
    color:#B91C1C;
    background:#FEF2F2;
    border:1px solid #FECACA;
    border-radius:8px;
}

.input-error{
    border-color:#dc2626 !important;
}

.input-success{
    border-color:#16a34a !important;
}


/* =========================================================
   12. GST
========================================================= */

.gst-section{
    margin-top:20px;
}

.gst-toggle{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:8px;
    cursor:pointer;
    user-select:none;
}

.gst-toggle input{
    width:14px;
    height:14px;
    cursor:pointer;
}

.gst-toggle span{
    font-size:14px;
}

.gst-toggle small{
    color:#64748b;
}

.gst-info{
    position:relative;
    width:15px;
    height:15px;
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:11px !important;
    font-weight:700;
    color:#3b82f6;
    border:2px solid #3b82f6;
    border-radius:50%;
    cursor:pointer;
}

.gst-tooltip{
    position:absolute;
    top:24px;
    left:50%;
    transform:translateX(-50%);
    z-index:999;
    width:240px;
    max-width:calc(100vw - 40px);
    padding:16px 20px;
    font-size:14px;
    font-weight:400;
    line-height:1.6;
    text-align:left;
    color:#fff;
    background:#04154f;
    border-radius:12px;
    box-shadow:0 10px 30px rgba(0,0,0,.15);
    opacity:0;
    visibility:hidden;
    transition:.2s ease;
}

.gst-tooltip::before{
    content:"";
    position:absolute;
    top:-7px;
    left:50%;
    transform:translateX(-50%);
    border-left:8px solid transparent;
    border-right:8px solid transparent;
    border-bottom:8px solid #04154f;
}

.gst-info:hover .gst-tooltip,
.gst-info.active .gst-tooltip{
    opacity:1;
    visibility:visible;
}

.gst-fields{
    max-height:0;
    margin-top:0;
    overflow:hidden;
    opacity:0;
    transition:
        max-height .2s ease,
        opacity .25s ease,
        margin-top .2s ease;
}

.gst-fields.active{
    max-height:300px;
    margin-top:20px;
    opacity:1;
}


/* =========================================================
   13. ORDER SUMMARY
========================================================= */

.summary-plan{
    margin-bottom:16px;
    font-size:15px;
    font-weight:600;
    color:#0f172a;
}

/* Labels muted, values dark and semibold, digits on a fixed width so
   the column lines up however long the number is */
.summary-row{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:16px;
    margin-bottom:12px;
    font-size:14px;
    color:#334155;
}

.summary-row span:last-child{
    font-weight:600;
    color:#0f172a;
    white-space:nowrap;
    font-variant-numeric:tabular-nums;
}

.summary-domain-name{
    margin-top:4px;
    font-size:13px;
    font-weight:400;
    color:#64748b;
    word-break:break-word;
}

.total{
    margin-bottom:0;
    font-size:18px;
    font-weight:600;
    color:#0f172a;
}

.summary-row.total span:last-child,
.mobile-summary-row.total span:last-child{
    font-size:18px;
    font-weight:600;
    letter-spacing:-.01em;
    color:#0f172a;
}

/* List price sits to the left of what's actually charged */
.summary-row .strike,
.mobile-summary-row .strike{
    margin-right:8px;
}

.summary-row.total .strike,
.mobile-summary-row.total .strike{
    font-size: 16px !important;
    font-weight: 400 !important;
}

.desktop-summary-btn{
    margin-top:22px;
}


/* =========================================================
   14. MOBILE DRAWER
========================================================= */

#spxMobileCheckout{
    position:fixed;
    left:2px;
    right:2px;
    bottom:1px;
    z-index:9999;
    max-width:100vw;
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:16px;
    box-shadow:0 -10px 30px rgba(0,0,0,.08);
}

.spx-mobile-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:20px;
    max-height:75px;
    overflow:hidden;
    font-size:18px;
    font-weight:600;
    opacity:1;
    transition:
        max-height .2s ease,
        opacity .2s ease;
}

#spxMobileCheckout.open .spx-mobile-header{
    display:none;
}

.spx-toggle-btn{
    padding:6px;
    background:transparent;
    border:none;
    border-radius:8px;
    outline:none;
    cursor:pointer;
    transform:rotate(180deg);
    transition:.2s;
    -webkit-tap-highlight-color:transparent;
}

.spx-toggle-btn:hover{
    background:#e0edff;
}

.spx-toggle-btn:focus,
.spx-toggle-btn:active{
    outline:none;
    background:#fff;
    box-shadow:none;
}

.spx-open-icon,
.spx-close-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    width:20px;
    height:20px;
}

#spxMobileContent{
    max-height:0;
    padding:0 20px;
    overflow:hidden;
    opacity:0;
    transition:
        max-height .2s ease,
        opacity .25s ease,
        padding .2s ease;
}

#spxMobileCheckout.open #spxMobileContent{
    max-height:fit-content;
    padding:0 20px 20px;
    opacity:1;
}

.mobile-summary-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-top:10px;
    margin-bottom:10px;
}

.mobile-summary-row{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:16px;
    padding:9px 0;
    font-size:14px;
    color:#334155;
}

.mobile-summary-row span:last-child{
    font-weight:600;
    color:#0f172a;
    white-space:nowrap;
    font-variant-numeric:tabular-nums;
}

.mobile-summary-row.total{
    font-size:16px;
    font-weight:700;
    color:#0f172a;
}

.mobile-summary-divider{
    margin:15px 0;
    border:none;
    border-top:1px solid #e5e7eb;
}

.spx-close-summary{
    width:30px;
    height:30px;
    margin-top:13px;
    padding:6px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:transparent;
    border:none;
    border-radius:8px;
    cursor:pointer;
}

.spx-close-summary:hover{
    background:#e0edff;
}

.spx-mobile-footer{
    padding:0 20px 20px;
}


/* =========================================================
   15. PAYMENT TRUST
========================================================= */

.spx-payment-trust{
    padding:15px 0 0;
    text-align:center;
}

.spx-guarantee{
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-bottom:10px;
    font-size:14px;
    font-weight:600;
    color:#15222E;
}

.spx-payment-title{
    /*margin-bottom:10px;*/
    font-size:13px;
    font-weight:600;
    color:#374151;
}

.spx-payment-methods{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    gap:4px;
    margin-bottom:10px;
}

.spx-payment-methods img{
    height:28px;
    width:auto;
    transition:.2s;
}

.spx-payment-note{
    font-size:13px;
    line-height:1.5;
    color:#6B7280;
}


/* =========================================================
   16. ALERTS + UTILITIES
========================================================= */

.error{
    /*margin-bottom:20px;*/
    padding:12px;
    color:#dc2626;
    background:#fee2e2;
    border-radius:8px;
}

.strike{
    display: inline-block;
    font-size: 12px;
    font-weight: 400 !important;
    color: #515151 !important;
    text-decoration: line-through;
}

.discount{
    font-weight:600;
    color:#16a34a;
}

.badge{
    display:inline-block;
    margin-bottom:20px;
    padding:5px 12px 6px;
    color:#2563eb;
    background:#eff6ff;
    border-radius:8px;
}


/* =========================================================
   17. ANIMATIONS
========================================================= */

.shake{
    animation:shakeX .4s;
}

@keyframes shakeX{
    0%,100%{ transform:translateX(0); }
    25%{ transform:translateX(-4px); }
    75%{ transform:translateX(4px); }
}

@keyframes domainSpin{
    to{ transform:rotate(360deg); }
}

/* Placeholder shimmer while a plan switch recalculates */

.spx-skeleton{
    display:inline-block;
    min-width:48px;
    color:transparent !important;
    border-radius:6px;
    background-image:linear-gradient(90deg,#eef1f5 25%,#e1e7ef 37%,#eef1f5 63%);
    background-size:400% 100%;
    animation:spxShimmer 1.1s ease-in-out infinite;
    pointer-events:none;
    user-select:none;
}

.spx-skeleton *{
    visibility:hidden;
}

@keyframes spxShimmer{
    0%   { background-position:100% 50%; }
    100% { background-position:0 50%; }
}

/* ---------- Whole order summary in a loading state ---------- */

.summary-loading .section-title-summary,
.summary-loading .summary-plan,
.summary-loading .summary-domain-head,
.summary-loading .summary-row,
.summary-loading .mobile-summary-row{
    color:transparent !important;
    border-radius:6px;
    background-image:linear-gradient(90deg,#f1f3f7 25%,#e7ebf1 37%,#f1f3f7 63%);
    background-size:400% 100%;
    animation:spxShimmer 1.1s ease-in-out infinite;
}

.summary-loading .section-title-summary *,
.summary-loading .summary-plan *,
.summary-loading .summary-domain-head *,
.summary-loading .summary-row *,
.summary-loading .mobile-summary-row *{
    visibility:hidden;
}

.summary-loading .checkout-btn{
    color:#94a3b8;
    background:#eef1f5;
    box-shadow:none;
    pointer-events:none;
}

.summary-loading .spx-payment-trust{
    opacity:.3;
}

/* ---------- Spinner on the domain buttons ---------- */

.spx-domain-btn.is-loading{
    position:relative;
    color:transparent !important;
    pointer-events:none;
}

.spx-domain-btn.is-loading::after{
    content:"";
    position:absolute;
    top:50%;
    left:50%;
    width:16px;
    height:16px;
    margin:-8px 0 0 -8px;
    border:2px solid rgba(37,99,235,.25);
    border-top-color:#2563eb;
    border-radius:50%;
    animation:domainSpin .7s linear infinite;
}

/* White-on-blue while it says Remove */
.spx-domain-btn.selected-domain.is-loading::after{
    border-color:rgba(255,255,255,.4);
    border-top-color:#fff;
}

@media(prefers-reduced-motion:reduce){

    .shake{
        animation:none;
    }

    .domain-spinner{
        animation-duration:1.6s;
    }

    .promo-btn,
    .spx-select-panel,
    .spx-select-arrow,
    .spx-select-option,
    .domain-field-icon,
    .plan-tooltip,
    .spx-accordion{
        transition:none;
    }

    .spx-skeleton,
    .summary-loading .section-title-summary,
    .summary-loading .summary-plan,
    .summary-loading .summary-domain-head,
    .summary-loading .summary-row,
    .summary-loading .mobile-summary-row{
        animation:none;
    }

}


/* =========================================================
   18. RESPONSIVE
   =========================================================
   Ordered widest → narrowest so the narrower rule always wins.
========================================================= */

@media(min-width:901px){

    #spxMobileCheckout{
        display:none;
    }

}

@media(max-width:900px){

    .checkout-grid{
        grid-template-columns:1fr;
    }

    .checkout-heading{
        font-size:18px;
        margin: 30px 0 18px;
    }

    .desktop-sidebar{
        display:block;
        margin-top:20px;
    }

    .section-title-summary{
        margin-top:20px;
        margin-bottom:10px;
    }

}

@media(max-width:768px){

    body{
        padding-bottom:140px;
    }

    h1{
        font-size:28px;
    }

    .card{
        padding:20px;
    }

    .two-col{
        grid-template-columns:1fr;
        gap:0;
    }

    .desktop-sidebar,
    .desktop-summary-btn{
        display:none;
    }

    .footer-inner{
        flex-direction:column;
        gap:15px;
        text-align:center;
    }

    .footer-links{
        gap:20px;
        flex-wrap:wrap;
        justify-content:center;
    }

    .trust-strip{
        flex-direction:column;
        /*margin:20px;*/
        padding:20px;
        gap:10px;
        text-align:center;
    }

    .trust-divider{
        width:100%;
        height:1px;
    }

    .trust-item{
        justify-content:center;
    }

    .gst-info{
        width:16px;
        height:16px;
        font-size:12px !important;
        font-weight:600;
        border:1.5px solid #3b82f6;
    }

    /* Domain results */

    .spx-domain-card{
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:14px;
    }

    .spx-domain-left{
        flex:1;
        min-width:0;
    }

    .spx-domain-card{
        gap:12px;
        padding:12px 14px;
    }

    .spx-domain-name{
        margin-bottom:5px;
        font-size:14.5px;
        line-height:1.35;
    }

    .spx-domain-price{
        justify-content:flex-start;
    }

    .spx-domain-btn{
        min-width:92px;
        padding:7px 10px;
    }

}

@media(max-width:640px){

    /*
     * A 290px tooltip centred on the icon runs past the right edge of a
     * phone screen, which widens the document and gives the whole page a
     * horizontal scrollbar. Span the row instead — it can't overflow.
     */
    .plan-benefit-info-wrap{
        position:relative;
    }

    .plan-tooltip{
        top: calc(100% + 8px);
        left: auto;
        right: 0;
        bottom: auto;
        width: 240px;
        max-width: calc(100vw - 48px);
        transform: translateY(-4px);
    }

    .plan-benefit-info-wrap:hover .plan-tooltip,
    .plan-benefit-info-wrap.is-open .plan-tooltip{
        transform:translateY(0);
    }

    .plan-tooltip::before{
        display:none;
    }

    /* Privacy info tooltip: pin directly under its own icon on mobile.
       (The top/left coords above are tuned for the benefit icon's spot, so
       the privacy icon needs its own relative wrapper + placement.) */
    .sdc-privacy .plan-benefit-info-wrap { position: relative; }
    .sdc-privacy .plan-tooltip {
        top: calc(100% + 8px);
        left: auto;
        right: 0;
        bottom: auto;
        width: 240px;
        max-width: calc(100vw - 48px);
        transform: translateY(-4px);
    }
    .sdc-privacy .plan-benefit-info-wrap:hover .plan-tooltip,
    .sdc-privacy .plan-benefit-info-wrap.is-open .plan-tooltip {
        transform: translateY(0);
    }

    .plan-summary{
        grid-template-columns:1fr;
        grid-template-areas:
            "label"
            "select"
            "price"
            "note";
    }

    .plan-select-wrap{
        max-width:none;
    }

    .plan-select-wrap .spx-select{
        width:100%;
    }

    /* One line, reading struck → price → badge. row-reverse rather than
       reordering the markup, so the desktop stack is untouched. */
    .plan-pricing{
        flex-direction:row-reverse;
        justify-content:flex-end;
        align-items:baseline;
        gap:10px;
        margin-top:16px;
    }

    .plan-price-stack{
        flex-direction:row-reverse;
        align-items:baseline;
        gap:9px;
    }

    .plan-old-price{
        margin:0;
    }

    .plan-benefit{
        align-items:flex-start;
    }

}

@media(max-width:480px){

    .spx-payment-methods img{
        height:35px;
        padding:4px 0;
    }

    .spx-guarantee,
    .spx-payment-note{
        font-size:14px;
    }

    .spx-payment-title{
        font-size:13px;
    }

}


/* =========================================================
   19. OTHER PAGES
   =========================================================
   Not used by checkout.php. Kept because success.php / pay.php
   and the admin views load this same stylesheet.
========================================================= */

/* ---------- Success page ---------- */

.success-card{
    max-width:700px;
    margin:60px auto;
    padding:40px;
    text-align:center;
    background:#fff;
    border-radius:16px;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
}

.success-icon{
    width:70px;
    height:70px;
    margin:0 auto 20px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:32px;
    font-weight:700;
    color:#16a34a;
    background:#dcfce7;
    border-radius:50%;
}

.success-card h2{
    margin-bottom:15px;
}

.success-card p{
    line-height:1.7;
    color:#64748b;
}

.success-order{
    margin-top:20px;
    font-size:15px;
}

.success-actions{
    margin-top:20px;
}

.success-btn{
    display:inline-block;
    padding:14px 24px;
    font-weight:500;
    color:#fff;
    background:#2563eb;
    border-radius:10px;
    text-decoration:none;
}

/* ---------- UTM source badges (admin) ---------- */

.source-badge{
    display:inline-block;
    padding:4px 10px;
    font-size:12px;
    font-weight:600;
    border-radius:999px;
}

.source-facebook{ background:#e8f0ff; color:#1877f2; }
.source-instagram{ background:#fff0f7; color:#e1306c; }
.source-google{ background:#eefdf3; color:#16a34a; }
.source-direct{ background:#f3f4f6; color:#374151; }

.facebook{ background:#1877f2; color:#fff; }
.instagram{ background:#e1306c; color:#fff; }
.google{ background:#16a34a; color:#fff; }
.direct{ background:#6b7280; color:#fff; }


/* =========================================================
   20. LEGACY — verify before deleting
   =========================================================
   Nothing in the current checkout.php markup matches these.
   Grep the rest of the project first; if they're unused
   elsewhere too, this whole block can go.
========================================================= */

/* Superseded by .spx-payment-* in section 15 —
   check partials/payment-trust.php first */
.payment-trust{ margin-top:18px; text-align:center; }
.money-back{ display:flex; align-items:center; justify-content:center; gap:8px; margin-bottom:10px; font-size:15px; color:#374151; }
.payment-text{ margin-bottom:10px; font-size:14px; font-weight:600; color:#1f2937; }
.payment-icons{ display:flex; flex-wrap:wrap; justify-content:center; gap:2px; margin-bottom:10px; }
.payment-icons img{ height:30px; width:auto; }
.payment-note{ font-size:14px; color:#6b7280; }

/* Superseded by .spx-domain-* in section 10 */
.domain-card{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; padding:14px; border:1px solid #e5e7eb; border-radius:10px; }
.domain-left{ display:flex; flex-direction:column; }
.domain-name{ font-weight:600; }
.domain-status{ margin-top:4px; font-size:13px; color:#6b7280; }
.use-domain{ padding:8px 14px; color:#fff; background:#2563eb; border:none; border-radius:8px; cursor:pointer; }
.domain-unavailable{ font-weight:600; color:#ef4444; }
.spx-domain-section{ margin-top:20px; }
.spx-section-title{ margin-bottom:12px; font-size:15px; font-weight:700; color:#111827; }
.spx-domain-right{ display:flex; flex-direction:column; align-items:flex-end; min-width:120px; }
#domain-result{ display:none; padding:14px; font-size:15px; border-radius:10px; }

/* The #selected-domain-card div was dropped from the markup */
#selected-domain-card{ margin-top:20px; }
.spx-selected{ padding:22px; background:#f0fdf4; border:1px solid #22c55e; border-radius:12px; }
.spx-selected-title{ margin-bottom:10px; font-size:14px; font-weight:700; color:#16a34a; }
.spx-selected-domain{ font-size:18px; font-weight:500; color:#111827; }
.spx-selected-price{ margin-top:10px; font-size:15px; font-weight:500; color:#2563eb; }
.change-domain{ margin-top:15px; padding:10px 20px; font-weight:600; color:#2563eb; background:#fff; border:1px solid #2563eb; border-radius:8px; cursor:pointer; }

/* No markup emits this button */
.btn-switch-account{ margin-top:12px; padding:8px 16px; font-weight:600; color:#2563eb; background:#fff; border:1px solid #2563eb; border-radius:8px; cursor:pointer; transition:.2s; }
.btn-switch-account:hover{ background:#2563eb; color:#fff; }

/* Unreferenced */
.hr1{ height:0.5px; margin:18px 0; background:#e5e7eb; border:none; }
.section-gap{ margin-top:30px; }
.phone-help{ margin-top:-15px; margin-bottom:30px; }
.trust-card{ margin-top:20px; }
.trust{ margin-top:10px; line-height:2; }
.checkout-card-title{ display:flex; align-items:center; gap:10px; margin-bottom:28px; font-size:26px; font-weight:700; }
.spx-mobile-title{ font-size:16px; font-weight:700; }