/* ============================================================
   DIAMOND APARTMENT - COMPLETE CUSTOM STYLES
   ============================================================ */

/* 1. ΓΕΝΙΚΟ BACKGROUND & ΒΑΣΗ (ΙΔΙΟ ΜΕ INDEX.HTML) */
.apartment-page {
    background-color: #0f172a !important; /* Το σκούρο μπλε της αρχικής */
    color: #f8fafc;
    min-height: 100vh;
}

/* 2. HEADER & BACK LINK */
.back-link-modern {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 22px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50px;
    color: #f8fafc !important;
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: 700;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.back-link-modern:hover {
    background: #40bad8;
    color: #0f172a !important;
    transform: translateX(-5px);
}

/* 3. HERO SECTION */
.apt-hero {
    padding-top: 150px; /* Κενό από το fixed header */
    text-align: center;
    margin-bottom: 50px;
}

.hero-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: clamp(2.2rem, 8vw, 3.8rem);
    color: #40bad8;
    text-transform: uppercase;
    letter-spacing: 4px;
    margin-bottom: 10px;
}

.hero-subtitle {
    color: #cbd5e1;
    font-size: 1.1rem;
    opacity: 0.9;
}

/* 4. GALLERY ALBUM (Διορθωμένη Διάταξη) */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin-bottom: 60px;
}

.gallery-item img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: transform 0.3s ease;
}

.gallery-item img:hover {
    transform: scale(1.02);
}

/* Η μεγάλη εικόνα στο άλμπουμ */
.gallery-item.large {
    grid-column: span 2;
}

.gallery-item.large img {
    height: 450px;
}

/* 5. ΗΜΕΡΟΛΟΓΙΟ (Μοντέρνα Βελάκια Δεξιά) */
.calendar-wrapper {
    background: #1e293b;
    padding: 30px;
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.calendar-header-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
}

.calendar-nav-group {
    display: flex;
    gap: 12px;
}

.btn-nav-modern {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: #334155;
    color: #40bad8;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.btn-nav-modern:hover:not(:disabled) {
    background: #40bad8;
    color: #1e293b;
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 10px;
}

.calendar-day {
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #0f172a;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.03);
    cursor: pointer;
}

.day-price { font-size: 0.7rem; color: #40bad8; margin-top: 5px; font-weight: 700; }
.day-selected { background: #40bad8 !important; color: #0f172a !important; box-shadow: 0 0 15px rgba(64, 186, 216, 0.3); }
.day-selected .day-price { color: #0f172a; }
.day-past { opacity: 0.15; cursor: not-allowed; }

/* 6. ΠΙΝΑΚΑΣ ΚΡΑΤΗΣΗΣ (Booking Card) */
.booking-card {
    background: #1e293b;
    padding: 35px;
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

/* Custom Select Ατόμων */
.input-group {
    margin-bottom: 25px;
}

#guestCount {
    width: 100%;
    padding: 14px 18px;
    background: #0f172a;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    color: white;
    font-weight: 600;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2340bad8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 18px center;
    background-size: 20px;
    cursor: pointer;
}

/* Μοντέρνες Γραμμές Ημερομηνιών */
.date-row { 
    display: flex; 
    justify-content: space-between; 
    align-items: center;
    margin-bottom: 15px; 
    padding: 16px 20px; 
    background: #0f172a; 
    border-radius: 14px; 
}

.date-row span { color: #94a3b8; font-size: 0.9rem; }
.date-row strong { color: #f8fafc; font-size: 1rem; }

/* Μοντέρνο Parking Toggle */
.extra-services {
    margin: 30px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 5px;
}

.toggle-switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 26px;
}

.toggle-switch input { opacity: 0; width: 0; height: 0; }

.slider {
    position: absolute; cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #334155;
    transition: .4s; border-radius: 34px;
}

.slider:before {
    position: absolute; content: "";
    height: 20px; width: 20px;
    left: 3px; bottom: 3px;
    background-color: white;
    transition: .4s; border-radius: 50%;
}

input:checked + .slider { background-color: #40bad8; }
input:checked + .slider:before { transform: translateX(24px); }

/* Στοίχιση Τιμών Δεξιά */
.price-breakdown .date-row span:last-child {
    color: #40bad8;
    font-weight: 700;
}

.total-section {
    margin-top: 35px;
}

.total-divider { border: 0; border-top: 2px solid #40bad8; opacity: 0.3; margin-bottom: 20px; }

.total-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

#totalPrice {
    color: #40bad8;
    font-size: 1.8rem;
    font-weight: 800;
}

/* Κεντραρισμένο WhatsApp Κουμπί */
/* Κεντραρισμένο Κουμπί με το Αρχικό Χρώμα */
#confirmBooking {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 40px auto 0 auto; 
    padding: 16px 35px;
    width: 100%; 
    max-width: 320px;
    background: #40bad8; /* Επιστροφή στο αρχικό μπλε */
    color: #0f172a;      /* Σκούρο κείμενο για αντίθεση */
    border: none;
    border-radius: 50px;
    font-size: 1rem;
    font-weight: 700;
    gap: 12px;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}

#confirmBooking:hover {
    background: #35a5c1; /* Ελαφρώς πιο σκούρο στο hover */
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(64, 186, 216, 0.2);
}

/* Αν θέλεις το εικονίδιο του WhatsApp να παραμείνει πράσινο μέσα στο μπλε κουμπί */
#confirmBooking i {
    font-size: 1.2rem;
}

/* 7. RESPONSIVE DESKTOP ΔΙΑΤΑΞΗ */
@media (min-width: 992px) {
    .gallery-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .gallery-item.large {
        grid-column: span 2;
        grid-row: span 2;
    }

    .gallery-item.large img {
        height: 515px; 
    }

    .booking-container {
        display: flex;
        gap: 40px;
        align-items: flex-start;
        margin-top: 20px;
    }

    .calendar-wrapper { flex: 1.8; }
    .booking-sidebar { flex: 1.2; position: sticky; top: 120px; }
}

/* --- FOOTER ΣΤΟ ΚΑΤΩ ΜΕΡΟΣ --- */
.apartment-footer {
    padding: 60px 0 30px 0; /* Κενό πάνω και κάτω */
    text-align: center;
}

.footer-line {
    border: 0;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(64, 186, 216, 0.3), transparent);
    margin-bottom: 30px;
}

.footer-copyright p {
    color: #94a3b8;
    font-size: 0.85rem;
    letter-spacing: 1px;
}

/* --- GALLERY ΜΕ ΕΠΙΚΑΛΥΨΗ (+5) --- */
.more-photos {
    position: relative;
    cursor: pointer;
}

.more-photos .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 23, 42, 0.7); /* Σκούρο φίλτρο */
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px; /* Ίδιο με τις εικόνες */
    transition: background 0.3s ease;
}

.more-photos:hover .overlay {
    background: rgba(64, 186, 216, 0.5); /* Αλλάζει χρώμα στο hover */
}

.more-photos .overlay span {
    color: white;
    font-size: 1.2rem;
    font-weight: 700;
    font-family: 'Montserrat', sans-serif;
}

/* Εξασφάλιση ότι η τελευταία φωτογραφία χωράει στο grid */
@media (min-width: 992px) {
    /* Αν έχουμε 5 φωτό συνολικά (1 μεγάλη + 4 μικρές) */
    .gallery-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.lightbox-content {
    max-width: 90%;
    max-height: 80vh;
}

.lightbox-content img {
    width: 100%; height: auto;
    border-radius: 12px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
}

/* LIGHTBOX - ΟΛΟΚΛΗΡΩΜΕΝΟ */
.lightbox {
    display: none; /* Αρχικά κρυφό */
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.95);
    z-index: 99999; /* Πολύ υψηλό για να είναι πάνω από όλα */
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
}

/* ΤΟ ΚΟΥΜΠΙ X - Διορθωμένο για PC */
/* LIGHTBOX - ΠΡΕΠΕΙ ΝΑ ΕΙΝΑΙ ΠΑΝΩ ΑΠΟ ΤΟ NAVBAR */
.lightbox {
    z-index: 999999; /* Ένα παραπάνω από το header */
}

/* ΤΟ ΚΟΥΜΠΙ X - Πιο χαμηλά για να μην κρύβεται από το navbar */
.close-lightbox {
    position: absolute;
    top: 20px; /* Το κατεβάζουμε στα 100px από την κορυφή */
    right: 20px;
    width: 55px;
    height: 55px;
    background: #40bad8; 
    color: #0f172a;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    z-index: 1000000; /* Το υψηλότερο z-index στη σελίδα */
    box-shadow: 0 5px 20px rgba(0,0,0,0.5);
    transition: all 0.3s ease;
}

.close-lightbox:hover {
    transform: scale(1.1);
    background: white;
}

/* Προσθήκη για να μην μπερδεύεται το header με τη γκαλερί */
.main-header {
    z-index: 1000; /* Χαμηλότερο από το lightbox */
}

.close-lightbox:hover {
    transform: scale(1.1) rotate(90deg);
}

.lightbox-content img {
    max-width: 90%;
    max-height: 85vh;
    border-radius: 10px;
    user-select: none; /* Απαγόρευση επιλογής για καλύτερο swipe */
}

/* Βελάκια */
.lightbox-prev, .lightbox-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,0.1);
    border: none;
    color: white;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 20px;
    transition: 0.3s;
}

.lightbox-prev:hover, .lightbox-next:hover { background: #40bad8; color: #0f172a; }
.lightbox-prev { left: 20px; }
.lightbox-next { right: 20px; }

/* Απόκρυψη label Ατόμων (όπως ζήτησες) */
.input-group label {
    display: none;
}

/* ============================================================
   MOBILE OPTIMIZATION (Media Query για κινητά)
   ============================================================ */

@media (max-width: 768px) {
    /* 1. Κουμπί Επιστροφή: Μόνο το βελάκι */
    .back-link-modern span {
        display: none; /* Κρύβει το κείμενο "ΕΠΙΣΤΡΟΦΗ" */
    }
    .back-link-modern {
        padding: 10px 15px; /* Μικραίνει το πλαίσιο */
        border-radius: 50%; /* Το κάνει κυκλικό */
    }

    /* 2. Gallery: Μόνο η πρώτη εικόνα με το Overlay */
    .gallery-grid {
        grid-template-columns: 1fr; /* Μία στήλη */
    }
    /* Κρύβουμε τις ενδιάμεσες εικόνες (2, 3, 4) */
    .gallery-item:not(.large):not(.more-photos) {
        display: none;
    }
    /* Κάνουμε την πρώτη εικόνα και το overlay να φαίνονται σωστά */
    .gallery-item.large {
        grid-column: span 1;
        margin-bottom: -15px; /* Μειώνουμε το κενό */
    }
    .gallery-item.large img {
        height: 250px; /* Μικρότερο ύψος για κινητά */
    }
    .more-photos {
        display: block !important;
    }
    .more-photos img {
        height: 200px;
    }

    /* 3. Ημερολόγιο & Πίνακας Τιμών: Περιορισμός εντός οθόνης */
    .container {
        padding: 0 15px; /* Εξασφαλίζει ότι τίποτα δεν κολλάει στις άκρες */
        overflow-x: hidden; /* Αποφυγή οριζόντιου scroll */
    }

    .calendar-wrapper, .booking-card {
        width: 100%;
        box-sizing: border-box; /* Η εσωτερική απόσταση δεν μεγαλώνει το πλάτος */
        padding: 20px; /* Λίγο λιγότερο padding για να χωράνε όλα */
    }

    .calendar-grid {
        gap: 5px; /* Μικρότερο κενό ανάμεσα στις μέρες */
    }

    .calendar-day {
        font-size: 0.8rem; /* Μικρότερη γραμματοσειρά για να χωράει */
    }

    /* 4. Στοίχιση "Το ένα πάνω από το άλλο" με απόσταση */
    .booking-container {
        display: flex;
        flex-direction: column; /* Vertical διάταξη */
        gap: 30px; /* Απόσταση ανάμεσα στο ημερολόγιο και την κάρτα κράτησης */
    }

    /* Διόρθωση των date-rows για να μην ξεχειλίζουν */
    .date-row {
        padding: 12px 15px;
        flex-wrap: wrap; /* Αν το κείμενο είναι μεγάλο, αλλάζει γραμμή */
        gap: 5px;
    }

    /* Lightbox βελάκια σε κινητά */
    .lightbox-prev, .lightbox-next {
        width: 45px;
        height: 45px;
    }
    .close-lightbox {
        top: 20px; /* Πιο πάνω στα κινητά */
        right: 20px;
    }
}

/* Στυλ για τα γράμματα των ημερών (Δ-Κ) */
.calendar-day-header {
    text-align: center;
    font-weight: 800;
    color: #40bad8;
    font-size: 0.8rem;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(64, 186, 216, 0.2);
    margin-bottom: 5px;
}

@media (max-width: 768px) {
    /* 1. Κρύβουμε ΟΛΕΣ τις άλλες εικόνες και το κουτί "+5" */
    .gallery-item:not(.large) {
        display: none !important;
    }

    /* 2. Κάνουμε την πρώτη εικόνα να φαίνεται ως η μοναδική */
    .gallery-grid {
        grid-template-columns: 1fr;
        margin-bottom: 30px;
    }

    .gallery-item.large {
        position: relative;
        cursor: pointer;
        display: block !important; /* Σιγουρευόμαστε ότι φαίνεται */
    }

    /* 3. Δημιουργούμε το εφέ "+5" πάνω στην ΠΡΩΤΗ εικόνα */
    .gallery-item.large::after {
        content: "+16 Φωτογραφίες";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(15, 23, 42, 0.5); /* Ημιδιάφανο σκούρο */
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-family: 'Montserrat', sans-serif;
        font-weight: 700;
        font-size: 1.4rem;
        border-radius: 15px;
        pointer-events: none; /* Το κλικ περνάει από κάτω στην εικόνα */
    }
}

@media (max-width: 768px) {
    /* ... οι προηγούμενες ρυθμίσεις για gallery και κουμπιά ... */

    /* Διόρθωση Κεντραρίσματος Lightbox */
    .lightbox {
        display: none; 
        align-items: center;    /* Κεντράρισμα κάθετα */
        justify-content: center; /* Κεντράρισμα οριζόντια */
        padding: 0;             /* Αφαίρεση padding που ίσως σπρώχνει την εικόνα */
    }

    .lightbox-content {
        width: 100%;            /* Πλήρες πλάτος περιέκτη */
        max-width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0;              /* Αφαίρεση περιθωρίων */
    }

    .lightbox-content img {
        max-width: 95vw;        /* Η εικόνα να πιάνει σχεδόν όλο το πλάτος της οθόνης */
        max-height: 80vh;       /* Περιορισμός ύψους για να μην κρύβεται από τα βελάκια */
        object-fit: contain;    /* Διατήρηση αναλογιών χωρίς παραμόρφωση */
        margin: 0 auto;         /* Απόλυτο κεντράρισμα */
        display: block;
    }

    /* Μετακίνηση των βελων πιο χαμηλά ή πιο πλάγια για να μην εμποδίζουν */
    .lightbox-prev { left: 5px; z-index: 1000001; }
    .lightbox-next { right: 5px; z-index: 1000001; }

    .close-lightbox {
        top: 20px; 
        right: 20px;
        width: 45px;
        height: 45px;
        font-size: 20px;
    }
}

@media (max-width: 768px) {
    /* Εξασφάλιση ότι το container δεν επιτρέπει οριζόντιο σκρολ */
    body, html {
        overflow-x: hidden;
        width: 100%;
    }

    /* Διόρθωση πλαισίου ημερολογίου */
    .calendar-wrapper {
        padding: 10px; /* Μείωση εσωτερικού κενού για περισσότερο χώρο */
        width: 100%;
        box-sizing: border-box;
    }

    .calendar-grid {
        display: grid;
        /* Αναγκάζει τις 7 στήλες να είναι ισόποσες και να χωράνε 100% */
        grid-template-columns: repeat(7, 1fr) !important; 
        gap: 4px; /* Πολύ μικρό κενό για να κερδίσουμε χώρο */
        width: 100%;
    }

    .calendar-day, .calendar-day-header {
        width: auto; /* Αφήνουμε το grid να ορίσει το πλάτος */
        min-width: 0; /* Επιτρέπει στα κουτάκια να μικρύνουν όσο χρειάζεται */
        aspect-ratio: 1; /* Διατήρηση τετράγωνου σχήματος */
        padding: 2px;
        font-size: 0.75rem; /* Μικρότερη γραμματοσειρά για το SE */
    }

    .day-price {
        font-size: 0.55rem; /* Πολύ μικρή τιμή για να χωράει στο κουτάκι */
        margin-top: 2px;
    }

    /* Διόρθωση της κάρτας κράτησης για να μην ξεχειλίζει */
    .booking-card {
        padding: 15px;
        width: 100%;
        box-sizing: border-box;
    }

    .date-row {
        padding: 10px;
        font-size: 0.85rem;
    }
}

/* ============================================================
   ΒΕΛΤΙΩΣΗ ΚΑΡΤΑΣ ΚΡΑΤΗΣΗΣ & ΣΤΟΙΧΕΙΩΝ ΠΕΛΑΤΗ
   ============================================================ */

/* Το κεντρικό πλαίσιο της κάρτας */
.booking-card {
    background: #1e293b !important;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 25px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

/* Επικεφαλίδα και Κουκκίδες (Indicators) */
.booking-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.step-indicators {
    display: flex;
    gap: 6px;
}

.step-dot {
    width: 8px;
    height: 8px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    transition: all 0.3s ease;
}

.step-dot.active {
    background: #40bad8;
    box-shadow: 0 0 10px rgba(64, 186, 216, 0.6);
    transform: scale(1.2);
}

/* Στυλ για τα πεδία εισαγωγής (Input Fields) */
.modern-input, 
#bookingStep2 input[type="text"], 
#bookingStep2 input[type="tel"] {
    width: 100%;
    padding: 14px 16px;
    margin-bottom: 12px;
    background: #0f172a !important;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    color: #ffffff;
    font-size: 0.95rem;
    transition: all 0.3s ease;
}

.modern-input:focus, 
#bookingStep2 input:focus {
    border-color: #40bad8;
    box-shadow: 0 0 0 2px rgba(64, 186, 216, 0.2);
    outline: none;
}

/* Πληροφορίες επιλεγμένων ημερομηνιών */
.selected-dates-info {
    background: rgba(15, 23, 42, 0.5);
    border-radius: 12px;
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.date-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.9rem;
    margin-bottom: 5px;
}

.date-row strong {
    color: #40bad8;
}

/* Συνολικό Κόστος */
.total-section {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 700;
    font-size: 1.1rem;
}

#totalPrice {
    color: #40bad8;
    font-size: 1.4rem;
}

/* Κουμπί Πίσω */
.back-text-btn {
    display: block;
    width: 100%;
    background: none;
    border: none;
    color: #94a3b8;
    margin-top: 15px;
    font-size: 0.85rem;
    text-decoration: underline;
    cursor: pointer;
    transition: color 0.2s;
}

.back-text-btn:hover {
    color: #ffffff;
}

/* Διόρθωση Modal Πληρωμής */
.payment-modal-content {
    background: #1e293b;
    border: 1px solid #40bad8;
    border-radius: 24px;
    padding: 35px;
}

.payment-btn {
    background: #0f172a;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 20px;
    transition: all 0.3s ease;
}

.payment-btn:hover {
    background: #2d3e5a;
    border-color: #40bad8;
    transform: translateY(-2px);
}

/* 1. ΚΡΥΒΟΥΜΕ ΤΟ MODAL ΠΛΗΡΩΜΗΣ (για να μην φαίνεται με το που ανοίγει η σελίδα) */
.payment-modal-overlay {
    display: none; /* ΑΥΤΟ ΕΛΕΙΠΕ */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    z-index: 10000;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(8px);
}

/* 2. ΟΜΟΡΦΑΙΝΟΥΜΕ ΤΟ ΠΛΑΙΣΙΟ ΤΩΝ ΣΤΟΙΧΕΙΩΝ (Βήμα 2) */
#bookingStep2 {
    background: rgba(15, 23, 42, 0.6);
    padding: 20px;
    border-radius: 15px;
    border: 1px solid rgba(64, 186, 216, 0.2);
    margin-top: 15px;
}

#bookingStep2 input {
    width: 100%;
    padding: 12px;
    margin-bottom: 12px;
    background: #0f172a;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: white;
    font-size: 1rem;
}

#bookingStep2 input:focus {
    border-color: #40bad8;
    outline: none;
    box-shadow: 0 0 8px rgba(64, 186, 216, 0.3);
}

/* 3. ΟΙ ΚΟΥΚΚΙΔΕΣ (Steps) */
.step-indicators {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 20px;
}

.step-dot {
    width: 10px;
    height: 10px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
}

.step-dot.active {
    background: #40bad8;
    box-shadow: 0 0 10px #40bad8;
    transform: scale(1.2);
}

/* 4. ΚΟΥΜΠΙ ΠΙΣΩ */
.back-text-btn {
    background: none;
    border: none;
    color: #94a3b8;
    text-decoration: underline;
    cursor: pointer;
    margin-top: 10px;
    width: 100%;
    font-size: 0.9rem;
}

/* 1. Αφαίρεση του γκρι πλαισίου/σκιάς από την Αφιξη/Αναχώρηση */
.selected-dates-info {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 10px 0 !important;
}

/* 2. Αφαίρεση μόνο της γκρι γραμμής (divider) */
/* Κρατάμε τη γαλάζια αν αυτή ορίζεται στο .total-section ή αλλού */
.total-divider {
    display: none !important; /* Σβήνει τη γκρι γραμμή */
}

.total-section {
    border-top: none !important; /* Σιγουρεύουμε ότι δεν υπάρχει έξτρα γκρι περίγραμμα */
    margin-top: 10px !important;
    padding-top: 10px !important;
}

/* Αν η γαλάζια γραμμή που θέλεις να κρατήσεις είναι αυτή, 
   την ορίζουμε εδώ καθαρά για να είμαστε σίγουροι */
.total-row {
    border-top: 2px solid #40bad8 !important; /* Η γαλάζια γραμμή που παραμένει */
    padding-top: 15px;
    margin-top: 5px;
}

/* Container για τα κουμπιά στο Βήμα 2 */
.step2-buttons {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

/* Προσαρμογή του κουμπιού Πίσω */
#btnBackToStep1, .back-text-btn {
    flex: 1; /* Παίρνει το 1/3 του χώρου */
    margin-top: 0 !important; /* Αφαιρούμε το πάνω κενό */
    padding: 12px 5px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    white-space: nowrap;
}

/* Προσαρμογή του κουμπιού Ολοκλήρωση */
#confirmBooking {
    flex: 2; /* Παίρνει τα 2/3 του χώρου για να είναι πιο κυρίαρχο */
}

/* 1. Βάζουμε τα κουμπιά δίπλα-δίπλα χωρίς να αλλάξουμε το HTML */
/* Στοχεύουμε απευθείας το div που περιέχει τα κουμπιά στο Step 2 */
#bookingStep2 {
    display: none; /* Παραμένει κρυφό μέχρι να πατηθεί η συνέχεια */
}

/* Αυτό μαγικά θα βάλει τα δύο κουμπιά στην ίδια σειρά */
#bookingStep2 button {
    display: inline-block;
    vertical-align: middle;
}

/* Στυλ για το κουμπί Πίσω (αυτό που έχει το κείμενο "Πίσω") */
#bookingStep2 button:not(.btn-primary) {
    width: 80px !important;
    height: 45px;
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 10px;
    color: white !important;
    margin-right: 10px; /* Απόσταση από το κουμπί Ολοκλήρωση */
    cursor: pointer;
}

/* Στυλ για το κουμπί Ολοκλήρωση (το βασικό σου μπλε κουμπί) */
#bookingStep2 button.btn-primary {
    width: calc(100% - 100px) !important; /* Παίρνει τον υπόλοιπο χώρο */
    height: 45px;
}

/* 2. Διορθώσεις στο Modal Πληρωμής */
.payment-modal-content {
    background: #1e293b !important;
    border: 2px solid #40bad8 !important;
    padding: 40px 25px 25px 25px !important;
    position: relative;
}

/* Τίτλος και οδηγία πιο ψηλά και άσπρα */
.payment-modal-content h3 {
    margin-top: 0 !important;
    color: white !important;
}

.payment-modal-content p {
    margin-bottom: 30px !important; /* Χώρος πριν τις τράπεζες */
    color: white !important;
}

/* Το X μέσα στο πλαίσιο */
.close-payment-modal {
    position: absolute !important;
    top: 10px !important;
    right: 15px !important;
    color: white !important;
    font-size: 25px !important;
    cursor: pointer;
}

/* Όλα τα στοιχεία των πληρωμών άσπρα */
.payment-btn i, .payment-btn span, .payment-btn small {
    color: white !important;
}

#bookingStep2 button.btn-primary {
    font-size: 0.75rem !important;    /* Μέγεθος γραμμάτων */
    font-weight: 900 !important;     /* Πάχος (700 = Bold) */
    letter-spacing: 1px !important;  /* Απόσταση ανάμεσα στα γράμματα */
}

#bookingStep2 button.btn-primary {
    align-items: center !important;    /* Κεντράρει κάθετα */
    text-align: center !important;     /* Επιπλέον σιγουριά για το κείμενο */
    line-height: 1 !important;         /* Αφαιρεί περίεργα κενά ύψους */
    height: 45px !important;           /* Σταθερό ύψος για να φαίνεται το κεντράρισμα */
}

/* Στοίχιση κουμπιών πληρωμής για κινητά και desktop */
.payment-options {
    display: flex;
    flex-direction: column; /* Το ένα κάτω από το άλλο */
    gap: 12px;
    width: 100%;
}

.payment-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important; /* Στοίχιση όλων από αριστερά */
    text-align: left !important;
    padding: 15px 20px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Σταθερό πλάτος στα εικονίδια για να ξεκινάνε τα γράμματα από το ίδιο σημείο */
.payment-btn i {
    width: 30px !important; 
    margin-right: 15px !important;
    margin-bottom: 0 !important; /* Αφαίρεση κενού που μπορεί να τα χαλάει */
    font-size: 1.5rem !important;
    display: flex;
    justify-content: center;
}

/* Στοίχιση των κειμένων μέσα στα κουμπιά */
.payment-btn div {
    display: flex;
    flex-direction: column;
}

.payment-btn span {
    font-size: 1rem !important;
    line-height: 1.2 !important;
}

.payment-btn small {
    font-size: 0.75rem !important;
    opacity: 0.8;
}

.terms-text {
    background: #0f172a;
    padding: 15px;
    border-radius: 12px;
    max-height: 200px;
    overflow-y: auto;
    text-align: left;
    margin: 20px 0;
    font-size: 0.9rem;
    color: #cbd5e1;
    border: 1px solid rgba(255,255,255,0.1);
}

.terms-actions {
    display: flex;
    gap: 10px;
}

.btn-accept {
    flex: 2;
    background: #40bad8;
    border: none;
    padding: 12px;
    border-radius: 10px;
    font-weight: bold;
    cursor: pointer;
}

.btn-reject {
    flex: 1;
    background: rgba(255,255,255,0.1);
    color: white;
    border: 1px solid rgba(255,255,255,0.2);
    padding: 12px;
    border-radius: 10px;
    cursor: pointer;
}

/* Κλάση για το κόκκινο πλαίσιο στα κενά πεδία */
.input-error {
    border: 2px solid #ff4b4b !important;
}

#paymentDetails p {
    font-size: 0.85rem;
    margin: 8px 0;
    color: #cbd5e1;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding-bottom: 5px;
}

#paymentDetails strong {
    color: #40bad8;
    display: block;
}

.payment-btn-small {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: white;
    padding: 10px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.8rem;
    transition: all 0.2s;
}

.payment-btn-small:hover {
    background: #40bad8;
    color: #0f172a;
}

/* Απόσταση τίτλου από τα κουμπιά */
.modal-title-spacing {
    margin-bottom: 30px !important;
    padding-top: 10px;
}

/* Το βέλος επιστροφής πάνω αριστερά */
.back-payment-arrow {
    position: absolute;
    top: 20px;
    left: 20px;
    font-size: 1.2rem;
    color: #40bad8;
    cursor: pointer;
    transition: transform 0.2s;
}

.back-payment-arrow:hover {
    transform: scale(1.2);
}

/* Έντονα γράμματα στις τράπεζες */
.payment-btn-small {
    font-weight: 800 !important;
    letter-spacing: 0.5px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: white;
    padding: 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.payment-btn-small:hover {
    background: #40bad8;
    color: #0f172a;
}

/* Grid για τις τράπεζες */
.payment-options-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

/* Επαναφορά του προηγούμενου στυλ με Responsive διορθώσεις */
.terms-modal-content {
    background: #1e293b;
    padding: 30px; /* Το παλιό καλό padding */
    border-radius: 15px;
    max-width: 550px; /* Μέγιστο πλάτος για υπολογιστή */
    width: 90%;       /* Για να έχει αέρα δεξιά-αριστερά στο κινητό */
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    position: relative;
    border: 1px solid rgba(255,255,255,0.1);
    box-sizing: border-box; /* ΚΡΑΤΑΕΙ ΤΑ ΠΑΝΤΑ ΜΕΣΑ ΣΤΟ ΠΛΑΙΣΙΟ */
    margin: 0 auto;
}

.terms-scroll-area {
    overflow-y: auto;
    margin: 20px 0;
    padding-right: 15px;
    text-align: left;
    scrollbar-width: thin;
    scrollbar-color: #40bad8 transparent;
}

.term-item {
    display: flex;
    gap: 15px;
    margin-bottom: 25px;
}

.term-item i {
    color: #40bad8;
    font-size: 1.2rem;
    min-width: 25px; /* Για να μην συμπιέζεται το εικονίδιο */
    margin-top: 3px;
}

.term-item strong {
    display: block;
    color: #fff;
    font-size: 1rem;
    margin-bottom: 5px;
}

.term-item p {
    font-size: 0.9rem;
    color: #cbd5e1;
    line-height: 1.6;
    margin: 0;
}

/* Διόρθωση για κινητά ώστε να μη "μπουκώνει" το κείμενο */
@media (max-width: 480px) {
    .terms-modal-content {
        padding: 20px; /* Λίγο λιγότερο padding μόνο στα πολύ μικρά κινητά */
        width: 95%;
    }
    .term-item p {
        font-size: 0.85rem; /* Ελαφρώς μικρότερα γράμματα για να χωράνε */
    }
}

/* Το κουμπί ΑΠΟΡΡΙΨΗ στην κανονική του μορφή */
#btnRejectTerms {
    background: rgba(255, 255, 255, 0.05) !important;
    color: #cbd5e1 !important; /* Γκρι-λευκό χρώμα αρχικά για να μην κουράζει */
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    transition: all 0.3s ease;
    font-weight: 700;
}

/* Όταν το ποντίκι περνάει από πάνω (Hover) */
#btnRejectTerms:hover {
    background: rgba(255, 75, 75, 0.1) !important; /* Ελαφρύ κόκκινο φόντο */
    color: #ff4b4b !important;                   /* ΕΝΤΟΝΟ ΚΟΚΚΙΝΟ στα γράμματα */
    border: 1px solid #ff4b4b !important;        /* Κόκκινο περίγραμμα */
}

/* Βασικό στυλ (για όλες τις συσκευές - κυρίως κινητά) */
.terms-modal-content {
    background: #1e293b;
    padding: 30px;
    border-radius: 15px;
    max-width: 550px;
    width: 90%;
    display: flex;
    flex-direction: column;
    position: relative;
    border: 1px solid rgba(255,255,255,0.1);
    box-sizing: border-box;
    margin: 20px auto; /* Μικρό περιθώριο για τα κινητά */
    max-height: 90vh;
}

/* Ειδική ρύθμιση ΜΟΝΟ για υπολογιστές και μεγάλες οθόνες */
@media (min-width: 1024px) {
    .terms-modal-content {
        margin-top: 100px; /* Κατεβαίνει κάτω μόνο σε υπολογιστή */
        max-height: 80vh;  /* Προσαρμογή ύψους για μεγάλες οθόνες */
    }
}

.clickable-date {
    cursor: pointer;
    transition: background 0.3s;
    border: 1px solid transparent;
}
.clickable-date:hover {
    background: rgba(64, 186, 216, 0.1);
    border-color: #40bad8;
}

.mini-calendar-popup {
    position: absolute;
    background: #1e293b;
    border: 2px solid #40bad8;
    border-radius: 15px;
    padding: 15px;
    z-index: 1000;
    width: 280px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    margin-top: 10px;
}

.mini-calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.mini-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
}

.mini-day {
    padding: 5px;
    text-align: center;
    font-size: 0.8rem;
    cursor: pointer;
    border-radius: 5px;
}

.mini-day:hover:not(.mini-disabled) {
    background: #40bad8;
    color: #0f172a;
}

.mini-disabled {
    opacity: 0.2;
    cursor: not-allowed;
}

.mini-selected {
    background: #40bad8;
    color: #0f172a;
    font-weight: bold;
}

/* Σήμα Προσφοράς στο Ημερολόγιο */
.calendar-day {
    position: relative; 
    overflow: hidden; 
}

.promo-badge {
    position: absolute;
    top: 0;
    right: 0;
    background: #ff385c;
    color: white;
    font-size: 0.65rem;
    width: 20px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0 10px 0 10px; 
    font-weight: 800;
    z-index: 5;
    pointer-events: none; /* Για να μην εμποδίζει το κλικ στην ημερομηνία */
}

/* ΕΙΔΙΚΕΣ ΡΥΘΜΙΣΕΙΣ ΓΙΑ ΚΙΝΗΤΑ (Mobile Optimization) */
@media (max-width: 600px) {
    .promo-badge {
        width: 15px;      /* Ακόμα πιο μικρό στα κινητά */
        height: 14px;
        font-size: 0.5rem; /* Μικρότερο το σύμβολο % */
        border-radius: 0 8px 0 6px; 
        opacity: 0.9;      /* Ελαφρώς διάφανο για να αχνοφαίνεται αν υπάρχει αριθμός από κάτω */
    }
    
    /* Αν ο αριθμός της ημερομηνίας είναι πολύ ψηλά, τον σπρώχνουμε λίγο κάτω */
    .calendar-day {
        display: flex;
        align-items: center;
        justify-content: center;
        padding-top: 5px; 
    }
}

/* Αν η μέρα είναι επιλεγμένη, αλλάζουμε το χρώμα του badge για αντίθεση */
.day-selected .promo-badge {
    background: white;
    color: #ff385c;
}

.btn-primary {
    background: var(--primary);
    color: var(--background);
    box-shadow: 0 4px 20px rgba(212, 175, 55, 0.3);
}

/* Κρύβει το header όταν η γκαλερί είναι ανοιχτή */
body.lightbox-active .main-header {
    display: none !important;
}

.terms-container {
    margin: 20px 0;
    text-align: left;
    font-size: 14px;
}

.custom-checkbox {
    display: flex;
    align-items: center;
    cursor: pointer;
    position: relative;
    padding-left: 35px;
    user-select: none;
}

.custom-checkbox input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0; width: 0;
}

.checkmark {
    position: absolute;
    top: 0; left: 0;
    height: 22px; width: 22px;
    background-color: #eee;
    border-radius: 4px;
    border: 2px solid #007bff; /* Μπλε του Diamond */
}

.custom-checkbox:hover input ~ .checkmark {
    background-color: #ccc;
}

.custom-checkbox input:checked ~ .checkmark {
    background-color: #007bff;
}

.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

.custom-checkbox input:checked ~ .checkmark:after {
    display: block;
}

.custom-checkbox .checkmark:after {
    left: 7px; top: 3px;
    width: 5px; height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
}

/* Στυλ για το Checkbox του Diamond */
#acceptLegalTerms {
    appearance: none; /* Σβήνει το κλασικό στυλ του browser */
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid #40bad8; /* Το μπλε χρώμα που έχεις στα link σου */
    border-radius: 4px;
    background-color: transparent;
    display: inline-block;
    position: relative;
    vertical-align: middle;
    cursor: pointer;
    flex-shrink: 0; /* Για να μην μικραίνει σε κινητά */
}

#acceptLegalTerms:checked {
    background-color: #40bad8;
}

/* Το "νι" (check mark) όταν πατιέται */
#acceptLegalTerms:checked::after {
    content: '✔';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 14px;
}

#acceptLegalTerms:focus {
    outline: none;
    box-shadow: 0 0 5px rgba(64, 186, 216, 0.5);
}

/* ΑΚΑΡΙΑΙΑ ΕΞΑΦΑΝΙΣΗ ΜΕ ΤΟ ΠΟΥ ΑΝΟΙΓΕΙ ΤΟ LIGHTBOX */
body.lightbox-active .promo-badge {
    display: none !important;
}

/* Σιγουρέψου ότι το lightbox είναι πάνω από όλα */
#lightbox {
    z-index: 99999 !important;
}

/* Container για τα dots κάτω από την εικόνα */
.lightbox-dots {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
}

/* Στυλ για τις κουκίδες (παρόμοιο με step-dots) */
.lightbox-dot {
    width: 10px;
    height: 10px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
}

/* Φωτιζόμενη κουκίδα (Active) [User Request 1 & 2] */
.lightbox-dot.active {
    background: #40bad8;
    box-shadow: 0 0 10px #40bad8;
    transform: scale(1.2);
}

@media (max-width: 768px) {
    #lightbox-img {
        display: block !important;
        max-width: 100%;
        max-height: 65vh; 
        object-fit: contain;
        
        /* Στρογγυλεμένες γωνίες ΠΑΝΤΟΥ */
        border-radius: 15px !important; 
        
        /* Σκιά και περίγραμμα για ομορφιά */
        margin: 0 auto;
    }

    /* 2. ΕΥΘΥΓΡΑΜΜΙΣΗ ΠΕΡΙΕΧΟΜΕΝΟΥ (Dots πάντα κάτω) */
    .lightbox-content {
        display: flex !important;
        flex-direction: column !important;
        align-items: center;
        justify-content: center;
        gap: 20px;
        width: 95%;
    }
    
    .lightbox-dots {
        margin-top: 5px;
        padding-bottom: 20px;
    }

    .lightbox-dot {
        width: 12px;
        height: 12px;
    }

    /* Βέλη στα κινητά με φόντο για να φαίνονται */
    .lightbox-prev, .lightbox-next {
        font-size: 25px;
        padding: 10px;
        background: rgba(0, 0, 0, 0.4);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* Καθαρίζουμε και ορίζουμε το νέο στυλ του Footer */
.footer-legal-wrapper {
    display: flex;
    flex-direction: column-reverse; /* Στο κινητό: Copyright κάτω, ΑΜΑ πάνω */
    align-items: center;
    gap: 10px;
    padding: 20px 0 40px 0;
}

.footer-copyright, 
.footer-ama {
    font-size: 0.9rem;
    font-family: inherit; /* Ίδια γραμματοσειρά παντού */
    color: var(--light-text);
    opacity: 0.8;
    margin: 0;
    text-transform: none;
}

/* Ρυθμίσεις για Υπολογιστές */
@media (min-width: 768px) {
    .footer-legal-wrapper {
        flex-direction: row; /* Στον υπολογιστή: Δίπλα-δίπλα */
        justify-content: space-between; /* Copyright αριστερά, ΑΜΑ δεξιά */
        align-items: center;
    }
}

/* Minimal Container για τα Bullets */
.document-selector-minimal {
    display: flex;
    gap: 25px;
    margin: 20px 0 10px 5px;
    background: transparent;
}

.radio-container {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 0.9rem;
    color: #f8fafc;
    position: relative;
    user-select: none;
}

/* Κρύβουμε το εργοστασιακό bullet */
.radio-container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

/* Το δικό μας custom bullet (κύκλος) */
.custom-bullet {
    height: 18px;
    width: 18px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    transition: all 0.3s ease;
    display: inline-block;
}

/* 1. Τα Bullets (Απόδειξη/Τιμολόγιο) */
.document-selector-minimal {
    display: flex;
    gap: 25px;
    margin: 20px 0 10px 5px;
    background: transparent;
}

.radio-container {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 0.9rem;
    color: #f8fafc;
    position: relative;
}

.radio-container input {
    position: absolute;
    opacity: 0;
}

.custom-bullet {
    height: 18px;
    width: 18px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    transition: all 0.3s ease;
    display: inline-block;
}

/* Επιλεγμένο Bullet: Τυρκουάζ Φωσφοριζέ */
.radio-container input:checked ~ .custom-bullet {
    border-color: #40bad8;
    box-shadow: 0 0 12px rgba(64, 186, 216, 0.6);
}

/* 2. Τα Πεδία του Τιμολογίου */
#invoiceFields input {
    border-left: 3px solid #40bad8 !important;
    background: rgba(64, 186, 216, 0.05);
    transition: all 0.3s ease;
}

/* 3. Το Λάθος (Κόκκινο) */
/* Χρησιμοποιούμε .input-error γιατί αυτή την κλάση προσθέτει το JS σου */
#invoiceFields input.input-error {
    border: 1px solid #ff4b4b !important;
    border-left: 3px solid #ff4b4b !important;
    box-shadow: 0 0 5px rgba(255, 75, 75, 0.2);
}

/* Σιγουρεύουμε ότι τα modals καλύπτουν απολύτως ΤΑ ΠΑΝΤΑ (Header, Footer, Badges) */
.payment-modal-overlay {
    z-index: 999999 !important; 
}

/* Τα εικονίδια % δεν χρειάζεται να είναι πολύ ψηλά */
.promo-badge {
    z-index: 2 !important; 
}

/* Minimal Container για τα Bullets - Κεντραρισμένο */
.document-selector-minimal {
    display: flex;
    justify-content: center; /* Κεντράρισμα οριζόντια */
    gap: 30px;               /* Λίγο περισσότερο κενό για άνεση */
    margin: 20px 0;
    background: transparent;
    width: 100%;             /* Εξασφάλιση πλήρους πλάτους για το κεντράρισμα */
}

/* Το βασικό σχήμα του bullet */
.custom-bullet {
    height: 18px;
    width: 18px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    display: inline-block;
    position: relative; /* Για να τοποθετηθεί η εσωτερική κουκίδα */
    transition: all 0.3s ease;
}

/* Η εσωτερική κουκίδα (αρχικά κρυφή) */
.custom-bullet::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0); /* Ξεκινάει από το μηδέν */
    width: 10px;  /* Το μέγεθος της εσωτερικής κουκίδας */
    height: 10px;
    background-color: #40bad8;
    border-radius: 50%;
    transition: transform 0.2s ease-in-out;
}

/* Όταν επιλεγεί (Checked) */
.radio-container input:checked ~ .custom-bullet {
    border-color: #40bad8; /* Το εξωτερικό πλάισιο γίνεται τυρκουάζ */
    box-shadow: 0 0 8px rgba(64, 186, 216, 0.3);
}

/* Εμφάνιση της εσωτερικής κουκίδας στο check */
.radio-container input:checked ~ .custom-bullet::after {
    transform: translate(-50%, -50%) scale(1); /* Μεγαλώνει και εμφανίζεται */
}

/* Διόρθωση στοίχισης τίτλου πληρωμής με το κουμπί X */
.payment-modal-content h3 {
    line-height: 45px;    /* Ευθυγραμμίζει το κείμενο στο ίδιο ύψος με το κουμπί */
    text-align: center;
}

.payment-modal-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 45px; /* Δίνει το απαραίτητο ύψος για να "κάτσει" το X σωστά */
}

.close-payment {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0 !important; /* Σιγουρεύει ότι το X δεν έχει δικά του περιθώρια */
}