/* --- Carousel Wrapper & Layout Options --- */
.carousel-wrapper.not-arrow-thumb .thumb-prev,.carousel-wrapper.not-arrow-thumb .thumb-next{display:none!important}
.carousel-wrapper.thumbnails-left .next,.carousel-wrapper.thumbnails-left .prev{display:none!important;}
.carousel-wrapper.not-thumb .thumbnail-container,.carousel-wrapper.not-thumb .next,.carousel-wrapper.not-thumb .prev{display:none;}
body .carousel-wrapper.not-thumb .carousel-container-slides{width:100%;float:unset;display: block;margin-left: auto;margin-right: auto;}

.carousel-wrapper .next::after,.carousel-wrapper .thumb-next::after, .lightbox-next::after {
  content: '\e5cc' !important;
    font-family: 'Material Symbols Outlined';
  display:block;
    color: #fff;
}
.carousel-wrapper .prev::after,.carousel-wrapper .thumb-prev::after,.lightbox-prev::after {
  content: '\e5cb' !important;
    font-family: 'Material Symbols Outlined';
  display:block;
    color: #fff;
}

.carousel-wrapper.thumbnails-left .thumb-prev::after{content: '\e316' !important;}
.carousel-wrapper.thumbnails-left .thumb-next::after{content: '\e313' !important;}

.carousel-wrapper {
    display: flex;
    flex-direction: column; /* Default: thumbnails κάτω */
    max-width: 800px; /* Μέγιστο πλάτος για το wrapper */
    width: 100%; /* Για να ανταποκρίνεται σε μικρότερες οθόνες */
    border: 1px solid #ddd;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    background-color: #fff;
    overflow: hidden; /* Κρύβει οτιδήποτε ξεπερνά τα όρια */
}

.carousel-wrapper.thumbnails-left {
    flex-direction: row; /* Thumbnails αριστερά */
    max-width: 1000px; /* Αυξάνουμε το max-width όταν είναι αριστερά */
}

.carousel-wrapper.thumbnails-left .carousel-container-slides{
width: 80%;
float: right;
max-width:500px;
}


.carousel-wrapper.thumbnails-left .carousel-container {
    flex-grow: 1; /* Το κύριο carousel καταλαμβάνει τον υπόλοιπο χώρο */
    max-width: 800px; /* Το κύριο carousel έχει το δικό του max-width */
}

.carousel-wrapper.thumbnails-left .thumbnail-container {
    width: 150px; /* Σταθερό πλάτος για τα thumbnails αριστερά */
   max-width: 20%;
    flex-direction: column; /* Τα thumbnails κάθετα */
    border-top: none; /* Αφαιρούμε το πάνω border */
    border-right: 1px solid #ddd; /* Προσθέτουμε δεξί border */
    padding: 10px;
  z-index: 99999;
    position: relative;
}
.carousel-wrapper.thumbnails-left .thumbnails-inner-wrapper {
    flex-direction: column; /* Στοίχιση thumbnails κάθετα */
    height: 100%; /* Εξασφαλίζει ότι το inner wrapper γεμίζει τον χώρο */
}

.carousel-wrapper.thumbnails-left .thumbnail {
    width: 100px; /* Πλάτος thumbnails όταν είναι αριστερά */
    height: 75px;
    margin: 5px auto; /* Κεντράρισμα thumbnails κάθετα */
}

.carousel-wrapper.thumbnails-left .thumb-prev,
.carousel-wrapper.thumbnails-left .thumb-next {
    position: static; /* Αφαιρούμε την απόλυτη τοποθέτηση */
    margin: 10px auto; /* Κεντράρισμα των βελακίων */
    padding: 5px;
    background-color: rgba(0,0,0,0.5);
    color: #333;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
}


/* --- Carousel Styling --- */
.carousel-container {
    position: relative;
    margin: auto;
    background-color: #fff;
    overflow: hidden;
    touch-action: pan-y; /* Επιτρέπει μόνο οριζόντιο swipe για να μην συγκρούεται με την κύλιση της σελίδας */
}

.carousel-slides {
    display: flex; /* Χρησιμοποιούμε flexbox για οριζόντια διάταξη των slides */
    transition: transform 0.5s ease-in-out; /* Ομαλή μετάβαση για το transform */
}

.carousel-slide {
    flex-shrink: 0; /* Τα slides δεν θα συρρικνώνονται */
    width: 100%; /* Κάθε slide καταλαμβάνει το 100% του carousel-container */
    box-sizing: border-box;
    display: flex; /* Χρησιμοποιούμε flex για κεντράρισμα περιεχομένου */
    flex-direction: column;
    justify-content: center;
    align-items: center;
   /* padding: 20px;*/
    cursor: pointer; /* Δείχνει ότι είναι κλικάμπαλο */
}

.carousel-slide img,
.carousel-slide iframe {
    width: 100%;
   /* max-width: 600px; /* Μέγιστο πλάτος για εικόνες και iframes */
    height: auto;
   /* max-height: 400px; /* Περιορίζουμε το ύψος για καλύτερη εμφάνιση στο κύριο carousel */
    display: block;
    margin: 0 auto;
    border: none;
    object-fit: contain; /* Διατηρεί αναλογία χωρίς κόψιμο */
}

.carousel-slide iframe{height:100%;}

.slide-caption {
    margin-top: 8px;
    font-size: 1.1em;
    color: #555;
}

/* Κουμπιά πλοήγησης (προηγούμενο/επόμενο) */
.prev, .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    transform: translateY(-50%); /* Κεντράρισμα κάθετα */
    width: auto;
    padding: 5px;
    color: white;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
    background-color: rgba(0,0,0,0.5);
    text-decoration: none;
    z-index: 10; /* Για να είναι πάνω από τα slides */
}

.next {
    right: 0;
    border-radius: 3px 0 0 3px;
}

.prev {
    left: 0;
    border-radius: 0 3px 3px 0;
}

.prev:hover, .next:hover {
    background-color: rgba(0,0,0,1);
}

/* --- Thumbnail Styling --- */
.thumbnail-container {
    text-align: center;
    padding: 10px 0;
    background-color: #eee;
    border-top: 1px solid #ddd;
    display: flex;
    justify-content: center;
    align-items: center; /* Κεντράρισμα των βελακίων και του inner wrapper */
    overflow: hidden; /* Κρύβει τα βελάκια αν είναι εκτός */
}

.thumbnails-inner-wrapper {
    display: flex; /* Τα thumbnails θα είναι σε μια σειρά */
    overflow: hidden; /* Αυτό είναι σημαντικό για να κρύβονται τα επιπλέον thumbs */
    scroll-behavior: smooth; /* Ομαλή κύλιση όταν αλλάζουμε thumbs με JS */
    -webkit-overflow-scrolling: touch; /* Ομαλή κύλιση σε iOS */
    gap: 10px; /* Κενό μεταξύ των thumbnails */
    padding: 0 5px; /* Μικρό padding για να φαίνεται η αρχή/τέλος */
    /* Για να εμφανίζονται μόνο 4 thumbs, το πλάτος πρέπει να είναι 4 * (thumb_width + gap) */
    width: calc((100px + 10px) * 4); /* (πλάτος thumb + gap) * αριθμός ορατών thumb */
}

.thumbnail {
    flex-shrink: 0; /* Τα thumbnails δεν θα συρρικνώνονται */
    width: 100px;
    height: 75px;
    object-fit: cover;
    margin: 0; /* Αφαιρούμε το margin για να χρησιμοποιήσουμε gap */
    border: 2px solid transparent;
    cursor: pointer;
    opacity: 0.6;
    transition: all 0.3s ease;
}

.thumbnail:hover {
    opacity: 1;
    border-color: #555;
}

.thumbnail.active {
    opacity: 1;
    border-color: #000; /* Μπλε περίγραμμα για το ενεργό thumbnail */
}

.thumb-prev, .thumb-next {
    cursor: pointer;
    background-color: rgba(0,0,0,0.4);
    color: white;
    padding: 5px 8px;
    font-size: 1.2em;
    border-radius: 3px;
    user-select: none;
    margin: 0 5px; /* Κενό μεταξύ βέλους και inner wrapper */
    transition: background-color 0.3s ease;
    display: flex; /* Για κεντράρισμα του βέλους */
    align-items: center;
    justify-content: center;
    height: 30px; /* Σταθερό ύψος για τα βελάκια */
}

.thumb-prev:hover, .thumb-next:hover {
    background-color: rgba(0,0,0,0.8);
}

/* --- Lightbox/Popup Styling --- */
.lightbox {
    display: none; /* Κρυμμένο από προεπιλογή */
    position: fixed; /* Σταθερό στην οθόνη */
    z-index: 99999999; /* Πάνω από όλα τα άλλα στοιχεία */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.9); /* Μαύρο ημιδιαφανές φόντο */
    animation: fadeIn 0.5s;
    overflow: hidden; /* Αποτρέπουμε το scroll του lightbox container */
    touch-action: pan-y; /* Για swipe functionality στο lightbox */
}

.lightbox-content {
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    width: 90%; /* Μπορεί να προσαρμοστεί */
    max-width: 1200px; /* Μέγιστο πλάτος για το περιεχόμενο */
    height: 85%; /* Μέγιστο ύψος για να αφήνει χώρο για αρίθμηση/λεζάντα */
}

/* Στυλ για το κλωνοποιημένο slide μέσα στο lightbox */
/* Χρησιμοποιούμε .carousel-slide για να πάρει τα βασικά στυλ, αλλά όχι την κλάση product-slide */
.lightbox-content .carousel-slide {
    padding: 0; /* Αφαιρούμε padding στο slide μέσα στο lightbox */
    display: flex; /* Εξασφαλίζουμε flex για κεντράρισμα */
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    transition: none; /* Δεν θέλουμε transitions στα κλωνοποιημένα slides για το lightbox */
}

.lightbox-content img,
.lightbox-content iframe {
    max-width: 100%;
    max-height: 100%;
    width: auto; /* Αυτόματο πλάτος για να διατηρεί αναλογία */
    height: auto; /* Αυτόματο ύψος για να διατηρεί αναλογία */
    object-fit: contain; /* Για εικόνες, διατηρεί αναλογία χωρίς κόψιμο */
    border: none;
}
/* Για iframes στο lightbox, ίσως χρειαστεί συγκεκριμένο ύψος για να εμφανίζονται σωστά */
.lightbox-content iframe {
    width: 100%;
    height: 100%; /* Το iframe γεμίζει τον διαθέσιμο χώρο */
    max-height: 80vh; /* Περιορισμός ύψους για iframes στο lightbox */
}

.close-lightbox {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
    cursor: pointer;
    z-index: 10000; /* Πάνω από τα πάντα */
}

.close-lightbox:hover,
.close-lightbox:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

.lightbox-prev, .lightbox-next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: auto;
    padding: 16px;
    color: white;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
    background-color: rgba(0,0,0,0.8);
    text-decoration: none;
    z-index: 10000;
}

.lightbox-next {
    right: 0;
    border-radius: 3px 0 0 3px;
}

.lightbox-prev {
    left: 0;
    border-radius: 0 3px 3px 0;
}

.lightbox-prev:hover, .lightbox-next:hover {
    background-color: rgba(0,0,0,1);
}

.lightbox-numbertext {
    color: #f2f2f2;
    font-size: 15px;
    padding: 8px 12px;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    background-color: rgba(0,0,0,0.6);
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

.lightbox-caption {
    color: #f2f2f2;
    font-size: 18px;
    padding: 10px 12px;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    background-color: rgba(0,0,0,0.6);
    width: fit-content;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

/* Animations */
@keyframes fadeIn {
    from {opacity: 0}
    to {opacity: 1}
}

.toggle-thumbnails-layout {
    padding: 10px 20px;
    font-size: 1em;
    cursor: pointer;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    margin-top: 20px;
    transition: background-color 0.3s ease;
}

.toggle-thumbnails-layout:hover {
    background-color: #0056b3;
}

/* Media Queries for Responsiveness */
@media screen and (max-width: 768px) {
body .carousel-wrapper.not-thumb .thumbnail-container,body .carousel-wrapper.not-thumb .next,body .carousel-wrapper.not-thumb .prev{display: none !important;}

.carousel-wrapper.thumbnails-left .next, .carousel-wrapper.thumbnails-left .prev{display: block !important;}
  
    .carousel-wrapper.thumbnails-left {
        flex-direction: column; /* Σε μικρές οθόνες, τα thumbs πάνε κάτω */
        max-width: 800px; /* Επαναφορά στο αρχικό max-width */
    }
    .carousel-wrapper.thumbnails-left .carousel-container {
        max-width: 100%; /* Το κύριο carousel καταλαμβάνει όλο το πλάτος */
    }
    .carousel-wrapper.thumbnails-left .thumbnail-container {
      display:none;
    }

  .carousel-wrapper.thumbnails-left .carousel-container-slides{width: 100%;float: unset;max-width: 100%;}
  
    .carousel-wrapper.thumbnails-left .thumbnails-inner-wrapper {
        flex-direction: row; /* Τα thumbnails μέσα στο wrapper ξανά οριζόντια */
    }
    .carousel-wrapper.thumbnails-left .thumbnail {
        margin: 5px;
    }
    .carousel-wrapper.thumbnails-left .thumb-prev,
    .carousel-wrapper.thumbnails-left .thumb-next {
        margin: 0 5px;
    }

    .lightbox-content {
        width: 95%;
    }
    .lightbox-prev, .lightbox-next {
        font-size: 14px;
        padding: 10px;
    }
    .close-lightbox {
        font-size: 30px;
        right: 15px;
    }
    .lightbox-caption {
        font-size: 16px;
        bottom: 5px;
    }
    .lightbox-numbertext {
        font-size: 12px;
    }
}