/* ============================================================
   main.css — Unified Design System (UDS)
   ============================================================ */

:root {
  /* Dynamic Brand Variables (Overridden by Templates/Admin) */
  --brand-primary: #4EC6C0;
  --brand-primary-text: #FFFFFF;
  --brand-accent: #FF7043;
  --brand-accent-text: #FFFFFF;
  --brand-bg: #FFFFFF;
  --brand-surface: #F8FAFC;
  --brand-border: #E2E8F0;
  --brand-text: #1A1A1A;
  --brand-text-muted: #64748B;

  --hero-overlay-start: rgba(255, 255, 255, 0.15);
  --hero-overlay-end: rgba(255, 255, 255, 0.4);

  /* Default Typography (Can be overridden by data-template) */
  --font-serif: 'Outfit', sans-serif;
  --font-sans: 'Inter', sans-serif;

  /* Core Utility Tokens */
  --white: #FFFFFF;
  --success: #10B981;
  --warning: #F59E0B;
  --danger: #EF4444;
  --info: #3B82F6;
  --sidebar-w: 240px;

  /* Legacy Compat (To be phased out) */
  --bg: var(--brand-bg);
  --sand: var(--brand-surface);
  --sand-mid: var(--brand-border);
  --text-dark: var(--brand-text);
  --text-muted: var(--brand-text-muted);
}

/* Global Selection Color for better contrast */
::selection {
  background-color: var(--brand-primary);
  color: var(--brand-primary-text);
}
::-moz-selection {
  background-color: var(--brand-primary);
  color: var(--brand-primary-text);
}

/* Background Style Overrides */
[data-bg-style="light"] {
  --brand-bg: #FFFFFF;
  --brand-surface: #F8FAFC;
  --brand-text: #0F172A;
  --brand-text-muted: #64748B;
  --brand-border: #E2E8F0;
  --hero-overlay-start: rgba(255, 255, 255, 0.15);
  --hero-overlay-end: rgba(255, 255, 255, 0.4);
}

[data-bg-style="dark"] {
  --brand-bg: #09090B;
  --brand-surface: #18181B;
  --brand-text: #FAFAFA;
  --brand-text-muted: #A1A1AA;
  --brand-border: #27272A;
  --hero-overlay-start: rgba(9, 9, 11, 0.15);
  --hero-overlay-end: rgba(9, 9, 11, 0.4);
}

[data-bg-style="glass"] {
  --brand-bg: #F0F9FF;
  --brand-surface: rgba(255, 255, 255, 0.7);
  --brand-text: #0F172A;
  --brand-text-muted: #64748B;
  --brand-border: rgba(15, 23, 42, 0.1);
  --hero-overlay-start: rgba(240, 249, 255, 0.15);
  --hero-overlay-end: rgba(240, 249, 255, 0.4);
}


/* Core Utility Styles Below */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  color: var(--brand-text, #1A2E2D);
  background: var(--brand-bg, #FFFFFF);
  overflow-x: hidden;
}

/* ── BUTTONS ── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 1.1rem;
  border-radius: 8px;
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  border: none;
  transition: all 0.25s;
  text-decoration: none;
}
.btn-primary   { background: var(--brand-primary, #4EC6C0); color: var(--brand-primary-text, white); }
.btn-primary:hover  { background: var(--brand-secondary, #1A9A94); transform: translateY(-1px); }
.btn-sunset    { background: var(--brand-accent, #FF7043); color: var(--brand-accent-text, white); }
.btn-sunset:hover   { background: var(--brand-accent); filter: brightness(0.9); transform: translateY(-1px); }
.btn-ghost     { background: transparent; color: var(--brand-text); border: 1.5px solid var(--brand-border, rgba(0,0,0,0.08)); }
.btn-ghost:hover    { background: var(--brand-surface, #FFFFFF); border-color: var(--brand-primary); color: var(--brand-primary); }
.btn-danger    { background: var(--danger); color: white; }
.btn-danger:hover   { background: #DC2626; transform: translateY(-1px); }
.btn-success   { background: var(--success); color: white; }
.btn-success:hover  { background: #059669; transform: translateY(-1px); }
.btn-sm  { padding: 0.35rem 0.8rem; font-size: 0.76rem; }
.btn-xs  { padding: 0.25rem 0.6rem; font-size: 0.72rem; }
.btn-icon { width: 28px; height: 28px; padding: 0; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }

/* ── BADGES ── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.2rem 0.6rem;
  border-radius: 50px;
  font-size: 0.7rem;
  font-weight: 500;
  white-space: nowrap;
}
.badge-confirmed { background: #D1FAE5; color: #065F46; }
.badge-completed { background: #DBEAFE; color: #1E40AF; }
.badge-pending   { background: #FEF3C7; color: #92400E; }
.badge-cancelled { background: #FEE2E2; color: #991B1B; }
.badge-cancellation_requested { background: #FFF7ED; color: #9A3412; }
.badge-refunded  { background: #EDE9FE; color: #5B21B6; }
.badge-flagged   { background: #FEE2E2; color: #991B1B; }

/* ── FORM ELEMENTS ── */
.form-group { margin-bottom: 1rem; }
.form-group label {
  display: block;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--brand-text-muted, #7A9A98);
  margin-bottom: 0.3rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  border: 1.5px solid var(--brand-border, rgba(0,0,0,0.08));
  border-radius: 8px;
  padding: 0.65rem 0.9rem;
  font-family: var(--font-sans);
  font-size: 0.88rem;
  color: var(--brand-text, #1A2E2D);
  background: var(--brand-surface, #FFFFFF);
  transition: all 0.2s;
  outline: none;
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px rgba(78, 198, 192, 0.12);
}
.form-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; }

/* ── MODAL ── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
  backdrop-filter: blur(4px);
}
.modal-overlay.open { opacity: 1; pointer-events: all; }

/* ── TOAST ── */
.toast-container {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.toast {
  background: var(--text-dark);
  color: white;
  border-radius: 10px;
  padding: 0.8rem 1.2rem;
  font-size: 0.84rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  animation: toastIn 0.35s cubic-bezier(0.34,1.56,0.64,1) both;
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
  min-width: 240px;
  max-width: 340px;
}
.toast.success { background: var(--success); }
.toast.error   { background: var(--danger); }
.toast.warning { background: var(--warning); color: #1A1A1A; }
@keyframes toastIn  { from { opacity:0; transform: translateX(60px); } to { opacity:1; transform: translateX(0); } }
@keyframes toastOut { to   { opacity:0; transform: translateX(60px); } }