/**
 * Resort Booking — Demo Theme Overrides
 * Provides runtime color themes, dark mode, border radius, and animation control.
 * Version: 1.0.0
 */

/* ============================================
   CSS CUSTOM PROPERTIES (defaults)
   ============================================ */
:root {
  --demo-radius: 12px;
}

/* ============================================
   BORDER RADIUS PRESETS
   Applies to cards, buttons, inputs, images
   ============================================ */
html[data-radius="sharp"] { --demo-radius: 4px; }
html[data-radius="rounded"] { --demo-radius: 12px; }
html[data-radius="pill"] { --demo-radius: 24px; }

html[data-radius] .rounded-xl { border-radius: var(--demo-radius) !important; }
html[data-radius] .rounded-2xl { border-radius: calc(var(--demo-radius) * 1.3) !important; }
html[data-radius] .rounded-3xl { border-radius: calc(var(--demo-radius) * 1.6) !important; }
html[data-radius] .rounded-lg { border-radius: calc(var(--demo-radius) * 0.7) !important; }
html[data-radius] .rounded-full { border-radius: 9999px !important; } /* always pill */

/* ============================================
   ANIMATIONS TOGGLE
   ============================================ */
html[data-animations="off"] .fade-in { opacity: 1 !important; transform: none !important; transition: none !important; }
html[data-animations="off"] * { animation-duration: 0s !important; transition-duration: 0s !important; }

/* ============================================
   COLOR THEMES
   Each theme overrides Tailwind's compiled primary classes
   ============================================ */

/* --- Ocean Teal --- */
html[data-theme="ocean"] .bg-primary-50 { background-color: #f0fdfa !important; }
html[data-theme="ocean"] .bg-primary-100 { background-color: #ccfbf1 !important; }
html[data-theme="ocean"] .bg-primary-500 { background-color: #14b8a6 !important; }
html[data-theme="ocean"] .bg-primary-600 { background-color: #0d9488 !important; }
html[data-theme="ocean"] .bg-primary-700 { background-color: #0f766e !important; }
html[data-theme="ocean"] .text-primary-500 { color: #14b8a6 !important; }
html[data-theme="ocean"] .text-primary-600 { color: #0d9488 !important; }
html[data-theme="ocean"] .text-primary-700 { color: #0f766e !important; }
html[data-theme="ocean"] .border-primary-300 { border-color: #5eead4 !important; }
html[data-theme="ocean"] .border-primary-500 { border-color: #14b8a6 !important; }
html[data-theme="ocean"] .ring-primary-500 { --tw-ring-color: #14b8a6 !important; }
html[data-theme="ocean"] .focus\:ring-primary-500:focus { --tw-ring-color: #14b8a6 !important; }
html[data-theme="ocean"] .outline-primary-500 { outline-color: #14b8a6 !important; }
html[data-theme="ocean"] .hover\:bg-primary-600:hover { background-color: #0d9488 !important; }
html[data-theme="ocean"] .hover\:bg-primary-700:hover { background-color: #0f766e !important; }
html[data-theme="ocean"] .hover\:text-primary-600:hover { color: #0d9488 !important; }
html[data-theme="ocean"] .group:hover .group-hover\:text-primary-600 { color: #0d9488 !important; }
html[data-theme="ocean"] .group:hover .group-hover\:text-primary-700 { color: #0f766e !important; }
html[data-theme="ocean"] .from-primary-300 { --tw-gradient-from: #5eead4 !important; }
html[data-theme="ocean"] .to-primary-500 { --tw-gradient-to: #14b8a6 !important; }
html[data-theme="ocean"] .to-primary-700 { --tw-gradient-to: #0f766e !important; }

/* --- Forest Sage --- */
html[data-theme="sage"] .bg-primary-50 { background-color: #f0fdf4 !important; }
html[data-theme="sage"] .bg-primary-100 { background-color: #dcfce7 !important; }
html[data-theme="sage"] .bg-primary-500 { background-color: #22c55e !important; }
html[data-theme="sage"] .bg-primary-600 { background-color: #16a34a !important; }
html[data-theme="sage"] .bg-primary-700 { background-color: #15803d !important; }
html[data-theme="sage"] .text-primary-500 { color: #22c55e !important; }
html[data-theme="sage"] .text-primary-600 { color: #16a34a !important; }
html[data-theme="sage"] .text-primary-700 { color: #15803d !important; }
html[data-theme="sage"] .border-primary-300 { border-color: #86efac !important; }
html[data-theme="sage"] .border-primary-500 { border-color: #22c55e !important; }
html[data-theme="sage"] .ring-primary-500 { --tw-ring-color: #22c55e !important; }
html[data-theme="sage"] .focus\:ring-primary-500:focus { --tw-ring-color: #22c55e !important; }
html[data-theme="sage"] .outline-primary-500 { outline-color: #22c55e !important; }
html[data-theme="sage"] .hover\:bg-primary-600:hover { background-color: #16a34a !important; }
html[data-theme="sage"] .hover\:bg-primary-700:hover { background-color: #15803d !important; }
html[data-theme="sage"] .hover\:text-primary-600:hover { color: #16a34a !important; }
html[data-theme="sage"] .group:hover .group-hover\:text-primary-600 { color: #16a34a !important; }
html[data-theme="sage"] .group:hover .group-hover\:text-primary-700 { color: #15803d !important; }
html[data-theme="sage"] .from-primary-300 { --tw-gradient-from: #86efac !important; }
html[data-theme="sage"] .to-primary-500 { --tw-gradient-to: #22c55e !important; }
html[data-theme="sage"] .to-primary-700 { --tw-gradient-to: #15803d !important; }

/* --- Midnight Indigo --- */
html[data-theme="indigo"] .bg-primary-50 { background-color: #eef2ff !important; }
html[data-theme="indigo"] .bg-primary-100 { background-color: #e0e7ff !important; }
html[data-theme="indigo"] .bg-primary-500 { background-color: #6366f1 !important; }
html[data-theme="indigo"] .bg-primary-600 { background-color: #4f46e5 !important; }
html[data-theme="indigo"] .bg-primary-700 { background-color: #4338ca !important; }
html[data-theme="indigo"] .text-primary-500 { color: #6366f1 !important; }
html[data-theme="indigo"] .text-primary-600 { color: #4f46e5 !important; }
html[data-theme="indigo"] .text-primary-700 { color: #4338ca !important; }
html[data-theme="indigo"] .border-primary-300 { border-color: #a5b4fc !important; }
html[data-theme="indigo"] .border-primary-500 { border-color: #6366f1 !important; }
html[data-theme="indigo"] .ring-primary-500 { --tw-ring-color: #6366f1 !important; }
html[data-theme="indigo"] .focus\:ring-primary-500:focus { --tw-ring-color: #6366f1 !important; }
html[data-theme="indigo"] .outline-primary-500 { outline-color: #6366f1 !important; }
html[data-theme="indigo"] .hover\:bg-primary-600:hover { background-color: #4f46e5 !important; }
html[data-theme="indigo"] .hover\:bg-primary-700:hover { background-color: #4338ca !important; }
html[data-theme="indigo"] .hover\:text-primary-600:hover { color: #4f46e5 !important; }
html[data-theme="indigo"] .group:hover .group-hover\:text-primary-600 { color: #4f46e5 !important; }
html[data-theme="indigo"] .group:hover .group-hover\:text-primary-700 { color: #4338ca !important; }
html[data-theme="indigo"] .from-primary-300 { --tw-gradient-from: #a5b4fc !important; }
html[data-theme="indigo"] .to-primary-500 { --tw-gradient-to: #6366f1 !important; }
html[data-theme="indigo"] .to-primary-700 { --tw-gradient-to: #4338ca !important; }

/* --- Rose Gold --- */
html[data-theme="rose"] .bg-primary-50 { background-color: #fff1f2 !important; }
html[data-theme="rose"] .bg-primary-100 { background-color: #ffe4e6 !important; }
html[data-theme="rose"] .bg-primary-500 { background-color: #f43f5e !important; }
html[data-theme="rose"] .bg-primary-600 { background-color: #e11d48 !important; }
html[data-theme="rose"] .bg-primary-700 { background-color: #be123c !important; }
html[data-theme="rose"] .text-primary-500 { color: #f43f5e !important; }
html[data-theme="rose"] .text-primary-600 { color: #e11d48 !important; }
html[data-theme="rose"] .text-primary-700 { color: #be123c !important; }
html[data-theme="rose"] .border-primary-300 { border-color: #fda4af !important; }
html[data-theme="rose"] .border-primary-500 { border-color: #f43f5e !important; }
html[data-theme="rose"] .ring-primary-500 { --tw-ring-color: #f43f5e !important; }
html[data-theme="rose"] .focus\:ring-primary-500:focus { --tw-ring-color: #f43f5e !important; }
html[data-theme="rose"] .outline-primary-500 { outline-color: #f43f5e !important; }
html[data-theme="rose"] .hover\:bg-primary-600:hover { background-color: #e11d48 !important; }
html[data-theme="rose"] .hover\:bg-primary-700:hover { background-color: #be123c !important; }
html[data-theme="rose"] .hover\:text-primary-600:hover { color: #e11d48 !important; }
html[data-theme="rose"] .group:hover .group-hover\:text-primary-600 { color: #e11d48 !important; }
html[data-theme="rose"] .group:hover .group-hover\:text-primary-700 { color: #be123c !important; }
html[data-theme="rose"] .from-primary-300 { --tw-gradient-from: #fda4af !important; }
html[data-theme="rose"] .to-primary-500 { --tw-gradient-to: #f43f5e !important; }
html[data-theme="rose"] .to-primary-700 { --tw-gradient-to: #be123c !important; }

/* ============================================
   DARK MODE
   ============================================ */
html[data-dark="on"] body { background-color: #111 !important; color: #e5e5e5 !important; }
html[data-dark="on"] .bg-white { background-color: #1a1a1a !important; }
html[data-dark="on"] .bg-surface-50 { background-color: #161616 !important; }
html[data-dark="on"] .bg-surface-100 { background-color: #1e1e1e !important; }
html[data-dark="on"] .text-surface-900 { color: #f5f5f5 !important; }
html[data-dark="on"] .text-surface-800 { color: #e5e5e5 !important; }
html[data-dark="on"] .text-surface-700 { color: #d4d4d4 !important; }
html[data-dark="on"] .text-surface-600 { color: #a3a3a3 !important; }
html[data-dark="on"] .text-surface-500 { color: #737373 !important; }
html[data-dark="on"] .text-surface-400 { color: #525252 !important; }
html[data-dark="on"] .border-surface-200 { border-color: #2a2a2a !important; }
html[data-dark="on"] .border-surface-200\/60 { border-color: rgba(42,42,42,0.6) !important; }
html[data-dark="on"] .border-surface-300 { border-color: #333 !important; }
html[data-dark="on"] .border-b { border-color: #2a2a2a !important; }
html[data-dark="on"] .border-t { border-color: #2a2a2a !important; }
html[data-dark="on"] nav { background: rgba(17,17,17,0.85) !important; backdrop-filter: blur(20px); border-color: #2a2a2a !important; }
html[data-dark="on"] .bg-white\/80 { background-color: rgba(26,26,26,0.85) !important; }
html[data-dark="on"] .bg-white\/90 { background-color: rgba(26,26,26,0.9) !important; }
html[data-dark="on"] .bg-white\/95 { background-color: rgba(26,26,26,0.95) !important; }

/* Dark mode — Desktop Glass Header */
html[data-dark="on"] .glass-nav {
  background: rgba(20, 20, 20, 0.75) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4) !important;
}
html[data-dark="on"] .glass-nav .header-logo,
html[data-dark="on"] .glass-nav .text-gray-900 { color: #f5f5f5 !important; }
html[data-dark="on"] .glass-nav .header-nav-links a,
html[data-dark="on"] .glass-nav .text-gray-800 { color: #d4d4d4 !important; }
html[data-dark="on"] .glass-nav .header-nav-links a:hover { color: #c99846 !important; }
html[data-dark="on"] .glass-nav .header-cta-btn {
  background: #fff !important; color: #111 !important;
}
html[data-dark="on"] .glass-nav .header-cta-btn:hover { background: #e5e5e5 !important; }
html[data-dark="on"] .glass-nav .header-expand-btn {
  background: rgba(255, 255, 255, 0.1) !important; color: #ccc !important;
}
html[data-dark="on"] .glass-nav .header-expand-btn:hover {
  background: rgba(255, 255, 255, 0.2) !important; color: #fff !important;
}

/* Dark mode cards & containers */
html[data-dark="on"] .bg-surface-50.border-t { background-color: #161616 !important; }
html[data-dark="on"] footer { background-color: #0f0f0f !important; }
html[data-dark="on"] select, html[data-dark="on"] input, html[data-dark="on"] textarea { background-color: #222 !important; color: #e5e5e5 !important; border-color: #333 !important; }

/* ============================================
   FONT PAIRS
   ============================================ */
html[data-font="inter"] body { font-family: 'Inter', system-ui, sans-serif !important; }
html[data-font="playfair"] body { font-family: 'Lato', system-ui, sans-serif !important; }
html[data-font="playfair"] h1, html[data-font="playfair"] h2, html[data-font="playfair"] h3 { font-family: 'Playfair Display', serif !important; }
html[data-font="dm-sans"] body { font-family: 'DM Sans', system-ui, sans-serif !important; }

/* ============================================
   DEMO PANEL STYLES
   ============================================ */
.demo-panel { position: fixed; right: -320px; top: 50%; transform: translateY(-50%); width: 320px; z-index: 9999; transition: right 0.35s cubic-bezier(.4,0,.2,1); }
.demo-panel.is-open { right: 0; }
.demo-panel-toggle { position: absolute; left: -48px; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 12px 0 0 12px; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 20px; border: none; background: #222; color: #fff; box-shadow: 0 4px 14px rgba(0,0,0,0.25); }
.demo-panel-toggle svg { animation: spin-slow 4s linear infinite; }
.demo-panel.is-open .demo-panel-toggle svg { animation: none; }
@keyframes spin-slow { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.demo-panel-body { background: #fff; border-radius: 16px 0 0 16px; box-shadow: 0 8px 30px rgba(0,0,0,0.18); border: 1px solid #e5e5e5; border-right: 0; padding: 20px; max-height: 80vh; overflow-y: auto; }
.demo-panel-body::-webkit-scrollbar { width: 4px; }
.demo-panel-body::-webkit-scrollbar-thumb { background: #d4d4d4; border-radius: 4px; }

html[data-dark="on"] .demo-panel-body { background: #1a1a1a; border-color: #333; }
html[data-dark="on"] .demo-panel-body::-webkit-scrollbar-thumb { background: #444; }

.ds-section { margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid #f0f0f0; }
.ds-section:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
html[data-dark="on"] .ds-section { border-bottom-color: #2a2a2a; }

.ds-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: #717171; margin-bottom: 10px; display: flex; align-items: center; gap: 6px; }

/* Color swatches */
.ds-swatches { display: flex; gap: 8px; flex-wrap: wrap; }
.ds-swatch { width: 40px; height: 40px; border-radius: 10px; cursor: pointer; border: 3px solid transparent; transition: all 0.2s; position: relative; }
.ds-swatch:hover { transform: scale(1.1); }
.ds-swatch.active { border-color: #222; box-shadow: 0 0 0 2px #fff, 0 0 0 4px #222; }
html[data-dark="on"] .ds-swatch.active { border-color: #fff; box-shadow: 0 0 0 2px #1a1a1a, 0 0 0 4px #fff; }

/* Font options */
.ds-font-opt { padding: 8px 12px; border-radius: 10px; border: 2px solid #e5e5e5; cursor: pointer; transition: all 0.2s; margin-bottom: 6px; }
.ds-font-opt:hover { border-color: #aaa; }
.ds-font-opt.active { border-color: #222; background: #fafafa; }
html[data-dark="on"] .ds-font-opt { border-color: #333; }
html[data-dark="on"] .ds-font-opt.active { border-color: #fff; background: #222; }

/* Toggle switch */
.ds-toggle { position: relative; width: 44px; height: 24px; background: #d4d4d4; border-radius: 12px; cursor: pointer; transition: background 0.3s; }
.ds-toggle.active { background: #222; }
html[data-dark="on"] .ds-toggle.active { background: #fff; }
.ds-toggle::after { content: ''; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform 0.3s; box-shadow: 0 1px 3px rgba(0,0,0,0.15); }
.ds-toggle.active::after { transform: translateX(20px); }
html[data-dark="on"] .ds-toggle::after { background: #222; }

/* Pill options */
.ds-pills { display: flex; gap: 6px; }
.ds-pill { padding: 6px 14px; border-radius: 20px; border: 2px solid #e5e5e5; cursor: pointer; font-size: 12px; font-weight: 600; color: #555; transition: all 0.2s; }
.ds-pill:hover { border-color: #888; }
.ds-pill.active { border-color: #222; background: #222; color: #fff; }
html[data-dark="on"] .ds-pill { border-color: #333; color: #aaa; }
html[data-dark="on"] .ds-pill.active { border-color: #fff; background: #fff; color: #111; }

/* Icon pack options */
.ds-icon-pack { display: flex; gap: 8px; }
.ds-icon-btn { flex: 1; padding: 10px; border-radius: 10px; border: 2px solid #e5e5e5; cursor: pointer; text-align: center; transition: all 0.2s; }
.ds-icon-btn:hover { border-color: #aaa; }
.ds-icon-btn.active { border-color: #222; background: #fafafa; }
html[data-dark="on"] .ds-icon-btn { border-color: #333; }
html[data-dark="on"] .ds-icon-btn.active { border-color: #fff; background: #222; }
.ds-icon-btn .name { font-size: 13px; font-weight: 600; color: #222; }
.ds-icon-btn .desc { font-size: 10px; color: #717171; margin-top: 2px; }
html[data-dark="on"] .ds-icon-btn .name { color: #e5e5e5; }

/* Hero variant thumbnails (index.html only) */
.ds-hero-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
.ds-hero-thumb { border-radius: 8px; border: 2px solid #e5e5e5; cursor: pointer; overflow: hidden; transition: all 0.2s; }
.ds-hero-thumb:hover { border-color: #888; }
.ds-hero-thumb.active { border-color: #222; }
html[data-dark="on"] .ds-hero-thumb { border-color: #333; }
html[data-dark="on"] .ds-hero-thumb.active { border-color: #fff; }
.ds-hero-thumb .preview { height: 48px; }
.ds-hero-thumb .label { font-size: 9px; font-weight: 600; text-align: center; padding: 4px 0; color: #555; }