/* =========================================
   CINTI HAIR - LUXURY STYLE SHEET (FULL)
   ========================================= */

:root {
    /* --- DARK LUXURY COLOR PALETTE --- */
    --bg-deep: #050505;       /* Mélyfekete háttér */
    --bg-card: rgba(20, 20, 20, 0.85); /* Sötét üveghatás */
    --bg-lighter: #151515;
    
    --gold-main: #D4AF37;     /* Klasszikus Arany */
    --gold-light: #F3E5AB;    /* Pezsgő */
    --gold-dark: #AA8C2C;     /* Sötétített Arany */
    --gold-gradient: linear-gradient(135deg, #bf953f, #fcf6ba, #b38728, #fbf5b7, #aa771c);
    
    --text-main: #Eaeaea;     /* Törtfehér szöveg */
    --text-muted: #b0b0b0;    /* Szürke mellékszöveg */
    
    --glass-border: 1px solid rgba(212, 175, 55, 0.15);
    --shadow-gold: 0 5px 30px rgba(0,0,0,0.8);
    
    /* --- TYPOGRAPHY --- */
    --font-title: 'Cinzel', serif;
    --font-body: 'Jost', sans-serif;
    --font-script: 'Mrs Saint Delafield', cursive;
    
    /* --- GLOBAL LAYOUT VARIABLES (ALIGNMENT FIX) --- */
    --container-width: 1200px; /* Maximális szélesség */
    --side-padding: 20px;      /* Oldalsó margó minden nézetben */
    --header-height: 80px; /* Alapértelmezett fejléc magasság, a user bar nélkül */
}

/* --- RESET & BASE --- */
* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    font-family: var(--font-body);
    background-color: var(--bg-deep);
    color: var(--text-main);
    overflow-x: hidden;
    line-height: 1.6;
    min-height: 100vh;
    -webkit-overflow-scrolling: touch; 
    /* Komment: Hely a fix header és a felhasználói sáv miatt. Alapértelmezett desktop érték. */
    padding-top: 135px; 
}

/* --- BACKGROUND ANIMATION CANVAS --- */
#gold-dust {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(circle at center, #111 0%, #000 100%);
}

/* =========================================
   UI COMPONENTS & EFFECTS
   ========================================= */

/* Arany Szöveg Gradiens */
.gold-text {
    background: var(--gold-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 700;
}

/* Üveg Panelek (Kártyák) */
.glass-panel {
    background: var(--bg-card);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: var(--glass-border);
    border-radius: 12px;
    box-shadow: var(--shadow-gold);
    overflow: hidden;
    transition: all 0.4s ease; /* Sima átmenet hoverhez */
}

/* HOVER EFFECT: Kivilágosodás és Nagyítás */
.glass-panel:hover {
    transform: scale(1.02); /* Nagyítás */
    border-color: var(--gold-main);
    background: rgba(40, 40, 40, 0.95); /* Kivilágosodás */
    box-shadow: 0 15px 50px rgba(212, 175, 55, 0.15); /* Erősebb árnyék */
}

/* Szekció Címek */
.section-title {
    font-family: var(--font-title);
    font-size: clamp(1.8rem, 5vw, 3.5rem);
    text-align: center;
    margin-bottom: 3rem;
    color: var(--gold-main);
    text-transform: uppercase;
    letter-spacing: 2px;
    position: relative;
    padding-bottom: 15px;
    line-height: 1.2;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: 0; left: 50%;
    transform: translateX(-50%);
    width: 60px; height: 2px;
    background: var(--gold-gradient);
}

/* Arany Gombok */
.btn-gold {
    display: inline-block;
    padding: 12px 35px;
    background: transparent;
    color: var(--gold-main);
    border: 1px solid var(--gold-main);
    font-family: var(--font-title);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    cursor: pointer;
    transition: all 0.4s;
    position: relative;
    overflow: hidden;
    z-index: 1;
    text-decoration: none;
    font-size: 0.9rem;
}

.btn-gold::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 0%; height: 100%;
    background: var(--gold-main);
    transition: all 0.4s;
    z-index: -1;
}

.btn-gold:hover { color: #000; }
.btn-gold:hover::before { width: 100%; }

/* =========================================
   HEADER & NAVIGATION
   ========================================= */

header {
    position: fixed;
    top: 0; left: 0; width: 100%;
    z-index: 1000;
    padding: 15px 0; /* Padding csak fent/lent, oldalt a container kezeli */
    transition: 0.3s;
}

/* Lebegő Menü Sziget - PONTOS IGAZÍTÁS */
.nav-island {
    width: 100%; 
    max-width: var(--container-width); 
    margin: 0 auto;
    /* PONTOSAN UGYANAZ a padding, mint a tartalomban */
    padding: 10px var(--side-padding); 
    
    background: rgba(10, 10, 10, 0.95);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(212, 175, 55, 0.2);
    border-radius: 50px;
    
    box-shadow: 0 5px 20px rgba(0,0,0,0.5);
    
    display: flex; justify-content: space-between; align-items: center;
}

.logo {
    font-family: var(--font-title);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 1px;
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
}
.logo span { color: var(--gold-main); }

.desktop-menu { display: flex; gap: 20px; list-style: none; }

.menu-item {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #ccc;
    cursor: pointer;
    transition: 0.3s;
    display: flex; align-items: center; gap: 6px;
    font-weight: 500;
    white-space: nowrap;
    text-decoration: none;
}

.menu-item svg { width: 14px; height: 14px; fill: var(--gold-main); opacity: 0.7;}
.menu-item:hover { color: var(--gold-main); transform: scale(1.05); } 
.menu-item.active { color: var(--gold-main); border-bottom: 1px solid var(--gold-main); }

/* Mobil Hamburger Menü */
.hamburger {
    display: none; cursor: pointer; flex-direction: column; gap: 5px;
    padding: 5px;
}
.hamburger span { width: 22px; height: 2px; background: var(--gold-main); }

/* Mobil Fiók (Drawer) */
.mobile-drawer {
    position: fixed; top: 0; right: 0; width: 85%; max-width: 300px; height: 100vh;
    background: #0f0f0f; z-index: 1002;
    transform: translateX(100%); 
    transition: transform 0.5s cubic-bezier(0.77, 0, 0.175, 1); /* Animált lenyílás */
    border-left: 1px solid var(--gold-main);
    display: flex; flex-direction: column;
    box-shadow: -10px 0 30px rgba(0,0,0,0.8);
}
.mobile-drawer.open { transform: translateX(0); }

.drawer-header {
    padding: 25px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #222;
}
.drawer-links { padding: 10px; list-style: none; overflow-y: auto; }
.drawer-item {
    padding: 15px 10px; border-bottom: 1px solid #1a1a1a; font-size: 1rem;
    color: #fff; display: flex; align-items: center; gap: 15px; text-decoration: none;
}
.drawer-item svg { width: 18px; height: 18px; fill: var(--gold-main); }
.overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.8); z-index: 1001;
    opacity: 0; visibility: hidden; transition: 0.3s;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}
.overlay.open { opacity: 1; visibility: visible; }

/* =========================================
   USER BAR STYLES
   ========================================= */

/* Fő konténer a felhasználói sávhoz */
.user-bar-wrapper { 
    position: fixed; 
    top: 80px; /* Komment: A fejléc alatt helyezkedik el */
    width: 100%; 
    z-index: 998; 
    display: flex; 
    justify-content: center; 
    padding: 0 var(--side-padding); 
    pointer-events: none; /* Komment: Alapértelmezetten nem interaktív, csak a .user-bar */
}

/* Felhasználói sáv belső stílusa */
.user-bar { 
    pointer-events: all; /* Komment: Engedélyezi az interakciót a sáv tartalmával */
    background: rgba(10, 10, 10, 0.85); 
    backdrop-filter: blur(10px); 
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(212, 175, 55, 0.15); 
    border-top: none; /* Komment: Felül nincs keret */
    border-radius: 0 0 12px 12px; /* Komment: Alul lekerekített sarkok */
    box-shadow: 0 5px 15px rgba(0,0,0,0.5); 
    width: 100%; 
    max-width: calc(var(--container-width) * 0.95); /* Komment: Kicsit szélesebb, mint a fő konténer */
    transition: top 0.3s ease, height 0.3s ease; /* Komment: Animációk */
    padding: 8px 15px; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    gap: 15px;
    flex-wrap: nowrap; /* Komment: Alapértelmezetten minden egy sorban van */
}

/* Felhasználói információk szekció */
.user-bar-info { 
    display: flex; 
    align-items: center; 
    flex-wrap: nowrap; 
    gap: 15px; 
    color: var(--text-muted); 
    min-width: 0; /* Komment: Megakadályozza az elemek túlnyúlását */
    font-size: clamp(0.7rem, 2vw, 0.8rem); /* Komment: Dinamikus betűméret */
}

/* Szöveges elemek az információ szekcióban */
.user-bar-info span { 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; /* Komment: Hosszú szöveg rövidítése, ha túlfolyik */
}

/* Kiemelt szöveges elemek stílusa */
.welcome-text strong, 
.user-status span, 
.user-points { 
    font-weight: 600; 
    color: var(--gold-light); 
}

/* Státusz és pontok kijelzésének elrendezése */
.user-status, 
.user-points { 
    display: flex; 
    align-items: center; 
    gap: 5px; 
}

/* Ikonok stílusa az user bar-ban */
.status-icon, 
.points-icon, 
.guest-icon, 
.action-icon { 
    width: 14px; 
    height: 14px; 
    color: var(--gold-main); 
    stroke-width: 2; 
    flex-shrink: 0; /* Komment: Megakadályozza az ikonok lekicsinyítését */
}

/* Vendég üzenet stílusa */
.guest-message { 
    display: flex; 
    flex-grow: 1; 
    align-items: center; 
    gap: 8px; 
    color: var(--gold-light); 
    font-size: 0.8rem; 
}

/* Felhasználói műveletek (gombok) konténere */
.user-actions { 
    display: flex; 
    gap: 10px; 
    flex-shrink: 0; 
}

/* Általános felhasználói művelet gomb stílusa */
.user-action-btn { 
    display: flex; 
    align-items: center; 
    gap: 6px; 
    color: var(--text-muted); 
    text-decoration: none; 
    padding: 4px 8px; 
    border-radius: 5px; 
    transition: background-color 0.2s ease, color 0.2s ease; 
    font-size: 0.75rem; 
}

/* Felhasználói művelet gomb hover állapota */
.user-action-btn:hover { 
    background-color: rgba(255,255,255,0.1); 
    color: #fff; 
}

/* Visszaszámláló stílusa a felhasználói sávban */
.next-appointment-countdown {
    background-color: var(--gold-main);
    color: #000;
    font-weight: bold;
    padding: 5px 10px;
    border-radius: 5px;
    text-decoration: none;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.8rem;
    transition: background-color 0.2s;
}

/* Visszaszámláló hover állapota */
.next-appointment-countdown:hover {
    background-color: var(--gold-light);
}

/* Visszaszámláló ikon stílusa */
.next-appointment-countdown .countdown-icon {
    width: 16px;
    height: 16px;
}

/* Admin "Foglalások" gomb stílusa az user-bar-ban */
.user-action-btn-admin-bookings {
    background-color: var(--gold-main); /* Arany háttér */
    color: var(--bg-deep); /* Mélyfekete szöveg */
    font-weight: bold;
    padding: 5px 10px; /* Azonos padding mint a visszaszámláló */
}

/* Admin "Foglalások" gomb hover állapota */
.user-action-btn-admin-bookings:hover {
    background-color: var(--gold-light);
}

/* Admin "Foglalások" gomb ikonjának stílusa */
.user-action-btn-admin-bookings .action-icon {
    color: var(--bg-deep); /* Mélyfekete ikon */
    width: 14px; /* Marad a standard icon méret */
    height: 14px;
}

/* =========================================
   MAIN CONTENT LAYOUT
   ========================================= */

/* Közös konténer minden oldal tartalmának az igazításhoz */
.page-container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 20px var(--side-padding); /* Egységes padding */
    width: 100%;
    animation: fadeIn 0.8s ease;
}

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

/* --- HERO SECTION --- */
.hero-wrapper {
    position: relative;
    min-height: 80vh;
    display: flex; align-items: center; justify-content: center;
    border-radius: 15px;
    overflow: hidden;
    border: 1px solid rgba(212, 175, 55, 0.2);
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
}
.hero-bg {
    position: absolute; inset: 0;
    background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.7)), 
                url('https://images.unsplash.com/photo-1560066984-138dadb4c035?ixlib=rb-1.2.1&auto=format&fit=crop&w=1920&q=80') center/cover;
    z-index: -1; animation: zoomIn 20s infinite alternate;
}
@keyframes zoomIn { from { transform: scale(1); } to { transform: scale(1.1); }}

.hero-content { text-align: center; z-index: 2; padding: 20px; width: 100%; }

.hero-title {
    font-family: var(--font-title);
    font-size: clamp(2.2rem, 8vw, 4.5rem);
    line-height: 1.1; margin-bottom: 15px; color: #fff;
    text-shadow: 0 4px 10px rgba(0,0,0,0.8);
}
.hero-subtitle {
    font-size: clamp(0.9rem, 3vw, 1.2rem);
    color: #ddd; letter-spacing: 3px; text-transform: uppercase; margin-bottom: 40px;
}
.luxoya-badge {
    display: inline-block; padding: 8px 20px;
    border: 1px solid var(--gold-main); color: var(--gold-main);
    font-size: 0.8rem; margin-bottom: 25px; background: rgba(0,0,0,0.6);
    backdrop-filter: blur(5px); letter-spacing: 1px;
    -webkit-backdrop-filter: blur(5px);
}

/* --- FEATURES GRID (Főoldali kiemelt kártyák) --- */
.features-grid {
    display: flex; justify-content: center; gap: 20px; margin-top: 50px; flex-wrap: wrap;
}
.feature-card {
    background: rgba(30,30,30,0.7); border: 1px solid rgba(255,255,255,0.05);
    padding: 25px 15px; text-align: center; border-radius: 10px;
    flex: 1; min-width: 250px; max-width: 350px;
    transition: all 0.3s ease;
    /* FRISSÍTÉS 1.0: Modularizált CSS az index_content.php-ből */
    /* Hozzáadva az inline stílusokból */
    color: var(--text-muted); /* Alapértelmezett szövegszín a kártyán belül, öröklődik */
    font-size: 0.9rem; /* Alapértelmezett betűméret a kártyán belül */
}
.feature-card:hover {
    transform: translateY(-10px) scale(1.03);
    border-color: var(--gold-main);
    background: rgba(40,40,40,0.9);
}

/* FRISSÍTÉS 1.0: Modularizált CSS az index_content.php-ből */
.feature-card h3 {
    color: var(--gold-main); /* A HTML-ből áthozott stílus */
    font-family: var(--font-title); /* A HTML-ből áthozott stílus */
    margin-bottom: 10px; /* A HTML-ből áthozott stílus */
}

/* FRISSÍTÉS 1.0: Modularizált CSS az index_content.php-ből */
.feature-card p {
    color: #aaa; /* A HTML-ből áthozott stílus */
    font-size: 0.9rem; /* A HTML-ből áthozott stílus */
}

/* Az SVG ikonok stílusa a feature kártyákban - Feather Icons kompatibilis */
.feature-card .feature-icon-svg {
    width: 48px; /* Nagyobb ikon méret */
    height: 48px;
    margin-bottom: 20px;
    /* FRISSÍTÉS 1.0: Stílusfinomítás a Feather Iconshoz */
    stroke: var(--gold-main); /* Az ikon színének beállítása */
    fill: none; /* A Feather Icons alapértelmezett beállítása, ha stroke-ot használ */
    stroke-width: 1.5; /* A Feather Icons alapértelmezett vonalvastagsága */
    display: block; /* Biztosítja, hogy az ikon elfoglalja a saját helyét */
    margin-left: auto; /* Középre igazítja az ikont */
    margin-right: auto; /* Középre igazítja az ikont */
}

/* --- ABOUT SECTION --- */
.about-split { display: flex; flex-wrap: wrap; gap: 40px; align-items: center; }
.about-img-box {
    flex: 1; min-width: 280px; height: 400px;
    border: 1px solid var(--gold-main); border-radius: 5px; overflow: hidden;
}
.about-img-box img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(30%); transition: 0.5s; }
.about-img-box:hover img { filter: grayscale(0%); transform: scale(1.05); }

.about-text { flex: 1; min-width: 280px; }
.signature { font-family: var(--font-script); font-size: 2.5rem; color: var(--gold-main); text-align: right; margin-top: 20px; }

/* --- GALLERY --- */
.gallery-wrap {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 15px;
}
.gallery-item {
    aspect-ratio: 3/4; position: relative; overflow: hidden; border-radius: 8px; border: 1px solid #333; cursor: pointer;
    transition: all 0.4s ease;
}
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: 0.5s; }
.gallery-item:hover { transform: scale(1.02); border-color: var(--gold-main); box-shadow: 0 10px 20px rgba(0,0,0,0.5); }
.gallery-item:hover img { transform: scale(1.1); filter: brightness(0.7); }
.gallery-caption {
    position: absolute; bottom: 0; left: 0; width: 100%; padding: 15px;
    background: linear-gradient(to top, rgba(0,0,0,0.9), transparent);
    color: #fff; transform: translateY(100%); transition: 0.3s;
}
.gallery-item:hover .gallery-caption { transform: translateY(0); }

/* --- SERVICES (TABLE STYLE) --- */
.service-row {
    display: flex; justify-content: space-between; align-items: flex-end;
    padding: 15px 0; border-bottom: 1px solid rgba(255,255,255,0.1);
    transition: 0.3s;
}
.service-row:hover { background: rgba(255,255,255,0.05); padding-left: 10px; border-color: var(--gold-main); }
.service-info { padding-right: 15px; }
.service-name { font-size: 1.1rem; color: #fff; font-weight: 500; }
.service-desc { font-size: 0.85rem; color: #888; margin-top: 4px; }
.service-price { font-family: var(--font-title); font-size: 1.2rem; color: var(--gold-main); white-space: nowrap; }

/* --- BOOKING & CALCULATOR --- */
.booking-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }

.calendar-grid {
    display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; margin-top: 20px;
}
.cal-day {
    aspect-ratio: 1; border: 1px solid #333; display: flex; align-items: center; justify-content: center;
    cursor: pointer; font-size: 0.9rem; transition: 0.2s;
}
.cal-day:hover, .cal-day.active { background: var(--gold-main); color: #000; font-weight: bold; border-color: var(--gold-main); transform: scale(1.1); }

.time-slots {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 10px; margin-top: 20px; display: none;
}
.time-btn {
    padding: 8px; background: #1a1a1a; border: 1px solid #444; color: #fff; cursor: pointer; border-radius: 4px; font-size: 0.85rem; text-align: center; transition: 0.3s;
}
.time-btn:hover, .time-btn.selected { border-color: var(--gold-main); color: var(--gold-main); transform: scale(1.05); }

.form-input {
    width: 100%; padding: 12px; margin-bottom: 15px; background: #111; 
    border: 1px solid #333; color: #fff; font-family: var(--font-body); border-radius: 4px;
}
.form-input:focus { border-color: var(--gold-main); outline: none; }

.calculator-panel {
    background: rgba(20,20,20,0.8); padding: 25px; border-radius: 12px; border: 1px solid #333;
}
.calc-item {
    display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px dashed #333;
    transition: 0.2s;
}
.calc-item:hover { color: #fff; }
.calc-total {
    margin-top: 20px; padding-top: 15px; border-top: 2px solid var(--gold-main);
    display: flex; justify-content: space-between; font-size: 1.3rem; color: var(--gold-main); font-family: var(--font-title);
}

/* --- CONTACT --- */
.contact-box {
    text-align: center; max-width: 600px; margin: 0 auto; padding: 30px;
}
/* Google Maps - Grey Filter */
.map-container {
    width: 100%; height: 350px; margin-top: 40px; border-radius: 10px; overflow: hidden; border: 1px solid #333;
}
.map-frame {
    width: 100%; height: 100%; border: 0;
    filter: grayscale(100%) invert(92%) contrast(83%); /* Szürke dark mód */
    -webkit-filter: grayscale(100%) invert(92%) contrast(83%);
}

/* =========================================
   LUXURY FOOTER STYLES (JAVÍTOTT & IGAZÍTOTT)
   ========================================= */

.luxury-footer {
    background: #050505;
    border-top: 3px solid var(--gold-main);
    color: #ccc;
    padding-top: 60px;
    margin-top: 80px;
    position: relative;
    overflow: hidden;
    background-image: radial-gradient(circle at 10% 20%, rgba(212, 175, 55, 0.03) 0%, transparent 20%);
}

.footer-container {
    max-width: var(--container-width);
    margin: 0 auto;
    /* PONTOS IGAZÍTÁS: Ugyanaz a padding mint a Headerben */
    padding: 0 var(--side-padding) 40px; 
    display: grid;
    /* Kicsit szélesebb első oszlop a Logonak, többi egyenlő */
    grid-template-columns: 1.2fr 1fr 1fr 1.2fr; 
    gap: 30px;
}

/* OSZLOPOK IGAZÍTÁSA (JAVÍTÁS: AZ ELSŐ OSZLOP IS KÖZÉPRE IGAZÍTVA) */
.brand-col {
    display: flex;
    flex-direction: column;
    align-items: center; /* Vízszintesen középre a tartalom */
    text-align: center; /* Szöveg középre */
}

/* 3D LOGO CONTAINER JAVÍTÁS */
.logo-3d-container {
    position: relative;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center; /* EZT ADTUK HOZZÁ A KÖZÉPRE ZÁRÁSHOZ */
    perspective: 600px;
    margin-bottom: 20px;
    width: 100%; /* Biztosítjuk, hogy kitöltse a rendelkezésre álló helyet */
}

.logo-3d-text {
    font-family: var(--font-script);
    font-size: 3rem;
    color: var(--gold-main);
    transform: rotateX(10deg) rotateY(15deg) rotateZ(-5deg);
    text-shadow: 1px 1px 0 #8a6d20, 2px 2px 0 #8a6d20, 4px 4px 5px rgba(0,0,0,0.8);
    transition: transform 0.5s ease;
    cursor: default;
    white-space: nowrap;
}

.logo-3d-container:hover .logo-3d-text {
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1.1);
}

.brand-slogan { font-size: 0.9rem; line-height: 1.6; color: #888; }
.sparkle {
    position: absolute; width: 4px; height: 4px; background: #fff; border-radius: 50%;
    box-shadow: 0 0 10px #fff, 0 0 20px var(--gold-main); opacity: 0; pointer-events: none;
    animation: sparkleAnim 1.5s linear forwards;
}
@keyframes sparkleAnim {
    0% { opacity: 0; transform: scale(0); }
    50% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(0); }
}

.footer-heading {
    font-family: var(--font-title);
    color: var(--gold-main);
    font-size: 1.1rem;
    margin-bottom: 25px;
    position: relative;
    display: inline-block;
    text-transform: uppercase;
}

.footer-heading::after {
    content: ''; position: absolute; bottom: -8px; left: 0;
    width: 30px; height: 2px; background: var(--gold-main);
}

.footer-links, .contact-list { list-style: none; padding: 0; }
.footer-links li, .contact-list li { margin-bottom: 12px; }

.footer-links a {
    text-decoration: none; color: #bbb; font-size: 0.95rem;
    display: flex; align-items: center; gap: 10px; transition: 0.3s;
}

.footer-links a svg, .contact-list svg {
    width: 16px; height: 16px; fill: var(--gold-main); opacity: 0.7; transition: 0.3s; flex-shrink: 0;
}

.footer-links a:hover { color: var(--gold-main); padding-left: 5px; }
.footer-links a:hover svg { opacity: 1; transform: scale(1.2); }

/* KAPCSOLAT IGAZÍTÁS JAVÍTÁSA */
.contact-list li {
    display: flex;
    align-items: flex-start; /* Fentre igazítjuk az ikont a szöveghez */
    gap: 12px;
    color: #bbb;
    font-size: 0.95rem;
    line-height: 1.4;
}

.contact-list a { color: #bbb; text-decoration: none; transition: 0.3s; }
.contact-list a:hover { color: var(--gold-main); }

/* SOCIAL ICONS (SVG Styling - Feather like) */
.footer-socials {
    margin-top: 25px;
    display: flex;
    gap: 15px;
}

.social-icon-btn {
    width: 40px;
    height: 40px;
    border: 1px solid #444;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gold-main);
    transition: 0.3s;
    background: transparent;
}

.social-icon-btn svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.social-icon-btn:hover {
    background: var(--gold-main);
    color: #000;
    border-color: var(--gold-main);
    transform: translateY(-3px);
}

/* FOOTER BOTTOM - IGAZÍTÁS JAVÍTÁSA */
.footer-bottom {
    background: #000;
    padding: 20px 0; /* Oldalsó paddingot a belső konténer kezeli */
    font-size: 0.8rem;
    color: #666;
    border-top: 1px solid #1a1a1a;
}

.footer-bottom-content {
    max-width: var(--container-width);
    margin: 0 auto;
    /* PONTOSAN Ugyanaz a padding mint a tartalomban */
    padding: 0 var(--side-padding); 
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-bottom a { color: #888; text-decoration: none; }
.footer-bottom a:hover { color: var(--gold-main); }

/* =========================================
   RESPONSIVE QUERIES
   ========================================= */

@media (max-width: 992px) {
    .footer-container { grid-template-columns: 1fr 1fr; }
    .footer-bottom-content { flex-direction: column; gap: 10px; text-align: center; }
    .booking-layout { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    /* Komment: User bar wrapper felső pozíciójának állítása mobil nézetben */
    .user-bar-wrapper { top: 70px; }
    
    /* Komment: User bar elrendezése mobil nézetben */
    .user-bar {
        flex-wrap: wrap; /* Komment: Engedélyezzük a sortörést */
        justify-content: center;
        padding: 10px;
        gap: 8px;
    }
    
    /* Komment: Információs sáv elrendezése mobil nézetben */
    .user-bar-info {
        width: 100%;
        justify-content: center;
        order: 1; /* Komment: Ez kerül az első sorba */
        margin-bottom: 5px; /* Komment: Kisebb rés az alsó sorhoz */
    }
    
    /* Komment: Vendég üzenet elrendezése mobil nézetben */
    .guest-message {
        width: 100%;
        justify-content: center;
        text-align: center;
    }
    
    /* Komment: Akciógombok elrendezése mobil nézetben */
    .user-actions {
        width: 100%;
        justify-content: center;
        order: 3; /* Komment: Ez kerül a harmadik sorba */
        padding-top: 8px;
        border-top: 1px solid rgba(212, 175, 55, 0.1);
    }
    
    /* Komment: Visszaszámláló elrendezése mobil nézetben */
    .next-appointment-countdown {
        order: 2; /* Komment: Ez kerül a második sorba */
        width: calc(100% - 20px); /* Komment: Kicsit keskenyebb, mint 100% a padding miatt */
        text-align: center;
        justify-content: center; /* Komment: Középre igazítja a tartalmat */
        margin-bottom: 5px; /* Komment: Kisebb rés az alsó sorhoz */
    }
    
    /* Komment: Az összes user-action-btn szövege el van rejtve mobil nézetben, kivéve az admin foglalások gombét */
    .user-action-btn .action-text { display: none; } 
    
    /* Komment: A "Foglalások" szövege látható marad mobil nézetben is */
    .user-action-btn-admin-bookings .action-text {
        display: inline; 
    }
    
    /* Komment: Az admin gombok mobil nézetben jobban kitöltik a helyet */
    .user-action-btn-admin-bookings,
    .user-actions .user-action-btn[href="/admin"] { /* Komment: Az Admin gomb is ide tartozik */
        width: auto; /* Komment: Hagyja, hogy a tartalom határozza meg */
        max-width: calc(100% - 20px); /* Komment: Max szélesség a padding miatt */
        justify-content: center; /* Komment: Középre igazítás */
        font-size: 0.8rem;
    }
    
    /* Komment: Kisebb padding a felhasználói művelet gombokon mobil nézetben */
    .user-action-btn { padding: 8px; }
    
    /* Komment: A 'body' elem 'padding-top' értéke dinamikusan lett számolva PHP-val a felhasználói sáv tartalmától függően. */
    /* Komment: Ez a dinamikus viselkedés statikus CSS fájlba nem helyezhető át PHP logikai beavatkozás nélkül. */
    /* Komment: Az alábbi érték egy általános mobil nézeti padding, ha a PHP alapú dinamikus beállítás nem áll rendelkezésre. */
    body { padding-top: 150px; } 

    .footer-container { grid-template-columns: 1fr 1fr; }
    .footer-bottom-content { flex-direction: column; gap: 10px; text-align: center; }
    .booking-layout { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
    /* Mobil Paddingok igazítása */
    .nav-island { flex-wrap: wrap; justify-content: space-between; padding: 10px 15px; }
    .page-container, .footer-container, .footer-bottom-content { padding-left: 15px; padding-right: 15px; }
    
    .section-title { font-size: 2rem; }
    .glass-panel { padding: 20px 15px; } 
    .service-row { flex-direction: column; align-items: flex-start; gap: 5px; }
    .service-price { margin-top: 5px; align-self: flex-end; }
    .about-img-box { height: 300px; }
    .hero-wrapper { min-height: 70vh; }
    
    /* Footer Mobil */
    .footer-container { grid-template-columns: 1fr; text-align: left; }
    .logo-3d-container { justify-content: center; }
    .brand-slogan { text-align: center; }
    
    .desktop-menu { display: none; }
    .hamburger { display: flex; }
}

/* Ultra small devices (Galaxy Fold, S5 - 320px to 380px) */
@media (max-width: 380px) {
    .nav-island { padding: 8px 15px; }
    .logo { font-size: 1.2rem; }
    .hero-title { font-size: 2.2rem; }
    .btn-gold { padding: 10px 20px; font-size: 0.8rem; }
    .glass-panel { padding: 15px 10px; }
    .calc-item label { font-size: 0.85rem; }
    .contact-box { padding: 15px; }
}