/* Reviews page (components/reviews/page.php) — designs "OG Reviews Web" (≥768px) and "OG Reviews Mobile".
 * Colours come from the market v5 tokens on body.mkt-v5 (market-v5.css), so light mode is its own palette.
 * Focus rings are box-shadows: the header's critical guards strip outlines with !important. */

body.rv-body { background: rgb(var(--mk-bg)); }
.rv {
    --rv-metal: repeating-linear-gradient(90deg, rgb(255 255 255 / 0.025) 0 1px, transparent 1px 3px), linear-gradient(135deg, #18181b 0%, #3a3a40 45%, #141416 70%, #4a4a52 100%);
    --rv-metal-ink: 255 255 255;
    display: block;
    padding: 72px 16px 120px;
    color: rgb(var(--mk-fg));
    font-family: Satoshi, 'Noto Sans Arabic', system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
}
html[data-theme="light"] .rv {
    --rv-metal: repeating-linear-gradient(90deg, rgb(0 0 0 / 0.02) 0 1px, transparent 1px 3px), linear-gradient(135deg, #ffffff 0%, #dcdce1 45%, #f6f6f8 70%, #cfcfd6 100%);
    --rv-metal-ink: 8 7 6;
}
.rv *, .rv *::before, .rv *::after { box-sizing: border-box; }
.rv a { text-decoration: none; }
.rv-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
html[dir="rtl"] .rv-flip { display: inline-block; transform: scaleX(-1); }

/* ---- Summary: plain on phones, one bordered card from 768px ---- */
.rv-hero__edge { display: none; }
.rv-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 500; color: rgb(var(--mk-fg) / calc(0.5 * var(--mk-tk))); }
.rv-crumbs a { color: inherit; transition: color .2s ease; }
.rv-crumbs a:hover { color: rgb(var(--mk-fg)); }
.rv-crumbs .fa-chevron-right { font-size: 8px; opacity: .6; }
.rv-crumbs [aria-current] { color: rgb(var(--mk-fg) / calc(0.8 * var(--mk-tk))); }
.rv-pill { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; border: 1px solid rgb(var(--mk-fg) / 0.16); background: rgb(var(--mk-fg) / 0.05); color: rgb(var(--mk-fg)); font-size: 12px; font-weight: 600; }
.rv-title { margin: 18px 0 0; font-family: Sora, 'Noto Sans Arabic', system-ui, sans-serif; font-size: 30px; font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; color: rgb(var(--mk-fg)); text-wrap: balance; }
.rv-title__grad { background: var(--mk-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rv-lead { margin: 8px 0 0; max-width: 56ch; font-size: 13.5px; line-height: 1.6; color: rgb(var(--mk-fg) / calc(0.55 * var(--mk-tk))); }

.rv-stats { margin-top: 20px; padding: 1px; border-radius: 20px; background: linear-gradient(180deg, rgb(var(--mk-fg) / 0.2), rgb(var(--mk-fg) / 0.05)); }
.rv-stats__in {
    position: relative; overflow: hidden; display: grid; grid-template-columns: 1.1fr 1fr; border-radius: 19px;
    background: radial-gradient(ellipse 70% 100% at 0% 0%, rgb(var(--mk-fg) / 0.07) 0%, rgb(var(--mk-fg) / 0) 70%), linear-gradient(160deg, rgb(var(--mk-s1)) 0%, rgb(var(--mk-s2)) 100%);
    box-shadow: inset 0 1px 0 rgb(var(--mk-hl) / 0.06);
}
[dir="rtl"] .rv-stats__in { background: radial-gradient(ellipse 70% 100% at 100% 0%, rgb(var(--mk-fg) / 0.07) 0%, rgb(var(--mk-fg) / 0) 70%), linear-gradient(160deg, rgb(var(--mk-s1)) 0%, rgb(var(--mk-s2)) 100%); }
.rv-stat { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 3px; padding: 10px 20px; }
.rv-stat--avg { grid-row: span 2; gap: 10px; padding: 18px 20px; }
.rv-stat--avg::after { content: ''; position: absolute; inset-inline-end: 0; top: 16px; bottom: 16px; width: 1px; background: linear-gradient(180deg, rgb(var(--mk-fg) / 0), rgb(var(--mk-fg) / 0.14), rgb(var(--mk-fg) / 0)); }
.rv-stat:nth-child(2) { padding-top: 18px; }
.rv-stat:nth-child(3) { padding-bottom: 18px; }
.rv-stat__num { display: block; text-align: start; font-family: Sora, system-ui, sans-serif; font-size: 24px; font-weight: 700; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: rgb(var(--mk-fg)); }
[dir="rtl"] .rv-stat__num { text-align: right; }
.rv-stat--avg .rv-stat__num { font-size: 46px; }
.rv-stat__label { font-size: 12px; color: rgb(var(--mk-fg) / calc(0.5 * var(--mk-tk))); }
.rv-stars { display: flex; gap: 3px; font-size: 12px; color: rgb(var(--mk-fg)); }
[dir="rtl"] .rv-stars { justify-content: flex-end; }

/* ---- Vouches channel banner ---- */
.rv-tg {
    position: relative; overflow: hidden; margin-top: 12px; display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 18px;
    border: 1px solid rgb(var(--mk-fg) / 0.2); background: var(--rv-metal); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.25);
    color: rgb(var(--rv-metal-ink)); transition: transform .4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow .3s ease;
}
.rv-tg:focus-visible { box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.25), 0 0 0 2px rgb(var(--mk-bg)), 0 0 0 4px rgb(var(--mk-fg)); }
.rv-tg__ghost { position: absolute; inset-inline-end: 46px; top: 50%; margin-top: -44px; font-size: 88px; color: rgb(var(--rv-metal-ink) / 0.06); pointer-events: none; }
.rv-tg__mark { position: relative; width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%; background: rgb(var(--rv-metal-ink)); color: rgb(var(--mk-bg)); display: flex; align-items: center; justify-content: center; font-size: 21px; }
html[data-theme="light"] .rv-tg__mark { color: #fff; }
.rv-tg__text { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.rv-tg__title { font-size: 15px; font-weight: 700; }
.rv-tg__sub { font-size: 12px; line-height: 1.4; color: rgb(var(--rv-metal-ink) / 0.65); }
.rv-tg__go { position: relative; width: 38px; height: 38px; flex-shrink: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; gap: 10px; border: 1px solid rgb(var(--rv-metal-ink) / 0.25); background: rgb(var(--rv-metal-ink) / 0.12); font-size: 12px; }
.rv-tg__go-label { display: none; }

/* ---- Review cards: a list on phones, an auto-fill grid from 768px ---- */
.rv-grid { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.rv-card { padding: 1px; border-radius: 18px; background: linear-gradient(180deg, rgb(var(--mk-fg) / 0.13), rgb(var(--mk-fg) / 0.04)); }
.rv-card__in { height: 100%; border-radius: 17px; padding: 14px 16px 15px; background: linear-gradient(160deg, rgb(var(--mk-c1)) 0%, rgb(var(--mk-c2)) 100%); }
.rv-card__head { display: flex; align-items: center; gap: 12px; }
.rv-ava { width: 42px; height: 42px; flex-shrink: 0; border-radius: 50%; background: rgb(var(--mk-fg)); color: rgb(var(--mk-bg)); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; }
html[data-theme="light"] .rv-ava { color: #fff; }
.rv-card__who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.rv-card__name { display: block; font-size: 15px; font-weight: 700; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rv-card__date { font-size: 11.5px; color: rgb(var(--mk-fg) / calc(0.45 * var(--mk-tk))); }
.rv-card__stars { display: flex; gap: 3px; font-size: 11px; color: rgb(var(--mk-fg) / 0.18); }
.rv-card__stars .is-on { color: rgb(var(--mk-fg)); }
.rv-card__text { margin: 11px 0 0; font-size: 14px; line-height: 1.55; color: rgb(var(--mk-fg) / calc(0.78 * var(--mk-tk))); overflow-wrap: anywhere; }

.rv-empty { margin-top: 48px; text-align: center; color: rgb(var(--mk-fg) / calc(0.55 * var(--mk-tk))); }
.rv-empty i { font-size: 28px; opacity: .5; }
.rv-empty h2 { margin: 16px 0 6px; font-size: 18px; color: rgb(var(--mk-fg)); }

@media (min-width: 640px) {
    .rv { padding: 96px 24px 120px; }
}

@media (min-width: 768px) {
    .rv { padding-bottom: 96px; }
    .rv-hero {
        padding: 1px; border-radius: 24px;
        background: linear-gradient(180deg, rgb(var(--mk-fg) / 0.18) 0%, rgb(var(--mk-fg) / 0.05) 60%, rgb(var(--mk-fg) / 0.08) 100%);
        box-shadow: 0 30px 70px rgb(var(--mk-sh) / calc(0.55 * var(--mk-shk)));
    }
    .rv-hero__in {
        position: relative; overflow: hidden; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px 48px;
        padding: 30px 32px; border-radius: 23px;
        background: radial-gradient(ellipse 60% 120% at 0% 0%, rgb(var(--mk-fg) / 0.06) 0%, rgb(var(--mk-fg) / 0) 60%), linear-gradient(160deg, rgb(var(--mk-s1)) 0%, rgb(var(--mk-s2)) 100%);
    }
    [dir="rtl"] .rv-hero__in { background: radial-gradient(ellipse 60% 120% at 100% 0%, rgb(var(--mk-fg) / 0.06) 0%, rgb(var(--mk-fg) / 0) 60%), linear-gradient(160deg, rgb(var(--mk-s1)) 0%, rgb(var(--mk-s2)) 100%); }
    .rv-hero__edge { display: block; position: absolute; top: 0; inset-inline-start: 8%; inset-inline-end: 40%; height: 1px; background: linear-gradient(90deg, rgb(var(--mk-fg) / 0), rgb(var(--mk-fg) / 0.55), rgb(var(--mk-fg) / 0)); }
    .rv-hero__copy { display: flex; flex-direction: column; gap: 12px; min-width: 0; flex: 1 1 340px; }
    .rv-crumbs { font-size: 13px; }
    .rv-title { margin: 0; font-size: clamp(34px, 3.6vw, 52px); line-height: 1.15; }
    .rv-lead { margin: 0; font-size: 15px; }

    .rv-stats { margin-top: 0; border-radius: 18px; background: linear-gradient(180deg, rgb(var(--mk-fg) / 0.16) 0%, rgb(var(--mk-fg) / 0.04) 100%); }
    .rv-stats__in { display: flex; flex-wrap: wrap; border-radius: 17px; background: linear-gradient(180deg, rgb(var(--mk-s1)) 0%, rgb(var(--mk-s2)) 100%); }
    [dir="rtl"] .rv-stats__in { background: linear-gradient(180deg, rgb(var(--mk-s1)) 0%, rgb(var(--mk-s2)) 100%); }
    .rv-stat, .rv-stat--avg, .rv-stat:nth-child(2), .rv-stat:nth-child(3) { gap: 12px; padding: 18px 32px; min-width: 150px; justify-content: flex-start; }
    .rv-stat--avg::after { display: none; }
    .rv-stat + .rv-stat::before { content: ''; position: absolute; inset-inline-start: 0; top: 14px; bottom: 14px; width: 1px; background: linear-gradient(180deg, rgb(var(--mk-fg) / 0), rgb(var(--mk-fg) / 0.14), rgb(var(--mk-fg) / 0)); }
    .rv-stat__num, .rv-stat--avg .rv-stat__num { font-size: 40px; }
    .rv-stat__label { font-size: 13px; }

    .rv-tg { margin-top: 16px; gap: 18px; padding: 16px 20px; border-radius: 20px; }
    .rv-tg__ghost { inset-inline-end: 180px; margin-top: -60px; font-size: 120px; }
    .rv-tg__mark { width: 48px; height: 48px; font-size: 23px; }
    .rv-tg__title { font-size: 17px; }
    .rv-tg__sub { font-size: 13.5px; }
    .rv-tg__go { width: auto; height: 44px; padding: 0 20px; border: 0; border-radius: 999px; background: rgb(var(--rv-metal-ink)); color: rgb(var(--mk-bg)); font-size: 14px; font-weight: 700; white-space: nowrap; }
    html[data-theme="light"] .rv-tg__go { color: #fff; }
    .rv-tg__go-label { display: inline; }
    .rv-tg__go .fa-arrow-right { font-size: 11px; }

    .rv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
    .rv-card {
        background: radial-gradient(240px circle at var(--mx, -400px) var(--my, -400px), rgb(var(--mk-fg) / 0.45) 0%, rgb(var(--mk-fg) / 0.1) 70%), rgb(var(--mk-fg) / 0.1);
        transition: transform .5s cubic-bezier(0.22, 1, 0.36, 1);
    }
    .rv-card__in {
        padding: 18px 20px 20px;
        background: radial-gradient(300px circle at var(--mx, -400px) var(--my, -400px), rgb(var(--mk-fg) / 0.05) 0%, rgb(var(--mk-fg) / 0) 70%), linear-gradient(160deg, rgb(var(--mk-c1)) 0%, rgb(var(--mk-c2)) 100%);
    }
    .rv-ava { width: 46px; height: 46px; font-size: 14px; }
    .rv-card__head { gap: 14px; }
    .rv-card__who { gap: 4px; }
    .rv-card__name { font-size: 16px; }
    .rv-card__date { font-size: 12px; }
    .rv-card__stars { font-size: 12px; }
    .rv-card__text { margin-top: 14px; font-size: 15px; line-height: 1.6; }
}

@media (min-width: 768px) and (hover: hover) and (pointer: fine) {
    .rv-card:hover { transform: translateY(-4px); }
    .rv-tg:hover { transform: translateY(-2px); }
}

/* Desktop top bar (market-v5.css) sits in the flow above the page: align with it. */
@media (min-width: 1024px) {
    .rv { margin-inline: max(var(--page-gutter), calc((100% - var(--page-inner)) / 2)); padding: 8px 0 0; }
}

/* Entrance: summary, banner, then the first rows of cards. */
@media (prefers-reduced-motion: no-preference) {
    @keyframes rvRise { from { opacity: 0; transform: translateY(14px); } }
    .rv-hero { animation: rvRise .7s cubic-bezier(0.22, 1, 0.36, 1) backwards; }
    .rv-tg { animation: rvRise .7s cubic-bezier(0.22, 1, 0.36, 1) .08s backwards; }
    .rv-card:nth-child(-n + 12) { animation: rvRise .7s cubic-bezier(0.22, 1, 0.36, 1) backwards; }
    .rv-card:nth-child(1) { animation-delay: .14s; } .rv-card:nth-child(2) { animation-delay: .18s; } .rv-card:nth-child(3) { animation-delay: .22s; }
    .rv-card:nth-child(4) { animation-delay: .26s; } .rv-card:nth-child(5) { animation-delay: .3s; } .rv-card:nth-child(6) { animation-delay: .34s; }
    .rv-card:nth-child(7) { animation-delay: .38s; } .rv-card:nth-child(8) { animation-delay: .42s; } .rv-card:nth-child(9) { animation-delay: .46s; }
    .rv-card:nth-child(10) { animation-delay: .5s; } .rv-card:nth-child(11) { animation-delay: .54s; } .rv-card:nth-child(12) { animation-delay: .58s; }
}