/* KAMAR Shop Reviews Carousel — full-width white band, clickable cards → modal. */

.kamar-src {
    /* KAMAR brand palette */
    --navy: #103547;
    --yellow: #F6B767;
    --green: #059239;
    --muted: #75795E;
    --border: #e6e6e6;
    --card: #ffffff;

    background: #ffffff;         /* white row background, like the rest of the page */
    margin-top: 50px;            /* only top gap; footer already spaces the bottom */
    padding: 0;
    /* Full-bleed: break out of any max-width parent so the band spans the viewport. */
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    box-sizing: border-box;
    overflow: hidden;
    color: var(--navy);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

.kamar-src__inner { width: 100%; max-width: none; margin: 0; padding: 0; }

/* ── Header (aggregate score) ─────────────────────────────────────────── */
.kamar-src__head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 20px;
    padding: 0 28px;
}

.kamar-src__score {
    display: flex;
    align-items: baseline;
    background: #F6B767;         /* pastel yellow */
    color: #103547;             /* dark navy text */
    padding: 6px 12px;
    border-radius: 10px;
    line-height: 1;
    box-shadow: 0 3px 10px rgba(16, 53, 71, .18);
}
.kamar-src__score-num { font-size: 26px; font-weight: 800; }
.kamar-src__score-max { font-size: 13px; font-weight: 700; opacity: .8; margin-left: 2px; }

.kamar-src__head-sub { font-size: 13px; color: var(--muted); margin-top: 3px; }
.kamar-src__head-sub strong { color: var(--navy); }
.kamar-src__head-sub a { color: var(--navy); text-decoration: underline; font-weight: 600; }
.kamar-src__head-sub a:hover { color: var(--green); }

.kamar-src__stars { display: inline-flex; gap: 2px; }
.kamar-src__stars svg { width: 15px; height: 15px; fill: var(--yellow); display: block; }
.kamar-src__stars--head svg { width: 17px; height: 17px; }

/* ── Marquee ──────────────────────────────────────────────────────────── */
.kamar-src__viewport {
    position: relative;
    width: 100%;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
}
.kamar-src__track {
    display: flex;
    width: max-content;
    gap: 16px;
    padding: 6px 28px;
    animation: kamar-src-marquee 70s linear infinite;
    will-change: transform;
}
.kamar-src:hover .kamar-src__track,
.kamar-src:focus-within .kamar-src__track { animation-play-state: paused; }

/* Drag/swipe scrubbing (JS-driven marquee; skipped for reduced-motion where the
   viewport is a native horizontal scroller instead). */
@media (prefers-reduced-motion: no-preference) {
    .kamar-src__viewport { touch-action: pan-y; cursor: grab; }
    .kamar-src__viewport.is-dragging { cursor: grabbing; user-select: none; -webkit-user-select: none; }
    .kamar-src__viewport.is-dragging .kamar-src__card { cursor: grabbing; transform: none; }
}
@keyframes kamar-src-marquee {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
}

/* ── Cards (clickable) ────────────────────────────────────────────────── */
.kamar-src__card {
    flex: 0 0 320px;
    width: 320px;
    background: #f4f7ff;         /* soft pale-blue "cloud" cards */
    border: 1px solid #e3e9f5;
    border-radius: 14px;
    padding: 16px 18px;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-shadow: 0 3px 12px rgba(16, 53, 71, .07);
    cursor: pointer;
    transition: box-shadow .15s ease, transform .1s ease, border-color .15s ease;
}
.kamar-src__card:hover {
    box-shadow: 0 8px 22px rgba(16, 53, 71, .14);
    border-color: #cdd8ee;
    transform: translateY(-2px);
}
.kamar-src__card:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }

.kamar-src__text {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: #33312e;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.kamar-src__meta { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #75795E; margin-top: auto; }
.kamar-src__author { font-weight: 700; color: #103547; }
.kamar-src__author::before { content: "✓ "; color: #059239; font-weight: 800; }

/* ── Review modal ─────────────────────────────────────────────────────── */
.kamar-src-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000001;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(16, 53, 71, .55);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility .25s ease;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}
.kamar-src-modal-overlay.is-open { opacity: 1; visibility: visible; }
.kamar-src-modal {
    position: relative;
    width: 100%;
    max-width: 460px;
    max-height: 82vh;
    overflow-y: auto;
    background: #fff;
    border-radius: 16px;
    padding: 28px 26px 26px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .3);
    transform: translateY(14px) scale(.98);
    transition: transform .25s cubic-bezier(.2, .8, .2, 1);
}
.kamar-src-modal-overlay.is-open .kamar-src-modal { transform: translateY(0) scale(1); }
.kamar-src-modal__close {
    position: absolute; top: 8px; right: 10px;
    width: 34px; height: 34px; border: 0; background: transparent;
    color: #9aa0a6; font-size: 28px; line-height: 1; cursor: pointer; border-radius: 50%;
}
.kamar-src-modal__close:hover { background: #f1f1f1; color: #333; }
.kamar-src-modal .kamar-src__stars { margin-bottom: 12px; }
/* modal lives outside .kamar-src, so --yellow isn't in scope — set fill explicitly */
.kamar-src-modal .kamar-src__stars svg { width: 20px; height: 20px; fill: #F6B767; }
.kamar-src-modal__text { font-size: 16px; line-height: 1.6; color: #33312e; margin: 0 0 16px; }
.kamar-src-modal__meta { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; font-size: 13px; color: #75795E; }
.kamar-src-modal__meta .kamar-src__author { color: #103547; }

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .kamar-src { margin-top: 40px; padding: 0; }
    .kamar-src__head { padding: 0 16px; flex-wrap: wrap; }
    .kamar-src__track { padding: 6px 16px; }
    .kamar-src__card { flex-basis: 268px; width: 268px; }
}
@media (prefers-reduced-motion: reduce) {
    .kamar-src__track { animation: none; }
    .kamar-src__viewport { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .kamar-src-modal-overlay, .kamar-src-modal { transition: none; }
}