/* =========================================================
   myrefinds.css  
========================================================= */

/* =========================================================
   0) RESET / BASELINES
========================================================= */

*,
*::before,
*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; font-size:16px; }

body{
  margin:0;
  background:#fff;
  color:#404040;
  font-family:"Gardenia", serif;
  font-size:16px;
  line-height:1.6;
  font-weight:400;
}

/* media defaults */
img{ max-width:100%; height:auto; display:block; }

/* form defaults */
button, input, select, textarea{ font:inherit; color:inherit; }

/* ===== Formvelden – modern, passend bij layout ===== */

.rf-sec textarea,
.rf-sec input[type="text"],
.rf-sec input[type="url"],
.rf-sec input[type="email"],
.rf-sec input[type="tel"]{

  appearance:none;
  width:100%;

  padding:6px 9px;
  font-family:"Gardenia", serif;
  font-size:.9em;
  line-height:1.25;

  background:#fff;
  border:1px solid #00000026;
  border-radius:6px;

  box-shadow:0 1px 2px #0000000A;
  transition:border-color .15s ease, box-shadow .15s ease;
}

/* Moderne select */
.rf-sec select{
  appearance:none;
  width:100%;

  padding:10px 42px 10px 12px; /* ruimte voor pijl */
  font-family:"Gardenia", serif;
  font-size:1rem;
  line-height:1.5;

  background:#fff;
  border:1px solid #00000026;
  border-radius:8px;

  box-shadow:0 1px 2px #0000000A;
  transition:border-color .15s ease, box-shadow .15s ease;

  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 20 20'%3E%3Cpath fill='%236B4333' d='M5 7l5 6 5-6z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
  background-size:14px;
}

/* =========================================================
   1) VARS (één plek, geen duplicaten)
========================================================= */

:root{
  --rf-h2-top: 16px;
  --rf-title-divider-gap: 1px;
  --rf-divider-bottom: 2px !important;
  --rf-divider-color: #fff;

  --rf-border: #e5e5e5;

  --rf-accent: #b9b9b9;
  --rf-accent-disabled: #b9b9b9;

  /* sectie-rhythm (matcht h4) */
  --rf-sec-gap-top: 0.9rem;
  --rf-sec-gap-bot: 0.5rem;
  --rf-help-gap-top: 0.25rem;
  --rf-help-gap-bot: 0;

  /* gallery thumbs */
  --rf-thumb-w: 200px;
  --rf-thumb-gap: 8px;
}

/* checkbox/radio accent */
input[type="checkbox"],
input[type="radio"]{
  accent-color: var(--rf-accent);
}

/* =========================================================
   2) FONTS — self-hosted op my.refinds.eu
   LET OP: paden consistent op /my/assets/fonts/...
========================================================= */

@font-face{
  font-family:"Darwin Pro";
  src:url("/assets/fonts/Los-Andes-Type-Darwin-Pro-Regular.woff") format("woff");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Darwin Pro";
  src:url("/assets/fonts/Los-Andes-Type-Darwin-Pro-SemiBold.woff") format("woff");
  font-weight:600;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Darwin Pro";
  src:url("/assets/fonts/Los-Andes-Type-Darwin-Pro-Bold.woff") format("woff");
  font-weight:700;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Darwin Pro";
  src:url("/assets/fonts/Los-Andes-Type-Darwin-Pro-Regular-It.woff") format("woff");
  font-weight:400;
  font-style:italic;
  font-display:swap;
}

@font-face{
  font-family:"Gardenia";
  src:url("/assets/fonts/Gardenia-Regular.woff2") format("woff2");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

/* =========================================================
   3) HEADINGS
========================================================= */

h1{
  font-family:"Darwin Pro", sans-serif;
  font-size:28px;
  font-weight:600;
  color:#7A4E3A;
  line-height:1.25;
  margin:30px 0 30px 0;
}

h2{
  font-family:"Darwin Pro", sans-serif;
  font-size:21px;
  font-weight:600;
  color:#B2774E;
  line-height:1;
  margin-top:10px;
}

h2::after{
  content:"";
  display:block;
  border-bottom:1px solid var(--rf-divider-color);
  margin-top:var(--rf-title-divider-gap);
  margin-bottom:var(--rf-divider-bottom);
}

/* Geen h2-divider onder accordeontitel (noch hover, noch open) */
.rf-shop__accTitle::after{
  display:none;
}

h3{
  font-family:"Darwin Pro", sans-serif;
  font-size:24px;
  font-weight:600;
  color:#7A4E3A;
  line-height:1.25;
  margin:1rem 0 0.6rem 0;
}

h4{
  font-family:"Darwin Pro", sans-serif;
  font-size:18px;
  font-weight:600;
  color:#6B4333;
  line-height:1;
  margin:1.5rem 0 0.5rem 0 !important;
}

/* =========================================================
   4) LAYOUT — wrappers
========================================================= */

.page-page__inner{
  width:100%;
  margin:0;
  padding:0;
}

.site,
.site-content,
.content-area,
.site-main{
  display:block;
  width:100%;
}

.inside-article,
.shop-page,
.shop-page__outer{
  width:100%;
}

.shop-page__inner{
  width:100%;
  max-width:960px;
  margin:0 auto;
}


/* =========================================================
   5) HEADER
========================================================= */

.rf-acc__header{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  margin:0 0 18px 0;
  padding-bottom:10px;
  border-bottom:1px solid #0000001A;
}

.rf-acc__brand{
  display:flex;
  align-items:flex-end;
  gap:14px;
  min-width:0;
}

.rf-acc__logo{
  display:block;
  max-height:50px;
  width:auto;
}

.rf-acc__right{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:8px;
}

.rf-acc__whoRow{
  display:flex;
  align-items:center;
  gap:8px;
}

.rf-acc__who{ font-weight:600; }
.rf-acc__star{ width:18px; height:18px; display:inline-block; }

/* title row */
.rf-acc__h1row{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  margin:0 0 10px 0;
}

.rf-acc__h1{
  margin:0;
  font-size:30px;
  font-weight:600;
  line-height:1.25;
  color:#7A4E3A;
}

.rf-acc__meta{ opacity:.7; font-size:.85em; }

/* menu pills */
.rf-acc__menu{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.rf-acc__menu a{ text-decoration:none; }

.pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 10px;
  border-radius:999px;
  font-size:.85em;
  border:1px solid #0000001F;
  background:#0000000A;
  color:inherit;
}

/* =========================================================
   6) BUTTONS
   - fixes: line-height was ongeldig (0,75)
   - border was incompleet (border:1px zonder style)
========================================================= */

.rf-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;

  line-height:0.75;

  padding:5px 6px;
  border-radius:4px;

  position:relative;
  top:-3px;

  text-decoration:none;
  font-size:.8em;

  background:#f5f5f5;
  border:0.04px solid #9f9f9f;
  color:#9f9f9f;

  box-shadow:none;
  cursor:pointer;
}

.rf-btn:hover{
  text-decoration:none;
  border-color:#9f9f9f;
  background:#efeee9;
  color:#9f9f9f;
}

/* Opslaan = zelfde basis als .rf-btn, alleen kleur afwijkend */
.rf-sec__actions .rf-btn[data-sec-action="save"],
.rf-day-actions .rf-btn[data-day-action="save"]{
  background:#F8AE21;
  border-color:#F8AE21;
  color:#fff;
}

.rf-sec__actions .rf-btn[data-sec-action="save"]:hover,
.rf-day-actions .rf-btn[data-day-action="save"]:hover{
  background:#FBC11D;
  border-color:#FBC11D;
  color:#fff;
}

/* =========================================================
   7) SHOP HEADER
========================================================= */

/* Kaart: geen hover-fratsen */
#myShops .rf-shop:hover,
#myShops .rf-shop:focus,
#myShops .rf-shop:focus-within{
  box-shadow:none;
  transform:none;
  background:#fff;
}

/* Bestaande head (als je die nog gebruikt) */
.rf-shop__head{
  display:flex;
  gap:10px;
  align-items:flex-start;
  justify-content:flex-start;
  margin-bottom:10px;
}

/* H4 reset (globaal) */
.rf-shop__h4{ margin:0; padding:0; }

.rf-shop__col{ flex:1; min-width:0; }
.rf-shop__col--left{ flex:1.2; }
.rf-shop__col--right{ flex:0.8; }

.rf-shop__actions{
  margin-left:auto;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

/* =========================================================
   8 SECTION HEAD (h4 + buttons) — bestaand patroon
========================================================= */
.rf-sec__head{
  display:flex;
  align-items:baseline;
  justify-content:flex-start;
  gap:10px;
  flex-wrap:nowrap;
}

.rf-sec__actions{
  display:inline-flex;
  align-items:baseline;
  gap:8px;
  flex:0 0 auto;
}

.rf-sec__title{ margin:0; }

/* =========================================================
   8a ACCORDION — zelfde look & feel als rf-sec__head
   Doel: “h4 met boxje eromheen”, maar exact in jouw opmaaktaal
========================================================= */

/* Card border moet de hele inhoud omlijsten als accordion open staat */
section.rf-shop{
  border:0;
  border-radius:10px;
  margin-bottom:12px; /* ruimte tussen cards; voorkomt witte lijn bij hover */
}

section.rf-shop.is-open{
  border:1px solid #0000001F;
  background:#fff;
  border-radius:10px 10px 0 0;
  margin-bottom:12px;
}



/* In open state: header-frame geen eigen volledige omlijsting (anders dubbel) */
section.rf-shop.is-open .rf-shop__accFrame{
  border:0;
  border-radius:10px 10px 0 0;
  background:#F2F1EF;
  }

/* Geen bottom-margin hier; ruimte zit op section.rf-shop zelf */
.rf-shop__accHead{
    margin:0;
}

section.rf-shop.is-open .rf-shop__accHead{
  margin:0;
}



/* Body-content moet uitlijnen met de titel (zelfde inset als header-frame) */
section.rf-shop.is-open .rf-shop__accBody{
  padding: 10px 12px 12px;
  background: #F2F1EF;
}

/* de knop is het “boxje” */
.rf-shop__accBtn{
  width:100%;
  display:flex;
  align-items:baseline;              /* zelfde baseline-uitlijning */
  justify-content:flex-start;
  gap:10px;

  padding:0;                         /* we stylen binnenin, zodat het op rf-sec lijkt */
  background:transparent;
  border:0;
  box-shadow:none;
  cursor:pointer;
  text-align:left;
}

/* binnenframe: het echte boxje */
.rf-shop__accFrame{
  width:100%;
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;

  padding:10px 12px;                 /* vergelijkbaar met sectie spacing */
  border:1px solid #0000001F;
  border-radius:10px 10px 0 0;       /* scherpe onderhoeken, ook ingeklapt */
  background:#fff;
}

/* hover/focus subtiel, geen afwijkende effecten */
.rf-shop__accBtn:hover .rf-shop__accFrame{
  border-color:#00000038;
  background:#F2F1EF;
}

.rf-shop__accBtn:focus{ outline:none; }

.rf-shop__accBtn:focus-visible .rf-shop__accFrame{
  outline:2px solid #00000047;
  outline-offset:2px;
  background: #F2F1EF;
}

/* Titel gedraagt zich als h4 */
.rf-shop__accTitle{
  margin:0;
  flex:1;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-family:"Darwin Pro", sans-serif;
  font-size:18px;
  font-weight:600;
  color:#6B4333;
  line-height:1;
}

/* Chevron-icoon — identiek aan .rf-faq__chevron */
.rf-shop__accIcon{
  flex:0 0 auto;
  width:20px;
  height:20px;
  display:inline-flex;
  align-items:center;
  justify-content:center;

  border:1px solid #0000001F;
  border-radius:4px;
  background:#fff;

  font-size:.75rem;
  font-weight:700;
  color:#888;
  line-height:1;
  transition:transform .2s;
}
section.rf-shop.is-open .rf-shop__accIcon{
  transform:rotate(180deg);
}

/* =========================================================
   9) SOCIALS
========================================================= */

.rf-shop__socials{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:10px;         /* ruimte boven de iconen (t.o.v. kopje) */
  align-items:center;
  padding-bottom:18px;     /* ruimte ONDER de socials (t.o.v. tekst erna) */
}

.rf-shop__socials img{
  width:24px;
  height:24px;
  display:block;
  transition: transform .18s ease, box-shadow .18s ease;
}

.rf-shop__socials img:hover{
  transform: translateY(-3px);
  box-shadow: 0 6px 12px #00000026;
}

/* Socials-hint: zelfde opmaak als omschrijving-hint (geen padding, links uitge.) */
.rf-shop__socialhint{
  padding:0;
  text-align:left;
  margin-top:4px;
}



/* =========================================================
   10) GALLERY / AFBEELDINGEN
   (matcht huidige markup: .rf-shop__gallery + .rf-gal/.rf-gal__item/.rf-gal__x)
========================================================= */

.rf-shop__gallery{
  margin: var(--rf-sec-gap-top) 0 var(--rf-sec-gap-bot) 0;
  padding:0;
  display:block; /* header boven, grid eronder */
}

/* container die JS rendert */
.rf-gal{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--rf-thumb-gap);
  margin-top:10px;
  width:100%;
}

.rf-gal__item{
  margin:0;
  position:relative;
}

/* thumbnails: 4:3 — vul grid-cellen volledig, gelijke marges links/rechts */
.rf-gal__item img{
  width:100%;
  aspect-ratio:4 / 3;   /* vaste verhouding zonder vaste px-breedte */
  height:auto;
  object-fit:cover;
  border-radius:0;      /* geen afronding */
  display:block;
}

/* dropzone vóór thumbnails en altijd hele eerste rij */
.rf-gallery-dropzone{
  order:-1;
  flex: 0 0 100%;
  width: 100%;
}


/* remove button (edit-mode) */
.rf-gal__x{
  position:absolute;
  top:6px;
  right:6px;
  z-index:5;

  width:28px;
  height:28px;

  border-radius:999px;
  border:1px solid #00000040;
  background:#FFFFFFF2;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  font-size:18px;
  font-weight:700;
  line-height:1;
  color:#333;

  cursor:pointer;
  opacity:1;
  pointer-events:auto;
}

.rf-gal__item img{ position: relative; z-index: 1; }


.rf-gal__x.is-locked{
  opacity:.35;
  cursor:not-allowed;
}

.rf-gal__x:hover{
  background:#fff;
  border-color:#00000059;
}


/* empty/help text */
.rf-shop__gallery p,
.rf-shop__gallery .rf-empty{
  margin: var(--rf-help-gap-top) 0 var(--rf-help-gap-bot) 0;
}

/* dropzone (upload) */
.rf-gallery-dropzone{
  border:1px dashed #00000040;
  border-radius:10px;

  padding:14px 12px;
  min-height:160px;             
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;

  background:#00000005;
  cursor:pointer;
  user-select:none;
}

.rf-gallery-dropzone.is-drag{
  border-color:#00000073;
  background:#0000000A;
}

.rf-gallery-dropzone:hover{
  border-color:#00000059;
  background:#0000000D;
  box-shadow:0 2px 6px #0000000F;
  transition:background .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.rf-gallery-dropzone.is-busy{
  opacity:.6;
  pointer-events:none;
}

/* =========================================================
   11) OPENINGSTIJDEN
========================================================= */

.rf-hours{
  display:grid;
  gap:6px;
  max-width:420px;
}

.rf-hours__row{
  display:grid;
  grid-template-columns:110px 1fr;
  column-gap:16px;
  align-items:baseline;
}

.rf-hours__day{ font-weight:600; }
.rf-hours__time{ text-align:left; }

.rf-empty{
  opacity:.6;
  font-style:italic;
}

/* Voorgestelde openingstijden */
.rf-hours input::placeholder,
.rf-hours textarea::placeholder{
  color:#0000003D;
  font-style:italic;
  opacity:1; /* Safari fix */
}

/* =========================================================
   12) DETAILS / FIELDS
========================================================= */

.rf-shop__details{ margin-top:12px; }

.rf-fields{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
}

.rf-field{
  display:grid;
  grid-template-columns:220px 1fr;
  gap:12px;
  align-items:start;
}

.rf-field__k{ 
  opacity:.75; 
}

.rf-field__v a{ 
  text-decoration:none; 
}

.rf-field__v code{ 
  font-size:.95em; 
}

/* Status-regel: key + value altijd op één regel */
.rf-field.rf-field--status{
  grid-template-columns:max-content 1fr;
}

.rf-field.rf-field--status .rf-field__v{
  white-space:nowrap;
}

/* =========================================================
   13) CATS + TAGS
========================================================= */

.rf-tax-grid,
.rf-tags-grid{
  display:inline-grid;
  grid-template-columns:repeat(2, max-content);
  column-gap:32px;
  row-gap:8px;
  justify-content:start;
  align-items:start;
}

.rf-taxopt,
.rf-tagopt{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
  font-size:0.95em;
}

.rf-taxopt > span{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* checkbox styling */
.rf-cb{
  -webkit-appearance:none;
  appearance:none;

  width:18px;
  height:18px;
  border:2px solid #00000059;
  border-radius:4px;
  background:#fff;
  opacity:1;

  display:inline-grid;
  place-content:center;
}

.rf-cb:checked{
  background:var(--rf-accent);
  border-color:var(--rf-accent);
}

.rf-cb:checked::after{
  content:"";
  width:6px;
  height:10px;
  border-right:3px solid #fff;
  border-bottom:3px solid #fff;
  transform:rotate(45deg);
  margin-top:-1px;
}

.rf-cb[aria-disabled="true"]{ pointer-events:none; cursor:default; }
.rf-tagopt.is-ro{ pointer-events:none; cursor:default; }
.rf-cb:disabled{ opacity:1; cursor:default; }


/* =========================================================
   HOURS — wheel picker: vaste middenband die NOOIT verdwijnt
========================================================= */

/* wheel container (zorgt dat uur + ":" + minuut naast elkaar staan) */
.rf-wheel{
  display:inline-flex;
  align-items:center;
  gap:10px;
}

/* kolom (uur/minuut) */
.rf-wheel__col{
  position:relative;
  width:72px;
  height:120px;
  overflow-y:auto;
  scroll-snap-type:y mandatory;
  -webkit-overflow-scrolling:touch;

  /* center snap padding (JS mag dit blijven zetten) */
  padding:43px 0;
  scroll-padding:43px 0;

  border-radius:8px;
  scrollbar-width:thin;

  /* VASTE middenband (34px hoog) + subtiele rand */
  background:
    linear-gradient(
      to bottom,
      #ffffff 0,
      #ffffff calc(50% - 17px),
      #f2f2f2 calc(50% - 17px),
      #f2f2f2 calc(50% + 17px),
      #ffffff calc(50% + 17px),
      #ffffff 100%
    );
  box-shadow: inset 0 0 0 1px #00000012;
}

/* DOM-mid uitschakelen (want band zit nu in background) */
.rf-wheel__mid{
  display:none;
}

/* items: altijd bodykleur, links in de band */
.rf-wheel__item{
  scroll-snap-align:center;
  scroll-snap-stop:always;

  height:34px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  padding-left:14px;

  font-size:0.95em;
  line-height:1;

  background:transparent;
  border:0;
  box-shadow:none;

  color:inherit;
  font-weight:400;
}

/* geselecteerd: alleen nadruk (geen kleurwissel) */
.rf-wheel__item.is-selected{
  font-weight:700;
}

/* ":" separator */
.rf-wheel__sep{
  opacity:.55;
  font-weight:600;
  line-height:1;
}

/* focus */
.rf-wheel__item:focus{
  outline:2px solid #0000002E;
  outline-offset:2px;
  border-radius:6px;
}

/* =========================================================
   Openingstijden — rij-layout
========================================================= */

.rf-day-row{
  padding:8px 0;
  border-bottom:1px solid #00000014;

  /* verticale structuur afdwingen */
  display:flex;
  flex-direction:column;
}

.rf-day-row__head{
  display:flex;
  align-items:baseline;
  gap:12px;
}

.rf-day-row__label{
  flex:0 0 auto;
  white-space:nowrap;
}

.rf-day-row__status{
  flex:1 1 auto;
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.rf-day-actions{
  flex:0 0 auto;
  display:inline-flex;
  gap:8px;
  white-space:nowrap;
}

/* BODY onder de kop: view + (na bewerk) edit altijd onder elkaar */
.rf-day-row .rf-field__v[data-day-body]{
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  gap:8px !important;
}

/* view regel */
.rf-day__view{
  font-size:15px;
  font-weight:500;
  letter-spacing:.3px;
  min-width:0 !important;
  width:100% !important;
}

/* edit blok (wheels) onder view */
.rf-day__edit{
  width:100% !important;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
}

/* wheel blocks: label boven wheel */
.rf-wheelblock{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.rf-wheelblock__label{
  font-size:12px;
  font-weight:600;
  letter-spacing:.2px;
  opacity:.75;
}

/* dash exact verticaal centreren tussen de 2 wheelblocks */
.rf-day__wheels{
  display:flex;
  align-items:center; /* center de dash t.o.v. de wheelblocks */
  gap:10px;
}
.rf-day__dash{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:120px;       /* match met .rf-wheel__col height */
  line-height:1;
  font-weight:600;
  opacity:.55;
}

/* wheels niet “zweven” naast de knoppen */
.rf-day__edit .rf-wheel{
  margin-top:2px;
}

/* labels boven wheels */
.rf-wheelgrp{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.rf-wheelgrp__label{
  font-size:12px;
  font-weight:700;
  letter-spacing:.2px;
  color:#111;
}

/* dash exact verticaal gecentreerd tussen beide wheel-groepen */
.rf-day__wheels{
  display:flex;
  align-items:center; /* center dash vs wheel-grp */
  gap:10px;
}

.rf-day__dash{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:120px;       /* match .rf-wheel__col height */
  line-height:1;
  opacity:.55;
  font-weight:700;
}

/* =========================================================
   HOURS CTA — alleen als openingstijden ontbreken/onvolledig
========================================================= */

.rf-hours-cta{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  margin: 8px 0 0 0;
  padding: 10px 12px;
  border: 1px dashed #00000026;
  border-radius: 10px;
  background: #00000005;
}

.rf-hours-cta__text{
  min-width:0;
  font-size: .95em;
  opacity: .9;
}

.rf-hours-cta__actions{
  flex:0 0 auto;
  display:inline-flex;
  align-items:baseline;
  gap:8px;
  white-space:nowrap;
}

/* =========================================================
   DASHBOARD — Profielscore
========================================================= */

/* ===== DASHBOARD ===== */

.rf-dash {
  margin: 12px 0 12px 0;
  padding: 14px 16px;
  border: 1px solid #0000001F;
  border-radius: 10px 10px 0 0;
  background: #fff;
}

/* two-column layout: ring left, content right */
.rf-dash__layout {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 0px 0px 16px;
}

/* ── Ring ── */
.rf-dash__ring {
  flex: 0 0 144px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.rf-dash__svg {
  width: 144px;
  height: 144px;
  display: block;
}

/* SVG circles */
.rf-dash__track {
  stroke: #00000014;
}

.rf-dash__fill {
  transition: stroke-dashoffset .4s ease;
}

.rf-dash__milestone {
  fill: #00000022;
}

/* score text in SVG */
.rf-dash__scoreNum {
  font-size: 22px;
  font-weight: 700;
  fill: #1A1A1A;
  font-family: "Darwin Pro", sans-serif;
}

.rf-dash__scoreDen {
  font-size: 11px;
  fill: #888;
}

/* milestone label below ring */
.rf-dash__label {
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  color: #6B4333;
  line-height: 1.2;
}

/* ── Content ── */
.rf-dash__content {
  flex: 1 1 0;
  min-width: 0;
  padding-top: 6px;
}

.rf-dash__phase {
  font-size: 17px;
  font-weight: 700;
  color: #1A1A1A;
  margin: 0 0 12px 0;
  line-height: 1.3;
}

.rf-dash__warning {
  font-size: 13px;
  font-weight: 600;
  color: #B91C1C;
  margin: 0 0 8px 0;
}

/* ── Todo list ── */
.rf-dashActions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
}

.rf-dashActions__item {
  display: flex;
  align-items: baseline;
  gap: 8px;
  text-decoration: none;
  color: #2B2B2B;
}

a.rf-dashActions__item:hover .rf-dashActions__text {
  text-decoration: underline;
}

.rf-dashActions__item--done {
  color: #555;
}

.rf-dashActions__arrow {
  font-size: 13px;
  color: #F8AE21;
  flex-shrink: 0;
  line-height: 1;
}

.rf-dashActions__text {
  font-size: 14px;
  line-height: 1.4;
}

/* =========================================================
   SECTION CARDS
   ========================================================= */

.rf-sec {
  border: 1px solid #0000001F;
  border-radius: 0px;
  background: #fff;
  padding: 6px 16px 25px;
  margin-bottom: 14px;
}

.rf-shop__status,
.rf-shop__taxline {
  border: 1px solid #0000001F;
  border-radius: 0px;
  background: #fff;
  padding: 6px 16px 25px;
  margin-bottom: 12px;
}

/* =========================================================
   TOAST NOTIFICATIONS
========================================================= */

.rf-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(12px);
  padding: 10px 20px;
  border-radius: 8px;
  font-family: "Darwin Pro", sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 9999;
  pointer-events: none;
  white-space: nowrap;
  box-shadow: 0 4px 12px #0002;
}

.rf-toast--visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.rf-toast--error   { background: #ef4444; }
.rf-toast--success { background: #22c55e; }
.rf-toast--info    { background: #3b82f6; }

/* =========================================================
   14b) OPENINGSTIJDEN — multi-blok editor
========================================================= */

/* ── Controlebar (+ Tijd / Kopieer / Gesloten) ── */
.rf-day__controls{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  padding:8px 0 6px;
  border-bottom:1px solid #00000010;
  margin-bottom:8px;
}

/* ── Gesloten-label ── */
.rf-day__closed{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:.85em;
  cursor:pointer;
  user-select:none;
}

/* ── Blokken-container: stapelt blokken verticaal ── */
.rf-day__blocks{
  display:flex;
  flex-direction:column;
  gap:0;
}

/* ── Eén tijdblok ── */
.rf-oh-block{
  padding:4px 0;
}

/* ── Bewerk-pane: verticale stapeling ── */
.rf-day__edit{
  flex-direction:column !important;
  align-items:stretch   !important;
  gap:0 !important;
}

/* ── "— gesloten —" tussen twee tijdvakken in de editor ── */
.rf-oh-break{
  text-align:center;
  font-size:.8em;
  font-style:italic;
  letter-spacing:.3px;
  opacity:.45;
  color:#6B4333;
  padding:6px 0;
  margin:2px 0;
  position:relative;
}
.rf-oh-break::before,
.rf-oh-break::after{
  content:"";
  position:absolute;
  top:50%;
  width:28%;
  height:1px;
  background:#00000018;
}
.rf-oh-break::before{ left:0; }
.rf-oh-break::after { right:0; }

/* ── Verwijder-knop (rood accent) ── */
.rf-btn--remove{
  color:#b91c1c;
  border-color:#b91c1c40;
  background:#fff5f5;
}
.rf-btn--remove:hover{
  background:#fee2e2;
  border-color:#b91c1c80;
  color:#b91c1c;
}

/* ── Primaire knop (Toepassen / bevestigingen) ── */
.rf-btn--primary{
  background:#F8AE21;
  border-color:#F8AE21;
  color:#fff;
}
.rf-btn--primary:hover{
  background:#FBC11D;
  border-color:#FBC11D;
  color:#fff;
}

/* =========================================================
   14c) OPENINGSTIJDEN — kopieer-panel
========================================================= */

.rf-copy-panel{
  margin-top:10px;
  padding:12px 14px;
  border:1px solid #00000020;
  border-radius:8px;
  background:#fafaf8;
  animation:rfFadeIn .15s ease;
}

@keyframes rfFadeIn{
  from{ opacity:0; transform:translateY(-4px); }
  to  { opacity:1; transform:translateY(0); }
}

.rf-copy-panel__title{
  font-size:.82em;
  font-weight:600;
  letter-spacing:.2px;
  opacity:.75;
  margin-bottom:10px;
  text-transform:uppercase;
}

.rf-copy-panel__days{
  display:flex;
  flex-wrap:wrap;
  gap:8px 20px;
  margin-bottom:10px;
}

.rf-copy-panel__day{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:.9em;
  cursor:pointer;
  user-select:none;
}
.rf-copy-panel__day input{ accent-color:var(--rf-accent); }

.rf-copy-panel__quick{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  padding-bottom:10px;
  margin-bottom:10px;
  border-bottom:1px solid #00000012;
}

.rf-copy-panel__footer{
  display:flex;
  gap:8px;
  align-items:center;
}

/* =========================================================
   14d) OPENINGSTIJDEN — onopgeslagen wijzigingen dialoog
========================================================= */

.rf-unsaved-dialog{
  display:flex;
  align-items:flex-start;
  gap:12px;
  flex-wrap:wrap;
  padding:10px 14px;
  margin-bottom:14px;
  border:1px solid #F8AE2170;
  border-radius:8px;
  background:#fffcf0;
  animation:rfFadeIn .15s ease;
}

.rf-unsaved-dialog__msg{
  margin:0;
  font-size:.9em;
  line-height:1.5;
  flex:1 1 180px;
  min-width:0;
  color:#6B4333;
}

.rf-unsaved-dialog__actions{
  display:flex;
  gap:8px;
  flex:0 0 auto;
  flex-wrap:wrap;
}

/* =========================================================
   14e) OPENINGSTIJDEN — front-end weergave (multi-blok)
========================================================= */

/* Meerdere tijdvakken in de view: de tijden-kolom als kolom */
.rf-hours__row{
  align-items:start; /* was baseline; start werkt beter bij meerdere regels */
}

.rf-hours__times{
  display:flex;
  flex-direction:column;
  gap:2px;
}

/* Individueel tijdvak */
.rf-hours__slot{
  /* erft standaard tekststijl */
}

/* "— gesloten —" tussen tijdvakken in de front-end weergave */
.rf-hours__break{
  font-size:.78em;
  font-style:italic;
  opacity:.45;
  letter-spacing:.3px;
  color:#6B4333;
}

/* Tijdvak in de dag-statusregel (bewerkmodus) */
.rf-hours-slot{
  white-space:nowrap;
}
.rf-hours-sep{
  opacity:.35;
  font-size:.75em;
  padding:0 2px;
}

/* =========================================================
   15) RESPONSIVE
========================================================= */

@media (max-width:700px){
  .rf-shop__head{ flex-direction:column; }
  .rf-shop__actions{ margin-left:0; justify-content:flex-start; }

  .rf-tax-grid{ grid-template-columns:1fr; }

  /* thumbs schalen mee op mobiel, ratio blijft 4:3 */
  :root{ --rf-thumb-w: 46vw; }
}

/* =========================================================
   16) LOGIN / LOGOUT PAGINA'S
========================================================= */

/* Gecentreerde header (login + logout pagina) */
.rf-acc__header--center{
  justify-content:center;
}

/* Login container */
.rf-login{
  max-width:380px;
  margin:0 auto;
  padding:8px 0 40px;
}

.rf-login__title{
  font-family:"Darwin Pro", sans-serif;
  font-size:22px;
  font-weight:600;
  color:#7A4E3A;
  text-align:center;
  margin:0 0 6px;
}
.rf-login__title::after{ display:none; } /* geen divider onder login-titel */

.rf-login__subtitle{
  font-size:.9rem;
  color:#888;
  text-align:center;
  margin:0 0 24px;
}

/* Social knoppen */
.rf-login__social{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-bottom:20px;
}

.rf-login__social-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
  padding:11px 16px;
  border-radius:8px;
  font-size:.95rem;
  font-weight:600;
  text-decoration:none;
  border:1px solid transparent;
  cursor:pointer;
  transition:opacity .15s ease, box-shadow .15s ease;
}
.rf-login__social-btn:hover{ opacity:.9; box-shadow:0 2px 8px #0000001A; }

.rf-login__social-btn--google{
  background:#fff;
  border-color:#dadce0;
  color:#3c4043;
}

.rf-login__social-btn--facebook{
  background:#1877F2;
  color:#fff;
}

/* Divider "of" */
.rf-login__divider{
  display:flex;
  align-items:center;
  gap:12px;
  margin:4px 0 20px;
  color:#aaa;
  font-size:.85rem;
}
.rf-login__divider::before,
.rf-login__divider::after{
  content:"";
  flex:1;
  height:1px;
  background:#e5e5e5;
}

/* Magic link sectie */
.rf-login__magic-heading{
  font-size:.8rem;
  font-weight:600;
  color:#999;
  text-transform:uppercase;
  letter-spacing:.05em;
  margin:0 0 10px;
}

.rf-login__magic-form{
  display:flex;
  flex-direction:column;
  gap:10px;
}

/* Velden */
.rf-login__field{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.rf-login__label{
  font-size:.85rem;
  font-weight:600;
  color:#555;
}

.rf-login__input{
  appearance:none;
  width:100%;
  padding:10px 12px;
  font-family:"Gardenia", serif;
  font-size:1rem;
  background:#fff;
  border:1px solid #dadce0;
  border-radius:8px;
  box-shadow:0 1px 2px #0000000A;
  transition:border-color .15s ease;
}
.rf-login__input:focus{
  outline:none;
  border-color:#B2774E;
  box-shadow:0 0 0 2px #B2774E22;
}

/* Primaire login knop */
.rf-login__btn{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  padding:11px 16px;
  border-radius:8px;
  font-family:inherit;
  font-size:.95rem;
  font-weight:600;
  border:none;
  cursor:pointer;
  transition:opacity .15s ease;
}
.rf-login__btn:hover:not(:disabled){ opacity:.88; }
.rf-login__btn:disabled{ opacity:.55; cursor:not-allowed; }

.rf-login__btn--primary{
  background:#F8AE21;
  color:#fff;
}

/* Statusberichten magic link */
.rf-login__magic-sent,
.rf-login__magic-error{
  font-size:.9rem;
  padding:10px 12px;
  border-radius:8px;
  margin-top:8px;
}
.rf-login__magic-sent{
  background:#f0faf0;
  color:#2d7a2d;
  border:1px solid #c3e6c3;
}
.rf-login__magic-error{
  background:#fff0f0;
  color:#c0392b;
  border:1px solid #f5c6cb;
}

/* Wachtwoord toggle — ziet eruit als .rf-login__magic-heading */
.rf-login__password-toggle-wrap{
  text-align:left;
  margin-top:20px;
}
.rf-login__password-toggle{
  background:none;
  border:none;
  font-family:inherit;
  font-size:.8rem;
  font-weight:600;
  color:#999;
  text-transform:uppercase;
  letter-spacing:.05em;
  cursor:pointer;
  padding:0;
  text-decoration:none;
}
.rf-login__password-toggle:hover{ color:#666; }

/* Wachtwoord form */
.rf-login__form--password{
  margin-top:16px;
  display:flex;
  flex-direction:column;
  gap:12px;
}

/* Links onderaan wachtwoord form */
.rf-login__links{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  font-size:.85rem;
}
.rf-login__link{ color:#B2774E; text-decoration:underline; }
.rf-login__link:hover{ color:#7A4E3A; }
.rf-login__sep{ color:#ccc; }

/* ---- Logout pagina ---- */
.rf-logout{
  max-width:380px;
  margin:0 auto;
  padding:32px 0 40px;
  text-align:center;
}

.rf-logout__icon{
  font-size:2.5rem;
  margin-bottom:12px;
  line-height:1;
}

.rf-logout__title{
  font-family:"Darwin Pro", sans-serif;
  font-size:22px;
  font-weight:600;
  color:#7A4E3A;
  margin:0 0 8px;
}
.rf-logout__title::after{ display:none; }

.rf-logout__message{
  color:#888;
  font-size:.95rem;
  margin:0 0 28px;
}

.rf-logout__actions{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.rf-logout__btn{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  padding:11px 16px;
  border-radius:8px;
  font-family:inherit;
  font-size:.95rem;
  font-weight:600;
  text-decoration:none;
  border:1px solid transparent;
  cursor:pointer;
  transition:opacity .15s ease;
}
.rf-logout__btn:hover{ opacity:.88; }

.rf-logout__btn--primary{
  background:#F8AE21;
  color:#fff;
}
.rf-logout__btn--secondary{
  background:#fff;
  border-color:#dadce0;
  color:#555;
}

/* Responsive */
@media (max-width:700px){
  .rf-login,
  .rf-logout{ padding-left:4px; padding-right:4px; }
}

/* =========================================================
   17) CLAIM FLOW / AANMELDEN / LEGAL / FOOTER
   ========================================================= */

/* Claim container (zelfde basisopmaak als rf-login) */
.rf-claim{
  max-width:520px;
  margin:0 auto;
  padding:0 16px 48px;
}
.rf-claim__title{
  font-size:1.5rem;
  font-weight:700;
  margin:32px 0 6px;
  color:#2C2C2C;
}
.rf-claim__title::after{ display:none; }
.rf-claim__intro{
  color:#555;
  margin:0 0 20px;
  font-size:.95rem;
}

/* ---- Zoekbalk ---- */
.rf-claim__search-block{
  margin-bottom:16px;
}
.rf-claim__search-label{
  display:block;
  font-size:.875rem;
  font-weight:600;
  color:#444;
  margin-bottom:6px;
}
.rf-claim__search-input{
  display:block;
  width:100%;
  margin-bottom:10px;
}
.rf-claim__search-btn{
  width:100%;
}

/* ---- Resultaatkaarten ---- */
.rf-claim__results{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.rf-claim__card{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  background:#fff;
  border:1px solid #e4ddd6;
  border-radius:8px;
  padding:12px 14px;
}
.rf-claim__card-info{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}
.rf-claim__card-info strong{
  font-size:.95rem;
  color:#2C2C2C;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.rf-claim__card-info span{
  font-size:.82rem;
  color:#777;
}
.rf-claim__card-actions{
  display:flex;
  gap:8px;
  flex-shrink:0;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.rf-claim__card-btn{
  border:none;
  border-radius:6px;
  padding:7px 12px;
  font-size:.82rem;
  font-weight:600;
  cursor:pointer;
  white-space:nowrap;
  transition:opacity .15s;
}
.rf-claim__card-btn:hover{ opacity:.85; }
.rf-claim__card-btn--primary{
  background:#F8AE21;
  color:#2C2C2C;
}
.rf-claim__card-btn--secondary{
  background:#f0ebe5;
  color:#2C2C2C;
}
.rf-claim__tag{
  font-size:.78rem;
  font-weight:600;
  background:#f0ebe5;
  color:#888;
  border-radius:6px;
  padding:5px 10px;
}
.rf-claim__no-results{
  color:#888;
  font-size:.9rem;
  text-align:center;
  margin:8px 0 0;
}

/* ---- Geselecteerde winkel + terms ---- */
.rf-claim__mode-label{
  color:#B2774E;
  font-size:.88rem;
  font-weight:600;
  margin:4px 0 20px;
}
.rf-claim__terms-heading{
  font-size:1rem;
  font-weight:700;
  margin:0 0 12px;
  color:#2C2C2C;
}
.rf-claim__terms{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-bottom:20px;
}
.rf-claim__term-label{
  display:flex;
  align-items:flex-start;
  gap:8px;
  font-size:.88rem;
  color:#444;
  line-height:1.5;
  cursor:pointer;
}
.rf-claim__term-label a{
  color:#B2774E;
  text-decoration:underline;
}
.rf-claim__checkbox{
  margin-top:3px;
  flex-shrink:0;
  width:16px;
  height:16px;
  cursor:pointer;
  accent-color:#F8AE21;
}
.rf-claim__terms-error{
  color:#c0392b;
  font-size:.85rem;
  margin:0 0 12px;
}
.rf-claim__back-btn{
  background:none;
  border:none;
  color:#888;
  font-size:.85rem;
  cursor:pointer;
  margin-top:10px;
  display:block;
  padding:4px 0;
}
.rf-claim__back-btn:hover{ color:#444; }

/* ---- Succes ---- */
.rf-claim--success{
  text-align:center;
  padding-top:32px;
}
.rf-claim__success-msg{
  font-size:1rem;
  color:#2C2C2C;
  margin:12px 0 8px;
}
.rf-claim__join-warning{
  font-size:.85rem;
  color:#777;
  margin:0 0 20px;
  background:#f5f2ee;
  padding:10px 14px;
  border-radius:6px;
}
.rf-claim__dashboard-btn{
  margin-top:20px;
  display:inline-block;
}

/* ---- Aanmelden form ---- */
.rf-claim__submit-form .rf-login__field{
  margin-bottom:16px;
}

/* ---- Juridische pagina's ---- */
.rf-legal{
  max-width:640px;
  margin:0 auto;
  padding:24px 16px 48px;
}
.rf-legal__title{
  font-size:1.5rem;
  font-weight:700;
  margin:24px 0 4px;
  color:#2C2C2C;
}
.rf-legal__title::after{ display:none; }
.rf-legal__version{
  font-size:.82rem;
  color:#999;
  margin:0 0 24px;
}
.rf-legal__content p{
  color:#444;
  line-height:1.7;
  margin:0 0 16px;
}
.rf-legal__content a{
  color:#B2774E;
  text-decoration:underline;
}
.rf-legal__back{
  margin-top:32px;
}

/* ---- Empty state (alleen voor de hele-pagina versie: div.rf-empty) ---- */
div.rf-empty{
  text-align:center;
  padding:48px 16px 32px;
  max-width:480px;
  margin:0 auto;
}
.rf-empty__icon{
  font-size:2.5rem;
  margin-bottom:12px;
}
.rf-empty__title{
  font-size:1.25rem;
  font-weight:700;
  color:#2C2C2C;
  margin:0 0 8px;
}
.rf-empty__msg{
  font-size:.92rem;
  color:#666;
  margin:0 0 24px;
  line-height:1.55;
}
.rf-empty__actions{
  display:flex;
  flex-direction:column;
  gap:10px;
  align-items:center;
}
.rf-empty__btn{
  display:inline-block;
  min-width:200px;
  border-radius:8px;
  padding:12px 20px;
  font-size:.95rem;
  font-weight:600;
  text-align:center;
  text-decoration:none;
  cursor:pointer;
  transition:opacity .15s;
}
.rf-empty__btn:hover{ opacity:.88; }
.rf-empty__btn--primary{
  background:#F8AE21;
  color:#2C2C2C;
}
.rf-empty__btn--secondary{
  background:#f0ebe5;
  color:#2C2C2C;
}

/* ---- Site-brede footer ---- */
.rf-footer{
  text-align:center;
  padding:20px 16px 28px;
  font-size:.8rem;
  color:#aaa;
  border-top:1px solid #f0ebe5;
  margin-top:auto;
}
.rf-footer a{
  color:#aaa;
  text-decoration:none;
}
.rf-footer a:hover{ color:#777; text-decoration:underline; }
.rf-footer span{ margin:0 6px; }

/* Responsive claim */
@media (max-width:540px){
  .rf-claim__card{ flex-direction:column; align-items:flex-start; }
  .rf-claim__card-actions{ width:100%; }
  .rf-claim__card-btn{ flex:1; text-align:center; }
}

/* =========================================================
   18) FAQ
========================================================= */

.rf-faq{
  margin:28px 0 0;
}

.rf-faq__intro{
  margin:0 0 28px;
  color:#666;
  line-height:1.6;
}

/* Categorie-kop: h2 element — erft Darwin Pro 21px #B2774E van globale h2 */
h2.rf-faq__cat{
  margin:32px 0 10px;
}
h2.rf-faq__cat::after{
  display:none; /* verwijder standaard h2-divider */
}
h2.rf-faq__cat:first-of-type{
  margin-top:0;
}

/* Template-balk (titel + terug-knop in templates/faq.html) */
.rf-faq__topbar{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  margin-bottom:20px;
}
.rf-faq__topbar h2{
  margin:0;
}

/* Accordeon-item */
.rf-faq__item{
  border:1px solid #0000001F;
  border-radius:10px 10px 0 0;
  background:#fff;
  margin-bottom:6px;
  overflow:hidden;
}
.rf-faq__item:last-child{
  margin-bottom:0;
}

/* Vraag-knop — h4-stijl (Darwin Pro 18px #6B4333) */
.rf-faq__q{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 14px;
  background:#fff;
  border:0;
  cursor:pointer;
  text-align:left;
  font-family:"Darwin Pro", sans-serif;
  font-size:18px;
  font-weight:600;
  color:#6B4333;
  line-height:1.4;
  transition:background .12s;
}
.rf-faq__q:hover,
.rf-faq__q[aria-expanded="true"]{
  background:#F2F1EF;
}

/* Chevron-icoon */
.rf-faq__chevron{
  flex:0 0 auto;
  width:20px;
  height:20px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid #0000001F;
  border-radius:4px;
  font-size:.75rem;
  font-weight:700;
  color:#888;
  transition:transform .2s;
}
.rf-faq__q[aria-expanded="true"] .rf-faq__chevron{
  transform:rotate(180deg);
}

/* Antwoord — reguliere body-tekst (erft Gardenia 16px #404040 van body) */
.rf-faq__a{
  display:none;
  padding:10px 14px 16px;
  line-height:1.65;
  background:#F2F1EF;
  border-top:1px solid #0000001F;
}
.rf-faq__a.is-open{
  display:block;
}
.rf-faq__a p{ margin:0 0 .7em; }
.rf-faq__a p:last-child{ margin-bottom:0; }
.rf-faq__a a{ color:#2D6CDF; }

/* Contact-block */
.rf-faq__contact{
  margin-top:40px;
  padding:18px 20px;
  border:1px solid #0000001F;
  border-radius:10px 10px 0 0;
  background:#fafafa;
}
.rf-faq__contact-title{
  font-size:1rem;
  font-weight:700;
  margin:0 0 6px;
  color:#1A1A1A;
}
.rf-faq__contact-text{
  margin:0 0 14px;
  color:#666;
  line-height:1.5;
}

/* Knop — zelfde stijl als .rf-map-btn op refinds.eu */
.rf-faq__contact-link{
  appearance:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:5px 10px;
  font-size:.85rem;
  line-height:1.1;
  font-weight:400;
  border-radius:4px;
  background:#F8AE21;
  border:1px solid #F8AE21;
  color:#fff;
  text-decoration:none;
  cursor:pointer;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
  transition:background .15s ease, border-color .15s ease, color .15s ease;
}
.rf-faq__contact-link:hover,
.rf-faq__contact-link:focus{
  background:#FBC11D;
  border-color:#FBC11D;
  color:#fff;
  outline:none;
}