/* ============================================================
 * Recensioni: stili pagina /recensioni
 * Ispirati alla sezione recensioni di /servizi (service.css).
 * Nessuna immagine di sfondo: layout pulito, ordine visivo.
 * La variante bottone .awe-btn-6 e' centralizzata in gb-main.css.
 * ============================================================ */

/* Pagina senza sub-banner: il main sale di -110px per il pattern globale
   di critical.css. Annulliamo e spingiamo il contenuto sotto l'header
   fixed (82px). Il BG del page-header è gestito dalla regola generica
   section:not(.banner)... in critical.css (#fafafa). */
.recensioni-page-header {
    margin-top: 80px;  /* -110 del main + 82 di header = 192px per portare il contenuto a 82px dal top */
    padding: 38px 0 22px;
    text-align: center;
    border-bottom: 1px solid #eeeef1;
}

.recensioni-page-header h1.title-carousel {
    margin: 0 0 6px;
    color: #393939;
    text-transform: uppercase;
    text-align: center;
}

.recensioni-page-header p.title-carousel2 {
    margin: 0 0 18px;
    color: #5e5c64;
}

.recensioni-page-header .insert-review-box {
    border-radius: 8px;
    padding: 0 18px;
    line-height: 42px;
    height: auto;
    text-transform: none;
}

/* ------------------------------------------------------------------
 * Barra filtri (ricerca struttura + filtro stelle)
 * ------------------------------------------------------------------ */
.recensioni-filters {
    padding-top: 22px;
    padding-bottom: 8px;
}

.recensioni-filters .row {
    margin: 0 -8px;
}

.recensioni-filters .row > [class*="col-"] {
    padding: 0 8px;
}

.recensioni-filters .has-feedback {
    position: relative;
}

.recensioni-filters .form-control {
    height: 44px;
    padding: 6px 44px 6px 14px;
    border: 1px solid #e0dfe5;
    border-radius: 8px;
    background: #fff;
    font-size: 0.92em;
    color: #27262c;
    box-shadow: none;
    transition: border-color 0.15s ease;
}

.recensioni-filters .form-control:focus {
    border-color: #ff176d;
    outline: 0;
}

.recensioni-filters .search-icon-search {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    pointer-events: none;
    background: #c2d313;
    border-radius: 50%;
    color: #fff !important;
    font-size: 0.85em;
}

.recensioni-filters .star-review-filter {
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
    border-radius: 8px;
}

.recensioni-filters .rating-stars {
    margin: 0;
}

.recensioni-filters .stars-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: inline-flex;
    gap: 4px;
}

.recensioni-filters .stars-list li.star {
    cursor: pointer;
    color: #dedde1;
    font-size: 1.15em;
    transition: color 0.15s ease;
}

.recensioni-filters .stars-list li.star.is-active,
.recensioni-filters .stars-list li.star:hover,
.recensioni-filters .stars-list li.star:hover ~ li.star {
    color: #f5b301;
}

.recensioni-filters .stars-list li.star.is-active ~ li.star {
    color: #dedde1;
}

/* ------------------------------------------------------------------
 * Griglia recensioni
 * Nota: solo padding verticale, mai orizzontale: il container Bootstrap
 * deve conservare il proprio padding-left/right (15px).
 * ------------------------------------------------------------------ */
    .recensioni-grid {
        padding-top: 14px;
        padding-bottom: 28px;
    }

    .recensioni-cards {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 14px 10px;
    }

    @media (max-width: 991px) {
        .recensioni-cards {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    @media (max-width: 767px) {
        .recensioni-cards {
            grid-template-columns: 1fr;
        }
    }

    /* ------------------------------------------------------------------
 * Card recensione (styleitem-review, layout flessibile, no carousel)
 * Altezza fissa come in services: il testo scrolla dentro la card.
 * ------------------------------------------------------------------ */
    .styleitem-review {
        width: 100%;
        height: 360px;
        margin: 8px 0;
        padding: 18px 18px 14px;
        display: flex;
        flex-direction: column;
        position: relative;
        background: #fff;
        border: 1px solid #e8e8ec;
        border-radius: 16px;
        box-shadow: 0 5px 18px rgba(25, 24, 31, 0.06);
        overflow: hidden;
    }

    .review-card-header,
    .review-author {
        display: flex;
        align-items: center;
    }

    .review-card-header {
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 14px;
    }

    .review-author {
        gap: 12px;
        min-width: 0;
    }

    /* Cerchietto avatar: foto profilo (cover) o iniziale */
    .review-author-initial {
        width: 44px;
        height: 44px;
        flex: 0 0 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        overflow: hidden;
        background: #393939;
        border-radius: 50%;
        color: #fff;
        font-size: 1.05em;
        font-weight: 700;
        text-transform: uppercase;
    }

    .review-author-initial img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
        object-position: center;
    }

    .review-author-info {
        min-width: 0;
        display: flex;
        flex-direction: column;
    }

    .user-review-img-header {
        display: block;
        overflow: hidden;
        color: #27262c;
        font-size: 0.95em;
        font-weight: 700;
        line-height: 1.25;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .review-date {
        display: block;
        margin-top: 2px;
        color: #88868e;
        font-size: 0.78em;
        line-height: 1.2;
    }

    .star-review-hotels {
        flex: 0 0 auto;
        display: flex;
        gap: 2px;
        padding: 0;
        color: #f5b301;
        font-size: 0.82em;
        text-align: left;
    }

    .star-review-hotels > i {
        margin: 0;
    }

    .star-review-hotels > i.is-empty {
        color: #dedde1;
    }

    .review-card-content {
        min-height: 0;
        flex: 1;
        display: flex;
        flex-direction: column;
    }

    .review-hotel-name {
        margin: 0 0 4px;
        color: #27262c;
        font-size: 1em;
        font-weight: 700;
        line-height: 1.35;
        text-align: left;
    }

    .review-hotel-name a {
        color: inherit;
        text-decoration: none;
    }

    .review-hotel-name a:hover {
        color: #ff176d;
    }

    .review-img-header {
        margin: 0 0 8px;
        color: #88868e;
        font-size: 0.88em;
        font-weight: 500;
        font-style: italic;
        line-height: 1.35;
        text-align: left;
    }

    .review-text-body {
        margin: 0;
        padding: 0 4px 0 0;
        flex: 1;
        color: #5e5c64;
        font-size: 0.9em;
        line-height: 1.55;
        text-align: left;
        word-break: break-word;
        overflow-wrap: anywhere;
        overflow-y: auto;
        min-height: 0;
        scrollbar-width: thin;
        scrollbar-color: #c8c7cc transparent;
    }

    .review-text-body::-webkit-scrollbar {
        width: 6px;
    }

    .review-text-body::-webkit-scrollbar-track {
        background: transparent;
    }

    .review-text-body::-webkit-scrollbar-thumb {
        background: #c8c7cc;
        border-radius: 4px;
    }

    .review-card-footer {
        flex: 0 0 auto;
        margin-top: 12px;
        padding: 10px 0 0;
        background: #fff;
        display: flex;
        flex-wrap: wrap;
        gap: 8px 14px;
        align-items: center;
        justify-content: space-between;
    }

    .review-card-footer .recensioni-foto-trigger {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 5px 10px;
        background: #f5f5f7;
        border: 1px solid #e8e8ec;
        border-radius: 999px;
        color: #27262c;
        font-size: 0.82em;
        font-weight: 600;
        cursor: pointer;
        transition: background 0.15s ease, border-color 0.15s ease;
    }

    .review-card-footer .recensioni-foto-trigger:hover,
    .review-card-footer .recensioni-foto-trigger:focus {
        background: #fff;
        border-color: #ff176d;
        color: #ff176d;
        outline: none;
    }

    .review-card-footer .recensioni-foto-trigger svg {
        flex: 0 0 auto;
    }

    .review-card-footer .recensioni-foto-trigger small {
        color: inherit;
        font-weight: 500;
    }

    .review-video-button {
        padding: 0;
        color: #ff176d;
        background: transparent;
        border: 0;
        font-size: 0.85em;
        font-weight: 600;
        cursor: pointer;
    }

    .review-video-button i {
        margin-right: 5px;
    }

    .review-video-button:hover {
        color: #d4005a;
    }

    /* ------------------------------------------------------------------
 * Nessuna recensione trovata
 * ------------------------------------------------------------------ */
    .recensioni-empty {
        text-align: center;
        padding: 40px 20px;
        color: #5e5c64;
    }

    .recensioni-empty i {
        font-size: 2rem;
        color: #ccc;
        margin-bottom: 15px;
        display: block;
    }

    .recensioni-empty p {
        margin: 0 0 6px;
        font-size: 1.1em;
    }

    /* ------------------------------------------------------------------
 * Sentinel + loading indicator (IntersectionObserver)
 * ------------------------------------------------------------------ */
    .recensioni-sentinel {
        width: 100%;
        height: 1px;
        margin: 0;
        padding: 0;
    }

    .recensioni-loading {
        display: none;
        text-align: center;
        padding: 18px 0 4px;
        color: #88868e;
        font-size: 0.9em;
    }

    .recensioni-loading.is-visible {
        display: block;
    }

    .recensioni-loading i {
        margin-right: 6px;
        animation: recensioni-spin 0.9s linear infinite;
    }

    @keyframes recensioni-spin {
        to {
            transform: rotate(360deg);
        }
    }

    /* ------------------------------------------------------------------
 * Responsive
 * ------------------------------------------------------------------ */
    @media (max-width: 768px) {
        .recensioni-page-header {
            padding: 24px 16px 16px;
        }

        .recensioni-page-header h1.title-carousel {
            font-size: 1.5em;
            text-align: center;
        }

        .recensioni-page-header p.title-carousel2 {
            font-size: 0.95em;
        }

        .recensioni-page-header .insert-review-box {
            padding: 0 14px;
            font-size: 0.85em;
            line-height: 38px;
        }

        .recensioni-filters {
            padding-left: 16px;
            padding-right: 16px;
        }

        .recensioni-filters .row {
            margin: 0;
        }

        .recensioni-filters .row > [class*="col-"] {
            padding: 0 4px;
            margin-bottom: 10px;
        }

        .recensioni-page-header .container,
        .recensioni-filters,
        .container.recensioni-grid {
            box-sizing: border-box;
            max-width: 100%;
        }

        .recensioni-grid {
            padding-top: 14px;
            padding-bottom: 28px;
            padding-left: 16px;
            padding-right: 16px;
        }

        .styleitem-review {
            margin: 6px 0 14px;
            padding: 14px;
            border-radius: 14px;
        }

        .review-author-initial {
            width: 38px;
            height: 38px;
            flex-basis: 38px;
            font-size: 0.95em;
        }

        .review-card-header {
            align-items: flex-start;
            gap: 10px;
            margin-bottom: 11px;
        }

        .star-review-hotels {
            padding-top: 3px;
            font-size: 0.74em;
        }

        .review-img-header {
            margin-bottom: 6px;
            font-size: 0.84em;
        }

        .review-hotel-name {
            margin-bottom: 3px;
            font-size: 0.95em;
        }

        .review-text-body {
            font-size: 0.86em;
            line-height: 1.5;
        }

        .review-card-footer {
            gap: 6px 10px;
        }

    .review-card-footer .recensioni-foto-trigger {
        font-size: 0.78em;
        padding: 4px 9px;
    }
}

/* ------------------------------------------------------------------
 * Variante "card con avatar" riusabile: review-item.
 * Card visibile con header (avatar tondo + nome/stelle), titolo,
 * corpo clampato 2 righe, footer (data + CTA video/foto).
 * Bumpare la versione in Assets::add dopo ogni modifica qui.
 * ------------------------------------------------------------------ */
.review-item {
    flex: 1;
    background: #fff;
    border: 1px solid #e8e8ec;
    border-radius: 12px;
    box-shadow: 0 4px 14px rgba(25, 24, 31, 0.06);
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 0;
    overflow: hidden;
}

.review-item-head {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.review-item-avatar {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    border-radius: 50%;
    overflow: hidden;
    background: #393939;
    color: #fff;
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 1.05em;
    text-transform: uppercase;
}

.review-item-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.review-item-author {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.review-item-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #27262c;
    font-weight: 700;
    font-size: 0.95em;
    line-height: 1.25;
}

.review-item-stars {
    display: flex;
    gap: 3px;
    padding: 0;
    color: #f5b301;
    font-size: 0.78em;
}

.review-item-stars i {
    margin: 0;
}

.review-item-stars i.is-empty {
    color: #dedde1;
}

.review-item-title {
    margin: 0;
    color: #27262c;
    font-size: 0.95em;
    font-weight: 700;
    line-height: 1.3;
    text-align: left;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.review-item-text {
    margin: 0;
    color: #5e5c64;
    font-size: 0.88em;
    font-weight: 400;
    line-height: 1.5;
    text-align: left;
    word-break: break-word;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.review-item-footer {
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid #f0f0f3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: #88868e;
    font-size: 0.78em;
    line-height: 1.3;
}

.review-item-footer time {
    color: inherit;
}

.review-item-footer .review-video-button {
    margin-left: auto;
}

/* Padding interno al wrapper del carousel recensioni Home, con altezza
 * uniforme: owl-item ha altezza fissa, review-item riempie con flex:1.
 * box-sizing: border-box per evitare che OWL ricalcoli la width;
 * padding orizzontale di 15px su ciascun lato = 30px di distanza tra
 * card adiacenti. */
.owl-carousel-recensioni-home .owl-item {
    box-sizing: border-box;
    height: 265px;
    display: flex;
    padding: 15px;
}

.owl-carousel-recensioni-home .owl-wrapper {
    padding: 15px 0;
}

/* Su mobile nascondi le frecce avanti/indietro di OWL, lascia solo i
 * dots/pallini di paginazione (pattern analogo a owl-carousel-vetrina2).
 * (OWL 1.x: owl-controls contiene le frecce .owl-buttons/.owl-prev/.owl-next
 * e i dots .owl-pagination > .owl-page > span.) */
@media (max-width: 991px) {
    .owl-carousel-recensioni-home .owl-prev,
    .owl-carousel-recensioni-home .owl-next,
    .owl-carousel-recensioni-home .owl-buttons {
        display: none !important;
    }

    .owl-carousel-recensioni-home .owl-controls {
        padding: 12px 0;
        text-align: center;
        position: relative;
        z-index: 9;
    }

    .owl-carousel-recensioni-home .owl-controls .owl-page {
        display: inline-block;
    }

    .owl-carousel-recensioni-home .owl-controls .owl-page span {
        background: #869791;
        border-radius: 20px;
        display: block;
        height: 12px;
        margin: 5px 7px;
        opacity: 0.5;
        width: 12px;
    }

    .owl-carousel-recensioni-home .owl-controls .owl-page.active span,
    .owl-carousel-recensioni-home .owl-controls .owl-pagination .active span {
        opacity: 1;
    }
}