/* ==========================================================
   BookCineSpace - Royal Navy Blue, Warm Gold & Venus Violet Luxury Cinema Styling
   ========================================================== */
/* Fonts delivered asynchronously in HTML <head> with preconnect & font-display: swap */

:root {
  /* 1. Foundation: Royal Navy Blue */
  --bg-navy-dark: #0A1128;
  --bg-navy-panel: #111C3D;
  --bg-navy-card: #15224A;
  --bg-navy-elevated: #1B2B5C;
  --bg-navy-input: #0D1635;
  --bg-page: #0A1128;

  /* 2. Conversion & Headings: Rich Warm Gold */
  --gold-primary: #D4AF37;
  --gold-hover: #E5C358;
  --gold-dark: #B88A38;
  --gold-subtle: rgba(212, 175, 55, 0.15);
  --gold-border: rgba(212, 175, 55, 0.3);

  /* 3. Secondary & Romance: Venus Violet */
  --violet-venus: #6A0DAD;
  --violet-hover: #7E14CD;
  --violet-dark: #520888;
  --violet-subtle: rgba(106, 13, 173, 0.18);
  --violet-border: rgba(106, 13, 173, 0.35);

  /* 4. High-Contrast Typography */
  --text-cinematic-white: #FFFFFF;
  --text-light-gray: #F3F4F6;
  --text-muted-gray: #94A3B8;

  color-scheme: dark;
}

/* Responsive Viewport & Overflow Protection for Mobile Devices */
html {
  overflow-x: hidden;
  max-width: 100vw;
  width: 100%;
  -webkit-text-size-adjust: 100%;
  box-sizing: border-box;
  background-color: var(--bg-navy-dark);
}

*, *:before, *:after {
  box-sizing: inherit;
}

/* Base Body Typography: Royal Navy Blue Foundation with Cinematic White Body Copy */
body {
  font-family: 'Cambria', 'Cambria Math', 'Calisto MT', 'Georgia', 'Times New Roman', serif;
  font-weight: 400;
  font-style: normal;
  background-color: var(--bg-navy-dark);
  color: var(--text-light-gray);
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  max-width: 100vw;
  width: 100%;
  position: relative;
}

/* Headings: Rich Warm Gold (#D4AF37) with Luxury Cambria / Cinzel */
h1, h2, h3, h4, h5, h6, .font-heading {
  font-family: 'Cambria', 'Cambria Math', 'Calisto MT', 'Georgia', serif;
  font-weight: 700;
  font-style: normal;
  letter-spacing: -0.015em;
  color: var(--gold-primary);
}

/* Typography Utility Classes */
.text-gold {
  color: var(--gold-primary) !important;
}

.text-gold-light {
  color: var(--gold-hover) !important;
}

.text-violet {
  color: var(--violet-venus) !important;
}

.text-cinematic-white {
  color: var(--text-cinematic-white) !important;
}

.text-light-gray {
  color: var(--text-light-gray) !important;
}

/* Cambria & Cinzel Typographic Variants */
.font-cambria {
  font-family: 'Cambria', 'Cambria Math', 'Calisto MT', 'Georgia', serif;
}

.font-cambria-normal {
  font-family: 'Cambria', 'Cambria Math', 'Calisto MT', 'Georgia', serif;
  font-weight: 400;
  font-style: normal;
}

.font-cambria-bold {
  font-family: 'Cambria', 'Cambria Math', 'Calisto MT', 'Georgia', serif;
  font-weight: 700;
  font-style: normal;
}

.font-serif-brand {
  font-family: 'Cinzel', 'Cambria', Georgia, serif;
}

.font-cinzel {
  font-family: 'Cinzel', 'Cambria', 'Calisto MT', 'Georgia', serif;
}

/* Custom Card & Layouts: Royal Navy Blue Elevated Panels with Gold Accents */
.cinespace-card {
  background: var(--bg-navy-panel);
  border: 1px solid var(--gold-border);
  border-radius: 1.25rem;
  color: var(--text-light-gray);
  box-shadow: 0 4px 15px -2px rgba(10, 17, 40, 0.6), 0 0 10px rgba(212, 175, 55, 0.05);
  transition: all 0.25s ease-in-out;
}

.cinespace-card:hover {
  border-color: rgba(212, 175, 55, 0.55);
  box-shadow: 0 12px 28px -4px rgba(10, 17, 40, 0.8), 0 0 20px rgba(212, 175, 55, 0.18);
  transform: translateY(-2px);
}

/* 3. Call-to-Action Buttons (The Conversion Drivers) */
/* Primary Buttons ("Book Now", "Check Availability"): Rich Warm Gold (#D4AF37) with Navy Blue (#0A1128) text */
.btn-primary-gold {
  background-color: var(--gold-primary) !important;
  color: #0A1128 !important;
  font-weight: 800 !important;
  border: none !important;
  border-radius: 0.75rem;
  transition: all 0.2s ease-in-out;
  box-shadow: 0 4px 14px rgba(212, 175, 55, 0.35);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.btn-primary-gold:hover {
  background-color: var(--gold-hover) !important;
  color: #0A1128 !important;
  box-shadow: 0 6px 20px rgba(212, 175, 55, 0.5);
  transform: translateY(-1px);
}

/* Secondary Buttons ("View Proposal Packages", "Gallery"): Venus Violet (#6A0DAD) with White text */
.btn-secondary-violet {
  background-color: var(--violet-venus) !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
  border: none !important;
  border-radius: 0.75rem;
  transition: all 0.2s ease-in-out;
  box-shadow: 0 4px 14px rgba(106, 13, 173, 0.4);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.btn-secondary-violet:hover {
  background-color: var(--violet-hover) !important;
  color: #FFFFFF !important;
  box-shadow: 0 6px 20px rgba(106, 13, 173, 0.55);
  transform: translateY(-1px);
}

/* 4. Accents and Dividers */
.divider-gold {
  border-color: rgba(212, 175, 55, 0.25) !important;
}

.divider-violet {
  border-color: rgba(106, 13, 173, 0.35) !important;
}

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

.border-violet {
  border-color: var(--violet-venus) !important;
}

.accent-line-gold {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-primary), transparent);
}

.accent-line-violet {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--violet-venus), transparent);
}

.accent-line-duo {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-primary), var(--violet-venus), transparent);
}

/* Navigation Tabs: Immersive Cinema Navy with Gold Active State */
.nav-tab-btn {
  padding: 0.5rem 1.125rem;
  border-radius: 9999px;
  font-size: 0.8125rem;
  font-weight: 700;
  color: #94A3B8;
  background-color: rgba(17, 28, 61, 0.8);
  border: 1px solid rgba(212, 175, 55, 0.15);
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  white-space: nowrap;
}

.nav-tab-btn:hover {
  background-color: #1A2750;
  color: #FFFFFF;
  border-color: rgba(212, 175, 55, 0.35);
}

.nav-tab-btn.active {
  background-color: var(--gold-primary);
  color: #0A1128;
  border-color: var(--gold-primary);
  font-weight: 800;
  box-shadow: 0 4px 14px rgba(212, 175, 55, 0.35);
}

@media (max-width: 640px) {
  .nav-tab-btn {
    padding: 0.35rem 0.6rem;
    font-size: 0.75rem;
    gap: 0.25rem;
  }
}

/* Compact Navigation Tab Buttons for Merchant & Admin Portals */
.merchant-tab-btn, .admin-tab-btn {
  padding: 0.35rem 0.65rem;
  border-radius: 0.5rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: #94A3B8;
  background-color: transparent;
  border: 1px solid transparent;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
}

.merchant-tab-btn:hover, .admin-tab-btn:hover {
  background-color: #17234D;
  color: #FFFFFF;
}

.merchant-tab-btn.active, .admin-tab-btn.active {
  background-color: var(--gold-primary);
  border-color: var(--gold-primary);
  color: #0A1128;
  font-weight: 800;
  box-shadow: 0 2px 8px rgba(212, 175, 55, 0.3);
}

/* Day Pill: Selection in Booking Flow */
.day-pill {
  min-width: 60px;
  padding: 0.55rem 0.4rem;
  border-radius: 0.75rem;
  border: 1px solid rgba(212, 175, 55, 0.4) !important;
  background: #0D1635 !important;
  color: #FFFFFF !important;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.day-pill:hover {
  border-color: #D4AF37 !important;
  background: #15224A !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(212, 175, 55, 0.25);
}

.day-pill span {
  color: #FFFFFF !important;
}

.day-pill span:first-child,
.day-pill .day-pill-tag {
  color: #D4AF37 !important;
  font-weight: 800 !important;
}

.day-pill span:nth-child(2),
.day-pill .day-pill-num {
  color: #FFFFFF !important;
  font-weight: 900 !important;
  font-size: 1.125rem !important;
}

.day-pill span:nth-child(3),
.day-pill .day-pill-month {
  color: #CBD5E1 !important;
  font-weight: 600 !important;
}

.day-pill.selected {
  background: linear-gradient(135deg, #F5D77F 0%, #D4AF37 50%, #AA820A 100%) !important;
  border-color: #FFFFFF !important;
  color: #0A1128 !important;
  font-weight: 800 !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(212, 175, 55, 0.5) !important;
}

.day-pill.selected span,
.day-pill.selected span:first-child,
.day-pill.selected span:nth-child(2),
.day-pill.selected span:nth-child(3),
.day-pill.selected .day-pill-tag,
.day-pill.selected .day-pill-num,
.day-pill.selected .day-pill-month {
  color: #0A1128 !important;
}

/* Live Pricing Breakdown Row - Guarantee Maximum Visibility */
#breakdownBaseRent,
#breakdownExtraGuests,
#breakdownOccasion,
#breakdownAddons,
#breakdownDiscount,
#breakdownFeeRow {
  color: #E2E8F0 !important;
  font-size: 11px !important;
}

#breakdownBaseRent strong,
#breakdownExtraGuests strong,
#breakdownFeeAmount,
#breakdownFeeRow strong {
  color: #D4AF37 !important;
  font-weight: 900 !important;
}

#breakdownOccasion strong,
#breakdownAddons strong {
  color: #FFFFFF !important;
  font-weight: 800 !important;
}

#breakdownDiscount strong,
#breakdownDiscountAmount {
  color: #6EE7B7 !important;
  font-weight: 800 !important;
}

/* Slot Card */
.slot-card {
  padding: 0.55rem 0.75rem;
  border-radius: 0.625rem;
  border: 1px solid #23325E;
  background: var(--bg-navy-panel);
  color: var(--text-light-gray);
  transition: all 0.15s ease;
  cursor: pointer;
}

.slot-card:hover {
  border-color: var(--gold-primary);
  background: #17234D;
}

.slot-card.selected {
  border-color: var(--gold-primary);
  background-color: rgba(212, 175, 55, 0.15);
  box-shadow: 0 0 12px rgba(212, 175, 55, 0.2);
}

.slot-card.reserved {
  background-color: #070D1E;
  border-color: #182240;
  cursor: not-allowed;
  opacity: 0.5;
}

/* Clean Dark-Mode Input Fields */
.cin-input {
  width: 100%;
  padding: 0.625rem 0.875rem;
  border-radius: 0.625rem;
  border: 1px solid #23325E;
  background-color: var(--bg-navy-input);
  font-size: 0.8125rem;
  color: #FFFFFF;
  transition: all 0.15s ease;
}

.cin-input:focus {
  outline: none;
  border-color: var(--gold-primary);
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.2);
}

.cin-input::placeholder {
  color: #64748B;
}

/* Select element and dropdown options styling for contrast */
select.cin-input {
  background-color: #0D1635 !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(212, 175, 55, 0.35) !important;
}

select.cin-input:focus {
  border-color: var(--gold-primary) !important;
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.25) !important;
}

select.cin-input option {
  background-color: #0D1635 !important;
  color: #FFFFFF !important;
  font-weight: 600 !important;
  padding: 0.5rem !important;
}

/* High-Contrast Light Mode Input Fields for Admin Data Tables */
.host-fee-input {
  width: 4.25rem !important;
  height: 2rem !important;
  padding: 0.25rem 0.375rem !important;
  text-align: center !important;
  font-size: 0.875rem !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  background-color: #ffffff !important;
  border: 2px solid #cbd5e1 !important;
  border-radius: 0.5rem !important;
  outline: none !important;
  transition: all 0.15s ease !important;
  -moz-appearance: textfield !important;
}
.host-fee-input::-webkit-outer-spin-button,
.host-fee-input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}
.host-fee-input:focus {
  border-color: #2563eb !important;
  background-color: #f8fafc !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15) !important;
}

/* High-Contrast Light-Mode Admin Form Inputs & Textareas */
.admin-form-input {
  width: 100% !important;
  background-color: #FFFFFF !important;
  color: #0F172A !important;
  border: 2px solid #E2E8F0 !important;
  border-radius: 1rem !important;
  padding: 0.75rem 1rem !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  transition: all 0.15s ease !important;
  color-scheme: light !important;
  box-sizing: border-box !important;
}
.admin-form-input:focus {
  outline: none !important;
  border-color: #9333EA !important;
  background-color: #FFFFFF !important;
  color: #0F172A !important;
  box-shadow: 0 0 0 3px rgba(147, 51, 234, 0.15) !important;
}
.admin-form-input::placeholder {
  color: #94A3B8 !important;
  font-weight: 400 !important;
  opacity: 0.8 !important;
}


/* Custom Cinema Luxury Scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: #0A1128;
}
::-webkit-scrollbar-thumb {
  background: #23325E;
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--gold-primary);
}

/* ==========================================================
   Cinematic Logo Illumination & Shimmer Animations
   ========================================================== */
@keyframes logoLuminousPulse {
  0%, 100% {
    transform: scale(0.96);
    filter: drop-shadow(0 0 16px rgba(212, 175, 55, 0.45)) drop-shadow(0 0 35px rgba(229, 195, 88, 0.25));
  }
  50% {
    transform: scale(1.04);
    filter: drop-shadow(0 0 32px rgba(212, 175, 55, 0.95)) drop-shadow(0 0 70px rgba(212, 175, 55, 0.55)) drop-shadow(0 0 100px rgba(106, 13, 173, 0.4));
  }
}

@keyframes haloPulse {
  0%, 100% {
    transform: scale(0.92);
    opacity: 0.25;
  }
  50% {
    transform: scale(1.15);
    opacity: 0.75;
  }
}

@keyframes goldenShimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.animate-luminous-logo {
  animation: logoLuminousPulse 2s ease-in-out infinite;
}

.animate-halo-pulse {
  animation: haloPulse 2s ease-in-out infinite;
}

.animate-gold-shimmer {
  background: linear-gradient(90deg, #D4AF37 0%, #FFFFFF 50%, #D4AF37 100%);
  background-size: 200% auto;
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  animation: goldenShimmer 2.8s linear infinite;
}