/**
 * FolkBeauty Webshop - Galéria, Lightbox, Gyorsnézet Stílusok (v2.0)
 */

/* --- Termékoldali Galéria --- */
.product-gallery {
    /* Nincs szükség külön konténer stílusra, ha a col-lg-6-ban van */
}

/* Fő kép */
.product-img {
    border: 1px solid var(--szin-keret);
    border-radius: var(--radius-md);
    background-color: var(--feher); /* Hogy átlátszó képeknél is legyen háttér */
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
    max-height: 600px; /* Maximális magasság */
    object-fit: contain; /* Tartsa meg az arányokat, ne vágja le */
    cursor: pointer; /* Jelezzük, hogy kattintható (lightbox) */
}
.product-img:hover {
    box-shadow: var(--shadow-md);
}
body.dark-theme .product-img {
     background-color: var(--szurke-800); /* Sötét háttér a képnek */
     border-color: var(--szurke-700);
}


/* Thumbnail képek */
.product-thumbnails {
    /* Flexbox vagy Grid használható a rendezéshez */
}
.product-thumb {
    width: 80px;
    height: 80px;
    object-fit: cover; /* Lefedi a területet, vágással */
    border-radius: var(--radius-sm);
    cursor: pointer;
    border: 2px solid transparent; /* Keret az aktív állapothoz */
    transition: all var(--transition-fast);
    opacity: 0.7;
}
.product-thumb:hover {
    opacity: 1;
    border-color: var(--szurke-400);
}
.product-thumb.active {
    opacity: 1;
    border-color: var(--piros);
    box-shadow: 0 0 5px rgba(var(--piros-rgb, 196, 0, 17), 0.5);
}
body.dark-theme .product-thumb:hover {
     border-color: var(--szurke-500);
}
body.dark-theme .product-thumb.active {
     border-color: var(--piros);
     box-shadow: 0 0 8px rgba(var(--piros-rgb, 255, 143, 143), 0.6); /* Világosabb piros árnyék */
}


/* --- Gyorsnézet Modal (Modal specifikus stílusok) --- */
.quickview-modal .modal-content {
    background-color: var(--szin-kartya-hatter);
    border-radius: var(--radius-lg);
    border: none;
    box-shadow: var(--shadow-lg);
}
.quickview-modal .modal-header {
    border-bottom: 1px solid var(--szin-keret);
    padding: var(--spacing-md) var(--spacing-lg);
}
.quickview-modal .modal-title {
    color: var(--szin-szoveg);
}
.quickview-modal .modal-body {
    padding: var(--spacing-lg);
    color: var(--szin-szoveg);
}
.quickview-image {
    max-height: 450px; /* Max magasság a modalban */
    object-fit: contain; /* Tartsa meg az arányokat */
    border-radius: var(--radius-md);
    background-color: var(--feher); /* Háttér átlátszó képeknek */
}
body.dark-theme .quickview-image {
    background-color: var(--szurke-700);
}
.quickview-price {
     color: var(--piros);
}
.quickview-description {
    max-height: 100px; /* Limitáljuk a leírás hosszát a modalban */
    overflow-y: auto; /* Görgethető, ha hosszabb */
    font-size: var(--font-size-sm);
    margin-bottom: var(--spacing-md) !important; /* Fontos, hogy legyen hely alatta */
}
.quickview-stock-info {
     font-weight: 600;
     margin-bottom: var(--spacing-md);
}

/* --- Lightbox Modal (Bootstrap Carousel alapú) --- */
.lightbox-modal .modal-dialog {
     max-width: 90vw; /* Szélesebb modal */
}
.lightbox-modal .modal-content {
    background-color: rgba(0, 0, 0, 0.9); /* Sötétebb, átlátszóbb háttér */
    border-radius: 0; /* Teljes képernyős hatás */
}
body.dark-theme .lightbox-modal .modal-content {
     background-color: rgba(15, 12, 10, 0.95); /* Melegebb sötét */
}
.lightbox-modal .modal-body {
    padding: 0; /* Nincs padding a body-n */
}

/* Lightbox Carousel Stílusok */
#productLightboxCarousel {
     /* Nincs szükség extra stílusra itt, a belső elemeket formázzuk */
}
.lightbox-modal .carousel-inner {
    /* Nincs szükség háttérre, mert a modal-content már sötét */
    border-radius: var(--radius-md); /* Lekerekítés a képnek */
    overflow: hidden; /* Biztosítja a lekerekítést */
}
.lightbox-carousel-image {
    /* Méretezés a modal body magasságához képest */
    max-height: calc(100vh - 160px); /* Levonjuk a kb. gombok és margók magasságát */
    object-fit: contain;
    margin: auto; /* Középre igazítás */
}

/* Lightbox Navigáció és Thumbnailek */
.lightbox-modal .lightbox-close-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 10; /* Legyen a carousel felett */
    filter: invert(1) grayscale(100%); /* Fehér ikon */
    font-size: 1.8rem;
    opacity: 0.8;
}
.lightbox-modal .lightbox-close-btn:hover {
    opacity: 1;
}

.lightbox-modal .lightbox-nav-btn { /* Carousel control gombok */
    width: auto; /* Automatikus szélesség */
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0.7;
}
.lightbox-modal .lightbox-nav-btn:hover {
     background: rgba(255, 255, 255, 0.2);
     opacity: 1;
}
body.dark-theme .lightbox-modal .lightbox-nav-btn {
      background: rgba(255, 255, 255, 0.08);
}
body.dark-theme .lightbox-modal .lightbox-nav-btn:hover {
      background: rgba(255, 255, 255, 0.15);
}


.lightbox-modal .carousel-indicators {
    position: static; /* Ne legyen abszolút pozícióban */
    margin: var(--spacing-md) auto 0; /* Térköz a kép alatt */
    padding: 0 var(--spacing-md);
    flex-wrap: wrap; /* Tördelés kisebb képernyőn */
    justify-content: center;
    max-width: 80%; /* Ne legyen túl széles */
}
.lightbox-modal .carousel-indicators button {
    width: 70px !important; /* Növelt méret */
    height: 70px !important;
    margin: 5px !important;
    opacity: 0.6;
    transition: opacity var(--transition-fast);
    border: 2px solid transparent;
    padding: 0;
    background: transparent; /* Nincs háttér */
    overflow: hidden; /* Lekerekítéshez */
    border-radius: var(--radius-sm);
}
.lightbox-modal .carousel-indicators button img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block; /* Nincs extra hely alatta */
}
.lightbox-modal .carousel-indicators button.active {
    opacity: 1;
    border-color: var(--feher);
}
.lightbox-modal .carousel-indicators button:hover {
    opacity: 0.9;
}

/* Sötét téma lightbox indikátorok */
body.dark-theme .lightbox-modal .carousel-indicators button.active {
     border-color: var(--piros);
}