/* =====================================================================
   product-detail.css - Fáze 4: Detail hry
   Barevné schéma klienta: zelená rgb(46,151,107) / #28a745
   ===================================================================== */

/* ---------- HODNOCENÍ ---------- */
.eg-detail-rating {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .5rem;
}

    .eg-detail-rating .eg-stars {
        --eg-star-size: 1.5rem;
    }

.eg-detail-rating-value {
    font-size: 1.25rem;
    font-weight: 800;
    color: #3a4a41;
    line-height: 1;
}

.eg-detail-rating-max {
    font-size: .9rem;
    color: #9e9e9e;
    line-height: 1;
}

/* ---------- HLAVNÍ OBRÁZEK ---------- */
.eg-detail-media {
    position: relative;
    border-radius: .65rem;
    overflow: hidden;
    background: #f2f4f2;
}

    .eg-detail-media img {
        width: 100%;
        height: auto;
        display: block;
    }

/* ---------- GALERIE NÁHLEDŮ ---------- */
.eg-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin-top: 1rem;
}

.eg-gallery-item {
    flex: 0 0 auto;
    width: 84px;
    height: 84px;
    border-radius: .5rem;
    overflow: hidden;
    border: 2px solid transparent;
    transition: border-color .15s ease, transform .15s ease;
}

    .eg-gallery-item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        filter: none;
        opacity: 1;
    }

    .eg-gallery-item:hover {
        border-color: rgb(46, 151, 107);
        transform: translateY(-2px);
    }

/* ---------- CENOVÝ BLOK ---------- */
.eg-detail-price {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    padding: 1rem 1.15rem;
    background: #f8faf9;
    border: 1px solid rgba(46, 151, 107, .15);
    border-radius: .65rem;
    margin-bottom: 1rem;
}

.eg-detail-price-old {
    font-size: 1rem;
    color: #9e9e9e;
    text-decoration: line-through;
}

.eg-detail-price-current {
    font-size: 2.1rem;
    font-weight: 800;
    line-height: 1.1;
    color: rgb(46, 151, 107);
}

    .eg-detail-price-current.is-sale {
        color: #dc3545;
    }

.eg-detail-sale-badges {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-top: .35rem;
}

    .eg-detail-sale-badges .badge {
        font-size: .8rem;
    }

/* ---------- STICKY CTA (mobil) ---------- */
.eg-sticky-cta {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1030;
    background: #fff;
    box-shadow: 0 -3px 14px rgba(0, 0, 0, .12);
    padding: .55rem .75rem;
    display: flex;
    gap: .5rem;
}

    .eg-sticky-cta .btn {
        flex: 1 1 auto;
        font-weight: 700;
    }

/* Odsazení obsahu, aby sticky lišta nepřekrývala patičku (jen mobil) */
@media (max-width: 575.98px) {
    .eg-detail-has-sticky {
        padding-bottom: 4.5rem;
    }
}

/* ---------- PODOBNÉ HRY ---------- */
.eg-related-title {
    font-weight: 700;
    margin: 2rem 0 1rem;
}

/* ---------- STICKY OBRÁZEK (Návrh A) ---------- */
@media (min-width: 992px) {
    .eg-detail-sticky {
        position: sticky;
        top: 1.25rem;
    }
}

/* ---------- BUYBOX (cena + tlačítka pohromadě) ---------- */
.eg-buybox {
    background: #f7f9f7;
    border: 1px solid #e6ebe6;
    border-radius: .75rem;
    padding: 1rem 1.15rem .35rem;
    margin-bottom: 1.25rem;
}

    .eg-buybox .eg-detail-price {
        margin-bottom: .5rem;
    }

    .eg-buybox .mb-5 {
        margin-bottom: .25rem !important;
    }

    .eg-buybox .btn-group .btn {
        border-radius: .55rem !important;
    }

    .eg-buybox .btn-group .btn + .btn {
        margin-left: .5rem;
    }

/* Na mobilu tlačítka mizí (je zde sticky CTA), takže buybox
   zjednodušíme na pouhou cenu bez vlastního rámečku (žádný dvojitý rámeček). */
@media (max-width: 575.98px) {
    .eg-buybox {
        background: transparent;
        border: 0;
        border-radius: 0;
        padding: 0;
        margin-bottom: .75rem;
    }

        .eg-buybox .mb-5 {
            display: none;
        }
}

/* ---------- SLIDER PODOBNÝCH HER (CSS scroll-snap) ---------- */
.eg-related-wrap {
    position: relative;
}

    /* Fade náznak, že lze posouvat (levý a pravý okraj) */
    .eg-related-wrap::before,
    .eg-related-wrap::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 1rem; /* zarovnat nad scrollbar */
        width: 3rem;
        pointer-events: none;
        z-index: 2;
    }

    .eg-related-wrap::before {
        left: 0;
        background: linear-gradient(90deg, #fff, rgba(255, 255, 255, 0));
    }

    .eg-related-wrap::after {
        right: 0;
        background: linear-gradient(270deg, #fff, rgba(255, 255, 255, 0));
    }

/* Navigační šipky */
.eg-related-nav {
    position: absolute;
    top: calc(50% - .5rem);
    transform: translateY(-50%);
    z-index: 3;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    border: 0;
    background: #fff;
    color: rgb(46, 151, 107);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .15s ease, transform .15s ease;
}

    .eg-related-nav:hover {
        background: rgb(46, 151, 107);
        color: #fff;
    }

.eg-related-nav-prev {
    left: -.6rem;
}

.eg-related-nav-next {
    right: -.6rem;
}

.eg-related-slider {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 3 * 1rem) / 4); /* 4 dlaždice na desktopu */
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 1rem;
    scrollbar-width: thin;
}

.eg-related-slide {
    scroll-snap-align: start;
}

    .eg-related-slide .eg-card {
        height: 100%;
    }

/* Místo a hodnocení v kartě slideru */
.eg-related-place {
    font-size: .82rem;
    color: #777;
    padding-top: .4rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

    .eg-related-place i {
        color: rgb(46, 151, 107);
    }

.eg-related-rating {
    display: flex;
    align-items: center;
    gap: .35rem;
    margin-top: .4rem;
}

.eg-related-rating-value {
    font-size: .8rem;
    font-weight: 700;
    color: #6b6b6b;
}

/* Přišpendlí meta blok (místo/hodnocení) ke spodní hraně karty,
   aby byl u všech her stejně zarovnaný bez ohledu na délku názvu.
   První div za nadpisem = místo (nebo hodnocení, pokud místo chybí). */
.eg-related-slide .eg-card-body > div:first-of-type {
    margin-top: auto;
}

.eg-related-rating-value {
    font-size: .8rem;
    font-weight: 700;
    color: #6b6b6b;
}

/* Vlastní scrollbar (WebKit) */
.eg-related-slider::-webkit-scrollbar {
    height: 8px;
}

.eg-related-slider::-webkit-scrollbar-thumb {
    background: rgba(46, 151, 107, .4);
    border-radius: 4px;
}

    .eg-related-slider::-webkit-scrollbar-thumb:hover {
        background: rgba(46, 151, 107, .65);
    }

/* Responzivní počet dlaždic podle šířky */
@media (max-width: 991.98px) {
    .eg-related-slider {
        grid-auto-columns: calc((100% - 2 * 1rem) / 3); /* tablet: 3 */
    }
}

@media (max-width: 767.98px) {
    .eg-related-slider {
        grid-auto-columns: calc((100% - 1rem) / 2); /* menší tablet: 2 */
    }
}

@media (max-width: 479.98px) {
    .eg-related-slider {
        grid-auto-columns: 78%; /* mobil: 1 a kousek dalšího jako náznak posuvu */
    }
}