/* =================================================================
   BOOKING PLUGIN STYLES - Kelsey J Patel Theme
   ================================================================= */

/* Google Fonts - Same as theme */
@import url('https://fonts.googleapis.com/css2?family=Karla:wght@300;400;500;600;700&family=Open+Sans:wght@300;400;500&display=swap');

/* NOTE: All theme colors, typography, spacing, and radius variables
   are inherited from the theme's app.css. Only define booking-specific
   variables and styles here. */

:root {
  /* Layout - Booking Plugin Specific */
  --header-height: 80px;
  --header-height-mobile: 80px;
  --page-padding-top: 80px;
  --sticky-nav-offset: 80px;
  --sticky-scroll-margin: 140px;

  /* Hero Section Configuration */
  --hero-padding-top: 100px;
  --hero-min-height: 50vh;

  /* Plugin-Specific Colors (not in theme) */
  --secondary: #B8D4B8;
  --secondary-light: #D4E6D4;
  --secondary-dark: #9BC49B;
  --cream: #FAF9F7;
  --text-primary: #2C2C2C;

  /* Legacy variable mapping for backward compatibility */
  --primary: var(--brand-primary);
  --primary-dark: var(--brand-dark);
  --primary-light: var(--brand-light);
  --text-secondary: var(--brand-neutral);
  --white: #FFFFFF;
  --light-gray: #E5E7EB;
}

/* =================================================================
   HERO SECTION POSITIONING
   ================================================================= */

.booking-hero-section {
  padding-top: calc(var(--header-height) + 60px);
  min-height: var(--hero-min-height);
  margin-top: 0;
}

@media (max-width: 768px) {
  .booking-hero-section {
    padding-top: calc(var(--header-height-mobile) + 40px);
    min-height: auto;
  }
}

/* =================================================================
   BUTTON STYLES - Match Home Theme
   ================================================================= */

/* All booking buttons inherit theme button styles */
.booking-hero-section a[href*="/booking/"] {
  font-family: var(--font-body) !important;
  border-radius: 0 !important; /* Sharp edges for editorial consistency - matches home theme */
  padding: var(--space-3) var(--space-6) !important;
  font-size: var(--text-sm) !important;
  font-weight: 500 !important;
  letter-spacing: normal !important;
  transition: all 0.3s ease !important;
  min-width: 180px !important;
  text-align: center !important;
  white-space: nowrap !important;
}

@media (min-width: 640px) {
  .booking-hero-section a[href*="/booking/"] {
    padding: var(--space-3) var(--space-8) !important;
    font-size: var(--text-base) !important;
    min-width: 220px !important;
  }
}

/* Primary Button (Book Session) */
.booking-hero-section a[href*="/appointment"] {
  background-color: var(--brand-primary) !important;
  color: white !important;
}

.booking-hero-section a[href*="/appointment"]:hover {
  background-color: var(--color-terracotta) !important;
  color: white !important;
  transform: translateY(-2px) !important;
}

/* Secondary Buttons (View Services, Browse Events) */
.booking-hero-section a[href*="/services"],
.booking-hero-section a[href*="/events"] {
  background-color: transparent !important;
  color: var(--brand-dark) !important;
  border: 2px solid var(--brand-dark) !important;
}

.booking-hero-section a[href*="/services"]:hover,
.booking-hero-section a[href*="/events"]:hover {
  border-color: var(--brand-primary) !important;
  color: var(--brand-primary) !important;
  background-color: transparent !important;
  transform: translateY(-2px) !important;
}

/* =================================================================
   TYPOGRAPHY - Use Theme Fonts
   ================================================================= */

.booking-hero-section h1,
.booking-hero-section h2,
.booking-hero-section h3,
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading) !important;
}

.booking-hero-section p,
.booking-hero-section span,
p, span {
  font-family: var(--font-body) !important;
}

/* =================================================================
   PLUGIN UTILITY CLASSES
   ================================================================= */

.bg-secondary { background-color: var(--secondary); }
.bg-secondary-light { background-color: var(--secondary-light); }
.bg-secondary-dark { background-color: var(--secondary-dark); }
.bg-cream { background-color: var(--cream); }

.text-sage { color: var(--brand-primary); }

.border-secondary { border-color: var(--secondary); }

.bg-accent { background-color: var(--primary); }

.plugin-page {
  font-family: var(--font-body);
  background: white;
}

.plugin-page .content-body p {
  font-size: 1.125rem;
  line-height: 1.8;
  color: #374151;
  margin-bottom: 1.5rem;
}

/* =================================================================
   CHOICES.JS DROPDOWN STYLING
   ================================================================= */

.choices__inner {
  border: 2px solid var(--light-gray) !important;
  border-radius: 0.75rem !important;
  padding: 0.75rem !important;
  min-height: auto !important;
  background-color: var(--white) !important;
}

.choices__inner:focus {
  border-color: var(--primary) !important;
}

.choices__list--multiple .choices__item {
  background-color: var(--primary) !important;
  border: 1px solid var(--primary) !important;
  border-radius: 0.5rem !important;
}

.choices__list--dropdown {
  border: 2px solid var(--light-gray) !important;
  border-radius: 0.75rem !important;
  margin-top: 0.25rem !important;
}

.choices__item--choice {
  padding: 0.75rem !important;
}

.choices__item--choice.is-highlighted {
  background-color: var(--light-gray) !important;
}

.choices[data-type*=select-multiple] .choices__button {
  border-left: 1px solid rgba(255, 255, 255, 0.5) !important;
}

/* =================================================================
   BOOKING FORM STYLES
   ================================================================= */

.booking-form {
  background-color: var(--white);
  border: 1px solid var(--light-gray);
  font-family: var(--font-body);
}

.btn-primary {
  background-color: var(--primary);
  color: var(--white);
  font-family: var(--font-body);
}

.btn-primary:hover {
  background-color: var(--primary-dark);
}

.btn-secondary {
  background-color: var(--secondary);
  color: var(--primary);
  font-family: var(--font-body);
}

.btn-secondary:hover {
  background-color: var(--secondary-dark);
}

/* =================================================================
   CMS COMPONENT CLASSES (if not provided by theme)
   ================================================================= */

.cms-bg-primary { background-color: var(--brand-primary); }
.cms-text-primary { color: var(--brand-primary); }

.cms-btn {
  background-color: var(--brand-primary);
  color: var(--white);
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  font-weight: 500;
  text-decoration: none;
  display: inline-block;
  transition: background-color 0.2s;
}

.cms-btn:hover {
  background-color: var(--brand-dark);
  color: var(--white);
}

.cms-card {
  background: var(--white);
  border-radius: 0.75rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

.cms-h1 {
  font-size: var(--text-4xl);
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 1rem;
}

.cms-h2 {
  font-size: var(--text-3xl);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.75rem;
}

.cms-h3 {
  font-size: var(--text-2xl);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}

/* =================================================================
   ALPINE.JS UTILITIES
   ================================================================= */

[x-cloak] { display: none !important; }