/* ============================================================
   ANGELIA.GR - FINAL BRAVE-SAFE STYLE
   (Item-Card Renaming + Layout Fixes + Hybrid Menu)
   ============================================================ */

/* --- 1. ΓΕΝΙΚΕΣ ΡΥΘΜΙΣΕΙΣ --- */
* { box-sizing: border-box; }

@font-face {
    font-family: 'MyFont';
    src: url(fonts/IrishGrover_Regular.ttf) format('truetype');
    font-display: swap;
}

body {
    background-color: #d5cdcd;
    margin: 0; min-height: 100vh; display: flex; flex-direction: column;
    font-family: system-ui, -apple-system, sans-serif; line-height: 1.6; color: #333;
}
main { flex: 1; padding-bottom: 40px; }

a, a:hover, a:focus, a:active, a:visited {
    text-decoration: none !important; outline: none; transition: all 0.2s ease-in-out;
}
h1, h2, h3, h4, h5, h6 {
    font-family: system-ui, -apple-system, sans-serif !important; font-weight: 700; color: #383434;
}

/* --- 2. HEADER & MENU --- */
.wrap_head {
    display: flex; justify-content: space-between; align-items: center;
    padding: 0 20px; background-color: #d5cdcd; position: sticky;
    top: 0; z-index: 1000; box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.wrap_head h1 a {
    font-family: 'MyFont', cursive !important; color: inherit; font-size: 1.8rem; letter-spacing: 1px;
}
nav ul {
    list-style: none; background-color: #d5cdcd; display: flex;
    justify-content: end; align-items: center; margin: 0; padding: 0;
}
nav a {
    margin: 10px; font-weight: bolder; color: #5c3a3a;
    display: inline-block; padding: 12px 15px; font-family: system-ui, sans-serif;
}
nav a:hover { color: #c52d2d; }

/* --- 3. FILTER BAR --- */
.filter-bar {
    width: 90%; max-width: 1000px; margin: 30px auto; padding: 20px;
    background-color: #f1f1f1; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); text-align: center;
}
.filter-bar h3 { margin-top: 0; font-size: 1.5em; color: #383434; }
.filter-form { display: flex; gap: 10px; }
.filter-form input, .filter-form select { flex: 1; padding: 12px; font-size: 16px; border: 1px solid #ccc; border-radius: 5px; }
.filter-form button {
    padding: 12px 20px; background-color: #0056b3; color: white; border: none;
    border-radius: 5px; cursor: pointer; font-size: 16px; font-weight: bold;
    display: flex; align-items: center; gap: 8px;
}
.filter-form button:hover { background-color: #004494; }

/* --- 4. BUTTONS --- */
.action-buttons {
    display: flex; justify-content: center; gap: 20px; margin: 30px auto; width: 90%;
}
.action-buttons a {
    padding: 15px 30px; border-radius: 5px; font-weight: bold; font-size: 1.1em;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1); color: white; text-align: center;
}
.btn-main { background-color: #0056b3; } .btn-secondary { background-color: #1e7e34; }

/* --- 5. CATEGORIES (Hybrid Menu) --- */
.categories {
    list-style: none; display: flex; flex-wrap: wrap; justify-content: center;
    gap: 20px; padding: 20px; margin: 0 auto; width: 95%; max-width: 1400px; align-items: flex-start;
}
.category {
    background-color: white; border: 1px solid #8f8f8f; border-radius: 8px;
    width: 260px; box-shadow: 0 4px 10px rgba(0,0,0,0.08); overflow: hidden;
    display: flex; flex-direction: column;
}
.category h2 { background-color: #383434; color: white; margin: 0; padding: 0; }
.category h2 a { color: white; display: block; padding: 15px; text-align: center; font-size: 1.2em; }

/* PC Settings */
@media (min-width: 769px) {
    .submenu { display: block !important; background-color: #fff; padding: 0; margin: 0; list-style: none; }
    .submenu a { display: block; padding: 8px 15px; color: #555; font-size: 0.95em; border-bottom: 1px solid #f0f0f0; transition: padding-left 0.2s; }
    .submenu a:hover { color: #0056b3; padding-left: 20px; background-color: #f8f9fa; }
}
/* Mobile Settings */
@media (max-width: 768px) {
    .categories { padding: 10px; gap: 10px; width: 100%; }
    .category { width: 100%; margin-bottom: 5px; background-color: rgb(204, 169, 116); }
    .submenu { display: none; background-color: #fff; padding: 0; margin: 0; list-style: none; }
    .submenu.open { display: block; } /* Changed to .open to match JS */
    .submenu li { border-bottom: 1px solid #eee; }
    .submenu a { display: block; padding: 18px 20px; color: #333; font-size: 1.1em; font-weight: 500; }
    .category h2 a::after { content: ' ▼'; font-size: 0.8em; float: right; }
    .active-cat h2 a::after { content: ' ▲'; }
}

/* --- 6. FORMS --- */
.form-container {
    width: 600px; max-width: 90%; margin: 40px auto; padding: 2rem;
    background: #f1f1f1; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.form-container input, .form-container select, .form-container textarea {
    width: 100%; padding: 12px; font-size: 16px; border: 1px solid #ccc;
    border-radius: 5px; font-family: inherit; margin-bottom: 15px;
}
.form-container button {
    width: 100%; padding: 12px 20px; background-color: #0056b3; color: white;
    border: none; border-radius: 5px; font-weight: bold; cursor: pointer; font-size: 1.1em;
}

/* --- 7. CARDS & BRAVE FIX (Renamed ad-link to item-card) --- */
/* ΑΥΤΟ ΕΙΝΑΙ ΤΟ ΝΕΟ ΟΝΟΜΑ ΓΙΑ ΤΙΣ ΑΓΓΕΛΙΕΣ */
.item-card {
    display: flex !important; flex-direction: column !important; height: 100% !important;
    justify-content: space-between !important; text-decoration: none !important; color: inherit !important;
}
.item-card:hover h4 {
    color: #0056b3 !important; text-decoration: underline !important; transition: all 0.2s ease-in-out;
}
.item-card:hover img { opacity: 0.9; }

/* FIX ΤΙΤΛΩΝ (Που φτιάξαμε πριν) */
.item-card h4 {
    height: 46px !important; max-height: 46px !important; min-height: 46px !important;
    display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important;
    overflow: hidden !important; text-overflow: ellipsis !important;
    margin-top: 10px !important; margin-bottom: 15px !important;
    line-height: 1.3 !important; font-size: 1.1em !important; white-space: normal !important;
}

/* FIX ΤΙΜΗΣ (Κολλημένη κάτω) */
.item-card > div:last-child {
    margin-top: auto !important; padding-top: 10px !important;
    border-top: 1px solid #eee !important; width: 100% !important;
    color: #2c3e50; font-weight: bold; font-size: 1.1em;
}

/* --- 8. FAV BUTTON --- */
.fav-btn {
    position: absolute; top: 10px; right: 10px;
    background: rgba(255, 255, 255, 0.9); border: none; border-radius: 50%;
    width: 35px; height: 35px; display: flex; align-items: center; justify-content: center;
    cursor: pointer; box-shadow: 0 2px 5px rgba(0,0,0,0.2); z-index: 10; transition: transform 0.2s;
}
.fav-btn:hover { transform: scale(1.1); }
.fav-btn i { font-size: 1.2rem; color: #888; transition: color 0.2s; }
.fav-btn.active i { color: #e74c3c !important; font-weight: 900 !important; }

/* --- 9. FOOTER & ADMIN --- */
.main-footer, footer {
    background-color: #383434 !important; color: white !important;
    padding: 40px 0; margin-top: auto; text-align: center; width: 100%; border-top: 5px solid #5c3a3a;
}
.main-footer a, footer a {
    color: #d5cdcd !important; margin: 0 15px; font-weight: bold; font-size: 1.1em;
}
.main-footer a:hover, footer a:hover { color: #fff !important; text-decoration: underline !important; }

/* --- 10. MOBILE SPACING (Τοίχος) --- */
@media (max-width: 768px) {
    .form-container, .filter-bar, .categories, .action-buttons, .container, .contact-card, .main-footer {
        width: 94% !important; margin-left: auto !important; margin-right: auto !important;
        border-radius: 8px !important;
    }
    .wrap_head { padding: 10px 15px !important; flex-direction: column; gap: 5px; }
    .wrap_head h1 a { font-size: 1.5rem; }
    nav ul { flex-direction: row; justify-content: center; flex-wrap: wrap; width: 100%; gap: 5px; }
    nav a { width: auto; padding: 6px 10px; margin: 0; font-size: 0.85rem; border-bottom: none; background-color: rgba(255,255,255,0.4); border-radius: 4px; }
    .main-footer, footer { padding: 20px 10px; width: 100% !important; }
    .main-footer a, footer a { display: block; margin: 10px 0; }
    main { padding-left: 5px; padding-right: 5px; }
    
    .filter-form, .action-buttons { flex-direction: column; }
    .filter-form button, .filter-form input, .filter-form select, .action-buttons a { width: 100%; margin-bottom: 10px; }
    .col-lg-8, .col-lg-4, .col-6 { width: 100% !important; padding: 0 !important; }
    .row { margin: 0 !important; }
    .contact-card { margin-top: 20px; position: static !important; }
}

/* --- 11. GRID SYSTEM (ΣΤΟΙΧΙΣΗ ΑΓΓΕΛΙΩΝ) --- */
.ads-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: flex-start;
    width: 95%;
    max-width: 1200px;
    margin: 40px auto;
}

.listing-item {
    width: calc(20% - 16px); /* 5 αγγελίες ανά σειρά σε PC */
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 10px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    transition: transform 0.2s;
    height: 320px;
}

.listing-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

/* Responsive Breakpoints */
@media (max-width: 1024px) {
    .listing-item { width: calc(25% - 15px); } /* 4 ανά σειρά */
}
@media (max-width: 768px) {
    .listing-item { width: calc(50% - 10px); } /* 2 ανά σειρά σε tablet */
}
@media (max-width: 480px) {
    .listing-item { width: 100%; } /* 1 ανά σειρά σε μικρά κινητά */
}

/* UTILITIES */
.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 15px; }
.row { display: flex; flex-wrap: wrap; margin-right: -15px; margin-left: -15px; }
.col-12 { width: 100%; padding: 0 15px; }
.col-lg-8 { width: 66.66%; padding: 0 15px; }
.col-lg-4 { width: 33.33%; padding: 0 15px; }
.col-6 { width: 50%; padding: 0 5px; }
.col-3 { width: 25%; padding: 0 5px; }
.bg-light { background-color: #f8f9fa !important; }
.bg-white { background-color: #ffffff !important; }
.border { border: 1px solid #dee2e6 !important; }
.rounded { border-radius: 0.35rem !important; }
.shadow-sm { box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important; }
.d-flex { display: flex !important; }
.text-center { text-align: center !important; } .text-muted { color: #6c757d !important; } .text-success { color: #198754 !important; }
.fw-bold { font-weight: 700 !important; }
.badge { display: inline-block; padding: 0.35em 0.65em; font-size: 0.75em; font-weight: 700; line-height: 1; color: #fff; text-align: center; white-space: nowrap; vertical-align: baseline; border-radius: 0.25rem; }
.bg-secondary { background-color: #6c757d !important; } .bg-dark { background-color: #212529 !important; }
/* --- DETAILS PAGE STYLES (Προσθήκη στο τέλος του style.css) --- */

.details-container {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    width: 95%;
    max-width: 1200px;
    margin: 40px auto;
}

/* Αριστερή στήλη (Μεγάλη) */
.details-left {
    flex: 2; /* Πιάνει τα 2/3 του πλάτους */
    min-width: 300px;
}

/* Δεξιά στήλη (Μικρή - Επικοινωνία) */
.details-right {
    flex: 1; /* Πιάνει το 1/3 του πλάτους */
    min-width: 300px;
}

/* Κουμπί Επιστροφής */
.btn-back {
    display: inline-block; margin-bottom: 15px; color: #666; font-weight: bold;
}
.btn-back:hover { color: #000; }

.item-title { margin-bottom: 15px; font-size: 1.8em; color: #333; }

/* Boxes Styling */
.image-box, .desc-box, .contact-card {
    background: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.image-box { text-align: center; padding: 10px; }
.item-main-image {
    max-width: 100%; height: auto; max-height: 500px; object-fit: contain;
}

.section-title {
    border-bottom: 1px solid #eee; padding-bottom: 10px; margin-bottom: 15px; margin-top: 0;
}
.desc-content {
    font-size: 1.1em; line-height: 1.8; white-space: pre-wrap; color: #444;
}

/* Contact Card Specifics */
.contact-card { position: sticky; top: 100px; } /* Για να μένει σταθερό όταν κάνεις scroll */
.price-tag {
    text-align: center; font-size: 2.2em; font-weight: bold; color: #28a745; margin-bottom: 15px;
}
.btn-phone, .btn-viber {
    display: block; width: 100%; padding: 12px; margin-bottom: 10px;
    text-align: center; border-radius: 5px; font-weight: bold; color: white;
}
.btn-phone { background: #28a745; }
.btn-phone:hover { background: #218838; }
.btn-viber { background: #665CAC; }
.btn-viber:hover { background: #524890; }

/* Google Ads Placeholder Style */
.google-ad-placeholder {
    margin: 20px 0;
    text-align: center;
}

/* Mobile Responsive Details */
@media (max-width: 768px) {
    .details-container { flex-direction: column; }
    .details-left, .details-right { width: 100%; }
    .contact-card { position: static; } /* Στο κινητό να μην είναι sticky */
}
/* --- EMPTY RESULTS STYLE (Search Results) --- */

.empty-results {
    width: 100%;
    text-align: center;
    background: #fff;
    padding: 60px 20px;
    border-radius: 10px;
    border: 2px dashed #ddd; /* Διακεκομμένο περίγραμμα για στυλ */
    margin: 20px auto;
}

.empty-results h3 {
    color: #444;
    margin-bottom: 10px;
}

.empty-results p {
    color: #777;
    font-size: 1.1em;
}

/* Το μεγάλο κουμπί "Νέα Αναζήτηση" */
.btn-big-action {
    display: inline-block;
    background-color: #0056b3; /* Το μπλε που έχεις στο site */
    color: white;
    padding: 15px 40px;
    font-size: 1.2rem;
    font-weight: bold;
    border-radius: 50px; /* Στρογγυλεμένες άκρες (pill shape) */
    box-shadow: 0 4px 15px rgba(0, 86, 179, 0.4); /* Ωραία σκιά */
    transition: all 0.3s ease;
}

.btn-big-action:hover {
    background-color: #004494;
    transform: translateY(-3px); /* Ανεβαίνει λίγο όταν πας το ποντίκι */
    box-shadow: 0 6px 20px rgba(0, 86, 179, 0.6);
    color: white;
}
/* --- COOKIE CONSENT BANNER STYLES --- */

.cookie-banner {
    position: fixed;
    bottom: -100px; /* Αρχικά κρυμμένο κάτω από την οθόνη */
    left: 0;
    width: 100%;
    background-color: #222; /* Σκούρο φόντο */
    color: #fff;
    padding: 15px 20px;
    z-index: 9999; /* Να είναι πάνω από όλα */
    box-shadow: 0 -2px 10px rgba(0,0,0,0.3);
    transition: bottom 0.5s ease-in-out; /* Εφέ κίνησης όταν εμφανίζεται */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Κλάση που προσθέτει η JS για να εμφανιστεί */
.cookie-banner.show {
    bottom: 0;
}

.cookie-content {
    max-width: 1200px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap; /* Για κινητά */
    gap: 15px;
}

.cookie-content p {
    margin: 0;
    font-size: 0.95em;
    line-height: 1.5;
    color: #ddd;
    flex: 1; /* Πιάνει όσο χώρο μπορεί */
}

.btn-accept {
    background-color: #28a745; /* Πράσινο κουμπί */
    color: white;
    border: none;
    padding: 10px 25px;
    border-radius: 5px;
    font-weight: bold;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.2s;
    font-size: 1em;
}

.btn-accept:hover {
    background-color: #218838;
}

/* Προσαρμογή για κινητά */
@media (max-width: 768px) {
    .cookie-content {
        flex-direction: column;
        text-align: center;
    }
    .btn-accept {
        width: 100%; /* Ολόκληρο το πλάτος στο κινητό */
    }
}
/* --- FIX ΓΙΑ ΤΟ CHAT (OnlineChatCenters) --- */
/* Στοχεύουμε τη συγκεκριμένη κλάση που έχει το script σου */

.occIcon-35101-87094, 
.occIcon-35101-87094 img {
    /* Το ανεβάζουμε 100px πιο ψηλά για να μην το κρύβει η μπάρα Cookies */
    bottom: 100px !important; 
    
    /* Αν το script χρησιμοποιεί margin αντί για bottom */
    margin-bottom: 20px !important;

    /* Εξασφαλίζουμε ότι είναι πάνω από όλα τα άλλα στοιχεία */
    z-index: 10001 !important; 
    
    /* Μικρή κίνηση για να φαίνεται ωραίο */
    transition: bottom 0.3s ease-in-out;
}

/* Ρύθμιση ειδικά για κινητά τηλέφωνα */
@media (max-width: 768px) {
    .occIcon-35101-87094, 
    .occIcon-35101-87094 img {
        /* Στα κινητά ίσως χρειαστεί να ανέβει λίγο ακόμα */
        bottom: 120px !important; 
    }
}
/* --- 12. GOOGLE ADS CUSTOM STYLING --- */
.ad-wrapper {
    text-align: center;
    margin: 30px auto;
    width: 100%;
    max-width: 468px; /* Το μέγεθος του banner */
}

.ad-label {
    display: block;
    font-size: 10px;
    color: #888;
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.ad-container {
    width: 468px;
    height: 60px;
    background-color: #fff; /* Λευκό φόντο για να ξεχωρίζει από το γκρι του site */
    border: 1px solid #ddd;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

/* Fix για κινητά: Αν η οθόνη είναι μικρότερη από 468px, κρύβουμε την υπερχείλιση */
@media (max-width: 480px) {
    .ad-wrapper {
        max-width: 100%;
        overflow-x: hidden;
    }
    .ad-container {
        width: 100%; /* Θα δείξει όσο χωράει από το banner */
        border-radius: 0;
        border-left: none;
        border-right: none;
    }
}