/* ============================================================
   Booking-v2 → Theme Design Token Alignment
   Loaded AFTER variables.css to override plugin defaults.
   Maps booking plugin variables to the site's design tokens
   so booking pages match the rest of the theme (dark bg,
   Poppins headings, Outfit body, blue accent palette).
   ============================================================ */

/* ── 1. Remap booking-v2 CSS variables to theme tokens ─────── */
:root {
  /* Primary palette */
  --primary: var(--brand-primary) !important;          /* #335cc4 */
  --primary-light: #4a73d4 !important;
  --primary-dark: var(--brand-dark) !important;        /* #1e3a8a */
  --primary-lighter: rgba(51, 92, 196, 0.12) !important;
  --primary-darker: #162d6e !important;
  --accent: var(--brand-accent) !important;            /* #059669 */

  /* Page background — dark to match theme */
  --bg-page: var(--pg-bg) !important;                  /* #050A14 */
  --bg-surface: var(--pg-bg2) !important;

  /* Border */
  --border-color: var(--pg-border) !important;

  /* Text colors for dark background */
  --text-primary: var(--pg-text) !important;           /* #E8F0FE */
  --text-secondary: var(--pg-text2) !important;        /* #8BA3C7 */
  --text-muted: var(--pg-text3) !important;            /* #4A6080 */

  /* Font alignment */
  --font-heading: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  --font-body: 'Outfit', sans-serif !important;
}

/* ── 2. Global font overrides ──────────────────────────────── */

/* Any element with inline Noto Serif JP → Poppins */
[style*="Noto Serif JP"] {
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* Any element with inline Montserrat → Outfit */
[style*="font-family: 'Montserrat'"],
[style*="font-family:'Montserrat'"] {
  font-family: 'Outfit', sans-serif !important;
}

/* Heading elements inside booking pages */
.booking-hero-section h1,
.booking-hero-section h2,
.booking-hero-section h3,
.services-hero-section h1,
.services-hero-section h2,
.events-hero-section h1,
.events-hero-section h2,
.booking-page-content h1,
.booking-page-content h2,
.booking-page-content h3,
.booking-page-content h4,
.booking-page-content h5,
.booking-page-content h6,
.booking-appointment-page h1,
.booking-appointment-page h2,
.booking-appointment-page h3,
.page-title,
.plan-name,
.section-title,
.service-name,
.service-title,
.event-title,
.event-name,
.portal-title,
.checkout-title,
.loading-text {
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* Body / container wrappers → Outfit */
.booking-services-page,
.booking-page-content,
.booking-appointment-page,
.service-detail-page,
.event-detail-page,
.events-page-content,
.plugin-page,
.pricing-plans-page,
.checkout-page,
.min-h-screen {
  font-family: 'Outfit', sans-serif !important;
}

/* ── 3. Page & plugin wrappers ─────────────────────────────── */
.plugin-page {
  background: var(--pg-bg) !important;
  color: var(--pg-text) !important;
}

.content-body {
  background: transparent !important;
}

/* ── 4. Card / surface backgrounds (white → dark surface) ──── */
.plan-card,
.service-card,
.event-card,
.booking-card,
.main-content,
.sidebar-content,
.sidebar-card,
.loading-content,
.empty-state,
.summary-card,
.detail-card,
.appointment-card,
.info-card,
.staff-card,
.time-slot-card,
.category-card,
.portal-card,
.booking-summary,
.order-summary,
.event-body,
.service-body {
  background: var(--pg-bg2) !important;
  border-color: var(--pg-border) !important;
  color: var(--pg-text) !important;
}

/* Content grid columns */
.content-grid .main-content,
.content-grid .sidebar {
  background: var(--pg-bg2) !important;
  border-color: var(--pg-border) !important;
}

/* ── 5. Hero sections ──────────────────────────────────────── */
.booking-hero-section,
.services-hero-section,
.events-hero-section {
  background: var(--pg-bg) !important;
}

/* Hero badge/pill */
.booking-hero-section .inline-flex[style*="border"],
.services-hero-section .inline-flex[style*="border"] {
  background: var(--pg-bg2) !important;
  border-color: var(--pg-border) !important;
}

/* Hero icon boxes */
.booking-hero-section .rounded-2xl[style*="background"],
.services-hero-section .rounded-2xl[style*="background"] {
  background: var(--pg-accent-12) !important;
}

.booking-hero-section .rounded-2xl svg,
.services-hero-section .rounded-2xl svg {
  color: var(--pg-blue-bright) !important;
}

/* Hero outline buttons (Browse Services, View Events) */
.booking-hero-section a.bg-white,
.services-hero-section a.bg-white,
.events-hero-section a.bg-white,
.booking-hero-section a[style*="border: 2px"],
.services-hero-section a[style*="border: 2px"] {
  background: var(--pg-bg2) !important;
  color: var(--pg-blue-bright) !important;
  font-family: 'Poppins', sans-serif !important;
}

/* Hero CTA primary buttons */
.booking-hero-section a[style*="background-color: var(--primary)"],
.services-hero-section a[style*="background-color: var(--primary)"] {
  font-family: 'Poppins', sans-serif !important;
}

/* Step circles in "How It Works" */
.booking-hero-section .rounded-full[style*="background-color: var(--primary)"],
.services-hero-section .rounded-full[style*="background-color: var(--primary)"] {
  box-shadow: 0 0 20px rgba(51, 92, 196, 0.4) !important;
}

/* ── 6. Text color alignment ───────────────────────────────── */

/* Headings */
.page-title,
.plan-name,
.service-name,
.service-title,
.event-title,
.event-name,
.section-title,
.portal-title,
.checkout-title {
  color: var(--pg-text) !important;
}

/* Subtitles & descriptions */
.page-subtitle,
.plan-description,
.plan-billing,
.service-description,
.event-description,
.empty-state p,
.meta-label,
.duration-label {
  color: var(--pg-text2) !important;
}

/* Meta values */
.meta-value,
.duration-value {
  color: var(--pg-text) !important;
}

/* Price displays */
.plan-price,
.service-price,
.event-price {
  color: var(--pg-blue-bright) !important;
}

/* List items inside cards */
.plan-features li,
.service-features li {
  color: var(--pg-text2) !important;
}

.plan-features li i,
.service-features li i {
  color: var(--pg-blue-bright) !important;
}

/* Empty state */
.empty-state h3 {
  color: var(--pg-text) !important;
}
.empty-icon {
  color: var(--pg-text3) !important;
}

/* ── 7. Buttons ────────────────────────────────────────────── */
.btn-select-plan,
.btn-book-now,
.btn-book-event,
.btn-primary-action,
.booking-btn,
.book-btn,
a[class*="btn-book"],
a[class*="btn-select"],
button[class*="btn-book"],
button[class*="btn-select"] {
  background: var(--brand-primary) !important;
  color: #fff !important;
  font-family: 'Poppins', sans-serif !important;
  letter-spacing: 0.5px;
  border-radius: 4px !important;
  transition: all 0.2s ease !important;
}

.btn-select-plan:hover,
.btn-book-now:hover,
.btn-book-event:hover,
.btn-primary-action:hover,
.booking-btn:hover,
.book-btn:hover {
  background: var(--brand-dark) !important;
  color: #fff !important;
  transform: translateY(-2px) !important;
}

/* ── 8. Back button / breadcrumbs ──────────────────────────── */
.back-button {
  background: var(--pg-bg2) !important;
  color: var(--pg-blue-bright) !important;
  border-color: var(--pg-border) !important;
}

.back-button:hover {
  background: var(--brand-primary) !important;
  color: #fff !important;
  border-color: var(--brand-primary) !important;
}

/* ── 9. Borders & dividers ─────────────────────────────────── */
.plan-billing,
.plan-card,
.service-card,
.event-card,
.portal-nav-tabs,
.appointment-card,
.category-card {
  border-color: var(--pg-border) !important;
}

/* ── 10. Portal navigation tabs (my-appointments, etc.) ────── */
.portal-tab {
  color: var(--pg-text2) !important;
  border-bottom-color: transparent !important;
}

.portal-tab:hover {
  color: var(--pg-blue-bright) !important;
  background: var(--pg-accent-08) !important;
}

.portal-tab.active {
  color: var(--pg-blue-bright) !important;
  border-bottom-color: var(--brand-primary) !important;
}

.portal-nav-tabs {
  border-bottom-color: var(--pg-border) !important;
}

/* Tab / filter buttons */
.tab-button,
.category-tab,
.filter-tab {
  color: var(--pg-text2) !important;
  border-color: transparent !important;
}

.tab-button.active,
.category-tab.active,
.filter-tab.active {
  color: var(--pg-blue-bright) !important;
  border-color: var(--brand-primary) !important;
}

/* ── 11. Category sidebar (services listing) ───────────────── */
.category-sidebar,
.filter-sidebar,
.services-sidebar {
  background: var(--pg-bg2) !important;
  border-color: var(--pg-border) !important;
}

/* Category items / list items */
.category-item,
.filter-item,
.sidebar-link {
  color: var(--pg-text2) !important;
}

.category-item:hover,
.filter-item:hover,
.sidebar-link:hover,
.category-item.active,
.filter-item.active,
.sidebar-link.active {
  color: var(--pg-blue-bright) !important;
  background: var(--pg-accent-08) !important;
}

/* ── 12. Form fields on dark background ────────────────────── */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="search"],
input[type="password"],
textarea,
select {
  background: var(--pg-bg2) !important;
  border-color: var(--pg-border) !important;
  color: var(--pg-text) !important;
}

input::placeholder,
textarea::placeholder {
  color: var(--pg-text3) !important;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--brand-primary) !important;
  box-shadow: 0 0 0 2px rgba(51, 92, 196, 0.25) !important;
}

/* Labels */
label {
  color: var(--pg-text2) !important;
}

/* ── 13. Meta info boxes (event detail) ────────────────────── */
.event-meta-info,
.meta-item {
  background: var(--pg-bg3) !important;
  border-color: var(--pg-border) !important;
}

.meta-icon {
  color: var(--pg-blue-bright) !important;
}

.meta-icon i {
  color: var(--pg-blue-bright) !important;
}

/* Duration info */
.duration-info {
  background: var(--pg-bg3) !important;
  border-color: var(--pg-border) !important;
}

.duration-info i {
  color: var(--pg-blue-bright) !important;
}

/* Event category tag */
.event-category-tag {
  background: var(--pg-accent-12) !important;
  color: var(--pg-blue-bright) !important;
}

/* ── 14. Shadows for dark theme ────────────────────────────── */
.plan-card:hover,
.service-card:hover,
.event-card:hover {
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5) !important;
}

.shadow-md,
.shadow-lg {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

/* ── 15. Links ─────────────────────────────────────────────── */
.plugin-page a:not([class*="btn"]):not([class*="book"]):not([class*="select"]):not(.back-button):not(.portal-tab) {
  color: var(--pg-blue-bright) !important;
}

.plugin-page a:not([class*="btn"]):not([class*="book"]):not([class*="select"]):not(.back-button):not(.portal-tab):hover {
  color: var(--brand-primary) !important;
}

/* ── 16. Search box inside booking pages ───────────────────── */
.search-box,
.search-input,
.search-container input {
  background: var(--pg-bg2) !important;
  border-color: var(--pg-border) !important;
  color: var(--pg-text) !important;
}

/* ── 17. Status badges ─────────────────────────────────────── */
.badge,
.status-badge {
  font-family: 'Poppins', sans-serif !important;
  font-size: 12px !important;
}

/* ── 18. Checkout-specific overrides ───────────────────────── */
.checkout-page,
.checkout-container {
  background: var(--pg-bg) !important;
  color: var(--pg-text) !important;
}

.checkout-card,
.payment-card,
.order-card {
  background: var(--pg-bg2) !important;
  border-color: var(--pg-border) !important;
  color: var(--pg-text) !important;
}

/* ── 19. Image placeholders ────────────────────────────────── */
.event-image-placeholder,
.service-image-placeholder {
  background: var(--pg-bg3) !important;
  color: var(--pg-text3) !important;
}

/* ── 20. Responsive tweaks ─────────────────────────────────── */
@media (max-width: 768px) {
  .portal-nav-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
  }

  .portal-tab {
    padding: 10px 16px !important;
    font-size: 13px !important;
  }
}