/* =============================================================================
   HB Stripe Integration — Frontend Checkout Form
   All rules are scoped under .hbss-checkout to avoid conflicts with
   Bricks Builder and other theme styles.

   Theme variables are defined at .hbss-checkout level — override any
   variable with custom CSS to adjust the appearance without touching
   this file.
============================================================================= */

/* ---------------------------------------------------------------------------
   Light theme (default)
--------------------------------------------------------------------------- */
.hbss-checkout {
    --hbss-bg:                  #ffffff;
    --hbss-surface:             #f6f6fb;
    --hbss-border:              #dddde8;
    --hbss-text:                #1a1a2e;
    --hbss-text-muted:          #5c5c7a;
    --hbss-accent:              #1a1a2e;
    --hbss-accent-hover:        #2e2e50;
    --hbss-input-bg:            #ffffff;
    --hbss-focus-ring:          rgba(26, 26, 46, 0.08);
    --hbss-card-bg:             #f9f9fd;
    --hbss-card-border:         #e4e4f0;
    --hbss-success:             #16a34a;
    --hbss-error:               #dc2626;
    --hbss-recommended-bg:      #dcfce7;
    --hbss-recommended-text:    #166534;
    --hbss-recommended-border:  #bbf7d0;
    --hbss-notice-bg:           #eef2ff;
    --hbss-notice-border:       #c7d2fe;
    --hbss-notice-text:         #3730a3;
    --hbss-notice-link:         #4f46e5;
    --hbss-selected-bg:         #eef2ff;
    --hbss-selected-border:     #1a1a2e;
    --hbss-ghost-color:         #4f46e5;
    --hbss-ghost-border:        #c7d2fe;
    --hbss-ghost-hover:         #eef2ff;
    --hbss-footer-border:       #e4e4f0;
    --hbss-back-color:          #888899;
    --hbss-confirm-color:       #16a34a;
    --hbss-price-bg:            #f0f0f8;
    --hbss-price-border:        #dddde8;
    --hbss-backdrop:            none;
    --hbss-radius:              10px;
    --hbss-radius-sm:           7px;
    --hbss-font:                inherit;

    font-family:    var(--hbss-font);
    color:          var(--hbss-text);
    max-width:      640px;
    margin:         0 auto;
    box-sizing:     border-box;
}

/* ---------------------------------------------------------------------------
   Dark / glassmorphic theme
--------------------------------------------------------------------------- */
.hbss-checkout.hbss-dark {
    --hbss-surface:             rgba(255, 255, 255, 0.06);
    --hbss-border:              rgba(255, 255, 255, 0.14);
    --hbss-text:                #f4f4ff;
    --hbss-text-muted:          #a0a0c8;
    --hbss-accent:              #f5c842;
    --hbss-accent-hover:        #ffd966;
    --hbss-input-bg:            rgba(255, 255, 255, 0.07);
    --hbss-focus-ring:          rgba(245, 200, 66, 0.25);
    --hbss-card-bg:             rgba(255, 255, 255, 0.04);
    --hbss-card-border:         rgba(255, 255, 255, 0.10);
    --hbss-success:             #4ade80;
    --hbss-error:               #f87171;
    --hbss-recommended-bg:      rgba(74, 222, 128, 0.14);
    --hbss-recommended-text:    #6ee7a0;
    --hbss-recommended-border:  rgba(74, 222, 128, 0.32);
    --hbss-notice-bg:           rgba(99, 102, 241, 0.12);
    --hbss-notice-border:       rgba(99, 102, 241, 0.30);
    --hbss-notice-text:         #c7d2fe;
    --hbss-notice-link:         #a5b4fc;
    --hbss-selected-bg:         rgba(245, 200, 66, 0.12);
    --hbss-selected-border:     #f5c842;
    --hbss-ghost-color:         #c4b5fd;
    --hbss-ghost-border:        rgba(196, 181, 253, 0.30);
    --hbss-ghost-hover:         rgba(196, 181, 253, 0.08);
    --hbss-footer-border:       rgba(255, 255, 255, 0.08);
    --hbss-back-color:          #6060a0;
    --hbss-confirm-color:       #4ade80;
    --hbss-price-bg:            rgba(245, 200, 66, 0.08);
    --hbss-price-border:        rgba(245, 200, 66, 0.25);
    --hbss-backdrop:            blur(20px) saturate(200%) brightness(1.1);
}

/* Deep gradient container — self-contained, no page background needed */
.hbss-checkout.hbss-dark {
    background:     linear-gradient( 145deg, #0d0d20 0%, #130a28 45%, #0a1525 100% );
    border-radius:  20px;
    padding:        6px;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.06),
        0 24px 60px rgba(0, 0, 0, 0.6),
        0 0 80px rgba(100, 60, 180, 0.15);
}

/* Glass step cards with shimmer top border */
.hbss-checkout.hbss-dark .hbss-step {
    background:
        linear-gradient( 160deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.02) 100% );
    backdrop-filter:            var(--hbss-backdrop);
    -webkit-backdrop-filter:    var(--hbss-backdrop);
    border-radius:              16px;
    padding:                    2rem;
    position:                   relative;
    /* Shimmer top border via box-shadow */
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        inset 0 -1px 0 rgba(255, 255, 255, 0.04),
        inset 1px 0 0 rgba(255, 255, 255, 0.06),
        inset -1px 0 0 rgba(255, 255, 255, 0.06);
}

/* Member cards in dark mode */
.hbss-checkout.hbss-dark .hbss-member-card {
    background:
        linear-gradient( 160deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100% );
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        inset 0 -1px 0 rgba(0, 0, 0, 0.2);
}

/* Glowing primary button */
.hbss-checkout.hbss-dark .hbss-btn--primary {
    background:     linear-gradient( 135deg, #f5c842 0%, #e8a820 100% );
    color:          #0d0d20 !important;
    box-shadow:
        0 4px 16px rgba(245, 200, 66, 0.40),
        0 1px 0 rgba(255, 255, 255, 0.20) inset;
    text-shadow:    0 1px 0 rgba(255,255,255,0.15);
}

.hbss-checkout.hbss-dark .hbss-btn--primary:hover {
    background:     linear-gradient( 135deg, #ffd966 0%, #f5c842 100% );
    box-shadow:
        0 6px 24px rgba(245, 200, 66, 0.55),
        0 1px 0 rgba(255, 255, 255, 0.25) inset;
}

/* Glowing inputs on focus */
.hbss-checkout.hbss-dark .hbss-field input:focus {
    border-color:   rgba(245, 200, 66, 0.6) !important;
    box-shadow:
        0 0 0 3px rgba(245, 200, 66, 0.18) !important,
        0 0 12px rgba(245, 200, 66, 0.10) !important;
}

/* Order summary in dark mode */
.hbss-checkout.hbss-dark .hbss-order-summary__inner {
    background:
        linear-gradient( 160deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100% );
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

/* Confirmation icon glow */
.hbss-checkout.hbss-dark .hbss-confirm-icon {
    filter: drop-shadow( 0 0 12px rgba(74, 222, 128, 0.5) );
}

/* ---------------------------------------------------------------------------
   Step headings
--------------------------------------------------------------------------- */
.hbss-checkout .hbss-step__title {
    font-size:      1.25rem !important;
    font-weight:    700 !important;
    color:          var(--hbss-text) !important;
    margin-bottom:  0.25rem !important;
    line-height:    1.3 !important;
}

.hbss-checkout .hbss-step__description {
    color:          var(--hbss-text-muted) !important;
    margin-bottom:  1.25rem !important;
    font-size:      0.875rem !important;
    line-height:    1.55 !important;
}

/* ---------------------------------------------------------------------------
   Email row (input + button inline)
--------------------------------------------------------------------------- */
.hbss-checkout .hbss-email-row {
    display:    flex;
    gap:        0.5rem;
    align-items: stretch;
}

.hbss-checkout .hbss-email-row input {
    flex: 1;
}

.hbss-checkout .hbss-email-row .hbss-btn {
    flex-shrink: 0;
    white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   Fields
--------------------------------------------------------------------------- */
.hbss-checkout .hbss-field {
    display:        flex;
    flex-direction: column;
    gap:            0.3rem;
    margin-bottom:  0.875rem;
}

.hbss-checkout .hbss-field label {
    font-size:      0.8125rem !important;
    font-weight:    600 !important;
    color:          var(--hbss-text) !important;
    display:        block !important;
}

.hbss-checkout .hbss-field input[type="text"],
.hbss-checkout .hbss-field input[type="email"],
.hbss-checkout .hbss-field input[type="tel"],
.hbss-checkout .hbss-field input[type="date"] {
    width:          100% !important;
    box-sizing:     border-box !important;
    padding:        0.5rem 0.75rem !important;
    border:         1px solid var(--hbss-border) !important;
    border-radius:  var(--hbss-radius-sm) !important;
    font-size:      0.875rem !important;
    font-family:    var(--hbss-font) !important;
    color:          var(--hbss-text) !important;
    background:     var(--hbss-input-bg) !important;
    transition:     border-color 0.15s, box-shadow 0.15s;
    outline:        none !important;
    box-shadow:     none !important;
}

.hbss-checkout .hbss-field input:focus {
    border-color:   var(--hbss-accent) !important;
    box-shadow:     0 0 0 3px var(--hbss-focus-ring) !important;
}

.hbss-checkout .hbss-field input::placeholder {
    color:      var(--hbss-text-muted) !important;
    opacity:    0.6;
}

.hbss-checkout .hbss-field__hint {
    font-size:  0.75rem !important;
    color:      var(--hbss-text-muted) !important;
    margin:     0 !important;
}

.hbss-checkout .hbss-field-error {
    font-size:  0.8125rem;
    color:      var(--hbss-error);
    margin-top: 0.25rem;
}

/* ---------------------------------------------------------------------------
   Field groups
--------------------------------------------------------------------------- */
.hbss-checkout .hbss-field-group {
    display: grid;
    gap:     0.75rem;
}

.hbss-checkout .hbss-field-group--2col { grid-template-columns: 1fr 1fr; }
.hbss-checkout .hbss-field-group--3col { grid-template-columns: 2fr 1fr 1fr; }

/* ---------------------------------------------------------------------------
   Stripe Elements container
--------------------------------------------------------------------------- */
.hbss-checkout .hbss-elements-container {
    border:         1px solid var(--hbss-border);
    border-radius:  var(--hbss-radius-sm);
    padding:        0.875rem;
    background:     var(--hbss-input-bg);
    min-height:     3.25rem;
    transition:     border-color 0.15s;
}

/* ---------------------------------------------------------------------------
   Notices
--------------------------------------------------------------------------- */
.hbss-checkout .hbss-notice {
    border-radius:  var(--hbss-radius-sm);
    padding:        0.875rem 1rem;
    margin-bottom:  1.25rem;
    font-size:      0.875rem !important;
    line-height:    1.5;
}

.hbss-checkout .hbss-notice--info {
    background: var(--hbss-notice-bg);
    border:     1px solid var(--hbss-notice-border);
    color:      var(--hbss-notice-text) !important;
}

.hbss-checkout .hbss-notice--info p {
    color:  var(--hbss-notice-text) !important;
    margin: 0 0 0.5rem !important;
}

.hbss-checkout .hbss-notice--info p:last-child { margin-bottom: 0 !important; }

.hbss-checkout .hbss-notice--info a,
.hbss-checkout .hbss-notice--info .hbss-link-btn {
    color:          var(--hbss-notice-link) !important;
    font-weight:    600;
    text-decoration: underline;
    cursor:         pointer;
    background:     none;
    border:         none;
    padding:        0;
    font-size:      inherit;
    font-family:    inherit;
}

/* ---------------------------------------------------------------------------
   Member cards
--------------------------------------------------------------------------- */
.hbss-checkout .hbss-member-card {
    border:         1px solid var(--hbss-card-border);
    border-radius:  var(--hbss-radius);
    padding:        1.25rem;
    margin-bottom:  1rem;
    background:     var(--hbss-card-bg);
    backdrop-filter: var(--hbss-backdrop);
    -webkit-backdrop-filter: var(--hbss-backdrop);
}

.hbss-checkout .hbss-member-card__header {
    display:        flex;
    align-items:    center;
    justify-content: space-between;
    margin-bottom:  1rem;
}

.hbss-checkout .hbss-member-card__title {
    font-size:      0.9375rem !important;
    font-weight:    700 !important;
    color:          var(--hbss-text) !important;
}

.hbss-checkout .hbss-member-card__remove {
    background:     none;
    border:         none;
    font-size:      1.25rem;
    color:          var(--hbss-text-muted);
    cursor:         pointer;
    line-height:    1;
    padding:        0 0.25rem;
    transition:     color 0.15s;
}

.hbss-checkout .hbss-member-card__remove:hover { color: var(--hbss-error); }

/* Same as payer checkbox */
.hbss-checkout .hbss-field--checkbox label {
    display:        flex !important;
    align-items:    center;
    gap:            0.5rem;
    cursor:         pointer;
    font-size:      0.8125rem !important;
    color:          var(--hbss-text-muted) !important;
}

.hbss-checkout .hbss-field--checkbox input[type="checkbox"] {
    width:          1rem !important;
    height:         1rem !important;
    accent-color:   var(--hbss-accent);
    flex-shrink:    0;
}

/* ---------------------------------------------------------------------------
   Tier selection (radio buttons)
--------------------------------------------------------------------------- */
.hbss-checkout .hbss-tier-select {
    display:        flex;
    flex-direction: column;
    gap:            0.5rem;
}

.hbss-checkout .hbss-tier-option {
    display:        flex;
    align-items:    flex-start;
    gap:            0.625rem;
    padding:        0.75rem 0.875rem;
    border:         1px solid var(--hbss-card-border);
    border-radius:  var(--hbss-radius-sm);
    cursor:         pointer;
    transition:     border-color 0.15s, background 0.15s;
    background:     var(--hbss-input-bg);
}

.hbss-checkout .hbss-tier-option:has(input:checked) {
    border-color:   var(--hbss-selected-border);
    background:     var(--hbss-selected-bg);
}

.hbss-checkout .hbss-tier-option input[type="radio"] {
    width:          1rem !important;
    height:         1rem !important;
    margin-top:     0.125rem;
    flex-shrink:    0;
    accent-color:   var(--hbss-accent);
    background:     transparent !important;
    border:         none !important;
    box-shadow:     none !important;
    padding:        0 !important;
}

.hbss-checkout .hbss-tier-option__label {
    font-size:      0.875rem !important;
    font-weight:    500 !important;
    color:          var(--hbss-text) !important;
}

/* ---------------------------------------------------------------------------
   Fee checkbox
--------------------------------------------------------------------------- */
.hbss-checkout .hbss-fee-checkbox-label {
    display:        flex !important;
    align-items:    flex-start;
    gap:            0.625rem;
    cursor:         pointer;
    font-size:      0.875rem !important;
    font-weight:    500 !important;
    color:          var(--hbss-text) !important;
}

.hbss-checkout .hbss-fee-checkbox {
    width:          1rem !important;
    height:         1rem !important;
    margin-top:     0.1875rem;
    flex-shrink:    0;
    accent-color:   var(--hbss-accent);
    background:     transparent !important;
    border:         none !important;
    box-shadow:     none !important;
    padding:        0 !important;
}

/* ---------------------------------------------------------------------------
   Communications opt-in checkboxes
--------------------------------------------------------------------------- */
.hbss-checkout .hbss-field__group-label {
    display:        block;
    font-size:      0.8125rem !important;
    font-weight:    600 !important;
    color:          var(--hbss-text-muted) !important;
    margin-bottom:  0.375rem;
}

.hbss-checkout .hbss-check-group {
    display:        flex;
    flex-direction: column;
    gap:            0.5rem;
}

.hbss-checkout .hbss-check-option {
    display:        flex !important;
    align-items:    center;
    gap:            0.5rem;
    cursor:         pointer;
    font-size:      0.875rem !important;
    font-weight:    500 !important;
    color:          var(--hbss-text) !important;
}

.hbss-checkout .hbss-check-option input[type="checkbox"] {
    width:          1rem !important;
    height:         1rem !important;
    flex-shrink:    0;
    accent-color:   var(--hbss-accent);
    background:     transparent !important;
    border:         none !important;
    box-shadow:     none !important;
    padding:        0 !important;
}

/* ---------------------------------------------------------------------------
   Badges
--------------------------------------------------------------------------- */
.hbss-checkout .hbss-badge {
    display:        inline-block;
    padding:        0.0625rem 0.4375rem;
    border-radius:  999px;
    font-size:      0.6875rem !important;
    font-weight:    700 !important;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    vertical-align: middle;
    margin-left:    0.375rem;
}

.hbss-checkout .hbss-badge--recommended {
    background: var(--hbss-recommended-bg);
    color:      var(--hbss-recommended-text) !important;
    border:     1px solid var(--hbss-recommended-border);
}

/* ---------------------------------------------------------------------------
   Live price display
--------------------------------------------------------------------------- */
.hbss-checkout .hbss-price-display {
    display:        flex;
    align-items:    center;
    justify-content: space-between;
    padding:        0.625rem 0.875rem;
    margin-top:     0.5rem;
    background:     var(--hbss-price-bg);
    border:         1px solid var(--hbss-price-border);
    border-radius:  var(--hbss-radius-sm);
}

.hbss-checkout .hbss-price-display__label {
    font-size:      0.8125rem !important;
    color:          var(--hbss-text-muted) !important;
}

.hbss-checkout .hbss-price-display__amount {
    font-size:      0.9375rem !important;
    font-weight:    700 !important;
    color:          var(--hbss-text) !important;
}

/* ---------------------------------------------------------------------------
   Buttons
--------------------------------------------------------------------------- */
.hbss-checkout .hbss-btn {
    display:        inline-flex;
    align-items:    center;
    justify-content: center;
    padding:        0.75rem 1.5rem;
    border-radius:  var(--hbss-radius-sm);
    font-size:      0.9375rem !important;
    font-weight:    600 !important;
    cursor:         pointer;
    transition:     background 0.15s, opacity 0.15s, border-color 0.15s;
    border:         none;
    text-decoration: none !important;
    font-family:    var(--hbss-font) !important;
    line-height:    1 !important;
}

.hbss-checkout .hbss-btn--primary {
    background: var(--hbss-accent);
    color:      #fff !important;
}

.hbss-checkout.hbss-dark .hbss-btn--primary {
    color: #0f0f1a !important;
}

.hbss-checkout .hbss-btn--primary:hover   { background: var(--hbss-accent-hover); }
.hbss-checkout .hbss-btn--primary:disabled { opacity: 0.5; cursor: default; }

.hbss-checkout .hbss-btn--secondary {
    background: transparent;
    color:      var(--hbss-accent) !important;
    border:     1.5px solid var(--hbss-accent);
}

.hbss-checkout .hbss-btn--secondary:hover { background: var(--hbss-selected-bg); }

.hbss-checkout .hbss-btn--ghost {
    background: transparent;
    color:      var(--hbss-ghost-color) !important;
    border:     1.5px dashed var(--hbss-ghost-border);
    width:      100%;
    margin-top: 0.25rem;
}

.hbss-checkout .hbss-btn--ghost:hover { background: var(--hbss-ghost-hover); }

.hbss-checkout .hbss-btn--text {
    background: none;
    border:     none;
    color:      var(--hbss-back-color) !important;
    font-size:  0.875rem !important;
    padding:    0.5rem 0;
    cursor:     pointer;
}

.hbss-checkout .hbss-btn--text:hover { color: var(--hbss-text) !important; }

/* ---------------------------------------------------------------------------
   Form footer
--------------------------------------------------------------------------- */
.hbss-checkout .hbss-form-footer {
    display:        flex;
    align-items:    center;
    justify-content: space-between;
    margin-top:     1.5rem;
    padding-top:    1.25rem;
    border-top:     1px solid var(--hbss-footer-border);
}

/* ---------------------------------------------------------------------------
   Confirmation screen
--------------------------------------------------------------------------- */
.hbss-checkout #hbss-step-confirm {
    text-align: center;
    padding:    2.5rem 1.25rem;
}

.hbss-checkout .hbss-confirm-icon {
    width:          4rem;
    height:         4rem;
    color:          var(--hbss-confirm-color);
    margin:         0 auto 1.25rem;
    display:        block;
}

.hbss-checkout .hbss-confirm-icon svg { width: 100%; height: 100%; }

.hbss-checkout #hbss-confirm-message {
    color:      var(--hbss-text) !important;
    font-size:  0.9375rem !important;
    margin:     0 0 1.5rem !important;
}

/* ---------------------------------------------------------------------------
   Order summary (Step 2)
--------------------------------------------------------------------------- */
.hbss-checkout .hbss-order-summary {
    margin-bottom: 1.25rem;
}

.hbss-checkout .hbss-order-summary__inner {
    border:         1px solid var(--hbss-card-border);
    border-radius:  var(--hbss-radius-sm);
    background:     var(--hbss-card-bg);
    overflow:       hidden;
}

.hbss-checkout .hbss-summary-row {
    display:        flex;
    align-items:    center;
    justify-content: space-between;
    padding:        0.6875rem 0.875rem;
    gap:            0.75rem;
    border-bottom:  1px solid var(--hbss-card-border);
}

.hbss-checkout .hbss-summary-row:last-child {
    border-bottom: none;
}

.hbss-checkout .hbss-summary-name {
    font-weight:    600 !important;
    color:          var(--hbss-text) !important;
    font-size:      0.875rem !important;
}

.hbss-checkout .hbss-summary-tier {
    color:          var(--hbss-text-muted) !important;
    font-size:      0.8125rem !important;
}

.hbss-checkout .hbss-summary-price {
    font-weight:    600 !important;
    color:          var(--hbss-text) !important;
    font-size:      0.875rem !important;
    white-space:    nowrap;
}

/* Elements loading placeholder */
.hbss-checkout .hbss-elements-loading {
    font-size:      0.8125rem;
    color:          var(--hbss-text-muted);
    padding:        0.5rem 0;
    text-align:     center;
}

/* ---------------------------------------------------------------------------
   Google Places Autocomplete dropdown
   .pac-container is appended to <body> by Maps JS, so it cannot be scoped
   under .hbss-checkout. body.hbss-pac-dark is set by JS when dark theme.
--------------------------------------------------------------------------- */
.pac-container {
    font-family:    inherit;
    background:     #ffffff;
    border:         1px solid #dddde8;
    border-radius:  7px;
    box-shadow:     0 4px 16px rgba(0, 0, 0, 0.10);
    margin-top:     2px;
    padding:        4px 0;
    overflow:       hidden;
    /* Hide the Google logo to keep the UI clean */
}

.pac-container::after {
    /* "Powered by Google" text — keep it but reduce visual weight */
    padding:    6px 12px;
    font-size:  11px;
    color:      #aaaaaa;
}

.pac-item {
    padding:        8px 12px;
    font-size:      0.8125rem;
    color:          #1a1a2e;
    cursor:         pointer;
    border-top:     1px solid #f0f0f8;
    line-height:    1.4;
}

.pac-item:first-child { border-top: none; }

.pac-item:hover,
.pac-item-selected { background: #eef2ff; }

.pac-item-query {
    font-size:  0.875rem;
    color:      #1a1a2e;
}

.pac-matched {
    font-weight:    700;
    color:          #1a1a2e;
}

/* Dark theme */
body.hbss-pac-dark .pac-container {
    background:     #1c1208;
    border-color:   #3e2814;
    box-shadow:     0 4px 24px rgba(0, 0, 0, 0.5);
}

body.hbss-pac-dark .pac-container::after { color: #5a3e28; }

body.hbss-pac-dark .pac-item {
    color:          #f0e0c8;
    border-top-color: #2a1c0c;
}

body.hbss-pac-dark .pac-item:hover,
body.hbss-pac-dark .pac-item-selected { background: #2a1c0c; }

body.hbss-pac-dark .pac-item-query { color: #f0e0c8; }

body.hbss-pac-dark .pac-matched {
    color:          #e8b030; /* gold accent */
    font-weight:    700;
}

/* ---------------------------------------------------------------------------
   Responsive
--------------------------------------------------------------------------- */
@media (max-width: 520px) {
    .hbss-checkout .hbss-field-group--2col,
    .hbss-checkout .hbss-field-group--3col {
        grid-template-columns: 1fr;
    }

    .hbss-checkout .hbss-form-footer {
        flex-direction:     column-reverse;
        align-items:        stretch;
        gap:                0.625rem;
    }

    .hbss-checkout .hbss-btn--primary,
    .hbss-checkout .hbss-btn--ghost {
        width: 100%;
    }
}