/* J Hair Studio Theme - Elegant Dark with Serif Accents */

@font-face {
  font-family: 'Contax';
  src: url('./fonts/contax-regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Primary Colors */
  --color-primary: #9ca3af;
  --color-primary-dark: #6b7280;
  --color-primary-light: #d1d5db;
  --color-secondary: #9ca3af;

  /* Background Colors */
  --color-background: #111827;
  --color-background-dark: #0f1420;
  --color-background-light: #1f2937;
  --color-surface: #1f2937;
  --color-background-alt: #374151;

  /* Text Colors */
  --color-text: #ffffff;
  --color-text-light: #9ca3af;
  --color-text-inverse: #ffffff;
  --color-text-muted: #6b7280;
  --text-primary: #ffffff;
  --text-secondary: #9ca3af;

  /* UI Colors */
  --color-border: rgba(255, 255, 255, 0.1);
  --color-shadow: rgba(0, 0, 0, 0.4);
  --color-overlay: rgba(17, 24, 39, 0.7);

  /* Typography - Contax for headings, clean sans body */
  --font-heading: 'Contax', 'Playfair Display', Georgia, serif;
  --font-body: 'Contax', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Spacing */
  --header-height: 80px;
  --spacing-xl: 2.5rem;
  --spacing-2xl: 4rem;
  --spacing-3xl: 6rem;

  /* Border Radius - rounded for modern feel */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 24px;
}

/* Import fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500&family=Playfair+Display:ital,wght@0,400;0,700;1,400&display=swap');

/* Global dark theme */
body {
  background: radial-gradient(circle at center, #374151 0%, #111827 100%);
  background-attachment: fixed;
  color: var(--color-text);
  font-family: var(--font-body);
  font-weight: 300;
}

/* Navigation styling - glass morphism */
nav, .navigation, header {
  background: transparent !important;
  backdrop-filter: blur(10px);
  border-bottom: none;
}

/* Logo text */
a[class*="logoText"] {
  color: var(--color-text) !important;
  font-weight: 300;
  letter-spacing: -0.05em;
}

/* Nav links */
a[class*="navLink"] {
  color: var(--color-text-light) !important;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 9999px;
  padding: 0.5rem 1.5rem;
  font-size: 0.875rem;
  transition: all 0.3s ease;
}

a[class*="navLink"]:hover {
  color: var(--color-text) !important;
  background: rgba(255, 255, 255, 0.15);
}

a[class*="navLink"]::after {
  display: none !important;
}

/* Reserve button */
a[class*="reserveButton"] {
  background: rgba(255, 255, 255, 0.05) !important;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: var(--color-text) !important;
  border-radius: 9999px !important;
}

a[class*="reserveButton"]:hover {
  background: rgba(255, 255, 255, 0.15) !important;
  color: var(--color-text) !important;
}

/* Phone button - glass morphism pill */
a[class*="phoneButton"] {
  background: rgba(255, 255, 255, 0.05) !important;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: var(--color-text) !important;
  border-radius: 9999px !important;
  padding: 12px !important;
}

a[class*="phoneButton"]:hover {
  background: rgba(255, 255, 255, 0.15) !important;
}

/* Floating phone button — glass morphism on dark bg */
a[class*="phoneButtonFloating"] {
  background: rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: var(--color-text) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
}

a[class*="phoneButtonFloating"]:hover {
  background: rgba(255, 255, 255, 0.2) !important;
}

/* User menu icon */
[class*="userIcon"] {
  color: var(--color-text-light) !important;
}

[class*="userMenuTrigger"]:hover {
  background: rgba(255, 255, 255, 0.1) !important;
}

@media (max-width: 768px) {
  nav ul, [class*="navList"] {
    background-color: #111827 !important;
  }
}

/* Hero section */
.hero, [class*="hero"] {
  background-color: transparent;
}

.heroOverlay, [class*="heroOverlay"] {
  background: linear-gradient(
    to bottom,
    rgba(17, 24, 39, 0.5) 0%,
    rgba(17, 24, 39, 0.7) 100%
  ) !important;
}

.heroHeading, [class*="heroHeading"] {
  font-family: var(--font-heading) !important;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

.heroSubheading, [class*="heroSubheading"] {
  font-weight: 300;
  color: var(--color-text-light);
  max-width: 42rem;
}

/* Hero buttons - white rounded pill */
[class*="heroPrimaryButton"], [class*="heroBtn"] {
  background: #ffffff !important;
  color: #000000 !important;
  border-radius: 9999px !important;
  padding: 1.25rem 3rem !important;
  font-weight: 500 !important;
  font-size: 1.125rem !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  border: none !important;
  transition: transform 0.3s ease !important;
}

[class*="heroPrimaryButton"]:hover, [class*="heroBtn"]:hover {
  transform: scale(1.05) !important;
}

/* Sections */
section, .section {
  background-color: transparent;
}

/* Section headers */
.sectionHeader, [class*="sectionHeader"], [class*="SectionHeader"] {
  color: var(--color-text);
}

.sectionTitle, [class*="sectionTitle"] {
  font-family: var(--font-heading) !important;
  font-style: italic;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: 3rem !important;
}

.sectionDivider, [class*="sectionDivider"] {
  background: rgba(255, 255, 255, 0.2);
}

.sectionSubtitle, [class*="sectionSubtitle"] {
  color: var(--color-text-light);
  font-weight: 300;
}

/* Rich text content */
[class*="richText"] {
  color: var(--color-text-light);
  font-size: 1.125rem;
  line-height: 1.8;
  font-weight: 300;
}

[class*="richText"] p {
  color: var(--color-text-light);
}

/* Image blocks - slight rotation effect */
[class*="imageBlock"] img {
  border-radius: 1.5rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  opacity: 0.8;
}

/* Contact info */
[class*="contactInfo"] {
  color: var(--color-text);
  background: transparent;
}

[class*="contactInfo"] h3 {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--color-text-muted);
  font-family: var(--font-body);
  font-weight: 400;
}

[class*="contactItem"] {
  font-size: 1.5rem;
  font-weight: 300;
}

[class*="contactItem"] a {
  color: var(--color-text) !important;
}

[class*="contactItem"] a:hover {
  color: var(--color-text-light) !important;
}

/* Quote/divider sections */
[class*="quote"], [class*="Quote"], [class*="divider"], [class*="Divider"] {
  background: transparent;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

[class*="quoteCta"] {
  border-bottom: 1px solid #fff;
  color: #fff;
}

[class*="quoteCta"]:hover {
  color: var(--color-text-light);
  border-color: var(--color-text-light);
}

/* Card styling */
.card, [class*="Card"], [class*="card"] {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
}

.card:hover, [class*="Card"]:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
}

/* Embedded map - grayscale dark overlay for aesthetic consistency */
.map-container iframe {
  filter: grayscale(100%) invert(90%) contrast(90%);
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 400;
  color: var(--color-text);
  text-transform: none;
}

/* Links */
a {
  color: var(--color-text);
  transition: color 0.3s ease;
}

a:hover {
  color: var(--color-text-light);
}

/* Footer */
footer {
  background: transparent;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

footer, footer * {
  color: var(--color-text-muted);
}

footer a:hover {
  color: var(--color-text) !important;
}

/* Pricing blocks */
[class*="pricing"], [class*="Pricing"] {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

[class*="priceItem"] span {
  color: var(--color-text-light);
}

/* Feature sections */
[class*="feature"], [class*="Feature"] {
  background-color: transparent;
}

/* Selection color */
::selection {
  background: var(--color-primary);
  color: var(--color-text);
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--color-background-dark);
}

::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* Input fields */
input, textarea, select {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--color-text);
}

input:focus, textarea:focus, select:focus {
  border-color: rgba(255, 255, 255, 0.3);
  outline: none;
}

/* Reservation flow */
[class*="workerCard"], [class*="productCard"] {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

[class*="workerCard"]:hover, [class*="productCard"]:hover {
  border-color: rgba(255, 255, 255, 0.3) !important;
}

[class*="workerName"], [class*="productName"] {
  color: var(--color-text) !important;
}

[class*="workerInfo"], [class*="productDescription"], [class*="productDuration"] {
  color: var(--color-text-light) !important;
}

[class*="stepTitle"], [class*="dateHeader"] {
  color: #1a1a2e !important;
}

[class*="selectionInfo"] {
  color: var(--color-text-light) !important;
}

[class*="slotButton"] {
  background: rgba(255, 255, 255, 0.1) !important;
  color: var(--color-text) !important;
  border-radius: 9999px !important;
}

[class*="slotButton"]:hover {
  background: #ffffff !important;
  color: #000000 !important;
}

[class*="bookingSummary"], [class*="customerInfo"] {
  background: rgba(255, 255, 255, 0.05) !important;
}

[class*="bookingSummary"] p, [class*="customerInfo"] p {
  color: var(--color-text-light) !important;
}

[class*="bookingSummary"] strong, [class*="customerInfo"] strong {
  color: var(--color-text) !important;
}

/* User menu dropdown */
[class*="menuItem"] {
  color: #1a1a2e !important;
}

[class*="menuItem"]:hover {
  background: #f3f4f6 !important;
  color: var(--color-primary-dark) !important;
}

[class*="dropdown"], [class*="Dropdown"], [class*="menu"]:not(nav *) {
  background: #fff !important;
  border: 1px solid #e5e7eb !important;
}

/* ============================================
   SCROLL-REVEAL ANIMATIONS — heavy entrance fx
   ============================================ */

/* Override base animation with longer, more dramatic timing */
[class*="animatedBlock"] {
  opacity: 0 !important;
  transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1),
              transform 1s cubic-bezier(0.16, 1, 0.3, 1) !important;
  transform: translateY(60px) !important;
}

[class*="animatedBlockVisible"] {
  opacity: 1 !important;
  transform: translateY(0) translateX(0) scale(1) !important;
}

/* Section headers — fade up with slight scale */
[class*="animatedBlock"]:has([class*="sectionHeader"]) {
  transform: translateY(40px) scale(0.95) !important;
}

/* Rich text — slide in from left */
[class*="animatedBlock"]:has([class*="richText"]) {
  transform: translateX(-60px) !important;
  transition-duration: 1.1s !important;
}

/* Image blocks — slide in from right with rotation */
[class*="animatedBlock"]:has([class*="imageBlock"]) {
  transform: translateX(60px) rotate(2deg) !important;
  transition-duration: 1.1s !important;
}

[class*="animatedBlockVisible"]:has([class*="imageBlock"]) {
  transform: translateY(0) translateX(0) rotate(0deg) scale(1) !important;
}

/* Contact info — slide up from further below */
[class*="animatedBlock"]:has([class*="contactInfo"]) {
  transform: translateY(80px) !important;
  transition-duration: 1.2s !important;
}

/* Quote divider — fade in with scale */
[class*="animatedBlock"]:has([class*="quoteDivider"]) {
  transform: scale(0.9) !important;
  transition-duration: 1.2s !important;
}

/* Grid rows (grouped cards) — stagger children */
[class*="animatedBlock"]:has([class*="rowWrapper"]) {
  transform: translateY(50px) !important;
}

/* Feature cards inside grid — cascade stagger via nth-child */
[class*="animatedBlockVisible"] [class*="gridRow"] > *:nth-child(1) {
  animation: cardReveal 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
}
[class*="animatedBlockVisible"] [class*="gridRow"] > *:nth-child(2) {
  animation: cardReveal 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.25s both;
}
[class*="animatedBlockVisible"] [class*="gridRow"] > *:nth-child(3) {
  animation: cardReveal 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.4s both;
}
[class*="animatedBlockVisible"] [class*="gridRow"] > *:nth-child(4) {
  animation: cardReveal 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.55s both;
}

@keyframes cardReveal {
  from {
    opacity: 0;
    transform: translateY(40px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Full-width feature — slide image and text from opposite sides */
[class*="animatedBlock"]:has([class*="featureSection"]) {
  transform: translateY(0) !important;
  overflow: hidden;
}

[class*="animatedBlock"]:has([class*="featureSection"]) [class*="featureSectionImage"] {
  transform: translateX(-100%);
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

[class*="animatedBlock"]:has([class*="featureSection"]) [class*="featureSectionText"] {
  transform: translateX(60px);
  opacity: 0;
  transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1) 0.3s,
              opacity 1s ease 0.3s;
}

[class*="animatedBlockVisible"]:has([class*="featureSection"]) [class*="featureSectionImage"] {
  transform: translateX(0);
}

[class*="animatedBlockVisible"]:has([class*="featureSection"]) [class*="featureSectionText"] {
  transform: translateX(0);
  opacity: 1;
}

/* Hero inner elements — staggered reveal on load */
[class*="heroContent"] > * {
  opacity: 0;
  animation: heroChildReveal 1s cubic-bezier(0.16, 1, 0.3, 1) both;
}

[class*="heroContent"] > *:nth-child(1) { animation-delay: 0.3s; }
[class*="heroContent"] > *:nth-child(2) { animation-delay: 0.6s; }
[class*="heroContent"] > *:nth-child(3) { animation-delay: 0.9s; }

@keyframes heroChildReveal {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Team member zigzag — photo from side, text from opposite */
[class*="animatedBlock"]:has([class*="teamMemberZigzag"]) {
  transform: translateY(0) !important;
}

[class*="animatedBlock"]:has([class*="teamMemberZigzag"]) [class*="photo"] {
  transform: translateX(-80px) rotate(-3deg);
  opacity: 0;
  transition: all 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}

[class*="animatedBlock"]:has([class*="teamMemberZigzag"]) [class*="zigzagContent"] {
  transform: translateX(60px);
  opacity: 0;
  transition: all 1s cubic-bezier(0.16, 1, 0.3, 1) 0.2s;
}

[class*="animatedBlockVisible"]:has([class*="teamMemberZigzag"]) [class*="photo"] {
  transform: translateX(0) rotate(0deg);
  opacity: 1;
}

[class*="animatedBlockVisible"]:has([class*="teamMemberZigzag"]) [class*="zigzagContent"] {
  transform: translateX(0);
  opacity: 1;
}

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

.h-100 {
  height: 100%;
}

/* Reviews card variant — undo glass effect from broad [class*="card"] selector */
[class*="cardVariant"],
[class*="cardGrid"],
[class*="cardGridContainer"],
[class*="cardActionArea"],
[class*="cardReadAllBtn"],
[class*="cardGridFadeOverlay"] {
  background: transparent !important;
  border: none !important;
  backdrop-filter: none !important;
}

/* Reset glass on all gridCard* elements (gridCardText, gridCardStars, etc.) */
[class*="gridCard"] {
  background: transparent !important;
  border: none !important;
  backdrop-filter: none !important;
}

/* Re-apply subtle card styling only on the card container (gridCard__hash, not gridCardText__hash) */
[class*="gridCard__"] {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

[class*="gridCard__"]:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}

[class*="cardGridFadeOverlay"] {
  display: none !important;
}

[class*="cardGrid"] {
  max-height: none !important;
}

/* ============================================
   SHOP PRODUCT LISTING — Premium dark styling
   ============================================ */

:root {
  --shop-brand-color: #e11d48;
  --shop-card-bg: #1c1917;
  --shop-card-border: #292524;
}

/* Shop container heading — serif */
[class*="ShopProductListing"] [class*="title"] {
  font-family: var(--font-heading) !important;
  font-style: italic;
  font-weight: 400 !important;
}

/* Shop category pills — glass morphism */
[class*="ShopProductListing"] [class*="pill"] {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
}

[class*="ShopProductListing"] [class*="pill"]:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
}

[class*="ShopProductListing"] [class*="pillActive"] {
  background: #ffffff !important;
  color: #000000 !important;
  border-color: #ffffff !important;
}

/* Shop product cards — darker bg with subtle border */
[class*="ShopProductListing"] [class*="imageWrapper"] {
  background: var(--shop-card-bg);
  border-color: var(--shop-card-border);
}

/* Shop badges */
[class*="ShopProductListing"] [class*="badgeSale"] {
  background: var(--shop-brand-color);
}

/* Shop product title hover — rose accent */
[class*="ShopProductListing"] [class*="card"]:hover [class*="productTitle"] {
  color: var(--shop-brand-color) !important;
}

/* Shop buy button hover — white fill */
[class*="ShopProductListing"] [class*="card"]:hover [class*="buyButton"] {
  background: #ffffff !important;
  color: #000000 !important;
  border-color: #ffffff !important;
}

/* Shop discount price — rose accent */
[class*="ShopProductListing"] [class*="priceDiscount"] {
  color: var(--shop-brand-color) !important;
}

/* Product detail page — consistent with listing */
[class*="ShopProductDetail"] [class*="productName"] {
  font-family: var(--font-heading) !important;
  font-style: italic;
  font-weight: 400 !important;
}

[class*="ShopProductDetail"] [class*="comingSoon"] {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
}

/* ============================================
   LOGIN PAGE — Clean, borderless elegance
   ============================================ */

/* Card container — invisible glass, no visible border or shadow */
[class*="CustomerLogin"] [class*="card"],
[class*="container"]:has([class*="form"]) > [class*="card"] {
  background: rgba(255, 255, 255, 0.03) !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: blur(16px);
  border-radius: 20px !important;
}

/* Heading — Playfair italic */
[class*="CustomerLogin"] h2,
[class*="container"]:has([class*="form"]) h2 {
  font-family: var(--font-heading) !important;
  font-style: italic;
  font-weight: 400 !important;
  font-size: 1.8rem !important;
  letter-spacing: -0.02em;
}

/* Subtitle — airy, muted */
[class*="CustomerLogin"] [class*="cardSubtitle"],
[class*="container"]:has([class*="form"]) [class*="cardSubtitle"] {
  color: var(--color-text-muted) !important;
  font-weight: 300;
  font-size: 0.85rem;
}

/* Labels — tiny uppercase tracking, no bold */
[class*="CustomerLogin"] label,
[class*="container"]:has([class*="form"]) label {
  font-weight: 400 !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase;
  color: var(--color-text-muted) !important;
}

/* Inputs — borderless, soft glass background only */
[class*="CustomerLogin"] [class*="formGroup"] input,
[class*="container"]:has([class*="form"]) [class*="formGroup"] input {
  background: rgba(255, 255, 255, 0.05) !important;
  border: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 0 !important;
  color: var(--color-text) !important;
  font-family: var(--font-body);
  font-weight: 300;
  padding: 14px 4px !important;
  font-size: 1rem !important;
  transition: border-color 0.3s ease, background 0.3s ease;
}

[class*="CustomerLogin"] [class*="formGroup"] input:focus,
[class*="container"]:has([class*="form"]) [class*="formGroup"] input:focus {
  border-bottom-color: rgba(255, 255, 255, 0.35) !important;
  background: rgba(255, 255, 255, 0.07) !important;
  outline: none !important;
}

/* Submit button — white pill */
[class*="CustomerLogin"] [class*="submitButton"],
[class*="container"]:has([class*="form"]) [class*="submitButton"] {
  background: #ffffff !important;
  color: #000000 !important;
  border: none !important;
  border-radius: 9999px !important;
  padding: 14px 32px !important;
  font-family: var(--font-body);
  font-weight: 500 !important;
  font-size: 0.875rem !important;
  letter-spacing: 0.05em !important;
  text-transform: none !important;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

[class*="CustomerLogin"] [class*="submitButton"]:hover:not(:disabled),
[class*="container"]:has([class*="form"]) [class*="submitButton"]:hover:not(:disabled) {
  transform: scale(1.03);
  opacity: 0.9;
}

/* Divider — barely there */
[class*="CustomerLogin"] [class*="divider"]::before,
[class*="container"]:has([class*="form"]) [class*="divider"]::before {
  background: rgba(255, 255, 255, 0.06) !important;
}

[class*="CustomerLogin"] [class*="divider"] span,
[class*="container"]:has([class*="form"]) [class*="divider"] span {
  background: transparent !important;
  color: var(--color-text-muted) !important;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Google button — ghost pill, no border */
[class*="CustomerLogin"] [class*="googleButton"],
[class*="container"]:has([class*="form"]) [class*="googleButton"] {
  background: rgba(255, 255, 255, 0.05) !important;
  border: none !important;
  border-radius: 9999px !important;
  color: var(--color-text-light) !important;
  font-family: var(--font-body);
  font-weight: 400 !important;
  font-size: 0.875rem !important;
  letter-spacing: 0.02em;
  padding: 14px 32px !important;
  transition: background 0.3s ease, color 0.3s ease;
}

[class*="CustomerLogin"] [class*="googleButton"]:hover,
[class*="container"]:has([class*="form"]) [class*="googleButton"]:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  color: var(--color-text) !important;
}

/* Switch mode link — subtle, no underline by default */
[class*="CustomerLogin"] [class*="switchMode"],
[class*="container"]:has([class*="form"]) [class*="switchMode"] {
  color: var(--color-text-muted) !important;
  font-size: 0.85rem;
}

[class*="CustomerLogin"] [class*="switchMode"] button,
[class*="container"]:has([class*="form"]) [class*="switchMode"] button {
  color: var(--color-text-light) !important;
  text-decoration: none !important;
  font-weight: 400 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  transition: color 0.3s ease, border-color 0.3s ease;
}

[class*="CustomerLogin"] [class*="switchMode"] button:hover,
[class*="container"]:has([class*="form"]) [class*="switchMode"] button:hover {
  color: var(--color-text) !important;
  border-color: rgba(255, 255, 255, 0.5);
}

/* Error message — muted, no harsh red background */
[class*="CustomerLogin"] [class*="error"],
[class*="container"]:has([class*="form"]) [class*="error"] {
  background: rgba(220, 53, 69, 0.08) !important;
  border: none;
  border-radius: 10px;
  color: #f87171 !important;
  font-size: 0.85rem;
}

/* ============================================
   PROFILE PAGE — Premium dark styling
   ============================================ */

/* Full-bleed wrapper — inherit the radial gradient */
[class*="wrapper"]:has([class*="dashboardGrid"]) {
  background: transparent;
}

/* Profile heading — Playfair Display, elegant italic */
[class*="wrapper"] [class*="headerLeft"] h1 {
  font-family: var(--font-heading) !important;
  font-style: italic;
  font-weight: 400 !important;
  font-size: 2.2rem !important;
  letter-spacing: -0.02em;
}

[class*="wrapper"] [class*="subtitle"] {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 1rem;
  color: var(--color-text-muted);
  letter-spacing: 0.01em;
}

/* Section headers — small uppercase labels with wide tracking */
[class*="wrapper"] [class*="sectionHeader"] {
  font-family: var(--font-body) !important;
  font-weight: 400 !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.2em !important;
  color: var(--color-text-muted) !important;
  text-transform: uppercase !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  padding-bottom: 14px;
}

/* Settings group title — serif accent */
[class*="wrapper"] [class*="settingsGroupTitle"] {
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 400;
  font-size: 1.15rem;
}

/* Cards — glass morphism consistent with rest of site */
[class*="wrapper"] [class*="card"]:not([class*="reservationCard"]) {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(12px);
  border-radius: 16px !important;
  box-shadow: none !important;
  transition: background 0.3s ease, border-color 0.3s ease;
}

[class*="wrapper"] [class*="card"]:not([class*="reservationCard"]):hover {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

/* Reservation cards — subtle glass with refined left border */
[class*="wrapper"] [class*="reservationCard"] {
  background: rgba(255, 255, 255, 0.03) !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-left: 3px solid rgba(255, 255, 255, 0.15) !important;
  transition: background 0.3s ease;
}

[class*="wrapper"] [class*="reservationCard"]:hover {
  background: rgba(255, 255, 255, 0.06) !important;
}

[class*="wrapper"] [class*="reservationCardPersonal"] {
  border-left-color: rgba(156, 163, 175, 0.5) !important;
}

/* Date box in reservation cards */
[class*="wrapper"] [class*="resDateBox"] {
  background: rgba(255, 255, 255, 0.05) !important;
  border-radius: 10px !important;
}

[class*="wrapper"] [class*="resDay"] {
  font-family: var(--font-heading) !important;
  font-weight: 400 !important;
  font-size: 1.4rem !important;
}

/* Reservation time accent — muted elegance instead of bright color */
[class*="wrapper"] [class*="resTime"] {
  color: var(--color-text-light) !important;
  font-weight: 300;
}

/* Input fields — glass morphism, refined focus state */
[class*="wrapper"] [class*="input"],
[class*="wrapper"] [class*="readOnlyValue"] {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 10px !important;
  color: var(--color-text) !important;
  font-family: var(--font-body);
  font-weight: 300;
  padding: 12px 16px !important;
  transition: border-color 0.3s ease, background 0.3s ease;
}

[class*="wrapper"] [class*="input"]:focus {
  border-color: rgba(255, 255, 255, 0.3) !important;
  background: rgba(255, 255, 255, 0.06) !important;
  outline: none !important;
}

/* Form labels — tiny uppercase tracking */
[class*="wrapper"] [class*="formField"] label {
  font-family: var(--font-body);
  font-weight: 400 !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.15em !important;
  color: var(--color-text-muted) !important;
}

/* Save button — white pill, signature jhairstudio style */
[class*="wrapper"] [class*="saveButton"] {
  background: #ffffff !important;
  color: #000000 !important;
  border: none !important;
  border-radius: 9999px !important;
  padding: 12px 32px !important;
  font-family: var(--font-body);
  font-weight: 500 !important;
  font-size: 0.875rem !important;
  letter-spacing: 0.02em;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

[class*="wrapper"] [class*="saveButton"]:hover:not(:disabled) {
  transform: scale(1.03);
  opacity: 0.9;
  background: #ffffff !important;
}

[class*="wrapper"] [class*="saveButton"]:disabled {
  opacity: 0.3;
}

/* CTA button — same white pill */
[class*="wrapper"] [class*="ctaButton"] {
  background: #ffffff !important;
  color: #000000 !important;
  border-radius: 9999px !important;
  box-shadow: none !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em;
  transition: transform 0.3s ease;
}

[class*="wrapper"] [class*="ctaButton"]:hover {
  transform: scale(1.05) !important;
  box-shadow: none !important;
}

/* Logout button — ghost pill with subtle border */
[class*="wrapper"] [class*="logoutButton"] {
  border-radius: 9999px !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  color: var(--color-text-muted) !important;
  font-weight: 400 !important;
  font-size: 0.8rem !important;
  padding: 8px 20px !important;
  transition: all 0.3s ease;
}

[class*="wrapper"] [class*="logoutButton"]:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
  color: var(--color-text) !important;
}

/* Cancel buttons — ghost pill */
[class*="wrapper"] [class*="btnCancel"],
[class*="wrapper"] [class*="cancelGroupButton"] {
  border-radius: 9999px !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: var(--color-text-muted) !important;
  font-weight: 400 !important;
  transition: all 0.3s ease;
}

[class*="wrapper"] [class*="btnCancel"]:hover:not(:disabled),
[class*="wrapper"] [class*="cancelGroupButton"]:hover:not(:disabled) {
  border-color: rgba(255, 255, 255, 0.3) !important;
  color: var(--color-text-light) !important;
  background: rgba(255, 255, 255, 0.05) !important;
}

/* Sync button — glass pill */
[class*="wrapper"] [class*="syncButton"] {
  border-radius: 9999px !important;
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
}

[class*="wrapper"] [class*="syncButtonPrimary"] {
  background: #ffffff !important;
  color: #000000 !important;
  border-color: #ffffff !important;
}

[class*="wrapper"] [class*="syncButtonPrimary"]:hover:not(:disabled) {
  transform: scale(1.03);
  opacity: 0.9;
}

/* Pass items — glass card with refined left border */
[class*="wrapper"] [class*="passItem"] {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-left: 3px solid rgba(156, 163, 175, 0.4) !important;
  border-radius: 12px !important;
}

[class*="wrapper"] [class*="passItemAlt"] {
  border-left-color: rgba(156, 163, 175, 0.6) !important;
}

[class*="wrapper"] [class*="passName"] {
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 400;
  font-size: 1.2rem;
}

/* Progress bar — elegant muted tones */
[class*="wrapper"] [class*="progressBar"] {
  background: rgba(255, 255, 255, 0.06) !important;
  border-radius: 9999px !important;
  height: 6px !important;
}

[class*="wrapper"] [class*="progressFill"] {
  background: linear-gradient(90deg, rgba(156, 163, 175, 0.6), rgba(209, 213, 219, 0.4)) !important;
  border-radius: 9999px !important;
}

/* Group item names — serif accent */
[class*="wrapper"] [class*="groupName"] {
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 400;
  font-size: 1.05rem;
}

/* Group schedule — muted accent */
[class*="wrapper"] [class*="groupSchedule"] {
  color: var(--color-text-light) !important;
}

/* Links — underline on hover instead of color change */
[class*="wrapper"] [class*="passesLink"],
[class*="wrapper"] [class*="groupsLink"] {
  color: var(--color-text-light) !important;
  font-weight: 400;
  letter-spacing: 0.02em;
  transition: color 0.3s ease;
}

[class*="wrapper"] [class*="passesLink"]:hover,
[class*="wrapper"] [class*="groupsLink"]:hover {
  color: var(--color-text) !important;
}

/* Status badges — refined, muted tones */
[class*="wrapper"] [class*="resStatus"] {
  border-radius: 9999px !important;
  padding: 3px 10px !important;
  font-weight: 500 !important;
  font-size: 0.65rem !important;
  letter-spacing: 0.08em !important;
}

/* Avatar — elegant gradient */
[class*="wrapper"] [class*="avatar"] {
  background: linear-gradient(135deg, rgba(156, 163, 175, 0.3), rgba(107, 114, 128, 0.3)) !important;
  border: 1px solid rgba(255, 255, 255, 0.1);
  font-family: var(--font-heading) !important;
  font-style: italic;
  font-weight: 400 !important;
}

/* Section dividers in settings — very subtle */
[class*="wrapper"] [class*="settingsGroup"] {
  border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}

/* Entrance animation for profile page */
[class*="wrapper"] [class*="container"] {
  animation: profileReveal 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}

[class*="wrapper"] [class*="dashboardGrid"] > * {
  animation: profileCardReveal 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}

[class*="wrapper"] [class*="dashboardGrid"] > *:nth-child(1) { animation-delay: 0.1s; }
[class*="wrapper"] [class*="dashboardGrid"] > *:nth-child(2) { animation-delay: 0.2s; }
[class*="wrapper"] [class*="dashboardGrid"] > *:nth-child(3) { animation-delay: 0.3s; }
[class*="wrapper"] [class*="dashboardGrid"] > *:nth-child(4) { animation-delay: 0.4s; }

@keyframes profileReveal {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes profileCardReveal {
  from {
    opacity: 0;
    transform: translateY(30px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ==========================================
   SLOT CAROUSEL (ReservationFlow) OVERRIDES
   Tokens consumed by shared/components/ReservationFlow
   ========================================== */

:root {
  --rf-pill-bg: rgba(255, 255, 255, 0.04);
  --rf-pill-border: rgba(255, 255, 255, 0.12);
  --rf-pill-border-hover: rgba(255, 255, 255, 0.28);
  --rf-pill-active-bg: #d1d5db;
  --rf-pill-active-fg: #0f1420;
  --rf-pill-active-shadow: 0 4px 18px rgba(209, 213, 219, 0.2);
  --rf-pill-radius: var(--radius-sm, 4px);
  --rf-pill-day-name-fg: #9ca3af;
  --rf-pill-day-num-fg: #ffffff;
  --rf-status-good-fg: #86efac;
  --rf-status-low-bg: transparent;
  --rf-status-low-fg: #f4b740;
  --rf-status-low-active-fg: #b8860b;
  --rf-status-none-fg: #6b7280;
}