/* ============================================================
   AVII BRAIDS - DARK MODE STYLES (BLUSH & CANDY PINK THEME)
   ============================================================ */

/* Theme root variables in Dark Mode */
html[data-theme="dark"],
html.dark-mode {
  color-scheme: dark;
  --blush-pink: #F2D0C6;
  --candy-pink: #F2B2C2;
  --leaf-1: #FF94B2;
  --leaf-2: #F2B2C2;
  --leaf-3: #F2D0C6;
  --cream-1: #160E12;
  --cream-2: #2B1822;
  --ink: #FDF2F5;
  --muted: #C4A6B0;
  --cream: #160E12;
  --text: #F3E5EA;
  --color-primary: #D46383;
}

/* Smooth transition when toggling modes */
html.theme-transitioning,
html.theme-transitioning *,
html.theme-transitioning *::before,
html.theme-transitioning *::after {
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, fill 0.25s ease, stroke 0.25s ease !important;
  transition-delay: 0s !important;
}

/* Custom Scrollbar in Dark Mode */
html[data-theme="dark"] ::-webkit-scrollbar,
html.dark-mode ::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

html[data-theme="dark"] ::-webkit-scrollbar-track,
html.dark-mode ::-webkit-scrollbar-track {
  background: #160E12;
}

html[data-theme="dark"] ::-webkit-scrollbar-thumb,
html.dark-mode ::-webkit-scrollbar-thumb {
  background: #3E2733;
  border-radius: 5px;
}

html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover,
html.dark-mode ::-webkit-scrollbar-thumb:hover {
  background: #5E394C;
}

/* ============================================================
   THEME TOGGLE BUTTON
   ============================================================ */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(250, 240, 236, 0.85);
  border: 1px solid var(--cream-2);
  color: var(--ink);
  cursor: pointer;
  transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  padding: 0;
  flex-shrink: 0;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  outline: none;
}

.theme-toggle:hover {
  background: var(--cream-2);
  color: var(--leaf-2);
  transform: scale(1.06);
}

.theme-toggle:active {
  transform: scale(0.94);
}

.theme-toggle:focus-visible {
  outline: 2px solid var(--leaf-2);
  outline-offset: 2px;
}

.theme-toggle .icon-sun {
  display: none;
}

.theme-toggle .icon-moon {
  display: block;
}

/* Dark Mode state for the toggle button */
html[data-theme="dark"] .theme-toggle,
html.dark-mode .theme-toggle {
  background: #251820;
  border-color: #3E2733;
  color: #F2B2C2;
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
}

html[data-theme="dark"] .theme-toggle:hover,
html.dark-mode .theme-toggle:hover {
  background: #331F2A;
  color: #FFB3C7;
  border-color: #FF94B2;
}

html[data-theme="dark"] .theme-toggle .icon-sun,
html.dark-mode .theme-toggle .icon-sun {
  display: block;
}

html[data-theme="dark"] .theme-toggle .icon-moon,
html.dark-mode .theme-toggle .icon-moon {
  display: none;
}

/* Mobile Nav Drawer Theme Toggle */
.nav-theme-toggle-li {
  display: none;
}

.mobile-theme-toggle-btn {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.65rem 0.5rem;
  background: none;
  border: none;
  font-size: 0.92rem;
  font-family: inherit;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  border-radius: 8px;
  transition: background 0.15s, color 0.15s;
}

.mobile-theme-toggle-btn:hover {
  background: rgba(242, 178, 194, 0.12);
  color: var(--leaf-1);
}

@media (max-width: 900px) {
  .theme-toggle {
    order: 2;
    width: 36px;
    height: 36px;
    margin-left: auto;
    margin-right: 0.35rem;
  }

  .nav-book-now {
    margin-left: 0 !important;
    margin-right: 0.35rem !important;
  }

  .nav-theme-toggle-li {
    display: block;
    border-top: 1px solid var(--cream-2);
    margin-top: 0.4rem;
    padding-top: 0.4rem;
  }
}

/* ============================================================
   DARK MODE COMPONENT STYLES
   ============================================================ */
html[data-theme="dark"] body,
html.dark-mode body {
  background: #160E12;
  color: #F3E5EA;
}

/* Broadcast Bar */
html[data-theme="dark"] .broadcast-bar,
html.dark-mode .broadcast-bar {
  background: #120A0E;
  border-bottom: 1px solid #23121A;
}

/* Header & Nav */
html[data-theme="dark"] .nav-wrap,
html.dark-mode .nav-wrap {
  background: rgba(22, 14, 18, 0.95);
  border-bottom-color: #2B1822;
}

html[data-theme="dark"] .brand .logo-text,
html.dark-mode .brand .logo-text {
  color: #F2B2C2;
}

html[data-theme="dark"] .nav-links a,
html.dark-mode .nav-links a {
  color: #EAD5DC;
}

html[data-theme="dark"] .nav-links a:hover,
html.dark-mode .nav-links a:hover {
  color: #F2B2C2;
}

html[data-theme="dark"] .hamburger span,
html.dark-mode .hamburger span {
  background: #F2B2C2;
}

@media (max-width: 900px) {
  html[data-theme="dark"] .nav-links,
  html.dark-mode .nav-links {
    background: #20141A;
    border-color: #3E2733;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.7);
  }

  html[data-theme="dark"] .nav-theme-toggle-li,
  html.dark-mode .nav-theme-toggle-li {
    border-top-color: #2B1822;
  }

  html[data-theme="dark"] .mobile-theme-toggle-btn,
  html.dark-mode .mobile-theme-toggle-btn {
    color: #F3E5EA;
  }

  html[data-theme="dark"] .mobile-theme-toggle-btn:hover,
  html.dark-mode .mobile-theme-toggle-btn:hover {
    background: rgba(242, 178, 194, 0.15);
    color: #F2B2C2;
  }
}

/* Headings & Text */
html[data-theme="dark"] .section-title,
html.dark-mode .section-title {
  color: #F2B2C2;
}

html[data-theme="dark"] .section-label,
html.dark-mode .section-label,
html[data-theme="dark"] .section-subtitle,
html.dark-mode .section-subtitle {
  color: #C4A6B0;
}

/* Services Marquee Wrap */
html[data-theme="dark"] .services-marquee-wrap,
html.dark-mode .services-marquee-wrap {
  background: #29151F;
  border-top: 1px solid #3E202E;
  border-bottom: 1px solid #3E202E;
}

/* IG Follow Strip */
html[data-theme="dark"] .ig-follow-strip,
html.dark-mode .ig-follow-strip {
  background: #1B0F15;
  border-top: 1px solid #2B1822;
  border-bottom: 1px solid #2B1822;
}

/* About Section */
html[data-theme="dark"] #about,
html.dark-mode #about {
  background: #160E12;
}

html[data-theme="dark"] .about-grid p,
html.dark-mode .about-grid p {
  color: #EAD5DC;
}

html[data-theme="dark"] .about-style-tags-line,
html.dark-mode .about-style-tags-line {
  color: #F2B2C2;
}

html[data-theme="dark"] .style-tags span,
html.dark-mode .style-tags span {
  background: #251820;
  color: #F2B2C2;
  border: 1px solid #3E2733;
}

/* Policies Section */
html[data-theme="dark"] #policies,
html.dark-mode #policies {
  background: #1A1016;
}

html[data-theme="dark"] .policy-card,
html[data-theme="dark"] .policy-item,
html.dark-mode .policy-card,
html.dark-mode .policy-item {
  background: #20141A;
  border-color: #3E2733;
}

html[data-theme="dark"] .policy-card h4,
html[data-theme="dark"] .policy-item .policy-title,
html.dark-mode .policy-card h4,
html.dark-mode .policy-item .policy-title {
  color: #F2B2C2;
}

html[data-theme="dark"] .policy-body,
html.dark-mode .policy-body {
  color: #C4A6B0;
}

html[data-theme="dark"] .policy-body strong,
html.dark-mode .policy-body strong {
  color: #FDF2F5;
}

/* Services Section */
html[data-theme="dark"] #services,
html.dark-mode #services {
  background: #160E12;
}

html[data-theme="dark"] .service-card,
html.dark-mode .service-card {
  background: #20141A;
  border-color: #3E2733;
}

html[data-theme="dark"] .service-card:hover,
html.dark-mode .service-card:hover {
  background: #291A22;
  border-top-color: #FF94B2;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

html[data-theme="dark"] .service-card-title,
html[data-theme="dark"] .service-card h3,
html.dark-mode .service-card-title,
html.dark-mode .service-card h3 {
  color: #F2B2C2;
}

html[data-theme="dark"] .service-card-num,
html[data-theme="dark"] .service-card .num,
html.dark-mode .service-card-num,
html.dark-mode .service-card .num {
  color: #9C7D88;
}

html[data-theme="dark"] .service-card-desc,
html.dark-mode .service-card-desc {
  color: #C4A6B0;
}

html[data-theme="dark"] .service-card-from-price,
html.dark-mode .service-card-from-price {
  color: #FF94B2;
}

html[data-theme="dark"] .service-card-btn,
html.dark-mode .service-card-btn {
  background: #3B1B27;
  border: 1px solid #5C2D3E;
  color: #fff;
}

html[data-theme="dark"] .service-card-btn:hover,
html.dark-mode .service-card-btn:hover {
  background: #B84364;
  border-color: #FF94B2;
}

/* Consultation Section */
html[data-theme="dark"] .consultation-section,
html.dark-mode .consultation-section {
  background-color: #1A1016;
  background-image:
    linear-gradient(180deg, rgba(22, 14, 18, 0.95) 0%, rgba(26, 16, 22, 1) 42%),
    radial-gradient(ellipse 80% 50% at 15% 10%, rgba(242, 178, 194, 0.15) 0%, transparent 55%),
    radial-gradient(ellipse 70% 45% at 90% 85%, rgba(242, 208, 198, 0.12) 0%, transparent 50%);
}

html[data-theme="dark"] .consultation-card,
html.dark-mode .consultation-card {
  background: #20141A;
  border-color: #3E2733;
}

html[data-theme="dark"] .consultation-info h3,
html.dark-mode .consultation-info h3 {
  color: #F2B2C2;
}

html[data-theme="dark"] .consultation-info p,
html.dark-mode .consultation-info p {
  color: #C4A6B0;
}

html[data-theme="dark"] .consultation-includes li,
html.dark-mode .consultation-includes li {
  color: #FF94B2;
}

html[data-theme="dark"] .consultation-price,
html.dark-mode .consultation-price {
  color: #F2B2C2;
}

html[data-theme="dark"] .consultation-form-wrap,
html.dark-mode .consultation-form-wrap {
  background: #20141A;
  border-color: #3E2733;
}

html[data-theme="dark"] .consultation-form-wrap h3,
html.dark-mode .consultation-form-wrap h3 {
  color: #F2B2C2;
}

html[data-theme="dark"] .consultation-form-wrap input,
html[data-theme="dark"] .consultation-form-wrap textarea,
html.dark-mode .consultation-form-wrap input,
html.dark-mode .consultation-form-wrap textarea {
  background: #180F14;
  color: #FDF2F5;
  border-color: #3E2733;
}

html[data-theme="dark"] .consultation-field-label,
html.dark-mode .consultation-field-label {
  color: #EAD5DC;
}

html[data-theme="dark"] .consultation-slots-label,
html.dark-mode .consultation-slots-label {
  color: #C4A6B0;
}

html[data-theme="dark"] .cons-slot-btn,
html.dark-mode .cons-slot-btn {
  background: #20141A;
  color: #F2B2C2;
  border: 2px solid #5C2D3E;
}

html[data-theme="dark"] .cons-slot-btn:hover:not(:disabled),
html.dark-mode .cons-slot-btn:hover:not(:disabled) {
  background: #2B1923;
  border-color: #FF94B2;
}

html[data-theme="dark"] .cons-slot-btn:disabled,
html.dark-mode .cons-slot-btn:disabled {
  background: #170E13;
  color: #6A515A;
  border-color: #271720;
}

html[data-theme="dark"] .cons-slot-btn.cons-slot-selected,
html.dark-mode .cons-slot-btn.cons-slot-selected {
  background: #B84364;
  color: #fff;
  border-color: #FF94B2;
}

/* Gallery Section */
html[data-theme="dark"] #gallery,
html.dark-mode #gallery {
  background: #1A1016;
}

html[data-theme="dark"] #gallery .section-title,
html.dark-mode #gallery .section-title {
  color: #F2B2C2;
}

html[data-theme="dark"] .gallery-item,
html.dark-mode .gallery-item {
  background: rgba(255, 255, 255, 0.04);
}

/* Instagram Follow Section */
html[data-theme="dark"] .ig-section,
html.dark-mode .ig-section {
  background: #160E12;
  color: #FDF2F5;
}

html[data-theme="dark"] .ig-section h2,
html.dark-mode .ig-section h2 {
  color: #F2B2C2;
}

html[data-theme="dark"] .ig-item,
html.dark-mode .ig-item {
  background: #20141A;
}

html[data-theme="dark"] .social-pill-link,
html.dark-mode .social-pill-link {
  background: #20141A;
  border-color: #3E2733;
  color: #F2B2C2;
}

html[data-theme="dark"] .social-pill-link:hover,
html.dark-mode .social-pill-link:hover {
  background: #2C1A24;
  border-color: #FF94B2;
  color: #FFE6EE;
}

html[data-theme="dark"] .social-tagline,
html.dark-mode .social-tagline {
  color: #9C7D88;
}

/* Booking Section */
html[data-theme="dark"] #booking,
html.dark-mode #booking {
  background: #1A1016;
}

html[data-theme="dark"] .booking-steps,
html.dark-mode .booking-steps {
  background: #20141A;
  border-color: #3E2733;
}

html[data-theme="dark"] #bookingSectionTitle,
html.dark-mode #bookingSectionTitle {
  color: #F2B2C2;
}

html[data-theme="dark"] .booking-next-fomo,
html.dark-mode .booking-next-fomo {
  background: linear-gradient(135deg, #301723 0%, #201119 100%);
  border-color: rgba(242, 178, 194, 0.35);
  color: #F3E5EA;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

html[data-theme="dark"] .step-indicator,
html.dark-mode .step-indicator {
  color: #C4A6B0;
}

html[data-theme="dark"] .booking-step-seg.upcoming,
html.dark-mode .booking-step-seg.upcoming {
  background: rgba(255, 255, 255, 0.14);
}

html[data-theme="dark"] .booking-step-seg.completed,
html.dark-mode .booking-step-seg.completed {
  background: rgba(212, 99, 131, 0.45);
}

html[data-theme="dark"] .booking-step-seg.active,
html.dark-mode .booking-step-seg.active {
  background: #FF94B2;
  box-shadow: 0 0 0 1px rgba(255, 148, 178, 0.4);
}

html[data-theme="dark"] #step1Intro,
html.dark-mode #step1Intro {
  color: #C4A6B0 !important;
}

html[data-theme="dark"] .cat-acc-item,
html.dark-mode .cat-acc-item {
  background: #20141A;
  border-color: #3E2733;
}

html[data-theme="dark"] .cat-acc-head,
html.dark-mode .cat-acc-head {
  background: #20141A;
  color: #FDF2F5;
}

html[data-theme="dark"] .cat-acc-body,
html.dark-mode .cat-acc-body {
  background: #20141A;
}

html[data-theme="dark"] .step1-selected-wrap,
html.dark-mode .step1-selected-wrap {
  background: #20141A;
  border-color: #3E2733;
}

html[data-theme="dark"] #step1-selected-card,
html.dark-mode #step1-selected-card {
  background: #20141A !important;
  border-color: #FF94B2 !important;
  color: #FDF2F5 !important;
}

html[data-theme="dark"] .appt-card,
html.dark-mode .appt-card {
  background: #251820;
  border-color: #3E2733;
}

html[data-theme="dark"] .appt-card:hover,
html.dark-mode .appt-card:hover {
  border-color: #FF94B2;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
}

html[data-theme="dark"] .appt-card.selected,
html.dark-mode .appt-card.selected {
  border-color: #FF94B2;
  border-width: 2px;
}

html[data-theme="dark"] .appt-name,
html.dark-mode .appt-name {
  color: #FDF2F5;
}

html[data-theme="dark"] .appt-desc,
html.dark-mode .appt-desc,
html[data-theme="dark"] .appt-meta,
html.dark-mode .appt-meta {
  color: #C4A6B0;
}

html[data-theme="dark"] .appt-price,
html.dark-mode .appt-price {
  color: #FF94B2;
}

html[data-theme="dark"] .appt-select-btn,
html.dark-mode .appt-select-btn {
  background: #3B1B27;
  color: #fff;
  border: 1px solid #5C2D3E;
}

html[data-theme="dark"] .appt-card.selected .appt-select-btn,
html.dark-mode .appt-card.selected .appt-select-btn {
  background: #B84364;
  border-color: #FF94B2;
}

/* Calendar & Timeslots */
html[data-theme="dark"] #calWeekdays > div,
html[data-theme="dark"] #rs-cal-weekdays > div,
html.dark-mode #calWeekdays > div,
html.dark-mode #rs-cal-weekdays > div {
  color: #C4A6B0;
}

html[data-theme="dark"] .calendar-grid button,
html.dark-mode .calendar-grid button {
  background: #20141A;
  color: #FDF2F5;
}

html[data-theme="dark"] .calendar-grid button.cal-day,
html.dark-mode .calendar-grid button.cal-day {
  background: #20141A;
  color: #FDF2F5;
}

html[data-theme="dark"] .calendar-grid button.cal-day:hover:not(:disabled),
html.dark-mode .calendar-grid button.cal-day:hover:not(:disabled) {
  border-color: #FF94B2;
}

html[data-theme="dark"] .calendar-grid button.cal-day.bookable-available:not(.selected),
html.dark-mode .calendar-grid button.cal-day.bookable-available:not(.selected) {
  background: #2D1722;
  border-color: #5C2D3E;
  color: #F2B2C2;
  box-shadow: inset 0 -3px 0 rgba(242, 178, 194, 0.35);
}

html[data-theme="dark"] .calendar-grid button.cal-day.selected,
html.dark-mode .calendar-grid button.cal-day.selected {
  background: #B84364;
  color: #fff;
  border-color: #FF94B2;
}

html[data-theme="dark"] .calendar-grid button.cal-day.today:not(.selected),
html.dark-mode .calendar-grid button.cal-day.today:not(.selected) {
  color: #FF94B2;
}

html[data-theme="dark"] .calendar-grid button.cal-day.fully-booked,
html.dark-mode .calendar-grid button.cal-day.fully-booked {
  background: #180F14;
  color: #6A515A;
  border-color: #271720;
}

html[data-theme="dark"] .calendar-grid button.cal-day.fully-booked.waitlist-available,
html.dark-mode .calendar-grid button.cal-day.fully-booked.waitlist-available {
  background: #332210;
  border-color: #7A531C;
  color: #FBBF24;
}

html[data-theme="dark"] .calendar-grid button.cal-day.fully-booked.waitlist-available.selected,
html.dark-mode .calendar-grid button.cal-day.fully-booked.waitlist-available.selected {
  background: #92580E;
  color: #fff;
}

html[data-theme="dark"] .calendar-grid button:disabled,
html.dark-mode .calendar-grid button:disabled {
  opacity: 0.25;
}

html[data-theme="dark"] .cal-legend,
html.dark-mode .cal-legend {
  color: #C4A6B0;
}

html[data-theme="dark"] .slots button,
html.dark-mode .slots button {
  background: #20141A;
  border-color: #3E2733;
  color: #FDF2F5;
}

html[data-theme="dark"] .slots button:hover,
html.dark-mode .slots button:hover {
  border-color: #FF94B2;
}

html[data-theme="dark"] .slots button.unavailable,
html.dark-mode .slots button.unavailable {
  background: #180F14;
  border-color: #271720;
  color: #6A515A;
}

html[data-theme="dark"] .slots button.time-pick.selected,
html.dark-mode .slots button.time-pick.selected {
  background: #B84364;
  border-color: #FF94B2;
  color: #fff;
}

html[data-theme="dark"] .slot-availability-note,
html.dark-mode .slot-availability-note {
  color: #C4A6B0;
}

/* Waitlist Box */
html[data-theme="dark"] .step2-waitlist-section,
html.dark-mode .step2-waitlist-section {
  background: #20141A;
  border-color: #3E2733;
}

html[data-theme="dark"] .step2-waitlist-section h3,
html.dark-mode .step2-waitlist-section h3 {
  color: #F2B2C2;
}

html[data-theme="dark"] .step2-waitlist-sub,
html.dark-mode .step2-waitlist-sub {
  color: #C4A6B0;
}

html[data-theme="dark"] button.waitlist-slot-pick,
html.dark-mode button.waitlist-slot-pick {
  border-color: #FF94B2;
  color: #F2B2C2;
}

html[data-theme="dark"] button.waitlist-slot-pick:hover,
html.dark-mode button.waitlist-slot-pick:hover {
  background: rgba(242, 178, 194, 0.2);
}

html[data-theme="dark"] button.waitlist-slot-pick.selected,
html.dark-mode button.waitlist-slot-pick.selected {
  background: #B84364;
  color: #fff;
}

html[data-theme="dark"] .step2-waitlist-form label,
html.dark-mode .step2-waitlist-form label {
  color: #EAD5DC;
}

html[data-theme="dark"] .step2-waitlist-form input,
html[data-theme="dark"] .step2-waitlist-form textarea,
html.dark-mode .step2-waitlist-form input,
html.dark-mode .step2-waitlist-form textarea {
  background: #180F14;
  border-color: #3E2733;
  color: #FDF2F5;
}

html[data-theme="dark"] .step2-waitlist-change-date,
html.dark-mode .step2-waitlist-change-date {
  color: #FF94B2;
}

/* Forms (Step 3 & General) */
html[data-theme="dark"] .form-row label,
html.dark-mode .form-row label {
  color: #EAD5DC;
}

html[data-theme="dark"] .form-row input,
html[data-theme="dark"] .form-row select,
html[data-theme="dark"] .form-row textarea,
html.dark-mode .form-row input,
html.dark-mode .form-row select,
html.dark-mode .form-row textarea {
  background: #180F14;
  color: #FDF2F5;
  border-color: #3E2733;
}

html[data-theme="dark"] input:focus,
html[data-theme="dark"] select:focus,
html[data-theme="dark"] textarea:focus,
html.dark-mode input:focus,
html.dark-mode select:focus,
html.dark-mode textarea:focus {
  border-color: #FF94B2 !important;
  outline: none;
}

/* Feed-in Wizard */
html[data-theme="dark"] .fi-type-btn,
html.dark-mode .fi-type-btn {
  background: #20141A;
  border-color: #3E2733;
}

html[data-theme="dark"] .fi-type-btn:hover,
html[data-theme="dark"] .fi-type-btn.selected,
html.dark-mode .fi-type-btn:hover,
html.dark-mode .fi-type-btn.selected {
  background: #291A22;
  border-color: #FF94B2;
}

html[data-theme="dark"] .fi-type-btn .fi-type-name,
html[data-theme="dark"] .fi-type-btn .appt-name,
html.dark-mode .fi-type-btn .fi-type-name,
html.dark-mode .fi-type-btn .appt-name {
  color: #F2B2C2 !important;
}

html[data-theme="dark"] .fi-type-btn .fi-type-desc,
html[data-theme="dark"] .fi-type-btn .appt-desc,
html[data-theme="dark"] .fi-style-preview .appt-desc,
html.dark-mode .fi-type-btn .fi-type-desc,
html.dark-mode .fi-type-btn .appt-desc,
html.dark-mode .fi-style-preview .appt-desc {
  color: #C4A6B0 !important;
}

html[data-theme="dark"] .fi-addon-card,
html.dark-mode .fi-addon-card {
  background: #20141A;
  border-color: #3E2733;
}

html[data-theme="dark"] .fi-addon-card:hover,
html.dark-mode .fi-addon-card:hover {
  background: #291A22;
  border-color: #FF94B2;
}

html[data-theme="dark"] .fi-addon-card.selected,
html.dark-mode .fi-addon-card.selected {
  background: #2C1822;
  border-color: #FF94B2;
}

html[data-theme="dark"] .fi-addon-card-title,
html.dark-mode .fi-addon-card-title {
  color: #F2B2C2;
}

html[data-theme="dark"] .fi-addon-card-price,
html.dark-mode .fi-addon-card-price {
  color: #FF94B2;
}

html[data-theme="dark"] .fi-addon-card-desc,
html.dark-mode .fi-addon-card-desc {
  color: #C4A6B0;
}

html[data-theme="dark"] #feedInLengthRadios .fi-radio-pill,
html.dark-mode #feedInLengthRadios .fi-radio-pill {
  background: #20141A;
  border-color: #3E2733;
  color: #F2B2C2;
}

html[data-theme="dark"] #feedInLengthRadios.fi-radios label:hover .fi-radio-pill,
html.dark-mode #feedInLengthRadios.fi-radios label:hover .fi-radio-pill {
  background: #291A22;
  border-color: #FF94B2;
}

html[data-theme="dark"] #feedInLengthRadios.fi-radios input[type="radio"]:checked + .fi-radio-pill,
html.dark-mode #feedInLengthRadios.fi-radios input[type="radio"]:checked + .fi-radio-pill {
  background: #B84364;
  border-color: #FF94B2;
  color: #fff;
}

html[data-theme="dark"] .fi-size-btn,
html.dark-mode .fi-size-btn {
  border-color: #3E2733;
  color: #FDF2F5;
}

html[data-theme="dark"] .fi-size-btn:hover,
html[data-theme="dark"] .fi-size-btn.selected,
html.dark-mode .fi-size-btn:hover,
html.dark-mode .fi-size-btn.selected {
  border-color: #FF94B2;
  background: #291A22;
  color: #F2B2C2;
}

html[data-theme="dark"] .fi-photo-upload-section,
html.dark-mode .fi-photo-upload-section {
  background: #1C1017;
  border-color: #B84364;
}

html[data-theme="dark"] .fi-photo-upload-title,
html.dark-mode .fi-photo-upload-title {
  color: #F2B2C2;
}

html[data-theme="dark"] .fi-photo-upload-sub,
html.dark-mode .fi-photo-upload-sub {
  color: #C4A6B0;
}

html[data-theme="dark"] .fi-photo-upload-section input[type="file"],
html.dark-mode .fi-photo-upload-section input[type="file"] {
  background: #180F14;
  border-color: #3E2733;
  color: #F2B2C2;
}

html[data-theme="dark"] .fi-service-desc,
html.dark-mode .fi-service-desc {
  background: #20141A;
  border-color: #3E2733;
  color: #EAD5DC;
}

html[data-theme="dark"] .fi-price-disclaimer,
html.dark-mode .fi-price-disclaimer {
  background: #20141A;
  border-left-color: #FF94B2;
  color: #C4A6B0;
}

html[data-theme="dark"] .terms-box,
html.dark-mode .terms-box {
  background: #20141A;
  border-color: #3E2733;
}

html[data-theme="dark"] .terms-copy,
html.dark-mode .terms-copy {
  color: #EAD5DC;
}

html[data-theme="dark"] .terms-copy .terms-quote,
html.dark-mode .terms-copy .terms-quote {
  color: #C4A6B0;
}

/* Step 4 Review & Payment */
html[data-theme="dark"] #reviewSummary,
html.dark-mode #reviewSummary {
  background: #20141A !important;
  border-color: #3E2733 !important;
  color: #FDF2F5 !important;
}

html[data-theme="dark"] #reviewSummary strong,
html.dark-mode #reviewSummary strong {
  color: #F2B2C2 !important;
}

html[data-theme="dark"] #payChoiceSection p,
html.dark-mode #payChoiceSection p {
  color: #FDF2F5 !important;
}

html[data-theme="dark"] #payChoiceNote,
html[data-theme="dark"] #payChoiceStripeFee,
html.dark-mode #payChoiceNote,
html.dark-mode #payChoiceStripeFee {
  color: #C4A6B0 !important;
}

html[data-theme="dark"] .pay-choice-btn,
html.dark-mode .pay-choice-btn {
  background: #20141A;
  border-color: #3E2733;
  color: #EAD5DC;
}

html[data-theme="dark"] .pay-choice-btn:hover,
html.dark-mode .pay-choice-btn:hover {
  border-color: #FF94B2;
  background: #291A22;
}

html[data-theme="dark"] .pay-choice-btn.active,
html.dark-mode .pay-choice-btn.active {
  background: rgba(212, 99, 131, 0.25);
  border-color: #FF94B2;
  color: #F2B2C2;
}

html[data-theme="dark"] .payment-option,
html.dark-mode .payment-option {
  background: #20141A;
  border-color: #3E2733;
}

html[data-theme="dark"] .payment-option.selected,
html.dark-mode .payment-option.selected {
  background: rgba(212, 99, 131, 0.2);
  border-color: #FF94B2;
}

html[data-theme="dark"] .payment-option strong,
html.dark-mode .payment-option strong {
  color: #FDF2F5;
}

html[data-theme="dark"] .payment-option span,
html.dark-mode .payment-option span {
  color: #C4A6B0;
}

html[data-theme="dark"] #feedInUploadProgress,
html.dark-mode #feedInUploadProgress {
  background: #20141A !important;
  color: #FDF2F5 !important;
}

/* Confirmation & Reschedule */
html[data-theme="dark"] .confirmed-header h2,
html.dark-mode .confirmed-header h2 {
  color: #F2B2C2;
}

html[data-theme="dark"] .confirmed-summary,
html.dark-mode .confirmed-summary {
  background: #20141A;
  border-color: #3E2733;
  color: #FDF2F5;
}

html[data-theme="dark"] .confirmed-row,
html.dark-mode .confirmed-row {
  border-bottom-color: #3E2733;
}

html[data-theme="dark"] .confirmed-row span,
html.dark-mode .confirmed-row span {
  color: #C4A6B0;
}

html[data-theme="dark"] .confirmed-info,
html.dark-mode .confirmed-info {
  background: #1A1016;
  color: #C4A6B0;
}

html[data-theme="dark"] .confirmed-prep,
html.dark-mode .confirmed-prep {
  border-color: #3E2733;
}

html[data-theme="dark"] .confirmed-prep h4,
html.dark-mode .confirmed-prep h4 {
  color: #F2B2C2;
}

html[data-theme="dark"] .confirmed-prep ul,
html.dark-mode .confirmed-prep ul {
  color: #C4A6B0;
}

html[data-theme="dark"] #conf-balance-instructions,
html.dark-mode #conf-balance-instructions {
  background: #1A1016 !important;
  border-color: #3E2733 !important;
}

html[data-theme="dark"] #reschedule-modal-overlay,
html.dark-mode #reschedule-modal-overlay {
  background: rgba(0, 0, 0, 0.78);
}

html[data-theme="dark"] .reschedule-modal-inner,
html.dark-mode .reschedule-modal-inner {
  background: #20141A;
  color: #FDF2F5;
  border: 1px solid #3E2733;
}

html[data-theme="dark"] .reschedule-modal-header,
html.dark-mode .reschedule-modal-header {
  border-bottom-color: #3E2733;
}

html[data-theme="dark"] .reschedule-modal-header h3,
html.dark-mode .reschedule-modal-header h3 {
  color: #F2B2C2;
}

html[data-theme="dark"] .reschedule-picker,
html.dark-mode .reschedule-picker {
  background: #20141A;
}

/* Reviews Section */
html[data-theme="dark"] .reviews-section,
html.dark-mode .reviews-section {
  background: #160E12;
}

html[data-theme="dark"] .reviews-avg,
html.dark-mode .reviews-avg {
  color: #F2B2C2;
}

html[data-theme="dark"] .reviews-count,
html.dark-mode .reviews-count {
  color: #C4A6B0;
}

html[data-theme="dark"] .review-card,
html.dark-mode .review-card {
  background: #20141A;
  border-color: #3E2733;
  border-left: 3px solid #FF94B2;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}

html[data-theme="dark"] .review-content,
html.dark-mode .review-content {
  color: #EAD5DC;
}

html[data-theme="dark"] .review-author,
html.dark-mode .review-author {
  color: #F2B2C2;
}

html[data-theme="dark"] .review-service-tag,
html.dark-mode .review-service-tag {
  color: #9C7D88;
}

html[data-theme="dark"] .reviews-nav,
html.dark-mode .reviews-nav {
  background: #20141A;
  border-color: #3E2733;
  color: #F2B2C2;
}

html[data-theme="dark"] .reviews-nav:hover,
html.dark-mode .reviews-nav:hover {
  background: #B84364;
  color: #fff;
  border-color: #FF94B2;
}

html[data-theme="dark"] .reviews-dot,
html.dark-mode .reviews-dot {
  background: #3E2733;
}

html[data-theme="dark"] .reviews-dot.active,
html.dark-mode .reviews-dot.active {
  background: #FF94B2;
}

/* Buttons */
html[data-theme="dark"] .btn-outline,
html.dark-mode .btn-outline {
  border-color: #FF94B2;
  color: #F2B2C2;
}

html[data-theme="dark"] .btn-outline:hover,
html.dark-mode .btn-outline:hover {
  background: rgba(242, 178, 194, 0.2);
}

/* Modals */
html[data-theme="dark"] #contact-modal > div,
html.dark-mode #contact-modal > div {
  background: #20141A !important;
  color: #FDF2F5 !important;
  border: 1px solid #3E2733;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.65) !important;
}

html[data-theme="dark"] #contact-modal h3,
html.dark-mode #contact-modal h3 {
  color: #F2B2C2 !important;
}

html[data-theme="dark"] #contact-modal hr,
html.dark-mode #contact-modal hr {
  border-top-color: #3E2733 !important;
}

html[data-theme="dark"] #contact-modal input,
html[data-theme="dark"] #contact-modal textarea,
html.dark-mode #contact-modal input,
html.dark-mode #contact-modal textarea {
  background: #180F14 !important;
  color: #FDF2F5 !important;
  border-color: #3E2733 !important;
}

html[data-theme="dark"] #contact-modal button[aria-label="Close"],
html.dark-mode #contact-modal button[aria-label="Close"] {
  color: #C4A6B0 !important;
}

html[data-theme="dark"] #contact-modal a,
html.dark-mode .contact-modal a {
  color: #FF94B2 !important;
}

html[data-theme="dark"] #colorInquiryModal > div,
html.dark-mode #colorInquiryModal > div {
  background: #20141A !important;
  color: #FDF2F5 !important;
  border: 1px solid #3E2733;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.65) !important;
}

html[data-theme="dark"] #colorInquiryModal h3,
html.dark-mode #colorInquiryModal h3 {
  color: #F2B2C2 !important;
}

html[data-theme="dark"] #colorInquiryModal label,
html.dark-mode #colorInquiryModal label {
  color: #EAD5DC !important;
}

html[data-theme="dark"] #colorInquiryModal input,
html[data-theme="dark"] #colorInquiryModal textarea,
html.dark-mode #colorInquiryModal input,
html.dark-mode #colorInquiryModal textarea {
  background: #180F14 !important;
  color: #FDF2F5 !important;
  border-color: #3E2733 !important;
}

html[data-theme="dark"] #colorInquiryModalClose,
html.dark-mode #colorInquiryModalClose {
  color: #C4A6B0 !important;
}

html[data-theme="dark"] .inquiry-slot-btn,
html.dark-mode .inquiry-slot-btn {
  background: #20141A !important;
  color: #FDF2F5 !important;
  border-color: #3E2733 !important;
}

html[data-theme="dark"] .inquiry-slot-btn:hover,
html.dark-mode .inquiry-slot-btn:hover {
  border-color: #FF94B2 !important;
  background: #291A22 !important;
}

html[data-theme="dark"] #announcementModal .ann-modal,
html.dark-mode #announcementModal .ann-modal {
  background: #20141A;
  color: #FDF2F5;
  border: 1px solid #3E2733;
}

html[data-theme="dark"] .ann-modal-close,
html.dark-mode .ann-modal-close {
  background: rgba(255, 255, 255, 0.1);
  color: #FDF2F5;
}

html[data-theme="dark"] .ann-modal-message,
html.dark-mode .ann-modal-message {
  color: #EAD5DC;
}

html[data-theme="dark"] .ann-modal-media,
html.dark-mode .ann-modal-media {
  background: #180F14;
}

/* Warnings & Notice Banners */
html[data-theme="dark"] #sundaySurchargeBanner,
html[data-theme="dark"] #reschedule-blocked-notice,
html[data-theme="dark"] #reschedule-pending-wrap,
html.dark-mode #sundaySurchargeBanner,
html.dark-mode #reschedule-blocked-notice,
html.dark-mode #reschedule-pending-wrap {
  background: #332210 !important;
  border-color: #7A531C !important;
  color: #FCD34D !important;
}

html[data-theme="dark"] #reschedule-pending-copy,
html.dark-mode #reschedule-pending-copy {
  color: #FCD34D !important;
}

html[data-theme="dark"] #inquiryModalSummary,
html.dark-mode #inquiryModalSummary {
  background: #332210 !important;
  border-left-color: #F59E0B !important;
  color: #FCD34D !important;
}

html[data-theme="dark"] #reschedule-success,
html.dark-mode #reschedule-success {
  background: #2D1722 !important;
  border-color: #B84364 !important;
  color: #FF94B2 !important;
}

/* Footer in Dark Mode */
html[data-theme="dark"] footer,
html.dark-mode footer {
  background: #140A0F;
  color: #D4BFC7;
}

html[data-theme="dark"] footer .logo-text,
html.dark-mode footer .logo-text {
  color: #F2B2C2;
}

html[data-theme="dark"] footer a:hover,
html.dark-mode footer a:hover {
  color: #FF94B2;
}

html[data-theme="dark"] .studio-credit--fixed,
html.dark-mode .studio-credit--fixed {
  background: #B84364;
  border-top-color: rgba(255, 255, 255, 0.15);
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.5);
}

html[data-theme="dark"] .studio-credit--drive-promo,
html[data-theme="dark"] .studio-credit--apply-promo,
html.dark-mode .studio-credit--drive-promo,
html.dark-mode .studio-credit--apply-promo {
  background: linear-gradient(90deg, #B84364 0%, #D46383 100%);
}

html[data-theme="dark"] .studio-credit-link,
html.dark-mode .studio-credit-link {
  color: #FFE5EC;
  border-bottom-color: rgba(255, 229, 236, 0.5);
}