/**
 * Shared login / create-account modal.
 *
 * The shell (overlay, panel, close button) and the form controls come from
 * the theme's global styles — modal-wrapper__* and the input/label/btn rules
 * in style.css — same as the offer product modal. This file only adds the
 * modal's internal layout, so it stays visually consistent with the schedule
 * modal it was lifted from.
 */

/* Scroll lock — deliberately its own class so the offer product modal's
   bb-modal-open add/remove can't unlock scroll while this modal is open. */
body.bb-auth-open {
    overflow: hidden;
}

.bb-auth-modal .modal-wrapper__panel {
    max-width: 560px;
    width: 100%;
}

.bb-auth-modal .modal-wrapper__inner {
    padding: 32px;
}

/* Belt-and-braces: some resets set display on divs, which defeats [hidden]. */
.bb-auth-modal__step[hidden],
#bb-auth-home-location-wrap[hidden] {
    display: none !important;
}

/* ── Choose step ─────────────────────────────────────────────────────────── */

.bb-auth-modal__title {
    margin: 0 0 8px;
}

.bb-auth-modal__context {
    margin: 0 0 24px;
    color: #6C7277;
}

.bb-auth-modal__actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
}

.bb-auth-modal__note {
    font-size: 13px;
    color: #6C7277;
    margin: 0;
}

/* ── Create step ─────────────────────────────────────────────────────────── */

.bb-auth-modal__error {
    background: #fdecea;
    color: #b00020;
    border-radius: 8px;
    padding: 12px 16px;
    font-size: 14px;
    margin: 0 0 16px;
}

.bb-auth-modal__form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.bb-auth-modal__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

@media (max-width: 600px) {
    .bb-auth-modal__row {
        grid-template-columns: 1fr;
    }
}

.bb-auth-modal__field label {
    margin-bottom: 8px;
}

.bb-auth-modal__hint {
    display: block;
    font-size: 12px;
    color: #6C7277;
    margin-top: 6px;
}

.bb-auth-modal__checks {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.bb-auth-modal__checks label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0;
    font-size: 14px;
}

.bb-auth-modal__checks input[type="checkbox"] {
    margin-top: 3px;
    flex: 0 0 auto;
}

.bb-auth-modal__form-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-top: 8px;
}

.bb-auth-modal__form-actions .bb-auth-modal__submit {
    width: 100%;
}

/* ── Success step ────────────────────────────────────────────────────────── */

.bb-auth-modal__spinner {
    width: 28px;
    height: 28px;
    border: 3px solid #eee;
    border-top-color: var(--brand-color, #25282a);
    border-radius: 50%;
    margin: 16px auto 0;
    animation: bbAuthSpin .8s linear infinite;
}

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

@media (prefers-reduced-motion: reduce) {
    .bb-auth-modal__spinner {
        animation: none;
    }
}

/* ── Inline mode (content mounted inside another popup's body) ──────────── */
/* e.g. the offer page's product modal: keep spacing tight since the host
   body brings its own padding, and the host header carries the title. */

#bb-modal-body .bb-auth-modal__content .bb-auth-modal__title {
    margin-top: 0;
}

#bb-modal-body .bb-auth-modal__content {
    display: block;
    width: 100%;
}

/* ── Logged-out footer gate (offer product modal) ───────────────────────── */
/* Login CTA + divider + "Don't have an account? Create one now." — mirrors
   the /account/ page pattern. Rendered by offer.js renderModalFooter(). */

.bb-auth-gate {
    grid-column: 1 / -1;   /* footer--btns is a grid (2 cols for the purchase
                              buttons) — span every column, not one cell */
    display: flex;
    flex-direction: column;
    align-items: center;   /* button + register line centered */
    width: 100%;
    gap: 16px;
    text-align: center;
}

.bb-auth-gate__divider {
    align-self: stretch;   /* divider spans the full modal content width */
    height: 1px;
    background: #e5e5e5;
}

/* The theme forces .btn to width:100% inside footer--btns; keep the login
   CTA at natural width so it centers. Extra selector depth beats the theme's
   .modal-wrapper__footer--btns .btn regardless of stylesheet order. */
.modal-wrapper__footer--btns .bb-auth-gate .bb-auth-gate__login {
    width: auto;
}

.bb-auth-gate__register {
    margin: 0;
    font-size: 14px;
    color: #6C7277;
}

.bb-auth-gate__register a {
    color: inherit;
    text-decoration: underline;
}