/********************************************************
 * SMK Parkeren – Definitieve frontend CSS
 * Webba v6 + Elementor + mobiel sticky
 ********************************************************/

/* ========== 0) Globaal basisblok (sitebreed) ========== */

html {
  overflow-x: hidden;
}

body {
  margin: 0;
  padding: 0;
  min-height: 100svh;
}

html,
body {
  -webkit-overflow-scrolling: touch;
}

/* ========== 1) Globaal: Raleway en ronde knoppen (sitebreed) ========== */

body,
button,
input,
select,
textarea,
.elementor,
.elementor * {
  font-family: 'Raleway', sans-serif !important;
}

button,
input[type="submit"],
input[type="button"],
.elementor button,
.elementor .elementor-button,
.wbk-button,
.wbk-btn,
.wbk-next,
.wbk-button-confirm {
  border-radius: 30px !important;
  -webkit-border-radius: 30px !important;
  -moz-border-radius: 30px !important;
  line-height: 1.3 !important;
  font-weight: 500 !important;
}

/* ----------------------------------------------------- */

/* Vanaf hier alles gescope naar de boekingspagina       */

/* (body class: .page-id-3199)                           */

/* ----------------------------------------------------- */

/* ========== 2) Variabelen voor kalenderkleuren (alleen pagina 3199) ========== */

.page-id-3199 {
  --wbk-cal-selected-bg: #0073aa;
  --wbk-cal-selected-border: #005f8d;
  --wbk-cal-selected-text: #ffffff;
  --wbk-cal-booked-bg: #b71c1c;
  --wbk-cal-booked-text: #ffffff;
  --wbk-cal-hover-bg: #2e7d32;
  --wbk-cal-available-text: #111111;
}

/* ========== 3) Webba bevestiging – prijzen/totalen verbergen ========== */

.page-id-3199 .wb-confirmation .wb-booking-summary,
.page-id-3199 .wb-confirmation .wb-cart,
.page-id-3199 .wb-confirmation .wb_total_price,
.page-id-3199 .wb-confirmation .wb-order-total,
.page-id-3199 .wb-confirmation .wb-price,
.page-id-3199 .wb-confirmation .wb-item-price,
.page-id-3199 .wb-confirmation [class*="price"],
.page-id-3199 .wb-confirmation [class*="total"],
.page-id-3199 .wb-confirmation [class*="cost"],
.page-id-3199 .wb-confirmation .wb-appointment-info-price {
  display: none !important;
}

.page-id-3199 .wb-confirmation .wb-box:empty {
  display: none !important;
}

.page-id-3199 .wb-confirmation .wb-wrapper {
  gap: 1rem;
}

/* ========== 4) Mobiel compacter + sticky actieknoppen ========== */

@media (max-width: 768px) {
  .page-id-3199 .wbk-col,
  .page-id-3199 .wbk-col-12,
  .page-id-3199 .wbk-booking-form,
  .page-id-3199 .wbk-step-container {
    padding: 6px !important;
    margin: 0 !important;
  }

  .page-id-3199 .wbk-service-item,
  .page-id-3199 .wbk-slot,
  .page-id-3199 .wbk-appointment {
    padding: 10px !important;
    margin-bottom: 8px !important;
    border-radius: 12px !important;
  }

  .page-id-3199 .wbk-button,
  .page-id-3199 .wbk-btn,
  .page-id-3199 .wbk-next,
  .page-id-3199 .wbk-button-confirm {
    padding: 10px 18px !important;
    font-size: 14px !important;
    border-radius: 20px !important;
    line-height: 1.2 !important;
    min-height: 40px !important;
  }

  .page-id-3199 .wbk-step-header h1,
  .page-id-3199 .wbk-step-header h2,
  .page-id-3199 .wbk-step-header h3 {
    font-size: 18px !important;
    margin-bottom: 4px !important;
  }

  .page-id-3199 .wbk-step-button-container,
  .page-id-3199 .wbk-actions,
  .page-id-3199 .wbk-step-footer,
  .page-id-3199 .wbk-footer {
    position: sticky !important;
    bottom: 0 !important;
    z-index: 100 !important;
    background: #fff !important;
    padding: 8px !important;
    margin: 0 !important;
    border-top: 1px solid rgba(0,0,0,.08) !important;
    box-shadow: 0 -8px 16px rgba(0,0,0,.06) !important;
    padding-bottom: calc(8px + env(safe-area-inset-bottom)) !important;
    /* iOS safe area */
  }

  .page-id-3199 .wbk-step-container,
  .page-id-3199 .wbk-booking-form {
    padding-bottom: 80px !important;
  }
}

/* ========== 5) Sticky-guards – voorkom blockers hogerop ========== */

.page-id-3199 .elementor-section,
.page-id-3199 .elementor-container,
.page-id-3199 .elementor-column,
.page-id-3199 .elementor-widget-wrap,
.page-id-3199 .wbk-step-container,
.page-id-3199 .wbk-booking-form {
  overflow: visible !important;
  transform: none !important;
  contain: initial !important;
}

/* ========== 6) Kalender (DayPicker) – duidelijke kleuren ========== */

/* Geselecteerd */

.page-id-3199 .wbk-calendar .rdp .rdp-day[aria-selected="true"],
.page-id-3199 .wbk-calendar .rdp button.rdp-day[aria-selected="true"],
.page-id-3199 .wbk-calendar .DayPicker-Day[aria-selected="true"],
.page-id-3199 .wbk-calendar .DayPicker-Day--selected,
.page-id-3199 .wbk-calendar .rdp-day_selected,
.page-id-3199 .wbk-calendar button[aria-pressed="true"] {
  background: var(--wbk-cal-selected-bg) !important;
  color: var(--wbk-cal-selected-text) !important;
  border: 2px solid var(--wbk-cal-selected-border) !important;
  border-radius: 8px !important;
  opacity: 1 !important;
  font-weight: 600 !important;
  background-clip: padding-box !important;
}

/* GERESERVEERD / niet beschikbaar */

.page-id-3199 .wbk-calendar .rdp .rdp-day[aria-disabled="true"],
.page-id-3199 .wbk-calendar .rdp button.rdp-day[aria-disabled="true"],
.page-id-3199 .wbk-calendar .DayPicker-Day[aria-disabled="true"],
.page-id-3199 .wbk-calendar .DayPicker-Day--disabled,
.page-id-3199 .wbk-calendar .rdp-day_disabled,
.page-id-3199 .wbk-calendar button[disabled] {
  position: relative;
  background: var(--wbk-cal-booked-bg) !important;
  color: var(--wbk-cal-booked-text) !important;
  opacity: 1 !important;
  text-decoration: none !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  cursor: not-allowed !important;
  background-clip: padding-box !important;
}

/* Patroon-overlay (diagonale strepen) voor extra onderscheid) */

.page-id-3199 .wbk-calendar .rdp .rdp-day[aria-disabled="true"]::after,
.page-id-3199 .wbk-calendar .rdp button.rdp-day[aria-disabled="true"]::after,
.page-id-3199 .wbk-calendar .DayPicker-Day[aria-disabled="true"]::after,
.page-id-3199 .wbk-calendar .DayPicker-Day--disabled::after,
.page-id-3199 .wbk-calendar .rdp-day_disabled::after,
.page-id-3199 .wbk-calendar button[disabled]::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 8px;
  pointer-events: none;
  background-image: repeating-linear-gradient(
      -45deg,
      rgba(255,255,255,0.18) 0,
      rgba(255,255,255,0.18) 6px,
      transparent 6px,
      transparent 12px
    );
}

/* Hover voor beschikbare dagen */

.page-id-3199 .wbk-calendar .rdp .rdp-day:not([aria-disabled="true"]):not([aria-selected="true"]):hover,
.page-id-3199 .wbk-calendar .rdp button.rdp-day:not([aria-disabled="true"]):not([aria-selected="true"]):hover,
.page-id-3199 .wbk-calendar .DayPicker-Day:not([aria-disabled="true"]):not([aria-selected="true"]):hover {
  background: var(--wbk-cal-hover-bg) !important;
  color: #fff !important;
}

/* Beschikbaar (default tekstcontrast) */

.page-id-3199 .wbk-calendar .rdp .rdp-day:not([aria-disabled="true"]):not([aria-selected="true"]),
.page-id-3199 .wbk-calendar .rdp button.rdp-day:not([aria-disabled="true"]):not([aria-selected="true"]),
.page-id-3199 .wbk-calendar .DayPicker-Day:not([aria-disabled="true"]):not([aria-selected="true"]) {
  color: var(--wbk-cal-available-text) !important;
}

/* Vandaag subtiele rand (alleen als beschikbaar) */

.page-id-3199 .wbk-calendar .rdp .rdp-day.rdp-day_today:not([aria-selected="true"]):not([aria-disabled="true"]),
.page-id-3199 .wbk-calendar .DayPicker-Day--today:not([aria-selected="true"]):not([aria-disabled="true"]) {
  outline: 2px solid var(--wbk-cal-selected-bg) !important;
  outline-offset: 2px !important;
}

/* ========== 7) Tijdsloten (lijst) – duidelijk onderscheid ========== */

.page-id-3199 .wbk_timeslots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 8px;
}

.page-id-3199 .wbk_timeslots__item {
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.08);
  padding: 10px 8px;
  text-align: center;
  font-weight: 500;
  color: #111;
  background: #fff;
  transition: transform .05s ease, background-color .1s ease, color .1s ease;
}

/* GERESERVEERD / disabled tijdslot */

.page-id-3199 .wbk_timeslots__item--disabled {
  position: relative;
  background-color: #b71c1c !important;
  color: #fff !important;
  border-color: #8f1414 !important;
  cursor: not-allowed !important;
  opacity: 1 !important;
}

.page-id-3199 .wbk_timeslots__item--disabled::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 10px;
  pointer-events: none;
  background-image: repeating-linear-gradient(
      -45deg,
      rgba(255,255,255,0.18) 0,
      rgba(255,255,255,0.18) 6px,
      transparent 6px,
      transparent 12px
    );
}

.page-id-3199 .wbk_timeslots__item--disabled:hover {
  background-color: #b71c1c !important;
  color: #fff !important;
  transform: none !important;
}

/* Beschikbaar + hover */

.page-id-3199 .wbk_timeslots__item:not(.wbk_timeslots__item--disabled):hover {
  background: #2e7d32;
  color: #fff;
  border-color: #255f29;
  transform: translateY(-1px);
}

/* Geselecteerd tijdslot (dek meerdere varianten af) */

.page-id-3199 .wbk_timeslots__item--selected,
.page-id-3199 .wbk_timeslots__item.is-selected,
.page-id-3199 .wbk_timeslots__item[aria-selected="true"],
.page-id-3199 .wbk_timeslots__item.wbk_timeslots__item--active {
  background: #0073aa !important;
  color: #fff !important;
  border: 2px solid #005f8d !important;
  font-weight: 700 !important;
  transform: none !important;
}

/* Toetsenbord-focus op slot */

.page-id-3199 .wbk_timeslots__item:focus-visible {
  outline: 3px solid #0073aa;
  outline-offset: 2px;
}

/* Kleine schermen: grotere hitbox */

@media (max-width: 480px) {
  .page-id-3199 .wbk_timeslots__item {
    padding: 12px 10px;
    font-size: 15px;
    border-radius: 12px;
  }
}
/* ===== Webba sidebar – verberg “Totaal: Gratis” of nulbedragen ===== */
.page-id-3199 .wbk_sidebar__bottom-summary__label,
.page-id-3199 .wbk_sidebar__bottom-summary__value {
  display: none !important;
}

/* Extra veiligheid: verberg tekst die letterlijk “Gratis” of “€0” bevat */
.page-id-3199 [class*="wbk_sidebar"] span {
  display: inline-block;
}
.page-id-3199 [class*="wbk_sidebar"] span:has(> .wbk_sidebar__bottom-summary__label),
.page-id-3199 [class*="wbk_sidebar"] span:has(> .wbk_sidebar__bottom-summary__value) {
  display: none !important;
}
.page-id-3199 [class*="wbk_sidebar"] span {
  visibility: visible !important;
}
.page-id-3199 [class*="wbk_sidebar"] span:contains("Gratis"),
.page-id-3199 [class*="wbk_sidebar"] span:contains("€0"),
.page-id-3199 [class*="wbk_sidebar"] span:contains("Totaal") {
  display: none !important;
}