/* ==============================
   SanchezNails Style – modern & glam
   ============================== */

/* Grundfarben und Farbverläufe */
:root {
    --primary: #e42d86;
    --secondary: #a184fa;
    --accent: #fed38c;
    --light: #fff6f9;
    --dark: #2d2547;
}

/* Grundlayout */
body {
    background: linear-gradient(120deg, var(--light) 0%, #faf4ff 100%);
    color: var(--dark);
    font-family: 'Quicksand', 'Segoe UI', 'Arial', sans-serif;
    font-size: 18px;
    margin: 0;
    padding: 0;
    min-height: 100vh;
}

/* Header & Navigation */
.header {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    background: linear-gradient(90deg, var(--primary) 0%, var(--accent) 60%, var(--secondary) 100%);
    box-shadow: 0 4px 24px rgba(180,80,180,0.07);
    height: 68px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 2rem;
    animation: headerSlide 1.4s cubic-bezier(.17,.67,.67,1.13);
}
@keyframes headerSlide {
    0% {top: -80px;}
    100% {top: 0;}
}

.header-title {
    font-family: 'Pacifico', cursive;
    font-size: 2.2rem;
    color: #fff;
    letter-spacing: 0.08em;
    text-shadow: 0 2px 10px rgba(180,80,180,0.10);
}
.nav {
    display: flex;
    align-items: center;
    gap: 1.8rem;
}
.nav a {
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    letter-spacing: 0.04em;
    font-size: 1.08rem;
    position: relative;
    padding: 0.5rem 0.9rem;
    transition: background 0.16s, color 0.16s;
    border-radius: 30px;
}
.nav a:hover {
    background: rgba(255,255,255,0.19);
    color: var(--primary);
    box-shadow: 0 2px 10px rgba(180,80,180,0.12);
}

.hamburger {
    display: none;
    background: none;
    border: none;
    font-size: 2rem;
    color: #fff;
    cursor: pointer;
    z-index: 2001;
}

/* --- Mobile Navigation --- */
@media (max-width: 850px) {
    .header {
        padding: 0 1rem;
        height: 56px;
    }
    .header-title {
        font-size: 1.4rem;
    }
    .nav {
        position: fixed;
        flex-direction: column;
        top: 56px;
        left: 0;
        right: 0;
        background: linear-gradient(100deg, var(--primary) 0%, var(--secondary) 100%);
        z-index: 2000;
        gap: 1.2rem;
        padding: 2.5rem 0 2rem 0;
        transition: all 0.32s;
        transform: translateY(-120%);
    }
    .nav.active {
        transform: translateY(0);
    }
    .hamburger {
        display: block;
    }
}

@media (max-width: 600px) {
    body {
        font-size: 16px;
    }
    .header {
        height: 48px;
    }
    .header-title {
        font-size: 1rem;
    }
}

/* ========== Hauptbereich & Buchungsbereich ========== */
.main-content {
    margin-top: 90px;
    max-width: 940px;
    padding: 0 1.5rem;
    margin-left: auto;
    margin-right: auto;
}
@media (max-width: 900px) {
    .main-content {margin-top: 68px;}
}
@media (max-width: 600px) {
    .main-content {margin-top: 52px;}
}

#booking-app {
    margin: 2.5rem auto 1rem auto;
    background: rgba(255,255,255,0.84);
    border-radius: 1.8rem;
    box-shadow: 0 8px 60px 0 rgba(120,90,160,0.07);
    padding: 2.5rem 2.2rem 3rem 2.2rem;
    max-width: 740px;
    min-width: 0;
    position: relative;
}
@media (max-width: 750px) {
    #booking-app {
        padding: 1.1rem 0.3rem 2.5rem 0.3rem;
        max-width: 99vw;
        border-radius: 1.1rem;
    }
}

/* Kalender-Styles */
table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0.08em 0.22em;
    margin: 0 auto 1.3rem auto;
}
th {
    font-size: 1.1rem;
    font-weight: 700;
    padding-bottom: 0.38em;
    color: var(--primary);
    letter-spacing: 0.05em;
}
td {
    text-align: center;
}

/* Buchungs-/Termin-Buttons */
button {
    font-family: inherit;
    font-size: 1rem;
    border: none;
    cursor: pointer;
    outline: none;
    transition: transform 0.13s, box-shadow 0.13s, background 0.16s;
}
button:active {
    transform: scale(0.96);
}

/* Spezielle Styles für Buchungsbuttons */
.bg-gradient-to-r {
    background: linear-gradient(92deg, #f9d3ea 0%, #fed38c 50%, #c6b6fa 100%);
}
.bg-pink-400 {background: #e42d86;}
.bg-pink-200 {background: #fa9bb7;}
.text-purple-800 {color: #432265;}
.text-purple-900 {color: #2d2547;}
.text-rose-800 {color: #b91c5c;}
.text-rose-700 {color: #e42d86;}
.text-yellow-800 {color: #b27700;}
.text-green-700 {color: #278955;}

/* Felder */
input, textarea {
    background: rgba(255,255,255,0.95);
    border: 1px solid #e9d7f2;
    font-family: inherit;
    font-size: 1rem;
    padding: 0.7rem 1rem;
    border-radius: 9px;
    box-sizing: border-box;
    outline: none;
    margin-bottom: 0.8em;
    transition: border 0.17s;
}
input:focus, textarea:focus {
    border: 1.5px solid var(--primary);
    background: #fff7fc;
}

/* Loader-Animation */
.loader {
    border: 4px solid #eee6f7;
    border-top: 4px solid var(--primary);
    border-radius: 50%;
    width: 38px;
    height: 38px;
    animation: spin 0.9s linear infinite;
    margin: 2em auto;
}
@keyframes spin {
    0% { transform: rotate(0deg);}
    100% { transform: rotate(360deg);}
}

/* Banner/Infoleiste */
#banner-bar { /* Beachte: In booking.js wird #banner-msg verwendet, dies hier scheint eine ältere Definition zu sein. */
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    z-index: 1800;
    font-size: 1.15rem;
    border-bottom: 2.5px solid #e6d4f2;
    border-radius: 0 0 18px 18px;
    box-shadow: 0 6px 38px 0 rgba(164,70,120,0.09);
}

.bg-red-100 {background: #fee3ed;}
.text-red-700 {color: #b31637;}
.bg-blue-100 {background: #e7f3ff;}
.text-blue-700 {color: #125ea9;}
.bg-green-100 {background: #e6faee;}
.text-green-700 {color: #278955;} /* In booking.js wird text-green-900 für Banner verwendet, hier ist es 700 */

/* --- Deine Termine --- */
.animate-fadein-glass {
    animation: fadein-glass 0.8s;
}
@keyframes fadein-glass {
    0% {opacity: 0; transform: scale(0.96);}
    80% {opacity: 0.75;}
    100% {opacity: 1; transform: scale(1);}
}
.animate-pop-in {
    animation: pop-in 0.7s cubic-bezier(.55,-0.01,.19,1.14);
}
@keyframes pop-in {
    0% {transform: scale(0.85);}
    80% {transform: scale(1.03);}
    100% {transform: scale(1);}
}

/* Modal / Bestätigung */
#confirm-modal {
    z-index: 2500; /* In booking.js wird z-50 für das Modal-Overlay und z-[10001] für Banner verwendet, dies hier ist 2500 */
}

/* --- Ergänzung: Monospace für Slot-Zeiten (damit stehen alle Zahlen exakt untereinander) --- */
.font-mono {
    font-family: 'Fira Mono', 'Consolas', 'Menlo', 'Monaco', 'Courier New', monospace;
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
}

/* --- Optional: Logout-Button noch dezenter --- */
#logout-btn-custom {
    opacity: 0.72;
    transition: opacity 0.2s, background 0.18s;
    z-index: 1200;
    font-size: 0.94rem;
}
#logout-btn-custom:hover {
    opacity: 1;
    background: #ffd6e0;
}

/* ----- NEU: Animation für sanftes Ausblenden des Banners (#banner-msg) ----- */
@keyframes fadeOutBanner {
  0% {
    opacity: 1;
    transform: translate(-50%, 0); /* Startposition (translateX ist wegen left-1/2 transform -translate-x-1/2 in JS) */
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -20px); /* Endposition, bewegt sich nach oben und faded aus */
  }
}

.animate-fade-out {
  animation: fadeOutBanner 0.4s ease-out forwards;
  /* Die 'left: 50%' und 'transform: translateX(-50%)' werden vom Banner selbst via Tailwind Klassen gesetzt.
     Das Keyframe muss dies berücksichtigen, damit die horizontale Zentrierung während der Animation erhalten bleibt. */
}
@keyframes bounceIn {
  0% { opacity: 0; transform: translateX(-50%) scale(0.7); } /* Startet zentriert */
  70% { opacity: 1; transform: translateX(-50%) scale(1.05); }
  100% { opacity: 1; transform: translateX(-50%) scale(1); }
}
.animate-bounce-in {
  /* Das translateX(-50%) ist schon durch Tailwind-Klassen auf dem Element,
     aber es schadet nicht, es in der Animation zu wiederholen, um Konsistenz zu gewährleisten.
     Wenn das Element bereits 'left-1/2 transform -translate-x-1/2' hat,
     kann 'translateX(-50%)' in der Animation ggf. zu Problemen führen oder redundant sein.
     Besser ist es, die Animation nur auf scale und opacity zu beschränken,
     wenn die Positionierung schon stimmt.
     Alternative für Keyframes, wenn Positionierung via Tailwind fix ist:
     0% { opacity: 0; scale: 0.7; }
     70% { opacity: 1; scale: 1.05; }
     100% { opacity: 1; scale: 1; }
  */
  animation: bounceIn 0.4s ease-out forwards;
  transform-origin: center center; /* Wichtig für scale Animation */
}