/* bb-widget.css — stijlen voor de gedeelde boek-widget (bb-widget.js) op de
   HOME-boekkaart. 1-op-1 overgenomen uit site/verblijven/index.html (16 jul
   2026); de .bb-kaart-regels zijn her-scoped naar .bb-kaart. Alleen op home
   geladen — verblijven behoudt z'n eigen inline kopie (identieke waarden). */
  .bk-cal-frame { position: relative; overflow: hidden; }
  .bk-cal-nav { display: flex; justify-content: space-between; align-items: center; margin-bottom:var(--sp-3); }
  .bk-cal-nav-btn { width: 32px; height: 32px; border: 1px solid var(--line,#E6D9CF); background: var(--white,#fff); color: var(--navy); cursor: pointer; font-size: 16px; line-height: 1; display: flex; align-items: center; justify-content: center; padding: 0; border-radius: 50%; transition: background .15s, border-color .15s; }
  .bk-cal-nav-btn:hover:not(:disabled) { background: var(--navy); color: var(--white,#fff); border-color: var(--navy); }
  .bk-cal-nav-btn:disabled { opacity: .3; cursor: not-allowed; }
  .bk-cal-wrap { display: grid; grid-template-columns: 1fr; }
  .bk-cal-month { background: var(--white,#fff); border-radius: 12px; }
  .bk-cal-month-name { font-family: 'Inter', system-ui, sans-serif; font-weight: 600; font-size: 14px; color: var(--navy); text-align: center; margin-bottom:var(--sp-3); letter-spacing: .02em; }
  .bk-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap:var(--sp-1); }
  .bk-cal-dow { font-family: 'Inter', system-ui, sans-serif; font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); text-align: center; padding:var(--sp-2) 0 var(--sp-1); }
  .bk-cal-empty { height: 32px; }
  .bk-cal-day { height: 32px; display: flex; align-items: center; justify-content: center; font-family: 'Inter', system-ui, sans-serif; font-weight: 500; font-size: 13px; color: var(--navy); cursor: pointer; border: none; border-radius: 8px; transition: background .15s, color .15s; }
  .bk-cal-day:hover:not(.is-past):not(.is-active) { background: var(--beige,#F5EEEA); }
  .bk-cal-day.is-past { color: var(--line,#E6D9CF); cursor: not-allowed; }
  .bk-cal-day.is-today { font-weight: 700; }
  .bk-cal-day.is-active { background: var(--navy); color: var(--white,#fff); }
  .bk-cal-day.is-in-range { background: rgba(7,83,115,.10); color: var(--navy); border-radius: 0; box-shadow: -4px 0 0 rgba(7,83,115,.10), 4px 0 0 rgba(7,83,115,.10); }
  .bk-cal-day.is-in-range:hover { background: rgba(7,83,115,.16); }
  .bk-cal-day.is-range-start { border-radius: 8px 0 0 8px; box-shadow: 4px 0 0 rgba(7,83,115,.10); }
  .bk-cal-day.is-range-end { border-radius: 0 8px 8px 0; box-shadow: -4px 0 0 rgba(7,83,115,.10); }
  /* In de popover is de witte panel al de kaart — geen dubbele rand. */
  .iselcal-panel .bk-cal-frame { padding: 2px; }
  /* Footer: periode-samenvatting + bevestig-knop (zelfde knop als boekflow). */
  .bk-cal-foot { margin-top:var(--sp-2); }
  .bk-cal-foot-sum { text-align: center; font: 600 13px 'Inter', system-ui, sans-serif; color: var(--navy); margin-top:var(--sp-3); }
  .bk-range-klaar { margin-top:var(--sp-3); width: 100%; padding:var(--sp-3) var(--sp-gutter); border: none; border-radius: 100px; background: #577C8E; color: var(--white,#fff); font: 700 15px 'Inter', system-ui, sans-serif; cursor: pointer; transition: opacity .15s, transform .12s; }
  .bk-range-klaar:hover:not(:disabled) { opacity: .92; }
  .bk-range-klaar:active:not(:disabled) { transform: scale(.99); }
  .bk-range-klaar:disabled { opacity: .4; cursor: not-allowed; }
  .bk-presets { display: flex; gap:var(--sp-2); margin-bottom:var(--sp-3); }
  .bk-preset { flex: 1; padding:var(--sp-2) var(--sp-2); border: 1px solid var(--line,#E6D9CF); background: #fff; color: var(--navy); border-radius: 9px; font: 600 12px 'Inter', system-ui, sans-serif; cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
  .bk-preset.is-on { background: var(--navy); color: #fff; border-color: var(--navy); }
  .bk-cal-day.is-dim { color: var(--line,#E6D9CF); cursor: default; }
  .ot-stepper { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); }
  .ot-step-btn { width:30px; height:30px; flex:0 0 auto; border-radius:50%; border:none; background:var(--navy,#2F4157); color:#fff;
    font-size:17px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center;
    transition:transform .14s cubic-bezier(.34,1.45,.64,1), opacity .2s; -webkit-tap-highlight-color:transparent; }
  .ot-step-btn:active { transform:scale(.86); }
  .ot-step-btn:disabled { opacity:.32; cursor:not-allowed; }
  .ot-step-val { flex:1; text-align:center; font:600 15px 'Inter',system-ui,sans-serif; color:var(--navy,#2F4157); }
    /* home-look (11 jul): actieve keuze = witte pill met schaduw, navy bold */
    .bb-kaart .one-seg button{ color:rgba(27,42,59,.55); font-weight:600; }
    .bb-kaart .one-seg button.is-on{ background:#fff; color:#2F4157; font-weight:700; box-shadow:0 2px 8px -3px rgba(20,34,51,.3); }
    .bb-kaart .ot-bb{ display:block; margin:0; position:relative; }
    /* widgets in home-look: velden gestapeld, iconen/chevron weg; de losse
       stepper-velden leven in de gasten-popover (JS verhuist ze daarheen) */
    .bb-kaart .one-fields{ display:grid; grid-template-columns:1fr; gap:8px; margin:0; }
    .bb-kaart .one-field{ border:1.5px solid #E6D9CF; border-radius:12px; }
    /* kalender-icoon zichtbaar en NAAR RECHTS (12 jul; was display:none →
       lege ruimte zonder klik-affordance) */
    .bb-kaart .one-field--range > span{ font:700 10px 'Inter',system-ui,sans-serif; letter-spacing:.12em; text-transform:uppercase; color:rgba(27,42,59,.5); }
    .bb-kaart .one-field--range .iselcal-trigger{ display:flex; align-items:center; width:100%; font:600 14px 'Inter',system-ui,sans-serif !important; color:#2F4157; }
    .bb-kaart .one-field--range .iselcal-trigger svg{ display:block; order:2; margin-left:auto; color:#577C8E; }
    /* home-datumveld toont alleen een kalender-icoon; verberg de extra chevron */
    .bb-kaart .one-field--range .iselcal-trigger .iselcal-caret{ display:none !important; }
    .bb-kaart .one-fields > .one-field:not(.one-field--range){ display:none; }
    .bb-kaart .bk-gasten-wrap{ display:block; position:relative; }
    /* chevron rechts op de gasten-knop (12 jul) */
    .bb-kaart .bk-gasten{ display:block; width:100%; text-align:left; background:#fff; border:1.5px solid #E6D9CF; border-radius:12px; padding:9px 34px 9px 12px; cursor:pointer; position:relative; }
    .bb-kaart .bk-gasten::after{ content:''; position:absolute; right:13px; top:50%; width:11px; height:11px; margin-top:-4px; border-right:2px solid #577C8E; border-bottom:2px solid #577C8E; transform:rotate(45deg); }
    .bb-kaart .bk-gasten > span{ display:block; font:700 10px 'Inter',system-ui,sans-serif; letter-spacing:.12em; text-transform:uppercase; color:rgba(27,42,59,.5); margin-bottom:2px; }
    .bb-kaart .bk-gasten > b{ font:600 14px 'Inter',system-ui,sans-serif; color:#2F4157; }
    .bb-kaart .bk-gasten-pop{ display:none; }
    .bb-kaart .ot-bb.bk-gasten-open .bk-gasten-pop{ display:flex; flex-direction:column; gap:8px; position:absolute; left:0; right:0; top:calc(100% + 8px); background:#fff; border-radius:14px; box-shadow:0 18px 44px -18px rgba(20,34,51,.5); padding:12px; z-index:40; transform-origin:top; }
    /* kans C: verschijnt vanaf het gasten-veld i.p.v. teleporteren */
    @media (prefers-reduced-motion:no-preference){ .bb-kaart .ot-bb.bk-gasten-open .bk-gasten-pop{ animation:vvGastenPop .14s cubic-bezier(.22,1,.36,1); } @keyframes vvGastenPop{ from{opacity:0;transform:scale(.97) translateY(-4px)} to{opacity:1;transform:none} } }
    /* de balk-regel "flex:0 0 132px" (breedte op de rij) zou in de kolom-popover
       de hóógte worden — expliciet resetten met zwaardere selector */
    .bb-kaart .bk-gasten-pop .one-field{ display:flex; flex:0 0 auto; min-height:0; flex-direction:row; align-items:center; justify-content:space-between; gap:10px; padding:9px 12px; }
    .bb-kaart .bk-gasten-pop .one-field > span{ margin:0; }
    .bb-kaart .bk-gasten-pop .one-field > div{ flex:0 0 auto; }
    .bb-kaart .bk-gasten-pop .ot-step-val{ flex:0 0 32px; }
    .bb-kaart .one-btn{ width:100%; margin:12px 0 0; padding:13px 0; }
    /* de hint is een <p> die na verhuizing binnen .vv-hero valt — win expliciet
       van de hero-tekstregels (wit/16px) met een zwaardere selector */
    .bb-kaart .one-hint{ margin:10px 0 0; font:400 11.5px/1.5 'Inter',system-ui,sans-serif; color:rgba(27,42,59,.6); text-align:center; max-width:none; }

/* Popover-positie op de home-kaart: onder het datumveld, kaartbreed. */
.bb-kaart .one-field--range{ position:relative; }
.bb-kaart .one-field--range .iselcal-root{ position:static; }
.bb-kaart .iselcal-panel{ position:absolute; left:0; right:0; top:calc(100% + 8px); z-index:60; background:#fff; border-radius:14px; box-shadow:0 18px 44px -18px rgba(20,34,51,.5); padding:12px; }
.bb-kaart .one-field{ background:#fff; padding:9px 12px; }
.bb-kaart form[hidden]{ display:none; }

/* Open popover (kalender/gasten) moet óver de volgende sectie heen kunnen
   hangen: til de kaart in de stacking-volgorde zodra er iets open staat.
   (createBkRange zet .bb-open op het form; de gasten-popover .bk-gasten-open.) */
.v3-boekkaart{ position:relative; }
.v3-boekkaart:has(form.bb-open), .v3-boekkaart:has(form.bk-gasten-open){ z-index:60; }
/* De concierge-desk (z:4) schuift bewust over de hero (-26px). Zolang een
   popover open staat zakt die tijdelijk onder de hero-in (z:3), zodat de
   kalender/gasten-popover er volledig overheen kan hangen. */
body:has(.v3-boekkaart form.bb-open) .v3-concierge,
body:has(.v3-boekkaart form.bk-gasten-open) .v3-concierge{ z-index:2; }
/* De hero clipt (overflow:hidden, voor de ronde onderhoeken) — geef 'm vrij
   zolang een popover open staat, anders wordt de kalender afgeknipt. */
.v3-hero:has(.v3-boekkaart form.bb-open),
.v3-hero:has(.v3-boekkaart form.bk-gasten-open){ overflow:visible; }