/* ============================================================================
   GOLDEN STERN TOWNHOUSE — Premium Hotel Experience
   Theme system: design tokens, typography, base elements, controls
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,500;1,600&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
    /* ── Brand colours ──────────────────────────────────────────────────── */
    --gs-black-deep:       #07070A;
    --gs-black:            #0B0B11;
    --gs-black-soft:       #11111A;
    --gs-surface:          #16161F;
    --gs-surface-raised:   #1C1C27;
    --gs-surface-hover:    #232331;
    --gs-border:           rgba(212, 175, 55, 0.18);
    --gs-border-strong:    rgba(212, 175, 55, 0.45);
    --gs-divider:          rgba(255, 255, 255, 0.06);

    --gs-gold:             #D4AF37;
    --gs-gold-bright:      #F0CE5E;
    --gs-gold-soft:        #B8941F;
    --gs-gold-glow:        rgba(212, 175, 55, 0.35);

    --gs-cream:            #F5F1E5;
    --gs-text:             #EDEAE0;
    --gs-text-muted:       #9F9D93;
    --gs-text-faint:       rgba(245, 241, 229, 0.55);

    /* ── Status colours (room cards) ────────────────────────────────────── */
    --st-green:            #1DB86A;
    --st-green-glow:       rgba(29, 184, 106, 0.55);
    --st-red:              #E81020;
    --st-red-glow:         rgba(232, 16, 32, 0.60);
    --st-orange:           #E8821A;
    --st-orange-glow:      rgba(232, 130, 26, 0.65);
    --st-lila:             #7C22E8;
    --st-lila-glow:        rgba(124, 34, 232, 0.65);

    /* ── Typography ─────────────────────────────────────────────────────── */
    --font-serif:          'Cormorant Garamond', 'Playfair Display', Georgia, serif;
    --font-sans:           'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono:           'JetBrains Mono', ui-monospace, Menlo, monospace;

    /* ── Effects ────────────────────────────────────────────────────────── */
    --shadow-soft:         0 6px 24px rgba(0, 0, 0, 0.45);
    --shadow-deep:         0 20px 60px rgba(0, 0, 0, 0.6);
    --shadow-gold:         0 8px 32px rgba(212, 175, 55, 0.18);

    --radius-sm:           6px;
    --radius:              12px;
    --radius-lg:           18px;
    --radius-xl:           24px;

    /* Maximale Inhaltsbreite (≈ Laptop): größere Bildschirme wachsen nicht weiter,
       kleinere passen sich normal an. */
    --content-max:         1500px;

    --ease-luxe:           cubic-bezier(0.22, 0.61, 0.36, 1);
    --transition:          0.35s var(--ease-luxe);
}

/* ── Reset ──────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color-scheme: dark; }
body {
    font-family: var(--font-sans);
    color: var(--gs-text);
    background: var(--gs-black-deep);
    min-height: 100vh;
    line-height: 1.55;
    font-weight: 400;
    overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, textarea, select { font-family: inherit; color: inherit; outline: none; }
a { color: var(--gs-gold); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--gs-gold-bright); }

/* ── Cinematic ambient backdrop ─────────────────────────────────────────── */
.gs-ambient {
    position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background:
        radial-gradient(circle at 18% 12%, rgba(212, 175, 55, 0.10), transparent 45%),
        radial-gradient(circle at 82% 88%, rgba(212, 175, 55, 0.08), transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(184, 97, 125, 0.04), transparent 60%),
        var(--gs-black-deep);
}
.gs-ambient::before {
    content: ""; position: absolute; inset: 0;
    background-image:
        repeating-linear-gradient(0deg, rgba(255,255,255,0.012) 0 1px, transparent 1px 3px);
    opacity: 0.4;
}

/* ── Typography ─────────────────────────────────────────────────────────── */
h1, h2, h3, h4 { font-family: var(--font-sans); font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; }
h1 { font-size: clamp(1.8rem, 3.5vw, 2.6rem); }
h2 { font-size: clamp(1.4rem, 2.5vw, 2rem); }
h3 { font-size: 1.2rem; }
.brand-mark {
    font-family: var(--font-serif);
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gs-cream);
}
.brand-mark .star { color: var(--gs-gold); }
.eyebrow {
    font-family: var(--font-sans);
    font-size: 0.72rem;
    text-transform: none;
    letter-spacing: 0.04em;
    color: var(--gs-gold);
    font-weight: 500;
}
.serif { font-family: var(--font-serif); }
.muted { color: var(--gs-text-muted); }
.faint { color: var(--gs-text-faint); }

/* ── Inputs ─────────────────────────────────────────────────────────────── */
.gs-field { display: flex; flex-direction: column; gap: 6px; }
.gs-field label {
    font-size: 0.78rem; text-transform: none; letter-spacing: 0;
    color: var(--gs-text-muted); font-weight: 500;
}
.gs-input, .gs-textarea, .gs-select {
    width: 100%;
    padding: 14px 18px;
    font-size: 1rem;
    color: var(--gs-cream);
    background: rgba(10, 10, 16, 0.6);
    border: 1px solid var(--gs-border);
    border-radius: var(--radius);
    transition: border-color var(--transition), background var(--transition), box-shadow var(--transition);
}
.gs-textarea { min-height: 90px; resize: vertical; line-height: 1.5; }
.gs-input::placeholder, .gs-textarea::placeholder { color: var(--gs-text-faint); }
.gs-input:focus, .gs-textarea:focus, .gs-select:focus {
    border-color: var(--gs-gold);
    background: rgba(10, 10, 16, 0.85);
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.08);
}

/* Date-Inputs: weißer Kalender-Picker statt schwarz */
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"],
input[type="week"] {
    color-scheme: dark;
}
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator,
input[type="week"]::-webkit-calendar-picker-indicator {
    filter: brightness(0) invert(1);
    cursor: pointer;
    opacity: 1;
}

/* iOS Safari: das eingegebene Datum hellgrau darstellen (sonst schwarz auf schwarz) */
input[type="date"]::-webkit-date-and-time-value,
input[type="datetime-local"]::-webkit-date-and-time-value,
input[type="time"]::-webkit-date-and-time-value {
    color: var(--gs-cream);
    -webkit-text-fill-color: var(--gs-cream);
    text-align: left;
}

/* iOS Safari rendert das native Kalender-Symbol oft schwarz — wir blenden
   das native ein und ueberlagern es mit einem weissen SVG-Icon. */
input[type="date"].gs-input,
input[type="datetime-local"].gs-input {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F5F1E5' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='17' rx='2'/><path d='M3 9h18M8 2v4M16 2v4'/></svg>");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 18px 18px;
    padding-right: 44px;
}
input[type="date"].gs-input::-webkit-calendar-picker-indicator,
input[type="datetime-local"].gs-input::-webkit-calendar-picker-indicator {
    opacity: 0; /* natives Icon ausblenden, unser weisses bleibt sichtbar */
}

/* Custom-Pfeil für Selects (statt nativem Browser-Pfeil außerhalb der Box) */
.gs-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 44px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='none' stroke='%23F5F1E5' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5l5 5 5-5'/></svg>");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 12px 8px;
}
.gs-select::-ms-expand { display: none; }

/* ── Buttons ────────────────────────────────────────────────────────────── */
.gs-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 22px;
    font-size: 0.88rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    border-radius: var(--radius);
    transition: all var(--transition);
    position: relative;
    overflow: hidden;
    white-space: nowrap;
}
.gs-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.gs-btn-primary {
    color: #0B0B11;
    background: var(--gs-gold);
    box-shadow: 0 2px 12px rgba(212, 175, 55, 0.25);
}
.gs-btn-primary:not(:disabled):hover {
    background: var(--gs-gold-bright);
    box-shadow: 0 4px 20px rgba(212, 175, 55, 0.35);
    transform: translateY(-1px);
}

.gs-btn-ghost {
    color: var(--gs-text);
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
}
.gs-btn-ghost:hover {
    background: rgba(255,255,255,0.09);
    border-color: rgba(255,255,255,0.18);
    color: var(--gs-cream);
}

.gs-btn-danger {
    color: #FF9097;
    background: rgba(142, 57, 71, 0.15);
    border: 1px solid rgba(142, 57, 71, 0.4);
}
.gs-btn-danger:hover { background: rgba(232, 16, 32, 0.22); color: #FFBFC4; }

.gs-btn-sm { padding: 8px 16px; font-size: 0.82rem; }

/* ── Glass card ─────────────────────────────────────────────────────────── */
.gs-glass {
    background: #18181F;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--radius-lg);
    box-shadow: 0 8px 32px rgba(0,0,0,0.4);
    position: relative;
    overflow: hidden;
}

/* ── Divider ────────────────────────────────────────────────────────────── */
.gs-divider {
    display: flex; align-items: center; gap: 14px;
    color: var(--gs-text-faint);
    font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.32em;
}
.gs-divider::before, .gs-divider::after {
    content: ""; flex: 1; height: 1px;
    background: linear-gradient(90deg, transparent, var(--gs-border-strong), transparent);
}

/* ── Toast (notification) ──────────────────────────────────────────────── */
.gs-toast-wrap {
    position: fixed; right: 24px; bottom: 24px;
    display: flex; flex-direction: column; gap: 12px;
    z-index: 1000; max-width: min(420px, calc(100vw - 48px));
}
.gs-toast {
    padding: 14px 20px;
    background: linear-gradient(135deg, rgba(28,28,39,0.96), rgba(15,15,22,0.96));
    border: 1px solid var(--gs-border-strong);
    border-radius: var(--radius);
    box-shadow: var(--shadow-deep);
    backdrop-filter: blur(16px);
    color: var(--gs-cream);
    font-size: 0.9rem;
    animation: toastIn 0.4s var(--ease-luxe);
    border-left: 3px solid var(--gs-gold);
}
.gs-toast.success { border-left-color: var(--st-green); }
.gs-toast.error { border-left-color: var(--st-red); }
.gs-toast.info { border-left-color: var(--gs-gold); }
@keyframes toastIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

/* ── Loading spinner ───────────────────────────────────────────────────── */
.gs-spinner {
    width: 18px; height: 18px; border-radius: 50%;
    border: 2px solid rgba(212,175,55,0.25);
    border-top-color: var(--gs-gold);
    animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Page container shared ─────────────────────────────────────────────── */
.gs-shell { min-height: 100vh; display: flex; flex-direction: column; }
.gs-page { flex: 1; padding: clamp(20px, 3vw, 36px); }

/* ── Scrollbar ─────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--gs-black); }
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(212,175,55,0.25), rgba(212,175,55,0.45));
    border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover { background: var(--gs-gold); }

/* ── Selection ─────────────────────────────────────────────────────────── */
::selection { background: rgba(212,175,55,0.3); color: var(--gs-cream); }