/* =============================================================
   KFC33 — REVIEWS PAGE
   Page-specific styling for the customer-reviews list
   (reviews.html). Loaded after core.css.

   Relies on core for: tokens (palette/shape/motion), the global
   header + footer, .general-ttl, and base typography. Everything
   below is unique to the reviews feature and is scoped under the
   reviews shell (.content:has(.list-view) / .list-view /
   .review-item / .add-review / #pagination) so it cannot leak.

   The theme icon font (bootstrap.css) is intentionally dropped,
   so the <i class="icon-*"> glyphs are re-rendered here via CSS
   ::before, and the numeric .rating is re-rendered as 5 stars.
   ============================================================= */

/* -------------------------------------------------------------
   Page shell — the reviews list reads wider and left-aligned
   than the centered marketing pages. Scoped via :has() so it
   only affects the reviews content shell (this file is page-only
   anyway, but :has keeps it unambiguous and safe).
   ------------------------------------------------------------- */
.content:has(.list-view) {
    max-width: 880px;
    text-align: left;
}

/* -------------------------------------------------------------
   Reviews toolbar — star-rating FILTER chips on the left, the
   "Submit review" primary action on the right. Styled to match
   the tickets bar (.tickets__bar + .ticket-filters): same chip
   pill group and the shared core .btn--primary, so the two pages
   read as one system. Token-based for light + dark.
   ------------------------------------------------------------- */
.add-review {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.9rem;
    margin: -0.2rem 0 1.4rem;
}

/* Match the tickets bar layout: primary button on the LEFT, filters on the
   right (pull the button ahead of the filters visually). */
.add-review .btn {
    order: -1;
}

/* Rating filter chip group — mirrors .ticket-filters from tickets.css */
.review-filters {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.2rem;
    padding: 0.25rem;
    border: 1px solid var(--c-line);
    border-radius: var(--radius-pill);
    background: var(--c-panel);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.review-filters__chip {
    display: inline-flex;
    align-items: center;
    gap: 0.22rem;
    padding: 0.4rem 0.85rem;
    border-radius: var(--radius-pill);
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--c-ink-muted);
    transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}

.review-filters__chip:hover {
    color: var(--c-ink);
}

.review-filters__chip.is-active {
    color: var(--c-ink);
    background: var(--c-hover-tint-strong);
    box-shadow: inset 0 0 0 1px var(--c-hover-tint);
}

.review-filters__star {
    font-size: 0.92em;
    line-height: 1;
    color: var(--c-ink-soft);
}

.review-filters__chip.is-active .review-filters__star {
    color: var(--c-ink);
}

/* -------------------------------------------------------------
   Review list — vertical stack of cards
   ------------------------------------------------------------- */
.list-view {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.list-view .item {
    display: block;
}

/* Filtered-out reviews (rating chip filter) — beat .item's display:block */
.list-view .item[hidden] {
    display: none;
}

/* -------------------------------------------------------------
   Review card
   ------------------------------------------------------------- */
.review-item {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: clamp(1rem, 3.5vw, 1.35rem) clamp(1.05rem, 3.5vw, 1.5rem);
    border: 1px solid var(--c-line);
    border-radius: var(--radius);
    background: var(--c-panel);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    box-shadow: var(--shadow-soft);
    transition: transform var(--t-med) var(--ease),
        border-color var(--t-med) var(--ease),
        box-shadow var(--t-med) var(--ease),
        background var(--t-med) var(--ease);
}

.review-item:hover {
    transform: translateY(-2px);
    border-color: var(--c-line-strong);
    background: var(--c-panel-strong);
    box-shadow: var(--shadow);
}

/* -------------------------------------------------------------
   Card header — info on the left, rating on the right.
   .cf is a legacy clearfix; flex makes it lay out cleanly.
   ------------------------------------------------------------- */
.review-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    flex-wrap: wrap;
}

.review-header::before,
.review-header::after {
    content: none; /* neutralize any inherited clearfix pseudo */
}

.rh-info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 1.1rem;
    min-width: 0;
}

.rh-info span {
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;
    font-family: var(--font-body);
    line-height: 1.3;
}

.review-name {
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--c-ink);
}

.review-product,
.review-date {
    font-size: 0.82rem;
    color: var(--c-ink-muted);
}

/* -------------------------------------------------------------
   Inline icons — monochrome line SVGs painted with currentColor
   via CSS masks, so they inherit the text color and adapt to the
   light + dark themes. Each <i> is a square box (sized to the text)
   whose shape is supplied by an inline data-URI SVG mask; the paint
   comes from background-color: currentColor. No emoji, no network.
   ------------------------------------------------------------- */
.rh-info i {
    font-style: normal;
    flex: none;
    width: 1.05em;
    height: 1.05em;
    line-height: 1;
    opacity: 0.7;
    background-color: currentColor;
    -webkit-mask: center / contain no-repeat;
    mask: center / contain no-repeat;
}

/* user / person outline */
.review-name i {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4.4 3.6-8 8-8s8 3.6 8 8'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4.4 3.6-8 8-8s8 3.6 8 8'/%3E%3C/svg%3E");
}

/* shopping bag outline */
.review-product i {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8h12l-1 12.5H7L6 8z'/%3E%3Cpath d='M9 8V6.5a3 3 0 0 1 6 0V8'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8h12l-1 12.5H7L6 8z'/%3E%3Cpath d='M9 8V6.5a3 3 0 0 1 6 0V8'/%3E%3C/svg%3E");
}

/* clock outline */
.review-date i {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3.5 2'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3.5 2'/%3E%3C/svg%3E");
}

/* -------------------------------------------------------------
   Star rating — hide the numeric label, render five stars with
   a muted track and a bright fill clipped to the score width.
   Uniform letter-spacing makes each star+gap a constant unit, so
   the fill widths (N/5) land exactly on star boundaries.
   ------------------------------------------------------------- */
.review-header .rating {
    position: relative;
    display: inline-block;
    flex: none;
    margin-left: auto;
    font-size: 0; /* hide the numeric text */
    line-height: 1;
    white-space: nowrap;
}

.review-header .rating::before,
.review-header .rating::after {
    font-size: 0.95rem;
    letter-spacing: 0.14em;
    line-height: 1;
}

/* Muted track — five empty-looking stars */
.review-header .rating::before {
    content: "\2605\2605\2605\2605\2605";
    color: var(--c-line-strong);
}

/* Bright fill — clipped to the score */
.review-header .rating::after {
    content: "\2605\2605\2605\2605\2605";
    position: absolute;
    inset: 0;
    width: 0;
    overflow: hidden;
    white-space: nowrap;
    color: var(--c-ink);
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.28);
}

.review-header .rating-1::after { width: 20%; }
.review-header .rating-2::after { width: 40%; }
.review-header .rating-3::after { width: 60%; }
.review-header .rating-4::after { width: 80%; }
.review-header .rating-5::after { width: 100%; }

/* -------------------------------------------------------------
   Review body text
   ------------------------------------------------------------- */
.review-body {
    font-family: var(--font-body);
    font-size: 0.96rem;
    line-height: 1.65;
    color: var(--c-ink-soft);
    overflow-wrap: anywhere;
}

/* -------------------------------------------------------------
   Pagination — tidy Prev / page-status / Next cluster. Real
   multi-page nav is server-side on prod; this just makes the
   component look complete (Prev is a disabled affordance on p1).
   ------------------------------------------------------------- */
#pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.6rem 0.7rem;
    margin-top: 1.6rem;
}

.pagination__status {
    font-family: var(--font-body);
    font-size: 0.82rem;
    letter-spacing: 0.04em;
    color: var(--c-ink-faint);
}

.pagination__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 2.5rem;
    padding: 0.55rem 1.2rem;
    border: 1px solid var(--c-line-strong);
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--c-ink);
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    transition: transform var(--t-fast) var(--ease),
        background var(--t-fast) var(--ease),
        border-color var(--t-fast) var(--ease),
        box-shadow var(--t-fast) var(--ease);
}

.pagination__btn--prev::before {
    content: "\2190"; /* ← */
    font-size: 1em;
    opacity: 0.8;
}

.pagination__btn--next::after {
    content: "\2192"; /* → */
    font-size: 1em;
    opacity: 0.8;
}

.pagination__btn:not(.is-disabled):hover,
.pagination__btn:not(.is-disabled):focus-visible {
    transform: translateY(-1px);
    background: var(--c-hover-tint);
    border-color: var(--c-line-hover);
    box-shadow: var(--shadow-soft);
}

.pagination__btn.is-disabled {
    color: var(--c-ink-faint);
    border-color: var(--c-line);
    opacity: 0.65;
    cursor: not-allowed;
}

/* First / last "jump" buttons carry their « » glyph as text; keep them
   a touch tighter than the worded prev/next so the cluster stays compact. */
.pagination__btn--first,
.pagination__btn--last {
    padding-left: 0.95rem;
    padding-right: 0.95rem;
    font-size: 1rem;
}

/* Numbered page links — square-ish pills between prev and next. The
   current page is filled (mirrors .btn--primary) so it reads as "you
   are here"; the rest are outline pills matching .pagination__btn. */
.pagination__pages {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.pagination__page {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    min-height: 2.5rem;
    padding: 0.45rem 0.7rem;
    border: 1px solid var(--c-line-strong);
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--c-ink);
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-decoration: none;
    transition: transform var(--t-fast) var(--ease),
        background var(--t-fast) var(--ease),
        border-color var(--t-fast) var(--ease),
        box-shadow var(--t-fast) var(--ease);
}

.pagination__page:not(.is-current):hover,
.pagination__page:not(.is-current):focus-visible {
    transform: translateY(-1px);
    background: var(--c-hover-tint);
    border-color: var(--c-line-hover);
    box-shadow: var(--shadow-soft);
}

.pagination__page.is-current {
    background: var(--c-ink);
    color: var(--c-on-accent);
    border-color: var(--c-ink);
    box-shadow: var(--shadow-soft);
    cursor: default;
}

.pagination__ellipsis {
    display: inline-flex;
    align-items: flex-end;
    justify-content: center;
    min-width: 1.5rem;
    padding-bottom: 0.2rem;
    color: var(--c-ink-faint);
    font-family: var(--font-body);
    font-size: 0.9rem;
    letter-spacing: 0.05em;
    user-select: none;
}

/* -------------------------------------------------------------
   Entrance animation (auto-disabled via core reduced-motion)
   ------------------------------------------------------------- */
.list-view .item {
    animation: review-rise 0.5s var(--ease) both;
}

.list-view .item:nth-child(2) { animation-delay: 0.04s; }
.list-view .item:nth-child(3) { animation-delay: 0.08s; }
.list-view .item:nth-child(4) { animation-delay: 0.12s; }
.list-view .item:nth-child(5) { animation-delay: 0.16s; }
.list-view .item:nth-child(6) { animation-delay: 0.20s; }
.list-view .item:nth-child(7) { animation-delay: 0.24s; }
.list-view .item:nth-child(8) { animation-delay: 0.28s; }

@keyframes review-rise {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

/* -------------------------------------------------------------
   Responsive — stack header (rating below info) on narrow screens
   and let the submit action span full width.
   ------------------------------------------------------------- */
@media (max-width: 560px) {
    .add-review {
        flex-direction: column;
        align-items: stretch;
    }

    .review-filters {
        justify-content: center;
    }

    .add-review .btn {
        width: 100%;
    }

    .review-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.55rem;
    }

    .review-header .rating {
        margin-left: 0;
    }
}