/* =========================================
   Βασικά Styles
========================================= */
body, html {
    margin: 0; padding: 0; height: 100%;
    font-family: 'Courier New', Courier, monospace;
    background-color: #050505; color: #e0e0e0; overflow: hidden;
}

/* =========================================
   Background 
========================================= */
.site-background {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-image: url('Gemini_Generated_Image_j6cg5yj6cg5yj6cg.jpg');
    background-size: cover; background-position: center; background-repeat: no-repeat;
    filter: grayscale(100%); opacity: 0.4; z-index: 0; pointer-events: none;
}

/* =========================================
   Top Menu
========================================= */
#top-menu {
    position: fixed; top: 0; left: 0; width: 100%;
    background: rgba(0, 0, 0, 0.95); border-bottom: 2px solid #333;
    z-index: 1000; padding: 15px 0; text-align: center;
}
#top-menu ul {
    list-style: none; margin: 0; padding: 0;
    display: flex; justify-content: center; gap: 30px; flex-wrap: wrap;
}
#top-menu ul li a {
    color: #fff; text-decoration: none; font-weight: bold; font-size: 16px;
    transition: color 0.3s; letter-spacing: 1px;
}
#top-menu ul li a:hover { color: #888; }

/* =========================================
   Radio Player (Top Corner)
========================================= */
#radio-player {
    position: fixed;
    top: 70px; /* Katw akrivws apo to menu */
    right: 20px;
    width: 300px;
    height: 100px;
    z-index: 1100;
    border-radius: 8px;
    box-shadow: 0 0 15px rgba(0,0,0,0.8);
    overflow: hidden;
}
#radio-player iframe {
    width: 100%;
    height: 100%;
    border: none;
}

/* Gia na min krivei tin othoni sta kinita, to pame katw */
@media (max-width: 768px) {
    #radio-player {
        top: auto;
        bottom: 20px;
        right: 50%;
        transform: translateX(50%);
        width: 90%;
    }
}

/* =========================================
   Popup Walk-ins
========================================= */
#walkin-popup {
    position: fixed; inset: 0; background: rgba(0,0,0,0.85);
    display: none; justify-content: center; align-items: center; z-index: 5000;
}
#walkin-popup.show { display: flex; }
.popup-content {
    background: #111; padding: 40px; border: 2px solid #444; border-radius: 10px;
    text-align: center; position: relative; max-width: 80%; width: 450px;
    box-shadow: 0 0 30px rgba(0,0,0,0.9);
}
.popup-content h2 { margin: 0; font-size: 24px; color: #fff; line-height: 1.5; }
#close-popup {
    position: absolute; top: 10px; right: 15px; font-size: 30px; color: #888; cursor: pointer;
}
#close-popup:hover { color: #fff; }

/* =========================================
   Scroll Snap
========================================= */
.snap-container {
    height: 100vh; overflow-y: scroll; scroll-snap-type: y mandatory; scroll-behavior: smooth;
    position: relative; z-index: 1;
}
.snap-section {
    height: 100vh; width: 100%; scroll-snap-align: start;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    position: relative; padding-top: 60px;
}

/* =========================================
   Tattoo Divider & Content Boxes
========================================= */
.tattoo-divider {
    font-size: 24px; color: #555; margin-bottom: 20px; letter-spacing: 10px;
    background: #000; padding: 5px 20px; border-radius: 20px;
}
.content-box {
    background: rgba(0, 0, 0, 0.85); padding: 40px; border: 1px solid #333;
    text-align: center; width: 80%; max-width: 800px; z-index: 5; box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
    max-height: 75vh; overflow-y: auto;
}

/* =========================================
   HERO SECTION - Λογότυπο & Film
========================================= */
#hero-section { background: radial-gradient(circle, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.95) 100%); }
.main-logo { width: 350px; max-width: 80%; border-radius: 50%; z-index: 10; box-shadow: 0 0 40px rgba(0, 0, 0, 0.9); }
.old-film-flicker { animation: flicker 0.15s infinite; }
.film-grain {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    opacity: 0.15; animation: noise 0.2s infinite; z-index: 2; pointer-events: none;
}
.film-scratch {
    position: absolute; top: 0; left: 30%; width: 2px; height: 100%;
    background: rgba(255, 255, 255, 0.3); z-index: 3; pointer-events: none; animation: scratch 3s infinite linear;
}

@keyframes flicker { 0% {opacity:0.95;} 50% {opacity:0.85;} 100% {opacity:0.95;} }
@keyframes noise { 0% {transform: translate(0,0);} 50% {transform: translate(-5px,5px);} 100% {transform: translate(0,0);} }
@keyframes scratch { 0% {opacity:0;} 10% {opacity:1;} 15% {opacity:0;} 100% {opacity:0;} }

/* =========================================
   Buttons & Forms
========================================= */
.book-now-btn {
    margin-top: 20px; padding: 10px 30px; background: #fff; color: #000; border: none; font-size: 18px; font-weight: bold; cursor: pointer; font-family: inherit; transition: 0.3s;
}
.book-now-btn:hover { background: #444; color: #fff; }

#booking-form { display: flex; flex-direction: column; gap: 15px; }
#booking-form input, #booking-form textarea { padding: 12px; background: #111; color: #fff; border: 1px solid #444; font-family: inherit; font-size: 16px; }
#booking-form button { padding: 15px; background: #fff; color: #000; font-weight: bold; border: none; cursor: pointer; font-size: 16px; transition: 0.3s; }
#booking-form button:hover { background: #aaa; }

.instagram-feed-placeholder { margin: 20px 0; padding: 20px; border: 1px dashed #555; min-height: 150px; }

/* =========================================
   Footer & Cookie Banner
========================================= */
.main-footer { text-align: center; }
.footer-logo { width: 100px; border-radius: 50%; margin-bottom: 20px; }
.footer-menu { list-style: none; padding: 0; display: flex; justify-content: center; gap: 15px; flex-wrap: wrap; margin-bottom: 20px; }
.footer-menu li a { color: #fff; text-decoration: none; font-size: 14px; }

.footer-contact-info { margin: 20px 0; font-size: 16px; }
.footer-contact-info p { margin: 5px 0; }
.footer-contact-info a { color: #fff; text-decoration: none; font-weight: bold; }
.footer-contact-info a:hover { text-decoration: underline; }

.copyright { font-size: 12px; color: #777; margin-top: 20px; }
.author-link { color: #888; text-decoration: none; transition: 0.3s; }
.author-link:hover { color: #fff; text-decoration: underline; }

.cookie-link { font-size: 12px; color: #aaa; text-decoration: underline; cursor: pointer; }

#cookie-banner {
    position: fixed; bottom: -100px; left: 0; width: 100%; background: #111; border-top: 1px solid #333;
    display: flex; justify-content: center; align-items: center; gap: 20px; padding: 15px; z-index: 2000;
    transition: bottom 0.5s ease; box-sizing: border-box;
}
#cookie-banner.show { bottom: 0; }
#cookie-banner p { margin: 0; font-size: 14px; }
#cookie-banner a { color: #fff; }
#accept-cookies { padding: 8px 20px; background: #fff; color: #000; font-weight: bold; border: none; cursor: pointer; font-family: inherit; }