/* 1. Αφαιρεί την τελεία από το εξωτερικό Custom Field του Joomla που τυλίγει τη Gallery */
ul:has(a[href*="igallery"]) > li {
    list-style-type: none !important;
}
ul:has(a[href*="igallery"]) > li::before {
    display: none !important;
    content: none !important;
}

/* 2. Αφαιρεί την τελεία από την ίδια τη Gallery (κάθε li που περιέχει εικόνα) */
ul:has(img) > li {
    list-style-type: none !important;
}
ul:has(img) > li::before {
    display: none !important;
    content: none !important;
}

/* 3. Διορθώνει τυχόν κενά (padding) που αφήνει η κρυμμένη τελεία */
ul:has(a[href*="igallery"]) {
    padding-left: 0 !important;
    margin-left: 0 !important;
}

/* 1. Ρύθμιση του συνολικού πλαισίου (wrap) να πιάνει το 100% του πλάτους */
.com-content__filter.btn-group {
    width: 100%; 
    min-width: 320px; /* Εξασφαλίζει ότι δεν θα γίνει πολύ μικρό σε μικρότερες οθόνες */
    display: flex;
}

/* 2. Μορφοποίηση του πεδίου κειμένου (Search Input) */
.com-content__filter #filter-search {
    flex: 1 1 auto;
    padding: 8px 16px; /* Λιγότερο padding πάνω-κάτω */
    font-size: 16px;
    border: 2px solid #2b496d; /* Το νέο σκούρο χρώμα σου */
    border-right: none; 
    border-radius: 0 !important; /* Καθόλου στρογγυλεμένες γωνίες (τετράγωνο) */
    color: #2b496d; /* Σκούρα γράμματα κατά την πληκτρολόγηση */
    background-color: #f8fbff;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.06);
    transition: all 0.3s ease;
}

/* Εφέ όταν ο χρήστης κάνει κλικ μέσα στο πεδίο αναζήτησης (Focus) */
.com-content__filter #filter-search:focus {
    background-color: #ffffff;
    /* Απαλή λάμψη στο χρώμα #2b496d όταν είναι ενεργό το πεδίο */
    box-shadow: 0 0 8px rgba(43, 73, 109, 0.4); 
    outline: none;
}

/* 3. Μορφοποίηση του κουμπιού "Φίλτρο" */
.com-content__filter .btn-primary {
    background-color: #2b496d; /* Το νέο σκούρο χρώμα σου */
    border: 2px solid #2b496d;
    color: #ffffff;
    font-weight: 600;
    padding: 8px 20px; /* Λιγότερο padding πάνω-κάτω για να ταιριάζει με το πεδίο */
    border-radius: 0 !important; /* Τετράγωνο κουμπί */
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* Λίγο πιο σκούρο χρώμα όταν περνάει το ποντίκι από πάνω (Hover) */
.com-content__filter .btn-primary:hover {
    background-color: #1e3550; 
    border-color: #1e3550;
    color: #ffffff;
}

/* 4. Μορφοποίηση του κουμπιού "Καθαρισμός" */
.com-content__filter .btn-secondary {
    background-color: #e9ecef;
    border: 2px solid #e9ecef;
    color: #2b496d; /* Σκούρα γράμματα στο κουμπί */
    font-weight: 600;
    padding: 8px 20px; 
    border-radius: 0 !important; /* Τετράγωνο κουμπί */
    transition: background-color 0.3s ease;
}

.com-content__filter .btn-secondary:hover {
    background-color: #d3d9df;
    border-color: #d3d9df;
    color: #1e3550;
}

/* 5. Προσαρμογή για Κινητά (Responsive) */
@media (max-width: 768px) {
    .com-content__filter.btn-group {
        width: 100%; /* Στα κινητά, η μπάρα αναζήτησης θα πιάνει όλο το πλάτος */
    }
}
/* 1. Ενεργή (Selected) σελίδα */
.com-content-category__pagination .pagination .page-item.active .page-link {
    background-color: #7c5504 !important; /* Το επιθυμητό καφέ-χρυσό χρώμα */
    border-color: #7c5504 !important;
    color: #ffffff !important; /* Λευκά γράμματα για απόλυτη αντίθεση και αναγνωσιμότητα */
}

/* 2. Χρώμα στα απλά νούμερα των σελίδων */
.com-content-category__pagination .pagination .page-link {
    color: #2b496d; /* Το σκούρο μπλε για να δένει με το υπόλοιπο site */
}

/* 3. Κατάσταση Hover (όταν το ποντίκι περνάει από πάνω) */
.com-content-category__pagination .pagination .page-link:hover {
    background-color: #f5ede1 !important; /* Ένα πολύ απαλό μπεζ φόντο (ταιριαστό με το #7c5504) */
    border-color: #e2d2ba !important;
    color: #7c5504 !important; /* Το κείμενο παίρνει το βασικό χρώμα για να είναι απολύτως ευανάγνωστο */
}

/* 4. Διόρθωση για μικρές οθόνες (Responsive Pagination) */
.com-content-category__pagination .pagination {
    display: flex;
    flex-wrap: wrap; /* Επιτρέπει στα νούμερα να "σπάσουν" σε δεύτερη γραμμή αν δεν χωράνε */
    gap: 2px; /* Μικρό κενό μεταξύ των κουμπιών όταν αλλάζουν γραμμή, για να μην κολλάνε */
}

/* Επαναφορά των γωνιών σε τετράγωνες (προαιρετικά, για να ταιριάζει με το πεδίο αναζήτησης) */
.com-content-category__pagination .pagination .page-item:first-child .page-link,
.com-content-category__pagination .pagination .page-item:last-child .page-link {
    border-radius: 0 !important;
}

#sp-main-body {
    /* Βάλε το σωστό link (path) της εικόνας σου ανάμεσα στα αυτάκια */
    background-image: url('/images/ede/bg-body.png') !important; 
    
    /* Κάνει την εικόνα σταθερή κατά το σκρολάρισμα */
    background-attachment: fixed !important; 
    
    /* Καλύπτει όλο το πλάτος και ύψος του στοιχείου χωρίς να παραμορφώνεται */
    background-size: cover !important; 
    
    /* Κεντράρει την εικόνα */
    background-position: center top !important; 
    
    /* Αποτρέπει την επανάληψη της εικόνας (πλακάκι) αν η οθόνη είναι μεγάλη */
    background-repeat: no-repeat !important; 
    
    /* Προαιρετικά: αν η εικόνα είναι σκούρα, βάζεις χρώμα φόντου για ασφάλεια πριν φορτώσει */
    background-color: #cacaca !important; 
}

/* Αλλαγή χρώματος στο κείμενο του μετρητή (π.χ. Σελίδα 1 από 15) */
.com-content-category__counter {
    color: #2b496d !important;
    font-weight: 600 !important; /* Κάνει το κείμενο ελαφρώς πιο έντονο για να διαβάζεται πιο εύκολα */
}
@media (max-width: 991px) {
    /* 1. Φέρνει το τμήμα των μενού και το footer ΠΑΝΩ από το sticky header */
    #sp-bottom, 
    #sp-footer {
        position: relative !important;
        z-index: 9999 !important; 
    }

    /* Βεβαιωνόμαστε ότι το bottom έχει φόντο (αν δεν έχει ήδη) για να μην διαφανίζει το header από πίσω του */
    #sp-bottom {
        background-color: #001335 !important;
        padding-bottom: 30px !important;
    }

  /* Μετατροπή του container της σελιδοποίησης σε Flexbox για αλλαγή της σειράς */
.com-content-category__navigation {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important; /* Κεντράρει τα κουμπιά και το κείμενο */
}

/* Τοποθέτηση των κουμπιών σελιδοποίησης (pagination) ΠΑΝΩ (θέση 1) */
.com-content-category__pagination {
    order: 1 !important;
    width: 100%;
    display: flex;
    justify-content: center !important; /* Κεντράρει τα κουμπιά */
}

/* Τοποθέτηση του κειμένου "Σελίδα Χ από Ψ" ΚΑΤΩ από τα κουμπιά (θέση 2) */
.com-content-category__counter {
    order: 2 !important;
    float: none !important; /* Ακυρώνει τη δεξιά στοίχιση (float-end) που έχει από προεπιλογή */
    padding-top: 15px !important; /* Αφήνει λίγο κενό ανάμεσα στα κουμπιά και το κείμενο */
    text-align: center !important;
    width: 100%;
}

/* Αφαίρεση του κενού (margin) που υπήρχε κάτω από τα κουμπιά για καλύτερη εφαρμογή */
.com-content-category__pagination .pagination {
    margin-bottom: 0 !important;
    justify-content: center !important;
}
	}

body.itemid-391 #sp-main-body,
body.itemid-391 #sp-main-body > .container,
body.itemid-391 #sp-main-body .sp-column,
body.itemid-391 #sp-component {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* Αφαίρεση background image ΜΟΝΟ από την Αρχική Σελίδα */
body.itemid-101 #sp-main-body {
    background-image: none !important;
}

/* 1. Αλλαγή χρώματος σε ΜΑΥΡΟ για το κείμενο των κλασικών άρθρων */
.view-article .article-details [itemprop="articleBody"] p,
.view-article .article-details [itemprop="articleBody"] span,
.view-article .article-details [itemprop="articleBody"] li,
.view-article .article-details .entry-content p,
.view-article .article-details .entry-content span,
.view-article .article-details .entry-content li {
    color: #000000 !important;
}

/* 2. ΑΥΣΤΗΡΗ ΕΞΑΙΡΕΣΗ: ΛΕΥΚΟ χρώμα για τα συνημμένα αρχεία (jmpattachments) */
body.view-article .article-details [itemprop="articleBody"] .jattachment *,
body.view-article .article-details [itemprop="articleBody"] .jattachment p,
body.view-article .article-details [itemprop="articleBody"] .jattachment span,
body.view-article .article-details [itemprop="articleBody"] .jattachment a {
    color: #ffffff !important;
}

