/* ========================================
   SIDEBAR — de winkelbon
   Eén documentkaart in de werkbon-taal:
   navy kop, bonregels, afscheurlijnen.
   Patroon: identiteit + bewijs → status →
   één actie → zekerheden (Fresha/Coolblue-
   conventie, vertaald naar de bon).
   ======================================== */

:where(.rv-sidebar) {
    --rv-bon-open: #1a7f37;
    --rv-bon-dicht: #b45309;
    --rv-bon-scheur: #c9cfda;
}

/* ── Container ────────────────────────────── */

.rv-sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--rv-space-5);
    position: sticky;
    top: var(--rv-space-5);
    align-self: flex-start;
}

/* Globale .rv-card hover-lift uitschakelen: de bon is informatief,
   niet interactief, en de lift botst met position: sticky. */
.rv-sidebar .rv-card.rv-sidebar-card:hover {
    transform: none;
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.05),
        0 1px 2px rgba(0, 0, 0, 0.03);
    border-color: var(--rv-color-border);
}

/* De bon heeft een eigen kop; kaartpadding verhuist naar de secties
   zodat de navy kop tot de randen loopt. Specificiteit nodig omdat
   .rv-frontend .rv-card padding + navy toprand zet. */
.rv-sidebar .rv-card.rv-bon {
    padding: 0;
    overflow: hidden;
    gap: 0;
    border-top: 1px solid var(--rv-color-border);
}

/* ── Kop: wie ben je, waar zit je ─────────── */

.rv-bon__kop {
    background:
        repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 7px),
        var(--rv-color-primary, #082352);
    color: var(--rv-color-on-primary, #ffffff);
    padding: 16px;
}

.rv-bon__naam {
    margin: 0;
    font-size: var(--rv-text-lg);
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.3;
}

.rv-bon__plaats {
    margin: 2px 0 0;
    font-size: var(--rv-text-xs);
    color: color-mix(in srgb, var(--rv-color-on-primary, #ffffff) 75%, transparent);
}

/* ── Bonregel: label links, waarde rechts ─── */

.rv-bon__regel {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--rv-space-3);
    margin: 0;
    padding: 10px 16px;
}

/* Compacte variant binnen secties en lijsten. */
.rv-bon__regel--strak {
    padding: 3px 0;
}

.rv-bon__regel-label {
    font-size: 13px;
    color: var(--rv-color-muted);
}

.rv-bon__regel-waarde {
    font-size: var(--rv-text-sm);
    font-weight: 600;
    color: var(--rv-color-primary, #082352);
    font-variant-numeric: tabular-nums;
    text-align: right;
}

/* ── Reviews: wat klanten zeggen, met echte sterren ── */

.rv-bon__reviews {
    display: block;
    margin: 0;
    padding: 16px 16px 0;
    text-decoration: none;
}

.rv-bon__google-logo {
    display: inline-block;
    flex-shrink: 0;
    vertical-align: -1px;
}

a.rv-bon__reviews--link {
    transition: background-color 0.15s var(--rv-ease-out);
}

a.rv-bon__reviews--link:hover,
a.rv-bon__reviews--link:focus-visible {
    background: #f5f7fa;
}

a.rv-bon__reviews--link:focus-visible {
    outline: 2px solid var(--rv-color-primary, #082352);
    outline-offset: -2px;
}

.rv-bon__reviews-zin {
    display: block;
    font-size: var(--rv-text-sm);
    color: var(--rv-color-text);
}

.rv-bon__reviews-zin strong {
    color: var(--rv-color-primary, #082352);
    font-variant-numeric: tabular-nums;
}

.rv-bon__reviews-rij {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}

/* Vijf sterren met een gouden overlay op scorebreedte (4,3 -> 86%). */
.rv-bon__sterren {
    position: relative;
    display: inline-block;
    font-size: 16px;
    letter-spacing: 1px;
    line-height: 1;
}

.rv-bon__sterren-leeg {
    color: var(--rv-color-star-empty, #d1d5db);
}

.rv-bon__sterren-vol {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    white-space: nowrap;
    color: var(--rv-color-star, #f59e0b);
}

.rv-bon__reviews-aantal {
    font-size: 13px;
    color: var(--rv-color-muted);
}

/* ── Live status: het antwoord op "kan ik nu?" ── */

.rv-bon__status {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 10px 16px 16px;
    font-size: 13px;
    color: var(--rv-color-text);
    font-variant-numeric: tabular-nums;
}

.rv-bon__status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.rv-bon__status-dot--open {
    background: var(--rv-bon-open);
}

.rv-bon__status-dot--dicht {
    background: var(--rv-bon-dicht);
}

/* Alleen het statuswoord kleurt; de rest blijft neutraal leesbaar. */
.rv-bon__status-open {
    color: var(--rv-bon-open);
    font-weight: 600;
}

.rv-bon__status-dicht {
    color: var(--rv-bon-dicht);
    font-weight: 600;
}

/* ── Acties: één dominante keuze ──────────── */

.rv-bon__acties {
    display: flex;
    flex-direction: column;
    gap: var(--rv-space-2);
    padding: 0 16px 14px;
}

.rv-bon__acties:empty {
    display: none;
}

/* Extra specificiteit: .rv-frontend .rv-btn zet zelf min-height en kleuren. */
.rv-sidebar .rv-bon__cta {
    width: 100%;
    min-height: 48px;
    justify-content: center;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.005em;
    font-variant-numeric: tabular-nums;
}

/* Belknop als rustige tweede keuze: navy omlijning i.p.v. grijs.
   !important is nodig omdat .rv-frontend .rv-btn--outlined dat ook gebruikt. */
.rv-sidebar .rv-bon__cta.rv-btn--outlined {
    border: 1px solid var(--rv-color-primary, #082352) !important;
    color: var(--rv-color-primary, #082352) !important;
}

.rv-sidebar .rv-bon__cta.rv-btn--outlined:hover,
.rv-sidebar .rv-bon__cta.rv-btn--outlined:focus-visible {
    background: #f5f7fa !important;
    border-color: var(--rv-color-primary, #082352) !important;
    color: var(--rv-color-primary, #082352) !important;
}

.rv-bon__cta:focus-visible {
    outline: 2px solid var(--rv-color-primary, #082352);
    outline-offset: 2px;
}

/* ── Secties met afscheurlijn ─────────────── */

.rv-bon__sectie {
    padding: 12px 16px;
}

/* Grover dan de link-stipjes: papierrand en klikbaarheid zijn twee talen. */
.rv-bon__sectie--scheur {
    border-top: 2px dashed var(--rv-bon-scheur);
    margin: 0 16px;
    padding: 12px 0;
}

.rv-bon__link {
    color: var(--rv-color-primary, #082352);
    text-decoration: none;
    border-bottom: 1px dotted #8b94a5;
    padding-bottom: 1px;
}

.rv-bon__link:hover,
.rv-bon__link:focus-visible {
    border-bottom-style: solid;
}

/* ── Openingstijden: ingeklapt, status doet het werk ── */

.rv-bon__uren {
    margin: 0 16px;
    border-top: 2px dashed var(--rv-bon-scheur);
}

.rv-bon__uren-kop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--rv-space-3);
    padding: 12px 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--rv-color-primary, #082352);
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.rv-bon__uren-kop::-webkit-details-marker {
    display: none;
}

.rv-bon__uren-kop:focus-visible {
    outline: 2px solid var(--rv-color-primary, #082352);
    outline-offset: 2px;
}

/* CSS-only chevron die meedraait met open/dicht. */
.rv-bon__chevron {
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.2s var(--rv-ease-out);
    flex-shrink: 0;
    margin-top: -3px;
}

.rv-bon__uren[open] .rv-bon__chevron {
    transform: rotate(225deg);
    margin-top: 3px;
}

.rv-bon__uren-lijst {
    list-style: none;
    margin: 0;
    padding: 0 0 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.rv-bon__uren-lijst .rv-bon__regel-waarde {
    font-weight: 400;
    color: var(--rv-color-text);
}

/* Vandaag: beide zijden zwaarder, geen badge nodig. */
.rv-bon__regel--vandaag .rv-bon__regel-label,
.rv-bon__regel--vandaag .rv-bon__regel-waarde {
    font-weight: 600;
    color: var(--rv-color-primary, #082352);
}

/* ── Adres: gewone zin, geen boekhoudregel ── */

.rv-bon__adres-regel {
    margin: 0 0 2px;
    font-size: var(--rv-text-sm);
    line-height: var(--rv-line-normal);
    color: var(--rv-color-text);
}

.rv-bon__adres .rv-bon__link {
    font-size: 13px;
}

/* ── Waarom {winkel}: trustpunten met vinkjes ── */

.rv-bon__waarom-kop {
    margin: 0 0 8px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--rv-color-muted);
}

.rv-bon__punten {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rv-bon__punt {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: var(--rv-text-sm);
    color: var(--rv-color-text);
    line-height: var(--rv-line-normal);
}

.rv-bon__punt-vinkje {
    flex-shrink: 0;
    display: inline-flex;
    color: var(--rv-color-success);
    margin-top: 2px;
}

/* ── Neem contact op ──────────────────────── */

/* Laatste blok van de bon: iets meer lucht aan de onderkant.
   (Staat later in het bestand dan --scheur, dus geen !important nodig.) */
.rv-bon__contact {
    padding-bottom: 16px;
}

.rv-bon__contact-lijst {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: var(--rv-text-sm);
}

.rv-bon__contact-lijst .rv-bon__link {
    font-size: var(--rv-text-sm);
}

/* ── Voet: mail als stille uitweg ─────────── */

.rv-bon__voet {
    margin: 0;
    padding: 10px 16px 14px;
    font-size: var(--rv-text-xs);
    color: var(--rv-color-muted);
    text-align: center;
}

.rv-bon__voet .rv-bon__link {
    font-size: inherit;
}

/* ── Responsive ───────────────────────────── */

/* Onder de 900px is de sidebar NERGENS zichtbaar (eigenaarskeuze);
   mobile-trust neemt de trust-signalen daar over. Vangnet naast de
   regel in rv-pages.css. */
@media (max-width: 900px) {
    .rv-sidebar {
        display: none !important;
    }
}

/* ── Accessibility ────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .rv-bon__chevron {
        transition: none;
    }
}

/* ── Print ────────────────────────────────── */

@media print {
    .rv-sidebar {
        break-inside: avoid;
    }

    .rv-bon__uren-lijst {
        display: flex;
    }
}