/* ==========================================================================
   Blessing Your Scalp — Checkout Page
   ========================================================================== */

/* ─── Design tokens ──────────────────────────────────────────────────────── */
.bys-checkout {
    --rose:       #be6d76;
    --rose-deep:  #a85961;
    --rose-rgb:   190, 109, 118;
    --cream:      #fbf4f0;
    --blush:      #f5e6e0;
    --white:      #ffffff;
    --charcoal:   #35312f;
    --espresso:   #302c2a;
    --stone:      #8a8582;
    --divider:    #e3e3e3;
    --shadow-btn: 0 4px 15px rgba(190, 109, 118, 0.30);
    font-family: 'Jost', sans-serif;
    color: var(--charcoal);
    padding-bottom: 80px;
}

/* ─── Flash messages ─────────────────────────────────────────────────────── */
.bys-co-flash {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 18px;
    border-radius: 8px;
    font-size: 0.88rem;
    font-weight: 500;
    margin-bottom: 24px;
    animation: bys-co-fadein 0.22s ease;
}
.bys-co-flash--success {
    background: rgba(34,197,94,0.08);
    color: #166534;
    border: 1px solid rgba(34,197,94,0.22);
}
.bys-co-flash--error {
    background: rgba(190,109,118,0.08);
    color: #a85961;
    border: 1px solid rgba(190,109,118,0.22);
}
@keyframes bys-co-fadein {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ─── Page header ────────────────────────────────────────────────────────── */
.bys-co-header {
    padding: 40px 0 32px;
    border-bottom: 1px solid var(--divider);
    margin-bottom: 40px;
}
.bys-co-title {
    font-family: 'Jost', sans-serif;
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 400;
    color: var(--charcoal);
    margin: 0 0 24px;
    letter-spacing: -0.01em;
}
.bys-co-title em {
    font-family: 'Parisienne', cursive;
    font-style: normal;
    color: var(--rose);
    font-size: 1.1em;
}

/* ─── Main layout ────────────────────────────────────────────────────────── */
.bys-co-layout {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 40px;
    align-items: start;
}

/* ─── Left: form panel ───────────────────────────────────────────────────── */
.bys-co-form-panel { }

/* ─── Section headings ───────────────────────────────────────────────────── */
.bys-co-section {
    background: var(--white);
    border: 1px solid var(--divider);
    border-radius: 12px;
    padding: 28px 28px 24px;
    margin-bottom: 24px;
}
.bys-co-section-title {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--stone);
    margin: 0 0 20px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--divider);
}

/* ─── Guest/auth banners ─────────────────────────────────────────────────── */
.bys-co-auth-banner {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    background: var(--cream);
    border: 1px solid var(--blush);
    border-radius: 10px;
    padding: 16px 20px;
    margin-bottom: 24px;
}
.bys-co-auth-banner__text { flex: 1; }
.bys-co-auth-banner__heading {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--charcoal);
    margin: 0 0 4px;
}
.bys-co-auth-banner__sub {
    font-size: 0.8rem;
    color: var(--stone);
    margin: 0;
    line-height: 1.5;
}
.bys-co-auth-banner__note {
    font-size: 0.74rem;
    color: var(--stone);
    margin: 4px 0 0;
    opacity: 0.8;
}
.bys-co-auth-banner__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--charcoal);
    color: var(--white);
    border: none;
    border-radius: 6px;
    padding: 8px 16px;
    font-family: 'Jost', sans-serif;
    font-size: 0.8rem;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;
    transition: background 200ms;
    flex-shrink: 0;
    align-self: center;
}
.bys-co-auth-banner__btn:hover {
    background: var(--espresso);
    color: var(--white);
    text-decoration: none;
}
.bys-co-auth-banner__btn--rose {
    background: var(--rose);
    box-shadow: var(--shadow-btn);
}
.bys-co-auth-banner__btn--rose:hover {
    background: var(--rose-deep);
    color: var(--white);
}

/* ─── Form fields ────────────────────────────────────────────────────────── */
.bys-co-row {
    display: grid;
    gap: 14px;
}
.bys-co-row--2 { grid-template-columns: 1fr 1fr; }
.bys-co-row--phone { grid-template-columns: 160px 1fr; }

.bys-co-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.bys-co-field--span2 { grid-column: 1 / -1; }

.bys-co-label {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--charcoal);
    text-transform: uppercase;
}
.bys-co-label .bys-co-required {
    color: var(--rose);
    margin-left: 2px;
}

.bys-co-input,
.bys-co-select,
.bys-co-textarea {
    background: var(--cream);
    border: 1px solid var(--divider);
    border-radius: 8px;
    padding: 11px 14px;
    font-family: 'Jost', sans-serif;
    font-size: 0.92rem;
    font-weight: 400;
    color: var(--charcoal);
    transition: border-color 180ms, box-shadow 180ms;
    outline: none;
    width: 100%;
    appearance: none;
    -webkit-appearance: none;
}
.bys-co-input::placeholder,
.bys-co-textarea::placeholder {
    color: var(--stone);
    opacity: 0.7;
}
.bys-co-input:focus,
.bys-co-select:focus,
.bys-co-textarea:focus {
    border-color: var(--rose);
    box-shadow: 0 0 0 3px rgba(var(--rose-rgb), 0.10);
    background: var(--white);
}
.bys-co-input.is-invalid,
.bys-co-select.is-invalid {
    border-color: #e11d48;
    box-shadow: 0 0 0 3px rgba(225, 29, 72, 0.08);
}
.bys-co-field-error {
    font-size: 0.75rem;
    color: #e11d48;
    margin: 0;
}

/* select arrow */
.bys-co-select-wrap {
    position: relative;
}
.bys-co-select-wrap::after {
    content: '';
    pointer-events: none;
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid var(--stone);
}
.bys-co-select { padding-right: 36px; cursor: pointer; }

.bys-co-textarea {
    resize: vertical;
    min-height: 100px;
    line-height: 1.6;
}

/* ─── Address autocomplete container ─────────────────────────────────────── */
.bys-co-autocomplete-wrap {
    position: relative;
}
.bys-co-autocomplete-wrap gmp-place-autocomplete {
    width: 100%;
    --gmp-border-color: var(--divider) !important;
    --gmp-fallback-color: var(--stone) !important;
    background-color: var(--cream) !important;
    border: 1px solid var(--divider) !important;
    border-radius: 8px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    transition: border-color 180ms, box-shadow 180ms !important;
}
.bys-co-autocomplete-wrap gmp-place-autocomplete:focus-within {
    border-color: var(--rose) !important;
    box-shadow: 0 0 0 3px rgba(190, 109, 118, 0.10) !important;
}
.bys-co-autocomplete-wrap gmp-place-autocomplete input,
.bys-co-autocomplete-wrap gmp-place-autocomplete::part(input) {
    background-color: var(--cream) !important;
    color: var(--charcoal) !important;
    border: none !important;
    padding: 11px 14px !important;
    border-radius: 8px !important;
    font-family: 'Jost', sans-serif !important;
    font-size: 0.92rem !important;
    flex-grow: 1 !important;
}
.bys-co-autocomplete-wrap gmp-place-autocomplete input:focus,
.bys-co-autocomplete-wrap gmp-place-autocomplete::part(input):focus {
    background-color: var(--white) !important;
    border: none !important;
    outline: 0 !important;
    box-shadow: none !important;
}
.bys-co-autocomplete-wrap gmp-place-autocomplete input::placeholder,
.bys-co-autocomplete-wrap gmp-place-autocomplete::part(input)::placeholder {
    color: var(--stone) !important;
    opacity: 0.7 !important;
}
.bys-co-autocomplete-hint {
    font-size: 0.74rem;
    color: var(--stone);
    margin: 6px 0 0;
}

/* ─── Right: order summary sidebar ──────────────────────────────────────── */
.bys-co-sidebar {
    position: sticky;
    top: 100px;
}
.bys-co-summary {
    background: var(--cream);
    border: 1px solid var(--blush);
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 16px;
}
.bys-co-summary__title {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--stone);
    margin: 0 0 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--divider);
}

/* ─── Order item list ────────────────────────────────────────────────────── */
.bys-co-items { list-style: none; margin: 0 0 16px; padding: 0; }
.bys-co-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--divider);
}
.bys-co-item:last-child { border-bottom: none; }
.bys-co-item__img-wrap {
    position: relative;
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: 6px;
    overflow: hidden;
    background: var(--blush);
}
.bys-co-item__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.bys-co-item__badge {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 18px;
    height: 18px;
    background: var(--charcoal);
    color: var(--white);
    font-size: 0.65rem;
    font-weight: 700;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
}
.bys-co-item__info { flex: 1; min-width: 0; }
.bys-co-item__name {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--charcoal);
    margin: 0 0 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.bys-co-item__variant {
    font-size: 0.74rem;
    color: var(--stone);
    margin: 0;
}
.bys-co-item__price {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--charcoal);
    flex-shrink: 0;
    margin-left: auto;
    white-space: nowrap;
}

/* ─── Shipping options ───────────────────────────────────────────────────── */
.bys-co-shipping-group {
    margin: 0 0 16px;
}
.bys-co-shipping-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--stone);
    margin: 0 0 10px;
}
.bys-co-shipping-opt {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--divider);
    border-radius: 8px;
    padding: 12px 14px;
    cursor: pointer;
    margin-bottom: 8px;
    background: var(--white);
    transition: border-color 160ms, background 160ms;
}
.bys-co-shipping-opt:last-child { margin-bottom: 0; }
.bys-co-shipping-opt.is-selected {
    border-color: var(--rose);
    background: rgba(var(--rose-rgb), 0.04);
}
.bys-co-shipping-opt.is-disabled {
    opacity: 0.45;
    cursor: not-allowed;
}
.bys-co-shipping-opt input[type="radio"] { display: none; }
.bys-co-shipping-opt__radio {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid var(--divider);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 160ms;
}
.bys-co-shipping-opt.is-selected .bys-co-shipping-opt__radio {
    border-color: var(--rose);
}
.bys-co-shipping-opt.is-selected .bys-co-shipping-opt__radio::after {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--rose);
}
.bys-co-shipping-opt__body { flex: 1; }
.bys-co-shipping-opt__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.bys-co-shipping-opt__name {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--charcoal);
}
.bys-co-shipping-opt__cost {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--charcoal);
}
.bys-co-shipping-opt__cost--free { color: #15803d; }
.bys-co-shipping-opt__note {
    font-size: 0.72rem;
    color: var(--stone);
    margin: 3px 0 0;
}

/* ─── Totals ─────────────────────────────────────────────────────────────── */
.bys-co-totals { border-top: 1px solid var(--divider); padding-top: 14px; }
.bys-co-total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    font-size: 0.88rem;
}
.bys-co-total-row__label { color: var(--stone); font-weight: 400; }
.bys-co-total-row__value { color: var(--charcoal); font-weight: 500; }
.bys-co-total-row--grand {
    border-top: 1px solid var(--divider);
    margin-top: 8px;
    padding-top: 12px;
    margin-bottom: 0;
    font-size: 1rem;
}
.bys-co-total-row--grand .bys-co-total-row__label {
    font-weight: 700;
    color: var(--charcoal);
}
.bys-co-total-row--grand .bys-co-total-row__value {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--charcoal);
}

/* ─── Payment methods ────────────────────────────────────────────────────── */
.bys-co-payment-opts { display: flex; flex-direction: column; gap: 10px; }
.bys-co-payment-opt {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    border: 1px solid var(--divider);
    border-radius: 10px;
    padding: 14px 16px;
    cursor: pointer;
    background: var(--white);
    transition: border-color 160ms, background 160ms;
}
.bys-co-payment-opt.is-selected {
    border-color: var(--rose);
    background: rgba(var(--rose-rgb), 0.04);
}
.bys-co-payment-opt input[type="radio"] { display: none; }
.bys-co-payment-opt__radio {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid var(--divider);
    flex-shrink: 0;
    margin-top: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 160ms;
}
.bys-co-payment-opt.is-selected .bys-co-payment-opt__radio {
    border-color: var(--rose);
}
.bys-co-payment-opt.is-selected .bys-co-payment-opt__radio::after {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--rose);
}
.bys-co-payment-opt__icon {
    color: var(--stone);
    flex-shrink: 0;
    margin-top: 2px;
}
.bys-co-payment-opt__body { flex: 1; }
.bys-co-payment-opt__name {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--charcoal);
    margin: 0 0 3px;
}
.bys-co-payment-opt__desc {
    font-size: 0.78rem;
    color: var(--stone);
    margin: 0;
    line-height: 1.5;
}

/* ─── Policy text ────────────────────────────────────────────────────────── */
.bys-co-policy {
    font-size: 0.75rem;
    color: var(--stone);
    line-height: 1.6;
    margin: 0;
}
.bys-co-policy a {
    color: var(--rose);
    text-decoration: underline;
}
.bys-co-policy a:hover { color: var(--rose-deep); }

/* ─── Submit button ──────────────────────────────────────────────────────── */
.bys-co-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    background: var(--rose);
    color: var(--white);
    border: none;
    border-radius: 8px;
    padding: 15px 20px;
    font-family: 'Jost', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: var(--shadow-btn);
    transition: background 200ms, box-shadow 200ms, opacity 200ms;
    margin-top: 20px;
}
.bys-co-submit:hover:not(:disabled) {
    background: var(--rose-deep);
}
.bys-co-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ─── Trust strip ────────────────────────────────────────────────────────── */
.bys-co-trust {
    display: flex;
    justify-content: center;
    gap: 20px;
    padding: 16px 0 0;
}
.bys-co-trust__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}
.bys-co-trust__label {
    font-size: 0.68rem;
    font-weight: 500;
    color: var(--stone);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1.3;
}

/* ─── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .bys-co-layout {
        grid-template-columns: 1fr;
    }
    .bys-co-sidebar {
        position: static;
        order: -1;
    }
    .bys-co-summary {
        margin-bottom: 0;
    }
}
@media (max-width: 640px) {
    .bys-co-section { padding: 20px 16px 18px; }
    .bys-co-row--2 { grid-template-columns: 1fr; }
    .bys-co-row--phone { grid-template-columns: 1fr; }
    .bys-co-auth-banner {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ─── Checkout rebuild (reference layout) ────────────────────────────────── */

/* Header becomes a single row: title left, "return to bag" right. */
.bys-co-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.bys-co-header .bys-co-title { margin-bottom: 0; }

.bys-co-backlink {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.82rem;
    color: var(--stone);
    text-decoration: none;
    transition: color 0.18s;
}
.bys-co-backlink:hover { color: var(--rose); }

/* "(optional)" qualifier next to a label or section title. */
.bys-co-optional {
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.75rem;
    color: var(--stone);
}

/* Informational flash (e.g. "you already have an account"). */
.bys-co-flash--info {
    background: rgba(6, 148, 162, 0.07);
    color: #0f7b88;
    border: 1px solid rgba(6, 148, 162, 0.2);
}

/* ─── Shipping method ────────────────────────────────────────────────────── */
.bys-co-ship-empty {
    background: var(--bg-light, #faf7f5);
    border: 1px solid var(--divider);
    border-radius: 8px;
    padding: 16px 18px;
    font-size: 0.86rem;
    color: var(--stone);
}
.bys-co-ship-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border: 1.5px solid var(--charcoal);
    border-radius: 8px;
    padding: 15px 18px;
    background: var(--white);
}
.bys-co-ship-row__name {
    font-size: 0.88rem;
    color: var(--charcoal);
    font-weight: 500;
}
.bys-co-ship-row__cost {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--charcoal);
    white-space: nowrap;
}
.bys-co-ship-row__cost.is-free { color: #15803d; }
.bys-co-ship-note {
    margin: 10px 0 0;
    font-size: 0.78rem;
    color: var(--stone);
}

/* ─── Payment ────────────────────────────────────────────────────────────── */
.bys-co-payment-intro {
    margin: -6px 0 16px;
    font-size: 0.8rem;
    color: var(--stone);
}

/* ─── Totals ─────────────────────────────────────────────────────────────── */
.bys-co-total-row__muted {
    color: var(--stone);
    font-weight: 400;
    font-size: 0.82rem;
}
.bys-co-total-row__currency {
    font-size: 0.72rem;
    color: var(--stone);
    font-weight: 400;
    margin-right: 4px;
}

/* ─── Submit button loading state ────────────────────────────────────────── */
/* Sets no `display`: Livewire toggles wire:loading elements by writing
   element.style.display, so an inline/declared display here would keep the
   "Processing..." state visible before the button is ever pressed. */
.bys-co-btn-loading {
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.bys-co-spinner {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255,255,255,0.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: bys-co-spin 0.65s linear infinite;
    display: inline-block;
    flex-shrink: 0;
}
@keyframes bys-co-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .bys-co-spinner { animation-duration: 2s; }
}

/* The submit button now sits in the form flow rather than the sidebar. */
.bys-co-form-panel .bys-co-submit { width: 100%; }
.bys-co-form-panel .bys-co-policy { margin-top: 14px; }

/* ─── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 991px) {
    .bys-co-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
    }
    /* Summary first on narrow screens, matching the reference's mobile order. */
    .bys-co-sidebar { order: -1; }
}
@media (max-width: 575px) {
    .bys-co-row--2,
    .bys-co-row--phone {
        grid-template-columns: minmax(0, 1fr);
    }
    .bys-co-section { padding: 20px 18px 18px; }
}

/* ─── Payment notice ─────────────────────────────────────────────────────── */
/* Replaces the old card/Google Pay radio group. Stripe's hosted page decides
   which wallets to show, so the checkout states what happens next instead of
   offering a choice the site cannot honour. */
.bys-co-payment-notice {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    border: 1px solid var(--divider);
    border-radius: 8px;
    padding: 16px 18px;
    background: var(--bg-light, #faf7f5);
}
.bys-co-payment-notice__icon {
    color: var(--rose);
    flex-shrink: 0;
    line-height: 0;
    margin-top: 2px;
}
.bys-co-payment-notice__title {
    margin: 0 0 5px;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--charcoal);
}
.bys-co-payment-notice__desc {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.6;
    color: var(--stone);
}

/* ==========================================================================
   Checkout — progress, error affordances and the mobile pay bar
   ========================================================================== */

/* --------------------------------------------------------------------------
   Field errors
   --------------------------------------------------------------------------
   The message carries its own icon so the failure is not signalled by colour
   alone, and the field itself is tinted so the pairing is obvious at a glance.
   -------------------------------------------------------------------------- */

.bys-co-field-error {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin: 7px 0 0;
    color: #a3302b;
    font-size: 0.8rem;
    line-height: 1.5;
}

.bys-co-field-error svg {
    flex: 0 0 auto;
    margin-top: 2px;
}

.bys-co-input.is-invalid,
.bys-co-select.is-invalid,
.bys-co-input[aria-invalid='true'] {
    border-color: #a3302b !important;
    background-color: #fdf5f4;
}

.bys-co-input[aria-invalid='true']:focus {
    border-color: #a3302b !important;
    box-shadow: 0 0 0 3px rgba(163, 48, 43, 0.15);
}

/* --------------------------------------------------------------------------
   Totals & processing notice
   -------------------------------------------------------------------------- */

.bys-co-total-row__free {
    color: #157a4a;
    font-weight: 600;
}

/* No `display` here: Livewire toggles wire:loading elements by writing
   element.style.display, so a declared one would show this before submit. */
.bys-co-processing {
    margin: 12px 0 0;
    color: var(--stone);
    font-size: 0.82rem;
    line-height: 1.6;
    text-align: center;
}

/* --------------------------------------------------------------------------
   Sticky mobile pay bar
   --------------------------------------------------------------------------
   Desktop keeps the sticky sidebar, so the bar is a phone/tablet affordance
   only. It sits above the template's fixed .footer-mobile rather than under
   it — that bar is z-index 1000.
   -------------------------------------------------------------------------- */

.bys-co-paybar { display: none; }

@media (max-width: 991px) {
    .bys-co-paybar {
        position: fixed;
        left: 0;
        right: 0;
        /* Clears the template's fixed mobile tab bar. */
        bottom: 62px;
        z-index: 1001;
        display: block;
        padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
        border-top: 1px solid var(--divider);
        background: rgba(255, 255, 255, 0.97);
        box-shadow: 0 -4px 18px rgba(53, 49, 47, 0.08);
        transition: transform 240ms cubic-bezier(0.22, 0.61, 0.36, 1), opacity 200ms ease;
    }

    /* Hidden once the real submit button is on screen, so the shopper never
       sees two pay buttons at once. */
    .bys-co-paybar.is-hidden {
        transform: translateY(120%);
        opacity: 0;
        pointer-events: none;
    }

    .bys-co-paybar__inner {
        display: flex;
        align-items: center;
        gap: 12px;
        max-width: 34rem;
        margin: 0 auto;
    }

    .bys-co-paybar__total {
        display: flex;
        flex-direction: column;
        flex: 0 0 auto;
        min-width: 0;
    }

    .bys-co-paybar__label {
        color: var(--stone);
        font-size: 0.68rem;
        font-weight: 600;
        letter-spacing: 0.1em;
        text-transform: uppercase;
    }

    .bys-co-paybar__value {
        color: var(--charcoal);
        font-size: 1.12rem;
        font-weight: 700;
        white-space: nowrap;
    }

    .bys-co-paybar__btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 1 1 auto;
        /* 50px keeps the primary action a comfortable thumb target. */
        min-height: 50px;
        padding: 13px 20px;
        border: 0;
        border-radius: 999px;
        background: var(--rose);
        color: #fff;
        font-family: 'Jost', sans-serif;
        font-size: 0.82rem;
        font-weight: 600;
        letter-spacing: 0.07em;
        text-transform: uppercase;
        cursor: pointer;
        transition: background-color 0.25s ease;
    }

    .bys-co-paybar__btn:hover,
    .bys-co-paybar__btn:focus-visible {
        background: var(--charcoal);
    }

    .bys-co-paybar__btn[disabled] {
        opacity: 0.7;
        cursor: progress;
    }

    /* The bar floats over the end of the page; reserve room so the policy text
       and the real submit are never trapped underneath it. */
    .bys-checkout {
        padding-bottom: 96px;
    }
}

/* --------------------------------------------------------------------------
   Focus visibility
   -------------------------------------------------------------------------- */

.bys-checkout a:focus-visible,
.bys-checkout button:focus-visible,
.bys-checkout select:focus-visible,
.bys-checkout input:focus-visible,
.bys-checkout textarea:focus-visible {
    outline: 2px solid var(--rose);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .bys-co-paybar { transition-duration: 0.01ms !important; }
}