/* =============================================================
   SMARTREPAIR — publieke layout
   -------------------------------------------------------------
   Header, schuifmenu, meldingen en voettekst. Bouwt op de tokens
   uit smartrepair.css; waar een token nog niet bestaat staat er
   een terugvalwaarde in de var(), zodat dit bestand op zichzelf
   werkt en netter wordt naarmate je tokenset groeit.

   Kleur en lettertype volgen bewust de huidige balk: wit vlak,
   schreefletter, hoofdletters, vet.
   ============================================================= */

.sm-rp-body {
    --sm-rp-header-h: 88px;
    --sm-rp-menu-font: Georgia, 'Times New Roman', serif;

    /* Het originele palet van de site, letterlijk overgenomen uit
       Sitewide.css. Let op: het limoen is #a7c40f, niet het #a7c10f uit
       --sr-primary. Twee cijfers verschil, twee verschillende groenen. */
    --sm-rp-limoen:    #a7c40f;   /* u-custom-color-1 */
    --sm-rp-marine:    #3253a1;   /* u-palette-5-base */
    --sm-rp-houtskool: #404040;   /* u-grey-75        */
    --sm-rp-papier:    #f6f4f5;   /* u-body           */
    /* Voor de tekstkleur gebruiken we --sr-ink uit smartrepair.css (#1b1d16)
       in plaats van Nicepage's #111111. Het verschil is met het oog niet te
       zien, en twee bijna-identieke tokens naast elkaar (--sr-ink en
       --sr-inkt) is vragen om problemen. Contrast op limoen: 8,55:1. */

    margin: 0;
    font-family: 'Open Sans', system-ui, sans-serif;
    color: var(--sr-ink);
    background: var(--sm-rp-papier);
}

.sm-rp-visueel-verborgen {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Sprong naar de inhoud: onzichtbaar tot je met tab begint. */
.sm-rp-naar-inhoud {
    position: absolute;
    left: -9999px;
    z-index: 100;
    background: var(--sm-rp-houtskool);
    color: #fff;
    padding: 12px 20px;
    text-decoration: none;
}
.sm-rp-naar-inhoud:focus { left: 16px; top: 16px; }

:where(.sm-rp-body a) { color: inherit; }
.sm-rp-body :focus-visible {
    outline: 3px solid var(--sm-rp-marine);
    outline-offset: 2px;
}

/* ---------- header ---------- */

.sm-rp-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: #fff;
    border-bottom: 1px solid var(--sr-line);
    transition: background .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.sm-rp-header-inner {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 24px;
    min-height: var(--sm-rp-header-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.sm-rp-logo { display: flex; flex: none; }
.sm-rp-logo img { display: block; width: 219px; height: auto; }

/* ---------- hoofdmenu ----------
   Eén typografische taal voor élk niveau: Georgia, kapitalen, dezelfde
   letterafstand, dezelfde actieve staat (marine onderlijn). Het submenu is
   een lichter, kleiner echo van de balk — geen omgekeerd donker paneel met
   een ander lettertype, want dan leest het als een ander onderdeel.
   ------------------------------------------------------------------- */

.sm-rp-nav-list {
    display: flex;
    align-items: stretch;
    gap: 4px;
    margin: 0; padding: 0;
    list-style: none;
}
.sm-rp-nav-item { position: relative; display: flex; align-items: center; }

/* De gedeelde menutypografie. Alles wat een menu-item is, krijgt deze. */
.sm-rp-nav-link,
.sm-rp-subnav a,
.sm-rp-drawer-list a {
    font-family: var(--sm-rp-menu-font);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .02em;
    text-decoration: none;
    color: var(--sr-ink);
}

.sm-rp-nav-link {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 0 14px;
    font-size: 1.15rem;
    border-bottom: 3px solid transparent;
}
.sm-rp-nav-link:hover        { color: var(--sm-rp-marine); border-bottom-color: var(--sr-line); }
.sm-rp-nav-link.sm-rp-active    { border-bottom-color: var(--sm-rp-marine); }

/* Openklapknop naast het label: één raakvlak van 44 px, ook op touch. */
.sm-rp-sub-knop {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    min-height: 48px;
    margin-left: -10px;
    background: none;
    border: 0;
    border-bottom: 3px solid transparent;
    color: var(--sr-ink);
    cursor: pointer;
}
.sm-rp-sub-knop svg { width: 12px; height: 8px; transition: transform .18s ease; }
.sm-rp-sub-knop[aria-expanded="true"] svg { transform: rotate(180deg); }
.sm-rp-has-sub:hover .sm-rp-sub-knop,
.sm-rp-sub-knop:hover { color: var(--sm-rp-marine); }

.sm-rp-subnav {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 5;
    min-width: 240px;
    margin: 0; padding: 6px;
    list-style: none;
    background: #fff;
    border: 1px solid var(--sr-line);
    border-top: 3px solid var(--sm-rp-marine);
    border-radius: 0 0 var(--sr-radius-lg) var(--sr-radius-lg);
    box-shadow: 0 14px 30px rgba(17, 17, 17, .12);
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: opacity .15s ease, transform .15s ease, visibility .15s;
}
.sm-rp-has-sub:hover > .sm-rp-subnav,
.sm-rp-has-sub:focus-within > .sm-rp-subnav,
.sm-rp-sub-knop[aria-expanded="true"] + .sm-rp-subnav {
    opacity: 1;
    visibility: visible;
    transform: none;
}
.sm-rp-subnav a {
    display: block;
    padding: 12px 14px;
    font-size: .95rem;
    border-left: 3px solid transparent;
    border-radius: 3px;
}
.sm-rp-subnav a:hover     { color: var(--sm-rp-marine); background: #f4f5f0; border-left-color: var(--sr-line); }
.sm-rp-subnav a.sm-rp-active { color: var(--sm-rp-marine); border-left-color: var(--sm-rp-marine); }

/* Hoofdactie rechts in de balk. */
.sm-rp-header-cta { flex: none; margin-left: 8px; font-size: .95rem; padding: 12px 20px; }

@media (prefers-reduced-motion: reduce) {
    .sm-rp-subnav, .sm-rp-sub-knop svg { transition: none; }
}

/* ---------- transparante header op de homepage ---------- */

.sm-rp-home .sm-rp-header {
    position: fixed;
    left: 0; right: 0;
    background: transparent;
    border-bottom-color: transparent;
}
.sm-rp-home .sm-rp-header.sm-rp-scrolled {
    background: #fff;
    border-bottom-color: var(--sr-line);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
}

/* ---------- hamburger en schuifmenu ---------- */

.sm-rp-burger {
    display: none;
    flex: none;
    width: 48px; height: 48px;
    align-items: center;
    justify-content: center;
    background: none;
    border: 0;
    cursor: pointer;
    color: inherit;
}
.sm-rp-burger-lijnen { display: grid; gap: 4px; }
.sm-rp-burger-lijnen span {
    display: block;
    width: 22px; height: 2px;
    background: currentColor;
}

.sm-rp-drawer { position: fixed; inset: 0; z-index: 60; }
.sm-rp-drawer[hidden] { display: none; }
.sm-rp-drawer-overlay { position: absolute; inset: 0; background: rgba(17, 17, 17, .5); }
.sm-rp-drawer-paneel {
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: min(340px, 88vw);
    background: #fff;
    border-left: 4px solid var(--sm-rp-marine);
    padding: 20px 20px 32px;
    overflow-y: auto;
}
.sm-rp-drawer-sluit {
    position: absolute;
    top: 10px; right: 10px;
    width: 44px; height: 44px;
    font-size: 1.9rem;
    line-height: 1;
    background: none;
    border: 0;
    color: var(--sr-ink);
    cursor: pointer;
}
.sm-rp-drawer-list,
.sm-rp-drawer-list ul { list-style: none; margin: 0; padding: 0; }
.sm-rp-drawer-list { margin-top: 48px; }
.sm-rp-drawer-list > li { border-bottom: 1px solid var(--sr-line); padding-bottom: 6px; margin-bottom: 6px; }
.sm-rp-drawer-list > li:last-child { border-bottom: 0; }
.sm-rp-drawer-list > li > a {
    display: block;
    padding: 13px 10px;
    font-size: 1.15rem;
    border-left: 3px solid transparent;
}
.sm-rp-drawer-list ul a {
    display: block;
    padding: 11px 10px 11px 24px;
    font-size: .95rem;
    border-left: 3px solid transparent;
}
.sm-rp-drawer-list a:hover     { color: var(--sm-rp-marine); background: #f4f5f0; }
.sm-rp-drawer-list a.sm-rp-active { color: var(--sm-rp-marine); border-left-color: var(--sm-rp-marine); }
.sm-rp-drawer-cta { display: block; text-align: center; margin-top: 24px; }

@media (max-width: 1199.98px) {
    .sm-rp-body { --sm-rp-header-h: 73px; }
    .sm-rp-nav-link { font-size: 1rem; padding: 0 10px; }
    .sm-rp-header-cta { font-size: .88rem; padding: 11px 16px; }
}
@media (max-width: 991.98px) {
    .sm-rp-body { --sm-rp-header-h: 72px; }
    .sm-rp-nav { display: none; }
    .sm-rp-header-cta { display: none; }   /* staat onderaan het schuifmenu */
    .sm-rp-burger { display: flex; }
    .sm-rp-logo img { width: 180px; }
}

/* ---------- meldingen ---------- */

.sm-rp-meldingen {
    max-width: 1140px;
    margin: 24px auto 0;
    padding: 0 24px;
    display: grid;
    gap: 12px;
}
.sm-rp-melding {
    position: relative;
    border: 1px solid var(--sr-line);
    border-left-width: 5px;
    border-radius: var(--sr-radius-lg);
    padding: 14px 52px 14px 16px;
    background: #fff;
}
.sm-rp-melding ul { margin: 8px 0 0; padding-left: 20px; }
.sm-rp-melding-kop { font-weight: 700; }
.sm-rp-melding-success { border-left-color: var(--sm-rp-limoen); background: #f4f8dc; }
.sm-rp-melding-error   { border-left-color: #b0483a; background: #fbf1ef; }
.sm-rp-melding-warning { border-left-color: #c8892a; background: #fdf6ec; }
.sm-rp-melding-info    { border-left-color: #4a6fa5; background: #eef3fa; }
.sm-rp-melding-sluit {
    position: absolute;
    top: 6px; right: 6px;
    width: 40px; height: 40px;
    font-size: 1.5rem;
    line-height: 1;
    background: none;
    border: 0;
    color: inherit;
    cursor: pointer;
}

/* ---------- voettekst ---------- */

.sm-rp-footer {
    margin-top: 80px;
    background: var(--sm-rp-houtskool);
    color: #c9c9c5;
    font-size: .92rem;
}
.sm-rp-footer a { color: #fff; }
.sm-rp-footer-inner {
    max-width: 1140px;
    margin: 0 auto;
    padding: 48px 24px 32px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
}
.sm-rp-footer-kolom p { margin: 0 0 4px; }
.sm-rp-footer-kop {
    color: #fff;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: .8rem;
    margin-bottom: 12px;
}
.sm-rp-footer address { font-style: normal; }
.sm-rp-footer ul { list-style: none; margin: 0; padding: 0; }
.sm-rp-footer li { padding: 3px 0; }
.sm-rp-footer-onder {
    border-top: 1px solid rgba(255, 255, 255, .12);
    padding: 20px 24px;
    text-align: center;
    font-size: .82rem;
}
@media (max-width: 767.98px) {
    .sm-rp-footer-inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 479.98px) {
    .sm-rp-footer-inner { grid-template-columns: 1fr; }
}

/* =============================================================
   Herbruikbare pagina-onderdelen
   -------------------------------------------------------------
   Sectie, sectiekop en kaartraster. Bedoeld om ook door
   refurbished, products en repairs gebruikt te worden, zodat er
   niet per pagina een eigen variant ontstaat — dat is precies wat
   er in de Nicepage-bestanden gebeurde.
   ============================================================= */

.sm-rp-sectie { padding: 72px 0; }
.sm-rp-sectie-inner {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 24px;
}

.sm-rp-sectie-kop { max-width: 46rem; margin-bottom: 40px; }
.sm-rp-sectie-kop h1 {
    font-family: var(--sm-rp-menu-font);
    font-size: clamp(1.9rem, 4vw, 2.75rem);
    line-height: 1.15;
    color: var(--sr-ink);
    margin: 0;
}
.sm-rp-sectie-kop p {
    margin: 14px 0 0;
    font-size: 1.05rem;
    color: var(--sr-muted);
}

.sm-rp-kaartgrid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px;
}

.sm-rp-kaart {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--sr-line);
    border-radius: var(--sr-radius-lg);
    overflow: hidden;
    transition: transform .15s ease, box-shadow .15s ease;
}
.sm-rp-kaart:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(27, 29, 22, .10);
}
.sm-rp-kaart-beeld {
    display: block;
    width: 100%;
    height: 190px;
    object-fit: cover;
    background: #eceee7;
}
.sm-rp-kaart-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 22px 20px 24px;
    flex: 1;
}
.sm-rp-kaart-body h2 {
    margin: 0;
    font-size: 1.15rem;
    color: var(--sr-ink);
}
.sm-rp-kaart-body p {
    margin: 0;
    font-size: .95rem;
    color: var(--sr-ink);
    flex: 1;
}

@media (prefers-reduced-motion: reduce) {
    .sm-rp-kaart { transition: none; }
    .sm-rp-kaart:hover { transform: none; }
}

/* =============================================================
   Homepage
   ============================================================= */

.sm-rp-eyebrow {
    display: inline-block;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--sm-rp-marine);
    margin-bottom: 12px;
}
.sm-rp-lead { font-size: 1.1rem; color: var(--sr-muted); }
.sm-rp-gecentreerd { text-align: center; }
.sm-rp-gecentreerd .sm-rp-sectie-kop { margin-left: auto; margin-right: auto; }
.sm-rp-gecentreerd-blok { max-width: 34rem; margin-left: auto; margin-right: auto; }

.sm-rp-knoprij { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.sm-rp-knoprij-midden { justify-content: center; }

/* ---------- hero ---------- */

.sm-rp-hero {
     background: var(--sm-rp-papier);
     padding: calc(var(--sm-rp-header-h) + 64px) 0 72px;
}
.sm-rp-hero-inner {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 24px;
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 48px;
    align-items: center;
}
.sm-rp-hero h1 {
    font-family: var(--sm-rp-menu-font);
    font-size: clamp(2rem, 4.4vw, 3.1rem);
    line-height: 1.12;
    color: var(--sr-ink);
    margin: 0 0 16px;
}
.sm-rp-hero-contact { margin-top: 20px; font-size: .95rem; color: var(--sr-muted); }
.sm-rp-hero-contact a { font-weight: 600; }
.sm-rp-hero-contact span { margin: 0 8px; }
.sm-rp-hero-geldig { margin-top: 8px; font-size: .85rem; color: var(--sr-muted); }
.sm-rp-hero-beeld img { width: 100%; height: auto; }

@media (max-width: 900px) {
    .sm-rp-hero-inner { grid-template-columns: 1fr; }
    .sm-rp-hero { padding-top: calc(var(--sm-rp-header-h) + 40px); }
}

/* ---------- vlakken ---------- */

.sm-rp-vlak-groen  { background: var(--sm-rp-limoen); color: var(--sr-ink); }
.sm-rp-vlak-groen h2, .sm-rp-vlak-groen .sm-rp-sectie-kop p { color: var(--sr-ink); }
.sm-rp-vlak-groen .sm-rp-eyebrow { color: var(--sr-ink); }
.sm-rp-vlak-zacht  { background: #fff; }
.sm-rp-vlak-donker { background: var(--sm-rp-houtskool); color: #e8e8e6; }
.sm-rp-vlak-donker h2 { color: #fff; }
.sm-rp-sectie-smal { padding: 48px 0; }

/* ---------- toestelkeuze ---------- */

.sm-rp-keuzegrid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
}
.sm-rp-keuze {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    min-height: 160px;
    justify-content: center;
    padding: 28px 20px;
    background: #fff;
    border: 1px solid var(--sr-line);
    border-radius: var(--sr-radius-lg);
    text-decoration: none;
    font-weight: 700;
    color: var(--sr-ink);
    text-align: center;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.sm-rp-keuze:hover {
    transform: translateY(-3px);
    border-color: var(--sm-rp-limoen);
    box-shadow: 0 12px 28px rgba(27, 29, 22, .10);
}
.sm-rp-keuze-icoon img { width: 64px; height: 64px; object-fit: contain; }

/* ---------- twee kolommen met beeld ---------- */

.sm-rp-duo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
}
.sm-rp-duo h2 { margin: 0 0 14px; font-size: clamp(1.5rem, 3vw, 2.1rem); }
.sm-rp-duo-beeld img {
    width: 100%;
    height: auto;
    border-radius: var(--sr-radius-lg);
    object-fit: cover;
}
@media (max-width: 860px) {
    .sm-rp-duo { grid-template-columns: 1fr; gap: 28px; }
}

.sm-rp-vinklijst { list-style: none; margin: 0; padding: 0; }
.sm-rp-vinklijst li { position: relative; padding: 8px 0 8px 30px; }
.sm-rp-vinklijst li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    color: var(--sm-rp-limoen);
    font-weight: 800;
}

/* ---------- partners ---------- */

.sm-rp-logorij {
    list-style: none;
    margin: 28px 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 40px;
}
.sm-rp-logorij img { height: 60px; width: auto; object-fit: contain; }

/* ---------- recensies ---------- */

.sm-rp-kaartgrid-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.sm-rp-review { padding: 26px 24px; border: 2px solid var(--sm-rp-marine); }
.sm-rp-review blockquote {
    margin: 0 0 20px;
    font-size: 1.02rem;
    line-height: 1.6;
    color: var(--sr-ink);
}
.sm-rp-review blockquote::before { content: "\201C"; }
.sm-rp-review blockquote::after  { content: "\201D"; }
.sm-rp-review-voet { display: flex; align-items: center; gap: 12px; }
.sm-rp-review-avatar img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.sm-rp-review-voet b { display: block; color: var(--sr-ink); }
.sm-rp-review-voet small { color: var(--sr-muted); font-size: .82rem; }

@media (prefers-reduced-motion: reduce) {
    .sm-rp-keuze { transition: none; }
    .sm-rp-keuze:hover { transform: none; }
}

/* ---------- de twee hoofdacties ---------- */

.sm-rp-acties { padding: 56px 0; }
.sm-rp-actiegrid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 24px;
}
.sm-rp-actie {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 32px 30px;
    border-radius: var(--sr-radius-lg);
}
.sm-rp-actie h2 { margin: 0; font-size: clamp(1.3rem, 2.4vw, 1.75rem); }
.sm-rp-actie p { margin: 0; flex: 1; }
.sm-rp-actie .sr-btn { margin-top: 8px; }

/* Aanvraag is de belangrijkste actie: vol merkgroen. */
.sm-rp-actie-primair {
    background: var(--sm-rp-limoen);
    color: var(--sr-ink);
}
.sm-rp-actie-primair h2,
.sm-rp-actie-primair .sm-rp-eyebrow { color: var(--sr-ink); }

/* SmartCheck ernaast, rustiger, met de marine kaderlijn van de huisstijl. */
.sm-rp-actie-tweede {
    background: #fff;
    border: 2px solid var(--sm-rp-marine);
}
.sm-rp-actie-tweede h2 { color: var(--sm-rp-marine); }

@media (max-width: 860px) {
    .sm-rp-actiegrid { grid-template-columns: 1fr; }
}

/* =============================================================
   Knoppen op de publieke site
   -------------------------------------------------------------
   smartrepair.css zet .sr-btn op #3a5c13 omdat limoen mét witte
   tekst maar 1,99:1 haalt. Dat klopt — maar het probleem zit in
   de wítte tekst, niet in het limoen. Met donkere tekst haalt
   dezelfde limoen 9,48:1, ruim boven AAA.

   Dus: het merkgroen terug als knopkleur, met donkere tekst, en
   op hover naar marine met wit — exact wat de oude knoppen deden
   met u-custom-color-1 en u-hover-palette-5-base.

   Alles onder .sm-rp-body, zodat de portalknoppen in Filament en de
   wizard hun eigen donkergroen houden. De !important is nodig
   omdat smartrepair.css die op .sr-btn zelf gebruikt; twee
   klassen winnen daarvan.
   ============================================================= */

.sm-rp-body .sr-btn {
    background: var(--sm-rp-limoen);
    color: var(--sr-ink) !important;
}
.sm-rp-body .sr-btn:hover,
.sm-rp-body .sr-btn:focus {
    background: var(--sm-rp-marine);
    color: #fff !important;
}
.sm-rp-body .sr-btn:active { background: #27417f; }

/* Tweede keuze: marine kaderlijn, geen vlak. */
.sm-rp-body .sr-btn.secondary {
    background: transparent;
    border: 2px solid var(--sm-rp-marine);
    color: var(--sm-rp-marine) !important;
}
.sm-rp-body .sr-btn.secondary:hover,
.sm-rp-body .sr-btn.secondary:focus {
    background: var(--sm-rp-marine);
    color: #fff !important;
}

/* Op een limoen vlak valt een limoen knop weg: daar houtskool. */
.sm-rp-body .sr-btn.dark {
    background: var(--sm-rp-houtskool);
    color: #fff !important;
}
.sm-rp-body .sr-btn.dark:hover,
.sm-rp-body .sr-btn.dark:focus { background: #2b2b2b; color: #fff !important; }

/* Op het houtskool vlak (B2B) is de limoen knop juist het contrast. */
.sm-rp-vlak-donker .sr-btn.secondary {
    border-color: #fff;
    color: #fff !important;
}
.sm-rp-vlak-donker .sr-btn.secondary:hover { background: #fff; color: var(--sm-rp-houtskool) !important; }

/* ---------- stappenrij in de actiekaart ---------- */

.sm-rp-stappenrij {
    list-style: none;
    margin: 4px 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    counter-reset: sr-stap;
    font-size: .88rem;
    font-weight: 600;
}
.sm-rp-stappenrij li {
    counter-increment: sr-stap;
    display: flex;
    align-items: center;
    gap: 7px;
}
.sm-rp-stappenrij li::before {
    content: counter(sr-stap);
    flex: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--sr-ink);
    color: var(--sm-rp-limoen);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .75rem;
    font-weight: 800;
}
.sm-rp-stappenrij li:not(:last-child)::after {
    content: "\2192";
    margin-left: 4px;
    opacity: .55;
}
.sm-rp-klein { font-size: .85rem; opacity: .8; margin: 4px 0 0; }

/* ---------- kaart zonder beeld, en genummerde lijst ---------- */

.sm-rp-kaart-tekst .sm-rp-kaart-body { padding: 26px 24px; }
.sm-rp-kaart-tekst h2 { font-size: 1.15rem; }

.sm-rp-beeld-rond img { border-radius: 50%; }

.sm-rp-genummerd {
    list-style: none;
    margin: 18px 0 0;
    padding: 0;
    counter-reset: sr-nr;
}
.sm-rp-genummerd li {
    counter-increment: sr-nr;
    position: relative;
    padding: 9px 0 9px 42px;
}
.sm-rp-genummerd li::before {
    content: counter(sr-nr);
    position: absolute;
    left: 0; top: 7px;
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--sr-ink);
    color: var(--sm-rp-limoen);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: .85rem;
}

/* ── drawer-stapel ──────────────────────────────────────────────────────
   Paneel boven de sluier. De overlay staat ná het paneel in de DOM
   (klik-ernaast-sluit), maar won daardoor de schilderorde en ving alle
   klikken af: menu zichtbaar, niets aanklikbaar (2026-08-06). */

.sm-rp-drawer-paneel {
    z-index: 2;
}

.sm-rp-drawer-overlay {
    z-index: 1;
}

/* ── header-taalkiezer-mobiel ───────────────────────────────────────────
   Onder de menu-grens: balk-kiezer weg (de drawer heeft zijn eigen),
   zodat de flexrij ruimte houdt voor logo + hamburger. De burger krijgt
   flex-shrink:0 zodat hij nooit meer weggedrukt kan worden (2026-08-08). */

@media (max-width: 991.98px) {
    .sm-rp-header-inner > .sr-lang {
        display: none;
    }
}

.sm-rp-burger {
    flex-shrink: 0;
}

/* Drawer-kiezer: vingervriendelijke doelen, iets meer aanwezigheid. */
.sm-rp-drawer-taal .sr-lang a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
}