/* 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;
}

/* ── 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;
}