/* ========================================= */
/* --- COLOR VARIABLES (THEME) --- */
/* ========================================= */
:root {
    /* Βασικά Χρώματα (Primary Colors) */
    --color-primary-dark: #00a99d;    /* Σκούρο μπορντό (Navbar, Show All btn) */
    --color-primary: #779694;         /* Βασικό κόκκινο (Headers, Links, Active items) */
    --color-primary-light: #b0955f;   /* Ανοιχτό κόκκινο (Hover στα links) */
    --color-primary-pale: #f3f3f3;    /* Πολύ αχνό κόκκινο (Background επιλεγμένου item) */

    /* Ουδέτερα Χρώματα (Grays & Whites) */
    --color-white: white;             /* Λευκό */
    --color-bg-main: #f9f9f9;         /* Ανοιχτό γκρι φόντο (Δεξιά στήλη) */
    --color-bg-alt: #fcfcfc;          /* Ελαφρώς σπασμένο λευκό (Λίστα περιοχών) */
    --color-hover-gray: #f0f0f0;      /* Γκρι του hover (Λίστα περιοχών) */
    
    /* Χρώματα Κειμένου */
    --color-text-dark: #333;          /* Σκούρο γκρι (Τίτλοι) */
    --color-text-muted: #555;         /* Μεσαίο γκρι (Περιγραφές) */

    /* Γραμμές & Περιγράμματα (Borders) */
    --color-border: #ddd;             /* Βασικό περίγραμμα (Borders, Διαχωριστικά) */
    --color-border-light: #eee;       /* Αχνό διαχωριστικό (Ανάμεσα σε items) */

    /* Ειδικά Χρώματα Χάρτη & Σκιές */
    --color-cluster-bg: rgba(44, 62, 80, 0.9); /* Σκούρο μπλε/γκρι για τα group pins */
    --shadow-light: rgba(0, 0, 0, 0.1);        /* Ελαφριά σκιά (Navbar) */
    --shadow-medium: rgba(0, 0, 0, 0.3);       /* Μεσαία σκιά (Cluster pins) */
}


/* --- LAYOUT CONFIGURATION --- */


/* --- MAIN CONTAINER --- */
.main-container { 
    display: flex; 
    width: 100%; 
    
    /* ΝΕΟ: Δίνουμε συγκεκριμένο ύψος στο block του χάρτη */
    height: 100vh; /* Θα πιάνει το 80% του ύψους της οθόνης του χρήστη */
    min-height: 800px; /* Ελάχιστο ύψος για να μη "σπάει" σε μικρές οθόνες υπολογιστή */
    max-height: 1280px; /* Μέγιστο ύψος για τεράστιες οθόνες */
    
    border-top: 1px solid var(--color-border); /* Προαιρετικά: μια γραμμή πάνω-κάτω για να ξεχωρίζει από το υπόλοιπο site */
    border-bottom: 1px solid var(--color-border);
    overflow: hidden; /* Κρατάει τον χάρτη και τη λίστα αυστηρά μέσα στα όριά τους */
}

/* --- NAVBAR STYLING --- */
.navbar {
    height: 60px; 
    background-color: var(--color-primary-dark); 
    color: var(--color-white);
    display: flex;
    align-items: center;
    padding: 0 20px;
    box-shadow: 0 2px 5px var(--shadow-light);
    z-index: 1000; 
}

.nav-title {
    font-size: 1.2rem;
    font-weight: bold;
    letter-spacing: 1px;
}

/* --- MAIN CONTAINER --- */
.main-container { 
    display: flex; 
    flex: 1; 
    width: 100%; 
    overflow: hidden;
}

#map-column { 
    width: 70%; 
    height: 100%; 
    cursor: grab; 
}

#map-column:active { cursor: grabbing; }

#info-column { 
    width: 30%; 
    height: 100%; 
    background: var(--color-bg-main); 
    padding: 20px; 
    box-sizing: border-box; 
    overflow-y: auto; 
    border-left: 1px solid var(--color-border); 
}

/* --- ACCORDION & LIST STYLING (NEW) --- */
.category-block {
    margin-bottom: 15px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-white);
    overflow: hidden;
}

.category-header {
    background: var(--color-primary);
    color: var(--color-white);
    padding: 12px 15px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background 0.2s;
}

.category-header:hover {
    background: var(--color-primary-dark);
}

.places-list {
    display: none; 
    padding: 5px 0;
    background: var(--color-bg-alt);
}

.place-item {
    border-bottom: 1px solid var(--color-border-light);
    padding: 10px 15px;
    cursor: pointer;
    transition: background 0.2s;
}

.place-item:last-child {
    border-bottom: none;
}

.place-item:hover {
    background: var(--color-hover-gray);
}

.place-title {
    font-weight: 600;
    color: var(--color-text-dark);
}

/* --- DETAILS INSIDE THE LIST ITEM (NEW) --- */
.place-details {
    display: none; 
    margin-top: 8px;
    font-size: 0.9rem;
    color: var(--color-text-muted);
    border-top: 1px solid var(--color-border);
    padding-top: 8px;
}

.place-details p {
    margin: 5px 0;
    line-height: 1.4;
}

.website-link {
    display: inline-block;
    background-color: var(--color-bg-alt);
    color: var(--color-white);
    padding: 6px 12px;
    text-decoration: none;
    border-radius: 4px;
    margin-top: 8px;
    font-weight: bold;
    font-size: 0.85rem;
    transition: background 0.3s;
}

.website-link:hover { background-color: var(--color-bg-alt); }

/* Όταν ένα σημείο είναι ενεργό/ανοιχτό */
.place-item.active {
    background: var(--color-primary-pale);
    border-left: 4px solid var(--color-primary);
}

.place-item.active .place-title {
    color: var(--color-primary);
}

/* --- CLUSTER ICONS --- */
.my-custom-cluster {
    background-color: var(--color-cluster-bg);
    color: var(--color-white);
    border-radius: 50%;
    text-align: center;
    font-weight: bold;
    font-size: 14px;
    display: flex;
    align-items: center;     
    justify-content: center; 
    border: 2px solid var(--color-white); 
    box-shadow: 0 4px 6px var(--shadow-medium);
}

/* --- SHOW ALL / RESET BUTTON (NEW) --- */
.show-all-btn {
    width: 100%;
    background-color: var(--color-primary-dark); 
    color: var(--color-white);
    border: none;
    padding: 12px;
    font-size: 1rem;
    font-weight: bold;
    border-radius: 6px;
    cursor: pointer;
    margin-bottom: 20px; 
    transition: background 0.2s, transform 0.1s;
    box-shadow: 0 2px 4px var(--shadow-light);
}

.show-all-btn:hover {
    background-color: var(--color-primary); 
}

.show-all-btn:active {
    transform: scale(0.98); 
}

.static-content p {
    margin: 0 0 10px 0;
}
.static-content p:last-child {
    margin-bottom: 0;
}








/* ========================================= */
/* --- RESPONSIVE DESIGN (MOBILE & TABLET) --- */
/* ========================================= */

@media screen and (max-width: 768px) {
    .main-container {
        flex-direction: column;
        height: 850px; /* Σταθερό συνολικό ύψος στα κινητά */
        max-height: none;
    }

    #map-column {
        width: 100%;
        height: 400px; /* Ο χάρτης παίρνει 400px */
    }

    #info-column {
        width: 100%;
        height: 450px; /* Η λίστα παίρνει 450px */
        border-left: none;
        border-top: 2px solid var(--color-border); 
        padding: 15px; 
    }
    
    /* ... (Τα υπόλοιπα του @media μένουν ίδια: nav-title, show-all-btn κλπ) ... */

    .nav-title {
        font-size: 1.1rem;
    }

    .show-all-btn {
        padding: 10px;
        font-size: 0.95rem;
        margin-bottom: 15px;
    }
    
    .category-header {
        padding: 10px 12px;
        font-size: 0.95rem;
    }
}