/* Νέο καθαρό CSS για το μενού στο κινητό */

@media (max-width: 991px) {
    /* Κρύβουμε το αρχικό μενού που ανοίγει στα δεξιά */
    .nav-menu {
        display: none !important;
    }
    
    /* Κρύβουμε το overlay που μπορεί να εμφανίζεται */
    .nav-overlay {
        display: none !important;
    }
    
    /* Δημιουργούμε το νέο μενού ως fixed popup */
    .mobile-menu-popup {
        position: fixed;
        top: 0;
        right: -80%;
        width: 80%;
        max-width: 320px;
        height: 100%;
        background-color: white;
        z-index: 2000;
        padding: 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        box-shadow: -5px 0 20px rgba(0, 0, 0, 0.15);
        transition: right 0.3s ease-in-out;
        overflow-y: auto;
    }
    
    /* Προσθέτουμε ένα overlay για το background */
    .mobile-menu-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 1999;
        display: none;
        opacity: 0;
        transition: opacity 0.3s ease-in-out;
    }
    
    /* Όταν είναι ενεργό το overlay */
    .mobile-menu-overlay.active {
        display: block;
        opacity: 1;
    }
    
    /* Όταν είναι ενεργό το popup */
    .mobile-menu-popup.active {
        right: 0;
    }
    
    /* Κουμπί κλεισίματος */
    .mobile-menu-close {
        position: absolute;
        top: 15px;
        right: 15px;
        background: none;
        border: none;
        color: #ff80ab;
        font-size: 24px;
        cursor: pointer;
    }
    
    /* Λίστα συνδέσμων */
    .mobile-menu-links {
        display: flex;
        flex-direction: column;
        width: 100%;
        padding: 30px 0 0 0;
        list-style: none;
    }
    
    /* Κάθε στοιχείο λίστας */
    .mobile-menu-links li {
        margin: 10px 0;
        text-align: center;
    }
    
    /* Σύνδεσμοι */
    .mobile-menu-links a {
        display: inline-block;
        color: #333;
        text-decoration: none;
        font-size: 1.1rem;
        position: relative;
        padding: 10px 0;
    }
    
    /* Κουκκίδες πριν από κάθε σύνδεσμο */
    .mobile-menu-links a:before {
        content: '•';
        color: #ff80ab;
        margin-right: 10px;
        font-size: 20px;
    }
    
    /* Το mobile toggle button που θα ανοίγει το μενού */
    .mobile-toggle {
        display: block !important;
        cursor: pointer;
        color: #ff80ab !important;
        background-color: transparent !important;
        background: transparent !important;
        border: none !important;
        z-index: 1010;
        font-size: 24px;
        padding: 0 !important;
        width: 30px;
        height: 24px;
        position: relative !important;
        outline: none !important;
        box-shadow: none !important;
        border-radius: 0 !important;
    }
    
    /* Αφαιρούμε οποιοδήποτε background ή κύκλο */
    .mobile-toggle:before,
    .mobile-toggle:after {
        display: none !important;
        content: none !important;
        background: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }
    
    /* Αφαιρούμε το εικονίδιο του Font Awesome (αν υπάρχει) */
    .mobile-toggle i,
    .mobile-toggle .fa,
    .mobile-toggle .fas,
    .mobile-toggle .far,
    .mobile-toggle .fab {
        display: none !important;
    }
    
    /* Δημιουργούμε τις τρεις γραμμές με CSS - χρήση υψηλότερης ειδικότητας */
    html body .mobile-toggle span,
    html body .nav-wrapper .mobile-toggle span,
    html body header .mobile-toggle span,
    html body .navbar .mobile-toggle span,
    html body nav .mobile-toggle span {
        display: block !important;
        position: absolute !important;
        height: 2px !important;
        width: 70% !important;
        background: #ff80ab !important;
        border-radius: 2px !important;
        opacity: 1 !important;
        left: 0 !important;
        transform: rotate(0deg) !important;
        transition: 0.25s ease-in-out !important;
        z-index: 1020 !important;
    }
    
    /* Τοποθέτηση των τριών γραμμών με αυξημένη ειδικότητα */
    html body .mobile-toggle span:nth-child(1),
    html body .nav-wrapper .mobile-toggle span:nth-child(1),
    html body header .mobile-toggle span:nth-child(1),
    html body .navbar .mobile-toggle span:nth-child(1),
    html body nav .mobile-toggle span:nth-child(1) {
        top: 3px !important;
    }
    
    html body .mobile-toggle span:nth-child(2),
    html body .nav-wrapper .mobile-toggle span:nth-child(2),
    html body header .mobile-toggle span:nth-child(2),
    html body .navbar .mobile-toggle span:nth-child(2),
    html body nav .mobile-toggle span:nth-child(2) {
        top: 12px !important;
    }
    
    html body .mobile-toggle span:nth-child(3),
    html body .nav-wrapper .mobile-toggle span:nth-child(3),
    html body header .mobile-toggle span:nth-child(3),
    html body .navbar .mobile-toggle span:nth-child(3),
    html body nav .mobile-toggle span:nth-child(3) {
        top: 21px !important;
    }
    
    /* Συγκεκριμένοι κανόνες για τον ροζ κύκλο που θέλουμε να αφαιρέσουμε */
    .nav-wrapper .mobile-toggle {
        background-color: transparent !important;
        background-image: none !important;
    }
    
    /* Ρυθμίσεις για κάθε πιθανή μορφή του toggle button, αλλά χωρίς να επηρεάζουμε τα spans */
    .mobile-toggle-wrapper,
    .mobile-toggle-container,
    .nav-wrapper .mobile-toggle-wrap {
        background-color: transparent !important;
        background-image: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }
}