/* =========================================
   ΠΕΡΙΠΕΤΕΙΕΣ ΣΤΗΝ ΟΔΟΝΤΟΥΠΟΛΗ - STYLE.CSS
   ========================================= */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;700;900&display=swap');

:root {
    --primary-color: #3dd5f3;   /* Vivid Light Blue - Καθαριότητα & Φρεσκάδα */
    --secondary-color: #FF85A1; /* Attractive Pink - Ζεστασιά & Φιλικότητα */
    --text-color: #2B2D42;      /* Σκούρο Μπλε/Γκρι για καθαρή ανάγνωση */
    --bg-color: #F8F9FA;        /* Πολύ απαλό γκρι/λευκό φόντο */
    --white: #ffffff;
}

/* --- 2. ΒΑΣΙΚΗ ΜΟΡΦΟΠΟΙΗΣΗ --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html{
    max-width: 100vw;
    overflow-x: hidden; /* Αυτό 'σκοτώνει' το οριζόντιο σκρολ! */
}

*, *::before, *::after {
    box-sizing: border-box;
}

body {
    font-family: 'Nunito', sans-serif;
    background-color: var(--bg-color);
    color: var(--text-color);
    line-height: 1.6;
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Για να μένει το footer πάντα στο κάτω μέρος */
    max-width: 100vw;
    overflow-x: hidden; /* Αυτό 'σκοτώνει' το οριζόντιο σκρολ! */
}

h1{
    max-width: 100%;
    overflow-wrap: break-word;
}

h2, h3, h4, h5, h6 {
    max-width: 100%;
    overflow-wrap: break-word;
    text-shadow: 
        2px 2px 0 #ffffff, 
        4px 3px 0 rgba(0, 180, 216, 0.4);
    transition: all 0.3s ease;
}

h2:hover, h3:hover, h4:hover, h5:hover {
    text-shadow: 
        2px 2px 0 #ffffff, 
        6px 6px 0 rgba(255, 105, 180, 0.5);
    transform: scale(1.05);
}

p, a, li, label, span {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.08);
}

header {
    background: url('../images/confetti.jpeg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    
    position: relative; /* <--- Η ΝΕΑ ΓΡΑΜΜΗ ΠΟΥ ΠΡΟΣΘΕΣΑΜΕ! */
    
    padding: 2rem 5%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    border-bottom: 6px solid var(--secondary-color, #FFD166);
    box-shadow: 0px 6px 15px rgba(0, 0, 0, 0.2);
}

/* Στοίχιση για τους ήρωες και το λογότυπο */
.logo-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 100vw;
    padding: 10px;
    gap: 10px;
}

.header-character {
    width: 70px; /* Σταθερό μέγεθος για τους χαρακτήρες */
    flex-shrink: 0; /* Δεν τα αφήνουμε να παραμορφωθούν */
    height: auto;
}
/* Το Λογότυπο (Καθαρό και Απλό) */
.logo h1 {
    margin: 0;
    font-size: 2.2rem;
    color: var(--primary-color, #FF85A1); /* Το βασικό σου χρώμα */
    font-weight: 900;
    letter-spacing: 1px;
    text-align: center;
    overflow-wrap: break-word; /* ΣΠΑΕΙ τις μεγάλες λέξεις για να μην βγαίνουν εκτός */
    
    /* Μια απλή, καθαρή λευκή σκιά για να διαβάζεται τέλεια πάνω από το confetti */
    text-shadow: 2px 2px 4px #ffffff, 4px 4px 3px rgba(0,0,0,0.05), 2px 2px 5px #FF85A1;
    padding: 0;
}

nav {
    /* Αφαιρέσαμε το φόντο και το περίγραμμα από το γενικό κουτί */
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 10px 0;
}

nav ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 18px; /* Λίγος παραπάνω αέρας ανάμεσα στα "αυτοκόλλητα" */
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Η μαγεία τώρα γίνεται στο κάθε Link ξεχωριστά! */
nav ul li a {
    display: inline-block; /* Απαραίτητο για να λειτουργήσουν σωστά οι σκιές και τα margins */
    text-decoration: none;
    color: #222;
    font-weight: 800;
    font-size: 1.15rem;
    padding: 10px 25px;
    
    /* Neobrutalism Styling στο καθένα */
    background-color: #ffffff; 
    border: 3px solid #222; 
    border-radius: 40px; 
    box-shadow: 4px 4px 0px var(--primary-color, #FF85A1); 
    
    transition: all 0.2s ease;
}

/* Το εφέ όταν βάζεις το ποντίκι πάνω στο κάθε κουμπί */
nav ul li a:hover {
    background-color: var(--secondary-color, #FFD166); /* Γεμίζει με το κίτρινο/δευτερεύον χρώμα */
    transform: translate(-3px, -3px); /* Πετάγεται πιο ψηλά και αριστερά */
    box-shadow: 7px 7px 0px var(--primary-color, #FF85A1); /* Η σκιά μεγαλώνει */
}

@media (min-width: 768px) {
    .logo h1 {
        font-size: 3.4rem;
    }
    .header-character {
        width: 100px;
    }
}

/* Responsive: Προσαρμογή στα κινητά */
@media (max-width: 768px) {
    nav ul {
        gap: 12px;
    }
    nav ul li a {
        font-size: 1rem;
        padding: 8px 16px;
        /* Λίγο μικρότερη σκιά στις μικρές οθόνες */
        box-shadow: 3px 3px 0px var(--primary-color, #FF85A1); 
    }
    nav ul li a:hover {
        transform: translate(-2px, -2px);
        box-shadow: 5px 5px 0px var(--primary-color, #FF85A1);
    }
}

/* =========================================
   Floating Cart Button (Μετατροπή για Scroll)
   ========================================= */
.floating-cart-btn {
    position: fixed;
    top: 30px;
    right: 30px;
    background-color: var(--white, #fff);
    border: 3px solid var(--text-color, #000);
    box-shadow: 4px 4px 0px var(--primary-color, #00B4D8);
    border-radius: 50%;
    width: 65px;
    height: 65px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2rem;
    text-decoration: none;
    z-index: 1000;
    
    /* --- ΟΙ ΑΛΛΑΓΕΣ ΓΙΑ ΤΟ ΚΡΥΨΙΜΟ --- */
    opacity: 0; /* Εντελώς αόρατο */
    pointer-events: none; /* Δεν μπορεί να το πατήσει κάποιος κατά λάθος όσο δεν φαίνεται */
    transform: translateY(-20px); /* Το ανεβάζουμε λίγο πιο πάνω για να κάνει 'slide down' */
    transition: opacity 0.3s ease, transform 0.3s ease, box-shadow 0.2s ease;
}

/* Αυτή η κλάση θα μπαίνει μέσω JavaScript όταν σκρολάρει ο χρήστης! */
.floating-cart-btn.show-cart {
    opacity: 1; /* Γίνεται ορατό */
    pointer-events: auto; /* Μπορεί να πατηθεί κανονικά */
    transform: translateY(0); /* Επανέρχεται στη σωστή του θέση */
}

/* (Τα υπόλοιπα, όπως το hover και το cart-badge τα αφήνεις όπως ήταν!) */

/* Εφέ όταν περνάει το ποντίκι από πάνω (Hover) */
.floating-cart-btn:hover {
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0px var(--primary-color, #00B4D8);
}

/* Το σηματάκι με τον αριθμό των προϊόντων */
.cart-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background-color: #b9327c; /* Έντονο κόκκινο για να τραβάει το μάτι */
    color: white;
    font-size: 1rem;
    font-weight: bold;
    width: 28px;
    height: 28px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    border: 2px solid #000;
}

/* Προσαρμογή για Κινητά Τηλέφωνα (Να μην πιάνει πολύ χώρο) */
@media (max-width: 768px) {
    .floating-cart-btn {
        top: 15px;
        right: 15px;
        width: 50px;
        height: 50px;
        font-size: 1.5rem;
    }
    .cart-badge {
        width: 22px;
        height: 22px;
        font-size: 0.8rem;
    }
}
/* --- 5. ΚΟΥΜΠΙΑ (COMIC STYLE) --- */
.btn {
    background-color: var(--secondary-color);
    color: var(--text-color);
    padding: 10px 20px;
    border: 2px solid var(--text-color);
    border-radius: 25px;
    font-weight: 800;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    box-shadow: 4px 4px 0px var(--text-color);
    transform: translateY(0);
    transition: all 0.2s ease;
}

.btn:hover {
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0px var(--text-color);
}

/* --- 6. HERO SECTION (Gradient & Bubbles) --- */
.hero {
    position: relative;
    overflow: hidden; /* Κρατάει τις φουσκάλες μέσα */
    text-align: center;
    padding: 6rem 2rem;
    background: linear-gradient(135deg, #fafac4 0%, #C3B1E1 100%);
    color: var(--white);
    border-bottom: 5px solid rgba(0,0,0,0.1);
    background-size: 200% 200%;
    animation: gradientShift 8s ease infinite;
}

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

/* Φέρνουμε τα κείμενα μπροστά */
.hero h2, .hero p, .hero .btn {
    position: relative;
    z-index: 10;
}

.hero h2 {
    font-size: 3.5rem; /* Το μεγαλώνουμε ελαφρώς για να γεμίσει το χώρο */
    color: var(--white);
    margin-bottom: 1.5rem;
    
    -webkit-text-stroke: 2px var(--text-color);
    
    /* Διπλή Comic σκιά: Το ροζ μας χρώμα και μια σκούρα βάση */
    text-shadow: 
        1px 1px 0px var(--secondary-color),
        1px 1px 0px var(--primary-color),
        1px 1px 0px #F6F6F6;
    /* Animation "Αιώρησης" για να ταιριάζει με τις φουσκάλες */
    animation: floatText 4s ease-in-out infinite;
    display: inline-block; /* Απαραίτητο για το transform του animation */
}

/* Keyframes για να κινείται απαλά πάνω-κάτω και να γέρνει ελάχιστα */
@keyframes floatText {
    0%, 100% { 
        transform: translateY(0) rotate(-1deg); 
    }
    50% { 
        transform: translateY(-1px) rotate(1deg); 
    }
}

.hero p {
    font-size: 1.5rem;
    font-weight: 700;
    max-width: 700px;
    margin: 0 auto 2rem auto;
     color: var(--white); /* Λευκό εσωτερικό */
    /* Μαύρο/Σκούρο περίγραμμα γύρω από κάθε γράμμα */
    -webkit-text-stroke: 1px var(--text-color);
    /* Τριπλή 3D σκιά (Γαλάζιο -> Ροζ -> Σκούρο) */
    text-shadow: 
        2px 2px 0px var(--primary-color),
        3px 3px 0px var(--secondary-color),
        1px 1px 0px var(--text-color);
}

/* Εφέ Φουσκάλες */
.bubbles {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 0;
    pointer-events: none;
}

.bubble {
    position: absolute;
    bottom: -100px;
    background: rgba(255, 255, 255, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.6);
    animation: floatUp 10s infinite ease-in;
}

.bubble:nth-child(1) { width: 40px; height: 40px; left: 10%; animation-duration: 8s; }
.bubble:nth-child(2) { width: 25px; height: 25px; left: 20%; animation-duration: 5s; animation-delay: 1s; }
.bubble:nth-child(3) { width: 50px; height: 50px; left: 35%; animation-duration: 10s; animation-delay: 2s; }
.bubble:nth-child(4) { width: 30px; height: 30px; left: 50%; animation-duration: 7s; animation-delay: 0.5s; }
.bubble:nth-child(5) { width: 65px; height: 65px; left: 65%; animation-duration: 11s; animation-delay: 3s; }
.bubble:nth-child(6) { width: 20px; height: 20px; left: 80%; animation-duration: 6s; animation-delay: 1.5s; }
.bubble:nth-child(7) { width: 45px; height: 45px; left: 90%; animation-duration: 9s; animation-delay: 0.2s; }

@keyframes floatUp {
    0% { transform: translateY(0) scale(1) translateX(0); opacity: 0; }
    10% { opacity: 1; }
    50% { transform: translateY(-200px) scale(1.1) translateX(20px); }
    100% { transform: translateY(-800px) scale(1.5) translateX(-20px); opacity: 0; }
}

/* --- 7. GRID & ΚΑΡΤΕΣ --- */
.container { padding: 2rem 5%; flex: 1; }

/* Το Πλέγμα των Προϊόντων */
/* Το Πλέγμα των Προϊόντων - ΑΥΣΤΗΡΑ 2 ΣΤΗΛΕΣ */
.grid-2x2 {
    display: grid;
    /* Η μαγεία: Προσαρμόζει αυτόματα τις στήλες ανάλογα με την οθόνη! */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px; /* Απόσταση 30px ανάμεσα σε όλα τα βιβλία */
    width: 100%;
    max-width: 1200px; /* Δεν το αφήνει να 'ξεχειλώσει' σε γιγάντιες οθόνες */
    margin: 0 auto; /* Κεντράρισμα όλου του grid */
    align-items: stretch; /* Αναγκάζει όλες τις κάρτες να τεντώσουν στο ίδιο ύψος! */
}

/* Για Tablets και μικρά Laptops (Οθόνες μικρότερες από 992px) */
@media (max-width: 992px) {
    .card img {
        height: 380px; /* Μικραίνουμε ελαφρώς το ύψος του βιβλίου */
    }
}
/* Για Κινητά Τηλέφωνα (Οθόνες μικρότερες από 768px) */
@media (max-width: 768px) {
    .grid-2x2 {
        gap: 15px; /* Λιγότερο κενό ανάμεσα στα βιβλία για εξοικονόμηση χώρου */
        padding: 10px;
    }
    .card {
        padding: 15px; /* Μικρότερο περιθώριο μέσα στην κάρτα */
    }
    .card img {
        height: 340px; /* Αρκετά μικρότερο ύψος για να φαίνεται και το κουμπί στην οθόνη του κινητού */
        margin-bottom: 10px;
    }
    .card h3 {
        font-size: 1.25rem; /* Λίγο μικρότερα γράμματα στον τίτλο */
    }
}

.card {
    /* --- ΤΑ ΔΙΚΑ ΣΟΥ ΥΠΕΡΟΧΑ STYLES --- */
    background-color: var(--white, #ffffff);
    border: 4px solid var(--text-color, #000000);
    border-radius: 20px;
    padding: 20px;
    box-shadow: 8px 8px 0px var(--primary-color, #00B4D8);
    
    display: flex;
    flex-direction: column;
    align-items: center;    /* Κεντράρει τα στοιχεία οριζόντια */
    text-align: center;     /* Κεντράρει το κείμενο */
    justify-content: space-between;
    height: 100%;
    
    /* Animation Εισόδου */
    animation: fadeInScale 0.5s ease-out forwards;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), 
                box-shadow 0.3s ease;
    cursor: pointer;

    /* --- ΟΙ ΝΕΕΣ ΠΡΟΣΘΗΚΕΣ ΓΙΑ ΤΕΛΕΙΑ ΕΜΦΑΝΙΣΗ ΣΤΟ ΚΙΝΗΤΟ --- */
    width: 100%;              /* Ζητάμε να πιάσει όλο το πλάτος... */
    max-width: 350px;         /* ...αλλά βάζουμε 'ταβάνι' τα 350px για να μην γίνει τεράστιο! */
    margin: 0 auto 30px auto; /* Το 'auto' δεξιά-αριστερά το κεντράρει. Το 30px δίνει ωραία απόσταση από το επόμενο βιβλίο */
    box-sizing: border-box;   /* Ο Χρυσός Κανόνας: Εμποδίζει το padding (20px) να σπρώξει την κάρτα έξω από την οθόνη! */
}

/* Animation όταν το ποντίκι περνάει από πάνω (Hover) */
.card:hover {
    transform: translateY(-10px) scale(1.02); /* Σηκώνεται και μεγαλώνει ελαφρώς */
    box-shadow: 12px 12px 0px var(--secondary-color, #FF85A1); /* Αλλάζει χρώμα η σκιά */
}

/* Ρυθμίσεις για τα στοιχεία μέσα στην κάρτα */
.card img {

    width: 100%;
    height: auto; /* Σβήνουμε το σταθερό 480px για να μην αφήνει κενά! */
    
    /* Η μαγική αναλογία (πλάτος / ύψος). Το 4/5 δίνει ένα τέλειο "κάθετο" σχήμα */
    aspect-ratio: 4 / 5; 
    
    object-fit: cover; /* Επιστρέφουμε στο cover για να γεμίσει το κουτί 4/5 τέλεια */
    object-position: center;
    border-radius: 12px;
    border: 2px solid var(--text-color, #000);
    margin-bottom: 15px;
}

.card h3 {
    font-size: 1.4rem;
    margin-bottom: 8px;
    color: var(--text-color);
}

.card p {
    font-size: 1rem;
    color: #555;
    margin-bottom: 15px;
    flex-grow: 1;
}

.card h4 {
    font-size: 1.5rem;
    margin: 10px 0 !important;
}

/* Το κουμπί να πιάνει όλο το πλάτος */
.card .btn {
    width: 100%;
    padding: 12px;
    font-weight: bold;
}

/* Το Keyframe για το animation εμφάνισης */
@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}
.card h4 {
    margin-top: auto !important; 
    margin-bottom: 15px;
}

/* --- 8. ΦΙΛΤΡΑ ΗΛΙΚΙΩΝ --- */
.filter-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 40px;
}

.filter-btn {
    background-color: var(--white);
    color: var(--primary-color);
    border-color: var(--primary-color);
    box-shadow: 4px 4px 0px var(--primary-color);
}

.filter-btn:hover { background-color: #E6F7FA; }

.filter-btn.active {
    background-color: var(--primary-color);
    color: var(--white);
    box-shadow: 2px 2px 0px var(--text-color);
    transform: translate(2px, 2px);
}

/* --- 9. ECO-FRIENDLY BANNER --- */
.eco-card {
    background: linear-gradient(135deg, #cbfdb7 10%, #a8e794 100%); 
    border: 3px solid #2d6a4f;
    box-shadow: 8px 8px 0px #A6E895;
    border-radius: 20px;
    padding: 30px;
    display: flex;
    align-items: center;
    gap: 25px;
    margin: 3rem auto;
    max-width: 900px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.eco-card:hover {
    transform: translateY(-5px);
    box-shadow: 12px 12px 0px #2d6a4f;
}

.eco-icon {
    font-size: 4.5rem;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    width: 110px; height: 110px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    border: 2px dashed #2d6a4f;
}

.eco-content h3 { color: #1b4332; font-size: 1.7rem; margin-bottom: 10px; }
.eco-content p { color: #1b4332; font-size: 1.15rem; font-weight: 600; line-height: 1.6; }
.eco-content strong {
    color: var(--primary-color);
    background: rgba(255, 255, 255, 0.8);
    padding: 2px 6px;
    border-radius: 5px;
}

@media (max-width: 768px) {
    .eco-card { flex-direction: column; text-align: center; padding: 20px; }
}

/* --- 10. ΣΕΛΙΔΑ "ΣΧΕΤΙΚΑ ΜΕ ΕΜΑΣ" --- */
.about-section { text-align: center; max-width: 850px; margin: 0 auto; }
.about-section ul {
    list-style: none; padding: 0; display: inline-block; text-align: left;
    background: rgba(255, 255, 255, 0.5); padding: 20px 40px;
    border-radius: 15px; border: 2px dashed var(--primary-color);
    box-shadow: 5px 5px 0px var(--primary-color);
}
.about-section ul li { margin-bottom: 10px; font-weight: 700; }
.about-section ul li::before { content: "✨ "; }

/* --- 11. SOCIAL MEDIA VERTICAL & FOOTER --- */
.social-section {
    text-align: center; padding: 3rem 1rem; background-color: #fff;
    border-top: 3px solid var(--primary-color);
}

.social-links-vertical { display: flex; flex-direction: column; align-items: center; gap: 20px; margin-top: 1rem; }
.social-links-vertical .social-btn {
    min-width: 320px;
    text-align: center; 
    text-decoration: none; 
    font-weight: 900; /* Το κάναμε ένα κλικ πιο έντονο (από 800 σε 900) */
    padding: 20px 30px; /* Αυξήσαμε τον εσωτερικό "αέρα" (πάνω/κάτω και αριστερά/δεξιά) */
    border-radius: 50px; 
    border: 3px solid var(--text-color);
    transition: all 0.2s ease; 
    font-size: 1.4rem; /* Μεγαλώσαμε τα γράμματα από 1.1rem σε 1.4rem */
    letter-spacing: 1px; /* Προσθέσαμε λίγο κενό ανάμεσα στα γράμματα για να αναπνέουν */
}

.instagram { background-color: var(--secondary-color); color: var(--text-color); box-shadow: 6px 6px 1px #8063d8; text-shadow: 1px 1px 0px #8063d8; }
.tiktok { background-color: #272626; color: white; box-shadow: 6px 6px 1px var(--primary-color); text-shadow: 1px 1px 0px var(--primary-color); }

.social-links-vertical .social-btn:hover {
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0px 8px 0px var(--text-color);
}

/* =========================================
   Social Media Buttons - Mobile View
   ========================================= */
@media (max-width: 768px) {
    .social-links-vertical .social-btn {
        min-width: 240px; /* Το κατεβάζουμε από τα 320px στα 250px */
        padding: 12px 20px; /* Μικραίνουμε το πάνω-κάτω ύψος του κουμπιού */
        font-size: 1.1rem; /* Κατεβάζουμε τα γράμματα σε πιο νορμάλ mobile μέγεθος */
        letter-spacing: 0.5px; /* Μειώνουμε λίγο τον αέρα στα γράμματα */
    }

    .social-links-vertical {
        gap: 15px; /* Φέρνουμε τα δύο κουμπιά (Insta/TikTok) λίγο πιο κοντά το ένα στο άλλο */
    }
}

/* =========================================
   ΝΕΟ FOOTER (ΣΕ ΣΤΗΛΕΣ)
   ========================================= */

footer {
    background-color: var(--text-color); /* Σκούρο μπλε/γκρι φόντο */
    color: var(--white);
    padding: 4rem 5% 1.5rem;
    margin-top: auto; /* Για να μένει πάντα στο κάτω μέρος της σελίδας */
    border-top: 6px solid var(--secondary-color); /* Το ροζ τελείωμα */
}

/* Το Grid που φτιάχνει τις στήλες αυτόματα */
.footer-container {
    display: grid;
    /* Αυτή η μαγική γραμμή βάζει τις στήλες δίπλα-δίπλα, και στα κινητά τις βάζει κάθετα! */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 40px;
    max-width: 1100px;
    margin: 0 auto 3rem auto;
    text-align: left;
}

/* Τίτλοι στηλών */
.footer-col h4 {
    color: var(--secondary-color); /* Το ροζ μας χρώμα */
    font-size: 1.5rem;
    margin-bottom: 20px;
    text-shadow: 2px 2px 0px rgba(0,0,0,0.5);
    -webkit-text-stroke: 1px rgba(0,0,0,0.2);
}

.footer-col p {
    margin-bottom: 12px;
    font-size: 1.1rem;
    font-weight: 700;
}

/* Λίστες πλοήγησης */
.footer-col ul {
    list-style: none;
    padding: 0;
}

.footer-col ul li {
    margin-bottom: 15px;
}

/* Στυλ για όλα τα Links μέσα στο Footer */
.footer-col a {
    color: var(--white);
    text-decoration: none;
    font-weight: 800;
    transition: all 0.3s ease;
    display: inline-block; /* Απαραίτητο για να λειτουργήσει το transform */
}

/* Hover Effect: Γίνονται Γαλάζια και "γλιστράνε" δεξιά */
.footer-col a:hover {
    color: var(--primary-color);
    transform: translateX(8px); 
    text-shadow: 1px 1px 0px rgba(0,0,0,0.5);
}

/* Ειδικό Στυλ για το Κουμπί Επικοινωνίας στο Footer */
.contact-footer-btn {
    background-color: var(--primary-color);
    color: var(--white);
    border: 3px solid var(--white);
    box-shadow: 5px 5px 0px var(--secondary-color);
    font-size: 1.1rem;
    padding: 12px 20px;
    width: 100%; /* Το κουμπί πιάνει όλο το πλάτος της στήλης του */
}

.contact-footer-btn:hover {
    background-color: var(--white);
    color: var(--primary-color);
    border-color: var(--text-color);
    box-shadow: 7px 7px 0px var(--secondary-color);
    transform: translate(-2px, -2px); /* Ακυρώνει το translate δεξιά των απλών links */
}

/* Το διαχωριστικό στο κάτω μέρος (Copyright) */
.footer-bottom {
    text-align: center;
    border-top: 1px dashed rgba(255, 255, 255, 0.2);
    padding-top: 20px;
    font-size: 0.95rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.7);
}

/* --- 12. ΚΟΥΜΠΙ ΕΠΙΣΤΡΟΦΗΣ (ΔΟΝΤΑΚΙ) --- */
.back-to-top {
    position: fixed; bottom: 30px; right: 30px; background-color: var(--white);
    font-size: 2rem; width: 60px; height: 60px; border-radius: 50%;
    border: 3px solid var(--primary-color); box-shadow: 4px 4px 0px var(--secondary-color);
    cursor: pointer; display: flex; justify-content: center; align-items: center;
    z-index: 1000; opacity: 0; visibility: hidden;
    transform: translateY(20px); transition: all 0.3s ease;
}

.back-to-top.show { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { transform: translateY(-5px); box-shadow: 6px 6px 0px var(--secondary-color); }
.back-to-top:active { transform: translateY(2px); box-shadow: 2px 2px 0px var(--secondary-color); }

/* --- Διαχωριστικό Φίλτρων --- */
.separator-v {
    display: flex;
    align-items: center;
    color: var(--primary-color);
    font-size: 1.5rem;
    font-weight: 900;
    margin: 0 5px;
    opacity: 0.5;
}

@media (max-width: 768px) {
    .separator-v { display: none; } /* Το κρύβουμε στα κινητά για να χωράνε τα κουμπιά */
}

/* --- Ειδικό Στυλ για Κάρτες "Προϊόντων" (Όχι Βιβλίων) --- */
.card.general-product {
    border-color: var(--secondary-color); /* Ροζ περίγραμμα */
    box-shadow: 8px 8px 0px var(--primary-color); /* Μπλε σκιά για τέλεια αντίθεση */
}

.card.general-product:hover {
    box-shadow: 12px 12px 0px var(--primary-color); /* Μεγαλώνει η μπλε σκιά στο hover */
}

/* --- Newsletter Section Styling --- */

.newsletter-section {
    padding: 4rem 1rem;
    background-color: var(--bg-color);
    display: flex;
    justify-content: center;
}

.newsletter-card {
    background-color: var(--white);
    border: 4px solid var(--primary-color);
    box-shadow: 10px 10px 0px var(--secondary-color);
    border-radius: 25px;
    padding: 40px;
    max-width: 800px;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 30px;
    position: relative;
    transition: transform 0.3s ease;
}

.newsletter-card:hover {
    transform: translateY(-5px);
}

.newsletter-icon {
    font-size: 4rem;
    background: #E6F7FA;
    width: 100px;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 20px;
    border: 3px solid var(--primary-color);
    box-shadow: 6px 6px 0px var(--secondary-color);
    flex-shrink: 0;
}

.newsletter-content {
    flex-grow: 1;
}

.newsletter-content h3 {
    font-size: 1.8rem;
    color: var(--text-color);
    margin-bottom: 10px;
}

.newsletter-content p {
    font-size: 1.1rem;
    margin-bottom: 20px;
    color: #555;
}

/* Φόρμα Εγγραφής */
.newsletter-form {
    display: flex;
    gap: 15px;
}

.newsletter-form input {
    flex-grow: 1;
    padding: 15px 20px;
    border: 3px solid var(--text-color);
    border-radius: 15px;
    font-size: 1rem;
    font-weight: 700;
    box-shadow: 4px 4px 0px rgba(0,0,0,0.1);
    outline: none;
    transition: all 0.2s ease;
}

.newsletter-form input:focus {
    border-color: var(--primary-color);
    box-shadow: 4px 4px 0px var(--primary-color);
    transform: translateY(-2px);
}

.newsletter-btn {
    white-space: nowrap;
    min-width: 150px;
}

/* Επιτυχία εγγραφής */
.success-msg {
    margin-top: 15px;
    color: #2d6a4f;
    font-weight: 800;
    animation: fadeIn 0.5s ease-in;
}

/* Responsive για κινητά */
@media (max-width: 768px) {
    .newsletter-card {
        flex-direction: column;
        text-align: center;
        padding: 30px 20px;
    }
    .newsletter-form {
        flex-direction: column;
    }
    .newsletter-icon {
        margin: 0 auto;
    }
}

/* --- Shipping Banner (Truck Button Style) --- */

/* --- Compact Shipping Banner --- */

.shipping-banner {
    display: flex;
    align-items: center;
    background-color: var(--white);
    border: 3px solid var(--primary-color); /* Ελαφρώς πιο λεπτό περίγραμμα */
    box-shadow: 6px 6px 0px var(--secondary-color); /* Πιο διακριτική σκιά */
    border-radius: 15px;
    padding: 15px 25px; /* Μειωμένο padding */
    margin: 2rem auto; /* Κεντράρισμα */
    
    /* ΕΔΩ ΕΙΝΑΙ Η ΑΛΛΑΓΗ: Πιο μικρό πλάτος */
    max-width: 550px; 
    
    gap: 15px; /* Μειωμένη απόσταση μεταξύ στοιχείων */
    transition: transform 0.3s ease;
}

.shipping-banner:hover {
    transform: scale(1.03); /* Μικρή μεγέθυνση στο hover */
}

/* Πιο μικρό "Κουμπί" με το Φορτηγάκι */
.truck-btn {
    background-color: var(--secondary-color);
    width: 60px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 12px;
    border: 2px solid var(--text-color);
    box-shadow: 3px 3px 0px var(--text-color);
    flex-shrink: 0;
}

.truck-emoji {
    font-size: 2.4rem; /* Πιο μικρό emoji */
}

/* Μικρότερο κείμενο για να ταιριάζει στο compact πλαίσιο */
.shipping-text h3 {
    font-size: 1.2rem;
    color: var(--text-color);
    margin: 0;
    line-height: 1.2;
}

.shipping-text h3 span {
    color: var(--primary-color);
    display: inline; /* Πλέον στην ίδια γραμμή ή ελαφρώς κάτω */
    margin-left: 5px;
}

.shipping-text p {
    margin-top: 3px;
    font-weight: 700;
    color: #666;
    font-size: 1.00rem;
}

/* =========================================
   Συμπίεση Shipping Banner για Κινητά
   ========================================= */
@media (max-width: 768px) {
    .shipping-banner {
        width: auto;
        max-width: 80%; /* Για να μην ακουμπάει στις άκρες */
        right: 50%; /* Το κεντράρουμε */
        transform: translateX(50%); /* Το κεντράρουμε (μαζί με το right) */
        bottom: 90px; /* Το κρατάμε πάνω από το back to top button */
        padding: 5px 12px; /* Δραματική μείωση του κενού χώρου μέσα στο banner */
        border-width: 2px; /* Πιο λεπτό περίγραμμα */
        border-radius: 25px;
    }

    .banner-content {
        display: flex;
        align-items: center;
        gap: 8px; /* Φέρνουμε το κείμενο πιο κοντά στο φορτηγάκι */
    }

    .truck-emoji {
        font-size: 1.4rem; /* Μικραίνουμε το εικονίδιο */
    }

    .shipping-text h3 {
        font-size: 0.8rem; /* Πολύ πιο διακριτικός τίτλος */
        margin: 0;
    }

    /* Σκοτώνουμε την αλλαγή γραμμής (<br>) στα κινητά! */
    .shipping-text h3 br {
        display: none;
    }
    
    .shipping-text p {
        font-size: 0.75rem; /* Μικροσκοπική η δεύτερη γραμμή */
        margin: 2px 0 0 0;
        /* PRO TIP: Αν θέλεις να το κάνεις ΑΚΟΜΑ πιο λεπτό, 
           σβήσε τα // από την από κάτω γραμμή για να κρύψεις 
           εντελώς το κείμενο της παράδοσης στα κινητά! */
        /* display: none; */ 
    }
}
/* =========================================
   ΕΦΕ ΚΟΥΜΠΙΟΥ: BOUNCE, RIPPLE & FEEDBACK
   ========================================= */

.btn {
    position: relative;
    overflow: hidden; /* Κρύβει το ripple όταν βγαίνει από τα όρια του κουμπιού */
}

/* 1. RIPPLE EFFECT (Το κύμα) */
.ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.6);
    transform: scale(0);
    animation: ripple-effect 0.6s linear forwards;
    pointer-events: none; /* Για να μην εμποδίζει μελλοντικά κλικ */
}

@keyframes ripple-effect {
    to {
        transform: scale(4);
        opacity: 0;
    }
}
/* 2. BOUNCE EFFECT (Η αναπήδηση) */
.bounce-anim {
    animation: bounce-btn 0.4s ease;
}

@keyframes bounce-btn {
    0%   { transform: scale(1); }
    50%  { transform: scale(0.9) translateY(4px); box-shadow: 0px 0px 0px var(--text-color); }
    100% { transform: scale(1); }
}

/* 3. CART FEEDBACK (+1 Δοντάκι που πετάει ψηλά) */
.cart-feedback {
    position: absolute;
    color: var(--primary-color);
    font-weight: 900;
    font-size: 1.8rem;
    text-shadow: 2px 2px 0px var(--white), -1px -1px 0px var(--text-color);
    pointer-events: none;
    z-index: 100;
    animation: floatCart 0.8s forwards ease-out;
}

@keyframes floatCart {
    0%   { opacity: 1; transform: translate(-50%, 0) scale(1) rotate(-10deg); }
    100% { opacity: 0; transform: translate(-50%, -60px) scale(1.5) rotate(10deg); }
}
.products-hero-container {
    text-align: center;
    margin-bottom: 30px;
    animation: simpleFadeIn 1.2s ease-out; /* Χρήση του fade in που φτιάξαμε */
}

.products-main-img {
    max-width: 300px; /* Ρύθμιση μεγέθους */
    width: 80%;
    height: auto;
    border-radius: 20px;
    border: 4px solid var(--primary-color);
    box-shadow: 10px 10px 0px var(--secondary-color);
    transition: transform 0.3s ease;
}

.products-main-img:hover {
    transform: scale(1.05) rotate(-2deg);
}

/* Προσαρμογή για κινητά */
@media (max-width: 600px) {
    .products-main-img {
        max-width: 250px;
    }
}
.page-hero-container {
    text-align: center;
    margin-bottom: 35px;
    animation: simpleFadeIn 1.2s ease-out; /* Το fade-in που ήδη έχουμε */
}

.page-main-img {
    max-width: 250px;
    width: 80%;
    border-radius: 25px;
    border: 4px solid var(--primary-color);
    box-shadow: 10px 10px 0px var(--secondary-color);
    transition: transform 0.3s ease;
    background-color: var(--white);
}

.page-main-img:hover {
    transform: scale(1.05) rotate(2deg); /* Κλίση προς την άλλη πλευρά για ποικιλία */
}

/* Προσαρμογή για κινητά */
@media (max-width: 600px) {
    .page-main-img {
        max-width: 280px;
    }
}
/* =========================================
   ΣΕΛΙΔΑ ΟΜΑΔΑΣ: ΠΛΑΙΣΙΟ ΚΑΛΩΣΟΡΙΣΜΑΤΟΣ
   ========================================= */

.team-welcome-box {
    background-color: var(--white);
    border: 4px solid var(--primary-color);
    box-shadow: 10px 10px 0px var(--secondary-color);
    border-radius: 20px;
    padding: 40px;
    max-width: 750px;
    margin: 3rem auto; 
    text-align: center;
    
    /* Animation Προετοιμασία: Ξεκινάει μικρό και αόρατο */
    opacity: 0;
    transform: scale(0.8);
    
    /* To popIn animation τρέχει μόλις φορτώσει η σελίδα */
    animation: popIn 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    animation-delay: 0.2s; /* Μικρή καθυστέρηση για πιο ομαλό εφέ */
}

/* Η μορφοποίηση των κειμένων */
.team-welcome-box h3 {
    color: var(--primary-color);
    font-size: 2.2rem;
    margin-bottom: 15px;
    /* Μικρό σκούρο περίγραμμα για να μοιάζει με κόμικ */
    -webkit-text-stroke: 1px var(--text-color);
    text-shadow: 3px 3px 0px rgba(0, 0, 0, 0.1);
}

.team-welcome-box p {
    font-size: 1.3rem;
    color: var(--text-color);
    font-weight: 700;
    margin-bottom: 10px;
}

/* Η ερώτηση "Είστε έτοιμοι;" */
.team-welcome-box .highlight-text {
    color: var(--secondary-color);
    font-size: 1.6rem;
    font-weight: 900;
    margin-top: 25px;
    -webkit-text-stroke: 1px var(--text-color);
    text-shadow: 2px 2px 0px var(--text-color);
}
.welcome-content-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.welcome-text-side {
    flex: 1;
    display: flex;
    flex-direction: column; /* Αναγκάζει τα κείμενα να μπαίνουν το ένα κάτω από το άλλο */
    align-items: center;    /* Τα κεντράρει οριζόντια */
    justify-content: center;
    padding: 0 15px;
}

.side-character {
    width: 180px; /* Ρύθμιση μεγέθους */
    height: auto;
    flex-shrink: 0;
    filter: drop-shadow(4px 4px 0px var(--secondary-color)); /* Comic σκιά */
    transition: transform 0.3s ease;
}

.loomy-img:hover { transform: scale(1.2); }
.tommy-img:hover { transform: scale(1.2); }
/* --- Τα Animations --- */

/* Pop In: Τιναχτή εμφάνιση */
@keyframes popIn {
    0% {
        opacity: 0;
        transform: scale(0.8) translateY(20px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Προσαρμογή για μικρές οθόνες (κινητά) */
@media (max-width: 600px) {
    .team-welcome-box {
        padding: 25px 15px;
        margin: 2rem 1rem; /* Λίγο κενό αριστερά-δεξιά */
    }
    .team-welcome-box h3 {
        font-size: 1.6rem;
    }
    .team-welcome-box p {
        font-size: 1.1rem;
    }
}
@media (max-width: 650px) {
    .welcome-content-wrapper {
        flex-direction: column;
    }
    .side-character {
        width: 70px;
    }
}
/* =========================================
   ΕΝΟΤΗΤΑ ΔΩΡΕΑΝ ΔΟΚΙΜΗΣ (4 ΕΒΔΟΜΑΔΕΣ)
   ========================================= */

.free-trial-section {
    text-align: center;
    margin: 4rem auto;
    max-width: 800px;
    padding: 0 15px;
    animation: simpleFadeIn 1s ease-out forwards;
}

/* Το Heading */
.trial-heading {
    font-size: 2rem;
    color: var(--text-color);
    margin-bottom: 2.5rem;
    line-height: 1.5;
}

.trial-heading .highlight-pink {
    color: var(--secondary-color);
    font-size: 2.8rem;
    display: inline-block;
    margin-top: 10px;
    -webkit-text-stroke: 1.5px var(--text-color);
    text-shadow: 4px 4px 0px var(--primary-color);
    transform: rotate(-2deg);
}

/* Το Κάθετο Μονοπάτι (Τα Κουμπιά) */
.weeks-timeline {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 450px; /* Κρατάει τα κουμπιά στο κέντρο με όμορφο πλάτος */
    margin: 0 auto;
}

/* Βασικό στυλ για κάθε κουμπί εβδομάδας */
.week-btn {
    width: 100%;
    font-size: 1.3rem;
    padding: 20px 25px;
    border-radius: 15px;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 15px;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.week-icon {
    font-size: 1.8rem;
}

/* Στυλ για ΞΕΚΛΕΙΔΩΤΗ εβδομάδα */
.week-btn.unlocked {
    background-color: var(--white);
    border: 3px solid var(--primary-color);
    color: var(--primary-color);
    box-shadow: 8px 8px 0px var(--secondary-color);
}

.week-btn.unlocked:hover {
    transform: translateX(10px) scale(1.02); /* Πηγαίνει ελαφρώς δεξιά στο hover */
    box-shadow: 10px 10px 0px var(--secondary-color);
    background-color: #F0FBFC;
}

/* Στυλ για ΚΛΕΙΔΩΜΕΝΗ εβδομάδα */
.week-btn.locked {
    background-color: #E0E0E0;
    border: 3px dashed #A0A0A0; /* Διακεκομμένο περίγραμμα */
    color: #888;
    box-shadow: 4px 4px 0px #C0C0C0;
    cursor: not-allowed;
    transform: none; /* Δεν κάνει hover animation */
}
/* =========================================
   ΠΙΝΑΚΕΣ ΤΙΜΩΝ (PRICING CARDS)
   ========================================= */

.subscription-section {
    text-align: center;
    margin: 5rem auto;
    max-width: 1100px;
    padding: 0 15px;
}

.subscription-heading {
    font-size: 2.5rem;
    color: var(--text-color);
    margin-bottom: 3rem;
    text-shadow: 3px 3px 0px rgba(0,0,0,0.1);
}

.pricing-cards {
    display: flex;
    justify-content: center;
    align-items: stretch; /* Κάνει όλες τις κάρτες να έχουν το ίδιο ύψος */
    gap: 30px;
    flex-wrap: wrap; /* Για να "σπάνε" σωστά σε μικρές οθόνες */
}

/* Βασικό Στυλ Κάρτας */
.pricing-card {
    background-color: var(--secondary-color);
    border: 4px solid var(--primary-color);
    box-shadow: 8px 8px 0px var(--primary-color);
    border-radius: 25px;
    padding: 40px 20px 30px;
    width: 300px;
    position: relative; /* Σημαντικό για να βάλουμε το badge */
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease;
}

.pricing-card:hover {
    transform: translateY(-10px);
}

/* Η Δημοφιλής Κάρτα (Μεσαία) ξεχωρίζει! */
.pricing-card.popular {
    border-color: var(--secondary-color);
    box-shadow: 10px 10px 0px var(--secondary-color);
    transform: scale(1.05); /* Είναι ελαφρώς μεγαλύτερη εξαρχής */
    z-index: 2;
}

.pricing-card.popular:hover {
    transform: scale(1.05) translateY(-10px);
}

/* Τα ταμπελάκια (Badges) */
.badge {
    position: absolute;
    top: -18px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--secondary-color);
    color: var(--text-color);
    font-weight: 900;
    padding: 5px 15px;
    border-radius: 20px;
    border: 2px solid var(--text-color);
    white-space: nowrap;
}

.badge.best-value {
    background-color: #FFD166; /* Ένα χαρούμενο κίτρινο για το ετήσιο */
}

/* Τυπογραφία Καρτών */
.pricing-card h3 {
    font-size: 1.8rem;
    color: var(--text-color);
    margin-bottom: 10px;
}

.price {
    font-size: 2.8rem;
    font-weight: 900;
    color: var(--primary-color);
    margin-bottom: 5px;
}

.price span {
    font-size: 1.2rem;
    color: #888;
}

.pricing-card.popular .price { color: var(--secondary-color); }

.savings {
    font-size: 1rem;
    font-weight: 800;
    color: #2d6a4f; /* Πράσινο για "κέρδος" */
    margin-bottom: 20px;
}

.features {
    list-style: none;
    padding: 0;
    margin: 20px 0 auto 0; /* Το auto σπρώχνει το κουμπί στο κάτω μέρος */
    text-align: left;
}

.features li {
    margin-bottom: 15px;
    font-weight: 700;
    font-size: 1.05rem;
    border-bottom: 1px dashed #eee;
    padding-bottom: 10px;
}

.plan-btn {
    margin-top: 25px;
    width: 100%;
    font-size: 1.1rem;
}

/* Responsive για tablet & κινητά */
@media (max-width: 950px) {
    .pricing-cards { flex-direction: column; align-items: center; gap: 40px; }
    .pricing-card { width: 100%; max-width: 350px; }
    .pricing-card.popular { transform: scale(1); }
    .pricing-card.popular:hover { transform: translateY(-10px); }
}
@media (min-width: 951px) {
    .pricing-cards .pricing-card:nth-child(3) {
        margin-top: 45px; /* Μπορείς να παίξεις με αυτό το νούμερο (π.χ. 30px ή 60px) */
    }
}
/* =========================================
   ΓΙΑΤΙ ΝΑ ΜΑΣ ΕΠΙΛΕΞΕΤΕ (FEATURES SECTION)
   ========================================= */
.why-us-section {
    padding: 5rem 5%;
    text-align: center;
    background-color: var(--white); /* Καθαρό φόντο για να ξεχωρίζουν οι κάρτες */
    border-top: 4px solid var(--primary-color); /* Ένα παιχνιδιάρικο διαχωριστικό */
}

.why-us-heading {
    font-size: 2.5rem;
    color: var(--text-color);
    margin-bottom: 3.5rem;
    -webkit-text-stroke: 1px var(--text-color);
    text-shadow: 4px 4px 0px rgba(0, 180, 216, 0.2);
}

.features-grid {
    display: grid;
    /* Μαγικός κανόνας: Βάζει όσες κάρτες χωράνε, αλλιώς τις πάει από κάτω */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

/* Στυλ για την κάθε κάρτα */
.feature-card {
    background-color: var(--bg-color);
    border: 4px solid var(--text-color);
    border-radius: 25px;
    padding: 35px 25px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.feature-card:hover {
    transform: translateY(-10px);
}

/* Χρωματιστές Σκιές για κάθε κάρτα */
.feature-card.card-blue { box-shadow: 8px 8px 0px var(--primary-color); }
.feature-card.card-pink { box-shadow: 8px 8px 0px var(--secondary-color); }
.feature-card.card-yellow { box-shadow: 8px 8px 0px #FFD166; } /* Ένα χαρούμενο κίτρινο */

/* Hover effects για τις σκιές */
.feature-card.card-blue:hover { box-shadow: 12px 12px 0px var(--primary-color); }
.feature-card.card-pink:hover { box-shadow: 12px 12px 0px var(--secondary-color); }
.feature-card.card-yellow:hover { box-shadow: 12px 12px 0px #FFD166; }

/* Το κυκλικό εικονίδιο */
.feature-icon {
    font-size: 3rem;
    margin-bottom: 20px;
    background-color: var(--white);
    width: 85px;
    height: 85px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    border: 3px solid var(--text-color);
    box-shadow: inset 3px 3px 0px rgba(0,0,0,0.05); /* Εσωτερική σκιά για βάθος */
}

.feature-card h3 {
    font-size: 1.5rem;
    color: var(--text-color);
    margin-bottom: 12px;
    line-height: 1.3;
}

.feature-card p {
    font-size: 1.1rem;
    font-weight: 700;
    color: #555;
    line-height: 1.5;
}

/* =========================================
   ΣΕΛΙΔΑ ΕΠΙΚΟΙΝΩΝΙΑΣ (CONTACT FORM)
   ========================================= */

.contact-section {
    max-width: 800px;
    margin: 3rem auto;
    animation: simpleFadeIn 1s ease-out forwards;
}

.contact-header {
    text-align: center;
    margin-bottom: 30px;
}

.contact-header h2 {
    font-size: 2.5rem;
    color: var(--text-color);
    margin-bottom: 10px;
    -webkit-text-stroke: 1px var(--text-color);
    text-shadow: 3px 3px 0px rgba(0, 180, 216, 0.2);
}

.contact-header p {
    font-size: 1.2rem;
    color: #555;
    font-weight: 700;
}

/* Η Κάρτα της Φόρμας */
.contact-form-card {
    background-color: var(--bg-color);
    border: 4px solid var(--primary-color);
    box-shadow: 12px 12px 0px var(--secondary-color);
    border-radius: 25px;
    padding: 40px;
}

/* Οργάνωση πεδίων */
.form-row {
    display: flex;
    gap: 20px;
}

.form-row .form-group {
    flex: 1; /* Μοιράζει τον χώρο 50-50 */
}

.form-group {
    margin-bottom: 25px;
    display: flex;
    flex-direction: column;
    text-align: left;
}

.form-group label {
    font-size: 1.1rem;
    font-weight: 900;
    color: var(--text-color);
    margin-bottom: 8px;
}

/* Στυλ για τα Inputs, Select και Textarea */
.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 15px;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-color);
    background-color: var(--white);
    border: 3px solid var(--text-color);
    border-radius: 15px;
    box-shadow: 4px 4px 0px rgba(0,0,0,0.05);
    outline: none;
    transition: all 0.3s ease;
}

/* Όταν ο χρήστης κάνει κλικ μέσα στο πεδίο (Focus) */
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: var(--primary-color);
    box-shadow: 6px 6px 0px var(--primary-color);
    transform: translateY(-2px);
}

/* Το Dropdown (Select) */
.form-group select {
    cursor: pointer;
    appearance: none; /* Κρύβει το default βελάκι για να βάλουμε custom αν θέλουμε, αλλά εδώ το κρατάμε απλό */
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%232B2D42%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: right 15px top 50%;
    background-size: 15px auto;
}

/* Το Κουμπί Υποβολής */
.submit-btn {
    width: 100%;
    font-size: 1.3rem;
    padding: 15px;
    margin-top: 10px;
}

/* Προσαρμογή για Κινητά */
@media (max-width: 600px) {
    .form-row {
        flex-direction: column;
        gap: 0;
    }
    .contact-form-card {
        padding: 25px 15px;
    }
}

/* =========================================
   ΕΦΕ ΕΜΦΑΝΙΣΗΣ ΣΤΟ SCROLL (POP UP), ΤΟ ΧΡΗΣΙΜΟΠΟΙΟΥΜΕ ΟΠΟΥ ΘΕΛΟΥΜΕ, με την κλαση scroll-reveal delay-1 ή delay-2 ή delay-3
   ========================================= */

/* Αρχική Κατάσταση: Κρυμμένο, πιο κάτω και λίγο πιο μικρό */
.scroll-reveal {
    opacity: 0;
    transform: translateY(50px) scale(0.85); /* 50px πιο κάτω και στο 85% του μεγέθους */
    /* Το cubic-bezier δίνει αυτό το εφέ του "ελατηρίου" ή του comic pop-up! */
    transition: all 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Τελική Κατάσταση (Όταν παίρνει την κλάση active από τη JS) */
.scroll-reveal.active {
    opacity: 1;
    transform: translateY(0) scale(1); /* Έρχεται στη φυσική του θέση και μέγεθος */
}

/* (Προαιρετικό) Καθυστέρηση όταν είναι πολλά στοιχεία δίπλα-δίπλα, π.χ. στο Grid */
.delay-1 { transition-delay: 0.2s; }
.delay-2 { transition-delay: 0.6s; }
.delay-3 { transition-delay: 1.0s; }

/* =========================================
   CUSTOM POP-UP ΕΠΙΤΥΧΙΑΣ (MODAL)
   ========================================= */
.custom-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(43, 45, 66, 0.6); /* Σκούρο μπλε με διαφάνεια */
    backdrop-filter: blur(5px); /* Θολώνει τη σελίδα από πίσω */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999; /* Το φέρνει πάνω από ΟΛΑ */
    
    /* Ξεκινάει κρυμμένο */
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

/* Η κλάση που θα του βάζει η JS για να εμφανιστεί */
.custom-modal.show {
    opacity: 1;
    visibility: visible;
}

/* Το εσωτερικό κουτί του Pop-up */
.modal-content {
    background-color: var(--white);
    border: 4px solid var(--text-color);
    box-shadow: 12px 12px 0px var(--secondary-color); /* Η ροζ σκιά μας */
    border-radius: 25px;
    padding: 40px;
    text-align: center;
    max-width: 450px;
    width: 90%;
    position: relative;
    
    /* Animation: Ξεκινάει μικρό και πάει στο κανονικό του μέγεθος σαν ελατήριο */
    transform: scale(0.7) translateY(50px);
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.custom-modal.show .modal-content {
    transform: scale(1) translateY(0);
}

/* Το Χ πάνω δεξιά */
.close-modal-btn {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 2.5rem;
    font-weight: 900;
    color: var(--text-color);
    cursor: pointer;
    transition: transform 0.2s;
    line-height: 1;
}

.close-modal-btn:hover {
    transform: scale(1.2) rotate(10deg);
    color: var(--secondary-color);
}

.modal-content h3 {
    font-size: 2.2rem;
    color: var(--primary-color);
    margin-bottom: 15px;
    -webkit-text-stroke: 1px var(--text-color);
}

.modal-content p {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-color);
    margin-bottom: 25px;
}

.ok-btn {
    width: 100%;
    font-size: 1.2rem;
}

/* =========================================
   ΣΕΛΙΔΑ ΣΥΝΔΕΣΗΣ / ΕΓΓΡΑΦΗΣ (AUTH PAGE)
   ========================================= */

.auth-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 70vh; /* Κεντράρει την κάρτα κάθετα στην οθόνη */
    margin: 2rem 0;
}

.auth-card {
    background-color: var(--white);
    border: 4px solid var(--primary-color);
    box-shadow: 12px 12px 0px var(--secondary-color);
    border-radius: 25px;
    padding: 40px;
    width: 100%;
    max-width: 450px;
    text-align: center;
    animation: simpleFadeIn 0.5s ease-out;
}

.auth-card h2 {
    font-size: 2.2rem;
    color: var(--text-color);
    margin-bottom: 5px;
}

.auth-card p {
    font-size: 1.1rem;
    color: #666;
    margin-bottom: 25px;
    font-weight: 700;
}

.auth-submit-btn {
    width: 100%;
    font-size: 1.3rem;
    padding: 15px;
    margin-top: 15px;
    background-color: var(--secondary-color);
    color: var(--text-color);
    box-shadow: 5px 5px 0px var(--text-color);
}

.auth-submit-btn:hover {
    box-shadow: 8px 8px 0px var(--text-color);
    transform: translateY(-2px);
}

.auth-switch {
    margin-top: 25px;
    padding-top: 20px;
    border-top: 2px dashed #ddd;
    font-weight: 700;
}

.switch-btn {
    background: none;
    border: none;
    color: var(--primary-color);
    font-weight: 900;
    font-size: 1rem;
    font-family: inherit;
    cursor: pointer;
    text-decoration: underline;
    transition: color 0.3s ease;
}

.switch-btn:hover {
    color: var(--secondary-color);
}

.error-msg {
    margin-top: 15px;
    color: #fff;
    background-color: #EF476F; /* Ένα ωραίο κόκκινο */
    padding: 10px;
    border-radius: 10px;
    font-weight: 800;
    border: 2px solid var(--text-color);
    animation: popIn 0.3s ease-out;
}

/* =========================================
   ΣΕΛΙΔΑ CHECKOUT (ΤΑΜΕΙΟ)
   ========================================= */

.checkout-header {
    text-align: center;
    margin: 3rem 0 2rem;
}

.checkout-header h2 {
    font-size: 2.5rem;
    color: var(--text-color);
}

.checkout-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr; /* Η φόρμα πιάνει πιο πολύ χώρο από τη σύνοψη */
    gap: 30px;
    max-width: 1100px;
    margin: 0 auto 4rem;
    align-items: start;
}

/* Κάρτες Checkout */
.checkout-form-card, .checkout-summary-card {
    background-color: var(--white);
    border: 4px solid var(--text-color);
    border-radius: 25px;
    padding: 30px;
}

.checkout-form-card {
    box-shadow: 10px 10px 0px var(--primary-color);
}

.checkout-summary-card {
    box-shadow: 10px 10px 0px var(--secondary-color); /* Ροζ σκιά δεξιά */
    position: sticky;
    top: 20px; /* Μένει σταθερή όταν σκρολάρει ο χρήστης προς τα κάτω */
}

.checkout-grid h3 {
    font-size: 1.5rem;
    color: var(--text-color);
    margin-bottom: 20px;
    border-bottom: 2px dashed #eee;
    padding-bottom: 10px;
}

/* Σύνοψη Παραγγελίας */
.summary-items {
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 2px dashed #ddd;
}

.summary-item, .summary-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
    font-size: 1.1rem;
    font-weight: 700;
}

.summary-row {
    color: #555;
}

.summary-row.grand-total {
    font-size: 1.4rem;
    color: var(--text-color);
    font-weight: 900;
    margin-top: 20px;
    padding-top: 15px;
    border-top: 3px solid var(--primary-color);
}

.checkout-btn {
    width: 100%;
    font-size: 1.2rem;
    margin-top: 20px;
    padding: 15px;
}

/* Responsive για tablet & κινητά */
@media (max-width: 850px) {
    .checkout-grid {
        grid-template-columns: 1fr; /* Μια στήλη: Σύνοψη κάτω από τη φόρμα */
    }
    .checkout-summary-card {
        position: static;
    }
}

/* =========================================
   3D Coverflow Carousel 🌟
   ========================================= */
.coverflow-section {
    margin: 80px auto;
    padding: 0 20px;
    overflow: hidden; /* Κρύβουμε ό,τι βγαίνει εκτός οθόνης */
}

.coverflow-container {
    position: relative;
    width: 100%;
    max-width: 1000px;
    height: 450px; /* Το ύψος της περιοχής */
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    perspective: 1200px; /* ΕΔΩ ΓΙΝΕΤΑΙ Η ΜΑΓΕΙΑ ΤΟΥ 3D! */
}

.coverflow-track {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    transform-style: preserve-3d;
}

.coverflow-slide {
    position: absolute;
    width: 320px; /* Πλάτος της κεντρικής εικόνας */
    height: 400px;
    border-radius: 16px;
    object-fit: cover;
    box-shadow: 0 15px 35px rgba(0,0,0,0.25);
    transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1), 
                opacity 0.8s ease, 
                z-index 0.8s ease, 
                filter 0.8s ease;
}

/* Κουμπιά Πλοήγησης */
.coverflow-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.9);
    border: none;
    width: 55px;
    height: 55px;
    border-radius: 50%;
    font-size: 1.5rem;
    cursor: pointer;
    z-index: 100; /* Πάντα πάνω από τις εικόνες */
    box-shadow: 0 5px 15px rgba(0,0,0,0.15);
    transition: 0.3s;
    display: flex;
    justify-content: center;
    align-items: center;
}

.coverflow-btn:hover {
    background: var(--primary-color, #FF85A1);
    color: white;
    transform: translateY(-50%) scale(1.1);
}

.prev-btn { left: 0; }
.next-btn { right: 0; }

/* Responsive */
@media (max-width: 768px) {
    .coverflow-container { height: 350px; }
    .coverflow-slide { width: 220px; height: 300px; }
    .coverflow-btn { width: 45px; height: 45px; font-size: 1.2rem; }
}

/* =========================================
   Animations Κουμπιού Προσθήκης στο Καλάθι
   ========================================= */

/* Απαραίτητο για το Ripple Effect (κρατάει το κύμα μέσα στο κουμπί) */
.btn {
    position: relative;
    overflow: hidden;
    transition: background-color 0.3s, transform 0.2s;
}

/* 1. Εφέ Bounce */
.bounce-anim {
    animation: bounceButton 0.4s ease;
}
@keyframes bounceButton {
    0% { transform: scale(1); }
    50% { transform: scale(0.85); }
    100% { transform: scale(1); }
}

/* 2. Εφέ Ripple (Το κύμα στο κλικ) */
.ripple {
    position: absolute;
    border-radius: 50%;
    transform: scale(0);
    animation: rippleAnim 0.6s linear;
    background-color: rgba(255, 255, 255, 0.6);
    pointer-events: none; /* Να μην εμποδίζει μελλοντικά κλικ */
}
@keyframes rippleAnim {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

/* 3. Ιπτάμενο Δοντάκι (+1) */
.cart-feedback {
    position: absolute;
    font-size: 1.8rem;
    font-weight: bold;
    color: var(--primary-color, #FF85A1);
    pointer-events: none;
    z-index: 100;
    transform: translate(-50%, -50%);
    animation: flyUp 0.8s ease-out forwards;
    text-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
@keyframes flyUp {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -150px) scale(1.5); /* Πετάει προς τα πάνω και μεγαλώνει */
    }
}

/* =========================================
   Ενότητα "Χειροποίητο" (Εικόνα & Κείμενο) - Wide & Responsive
   ========================================= */
.handmade-section {
    display: flex;
    align-items: center; 
    justify-content: center;
    gap: 50px; /* Λίγο μεγαλύτερο κενό για να αναπνέουν καλύτερα */
    margin: 40px 0; /* Περισσότερος αέρας πάνω και κάτω */
    padding: 0 10px;
}

.handmade-image-wrapper {
    flex: 1.2; /* Δίνουμε λίγο παραπάνω "βάρος" (χώρο) στην εικόνα (περίπου 55%) */
    display: flex;
    justify-content: center; /* Κεντράρουμε την εικόνα στον χώρο της */
}

.handmade-image {
    width: 550px;
    max-width: 600px; /* ΑΥΞΗΘΗΚΕ: Από 450px πήγε στα 600px για να είναι πιο χορταστική! */
    height: auto;
    border-radius: 25px;
    border: 4px dashed var(--secondary-color, #FF85A1); 
    box-shadow: 0 15px 30px rgba(0,0,0,0.08);
    transition: transform 0.4s ease;
}

.handmade-image:hover {
    transform: scale(1.02) rotate(-1deg); /* Πιο διακριτικό hover εφόσον η εικόνα μεγάλωσε */
}

.handmade-text-wrapper {
    flex: 1; /* Το κείμενο παίρνει τον υπόλοιπο χώρο (περίπου 45%) */
}

/* Το Styling του κειμένου παραμένει το ίδιο εντυπωσιακό */
.handmade-text {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--primary-color, #FF85A1);
    line-height: 1.6;
    margin: 0;
    background: linear-gradient(120deg, #FFE0E6 0%, #FFE0E6 100%);
    background-repeat: no-repeat;
    background-size: 100% 35%;
    background-position: 0 85%;
    display: inline;
}

/* --- RESPONSIVE ΣΥΜΠΕΡΙΦΟΡΑ ΓΙΑ ΚΙΝΗΤΑ & TABLET --- */
/* Αυξήσαμε το όριο στα 850px για να μην "στριμώχνεται" η μεγάλη εικόνα στα μικρά laptop/tablets */
@media (max-width: 850px) {
    .handmade-section {
        flex-direction: column; /* Το κείμενο πάει κάτω από την εικόνα */
        text-align: center;
        gap: 30px;
    }
    
    .handmade-image-wrapper {
        width: 100%;
    }
    
    .handmade-image {
        max-width: 90%; /* Στα κινητά/tablet η εικόνα απλώνεται όμορφα σχεδόν σε όλο το πλάτος! */
    }
    
    .handmade-text {
        font-size: 1.4rem; /* Ιδανικό μέγεθος γραμματοσειράς για κινητά */
        display: block; /* Απαραίτητο για σωστή στοίχιση στα κινητά */
    }
}
/* =========================================
   Custom Pop-up (Modal) για Άδειασμα Καλαθιού
   ========================================= */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px); /* Υπέροχο θόλωμα στο background */
    display: none; /* Είναι κρυμμένο μέχρι να το καλέσουμε */
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.modal-box {
    background: white;
    padding: 40px 30px;
    border-radius: 30px;
    border: 4px solid #222; /* Neobrutalism περίγραμμα */
    box-shadow: 8px 8px 0px var(--primary-color, #FF85A1); /* Η χαρακτηριστική μας σκιά */
    text-align: center;
    max-width: 420px;
    width: 90%;
    /* Ένα γλυκό εφέ εμφάνισης */
    animation: popModal 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.modal-icon {
    font-size: 3.5rem;
    margin-bottom: 10px;
    animation: shakeIcon 2s infinite ease-in-out;
}

.modal-box h3 {
    color: var(--primary-color, #FF85A1);
    font-size: 1.8rem;
    margin-bottom: 10px;
    font-weight: 900;
}

.modal-box p {
    font-size: 1.1rem;
    color: #555;
    margin-bottom: 30px;
    line-height: 1.5;
}

.modal-actions {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap; /* Για να μην χαλάνε στα πολύ μικρά κινητά */
}

.modal-btn {
    padding: 12px 20px;
    font-size: 1.1rem;
    font-weight: 800;
    border: 3px solid #222;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.2s ease;
}

/* Το κουμπί Ακύρωσης */
.cancel-btn {
    background: white;
    box-shadow: 4px 4px 0px #ccc;
    color: #444;
}

.cancel-btn:hover {
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0px #999;
}

/* Το κουμπί Διαγραφής */
.confirm-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #F28B82;
    color: white;
    box-shadow: 4px 4px 0px #D66A6A;
    transition: all 0.2s ease;
}

.confirm-btn:hover {
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0px #C85C5C;
    background: #E57373;
}

/* Animations */
@keyframes popModal {
    0% { transform: scale(0.8); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes shakeIcon {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-10deg); }
    75% { transform: rotate(10deg); }
}

/* =========================================
   Συνδρομές (Pricing Cards) - Το Δικό σου Styling! 🎨
   ========================================= */
.subscription-section {
    text-align: center;
    margin: 5rem auto;
    max-width: 1100px;
    padding: 0 15px;
}

.subscription-heading {
    font-size: 2.5rem;
    color: var(--text-color);
    margin-bottom: 3rem;
    text-shadow: 3px 3px 0px rgba(0,0,0,0.1);
}

.pricing-cards {
    display: flex;
    justify-content: center;
    align-items: stretch; /* Κάνει όλες τις κάρτες να έχουν το ίδιο ύψος */
    gap: 30px;
    flex-wrap: wrap; /* Για να "σπάνε" σωστά σε μικρές οθόνες */
}

/* Βασικό Στυλ Κάρτας */
.pricing-card {
    background-color: var(--white);
    border: 4px solid var(--primary-color);
    box-shadow: 8px 8px 0px var(--primary-color);
    border-radius: 25px;
    padding: 40px 20px 30px;
    width: 300px;
    position: relative; /* Σημαντικό για να βάλουμε το badge */
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease;
}

.pricing-card:hover {
    transform: translateY(-10px);
}

/* Η Δημοφιλής Κάρτα (Μεσαία) ξεχωρίζει! */
.pricing-card.popular {
    border-color: var(--secondary-color);
    box-shadow: 10px 10px 0px var(--secondary-color);
    transform: scale(1.05); /* Είναι ελαφρώς μεγαλύτερη εξαρχής */
    z-index: 2;
}

.pricing-card.popular:hover {
    transform: scale(1.05) translateY(-10px);
}

/* Τα ταμπελάκια (Badges) */
.badge {
    position: absolute;
    top: -18px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--secondary-color);
    color: var(--text-color);
    font-weight: 900;
    padding: 5px 15px;
    border-radius: 20px;
    border: 2px solid var(--text-color);
    white-space: nowrap;
}

.badge.best-value {
    background-color: #FFD166; /* Ένα χαρούμενο κίτρινο για το ετήσιο */
}

/* Τυπογραφία Καρτών */
.pricing-card h3 {
    font-size: 1.8rem;
    color: var(--text-color);
    margin-bottom: 10px;
}

.price {
    font-size: 2.8rem;
    font-weight: 900;
    color: var(--primary-color);
    margin-bottom: 5px;
}

.price span {
    font-size: 1.2rem;
    color: #888;
}

.pricing-card.popular .price { color: var(--secondary-color); }

.savings {
    font-size: 1rem;
    font-weight: 800;
    color: #2d6a4f; /* Πράσινο για "κέρδος" */
    margin-bottom: 20px;
}

/* =========================================
   ΤΑ ΕΠΙΠΛΕΟΝ ΚΟΜΜΑΤΙΑ (Λίστα, Κουμπί & Responsive)
   ========================================= */

/* Λίστα με παροχές */
.features {
    list-style: none;
    padding: 0;
    margin: 0 0 25px 0;
    text-align: left;
    flex-grow: 1; /* ΣΗΜΑΝΤΙΚΟ: Σπρώχνει το κουμπί πάντα τέρμα κάτω! */
}

.features li { 
    margin-bottom: 12px; 
    font-size: 1.05rem; 
    color: var(--text-color);
}

/* Το κουμπί αγοράς (Neobrutalism Style) */
.plan-btn {
    background: var(--white);
    border: 3px solid var(--text-color);
    padding: 15px;
    font-size: 1.1rem;
    font-weight: 800;
    border-radius: 15px;
    cursor: pointer;
    box-shadow: 4px 4px 0px rgba(0,0,0,0.1);
    transition: all 0.2s;
    margin-top: auto;
    color: var(--text-color);
}

.plan-btn:hover {
    background: var(--primary-color);
    color: #fff;
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0px rgba(0,0,0,0.2);
}

.pricing-card.popular .plan-btn:hover {
    background: var(--secondary-color); /* Το μεσαίο κουμπί γίνεται κίτρινο στο hover */
}

/* === RESPONSIVE ΚΑΝΟΝΕΣ (ΓΙΑ ΚΙΝΗΤΑ) === */
@media (max-width: 950px) {
    .pricing-cards {
        gap: 50px; /* Περισσότερος χώρος επειδή τα badges είναι στο κέντρο πάνω */
    }
    
    .pricing-card {
        width: 100%;
        max-width: 350px; /* Απλώνει ωραία στην οθόνη του κινητού */
    }

    .pricing-card.popular {
        transform: none; /* Αφαιρούμε το scale στα κινητά για να μην βγαίνει εκτός οθόνης! */
    }
    
    .pricing-card.popular:hover {
        transform: translateY(-10px);
    }
}

/* =========================================
   Τα Κουμπιά της Κάρτας
   ========================================= */
.card-buttons {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 15px;
}

.info-btn {
    background-color: var(--white); /* Πιο ουδέτερο χρώμα για να μην "φωνάζει" όσο το καλάθι */
    color: var(--text-color);
}

.info-btn:hover {
    background-color: var(--secondary-color);
}

/* =========================================
   Το Modal (Αναδυόμενο Παράθυρο)
   ========================================= */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.4); /* Ημιδιαφανές μαύρο */
    backdrop-filter: blur(9px); /* Το θόλωμα του background! */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999; /* Για να είναι ΠΑΝΩ από όλα τα άλλα στοιχεία της σελίδας */
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

/* Όταν το Modal ενεργοποιείται */
.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Το λευκό κουτί στη μέση */
.modal-content {
    background-color: var(--white);
    border: 4px solid var(--primary-color);
    box-shadow: 10px 10px 0px var(--primary-color);
    border-radius: 25px;
    padding: 40px;
    max-width: 500px;
    width: 90%;
    text-align: center;
}

.modal-overlay.active .modal-content {
    transform: translateY(0);
}

.modal-content h2 {
    font-size: 2rem;
    color: var(--text-color);
    margin-bottom: 20px;
}

.modal-content p {
    font-size: 1.2rem;
    line-height: 1.6;
    color: #444;
    margin-bottom: 30px;
}

.close-modal-btn {
    background-color: #be266d; /* Ένα κόκκινο χρώμα για την έξοδο */
    color: white;
}

.close-modal-btn:hover {
    background-color: #7e1747;
}

/* =========================================
   Floating Shipping Banner (Κάτω Δεξιά)
   ========================================= */
.shipping-banner {
    position: fixed;
    bottom: 70px;
    right: 30px;
    background-color: #fff;
    border: 3px solid var(--text-color, #222);
    box-shadow: 6px 6px 0px var(--secondary-color, #FFD166);
    border-radius: 15px;
    padding: 15px 20px;
    z-index: 1000;
    max-width: 320px;
    
    /* Animation Εμφάνισης (Γλιστράει από δεξιά) */
    transform: translateX(120%);
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Bouncy effect! */
}

/* Η κλάση που θα προσθέτει η JavaScript όταν σκρολάρουμε */
.shipping-banner.show-banner {
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
}

/* Εσωτερική διάταξη */
.banner-content {
    display: flex;
    align-items: center;
    gap: 15px;
}

.truck-btn {
    background-color: var(--primary-color, #FF85A1);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
    border: 2px solid var(--text-color, #222);
    flex-shrink: 0;
}

.shipping-text h3 {
    font-size: 1.1rem;
    margin: 0 0 5px 0;
    line-height: 1.2;
    color: var(--text-color, #222);
}

.shipping-text h3 span {
    color: var(--primary-color, #FF85A1);
    font-weight: 900;
}

.shipping-text p {
    margin: 0;
    font-size: 0.85rem;
    color: #555;
}

/* Για κινητά (Το κάνουμε μικροσκοπική 'κάψουλα' στο κέντρο κάτω) */
@media (max-width: 600px) {
    .shipping-banner {
        bottom: 65px;
        right: 50%;
        /* Αντί για σταθερό 90%, του λέμε να πιάσει μόνο όσο χώρο χρειάζονται τα γράμματα */
        width: auto; 
        max-width: 90%;
        /* Δραστική μείωση του αέρα γύρω-γύρω και σχήμα χαπιού (οβάλ) */
        padding: 5px 15px; 
        border-radius: 50px; 
        white-space: nowrap; /* Απαγορεύει στα γράμματα να πάνε σε 2η γραμμή */
        
        transform: translate(50%, 150%); /* Αρχική κρυφή θέση */
    }
    
    .shipping-banner.show-banner {
        transform: translate(50%, 0); /* Εμφάνιση στο κέντρο */
    }

    .banner-content {
        gap: 8px; /* Φέρνουμε πιο κοντά το φορτηγό στο κείμενο */
    }

    /* Μικραίνουμε δραστικά τον κύκλο με το φορτηγάκι */
    .truck-btn {
        width: 32px;
        height: 32px;
        font-size: 1rem;
        border-width: 2px;
    }

    .shipping-text h3 {
        font-size: 0.8rem; /* Μικρά, κομψά γράμματα */
        margin: 0;
    }

    /* Σκοτώνουμε την αλλαγή γραμμής (<br>) για να είναι μια ευθεία */
    .shipping-text h3 br {
        display: none;
    }

    /* Κρύβουμε εντελώς το δευτερεύον κείμενο στα κινητά */
    .shipping-text p {
        display: none; 
    }
}

/* =========================================
   Eco Card - Mobile First Layout
   ========================================= */

/* --- 1. Βασική Διάταξη (Κινητά - Default) --- */
.eco-card {
    display: flex;
    flex-direction: column; 
    align-items: center;
    text-align: center; 
    background-color: var(--white, #ffffff);
    border: 3px solid var(--text-color, #222);
    box-shadow: 6px 6px 0px #4CAF50; 
    border-radius: 20px;
    padding: 25px 20px;
    gap: 15px;
    
    /* --- ΟΙ ΜΑΓΙΚΕΣ ΓΡΑΜΜΕΣ ΓΙΑ ΤΟ ΚΕΝΤΡΑΡΙΣΜΑ --- */
    max-width: 900px; /* Δεν το αφήνει να γίνει τεράστιο στην 27άρα οθόνη */
    margin: 4rem auto 2rem auto; /* Το 'auto' δεξιά & αριστερά το βάζει ακριβώς στο κέντρο! */
}

.eco-icon {
    font-size: 3.5rem; /* Μεγάλο εικονίδιο για να τραβάει το μάτι */
    line-height: 1;
}

.eco-content h3 {
    margin-top: 0;
    margin-bottom: 12px;
    color: var(--text-color, #222);
    font-size: 1.4rem;
}

.eco-content p {
    margin: 0;
    line-height: 1.6;
    color: #444;
    font-size: 1rem;
}

/* --- 2. Εμφάνιση σε Οθόνες Υπολογιστή & Tablet (Από 768px και πάνω) --- */
@media (min-width: 768px) {
    .eco-card {
        flex-direction: row; /* Το εικονίδιο αριστερά, το κείμενο δεξιά */
        text-align: left; /* Στοίχιση κειμένου αριστερά */
        padding: 30px 40px;
        gap: 30px;
    }

    .eco-icon {
        font-size: 5rem; /* Ακόμα μεγαλύτερο εικονίδιο στα desktop */
        flex-shrink: 0; /* Αποτρέπει το εικονίδιο από το να μικρύνει αν το κείμενο είναι πολύ */
    }
    
    .eco-content h3 {
        font-size: 1.6rem;
    }
}

/* =========================================
   Welcome Box (Mobile) - Εικόνες δεξιά-αριστερά
   ========================================= */
@media (max-width: 768px) {
    .welcome-content-wrapper {
        display: flex !important;
        flex-direction: row !important; /* Τα βάζουμε όλα σε ΜΙΑ οριζόντια γραμμή */
        flex-wrap: nowrap !important; /* Απαγορεύουμε να πέσει οτιδήποτε από κάτω */
        justify-content: space-between !important;
        align-items: center !important; /* Τα στοιχίζουμε τέλεια στο κέντρο (κάθετα) */
        gap: 8px !important; /* Μικρό, διακριτικό κενό ανάμεσά τους */
        padding: 0 5px !important;
    }

    /* Ρυθμίσεις για τις φιγούρες */
    .loomy-img, .tommy-img {
        order: unset !important; /* Ακυρώνουμε την προηγούμενη σειρά */
        width: 70px !important; /* Τις μικραίνουμε για να χωρέσει το κείμενο */
        height: auto !important;
        flex-shrink: 0 !important; /* ΣΗΜΑΝΤΙΚΟ: Απαγορεύει στον browser να τις παραμορφώσει */
        margin: 0 !important;
    }

    /* Το μεσαίο κομμάτι με τα κείμενα */
    .welcome-text-side {
        order: unset !important;
        flex: 1 !important; /* Του λέμε: 'Πιάσε όλο τον διαθέσιμο χώρο ανάμεσα στις εικόνες' */
        text-align: center !important;
        margin: 0 !important;
    }

    /* Μικραίνουμε λίγο τον τίτλο στα κινητά για να μην στριμώχνεται */
    .welcome-text-side h3 {
        font-size: 1.25rem !important; 
        margin-bottom: 8px !important;
    }

    .welcome-text-side p {
        font-size: 0.9rem !important;
        margin-bottom: 5px !important;
    }
}

/* =========================================
   Το Απόλυτο CSS για το Modal Αδειάσματος
   ========================================= */
.modal-overlay {
    display: none; /* Αρχικά κρυμμένο */
    position: fixed !important; /* Κλειδώνει στην οθόνη, δεν κουνιέται με το scroll */
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important; /* Πιάνει όλο το πλάτος της οθόνης */
    height: 100vh !important; /* Πιάνει όλο το ύψος της οθόνης */
    background-color: rgba(0, 0, 0, 0.7) !important; /* Σκοτεινιάζει το φόντο από πίσω */
    z-index: 999999 !important; /* Ο Βασιλιάς: Έρχεται μπροστά από ΟΛΑ τα άλλα στοιχεία */
    justify-content: center !important; /* Κεντράρει το κουτί οριζόντια */
    align-items: center !important; /* Κεντράρει το κουτί κάθετα */
}

/* Αν δεν έχεις ήδη στυλ για το λευκό κουτί μέσα στο modal, βάλε κι αυτό: */
.modal-box {
    background: #ffffff;
    padding: 30px;
    border-radius: 20px;
    border: 3px solid #000; /* Ταιριάζει με το στυλ της Οδοντούπολης */
    text-align: center;
    width: 90%;
    max-width: 400px;
    box-shadow: 8px 8px 0px var(--primary-color, #00B4D8);
    position: relative !important;
    z-index: 1000000 !important;
}

.modal-actions {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 20px;
}

/* =========================================
   ΕΝΤΥΠΩΣΙΑΚΑ ΚΟΥΜΠΙΑ ΛΗΨΗΣ (TIMELINE)
   ========================================= */

/* Το δοχείο που τα κρατάει όλα στο κέντρο */
.weeks-timeline {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 500px;
    margin: 30px auto; /* Στοιχισμένο στο κέντρο */
}

/* Το βασικό στυλ των κουμπιών */
.weeks-timeline .week-btn.unlocked {
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-decoration: none;
    color: #ffffff;
    padding: 15px 25px;
    font-size: 1.2rem;
    font-weight: 800;
    border-radius: 20px; /* Στρογγυλεμένες, φιλικές γωνίες */
    border: 3px solid rgba(255, 255, 255, 0.5); /* Ελαφρύ λευκό περίγραμμα */
    
    /* 3D Εφέ (Σκιά από κάτω για να μοιάζει με αληθινό κουμπί) */
    box-shadow: 0 8px 15px rgba(0,0,0,0.1), inset 0 -5px 0 rgba(0,0,0,0.15);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    text-shadow: 1px 1px 2px rgba(0,0,0,0.2); /* Για να διαβάζονται τέλεια τα γράμματα */
}

/* Μοναδικά χρώματα (Gradients) για κάθε εβδομάδα! */
.weeks-timeline a:nth-child(1) { background: linear-gradient(135deg, #FF9A9E, #FECFEF); } /* Απαλό ροζ/κόκκινο */
.weeks-timeline a:nth-child(2) { background: linear-gradient(135deg, #00B4D8, #90E0EF); } /* Γαλάζιο της Οδοντούπολης */
.weeks-timeline a:nth-child(3) { background: linear-gradient(135deg, #84fab0, #8fd3f4); } /* Μέντα/Πράσινο */
.weeks-timeline a:nth-child(4) { background: linear-gradient(135deg, #fccb90, #d57eeb); } /* Πορτοκαλί/Μωβ */

/* Όταν το ποντίκι πάει πάνω στο κουμπί (Hover) */
.weeks-timeline .week-btn.unlocked:hover {
    transform: translateY(-5px) scale(1.02); /* Σηκώνεται και μεγαλώνει λίγο */
    box-shadow: 0 15px 25px rgba(0,0,0,0.2), inset 0 -5px 0 rgba(0,0,0,0.15);
}

/* Όταν πατάς το κουμπί (Click) - Πηγαίνει προς τα μέσα! */
.weeks-timeline .week-btn.unlocked:active {
    transform: translateY(2px);
    box-shadow: 0 3px 5px rgba(0,0,0,0.2), inset 0 0px 0 rgba(0,0,0,0.15);
}

/* Στυλ για το εικονίδιο */
.week-icon {
    font-size: 1.6rem;
    background: rgba(255, 255, 255, 0.3); /* Ημιδιάφανο κυκλάκι πίσω από το εικονίδιο */
    border-radius: 50%;
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}

/* Το μαγικό χοροπηδητό του εικονιδίου στο Hover! */
.weeks-timeline .week-btn.unlocked:hover .week-icon {
    animation: bounceIcon 0.8s infinite alternate;
}

@keyframes bounceIcon {
    0% { transform: translateY(0); }
    100% { transform: translateY(-5px) scale(1.1); }
}