/* ========================================================================
   CR Booking Theme Bridge

   Maps --crb-* component variables to --rp-* design tokens when Vue
   components render inside the Recovery Plus template. Provides safe
   standalone defaults when components render outside RP context.

   Cascade order: .rp-wrap overrides :root, so inside RP pages the
   components automatically inherit the dark theme. On regular WP pages
   the :root defaults provide a clean light appearance.
   ======================================================================== */

/* --- Standalone defaults (any WordPress theme, light appearance) --- */
:root {
    --crb-accent: #0073aa;
    --crb-surface-0: #ffffff;
    --crb-surface-2: #f1f3f6;
    --crb-text-1: #111827;
    --crb-text-2: #374151;
    --crb-text-3: #6b7280;
    --crb-accent-hover: #005a87;
    --crb-accent-light: rgba(0, 115, 170, 0.1);
    --crb-text-primary: #1a1a1a;
    --crb-text-secondary: #6b7280;
    --crb-text-muted: #9ca3af;
    --crb-bg-primary: #ffffff;
    --crb-bg-secondary: #f9fafb;
    --crb-bg-card: #ffffff;
    --crb-bg-card-hover: #f3f4f6;
    --crb-bg-input: #ffffff;
    --crb-border: #e5e7eb;
    --crb-border-focus: #0073aa;
    --crb-font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    --crb-font-display: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    --crb-radius: 12px;
    --crb-radius-sm: 8px;
    --crb-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    --crb-shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.1);
    --crb-success: #10b981;
    --crb-error: #ef4444;
    --crb-warning: #f59e0b;
    --crb-success-bg: #f0fdf4;
    --crb-success-text: #059669;
    --crb-error-bg: #fef2f2;
    --crb-error-border: #fecaca;
    --crb-error-text: #991b1b;
    --crb-warning-bg: #fffbeb;
    --crb-warning-text: #d97706;
    --crb-warning-border: #fde68a;
    --crb-available-bg: #f0fdf4;
    --crb-available-border: #10b981;
    --crb-available-text: #059669;
    --crb-btn-text: #ffffff;
    --crb-neon: #c8ff00;
    --crb-glow: none;
    --crb-glow-sm: none;
    --crb-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    --crb-card-hover-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    --crb-transition-fast: 150ms ease;
    --crb-transition-base: 300ms ease;
}

/* --- Recovery Plus context (inherits dark theme tokens) --- */
.rp-wrap {
    --crb-accent: var(--rp-accent);
    --crb-accent-hover: var(--rp-accent-hover);
    --crb-accent-light: rgba(0, 212, 255, 0.1);
    --crb-text-primary: var(--rp-text-primary);
    --crb-text-secondary: var(--rp-text-secondary);
    --crb-text-muted: var(--rp-text-muted);
    --crb-bg-primary: var(--rp-bg-primary);
    --crb-bg-secondary: var(--rp-bg-secondary);
    --crb-bg-card: var(--rp-bg-card);
    --crb-bg-card-hover: var(--rp-bg-card-hover);
    --crb-bg-input: var(--rp-bg-input);
    --crb-border: var(--rp-border);
    --crb-border-focus: var(--rp-border-focus);
    --crb-font-body: var(--rp-font-body);
    --crb-font-display: var(--rp-font-display);
    --crb-radius: var(--rp-radius-card);
    --crb-radius-sm: var(--rp-radius-md);
    --crb-shadow: var(--rp-shadow-md);
    --crb-shadow-lg: var(--rp-shadow-lg);
    --crb-success: var(--rp-success);
    --crb-error: var(--rp-red);
    --crb-warning: var(--rp-warning);
    --crb-success-bg: rgba(52, 199, 89, 0.1);
    --crb-success-text: var(--rp-success);
    --crb-error-bg: rgba(255, 59, 48, 0.1);
    --crb-error-border: rgba(255, 59, 48, 0.3);
    --crb-error-text: #ff6b6b;
    --crb-warning-bg: rgba(255, 204, 0, 0.1);
    --crb-warning-text: var(--rp-warning);
    --crb-warning-border: rgba(255, 204, 0, 0.3);
    --crb-available-bg: rgba(52, 199, 89, 0.1);
    --crb-available-border: var(--rp-success);
    --crb-available-text: var(--rp-success);
    --crb-btn-text: #000000;
    --crb-neon: var(--rp-neon, #c8ff00);
    --crb-surface-0: var(--rp-bg-card, #1a1a2e);
    --crb-surface-2: rgba(255,255,255,0.08);
    --crb-text-1: var(--rp-text-primary, #ffffff);
    --crb-text-2: var(--rp-text-secondary, #a0a0b0);
    --crb-text-3: var(--rp-text-muted, #6b7280);
    --crb-glow: var(--rp-glow);
    --crb-glow-sm: var(--rp-glow-sm);
    --crb-card-shadow: var(--rp-card-shadow);
    --crb-card-hover-shadow: var(--rp-card-hover-shadow);
    --crb-transition-fast: var(--rp-transition-fast);
    --crb-transition-base: var(--rp-transition-base);
}

/* ========================================================================
   RP Context Overrides
   These rules apply when Vue components render inside .rp-wrap to ensure
   full design system parity. Uses high specificity to beat scoped styles.
   ======================================================================== */

/* --- Font Inheritance --- */
.rp-wrap [id^="cr-"] {
    font-family: var(--rp-font-body);
    color: var(--rp-text-secondary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* --- Headings: Bebas Neue display font --- */
.rp-wrap [id^="cr-"] h1,
.rp-wrap [id^="cr-"] h2,
.rp-wrap [id^="cr-"] h3,
.rp-wrap [id^="cr-"] h4 {
    font-family: var(--rp-font-display);
    font-weight: 400;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--rp-text-primary);
    line-height: 0.95;
}

/* --- Form Inputs: dark-aware --- */
.rp-wrap [id^="cr-"] input[type="text"],
.rp-wrap [id^="cr-"] input[type="email"],
.rp-wrap [id^="cr-"] input[type="tel"],
.rp-wrap [id^="cr-"] input[type="number"],
.rp-wrap [id^="cr-"] input[type="date"],
.rp-wrap [id^="cr-"] input[type="search"],
.rp-wrap [id^="cr-"] textarea,
.rp-wrap [id^="cr-"] select {
    background: var(--crb-bg-input);
    color: var(--crb-text-primary);
    border-color: var(--crb-border);
    font-family: var(--crb-font-body);
}

.rp-wrap [id^="cr-"] input::placeholder,
.rp-wrap [id^="cr-"] textarea::placeholder {
    color: var(--crb-text-muted);
}

.rp-wrap [id^="cr-"] input:focus,
.rp-wrap [id^="cr-"] textarea:focus,
.rp-wrap [id^="cr-"] select:focus {
    border-color: var(--crb-border-focus);
    box-shadow: 0 0 0 3px var(--crb-accent-light);
    outline: none;
}

/* --- Labels --- */
.rp-wrap [id^="cr-"] label {
    color: var(--crb-text-secondary);
    font-family: var(--crb-font-body);
}

/* --- Buttons: inherit RP glow & accent --- */
.rp-wrap [id^="cr-"] button {
    font-family: var(--crb-font-body);
}

/* --- Links --- */
.rp-wrap [id^="cr-"] a {
    color: var(--crb-accent);
}
.rp-wrap [id^="cr-"] a:hover {
    color: var(--crb-accent-hover);
}

/* --- Paragraphs & body text --- */
.rp-wrap [id^="cr-"] p {
    color: var(--crb-text-secondary);
}

/* --- Table overrides --- */
.rp-wrap [id^="cr-"] table th {
    color: var(--crb-text-secondary);
    border-bottom-color: var(--crb-border);
}
.rp-wrap [id^="cr-"] table td {
    border-bottom-color: var(--crb-bg-secondary);
    color: var(--crb-text-primary);
}
.rp-wrap [id^="cr-"] table tbody tr:hover {
    background: var(--crb-bg-secondary);
}

/* --- Focus-visible: accessible keyboard focus (WCAG 2.1 AA) --- */
/* Standalone context (outside RP theme) */
.crb-form-step *:focus-visible,
.crbm-app *:focus-visible,
.gift-card-purchase *:focus-visible,
#cr-booking-app *:focus-visible,
#cr-gift-card-app *:focus-visible,
#cr-my-account-app *:focus-visible {
    outline: 2px solid var(--crb-accent, #0073aa);
    outline-offset: 2px;
}

/* RP theme context */
.rp-wrap [id^="cr-"] *:focus-visible {
    outline: 2px solid var(--crb-accent);
    outline-offset: 2px;
}

/* --- Minimum touch targets (WCAG 2.5.8 AA — 44x44px) --- */
/* Buttons, links, selects get 44px min dimensions directly */
.crb-form-step button,
.crb-form-step a,
.crb-form-step select,
.crbm-app button,
.crbm-app a,
.crbm-app select,
#cr-booking-app button,
#cr-booking-app a,
#cr-booking-app select,
#cr-gift-card-app button,
#cr-gift-card-app a,
#cr-gift-card-app select,
#cr-my-account-app button,
#cr-my-account-app a,
#cr-my-account-app select {
    min-height: 44px;
    min-width: 44px;
}

/* Checkboxes & radios stay native size — use padding on label for tap area */
.crb-form-step input[type="checkbox"],
.crb-form-step input[type="radio"],
.crbm-app input[type="checkbox"],
.crbm-app input[type="radio"],
#cr-booking-app input[type="checkbox"],
#cr-booking-app input[type="radio"] {
    width: 18px;
    height: 18px;
    min-height: 0;
    min-width: 0;
    margin: 0;
    cursor: pointer;
    accent-color: var(--crb-accent);
    flex-shrink: 0;
}

/* --- Card glow on hover in RP context --- */
.rp-wrap [id^="cr-"] .crb-service-card:hover,
.rp-wrap [id^="cr-"] .crb-card:hover {
    box-shadow: var(--rp-glow);
}

.rp-wrap [id^="cr-"] .crb-service-card.selected {
    box-shadow: var(--rp-glow-sm);
}

/* --- Primary button: match RP site .rp-btn-primary (solid cyan, dark text) --- */
/* !important required to beat Vue scoped [data-v-*] attribute selectors      */
.rp-wrap [id^="cr-"] .crb-btn-primary {
    background: var(--rp-accent, #00d4ff) !important;
    color: #0a0a0f !important;
    border: 2px solid var(--rp-accent, #00d4ff) !important;
    transition: background var(--rp-transition-base, 300ms ease),
                color       var(--rp-transition-base, 300ms ease),
                box-shadow  var(--rp-transition-base, 300ms ease);
}

.rp-wrap [id^="cr-"] .crb-btn-primary::before {
    display: none;
}

.rp-wrap [id^="cr-"] .crb-btn-primary:hover,
.rp-wrap [id^="cr-"] .crb-btn-primary:focus {
    background: var(--rp-neon, #c8ff00) !important;
    color: #111 !important;
    box-shadow: var(--rp-glow);
}

.rp-wrap [id^="cr-"] .crb-btn-primary:active {
    background: var(--rp-neon, #c8ff00) !important;
    color: #111 !important;
    opacity: 0.85;
}

/* --- Progress bar glow --- */
.rp-wrap [id^="cr-"] .crb-progress-fill {
    box-shadow: var(--rp-glow-sm);
}

/* --- Calendar: ensure date numbers are visible on dark backgrounds --- */
/* Past and unavailable dates use a muted but readable color instead of
   relying on opacity alone (opacity on dark text over dark bg = invisible). */
.rp-wrap [id^="cr-"] .crb-calendar-day.past .crb-day-number,
.rp-wrap [id^="cr-"] .crb-calendar-day.unavailable .crb-day-number {
    color: var(--crb-text-muted, #9ca3af);
}

/* Other-month dates (previous/next month padding days) */
.rp-wrap [id^="cr-"] .crb-calendar-day.other-month .crb-day-number {
    color: var(--crb-text-muted, #9ca3af);
    opacity: 0.6;
}

/* ── Small Phone (≤360px) ─────────────────────────────────────────── */
@media (max-width: 360px) {
  .crb-sidebar { display: none; }
  .crb-main { padding: 8px; }
  .crb-card { padding: 12px; }
  .crb-modal { margin: 8px; width: calc(100% - 16px); }
  .crb-table th, .crb-table td { padding: 6px 8px; font-size: 0.8125rem; }
  .crb-stat-card { min-width: 100%; }
  .crb-btn { padding: 10px 12px; font-size: 0.875rem; }
}

/* ── Large Phone (≤480px) ─────────────────────────────────────────── */
@media (max-width: 480px) {
  .crb-grid-2, .crb-grid-3, .crb-grid-4 { grid-template-columns: 1fr; }
  .crb-form-row { flex-direction: column; gap: 8px; }
  .crb-modal-footer { flex-direction: column; }
  .crb-modal-footer .crb-btn { width: 100%; }
}

/* ── Tablet Landscape (≤1024px) ───────────────────────────────────── */
@media (max-width: 1024px) {
  .crb-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .crb-grid-3 { grid-template-columns: repeat(2, 1fr); }
  .crb-sidebar { width: 220px; }
}

/* ── Print Styles ─────────────────────────────────────────────────── */
@media print {
  .crb-sidebar,
  .crb-sidebar-overlay,
  .crb-btn:not(.crb-btn-print),
  .crb-modal-backdrop,
  .crb-toast,
  .crb-nav-item,
  nav,
  button:not([type="submit"]) { display: none !important; }

  .crb-main { margin: 0; padding: 0; width: 100%; }
  .crb-card { box-shadow: none; border: 1px solid #ddd; break-inside: avoid; }
  .crb-table { font-size: 10pt; }
  .crb-badge { border: 1px solid currentColor; }

  body { font-size: 12pt; color: #000; background: #fff; }
  a { color: #000; text-decoration: underline; }
  a[href]::after { content: " (" attr(href) ")"; font-size: 0.8em; }
}