/* =========================================================================
   token-pages.css
   Shared styling for the public, token-gated utility pages (no login). These
   pages load the normal Awesome Agents header/footer; this file gives the
   inner "app" the brand look using the design tokens from main.css.

   Pages:
     .bv-*  Book a Viewing            (template-book-viewing.php)
     .mb-*  Manage Booking            (template-manage-booking.php)
     .va-*  Set Viewing Availability  (template-viewing-availability.php)
     .vd-*  Verify Your Details       (template-verify-details.php)

   Loaded after main.css, so --primary-color / --accent-color / etc. and the
   Outfit + Poppins fonts are already available.
   ========================================================================= */

:root {
    --aa-primary:       #16A86C;  /* brand green  (= --secondary-color) */
    --aa-primary-dark:  #0A5D36;  /* brand green  (= --primary-color)   */
    --aa-accent:        #D92E79;  /* brand pink   (= --accent-color)    */
    --aa-success:       #16A86C;
    --aa-danger:        #dc3545;
    --aa-text:          #1A1A1A;
    --aa-muted:         #777;
    --aa-border:        #e2e2e2;
    --aa-card:          #fff;
    --aa-radius:        12px;
    --aa-shadow:        0 6px 24px rgba(10, 93, 54, 0.08);
}

/* -- Page shell: clears the fixed site header, centres the app column ----- */
.aa-token-page {
    padding: 120px 16px 60px;
    min-height: 70vh;
}
.aa-token-page .bv-container,
.aa-token-page .mb-container,
.aa-token-page .vd-container { max-width: 500px; margin: 0 auto; }
.aa-token-page .va-container { max-width: 600px; margin: 0 auto; }

@media (max-width: 992px) {
    .aa-token-page { padding-top: 100px; }
}

/* The real site header already shows the AA logo, so hide the in-card
   text wordmark the page JS injects (avoids a duplicate logo). */
.bv-logo, .mb-logo, .vd-logo { display: none; }

/* -- Cards & header blocks ------------------------------------------------ */
.bv-header, .mb-header, .vd-header, .va-header,
.bv-card,   .mb-card,   .vd-card,   .va-card,
.bv-form {
    background: var(--aa-card);
    border-radius: var(--aa-radius);
    box-shadow: var(--aa-shadow);
}
.bv-header, .mb-header, .vd-header { padding: 24px 20px; margin-bottom: 16px; text-align: center; }
.va-header { padding: 20px; margin-bottom: 16px; }
.bv-card, .mb-card, .vd-card, .bv-form { padding: 20px; margin-bottom: 16px; }
.va-card { padding: 16px; margin-bottom: 12px; }
.bv-form { display: none; }

.bv-header h1, .mb-header h1, .vd-header h1, .va-header h1,
.bv-form h2 {
    font-family: var(--font-headings, 'Outfit', sans-serif);
    font-weight: 900; color: var(--aa-text); line-height: 1.2;
}
.bv-header h1, .mb-header h1, .vd-header h1, .va-header h1 { font-size: 22px; margin-bottom: 6px; }
.bv-form h2 { font-size: 17px; margin-bottom: 16px; }
.bv-header p, .vd-header p, .va-header p { font-size: 14px; color: var(--aa-muted); }
.bv-address, .va-address { font-size: 15px; font-weight: 600; color: var(--aa-primary-dark); margin-bottom: 4px; }

/* -- Form fields ---------------------------------------------------------- */
.bv-field, .vd-field { margin-bottom: 16px; }
.vd-field { position: relative; } /* anchors the address autocomplete list */
.bv-field label, .vd-field label {
    display: block; font-size: 13px; font-weight: 600;
    color: var(--aa-muted); margin-bottom: 6px;
}
.bv-field input, .vd-field input {
    width: 100%; padding: 12px 14px; font-size: 16px;
    border: 1px solid var(--aa-border); border-radius: 8px;
    background: #fff; color: var(--aa-text);
    font-family: var(--font-body, inherit);
}
.bv-field input:focus, .vd-field input:focus {
    outline: none; border-color: var(--aa-primary);
    box-shadow: 0 0 0 3px rgba(22, 168, 108, 0.12);
}
.bv-hint, .vd-hint, .bv-field .bv-hint { font-size: 12px; color: var(--aa-muted); margin-top: 6px; }
.vd-otp { letter-spacing: 8px; text-align: center; font-size: 22px !important; }

/* -- Buttons (mirror the site .btn-primary brand gradient) ---------------- */
.bv-submit, .vd-btn, .mb-btn, .va-btn {
    padding: 14px; border: none; border-radius: var(--aa-radius);
    font-size: 15px; font-weight: 600; cursor: pointer;
    font-family: var(--font-headings, sans-serif);
    text-align: center; text-decoration: none; display: inline-block;
    transition: var(--transition, all 0.25s ease);
}
.bv-submit, .vd-btn { width: 100%; }
.bv-submit, .vd-btn, .mb-btn--primary, .va-btn-primary {
    background: var(--gradient-primary, linear-gradient(135deg, #144633 0%, #427059 100%));
    color: #fff;
}
.bv-submit:hover, .vd-btn:hover, .mb-btn--primary:hover, .va-btn-primary:hover {
    background: linear-gradient(135deg, #0f3826 0%, #365f4c 100%);
    transform: translateY(-2px); box-shadow: 0 5px 15px rgba(22, 168, 108, 0.3);
}
.mb-btn--danger { background: var(--aa-danger); color: #fff; }
.mb-btn--danger:hover { background: #c82333; transform: translateY(-2px); box-shadow: 0 5px 15px rgba(220, 53, 69, 0.25); }
.va-btn-outline { background: #fff; color: var(--aa-text); border: 2px solid var(--aa-border); }
.va-btn-outline:hover { border-color: var(--aa-primary); color: var(--aa-primary-dark); }
.bv-submit:disabled, .vd-btn:disabled, .mb-btn:disabled, .va-btn:disabled {
    opacity: 0.6; cursor: not-allowed; transform: none; box-shadow: none;
}
.vd-btn { margin-top: 12px; }

.mb-actions, .va-actions-inner { display: flex; gap: 10px; }
.mb-btn, .va-btn { flex: 1; }
.mb-actions { margin-top: 16px; }

/* -- Slot grids (book + availability) ------------------------------------- */
.bv-slots, .va-slots {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 6px;
}
.bv-slot, .va-slot {
    padding: 10px 4px; text-align: center; font-size: 14px; font-weight: 500;
    border: 2px solid var(--aa-border); border-radius: 8px; cursor: pointer;
    transition: background 0.12s, border-color 0.12s; user-select: none; background: #fff;
}
.va-slot { touch-action: none; }
.bv-slot:hover, .va-slot:hover { border-color: var(--aa-primary); }
.bv-slot.selected, .va-slot.active { background: var(--aa-primary); color: #fff; border-color: var(--aa-primary); }
.va-slot.booked {
    background: #fff3cd; border-color: #ffc107; color: #856404;
    cursor: default; font-size: 11px; touch-action: auto;
}
.va-slot.booked .va-booked-name { font-size: 10px; display: block; margin-top: 2px; }
@media (max-width: 400px) {
    .bv-slots, .va-slots { grid-template-columns: repeat(3, 1fr); }
}

.bv-day-header { font-size: 14px; font-weight: 600; margin-bottom: 10px; }
.bv-day-date, .va-day-date { color: var(--aa-muted); font-weight: normal; }
.va-card h2 { font-size: 15px; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.va-day-label { font-size: 14px; font-weight: 600; color: var(--aa-text); }

/* -- Availability page extras --------------------------------------------- */
.va-quick-btns { display: flex; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; }
.va-quick-btn {
    padding: 5px 10px; font-size: 11px; font-weight: 600; border: 1.5px solid var(--aa-border);
    border-radius: 6px; background: #fff; cursor: pointer; color: var(--aa-muted); transition: 0.15s;
}
.va-quick-btn:hover { border-color: var(--aa-primary); color: var(--aa-primary-dark); }
.va-paint-hint { font-size: 12px; color: var(--aa-muted); margin-top: 4px; font-style: italic; }
.va-actions {
    position: sticky; bottom: 0; padding: 16px 0;
    background: #f4f5f3; border-top: 1px solid var(--aa-border);
}
.va-actions-inner { max-width: 600px; margin: 0 auto; }
.va-repeat {
    display: flex; align-items: center; gap: 8px; padding: 12px 16px;
    background: #f8f9fa; border-radius: 8px; margin-bottom: 16px; font-size: 13px;
}
.va-repeat input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--aa-primary); }
.va-toast {
    position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%);
    background: var(--aa-success); color: #fff; padding: 12px 24px; border-radius: 8px;
    font-weight: 600; font-size: 14px; display: none; z-index: 1000; box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
.va-toast.error { background: var(--aa-danger); }

/* -- Manage booking details ----------------------------------------------- */
.mb-detail-row {
    display: flex; justify-content: space-between; padding: 10px 0;
    border-bottom: 1px solid #f0f0f0; font-size: 14px;
}
.mb-detail-row:last-child { border-bottom: none; }
.mb-detail-label { color: var(--aa-muted); font-weight: 500; }
.mb-detail-value { font-weight: 600; text-align: right; }
.mb-status { display: inline-block; padding: 4px 12px; border-radius: 20px; font-size: 13px; font-weight: 600; text-transform: uppercase; }
.mb-status--confirmed { background: #d4edda; color: #155724; }
.mb-status--cancelled { background: #f8d7da; color: #721c24; }

/* -- Confirmation / result / contact panels ------------------------------- */
.bv-confirmed, .mb-result, .vd-result {
    background: var(--aa-card); border-radius: var(--aa-radius);
    padding: 32px 20px; text-align: center; box-shadow: var(--aa-shadow); display: none;
}
.bv-check { font-size: 48px; margin-bottom: 12px; color: var(--aa-success); }
.bv-confirmed h2, .vd-result h2 { font-size: 20px; color: var(--aa-success); margin-bottom: 8px; font-family: var(--font-headings, sans-serif); }
.mb-result h2 { font-size: 20px; margin-bottom: 8px; font-family: var(--font-headings, sans-serif); }
.bv-confirmed .bv-details { font-size: 14px; margin-bottom: 16px; line-height: 1.6; }
.mb-result p, .vd-result p { font-size: 14px; color: var(--aa-muted); margin-bottom: 12px; }
.mb-result a, .vd-result a { color: var(--aa-primary-dark); font-weight: 600; }
.bv-confirmed .bv-contact, .mb-contact {
    background: #f8f9fa; border-radius: 8px; padding: 14px; font-size: 14px; margin-top: 12px;
}
.bv-confirmed .bv-contact strong, .mb-contact strong { display: block; margin-bottom: 4px; }

/* -- Inline messages ------------------------------------------------------ */
.vd-msg { font-size: 14px; padding: 12px 14px; border-radius: 8px; margin-bottom: 16px; display: none; }
.vd-msg--error { background: #f8d7da; color: #721c24; }
.vd-msg--ok { background: #d4edda; color: #155724; }
.bv-error-msg { color: var(--aa-danger); font-size: 13px; margin-bottom: 12px; display: none; }

/* -- Empty / error / loading states --------------------------------------- */
.bv-error-page, .mb-error-page, .vd-error-page, .va-error-page {
    display: flex; align-items: center; justify-content: center; min-height: 50vh; text-align: center;
}
.bv-error-page h1, .mb-error-page h1, .vd-error-page h1, .va-error-page h1 {
    font-size: 20px; margin-bottom: 8px; font-family: var(--font-headings, sans-serif);
}
.bv-error-page p, .mb-error-page p, .vd-error-page p, .va-error-page p { color: var(--aa-muted); font-size: 14px; }
.bv-loading, .mb-loading, .vd-loading, .va-loading { text-align: center; padding: 40px; color: var(--aa-muted); }
.bv-empty { text-align: center; padding: 40px 20px; color: var(--aa-muted); }
.bv-empty h2 { font-size: 18px; margin-bottom: 8px; color: var(--aa-text); }

/* -- Address autocomplete (Ideal Postcodes — verify page) ----------------- */
.vd-ac-list {
    position: absolute; left: 0; right: 0; top: 100%; z-index: 20;
    background: #fff; border: 1px solid var(--aa-border); border-radius: 8px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.12); margin-top: 4px; max-height: 240px; overflow-y: auto;
}
.vd-ac-item { padding: 10px 14px; font-size: 14px; cursor: pointer; border-bottom: 1px solid #f0f0f0; }
.vd-ac-item:last-child { border-bottom: none; }
.vd-ac-item:hover, .vd-ac-item.active { background: #eafaf2; }
.vd-ac-empty { padding: 10px 14px; font-size: 13px; color: var(--aa-muted); }

/* ===== manage-booking confirm dialog (native <dialog>, replaces alert/confirm) ===== */
.mb-dialog {
    /* main.css's global margin reset kills the UA's dialog auto-centering —
       re-assert it explicitly. */
    position: fixed;
    inset: 0;
    margin: auto;
    width: calc(100% - 48px);
    max-width: 340px;
    height: fit-content;
    border: none;
    border-radius: 16px;
    padding: 26px 24px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
}
.mb-dialog::backdrop { background: rgba(10, 30, 22, 0.55); backdrop-filter: blur(2px); }
.mb-dialog-message { font-size: 15px; line-height: 1.55; margin: 0 0 18px; color: var(--aa-ink, #1c2b24); }
.mb-dialog-actions { display: flex; flex-direction: column; gap: 10px; }
.mb-dialog-actions .mb-btn { width: 100%; }
.mb-btn--outline { background: transparent; color: var(--aa-ink, #1c2b24); border: 1.5px solid #cfd8d3; }
.mb-btn--outline:hover { border-color: var(--aa-ink, #1c2b24); }
.mb-error { color: var(--aa-danger); font-size: 14px; margin-top: 12px; text-align: center; }