/* Borders Booking – Public Styles
   Inherits CSS variables from the Borders theme.
   Works standalone too via fallback values. */

:root {
    --bbk-gold:        var(--color-gold,        #c9a84c);
    --bbk-bg:          var(--color-bg,           #0b1322);
    --bbk-bg-card:     var(--color-bg-card,      #132038);
    --bbk-text:        var(--color-text,         #ffffff);
    --bbk-text-muted:  var(--color-text-muted,   #8a9bbf);
    --bbk-border:      var(--color-border-light, rgba(255,255,255,0.08));
    --bbk-radius:      var(--radius, 4px);
}

/* ── Booking Wrap ─────────────────────────────────────── */
.bbk-booking-wrap {
    color: var(--bbk-text);
}

/* ── Steps ────────────────────────────────────────────── */
.bbk-step { animation: bbkFadeIn 0.3s ease; }
@keyframes bbkFadeIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }

/* ── Event Info Box ───────────────────────────────────── */
.bbk-event-info {
    grid-column: span 2;
}
.bbk-info-box {
    display: flex;
    gap: 1.5rem;
    padding: 0.75rem 1rem;
    background: rgba(201,168,76,0.06);
    border: 1px solid rgba(201,168,76,0.2);
    border-radius: var(--bbk-radius);
    font-size: 0.875rem;
}
#bbk-event-price-label  { color: var(--bbk-gold); font-weight: 600; }
#bbk-event-deposit-label { color: var(--bbk-text-muted); }

/* ── Booking Summary ──────────────────────────────────── */
.bbk-booking-summary {
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--bbk-border);
    border-radius: var(--bbk-radius);
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
}

.bbk-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.4rem 0;
    font-size: 0.875rem;
    border-bottom: 1px solid var(--bbk-border);
    gap: 1rem;
}
.bbk-summary-row:last-child { border-bottom: none; }
.bbk-summary-row span       { color: var(--bbk-text-muted); }
.bbk-summary-row strong     { color: var(--bbk-text); text-align: right; }
.bbk-summary-total strong   { color: var(--bbk-gold); font-size: 1.1rem; }

/* ── Price Breakdown ──────────────────────────────────── */
.bbk-breakdown {
    background: rgba(201,168,76,0.04);
    border: 1px solid rgba(201,168,76,0.15);
    border-radius: var(--bbk-radius);
    padding: 1rem 1.25rem;
    margin-top: 0.75rem;
}
.bbk-breakdown-row {
    display: flex;
    justify-content: space-between;
    padding: 0.35rem 0;
    font-size: 0.875rem;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.bbk-breakdown-row:last-child { border-bottom: none; }
.bbk-breakdown-row span       { color: var(--bbk-text-muted); }
.bbk-breakdown-row strong     { color: var(--bbk-text); }

/* ── Back button ──────────────────────────────────────── */
.bbk-back {
    background: none;
    border: none;
    color: var(--bbk-text-muted);
    cursor: pointer;
    font-size: 0.85rem;
    padding: 0;
    margin-bottom: 1rem;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    transition: color 0.2s;
}
.bbk-back:hover { color: var(--bbk-gold); }

/* ── Success ──────────────────────────────────────────── */
.bbk-success {
    text-align: center;
    padding: 2rem 1rem;
}

.bbk-success-icon {
    width: 56px;
    height: 56px;
    background: rgba(201,168,76,0.12);
    border: 2px solid var(--bbk-gold);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    color: var(--bbk-gold);
    margin: 0 auto 1.25rem;
}

.bbk-success h3 {
    color: var(--bbk-gold);
    margin-bottom: 0.5rem;
    font-size: 1.4rem;
}

.bbk-success p {
    color: var(--bbk-text-muted);
    font-size: 0.95rem;
}

.bbk-ref-box {
    display: inline-block;
    background: rgba(201,168,76,0.08);
    border: 1px solid rgba(201,168,76,0.2);
    border-radius: var(--bbk-radius);
    padding: 0.75rem 1.5rem;
    margin: 1rem 0;
    font-size: 0.9rem;
    color: var(--bbk-text-muted);
}

/* ── Spinner ──────────────────────────────────────────── */
.bbk-spin {
    display: inline-block;
    width: 28px;
    height: 28px;
    border: 3px solid rgba(201,168,76,0.2);
    border-top-color: var(--bbk-gold);
    border-radius: 50%;
    animation: bbkSpin 0.7s linear infinite;
}
@keyframes bbkSpin { to { transform: rotate(360deg); } }

/* ── Error ────────────────────────────────────────────── */
.bbk-error-msg {
    background: rgba(220,50,50,0.1);
    border: 1px solid rgba(220,50,50,0.3);
    border-radius: var(--bbk-radius);
    color: #ff8080;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
}

/* ── Notice ───────────────────────────────────────────── */
.bbk-notice {
    color: var(--bbk-text-muted);
    font-style: italic;
    padding: 1rem 0;
}

/* ── Terms notice (Step 3) ────────────────────────────── */
.bbk-terms-notice {
    background: rgba(201,168,76,0.07);
    border-left: 3px solid var(--bbk-gold, #c9a84c);
    border-radius: 0 4px 4px 0;
    padding: 0.85rem 1rem;
    font-size: 0.85rem;
    color: var(--bbk-text-muted, #8a9bbf);
    line-height: 1.6;
}

.bbk-terms-notice strong {
    color: var(--bbk-gold, #c9a84c);
}

.bbk-terms-notice a {
    color: var(--bbk-gold, #c9a84c);
    text-decoration: underline;
}

.bbk-terms-notice-full {
    border-left-color: #6bd48e;
    background: rgba(107,212,142,0.07);
}

.bbk-terms-notice-full strong { color: #6bd48e; }

/* ── Payment option cards ─────────────────────────────── */
.bbk-payment-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.bbk-payment-option {
    cursor: pointer;
    display: block;
}

.bbk-payment-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.bbk-payment-option-inner {
    border: 2px solid var(--bbk-border, rgba(255,255,255,0.12));
    border-radius: 6px;
    padding: 1rem;
    transition: border-color 0.2s, background 0.2s;
    background: var(--bbk-card-bg, #132038);
    height: 100%;
}

.bbk-payment-option:hover .bbk-payment-option-inner,
.bbk-payment-option-selected .bbk-payment-option-inner {
    border-color: var(--bbk-gold, #c9a84c);
    background: rgba(201,168,76,0.07);
}

.bbk-payment-option-title {
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--bbk-text, #e0e8f0);
    margin-bottom: 0.3rem;
}

.bbk-payment-option-amount {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--bbk-gold, #c9a84c);
    margin-bottom: 0.2rem;
}

.bbk-payment-option-sub {
    font-size: 0.75rem;
    color: var(--bbk-muted, #8a9bbf);
    line-height: 1.4;
}

/* ── Deposit warning ──────────────────────────────────── */
.bbk-deposit-warning {
    background: rgba(224,80,80,0.08);
    border: 1px solid rgba(224,80,80,0.25);
    border-radius: 5px;
    padding: 0.85rem 1rem;
    font-size: 0.82rem;
    color: #ffaaaa;
    line-height: 1.6;
    margin-top: 0.5rem;
}

.bbk-deposit-warning strong { color: #ff8080; }

.bbk-deposit-warning ul {
    margin: 0.4rem 0 0 1.1rem;
    padding: 0;
}

.bbk-deposit-warning li { margin-bottom: 0.2rem; }

/* ── Balance row in breakdown ─────────────────────────── */
.bbk-balance-row strong { color: #ffaaaa; }

@media (max-width: 540px) {
    .bbk-payment-options { grid-template-columns: 1fr; }
}

/* ── Admin styles (loaded inline here for non-Borders themes) ── */
.bbk-confirmation-wrap {
    max-width: 700px;
    margin: 0 auto;
}

.bbk-balance-wrap {
    max-width: 600px;
    margin: 0 auto;
}

/* Stripe Element theming */
#bbk-payment-element,
#bbk-balance-payment-element {
    padding: 0.5rem 0;
}