/* ========================================================================
   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 --- */
.rp-wrap [id^="cr-"] *:focus-visible {
    outline: 2px solid var(--crb-accent);
    outline-offset: 2px;
}

/* --- 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: ensure readable text on neon/accent backgrounds --- */
/* Use background transition instead of ::before overlay — text nodes (not
   wrapped in elements) cannot escape an absolute ::before via z-index,
   causing them to be hidden under the sliding overlay on hover.           */
.rp-wrap [id^="cr-"] .crb-btn-primary {
    color: var(--crb-btn-text, #000);
    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;  /* disable the sliding overlay */
}

.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;
}