/*==================================================
                REVIEW PAGE STYLING
==================================================*/

.review-section {

    padding:120px 0 80px;

    max-width:1240px;

    width:92%;

    margin:0 auto;

}


/*==================================================
                PAGE HEADER (CLEAN & COMPACT)
==================================================*/

.page-header {

    text-align:center;

    margin-bottom:44px;

}


.page-badge {

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:8px 18px;

    background:rgba(214,40,40,0.12);

    border:1px solid rgba(214,40,40,0.3);

    border-radius:30px;

    color:var(--accent-light, #ff595e);

    font-size:13px;

    font-weight:700;

    letter-spacing:0.5px;

    text-transform:uppercase;

    margin-bottom:14px;

}


.page-badge i {

    font-size:13px;

}


.page-title {

    font-size:36px;

    font-weight:800;

    color:#ffffff;

    margin:0 0 10px 0;

    letter-spacing:-0.5px;

}


.page-subtitle {

    color:#b5b5b5;

    font-size:15.5px;

    max-width:620px;

    margin:0 auto;

    line-height:1.7;

}


/*==================================================
                REVIEW LAYOUT
==================================================*/

.review-layout {

    display:grid;

    grid-template-columns:1.25fr 0.85fr;

    gap:32px;

    align-items:start;

}


/*==================================================
                COMMUNITY SECTION
==================================================*/

.reviews-community-section {

    margin-top:60px;

    padding-top:40px;

    border-top:1px solid rgba(255,255,255,0.06);

}


/*==================================================
                REVIEW FORM CARD
==================================================*/

.review-form {

    padding:36px;

    background:var(--panel, #18181b);

    border:1px solid rgba(255,255,255,0.06);

    border-radius:var(--radius, 20px);

    box-shadow:0 12px 35px rgba(0,0,0,0.3);

}


.review-form form {

    display:flex;

    flex-direction:column;

    gap:20px;

}


.review-form .field label {

    display:flex;

    align-items:center;

    gap:8px;

    font-size:13.5px;

    font-weight:600;

    color:#e5e5e5;

    margin-bottom:8px;

}


.review-form .field label i {

    font-size:13px;

    color:var(--accent-light, #ff595e);

}


.review-form input,
.review-form textarea {

    width:100%;

    padding:13px 16px;

    background:#222225;

    color:#ffffff;

    border:1px solid rgba(255,255,255,0.1);

    border-radius:12px;

    font-size:14px;

    font-family:inherit;

    outline:none;

    transition:all 0.25s ease;

}


.review-form textarea {

    resize:vertical;

    min-height:120px;

}


.review-form input:focus,
.review-form textarea:focus {

    border-color:var(--accent, #d62828);

    box-shadow:0 0 0 3px rgba(214,40,40,0.18);

    background:#26262a;

}


/* Submit Button */

.btn-review-submit {

    margin-top:8px;

    height:50px;

    font-size:15px;

    font-weight:600;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    border-radius:14px;

    background:linear-gradient(135deg, var(--accent, #d62828), var(--accent-light, #ff595e));

    box-shadow:0 6px 20px rgba(214,40,40,0.35);

    transition:all 0.25s ease;

}


.btn-review-submit:hover:not(:disabled) {

    transform:translateY(-2px);

    box-shadow:0 10px 25px rgba(214,40,40,0.5);

}


.btn-review-submit:disabled {

    opacity:0.65;

    cursor:not-allowed;

}


/*==================================================
                RATING COMPONENT
==================================================*/

.rating-box {

    display:flex;

    flex-direction:column;

    gap:10px;

}


.rating-box label {

    display:flex;

    align-items:center;

    gap:8px;

    font-size:13.5px;

    font-weight:600;

    color:#e5e5e5;

}


.rating-picker-wrapper {

    display:flex;

    align-items:center;

    gap:16px;

    flex-wrap:wrap;

}


.stars {

    display:inline-flex;

    align-items:center;

    gap:8px;

}


.stars i {

    font-size:32px;

    color:#4a4a52;

    cursor:pointer;

    transition:all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);

}


.stars i:hover {

    transform:scale(1.25);

    color:var(--gold, #f4b400);

}


.stars i.active {

    color:var(--gold, #f4b400);

    text-shadow:0 0 14px rgba(244,180,0,0.4);

}


.rating-label {

    display:inline-block;

    padding:5px 14px;

    background:rgba(244,180,0,0.12);

    border:1px solid rgba(244,180,0,0.3);

    color:var(--gold, #f4b400);

    font-size:13px;

    font-weight:700;

    border-radius:30px;

}


/*==================================================
                REVIEW INFO / STATS CARD
==================================================*/

.review-info {

    padding:32px;

    background:var(--panel, #18181b);

    border:1px solid rgba(255,255,255,0.06);

    border-radius:var(--radius, 20px);

    box-shadow:0 12px 35px rgba(0,0,0,0.3);

    position:sticky;

    top:100px;

}


.card-header-line {

    display:flex;

    align-items:center;

    gap:16px;

    margin-bottom:24px;

    padding-bottom:18px;

    border-bottom:1px solid rgba(255,255,255,0.06);

}


.card-header-icon-wrap {

    width:44px;

    height:44px;

    border-radius:14px;

    background:rgba(244,180,0,0.12);

    border:1px solid rgba(244,180,0,0.25);

    color:var(--gold, #f4b400);

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:19px;

    flex-shrink:0;

}


.card-header-line h3 {

    font-size:18.5px;

    font-weight:700;

    color:#ffffff;

    margin:0 0 3px 0;

}


.card-subtitle {

    font-size:13px;

    color:#888890;

    margin:0;

}


/*==================================================
        RATING HERO OVERVIEW (APP STORE / GOOGLE STYLE)
==================================================*/

.rating-overview-hero {

    display:grid;

    grid-template-columns:140px 1fr;

    gap:24px;

    align-items:center;

    padding:20px;

    background:#202024;

    border:1px solid rgba(255,255,255,0.06);

    border-radius:16px;

    margin-bottom:20px;

}


.score-display-box {

    text-align:center;

    padding-right:20px;

    border-right:1px solid rgba(255,255,255,0.08);

}


.score-display-box h2 {

    font-size:44px;

    font-weight:800;

    color:#ffffff;

    margin:0 0 4px 0;

    line-height:1;

    letter-spacing:-1px;

}


.score-stars {

    display:flex;

    justify-content:center;

    gap:3px;

    color:var(--gold, #f4b400);

    font-size:13px;

    margin-bottom:6px;

}


.score-count {

    display:block;

    font-size:12px;

    color:#888890;

}


.score-count strong {

    color:#e5e5e5;

}


/* Progress Distribution Bars */

.rating-bars-container {

    display:flex;

    flex-direction:column;

    gap:7px;

}


.rating-bar-row {

    display:flex;

    align-items:center;

    gap:10px;

    font-size:12px;

    color:#b5b5b5;

}


.bar-label {

    width:30px;

    display:flex;

    align-items:center;

    gap:4px;

    font-weight:600;

    color:#d0d0d5;

}


.bar-label i {

    font-size:10px;

    color:var(--gold, #f4b400);

}


.bar-track {

    flex:1;

    height:7px;

    background:rgba(255,255,255,0.08);

    border-radius:10px;

    overflow:hidden;

}


.bar-fill {

    height:100%;

    background:linear-gradient(90deg, #f4b400, #ffc107);

    border-radius:10px;

    transition:width 0.4s ease;

}


.bar-count {

    width:22px;

    text-align:right;

    font-size:11.5px;

    color:#777780;

    font-weight:600;

}


.review-badge-highlight {

    display:flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    padding:10px 14px;

    background:rgba(46,204,113,0.08);

    border:1px solid rgba(46,204,113,0.25);

    border-radius:12px;

    color:#2ecc71;

    font-size:13px;

    font-weight:600;

}


/*==================================================
            COMMUNITY HEADER & FILTER BAR
==================================================*/

.community-header {

    display:flex;

    justify-content:space-between;

    align-items:flex-end;

    flex-wrap:wrap;

    gap:20px;

    margin-bottom:28px;

}


.reviews-filter-bar {

    display:flex;

    gap:8px;

    flex-wrap:wrap;

}


.filter-pill {

    padding:7px 14px;

    background:#202024;

    border:1px solid rgba(255,255,255,0.08);

    border-radius:20px;

    color:#c5c5cb;

    font-size:13px;

    font-weight:600;

    cursor:pointer;

    display:inline-flex;

    align-items:center;

    gap:5px;

    transition:all 0.2s ease;

}


.filter-pill i {

    color:var(--gold, #f4b400);

    font-size:11px;

}


.filter-pill:hover {

    border-color:rgba(214,40,40,0.35);

    color:#ffffff;

    background:#28282d;

}


.filter-pill.active {

    background:linear-gradient(135deg, var(--accent, #d62828), var(--accent-light, #ff595e));

    border-color:transparent;

    color:#ffffff;

    box-shadow:0 4px 12px rgba(214,40,40,0.35);

}


.filter-pill.active i {

    color:#ffffff;

}



/*==================================================
                REVIEWS LIST & CARDS
==================================================*/

.review-list {

    display:grid;

    grid-template-columns:repeat(2, 1fr);

    gap:22px;

}


.review-card {

    padding:24px;

    background:var(--panel, #18181b);

    border:1px solid rgba(255,255,255,0.06);

    border-radius:18px;

    transition:all 0.25s ease;

}


.review-card:hover {

    transform:translateY(-3px);

    border-color:rgba(214,40,40,0.3);

    box-shadow:0 12px 30px rgba(0,0,0,0.4);

}


.review-card-top {

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    gap:12px;

    margin-bottom:14px;

}


.review-author {

    display:flex;

    align-items:center;

    gap:12px;

}


.review-avatar {

    width:42px;

    height:42px;

    border-radius:50%;

    background:linear-gradient(135deg, var(--accent, #d62828), var(--accent-light, #ff595e));

    color:#ffffff;

    font-weight:700;

    font-size:16px;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

    box-shadow:0 4px 12px rgba(214,40,40,0.3);

}


.author-name {

    font-size:15.5px;

    font-weight:700;

    color:#ffffff;

    margin:0 0 3px 0;

}


.review-meta {

    display:flex;

    align-items:center;

    gap:8px;

    font-size:12px;

    color:#888890;

}


.verified-tag {

    color:#2ecc71;

    font-weight:600;

    display:inline-flex;

    align-items:center;

    gap:4px;

}


.review-stars-list i {

    font-size:15px;

    color:#555560;

    margin-left:2px;

}


.review-stars-list i.active {

    color:var(--gold, #f4b400);

}


.review-dish-tag {

    display:inline-flex;

    align-items:center;

    gap:6px;

    padding:4px 10px;

    background:rgba(255,255,255,0.04);

    border:1px solid rgba(255,255,255,0.06);

    border-radius:8px;

    color:var(--accent-light, #ff595e);

    font-size:13px;

    margin-bottom:12px;

}


.review-dish-tag strong {

    color:#e5e5e5;

    font-weight:600;

}


.review-text-content {

    color:#d0d0d5;

    font-size:14px;

    line-height:1.75;

    margin:0;

}


/*==================================================
                RESPONSIVE BREAKPOINTS
==================================================*/

@media (max-width: 992px) {

    .review-layout {

        grid-template-columns:1fr;

    }

    .review-info {

        position:relative;

        top:0;

    }

    .review-list {

        grid-template-columns:1fr;

    }

}


@media (max-width: 768px) {

    .review-form,
    .review-info {

        padding:24px 18px;

    }

    .review-card {

        padding:20px 16px;

    }

    .stars i {

        font-size:28px;

    }

    .community-header {

        flex-direction:column;

        align-items:flex-start;

    }

}


@media (max-width: 576px) {

    .rating-overview-hero {

        grid-template-columns:1fr;

        gap:16px;

        padding:16px;

    }

    .score-display-box {

        padding-right:0;

        border-right:none;

        border-bottom:1px solid rgba(255,255,255,0.08);

        padding-bottom:14px;

    }

    .score-display-box h2 {

        font-size:38px;

    }

}