/* ============================================================
   CHEFRWANDA — Global Design System
   Light Mode | Premium SaaS + Culinary Brand
   Version: 1.0
   
   Font Strategy:
   - Cormorant Garamond → Headings, hero titles
   - Plus Jakarta Sans  → Body, UI, navigation, buttons
   
   Color Palette:
   - Charcoal    #171717   Primary / text
   - Terracotta  #D95D39   Brand accent / CTA
   - Cream       #FFF8ED   Main background
   - Gold        #E5A72A   Ratings / badges
   - Green       #315C45   Verified / success
   - White       #FFFFFF   Cards / contrast
   ============================================================ */

/* ─── Google Fonts Import ─── */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600&family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

/* ─── CSS Custom Properties (Tokens) ─── */
:root {
  /* Brand Colors */
  --color-charcoal:     #171717;
  --color-charcoal-80:  #2e2e2e;
  --color-charcoal-60:  #4a4a4a;
  --color-charcoal-20:  #d0d0d0;
  --color-charcoal-10:  #e8e8e8;

  --color-terracotta:       #D95D39;
  --color-terracotta-dark:  #bf4f2f;
  --color-terracotta-light: #f0795a;
  --color-terracotta-faint: #fdf0eb;

  --color-cream:     #FFF8ED;
  --color-cream-dark:#f5eedd;

  --color-gold:      #E5A72A;
  --color-gold-faint:#fef8e7;

  --color-green:       #315C45;
  --color-green-faint: #eaf3ee;

  --color-white: #FFFFFF;

  /* Typography */
  --font-heading: 'Cormorant Garamond', Georgia, serif;
  --font-body:    'Plus Jakarta Sans', -apple-system, sans-serif;

  /* Font Scale */
  --text-xs:   0.75rem;    /* 12px */
  --text-sm:   0.8125rem;  /* 13px */
  --text-base: 1rem;       /* 16px */
  --text-lg:   1.125rem;   /* 18px */
  --text-xl:   1.25rem;    /* 20px */
  --text-2xl:  1.5rem;     /* 24px */
  --text-3xl:  2rem;       /* 32px */
  --text-4xl:  2.5rem;     /* 40px */
  --text-5xl:  3rem;       /* 48px */
  --text-hero: 4.5rem;     /* 72px */

  /* Spacing */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* Border Radius */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 12px;

  /* Shadows */
  --shadow-xs:  0 1px 3px rgba(23,23,23,0.06);
  --shadow-sm:  0 2px 8px rgba(23,23,23,0.08);
  --shadow-md:  0 4px 16px rgba(23,23,23,0.10);
  --shadow-lg:  0 8px 32px rgba(23,23,23,0.12);
  --shadow-xl:  0 16px 48px rgba(23,23,23,0.14);

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;

  /* Layout */
  --container-max:  1200px;
  --container-wide: 1400px;
  --nav-height:     72px;
}

/* ─── Reset & Base ─── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.65;
  color: var(--color-charcoal);
  background-color: var(--color-cream);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, video {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

ul, ol {
  list-style: none;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: var(--font-body);
}

input, textarea, select {
  font-family: var(--font-body);
}

/* ─── Scrollbar ─── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--color-cream); }
::-webkit-scrollbar-thumb { background: var(--color-charcoal-20); border-radius: var(--radius-full); }
::-webkit-scrollbar-thumb:hover { background: var(--color-terracotta); }

/* ─── Typography ─── */
h1, h2, h3 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--color-charcoal);
}

h4, h5, h6 {
  font-family: var(--font-body);
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-charcoal);
}

h1 { font-size: var(--text-hero); }
h2 { font-size: var(--text-5xl); }
h3 { font-size: var(--text-3xl); }
h4 { font-size: var(--text-xl); }
h5 { font-size: var(--text-lg); }
h6 { font-size: var(--text-base); }

p {
  color: var(--color-charcoal-60);
  font-size: var(--text-base);
  line-height: 1.7;
}

.text-accent { color: var(--color-terracotta); }
.text-muted  { color: var(--color-charcoal-60); font-size: var(--text-sm); }

/* ─── Layout ─── */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-6);
}

.container--wide {
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: 0 var(--space-6);
}

.section {
  padding: var(--space-24) 0;
}

.section--cream  { background-color: var(--color-cream); }
.section--white  { background-color: var(--color-white); }
.section--dark   { background-color: var(--color-charcoal); }

/* ─── Navigation ─── */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: var(--nav-height);
  background-color: var(--color-cream);
  border-bottom: 1px solid var(--color-cream-dark);
  transition: box-shadow var(--transition-base), background-color var(--transition-base);
}

.navbar.scrolled {
  background-color: rgba(255, 248, 237, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--shadow-sm);
}

.navbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-6);
}

.navbar__logo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
}

.navbar__logo img {
  height: 42px;
  width: auto;
}

.navbar__logo-text {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--color-charcoal);
  line-height: 1;
}

.navbar__logo-text span {
  color: var(--color-terracotta);
}

.navbar__links {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.navbar__links a {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-charcoal-60);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  transition: color var(--transition-fast), background-color var(--transition-fast);
  position: relative;
}

.navbar__links a::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: var(--space-4);
  right: var(--space-4);
  height: 2px;
  background: var(--color-terracotta);
  border-radius: var(--radius-full);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition-base);
}

.navbar__links a:hover {
  color: var(--color-charcoal);
  background-color: var(--color-cream-dark);
}

.navbar__links a:hover::after,
.navbar__links a.active::after {
  transform: scaleX(1);
}

.navbar__links a.active {
  color: var(--color-charcoal);
  font-weight: 600;
}

/* ─── Navbar Dropdown ─── */
.navbar__item--has-dropdown {
  position: relative;
}

.navbar__dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 260px;
  background: var(--color-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--space-2) 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all var(--transition-fast);
  z-index: 100;
  display: flex;
  flex-direction: column;
}

.navbar__item--has-dropdown:hover .navbar__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.navbar__dropdown a {
  display: block;
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-charcoal);
  border-radius: 0;
  font-weight: 500;
}

.navbar__dropdown a::after {
  display: none !important;
}

.navbar__dropdown a:hover {
  background-color: var(--color-cream);
  color: var(--color-terracotta);
}

/* Mobile Menu Dropdown Accordion */
.mobile-menu__toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--color-charcoal);
  padding: 0.625rem 0.875rem;
  border-radius: var(--radius-sm);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast);
  text-align: left;
  -webkit-tap-highlight-color: transparent;
}

.mobile-menu__toggle:hover,
.mobile-menu__toggle.active,
.mobile-menu__toggle[aria-expanded="true"] {
  background: var(--color-cream);
  color: var(--color-terracotta);
}

.mobile-menu__toggle-icon {
  font-size: 0.9rem;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  color: var(--color-charcoal-40);
}

.mobile-menu__toggle:hover .mobile-menu__toggle-icon,
.mobile-menu__toggle.active .mobile-menu__toggle-icon,
.mobile-menu__toggle[aria-expanded="true"] .mobile-menu__toggle-icon {
  transform: rotate(180deg);
  color: var(--color-terracotta);
}

/* Sub-services list collapsed by default */
.mobile-menu__dropdown {
  display: none;
  padding-left: var(--space-4);
  margin-top: var(--space-2);
  margin-bottom: var(--space-2);
  flex-direction: column;
  gap: var(--space-2);
  border-left: 2px solid var(--color-cream-dark);
}

.mobile-menu__dropdown.open,
.mobile-menu__dropdown.is-open {
  display: flex;
}

.mobile-menu__dropdown a {
  font-size: 0.9375rem;
  color: var(--color-charcoal-60);
  font-weight: 400;
  padding: 0.375rem 0.5rem;
  border-radius: var(--radius-sm);
  transition: color var(--transition-fast), background-color var(--transition-fast);
}

.mobile-menu__dropdown a:hover {
  color: var(--color-terracotta);
  background: var(--color-cream);
}

.navbar__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.navbar__hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: var(--space-2);
  cursor: pointer;
}

.navbar__hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--color-charcoal);
  border-radius: var(--radius-full);
  transition: transform var(--transition-base), opacity var(--transition-fast);
}

/* ─── Buttons ─── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius-sm);
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--transition-fast), color var(--transition-fast), 
              border-color var(--transition-fast), transform var(--transition-fast),
              box-shadow var(--transition-fast);
  white-space: nowrap;
}

.btn:active {
  transform: scale(0.98);
}

/* Primary — Terracotta */
.btn--primary {
  background-color: var(--color-terracotta);
  color: var(--color-white);
  border-color: var(--color-terracotta);
}
.btn--primary:hover {
  background-color: var(--color-terracotta-dark);
  border-color: var(--color-terracotta-dark);
  box-shadow: 0 4px 14px rgba(217, 93, 57, 0.35);
}

/* Secondary — Outline */
.btn--secondary {
  background-color: transparent;
  color: var(--color-charcoal);
  border-color: var(--color-charcoal);
}
.btn--secondary:hover {
  background-color: var(--color-charcoal);
  color: var(--color-white);
}

/* Outline — Charcoal border & subtle hover tint */
.btn--outline {
  background-color: transparent;
  color: var(--color-charcoal);
  border-color: var(--color-charcoal);
}
.btn--outline:hover {
  background-color: rgba(23, 23, 23, 0.06);
  color: var(--color-charcoal);
  border-color: var(--color-charcoal);
}

/* Dark — Charcoal */
.btn--dark {
  background-color: var(--color-charcoal);
  color: var(--color-white);
  border-color: var(--color-charcoal);
}
.btn--dark:hover {
  background-color: var(--color-charcoal-80);
  border-color: var(--color-charcoal-80);
  box-shadow: var(--shadow-md);
}

/* Ghost — Subtle */
.btn--ghost {
  background-color: transparent;
  color: var(--color-terracotta);
  border-color: transparent;
}
.btn--ghost:hover {
  background-color: var(--color-terracotta-faint);
  border-color: var(--color-terracotta-faint);
}

/* Sizes */
.btn--sm  { padding: 0.5rem 1rem; font-size: var(--text-xs); }
.btn--lg  { padding: 0.875rem 2rem; font-size: var(--text-base); }
.btn--xl  { padding: 1rem 2.5rem; font-size: var(--text-lg); border-radius: var(--radius-md); }
.btn--full { width: 100%; }

/* ─── Cards ─── */
.card {
  background-color: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}

.card__image {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
}

.card__body {
  padding: var(--space-6);
}

.card__title {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: 600;
  margin-bottom: var(--space-2);
}

.card__meta {
  font-size: var(--text-sm);
  color: var(--color-charcoal-60);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.card__bottom-accent {
  display: block;
  height: 3px;
  background: var(--color-terracotta);
  width: 40px;
  border-radius: var(--radius-full);
  margin-top: var(--space-4);
  transition: width var(--transition-base);
}
.card:hover .card__bottom-accent {
  width: 80px;
}

/* Chef Cards */
.chef-card {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
  position: relative;
}

.chef-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-xl);
}

.chef-card__image-wrap {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3/4;
}

.chef-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.chef-card:hover .chef-card__image {
  transform: scale(1.04);
}

.chef-card__overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--space-4);
  background: linear-gradient(to top, rgba(23,23,23,0.75) 0%, transparent 100%);
  transform: translateY(100%);
  transition: transform var(--transition-base);
}

.chef-card:hover .chef-card__overlay {
  transform: translateY(0);
}

.chef-card__body {
  padding: var(--space-5);
}

.chef-card__name {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: 600;
  margin-bottom: var(--space-1);
}

.chef-card__specialty {
  font-size: var(--text-sm);
  color: var(--color-charcoal-60);
  margin-bottom: var(--space-3);
}

.chef-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-charcoal-10);
}

.chef-card__price {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-charcoal);
}

.chef-card__price span {
  font-weight: 400;
  color: var(--color-charcoal-60);
  font-size: var(--text-xs);
}

/* ─── Badges & Tags ─── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-xs);
  font-weight: 600;
  padding: 0.25rem 0.625rem;
  border-radius: var(--radius-full);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.badge--verified {
  background-color: var(--color-green-faint);
  color: var(--color-green);
  border: 1px solid rgba(49, 92, 69, 0.2);
}

.badge--gold {
  background-color: var(--color-gold-faint);
  color: #9a6f0e;
  border: 1px solid rgba(229, 167, 42, 0.3);
}

.badge--terracotta {
  background-color: var(--color-terracotta-faint);
  color: var(--color-terracotta);
  border: 1px solid rgba(217, 93, 57, 0.2);
}

.badge--dark {
  background-color: var(--color-charcoal);
  color: var(--color-white);
}

/* ─── Star Rating ─── */
.rating {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.rating__stars {
  color: var(--color-gold);
  font-size: var(--text-sm);
  letter-spacing: 1px;
}

.rating__value {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-charcoal);
}

.rating__count {
  font-size: var(--text-xs);
  color: var(--color-charcoal-60);
}

/* ─── Forms ─── */
.form-group {
  margin-bottom: var(--space-5);
}

.form-label {
  display: block;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-charcoal);
  margin-bottom: var(--space-2);
  letter-spacing: 0.01em;
}

.form-label .required {
  color: var(--color-terracotta);
  margin-left: 2px;
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-charcoal);
  background-color: var(--color-white);
  border: 1.5px solid var(--color-charcoal-20);
  border-radius: var(--radius-sm);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  appearance: none;
  outline: none;
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--color-charcoal-20);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: var(--color-terracotta);
  box-shadow: 0 0 0 3px rgba(217, 93, 57, 0.12);
}

.form-textarea {
  resize: vertical;
  min-height: 120px;
  line-height: 1.6;
}

.form-hint {
  font-size: var(--text-xs);
  color: var(--color-charcoal-60);
  margin-top: var(--space-1);
}

.form-error {
  font-size: var(--text-xs);
  color: var(--color-terracotta);
  margin-top: var(--space-1);
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

/* ─── Section Headers ─── */
.section-header {
  margin-bottom: var(--space-12);
}

.section-header--center {
  text-align: center;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: var(--space-12);
}

.section-label {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-terracotta);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: var(--space-3);
}

.section-title {
  font-family: var(--font-heading);
  font-size: var(--text-5xl);
  font-weight: 600;
  color: var(--color-charcoal);
  margin-bottom: var(--space-4);
  line-height: 1.1;
}

.section-description,
.section-subtitle {
  font-size: var(--text-lg);
  color: var(--color-charcoal-60);
  line-height: 1.7;
}

/* ─── Grids ─── */
.grid {
  display: grid;
  gap: var(--space-6);
}

.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

/* ─── Divider ─── */
.divider {
  height: 1px;
  background: var(--color-charcoal-10);
  border: none;
  margin: var(--space-8) 0;
}

.divider--terracotta {
  width: 60px;
  height: 3px;
  background: var(--color-terracotta);
  border: none;
  border-radius: var(--radius-full);
  margin: var(--space-4) 0;
}

/* ─── Avatar ─── */
.avatar {
  border-radius: var(--radius-full);
  object-fit: cover;
  flex-shrink: 0;
}
.avatar--sm  { width: 36px;  height: 36px;  }
.avatar--md  { width: 56px;  height: 56px;  }
.avatar--lg  { width: 80px;  height: 80px;  }
.avatar--xl  { width: 120px; height: 120px; }

/* ─── Stat Pill ─── */
.stat-pill {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-4) var(--space-6);
  background: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  text-align: center;
  min-width: 100px;
}

.stat-pill__value {
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  font-weight: 700;
  color: var(--color-terracotta);
  line-height: 1;
}

.stat-pill__label {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-charcoal-60);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ─── Hero ─── */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding-top: var(--nav-height);
  overflow: hidden;
  background-color: var(--color-cream);
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    rgba(255, 248, 237, 0.92) 0%,
    rgba(255, 248, 237, 0.70) 50%,
    rgba(255, 248, 237, 0.20) 100%
  );
}

.hero__content {
  position: relative;
  z-index: 1;
  max-width: 640px;
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-terracotta);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: var(--space-5);
  padding: var(--space-2) var(--space-4);
  background: var(--color-terracotta-faint);
  border-radius: var(--radius-full);
}

.hero__title {
  font-family: var(--font-heading);
  font-size: var(--text-hero);
  font-weight: 700;
  color: var(--color-charcoal);
  line-height: 1.05;
  margin-bottom: var(--space-6);
}

.hero__title em {
  font-style: italic;
  color: var(--color-terracotta);
}

.hero__description {
  font-size: var(--text-xl);
  color: var(--color-charcoal-60);
  line-height: 1.65;
  margin-bottom: var(--space-8);
  max-width: 520px;
}

.hero__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-4);
}

/* ─── Hero Slideshow (Right Side) ─── */
.hero__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-10);
  align-items: center;
  position: relative;
  z-index: 1;
}

@media (max-width: 992px) {
  .hero__grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
}

.hero__slideshow-container {
  position: relative;
  width: 100%;
  max-width: 580px;
  margin: 0 auto;
}

.hero__slideshow-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 4/3;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.18);
  border: 4px solid var(--color-white);
  background-color: var(--color-charcoal);
}

.hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  transform: scale(1.04);
}

.hero__slide.active {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}

.hero__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hero__slide-badge {
  position: absolute;
  bottom: var(--space-4);
  left: var(--space-4);
  right: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: rgba(23, 23, 23, 0.75);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--color-white);
  transform: translateY(12px);
  transition: transform 0.5s ease-out;
}

.hero__slide.active .hero__slide-badge {
  transform: translateY(0);
}

.hero__slide-tag {
  display: block;
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-gold);
  margin-bottom: 2px;
}

.hero__slide-title {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--color-white);
}

.hero__slideshow-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  margin-top: var(--space-4);
}

.hero__slideshow-btn {
  background: var(--color-white);
  color: var(--color-charcoal);
  border: 1px solid var(--color-charcoal-20);
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-fast);
  box-shadow: var(--shadow-sm);
  padding: 0;
}

.hero__slideshow-btn:hover {
  background: var(--color-terracotta);
  color: var(--color-white);
  border-color: var(--color-terracotta);
  transform: scale(1.08);
}

.hero__slideshow-dots {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.hero__slideshow-dot {
  width: 10px;
  height: 10px;
  border-radius: var(--radius-full);
  background: var(--color-charcoal-20);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: all var(--transition-base);
}

.hero__slideshow-dot.active {
  width: 28px;
  background: var(--color-terracotta);
  border-radius: 10px;
}

/* ─── Footer ─── */
.footer {
  background-color: var(--color-charcoal);
  color: var(--color-white);
  padding: var(--space-20) 0 var(--space-8);
}

.footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--space-12);
  margin-bottom: var(--space-16);
}

.footer__brand-tagline {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.55);
  margin: var(--space-4) 0 var(--space-6);
  line-height: 1.65;
  max-width: 280px;
}

.footer__heading {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  color: rgba(255,255,255,0.5);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: var(--space-4);
}

.footer__links {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.footer__links a {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.7);
  transition: color var(--transition-fast);
}

.footer__links a:hover {
  color: var(--color-terracotta);
}

.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-6);
  border-top: 1px solid rgba(255,255,255,0.1);
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.4);
}

.footer__social {
  display: flex;
  gap: var(--space-3);
}

.footer__social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.6);
  font-size: var(--text-sm);
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.footer__social a:hover {
  background: var(--color-terracotta);
  color: var(--color-white);
}

/* ─── Step Wizard / Progress ─── */
.wizard-progress {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: var(--space-10);
}

.wizard-step {
  display: flex;
  align-items: center;
  flex: 1;
  position: relative;
}

.wizard-step__circle {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  border: 2px solid var(--color-charcoal-20);
  background: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-charcoal-60);
  flex-shrink: 0;
  transition: all var(--transition-base);
}

.wizard-step.active .wizard-step__circle {
  border-color: var(--color-terracotta);
  background: var(--color-terracotta);
  color: var(--color-white);
}

.wizard-step.done .wizard-step__circle {
  border-color: var(--color-green);
  background: var(--color-green);
  color: var(--color-white);
}

.wizard-step__label {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-charcoal-60);
  position: absolute;
  top: 44px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}

.wizard-step.active .wizard-step__label { color: var(--color-terracotta); }
.wizard-step.done .wizard-step__label { color: var(--color-green); }

.wizard-step__line {
  flex: 1;
  height: 2px;
  background: var(--color-charcoal-10);
  margin: 0 var(--space-2);
  transition: background-color var(--transition-base);
}

.wizard-step.done ~ .wizard-step__line,
.wizard-step.done + .wizard-step__line {
  background: var(--color-green);
}

/* ─── Dashboard Sidebar ─── */
.dashboard-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  min-height: 100vh;
  padding-top: var(--nav-height);
}

.sidebar {
  background-color: var(--color-charcoal);
  padding: var(--space-8) 0;
  position: fixed;
  top: var(--nav-height);
  bottom: 0;
  width: 240px;
  overflow-y: auto;
}

.sidebar__group {
  padding: 0 var(--space-4);
  margin-bottom: var(--space-6);
}

.sidebar__group-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(255,255,255,0.3);
  padding: 0 var(--space-3);
  margin-bottom: var(--space-2);
}

.sidebar__link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: 500;
  color: rgba(255,255,255,0.65);
  transition: background-color var(--transition-fast), color var(--transition-fast);
  text-decoration: none;
}

.sidebar__link:hover {
  background-color: rgba(255,255,255,0.08);
  color: var(--color-white);
}

.sidebar__link.active {
  background-color: var(--color-terracotta);
  color: var(--color-white);
}

.sidebar__link svg,
.sidebar__link .icon {
  width: 18px;
  height: 18px;
  opacity: 0.85;
  flex-shrink: 0;
}

.dashboard__main {
  margin-left: 240px;
  padding: var(--space-8);
  background-color: var(--color-cream);
  min-height: calc(100vh - var(--nav-height));
}

/* ─── Dashboard Stats ─── */
.stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
  margin-bottom: var(--space-8);
}

.stat-card {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-xs);
  border-left: 3px solid var(--color-terracotta);
}

.stat-card__value {
  font-family: var(--font-heading);
  font-size: var(--text-4xl);
  font-weight: 700;
  color: var(--color-charcoal);
  line-height: 1;
  margin-bottom: var(--space-1);
}

.stat-card__label {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-charcoal-60);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.stat-card--green  { border-left-color: var(--color-green); }
.stat-card--gold   { border-left-color: var(--color-gold); }
.stat-card--dark   { border-left-color: var(--color-charcoal); }

/* ─── WhatsApp Float Button ─── */
.whatsapp-float {
  position: fixed;
  bottom: var(--space-6);
  right: var(--space-6);
  z-index: 999;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-full);
  background-color: #25D366;
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(37,211,102,0.45);
  font-size: 26px;
  text-decoration: none;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.whatsapp-float:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 28px rgba(37,211,102,0.55);
}

/* ─── Alert / Toast ─── */
.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  border: 1px solid transparent;
  margin-bottom: var(--space-4);
}

.alert--success {
  background: var(--color-green-faint);
  color: var(--color-green);
  border-color: rgba(49, 92, 69, 0.15);
}

.alert--error {
  background: var(--color-terracotta-faint);
  color: var(--color-terracotta-dark);
  border-color: rgba(217, 93, 57, 0.2);
}

.alert--info {
  background: #f0f7ff;
  color: #1e5fa3;
  border-color: rgba(30, 95, 163, 0.15);
}

/* ─── Mobile Menu Drawer ─── */
.mobile-menu {
  position: fixed;
  top: var(--nav-height);
  right: 0;
  bottom: 0;
  width: min(320px, 85vw);
  background-color: var(--color-white);
  z-index: 1050;
  padding: var(--space-6) var(--space-4);
  transform: translateX(100%);
  transition: transform var(--transition-base), visibility var(--transition-base);
  overflow-y: auto;
  box-shadow: var(--shadow-xl);
  visibility: hidden;
  pointer-events: none;
}

.mobile-menu.open {
  transform: translateX(0);
  visibility: visible;
  pointer-events: auto;
}

.mobile-menu ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.mobile-menu li a {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--color-charcoal);
  padding: 0.625rem 0.875rem;
  border-radius: var(--radius-sm);
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.mobile-menu li a:hover,
.mobile-menu li a.active {
  background: var(--color-cream);
  color: var(--color-terracotta);
}

.mobile-menu li a i {
  font-size: 1.15rem;
  line-height: 1;
  color: var(--color-terracotta);
}

.mobile-menu .btn {
  justify-content: center;
  text-align: center;
  font-size: 0.9375rem;
  padding: 0.75rem 1rem;
  min-height: 44px;
  box-sizing: border-box;
}

.mobile-menu__logout-btn {
  color: var(--color-terracotta-dark) !important;
  border-color: rgba(217, 93, 57, 0.35) !important;
  background: rgba(217, 93, 57, 0.08) !important;
}

.mobile-menu__logout-btn:hover {
  background: var(--color-terracotta) !important;
  color: var(--color-white) !important;
  border-color: var(--color-terracotta) !important;
}

.mobile-menu__logout-btn i {
  color: inherit !important;
}

.mobile-menu__login-btn {
  background: var(--color-charcoal) !important;
  color: var(--color-white) !important;
  border-color: var(--color-charcoal) !important;
}

.mobile-menu__login-btn:hover {
  background: var(--color-terracotta) !important;
  border-color: var(--color-terracotta) !important;
  color: var(--color-white) !important;
}

.mobile-menu__login-btn i {
  color: inherit !important;
}

.mobile-menu__divider {
  height: 1px;
  background: var(--color-charcoal-10);
  margin: var(--space-4) 0;
  list-style: none;
}

.mobile-overlay {
  position: fixed;
  inset: 0;
  top: var(--nav-height);
  background: rgba(23,23,23,0.45);
  z-index: 1045;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-base);
}

.mobile-overlay.open {
  opacity: 1;
  pointer-events: all;
}

/* Hide background floating elements when mobile menu drawer is open */
body.mobile-menu-open .mobile-floating-dock,
body.mobile-menu-open .customer-dock,
body:has(.mobile-menu.open) .mobile-floating-dock,
body:has(.mobile-menu.open) .customer-dock,
.mobile-menu.open ~ .mobile-floating-dock,
.mobile-menu.open ~ .customer-dock,
body.mobile-menu-open .whatsapp-float,
body:has(.mobile-menu.open) .whatsapp-float,
.mobile-menu.open ~ .whatsapp-float,
body.mobile-menu-open .floating-cart-btn,
body:has(.mobile-menu.open) .floating-cart-btn,
.mobile-menu.open ~ .floating-cart-btn {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* ─── Scroll Animations ─── */

.fade-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity var(--transition-slow), transform var(--transition-slow);
}

.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ─── Utilities ─── */
.flex         { display: flex; }
.flex-col     { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center  { justify-content: center; }
.gap-2        { gap: var(--space-2); }
.gap-4        { gap: var(--space-4); }
.gap-6        { gap: var(--space-6); }
.gap-8        { gap: var(--space-8); }

.text-center  { text-align: center; }
.text-right   { text-align: right; }
.font-bold    { font-weight: 700; }
.font-medium  { font-weight: 500; }

.w-full  { width: 100%; }
.h-full  { height: 100%; }
.hidden  { display: none; }

.rounded-full { border-radius: var(--radius-full); }
.rounded-lg   { border-radius: var(--radius-lg); }

.overflow-hidden { overflow: hidden; }

/* ─── Responsive ─── */
@media (max-width: 1024px) {
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: var(--space-8); }
  .stats-row { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  :root {
    --text-hero: 3rem;
    --text-5xl: 2.25rem;
  }

  .navbar__links,
  .navbar__actions { display: none; }
  .navbar__hamburger { display: flex; }

  .grid--2,
  .grid--3,
  .grid--4 { grid-template-columns: 1fr; }

  .hero { min-height: auto; padding: calc(var(--nav-height) + var(--space-16)) 0 var(--space-16); }

  .footer__grid { grid-template-columns: 1fr; gap: var(--space-8); }
  .footer__bottom { flex-direction: column; gap: var(--space-4); text-align: center; }

  .dashboard-layout { grid-template-columns: 1fr; }
  .sidebar { display: none; }
  .dashboard__main { margin-left: 0; padding: var(--space-5); }

  .stats-row { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
  .stats-row { grid-template-columns: 1fr; }
  .hero__actions { flex-direction: column; width: 100%; }
  .btn--xl { width: 100%; }
}

/* ─── Added Utility Classes ─── */
.text-white { color: var(--color-white) !important; }
.text-white-78 { color: rgba(255, 255, 255, 0.78) !important; }
.section-header-flex { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 1rem; margin-bottom: 3rem; }
.mb-0 { margin-bottom: 0 !important; }
.challenge-badge { margin-bottom: 1rem; font-size: 0.7rem; }
.why-promise-text { color: var(--color-charcoal-60); font-size: 1.0625rem; line-height: 1.75; margin-bottom: 2rem; }
.btn--outline-white { border-color: var(--color-white); color: var(--color-white); }
.btn--outline-white:hover { background-color: var(--color-white); color: var(--color-charcoal); }
.bg-cream { background-color: var(--color-cream); }
.footer__logo-link { margin-bottom: 1rem; display: inline-flex; }
.footer__logo-img { filter: brightness(1.1); }
.footer__bottom-links { display: flex; gap: 1.5rem; }
.footer__bottom-links a { color: rgba(255, 255, 255, 0.4); transition: color var(--transition-fast); }
.footer__bottom-links a:hover { color: var(--color-white); }
/* ─── Homepage-specific Styles ─── */

/* Hero */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
}

.hero__stats {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-top: 2.5rem;
  flex-wrap: wrap;
}

.hero__stat {
  display: flex;
  flex-direction: column;
}

.hero__stat-value {
  font-family: var(--font-heading);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--color-charcoal);
  line-height: 1;
}

.hero__stat-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-charcoal-60);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 0.25rem;
}

.hero__stat-divider {
  width: 1px;
  height: 36px;
  background: var(--color-charcoal-20);
}

/* Pathways */
.pathways-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.pathway-card {
  background: var(--color-white);
  border: 1.5px solid var(--color-charcoal-10);
  border-radius: var(--radius-xl);
  padding: 2.5rem 2rem;
  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}

.pathway-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: var(--color-terracotta);
}

.pathway-card--featured {
  background: var(--color-charcoal);
  border-color: var(--color-charcoal);
}

.pathway-card--featured:hover {
  border-color: var(--color-terracotta);
}

.pathway-card__icon {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
}

.pathway-card__icon--terracotta { background: var(--color-terracotta-faint); color: var(--color-terracotta); }
.pathway-card__icon--gold       { background: var(--color-gold-faint); color: var(--color-gold); }
.pathway-card__icon--white      { background: rgba(255,255,255,0.12); color: var(--color-white); }

.pathway-card__title {
  font-family: var(--font-heading);
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--color-charcoal);
  margin-bottom: 0.75rem;
}

.pathway-card__desc {
  font-size: 0.9375rem;
  color: var(--color-charcoal-60);
  line-height: 1.7;
  margin-bottom: 1.5rem;
}

.pathway-card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-terracotta);
  text-decoration: none;
  transition: gap var(--transition-fast);
}

.pathway-card__link:hover { gap: 0.75rem; }
.pathway-card__link--white { color: var(--color-white); }

/* Chef card badge */
.chef-card__badge {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
}

.chef-card__meta {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.8125rem;
  color: var(--color-charcoal-60);
  margin-top: 0.25rem;
  margin-bottom: 0.75rem;
}

/* Steps */
.steps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  position: relative;
}

.step-card {
  text-align: center;
  padding: 2rem 1.5rem;
  position: relative;
}

.step-card__number {
  font-family: var(--font-heading);
  font-size: 4rem;
  font-weight: 700;
  color: var(--color-cream-dark);
  line-height: 1;
  margin-bottom: -0.5rem;
}

.step-card__icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--color-terracotta-faint);
  color: var(--color-terracotta);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0.5rem auto 1.25rem;
  transition: background-color var(--transition-base), color var(--transition-base);
}

.step-card:hover .step-card__icon {
  background: var(--color-terracotta);
  color: var(--color-white);
}

.step-card__title {
  font-size: 1.0625rem;
  font-weight: 700;
  margin-bottom: 0.625rem;
}

.step-card__desc {
  font-size: 0.875rem;
  color: var(--color-charcoal-60);
  line-height: 1.65;
}

.step-card__connector {
  position: absolute;
  top: calc(50% - 1rem);
  right: -1.25rem;
  width: 2.5rem;
  height: 2px;
  background: linear-gradient(90deg, var(--color-terracotta), transparent);
  z-index: 1;
}

/* Experiences */
.experiences-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.experience-card {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: 2rem 1.75rem;
  box-shadow: var(--shadow-xs);
  border: 1.5px solid var(--color-charcoal-10);
  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}

.experience-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-terracotta);
}

.experience-card__icon {
  font-size: 2.25rem;
  display: block;
  margin-bottom: 1rem;
}

.experience-card__title {
  font-size: 1.0625rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.experience-card__desc {
  font-size: 0.875rem;
  color: var(--color-charcoal-60);
  line-height: 1.65;
  margin-bottom: 1rem;
}

.experience-card__link {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--color-terracotta);
  text-decoration: none;
  transition: letter-spacing var(--transition-fast);
}

.experience-card:hover .experience-card__link { letter-spacing: 0.02em; }

/* Challenge Banner */
.challenge-banner {
  position: relative;
  background: var(--color-charcoal);
  padding: 5rem 0;
  overflow: hidden;
}

.challenge-banner__bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 70% 50%, rgba(217,93,57,0.18) 0%, transparent 60%),
    radial-gradient(circle at 10% 80%, rgba(229,167,42,0.10) 0%, transparent 50%);
}

.challenge-banner__content {
  position: relative;
  z-index: 1;
  max-width: 700px;
}

.challenge-banner__title {
  font-family: var(--font-heading);
  font-size: 2.75rem;
  font-weight: 700;
  color: var(--color-white);
  line-height: 1.15;
  margin: 1rem 0 1.25rem;
}

.challenge-banner__desc {
  font-size: 1.0625rem;
  color: rgba(255,255,255,0.72);
  line-height: 1.7;
  margin-bottom: 1.75rem;
}

.challenge-banner__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.challenge-meta-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: rgba(255,255,255,0.65);
  font-size: 0.875rem;
  font-weight: 500;
}

/* Why ChefRwanda */
.why-grid {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 5rem;
  align-items: start;
}

.why-grid__features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.75rem;
}

.home-trust-pillars {
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  margin-top: 3rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--color-charcoal-10);
}

.why-feature {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.why-feature__icon {
  width: 42px;
  height: 42px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.125rem;
  flex-shrink: 0;
}

.why-feature__icon--green      { background: var(--color-green-faint); }
.why-feature__icon--terracotta { background: var(--color-terracotta-faint); }
.why-feature__icon--gold       { background: var(--color-gold-faint); }

.why-feature__title {
  font-size: 0.9375rem;
  font-weight: 700;
  margin-bottom: 0.375rem;
}

.why-feature__desc {
  font-size: 0.8125rem;
  color: var(--color-charcoal-60);
  line-height: 1.65;
}

/* Testimonials */
.testimonial-card {
  background: var(--color-white);
  border-radius: var(--radius-xl);
  padding: 2rem;
  box-shadow: var(--shadow-sm);
  border: 1.5px solid var(--color-charcoal-10);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.testimonial-card__stars {
  color: var(--color-gold);
  font-size: 1.0625rem;
  letter-spacing: 2px;
}

.testimonial-card__text {
  font-size: 0.9375rem;
  color: var(--color-charcoal);
  line-height: 1.75;
  flex: 1;
}

.testimonial-card__author {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  margin-top: 0.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-charcoal-10);
}

.testimonial-card__avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-terracotta);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.125rem;
  font-weight: 700;
  flex-shrink: 0;
}

.testimonial-card__name {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--color-charcoal);
}

.testimonial-card__role {
  font-size: 0.8125rem;
  color: var(--color-charcoal-60);
}

/* Final CTA */
.final-cta {
  background: var(--color-terracotta);
  padding: 5rem 0;
}

.final-cta__content {
  text-align: center;
  max-width: 680px;
  margin: 0 auto;
}

.final-cta__title {
  font-family: var(--font-heading);
  font-size: 3rem;
  font-weight: 700;
  color: var(--color-white);
  margin-bottom: 1rem;
}

.final-cta__desc {
  font-size: 1.0625rem;
  color: rgba(255,255,255,0.85);
  line-height: 1.7;
  margin-bottom: 2rem;
}

.final-cta__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.final-cta .btn--primary {
  background: var(--color-white);
  color: var(--color-terracotta);
  border-color: var(--color-white);
}

.final-cta .btn--primary:hover {
  background: var(--color-cream);
  border-color: var(--color-cream);
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}

/* ─── Responsive ─── */
@media (max-width: 1024px) {
  .pathways-grid       { grid-template-columns: 1fr; }
  .steps-grid          { grid-template-columns: repeat(2, 1fr); }
  .step-card__connector { display: none; }
  .why-grid            { grid-template-columns: 1fr; gap: 2.5rem; }
  .why-grid__features  { grid-template-columns: 1fr; }
  .home-trust-pillars  { grid-template-columns: repeat(2, 1fr); }
  .experiences-grid    { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .steps-grid         { grid-template-columns: 1fr; }
  .home-trust-pillars { grid-template-columns: 1fr; }
  .experiences-grid   { grid-template-columns: 1fr; }
  .challenge-banner__title { font-size: 2rem; }
  .final-cta__title   { font-size: 2.25rem; }
  .grid--3.testimonials-grid { grid-template-columns: 1fr; }
  .grid--4.chefs-grid { grid-template-columns: repeat(2, 1fr); }
  .hero__stats        { gap: 1rem; }
}

@media (max-width: 480px) {
  .grid--4.chefs-grid { grid-template-columns: 1fr; }
  .hero__stat-divider { display: none; }
  .hero__stats        { flex-direction: column; gap: 0.75rem; }
}

/* ─── Added Utility Classes for Clean HTML ─── */
.text-gold { color: var(--color-gold) !important; }
.text-charcoal-20 { color: var(--color-charcoal-20) !important; }
.mx-2 { margin-left: 0.5rem !important; margin-right: 0.5rem !important; }
.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }
.section-desc-centered { color: var(--color-charcoal-60); max-width: 600px; margin: 1rem auto 0; }
.gallery-cta-title { color: var(--color-white); font-family: var(--font-heading); font-size: 3rem; margin-bottom: 1rem; }
.gallery-cta-desc { color: rgba(255,255,255,0.8); font-size: 1.125rem; margin-bottom: 2rem; }
.about-hero-desc { justify-content: center; max-width: 700px; margin: 0 auto; color: var(--color-charcoal-60); line-height: 1.7; }
.text-terracotta-bold { color: var(--color-terracotta); font-weight: 600; }
.contact-form-title { font-family: var(--font-heading); font-size: 2rem; margin-bottom: 1.5rem; color: var(--color-charcoal); }
.btn--full { width: 100%; justify-content: center; }
.mt-4rem { margin-top: 4rem; }
/* ─── Styles from hire-chef.php ─── */

.page-hero {
    background: var(--color-charcoal);
    padding: 6rem 0 4rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.page-hero__bg {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 100%, rgba(217,93,57,0.15) 0%, transparent 60%);
}
.page-hero__content {
    position: relative;
    z-index: 1;
    max-width: 600px;
    margin: 0 auto;
}
.page-hero__title {
    font-family: var(--font-heading);
    font-size: 3.5rem;
    color: var(--color-white);
    margin-bottom: 1rem;
}
.page-hero__desc {
    color: rgba(255,255,255,0.7);
    font-size: 1.0625rem;
    line-height: 1.6;
}

.filters-bar {
    background: var(--color-white);
    padding: 1.5rem;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-charcoal-10);
    margin-top: -3rem;
    position: relative;
    z-index: 10;
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}
.filter-group {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.filter-select {
    padding: 0.75rem 1rem;
    border: 1px solid var(--color-charcoal-20);
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-size: 0.875rem;
    color: var(--color-charcoal);
    background: var(--color-white);
    outline: none;
    min-width: 160px;
}
.filter-select:focus {
    border-color: var(--color-terracotta);
}

.directory-section {
    padding: 5rem 0;
}
/* ─── Styles from chef-career.php ─── */

.career-hero {
    background: var(--color-charcoal);
    color: var(--color-white);
    padding: 6rem 0;
    overflow: hidden;
    position: relative;
}
.career-hero__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}
.career-hero__title {
    font-family: var(--font-heading);
    font-size: 3.5rem;
    line-height: 1.1;
    margin-bottom: 1.5rem;
}
.career-hero__desc {
    font-size: 1.125rem;
    color: rgba(255,255,255,0.8);
    line-height: 1.7;
    margin-bottom: 2.5rem;
}
.career-hero__img-wrapper {
    position: relative;
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-xl);
}
.career-hero__img-wrapper img {
    width: 100%;
    height: auto;
    display: block;
}

.benefits-section {
    padding: 6rem 0;
    background: var(--color-white);
}
.benefits-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3rem;
    margin-top: 4rem;
}
.benefit-card {
    text-align: left;
}
.benefit-card__icon {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-md);
    background: var(--color-terracotta-faint);
    color: var(--color-terracotta);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
}
.benefit-card__title {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
}
.benefit-card__desc {
    color: var(--color-charcoal-60);
    line-height: 1.6;
}

.timeline-section {
    padding: 6rem 0;
    background: var(--color-cream);
}
.timeline {
    max-width: 600px;
    margin: 4rem auto 0;
    position: relative;
}
.timeline::before {
    content: '';
    position: absolute;
    left: 24px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--color-charcoal-10);
}
.timeline-item {
    position: relative;
    padding-left: 5rem;
    margin-bottom: 3rem;
}
.timeline-item:last-child {
    margin-bottom: 0;
}
.timeline-item__marker {
    position: absolute;
    left: 0;
    top: 0;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--color-white);
    border: 2px solid var(--color-terracotta);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: var(--color-terracotta);
    z-index: 2;
}
.timeline-item__title {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    padding-top: 0.5rem;
}

@media (max-width: 992px) {
    .career-hero__grid { grid-template-columns: 1fr; }
    .benefits-grid { grid-template-columns: 1fr; gap: 2rem; }
}
/* ─── Styles from cooking-challenge.php ─── */

.challenge-hero {
    background: var(--color-charcoal);
    padding: 8rem 0 6rem;
    position: relative;
    overflow: hidden;
    text-align: center;
}
.challenge-hero__bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 80% 20%, rgba(229,167,42,0.15) 0%, transparent 50%),
        radial-gradient(circle at 20% 80%, rgba(217,93,57,0.15) 0%, transparent 50%);
}
.challenge-hero__content {
    position: relative;
    z-index: 1;
    max-width: 800px;
    margin: 0 auto;
}
.challenge-hero__badge {
    display: inline-block;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-full);
    background: rgba(229,167,42,0.1);
    color: var(--color-gold);
    font-weight: 700;
    font-size: 0.875rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
    border: 1px solid rgba(229,167,42,0.2);
}
.challenge-hero__title {
    font-family: var(--font-heading);
    font-size: 4.5rem;
    color: var(--color-white);
    line-height: 1.1;
    margin-bottom: 1.5rem;
}
.challenge-hero__desc {
    font-size: 1.25rem;
    color: rgba(255,255,255,0.8);
    line-height: 1.6;
    margin-bottom: 3rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.event-details {
    background: var(--color-white);
    padding: 4rem 0;
    border-bottom: 1px solid var(--color-charcoal-10);
}
.details-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    text-align: center;
}
.detail-item__title {
    font-size: 0.875rem;
    color: var(--color-charcoal-60);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
}
.detail-item__value {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    color: var(--color-charcoal);
    font-weight: 700;
}

.judges-section {
    padding: 6rem 0;
    background: var(--color-cream);
}
.judges-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-top: 3rem;
}
.judge-card {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    text-align: center;
    border: 1px solid var(--color-charcoal-10);
}
.judge-card__img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
}
.judge-card__info {
    padding: 1.5rem;
}
.judge-card__name {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
}
.judge-card__role {
    font-size: 0.875rem;
    color: var(--color-terracotta);
    font-weight: 600;
}

@media (max-width: 768px) {
    .challenge-hero__title { font-size: 3rem; }
    .details-grid { grid-template-columns: repeat(2, 1fr); gap: 3rem 1rem; }
    .judges-grid { grid-template-columns: 1fr; }
    .challenge-countdown { gap: 0.5rem; margin: 1.5rem auto 2.5rem; }
    .countdown-unit { min-width: 65px; padding: 0.75rem 0.5rem; }
    .countdown-number { font-size: 1.6rem; }
    .countdown-label { font-size: 0.65rem; }
    .challenge-rules-grid { grid-template-columns: 1fr; gap: 2rem; }
    .challenge-apply-wrapper { padding: 1.5rem 1.25rem; }
    .challenge-form-grid { grid-template-columns: 1fr; }
    .challenge-form-col-2 { grid-column: span 1; }
}

/* ─── Challenge Countdown Timer ─── */
.challenge-countdown {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    margin: 2.25rem auto 2.5rem;
    max-width: 520px;
}
.countdown-unit {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(229, 167, 42, 0.35);
    border-radius: var(--radius-md);
    padding: 1rem 0.75rem;
    min-width: 82px;
    text-align: center;
    backdrop-filter: blur(8px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}
.countdown-number {
    display: block;
    font-family: var(--font-heading);
    font-size: 2.25rem;
    font-weight: 700;
    color: var(--color-gold);
    line-height: 1;
    margin-bottom: 0.35rem;
}
.countdown-label {
    display: block;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.75);
    font-weight: 600;
}

/* ─── Challenge Rules & Guidelines ─── */
.challenge-rules-section {
    padding: 3.5rem 0;
    background: var(--color-white);
}
.challenge-rules-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: stretch;
    margin-top: 2rem;
}
.challenge-rules-card {
    background: var(--color-cream);
    border-radius: var(--radius-lg);
    padding: 1.75rem 2rem;
    border: 1px solid var(--color-charcoal-10);
}
.challenge-rules-card h3 {
    font-family: var(--font-heading);
    font-size: 1.35rem;
    margin-bottom: 1rem;
    color: var(--color-charcoal);
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.challenge-rule-item {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.challenge-rule-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}
.challenge-rule-number {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--color-gold);
    color: var(--color-charcoal);
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.8rem;
}
.challenge-rule-text h5 {
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 0.15rem;
    color: var(--color-charcoal);
}
.challenge-rule-text p {
    font-size: 0.9rem;
    color: var(--color-charcoal);
    line-height: 1.45;
    margin: 0;
}
.challenge-prizes-card {
    background: linear-gradient(135deg, #1c1917 0%, #292524 100%);
    color: var(--color-white);
    border-radius: var(--radius-lg);
    padding: 1.75rem 2rem;
    border: 1px solid rgba(229, 167, 42, 0.3);
    box-shadow: var(--shadow-md);
    position: relative;
    overflow: hidden;
}
.challenge-prizes-card::before {
    content: '';
    position: absolute;
    top: -50px;
    right: -50px;
    width: 150px;
    height: 150px;
    background: radial-gradient(circle, rgba(229,167,42,0.2) 0%, transparent 70%);
    pointer-events: none;
}
.challenge-prizes-badge {
    display: inline-block;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
    color: var(--color-gold);
    margin-bottom: 0.35rem;
}
.challenge-prizes-total {
    font-family: var(--font-heading);
    font-size: 1.75rem;
    color: var(--color-gold);
    line-height: 1.1;
    margin-bottom: 1rem;
}
.prize-tier {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.prize-tier:last-child {
    border-bottom: none;
}
.prize-tier-badge {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9rem;
    flex-shrink: 0;
}
.prize-tier-1 { background: rgba(229, 167, 42, 0.2); color: var(--color-gold); border: 1px solid rgba(229, 167, 42, 0.4); }
.prize-tier-2 { background: rgba(255, 255, 255, 0.15); color: #e2e8f0; border: 1px solid rgba(255, 255, 255, 0.25); }
.prize-tier-3 { background: rgba(217, 93, 57, 0.2); color: #f97316; border: 1px solid rgba(217, 93, 57, 0.4); }
.prize-tier-info h6 {
    font-size: 0.92rem;
    font-weight: 700;
    margin-bottom: 0.1rem;
    color: var(--color-white);
}
.prize-tier-info p {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
}

/* ─── Challenge Application Form ─── */
.challenge-apply-section {
    padding: 6rem 0;
    background: var(--color-cream);
    border-top: 1px solid var(--color-charcoal-10);
}
.challenge-apply-wrapper {
    max-width: 760px;
    margin: 0 auto;
    background: var(--color-white);
    padding: 3rem;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--color-charcoal-10);
}
.challenge-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}
.challenge-form-col-2 {
    grid-column: span 2;
}
.challenge-file-box {
    border: 2px dashed var(--color-charcoal-20);
    border-radius: var(--radius-lg);
    padding: 2rem 1.5rem;
    text-align: center;
    background: #fafafa;
    cursor: pointer;
    transition: border-color var(--transition-base), background var(--transition-base);
    position: relative;
}
.challenge-file-box:hover, .challenge-file-box.dragover {
    border-color: var(--color-gold);
    background: rgba(229, 167, 42, 0.05);
}
.challenge-file-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}
.challenge-file-icon {
    width: 44px;
    height: 44px;
    margin: 0 auto 0.75rem;
    color: var(--color-terracotta);
    display: flex;
    align-items: center;
    justify-content: center;
}
.challenge-file-label {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--color-charcoal);
    margin-bottom: 0.25rem;
}
.challenge-file-hint {
    font-size: 0.8rem;
    color: var(--color-charcoal-60);
}
.challenge-file-chosen {
    margin-top: 0.75rem;
    font-size: 0.85rem;
    color: var(--color-green);
    font-weight: 600;
    display: none;
}
.challenge-applied-banner {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    padding: 3rem 2rem;
    text-align: center;
    border: 1px solid var(--color-charcoal-10);
    box-shadow: var(--shadow-sm);
    max-width: 760px;
    margin: 0 auto;
}
.challenge-applied-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--color-green-faint);
    color: var(--color-green);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
}
.challenge-other-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}
.challenge-mini-card {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    border: 1px solid var(--color-charcoal-10);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.btn--xs {
    padding: 0.25rem 0.5rem;
    font-size: var(--text-xs);
    border-radius: var(--radius-sm);
}
.modal-content--lg {
    max-width: 820px;
    max-height: 90vh;
    overflow-y: auto;
}
.admin-badge-draft {
    background: #e2e8f0;
    color: #475569;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: var(--text-xs);
    font-weight: 600;
}
.admin-judge-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: var(--color-charcoal-10);
    border-radius: 12px;
    padding: 2px 8px;
    font-size: 0.75rem;
    margin: 2px;
}
.admin-judge-chip-remove {
    color: var(--color-terracotta);
    cursor: pointer;
    font-weight: bold;
    background: none;
    border: none;
    padding: 0 2px;
    font-size: 1rem;
    line-height: 1;
}
.form-input--xs {
    padding: 0.2rem 0.5rem;
    font-size: var(--text-xs);
    height: auto;
    border-radius: var(--radius-sm);
    display: inline-block;
    width: auto;
}
/* ─── Styles from gallery.php ─── */

.gallery-hero {
    background: var(--color-white);
    padding: 6rem 0 3rem;
    text-align: center;
    border-bottom: 1px solid var(--color-charcoal-10);
}
.gallery-hero__title {
    font-family: var(--font-heading);
    font-size: 3.5rem;
    color: var(--color-charcoal);
    margin-bottom: 1rem;
}
.gallery-hero__desc {
    color: var(--color-charcoal-60);
    font-size: 1.125rem;
    max-width: 600px;
    margin: 0 auto;
}

.gallery-section {
    padding: 5rem 0;
}

/* Masonry Layout */
.masonry-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    grid-auto-rows: 200px;
    gap: 1.5rem;
    grid-auto-flow: dense;
}

.masonry-item {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--color-charcoal-10);
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition-base), transform var(--transition-base);
}
.masonry-item:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
}
.masonry-item.tall {
    grid-row: span 2;
}
.masonry-item.short {
    grid-row: span 1;
}
.masonry-item.square {
    grid-row: span 2;
    aspect-ratio: 1; /* Approximate based on row height */
}

.masonry-item__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}
.masonry-item:hover .masonry-item__img {
    transform: scale(1.05);
}

.masonry-item__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(23,23,23,0.8) 0%, transparent 60%);
    opacity: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 1.5rem;
    transition: opacity var(--transition-base);
}
.masonry-item:hover .masonry-item__overlay {
    opacity: 1;
}

.masonry-item__title {
    color: var(--color-white);
    font-size: 1.125rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
}
.masonry-item__chef {
    color: var(--color-gold);
    font-size: 0.875rem;
    font-weight: 600;
}
/* ─── Styles from about.php ─── */

.about-hero {
    background: var(--color-cream);
    padding: 8rem 0 4rem;
    text-align: center;
}
.about-hero__title {
    font-family: var(--font-heading);
    font-size: 4rem;
    color: var(--color-charcoal);
    margin-bottom: 1.5rem;
}
.about-hero__subtitle {
    font-size: 1.25rem;
    color: var(--color-terracotta);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 1rem;
}

.story-section {
    padding: 6rem 0;
    background: var(--color-white);
}
.story-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
    align-items: center;
}
.story-content h2 {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    color: var(--color-charcoal);
    margin-bottom: 1.5rem;
}
.story-content p {
    font-size: 1.0625rem;
    color: var(--color-charcoal-60);
    line-height: 1.8;
    margin-bottom: 1.5rem;
}
.story-img-wrapper {
    position: relative;
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-xl);
}
.story-img-wrapper img {
    width: 100%;
    height: auto;
    display: block;
}

.values-section {
    padding: 6rem 0;
    background: var(--color-terracotta);
    color: var(--color-white);
}
.values-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4rem;
    margin-top: 4rem;
}
.value-card {
    text-align: center;
}
.value-card__icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 1.5rem;
    border-radius: 50%;
    background: rgba(217,93,57,0.15);
    color: var(--color-terracotta);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
}
.value-card__title {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 1rem;
}
.value-card__desc {
    color: rgba(255,255,255,0.7);
    line-height: 1.7;
}

@media (max-width: 992px) {
    .story-grid { grid-template-columns: 1fr; gap: 3rem; }
    .story-img-wrapper { order: -1; }
    .values-grid { grid-template-columns: 1fr; gap: 3rem; }
}
/* ─── Styles from contact.php ─── */

.contact-hero {
    padding: 6rem 0 3rem;
    text-align: center;
}
.contact-hero__title {
    font-family: var(--font-heading);
    font-size: 3.5rem;
    color: var(--color-charcoal);
    margin-bottom: 1rem;
}
.contact-hero__desc {
    color: var(--color-charcoal-60);
    font-size: 1.125rem;
    max-width: 600px;
    margin: 0 auto;
}

.contact-section {
    padding: 3rem 0 6rem;
}
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
}

.contact-info__item {
    display: flex;
    gap: 1rem;
    margin-bottom: 2rem;
}
.contact-info__icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--color-terracotta-faint);
    color: var(--color-terracotta);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}
.contact-info__title {
    font-weight: 700;
    font-size: 1.125rem;
    margin-bottom: 0.25rem;
}
.contact-info__text {
    color: var(--color-charcoal-60);
    line-height: 1.6;
}
.contact-info__text a {
    color: var(--color-terracotta);
    text-decoration: none;
    font-weight: 600;
}

.faq-section {
    margin-top: 4rem;
}
.faq-section h3 {
    font-family: var(--font-heading);
    font-size: 2rem;
    margin-bottom: 1.5rem;
}
.faq-item {
    border-bottom: 1px solid var(--color-charcoal-10);
    padding: 1.5rem 0;
}
.faq-item__q {
    font-weight: 700;
    font-size: 1.0625rem;
    margin-bottom: 0.75rem;
    color: var(--color-charcoal);
}
.faq-item__a {
    color: var(--color-charcoal-60);
    line-height: 1.7;
    font-size: 0.9375rem;
}

/* Contact Form */
.contact-form-wrapper {
    background: var(--color-white);
    padding: 3rem;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--color-charcoal-10);
}
.form-group {
    margin-bottom: 1.5rem;
}
.form-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--color-charcoal);
}
.form-control {
    width: 100%;
    padding: 1rem;
    border: 1px solid var(--color-charcoal-20);
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--color-charcoal);
    background: var(--color-white);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.form-control:focus {
    outline: none;
    border-color: var(--color-terracotta);
    box-shadow: 0 0 0 3px var(--color-terracotta-faint);
}
textarea.form-control {
    resize: vertical;
    min-height: 150px;
}

@media (max-width: 992px) {
    .contact-grid { grid-template-columns: 1fr; gap: 4rem; }
    .contact-form-wrapper { padding: 2rem; }
}

/* ═══════════════════════════════════════════════════════════
   MAINTENANCE PAGE — Clean, Spacious Culinary Showcase
═══════════════════════════════════════════════════════════ */

.maintenance-body {
  min-height: 100vh;
  min-height: 100dvh;
  background-color: var(--color-cream);
  background-image:
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(217, 93, 57, 0.08) 0%, transparent 80%),
    radial-gradient(circle 600px at 100% 100%, rgba(229, 167, 42, 0.06) 0%, transparent 70%);
  background-repeat: no-repeat;
  background-attachment: fixed;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: var(--color-charcoal);
  font-family: var(--font-body);
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  position: relative;
}

/* ─── Main Content Center Stage ─── */
.maintenance-main {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 1.5rem;
  position: relative;
  z-index: 10;
}

.maintenance-container {
  width: 100%;
  max-width: 580px;
  margin: 0 auto;
}

/* ─── Elevated Content Card ─── */
.maintenance-card {
  background-color: var(--color-white);
  border: 1px solid rgba(23, 23, 23, 0.06);
  border-radius: var(--radius-xl);
  padding: 3.5rem 3rem;
  text-align: center;
  box-shadow:
    0 24px 64px -16px rgba(23, 23, 23, 0.08),
    0 2px 8px rgba(23, 23, 23, 0.03);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.maintenance-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--color-gold) 0%, var(--color-terracotta) 50%, var(--color-gold) 100%);
}

/* ─── Brand Identity ─── */
.maintenance-brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  text-decoration: none;
  margin-bottom: 1.75rem;
  transition: transform var(--transition-fast), opacity var(--transition-fast);
}

.maintenance-brand:hover {
  transform: translateY(-1px);
  opacity: 0.92;
}

.maintenance-brand__logo {
  height: 48px;
  width: 48px;
  object-fit: contain;
  filter: drop-shadow(0 4px 8px rgba(217, 93, 57, 0.12));
}

.maintenance-brand__name {
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-charcoal);
  letter-spacing: -0.01em;
  line-height: 1;
}

.maintenance-brand__name span {
  color: var(--color-terracotta);
}

/* ─── Sleek Status Badge ─── */
.maintenance-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.95rem;
  background-color: var(--color-terracotta-faint);
  color: var(--color-terracotta);
  border: 1px solid rgba(217, 93, 57, 0.18);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 1.75rem;
}

.maintenance-badge__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: var(--color-terracotta);
  position: relative;
  display: inline-block;
  flex-shrink: 0;
}

.maintenance-badge__dot::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background-color: var(--color-terracotta);
  opacity: 0.45;
  animation: pulse-ring 2s cubic-bezier(0.24, 0, 0.38, 1) infinite;
}

@keyframes pulse-ring {
  0% { transform: scale(0.9); opacity: 0.8; }
  70% { transform: scale(2.2); opacity: 0; }
  100% { transform: scale(2.2); opacity: 0; }
}

/* ─── Typography ─── */
.maintenance-title {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 5vw, 2.75rem);
  font-weight: 700;
  color: var(--color-charcoal);
  line-height: 1.15;
  margin: 0 0 1rem;
  letter-spacing: -0.015em;
}

.maintenance-desc {
  color: var(--color-charcoal-60);
  font-size: clamp(0.9375rem, 2.2vw, 1.0625rem);
  line-height: 1.7;
  max-width: 460px;
  margin: 0 0 2.25rem;
}

/* ─── Action Button ─── */
.maintenance-actions {
  display: flex;
  justify-content: center;
  width: 100%;
  margin: 0;
}

.maintenance-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  padding: 0.95rem 2.5rem;
  font-size: var(--text-base);
  font-weight: 600;
  border-radius: var(--radius-md);
  box-shadow: 0 4px 18px rgba(217, 93, 57, 0.28);
  transition: all var(--transition-fast);
  text-decoration: none;
  letter-spacing: 0.01em;
}

.maintenance-btn svg,
.maintenance-btn i {
  width: 18px;
  height: 18px;
}

.maintenance-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(217, 93, 57, 0.36);
}

/* ─── Footer ─── */
.maintenance-footer {
  padding: 1.5rem 1rem max(1.5rem, env(safe-area-inset-bottom, 1.5rem));
  text-align: center;
  font-size: 0.8125rem;
  color: var(--color-charcoal-60);
  position: relative;
  z-index: 10;
}

.maintenance-footer__inner {
  max-width: var(--container-max);
  margin: 0 auto;
}

.maintenance-footer p {
  margin: 0;
}

/* ─── Developer Bypass Trigger ─── */
.dev-login-trigger {
  position: fixed;
  bottom: max(1.25rem, env(safe-area-inset-bottom, 1.25rem));
  right: 1.25rem;
  width: 44px;
  height: 44px;
  background: var(--color-white);
  color: var(--color-charcoal-60);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: 1px solid var(--color-charcoal-20);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-base);
  z-index: 99;
}

.dev-login-trigger svg,
.dev-login-trigger i {
  width: 18px;
  height: 18px;
}

.dev-login-trigger:hover,
.dev-login-trigger:focus-visible {
  background: var(--color-charcoal);
  color: var(--color-gold);
  border-color: var(--color-charcoal);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  outline: none;
}

/* ─── Developer Bypass Modal ─── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(23, 23, 23, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-base), visibility var(--transition-base);
  z-index: 1000;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-sizing: border-box;
}

.modal-overlay.active,
.modal-overlay.is-open {
  display: flex;
  opacity: 1;
  visibility: visible;
}

.modal-content {
  background: var(--color-white);
  padding: 2.5rem 2rem 2.25rem;
  border-radius: var(--radius-xl);
  width: 100%;
  max-width: 420px;
  transform: scale(0.96) translateY(12px);
  transition: transform var(--transition-base), opacity var(--transition-base);
  position: relative;
  box-shadow: var(--shadow-xl);
  border: 1px solid rgba(23, 23, 23, 0.08);
  box-sizing: border-box;
}

.modal-overlay.active .modal-content,
.modal-overlay.is-open .modal-content {
  transform: scale(1) translateY(0);
}

.modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(23, 23, 23, 0.04);
  border: none;
  color: var(--color-charcoal-60);
  font-size: 1.35rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.modal-close:hover,
.modal-close:focus-visible {
  background: var(--color-terracotta-faint);
  color: var(--color-terracotta);
  outline: none;
}

.dev-modal-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background-color: var(--color-terracotta-faint);
  color: var(--color-terracotta);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.25rem;
  border: 1px solid rgba(217, 93, 57, 0.15);
}

.dev-modal-icon svg,
.dev-modal-icon i {
  width: 24px;
  height: 24px;
}

.modal-title {
  font-family: var(--font-heading);
  font-size: 1.85rem;
  font-weight: 700;
  margin-bottom: 0.35rem;
  color: var(--color-charcoal);
  line-height: 1.2;
}

.modal-desc {
  color: var(--color-charcoal-60);
  margin-bottom: 1.5rem;
  font-size: 0.875rem;
  line-height: 1.5;
}

.dev-modal-form .form-group {
  margin-bottom: 1.25rem;
  text-align: left;
}

.dev-modal-form .form-input {
  width: 100%;
  padding: 0.85rem 1.1rem;
  border: 1.5px solid var(--color-charcoal-20);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: 1rem; /* 16px prevents iOS zoom */
  color: var(--color-charcoal);
  background: var(--color-white);
  outline: none;
  box-sizing: border-box;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.dev-modal-form .form-input:focus {
  border-color: var(--color-terracotta);
  box-shadow: 0 0 0 3px rgba(217, 93, 57, 0.15);
}

.dev-modal-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1.5rem;
  font-size: 0.9375rem;
  font-weight: 600;
  border-radius: var(--radius-md);
}

.dev-modal-submit svg,
.dev-modal-submit i {
  width: 16px;
  height: 16px;
}

.dev-modal-form .error-text {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--color-terracotta);
  font-size: 0.8125rem;
  font-weight: 500;
  margin-top: 0.5rem;
}

.dev-modal-form .error-text svg,
.dev-modal-form .error-text i {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE DESIGN — Specific Mobile Tuning (360px - 430px)
═══════════════════════════════════════════════════════════ */

@media (max-width: 640px) {
  .maintenance-main {
    padding: 2rem 1.25rem;
  }

  .maintenance-card {
    padding: 2.5rem 1.5rem 2.25rem;
    border-radius: var(--radius-lg);
  }

  .maintenance-brand {
    gap: 0.65rem;
    margin-bottom: 1.35rem;
  }

  .maintenance-brand__logo {
    height: 42px;
    width: 42px;
  }

  .maintenance-brand__name {
    font-size: 1.75rem;
  }

  .maintenance-badge {
    margin-bottom: 1.35rem;
    font-size: 0.6875rem;
    padding: 0.35rem 0.8rem;
  }

  .maintenance-title {
    font-size: clamp(1.75rem, 6.5vw, 2.25rem);
    margin-bottom: 0.85rem;
  }

  .maintenance-desc {
    font-size: 0.875rem;
    line-height: 1.65;
    margin-bottom: 2rem;
  }

  .maintenance-btn {
    width: 100%;
    padding: 0.875rem 1.5rem;
    font-size: 0.9375rem;
  }

  .dev-login-trigger {
    bottom: max(1rem, env(safe-area-inset-bottom, 1rem));
    right: 1rem;
    width: 40px;
    height: 40px;
  }

  .modal-content {
    padding: 2rem 1.25rem 1.75rem;
    border-radius: var(--radius-lg);
  }

  .modal-title {
    font-size: 1.55rem;
  }

  .modal-desc {
    font-size: 0.8125rem;
    margin-bottom: 1.25rem;
  }
}

/* Micro screen optimizations (<= 375px like iPhone SE, Galaxy S) */
@media (max-width: 375px) {
  .maintenance-main {
    padding: 1.5rem 0.875rem;
  }

  .maintenance-card {
    padding: 2rem 1.15rem 1.75rem;
  }

  .maintenance-brand__logo {
    height: 38px;
    width: 38px;
  }

  .maintenance-brand__name {
    font-size: 1.55rem;
  }

  .maintenance-title {
    font-size: 1.6rem;
  }

  .maintenance-desc {
    font-size: 0.8125rem;
  }
}

/* ═══════════════════════════════════════════════════════════
   AUTHENTICATION HUB — Premium Split-Panel Design (auth.php)
═══════════════════════════════════════════════════════════ */

/* ─── Body Override ─── */
.auth-body {
  background-color: var(--color-charcoal);
  min-height: 100vh;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

/* ─── Split Layout ─── */
.auth-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
}

/* ─── LEFT PANEL ─── */
.auth-panel--left {
  position: relative;
  overflow: hidden;
  background-color: var(--color-charcoal);
  display: flex;
  flex-direction: column;
}

.auth-panel__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  opacity: 0.55;
  transition: opacity 1s ease;
  display: block;
}

.auth-panel__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    160deg,
    rgba(23, 23, 23, 0.72) 0%,
    rgba(23, 23, 23, 0.35) 40%,
    rgba(217, 93, 57, 0.18) 100%
  );
}

.auth-panel__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  padding: 2.5rem;
  min-height: 100vh;
}

/* Brand Logo */
.auth-panel__logo {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
}

.auth-panel__logo img {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}

.auth-panel__logo-text {
  font-family: var(--font-heading);
  font-size: 1.75rem;
  font-weight: 700;
  color: #ffffff;
  line-height: 1;
}

.auth-panel__logo-text span {
  color: var(--color-terracotta);
}

/* Center Content */
.auth-panel__center {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2rem 0;
}

.auth-panel__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(217, 93, 57, 0.2);
  border: 1px solid rgba(217, 93, 57, 0.4);
  color: #f0a090;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.4rem 0.9rem;
  border-radius: 100px;
  margin-bottom: 1.5rem;
  width: fit-content;
}

.auth-panel__badge i {
  width: 14px;
  height: 14px;
}

.auth-panel__headline {
  font-family: var(--font-heading);
  font-size: clamp(3rem, 5vw, 4.5rem);
  font-weight: 700;
  color: #ffffff;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-bottom: 1.25rem;
}

.auth-panel__sub {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.65);
  max-width: 340px;
  line-height: 1.7;
  margin: 0;
}

/* Stats Row */
.auth-panel__stats {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 1.25rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  margin-bottom: 1.5rem;
}

.auth-panel__stat {
  flex: 1;
  text-align: center;
}

.auth-panel__stat-value {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--color-terracotta);
  line-height: 1;
  margin-bottom: 0.25rem;
}

.auth-panel__stat-label {
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.auth-panel__stat-divider {
  width: 1px;
  height: 40px;
  background: rgba(255, 255, 255, 0.12);
}

/* Quote */
.auth-panel__quote {
  padding: 0;
  margin: 0;
}

.auth-panel__quote p {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.6;
  margin-bottom: 0.5rem;
}

.auth-panel__quote cite {
  font-size: 0.75rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.45);
  letter-spacing: 0.04em;
  font-style: normal;
}


/* ─── RIGHT PANEL ─── */
.auth-panel--right {
  background-color: var(--color-cream);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow-y: auto;
  position: relative;
}


/* Top Bar */
.auth-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem 2.5rem 1rem;
  flex-shrink: 0;
}

.auth-topbar__back {
  position: absolute;
  top: 1.5rem;
  left: 1.5rem;
  z-index: 50;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background-color: var(--color-white);
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  color: var(--color-charcoal);
  text-decoration: none;
  transition: all var(--transition-fast);
}

.auth-topbar__back span {
  display: none;
}

.auth-topbar__back:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.12);
  color: var(--color-terracotta);
}

.auth-topbar__back i {
  width: 20px;
  height: 20px;
}

.auth-topbar__brand--mobile {
  display: none;
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-charcoal);
}

.auth-topbar__brand--mobile span {
  color: var(--color-terracotta);
}

.auth-topbar__spacer {
  width: 80px;
}

/* Scrollable Form Area */
.auth-form-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1rem 2.5rem 2rem;
  max-width: 440px;
  margin: 0 auto;
  width: 100%;
}

/* ─── Tabs ─── */
.auth-tabs {
  margin-bottom: 2rem;
}

.auth-tabs__track {
  display: flex;
  align-items: center;
  background-color: var(--color-cream-dark);
  border-radius: var(--radius-md);
  padding: 4px;
  position: relative;
  border: 1px solid var(--color-charcoal-10);
}

.auth-tabs__pill {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  background-color: var(--color-white);
  border-radius: calc(var(--radius-md) - 2px);
  box-shadow: var(--shadow-xs);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  width: calc(33.333% - 3px);
  z-index: 0;
}

.auth-tab-btn {
  flex: 1;
  padding: 0.5rem 0.75rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-charcoal-60);
  background: transparent;
  border: none;
  border-radius: calc(var(--radius-md) - 4px);
  cursor: pointer;
  transition: color var(--transition-fast);
  position: relative;
  z-index: 1;
}

.auth-tab-btn.active {
  color: var(--color-charcoal);
}

/* ─── Alert ─── */
.auth-alert {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  border-radius: var(--radius-md);
  margin-bottom: 1.25rem;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.5;
  animation: authFadeIn 0.3s ease forwards;
}

.auth-alert i {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 1px;
}

.auth-alert--success {
  background-color: var(--color-green-faint);
  color: var(--color-green);
  border: 1px solid rgba(49, 92, 69, 0.25);
}

.auth-alert--error {
  background-color: var(--color-terracotta-faint);
  color: var(--color-terracotta-dark);
  border: 1px solid rgba(217, 93, 57, 0.25);
}

/* ─── Role Chips ─── */
.auth-role-strip {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.75rem;
}

.auth-role-chip {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.5rem 0.625rem;
  font-family: var(--font-body);
  font-size: 0.775rem;
  font-weight: 700;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--color-charcoal-10);
  background-color: var(--color-white);
  color: var(--color-charcoal-60);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.auth-role-chip i {
  width: 15px;
  height: 15px;
}

.auth-role-chip:hover {
  border-color: var(--color-terracotta-light);
  color: var(--color-charcoal);
  transform: translateY(-1px);
}

.auth-role-chip.active {
  background-color: var(--color-charcoal);
  border-color: var(--color-charcoal);
  color: var(--color-white);
  box-shadow: 0 4px 12px rgba(23, 23, 23, 0.18);
}

.auth-role-chip--hidden {
  display: none !important;
}

/* ─── Google Role Onboarding View ─── */
.auth-role-welcome {
  text-align: center;
  margin-bottom: 1.5rem;
}

.auth-avatar-preview {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--color-charcoal-05);
  border: 2px solid var(--color-white);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
  margin: 0 auto 0.75rem auto;
  overflow: hidden;
}

.auth-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.auth-role-welcome__title {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-charcoal);
  margin-bottom: 0.25rem;
}

.auth-role-welcome__subtitle {
  font-size: 0.875rem;
  color: var(--color-charcoal-60);
  margin: 0;
  line-height: 1.5;
}

.auth-role-cards {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.auth-role-card {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem 1.125rem;
  border-radius: var(--radius-lg);
  border: 2px solid var(--color-charcoal-10);
  background-color: var(--color-white);
  cursor: pointer;
  transition: all var(--transition-fast);
  text-align: left;
  user-select: none;
}

.auth-role-card:hover {
  border-color: var(--color-terracotta-light);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.05);
}

.auth-role-card.active {
  border-color: var(--color-terracotta);
  background-color: rgba(217, 93, 57, 0.03);
  box-shadow: 0 6px 20px rgba(217, 93, 57, 0.12);
}

.auth-role-card__icon {
  width: 42px;
  height: 42px;
  border-radius: var(--radius-md);
  background-color: var(--color-cream);
  color: var(--color-charcoal);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all var(--transition-fast);
}

.auth-role-card.active .auth-role-card__icon {
  background-color: var(--color-terracotta);
  color: var(--color-white);
}

.auth-role-card__icon i {
  width: 22px;
  height: 22px;
}

.auth-role-card__body {
  flex: 1;
}

.auth-role-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.25rem;
}

.auth-role-card__title {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-charcoal);
  margin: 0;
}

.auth-role-card__check {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1.5px solid var(--color-charcoal-20);
  display: flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  transition: all var(--transition-fast);
}

.auth-role-card__check i {
  width: 13px;
  height: 13px;
}

.auth-role-card.active .auth-role-card__check {
  background-color: var(--color-terracotta);
  border-color: var(--color-terracotta);
  color: var(--color-white);
}

.auth-role-card__desc {
  font-size: 0.8125rem;
  color: var(--color-charcoal-60);
  margin: 0;
  line-height: 1.45;
}

.auth-tabs--hidden {
  display: none !important;
}

.auth-modal-error {
  color: var(--color-terracotta);
  margin-top: 15px;
  text-align: center;
  font-size: 0.875rem;
}

/* ─── View Headers ─── */
.auth-view {
  display: none;
}

.auth-view.active {
  display: block;
  animation: authFadeIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

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

.auth-view__header {
  margin-bottom: 1.75rem;
}

.auth-view__title {
  font-family: var(--font-heading);
  font-size: 2.25rem;
  font-weight: 700;
  color: var(--color-charcoal);
  line-height: 1.1;
  margin-bottom: 0.4rem;
}

.auth-view__subtitle {
  font-size: 0.9rem;
  color: var(--color-charcoal-60);
  line-height: 1.6;
  margin: 0;
}

.auth-view__subtitle .auth-role-label-dynamic {
  color: var(--color-terracotta);
  font-weight: 600;
}

.auth-reset-icon {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-lg);
  background: var(--color-terracotta-faint);
  color: var(--color-terracotta);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}

.auth-reset-icon i {
  width: 24px;
  height: 24px;
}

/* ─── Floating Label Fields ─── */
.auth-form {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.auth-field {
  position: relative;
}

.auth-input {
  width: 100%;
  padding: 1.5rem 1rem 0.5rem 2.75rem;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: var(--color-charcoal);
  background-color: var(--color-white);
  border: 1.5px solid var(--color-charcoal-10);
  border-radius: var(--radius-md);
  outline: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  appearance: none;
  -webkit-appearance: none;
  line-height: 1.4;
}

.auth-input:focus {
  border-color: var(--color-terracotta);
  box-shadow: 0 0 0 3px rgba(217, 93, 57, 0.1);
}

.auth-input:focus + .auth-field__label,
.auth-input:not(:placeholder-shown) + .auth-field__label {
  transform: translateY(-1.0rem) scale(0.76);
  color: var(--color-terracotta);
}

/* Floating Label */
.auth-field__label {
  position: absolute;
  top: 50%;
  left: 2.75rem;
  transform: translateY(-50%);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-charcoal-60);
  pointer-events: none;
  transform-origin: left center;
  transition: transform 0.18s ease, color 0.18s ease;
  white-space: nowrap;
}

.auth-field__label--up {
  transform: translateY(-1.0rem) scale(0.76);
  color: var(--color-terracotta);
  top: 50%;
}

/* Left Icon */
.auth-field__icon {
  position: absolute;
  left: 0.875rem;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: var(--color-charcoal-20);
  pointer-events: none;
  transition: color var(--transition-fast);
}

.auth-field:focus-within .auth-field__icon {
  color: var(--color-terracotta);
}

/* Eye Toggle */
.auth-field__eye {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--color-charcoal-20);
  cursor: pointer;
  padding: 0.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color var(--transition-fast);
}

.auth-field__eye:hover {
  color: var(--color-terracotta);
}

.auth-field__eye i {
  width: 18px;
  height: 18px;
}

/* Select override for floating label */
.auth-select {
  padding-top: 1.1rem;
  padding-bottom: 0.45rem;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='%234a4a4a' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.875rem center;
  padding-right: 2.5rem;
}

/* ─── Field Row (e.g. Email & Phone) ─── */
.auth-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

@media (max-width: 576px) {
  .auth-field-row {
    grid-template-columns: 1fr;
    gap: 0;
  }
}


/* ─── Form Meta Row (checkbox + forgot) ─── */
.auth-form-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: -0.25rem;
}

.auth-form-meta--right {
  justify-content: flex-end;
}

/* ─── Custom Checkbox ─── */
.auth-check {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  cursor: pointer;
}

.auth-check--terms {
  margin-top: -0.25rem;
}

.auth-check__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.auth-check__box {
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--color-charcoal-20);
  border-radius: 4px;
  flex-shrink: 0;
  background: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
}

.auth-check__input:checked + .auth-check__box {
  background-color: var(--color-charcoal);
  border-color: var(--color-charcoal);
}

.auth-check__input:checked + .auth-check__box::after {
  content: '';
  display: block;
  width: 5px;
  height: 9px;
  border: 2px solid white;
  border-top: none;
  border-left: none;
  transform: rotate(45deg) translate(-1px, -1px);
}

.auth-check__label {
  font-size: 0.8rem;
  color: var(--color-charcoal-60);
  line-height: 1.4;
}

/* ─── Auth Links ─── */
.auth-link {
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-body);
  color: var(--color-terracotta);
  font-weight: 600;
  font-size: inherit;
  cursor: pointer;
  text-decoration: none;
  transition: color var(--transition-fast);
}

.auth-link:hover {
  color: var(--color-terracotta-dark);
}

/* ─── Submit Button ─── */
.auth-submit-btn,
.btn-primary.auth-submit-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  width: 100%;
  height: 52.8px;
  padding: 0.9rem 1.5rem;
  background-color: var(--color-charcoal);
  color: var(--color-white);
  border: none;
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 700;
  cursor: pointer;
  transition: background-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
  margin-top: 0.375rem;
  margin-bottom: 0;
  box-sizing: border-box;
}

.auth-submit-btn i,
.btn-primary.auth-submit-btn i {
  width: 18px;
  height: 18px;
  transition: transform var(--transition-fast);
}

.auth-submit-btn:hover,
.btn-primary.auth-submit-btn:hover {
  background-color: var(--color-terracotta);
  box-shadow: 0 6px 20px rgba(217, 93, 57, 0.35);
  transform: translateY(-1px);
}

.auth-submit-btn:hover i,
.btn-primary.auth-submit-btn:hover i {
  transform: translateX(3px);
}

.auth-submit-btn:active,
.btn-primary.auth-submit-btn:active {
  transform: translateY(0);
}

.auth-submit-btn:disabled,
.btn-primary.auth-submit-btn:disabled {
  opacity: 0.65;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.auth-submit-btn:disabled i,
.btn-primary.auth-submit-btn:disabled i {
  transform: none;
}

/* ─── Divider ─── */
.auth-divider {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 1.25rem 0;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-charcoal-20);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--color-charcoal-10);
}

/* ─── Social Login ─── */
.auth-social-row {
  display: flex;
  width: 100%;
  margin: 0;
}

.auth-social-btn,
.auth-google-btn,
.btn-google,
.google-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  width: 100%;
  height: 52.8px;
  padding: 0.9rem 1.5rem;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-charcoal);
  background: var(--color-white);
  border: 1.5px solid var(--color-charcoal-10);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast), background-color var(--transition-fast);
  margin-top: 0.375rem;
  margin-bottom: 0;
  box-sizing: border-box;
}

.auth-social-btn:hover,
.auth-google-btn:hover,
.btn-google:hover,
.google-btn:hover {
  border-color: var(--color-charcoal-20);
  background-color: #fafafa;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  transform: translateY(-1px);
}

.auth-social-btn:active,
.auth-google-btn:active,
.btn-google:active,
.google-btn:active {
  transform: translateY(0);
}

.auth-social-btn svg,
.auth-google-btn svg,
.btn-google svg,
.google-btn svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.auth-social-btn--full {
  width: 100%;
}

.google-gis-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-bottom: 0.75rem;
}

.google-gis-container:empty {
  display: none;
}

.google-gis-container:not(:empty) + .auth-social-btn {
  display: none;
}

/* ─── Footer Text ─── */
.auth-view__footer-text {
  text-align: center;
  font-size: 0.875rem;
  color: var(--color-charcoal-60);
  margin-top: 1.25rem;
  margin-bottom: 0;
}

/* ─── Password Strength ─── */
.auth-strength {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: -0.5rem;
}

.auth-strength__bars {
  display: flex;
  gap: 4px;
  flex: 0 0 auto;
}

.auth-strength__bar {
  display: block;
  width: 36px;
  height: 4px;
  border-radius: 100px;
  background-color: var(--color-charcoal-10);
  transition: background-color 0.3s ease;
}

.auth-strength__bar.weak   { background-color: #e53e3e; }
.auth-strength__bar.fair   { background-color: var(--color-gold); }
.auth-strength__bar.good   { background-color: #48bb78; }
.auth-strength__bar.strong { background-color: var(--color-green); }

.auth-strength__label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-charcoal-60);
}

/* ─── Role-specific Fields ─── */
.role-field.hidden-field {
  display: none !important;
}

/* ─── Bottom Legal ─── */
.auth-legal {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  padding: 1.25rem 2.5rem;
  font-size: 0.75rem;
  color: var(--color-charcoal-20);
  border-top: 1px solid var(--color-charcoal-10);
  flex-shrink: 0;
  flex-wrap: wrap;
}

.auth-legal a {
  color: var(--color-charcoal-60);
  text-decoration: none;
  font-weight: 500;
  transition: color var(--transition-fast);
}

.auth-legal a:hover {
  color: var(--color-terracotta);
}

/* ─── Switch View Buttons ─── */
.auth-switch-view {
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-body);
  font-size: inherit;
  cursor: pointer;
  color: var(--color-terracotta);
  font-weight: 600;
  transition: color var(--transition-fast);
}

.auth-switch-view:hover {
  color: var(--color-terracotta-dark);
}

/* ─── Responsive: Mobile ─── */
@media (max-width: 900px) {
  .auth-split {
    grid-template-columns: 1fr;
  }

  .auth-panel--left {
    display: none;
  }

  .auth-topbar__brand--mobile {
    display: block;
  }

  .auth-topbar__spacer {
    display: none;
  }

  .auth-form-area {
    padding: 0.5rem 1.5rem 2rem;
  }

  .auth-topbar {
    padding: 1.25rem 1.5rem 0.75rem;
  }

  .auth-legal {
    padding: 1rem 1.5rem;
  }
}

@media (max-width: 480px) {
  .auth-form-area {
    padding: 0.5rem 1.25rem 2rem;
  }

  .auth-topbar {
    padding: 1rem 1.25rem 0.5rem;
  }

  .auth-role-chip {
    font-size: 0.7rem;
    padding: 0.45rem 0.5rem;
  }

  .auth-view__title {
    font-size: 1.875rem;
  }
}

/* ─── Carried-over shared helpers ─── */
.hidden-field {
  display: none !important;
}

.auth-body {
  background-color: var(--color-cream);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.auth-header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-6) var(--space-8);
  max-width: var(--container-max);
  margin: 0 auto;
  width: 100%;
}

.auth-header-bar__logo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
}

.auth-header-bar__logo-text {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--color-charcoal);
  line-height: 1;
}

.auth-header-bar__logo-text span {
  color: var(--color-terracotta);
}

.auth-header-bar__back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-charcoal-60);
  transition: color var(--transition-fast);
  text-decoration: none;
}

.auth-header-bar__back:hover {
  color: var(--color-terracotta);
}

.auth-section {
  padding: var(--space-8) 0 var(--space-16) 0;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-cream);
}

.auth-container {
  max-width: 520px;
  margin: 0 auto;
  width: 100%;
}

/* Sub-nav for Hash Tabs */
.auth-nav {
  display: flex;
  align-items: center;
  justify-content: space-around;
  background-color: var(--color-cream-dark);
  padding: var(--space-1);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-6);
  border: 1px solid var(--color-charcoal-10);
}

.auth-nav__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-charcoal-60);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
  text-decoration: none;
}

.auth-nav__link:hover {
  color: var(--color-charcoal);
}

.auth-nav__link.active {
  background-color: var(--color-white);
  color: var(--color-terracotta);
  box-shadow: var(--shadow-xs);
}

.auth-nav__link i {
  width: 16px;
  height: 16px;
}

/* Role Selector */
.auth-role-wrapper {
  background-color: var(--color-white);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  margin-bottom: var(--space-6);
  border: 1px solid var(--color-charcoal-10);
  box-shadow: var(--shadow-xs);
  text-align: center;
}

.auth-role-label {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-charcoal-60);
  margin-bottom: var(--space-3);
}

.auth-role-selector {
  display: flex;
  gap: var(--space-2);
  justify-content: center;
}

.auth-role-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-xs);
  font-weight: 700;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--color-charcoal-10);
  background-color: var(--color-cream);
  color: var(--color-charcoal-60);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.auth-role-btn:hover {
  border-color: var(--color-terracotta-light);
  color: var(--color-charcoal);
}

.auth-role-btn.active {
  background-color: var(--color-charcoal);
  border-color: var(--color-charcoal);
  color: var(--color-white);
  box-shadow: var(--shadow-sm);
}

.auth-role-btn i {
  width: 16px;
  height: 16px;
}

.auth-role-desc {
  font-size: var(--text-xs);
  color: var(--color-charcoal-60);
  margin-top: var(--space-3);
  margin-bottom: 0;
  min-height: 20px;
}

/* Auth Cards */
.auth-card {
  background-color: var(--color-white);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--color-charcoal-10);
}

.auth-view {
  display: none;
}

.auth-view.active {
  display: block;
  animation: authFadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

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

.auth-card__header {
  text-align: center;
  margin-bottom: var(--space-6);
}

.auth-card__icon {
  width: 54px;
  height: 54px;
  border-radius: var(--radius-full);
  background-color: var(--color-terracotta-faint);
  color: var(--color-terracotta);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-3);
}

.auth-card__icon i {
  width: 26px;
  height: 26px;
}

.auth-card__title {
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  font-weight: 700;
  color: var(--color-charcoal);
  margin-bottom: var(--space-1);
}

.auth-card__subtitle {
  font-size: var(--text-sm);
  color: var(--color-charcoal-60);
}

/* Form Controls with Icons */
.input-with-icon {
  position: relative;
  display: flex;
  align-items: center;
}

.input-icon {
  position: absolute;
  left: 1rem;
  color: var(--color-charcoal-60);
  width: 18px;
  height: 18px;
  pointer-events: none;
}

.input-padded {
  padding-left: 2.75rem;
  padding-right: 2.75rem;
}

.auth-pass-toggle {
  position: absolute;
  right: 0.75rem;
  background: none;
  border: none;
  color: var(--color-charcoal-60);
  padding: var(--space-1);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.auth-pass-toggle:hover {
  color: var(--color-terracotta);
}

.auth-pass-toggle i {
  width: 18px;
  height: 18px;
}

.form-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-2);
}

.form-label-row .form-label {
  margin-bottom: 0;
}

.form-options {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-6);
}

.checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-charcoal-60);
  cursor: pointer;
}

.form-checkbox {
  accent-color: var(--color-terracotta);
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.auth-link {
  color: var(--color-terracotta);
  font-weight: 600;
  text-decoration: none;
  transition: color var(--transition-fast);
}

.auth-link:hover {
  color: var(--color-terracotta-dark);
  text-decoration: underline;
}

.auth-link--sm {
  font-size: var(--text-xs);
}

.auth-card__footer {
  text-align: center;
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-charcoal-10);
  font-size: var(--text-sm);
  color: var(--color-charcoal-60);
}

.hidden-field {
  display: none !important;
}

/* Alert Boxes */
.alert {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-6);
  font-size: var(--text-sm);
  font-weight: 500;
}

.alert i {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.alert--success {
  background-color: var(--color-green-faint);
  color: var(--color-green);
  border: 1px solid rgba(49, 92, 69, 0.2);
}

.alert--error {
  background-color: var(--color-terracotta-faint);
  color: var(--color-terracotta);
  border: 1px solid rgba(217, 93, 57, 0.2);
}

/* ─── Legal Pages (Privacy / Terms) ─── */
.legal-container {
  max-width: 800px;
  margin: 0 auto;
  color: var(--color-charcoal);
  padding: 4rem 1.5rem;
}

.legal-heading {
  font-family: var(--font-heading);
  font-size: 1.75rem;
  font-weight: 600;
  margin-top: 2.5rem;
  margin-bottom: 1rem;
  color: var(--color-charcoal);
}

.legal-heading:first-of-type {
  margin-top: 0;
}

.legal-paragraph {
  font-size: 1rem;
  line-height: 1.8;
  margin-bottom: 1.5rem;
  color: var(--color-charcoal-80);
}

/* ─── Services Pages ─── */
.service-overview-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding: var(--space-8);
  margin-bottom: var(--space-10);
  background: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

@media (min-width: 768px) {
  .service-overview-card {
    flex-direction: row;
    align-items: center;
  }
}

.service-overview-text {
  flex: 1;
}

.service-overview-img {
  flex: 1;
}

.service-overview-img img {
  width: 100%;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

.service-grid-header {
  text-align: center;
  margin-bottom: var(--space-6);
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: 600;
  color: var(--color-charcoal);
}

.service-hero-desc {
  justify-content: center;
  max-width: 800px;
  margin: 0 auto;
  color: var(--color-charcoal-60);
  line-height: 1.7;
}

.service-detail-section {
  padding: var(--space-12) 0;
}

.service-video-placeholder {
  width: 100%;
  aspect-ratio: 16/9;
  background-color: var(--color-charcoal);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  margin-top: var(--space-8);
  box-shadow: var(--shadow-lg);
}

.service-video-placeholder i {
  width: 64px;
  height: 64px;
  margin-bottom: var(--space-4);
  color: var(--color-terracotta);
}

.service-video-placeholder span {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
}

/* ============================================================
   CHEF PORTAL LAYOUT & COMPONENTS
   ============================================================ */

/* Layout Container */
.chef-layout {
  display: flex;
  min-height: 100vh;
  background-color: var(--color-cream);
  font-family: var(--font-body);
  color: var(--color-charcoal);
}

/* Sidebar */
.chef-sidebar {
  width: 280px;
  background-color: var(--color-white);
  color: var(--color-charcoal);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  z-index: 100;
  transition: transform var(--transition-base);
  border-right: 1px solid var(--color-charcoal-10);
}

.chef-sidebar__logo {
  padding: var(--space-6) var(--space-8);
  border-bottom: 1px solid var(--color-charcoal-10);
}

.chef-sidebar__logo a {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  color: var(--color-charcoal);
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: 600;
}

.chef-sidebar__logo a span span {
  color: var(--color-terracotta);
}

.chef-sidebar__nav {
  padding: var(--space-6) 0;
  flex: 1;
  overflow-y: auto;
}

.chef-sidebar__nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.chef-sidebar__nav a {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-8);
  color: var(--color-charcoal-60);
  text-decoration: none;
  transition: all var(--transition-fast);
  font-weight: 500;
}

.chef-sidebar__nav a:hover,
.chef-sidebar__nav a.active {
  color: var(--color-terracotta);
  background-color: var(--color-cream);
  border-left: 4px solid var(--color-terracotta);
}

.chef-sidebar__nav i {
  width: 20px;
  height: 20px;
  opacity: 0.7;
}

.chef-sidebar__nav a.active i,
.chef-sidebar__nav a:hover i {
  opacity: 1;
  color: var(--color-terracotta);
}

.chef-sidebar__divider {
  height: 1px;
  background-color: var(--color-charcoal-10);
  margin: var(--space-4) var(--space-8);
}

.chef-sidebar__heading {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-charcoal-40);
  padding: 0 var(--space-8);
  margin-bottom: var(--space-2);
}

.chef-sidebar__footer {
  padding: var(--space-6) var(--space-8);
  border-top: 1px solid var(--color-charcoal-10);
}

.btn-logout {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-terracotta-light);
  text-decoration: none;
  font-weight: 500;
  transition: color var(--transition-fast);
}

.btn-logout:hover {
  color: var(--color-terracotta);
}

/* Main Content Area */
.chef-main {
  flex: 1;
  margin-left: 280px;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Header */
.chef-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-4) var(--space-8);
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-charcoal-10);
  position: sticky;
  top: 0;
  z-index: 90;
}

.chef-header__left {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.chef-header__title {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  margin: 0;
}

.chef-sidebar-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-charcoal);
}

.chef-header__right {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.chef-header__notification {
  position: relative;
  color: var(--color-charcoal-60);
  transition: color var(--transition-fast);
}

.chef-header__notification:hover {
  color: var(--color-charcoal);
}

.chef-header__logout {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.45rem 0.75rem;
  border-radius: var(--radius-sm);
  background-color: var(--color-charcoal-10);
  color: var(--color-charcoal);
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: 500;
  transition: all var(--transition-fast);
}

.chef-header__logout:hover {
  background-color: rgba(220, 38, 38, 0.1);
  color: #dc2626;
}

.chef-header__logout i {
  width: 18px;
  height: 18px;
}

.notification-dot {
  position: absolute;
  top: 0;
  right: 0;
  width: 8px;
  height: 8px;
  background-color: var(--color-terracotta);
  border-radius: 50%;
  border: 2px solid var(--color-white);
}

.chef-header__profile {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.chef-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  background-color: var(--color-charcoal-10);
}

.chef-info {
  display: flex;
  flex-direction: column;
}

.chef-name {
  font-weight: 600;
  font-size: var(--text-sm);
}

.chef-status {
  font-size: var(--text-xs);
  display: flex;
  align-items: center;
  gap: 4px;
}

.status-verified {
  color: var(--color-green);
}
.status-verified i {
  width: 12px;
  height: 12px;
}

/* Dashboard Content */
.chef-content {
  padding: var(--space-8);
  flex: 1;
}

.dashboard-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-6);
  margin-bottom: var(--space-10);
}

.stat-card {
  background: var(--color-white);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  border: 1px solid var(--color-charcoal-10);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.stat-card__info {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.stat-card__label {
  color: var(--color-charcoal-60);
  font-size: var(--text-sm);
  font-weight: 500;
}

.stat-card__value {
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  font-weight: 600;
  color: var(--color-charcoal);
  margin: 0;
}

.stat-card__icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-cream);
  color: var(--color-terracotta);
}

.stat-card__icon i {
  width: 24px;
  height: 24px;
}

/* Data Tables */
.table-container {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-charcoal-10);
  overflow: hidden;
}

.table-header {
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--color-charcoal-10);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.table-header h3 {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  margin: 0;
}

.chef-table {
  width: 100%;
  border-collapse: collapse;
}

.chef-table th {
  text-align: left;
  padding: var(--space-3) var(--space-6);
  background-color: var(--color-cream-dark);
  color: var(--color-charcoal-60);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}

.chef-table td {
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--color-charcoal-10);
  font-size: var(--text-sm);
}

.chef-table tr:last-child td {
  border-bottom: none;
}

.chef-table tr:hover {
  background-color: var(--color-cream);
}

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 600;
  background-color: var(--color-charcoal-10);
  color: var(--color-charcoal-60);
}

.badge--green { background-color: var(--color-green-faint); color: var(--color-green); }
.badge--terracotta { background-color: var(--color-terracotta-faint); color: var(--color-terracotta); }
.badge--gold { background-color: var(--color-gold-faint); color: var(--color-gold); }

/* Forms within Portal */
.portal-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
}

.portal-form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.portal-form-group.full-width {
  grid-column: 1 / -1;
}

.portal-form-group label {
  font-weight: 600;
  font-size: var(--text-sm);
}

.portal-input {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-charcoal-20);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--text-base);
  transition: border-color var(--transition-fast);
}

.portal-input:focus {
  outline: none;
  border-color: var(--color-terracotta);
  box-shadow: 0 0 0 3px var(--color-terracotta-faint);
}

/* Document Upload Card */
.document-upload-card {
  border: 2px dashed var(--color-charcoal-20);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  text-align: center;
  background-color: var(--color-white);
  transition: border-color var(--transition-fast);
}

.document-upload-card:hover {
  border-color: var(--color-terracotta);
}

.document-upload-card i {
  color: var(--color-terracotta);
  width: 48px;
  height: 48px;
  margin-bottom: var(--space-4);
}

/* Responsive */
@media (max-width: 992px) {
  .chef-sidebar {
    transform: translateX(-100%);
  }
  .chef-sidebar.open {
    transform: translateX(0);
  }
  .chef-main {
    margin-left: 0;
  }
  .chef-sidebar-toggle {
    display: block;
  }
}


/* ============================================================
   CUSTOMER PORTAL LAYOUT & COMPONENTS
   ============================================================ */

/* Layout */
.customer-layout {
  display: flex;
  min-height: 100vh;
  background-color: var(--color-cream);
  font-family: var(--font-body);
  color: var(--color-charcoal);
}

/* Sidebar */
.customer-sidebar {
  width: 280px;
  background-color: var(--color-white);
  color: var(--color-charcoal);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  z-index: 100;
  transition: transform var(--transition-base);
  border-right: 1px solid var(--color-charcoal-10);
}

.customer-sidebar__logo {
  padding: var(--space-6) var(--space-8);
  border-bottom: 1px solid var(--color-charcoal-10);
}

.customer-sidebar__logo a {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  color: var(--color-charcoal);
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: 600;
}

.customer-sidebar__logo a span span {
  color: var(--color-terracotta);
}

.customer-sidebar__nav {
  padding: var(--space-6) 0;
  flex: 1;
  overflow-y: auto;
}

.customer-sidebar__nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.customer-sidebar__heading {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-charcoal-40);
  padding: 0 var(--space-8);
  margin: var(--space-4) 0 var(--space-2);
}

.customer-sidebar__nav a {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-8);
  color: var(--color-charcoal-60);
  text-decoration: none;
  transition: all var(--transition-fast);
  font-weight: 500;
}

.customer-sidebar__nav a:hover,
.customer-sidebar__nav a.active {
  color: var(--color-terracotta);
  background-color: var(--color-cream);
  border-left: 4px solid var(--color-terracotta);
}

.customer-sidebar__nav i {
  width: 20px;
  height: 20px;
  opacity: 0.7;
}

.customer-sidebar__nav a.active i,
.customer-sidebar__nav a:hover i {
  opacity: 1;
  color: var(--color-terracotta);
}

.customer-sidebar__divider {
  height: 1px;
  background-color: var(--color-charcoal-10);
  margin: var(--space-4) var(--space-8);
}

.customer-sidebar__footer {
  padding: var(--space-6) var(--space-8);
  border-top: 1px solid var(--color-charcoal-10);
}

/* Main */
.customer-main {
  flex: 1;
  margin-left: 280px;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Header */
.customer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-4) var(--space-8);
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-charcoal-10);
  position: sticky;
  top: 0;
  z-index: 90;
}

.customer-header__left {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.customer-header__title {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  margin: 0;
}

.customer-sidebar-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-charcoal);
}

.customer-header__right {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.customer-header__notification {
  position: relative;
  color: var(--color-charcoal-60);
  transition: color var(--transition-fast);
}

.customer-header__notification:hover {
  color: var(--color-charcoal);
}

.customer-header__profile {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.customer-role-label {
  font-size: var(--text-xs);
  color: var(--color-charcoal-60);
  display: flex;
  align-items: center;
  gap: 4px;
}

.customer-role-label i {
  width: 12px;
  height: 12px;
}

/* Content */
.customer-content {
  padding: var(--space-8);
  flex: 1;
}

/* Welcome Banner */
.customer-welcome-banner {
  background: linear-gradient(135deg, var(--color-charcoal) 0%, var(--color-charcoal-80) 100%);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-6);
  margin-bottom: var(--space-8);
  color: var(--color-white);
}

.customer-welcome-banner__text h2 {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: 600;
  margin: 0 0 var(--space-2);
  color: var(--color-white);
}

.customer-welcome-banner__text p {
  font-size: var(--text-sm);
  color: var(--color-charcoal-20);
  margin: 0;
}

/* Filter Tabs */
.customer-filter-tabs {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
  flex-wrap: wrap;
}

.customer-filter-tab {
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
  color: var(--color-charcoal-60);
  background-color: var(--color-white);
  border: 1px solid var(--color-charcoal-10);
  transition: all var(--transition-fast);
}

.customer-filter-tab:hover {
  border-color: var(--color-terracotta);
  color: var(--color-terracotta);
}

.customer-filter-tab.active {
  background-color: var(--color-charcoal);
  color: var(--color-white);
  border-color: var(--color-charcoal);
}

/* Booking Cards */
.customer-booking-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.customer-booking-card {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-charcoal-10);
  padding: var(--space-6);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-6);
  transition: box-shadow var(--transition-fast);
}

.customer-booking-card:hover {
  box-shadow: var(--shadow-md);
}

.customer-booking-card__left {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
}

.customer-booking-card__avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.customer-booking-card__info {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.customer-booking-card__chef {
  font-weight: 700;
  font-size: var(--text-base);
  color: var(--color-charcoal);
}

.customer-booking-card__service {
  font-size: var(--text-sm);
  color: var(--color-charcoal-60);
}

.customer-booking-card__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-xs);
  color: var(--color-charcoal-60);
  margin-top: var(--space-1);
}

.customer-booking-card__meta i {
  width: 14px;
  height: 14px;
  color: var(--color-terracotta);
}

.customer-booking-card__right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-3);
  flex-shrink: 0;
}

.customer-booking-card__right br {
  display: none;
}

.customer-booking-card__amount {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.customer-booking-card__amount-label {
  font-size: var(--text-xs);
  color: var(--color-charcoal-60);
}

.customer-booking-card__amount-value {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--color-charcoal);
}

/* Chef Cards Grid */
.customer-chefs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-6);
}

.customer-chef-card {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-charcoal-10);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.customer-chef-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.customer-chef-card__top {
  position: relative;
  height: 160px;
  background: var(--color-cream-dark);
  display: flex;
  align-items: center;
  justify-content: center;
}

.customer-chef-card__avatar {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--color-white);
  box-shadow: var(--shadow-md);
}

.customer-chef-card__available-badge {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  background: var(--color-green);
  color: var(--color-white);
  font-size: var(--text-xs);
  font-weight: 700;
  padding: 2px 10px;
  border-radius: var(--radius-full);
}

.customer-chef-card__body {
  padding: var(--space-5);
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.customer-chef-card__rating {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--color-gold);
  font-size: var(--text-sm);
  font-weight: 700;
}

.customer-chef-card__rating i {
  width: 14px;
  height: 14px;
  fill: var(--color-gold);
}

.customer-chef-card__name {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 600;
  margin: 0;
  color: var(--color-charcoal);
}

.customer-chef-card__specialty {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-terracotta);
}

.customer-chef-card__meta {
  display: flex;
  gap: var(--space-4);
  font-size: var(--text-xs);
  color: var(--color-charcoal-60);
}

.customer-chef-card__meta span {
  display: flex;
  align-items: center;
  gap: 4px;
}

.customer-chef-card__meta i {
  width: 12px;
  height: 12px;
}

.customer-chef-card__bio {
  font-size: var(--text-xs);
  color: var(--color-charcoal-60);
  line-height: 1.6;
  margin: 0;
}

.customer-chef-card__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--color-charcoal-10);
}

.customer-chef-card__price {
  font-size: var(--text-sm);
  color: var(--color-charcoal-60);
}

.customer-chef-card__price strong {
  color: var(--color-charcoal);
  font-size: var(--text-base);
}

/* Search Bar */
.customer-search-bar {
  display: flex;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
  background: var(--color-white);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-charcoal-10);
  align-items: center;
  flex-wrap: wrap;
}

.customer-search-bar__input-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 200px;
}

.customer-search-bar__input-wrap i {
  color: var(--color-charcoal-60);
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.customer-search-input {
  flex: 1;
  border: none;
  outline: none;
  font-family: var(--font-body);
  font-size: var(--text-base);
  background: transparent;
  color: var(--color-charcoal);
}

.customer-search-select {
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-charcoal-20);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-charcoal);
  background: var(--color-white);
  cursor: pointer;
}

.customer-results-count {
  font-size: var(--text-sm);
  color: var(--color-charcoal-60);
  margin-bottom: var(--space-4);
}

/* Payments Summary */
.customer-payments-summary {
  display: flex;
  gap: var(--space-6);
  margin-bottom: var(--space-8);
  flex-wrap: wrap;
}

.customer-payments-summary__item {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  border: 1px solid var(--color-charcoal-10);
  flex: 1;
  min-width: 200px;
}

.customer-payments-summary__item i {
  width: 32px;
  height: 32px;
  color: var(--color-terracotta);
}

.customer-payments-summary__label {
  font-size: var(--text-sm);
  color: var(--color-charcoal-60);
  display: block;
}

.customer-payments-summary__value {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: 600;
  color: var(--color-charcoal);
}

/* Conversations */
.customer-conversations-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.customer-conversation-card {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  background: var(--color-white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-charcoal-10);
  padding: var(--space-4) var(--space-5);
  text-decoration: none;
  color: inherit;
  transition: box-shadow var(--transition-fast);
}

.customer-conversation-card:hover {
  box-shadow: var(--shadow-sm);
}

.customer-conversation-card.unread {
  border-left: 4px solid var(--color-terracotta);
}

.customer-conversation-card__profile-picture {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.customer-conversation-card__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.customer-conversation-card__name {
  font-weight: 700;
  font-size: var(--text-sm);
  color: var(--color-charcoal);
}

.customer-conversation-card__preview {
  font-size: var(--text-xs);
  color: var(--color-charcoal-60);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.customer-conversation-card__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-2);
  flex-shrink: 0;
}

.customer-conversation-card__time {
  font-size: var(--text-xs);
  color: var(--color-charcoal-60);
}

.customer-conversation-card__unread-badge {
  background: var(--color-terracotta);
  color: var(--color-white);
  font-size: var(--text-xs);
  font-weight: 700;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Notifications */
.customer-notifications-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.customer-notification-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  background: var(--color-white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-charcoal-10);
  padding: var(--space-5);
  transition: background var(--transition-fast);
}

.customer-notification-item.unread {
  background: var(--color-cream);
  border-left: 4px solid var(--color-terracotta);
}

.customer-notification-item__icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--color-cream);
  color: var(--color-terracotta);
}

.customer-notification-item__icon--booking { background: var(--color-green-faint); color: var(--color-green); }
.customer-notification-item__icon--message { background: var(--color-gold-faint); color: var(--color-gold); }
.customer-notification-item__icon--system  { background: var(--color-charcoal-10); color: var(--color-charcoal-60); }

.customer-notification-item__icon i { width: 20px; height: 20px; }

.customer-notification-item__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.customer-notification-item__title {
  font-weight: 700;
  font-size: var(--text-sm);
  color: var(--color-charcoal);
}

.customer-notification-item__msg {
  font-size: var(--text-sm);
  color: var(--color-charcoal-60);
  margin: 0;
  line-height: 1.5;
}

.customer-notification-item__time {
  font-size: var(--text-xs);
  color: var(--color-charcoal-60);
}

/* Empty State */
.customer-empty-state {
  text-align: center;
  padding: var(--space-16) var(--space-8);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}

.customer-empty-state i {
  width: 64px;
  height: 64px;
  color: var(--color-charcoal-20);
}

.customer-empty-state h3 {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  margin: 0;
  color: var(--color-charcoal);
}

.customer-empty-state p {
  color: var(--color-charcoal-60);
  max-width: 380px;
  font-size: var(--text-sm);
  line-height: 1.6;
  margin: 0;
}

/* Responsive */
@media (max-width: 992px) {
  .customer-sidebar {
    transform: translateX(-100%);
  }
  .customer-sidebar.open {
    transform: translateX(0);
  }
  .customer-main {
    margin-left: 0;
  }
  .customer-sidebar-toggle {
    display: block;
  }
  .customer-booking-card {
    flex-direction: column;
  }
  .customer-booking-card__right {
    align-items: flex-start;
    flex-direction: row;
    width: 100%;
    justify-content: space-between;
  }
  .customer-welcome-banner {
    flex-direction: column;
    text-align: center;
  }
}


/* ─── Messages Layout ──────────────────────────────────────── */
.customer-messages-layout {
  display: flex;
  gap: var(--space-6);
  align-items: flex-start;
  padding: var(--space-8);
}

.customer-messages-layout .customer-conversations-list {
  flex: 0 0 340px;
  min-width: 280px;
}

.customer-thread-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-charcoal-10);
  min-height: 500px;
  max-height: calc(100vh - 160px);
}

.customer-thread-messages {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.customer-thread-form {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--color-charcoal-10);
}

.customer-thread-input {
  flex: 1;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-charcoal-20);
  border-radius: var(--radius-full);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  outline: none;
  transition: border-color var(--transition-fast);
}

.customer-thread-input:focus {
  border-color: var(--color-terracotta);
}

.message-bubble {
  max-width: 72%;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.message-bubble p { margin: 0; font-size: var(--text-sm); line-height: 1.5; word-break: break-word; }
.message-bubble__time { font-size: 10px; opacity: 0.6; align-self: flex-end; }

.message-bubble--other { background: var(--color-cream-dark); color: var(--color-charcoal); align-self: flex-start; border-bottom-left-radius: 4px; }
.message-bubble--self  { background: var(--color-charcoal);   color: var(--color-white);   align-self: flex-end;   border-bottom-right-radius: 4px; }

@media (max-width: 768px) {
  .customer-messages-layout { flex-direction: column; }
  .customer-messages-layout .customer-conversations-list { flex: none; width: 100%; }
}

/* ─── Loading State ────────────────────────────────────────── */
.customer-loading {
  text-align: center;
  padding: var(--space-12) var(--space-8);
  color: var(--color-charcoal-60);
  font-size: var(--text-sm);
}

/* ─── Toast Notification ───────────────────────────────────── */
.customer-toast {
  position: fixed;
  bottom: var(--space-8);
  right: var(--space-8);
  padding: var(--space-4) var(--space-6);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 600;
  box-shadow: var(--shadow-lg);
  z-index: 9999;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  max-width: 360px;
}

.customer-toast.visible { opacity: 1; transform: translateY(0); }
.customer-toast--success { background: var(--color-green); color: var(--color-white); }
.customer-toast--error   { background: var(--color-terracotta); color: var(--color-white); }

/* ─── Chef Portal Inline Styles Extracted ────────────────── */
.booking-card {
  border: 1px solid var(--color-charcoal-10);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  background: var(--color-white);
  margin-bottom: var(--space-4);
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: var(--shadow-sm);
}
.booking-details h4 {
  margin: 0 0 var(--space-2) 0;
  font-size: var(--text-lg);
}
.booking-meta {
  display: flex;
  gap: var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-charcoal-60);
}
.booking-meta div {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}
.booking-meta i {
  width: 14px;
  height: 14px;
}
.booking-actions {
  display: flex;
  gap: var(--space-2);
}

.calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-4);
}
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background-color: var(--color-charcoal-20);
  border: 1px solid var(--color-charcoal-20);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.calendar-day-header {
  background: var(--color-charcoal-10);
  padding: var(--space-2);
  text-align: center;
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
}
.calendar-cell {
  background: var(--color-white);
  min-height: 100px;
  padding: var(--space-2);
  position: relative;
  cursor: pointer;
  transition: background var(--transition-fast);
}
.calendar-cell:hover {
  background: var(--color-cream);
}
.calendar-cell.past-date {
  background: var(--color-charcoal-10);
  color: var(--color-charcoal-60);
  cursor: not-allowed;
}
.date-number {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-charcoal-60);
  margin-bottom: var(--space-1);
  display: block;
}
.calendar-event {
  font-size: 11px;
  padding: 2px 4px;
  border-radius: 4px;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.event-booking {
  background: var(--color-green-faint);
  color: var(--color-green);
  border-left: 2px solid var(--color-green);
}
.event-blocked {
  background: var(--color-terracotta-faint);
  color: var(--color-terracotta);
  border-left: 2px solid var(--color-terracotta);
}
.legend {
  display: flex;
  gap: var(--space-4);
  margin-top: var(--space-4);
  font-size: var(--text-xs);
}
.legend-item {
  display: flex;
  align-items: center;
  gap: 4px;
}
.legend-color {
  width: 12px;
  height: 12px;
  border-radius: 2px;
}

/* ============================================================
   ADMIN PORTAL STYLES
   ============================================================ */

.admin-layout {
  display: flex;
  min-height: 100vh;
  background-color: var(--color-cream-dark);
}
.admin-sidebar {
  width: 260px;
  background-color: var(--color-white);
  color: var(--color-charcoal);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  overflow-y: auto;
  z-index: 100;
  border-right: 1px solid var(--color-charcoal-10);
}
.admin-logo-text {
  font-weight: 700;
  font-family: var(--font-heading);
  color: var(--color-charcoal);
}
.admin-sidebar__scroll-area {
  flex: 1;
  overflow-y: auto;
}
.admin-sidebar .navbar__logo {
  padding: var(--space-4);
  color: var(--color-charcoal);
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  border-bottom: 1px solid var(--color-charcoal-10);
}
.admin-sidebar__menu {
  list-style: none;
  padding: 0;
  margin: 0;
}
.admin-sidebar__menu li a {
  display: flex;
  align-items: center;
  padding: var(--space-3) var(--space-4);
  color: var(--color-charcoal-60);
  text-decoration: none;
  gap: 10px;
  transition: background 0.2s;
}
.admin-sidebar__menu li a:hover,
.admin-sidebar__menu li a.active {
  background-color: var(--color-cream);
  color: var(--color-terracotta);
  border-left: 4px solid var(--color-terracotta);
}
.admin-sidebar__section-title {
  padding: var(--space-4) var(--space-4) var(--space-2);
  font-size: var(--text-xs);
  text-transform: uppercase;
  color: var(--color-charcoal-40);
  letter-spacing: 1px;
}
.admin-sidebar__footer {
  padding: var(--space-4);
  border-top: 1px solid var(--color-charcoal-10);
}
.admin-btn-flex {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.admin-main {
  flex: 1;
  margin-left: 260px;
  display: flex;
  flex-direction: column;
}
.admin-header {
  background-color: var(--color-white);
  padding: var(--space-4);
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: var(--shadow-sm);
  z-index: 90;
}
.admin-header__title {
  margin: 0;
  font-size: var(--text-2xl);
  color: var(--color-charcoal);
}
.admin-header__right {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.admin-content {
  padding: var(--space-6);
  flex: 1;
}
.admin-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
.admin-stat-card {
  background: var(--color-white);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
}
.admin-stat-title {
  color: var(--color-charcoal-60);
  font-size: var(--text-sm);
  margin-bottom: 0.5rem;
}
.admin-stat-value {
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--color-charcoal);
}
.admin-table-wrapper {
  background: var(--color-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow-x: auto;
}
.admin-table {
  width: 100%;
  border-collapse: collapse;
}
.admin-table th, .admin-table td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  border-bottom: 1px solid var(--color-charcoal-10);
}
.admin-table th {
  background: var(--color-cream);
  font-weight: 600;
  color: var(--color-charcoal);
}
.admin-flex-center-gap {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.admin-sidebar-toggle {
  background: none;
  border: none;
  cursor: pointer;
  display: none;
}
.admin-header__notification {
  color: var(--color-charcoal);
  text-decoration: none;
  position: relative;
}
.admin-header__profile {
  display: flex;
  align-items: center;
  gap: 10px;
}
.admin-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
.admin-info {
  display: flex;
  flex-direction: column;
}
.admin-name {
  font-weight: 600;
}
.admin-role-label {
  font-size: var(--text-xs);
  color: var(--color-charcoal-60);
}
.admin-header__logout {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.45rem 0.75rem;
  border-radius: var(--radius-sm);
  background-color: var(--color-charcoal-10);
  color: var(--color-charcoal);
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: 500;
  transition: all var(--transition-fast);
}
.admin-header__logout:hover {
  background-color: rgba(220, 38, 38, 0.1);
  color: #dc2626;
}
.admin-header__logout i {
  width: 18px;
  height: 18px;
}
.admin-mb-4 { margin-bottom: var(--space-4); }
.admin-mt-1 { margin-top: var(--space-1); }
.admin-mt-4 { margin-top: var(--space-4); }
.admin-alert { padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); border-left: 4px solid transparent; font-size: var(--text-sm); font-weight: 500; }
.admin-alert--success { background: var(--color-green-faint); color: var(--color-green); border-color: var(--color-green); }
.admin-alert--error { background: var(--color-terracotta-faint); color: var(--color-terracotta); border-color: var(--color-terracotta); }
.admin-card-padding { padding: var(--space-6); background: var(--color-white); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
.admin-card-title { font-family: var(--font-heading); font-size: var(--text-xl); margin-top: 0; margin-bottom: var(--space-6); color: var(--color-charcoal); }
.admin-profile-picture-upload-row { display: flex; align-items: center; gap: var(--space-6); background: var(--color-charcoal-10); padding: var(--space-4); border-radius: var(--radius-md); }
.admin-profile-picture-lg { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; border: 2px solid var(--color-white); box-shadow: var(--shadow-sm); }
.admin-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
.admin-checkbox-wrap { margin-top: 8px; font-size: var(--text-sm); display: flex; align-items: center; gap: 8px; }

@media (max-width: 768px) {
  .admin-form-grid { grid-template-columns: 1fr; }
  .admin-profile-picture-upload-row { flex-direction: column; align-items: flex-start; }
}
.admin-mb-6 { margin-bottom: var(--space-6); }
.admin-m-0 { margin: 0; }
.admin-pl-4 { padding-left: 1rem; }
.admin-mr-10 { margin-right: 10px; }
.admin-mr-2 { margin-right: 0.5rem; }
.admin-flex-between { display: flex; justify-content: space-between; align-items: center; }
.admin-flex-gap-2 { display: flex; gap: var(--space-2); }
.admin-items-center { align-items: center; }
.admin-text-primary { color: var(--color-terracotta); }
.admin-text-danger { color: #dc2626; } /* Kept common red for errors */
.admin-text-muted { color: var(--color-charcoal-60); }
.admin-text-sm { font-size: var(--text-sm); }
.admin-text-xs { font-size: var(--text-xs); }
.admin-text-yellow { color: var(--color-gold); }
.admin-text-blue { color: #3b82f6; } /* Common blue for info */
.admin-text-green { color: var(--color-green); }
.admin-text-dark { color: var(--color-charcoal); }
.admin-font-medium { font-weight: 500; }

.admin-table-header { padding: var(--space-4); border-bottom: 1px solid var(--color-charcoal-10); display: flex; justify-content: space-between; align-items: center; }
.admin-table-title { margin: 0; font-size: var(--text-lg); }

.admin-empty-state { padding: var(--space-6); text-align: center; color: var(--color-charcoal-60); }
.admin-empty-icon { width: 48px; height: 48px; opacity: 0.2; margin-bottom: 1rem; }

.admin-btn-transparent { background: transparent; }
.admin-btn-xs { padding: 4px 8px; font-size: var(--text-xs); }
.admin-btn-approve { background-color: var(--color-green); border-color: var(--color-green); }

.admin-search-input { padding: 0.5rem; border: 1px solid var(--color-charcoal-20); border-radius: var(--radius-sm); }
.admin-search-wide { width: 300px; }

.icon-xs { width: 14px; height: 14px; }
.icon-sm { width: 16px; height: 16px; }
.icon-md { width: 20px; height: 20px; }
.icon-middle { vertical-align: middle; }

/* Badges */
.admin-badge-upcoming { background: var(--color-gold-faint); color: var(--color-gold); padding: 2px 8px; border-radius: 12px; font-size: var(--text-xs); }
.admin-badge-completed, .admin-badge-active { background: var(--color-green-faint); color: var(--color-green); padding: 2px 8px; border-radius: 12px; font-size: var(--text-xs); }
.admin-badge-cancelled, .admin-badge-rejected { background: var(--color-terracotta-faint); color: var(--color-terracotta); padding: 2px 8px; border-radius: 12px; font-size: var(--text-xs); }
.admin-badge-pending { background: var(--color-gold-faint); color: var(--color-gold); padding: 2px 8px; border-radius: 12px; font-size: var(--text-xs); }
.admin-badge-open { background: var(--color-green-faint); color: var(--color-green); padding: 2px 8px; border-radius: 12px; font-size: var(--text-xs); }
.admin-badge-closed, .admin-badge-resolved { background: var(--color-charcoal-10); color: var(--color-charcoal-60); padding: 2px 8px; border-radius: 12px; font-size: var(--text-xs); }

.admin-profile-picture-sm { width: 30px; height: 30px; border-radius: 50%; }
.admin-service-thumb { width: 44px; height: 32px; border-radius: var(--radius-sm); object-fit: cover; background: var(--color-charcoal-10); display: inline-block; vertical-align: middle; }
.admin-service-preview-img { max-width: 140px; max-height: 90px; border-radius: var(--radius-sm); object-fit: cover; margin-top: 0.5rem; display: block; background: var(--color-charcoal-10); }
.admin-list-unstyled { margin: 0; padding-left: 1rem; font-size: var(--text-sm); }

/* Messages */
.admin-msg-container { max-width: 800px; }
.admin-msg-list { background: var(--color-white); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); padding: var(--space-4); }
.admin-msg-card { padding: var(--space-4); border-bottom: 1px solid var(--color-charcoal-10); display: flex; gap: var(--space-4); align-items: flex-start; }
.admin-msg-unread { background: var(--color-cream); border-radius: var(--radius-sm); margin-bottom: var(--space-2); }
.admin-msg-icon-danger { background: var(--color-terracotta-faint); color: var(--color-terracotta); padding: 8px; border-radius: 50%; }
.admin-msg-icon-success { background: var(--color-green-faint); color: var(--color-green); padding: 8px; border-radius: 50%; }
.admin-msg-content { flex: 1; }
.admin-msg-title { margin: 0 0 4px 0; font-size: var(--text-base); }
.admin-msg-desc { margin: 0; color: var(--color-charcoal-60); font-size: var(--text-sm); }
.admin-msg-time { margin-top: 8px; font-size: var(--text-xs); color: #94a3b8; }

/* Gallery */
.admin-gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--space-4); }
.admin-gallery-card { background: var(--color-white); border-radius: var(--radius-sm); overflow: hidden; box-shadow: var(--shadow-sm); }
.admin-gallery-img { width: 100%; height: 150px; object-fit: cover; background: var(--color-charcoal-10); }
.admin-gallery-body { padding: var(--space-3); }
.admin-gallery-title { font-size: var(--text-sm); font-weight: 500; margin-bottom: 4px; }
.admin-gallery-meta { font-size: var(--text-xs); color: var(--color-charcoal-60); display: flex; justify-content: space-between; }
.admin-btn-icon-danger { background: none; border: none; color: #dc2626; cursor: pointer; padding: 0; }

@media (max-width: 768px) {
  .admin-sidebar {
      transform: translateX(-100%);
      transition: transform 0.3s ease;
  }
  .admin-sidebar.open {
      transform: translateX(0);
  }
  .admin-main {
      margin-left: 0;
  }
  .admin-sidebar-toggle {
      display: block;
  }
}

/* Booking Modal */
.modal-overlay {
    display: none;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0,0,0,0.5);
    z-index: 9999;
}
.modal-overlay.active {
    display: flex;
}
.booking-modal {
    max-width: 500px;
    width: 100%;
    margin: 2rem auto;
    padding: 2rem;
    background: var(--color-white);
    border-radius: var(--radius-lg);
    position: relative;
    max-height: 90vh;
    overflow-y: auto;
}
.booking-modal__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}
.booking-modal__header h3 {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    color: var(--color-charcoal);
}
.booking-modal__close {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--color-charcoal-60);
}
.booking-modal__form .form-group {
    margin-bottom: 1rem;
}
.booking-modal__form .mb-large {
    margin-bottom: 1.5rem;
}
.booking-modal__form .form-label {
    display: block;
    font-weight: 500;
    margin-bottom: 0.5rem;
    color: var(--color-charcoal);
}
.booking-modal__form .form-input {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--color-charcoal-20);
    border-radius: var(--radius-md);
}
.btn-block {
    width: 100%;
}



.extracted-style-1 { margin-top: var(--space-6); }
.extracted-style-2 { text-decoration: underline; margin-left: 5px; }
.extracted-style-3 { width:16px;height:16px;margin-bottom:-3px; }
.extracted-style-4 { margin-top:15px; }
.extracted-style-5 { margin-bottom: 20px; }
.extracted-style-6 { background-color: var(--color-charcoal-10); color: var(--color-charcoal-60); cursor: not-allowed; }
.extracted-style-7 { margin-bottom:15px; display:inline-block; }
.extracted-style-8 { margin-bottom: 25px; }
.extracted-style-9 { margin-bottom: 20px; font-size: 14px; color: var(--color-gray); }
.extracted-style-10 { color: var(--color-charcoal-60); }
.extracted-style-11 { text-decoration: none; color: inherit; }
.extracted-style-12 { object-fit: cover; }
.extracted-style-13 { display: none; padding: var(--space-4); border-radius: var(--radius-sm); margin-bottom: var(--space-6); border-left: 4px solid transparent; }
.extracted-style-14 { width: 14px; height: 14px; display: inline-block; vertical-align: middle; }

.extracted-style-27 { background: var(--color-cream); display: flex; align-items: center; justify-content: center; height: 100vh; }
.extracted-style-28 { background: var(--color-white); padding: var(--space-8); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); max-width: 400px; width: 100%; }
.extracted-style-29 { text-align: center; margin-bottom: var(--space-6); }
.extracted-style-30 { margin-bottom: var(--space-2); }
.extracted-style-31 { font-family: var(--font-heading); margin: 0; }
.extracted-style-32 { margin-bottom: var(--space-6); }
.extracted-style-33 { margin-bottom: var(--space-4); }
.extracted-style-34 { display: block; font-size: var(--text-sm); font-weight: 500; margin-bottom: var(--space-2); }
.extracted-style-35 { position: relative; }
.extracted-style-36 { position: absolute; left: 12px; top: 12px; color: var(--color-charcoal-40); width: 18px; height: 18px; }
.extracted-style-37 { width: 100%; padding: 10px 10px 10px 40px; border: 1px solid var(--color-charcoal-20); border-radius: var(--radius-sm); }
.extracted-style-38 { text-align: center; }
.extracted-style-39 { color: var(--color-charcoal-40); }
.extracted-style-40 { background: var(--color-white); padding: var(--space-8); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); text-align: center; max-width: 400px; width: 100%; }
.extracted-style-41 { width: 64px; height: 64px; color: var(--color-green); margin-bottom: var(--space-4); }
.extracted-style-42 { font-family: var(--font-heading); margin-bottom: var(--space-2); }
.extracted-style-43 { color: var(--color-charcoal-60); margin-bottom: var(--space-6); }
.extracted-style-44 { width: 64px; height: 64px; color: var(--color-terracotta); margin-bottom: var(--space-4); }
.extracted-style-45 { text-align:center;margin-top:var(--space-8); }
.extracted-style-46 { display:none; }
.extracted-style-47 { text-align:center;padding:var(--space-8);color:var(--color-charcoal-60); }
.extracted-style-48 { max-width:500px; }
.extracted-style-49 { background:#f9f9f9; padding:15px; border-radius:8px; margin:15px 0; }
.extracted-style-50 { font-size:14px; color:var(--color-charcoal-60); }
.extracted-style-51 { padding: var(--space-6); max-width: 800px; }
.extracted-style-52 { font-family: var(--font-heading); font-size: var(--text-xl); margin-top: 0; margin-bottom: var(--space-6); }
.extracted-style-53 { background: var(--color-green-faint); color: var(--color-green); padding: var(--space-3); border-radius: var(--radius-sm); margin-bottom: var(--space-4); border-left: 4px solid var(--color-green); }
.extracted-style-54 { background: var(--color-terracotta-faint); color: var(--color-terracotta); padding: var(--space-3); border-radius: var(--radius-sm); margin-bottom: var(--space-4); border-left: 4px solid var(--color-terracotta); }
.extracted-style-55 { background-color: var(--color-charcoal-10); }
.extracted-style-56 { margin-bottom: var(--space-10); }
.extracted-style-57 { font-family: var(--font-heading); font-size: var(--text-2xl); margin-top: 0; }
.extracted-style-58 { color: var(--color-green); font-weight: 600; }
.extracted-style-59 { color: var(--color-terracotta); border-color: var(--color-terracotta-faint); }
.opacity-70 { opacity: 0.7; }
.extracted-style-61 { padding: var(--space-6); }
.extracted-style-62 { font-family: var(--font-heading); font-size: var(--text-xl); margin: 0; }
.extracted-style-63 { margin:0; font-size: var(--text-xs); color: var(--color-charcoal-60); }
.extracted-style-64 { background: var(--color-green); }
.extracted-style-65 { background: var(--color-terracotta); }
.extracted-style-66 { font-family: var(--font-heading); font-size: var(--text-xl); margin-top: 0; margin-bottom: var(--space-2); }
.extracted-style-67 { color: var(--color-charcoal-60); font-size: var(--text-sm); margin-bottom: var(--space-6); }
.extracted-style-68 { margin: 0 0 var(--space-2) 0; }
.extracted-style-69 { font-size: var(--text-xs); color: var(--color-charcoal-60); margin: 0 0 var(--space-4) 0; }
.extracted-style-70 { display: none; }
.extracted-style-71 { cursor: pointer; }
.extracted-style-72 { display: none; margin-top: 1rem; width: 100%; text-align: center; border: 1px dashed var(--color-charcoal-20); padding: 0.5rem; border-radius: var(--radius-sm); background: var(--color-white); }
.extracted-style-73 { width: 100%; }
.extracted-style-74 { text-align: center; color: var(--color-charcoal-60); }
.extracted-style-75 { font-size: var(--text-xs); color: var(--color-terracotta); }
.extracted-style-76 { padding: 40px 20px; }
.extracted-style-77 { width: 48px; height: 48px; color: var(--color-terracotta); margin-bottom: 20px; }
.extracted-style-78 { margin-bottom: 10px; color: var(--color-charcoal-60); }
.extracted-style-79 { font-size: 36px; font-weight: 700; color: var(--color-charcoal); margin-bottom: 20px; }
.extracted-style-80 { list-style: none; padding: 0; margin: 0; color: var(--color-charcoal-60); line-height: 1.6; }
.extracted-style-81 { margin-bottom: 10px; }
.extracted-style-82 { background: var(--color-gold-faint); border-left: 4px solid var(--color-gold); padding: var(--space-4); border-radius: var(--radius-sm); margin-bottom: var(--space-6); }
.extracted-style-83 { color: var(--color-gold); text-decoration: underline; }
.extracted-style-84 { font-size: var(--text-sm); color: var(--color-gold); }
.extracted-style-85 { padding: var(--space-6); text-align: center; }
.extracted-style-86 { padding: var(--space-6); margin-bottom: var(--space-8); }
.extracted-style-87 { width: 14px; height: 14px; vertical-align: middle; }
.extracted-style-88 { max-width: 600px; width: 100%; }
.extracted-style-89 { display: flex; gap: 0.5rem; }
.extracted-style-90 { text-decoration: none; }
.extracted-style-91 { font-size: 0.85rem; }
.extracted-style-92 { background: var(--color-white); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
.extracted-style-93 { width:40px; height:40px; border-radius:50%; object-fit:cover; }
.extracted-style-94 { opacity: 0.1; width: 32px; height: 32px; margin-bottom: 0.5rem; display: inline-block; }
.extracted-style-95 { display:inline; }
.extracted-style-96 { padding: var(--space-6); max-width: 800px; background: var(--color-white); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
.extracted-style-97 { display:none; padding: var(--space-3); border-radius: var(--radius-sm); margin-bottom: var(--space-4); }
.extracted-style-98 { margin-bottom: var(--space-6); text-align: center; }
.extracted-style-99 { width: 120px; height: 120px; border-radius: 50%; overflow: hidden; margin: 0 auto 1rem; background: var(--color-charcoal-10); border: 2px solid var(--color-charcoal-20); }
.extracted-style-100 { width: 100%; height: 100%; object-fit: cover; }
.extracted-style-101 { cursor: pointer; background: var(--color-charcoal-10); color: var(--color-charcoal); }
.extracted-style-102 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.extracted-style-103 { margin-top: var(--space-4); }
.extracted-style-104 { display: grid; grid-template-columns: 1fr; gap: var(--space-6); }
.extracted-style-105 { padding: var(--space-4); }
.extracted-style-106 { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-4); }
.extracted-style-107 { display: flex; gap: var(--space-2); align-items: center; }
.extracted-style-108 { border-color: var(--color-terracotta); color: var(--color-terracotta); }
.extracted-style-109 { margin-left: var(--space-2); }
.extracted-style-110 { border: 1px solid var(--color-charcoal-20); border-radius: var(--radius-sm); overflow: hidden; background: #f9f9f9; padding: var(--space-4); text-align: center; }
.extracted-style-111 { max-width: 100%; max-height: 500px; object-fit: contain; }
.extracted-style-112 { width: 100%; height: 600px; border: none; }
.extracted-style-113 { margin-top: var(--space-6); background: var(--color-white); padding: var(--space-4); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); display: flex; gap: var(--space-4); }
.extracted-style-114 { flex: 1; }
.extracted-style-115 { flex: 1; border-color: var(--color-terracotta); color: var(--color-terracotta); }
.extracted-style-decline { color: var(--color-terracotta); border-color: var(--color-terracotta-faint); }

/* ==================== Cart Elements ==================== */
.hidden { display: none !important; }

.cart-counter-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: 16px;
    border-radius: 8px;
    padding: 0 4px;
    font-size: 10px;
    line-height: 16px;
}

.cart-chef-tag {
    background: var(--color-charcoal-10);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    font-weight: 500;
}

.cart-chef-tag-icon {
    vertical-align: middle;
    margin-right: 5px;
}

/* ==================== Deposit Payment Modal ==================== */
.customer-deposit-summary {
    background: var(--color-charcoal-05);
    border: 1px solid var(--color-charcoal-10);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
}

.bank-details-box {
    background: var(--color-charcoal-05);
    border: 1px dashed var(--color-gold);
    border-radius: var(--radius-md);
    padding: var(--space-4);
}

.deposit-ref-badge {
    font-family: monospace;
    font-weight: 700;
    color: var(--color-charcoal);
    background: var(--color-charcoal-10);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
}

/* --- Admin Tabs and Badges (Services & Inquiries) --- */
.admin-tab-container {
    width: 100%;
}
.admin-tab-group {
    display: flex;
    width: 100%;
    border: 1px solid var(--color-gray, #ccc);
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}
.admin-tab-btn {
    flex: 1;
    padding: 12px;
    border: none;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    background: transparent;
    color: var(--color-charcoal, #333);
}
.admin-tab-btn.active {
    background: var(--color-primary, #b78a44);
    color: #fff;
}
.admin-alert {
    padding: 10px;
    border-radius: 4px;
    margin-bottom: 15px;
}
.admin-alert-success {
    background-color: #d4edda;
    color: #155724;
}
.admin-alert-error {
    background-color: #f8d7da;
    color: #721c24;
}
.admin-status-form {
    display: flex;
    align-items: center;
}
.admin-status-select {
    padding: 5px;
    font-size: 12px;
    height: auto;
}
.admin-message-row {
    background-color: #fcfcfc;
}
.admin-message-row td {
    padding-top: 10px;
    padding-bottom: 20px;
    border-top: none;
}
.admin-message-row span {
    white-space: pre-wrap;
    color: #555;
}
.hidden {
    display: none;
}

/* --- Service Details & Inquiry Form (Public) --- */
.service-detail-hero {
    background-size: cover;
    background-position: center;
    position: relative;
    padding: 120px 0 80px 0;
    min-height: 40vh;
    display: flex;
    align-items: center;
}
.service-detail-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
}
.service-detail-content {
    position: relative;
    z-index: 1;
}
.service-detail-content .about-hero__subtitle,
.service-detail-content .about-hero__title {
    color: var(--color-white);
}
.inquiry-form-container {
    background: var(--color-white);
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    margin-bottom: 24px;
}
.inquiry-form-title {
    margin-bottom: 20px;
    font-family: var(--font-heading);
    color: var(--color-charcoal);
}
.inquiry-form .form-group {
    margin-bottom: 15px;
}
.inquiry-form label {
    display: block;
    margin-bottom: 5px;
}
.inquiry-form .form-control {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}
.inquiry-textarea {
    height: 100px;
}
.alert-box {
    padding: 10px;
    border-radius: 4px;
    margin-bottom: 15px;
}
.alert-success {
    background-color: #d4edda;
    color: #155724;
}
.alert-error {
    background-color: #f8d7da;
    color: #721c24;
}
.full-width {
    width: 100%;
}
.display-block {
    display: block;
}
.center-text {
    text-align: center;
}
.service-desc-text {
    white-space: pre-wrap;
    margin-bottom: 24px;
}
.rounded-img {
    border-radius: 8px;
}

/* --- Customer Portal Adjustments & Layout Header Offset --- */
.customer-portal-section,
.section:has(.customer-portal-container),
section:has(.customer-portal-container),
body[data-page="dashboard"] .section,
body[data-page^="customer-"] .section {
  padding-top: calc(var(--nav-height) + var(--space-8)) !important;
  padding-bottom: var(--space-16);
}

.customer-content,
.customer-messages-layout {
  padding-top: calc(var(--nav-height) + var(--space-8)) !important;
}

.customer-portal-container {
  padding-top: 0 !important;
  padding-left: var(--space-6) !important;
  padding-right: var(--space-6) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.customer-portal-container .customer-content,
.customer-portal-container .customer-messages-layout {
  padding-top: 0 !important;
}

.customer-welcome-banner {
  margin-top: 0;
  margin-bottom: var(--space-8);
}

/* --- Chef Card Actions --- */
.chef-card__actions {
    display: flex;
    gap: var(--space-2);
    margin-top: var(--space-4);
    padding-top: var(--space-3);
    border-top: 1px dashed var(--color-charcoal-10);
}
.chef-card__actions .btn {
    flex: 1;
    padding: 0.625rem 0.5rem;
    font-size: var(--text-sm);
    text-align: center;
    justify-content: center;
}

/* --- Floating Cart Button --- */
.floating-cart-btn,
.floating-checkout {
  position: fixed;
  bottom: 100px;
  right: var(--space-6);
  background-color: var(--color-green);
  color: var(--color-white);
  padding: 12px 24px;
  border-radius: 50px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
  z-index: 1000;
  text-decoration: none;
  display: flex;
  align-items: center;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.floating-cart-btn:hover,
.floating-checkout:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.25);
  color: var(--color-white);
}
.floating-cart-btn.hidden,
.floating-checkout.hidden,
body[data-page="checkout"] .floating-cart-btn,
body[data-page="checkout"] .floating-checkout,
body[data-page="new-booking"] .floating-cart-btn,
body[data-page="new-booking"] .floating-checkout {
  display: none !important;
}
.floating-cart-content {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
}
.floating-cart-text {
  font-size: 1rem;
}

/* ─── Chef Category Badges ─── */
.badge--full-time {
  background-color: var(--color-green-faint);
  color: var(--color-green);
  border: 1px solid rgba(49, 92, 69, 0.2);
}

.badge--freelancer {
  background-color: var(--color-terracotta-faint);
  color: var(--color-terracotta);
  border: 1px solid rgba(217, 93, 57, 0.2);
}

.chef-card__category-badge {
  position: absolute;
  bottom: 0.75rem;
  left: 0.75rem;
  z-index: 2;
}

.chef-card__category-badge .badge {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
  backdrop-filter: blur(4px);
}

/* ─── Chef Category Filter Pills & Engagement Tags ─── */
.category-pills {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.category-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: var(--radius-full);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-charcoal-60);
  background-color: var(--color-charcoal-10);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--transition-fast);
  text-decoration: none;
  user-select: none;
}

.category-pill:hover {
  background-color: var(--color-charcoal-20);
  color: var(--color-charcoal);
}

.category-pill.active {
  background-color: var(--color-charcoal);
  color: var(--color-white);
  border-color: var(--color-charcoal);
}

.category-pill--full-time.active {
  background-color: var(--color-green);
  color: var(--color-white);
  border-color: var(--color-green);
}

.category-pill--freelancer.active {
  background-color: var(--color-terracotta);
  color: var(--color-white);
  border-color: var(--color-terracotta);
}

.category-pill__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xs);
  padding: 0.1rem 0.5rem;
  border-radius: var(--radius-full);
  background-color: rgba(0, 0, 0, 0.08);
  color: inherit;
}

.category-pill.active .category-pill__count {
  background-color: rgba(255, 255, 255, 0.25);
  color: var(--color-white);
}

.category-pill__icon {
  flex-shrink: 0;
}

.filter-clear--hidden {
  display: none !important;
}

.filter-select--category-mobile {
  display: none;
}

@media (max-width: 768px) {
  .category-pills {
    width: 100%;
    overflow-x: auto;
    padding-bottom: 0.25rem;
    -webkit-overflow-scrolling: touch;
  }
  .category-pill {
    white-space: nowrap;
  }
}

.chef-card__engagement-row {
  margin-top: 0.35rem;
  margin-bottom: 0.35rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.category-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: var(--text-xs);
  font-weight: 600;
  padding: 0.2rem 0.55rem;
  border-radius: var(--radius-sm);
  letter-spacing: 0.01em;
}

.category-tag--full-time {
  background-color: var(--color-green-faint);
  color: var(--color-green);
  border: 1px solid rgba(49, 92, 69, 0.15);
}

.category-tag--freelancer {
  background-color: var(--color-terracotta-faint);
  color: var(--color-terracotta);
  border: 1px solid rgba(217, 93, 57, 0.15);
}

.badge-icon {
  vertical-align: middle;
  margin-right: 0.2rem;
}

.about-hero__separator {
  margin: 0 0.5rem;
  opacity: 0.6;
}

.chefs-grid {
  transition: opacity var(--transition-fast);
}

.chefs-grid--loading {
  opacity: 0.45;
  pointer-events: none;
}

.admin-badge-full-time {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.2rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: var(--radius-sm);
  background-color: var(--color-green-faint);
  color: var(--color-green);
}

.admin-badge-freelancer {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.2rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: var(--radius-sm);
  background-color: var(--color-terracotta-faint);
  color: var(--color-terracotta);
}

.admin-badge-pro {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.15rem 0.45rem;
  font-size: 0.7rem;
  font-weight: 700;
  border-radius: var(--radius-sm);
  background-color: var(--color-green-faint);
  color: var(--color-green);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.admin-badge-beginner {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.15rem 0.45rem;
  font-size: 0.7rem;
  font-weight: 700;
  border-radius: var(--radius-sm);
  background-color: var(--color-gold-faint);
  color: var(--color-gold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.chef-detail-actions {
  margin-top: 1.5rem;
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.chef-detail-meta-list {
  list-style: none;
  padding: 0;
  line-height: 2.2;
}

.chef-detail-section-title {
  margin-top: 2rem;
  margin-bottom: 1rem;
  font-family: var(--font-heading);
  color: var(--color-charcoal);
  font-size: 1.5rem;
}

.chef-detail-docs-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
}

.chef-detail-img {
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
}

/* ══════════════════════════════════════════════════════════════════
   ERROR PAGES (403, 404, 500)
   ══════════════════════════════════════════════════════════════════ */
.error-page-wrapper {
  min-height: calc(100vh - var(--nav-height) - 160px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-12) var(--space-4);
  background-color: var(--color-cream);
}

.error-page-wrapper--standalone {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: var(--color-cream);
}

.error-standalone-main {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-12) var(--space-4);
}

.error-nav-simple {
  padding: var(--space-4) var(--space-6);
  background-color: var(--color-white);
  border-bottom: 1px solid var(--color-charcoal-10);
}

.error-nav-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.error-nav-brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
}

.error-card {
  max-width: 660px;
  width: 100%;
  margin: 0 auto;
  background-color: var(--color-white);
  border: 1px solid var(--color-charcoal-10);
  border-radius: var(--radius-xl);
  padding: var(--space-10) var(--space-8);
  text-align: center;
  box-shadow: var(--shadow-md);
}

.error-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.35rem 0.95rem;
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-radius: var(--radius-full);
  margin-bottom: var(--space-5);
}

.error-badge svg,
.error-badge i {
  width: 14px;
  height: 14px;
}

.error-badge--terracotta {
  background-color: var(--color-terracotta-faint);
  color: var(--color-terracotta);
}

.error-badge--gold {
  background-color: var(--color-gold-faint);
  color: var(--color-gold);
}

.error-badge--green {
  background-color: var(--color-green-faint);
  color: var(--color-green);
}

.error-icon-circle {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-4);
  background-color: var(--color-terracotta-faint);
  color: var(--color-terracotta);
}

.error-icon-circle svg,
.error-icon-circle i {
  width: 38px;
  height: 38px;
}

.error-icon-circle--gold {
  background-color: var(--color-gold-faint);
  color: var(--color-gold);
}

.error-icon-circle--charcoal {
  background-color: var(--color-charcoal-10);
  color: var(--color-charcoal);
}

.error-title {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 5vw, 2.75rem);
  color: var(--color-charcoal);
  margin-bottom: var(--space-3);
  font-weight: 700;
  line-height: 1.15;
}

.error-description {
  color: var(--color-charcoal-60);
  font-size: var(--text-base);
  line-height: 1.65;
  max-width: 520px;
  margin: 0 auto var(--space-8);
}

.error-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-8);
}

.error-actions .btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.error-actions .btn svg,
.error-actions .btn i {
  width: 18px;
  height: 18px;
}

.error-quick-links {
  border-top: 1px solid var(--color-charcoal-10);
  padding-top: var(--space-6);
  margin-top: var(--space-2);
}

.error-quick-links-title {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-charcoal-60);
  margin-bottom: var(--space-4);
}

.error-links-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--space-3);
}

.error-link-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-2);
  background-color: var(--color-cream);
  border: 1px solid var(--color-charcoal-10);
  border-radius: var(--radius-md);
  color: var(--color-charcoal);
  text-decoration: none;
  font-size: var(--text-xs);
  font-weight: 600;
  transition: all var(--transition-fast);
}

.error-link-card:hover {
  background-color: var(--color-white);
  border-color: var(--color-terracotta);
  color: var(--color-terracotta);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.error-link-card i,
.error-link-card svg {
  width: 20px;
  height: 20px;
  color: var(--color-terracotta);
}

.error-footer-simple {
  padding: var(--space-5) var(--space-6);
  text-align: center;
  font-size: var(--text-xs);
  color: var(--color-charcoal-60);
  border-top: 1px solid var(--color-charcoal-10);
  background-color: var(--color-white);
}

.error-footer-simple a {
  color: var(--color-terracotta);
  text-decoration: none;
}

.error-footer-simple a:hover {
  text-decoration: underline;
}

@media (max-width: 640px) {
  .error-card {
    padding: var(--space-8) var(--space-4);
  }
  .error-actions {
    flex-direction: column;
    width: 100%;
  }
  .error-actions .btn {
    width: 100%;
    justify-content: center;
  }
  .error-links-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ══════════════════════════════════════════════════════════════════
   CHEF CAREER & BEGINNER TRAINING PATHWAY
   ══════════════════════════════════════════════════════════════════ */
.career-hero__actions {
  display: flex;
  gap: var(--space-4);
  margin-top: var(--space-5);
  flex-wrap: wrap;
}

.career-hero__beginner-hint {
  margin-top: var(--space-5);
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.85);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.career-hero__beginner-hint a {
  color: var(--color-gold);
  text-decoration: underline;
  font-weight: 600;
}

.career-hero__beginner-hint a:hover {
  color: var(--color-white);
}

.modal-chef-signin {
  max-width: 400px;
}

.chef-login-error-msg {
  color: var(--color-terracotta);
  margin-top: var(--space-4);
  text-align: center;
  display: none;
}

/* Callout on join-as-chef.php */
.beginner-career-callout {
  padding: var(--space-16) 0;
  background-color: var(--color-cream);
}

.beginner-career-card {
  background-color: var(--color-white);
  border: 1px solid var(--color-charcoal-10);
  border-radius: var(--radius-xl);
  padding: var(--space-12) var(--space-10);
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--space-10);
  align-items: center;
  box-shadow: var(--shadow-md);
  position: relative;
  overflow: hidden;
}

.beginner-career-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 6px;
  height: 100%;
  background-color: var(--color-terracotta);
}

.beginner-career-content .section-label {
  display: inline-block;
  margin-bottom: var(--space-2);
}

.beginner-career-title {
  font-family: var(--font-heading);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  color: var(--color-charcoal);
  margin-bottom: var(--space-4);
  line-height: 1.2;
}

.beginner-career-desc {
  color: var(--color-charcoal-60);
  font-size: var(--text-base);
  line-height: 1.7;
  margin-bottom: var(--space-6);
}

.beginner-career-actions {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.beginner-career-badge-visual {
  background: linear-gradient(135deg, var(--color-charcoal) 0%, var(--color-charcoal-80) 100%);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: center;
  box-shadow: var(--shadow-lg);
}

.career-stage-pill {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  background-color: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-md);
  color: var(--color-white);
  font-size: var(--text-sm);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.career-stage-pill i,
.career-stage-pill svg {
  width: 18px;
  height: 18px;
  color: var(--color-gold);
}

.career-stage-pill.active {
  background-color: var(--color-terracotta);
  border-color: var(--color-terracotta);
  box-shadow: 0 4px 14px rgba(217, 93, 57, 0.4);
}

.career-stage-arrow {
  color: var(--color-gold);
  display: flex;
  align-items: center;
  justify-content: center;
}

.career-stage-arrow svg,
.career-stage-arrow i {
  width: 18px;
  height: 18px;
}

/* Chef Career Main Page Styles */
.chef-career-hero {
  background: var(--color-charcoal);
  color: var(--color-white);
  padding: var(--space-20) 0 var(--space-16);
  position: relative;
  overflow: hidden;
}

.chef-career-hero__bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 85% 25%, rgba(217, 93, 57, 0.22) 0%, transparent 55%),
    radial-gradient(circle at 15% 75%, rgba(229, 167, 42, 0.18) 0%, transparent 50%);
  pointer-events: none;
}

.chef-career-hero__inner {
  position: relative;
  max-width: 860px;
  margin: 0 auto;
  text-align: center;
}

.chef-career-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.35rem 1rem;
  background-color: rgba(217, 93, 57, 0.2);
  border: 1px solid rgba(217, 93, 57, 0.4);
  color: var(--color-terracotta-light);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-4);
}

.chef-career-hero__title {
  font-family: var(--font-heading);
  font-size: clamp(2.5rem, 6vw, 4.25rem);
  line-height: 1.1;
  margin-bottom: var(--space-5);
  color: var(--color-white);
}

.chef-career-hero__desc {
  font-size: var(--text-lg);
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.7;
  margin-bottom: var(--space-8);
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

.chef-career-hero__actions {
  display: flex;
  justify-content: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-6);
}

.chef-career-hero__actions .btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.chef-career-hero__actions .btn svg,
.chef-career-hero__actions .btn i {
  width: 18px;
  height: 18px;
}

.chef-career-hero__pro-link {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.7);
}

.chef-career-hero__pro-link a {
  color: var(--color-gold);
  text-decoration: underline;
  font-weight: 600;
}

/* Stats Ribbon */
.chef-career-stats {
  padding: var(--space-8) 0;
  background-color: var(--color-white);
  border-bottom: 1px solid var(--color-charcoal-10);
}

.career-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
  text-align: center;
}

.career-stat-item h3 {
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  color: var(--color-terracotta);
  margin-bottom: var(--space-1);
}

.career-stat-item p {
  font-size: var(--text-sm);
  color: var(--color-charcoal-60);
  font-weight: 500;
}

/* Roadmap */
.career-roadmap-section {
  padding: var(--space-16) 0;
  background-color: var(--color-cream);
}

.career-roadmap-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
  margin-top: var(--space-10);
}

.career-roadmap-card {
  background-color: var(--color-white);
  border: 1px solid var(--color-charcoal-10);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  position: relative;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.career-roadmap-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-terracotta);
}

.career-step-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-terracotta);
  margin-bottom: var(--space-3);
}

.career-step-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: var(--color-terracotta-faint);
  color: var(--color-terracotta);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: var(--text-xs);
}

.career-roadmap-card h4 {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  color: var(--color-charcoal);
  margin-bottom: var(--space-3);
  font-weight: 600;
}

.career-roadmap-card p {
  color: var(--color-charcoal-60);
  font-size: var(--text-sm);
  line-height: 1.6;
  margin-bottom: var(--space-4);
  flex-grow: 1;
}

.career-roadmap-tags {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  border-top: 1px solid var(--color-charcoal-10);
  padding-top: var(--space-3);
}

.career-roadmap-tags li {
  font-size: var(--text-xs);
  color: var(--color-charcoal-80);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.career-roadmap-tags li i,
.career-roadmap-tags li svg {
  width: 14px;
  height: 14px;
  color: var(--color-green);
  flex-shrink: 0;
}

/* Pillars Section */
.career-pillars-section {
  padding: var(--space-16) 0;
  background-color: var(--color-white);
}

.career-pillars-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
  margin-top: var(--space-10);
}

.career-pillar-card {
  padding: var(--space-8);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-charcoal-10);
  background-color: var(--color-cream);
  display: flex;
  gap: var(--space-5);
  align-items: flex-start;
  transition: all var(--transition-fast);
}

.career-pillar-card:hover {
  background-color: var(--color-white);
  border-color: var(--color-terracotta);
  box-shadow: var(--shadow-md);
}

.career-pillar-icon {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-md);
  background-color: var(--color-terracotta-faint);
  color: var(--color-terracotta);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.career-pillar-icon svg,
.career-pillar-icon i {
  width: 26px;
  height: 26px;
}

.career-pillar-info h4 {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  color: var(--color-charcoal);
  margin-bottom: var(--space-2);
}

.career-pillar-info p {
  color: var(--color-charcoal-60);
  font-size: var(--text-sm);
  line-height: 1.65;
}

/* Programs Section */
.career-programs-section {
  padding: var(--space-16) 0;
  background-color: var(--color-cream);
}

.career-programs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  margin-top: var(--space-10);
}

.career-program-card {
  background-color: var(--color-white);
  border: 1px solid var(--color-charcoal-10);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  transition: all var(--transition-fast);
}

.career-program-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-terracotta);
}

.career-program-body {
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.career-program-badge {
  display: inline-block;
  align-self: flex-start;
  padding: 0.25rem 0.65rem;
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  background-color: var(--color-gold-faint);
  color: var(--color-gold);
  margin-bottom: var(--space-3);
}

.career-program-body h4 {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  color: var(--color-charcoal);
  margin-bottom: var(--space-2);
}

.career-program-body p {
  color: var(--color-charcoal-60);
  font-size: var(--text-sm);
  line-height: 1.6;
  margin-bottom: var(--space-6);
  flex-grow: 1;
}

.career-program-body .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}

/* FAQ Section */
.career-faq-section {
  padding: var(--space-16) 0;
  background-color: var(--color-white);
}

.career-faq-container {
  max-width: 820px;
  margin: var(--space-10) auto 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.career-faq-item {
  border: 1px solid var(--color-charcoal-10);
  border-radius: var(--radius-md);
  background-color: var(--color-cream);
  overflow: hidden;
  transition: all var(--transition-fast);
}

.career-faq-item.active {
  border-color: var(--color-terracotta);
  background-color: var(--color-white);
}

.career-faq-question {
  width: 100%;
  padding: var(--space-5) var(--space-6);
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-charcoal);
}

.career-faq-question i,
.career-faq-question svg {
  width: 20px;
  height: 20px;
  color: var(--color-terracotta);
  transition: transform var(--transition-fast);
}

.career-faq-item.active .career-faq-question i,
.career-faq-item.active .career-faq-question svg {
  transform: rotate(180deg);
}

.career-faq-answer {
  display: none;
  padding: 0 var(--space-6) var(--space-5);
  color: var(--color-charcoal-60);
  font-size: var(--text-sm);
  line-height: 1.7;
}

.career-faq-item.active .career-faq-answer {
  display: block;
}

/* CTA Card */
.career-cta-section {
  padding: var(--space-16) 0;
  background-color: var(--color-cream);
}

.career-cta-card {
  background: linear-gradient(135deg, var(--color-charcoal) 0%, var(--color-charcoal-80) 100%);
  border-radius: var(--radius-xl);
  padding: var(--space-12) var(--space-8);
  text-align: center;
  color: var(--color-white);
  box-shadow: var(--shadow-xl);
  max-width: 900px;
  margin: 0 auto;
}

.career-cta-card h2 {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 5vw, 3rem);
  margin-bottom: var(--space-4);
  color: var(--color-white);
}

.career-cta-card p {
  font-size: var(--text-base);
  color: rgba(255, 255, 255, 0.85);
  max-width: 600px;
  margin: 0 auto var(--space-8);
  line-height: 1.65;
}

.career-cta-actions {
  display: flex;
  justify-content: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.career-cta-actions .btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.career-cta-actions .btn svg,
.career-cta-actions .btn i {
  width: 18px;
  height: 18px;
}

@media (max-width: 992px) {
  .beginner-career-card {
    grid-template-columns: 1fr;
  }
  .career-roadmap-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .career-pillars-grid {
    grid-template-columns: 1fr;
  }
  .career-programs-grid {
    grid-template-columns: 1fr;
  }
  .career-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .career-roadmap-grid {
    grid-template-columns: 1fr;
  }
  .career-stats-grid {
    grid-template-columns: 1fr;
  }
  .chef-career-hero__actions,
  .beginner-career-actions,
  .career-cta-actions {
    flex-direction: column;
  }
  .chef-career-hero__actions .btn,
  .beginner-career-actions .btn,
  .career-cta-actions .btn {
    width: 100%;
    justify-content: center;
  }
}

/* ═══════════ Automated Payment Modal ═══════════ */
.payment-methods-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.payment-method-option {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 0.875rem 1rem;
  border: 1.5px solid var(--color-charcoal-20);
  border-radius: var(--radius-md);
  background: var(--color-white);
  cursor: pointer;
  transition: all 0.2s ease;
}

.payment-method-option:hover {
  border-color: var(--color-terracotta-light);
  background: var(--color-terracotta-faint);
}

.payment-method-option.selected {
  border-color: var(--color-terracotta);
  background: var(--color-terracotta-faint);
  box-shadow: 0 0 0 1px var(--color-terracotta);
}

.payment-method-option input[type="radio"] {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  accent-color: var(--color-terracotta);
}

.payment-method-title {
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--color-charcoal);
  margin-bottom: 0.25rem;
}

.payment-method-desc {
  font-size: var(--text-xs);
  color: var(--color-charcoal-60);
}

.payment-phone-input-wrap {
  display: flex;
  align-items: center;
  border: 1px solid var(--color-charcoal-20);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-white);
}

.payment-phone-input-wrap:focus-within {
  border-color: var(--color-terracotta);
  box-shadow: 0 0 0 2px var(--color-terracotta-faint);
}

.payment-phone-prefix {
  padding: 0.75rem 0.875rem;
  background: var(--color-cream);
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--color-charcoal);
  border-right: 1px solid var(--color-charcoal-20);
  user-select: none;
}

.payment-phone-input {
  flex: 1;
  border: none;
  outline: none;
  padding: 0.75rem;
  font-size: var(--text-sm);
  color: var(--color-charcoal);
  background: transparent;
}

.payment-status-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1.5rem;
  background: var(--color-cream);
  border-radius: var(--radius-md);
  margin-bottom: 1.25rem;
}

.payment-spinner {
  width: 44px;
  height: 44px;
  border: 4px solid var(--color-charcoal-20);
  border-top-color: var(--color-terracotta);
  border-radius: 50%;
  animation: paymentSpin 0.9s linear infinite;
  margin-bottom: 1rem;
}

@keyframes paymentSpin {
  to { transform: rotate(360deg); }
}

.payment-status-title {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  color: var(--color-charcoal);
  margin-bottom: 0.5rem;
}

.payment-status-subtitle {
  font-size: var(--text-sm);
  color: var(--color-charcoal-60);
  max-width: 320px;
  line-height: 1.4;
}

.payment-live-indicator {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
  padding: 0.35rem 0.75rem;
  background: var(--color-terracotta-faint);
  color: var(--color-terracotta-dark);
  border-radius: 9999px;
  font-size: var(--text-xs);
  font-weight: 600;
}

.payment-live-dot {
  width: 8px;
  height: 8px;
  background: var(--color-terracotta);
  border-radius: 50%;
  animation: paymentPulse 1.4s ease-in-out infinite;
}

@keyframes paymentPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.85); }
}

.payment-success-icon {
  width: 50px;
  height: 50px;
  background: var(--color-green-faint);
  color: var(--color-green);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}

@media (max-width: 480px) {
  .payment-methods-grid {
    grid-template-columns: 1fr;
  }
}

/* ══════════════════════════════════════════════════════════════════
   FLOATING LEFT NAVIGATION DOCK
   Frosted glassmorphism effect with translucent pill items
   ══════════════════════════════════════════════════════════════════ */
.mobile-floating-dock,
.customer-dock {
  display: none;
}

@media (max-width: 768px) {
  .mobile-floating-dock,
  .customer-dock {
    display: block;
    position: fixed;
    left: 8px;
    left: calc(8px + env(safe-area-inset-left));
    top: 50%;
    transform: translateY(-50%);
    z-index: 1040;
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.04), inset 0 0 0 1px rgba(255, 255, 255, 0.4);
    padding: 8px 6px;
    transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s ease, background 0.3s ease;
    user-select: none;
    -webkit-user-select: none;
  }
}

.mobile-floating-dock.mobile-dock--dimmed,
.customer-dock.mobile-dock--dimmed {
  opacity: 0.55;
  transform: translateY(-50%);
}

.mobile-floating-dock:hover,
.mobile-floating-dock:focus-within,
.mobile-floating-dock:active,
.mobile-floating-dock.mobile-dock--expanded,
.customer-dock:hover,
.customer-dock:focus-within,
.customer-dock:active,
.customer-dock.mobile-dock--expanded {
  opacity: 1 !important;
  transform: translateY(-50%) scale(1.02) !important;
  background: rgba(255, 255, 255, 0.78) !important;
}

.mobile-dock__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.mobile-dock__item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.mobile-dock__link,
.customer-dock__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  padding: 7px 6px;
  border-radius: 14px;
  min-width: 54px;
  min-height: 52px;
  color: #1e293b;
  background: rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03), inset 0 1px 0 rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  -webkit-tap-highlight-color: transparent;
  box-sizing: border-box;
}

.mobile-dock__link i,
.customer-dock__link i {
  font-size: 1.25rem;
  line-height: 1;
  margin-bottom: 2px;
  color: #1e293b;
  transition: transform 0.2s ease, color 0.2s ease;
}

.mobile-dock__label,
.customer-dock__label {
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.1;
  text-align: center;
  white-space: nowrap;
  color: #334155;
  transition: color 0.2s ease;
}

.mobile-dock__link:hover,
.mobile-dock__link:focus-visible,
.customer-dock__link:hover,
.customer-dock__link:focus-visible {
  color: #c89e37;
  background: rgba(212, 175, 55, 0.18);
  border-color: rgba(212, 175, 55, 0.35);
  box-shadow: 0 2px 8px rgba(212, 175, 55, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.mobile-dock__link:hover i,
.mobile-dock__link:focus-visible i,
.customer-dock__link:hover i,
.customer-dock__link:focus-visible i {
  color: #c89e37;
}

.mobile-dock__link:hover .mobile-dock__label,
.mobile-dock__link:focus-visible .mobile-dock__label,
.customer-dock__link:hover .customer-dock__label,
.customer-dock__link:focus-visible .customer-dock__label {
  color: #c89e37;
}

.mobile-dock__link:active,
.customer-dock__link:active {
  transform: scale(0.96);
  background: rgba(212, 175, 55, 0.24);
}

/* Active Page: Gold Translucent Glass Pill Highlight */
.mobile-dock__link.active,
.customer-dock__link.active {
  color: #a87915;
  background: rgba(212, 175, 55, 0.25);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-color: rgba(212, 175, 55, 0.45);
  box-shadow: 0 2px 8px rgba(212, 175, 55, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.4);
}

.mobile-dock__link.active i,
.customer-dock__link.active i {
  color: #a87915;
}

.mobile-dock__link.active .mobile-dock__label,
.customer-dock__link.active .customer-dock__label {
  color: #92660a;
  font-weight: 700;
}

/* WhatsApp Concierge Accent */
.mobile-dock__link--whatsapp,
.customer-dock__link--whatsapp {
  background: rgba(37, 211, 102, 0.12);
  border-color: rgba(37, 211, 102, 0.3);
}

.mobile-dock__link--whatsapp i,
.customer-dock__link--whatsapp i {
  color: #16a34a;
}

.mobile-dock__link--whatsapp .mobile-dock__label,
.customer-dock__link--whatsapp .customer-dock__label {
  color: #15803d;
}

.mobile-dock__link--whatsapp:hover,
.mobile-dock__link--whatsapp:focus-visible,
.customer-dock__link--whatsapp:hover,
.customer-dock__link--whatsapp:focus-visible {
  background: rgba(37, 211, 102, 0.22);
  border-color: rgba(37, 211, 102, 0.45);
}

/* ─── Narrow Mobile Screens (<= 480px) Fine-Tuning ─── */
@media (max-width: 480px) {
  .mobile-floating-dock,
  .customer-dock {
    left: 5px;
    left: calc(5px + env(safe-area-inset-left));
    padding: 6px 4px;
    border-radius: 18px;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.35);
    opacity: 0.88;
    transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1), transform 0.25s ease, background 0.25s ease;
  }

  .mobile-dock__link,
  .customer-dock__link {
    min-width: 46px;
    min-height: 46px;
    padding: 5px 3px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.45);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.4);
  }

  .mobile-dock__link i,
  .customer-dock__link i {
    font-size: 1.15rem;
    margin-bottom: 2px;
  }

  .mobile-dock__label,
  .customer-dock__label {
    font-size: 0.62rem;
  }

  .mobile-floating-dock.mobile-dock--dimmed,
  .customer-dock.mobile-dock--dimmed {
    opacity: 0.55;
    transform: translateY(-50%);
  }

  .mobile-floating-dock:hover,
  .mobile-floating-dock:focus-within,
  .mobile-floating-dock:active,
  .mobile-floating-dock.mobile-dock--expanded,
  .customer-dock:hover,
  .customer-dock:focus-within,
  .customer-dock:active,
  .customer-dock.mobile-dock--expanded {
    opacity: 1 !important;
    transform: translateY(-50%) scale(1.02) !important;
    background: rgba(255, 255, 255, 0.78) !important;
  }

  /* Compact WhatsApp floating button on small screens */
  .whatsapp-float {
    width: 46px !important;
    height: 46px !important;
    font-size: 22px !important;
    bottom: 16px !important;
    right: 12px !important;
    z-index: 990 !important;
  }

  /* Customer portal container symmetrical margins & padding (<= 480px) */
  .customer-portal-container {
    padding-left: 0.875rem !important;
    padding-right: 0.875rem !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .customer-portal-section,
  .section:has(.customer-portal-container),
  section:has(.customer-portal-container),
  body[data-page="dashboard"] .section,
  body[data-page^="customer-"] .section {
    padding-top: calc(var(--nav-height) + 1rem) !important;
  }

  .customer-content,
  .customer-messages-layout {
    padding-top: calc(var(--nav-height) + 1rem) !important;
  }

  .customer-welcome-banner {
    padding: 1.25rem 1rem !important;
  }

  .extracted-style-51 {
    padding: 1.25rem 0.75rem !important;
  }

  .portal-input {
    width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* ============================================================
   CHEF & ADMIN PORTALS — MOBILE RESPONSIVENESS & TOUCH TARGETS
   ============================================================ */

/* General Portal Element Helpers */
.chef-avatar,
.admin-avatar {
  object-fit: cover;
}

.admin-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
}

.badge--cyan,
.badge--reviewed {
  background-color: #e0f7fa;
  color: #006064;
  border: 1px solid rgba(0, 96, 100, 0.2);
}

.btn-reject {
  border-color: var(--color-terracotta) !important;
  color: var(--color-terracotta) !important;
}

.btn-make-private {
  border-color: var(--color-charcoal) !important;
  color: var(--color-charcoal) !important;
}

.portal-doc-preview-img {
  max-width: 100%;
  max-height: 500px;
  object-fit: contain;
}

.portal-doc-preview-iframe {
  width: 100%;
  height: 600px;
  border: none;
}

/* Portal Offcanvas Backdrop */
.portal-sidebar-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 998;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.portal-sidebar-backdrop.active {
  opacity: 1;
  pointer-events: auto;
}

body.portal-drawer-open {
  overflow: hidden;
}

/* Responsive Media Query for Screens < 992px (Chef Portal Sidebar) */
@media (max-width: 992px) {
  .chef-sidebar {
    width: 280px;
    max-width: 85vw;
    z-index: 1000;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.2);
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .chef-sidebar.open {
    transform: translateX(0);
  }

  .chef-main {
    margin-left: 0 !important;
  }

  .chef-sidebar-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    background: transparent;
    border: 1px solid var(--color-charcoal-10);
    cursor: pointer;
  }
}

/* Responsive Media Query for Screens < 768px (Both Portals) */
@media (max-width: 768px) {
  /* Admin Sidebar Drawer */
  .admin-sidebar {
    top: 0;
    left: 0;
    bottom: 0;
    height: 100vh;
    height: 100dvh;
    width: 280px;
    max-width: 85vw;
    z-index: 1000;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.2);
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .admin-sidebar.open {
    transform: translateX(0);
  }

  .admin-sidebar__footer,
  .chef-sidebar__footer {
    padding: var(--space-3) var(--space-4) !important;
    flex-shrink: 0;
  }

  .admin-main {
    margin-left: 0 !important;
  }

  .admin-sidebar-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    background: transparent;
    border: 1px solid var(--color-charcoal-10);
    cursor: pointer;
  }

  /* Portal Header & Content Compact Padding */
  .chef-content,
  .admin-content {
    padding: 1rem 0.875rem !important;
  }

  .chef-header,
  .admin-header {
    padding: 0.75rem 0.875rem !important;
  }

  .chef-header__left,
  .admin-header__left {
    min-width: 0;
    flex: 1;
  }

  .chef-header__right,
  .admin-header__right {
    gap: 0.5rem !important;
    flex-shrink: 0;
  }

  .chef-header__title,
  .admin-header__title {
    font-size: 1.125rem !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 140px;
  }

  .chef-info,
  .admin-info {
    display: none !important;
  }

  .chef-avatar,
  .admin-avatar {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
  }

  .admin-header__logout,
  .chef-header__logout {
    padding: 0 !important;
    border-radius: 50% !important;
    width: 36px !important;
    height: 36px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: var(--color-charcoal-10) !important;
    color: var(--color-charcoal) !important;
    flex-shrink: 0;
  }

  .admin-header__logout-text,
  .chef-header__logout-text {
    display: none !important;
  }

  /* 4-Column KPI & Metric Cards -> 2 Columns */
  .admin-stats-grid,
  .dashboard-stats {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.75rem !important;
    margin-bottom: 1.25rem !important;
  }

  .admin-stat-card,
  .stat-card {
    padding: 0.875rem 0.75rem !important;
    border-radius: var(--radius-md);
  }

  .admin-stat-title,
  .stat-card__label {
    font-size: 0.75rem !important;
    line-height: 1.2 !important;
    margin-bottom: 0.25rem !important;
  }

  .admin-stat-value,
  .stat-card__value {
    font-size: 1.25rem !important;
    line-height: 1.2 !important;
  }

  .stat-card__icon {
    width: 32px !important;
    height: 32px !important;
  }

  .stat-card__icon i {
    width: 16px !important;
    height: 16px !important;
  }

  /* Responsive Tables -> Mobile Cards */
  .admin-table,
  .chef-table {
    display: block !important;
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    border: none !important;
  }

  .admin-table thead,
  .chef-table thead {
    display: none !important;
  }

  .admin-table tbody,
  .chef-table tbody {
    display: block !important;
    width: 100% !important;
  }

  .admin-table tr,
  .chef-table tr {
    display: block !important;
    width: 100% !important;
    background: var(--color-white) !important;
    border: 1px solid var(--color-charcoal-10) !important;
    border-radius: var(--radius-md) !important;
    margin-bottom: 0.875rem !important;
    padding: 0.875rem 1rem !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
    box-sizing: border-box !important;
  }

  .admin-table td,
  .chef-table td {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    text-align: right !important;
    padding: 0.5rem 0 !important;
    border-bottom: 1px dashed var(--color-charcoal-10) !important;
    font-size: var(--text-sm) !important;
    box-sizing: border-box !important;
    width: 100% !important;
    min-height: 38px;
  }

  .admin-table td:last-child,
  .chef-table td:last-child {
    border-bottom: none !important;
    padding-top: 0.75rem !important;
    margin-top: 0.25rem !important;
  }

  .admin-table td[data-label]::before,
  .chef-table td[data-label]::before {
    content: attr(data-label);
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-charcoal-60);
    text-align: left;
    margin-right: 0.75rem;
    flex-shrink: 0;
  }

  /* Empty State Rows */
  .admin-table td[colspan],
  .chef-table td[colspan],
  .admin-table td.admin-empty-state,
  .chef-table td.admin-empty-state {
    display: block !important;
    text-align: center !important;
    border: none !important;
    padding: 1.5rem 0.5rem !important;
  }

  .admin-table td[colspan]::before,
  .chef-table td[colspan]::before {
    display: none !important;
  }

  /* Table Action Buttons Flex & Wrap */
  .admin-table td[data-label*="Action"],
  .admin-table td[data-label*="action"],
  .chef-table td[data-label*="Action"],
  .chef-table td[data-label*="action"] {
    justify-content: flex-end !important;
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
  }

  /* Table Wrapper Adjustments for Floating Cards */
  .admin-table-wrapper,
  .table-container {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    overflow: visible !important;
  }

  .admin-table-header,
  .table-header {
    background: var(--color-white) !important;
    border-radius: var(--radius-md) !important;
    margin-bottom: 0.875rem !important;
    padding: 0.875rem 1rem !important;
    border: 1px solid var(--color-charcoal-10) !important;
    box-shadow: var(--shadow-sm) !important;
  }

  /* Table Header Stacking */
  .admin-flex-between,
  .table-header {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.75rem !important;
  }

  .admin-flex-between > div,
  .table-header > div {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
    width: 100% !important;
  }

  .admin-search-wide,
  .admin-search-input {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* 44px Minimum Touch Targets on Action Buttons */
  .admin-table td .btn,
  .chef-table td .btn,
  .admin-table td a.btn,
  .chef-table td a.btn,
  .booking-actions .btn,
  .admin-table-header .btn,
  .table-header .btn,
  .btn--sm,
  .admin-btn-xs {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0.625rem 1.125rem !important;
    font-size: var(--text-sm) !important;
    box-sizing: border-box !important;
  }

  /* Booking Card Responsive Stacking (Chef Portal) */
  .booking-card {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 1rem !important;
    padding: 1rem !important;
  }

  .booking-meta {
    flex-direction: column !important;
    gap: 0.35rem !important;
  }

  .booking-actions {
    display: flex !important;
    gap: 0.5rem !important;
    width: 100% !important;
  }

  .booking-actions .btn {
    flex: 1 !important;
  }

  /* ═══════════ Customer Bookings & Dashboard Portal Mobile Responsiveness ═══════════ */
  .customer-portal-container {
    padding-top: 0 !important;
    padding-bottom: 2.5rem !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .customer-portal-section,
  .section:has(.customer-portal-container),
  section:has(.customer-portal-container),
  body[data-page="dashboard"] .section,
  body[data-page^="customer-"] .section {
    padding-top: calc(var(--nav-height) + 1.25rem) !important;
    padding-bottom: 2rem !important;
  }

  .customer-content,
  .customer-messages-layout {
    padding-top: calc(var(--nav-height) + 1.25rem) !important;
  }

  /* Filter Tabs: Horizontal touch scroll, hide unsightly scrollbars */
  .customer-filter-tabs {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    gap: var(--space-2) !important;
    margin-bottom: var(--space-4) !important;
    padding-bottom: 4px !important;
    padding-top: 2px !important;
    padding-left: 2px !important;
    padding-right: 2px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .customer-filter-tabs::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }

  .customer-filter-tab {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 44px !important;
    padding: 0.5rem 1rem !important;
    font-size: var(--text-sm) !important;
    box-sizing: border-box !important;
    touch-action: manipulation;
  }

  /* Bookings List */
  #bookingsList,
  .customer-booking-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
    width: 100% !important;
  }

  /* Booking Cards: Column layout for mobile screens */
  .customer-booking-card {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 1rem !important;
    padding: 1.125rem 1rem !important;
    box-sizing: border-box !important;
    width: 100% !important;
    border-radius: var(--radius-md) !important;
    background: var(--color-white) !important;
    border: 1px solid var(--color-charcoal-10) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
  }

  /* Left Info Section: Graceful mobile alignment */
  .customer-booking-card__left {
    display: flex !important;
    align-items: flex-start !important;
    gap: 0.875rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .customer-booking-card__avatar {
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    flex-shrink: 0 !important;
  }

  .customer-booking-card__info {
    flex: 1 !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.25rem !important;
  }

  .customer-booking-card__chef {
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    color: var(--color-charcoal) !important;
    line-height: 1.3 !important;
    word-break: break-word !important;
  }

  .customer-booking-card__service {
    font-size: var(--text-xs) !important;
    font-weight: 600 !important;
    color: var(--color-terracotta) !important;
    text-transform: capitalize !important;
  }

  .customer-booking-card__meta {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: var(--text-xs) !important;
    color: var(--color-charcoal-60) !important;
    margin-top: 2px !important;
    word-break: break-word !important;
    line-height: 1.35 !important;
  }

  .customer-booking-card__meta i {
    width: 14px !important;
    height: 14px !important;
    flex-shrink: 0 !important;
    color: var(--color-terracotta) !important;
  }

  /* Right Action Section: Stack or spread status badge, amount, and action buttons cleanly */
  .customer-booking-card__right {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    gap: 0.75rem !important;
    border-top: 1px solid var(--color-charcoal-10) !important;
    padding-top: 0.875rem !important;
    margin-top: 0.25rem !important;
    box-sizing: border-box !important;
  }

  .customer-booking-card__right br {
    display: none !important;
  }

  .customer-booking-card__right .badge {
    order: 1 !important;
    margin: 0 !important;
    font-size: var(--text-xs) !important;
    padding: 0.35rem 0.75rem !important;
  }

  .customer-booking-card__right .customer-booking-card__amount {
    order: 2 !important;
    align-items: flex-end !important;
    text-align: right !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
  }

  .customer-booking-card__right .customer-booking-card__amount-label {
    font-size: 0.7rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.03em !important;
    color: var(--color-charcoal-60) !important;
  }

  .customer-booking-card__right .customer-booking-card__amount-value {
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    color: var(--color-charcoal) !important;
    line-height: 1.2 !important;
  }

  /* Action Buttons: at least 44px touch targets and full-width or side-by-side flex */
  .customer-booking-card__right .btn {
    order: 3 !important;
    flex: 1 1 calc(50% - 0.5rem) !important;
    min-height: 44px !important;
    padding: 0.625rem 1rem !important;
    font-size: var(--text-sm) !important;
    font-weight: 600 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    touch-action: manipulation;
  }

  /* Modals & Forms Single-Column Stacking */
  .modal-overlay {
    padding: 1rem !important;
    align-items: flex-end !important;
  }

  .modal-overlay:has(.booking-modal),
  #depositModal {
    align-items: center !important;
    justify-content: center !important;
    padding: 1rem 0.5rem !important;
  }

  .modal-content {
    width: 100% !important;
    max-width: 100% !important;
    padding: 1.5rem 1.25rem !important;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
    max-height: 88vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  /* Deposit Payment Modal (Customer Portal): fits comfortably within mobile screens */
  .booking-modal {
    width: 100% !important;
    max-width: 92vw !important;
    padding: 1.25rem !important;
    border-radius: var(--radius-lg) !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    margin: auto !important;
    box-sizing: border-box !important;
  }

  .booking-modal__header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 1rem !important;
  }

  .booking-modal__header h3 {
    font-size: 1.25rem !important;
    margin: 0 !important;
  }

  .booking-modal__close {
    width: 44px !important;
    height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.75rem !important;
    padding: 0 !important;
    touch-action: manipulation;
  }

  .booking-modal .btn-block,
  .booking-modal #submitPaymentBtn,
  .booking-modal #cancelPaymentPollingBtn {
    min-height: 44px !important;
    font-size: var(--text-sm) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    touch-action: manipulation;
  }

  .booking-modal .payment-phone-input {
    font-size: 16px !important;
  }

  .customer-deposit-summary {
    padding: 0.75rem !important;
  }

  .portal-form-grid,
  .admin-grid-2,
  .admin-grid-3,
  .extracted-style-102 {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  /* Calendar Mobile Cells */
  .calendar-cell {
    min-height: 54px !important;
    padding: 2px !important;
  }

  .calendar-day-header {
    padding: 4px 2px !important;
    font-size: 10px !important;
  }

  .calendar-event {
    font-size: 9px !important;
    padding: 2px 3px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}

/* Mobile Phones Action Button Full-Width & Modal Adjustments */
@media (max-width: 480px) {
  .customer-booking-card__right .btn {
    flex: 1 1 100% !important;
    width: 100% !important;
  }

  .booking-modal .payment-methods-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Extra Small Screens (< 380px) */
@media (max-width: 380px) {
  .customer-portal-container {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .admin-stats-grid,
  .dashboard-stats {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================================
   ZERO INLINE CSS COMPLIANCE CLASSES
   ============================================================ */
.cart-icon-link {
  position: relative;
  margin-right: 15px;
  color: var(--color-charcoal);
  display: none;
  align-items: center;
}
.cart-icon-badge {
  position: absolute;
  top: -8px;
  right: -12px;
  font-size: 0.65rem;
  padding: 2px 6px;
}
.navbar__user-item {
  list-style: none;
}
.navbar__user-toggle {
  display: flex;
  align-items: center;
  gap: 5px;
  text-decoration: none;
}
.navbar__user-icon {
  width: 16px;
  height: 16px;
}
.navbar__user-menu {
  right: 0;
  left: auto;
  min-width: 160px;
  margin-top: 10px;
}
.navbar__user-signout {
  color: var(--color-primary);
  font-weight: 600;
}
.modal--compact {
  max-width: 450px !important;
}
.auth-modal-switch-wrap {
  margin-top: 15px;
}
.auth-modal-switch-link {
  color: var(--color-primary);
  font-size: 0.875rem;
  text-decoration: underline;
}
.auth-modal-error-box {
  color: var(--color-terracotta);
  margin-top: 15px;
  text-align: center;
}
.form-group--relative {
  position: relative;
}
.portal-input--disabled {
  background-color: var(--color-charcoal-10);
}
.service-not-found {
  text-align: center;
  padding: 100px;
}
.service-program-card-img {
  object-fit: cover;
  height: 250px;
  width: 100%;
}
.service-card-desc {
  min-height: 60px;
  margin-bottom: 24px;
}
.rounded-sm {
  border-radius: 8px;
}

/* ============================================================
   JOIN AS CHEF — Comprehensive Upgrade Styles
   Luxury Culinary Aesthetic | Desktop & Mobile Responsive
   ============================================================ */

/* ─── Hero Enhancements ─── */
.chef-join-hero {
  position: relative;
  background: radial-gradient(circle at top right, rgba(217, 93, 57, 0.12), transparent 50%), var(--color-charcoal);
  padding: 5rem 0 6rem;
}

.chef-join-hero__content {
  display: flex;
  flex-direction: column;
}

.chef-join-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 1rem;
  background: rgba(217, 93, 57, 0.18);
  border: 1px solid rgba(217, 93, 57, 0.35);
  border-radius: var(--radius-full);
  color: var(--color-terracotta-light);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 1.5rem;
  width: fit-content;
}

.chef-join-hero__badge i,
.chef-join-hero__badge svg {
  width: 16px;
  height: 16px;
}

.chef-trust-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
  margin-bottom: 1.5rem;
}

.chef-trust-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  padding: 0.45rem 0.85rem;
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.9);
  font-weight: 500;
}

.chef-trust-pill i,
.chef-trust-pill svg {
  width: 15px;
  height: 15px;
  color: var(--color-gold);
}

.chef-join-hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.chef-join-hero__floating-card {
  position: absolute;
  bottom: 24px;
  left: 24px;
  right: 24px;
  background: rgba(23, 23, 23, 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

.chef-floating-card__icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background: var(--color-terracotta);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.chef-floating-card__icon i,
.chef-floating-card__icon svg {
  width: 24px;
  height: 24px;
}

.chef-floating-card__body {
  flex: 1;
}

.chef-floating-card__title {
  display: block;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 600;
}

.chef-floating-card__val {
  display: block;
  font-size: var(--text-lg);
  font-weight: 800;
  color: var(--color-white);
  line-height: 1.2;
}

.chef-floating-card__val small {
  font-size: var(--text-xs);
  font-weight: 400;
  color: rgba(255, 255, 255, 0.6);
}

.chef-floating-card__stars {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 0.35rem;
  color: var(--color-gold);
  font-size: var(--text-xs);
}

.chef-floating-card__stars i,
.chef-floating-card__stars svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

.chef-floating-card__stars span {
  margin-left: 0.35rem;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 600;
}

/* ─── Benefits Grid ─── */
.chef-benefits-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.75rem;
  margin-top: 3rem;
}

.chef-benefits-grid .benefit-card {
  background: var(--color-white);
  border: 1px solid var(--color-charcoal-10);
  border-radius: var(--radius-xl);
  padding: 2.25rem;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.chef-benefits-grid .benefit-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-terracotta);
}

/* ─── Earnings Calculator Section ─── */
.chef-calculator-section {
  padding: 6rem 0;
  background: var(--color-cream);
  position: relative;
}

.chef-calc-card {
  background: var(--color-white);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-charcoal-10);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  margin-top: 3.5rem;
}

.chef-calc-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
}

.chef-calc-controls {
  padding: 3rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  border-right: 1px solid var(--color-charcoal-10);
}

.chef-calc-row {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.chef-calc-label {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-charcoal);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.chef-calc-currency-toggle {
  display: inline-flex;
  background: var(--color-cream-dark);
  padding: 4px;
  border-radius: var(--radius-md);
  width: fit-content;
}

.chef-calc-currency-btn {
  padding: 0.5rem 1.25rem;
  border-radius: var(--radius-sm);
  border: none;
  background: none;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-charcoal-60);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.chef-calc-currency-btn.active {
  background: var(--color-white);
  color: var(--color-terracotta);
  box-shadow: var(--shadow-sm);
}

.chef-calc-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.chef-calc-preset-btn {
  padding: 0.5rem 0.85rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-charcoal-20);
  background: var(--color-white);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-charcoal-60);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.chef-calc-preset-btn:hover {
  border-color: var(--color-terracotta);
  color: var(--color-terracotta);
}

.chef-calc-preset-btn.active {
  background: var(--color-terracotta-faint);
  border-color: var(--color-terracotta);
  color: var(--color-terracotta);
  font-weight: 700;
}

.chef-calc-slider-group {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.chef-calc-slider-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.chef-calc-slider-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-charcoal);
}

.chef-calc-slider-title i,
.chef-calc-slider-title svg {
  width: 18px;
  height: 18px;
  color: var(--color-terracotta);
}

.chef-calc-slider-value {
  font-size: var(--text-lg);
  font-weight: 800;
  color: var(--color-terracotta);
  background: var(--color-terracotta-faint);
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-md);
  border: 1px solid rgba(217, 93, 57, 0.2);
}

.chef-calc-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--color-charcoal-10);
  outline: none;
  margin: 0.5rem 0;
  cursor: pointer;
}

.chef-calc-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--color-terracotta);
  border: 3px solid var(--color-white);
  box-shadow: var(--shadow-md);
  cursor: grab;
  transition: transform var(--transition-fast);
}

.chef-calc-slider::-webkit-slider-thumb:active {
  cursor: grabbing;
  transform: scale(1.15);
}

.chef-calc-slider::-moz-range-thumb {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--color-terracotta);
  border: 3px solid var(--color-white);
  box-shadow: var(--shadow-md);
  cursor: grab;
}

.chef-calc-slider-ticks {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-xs);
  color: var(--color-charcoal-40);
  font-weight: 500;
}

/* Results Board */
.chef-calc-results {
  background: linear-gradient(180deg, #1c1c1c 0%, #111111 100%);
  color: var(--color-white);
  padding: 3rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
}

.chef-calc-results-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--color-gold);
  background: rgba(229, 167, 42, 0.15);
  padding: 0.4rem 0.85rem;
  border-radius: var(--radius-full);
  border: 1px solid rgba(229, 167, 42, 0.25);
  width: fit-content;
}

.chef-calc-results-badge i,
.chef-calc-results-badge svg {
  width: 14px;
  height: 14px;
}

.chef-calc-main-stat {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.chef-calc-stat-caption {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.7);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.chef-calc-stat-hero {
  font-family: var(--font-heading);
  font-size: 3.5rem;
  font-weight: 700;
  line-height: 1;
  color: var(--color-white);
  letter-spacing: -1px;
}

.chef-calc-stat-sub {
  font-size: var(--text-xs);
  color: var(--color-gold);
  font-weight: 600;
}

.chef-calc-breakdown-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.chef-calc-mini-card {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.chef-calc-mini-label {
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}

.chef-calc-mini-val {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-white);
}

.text-green-bold {
  color: #4ade80 !important;
  font-weight: 700;
}

.chef-calc-guarantee-note {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.5;
  background: rgba(255, 255, 255, 0.04);
  padding: 0.85rem;
  border-radius: var(--radius-md);
  border: 1px dashed rgba(255, 255, 255, 0.15);
}

.chef-calc-guarantee-note i,
.chef-calc-guarantee-note svg {
  width: 16px;
  height: 16px;
  color: var(--color-gold);
  flex-shrink: 0;
  margin-top: 2px;
}

/* ─── Onboarding Roadmap Section ─── */
.chef-roadmap-section {
  padding: 6rem 0;
  background: var(--color-white);
  position: relative;
}

.chef-roadmap-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.75rem;
  margin-top: 4rem;
  position: relative;
}

.chef-roadmap-card {
  background: var(--color-cream);
  border: 1px solid var(--color-charcoal-10);
  border-radius: var(--radius-xl);
  padding: 2rem 1.75rem;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.chef-roadmap-card:hover {
  transform: translateY(-6px);
  border-color: var(--color-terracotta);
  box-shadow: var(--shadow-md);
}

.chef-roadmap-card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}

.chef-roadmap-num {
  font-family: var(--font-heading);
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1;
  color: var(--color-terracotta);
}

.chef-roadmap-duration {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: var(--text-xs);
  font-weight: 700;
  background: var(--color-white);
  padding: 0.35rem 0.65rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-charcoal-10);
  color: var(--color-charcoal-60);
}

.chef-roadmap-duration i,
.chef-roadmap-duration svg {
  width: 12px;
  height: 12px;
  color: var(--color-terracotta);
}

.chef-roadmap-card__icon {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-lg);
  background: var(--color-white);
  color: var(--color-terracotta);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
  box-shadow: var(--shadow-sm);
}

.chef-roadmap-card__icon i,
.chef-roadmap-card__icon svg {
  width: 24px;
  height: 24px;
}

.chef-roadmap-card__title {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-charcoal);
  margin-bottom: 0.75rem;
  line-height: 1.35;
}

.chef-roadmap-card__desc {
  font-size: var(--text-sm);
  color: var(--color-charcoal-60);
  line-height: 1.6;
  margin-bottom: 1.5rem;
  flex: 1;
}

.chef-roadmap-card__tag {
  display: inline-flex;
  align-items: center;
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-charcoal);
  background: var(--color-white);
  padding: 0.4rem 0.75rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-charcoal-10);
  width: fit-content;
}

.chef-roadmap-card__tag.active-tag {
  background: var(--color-green-faint);
  color: var(--color-green);
  border-color: rgba(49, 92, 69, 0.25);
}

.chef-roadmap-action {
  margin-top: 3.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.chef-roadmap-subtext {
  font-size: var(--text-sm);
  color: var(--color-charcoal-60);
}

/* ─── Chef Testimonials & Spotlight ─── */
.chef-spotlight-section {
  padding: 6rem 0;
  background: var(--color-cream);
}

.chef-spotlight-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.25rem;
  margin-top: 3.5rem;
}

.chef-spotlight-card {
  background: var(--color-white);
  border-radius: var(--radius-xl);
  border: 1.5px solid var(--color-charcoal-10);
  padding: 2.5rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.chef-spotlight-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.chef-spotlight-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-green);
  background: var(--color-green-faint);
  padding: 0.35rem 0.75rem;
  border-radius: var(--radius-full);
  border: 1px solid rgba(49, 92, 69, 0.2);
  width: fit-content;
}

.chef-spotlight-badge i,
.chef-spotlight-badge svg {
  width: 14px;
  height: 14px;
}

.chef-spotlight-quote {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--color-charcoal);
  font-style: italic;
  flex: 1;
  position: relative;
}

.chef-spotlight-metric {
  display: flex;
  align-items: center;
  justify-content: space-around;
  background: var(--color-cream);
  padding: 0.85rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-charcoal-10);
}

.chef-metric-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.chef-metric-num {
  font-size: 1.125rem;
  font-weight: 800;
  color: var(--color-terracotta);
}

.chef-metric-label {
  font-size: var(--text-xs);
  color: var(--color-charcoal-60);
  font-weight: 600;
  text-transform: uppercase;
}

.chef-metric-divider {
  width: 1px;
  height: 32px;
  background: var(--color-charcoal-20);
}

.chef-spotlight-author {
  display: flex;
  align-items: center;
  gap: 1rem;
  border-top: 1px solid var(--color-charcoal-10);
  padding-top: 1.25rem;
}

.chef-spotlight-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-terracotta), var(--color-charcoal));
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.125rem;
  flex-shrink: 0;
  box-shadow: var(--shadow-sm);
}

.chef-spotlight-author-info {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.chef-spotlight-name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-charcoal);
  margin: 0;
}

.chef-spotlight-role {
  font-size: var(--text-xs);
  color: var(--color-charcoal-60);
}

/* ─── Chef FAQ Accordion ─── */
.chef-faq-section {
  padding: 6rem 0;
  background: var(--color-white);
}

.chef-faq-container {
  max-width: 860px;
  margin: 3.5rem auto 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.chef-faq-item {
  border: 1px solid var(--color-charcoal-10);
  border-radius: var(--radius-lg);
  background: var(--color-cream);
  overflow: hidden;
  transition: all var(--transition-fast);
}

.chef-faq-item.active {
  border-color: var(--color-terracotta);
  background: var(--color-white);
  box-shadow: var(--shadow-sm);
}

.chef-faq-question {
  width: 100%;
  padding: 1.35rem 1.75rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--color-charcoal);
  transition: color var(--transition-fast);
}

.chef-faq-question:hover {
  color: var(--color-terracotta);
}

.chef-faq-question i,
.chef-faq-question svg {
  width: 22px;
  height: 22px;
  color: var(--color-terracotta);
  flex-shrink: 0;
  transition: transform var(--transition-fast);
}

.chef-faq-item.active .chef-faq-question i,
.chef-faq-item.active .chef-faq-question svg {
  transform: rotate(180deg);
}

.chef-faq-answer {
  display: none;
  padding: 0 1.75rem 1.5rem;
  color: var(--color-charcoal-60);
  font-size: 0.95rem;
  line-height: 1.75;
}

.chef-faq-item.active .chef-faq-answer {
  display: block;
}

.chef-faq-answer p {
  margin: 0;
}

/* ─── Bottom CTA Banner ─── */
.chef-bottom-cta {
  padding: 6rem 0;
  background: linear-gradient(135deg, #171717 0%, #2e2e2e 100%);
  color: var(--color-white);
  position: relative;
  overflow: hidden;
}

.chef-bottom-cta__inner {
  max-width: 760px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.chef-bottom-cta__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(217, 93, 57, 0.25);
  border: 1px solid rgba(217, 93, 57, 0.4);
  color: var(--color-terracotta-light);
  padding: 0.4rem 1rem;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 1.5rem;
}

.chef-bottom-cta__badge i,
.chef-bottom-cta__badge svg {
  width: 14px;
  height: 14px;
}

.chef-bottom-cta__title {
  font-family: var(--font-heading);
  font-size: 3.25rem;
  line-height: 1.15;
  color: var(--color-white);
  margin-bottom: 1.25rem;
}

.chef-bottom-cta__desc {
  font-size: 1.125rem;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.7;
  margin-bottom: 2.5rem;
}

.chef-bottom-cta__actions {
  display: flex;
  justify-content: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}

/* ─── Chef Auth Modal Refinements ─── */
.modal-chef-auth {
  max-width: 520px !important;
  max-height: 90vh;
  overflow-y: auto;
  border-radius: var(--radius-xl);
  padding: 2.5rem;
}

.chef-modal-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  background: var(--color-cream-dark);
  padding: 4px;
  border-radius: var(--radius-md);
  margin-bottom: 1.75rem;
}

.chef-modal-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-sm);
  border: none;
  background: none;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-charcoal-60);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.chef-modal-tab i,
.chef-modal-tab svg {
  width: 16px;
  height: 16px;
}

.chef-modal-tab.active {
  background: var(--color-white);
  color: var(--color-terracotta);
  box-shadow: var(--shadow-sm);
}

.chef-auth-error-msg {
  color: #dc2626;
  font-size: var(--text-sm);
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: var(--radius-md);
  padding: 0.75rem 1rem;
  margin-top: 1rem;
  display: none;
  text-align: center;
}

.chef-auth-success-msg {
  color: #15803d;
  font-size: var(--text-sm);
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: var(--radius-md);
  padding: 1rem 1.25rem;
  margin-top: 1rem;
  display: none;
  text-align: center;
  line-height: 1.6;
}

.auth-modal-switch-text {
  font-size: var(--text-sm);
  color: var(--color-charcoal-60);
  margin-right: 0.35rem;
}

.auth-modal-forgot-link {
  font-size: var(--text-xs);
  color: var(--color-charcoal-60);
  text-decoration: underline;
}

/* ─── Responsive Media Queries ─── */
@media (max-width: 1024px) {
  .chef-benefits-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .chef-roadmap-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .chef-spotlight-grid {
    grid-template-columns: 1fr;
  }
  .chef-calc-grid {
    grid-template-columns: 1fr;
  }
  .chef-calc-controls {
    border-right: none;
    border-bottom: 1px solid var(--color-charcoal-10);
    padding: 2rem;
  }
  .chef-calc-results {
    padding: 2rem;
  }
}

@media (max-width: 768px) {
  .chef-join-hero {
    padding: 3.5rem 0 4.5rem;
  }
  .career-hero__title {
    font-size: 2.5rem;
  }
  .chef-benefits-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .chef-roadmap-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .chef-calc-stat-hero {
    font-size: 2.75rem;
  }
  .chef-calc-breakdown-grid {
    grid-template-columns: 1fr;
  }
  .chef-calc-controls {
    padding: 1.5rem;
  }
  .chef-calc-results {
    padding: 1.5rem;
  }
  .chef-bottom-cta__title {
    font-size: 2.25rem;
  }
  .modal-chef-auth {
    padding: 1.75rem 1.25rem;
    width: 94%;
  }
  .career-hero__actions .btn {
    width: 100%;
  }
  .chef-bottom-cta__actions .btn {
    width: 100%;
  }
}

/* ─── Unified Multi-Chef Bookings & Payment Checkout ─── */
.customer-booking-chefs-team {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
  margin-top: 0.375rem;
  margin-bottom: 0.375rem;
}

.customer-booking-chefs-label {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-charcoal-60);
}

.customer-booking-chef-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  background-color: var(--color-charcoal-10);
  color: var(--color-charcoal);
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  font-size: var(--text-xs);
  font-weight: 500;
}

.customer-booking-chef-role {
  color: var(--color-charcoal-60);
  font-size: 0.7rem;
}

.customer-booking-card__amount-subtext {
  display: block;
  font-size: 0.7rem;
  color: var(--color-green);
  font-weight: 600;
  margin-top: 0.25rem;
}

.booking-success-content {
  text-align: center;
  padding: 0.5rem 0;
}

.booking-success-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 1rem;
  border-radius: 50%;
  background-color: var(--color-green-faint);
  color: var(--color-green);
  display: flex;
  align-items: center;
  justify-content: center;
}

.booking-success-icon svg {
  width: 32px;
  height: 32px;
}

.booking-success-title {
  font-family: var(--font-heading), Georgia, serif;
  font-size: var(--text-xl);
  color: var(--color-charcoal);
  margin-bottom: 0.5rem;
}

.booking-success-actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 1rem;
}

.pending-payments-banner {
  background: var(--color-white);
  border: 1px solid var(--color-terracotta-light);
  border-left: 4px solid var(--color-terracotta);
  border-radius: 8px;
  padding: 1.25rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.pending-payments-header h4 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--color-terracotta-dark);
  font-size: var(--text-base);
  margin-bottom: 0.25rem;
}

.pending-payments-header p {
  font-size: var(--text-sm);
  margin-bottom: 1rem;
}

.pending-payments-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.pending-payment-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem;
  background-color: var(--color-cream);
  border-radius: 6px;
  gap: 1rem;
}

.pending-payment-info strong {
  color: var(--color-charcoal);
  font-size: var(--text-sm);
}

.pending-payment-action {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-shrink: 0;
}

.pending-payment-amount {
  font-weight: 700;
  color: var(--color-charcoal);
  font-size: var(--text-sm);
}

.customer-notification-action {
  margin-top: 0.5rem;
}

@media (max-width: 640px) {
  .pending-payment-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
  .pending-payment-action {
    width: 100%;
    justify-content: space-between;
  }
}

.cart-chef-tag-price {
  font-weight: 600;
  color: var(--color-terracotta);
}

.checkout-unified-notice {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 0.875rem;
  background-color: var(--color-green-faint);
  border: 1px solid var(--color-green);
  border-radius: 6px;
  flex-wrap: wrap;
}

/* ============================================================
   BOOKINGS PAYMENT & REFERENCE SYSTEM
   ============================================================ */

.customer-booking-card__ref-wrap {
  margin-bottom: var(--space-1);
}

.customer-booking-card__ref,
.booking-ref-badge {
  display: inline-flex;
  align-items: center;
  font-family: monospace, var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--color-terracotta);
  background: var(--color-terracotta-faint);
  border: 1px solid rgba(217, 93, 57, 0.2);
  padding: 2px 8px;
  border-radius: 4px;
}

.booking-card__ref-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
  flex-wrap: wrap;
}

.booking-card__ref-header h4 {
  margin: 0;
}

/* ─── Dedicated Bookings Payment Page ─── */
.bookings-payment-section {
  padding: var(--space-8) 0;
  background-color: var(--color-cream);
  min-height: calc(100vh - 160px);
}

.bookings-payment-container {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 var(--space-4);
}

.bookings-payment-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-6);
  flex-wrap: wrap;
  gap: var(--space-3);
}

.bookings-payment-back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-charcoal-60);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.bookings-payment-back-link:hover {
  color: var(--color-terracotta);
}

.bookings-payment-ref-badge-wrap {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.bookings-payment-ref-label {
  font-size: var(--text-xs);
  color: var(--color-charcoal-60);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.bookings-payment-ref-code {
  font-family: monospace, var(--font-body);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-terracotta);
  background: var(--color-white);
  border: 1px solid var(--color-charcoal-20);
  padding: 4px 10px;
  border-radius: 6px;
  letter-spacing: 0.08em;
}

.bookings-payment-header {
  margin-bottom: var(--space-8);
}

.bookings-payment-header h1 {
  font-family: var(--font-heading);
  font-size: var(--text-4xl);
  color: var(--color-charcoal);
  margin-bottom: var(--space-2);
}

.bookings-payment-subtitle {
  font-size: var(--text-base);
  color: var(--color-charcoal-60);
  max-width: 680px;
  margin: 0;
}

.bookings-payment-grid {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: var(--space-8);
  align-items: start;
}

.bookings-payment-summary-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.bookings-payment-card {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-charcoal-10);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  overflow: hidden;
}

.bookings-payment-card-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--color-charcoal-10);
  background: #fdfcfb;
}

.bp-card-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--color-terracotta-faint);
  color: var(--color-terracotta);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.bp-card-icon i {
  width: 20px;
  height: 20px;
}

.bookings-payment-card-header h3 {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  color: var(--color-charcoal);
  margin: 0;
}

.bp-card-header-text {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.bp-card-header-badge {
  font-size: var(--text-xs);
  color: var(--color-charcoal-60);
  background: var(--color-charcoal-10);
  padding: 2px 8px;
  border-radius: 12px;
  font-weight: 500;
}

.bookings-payment-card-body {
  padding: var(--space-6);
}

/* Event Specifications Grid */
.bp-spec-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}

.bp-spec-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--color-cream);
  padding: var(--space-3) var(--space-4);
  border-radius: 8px;
}

.bp-spec-item--full {
  grid-column: span 2;
}

.bp-spec-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-xs);
  color: var(--color-charcoal-60);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.bp-spec-label i {
  width: 14px;
  height: 14px;
  color: var(--color-terracotta);
}

.bp-spec-value {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-charcoal);
}

/* Booked Chefs List */
.bookings-payment-chefs-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.bp-chef-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4);
  background: #fdfcfb;
  border: 1px solid var(--color-charcoal-10);
  border-radius: 8px;
  gap: var(--space-4);
}

.bp-chef-card-left {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}

.bp-chef-card-img {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid var(--color-white);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

.bp-chef-card-details {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.bp-chef-card-name-line {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.bp-chef-card-name {
  font-size: var(--text-base);
  color: var(--color-charcoal);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bp-chef-card-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-xs);
  color: var(--color-charcoal-60);
}

.bp-chef-card-meta i {
  width: 13px;
  height: 13px;
  color: var(--color-gold);
}

.bp-chef-card-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  flex-shrink: 0;
}

.bp-chef-rate-label {
  font-size: var(--text-xs);
  color: var(--color-charcoal-60);
}

.bp-chef-rate-value {
  font-weight: 700;
  font-size: var(--text-base);
  color: var(--color-charcoal);
}

/* Financial Breakdown */
.bookings-payment-breakdown-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.bp-breakdown-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--text-sm);
  color: var(--color-charcoal-60);
}

.bp-breakdown-val {
  font-weight: 600;
  color: var(--color-charcoal);
}

.bp-breakdown-divider {
  height: 1px;
  background-color: var(--color-charcoal-10);
  margin: var(--space-2) 0;
}

.bp-breakdown-row--total {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-charcoal);
}

.bp-breakdown-row--highlight {
  background-color: var(--color-terracotta-faint);
  border: 1px solid rgba(217, 93, 57, 0.25);
  border-radius: 8px;
  padding: var(--space-4);
  margin-top: var(--space-2);
}

.bp-deposit-label-wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.bp-deposit-label {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-terracotta);
}

.bp-deposit-sub {
  font-size: var(--text-xs);
  color: var(--color-charcoal-60);
}

.bp-deposit-val {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--color-terracotta);
}

.bookings-payment-escrow-notice {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-top: var(--space-5);
  padding: var(--space-4);
  background-color: var(--color-green-faint);
  border: 1px solid rgba(49, 92, 69, 0.2);
  border-radius: 8px;
  font-size: var(--text-xs);
  color: var(--color-green);
  line-height: 1.5;
}

.bookings-payment-escrow-notice i {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--color-green);
  margin-top: 2px;
}

/* Right Column / Payment Action Card */
.bookings-payment-sticky-card {
  position: sticky;
  top: 90px;
  border-top: 4px solid var(--color-terracotta);
  padding: var(--space-6);
}

.bookings-payment-action-header {
  margin-bottom: var(--space-5);
}

.bookings-payment-action-header h3 {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  color: var(--color-charcoal);
  margin-bottom: 4px;
}

.bp-method-selector {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.bp-method-option {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 2px solid var(--color-charcoal-10);
  border-radius: 8px;
  cursor: pointer;
  transition: all var(--transition-fast);
  background: var(--color-white);
}

.bp-method-option:hover {
  border-color: var(--color-charcoal-20);
  background: #fdfcfb;
}

.bp-method-option.active {
  border-color: var(--color-terracotta);
  background-color: var(--color-terracotta-faint);
}

.bp-method-radio {
  margin-top: 4px;
  accent-color: var(--color-terracotta);
}

.bp-method-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex-grow: 1;
}

.bp-method-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.bp-method-name {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-charcoal);
}

.bp-method-badge {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  background: var(--color-charcoal-10);
  color: var(--color-charcoal-80);
  padding: 2px 6px;
  border-radius: 4px;
}

.bp-method-option.active .bp-method-badge {
  background: var(--color-terracotta);
  color: var(--color-white);
}

.bp-method-desc {
  font-size: var(--text-xs);
  color: var(--color-charcoal-60);
  margin: 0;
}

.bp-phone-group {
  margin-bottom: var(--space-5);
}

.bp-phone-input-wrap {
  display: flex;
  align-items: center;
  border: 1px solid var(--color-charcoal-20);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-white);
  transition: border-color var(--transition-fast);
}

.bp-phone-input-wrap:focus-within {
  border-color: var(--color-terracotta);
  box-shadow: 0 0 0 3px rgba(217, 93, 57, 0.15);
}

.bp-phone-prefix {
  padding: 0 var(--space-3);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-charcoal-60);
  background: var(--color-charcoal-10);
  border-right: 1px solid var(--color-charcoal-20);
  display: flex;
  align-items: center;
  height: 44px;
}

.bp-phone-input {
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  height: 44px;
  font-size: var(--text-sm);
}

.bp-card-group {
  margin-bottom: var(--space-5);
}

.bp-card-notice {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-cream);
  border: 1px solid var(--color-charcoal-10);
  border-radius: 8px;
  font-size: var(--text-xs);
  color: var(--color-charcoal-60);
  line-height: 1.5;
}

.bp-card-notice i {
  width: 22px;
  height: 22px;
  color: var(--color-terracotta);
  flex-shrink: 0;
}

.bp-submit-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-4);
  font-size: var(--text-base);
  font-weight: 700;
  border-radius: var(--radius-md);
}

.bp-submit-btn i {
  width: 18px;
  height: 18px;
}

.bp-trust-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: var(--space-4);
  font-size: var(--text-xs);
  color: var(--color-charcoal-60);
}

.bp-trust-footer i {
  width: 14px;
  height: 14px;
  color: var(--color-green);
}

/* Polling / Processing View */
.bp-processing-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-4) var(--space-2);
}

.bp-spinner-ring {
  width: 56px;
  height: 56px;
  border: 4px solid var(--color-charcoal-10);
  border-top-color: var(--color-terracotta);
  border-radius: 50%;
  animation: bp-spin 1s linear infinite;
  margin-bottom: var(--space-4);
}

.bp-btn-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid var(--color-white);
  border-top-color: transparent;
  border-radius: 50%;
  animation: bp-spin 0.8s linear infinite;
  display: inline-block;
  vertical-align: middle;
  margin-right: 6px;
}

@keyframes bp-spin {
  to { transform: rotate(360deg); }
}

.bp-processing-box h3 {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  color: var(--color-charcoal);
  margin-bottom: var(--space-2);
}

.bp-status-desc {
  font-size: var(--text-sm);
  color: var(--color-charcoal-60);
  line-height: 1.5;
  margin-bottom: var(--space-5);
}

.bp-live-badge-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background-color: var(--color-green-faint);
  color: var(--color-green);
  border: 1px solid rgba(49, 92, 69, 0.25);
  padding: 6px 14px;
  border-radius: 20px;
  font-size: var(--text-xs);
  font-weight: 600;
  margin-bottom: var(--space-5);
}

.bp-pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--color-green);
  animation: bp-pulse 1.4s ease-in-out infinite;
}

@keyframes bp-pulse {
  0% { transform: scale(0.9); opacity: 0.7; }
  50% { transform: scale(1.4); opacity: 1; }
  100% { transform: scale(0.9); opacity: 0.7; }
}

.bp-tracking-box {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: #fdfcfb;
  border: 1px solid var(--color-charcoal-10);
  padding: var(--space-3) var(--space-4);
  border-radius: 6px;
  width: 100%;
}

.bp-tracking-label {
  font-size: 11px;
  color: var(--color-charcoal-60);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.bp-tracking-val {
  font-family: monospace;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-charcoal);
}

/* Success View */
.bp-success-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-4) 0;
}

.bp-success-circle {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--color-green-faint);
  color: var(--color-green);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-4);
  border: 2px solid var(--color-green);
}

.bp-success-circle i {
  width: 32px;
  height: 32px;
}

.bp-success-box h3 {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  color: var(--color-charcoal);
  margin-bottom: var(--space-2);
}

.bp-success-desc {
  font-size: var(--text-sm);
  color: var(--color-charcoal-60);
  margin-bottom: var(--space-5);
  line-height: 1.5;
}

.bp-success-card {
  width: 100%;
  background: var(--color-cream);
  border: 1px solid var(--color-charcoal-10);
  border-radius: 8px;
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
  text-align: left;
}

.bp-success-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--text-sm);
  color: var(--color-charcoal-60);
}

.bp-success-item strong {
  color: var(--color-charcoal);
}

.bp-success-actions {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Receipt View (Standalone Card) */
.bookings-payment-receipt-card {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-charcoal-10);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
  padding: var(--space-8);
  max-width: 800px;
  margin: 0 auto;
}

.bookings-payment-receipt-header {
  text-align: center;
  margin-bottom: var(--space-8);
}

.bookings-payment-success-badge {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--color-green-faint);
  color: var(--color-green);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-4);
  border: 2px solid var(--color-green);
}

.bookings-payment-success-badge i {
  width: 36px;
  height: 36px;
}

.bookings-payment-receipt-header h2 {
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  color: var(--color-charcoal);
  margin-bottom: var(--space-2);
}

.bookings-payment-receipt-subtext {
  font-size: var(--text-base);
  color: var(--color-charcoal-60);
  max-width: 540px;
  margin: 0 auto;
}

.bookings-payment-receipt-meta-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
  background: #fdfcfb;
  border: 1px solid var(--color-charcoal-10);
  border-radius: 8px;
  padding: var(--space-5);
  margin-bottom: var(--space-6);
}

.bookings-payment-receipt-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.bp-receipt-label {
  font-size: var(--text-xs);
  color: var(--color-charcoal-60);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.bp-receipt-val {
  font-size: var(--text-sm);
  color: var(--color-charcoal);
}

.bp-receipt-code {
  font-family: monospace;
  font-size: var(--text-xs);
  background: var(--color-white);
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid var(--color-charcoal-20);
  width: fit-content;
}

.bookings-payment-receipt-chefs {
  margin-bottom: var(--space-6);
}

.bookings-payment-receipt-chefs h4 {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  color: var(--color-charcoal);
  margin-bottom: var(--space-3);
}

.bookings-payment-receipt-chefs-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.bookings-payment-receipt-chef-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  background: var(--color-cream);
  border-radius: 6px;
}

.bp-chef-avatar-wrap {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  margin-right: var(--space-3);
}

.bp-chef-avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bp-chef-info {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-grow: 1;
}

.bp-chef-name {
  font-size: var(--text-sm);
  color: var(--color-charcoal);
}

.bp-chef-rate {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-charcoal);
}

.bookings-payment-receipt-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

/* ─── Responsive Styles for Bookings Payment ─── */
@media (max-width: 991px) {
  .bookings-payment-grid {
    grid-template-columns: 1fr;
  }
  .bookings-payment-sticky-card {
    position: static;
  }
}

@media (max-width: 640px) {
  .bp-spec-grid {
    grid-template-columns: 1fr;
  }
  .bp-spec-item--full {
    grid-column: span 1;
  }
  .bp-chef-card {
    flex-direction: column;
    align-items: flex-start;
  }
  .bp-chef-card-right {
    align-items: flex-start;
    width: 100%;
    border-top: 1px solid var(--color-charcoal-10);
    padding-top: var(--space-2);
  }
  .bookings-payment-receipt-meta-grid {
    grid-template-columns: 1fr;
  }
  .bookings-payment-receipt-chef-row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }
}

/* ============================================================
   REFUND SYSTEM STYLES
   ============================================================ */

/* Warning stat card variant */
.admin-stat-card--warning {
    border-left: 4px solid var(--color-gold);
}
.admin-stat-card--warning .admin-stat-value {
    color: var(--color-gold);
}

/* Spacing helpers */
.admin-mt-8 { margin-top: var(--space-8); }
.admin-mb-3 { margin-bottom: var(--space-3); }
.admin-mt-2 { margin-top: var(--space-2); }

/* Refund summary box inside modal */
.refund-summary {
    background: var(--color-charcoal-05);
    border: 1px solid var(--color-charcoal-10);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
}

/* Info box (blue-toned notice) */
.admin-info-box {
    background: rgba(59, 130, 246, 0.07);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-left: 4px solid #3b82f6;
    border-radius: var(--radius-sm);
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-sm);
    color: var(--color-charcoal);
    display: flex;
    gap: var(--space-2);
    align-items: flex-start;
    line-height: 1.5;
}
.admin-info-box i {
    flex-shrink: 0;
    margin-top: 2px;
    color: #3b82f6;
}

/* Refund trigger button subtle style */
.refund-trigger-btn {
    background: var(--color-gold-faint);
    color: var(--color-gold);
    border: 1px solid var(--color-gold);
}
.refund-trigger-btn:hover {
    background: var(--color-gold);
    color: var(--color-white);
}

/* Monospace ref code */
code.text-xs {
    font-family: monospace;
    font-size: var(--text-xs);
    background: var(--color-charcoal-10);
    padding: 1px 4px;
    border-radius: 3px;
}

.booking-modal--sm {
    max-width: 480px;
}

.admin-flex-1 {
    flex: 1;
}

.text-terracotta {
    color: var(--color-terracotta);
}

/* ============================================================
   CHEF ONBOARDING EXPERIENCE (public/y/onboard.php)
   ============================================================ */

.status-onboarding {
    color: var(--color-terracotta);
}
.status-onboarding i {
    width: 12px;
    height: 12px;
}

.chef-sidebar__link--locked {
    opacity: 0.65;
    justify-content: space-between;
}
.chef-sidebar__lock-icon {
    width: 14px !important;
    height: 14px !important;
    margin-left: auto;
    opacity: 0.55;
}

.onboard-wrapper {
    max-width: 960px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    padding-bottom: var(--space-10);
}

.onboard-hero-card {
    background: var(--color-white);
    border: 1px solid var(--color-charcoal-10);
    border-radius: var(--radius-xl);
    padding: var(--space-8);
    box-shadow: var(--shadow-sm);
    position: relative;
    overflow: hidden;
}

.onboard-hero-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--color-terracotta), var(--color-gold), var(--color-green));
}

.onboard-hero__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-8);
    margin-bottom: var(--space-8);
}

.onboard-hero__intro {
    flex: 1;
}

.onboard-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    background-color: var(--color-terracotta-faint);
    color: var(--color-terracotta);
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.35rem 0.75rem;
    border-radius: var(--radius-full);
    margin-bottom: var(--space-3);
}

.onboard-hero__badge i {
    width: 15px;
    height: 15px;
}

.onboard-hero__title {
    font-family: var(--font-heading);
    font-size: var(--text-3xl);
    font-weight: 700;
    color: var(--color-charcoal);
    line-height: 1.2;
    margin-bottom: var(--space-2);
}

.onboard-hero__subtitle {
    font-size: var(--text-sm);
    color: var(--color-charcoal-60);
    line-height: 1.65;
    max-width: 580px;
}

.onboard-progress-box {
    width: 260px;
    flex-shrink: 0;
    background-color: var(--color-cream);
    border: 1px solid var(--color-charcoal-10);
    border-radius: var(--radius-lg);
    padding: var(--space-4) var(--space-5);
}

.onboard-progress-box__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-2);
}

.onboard-progress-box__label {
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-charcoal-60);
}

.onboard-progress-box__percent {
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--color-terracotta);
}

.onboard-progress-bar {
    width: 100%;
    height: 8px;
    background-color: var(--color-charcoal-10);
    border-radius: var(--radius-full);
    overflow: hidden;
    margin-bottom: var(--space-2);
}

.onboard-progress-bar__fill {
    height: 100%;
    width: 0%;
    background-color: var(--color-terracotta);
    border-radius: var(--radius-full);
    transition: width var(--transition-base), background-color var(--transition-base);
}

.onboard-progress-bar__fill.is-complete {
    background-color: var(--color-green);
}

.onboard-progress-box__hint {
    display: block;
    font-size: var(--text-xs);
    color: var(--color-charcoal-60);
}

.onboard-steps {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding-top: var(--space-6);
    border-top: 1px solid var(--color-charcoal-10);
}

.onboard-step {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.onboard-step__num {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background-color: var(--color-cream-dark);
    color: var(--color-charcoal-60);
    font-weight: 700;
    font-size: var(--text-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 1.5px solid var(--color-charcoal-20);
    transition: all var(--transition-fast);
}

.onboard-step.active .onboard-step__num {
    background-color: var(--color-terracotta);
    color: var(--color-white);
    border-color: var(--color-terracotta);
}

.onboard-step.completed .onboard-step__num {
    background-color: var(--color-green);
    color: var(--color-white);
    border-color: var(--color-green);
}

.onboard-step__text {
    display: flex;
    flex-direction: column;
}

.onboard-step__title {
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--color-charcoal);
    line-height: 1.25;
}

.onboard-step__desc {
    font-size: var(--text-xs);
    color: var(--color-charcoal-60);
}

.onboard-step__connector {
    flex: 1;
    height: 1px;
    background-color: var(--color-charcoal-10);
    min-width: 24px;
}

.onboard-complete-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    background-color: var(--color-green-faint);
    border: 1px solid rgba(49, 92, 69, 0.25);
    border-left: 4px solid var(--color-green);
    border-radius: var(--radius-lg);
    padding: var(--space-4) var(--space-6);
    color: var(--color-charcoal);
}

.onboard-complete-banner__content {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--text-sm);
}

.onboard-complete-banner__content i {
    color: var(--color-green);
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}

.onboard-complete-banner__content strong {
    display: block;
    color: var(--color-green);
}

.onboard-alert {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: 500;
}

.onboard-alert i {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.onboard-alert--success {
    background-color: var(--color-green-faint);
    color: var(--color-green);
    border-left: 4px solid var(--color-green);
}

.onboard-alert--error {
    background-color: var(--color-terracotta-faint);
    color: var(--color-terracotta);
    border-left: 4px solid var(--color-terracotta);
}

.onboard-card {
    background: var(--color-white);
    border: 1px solid var(--color-charcoal-10);
    border-radius: var(--radius-xl);
    padding: var(--space-8);
    box-shadow: var(--shadow-xs);
    margin-bottom: var(--space-6);
}

.onboard-card__header {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    padding-bottom: var(--space-6);
    margin-bottom: var(--space-6);
    border-bottom: 1px solid var(--color-charcoal-10);
}

.onboard-card__icon {
    width: 46px;
    height: 46px;
    border-radius: var(--radius-md);
    background-color: var(--color-terracotta-faint);
    color: var(--color-terracotta);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.onboard-card__icon i {
    width: 22px;
    height: 22px;
}

.onboard-card__step-tag {
    display: inline-block;
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-terracotta);
    margin-bottom: 2px;
}

.onboard-card__title {
    font-family: var(--font-heading);
    font-size: var(--text-2xl);
    font-weight: 700;
    color: var(--color-charcoal);
    margin: 0 0 4px 0;
}

.onboard-card__desc {
    font-size: var(--text-sm);
    color: var(--color-charcoal-60);
    margin: 0;
}

.onboard-avatar-row {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    background-color: var(--color-cream);
    border: 1px solid var(--color-charcoal-10);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    margin-bottom: var(--space-6);
}

.onboard-avatar-preview-wrap {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid var(--color-white);
    box-shadow: var(--shadow-sm);
    flex-shrink: 0;
    background-color: var(--color-charcoal-10);
}

.onboard-avatar-preview {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.onboard-avatar-controls {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
}

.onboard-avatar-title {
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--color-charcoal);
}

.onboard-optional-tag {
    font-weight: 500;
    color: var(--color-charcoal-60);
    font-size: var(--text-xs);
}

.onboard-avatar-hint {
    font-size: var(--text-xs);
    color: var(--color-charcoal-60);
    margin-bottom: var(--space-2);
}

.onboard-avatar-btn {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.onboard-file-input {
    display: none;
}

.onboard-required {
    color: var(--color-terracotta);
}

.portal-input--disabled {
    background-color: var(--color-cream);
    color: var(--color-charcoal-60);
    cursor: not-allowed;
}

.form-hint {
    font-size: var(--text-xs);
    color: var(--color-charcoal-60);
}

.onboard-lang-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-1);
}

.onboard-lang-chip {
    background-color: var(--color-cream);
    border: 1px solid var(--color-charcoal-20);
    color: var(--color-charcoal-80);
    border-radius: var(--radius-full);
    padding: 3px 10px;
    font-size: var(--text-xs);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.onboard-lang-chip:hover {
    border-color: var(--color-terracotta);
    color: var(--color-terracotta);
    background-color: var(--color-terracotta-faint);
}

.onboard-mb-6 {
    margin-bottom: var(--space-6);
}

.onboard-choice-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
}

.onboard-choice-card {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    padding: var(--space-5);
    border-radius: var(--radius-lg);
    border: 1.5px solid var(--color-charcoal-20);
    background-color: var(--color-white);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.onboard-choice-card:hover {
    border-color: var(--color-terracotta-light);
    background-color: var(--color-cream);
}

.onboard-choice-card.active {
    border-color: var(--color-terracotta);
    background-color: var(--color-terracotta-faint);
    box-shadow: var(--shadow-xs);
}

.onboard-choice-card__icon {
    width: 42px;
    height: 42px;
    border-radius: var(--radius-md);
    background-color: var(--color-cream);
    color: var(--color-charcoal-80);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.onboard-choice-card.active .onboard-choice-card__icon {
    background-color: var(--color-terracotta);
    color: var(--color-white);
}

.onboard-choice-card__body {
    flex: 1;
}

.onboard-choice-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    margin-bottom: var(--space-1);
}

.onboard-choice-card__top h4 {
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--color-charcoal);
    margin: 0;
}

.onboard-choice-card__check {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1.5px solid var(--color-charcoal-20);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: transparent;
    transition: all var(--transition-fast);
}

.onboard-choice-card__check i {
    width: 13px;
    height: 13px;
}

.onboard-choice-card.active .onboard-choice-card__check {
    background-color: var(--color-terracotta);
    border-color: var(--color-terracotta);
    color: var(--color-white);
}

.onboard-choice-card__body p {
    font-size: var(--text-xs);
    color: var(--color-charcoal-60);
    line-height: 1.5;
    margin: 0;
}

.onboard-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
}

.onboard-char-count {
    font-size: var(--text-xs);
    color: var(--color-charcoal-60);
    font-weight: 500;
}

.onboard-submit-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    background: var(--color-white);
    border: 1px solid var(--color-charcoal-10);
    border-radius: var(--radius-xl);
    padding: var(--space-5) var(--space-8);
    box-shadow: var(--shadow-md);
}

.onboard-submit-bar__info {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--text-sm);
    color: var(--color-charcoal-60);
}

.onboard-submit-bar__info i {
    color: var(--color-green);
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.onboard-submit-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

@media (max-width: 768px) {
    .onboard-hero__top {
        flex-direction: column;
        gap: var(--space-5);
    }

    .onboard-progress-box {
        width: 100%;
    }

    .onboard-steps {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-4);
    }

    .onboard-step__connector {
        display: none;
    }

    .onboard-card,
    .onboard-hero-card {
        padding: var(--space-5);
    }

    .onboard-avatar-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .onboard-choice-grid,
    .portal-form-grid {
        grid-template-columns: 1fr;
    }

    .onboard-submit-bar {
        flex-direction: column;
        align-items: stretch;
        padding: var(--space-5);
    }

    .onboard-submit-btn {
        width: 100%;
        justify-content: center;
    }

    .onboard-complete-banner {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ─── Streamlined Cooking Challenge Styles ─── */
.challenge-hero-actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
}

.judge-card--modern {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--color-charcoal-10);
    box-shadow: var(--shadow-xs);
    display: flex;
    flex-direction: column;
    height: 100%;
}

.judge-card__media {
    position: relative;
    height: 260px;
    overflow: hidden;
    background: var(--color-charcoal);
}

.judge-card__media .judge-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.judge-card__linkedin {
    position: absolute;
    top: 12px;
    right: 12px;
    background: rgba(15, 23, 42, 0.75);
    color: var(--color-white);
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
}

.judge-card__linkedin svg {
    width: 16px;
    height: 16px;
}

.judge-card--modern .judge-card__info {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.judge-card--modern .judge-card__name {
    margin: 0 0 0.25rem 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-charcoal);
}

.judge-card--modern .judge-card__role {
    color: var(--color-terracotta);
    font-weight: 600;
    font-size: 0.875rem;
    line-height: 1.3;
    margin-bottom: 0.75rem;
    min-height: 2.6em;
}

.judge-card__bio-snippet {
    font-size: 0.88rem;
    color: var(--color-charcoal-60);
    line-height: 1.5;
    margin-bottom: 1.25rem;
    flex: 1;
}

.judge-card__btn {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
}

.judge-card__btn svg {
    width: 14px;
    height: 14px;
}

.judge-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.75);
    backdrop-filter: blur(4px);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.judge-modal-overlay.is-open {
    display: flex;
}

.judge-modal-box {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    max-width: 640px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--shadow-lg);
    position: relative;
    padding: 2rem;
}

.judge-modal-close {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    background: var(--color-cream);
    border: none;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--color-charcoal);
}

.judge-modal-header {
    display: flex;
    gap: 1.25rem;
    align-items: center;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--color-charcoal-10);
    padding-bottom: 1.25rem;
}

.judge-modal-avatar {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--color-terracotta);
}

.judge-modal-name {
    margin: 0;
    font-size: 1.45rem;
    color: var(--color-charcoal);
    font-weight: 700;
}

.judge-modal-role {
    margin: 0.25rem 0 0 0;
    color: var(--color-terracotta);
    font-weight: 600;
    font-size: 0.95rem;
}

.judge-modal-linkedin-wrap {
    margin-top: 0.35rem;
}

.judge-modal-linkedin-link {
    font-size: 0.85rem;
    color: var(--color-terracotta);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 600;
}

.judge-modal-section {
    margin-bottom: 1.5rem;
}

.judge-modal-label {
    margin: 0 0 0.5rem 0;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-charcoal-60);
    font-weight: 700;
}

.judge-modal-bio {
    font-size: 0.95rem;
    line-height: 1.65;
    color: var(--color-charcoal);
    margin: 0;
    white-space: pre-line;
}

.judge-modal-creds {
    background: var(--color-cream);
    border: 1px solid var(--color-charcoal-10);
    border-radius: var(--radius-md);
    padding: 1.25rem;
    margin-bottom: 1.5rem;
}

.judge-modal-docs {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.judge-modal-muted {
    color: var(--color-charcoal-60);
    font-size: 0.85rem;
}

.judge-modal-footer {
    display: flex;
    justify-content: flex-end;
}

.challenge-apply-box {
    background: var(--color-white);
    border: 1px solid var(--color-charcoal-10);
    border-radius: var(--radius-lg);
    padding: 2rem;
}

.challenge-room-tabs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-bottom: 2rem;
}

.challenge-room-tab {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.15rem 1.25rem;
    background: var(--color-cream);
    border: 2px solid var(--color-charcoal-10);
    border-radius: var(--radius-md);
    cursor: pointer;
    text-align: left;
    transition: border-color var(--transition-fast), background-color var(--transition-fast), box-shadow var(--transition-fast);
}

.challenge-room-tab.active {
    background: var(--color-white);
    border-color: var(--color-terracotta);
    box-shadow: var(--shadow-sm);
}

.challenge-room-tab__icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    background: var(--color-terracotta-faint);
    color: var(--color-terracotta);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.challenge-room-tab__body {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.challenge-room-tab__body strong {
    font-size: 1rem;
    color: var(--color-charcoal);
}

.challenge-room-tab__body small {
    font-size: 0.825rem;
    color: var(--color-charcoal-60);
    font-weight: 500;
}

.challenge-payment-box {
    background: var(--color-cream);
    border: 1px solid var(--color-charcoal-10);
    border-radius: var(--radius-md);
    padding: 1.25rem;
    margin-top: 1.5rem;
}

.challenge-payment-methods {
    margin-bottom: 0.75rem;
}

.challenge-payment-label {
    display: block;
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--color-charcoal);
    margin-bottom: 0.5rem;
}

.challenge-payment-options {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.challenge-payment-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    padding: 0.5rem 0.85rem;
    border: 1px solid var(--color-charcoal-20);
    border-radius: var(--radius-sm);
    background: var(--color-white);
    font-weight: 600;
    font-size: 0.875rem;
}

.challenge-momo-hint {
    color: var(--color-charcoal-60);
    font-size: 0.78rem;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.35rem;
}

.challenge-momo-hint svg {
    width: 14px;
    height: 14px;
}

@media (max-width: 768px) {
    .challenge-room-tabs {
        grid-template-columns: 1fr;
    }
}

/* ═══════════ Culinary Academy Modal & Services Banner ═══════════ */
.academy-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.75);
    backdrop-filter: blur(4px);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.academy-modal-overlay.is-open,
.academy-modal-overlay.active {
    display: flex;
    opacity: 1;
    visibility: visible;
}

.academy-modal-box {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    max-width: 680px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--shadow-xl);
    position: relative;
    padding: 2rem;
}

.academy-modal-close {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    background: var(--color-cream);
    border: none;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--color-charcoal);
}

.academy-modal-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.academy-modal-header__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    background: var(--color-terracotta-faint);
    color: var(--color-terracotta);
    flex-shrink: 0;
}

.academy-modal-header__label {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-terracotta);
    display: block;
}

.academy-modal-header__title {
    font-size: 1.45rem;
    font-weight: 700;
    margin: 0;
    color: var(--color-charcoal);
}

.academy-modal-desc {
    color: var(--color-charcoal-60);
    font-size: 0.95rem;
    margin-bottom: 1.5rem;
    line-height: 1.5;
}

.academy-form-alert {
    padding: 0.85rem 1rem;
    border-radius: var(--radius-sm);
    margin-bottom: 1.25rem;
    font-size: 0.95rem;
}

.academy-form-alert--info {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #1d4ed8;
}

.academy-form-alert--success {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #15803d;
}

.academy-form-alert--error {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
}

.academy-form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.academy-form-group {
    margin-bottom: 1rem;
}

.academy-payment-box {
    background: var(--color-cream);
    border: 1px solid var(--color-charcoal-10);
    border-radius: var(--radius-md);
    padding: 1rem 1.25rem;
    margin-bottom: 1.25rem;
}

.academy-payment-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.academy-payment-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--color-charcoal-60);
    display: block;
}

.academy-payment-title {
    margin: 0;
    font-size: 1.15rem;
    color: var(--color-charcoal);
}

.academy-payment-badge {
    background: var(--color-terracotta-faint);
    color: var(--color-terracotta);
    padding: 0.35rem 0.85rem;
    border-radius: 9999px;
    font-weight: 700;
    font-size: 0.95rem;
}

.academy-modal-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
}

.service-action-group {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 1rem;
}

.service-card-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 1rem;
}

.service-academy-banner {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    color: var(--color-white);
    margin-top: 2rem;
    border-left: 5px solid var(--color-terracotta);
}

.service-academy-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(200, 90, 50, 0.2);
    color: #f97316;
    font-size: 0.8rem;
    font-weight: 700;
    padding: 0.35rem 0.75rem;
    border-radius: 9999px;
    margin-bottom: 0.75rem;
}

.service-academy-badge svg {
    width: 16px;
    height: 16px;
}

.service-academy-title {
    color: var(--color-white);
    margin-bottom: 0.75rem;
}

.service-academy-desc {
    color: rgba(255, 255, 255, 0.82);
    margin-bottom: 1.25rem;
    font-size: 1rem;
    line-height: 1.6;
}

.service-academy-img {
    object-fit: cover;
    max-height: 280px;
    width: 100%;
}

/* Helper utility classes for admin tables & typography */
.font-mono { font-family: monospace, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
.text-xs { font-size: 0.75rem; }
.display-inline { display: inline; }
.admin-flex-gap-1 { display: flex; gap: 0.25rem; align-items: center; }
.admin-mt-1 { margin-top: 0.25rem; }

/* About page mission services classes */
.mission-services-section {
    padding: 4.5rem 0;
    background: #fafaf9;
    border-bottom: 1px solid #e7e5e4;
}
.mission-services-header {
    max-width: 800px;
    margin: 0 auto 3rem auto;
}
.mission-services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2rem;
}
.mission-service-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 2.25rem;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
}
.mission-service-icon {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
}
.mission-service-icon--orange {
    background: rgba(200, 90, 50, 0.12);
    color: #c85a32;
}
.mission-service-icon--blue {
    background: rgba(14, 165, 233, 0.12);
    color: #0284c7;
}
.mission-service-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 0.85rem;
}
.mission-service-desc {
    font-size: 1.05rem;
    line-height: 1.65;
    color: #334155;
    font-weight: 500;
    margin: 0;
}

/* Admin Academy Management classes */
.admin-academy-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.admin-academy-title {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: #1e293b;
}
.admin-academy-alert {
    padding: 0.85rem 1.25rem;
    border-radius: 8px;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.admin-academy-alert--danger {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
}
.admin-academy-alert--warning {
    background: #fffbeb;
    border: 1px solid #fef3c7;
    color: #b45309;
}
.admin-academy-alert--success {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #15803d;
}
.admin-actions-cell {
    display: flex;
    gap: 0.35rem;
    align-items: center;
    flex-wrap: wrap;
}
.admin-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.admin-modal-overlay.is-open {
    display: flex;
}
.admin-modal-box {
    background: #fff;
    border-radius: 12px;
    max-width: 440px;
    width: 100%;
    padding: 1.5rem;
}
.admin-modal-box--lg {
    max-width: 600px;
    max-height: 85vh;
    overflow-y: auto;
    padding: 1.75rem;
}
.admin-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}
.admin-modal-header--bordered {
    border-bottom: 1px solid #e2e8f0;
    padding-bottom: 0.75rem;
}
.admin-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}
.admin-dtl-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1.25rem;
}
.admin-dtl-label {
    color: #64748b;
    font-weight: 600;
    font-size: 0.8rem;
    display: block;
}
.admin-dtl-val {
    font-weight: 600;
    color: #1e293b;
}
.admin-dtl-motivation {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    margin-top: 0.35rem;
    color: #334155;
    font-size: 0.95rem;
    line-height: 1.5;
}
.admin-dtl-metadata {
    background: #f1f5f9;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    margin-bottom: 1.25rem;
    font-size: 0.8rem;
    color: #475569;
}



/* Admin Inquiries Controls */
.admin-inquiries-header { flex-wrap: wrap; gap: 1rem; }
.admin-inquiries-title { margin: 0 0 4px 0; }
.admin-inquiries-actions { gap: 12px; flex-wrap: wrap; }
.admin-fee-form { display: inline-flex; align-items: center; gap: 8px; }
.admin-fee-input { width: 110px; padding: 6px 10px; }