/* ==============================================================================
   VTM-Dive — Rox Appointment Booking: eigen uiterlijk (v1.1.14)
   Richting: navy zijbalk met aqua vinkjes + lichte inhoud + aqua knoppen, Titan One-titels,
   Outfit voor de tekst, afrondingen zoals de rest van de site (25 px buitenkant).
   Alleen CSS: de plugin zelf wordt niet aangepast. Alles staat onder .rox-appointment-booking-frontend.
   !important wordt hier bewust gebruikt: de plugin gebruikt selectors met hoge specificiteit.
   Niet aangeraakt / nog niet gezien: stap 7 ("Complete") is alleen op klassenamen gebaseerd.
   ============================================================================== */

.rox-appointment-booking-frontend{
  --rox-font-family:"Outfit",system-ui,-apple-system,"Segoe UI",sans-serif;
  --rox-accent:#0A2850;            /* geselecteerd / actief = navy */
  --rox-accent-hover:#123A72;
  --rox-accent-light:#20C4C9;
  --rox-accent-pale:#9EE6E8;
  --rox-accent-soft:#D3F3F4;
  --rox-accent-wash:#E6F8F8;
  --rox-accent-tint:#F3FBFB;
  --rox-accent-a10:#20C4C91f;
  --rox-accent-a04:#20C4C90d;
  --rox-available:#20C4C9;         /* beschikbaarheid = aqua */
  --rox-available-light:#7FE3E6;
  --rox-available-pale:#B8F0F1;
  --rox-available-a10:#20C4C91f;
  --vtm-navy:#0A2850; --vtm-aqua:#20C4C9; --vtm-ink:#14202B; --vtm-line:#DDE5EA;
}

/* ---- vlak, hoeken, breedte ------------------------------------------------ */
.rox-appointment-booking-frontend .service-layout-outer{background:transparent!important;padding:0!important;border-radius:0!important;width:100%!important;}
.rox-appointment-booking-frontend .service-layout{border-radius:25px!important;overflow:hidden;background:#fff;
  border:1px solid rgba(10,40,80,.08);box-shadow:0 30px 60px -28px rgba(4,20,45,.55)!important;}
@media (min-width:768px){
  .rox-appointment-booking-frontend .service-layout:not(.complete-step){width:100%!important;max-width:none!important;}
}
/* de oranje/witte BeTheme-accordeon: geen tweede wit vlak rond de widget */
.mfn-acc .answer:has(.rox-appointment-booking-frontend-root){background:transparent!important;padding:14px 0 0!important;border:0!important;box-shadow:none!important;}

/* ---- zijbalk met stappen -------------------------------------------------- */
.rox-appointment-booking-frontend .service-sidebar{background:linear-gradient(180deg,#0A2850 0%,#08193A 100%)!important;border-radius:20px;color:#fff;}
.rox-appointment-booking-frontend .service-sidebar .step-text{color:rgba(255,255,255,.7)!important;font-weight:500;}
.rox-appointment-booking-frontend .service-sidebar .step-text.active{color:#fff!important;font-weight:700;}
.rox-appointment-booking-frontend .step-indicator .circle{background:rgba(255,255,255,.08)!important;border:1.5px solid rgba(255,255,255,.38)!important;color:#fff!important;transition:box-shadow .2s ease,background-color .2s ease;}
.rox-appointment-booking-frontend .step-indicator .circle.completed{background:var(--vtm-aqua)!important;border-color:var(--vtm-aqua)!important;}
.rox-appointment-booking-frontend .step-indicator .circle.completed svg,
.rox-appointment-booking-frontend .step-indicator .circle.completed svg *{color:var(--vtm-navy)!important;fill:var(--vtm-navy)!important;stroke:var(--vtm-navy)!important;}
.rox-appointment-booking-frontend .step-indicator .circle.active{border-color:var(--vtm-aqua)!important;color:var(--vtm-aqua)!important;box-shadow:0 0 0 4px rgba(32,196,201,.24);}
.rox-appointment-booking-frontend .vertical-line{background:rgba(255,255,255,.22)!important;}
.rox-appointment-booking-frontend .service-sidebar-help-box{background:rgba(255,255,255,.08)!important;color:#fff!important;border-radius:14px!important;}
.rox-appointment-booking-frontend .service-sidebar-help-box *{color:inherit!important;}
.rox-appointment-booking-frontend .service-sidebar-help-box .help-btn{background:rgba(32,196,201,.22)!important;color:#7FE3E6!important;border-radius:999px!important;}

/* ---- titels ---------------------------------------------------------------- */
.rox-appointment-booking-frontend .main-page-header-title,
.rox-appointment-booking-frontend .summary-sidebar-title,
.rox-appointment-booking-frontend .confirmation-header{font-family:"Titan One",Georgia,serif!important;font-weight:400!important;color:var(--vtm-navy)!important;letter-spacing:.005em;}

/* de plugin toont lijsten in een vak van max. 310 px met een onopvallende scrollbalk (bij Specialties zaten 6 van de 14 diensten verborgen):
   laat de lijsten meegroeien met hun inhoud */
.rox-appointment-booking-frontend .services-grid,
.rox-appointment-booking-frontend .category-cards,
.rox-appointment-booking-frontend .employees-grid{max-height:none!important;overflow:visible!important;}

/* dienstkaarten: twee bredere kolommen, de naam mag doorlopen op een tweede regel (geen "…" meer) */
.rox-appointment-booking-frontend .services-grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))!important;}
.rox-appointment-booking-frontend .service-card{display:flex!important;align-items:center;justify-content:space-between;gap:14px;}
.rox-appointment-booking-frontend .service-card .service-info{flex:1 1 auto;min-width:0;width:auto!important;display:flex;align-items:center;gap:12px;}
.rox-appointment-booking-frontend .service-card .service-title{line-height:1.25;}
.rox-appointment-booking-frontend .service-card .service-price{flex:0 0 auto;white-space:nowrap;}
/* nergens in een kaart tekst met "…" afkappen: namen en titels mogen op meerdere regels */
.rox-appointment-booking-frontend .base-card :is([class*="title"],[class*="name"]){white-space:normal!important;text-overflow:clip!important;overflow:visible!important;overflow-wrap:anywhere;}

/* stap 1: tekst en illustratie in de navy zijbalk */
.rox-appointment-booking-frontend .service-sidebar .service-selection-title{color:#fff!important;font-family:"Titan One",Georgia,serif!important;font-weight:400!important;}
.rox-appointment-booking-frontend .service-sidebar .service-selection-sub-title{color:rgba(255,255,255,.75)!important;}
.rox-appointment-booking-frontend .service-sidebar .illustration svg,
.rox-appointment-booking-frontend .service-sidebar .illustration img{filter:hue-rotate(-50deg) saturate(1.15);}   /* blauwe pin -> aqua */

/* categorieën, diensten en medewerkers: het raster vult de beschikbare breedte (plugin: vaste kolommen van 341 px) */
.rox-appointment-booking-frontend .category-cards,
.rox-appointment-booking-frontend .employees-grid{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))!important;}
.rox-appointment-booking-frontend .service-layout .main .category-card,
.rox-appointment-booking-frontend .service-card,
.rox-appointment-booking-frontend .employee-card{width:auto!important;}

/* ---- kaarten (categorie, dienst, medewerker) ------------------------------- */
.rox-appointment-booking-frontend .base-card{border-radius:18px!important;border:1.5px solid var(--vtm-line)!important;background:#fff;
  transition:transform .18s cubic-bezier(.2,.8,.2,1),box-shadow .18s ease,border-color .18s ease,background-color .18s ease;}
.rox-appointment-booking-frontend .base-card:hover{transform:translateY(-2px);box-shadow:0 14px 28px -16px rgba(10,40,80,.45);border-color:var(--vtm-aqua)!important;}
.rox-appointment-booking-frontend .base-card.selected,
.rox-appointment-booking-frontend .base-card.active{border-color:var(--vtm-aqua)!important;background:#F0FBFB!important;box-shadow:0 0 0 3px rgba(32,196,201,.28)!important;}
.rox-appointment-booking-frontend .category-card .badge{background:#E6F8F8!important;color:var(--vtm-navy)!important;border-radius:999px!important;font-weight:600;}
.rox-appointment-booking-frontend .service-card [class*="price"],
.rox-appointment-booking-frontend .service-card .price{color:#0A5C82!important;font-weight:700;}

/* ---- kalender: beschikbaar = aqua, niet beschikbaar = rustig grijs, gekozen = navy -------- */
.rox-appointment-booking-frontend .calendar-day{border-radius:12px!important;background:#F1F4F7!important;color:#8593A0!important;border:1px solid transparent!important;}
.rox-appointment-booking-frontend .calendar-day.available-slot{background:#E6F8F8!important;color:var(--vtm-navy)!important;font-weight:600;border-color:#BFEFF0!important;}
.rox-appointment-booking-frontend .calendar-day.available-slot .availability-indicator{background:var(--vtm-aqua)!important;}
.rox-appointment-booking-frontend .calendar-day.no-availability .availability-indicator-container{display:none!important;}   /* geen rode "vol"-balk */
.rox-appointment-booking-frontend .calendar-day.no-availability,
.rox-appointment-booking-frontend .calendar-day.disabled{background:#F1F4F7!important;color:#A2ADB8!important;}
.rox-appointment-booking-frontend .calendar-day:hover:not(.empty){font-size:inherit!important;font-weight:inherit!important;}   /* geen springende cijfers bij hover */
.rox-appointment-booking-frontend .calendar-day.available-slot:hover:not(.selected){border-color:var(--vtm-aqua)!important;transform:translateY(-1px);}
.rox-appointment-booking-frontend .calendar-day.selected{background:var(--vtm-navy)!important;color:#fff!important;border-color:var(--vtm-navy)!important;box-shadow:0 8px 18px -8px rgba(10,40,80,.6);}
.rox-appointment-booking-frontend .calendar-day .day-tooltip{border-radius:8px!important;background:var(--vtm-navy)!important;}
.rox-appointment-booking-frontend .calendar-day .day-tooltip:after{border-top-color:var(--vtm-navy)!important;}

/* de plugin geeft de kalender vaste kolommen van 44 px: laat ze de beschikbare breedte vullen */
.rox-appointment-booking-frontend .calendar-grid,
.rox-appointment-booking-frontend .calendar-header{width:100%!important;}
.rox-appointment-booking-frontend .calendar-grid{grid-template-columns:repeat(7,minmax(0,1fr))!important;}
.rox-appointment-booking-frontend .calendar-day{width:auto!important;}

/* ---- tijdsloten als pillen (geen afbreken) ---------------------------------- */
.rox-appointment-booking-frontend .time-slot{border-radius:999px!important;background:#F0F4F8!important;color:var(--vtm-navy)!important;font-weight:600;white-space:nowrap;
  transition:background-color .15s ease,transform .15s ease;}
.rox-appointment-booking-frontend .time-slot:not(.disabled):hover{background:#D3F3F4!important;transform:translateY(-1px);}
.rox-appointment-booking-frontend .time-slot.selected{background:var(--vtm-aqua)!important;color:var(--vtm-navy)!important;}
.rox-appointment-booking-frontend .time-slot.disabled{opacity:.45;}

/* ---- knoppen ---------------------------------------------------------------- */
.rox-appointment-booking-frontend .next-button,
.rox-appointment-booking-frontend .confirmation-footer-buttons button{background:var(--vtm-aqua)!important;color:var(--vtm-navy)!important;border:0!important;border-radius:999px!important;font-weight:700;
  box-shadow:0 10px 22px -10px rgba(32,196,201,.85);transition:background-color .15s ease,transform .15s ease;}
.rox-appointment-booking-frontend .next-button{padding-left:22px!important;padding-right:22px!important;}
.rox-appointment-booking-frontend .next-button:hover:not(:disabled){background:#7FE3E6!important;transform:translateY(-1px);}
/* "New Appointment" in de samenvatting is een secundaire actie: omlijnd, niet gevuld */
.rox-appointment-booking-frontend .summary-confirm-button{background:transparent!important;color:#0A5C82!important;border:1.5px dashed #9EE6E8!important;border-radius:14px!important;font-weight:600;box-shadow:none!important;}
.rox-appointment-booking-frontend .summary-confirm-button:hover:not(:disabled){background:#E6F8F8!important;border-color:var(--vtm-aqua)!important;}
.rox-appointment-booking-frontend .next-button:disabled{background:#DDE5EA!important;color:#8593A0!important;box-shadow:none;}
.rox-appointment-booking-frontend .next-button *,.rox-appointment-booking-frontend .next-button svg{color:inherit!important;fill:currentColor;}
.rox-appointment-booking-frontend .back-button{color:var(--vtm-navy)!important;}

/* ---- samenvatting en betaling ------------------------------------------------ */
.rox-appointment-booking-frontend .summary-sidebar{background:#F5F8FB!important;}
.rox-appointment-booking-frontend .summary-sidebar a,
.rox-appointment-booking-frontend .summary-sidebar-item .summary-sidebar-label-date{color:#0A5C82!important;}
.rox-appointment-booking-frontend .total-price-block{background:#E6F8F8!important;border-radius:14px!important;color:var(--vtm-navy)!important;}
.rox-appointment-booking-frontend .payment-option{border-radius:16px!important;border:1.5px solid var(--vtm-line)!important;background:#fff;}
.rox-appointment-booking-frontend .payment-option.selected{border-color:var(--vtm-aqua)!important;box-shadow:0 0 0 3px rgba(32,196,201,.24)!important;}
.rox-appointment-booking-frontend .secure-note,.rox-appointment-booking-frontend .pay-later-note{border-radius:14px!important;}
.rox-appointment-booking-frontend .coupon-section{border-radius:14px!important;}
.rox-appointment-booking-frontend .ant-switch-checked{background:var(--vtm-aqua)!important;}
.rox-appointment-booking-frontend .previous-bookings .summary-details-separator,
.rox-appointment-booking-frontend .add-new-appointment,
.rox-appointment-booking-frontend [class*="new-appointment"]{border-color:#9EE6E8!important;color:#0A5C82!important;border-radius:12px!important;}

/* ---- formulierveldjes ------------------------------------------------------------ */
.rox-appointment-booking-frontend input[type=text],
.rox-appointment-booking-frontend input[type=email],
.rox-appointment-booking-frontend input[type=tel],
.rox-appointment-booking-frontend input[type=password],
.rox-appointment-booking-frontend textarea{border-radius:12px!important;border:1.5px solid var(--vtm-line)!important;background:#F7FAFC!important;color:var(--vtm-ink)!important;}
.rox-appointment-booking-frontend input:focus,
.rox-appointment-booking-frontend textarea:focus{border-color:var(--vtm-aqua)!important;background:#fff!important;box-shadow:0 0 0 3px rgba(32,196,201,.25)!important;outline:none!important;}
.rox-appointment-booking-frontend .info-tab.active,
.rox-appointment-booking-frontend [class*="tab"].active{color:#0A5C82!important;border-color:var(--vtm-aqua)!important;}

@media (prefers-reduced-motion:reduce){
  .rox-appointment-booking-frontend *{transition:none!important;}
}