:root {
    --bg-color: #030408;
    --panel-bg: rgba(9, 11, 21, 0.95);
    --border-color: rgba(255, 255, 255, 0.08);
    --pink-accent: #ff2a85;
    --blue-accent: #2a85ff;
    --purple-accent: #a855f7;
    --text-muted: #94a3b8;
}

body {
    font-family: 'Lexend', sans-serif;
    background-color: var(--bg-color);
    color: #ffffff;
    min-height: 100vh;
    position: relative;
    overflow-x: hidden;
}

/* Ambient neon glow effect behind content */
.ambient-glow-pink {
    position: absolute;
    top: 10%;
    left: 5%;
    width: 350px;
    height: 350px;
    background: radial-gradient(circle, rgba(255, 42, 133, 0.12) 0%, rgba(0, 0, 0, 0) 70%);
    z-index: 0;
    pointer-events: none;
    filter: blur(50px);
}

.ambient-glow-blue {
    position: absolute;
    bottom: 10%;
    right: 5%;
    width: 450px;
    height: 450px;
    background: radial-gradient(circle, rgba(42, 133, 255, 0.1) 0%, rgba(0, 0, 0, 0) 70%);
    z-index: 0;
    pointer-events: none;
    filter: blur(60px);
}

.main-wrapper {
    position: relative;
    z-index: 1;
}

.glass-panel {
    background: var(--panel-bg);
    border: 1px solid var(--border-color);
    border-radius: 24px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(20px);
}

.header-logo-container {
    position: relative;
    padding: 12px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(255, 42, 133, 0.15), rgba(168, 85, 247, 0.1));
    border: 1px solid rgba(255, 42, 133, 0.25);
    box-shadow: 0 0 15px rgba(255, 42, 133, 0.15);
}

.input-group-custom {
    position: relative;
    background: rgba(14, 17, 30, 0.7);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 8px 16px;
    transition: all 0.3s ease;
}

.input-group-custom:focus-within {
    border-color: var(--pink-accent);
    box-shadow: 0 0 15px rgba(255, 42, 133, 0.15);
}

.input-group-custom.success {
    border-color: rgba(16, 185, 129, 0.4);
    box-shadow: 0 0 15px rgba(16, 185, 129, 0.1);
}

.input-group-custom label {
    display: block;
    /* clamp(Minimalwert, bevorzugter Wert, Maximalwert) */
    font-size: clamp(0.625rem, 0.5rem + 0.25vw, 0.875rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--blue-accent);
    margin-bottom: 2px;
}

.input-group-custom input,
.input-group-custom select,
.input-group-custom textarea {
    width: 100%;
    background: transparent;
    border: none;
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    outline: none;
    padding: 2px 0;
}

.input-group-custom select {
    cursor: pointer;
    appearance: none;
}

/* Upgrades Custom Card Design */
.upgrade-card {
    position: relative;
    background: rgba(14, 17, 30, 0.7);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 16px;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.3s ease;
    user-select: none;
}

.upgrade-card:has(input:checked) {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
}

.upgrade-card:has(input:checked).pink {
    border-color: var(--pink-accent) !important;
    background: linear-gradient(180deg, rgba(255, 42, 133, 0.08) 0%, rgba(255, 255, 255, 0.03) 100%);
}

.upgrade-card:has(input:checked).blue {
    border-color: var(--blue-accent) !important;
    background: linear-gradient(180deg, rgba(42, 133, 255, 0.08) 0%, rgba(255, 255, 255, 0.03) 100%);
}

.upgrade-card:has(input:checked).purple {
    border-color: var(--purple-accent) !important;
    background: linear-gradient(180deg, rgba(168, 85, 247, 0.08) 0%, rgba(255, 255, 255, 0.03) 100%);
}

.custom-checkbox {
    width: 16px;
    height: 16px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.upgrade-card:has(input:checked).pink .custom-checkbox {
    background-color: var(--pink-accent);
    border-color: var(--pink-accent);
}

.upgrade-card:has(input:checked).blue .custom-checkbox {
    background-color: var(--blue-accent);
    border-color: var(--blue-accent);
}

.upgrade-card:has(input:checked).purple .custom-checkbox {
    background-color: var(--purple-accent);
    border-color: var(--purple-accent);
}

/* Show SVG Checkmark when checked */
.upgrade-card input:checked~div .custom-checkbox svg,
.upgrade-card:has(input:checked) .custom-checkbox svg {
    display: block !important;
}

/* Sliders */
.slider-container {
    margin-top: 10px;
}

input[type="range"] {
    -webkit-appearance: none;
    width: 100%;
    height: 4px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.1);
    outline: none;
}

.slider-duration input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--pink-accent);
    box-shadow: 0 0 10px var(--pink-accent);
    cursor: pointer;
    transition: transform 0.1s ease;
}

.slider-duration input[type="range"]::-webkit-slider-thumb:hover {
    transform: scale(1.2);
}

.slider-guests input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--blue-accent);
    box-shadow: 0 0 10px var(--blue-accent);
    cursor: pointer;
    transition: transform 0.1s ease;
}

.slider-guests input[type="range"]::-webkit-slider-thumb:hover {
    transform: scale(1.2);
}

.slider-label-box {
    background: rgba(14, 17, 30, 0.9);
    border: 1px solid var(--border-color);
    padding: 2px 8px;
    border-radius: 6px;
    font-family: monospace;
    font-size: 11px;
}

/* Tailwind Utility Fallbacks */
.w-3 {
    width: 0.75rem;
}

.h-3 {
    height: 0.75rem;
}

.w-4 {
    width: 1rem;
}

.h-4 {
    height: 1rem;
}

.w-8 {
    width: 2rem;
}

.h-8 {
    height: 2rem;
}

.w-24 {
    width: 6rem;
}

.h-24 {
    height: 6rem;
}

.w-full {
    width: 100%;
}

.max-w-7xl {
    max-width: 80rem;
}

.absolute {
    position: absolute;
}

.right-4 {
    right: 1rem;
}

.bottom-2 {
    bottom: 0.5rem;
}

.pointer-events-none {
    pointer-events: none;
}

.z-0 {
    z-index: 0;
}

.z-10 {
    z-index: 10;
}

.flex {
    display: flex;
}

.flex-col {
    flex-direction: column;
}

.items-center {
    align-items: center;
}

.justify-between {
    justify-content: space-between;
}

.opacity-10 {
    opacity: 0.1;
}

.text-pink-500 {
    color: var(--pink-accent);
}

.text-blue-500 {
    color: var(--blue-accent);
}

.text-purple-500 {
    color: var(--purple-accent);
}

.text-slate-200 {
    color: #e2e8f0;
}

.text-slate-400 {
    color: #94a3b8;
}

.text-slate-500 {
    color: #64748b;
}

.font-extrabold {
    font-weight: 800;
}

.font-bold {
    font-weight: 700;
}

.font-semibold {
    font-weight: 600;
}

.text-xs {
    font-size: 0.75rem;
}

.block {
    display: block;
}

.tracking-wider {
    letter-spacing: 0.05em;
}

.uppercase {
    text-transform: uppercase;
}

.error-msg-select {
    font-size: 0.75rem;
    color: #dc3545;
    display: none;
    margin-top: 4px;
}

/* --- XIVE Upgrade Cards (Neues Layout) --- */
:root {
    --c-pink: #ff2a85;
    --c-blue: #2a85ff;
    --c-purple: #a855f7;
    --c-green: #10b981;
    --c-gold: #f59e0b;
}

.text-pink {
    color: var(--c-pink) !important;
}

.text-blue {
    color: var(--c-blue) !important;
}

.text-purple {
    color: var(--c-purple) !important;
}

.text-green {
    color: var(--c-green) !important;
}

.text-gold {
    color: var(--c-gold) !important;
}

.upgrade-card {
    background: rgba(14, 17, 30, 0.7);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
}

/* Zwingt das SVG in ein 35x35px Korsett */
.upgrade-card .icon-slot svg {
    width: 35px !important;
    height: 35px !important;
    position: static !important;
    opacity: 1 !important;
    pointer-events: none;
}

/* Aktiver Zustand (Rahmen, Hintergrund & Checkbox je nach Farbe) */
.upgrade-card:has(input:checked) {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2);
}

.upgrade-card:has(input:checked).pink {
    border-color: var(--c-pink) !important;
    background: rgba(255, 42, 133, 0.08);
}

.upgrade-card:has(input:checked).pink .custom-checkbox {
    background: var(--c-pink);
    border-color: var(--c-pink);
}

.upgrade-card:has(input:checked).blue {
    border-color: var(--c-blue) !important;
    background: rgba(42, 133, 255, 0.08);
}

.upgrade-card:has(input:checked).blue .custom-checkbox {
    background: var(--c-blue);
    border-color: var(--c-blue);
}

.upgrade-card:has(input:checked).purple {
    border-color: var(--c-purple) !important;
    background: rgba(168, 85, 247, 0.08);
}

.upgrade-card:has(input:checked).purple .custom-checkbox {
    background: var(--c-purple);
    border-color: var(--c-purple);
}

.upgrade-card:has(input:checked).green {
    border-color: var(--c-green) !important;
    background: rgba(16, 185, 129, 0.08);
}

.upgrade-card:has(input:checked).green .custom-checkbox {
    background: var(--c-green);
    border-color: var(--c-green);
}

.upgrade-card:has(input:checked).gold {
    border-color: var(--c-gold) !important;
    background: rgba(245, 158, 11, 0.08);
}

.upgrade-card:has(input:checked).gold .custom-checkbox {
    background: var(--c-gold);
    border-color: var(--c-gold);
}

.custom-checkbox {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

/* Links: Icon mit Neon-Glow */
.icon-slot svg {
    width: 35px !important;
    height: 35px !important;
    /* Neon-Effekt */
    filter: drop-shadow(0 0 5px currentColor);
    opacity: 1 !important;
}

/* Hintergrund: Watermark (Groß, dezent, kein Glow) */
.watermark-icon {
    position: absolute;
    right: -10%;
    bottom: -15%;
    height: 110%;
    width: auto;
    opacity: 0.05;
    /* Sehr dezent */
    z-index: 0;
    pointer-events: none;
    transform: rotate(-10deg);
}

.watermark-icon svg {
    height: 100% !important;
    width: auto !important;
    filter: none !important;
    /* WICHTIG: Kein Glow hier! */
}

.error-msg {
    color: red !important;
}

.is-invalid {
    border: solid 1px red;
}

/* Container Basis */
.input-group-custom {
    padding: 10px;
    border-radius: 8px;
    transition: background-color 0.3s ease;
    background-color: transparent;
    /* Standard: kein Hintergrund */
}

/* Fehlerzustand des Containers */
.input-group-custom.error-bg {
    background-color: #dd181842 !important;
    /* Roter Hintergrund für die ganze Gruppe */
}

/* Label Farben */
.label-invalid {
    color: #dc2626 !important;
}

.label-valid {
    color: #16a34a !important;
}

/* Input Feld leicht anpassen, damit es sich gut einfügt */
.input-group-custom input {
    background-color: transparent;
}

.error-msg {
    opacity: 0;
    height: 0;
    /* Nimmt keinen Platz weg */
    overflow: hidden;
    /* Schneidet überstehenden Inhalt ab */
    transition: opacity 0.3s ease, height 0.3s ease;
    color: #dc2626;
    font-size: 0.8rem;
    margin-top: 0;
    /* Margin muss bei height:0 ebenfalls 0 sein */
}

.error-visible {
    opacity: 1;
    height: auto;
    /* Nimmt bei Fehler den Platz ein, den er braucht */
    margin-top: 4px;
    /* Erst jetzt den Abstand hinzufügen */
}

li {
    color: deeppink;
}

strong {
    color: violet;
}

.card-booking-gradient {
    background: linear-gradient(103deg, #f013987a 0%, #3954ff7d 100%) !important;
    backdrop-filter: blur(10px);
    /* Optional: Gibt den modernen Glass-Look */
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: white;
}


.watermark-icon svg,
.icon-slot svg {
width: 100%;
height: 100%;
fill: none !important;
stroke: currentColor !important;
stroke-width: 0.88; /* klare Standardbreite */
stroke-linecap: round;
stroke-linejoin: round;
transition: all 0.3s ease;
}
@media (min-width: 768px) {
.watermark-icon svg,
.icon-slot svg { stroke-width: 1; } /* stärkere Linien auf Desktop */
}
.upgrade-card:hover .watermark-icon svg {
    transform: scale(1.1) rotate(-5deg);
}

.upgrade-card:has(input[type="checkbox"]:checked) {
    border-color: currentColor !important;
    background: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 0 15px currentColor !important;
}