/* ========================================
   AVALIAÇÃO LISTA - Layout Estilo Airbnb
   Página de listagem de avaliações do imóvel
   ======================================== */

/* ========== VARIÁVEIS ========== */
:root {
    --al-primary: #222222;
    --al-secondary: #717171;
    --al-accent: #FF385C;
    --al-star: #f59e0b;
    --al-border: #EBEBEB;
    --al-bg: #f7f7f7;
    --al-bar-bg: #DDDDDD;
    --al-bar-fill: #222222;
}

/* ========== HEADER DO IMÓVEL ========== */
.al-imovel-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 32px;
}

.al-imovel-thumb {
    width: 160px;
    height: 110px;
    border-radius: 12px;
    overflow: hidden;
    flex-shrink: 0;
}

.al-imovel-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.al-imovel-thumb-placeholder {
    width: 100%;
    height: 100%;
    background: var(--al-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--al-secondary);
}

.al-imovel-info h2 {
    font-size: 22px;
    font-weight: 600;
    color: var(--al-primary);
    margin: 0 0 4px 0;
}

.al-imovel-location {
    font-size: 14px;
    color: var(--al-secondary);
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ========== SEÇÃO DE DESTAQUE DA NOTA ========== */
.al-rating-highlight {
    text-align: center;
    padding: 32px 24px 24px;
    background: #ffffff;
    border: 1px solid var(--al-border);
    border-radius: 12px;
    margin-bottom: 32px;
}

.al-rating-big {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 8px;
}

.al-rating-big i {
    font-size: 28px;
    color: var(--al-accent);
}

.al-rating-big .al-rating-number {
    font-size: 56px;
    font-weight: 700;
    color: var(--al-primary);
    line-height: 1;
}

.al-rating-label {
    font-size: 18px;
    font-weight: 600;
    color: var(--al-primary);
    margin-bottom: 4px;
}

.al-rating-sublabel {
    font-size: 14px;
    color: var(--al-secondary);
    margin-bottom: 0;
}

/* ========== CATEGORIAS + DISTRIBUIÇÃO ========== */
.al-categories-section {
    display: flex;
    gap: 0;
    padding: 24px 0 0;
    border-top: 1px solid var(--al-border);
    margin-top: 24px;
}

/* Coluna de distribuição geral */
.al-distribution-col {
    flex: 0 0 160px;
    padding-right: 24px;
    border-right: 1px solid var(--al-border);
}

.al-distribution-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--al-primary);
    margin-bottom: 12px;
}

.al-distribution-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}

.al-distribution-label {
    font-size: 12px;
    color: var(--al-secondary);
    width: 14px;
    text-align: right;
}

.al-distribution-bar {
    flex: 1;
    height: 4px;
    background: var(--al-bar-bg);
    border-radius: 2px;
    overflow: hidden;
}

.al-distribution-bar-fill {
    height: 100%;
    background: var(--al-primary);
    border-radius: 2px;
}

.al-distribution-count {
    font-size: 11px;
    color: var(--al-secondary);
    width: 16px;
    text-align: right;
}

/* Colunas de categorias */
.al-categories-grid {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 0;
}

.al-category-col {
    flex: 1 1 calc(100% / 7);
    min-width: 100px;
    padding: 0 16px;
    border-right: 1px solid var(--al-border);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.al-category-col:last-child {
    border-right: none;
}

.al-category-icon {
    font-size: 18px;
    color: var(--al-primary);
    margin-bottom: 6px;
}

.al-category-name {
    font-size: 12px;
    color: var(--al-secondary);
    margin-bottom: 6px;
    white-space: nowrap;
}

.al-category-value {
    font-size: 20px;
    font-weight: 600;
    color: var(--al-primary);
    margin-bottom: 8px;
}

.al-category-bar {
    height: 4px;
    background: var(--al-bar-bg);
    border-radius: 2px;
    overflow: hidden;
}

.al-category-bar-fill {
    height: 100%;
    background: var(--al-bar-fill);
    border-radius: 2px;
}

/* ========== GRID DE REVIEWS ========== */
.al-reviews-section {
    background: #ffffff;
    border: 1px solid var(--al-border);
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 32px;
}

.al-reviews-title {
    font-size: 22px;
    font-weight: 600;
    color: var(--al-primary);
    margin-bottom: 24px;
}

.al-reviews-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px 40px;
}

.al-review-card {
    padding-bottom: 24px;
    border-bottom: 1px solid var(--al-border);
}

/* Review header: avatar + nome + data */
.al-review-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.al-review-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

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

.al-review-avatar i {
    font-size: 20px;
    color: #6366f1;
}

.al-review-meta {
    flex: 1;
}

.al-review-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--al-primary);
    margin: 0 0 2px 0;
}

.al-review-info {
    display: flex;
    align-items: center;
    gap: 8px;
}

.al-review-stars {
    display: flex;
    gap: 2px;
}

.al-review-stars i {
    font-size: 12px;
    color: var(--al-bar-bg);
}

.al-review-stars i.active {
    color: var(--al-star);
}

.al-review-date {
    font-size: 13px;
    color: var(--al-secondary);
}

/* Nota média numérica inline com estrelas */
.al-review-rating-value {
    font-size: 13px;
    font-weight: 600;
    color: var(--al-primary);
}

/* Grid de categorias no card (ícones) */
.al-review-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
    margin-bottom: 12px;
}

.al-review-cat {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    background: var(--al-bg);
    border-radius: 6px;
}

.al-review-cat-icon {
    font-size: 11px;
    color: var(--al-secondary);
}

.al-review-cat-value {
    font-size: 12px;
    font-weight: 600;
    color: var(--al-primary);
}

/* Comentário truncado */
.al-review-comment {
    font-size: 15px;
    line-height: 1.6;
    color: var(--al-primary);
    margin: 0;
}

.al-review-comment.truncated {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.al-review-comment.expanded {
    display: block;
    -webkit-line-clamp: unset;
}

.al-review-toggle {
    display: inline-block;
    margin-top: 4px;
    font-size: 14px;
    font-weight: 600;
    color: var(--al-primary);
    text-decoration: underline;
    cursor: pointer;
    border: none;
    background: none;
    padding: 0;
}

.al-review-toggle:hover {
    color: var(--al-accent);
}

/* Resposta do proprietário */
.al-owner-response {
    margin-top: 16px;
    padding: 14px;
    background: #f0fdf4;
    border-radius: 8px;
    border-left: 3px solid #10b981;
}

.al-owner-response-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #065f46;
    margin-bottom: 6px;
}

.al-owner-response-label i {
    font-size: 12px;
    color: #10b981;
}

.al-owner-response-text {
    font-size: 14px;
    line-height: 1.5;
    color: #064e3b;
    margin: 0;
}

.al-owner-response-text.truncated {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Ações do autor da avaliação */
.al-review-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

.al-review-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    text-decoration: none;
    border: none;
    cursor: pointer;
}

.al-review-action-btn.edit {
    background: #eff6ff;
    color: #2563eb;
}

.al-review-action-btn.delete {
    background: #fef2f2;
    color: #dc2626;
}

/* Botão "Mostrar todos" */
.al-show-all-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    max-width: 320px;
    margin: 32px auto 0;
    padding: 14px 24px;
    background: #ffffff;
    color: var(--al-primary);
    border: 1px solid var(--al-primary);
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s ease;
}

.al-show-all-btn:hover {
    background: var(--al-bg);
}

/* ========== ESTADO VAZIO ========== */
.al-empty-state {
    text-align: center;
    padding: 48px 24px;
    background: #ffffff;
    border: 1px solid var(--al-border);
    border-radius: 12px;
    margin-bottom: 32px;
}

.al-empty-icon {
    font-size: 48px;
    color: var(--al-bar-bg);
    margin-bottom: 16px;
}

.al-empty-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--al-primary);
    margin: 0 0 8px 0;
}

.al-empty-text {
    font-size: 14px;
    color: var(--al-secondary);
    margin: 0 0 20px 0;
}

.al-empty-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: var(--al-accent);
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
}

.al-empty-btn:hover {
    background: #e31c5f;
    color: #ffffff;
}

/* ========== BOTÃO VOLTAR ========== */
.al-back-section {
    text-align: center;
    margin-bottom: 32px;
}

.al-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    color: var(--al-primary);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid var(--al-border);
    border-radius: 8px;
    transition: background 0.2s ease;
}

.al-back-btn:hover {
    background: var(--al-bg);
    color: var(--al-primary);
}

/* ========== RESPONSIVO ========== */
@media (max-width: 992px) {
    .al-categories-section {
        flex-direction: column;
        gap: 20px;
    }

    .al-distribution-col {
        flex: none;
        padding-right: 0;
        border-right: none;
        border-bottom: 1px solid var(--al-border);
        padding-bottom: 20px;
    }

    .al-categories-grid {
        flex-wrap: wrap;
    }

    .al-category-col {
        flex: 1 1 calc(100% / 4);
        min-width: 80px;
        padding: 8px 12px;
        border-right: 1px solid var(--al-border);
        border-bottom: 1px solid var(--al-border);
    }

    .al-category-col:nth-child(4n) {
        border-right: none;
    }

    .al-category-col:nth-last-child(-n+3) {
        border-bottom: none;
    }
}

@media (max-width: 768px) {
    .al-reviews-grid {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .al-rating-big .al-rating-number {
        font-size: 44px;
    }

    .al-imovel-header {
        gap: 12px;
    }

    .al-imovel-thumb {
        width: 100px;
        height: 70px;
    }

    .al-imovel-info h2 {
        font-size: 18px;
    }

    .al-category-col {
        flex: 1 1 calc(100% / 3);
    }

    .al-category-col:nth-child(4n) {
        border-right: 1px solid var(--al-border);
    }

    .al-category-col:nth-child(3n) {
        border-right: none;
    }

    .al-category-col:nth-last-child(-n+3) {
        border-bottom: 1px solid var(--al-border);
    }

    .al-category-col:nth-last-child(-n+1) {
        border-bottom: none;
    }
}