/* ===== Navigare tab-uri produs (Descriere/Specificații/Recenzii) ===== */
/* Buton de tab individual din navigarea produsului */
.product-tabs-tab {
    background-color: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    color: var(--color-content-primary);
    font-weight: var(--font-weight-semibold);
    padding: 0.875rem 1.5rem;
}

.product-tabs-tab:hover {
    background-color: var(--color-bg-secondary);
}

/* Stare activă/hover a tab-ului selectat */
.product-tabs-tab-active,
.product-tabs-tab-active:hover {
    background-color: var(--color-bg-button-secondary-active);
    border-color: var(--color-bg-button-secondary-active);
    color: var(--color-content-button-secondary-active);
}

/* Panou de conținut asociat unui tab */
.product-tabs-panel {
    display: none;
}

.product-tabs-panel-active {
    display: block;
}

/* Trigger acordeon (varianta mobil/tabletă a tab-urilor) */
.product-tabs-accordion-trigger {
    background: none;
    border: none;
    padding: 1.25rem 0;
    font-size: var(--text-m-size);
    font-weight: var(--font-weight-semibold);
    color: var(--color-content-primary);
}

/* Iconiță chevron a acordeonului */
.product-tabs-chevron {
    transition: transform var(--transition-fast);
}

.product-tabs-panel-active .product-tabs-chevron {
    transform: rotate(180deg);
}

/* Titlu de secțiune generic în interiorul tab-urilor (ex: "Descriere") */
.product-tabs-section-title {
    font-size: var(--heading-s-size);
    line-height: var(--heading-s-line);
    color: var(--color-content-primary);
    margin-bottom: 1.5rem;
}

/* Desktop (>=992px): panourile vizibile simultan, nav sticky */
@media (min-width: 992px) {
    .product-tabs-nav-spacer {
        margin-bottom: 1.5rem;
    }

    .product-tabs-nav-inner {
        padding: 1rem 0;
    }

    /* Bara de tab-uri fixată sus la scroll */
    .product-tabs-nav.product-tabs-nav-fixed {
        position: fixed;
        left: 0;
        right: 0;
        top: var(--product-sticky-bar-height, 0px);
        z-index: 3;
        background-color: var(--color-bg-primary);
        border-bottom: 1px solid var(--color-border-primary);
        box-shadow: var(--shadow-sm);
    }

    /* Conținutul intern al bării fixate */
    .product-tabs-nav.product-tabs-nav-fixed .product-tabs-nav-inner-wrap {
        max-width: var(--site-container-max-width);
        margin-left: auto;
        margin-right: auto;
        padding-left: var(--site-container-padding-x);
        padding-right: var(--site-container-padding-x);
    }

    .product-tabs-content {
        border: 1px solid var(--color-border-primary);
        border-radius: var(--radius-lg);
        padding: 2rem;
    }

    /* Toate panourile afișate simultan pe desktop */
    .product-tabs-panel {
        display: block;
        scroll-margin-top: calc(var(--product-sticky-bar-height, 0px) + 6rem);
    }

    .product-tabs-panel + .product-tabs-panel {
        border-top: 1px solid var(--color-border-primary);
        margin-top: 2.5rem;
        padding-top: 2.5rem;
    }
}

/* Tabletă/mobil (<=991.98px): fiecare panou devine acordeon */
@media (max-width: 991.98px) {
    .product-tabs-panel {
        display: block;
        border: 1px solid var(--color-border-primary);
        border-radius: var(--radius-lg);
    }

    .product-tabs-panel + .product-tabs-panel {
        margin-top: 1rem;
    }

    .product-tabs-accordion-trigger {
        padding: 1.25rem;
    }

    .product-tabs-panel-active .product-tabs-accordion-trigger {
        border-bottom: 1px solid var(--color-border-primary);
    }

    /* Corpul acordeonului */
    .product-tabs-body {
        display: none;
        padding: 1.25rem 1.25rem 1.5rem;
    }

    .product-tabs-panel-active .product-tabs-body {
        display: block;
    }
}

/* ===== Tab Descriere produs: text lung cu opțiune de trunchiere ===== */
.product-tabs-description {
    position: relative;
}

/* Stare trunchiată a descrierii ("citește mai mult") */
.product-tabs-description-collapsed {
    max-height: 500px;
    overflow: hidden;
}

.product-tabs-description-collapsed::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 4rem;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--color-bg-primary));
    pointer-events: none;
}

.product-tabs-feature-title {
    font-size: var(--heading-s-size);
    line-height: var(--heading-s-line);
    color: var(--color-content-primary);
    margin-bottom: 1rem;
}

/* ===== Tab Specificații: tabel cu grupuri de caracteristici tehnice ===== */
.product-specs-group-title {
    font-size: var(--heading-xs-size);
    line-height: var(--heading-xs-line);
    color: var(--color-content-primary);
}

.product-specs-table {
    width: 100%;
    border-collapse: collapse;
}

.product-specs-table td {
    border-top: 1px solid var(--color-border-primary);
    padding: 0.75rem 0;
    font-size: var(--text-s-size);
    vertical-align: top;
}

.product-specs-table tr:first-child td {
    border-top: none;
}

.product-specs-label {
    color: var(--color-content-secondary);
    width: 45%;
}

.product-specs-value {
    color: var(--color-content-primary);
    font-weight: var(--font-weight-semibold);
}

/* ===== Tab Recenzii: sumar scor + distribuție rating-uri ===== */
.product-reviews-summary {
    gap: 1.5rem;
    margin-bottom: 2rem;
}

/* Scorul numeric mare (ex: 4.8) din sumarul de recenzii */
.product-reviews-score-value {
    font-size: var(--heading-l-size);
    line-height: var(--heading-l-line);
    font-weight: var(--font-weight-semibold);
    color: var(--color-content-primary);
}

.product-reviews-score-count {
    color: var(--color-content-tertiary);
    font-size: var(--text-s-size);
}

/* Coloana cu barele de distribuție a rating-urilor (5 stele -> 1 stea) */
.product-reviews-distribution {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    justify-content: center;
}

.product-reviews-distribution-label {
    width: 4rem;
    flex-shrink: 0;
    font-size: var(--text-s-size);
    color: var(--color-content-primary);
}

/* Bara de progres Bootstrap folosită pentru procentul fiecărui nivel de rating */
.product-reviews-progress {
    height: 0.375rem;
    background-color: var(--color-bg-secondary);
}

.product-reviews-progress .progress-bar {
    background-color: var(--color-content-primary);
}

.product-reviews-distribution-percent {
    width: 2.5rem;
    flex-shrink: 0;
    text-align: right;
    font-size: var(--text-s-size);
    color: var(--color-content-tertiary);
}

/* Casetă call-to-action "lasă o recenzie" din sumar */
.product-reviews-cta {
    background-color: var(--color-bg-secondary);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    text-align: center;
    flex-shrink: 0;
}

.product-reviews-cta-title {
    font-size: var(--heading-xs-size);
    line-height: var(--heading-xs-line);
    color: var(--color-content-primary);
}

.product-reviews-cta-text {
    font-size: var(--text-s-size);
    color: var(--color-content-secondary);
}

/* ===== Galerie foto/video din recenziile clienților ===== */
.product-reviews-media {
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.product-reviews-media-title {
    font-size: var(--heading-xs-size);
    line-height: var(--heading-xs-line);
    color: var(--color-content-primary);
}

/* Grid de thumbnail-uri media: 4 coloane implicit (mobil) */
.product-reviews-media-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
}

.product-reviews-media-item,
.product-reviews-media-more {
    background: none;
    border: none;
    padding: 0;
}

/* Thumbnail individual (foto/video) din galerie */
.product-reviews-media-item {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: var(--radius-md);
    overflow: hidden;
}

.product-reviews-media-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Iconiță play suprapusă peste thumbnail-urile video */
.product-reviews-media-play {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-pill);
    background-color: rgba(255, 255, 255, 0.9);
}

/* Buton "+N mai multe" afișat peste ultimul thumbnail din grid */
.product-reviews-media-more {
    aspect-ratio: 1 / 1;
    border-radius: var(--radius-md);
    background-color: var(--color-bg-secondary);
    color: var(--color-content-primary);
    font-weight: var(--font-weight-semibold);
}

/* Tabletă+ (>=768px) */
@media (min-width: 768px) {
    .product-reviews-media-grid {
        grid-template-columns: repeat(7, 1fr);
    }
}

/* ===== Card individual de recenzie (sidebar recenzent + text recenzie) ===== */
.product-review-card {
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
}

/* Coloană sidebar a cardului de recenzie: avatar, nume, recomandare, verificat, variantă cumpărată */
.product-review-sidebar {
    background-color: var(--color-bg-secondary);
    border-radius: var(--radius-md);
    padding: 1.25rem;
    text-align: center;
}

.product-review-avatar {
    width: 4rem;
    height: 4rem;
    border-radius: var(--radius-pill);
    object-fit: cover;
    margin: 0 auto 0.75rem;
}

.product-review-avatar-placeholder {
    background-color: var(--color-bg-tertiary);
}

.product-review-name {
    font-weight: var(--font-weight-semibold);
    color: var(--color-content-primary);
}

/* Etichetă "recomandă produsul", cu variantă negativă pentru nerecomandare */
.product-review-recommend {
    justify-content: center;
    font-size: var(--text-s-size);
    color: var(--color-content-positive-secondary);
    margin-top: 0.375rem;
}

.product-review-recommend-negative {
    color: var(--color-content-negative-secondary);
}

.product-review-verified {
    justify-content: center;
    font-size: var(--text-s-size);
    color: var(--color-content-positive-secondary);
    margin-top: 0.75rem;
}

/* Bloc variantă produs achiziționată de recenzent (culoare/mărime etc.) */
.product-review-variant {
    margin-top: 1rem;
}

.product-review-variant-label {
    font-size: var(--text-s-size);
    color: var(--color-content-tertiary);
}

.product-review-variant .flex-wrap {
    justify-content: center;
}

.product-review-variant-pill {
    background-color: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-md);
    padding: 0.375rem 0.75rem;
    font-size: var(--text-xs-size);
    color: var(--color-content-primary);
}

.product-review-variant-inline {
    font-size: var(--text-s-size);
    color: var(--color-content-tertiary);
}

/* Text ajutător "a fost util?" (variante normală/compactă) și data recenziei */
.product-review-helpful-text {
    color: var(--color-content-tertiary);
    font-size: var(--text-s-size);
}

.product-review-helpful-compact {
    color: var(--color-content-tertiary);
    font-size: var(--text-s-size);
}

.product-review-date {
    color: var(--color-content-tertiary);
    font-size: var(--text-s-size);
}

.product-review-text {
    font-size: var(--text-s-size);
    color: var(--color-content-primary);
}

/* Buton rotund "util"/like pentru recenzie */
.product-review-helpful-btn {
    width: 2.5rem;
    height: 2.5rem;
    background-color: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: 50%;
    color: var(--color-content-primary);
}

.product-review-helpful-btn:hover {
    background-color: var(--color-bg-secondary);
}

/* ===== Lightbox modal pentru vizualizarea imaginilor din recenzii ===== */
.product-reviews-lightbox .modal-content {
    border-radius: var(--radius-lg);
    border: none;
}

.product-reviews-lightbox-header {
    border-bottom: 1px solid var(--color-border-primary);
}

.product-reviews-lightbox-title {
    font-size: var(--heading-xs-size);
    line-height: var(--heading-xs-line);
    color: var(--color-content-primary);
}

.product-reviews-lightbox-close {
    width: 2.5rem;
    height: 2.5rem;
    background-color: var(--color-bg-secondary);
    border: none;
}

/* Zona principală a lightbox-ului: imaginea mare centrată */
.product-reviews-lightbox-main {
    position: relative;
    background-color: var(--color-bg-secondary);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 20rem;
}

.product-reviews-lightbox-image {
    max-width: 100%;
    max-height: 32rem;
    object-fit: contain;
}

/* Săgeți navigare prev/next peste imaginea principală */
.product-reviews-lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
}

.product-reviews-lightbox-nav--prev {
    left: 1rem;
}

.product-reviews-lightbox-nav--next {
    right: 1rem;
}

/* Bandă orizontală de thumbnail-uri sub imaginea principală */
.product-reviews-lightbox-thumbs-track {
    overflow-x: auto;
    scrollbar-width: none;
    flex: 1 1 auto;
    min-width: 0;
}

.product-reviews-lightbox-thumbs-track::-webkit-scrollbar {
    display: none;
}

.product-reviews-lightbox-thumb {
    width: 4rem;
    height: 4rem;
    flex-shrink: 0;
    background: none;
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-md);
    padding: 0.25rem;
    overflow: hidden;
}

.product-reviews-lightbox-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-sm);
}

.product-reviews-lightbox-thumb-active {
    border-color: var(--color-border-brand);
}

/* Bloc info recenzent afișat lângă imaginea din lightbox */
.product-reviews-lightbox-reviewer {
    border-left: 1px solid var(--color-border-primary);
    padding-left: 1rem;
}

.product-reviews-lightbox-reviewer-name {
    font-weight: var(--font-weight-semibold);
    color: var(--color-content-primary);
    font-size: var(--text-s-size);
    white-space: nowrap;
}

/* Mobil (<768px): lightbox ca bottom-sheet (poziționare/animație din .form-modal) */
@media (max-width: 767.98px) {
    .product-reviews-lightbox .modal-content {
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        max-height: calc(100vh - 70px);
        max-height: calc(100dvh - 70px);
        overflow-y: auto;
    }
}