/**
 * Maralab Booking Widget — Design System (ADR-034)
 * Minimal Clean: Airbnb/Stripe Ästhetik
 * All classes prefixed with ml- to avoid conflicts with WP/YOOtheme.
 */

/* ══════════════════════════════════════════════════════════════════════════
   DESIGN TOKENS
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Brand — overridden per tenant via JS */
  --ml-brand: #6366f1;
  --ml-brand-hover: #4f46e5;
  --ml-brand-light: #eef2ff;
  --ml-brand-subtle: #f5f3ff;

  /* Neutrals */
  --ml-gray-50: #fafafa;
  --ml-gray-100: #f5f5f5;
  --ml-gray-200: #e5e5e5;
  --ml-gray-300: #d4d4d4;
  --ml-gray-400: #a3a3a3;
  --ml-gray-500: #737373;
  --ml-gray-600: #525252;
  --ml-gray-700: #404040;
  --ml-gray-800: #262626;
  --ml-gray-900: #171717;

  /* Semantic */
  --ml-success: #16a34a;
  --ml-success-light: #f0fdf4;
  --ml-warning: #d97706;
  --ml-warning-light: #fffbeb;
  --ml-error: #dc2626;
  --ml-error-light: #fef2f2;
  --ml-info: #2563eb;
  --ml-info-light: #eff6ff;

  /* Text */
  --ml-text-primary: #171717;
  --ml-text-secondary: #525252;
  --ml-text-muted: #a3a3a3;
  --ml-text-inverse: #ffffff;

  /* Background */
  --ml-bg-primary: #ffffff;
  --ml-bg-secondary: #fafafa;

  /* Typography */
  --ml-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ml-text-xs: 0.75rem;
  --ml-text-sm: 0.875rem;
  --ml-text-base: 1rem;
  --ml-text-lg: 1.125rem;
  --ml-text-xl: 1.25rem;
  --ml-text-2xl: 1.5rem;
  --ml-font-normal: 400;
  --ml-font-medium: 500;
  --ml-font-semibold: 600;
  --ml-font-bold: 700;

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

  /* Radii */
  --ml-radius-sm: 6px;
  --ml-radius-md: 8px;
  --ml-radius-lg: 12px;
  --ml-radius-xl: 16px;
  --ml-radius-full: 9999px;

  /* Shadows */
  --ml-shadow-xs: 0 1px 2px rgba(0,0,0,0.05);
  --ml-shadow-sm: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
  --ml-shadow-md: 0 4px 6px rgba(0,0,0,0.06), 0 2px 4px rgba(0,0,0,0.04);
  --ml-shadow-lg: 0 10px 15px rgba(0,0,0,0.08), 0 4px 6px rgba(0,0,0,0.04);

  /* Focus */
  --ml-ring: 0 0 0 3px var(--ml-brand-light);

  /* Transitions */
  --ml-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --ml-transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --ml-transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
  --ml-transition-spring: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ══════════════════════════════════════════════════════════════════════════
   WIDGET CONTAINER
   ══════════════════════════════════════════════════════════════════════════ */

.ml-widget {
  font-family: var(--ml-font-sans);
  font-size: var(--ml-text-base);
  line-height: 1.5;
  color: var(--ml-text-primary);
  background: var(--ml-bg-primary);
  border-radius: var(--ml-radius-xl);
  box-shadow: var(--ml-shadow-lg);
  max-width: 480px;
  margin: 0 auto;
  overflow: hidden;
}
.ml-widget--minimal { max-width: 400px; font-size: var(--ml-text-sm); }

@media (max-width: 520px) {
  .ml-widget {
    border-radius: 0;
    box-shadow: none;
    max-width: 100%;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   STEPPER
   ══════════════════════════════════════════════════════════════════════════ */

.ml-steps {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--ml-space-5) var(--ml-space-6);
  border-bottom: 1px solid var(--ml-gray-100);
}

.ml-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ml-space-1);
  position: relative;
  flex: 1;
}

.ml-step-num {
  width: 32px;
  height: 32px;
  border-radius: var(--ml-radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--ml-text-xs);
  font-weight: var(--ml-font-bold);
  transition: all var(--ml-transition-base);
  background: var(--ml-gray-100);
  color: var(--ml-text-muted);
}

.ml-step--active .ml-step-num {
  background: var(--ml-brand);
  color: var(--ml-text-inverse);
  box-shadow: var(--ml-ring);
}

.ml-step--done .ml-step-num {
  background: var(--ml-success);
  color: var(--ml-text-inverse);
}

.ml-step-label {
  font-size: var(--ml-text-xs);
  font-weight: var(--ml-font-medium);
  color: var(--ml-text-muted);
  white-space: nowrap;
}

.ml-step--active .ml-step-label {
  color: var(--ml-brand);
  font-weight: var(--ml-font-semibold);
}

.ml-step--done .ml-step-label { color: var(--ml-success); }

/* Connector lines */
.ml-step:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 16px;
  left: calc(50% + 20px);
  width: calc(100% - 40px);
  height: 2px;
  background: var(--ml-gray-200);
}
.ml-step--done:not(:last-child)::after { background: var(--ml-success); }

@media (max-width: 400px) {
  .ml-step-label { display: none; }
  .ml-steps { padding: var(--ml-space-4); }
}

/* ══════════════════════════════════════════════════════════════════════════
   BODY & NAV
   ══════════════════════════════════════════════════════════════════════════ */

.ml-body {
  padding: var(--ml-space-6);
  animation: ml-fadeInUp 0.25s ease-out;
}

.ml-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--ml-space-4) var(--ml-space-6);
  border-top: 1px solid var(--ml-gray-100);
}

/* ── Sticky Price Footer ──────────────────────────────────────────────── */
.ml-sticky-footer {
  position: sticky;
  bottom: 0;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--ml-space-3) var(--ml-space-6);
  background: var(--ml-bg-secondary);
  border-top: 1px solid var(--ml-gray-100);
  font-size: var(--ml-text-sm);
  color: var(--ml-text-secondary);
}
.ml-sticky-footer__label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.ml-sticky-footer__service {
  font-weight: var(--ml-font-semibold);
  color: var(--ml-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ml-sticky-footer__detail {
  font-size: var(--ml-text-xs);
  color: var(--ml-text-muted);
}
.ml-sticky-footer__price {
  text-align: right;
  flex-shrink: 0;
  margin-left: var(--ml-space-4);
}
.ml-sticky-footer__amount {
  font-size: var(--ml-text-lg);
  font-weight: var(--ml-font-bold);
  color: var(--ml-text-primary);
}
.ml-sticky-footer__tax {
  font-size: var(--ml-text-xs);
  color: var(--ml-text-muted);
}

/* ══════════════════════════════════════════════════════════════════════════
   ERROR & INFO
   ══════════════════════════════════════════════════════════════════════════ */

.ml-error {
  background: var(--ml-error-light);
  border: 1px solid rgba(220,38,38,0.15);
  color: var(--ml-error);
  padding: var(--ml-space-3) var(--ml-space-4);
  margin: var(--ml-space-3) var(--ml-space-6) 0;
  border-radius: var(--ml-radius-md);
  font-size: var(--ml-text-sm);
  font-weight: var(--ml-font-medium);
}

.ml-info {
  padding: var(--ml-space-3);
  font-size: var(--ml-text-sm);
  color: var(--ml-text-secondary);
  text-align: center;
}
.ml-info--warn {
  color: var(--ml-error);
  background: var(--ml-error-light);
  border-radius: var(--ml-radius-md);
  padding: var(--ml-space-3) var(--ml-space-4);
}
.ml-info--hint {
  color: var(--ml-text-secondary);
  background: var(--ml-bg-secondary);
  border-radius: var(--ml-radius-md);
  padding: var(--ml-space-3) var(--ml-space-4);
  font-size: var(--ml-text-sm);
}
.ml-info--error {
  color: var(--ml-error);
  background: var(--ml-error-light);
  border-radius: var(--ml-radius-md);
  padding: var(--ml-space-3) var(--ml-space-4);
}

/* ══════════════════════════════════════════════════════════════════════════
   FORM FIELDS
   ══════════════════════════════════════════════════════════════════════════ */

.ml-field { margin-bottom: var(--ml-space-4); }
.ml-field--error .ml-input,
.ml-field--error .ml-select,
.ml-field--error .ml-textarea {
  border-color: var(--ml-error);
}
.ml-field--error .ml-input:focus,
.ml-field--error .ml-select:focus,
.ml-field--error .ml-textarea:focus {
  border-color: var(--ml-error);
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
}
.ml-field__error-msg {
  font-size: var(--ml-text-xs);
  color: var(--ml-error);
  margin-top: var(--ml-space-1);
}

.ml-label {
  display: block;
  font-size: var(--ml-text-sm);
  font-weight: var(--ml-font-medium);
  color: var(--ml-text-secondary);
  margin-bottom: var(--ml-space-1);
}

.ml-input, .ml-select, .ml-textarea {
  width: 100%;
  padding: var(--ml-space-3) var(--ml-space-4);
  border: 1.5px solid var(--ml-gray-200);
  border-radius: var(--ml-radius-md);
  font-family: var(--ml-font-sans);
  font-size: var(--ml-text-base);
  color: var(--ml-text-primary);
  background: var(--ml-bg-primary);
  box-sizing: border-box;
  height: 48px;
  transition: all var(--ml-transition-fast);
}
.ml-input:hover, .ml-select:hover, .ml-textarea:hover {
  border-color: var(--ml-gray-300);
}
.ml-input:focus, .ml-select:focus, .ml-textarea:focus {
  outline: none;
  border-color: var(--ml-brand);
  box-shadow: var(--ml-ring);
}
.ml-input::placeholder { color: var(--ml-text-muted); }
.ml-textarea { min-height: 100px; height: auto; resize: vertical; }
.ml-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='%23737373'%3E%3Cpath d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 20px 20px;
  padding-right: 40px;
}

.ml-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ml-space-3); }
@media (max-width: 400px) { .ml-row { grid-template-columns: 1fr; } }

.ml-checkbox {
  display: flex;
  align-items: center;
  gap: var(--ml-space-2);
  font-size: var(--ml-text-sm);
  color: var(--ml-text-secondary);
  cursor: pointer;
  margin-top: var(--ml-space-2);
}
.ml-checkbox a { color: var(--ml-brand); }
.ml-checkbox input[type="checkbox"] { accent-color: var(--ml-brand); }

/* ══════════════════════════════════════════════════════════════════════════
   COUNTER
   ══════════════════════════════════════════════════════════════════════════ */

.ml-counter {
  display: flex;
  align-items: center;
  border: 1.5px solid var(--ml-gray-200);
  border-radius: var(--ml-radius-md);
  overflow: hidden;
  width: fit-content;
}
.ml-counter button {
  width: 40px;
  height: 40px;
  border: none;
  background: var(--ml-bg-secondary);
  font-size: var(--ml-text-lg);
  cursor: pointer;
  color: var(--ml-text-primary);
  transition: background var(--ml-transition-fast);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ml-counter button:hover { background: var(--ml-gray-200); }
.ml-counter span {
  width: 44px;
  text-align: center;
  font-weight: var(--ml-font-semibold);
  font-size: var(--ml-text-base);
}

.ml-counter--small { display: flex; align-items: center; }
.ml-counter--small button {
  width: 28px;
  height: 28px;
  border: 1.5px solid var(--ml-gray-200);
  background: var(--ml-bg-primary);
  font-size: var(--ml-text-base);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--ml-radius-sm);
  color: var(--ml-text-primary);
  transition: all var(--ml-transition-fast);
}
.ml-counter--small button:hover { background: var(--ml-brand); color: var(--ml-text-inverse); border-color: var(--ml-brand); }
.ml-counter--small span { min-width: 28px; text-align: center; font-size: var(--ml-text-sm); font-weight: var(--ml-font-semibold); }

/* ══════════════════════════════════════════════════════════════════════════
   BUTTONS
   ══════════════════════════════════════════════════════════════════════════ */

.ml-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ml-space-2);
  font-family: var(--ml-font-sans);
  font-size: var(--ml-text-base);
  font-weight: var(--ml-font-semibold);
  line-height: 1;
  border: none;
  border-radius: var(--ml-radius-md);
  cursor: pointer;
  transition: all var(--ml-transition-fast);
  white-space: nowrap;
  text-decoration: none;
}
.ml-btn:focus-visible { outline: none; box-shadow: var(--ml-ring); }
.ml-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none !important; }

.ml-btn--primary {
  background: var(--ml-brand);
  color: var(--ml-text-inverse);
  padding: var(--ml-space-3) var(--ml-space-6);
  height: 48px;
}
.ml-btn--primary:hover:not(:disabled) {
  background: var(--ml-brand-hover);
  box-shadow: var(--ml-shadow-md);
  transform: translateY(-1px);
}
.ml-btn--primary:active:not(:disabled) { transform: translateY(0); }

.ml-btn--secondary {
  background: var(--ml-bg-primary);
  color: var(--ml-text-secondary);
  border: 1.5px solid var(--ml-gray-200);
  padding: var(--ml-space-3) var(--ml-space-6);
  height: 48px;
}
.ml-btn--secondary:hover:not(:disabled) {
  border-color: var(--ml-brand);
  color: var(--ml-brand);
  background: var(--ml-brand-subtle);
}

.ml-btn--ghost {
  background: transparent;
  color: var(--ml-text-secondary);
  padding: var(--ml-space-2) var(--ml-space-3);
}
.ml-btn--ghost:hover { background: var(--ml-gray-100); color: var(--ml-text-primary); }

.ml-btn--express {
  width: 100%;
  margin-bottom: var(--ml-space-4);
  background: var(--ml-brand-subtle);
  color: var(--ml-brand);
  border: 1.5px solid var(--ml-brand);
  font-weight: var(--ml-font-semibold);
}
.ml-btn--express:hover:not(:disabled) {
  background: var(--ml-brand);
  color: var(--ml-text-inverse);
}
.ml-btn--express:disabled { opacity: 0.6; cursor: wait; }

.ml-btn--small {
  padding: var(--ml-space-1) var(--ml-space-3);
  font-size: var(--ml-text-xs);
  height: auto;
  border: 1.5px solid var(--ml-gray-200);
  background: var(--ml-bg-primary);
}
.ml-btn--small:hover { background: var(--ml-bg-secondary); border-color: var(--ml-gray-300); }

/* ══════════════════════════════════════════════════════════════════════════
   CALENDAR
   ══════════════════════════════════════════════════════════════════════════ */

.ml-calendar-wrap { margin-bottom: var(--ml-space-4); }

.ml-cal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--ml-space-3);
}
.ml-cal-title {
  font-size: var(--ml-text-lg);
  font-weight: var(--ml-font-semibold);
}
.ml-cal-nav {
  width: 36px;
  height: 36px;
  border-radius: var(--ml-radius-full);
  border: 1.5px solid var(--ml-gray-200);
  background: var(--ml-bg-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: var(--ml-text-lg);
  color: var(--ml-text-primary);
  transition: all var(--ml-transition-fast);
}
.ml-cal-nav:hover { border-color: var(--ml-brand); background: var(--ml-brand-light); }

.ml-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.ml-cal-dow {
  text-align: center;
  font-size: var(--ml-text-xs);
  font-weight: var(--ml-font-semibold);
  color: var(--ml-text-muted);
  padding: var(--ml-space-2) 0;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.ml-cal-day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--ml-text-sm);
  font-weight: var(--ml-font-medium);
  border-radius: var(--ml-radius-md);
  cursor: pointer;
  transition: all var(--ml-transition-fast);
  position: relative;
}
.ml-cal-day:hover:not(.ml-cal-day--past):not(.ml-cal-day--empty) {
  background: var(--ml-brand-light);
  color: var(--ml-brand);
}
.ml-cal-day--empty { visibility: hidden; }
.ml-cal-day--past { color: var(--ml-text-muted); opacity: 0.4; cursor: default; }

.ml-cal-day--from, .ml-cal-day--to {
  background: var(--ml-brand) !important;
  color: var(--ml-text-inverse) !important;
  font-weight: var(--ml-font-bold);
  box-shadow: var(--ml-shadow-sm);
}
.ml-cal-day--range {
  background: var(--ml-brand-light);
  color: var(--ml-brand);
  border-radius: 0;
}

/* ── Dates Row ─────────────────────────────────────────────────────────── */

.ml-dates-row {
  display: flex;
  gap: var(--ml-space-4);
  margin-top: var(--ml-space-2);
}
.ml-date-display {
  flex: 1;
  background: var(--ml-bg-secondary);
  border: 1.5px solid var(--ml-gray-200);
  border-radius: var(--ml-radius-md);
  padding: var(--ml-space-2) var(--ml-space-3);
  text-align: center;
}
.ml-date-value {
  display: block;
  font-weight: var(--ml-font-semibold);
  font-size: var(--ml-text-sm);
  margin-top: 2px;
}

/* ══════════════════════════════════════════════════════════════════════════
   FINCA CALENDAR
   ══════════════════════════════════════════════════════════════════════════ */

.ml-cal-legend {
  display: flex;
  gap: var(--ml-space-3);
  justify-content: center;
  margin-bottom: var(--ml-space-2);
  font-size: var(--ml-text-xs);
  color: var(--ml-text-secondary);
}
.ml-cal-legend-item { display: flex; align-items: center; gap: var(--ml-space-1); }
.ml-cal-dot { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.ml-cal-dot--available { background: var(--ml-success); }
.ml-cal-dot--booked { background: var(--ml-error); }
.ml-cal-dot--changeover { background: var(--ml-warning); }

.ml-cal-day--finca {
  min-height: 52px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: var(--ml-space-1) 2px;
  border-radius: var(--ml-radius-md);
  font-size: var(--ml-text-sm);
  transition: all var(--ml-transition-fast);
  position: relative;
  aspect-ratio: auto;
}
.ml-cal-day--finca.ml-cal-day--available { background: var(--ml-success-light); cursor: pointer; }
.ml-cal-day--finca.ml-cal-day--available:hover { background: #dcfce7; }
.ml-cal-day--finca.ml-cal-day--booked { background: var(--ml-error-light); color: #991b1b; cursor: not-allowed; opacity: 0.7; }
.ml-cal-day--finca.ml-cal-day--blocked { background: var(--ml-gray-100); color: var(--ml-text-muted); cursor: not-allowed; }
.ml-cal-day--finca.ml-cal-day--changeover { background: var(--ml-warning-light); cursor: pointer; }
.ml-cal-day--finca.ml-cal-day--changeover:hover { background: #fef9c3; }
.ml-cal-day--finca.ml-cal-day--past { background: transparent; color: var(--ml-text-muted); cursor: not-allowed; }

.ml-cal-day-num { font-weight: var(--ml-font-medium); }
.ml-cal-day-price { font-size: 10px; color: var(--ml-text-secondary); line-height: 1; }

.ml-cal-day--finca.ml-cal-day--from,
.ml-cal-day--finca.ml-cal-day--to { background: var(--ml-brand) !important; color: var(--ml-text-inverse) !important; }
.ml-cal-day--finca.ml-cal-day--from .ml-cal-day-price,
.ml-cal-day--finca.ml-cal-day--to .ml-cal-day-price { color: rgba(255,255,255,0.7); }
.ml-cal-day--finca.ml-cal-day--range { background: var(--ml-brand-light) !important; }

/* Finca: Season dots */
.ml-cal-day--finca.ml-cal-day--season-high::before {
  content: '';
  position: absolute;
  top: 2px;
  right: 2px;
  width: 6px;
  height: 6px;
  border-radius: var(--ml-radius-full);
  background: var(--ml-error);
}
.ml-cal-day--finca.ml-cal-day--season-mid::before {
  content: '';
  position: absolute;
  top: 2px;
  right: 2px;
  width: 6px;
  height: 6px;
  border-radius: var(--ml-radius-full);
  background: var(--ml-warning);
}

/* ══════════════════════════════════════════════════════════════════════════
   RESOURCE CARD
   ══════════════════════════════════════════════════════════════════════════ */

.ml-resource-card {
  background: var(--ml-bg-secondary);
  border: 1.5px solid var(--ml-gray-200);
  border-radius: var(--ml-radius-lg);
  padding: var(--ml-space-3) var(--ml-space-4);
  margin-bottom: var(--ml-space-4);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* ══════════════════════════════════════════════════════════════════════════
   SLOT CARDS (Bodega/Events)
   ══════════════════════════════════════════════════════════════════════════ */

.ml-slot-list {
  display: flex;
  flex-direction: column;
  gap: var(--ml-space-2);
  margin: var(--ml-space-2) 0;
}

.ml-slot-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--ml-space-3) var(--ml-space-4);
  border: 1.5px solid var(--ml-gray-200);
  border-radius: var(--ml-radius-md);
  cursor: pointer;
  transition: all var(--ml-transition-fast);
}
.ml-slot-card:hover { border-color: var(--ml-brand); background: var(--ml-brand-subtle); }
.ml-slot-card.ml-slot--selected { border-color: var(--ml-brand); background: var(--ml-brand-light); box-shadow: var(--ml-ring); }
.ml-slot-card.ml-slot--full { opacity: 0.4; cursor: not-allowed; background: var(--ml-gray-50); }

.ml-slot-time { font-size: var(--ml-text-base); font-weight: var(--ml-font-semibold); color: var(--ml-text-primary); min-width: 120px; }
.ml-slot-capacity { flex: 1; display: flex; flex-direction: column; gap: var(--ml-space-1); margin-left: var(--ml-space-4); }
.ml-slot-bar { height: 6px; background: var(--ml-gray-100); border-radius: var(--ml-radius-full); overflow: hidden; }
.ml-slot-bar-fill { height: 100%; background: var(--ml-brand); border-radius: var(--ml-radius-full); transition: width var(--ml-transition-slow); }
.ml-slot-card.ml-slot--full .ml-slot-bar-fill { background: var(--ml-error); }
.ml-slot-count { font-size: var(--ml-text-xs); color: var(--ml-text-muted); }

.ml-slot-flag { font-size: 1.2em; vertical-align: middle; margin-right: 2px; }
.ml-slot-lang { font-size: var(--ml-text-xs); color: var(--ml-text-secondary); font-weight: var(--ml-font-normal); }

/* ══════════════════════════════════════════════════════════════════════════
   PARTICIPANT MATRIX (Bodega)
   ══════════════════════════════════════════════════════════════════════════ */

.ml-matrix { margin: var(--ml-space-2) 0 var(--ml-space-4); }
.ml-matrix-group { margin-bottom: var(--ml-space-3); }
.ml-matrix-group-label {
  font-size: var(--ml-text-xs);
  font-weight: var(--ml-font-semibold);
  color: var(--ml-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: var(--ml-space-1) 0 var(--ml-space-2);
  border-bottom: 1px solid var(--ml-gray-200);
  margin-bottom: var(--ml-space-2);
}
.ml-matrix-row {
  display: flex;
  align-items: center;
  gap: var(--ml-space-2);
  padding: var(--ml-space-2) 0;
  min-height: 36px;
}
.ml-matrix-label { flex: 1; font-size: var(--ml-text-sm); color: var(--ml-text-primary); }
.ml-matrix-price { font-size: var(--ml-text-sm); color: var(--ml-text-muted); white-space: nowrap; min-width: 70px; text-align: right; }
.ml-matrix-subtotal { font-size: var(--ml-text-sm); font-weight: var(--ml-font-semibold); color: var(--ml-brand); white-space: nowrap; min-width: 65px; text-align: right; }

/* ══════════════════════════════════════════════════════════════════════════
   PRICING
   ══════════════════════════════════════════════════════════════════════════ */

.ml-price-card {
  background: var(--ml-bg-secondary);
  border-radius: var(--ml-radius-lg);
  padding: var(--ml-space-5);
  margin-top: var(--ml-space-4);
}
.ml-price-header { font-size: var(--ml-text-base); font-weight: var(--ml-font-semibold); color: var(--ml-text-primary); }
.ml-price-subheader { font-size: var(--ml-text-sm); color: var(--ml-text-secondary); margin-top: 2px; }
.ml-price-row {
  display: flex;
  justify-content: space-between;
  padding: var(--ml-space-1) 0;
  font-size: var(--ml-text-sm);
  color: var(--ml-text-secondary);
}
.ml-price-divider { height: 2px; background: var(--ml-brand); margin: var(--ml-space-3) 0; border: none; }
.ml-price-row--total {
  padding-top: var(--ml-space-2);
  font-size: var(--ml-text-xl);
  font-weight: var(--ml-font-bold);
  color: var(--ml-text-primary);
}
.ml-price-row--deposit {
  font-size: var(--ml-text-sm);
  color: var(--ml-info);
  font-weight: var(--ml-font-semibold);
}
.ml-price-row--tax { font-size: var(--ml-text-xs); color: var(--ml-text-muted); }
.ml-price-row--refundable { color: var(--ml-text-muted); font-style: italic; font-size: var(--ml-text-xs); }

.ml-cancellation-note {
  margin-top: var(--ml-space-4);
  padding: var(--ml-space-3) var(--ml-space-4);
  font-size: var(--ml-text-sm);
  color: var(--ml-success);
  background: var(--ml-success-light);
  border-radius: var(--ml-radius-md);
  text-align: center;
}

/* ══════════════════════════════════════════════════════════════════════════
   SUMMARY
   ══════════════════════════════════════════════════════════════════════════ */

.ml-summary { margin-bottom: var(--ml-space-4); }
.ml-summary-row {
  display: flex;
  justify-content: space-between;
  padding: var(--ml-space-2) 0;
  border-bottom: 1px solid var(--ml-gray-100);
  font-size: var(--ml-text-sm);
  color: var(--ml-text-secondary);
}
.ml-summary-row strong { color: var(--ml-text-primary); }
.ml-summary-divider { height: 1px; background: var(--ml-gray-200); margin: var(--ml-space-2) 0; }

/* ══════════════════════════════════════════════════════════════════════════
   FINCA EXTRAS
   ══════════════════════════════════════════════════════════════════════════ */

.ml-extras-list { display: flex; flex-direction: column; gap: var(--ml-space-2); margin-bottom: var(--ml-space-4); }
.ml-extra-item {
  display: flex;
  align-items: flex-start;
  gap: var(--ml-space-3);
  padding: var(--ml-space-3);
  border: 1.5px solid var(--ml-gray-200);
  border-radius: var(--ml-radius-md);
  cursor: pointer;
  transition: border-color var(--ml-transition-fast);
}
.ml-extra-item:hover { border-color: var(--ml-brand); }
.ml-extra-item--mandatory { background: var(--ml-bg-secondary); }
.ml-extra-item--mandatory input[disabled] { opacity: 0.5; }
.ml-extra-item--auto { background: var(--ml-bg-secondary); border-style: dashed; }
.ml-extra-item input[type="checkbox"] { margin-top: 2px; accent-color: var(--ml-brand); }
.ml-extra-info { flex: 1; }
.ml-extra-label { display: block; font-size: var(--ml-text-sm); font-weight: var(--ml-font-medium); }
.ml-extra-note { display: block; font-size: var(--ml-text-xs); color: var(--ml-text-secondary); margin-top: 2px; }
.ml-extra-price { font-size: var(--ml-text-sm); font-weight: var(--ml-font-semibold); white-space: nowrap; }

/* ══════════════════════════════════════════════════════════════════════════
   APPOINTMENT: CATEGORY CARDS
   ══════════════════════════════════════════════════════════════════════════ */

.ml-appt-categories {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--ml-space-3);
  margin-top: var(--ml-space-3);
}
@media (max-width: 480px) {
  .ml-appt-categories { grid-template-columns: repeat(2, 1fr); }
}

.ml-appt-cat {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ml-space-2);
  padding: var(--ml-space-5) var(--ml-space-3) var(--ml-space-4);
  border: 1.5px solid var(--ml-gray-200);
  border-radius: var(--ml-radius-lg);
  background: var(--ml-bg-primary);
  cursor: pointer;
  transition: all var(--ml-transition-base);
  font-size: var(--ml-text-sm);
  box-shadow: var(--ml-shadow-xs);
  overflow: hidden;
}
.ml-appt-cat:hover {
  border-color: var(--ml-brand);
  box-shadow: var(--ml-shadow-md);
  transform: translateY(-1px);
}
.ml-appt-cat--active {
  border-color: var(--ml-brand);
  background: var(--ml-brand-subtle);
  box-shadow: var(--ml-ring);
}
.ml-appt-cat-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  font-size: 1.75rem;
  line-height: 1;
  background: var(--ml-bg-secondary);
  border-radius: var(--ml-radius-full);
}
.ml-appt-cat--active .ml-appt-cat-icon { background: var(--ml-brand-light); }
.ml-appt-cat-label { font-weight: var(--ml-font-semibold); text-align: center; font-size: var(--ml-text-xs); }

/* Checkmark on selected */
.ml-appt-cat--active::after {
  content: '\2713';
  position: absolute;
  top: var(--ml-space-2);
  right: var(--ml-space-2);
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--ml-text-xs);
  color: var(--ml-text-inverse);
  background: var(--ml-brand);
  border-radius: var(--ml-radius-full);
  animation: ml-pop 0.3s var(--ml-transition-spring);
}
/* Hide JS-generated check when CSS ::after handles it */
.ml-appt-cat-check { display: none; }

/* ══════════════════════════════════════════════════════════════════════════
   APPOINTMENT: TYPE RADIO BUTTONS
   ══════════════════════════════════════════════════════════════════════════ */

.ml-appt-types { display: flex; flex-direction: column; gap: var(--ml-space-3); margin-top: var(--ml-space-3); }
.ml-appt-type {
  display: flex;
  align-items: center;
  gap: var(--ml-space-4);
  padding: var(--ml-space-4);
  border: 1.5px solid var(--ml-gray-200);
  border-radius: var(--ml-radius-md);
  background: var(--ml-bg-primary);
  cursor: pointer;
  transition: all var(--ml-transition-fast);
}
.ml-appt-type:hover { border-color: var(--ml-brand); }
.ml-appt-type--active { border-color: var(--ml-brand); background: var(--ml-brand-subtle); }

.ml-appt-radio {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: 2px solid var(--ml-gray-300);
  border-radius: var(--ml-radius-full);
  transition: border-color var(--ml-transition-fast);
}
.ml-appt-type:hover .ml-appt-radio,
.ml-appt-type--active .ml-appt-radio { border-color: var(--ml-brand); }
.ml-appt-radio-dot {
  width: 10px;
  height: 10px;
  border-radius: var(--ml-radius-full);
  background: transparent;
  transition: background var(--ml-transition-fast);
}
.ml-appt-radio-dot--checked { background: var(--ml-brand); }
.ml-appt-type-content { display: flex; flex-direction: column; gap: 2px; }
.ml-appt-type-name { font-weight: var(--ml-font-medium); font-size: var(--ml-text-sm); }
.ml-appt-type-meta { font-size: var(--ml-text-xs); color: var(--ml-text-secondary); }

/* ══════════════════════════════════════════════════════════════════════════
   APPOINTMENT: WEEK VIEW
   ══════════════════════════════════════════════════════════════════════════ */

.ml-appt-week-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--ml-space-4);
}
.ml-appt-week-label { font-weight: var(--ml-font-semibold); font-size: var(--ml-text-sm); }

.ml-appt-week-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--ml-space-1);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
@media (max-width: 640px) {
  .ml-appt-week-grid { grid-template-columns: repeat(5, 1fr); }
  .ml-appt-week-grid .ml-appt-day:nth-child(6),
  .ml-appt-week-grid .ml-appt-day:nth-child(7) { display: none; }
}

.ml-appt-day {
  border: 1.5px solid var(--ml-gray-200);
  border-radius: var(--ml-radius-md);
  padding: var(--ml-space-1);
  min-height: 80px;
}
.ml-appt-day-header {
  font-size: var(--ml-text-xs);
  font-weight: var(--ml-font-semibold);
  text-align: center;
  padding: var(--ml-space-1);
  border-bottom: 1px solid var(--ml-gray-100);
  margin-bottom: var(--ml-space-1);
  color: var(--ml-text-secondary);
}

.ml-appt-slot {
  display: block;
  width: 100%;
  padding: var(--ml-space-1);
  margin-bottom: 2px;
  font-size: var(--ml-text-xs);
  font-weight: var(--ml-font-medium);
  text-align: center;
  border: 1px solid transparent;
  border-radius: var(--ml-radius-sm);
  background: var(--ml-brand-subtle);
  color: var(--ml-brand);
  cursor: pointer;
  transition: all var(--ml-transition-fast);
}
.ml-appt-slot:hover { background: var(--ml-brand-light); border-color: var(--ml-brand); }
.ml-appt-slot--selected { background: var(--ml-brand); color: var(--ml-text-inverse); font-weight: var(--ml-font-semibold); box-shadow: var(--ml-shadow-sm); }
.ml-appt-slot--empty { background: var(--ml-gray-50); color: var(--ml-text-muted); cursor: default; border: none; }

/* Staff selector */
.ml-appt-staff-select { margin-top: var(--ml-space-4); }
.ml-appt-staff-select h4 { margin: 0 0 var(--ml-space-2); font-size: var(--ml-text-sm); font-weight: var(--ml-font-semibold); }
.ml-appt-staff {
  display: inline-flex;
  align-items: center;
  gap: var(--ml-space-2);
  padding: var(--ml-space-2) var(--ml-space-4);
  margin: 0 var(--ml-space-2) var(--ml-space-2) 0;
  border: 1.5px solid var(--ml-gray-200);
  border-radius: var(--ml-radius-md);
  background: var(--ml-bg-primary);
  cursor: pointer;
  font-size: var(--ml-text-sm);
  transition: all var(--ml-transition-fast);
}
.ml-appt-staff:hover { border-color: var(--ml-brand); }
.ml-appt-staff--active { border-color: var(--ml-brand); background: var(--ml-brand-subtle); font-weight: var(--ml-font-semibold); box-shadow: var(--ml-ring); }

/* ══════════════════════════════════════════════════════════════════════════
   TRAVEL & ZONES (Handwerker)
   ══════════════════════════════════════════════════════════════════════════ */

.ml-travel-badge {
  font-weight: var(--ml-font-medium);
  padding: var(--ml-space-3) var(--ml-space-4);
  background: var(--ml-bg-secondary);
  border-radius: var(--ml-radius-md);
}

.ml-appt-zones {
  display: flex;
  flex-direction: column;
  gap: var(--ml-space-1);
  margin-top: var(--ml-space-2);
}
.ml-zone {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--ml-space-2) var(--ml-space-3);
  border-radius: var(--ml-radius-sm);
  font-size: var(--ml-text-xs);
  transition: all var(--ml-transition-fast);
  background: var(--ml-bg-secondary);
  color: var(--ml-text-secondary);
}
.ml-zone--active { font-weight: var(--ml-font-semibold); color: var(--ml-text-primary); }
.ml-zone--base.ml-zone--active { background: var(--ml-success-light); color: var(--ml-success); }
.ml-zone--1.ml-zone--active { background: var(--ml-warning-light); color: var(--ml-warning); }
.ml-zone--2.ml-zone--active { background: rgba(249,115,22,0.1); color: #ea580c; }
.ml-zone--far.ml-zone--active { background: var(--ml-error-light); color: var(--ml-error); }

/* ══════════════════════════════════════════════════════════════════════════
   INQUIRY
   ══════════════════════════════════════════════════════════════════════════ */

.ml-inquiry-form { margin-top: var(--ml-space-4); }
.ml-inquiry-title { font-size: var(--ml-text-lg); font-weight: var(--ml-font-semibold); margin-bottom: var(--ml-space-4); }

/* ══════════════════════════════════════════════════════════════════════════
   MODE TOGGLE (Online/Vor Ort)
   ══════════════════════════════════════════════════════════════════════════ */

.ml-mode-toggle { display: flex; gap: var(--ml-space-2); }
.ml-mode-btn {
  padding: var(--ml-space-2) var(--ml-space-4);
  border: 1.5px solid var(--ml-gray-200);
  border-radius: var(--ml-radius-md);
  background: var(--ml-bg-primary);
  cursor: pointer;
  font-size: var(--ml-text-sm);
  font-weight: var(--ml-font-medium);
  transition: all var(--ml-transition-fast);
}
.ml-mode-btn:hover { border-color: var(--ml-brand); }
.ml-mode--active { border-color: var(--ml-brand); background: var(--ml-brand-subtle); color: var(--ml-brand); font-weight: var(--ml-font-semibold); }

/* ══════════════════════════════════════════════════════════════════════════
   LOADING & SPINNER
   ══════════════════════════════════════════════════════════════════════════ */

.ml-loading, .ml-widget-loading {
  display: flex;
  justify-content: center;
  padding: var(--ml-space-8);
}
.ml-spinner {
  width: 28px;
  height: 28px;
  border: 3px solid var(--ml-gray-200);
  border-top-color: var(--ml-brand);
  border-radius: var(--ml-radius-full);
  animation: ml-spin 0.6s linear infinite;
}

/* ══════════════════════════════════════════════════════════════════════════
   SUCCESS / CONFIRMATION
   ══════════════════════════════════════════════════════════════════════════ */

.ml-success {
  text-align: center;
  padding: var(--ml-space-10) var(--ml-space-6);
}
.ml-success-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto var(--ml-space-4);
  background: var(--ml-success-light);
  color: var(--ml-success);
  border-radius: var(--ml-radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  font-weight: var(--ml-font-bold);
  animation: ml-pop 0.5s var(--ml-transition-spring);
}
.ml-success h3 { margin: 0 0 var(--ml-space-2); font-size: var(--ml-text-2xl); font-weight: var(--ml-font-bold); color: var(--ml-text-primary); }
.ml-success p { color: var(--ml-text-secondary); font-size: var(--ml-text-sm); margin: 0 0 var(--ml-space-6); }
.ml-success-ref {
  background: var(--ml-bg-secondary);
  border: 1.5px solid var(--ml-gray-200);
  border-radius: var(--ml-radius-md);
  padding: var(--ml-space-3) var(--ml-space-5);
  display: inline-block;
}
.ml-success-ref span { font-size: var(--ml-text-xs); color: var(--ml-text-muted); display: block; }
.ml-success-ref strong { font-size: var(--ml-text-lg); color: var(--ml-brand); letter-spacing: 1px; }

/* ══════════════════════════════════════════════════════════════════════════
   ANIMATIONS
   ══════════════════════════════════════════════════════════════════════════ */

@keyframes ml-spin { to { transform: rotate(360deg); } }

@keyframes ml-pop {
  0% { transform: scale(0); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

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

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

.ml-skeleton {
  background: linear-gradient(90deg, var(--ml-gray-100) 25%, var(--ml-gray-200) 50%, var(--ml-gray-100) 75%);
  background-size: 200% 100%;
  animation: ml-shimmer 1.5s infinite;
  border-radius: var(--ml-radius-md);
}

/* ══════════════════════════════════════════════════════════════════════════
   MOBILE — Step 2 / Slot Selection (ADR-035 Phase 2)
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {
  /* Calendar: tighter cells */
  .ml-cal-grid { gap: 1px; }
  .ml-cal-day { font-size: var(--ml-text-xs); border-radius: var(--ml-radius-sm); }
  .ml-cal-dow { font-size: 10px; padding: var(--ml-space-1) 0; }
  .ml-cal-nav { width: 32px; height: 32px; }
  .ml-cal-title { font-size: var(--ml-text-base); }

  /* Slot cards: stack time + capacity vertically */
  .ml-slot-card { flex-direction: column; align-items: stretch; gap: var(--ml-space-2); padding: var(--ml-space-3); }
  .ml-slot-time { min-width: 0; font-size: var(--ml-text-sm); }
  .ml-slot-capacity { margin-left: 0; }

  /* Dates row compact */
  .ml-dates-row { gap: var(--ml-space-2); }
  .ml-date-display { padding: var(--ml-space-2) var(--ml-space-3); font-size: var(--ml-text-sm); }

  /* Sticky footer compact */
  .ml-sticky-footer { padding: var(--ml-space-2) var(--ml-space-4); }
  .ml-sticky-footer__service { font-size: var(--ml-text-sm); }
  .ml-sticky-footer__amount { font-size: var(--ml-text-base); }

  /* Nav buttons: larger touch targets */
  .ml-nav { padding: var(--ml-space-3) var(--ml-space-4); }
  .ml-btn { min-height: 48px; font-size: var(--ml-text-sm); }

  /* Body padding compact */
  .ml-body { padding: var(--ml-space-3) var(--ml-space-4); }

  /* Step indicator compact */
  .ml-steps { padding: var(--ml-space-2) var(--ml-space-4); gap: var(--ml-space-1); }
  .ml-step-label { display: none; }
  .ml-step-num { width: 28px; height: 28px; font-size: var(--ml-text-xs); }
}

@media (max-width: 360px) {
  /* Very small screens: minimal spacing */
  .ml-body { padding: var(--ml-space-2) var(--ml-space-3); }
  .ml-cal-day { aspect-ratio: auto; padding: var(--ml-space-1) 0; }
}

/* ══════════════════════════════════════════════════════════════════════════
   ACCESSIBILITY
   ══════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .ml-widget *, .ml-widget *::before, .ml-widget *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

@media (prefers-contrast: high) {
  .ml-widget {
    --ml-gray-200: #999;
    --ml-gray-300: #777;
    --ml-text-muted: #555;
  }
  .ml-input, .ml-card, .ml-slot-card, .ml-appt-cat { border-width: 2px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   DARK THEME — [maralab_booking theme="dark"]
   Matches maralab-ui-system "Frosted Dark" design tokens.
   ══════════════════════════════════════════════════════════════════════════ */

.ml-widget--dark {
  /* Brand — keep identical */
  --ml-brand: #156FE9;
  --ml-brand-hover: #1d80f7;
  --ml-brand-light: rgba(21,111,233,0.15);
  --ml-brand-subtle: rgba(21,111,233,0.08);

  /* Neutrals — dark palette */
  --ml-gray-50:  rgba(255,255,255,0.02);
  --ml-gray-100: rgba(255,255,255,0.04);
  --ml-gray-200: rgba(255,255,255,0.08);
  --ml-gray-300: rgba(255,255,255,0.14);
  --ml-gray-400: rgba(255,255,255,0.28);
  --ml-gray-500: rgba(255,255,255,0.38);
  --ml-gray-600: rgba(255,255,255,0.45);
  --ml-gray-700: rgba(255,255,255,0.62);
  --ml-gray-800: rgba(255,255,255,0.78);
  --ml-gray-900: rgba(255,255,255,0.92);

  /* Semantic — dark-adjusted */
  --ml-success: #00C853;
  --ml-success-light: rgba(0,200,83,0.12);
  --ml-warning: #FFC83C;
  --ml-warning-light: rgba(255,200,60,0.12);
  --ml-error: #FF5050;
  --ml-error-light: rgba(255,80,80,0.10);
  --ml-info: #5b9bf7;
  --ml-info-light: rgba(21,111,233,0.12);

  /* Text */
  --ml-text-primary: rgba(255,255,255,0.92);
  --ml-text-secondary: rgba(255,255,255,0.45);
  --ml-text-muted: rgba(255,255,255,0.28);
  --ml-text-inverse: #0A0F0D;

  /* Background */
  --ml-bg-primary: rgba(255,255,255,0.04);
  --ml-bg-secondary: rgba(255,255,255,0.06);

  /* Shadows — deeper for dark */
  --ml-shadow-xs: 0 1px 2px rgba(0,0,0,0.2);
  --ml-shadow-sm: 0 1px 3px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.2);
  --ml-shadow-md: 0 4px 12px rgba(0,0,0,0.25);
  --ml-shadow-lg: 0 8px 24px rgba(0,0,0,0.3);

  /* Focus ring */
  --ml-ring: 0 0 0 3px rgba(21,111,233,0.25);

  /* Widget container */
  background: #0A0F0D;
  color: var(--ml-text-primary);
  box-shadow: var(--ml-shadow-lg);
  border: 1px solid rgba(255,255,255,0.06);
}

/* ── Stepper ──────────────────────────────────────────────────────────── */
.ml-widget--dark .ml-steps {
  border-bottom-color: rgba(255,255,255,0.06);
}

.ml-widget--dark .ml-step-num {
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.28);
}

.ml-widget--dark .ml-step--done .ml-step-num {
  background: var(--ml-success);
  color: var(--ml-text-inverse);
}

.ml-widget--dark .ml-step:not(:last-child)::after {
  background: rgba(255,255,255,0.08);
}

/* ── Nav bar ──────────────────────────────────────────────────────────── */
.ml-widget--dark .ml-nav {
  border-top-color: rgba(255,255,255,0.06);
}
.ml-widget--dark .ml-sticky-footer {
  background: rgba(255,255,255,0.03);
  border-top-color: rgba(255,255,255,0.06);
}

/* ── Category Cards (Step 1) ──────────────────────────────────────────── */
.ml-widget--dark .ml-appt-cat {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.08);
  box-shadow: none;
}

.ml-widget--dark .ml-appt-cat:hover {
  border-color: var(--ml-brand);
  box-shadow: 0 0 20px rgba(21,111,233,0.15);
}

.ml-widget--dark .ml-appt-cat--active {
  background: rgba(21,111,233,0.08);
  border-color: var(--ml-brand);
}

.ml-widget--dark .ml-appt-cat-icon {
  background: rgba(255,255,255,0.06);
}

.ml-widget--dark .ml-appt-cat--active .ml-appt-cat-icon {
  background: rgba(21,111,233,0.15);
}

/* ── Appointment Type Cards ───────────────────────────────────────────── */
.ml-widget--dark .ml-appt-type {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.08);
}

.ml-widget--dark .ml-appt-type--active {
  background: rgba(21,111,233,0.08);
  border-color: var(--ml-brand);
}

.ml-widget--dark .ml-appt-radio {
  border-color: rgba(255,255,255,0.14);
}

/* ── Week Calendar (Step 2) ───────────────────────────────────────────── */
.ml-widget--dark .ml-appt-week-label {
  color: rgba(255,255,255,0.92);
}

.ml-widget--dark .ml-appt-day {
  border-color: rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.02);
}

.ml-widget--dark .ml-appt-day-header {
  border-bottom-color: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.45);
}

.ml-widget--dark .ml-appt-slot {
  background: rgba(21,111,233,0.08);
  color: #5b9bf7;
}

.ml-widget--dark .ml-appt-slot:hover {
  background: rgba(21,111,233,0.15);
  border-color: var(--ml-brand);
}

.ml-widget--dark .ml-appt-slot--selected {
  background: var(--ml-brand);
  color: #fff;
}

.ml-widget--dark .ml-appt-slot--empty {
  background: rgba(255,255,255,0.02);
  color: rgba(255,255,255,0.15);
}

/* ── Calendar Nav ──────────────────────────────────────────────────────── */
.ml-widget--dark .ml-cal-nav {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.08);
  color: var(--ml-text-primary);
}

.ml-widget--dark .ml-cal-nav:hover {
  border-color: var(--ml-brand);
  background: rgba(21,111,233,0.10);
}

/* ── Slot Cards ───────────────────────────────────────────────────────── */
.ml-widget--dark .ml-slot-card {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.08);
}

.ml-widget--dark .ml-slot-card:hover {
  border-color: var(--ml-brand);
  background: rgba(21,111,233,0.06);
}

.ml-widget--dark .ml-slot-card.ml-slot--selected {
  border-color: var(--ml-brand);
  background: rgba(21,111,233,0.10);
}

.ml-widget--dark .ml-slot-card.ml-slot--full {
  background: rgba(255,255,255,0.02);
}

.ml-widget--dark .ml-slot-bar {
  background: rgba(255,255,255,0.06);
}

/* ── Form Fields (Step 3) ─────────────────────────────────────────────── */
.ml-widget--dark .ml-input,
.ml-widget--dark .ml-select,
.ml-widget--dark .ml-textarea {
  background-color: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.92);
}

.ml-widget--dark .ml-input:hover,
.ml-widget--dark .ml-select:hover,
.ml-widget--dark .ml-textarea:hover {
  border-color: rgba(255,255,255,0.14);
}

.ml-widget--dark .ml-input:focus,
.ml-widget--dark .ml-select:focus,
.ml-widget--dark .ml-textarea:focus {
  border-color: var(--ml-brand);
  box-shadow: var(--ml-ring);
}

.ml-widget--dark .ml-input::placeholder {
  color: rgba(255,255,255,0.20);
}
.ml-widget--dark .ml-field--error .ml-input,
.ml-widget--dark .ml-field--error .ml-select,
.ml-widget--dark .ml-field--error .ml-textarea {
  border-color: var(--ml-error);
}
.ml-widget--dark .ml-field--error .ml-input:focus,
.ml-widget--dark .ml-field--error .ml-select:focus,
.ml-widget--dark .ml-field--error .ml-textarea:focus {
  box-shadow: 0 0 0 3px rgba(255, 80, 80, 0.15);
}

.ml-widget--dark .ml-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='rgba(255,255,255,0.4)'%3E%3Cpath d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 20px 20px;
}

.ml-widget--dark .ml-select option {
  background: #0A0F0D;
  color: rgba(255,255,255,0.92);
}

/* ── Travel Zones (Step 3) ────────────────────────────────────────────── */
.ml-widget--dark .ml-travel-badge {
  background: rgba(255,255,255,0.06);
}

.ml-widget--dark .ml-zone {
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.45);
}

.ml-widget--dark .ml-zone--active {
  color: rgba(255,255,255,0.92);
}

.ml-widget--dark .ml-zone--base.ml-zone--active {
  background: rgba(0,200,83,0.12);
  color: var(--ml-success);
}

.ml-widget--dark .ml-zone--1.ml-zone--active {
  background: rgba(255,200,60,0.12);
  color: var(--ml-warning);
}

.ml-widget--dark .ml-zone--2.ml-zone--active {
  background: rgba(249,115,22,0.12);
  color: #fb923c;
}

.ml-widget--dark .ml-zone--far.ml-zone--active {
  background: rgba(255,80,80,0.10);
  color: var(--ml-error);
}

/* ── Mode Toggle ──────────────────────────────────────────────────────── */
.ml-widget--dark .ml-mode-btn {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.45);
}

.ml-widget--dark .ml-mode-btn:hover {
  border-color: var(--ml-brand);
}

.ml-widget--dark .ml-mode--active {
  background: rgba(21,111,233,0.10);
  border-color: var(--ml-brand);
  color: #5b9bf7;
}

/* ── Counter ──────────────────────────────────────────────────────────── */
.ml-widget--dark .ml-counter {
  border-color: rgba(255,255,255,0.08);
}

.ml-widget--dark .ml-counter button {
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.92);
}

.ml-widget--dark .ml-counter button:hover {
  background: rgba(255,255,255,0.12);
}

.ml-widget--dark .ml-counter--small button {
  border-color: rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.92);
}

/* ── Checkbox ─────────────────────────────────────────────────────────── */
.ml-widget--dark .ml-checkbox {
  color: rgba(255,255,255,0.45);
}

.ml-widget--dark .ml-checkbox a {
  color: #5b9bf7;
}

/* ── Summary (Step 4) ─────────────────────────────────────────────────── */
.ml-widget--dark .ml-summary-row {
  border-bottom-color: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.45);
}

.ml-widget--dark .ml-summary-row strong {
  color: rgba(255,255,255,0.92);
}

.ml-widget--dark .ml-summary-divider {
  background: rgba(255,255,255,0.08);
}

/* ── Pricing Card ─────────────────────────────────────────────────────── */
.ml-widget--dark .ml-price-card {
  background: rgba(255,255,255,0.04);
}
.ml-widget--dark .ml-cancellation-note {
  background: rgba(34,197,94,0.08);
  color: #4ade80;
}

/* ── Resource Card ────────────────────────────────────────────────────── */
.ml-widget--dark .ml-resource-card {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.08);
}

/* ── Error & Info ─────────────────────────────────────────────────────── */
.ml-widget--dark .ml-error {
  background: rgba(255,80,80,0.10);
  border-color: rgba(255,80,80,0.2);
}

.ml-widget--dark .ml-info--hint {
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.45);
}

.ml-widget--dark .ml-info--warn,
.ml-widget--dark .ml-info--error {
  background: rgba(255,80,80,0.10);
}

/* ── Buttons ──────────────────────────────────────────────────────────── */
.ml-widget--dark .ml-btn--secondary {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.92);
}

.ml-widget--dark .ml-btn--secondary:hover:not(:disabled) {
  border-color: var(--ml-brand);
  color: #5b9bf7;
  background: rgba(21,111,233,0.08);
}

.ml-widget--dark .ml-btn--ghost:hover {
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.92);
}

.ml-widget--dark .ml-btn--express {
  background: rgba(21,111,233,0.10);
  border-color: var(--ml-brand);
  color: #5b9bf7;
}
.ml-widget--dark .ml-btn--express:hover:not(:disabled) {
  background: var(--ml-brand);
  color: #fff;
}

.ml-widget--dark .ml-btn--small {
  border-color: rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.92);
}

.ml-widget--dark .ml-btn--small:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.14);
}

/* ── Staff Selector ───────────────────────────────────────────────────── */
.ml-widget--dark .ml-appt-staff {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.92);
}

.ml-widget--dark .ml-appt-staff--active {
  background: rgba(21,111,233,0.08);
  border-color: var(--ml-brand);
}

/* ── Success / Confirmation ───────────────────────────────────────────── */
.ml-widget--dark .ml-success-icon {
  background: rgba(0,200,83,0.12);
  color: var(--ml-success);
}

.ml-widget--dark .ml-success-ref {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.08);
}

/* ── Spinner ──────────────────────────────────────────────────────────── */
.ml-widget--dark .ml-spinner {
  border-color: rgba(255,255,255,0.08);
  border-top-color: var(--ml-brand);
}

/* ── Skeleton ─────────────────────────────────────────────────────────── */
.ml-widget--dark .ml-skeleton {
  background: linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.04) 75%);
  background-size: 200% 100%;
}

/* ── Calendar (date_range in dark) ────────────────────────────────────── */
.ml-widget--dark .ml-cal-day:hover:not(.ml-cal-day--past):not(.ml-cal-day--empty) {
  background: rgba(21,111,233,0.15);
  color: #5b9bf7;
}

.ml-widget--dark .ml-cal-day--range {
  background: rgba(21,111,233,0.10);
  color: #5b9bf7;
}

.ml-widget--dark .ml-date-display {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.08);
}

/* Finca calendar in dark */
.ml-widget--dark .ml-cal-day--finca.ml-cal-day--available { background: rgba(0,200,83,0.10); }
.ml-widget--dark .ml-cal-day--finca.ml-cal-day--available:hover { background: rgba(0,200,83,0.18); }
.ml-widget--dark .ml-cal-day--finca.ml-cal-day--booked { background: rgba(255,80,80,0.10); color: #ff8888; }
.ml-widget--dark .ml-cal-day--finca.ml-cal-day--blocked { background: rgba(255,255,255,0.04); color: rgba(255,255,255,0.28); }
.ml-widget--dark .ml-cal-day--finca.ml-cal-day--changeover { background: rgba(255,200,60,0.10); }
.ml-widget--dark .ml-cal-day--finca.ml-cal-day--changeover:hover { background: rgba(255,200,60,0.18); }
.ml-widget--dark .ml-cal-day--finca.ml-cal-day--range { background: rgba(21,111,233,0.12) !important; }

/* ── Extras (Finca in dark) ───────────────────────────────────────────── */
.ml-widget--dark .ml-extra-item {
  border-color: rgba(255,255,255,0.08);
}

.ml-widget--dark .ml-extra-item:hover {
  border-color: var(--ml-brand);
}

.ml-widget--dark .ml-extra-item--mandatory,
.ml-widget--dark .ml-extra-item--auto {
  background: rgba(255,255,255,0.04);
}

/* ── Participant Matrix (dark) ────────────────────────────────────────── */
.ml-widget--dark .ml-matrix-group-label {
  border-bottom-color: rgba(255,255,255,0.08);
}

/* ── Inquiry ──────────────────────────────────────────────────────────── */
.ml-widget--dark .ml-inquiry-title {
  color: rgba(255,255,255,0.92);
}