button, a, input, select, .btn-yellow, .btn-points, .btn-blue, .btn-red, .btn-green, [onclick] {
    touch-action: manipulation !important;
}

* {
    -webkit-tap-highlight-color: transparent !important;
}


/* ══════════════════════════════════════════════
   MOBILE OPTIMIZATIONS (Safari/Chrome Fixes)
══════════════════════════════════════════════ */
/* Ακυρώνει το delay των 300ms στα κινητά (Safari & Chrome) */
button, a, input, select {
    touch-action: manipulation;
}

/* ΒΑΣΙΚΑ ΠΛΑΙΣΙΑ (Γυάλινο εφέ) */
.glass-panel {
    background-color: rgba(30, 41, 59, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px); /* Safari support */
    border-radius: 1.5rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.glass-panel-modal {
    background-color: rgb(30, 41, 59);
    border: 4px solid #facc15;
    border-radius: 1.5rem;
    box-shadow: 0 0 50px rgba(250, 204, 21, 0.4);
    width: 100%;
    max-width: 42rem;
    padding: 2.5rem;
}

/* ─── ΜΕΙΩΣΗ ΤΟΥ BLUR ΓΙΑ ΚΙΝΗΤΑ (Βοηθάει απίστευτα το Safari) ─── */
@media (max-width: 768px) {
    .glass-panel {
        background-color: rgba(30, 41, 59, 0.92); /* Πιο σκούρο χρώμα */
        backdrop-filter: blur(4px); /* Λιγότερο ζόρι στην GPU */
        -webkit-backdrop-filter: blur(4px);
    }
}

/* ΚΟΥΜΠΙΑ ΠΟΝΤΩΝ ΣΤΟ ΤΑΜΠΛΟ */
.btn-points {
    background-color: rgba(51, 65, 85, 0.8);
    border: 2px solid #34d399;
    color: white;
    width: 4rem;
    height: 4rem;
    border-radius: 0.75rem;
    font-weight: 900;
    font-size: 1.5rem;
    box-shadow: 0 0 15px rgba(52, 211, 153, 0.3);
    transition: all 0.3s ease;
    cursor: pointer;
}
.btn-points:hover {
    background-color: #facc15;
    color: black;
    transform: scale(1.1);
}
.btn-points.btn-disabled {
    opacity: 0.3;
    pointer-events: none;
    background-color: #1e293b;
    border-color: #475569;
}

/* ΚΙΤΡΙΝΟ ΚΟΥΜΠΙ ΥΠΟΒΟΛΗΣ / START */
.btn-yellow {
    background-color: #facc15;
    color: black;
    font-weight: 900;
    text-transform: uppercase;
    border-radius: 0.75rem;
    box-shadow: 0 10px 20px rgba(250, 204, 21, 0.3);
    transition: all 0.2s ease;
    cursor: pointer;
}
.btn-yellow:hover {
    background-color: #fde047;
    transform: scale(1.02);
}

/* ΧΡΩΜΑΤΙΣΤΑ ΚΟΥΜΠΙΑ (Πολλαπλής, Higher/Lower, Σωστό/Λάθος) */
.btn-blue { background-color: #3b82f6; color: white; border-radius: 1rem; box-shadow: 0 10px 20px rgba(59, 130, 246, 0.4); transition: transform 0.2s; font-weight: 900; }
.btn-blue:hover { background-color: #60a5fa; transform: translateY(-3px); }

.btn-red { background-color: #e11d48; color: white; border-radius: 1rem; box-shadow: 0 10px 20px rgba(225, 29, 72, 0.4); transition: transform 0.2s; font-weight: 900; }
.btn-red:hover { background-color: #fb7185; transform: translateY(-3px); }

.btn-green { background-color: #10b981; color: white; border-radius: 1rem; box-shadow: 0 10px 20px rgba(16, 185, 129, 0.4); transition: transform 0.2s; font-weight: 900; }
.btn-green:hover { background-color: #34d399; transform: translateY(-3px); }

/* ΠΕΔΙΑ ΚΕΙΜΕΝΟΥ (Inputs) */
.input-field {
    background-color: #334155;
    border: 2px solid #10b981;
    color: white;
    font-weight: bold;
    font-size: 1.5rem;
    border-radius: 0.75rem;
    padding: 1rem;
    outline: none;
    transition: border-color 0.3s ease;
}
.input-field:focus {
    border-color: #facc15;
}

/* ΕΙΔΙΚΑ STYLES ΓΙΑ ΤΙΣ ΣΕΛΙΔΕΣ */
.page-section {
    display: none; /* Κρύβει τις σελίδες από προεπιλογή */
}
.page-section.active {
    display: flex; /* Εμφανίζει τη σελίδα που έχει την κλάση active */
}
/* BACKGROUND ΜΠΑΛΑ */
.bg-ball {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 30rem;
    opacity: 0.5; /* ΕΔΩ ΑΛΛΑΖΕΙΣ ΤΗΝ ΕΝΤΑΣΗ (π.χ. 0.4 ή 0.5) */
    pointer-events: none;
    z-index: 0;
    /* ⚡ ΑΦΑΙΡΕΘΗΚΕ: mix-blend-mode: overlay;
       Το blend mode σε fixed στοιχείο που πιάνει όλη την οθόνη ανάγκαζε τον browser
       σε συνεχές compositing ΟΛΟΥ του viewport -> πολύ βαρύ σε κινητά (Safari & Chrome). */
}

/* Για μεγάλες οθόνες (Υπολογιστές/Τηλεοράσεις) μεγαλώνει και η μπάλα */
@media (min-width: 768px) {
    .bg-ball {
        font-size: 50rem;
    }
}
/* ══════════════════════════════════════════════
    AUTOCOMPLETE DROPDOWN MENU
══════════════════════════════════════════════ */
.autocomplete-items {
    position: absolute;
    border: 1px solid rgba(16, 185, 129, 0.4);
    border-radius: 0.875rem;
    z-index: 9999;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 8px;
    background-color: rgba(13, 31, 60, 0.95);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.8);
    max-height: 240px;
    overflow-y: auto;
    overflow-x: hidden;
}

.autocomplete-items div {
    padding: 14px 18px;
    cursor: pointer;
    color: white;
    font-size: 1.15rem;
    font-weight: 600;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    text-align: left;
    transition: all 0.2s ease;
}

.autocomplete-items div:hover {
    background-color: rgba(16, 185, 129, 0.2);
    color: #34d399;
    padding-left: 24px; /* Ωραίο εφέ κίνησης προς τα δεξιά */
}

.autocomplete-items div:last-child {
    border-bottom: none;
}

/* Custom Scrollbar για το dropdown */
.autocomplete-items::-webkit-scrollbar { width: 6px; }
.autocomplete-items::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.2); }
.autocomplete-items::-webkit-scrollbar-thumb { background: rgba(16, 185, 129, 0.5); border-radius: 10px; }
/* Το χρώμα που παίρνει η επιλογή όταν πας πάνω της με τα βελάκια */
.autocomplete-active {
    background-color: rgba(16, 185, 129, 0.4) !important;
    color: #34d399 !important;
    padding-left: 24px !important;
}
table {
    table-layout: auto !important;
    width: 100%;
}

/* ══════════════════════════════════════════════
   ⚡ MOBILE PERFORMANCE — απενεργοποίηση βαρέων blur
   Σε κινητά (Safari & Chrome) το backdrop-filter:blur() σε στοιχεία
   που είναι ΠΑΝΤΑ ορατά κοστίζει πολύ στη GPU. Τα κάνουμε αδιαφανή.
══════════════════════════════════════════════ */
@media (max-width: 768px) {
    .autocomplete-items {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background-color: rgba(13, 31, 60, 0.98) !important;
    }
}