/* Globale Einstellungen & Reset */
:root {
    /* Farbpalette für Dark Mode "Concierge Premium" */
    --color-background: #0D1117; /* Sehr dunkler Hintergrund, fast Schwarz */
    --color-background-mid1: #1A1F2B; /* Gradient Zwischenfarbe */
    --color-background-mid2: #1C2634; /* Gradient Zwischenfarbe */
    --color-surface-dark: #161B22; /* Dunklere Flächen für Karten, Input-Felder */
    --color-surface-light: #21262D; /* Confirmed as the dark grey for unfilled track */
    --color-text-primary: #E6EDF3; /* Helle Textfarbe für gute Lesbarkeit */
    --color-text-secondary: #8B949E; /* Sekundäre Textfarbe, z.B. für Zeitstempel */
    --color-accent-gold: #FFD700; /* Reines Gold für Akzente */
    --color-accent-gold-dark: #CCA000; /* Dunkleres Gold für Hover-Zustände */
    --color-gold-highlight: #FFEB80; /* For sphere effect - very light gold */
    --color-success: #28A745; /* Grün für Erfolgsmeldungen */
    --color-error: #DC3545; /* Rot für Fehlermeldungen */
    --color-info: #007BFF; /* Blau für Info/Payment */

    /* Weitere Grundfarben */
    --color-black: #000000;
    --color-white: #ffffff;
    --color-info-dark: #0056b3;
    --color-success-dark: #218838;
    --color-danger-dark: #b02a37;
    --color-gray-hover: #313A46;
    --color-guidelines-light1: #FFF9D6;
    --color-guidelines-light2: #FFEDAA;
    --color-text-dark: #222;

    /* Typografie und Abstände */
    --font-family-base: 'Inter', sans-serif;
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 0.75rem;
    --spacing-lg: 1rem;
    --spacing-xl: 1.5rem;
    --spacing-2xl: 2rem;
    --radius-sm: 0.25rem;
    --radius: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-full: 9999px;

    /* Schatten für Tiefe */
    --shadow-small: 0 4px 8px rgba(0, 0, 0, 0.2);
    --shadow-medium: 0 8px 16px rgba(0, 0, 0, 0.3);
    --shadow-large: 0 12px 24px rgba(0, 0, 0, 0.4);
    --shadow-accent: 0 0 15px rgba(255, 215, 0, 0.6); /* Goldener Glühen-Effekt */
}

body {
    margin: 0;
    font-family: var(--font-family-base);
    background: linear-gradient(120deg, var(--color-background), var(--color-background-mid1), var(--color-background-mid2), var(--color-background));
    background-size: 400% 400%;
    animation: gradientMove 25s ease infinite;
    color: var(--color-text-primary);
    min-height: 100vh;
    padding: 2rem; /* Etwas mehr Padding */
    box-sizing: border-box;
    font-size: 1rem;
    line-height: 1.6;
    display: flex;
    justify-content: center;
    align-items: flex-start; /* Oben ausrichten */
}

body.with-sticky-header {
    padding-top: 3.5rem;
}

@keyframes gradientMove {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Scrollbar Styling für Dark Mode */
body::-webkit-scrollbar {
    width: 10px;
}

body::-webkit-scrollbar-track {
    background: var(--color-surface-dark);
}

body::-webkit-scrollbar-thumb {
    background-color: var(--color-text-secondary);
    border-radius: 5px;
    border: 2px solid var(--color-surface-dark);
}

body::-webkit-scrollbar-thumb:hover {
    background-color: var(--color-accent-gold);
}

/* Haupt-Container */
.max-w-xl {
    max-width: 700px; /* Etwas breiter für mehr Eleganz */
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.space-y-6 > * + * {
    margin-top: 2rem; /* Mehr Abstand */
}

/* --- Konversation & Chat Bubbles --- */
#conversation {
    display: flex;
    flex-direction: column;
    gap: 1rem; /* Einheitlicher Abstand zwischen Bubbles */
    padding-right: var(--spacing-sm); /* Für Scrollbar */
}

#conversation > div {
    padding: 0.9rem 1.2rem; /* Grössere Bubbles */
    border-radius: var(--radius-lg); /* Sanftere Ecken */
    line-height: 1.5;
    max-width: 75%; /* User-Bubbles etwas breiter */
    word-wrap: break-word; /* Lange Wörter umbrechen */
    white-space: pre-line; /* Zeilenumbrüche beachten */
    position: relative;
    box-shadow: var(--shadow-small);
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
}

#conversation > div:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-medium);
}

.fade-in {
    animation: fadeIn 0.6s ease-out forwards;
    opacity: 0;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInAgent {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInUser {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Chat Bubbles */
.agent-bubble {
    position: relative;
    margin-right: auto;
    margin-left: unset;
    box-sizing: border-box;
    background-color: var(--color-accent-gold);
    color: var(--color-black);
    border-bottom-right-radius: var(--radius-sm);
    font-weight: 500;
}
.agent-bubble::after {
    content: "";
    position: absolute;
    bottom: 10px;
    left: -8px;
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-right: 8px solid var(--color-accent-gold);
}

.user-bubble {
    margin-left: auto;
    margin-right: unset;
    box-sizing: border-box;
    background-color: var(--color-surface-dark);
    color: var(--color-text-primary);
    border-bottom-left-radius: var(--radius-sm);
    overflow-x: hidden; /* Prevent horizontal scroll when content wraps */
}

.user-bubble::after {
    content: "";
    position: absolute;
    bottom: 10px;
    right: -8px;
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 8px solid var(--color-surface-dark);
}

#conversation > div small {
    display: block;
    font-size: 0.7rem; /* Kleinerer Zeitstempel */
    color: var(--color-text-secondary);
    margin-bottom: 0.1rem;
    opacity: 0.9;
    font-weight: 400;
}

.copy-btn {
    cursor: pointer;
    margin-left: 0.25rem;
    background-color: var(--color-white);
    color: var(--color-text-dark);
    border: 1px solid var(--color-text-secondary);
    font-size: 0.8rem;
    padding: var(--spacing-xs) var(--spacing-sm);
}
.copy-btn:hover {
    background-color: var(--color-gray-hover);
}

.copy-btn.copied-feedback {
    animation: copiedPulse 0.5s ease-out forwards;
    background-color: var(--color-accent-gold-dark);
    border-color: var(--color-accent-gold);
}

@keyframes copiedPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

.edit-btn {
    cursor: pointer;
    margin-left: 0.25rem;
    user-select: none;
    background: none;
    border: none;
    padding: 0;
}
.edit-btn:hover {
    color: var(--color-accent-gold);
}

/* Reusable inline icon */
.inline-icon {
    width: 1.5rem; /* Increased size for better visibility */
    height: 1.5rem; /* Ensure square aspect ratio */
    display: inline-block;
    vertical-align: middle;
}

/* --- Offer Bubble Styling --- */
.offer-bubble {
    background: var(--color-surface-dark);
    border: 2px solid var(--color-accent-gold);
    box-shadow: var(--shadow-large);
    padding: var(--spacing-xl);
    text-align: center;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
    animation: fadeInAgent 0.6s ease-out forwards, newOfferGlow 1.5s ease-out forwards;
}

.offer-bubble .offer-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-lg);
}

.offer-bubble .offer-icon {
    width: 3rem;
    height: 3rem;
    color: var(--color-accent-gold);
    filter: drop-shadow(0 0 5px rgba(255, 215, 0, 0.4));
}

.offer-bubble h2 {
    font-size: 1.8rem;
    color: var(--color-accent-gold);
    margin: 0;
    font-weight: 700;
    text-shadow: 0 0 5px rgba(255, 215, 0, 0.2);
}

.offer-details {
    margin-top: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
    text-align: left;
    font-size: 1.1rem;
    color: var(--color-text-primary);
}

.offer-details div {
    margin-bottom: var(--spacing-sm);
}

.offer-details strong {
    color: var(--color-accent-gold-dark);
    font-size: 1.3rem;
    font-weight: 700;
}

.offer-buttons {
    display: flex;
    gap: var(--spacing-md);
    justify-content: center;
    flex-wrap: wrap;
}

.offer-buttons button {
    flex-grow: 1;
    max-width: 200px;
    padding: var(--spacing-md) var(--spacing-xl);
    font-size: 1rem;
    font-weight: 700;
}

@keyframes newOfferGlow {
  0% { box-shadow: 0 0 0 rgba(255, 215, 0, 0); border-color: transparent; }
  50% { box-shadow: 0 0 25px rgba(255, 215, 0, 0.7); border-color: var(--color-accent-gold); }
  100% { box-shadow: var(--shadow-large); border-color: var(--color-accent-gold); }
}

/* --- Eingabebereich & Formularelemente --- */
#input-area {
    margin-top: 2rem;
    margin-bottom: 2rem;
    position: relative;
    width: 100%;
    box-sizing: border-box;
    background-color: var(--color-surface-dark); /* Eingabebereich hinterlegt */
    padding: var(--spacing-md); /* Einheitliches Padding rundherum */
    border-radius: var(--radius-lg); /* Abgerundete Ecken wie bei Chat-Apps */
    box-shadow: var(--shadow-small);
}

#input-area.no-bg {
    background-color: transparent;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
}

#input-area.payment-ui {
    position: static;
}

#input-area form {
    display: flex;
    gap: var(--spacing-md); /* Abstand zwischen Input und Button */
    align-items: center;
}

/* Spezifische Anpassung für das Versandformular */
#shipping-form {
    flex-direction: column; /* Wichtig für gestapelte Felder */
    align-items: flex-start; /* Felder links ausrichten */
}


/* Geändert: Entfernen von !important hier, um die Spezifität für Checkboxen zu ermöglichen */
input:not([type="range"]), select, textarea {
    background-color: var(--color-surface-dark);
    color: var(--color-text-primary);
    border: 1px solid var(--color-surface-light);
    border-radius: var(--radius);
    padding: var(--spacing-md) var(--spacing-lg); /* Grosszügigeres Padding */
    font-size: 1rem;
    box-sizing: border-box;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    width: 100%; /* <-- WICHTIG: Felder sollen volle Breite einnehmen */
    min-height: 48px; /* <-- WICHTIG: Mindesthöhe für bessere Touch-Bedienung */
    margin-bottom: 0; /* Gap on form controls spacing */
}

textarea {
    resize: vertical;
    min-height: 80px;
    margin-bottom: 0;
}

#dreamCarForm {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.form-label {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-sm);
    margin-top: var(--spacing-md);
    text-align: left;
    width: 100%;
}

#dreamCarForm > .form-label:first-of-type {
    margin-top: 0;
}

.car-condition-selector {
    display: flex;
    gap: var(--spacing-sm);
    justify-content: center;
    margin-top: var(--spacing-md);
    margin-bottom: var(--spacing-md);
    flex-wrap: wrap;
}
.car-condition-selector button {
    padding: var(--spacing-sm) var(--spacing-lg);
    font-size: 0.9rem;
    flex-shrink: 0;
    flex-grow: 1;
    max-width: 150px;
}
.car-condition-selector button.selected {
    background-color: var(--color-accent-gold);
    color: var(--color-black);
    box-shadow: var(--shadow-small);
    border-color: var(--color-accent-gold);
}
.car-condition-selector button:not(.selected) {
    background-color: var(--color-surface-light);
    color: var(--color-text-primary);
    border: 1px solid var(--color-text-secondary);
}

input::placeholder, textarea::placeholder {
    color: var(--color-text-secondary);
    opacity: 0.7;
}

input:disabled, select:disabled, textarea:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

input:invalid {
    border-color: var(--color-error);
    box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.4);
}

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--color-accent-gold);
    box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.2); /* Goldener Fokus-Ring */
}

.input-error-message {
    color: var(--color-error);
    font-size: 0.85rem;
    margin-top: var(--spacing-xs);
    margin-bottom: 0; /* Avoid pushing subsequent elements */
    padding-bottom: var(--spacing-xs);
    display: none;
    text-align: left;
    width: 100%;
}
.input-error-message.visible {
    display: block;
}

.input-field-invalid {
    border-color: var(--color-error) !important;
    box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.4) !important;
}

/* --- Start Slider Styling (Copied from numbersslidertest.html) --- */
/* Base styling for the range input */
input[type="range"] {
    -webkit-appearance: none; /* Hide default styling for WebKit */
    appearance: none; /* Hide default styling for other browsers */
    width: 100%; /* Take full width of its container */
    height: 8px; /* Track height */
    border-radius: 4px;
    outline: none;
    cursor: pointer;
    /* Default background for the track (unfilled part) */
    background: #21262D; 
    
    /* Add a transition for smooth background changes on value update */
    transition: background 0.1s linear; 
}

/* --- WebKit (Chrome, Edge, Safari) Thumb --- */
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 36px; /* Larger thumb */
    height: 36px; /* Larger thumb */
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #FFEB80, #FFD700 70%, #CCA000); /* Sphere effect */
    cursor: grab;
    margin-top: -14px; /* Centering the larger thumb on the 8px track */
    box-shadow:
        0 0 0 2px rgba(255, 215, 0, 0.3), /* Subtle outer glow */
        0 6px 15px rgba(0, 0, 0, 0.6);   /* Main shadow for depth */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

input[type="range"]::-webkit-slider-thumb:hover {
    transform: scale(1.1);
    box-shadow:
        0 0 0 3px rgba(255, 215, 0, 0.5),
        0 8px 20px rgba(0, 0, 0, 0.7);
}

input[type="range"]::-webkit-slider-thumb:active {
    transform: scale(1.2);
    box-shadow:
        0 0 0 4px rgba(255, 215, 0, 0.7),
        0 10px 25px rgba(0, 0, 0, 0.8);
    cursor: grabbing;
}

/* --- Firefox Thumb --- */
input[type="range"]::-moz-range-thumb {
    width: 36px; /* Larger thumb */
    height: 36px; /* Larger thumb */
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #FFEB80, #FFD700 70%, #CCA000); /* Sphere effect */
    border: none; /* Remove default border */
    cursor: grab;
    box-shadow:
        0 0 0 2px rgba(255, 215, 0, 0.3),
        0 6px 15px rgba(0, 0, 0, 0.6);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

input[type="range"]::-moz-range-thumb:hover {
    transform: scale(1.1);
    box-shadow:
        0 0 0 3px rgba(255, 215, 0, 0.5),
        0 8px 20px rgba(0, 0, 0, 0.7);
}

input[type="range"]::-moz-range-thumb:active {
    transform: scale(1.2);
    box-shadow:
        0 0 0 4px rgba(255, 215, 0, 0.7),
        0 10px 25px rgba(0, 0, 0, 0.8);
    cursor: grabbing;
}

/* --- Firefox Track Fill --- */
/* This pseudo-element directly colors the "filled" part of the track */
input[type="range"]::-moz-range-progress {
    background-color: #FFD700; /* Gold fill */
    border-radius: 4px; /* Match track radius */
}
/* --- End Slider Styling --- */


#budgetLabel,
#numLabel,
#travelBudgetLabel {
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--color-accent-gold); /* Ensure label is gold for consistency with track fill */
}

/* Buttons */
button {
    cursor: pointer;
    border: none;
    border-radius: var(--radius); /* Einheitliche Rundung */
    font-weight: 600; /* Semibold */
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
    padding: var(--spacing-md) var(--spacing-xl); /* Einheitliches Padding für Buttons */
    white-space: nowrap; /* Button-Text nicht umbrechen */
}

/* Einheitlicher Hover-Effekt für alle Buttons */
button:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: var(--shadow-small);
}

button:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.4);
}

/* Taktile Druck-Animation */
button:active:not(:disabled) {
    transform: translateY(0) scale(0.98);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4);
}

/* Quadratischer Senden-Button im Chat */
.chat-send-btn {
    width: 48px;  /* Gleiche Höhe wie das Eingabefeld */
    height: 48px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Primärer Button (Gold) */
/* Geändert: Entfernen von !important, da diese Regeln spezifisch genug sind */
button.bg-yellow-500, button[type="submit"] {
    background-color: var(--color-accent-gold);
    color: var(--color-black);
}
button.bg-yellow-500:hover:not(:disabled), button[type="submit"]:hover:not(:disabled) {
    background-color: var(--color-accent-gold-dark);
}

/* Sekundärer Button (Grau) */
/* Geändert: Entfernen von !important, da diese Regeln spezifisch genug sind */
button.bg-gray-700 {
    background-color: var(--color-surface-light);
    color: var(--color-text-primary);
    border: 1px solid var(--color-text-secondary); /* Leichter Rand */
}
button.bg-gray-700:hover:not(:disabled) {
    background-color: var(--color-gray-hover, #313A46);
    color: var(--color-accent-gold); /* Gold-Highlight on hover */
}

/* Spezielle Buttons */
/* Geändert: Entfernen von !important, da diese Regeln spezifisch genug sind */
button.bg-green-500 {
    background-color: var(--color-success);
    color: var(--color-black);
}
button.bg-green-500:hover:not(:disabled) {
    background-color: var(--color-success-dark);
}

button.bg-blue-500 { /* For "PAY NOW" */
    background-color: var(--color-info); /* Use CSS variable */
    color: white;
}
button.bg-blue-500:hover:not(:disabled) {
    background-color: var(--color-info-dark);
}

/* Danger Buttons */
button.bg-red-500 {
    background-color: var(--color-error);
    color: var(--color-white);
}
button.bg-red-500:hover:not(:disabled) {
    background-color: var(--color-danger-dark);
}


/* Links */
a {
    color: var(--color-accent-gold);
    text-decoration: none; /* Keine Unterstreichung standardmässig */
    transition: color 0.2s ease;
}
a:hover {
    color: var(--color-accent-gold-dark);
    text-decoration: underline; /* Unterstreichung bei Hover */
}
/* Links within chat bubbles should match the bubble text color */
#conversation .agent-bubble a,
#conversation .agent-bubble a:hover {
    color: var(--color-black);
}
#conversation .user-bubble a,
#conversation .user-bubble a:hover {
    color: var(--color-text-primary);
}

/* Checkboxen */
/* Diese Regeln wurden bereits verbessert und sind gut so */
input[type="checkbox"] {
    appearance: none;
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid var(--color-text-secondary);
    border-radius: var(--radius-sm);
    cursor: pointer;
    position: relative;
    transition: background-color 0.2s, border-color 0.2s;
    /* Stellen Sie sicher, dass der Hintergrund für Checkboxen spezifisch gesetzt wird,
       damit er nicht von der allgemeinen 'input' Regel überschrieben wird.
       Hier entfernen wir !important aus der 'input' Regel oben, sodass dies greifen kann. */
    background-color: var(--color-surface-dark);
}

input[type="checkbox"]:hover {
    border-color: var(--color-accent-gold);
}

input[type="checkbox"]:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.4);
}

input[type="checkbox"]:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

input[type="checkbox"]:checked {
    background-color: var(--color-accent-gold);
    border-color: var(--color-accent-gold);
}

input[type="checkbox"]:checked::before {
    content: '✔'; /* Häkchen-Symbol */
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--color-black);
    font-size: 0.8rem;
    font-weight: bold;
}

/* Anpassung für das Checkbox-Label im Versandformular */
#shipping-form label.flex {
    width: 100%; /* Label sollte auch volle Breite einnehmen */
    margin-bottom: 1rem; /* Abstand zum Button */
    justify-content: flex-start; /* Inhalt links ausrichten */
}

/* --- Service Karten --- */
.service-cards {
    display: grid; /* Nutzung von Grid für responsive Layouts */
    grid-template-columns: repeat(2, 1fr); /* Zwei Spalten */
    gap: 2.5rem; /* Grosszügiger Abstand */
    margin-top: 2rem;
    padding: 0 1rem; /* Etwas Padding */
    width: 100%;
    max-width: 800px; /* Karten nicht zu breit */
}

/* Dritte Karte zentrieren */
.service-card:nth-child(3) {
    grid-column: 1 / -1; /* über beide Spalten */
    justify-self: center;
    width: clamp(280px, 50%, 400px);
}

.service-card {
    background: var(--color-surface-dark);
    border-radius: 0.8rem; /* Sanftere Rundung */
    overflow: hidden;
    box-shadow: var(--shadow-medium);
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    border: 1px solid transparent; /* For active state */
}

.service-card:hover {
    transform: translateY(-5px) scale(1.01); /* Deutlicherer Hover-Effekt */
    box-shadow: var(--shadow-large);
    border-color: var(--color-accent-gold-dark); /* Leichter Goldrand beim Hover */
}

.service-card.active-card {
    transform: translateY(-8px) scale(1.02); /* Noch deutlicher im aktiven Zustand */
    box-shadow: var(--shadow-accent); /* Goldener Glühen-Effekt */
    border: 2px solid var(--color-accent-gold); /* Betonter Goldrand */
    z-index: 10; /* Sicherstellen, dass die aktive Karte über anderen liegt */
}

.service-card .media {
    width: 100%;
    height: 200px; /* Einheitliche Höhe für Medien */
    position: relative;
    border-bottom: 1px solid var(--color-surface-light); /* Trennlinie */
}
.service-card img,
.service-card video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.service-card video.hidden,
.service-card img.hidden {
    display: none;
}

.service-card .info {
    padding: 1rem 1rem; /* Reduced vertical padding for better fit */
    color: var(--color-text-primary);
}

.service-card .info h3 {
    font-size: 1.35rem; /* Grössere Überschrift */
    margin-top: 0; /* Remove default top margin */
    margin-bottom: 0.4rem; /* Reduced spacing below heading */
    color: var(--color-accent-gold); /* Goldene Überschrift */
    font-weight: 700;
}

.service-card .info p {
    font-size: 0.95rem;
    opacity: 0.85;
    margin: 0;
    color: var(--color-text-secondary); /* Beschreibungstext in Sekundärfarbe */
}

.service-card .info .click-to-select-text {
  font-size: 0.85rem;
  color: var(--color-accent-gold);
  margin-top: var(--spacing-sm);
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0% { opacity: 0.7; }
  50% { opacity: 1; }
  100% { opacity: 0.7; }
}

/* --- Status Box --- */
#status-box {
    position: fixed; /* CRITICAL: Must be fixed to stick to viewport top */
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    background-color: var(--color-surface-dark);
    padding: var(--spacing-sm) var(--spacing-md);
    border-bottom: 1px solid var(--color-surface-light);
    box-shadow: var(--shadow-small);
    z-index: 20; /* Above chat bubbles, below full overlays */
    display: flex;
    flex-direction: column; /* Stack rows vertically */
    align-items: center; /* Center contents */
    /* Removed extra padding-bottom */
    box-sizing: border-box;
    color: var(--color-text-secondary);
    min-height: 3.5rem; /* Ensure it has a minimum height */
}

/* Ensure the status box is hidden when the class is applied */
#status-box.hidden {
    display: none;
}

/* First row inside the status box */
#status-box div.flex.items-center.gap-2 {
    width: 100%;
    justify-content: center; /* Center items */
    gap: var(--spacing-md); /* Space between elements */
    margin-left: auto; /* Ensure row itself is centered */
    margin-right: auto;
}

/* Styling for the status text line */
#status-box #status-text {
    width: 100%;
    text-align: center;
    margin-top: var(--spacing-xs);
    color: var(--color-text-primary);
    font-size: 0.9rem;
}

#status-box:hover {
    opacity: 1;
}

/* QR Code Canvas */
canvas#qrcode {
    background-color: var(--color-text-primary); /* Weisser Hintergrund für QR Code */
    padding: 10px;
    border-radius: var(--radius);
    box-shadow: var(--shadow-medium);
    margin-top: var(--spacing-lg);
    display: block; /* Zentrieren ermöglichen */
    margin-left: auto;
    margin-right: auto;
}

/* Loading Spinner */
.loading-spinner {
  border: 4px solid rgba(255, 255, 255, 0.3);
  border-top: 4px solid var(--color-accent-gold);
  border-radius: 50%;
  width: 30px;
  height: 30px;
  animation: spin 1s linear infinite;
  margin: 1rem auto; /* Center the spinner */
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}


/* Responsive Anpassungen */
@media (max-width: 768px) {
    body {
        padding: 1rem;
    }

    #conversation > div {
        max-width: 90%; /* More space on smaller screens */
        padding: var(--spacing-md) var(--spacing-lg);
        white-space: pre-line; /* Respect line breaks */
    }

    .service-cards {
        gap: 1rem; /* Reduced gap between stacked cards */
        grid-template-columns: 1fr; /* Cards stacked */
        padding: 0 0.5rem; /* Allow more width on small screens */
    }

    .service-card:nth-child(3) {
        width: 100%;
    }

    .service-card .media {
        height: 100px; /* Slightly shorter media area */
    }

    .service-card .info {
        padding: var(--spacing-lg) var(--spacing-md);
    }

    #status-box {
        top: 0.5rem;
        padding: 0.6rem 1rem;
        font-size: 0.75rem;
    }

    /* Adjustment for submit button on small screens */
    #shipping-form button[type="submit"] {
        width: 100%; /* Button full width on small screens */
        align-self: center;
    }
}

/* Specific Tailwind overrides and additions for elements in HTML */
/* Geändert: Tailwind-ähnliche Klassen benötigen hier keine !important mehr,
            da sie in den HTML-Dateien durch Inline-Styles oder spezifischere Regeln überschrieben werden könnten.
            Es ist besser, wenn das CSS in stylesheet.css die Basis legt. */
.bg-gray-900 { /* Overridden by body background */
    background-color: var(--color-background);
}
.text-white { /* Overridden by body color */
    color: var(--color-text-primary);
}
.font-sans {
    font-family: var(--font-family-base);
}
.min-h-screen {
    min-height: 100vh;
}
.p-4 { /* Overridden by body padding */
    padding: 2rem;
}
.rounded {
    border-radius: var(--radius); /* Unified rounding */
}
.shadow { /* Overridden by custom shadows */
    box-shadow: var(--shadow-small);
}
.flex {
    display: flex;
}
.relative {
    position: relative;
}
.flex-col {
    flex-direction: column;
}
.gap-2 {
    gap: 0.75rem; /* Slightly more space */
}
.mt-2 {
    margin-top: 1rem;
}
.mt-4 {
    margin-top: 1.5rem;
}
.mt-auto {
    margin-top: auto;
}
.px-3 {
    padding-left: 1rem;
    padding-right: 1rem;
}
.py-1 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}
.px-4 {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}
.py-2 {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}
.w-fit {
    width: fit-content;
}
.max-w-full {
    max-width: 100%;
}
.items-center {
    align-items: center;
}
.items-start {
    align-items: flex-start;
}
/* Geändert: `accent-color` direkt für Checkboxen ist die sauberste Lösung */
.accent-yellow-500 { /* For Checkbox */
    accent-color: var(--color-accent-gold);
}
.underline {
    text-decoration: underline;
}
.text-yellow-400 { /* For links */
    color: var(--color-accent-gold);
}
.text-sm {
    font-size: 0.875rem;
}
.fixed {
    position: fixed;
}
.bottom-2 {
    bottom: 1.5rem;
}
.right-2 {
    right: 1.5rem;
}
.flex-1 {
    flex: 1;
}
.block {
    display: block;
}
.hidden {
    display: none !important;
}
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}
.text-center {
    text-align: center;
}
.w-full {
    width: 100%;
}
.space-y-2 > * + * {
    margin-top: 1rem;
}
.border {
    border-width: 1px;
}
.border-gray-700 {
    border-color: var(--color-surface-light);
}

/* --- Branding & Startup Screen --- */
#branding img {
    width: 180px;
    display: block;
    margin: 0 auto var(--spacing-sm);
}
#branding .tagline {
    color: var(--color-text-secondary);
    text-align: center;
    margin-bottom: 2rem;
}
#back-button {
    margin-top: var(--spacing-sm);
    cursor: pointer;
}

.startup-panels {
    display: flex;
    gap: 2rem;
    margin-top: 1rem;
}
@media (max-width: 640px) {
    .startup-panels {
        flex-direction: column;
    }
}
.startup-panels .panel {
    background: var(--color-surface-dark);
    border-radius: 0.8rem;
    padding: 1.5rem;
    box-shadow: var(--shadow-medium);
    flex: 1;
}
.vip-panel {
    background: var(--color-surface-dark);
    border-radius: 0.8rem;
    padding: 1.5rem;
    box-shadow: var(--shadow-medium);
    margin-top: 2em;
}
.startup-panels .panel h2 {
    margin-top: 0;
    margin-bottom: 1rem;
    color: var(--color-accent-gold);
    text-align: center;
    font-size: 1.2rem;
}
.startup-panels .panel-list {
    margin-top: 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    justify-content: center;
}
.big-button {
    padding: var(--spacing-xl) var(--spacing-2xl);
    font-size: 1.1rem;
}
.guidelines-card {
  background: linear-gradient(135deg, var(--color-guidelines-light1), var(--color-guidelines-light2));
  color: var(--color-text-dark);
  padding: 1.5rem;
  border-radius: 1rem;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), var(--shadow-large);
  border: 1px solid rgba(0, 0, 0, 0.1);
  max-width: 700px;
  margin: 1rem auto;
  line-height: 1.4;
}

.guidelines-card h2 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
}

.guidelines-card h3 {
  font-size: 1.2rem;
  margin-top: 0.6rem;
  margin-bottom: 0.2rem;
}

.guidelines-card p {
  margin: 0.2rem 0;
}

.guidelines-card ul {
  padding-left: 1.2rem;
  margin: 0.2rem 0;
}

.guidelines-card li {
  margin-bottom: 0.1rem;
}

#guidelines-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
  background: rgba(0, 0, 0, 0.6);
  z-index: 1000;
}

#guidelines-form {
  width: 100%;
  max-width: 700px;
}

#service-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
  background: rgba(0, 0, 0, 1);
  z-index: 1000;
}
#service-overlay.hidden {
  display: none;
}

#restore-key-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
  background: rgba(0, 0, 0, 1);
  z-index: 1000;
}
#restore-key-overlay.hidden {
  display: none;
}

/* VIP greeting styling */
.vip-greeting {
  font-size: 1.5rem;
  text-align: center;
  color: var(--color-accent-gold);
  margin-top: 1rem;
  font-weight: 600;
  text-shadow: 0 0 8px rgba(255, 215, 0, 0.2);
}

/* Urgent VIP button */
button.vip-urgent {
  background-color: var(--color-error);
  color: white;
}
button.vip-urgent:hover {
  background-color: var(--color-danger-dark);
}

/* Coin selection buttons */
/* Geändert: Entfernen von !important, da sie hier nicht benötigt werden sollten */
/* Coin selection buttons */
.coin-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 6rem;
  border-radius: var(--radius);
  border: 2px solid var(--color-text-secondary);
  background-color: var(--color-surface-light);
  color: var(--color-text-primary);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  box-sizing: border-box;
  transition: all 0.3s ease;
  flex-shrink: 0;
  padding: var(--spacing-sm);
}

.coin-btn.full-width {
  grid-column: span 2;
  width: 100%;
}

.coin-btn .coin-icon-wrapper {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-bottom: 0.2rem;
  transition: all 0.3s ease;
}

.coin-btn.selected {
  background-color: var(--color-accent-gold);
  color: var(--color-black);
  border-color: var(--color-accent-gold-dark);
  box-shadow: 0 0 15px rgba(255, 215, 0, 0.8), inset 0 0 5px rgba(255, 255, 255, 0.4);
  transform: scale(1.03);
  z-index: 1;
}

.coin-btn.selected .coin-icon-wrapper {
  transform: scale(1.1);
}

.coin-btn:not(.selected):hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-small);
  border-color: var(--color-accent-gold);
}

.coin-btn:not(.selected):hover .coin-icon {
  filter: grayscale(50%);
}

.coin-btn .coin-icon {
  height: 100%;
  width: 100%;
  object-fit: contain;
  transition: transform 0.2s ease, filter 0.3s ease;
  filter: grayscale(100%);
}

.coin-btn.selected .coin-icon {
  filter: grayscale(0%);
}

.coin-btn span {
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
  max-width: 100%;
  display: block;
  font-size: 0.75rem;
  line-height: 1.2;
  padding: 0 5px;
}

/* Container for cryptocurrency buttons */
#CoinButtons {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  justify-content: center;
  gap: var(--spacing-md);
  width: 100%;
}

@media (max-width: 480px) {
  .main-container {
    padding: var(--spacing-md);
  }
  .coin-btn {
    height: 5.5rem;
    padding: var(--spacing-xs);
  }
  .coin-btn .coin-icon-wrapper {
    width: 50px;
    height: 50px;
  }
  .coin-btn span {
    font-size: 0.7rem;
  }
  .action-buttons {
    flex-direction: column;
    width: 100%;
  }
  .action-buttons button {
    width: 100%;
  }
}

#policy-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
  background: rgba(0, 0, 0, 0.8);
  z-index: 1000;
}
#policy-overlay.hidden {
  display: none;
}
#policy-overlay .content {
  background: var(--color-surface-dark);
  color: var(--color-text-primary);
  padding: var(--spacing-lg);
  max-height: 80vh;
  overflow-y: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-large);
  position: relative;
  width: 90%;
  max-width: 600px;
}
#policy-overlay .close-btn {
  position: absolute;
  top: var(--spacing-sm);
  right: var(--spacing-sm);
  cursor: pointer;
}
#policy-overlay .close-btn.bottom {
  position: static;
  display: block;
  margin: var(--spacing-lg) auto 0;
}



/* Country autocomplete dropdown */
.country-dropdown {
  position: absolute;
  top: 100%;
  margin-top: 4px;
  left: 0;
  background-color: var(--color-surface-dark);
  border: 1px solid var(--color-surface-light);
  border-radius: var(--radius-sm);
  max-height: 200px;
  overflow-y: auto;
  width: 100%;
  z-index: 1000;
  box-shadow: var(--shadow-small);
}

.country-dropdown div {
  padding: var(--spacing-xs) var(--spacing-sm);
  cursor: pointer;
}

.country-dropdown div:hover {
  background-color: var(--color-surface-light);
}

/* Custom autocomplete dropdown */
.custom-autocomplete-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background-color: var(--color-surface-dark);
  border: 1px solid var(--color-surface-light);
  border-radius: var(--radius);
  max-height: 200px;
  overflow-y: auto;
  z-index: 1001;
  box-shadow: var(--shadow-medium);
  display: none;
}

.custom-autocomplete-suggestion {
  padding: var(--spacing-sm) var(--spacing-md);
  cursor: pointer;
  color: var(--color-text-primary);
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.custom-autocomplete-suggestion:hover {
  background-color: var(--color-surface-light);
  color: var(--color-accent-gold);
}

.custom-autocomplete-suggestion.active-suggestion {
  background-color: var(--color-surface-light);
  color: var(--color-accent-gold);
}

/* Attachment input styling */
.attach-label {
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}
.attach-label:hover {
  color: var(--color-accent-gold);
}
.attach-label .inline-icon {
  width: 2.5rem;
  height: 2.5rem;
}
.selected-file {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  word-break: break-all;
}
.file-error {
  color: var(--color-error);
}

/* Skeleton loading styles */
.skeleton {
  background-color: var(--color-surface-light);
  position: relative;
  overflow: hidden;
}

.skeleton::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  from { left: -100%; }
  to { left: 100%; }
}

.skeleton-bubble {
  min-width: 80px;
  min-height: 1.5rem;
  border-radius: var(--radius-lg);
  margin: 0.25rem 0;
}

.user-sending-skeleton {
  width: 60%;
  min-height: 2rem;
  background-color: var(--color-surface-light);
  border-radius: var(--radius-lg);
  margin-bottom: 1rem;
  position: relative;
  overflow: hidden;
  opacity: 0.7;
}
.user-sending-skeleton::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  animation: shimmer 1.5s infinite;
}

.skeleton-offer {
  width: 100%;
  height: 80px;
  border-radius: var(--radius-lg);
  margin: 0.5rem 0;
}

.button-spinner {
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top: 2px solid var(--color-accent-gold);
  border-radius: 50%;
  width: 16px;
  height: 16px;
  animation: spin 1s linear infinite;
  display: inline-block;
  vertical-align: middle;
  margin-left: 4px;
}

@keyframes newMessageFlash {
  from { box-shadow: 0 0 10px var(--color-accent-gold); }
  to { box-shadow: none; }
}

.new-message-flash {
  animation: newMessageFlash 2s ease-out;
}

@keyframes sentConfirm {
  0% { opacity: 0; transform: scale(0); }
  20% { opacity: 1; transform: scale(1); }
  80% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1); }
}

.sent-confirm {
  margin-left: 0.25rem;
  animation: sentConfirm 2s forwards;
  display: inline-block;
}

.user-bubble.sent-feedback {
  animation: sentFeedbackPulse 2s ease-out;
}

@keyframes sentFeedbackPulse {
  0% { box-shadow: 0 0 6px var(--color-accent-gold); }
  100% { box-shadow: none; }
}

input[type="checkbox"]:active {
  transform: scale(0.9);
  box-shadow: 0 0 0 2px var(--color-accent-gold-dark);
}

/* Payment section layout */
.payment-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-lg);
  text-align: center;
}

#usdtWarningMessage {
  color: #FF5733;
  font-size: 0.85rem;
  font-weight: 600;
  margin-top: var(--spacing-md);
  text-align: center;
  display: none;
  padding: var(--spacing-sm);
  border: 1px solid #FF5733;
  border-radius: var(--radius);
  background-color: rgba(255, 87, 51, 0.1);
}

.wallet-fail-message {
  color: var(--color-error);
  font-size: 0.95rem;
  font-weight: 500;
  margin-top: var(--spacing-md);
  padding: var(--spacing-sm);
  border: 1px solid var(--color-error);
  border-radius: var(--radius);
  background-color: rgba(220, 53, 69, 0.15);
  text-align: center;
  box-shadow: var(--shadow-small);
  transition: all 0.3s ease;
}

.wallet-fail-message.hidden {
  display: none;
}

.action-buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-md);
  margin-top: var(--spacing-lg);
  width: 100%;
}

.action-buttons button {
  padding: var(--spacing-md) var(--spacing-xl);
  border-radius: var(--radius);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  width: 100%;
}

.action-buttons button.bg-gray-700 {
  background-color: var(--color-surface-light);
  color: var(--color-text-primary);
  border: 1px solid var(--color-text-secondary);
}
.action-buttons button.bg-gray-700:hover {
  background-color: var(--color-gray-hover);
  border-color: var(--color-accent-gold);
  transform: translateY(-2px);
  box-shadow: var(--shadow-small);
}

.action-buttons button.bg-yellow-500 {
  background-color: var(--color-accent-gold);
  color: var(--color-black);
}
.action-buttons button.bg-yellow-500:hover {
  background-color: var(--color-accent-gold-dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow-small);
}

canvas#QRCanvas {
  background-color: var(--color-white);
  padding: 10px;
  border-radius: var(--radius);
  box-shadow: var(--shadow-medium);
  margin-top: var(--spacing-lg);
  display: block;
  margin-left: auto;
  margin-right: auto;
}
canvas#QRCanvas.hidden {
  display: none;
}

.payment-info-container {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-md);
}
.payment-info-container.hidden {
  display: none;
}

.payment-info-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
}
.payment-info-row.hidden {
  display: none;
}

.payment-label {
  font-weight: 600;
  margin-right: var(--spacing-xs);
}

.payment-data {
  background-color: var(--color-surface-light);
  word-break: break-all;
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-sm);
  font-family: monospace;
  font-size: 0.9rem;
}


/* --- Invoice Timer Styling --- */
.timer-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin-top: var(--spacing-lg);
    background-color: var(--color-surface-light);
    border-radius: var(--radius);
    padding: var(--spacing-sm);
    box-shadow: var(--shadow-small);
    transition: all 0.3s ease-out;
    max-height: 40px;
    overflow: hidden;
}

.timer-container.expanded {
    max-height: 100px;
    padding: var(--spacing-md);
}

.timer-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-text-secondary);
    font-size: 1.5rem;
    width: 100%;
    padding: var(--spacing-xs) 0;
    transition: transform 0.2s ease;
}

.timer-container.expanded .timer-toggle {
    transform: rotate(180deg);
    margin-bottom: var(--spacing-sm);
}

#invoiceTimer {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--color-accent-gold);
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    opacity: 0;
    transition: opacity 0.3s ease-out, color 0.3s ease;
}

.timer-container.expanded #invoiceTimer {
    opacity: 1;
}

.timer-low-time {
    color: orange;
}

.timer-critical-time {
    color: var(--color-error);
}

.timer-expired {
    color: var(--color-error);
    font-style: italic;
}

.timer-icon {
    width: 1.5rem;
    height: 1.5rem;
    vertical-align: middle;
    background: url('/icons/Timer.svg') no-repeat center/contain;
}

.timer-expired-icon {
    background-image: url('/icons/TimerExpired.svg');
}
.traveler-selector-form {
    background-color: var(--color-surface-dark);
    padding: var(--spacing-lg);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-medium);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    max-width: 450px;
    margin: 1rem auto;
}

.traveler-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-sm) 0;
    border-bottom: 1px solid var(--color-surface-light);
}
.traveler-row:last-of-type {
    border-bottom: none;
}

.traveler-info {
    text-align: left;
    flex-grow: 1;
}

.traveler-info h3 {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
    color: var(--color-text-primary);
}

.traveler-info p {
    font-size: 0.85rem;
    color: var(--color-text-secondary);
    margin: 0;
}

.traveler-info a {
    font-size: 0.85rem;
}

.traveler-controls {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.traveler-btn {
    background-color: transparent;
    border: 1px solid var(--color-text-secondary);
    color: var(--color-text-primary);
    border-radius: 50%;
    width: 38px;
    height: 38px;
    padding: 0;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s, transform 0.2s;
    flex-shrink: 0;
}

.traveler-btn:hover:not(:disabled) {
    background-color: var(--color-surface-light);
    border-color: var(--color-accent-gold);
    transform: scale(1.05);
}

.traveler-btn:active:not(:disabled) {
    transform: scale(0.95);
    background-color: var(--color-accent-gold);
    color: var(--color-black);
}

.traveler-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    border-color: var(--color-text-secondary);
}

.traveler-count {
    font-size: 1.3rem;
    font-weight: bold;
    color: var(--color-text-primary);
    min-width: 30px;
    text-align: center;
    flex-shrink: 0;
}

#travelContinueBtn {
    width: 100%;
    margin-top: var(--spacing-lg);
    padding: var(--spacing-md) var(--spacing-xl);
    font-size: 1.1rem;
}

@media (max-width: 480px) {
    .traveler-selector-form {
        padding: var(--spacing-md);
        margin: 0.5rem auto;
        border-radius: var(--radius);
    }
    .traveler-row {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-sm);
    }
    .traveler-controls {
        width: 100%;
        justify-content: center;
    }
.traveler-btn {
        width: 36px;
        height: 36px;
        padding: 0;
        box-sizing: border-box;
        font-size: 1.4rem;
    }
}

/* Sticky header */
#sticky-header {
    position: sticky;
    top: env(safe-area-inset-top, 0);
    left: 0;
    right: 0;
    width: 100%;
    background-color: var(--color-surface-dark);
    padding: var(--spacing-sm) var(--spacing-md);
    border-bottom: 1px solid var(--color-surface-light);
    box-shadow: var(--shadow-small);
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    color: var(--color-text-secondary);
}
#sticky-header .inline-icon {
    width: 1.2em;
    height: 1.2em;
    vertical-align: text-bottom;
}
#sticky-header #headerTicketNumber {
    color: var(--color-text-primary);
    margin-left: var(--spacing-xs);
}
#sticky-header #showKeyOverlayBtn {
    background-color: transparent;
    border: none;
    padding: var(--spacing-xs);
    font-size: 0;
    color: var(--color-accent-gold);
    margin-left: var(--spacing-sm);
}
#sticky-header #showKeyOverlayBtn img {
    width: 1.5rem;
    height: 1.5rem;
}

#sticky-header #showKeyOverlayBtn:hover img {
    filter: none;
}

/* Restore key modal */
#restore-key-overlay .bg-surface-dark {
    background-color: var(--color-surface-dark);
    padding: var(--spacing-lg);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-large);
    max-width: 450px;
    width: 90%;
    box-sizing: border-box;
}
#restore-key-overlay h2 {
    color: var(--color-accent-gold);
    margin-bottom: var(--spacing-lg);
    font-size: 1.5rem;
}
#restore-key-overlay p {
    margin-bottom: var(--spacing-sm);
}
#overlayRestoreKey {
    background-color: var(--color-surface-light);
    word-break: break-all;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-sm);
    font-family: monospace;
    font-size: 0.9rem;
    display: inline-block;
}
#confirmKeySaved {
    margin-right: var(--spacing-sm);
}
#keySavedError {
    margin-top: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
}
#restore-key-overlay .mb-md {
    margin-bottom: var(--spacing-md);
}
#restore-key-overlay .mb-sm {
    margin-bottom: var(--spacing-sm);
}
#restore-key-overlay .text-sm {
    font-size: 0.85rem;
}
#restore-key-overlay .text-left {
    text-align: left;
}
#restore-key-overlay .text-secondary {
    color: var(--color-text-secondary);
}
#restore-key-overlay #closeKeyOverlayBtn {
    background-color: var(--color-gray-700);
    color: var(--color-text-primary);
    padding: var(--spacing-md) var(--spacing-xl);
    border-radius: var(--radius);
    font-weight: 600;
    margin-top: var(--spacing-lg);
}
#restore-key-overlay #closeKeyOverlayBtn:hover {
    background-color: var(--color-gray-hover);
}

#hamburger-menu-btn {
    position: fixed;
    top: 1rem;
    right: 1rem;
    width: 3.5rem;
    height: 3.5rem;
    padding: 0;
    border-radius: var(--radius-full);
    background-color: var(--color-surface-dark);
    box-shadow: var(--shadow-medium);
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-surface-light);
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
#hamburger-menu-btn:hover {
    background-color: var(--color-gray-hover);
    transform: scale(1.05);
    box-shadow: var(--shadow-large);
}
#hamburger-menu-btn img {
    width: 1.8rem;
    height: 1.8rem;
    filter: grayscale(100%) brightness(0) invert(1);
    transition: transform 0.3s ease;
}
#hamburger-menu-btn.open img {
    transform: rotate(90deg);
}

#global-menu-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 30;
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    overflow-y: auto;
    padding-top: var(--spacing-xl);
}
#global-menu-overlay.hidden {
    display: none;
}
#global-menu-overlay > div {
    background-color: var(--color-surface-dark);
    width: 80%;
    max-width: 300px;
    height: 100%;
    overflow-y: auto;
    padding: var(--spacing-lg);
    padding-top: 4rem;
    border-top-left-radius: var(--radius-lg);
    border-bottom-left-radius: var(--radius-lg);
    box-shadow: var(--shadow-large);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    transform: translateX(100%);
    animation: slideInFromRight 0.3s ease-out forwards;
}
#global-menu-overlay.hidden > div {
    animation: slideOutToRight 0.3s ease-in forwards;
}

.menu-item {
    text-decoration: none;
    color: var(--color-text-primary);
    font-size: 1.1rem;
    padding: var(--spacing-md) var(--spacing-sm);
    border-radius: var(--radius-sm);
    transition: background-color 0.2s ease, color 0.2s ease;
    display: block;
}
.menu-item:hover {
    background-color: var(--color-surface-light);
    color: var(--color-accent-gold);
}
.menu-item:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.4);
}

.company-info {
    font-size: 0.7rem;
    color: var(--color-text-secondary);
    margin-bottom: auto;
}


@keyframes slideInFromRight {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}
@keyframes slideOutToRight {
    from { transform: translateX(0); }
    to { transform: translateX(100%); }
}

/* Ultraprivacy Mode Section (reused for modal and hamburger menu) */
.ultraprivacy-section {
    background-color: var(--color-surface-light);
    padding: var(--spacing-md);
    border-radius: var(--radius);
    box-shadow: var(--shadow-small);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.ultraprivacy-section p {
    margin: 0;
}

/* Toggle Switch Container (Slider Base) */
.ultraprivacy-toggle-switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 28px;
}
.ultraprivacy-toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.ultraprivacy-toggle-switch .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--color-text-secondary);
    transition: .4s;
}
.ultraprivacy-toggle-switch .slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 4px;
    bottom: 4px;
    background-color: var(--color-white);
    transition: .4s;
}
.ultraprivacy-toggle-switch .slider.round {
    border-radius: 28px;
}
.ultraprivacy-toggle-switch .slider.round:before {
    border-radius: 50%;
}
.ultraprivacy-toggle-switch input:checked + .slider {
    background-color: var(--color-accent-gold);
}
.ultraprivacy-toggle-switch input:checked + .slider:before {
    transform: translateX(22px);
}
.ultraprivacy-toggle-switch input:focus + .slider {
    box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.4);
}

/* PWA Install Banners */
#install-app-banner,
#manual-install-banner {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background-color: var(--color-surface-dark);
    color: var(--color-text-primary);
    padding: 15px 20px;
    border-radius: var(--radius-lg);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    z-index: 1000;
    width: 85%;
    max-width: 85%;
    text-align: center;
    font-size: 0.95em;
    opacity: 0;
    transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}

#install-app-banner.show,
#manual-install-banner.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

#install-app-banner p,
#manual-install-banner p {
    margin: 0;
    flex-grow: 1;
}

#install-app-banner #install-button {
    background-color: var(--color-accent-gold);
    color: var(--color-text-dark);
    border: none;
    padding: 8px 15px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-weight: bold;
    white-space: nowrap;
    transition: background-color 0.2s ease;
}

#install-app-banner #install-button:hover {
    background-color: var(--color-accent-gold-dark);
}

#install-app-banner .close-button,
#manual-install-banner .close-button {
    position: absolute;
    top: 5px;
    right: 8px;
    background: none;
    border: none;
    color: var(--color-text-secondary);
    font-size: 1.5em;
    cursor: pointer;
    padding: 0 5px;
    line-height: 1;
    transition: color 0.2s ease;
}

#install-app-banner .close-button:hover,
#manual-install-banner .close-button:hover {
    color: var(--color-text-primary);
}

/* Utility class for show animation */
.show {
    display: block;
}

/* Exolix Modal Styles */
.modal-content-card {
    background-color: var(--color-surface-dark);
    padding: var(--spacing-lg);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    text-align: center;
    max-width: 450px;
    width: 90%;
    box-sizing: border-box;
    position: relative;
    max-height: 90vh;
    overflow-y: auto;
}

#exolix-exchange-modal,
#exolix-transaction-modal {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.8);
    z-index: 50;
}

#exolix-exchange-modal.hidden,
#exolix-transaction-modal.hidden {
    display: none;
}

#exolix-exchange-modal h2,
#exolix-transaction-modal h2 {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--color-accent-gold);
    margin-bottom: var(--spacing-md);
}

#exolixRateInfo {
    background-color: var(--color-surface-light);
    padding: var(--spacing-md);
    border-radius: var(--radius);
    text-align: left;
    line-height: 1.6;
    margin-bottom: var(--spacing-md);
}

#exolixRateInfo span.font-bold {
    color: var(--color-accent-gold);
}

#exolixDepositQR {
    display: block;
    margin: auto;
    border: 1px solid var(--color-surface-light);
    border-radius: var(--radius);
    padding: 10px;
    box-shadow: var(--shadow-small);
}

#exolixTxStatus {
    color: var(--color-accent-gold);
}