/* Booking Calendar in de stijl van Hut Thornspic (vervangt de kleuren van de skin "Thornspic 2024").
   Werkt in lichte en donkere modus. Alleen kleuren en randen, geen wijziging aan de plugin zelf. */
:root {
  --cal-frame: #ffffff; --cal-line: #e1e9ec; --cal-head: #0d6676; --cal-week: #6b7b82;
  --cal-free: #a6e3ee; --cal-free-ring: #00a5bb; --cal-free-t: #064c59;
  --cal-na-line: rgba(120,140,148,.38); --cal-past: transparent; --cal-past-t: #b5c3c8;
  --cal-booked: #f6c9cb; --cal-booked-t: #a33a40;
  --cal-pend: #fdebbd; --cal-pend-t: #8a6212;
  --cal-sel: #00a5bb; --cal-sel-t: #ffffff;
  --cal-over: #7cb342; --cal-over-t: #ffffff;
}
html[data-theme="dark"] {
  --cal-frame: #182226; --cal-line: #2a373c; --cal-head: #6fe0f0; --cal-week: #93a4ab;
  --cal-free: #1f5967; --cal-free-ring: #4dd6ea; --cal-free-t: #d4f6fb;
  --cal-na-line: rgba(160,180,188,.30); --cal-past: transparent; --cal-past-t: #4d5f66;
  --cal-booked: #4a2a2d; --cal-booked-t: #ffa3a7;
  --cal-pend: #4a3f1c; --cal-pend-t: #f1d083;
  --cal-sel: #00bcd4; --cal-sel-t: #06262d;
  --cal-over: #8bc34a; --cal-over-t: #10250a;
}

/* Kader en maanden */
html body .datepick-inline { background: var(--cal-frame); border: 1px solid var(--cal-line); border-radius: 16px; box-shadow: 0 1px 2px rgba(20,50,60,.06), 0 6px 18px rgba(20,50,60,.08); padding: 10px; max-width: 100%; box-sizing: border-box; }
html body .datepick-inline .datepick { background: transparent; }
html body .datepick-inline .calendar-links { background: transparent; border: 0; }
html body .datepick-inline .calendar-links .datepick-prev a, html body .datepick-inline .calendar-links .datepick-next a,
html body .datepick-inline .calendar-links .datepick-prev a:hover, html body .datepick-inline .calendar-links .datepick-next a:hover { color: var(--cal-head); font-weight: 700; text-shadow: none; }
html body .datepick-inline .datepick-header { color: var(--cal-head); font-weight: 700; text-shadow: none; font-size: 1.05em; letter-spacing: .01em; }
html body div.datepick-inline .datepick-title-row th { border: 0; color: var(--cal-week); font-weight: 700; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; background: transparent; }
html body .datepick-inline table { border-collapse: separate; border-spacing: 3px; }

/* Datumcellen (basis) */
html body .block_hints .block_free, html body .block_hints .block_time, html body .block_hints .block_booked, html body .block_hints .block_pending, html body .block_hints .block_check_in_out,
html body .datepick-inline .datepick-days-cell { border: 0; border-radius: 10px; color: var(--cal-past-t); }

/* Beschikbaar */
html body .block_hints .block_free, html body .block_hints .block_time,
html body .block_hints .block_check_in_out div.check-in-div, html body .block_hints .block_check_in_out div.check-out-div,
html body .datepick-inline .date_available,
html body .datepick-inline .timespartly.check_in_time div.check-in-div, html body .datepick-inline .timespartly.check_out_time div.check-out-div,
html body .wpbc_timeslot_day_bg_as_available .datepick-inline .times_clock,
html body .datepick-inline td.datepick-days-cell.check_in_time, html body .datepick-inline td.datepick-days-cell.check_out_time { background: var(--cal-free); }
html body .block_hints .block_free a, html body .block_hints .block_time, html body .datepick-inline .date_available a,
html body .wpbc_timeslot_day_bg_as_available .datepick-inline .times_clock.date_available a { color: var(--cal-free-t); font-weight: 700; text-shadow: none; }
/* Beschikbaar maar niet te kiezen (verleden) */
html body .datepick-inline .date_available.datepick-unselectable, html body .datepick-inline .date_available.datepick-unselectable span { background: var(--cal-past); color: var(--cal-past-t); text-shadow: none; font-weight: 500; }
html body .wpbc_timeslot_day_bg_as_available .datepick-inline .date_available { color: var(--cal-past-t); text-shadow: none; }
html body .datepick-inline .date_available span { text-shadow: none; }

/* Geboekt */
html body .block_hints .date_approved.block_check_in_out, html body .block_hints .block_booked, html body .datepick-inline .date_approved,
html body td.timespartly.check_in_time.check_out_time.check_in_time_date2approve.check_out_time_date_approved div.check-in-div,
html body td.timespartly.check_in_time.check_out_time.check_out_time_date2approve.check_in_time_date_approved div.check-out-div { background-color: var(--cal-booked); }
html body .block_hints .date_approved.block_check_in_out, html body .block_hints .block_booked, html body .datepick-inline .date_approved,
html body .block_hints .block_booked a, html body .datepick-inline .date_approved a { color: var(--cal-booked-t); font-weight: 700; text-shadow: none; }
html body .block_hints .date_approved.block_check_in_out div.check-in-div, html body .datepick-inline .date_approved.timespartly.check_in_time div.check-in-div { border-right: 1px dotted var(--cal-booked); }
html body .block_hints .date_approved.block_check_in_out div.check-out-div, html body .datepick-inline .date_approved.timespartly.check_out_time div.check-out-div { border-left: 1px dotted var(--cal-booked); }

/* In afwachting */
html body .block_hints .date2approve.block_check_in_out, html body .block_hints .block_pending, html body .datepick-inline .date2approve,
html body td.timespartly.check_in_time.check_out_time.check_in_time_date_approved.check_out_time_date2approve div.check-in-div,
html body td.timespartly.check_in_time.check_out_time.check_out_time_date_approved.check_in_time_date2approve div.check-out-div { background-color: var(--cal-pend); }
html body .block_hints .date2approve.block_check_in_out, html body .block_hints .block_pending, html body .datepick-inline .date2approve,
html body .block_hints .block_pending a, html body .datepick-inline .date2approve a { color: var(--cal-pend-t); font-weight: 700; text-shadow: none; }
html body .block_hints .date2approve.block_check_in_out div.check-in-div, html body .datepick-inline .date2approve.timespartly.check_in_time div.check-in-div { border-right: 1px dotted var(--cal-pend); }
html body .block_hints .date2approve.block_check_in_out div.check-out-div, html body .datepick-inline .date2approve.timespartly.check_out_time div.check-out-div { border-left: 1px dotted var(--cal-pend); }

/* Gekozen dagen */
html body .datepick-inline .datepick-one-month .datepick .datepick-current-day { background-color: var(--cal-sel); }
html body .datepick-inline .datepick-one-month .datepick .datepick-current-day .wpbc_time_dots,
html body .datepick-inline .datepick-one-month .datepick .datepick-current-day a,
html body .wpbc_timeslot_day_bg_as_available .datepick-inline .datepick-one-month .datepick .times_clock.date_available.datepick-current-day a { color: var(--cal-sel-t); text-shadow: none; font-weight: 700; }

/* Muis erover */
html body .wpbc_timeslot_day_bg_as_available .datepick-inline .times_clock.datepick-days-cell-over, html body .datepick-inline .datepick .datepick-days-cell-over,
html body .datepick-inline td.datepick-days-cell.check_in_time.datepick-days-cell-over, html body .datepick-inline td.datepick-days-cell.check_out_time.datepick-days-cell-over { background: var(--cal-over); }
html body .datepick-inline .datepick-one-month .datepick .datepick-days-cell-over .wpbc_time_dots,
html body .datepick-inline .datepick-one-month .datepick td.datepick-days-cell-over a:hover,
html body .datepick-inline .datepick-one-month .datepick td.datepick-days-cell-over a { color: var(--cal-over-t); text-shadow: none; }

/* Aankomst- en vertrekdag (diagonaal) */
html body .wpbc-cell-box .wpbc-diagonal-el svg polygon { fill: var(--cal-free); }
html body .datepick-inline td.datepick-days-cell.check_in_time.check_in_time_date2approve .wpbc-cell-box .wpbc-co-in svg polygon,
html body .datepick-inline td.datepick-days-cell.check_out_time.check_out_time_date2approve .wpbc-cell-box .wpbc-co-out svg polygon { fill: var(--cal-pend); }
html body .datepick-inline td.datepick-days-cell.check_in_time.check_in_time_date_approved .wpbc-cell-box .wpbc-co-in svg polygon,
html body .datepick-inline td.datepick-days-cell.check_out_time.check_out_time_date_approved .wpbc-cell-box .wpbc-co-out svg polygon { fill: var(--cal-booked); }
html body td.timespartly.check_in_time.check_out_time span { font-weight: 700; text-shadow: none; }

/* Legenda */
html body .block_hints { border-radius: 8px; }
@media (max-width: 600px) { html body .datepick-inline { padding: 6px; } html body .datepick-inline table { border-spacing: 2px; } }
html body .datepick-inline a, html body .block_hints a { text-decoration: none !important; border-bottom: 0 !important; }
html body .datepick-inline .calendar-links a { display: inline-block; padding: 4px 10px; border-radius: 999px; }
html body .datepick-inline .calendar-links a:hover { background: var(--cal-free); }

/* Vrije dagen duidelijk zichtbaar: egale turquoise vulling, afgeronde hoeken, vette tekst (zelfde vorm als de andere dagen) */
html body div.datepick-inline td.datepick-days-cell.date_available:not(.datepick-unselectable):not(.datepick-current-day):not(.datepick-days-cell-over),
html body .block_hints .block_free {
  background: var(--cal-free) !important; border: 0 !important; border-radius: 10px !important; box-shadow: none !important;
}
html body div.datepick-inline td.datepick-days-cell.date_available:not(.datepick-unselectable) a,
html body div.datepick-inline td.datepick-days-cell.date_available:not(.datepick-unselectable) span {
  color: var(--cal-free-t) !important; font-weight: 800 !important; text-shadow: none !important;
}
html body .block_hints .block_free { width: 22px; height: 22px; display: inline-block; border-radius: 8px !important; }

/* Niet beschikbaar (verleden, zaterdagen, nog niet vrijgegeven): subtiele schuine streep */
html body div.datepick-inline td.datepick-days-cell.date_user_unavailable:not(.date_approved):not(.date2approve):not(.datepick-other-month),
html body .block_hints .date_user_unavailable:not(.date_approved):not(.date2approve) {
  background-image: linear-gradient(to bottom right, transparent calc(50% - 0.75px), var(--cal-na-line) calc(50% - 0.75px), var(--cal-na-line) calc(50% + 0.75px), transparent calc(50% + 0.75px)) !important;
  background-repeat: no-repeat !important; background-size: 100% 100% !important;
}

/* ===== Navigatiepijltjes: groot, rond en duidelijk ===== */
html body .datepick-inline { position: relative; }
html body .datepick-inline .calendar-links .datepick-prev a, html body .datepick-inline .calendar-links .datepick-next a { position: absolute !important; top: 8px !important; z-index: 10001; display: block; width: 42px !important; height: 42px !important; line-height: 42px !important; border-radius: 50%; background: linear-gradient(135deg, #00bcd4, #00a5bb) !important; box-shadow: 0 4px 12px rgba(0,150,170,.35); font-size: 0 !important; color: transparent !important; text-decoration: none !important; overflow: hidden; transition: transform .2s, box-shadow .2s; }
html body .datepick-inline .calendar-links .datepick-prev a { left: 10px !important; right: auto !important; }
html body .datepick-inline .calendar-links .datepick-next a { right: 10px !important; left: auto !important; }
html body .datepick-inline .calendar-links .datepick-prev a::before, html body .datepick-inline .calendar-links .datepick-next a::before { content: ""; position: absolute; inset: 0; background: #fff; -webkit-mask: var(--cal-chev) center/22px no-repeat; mask: var(--cal-chev) center/22px no-repeat; }
html body .datepick-inline .calendar-links .datepick-prev a { --cal-chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 5-7 7 7 7'/%3E%3C/svg%3E"); }
html body .datepick-inline .calendar-links .datepick-next a { --cal-chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 5 7 7-7 7'/%3E%3C/svg%3E"); }
html body .datepick-inline .calendar-links .datepick-prev a:hover, html body .datepick-inline .calendar-links .datepick-next a:hover { transform: scale(1.08); box-shadow: 0 6px 16px rgba(0,150,170,.45); }
html body .datepick-inline .calendar-links .datepick-prev a:focus-visible, html body .datepick-inline .calendar-links .datepick-next a:focus-visible { outline: 3px solid var(--cal-head); outline-offset: 2px; }
/* Pijl niet beschikbaar (eerste maand): zachte, niet klikbare cirkel */
html body .datepick-inline .calendar-links .datepick-prev:not(:has(a))::before { content: ""; position: absolute; top: 8px; left: 10px; width: 42px; height: 42px; border-radius: 50%; background: var(--cal-line); opacity: .6; -webkit-mask: none; pointer-events: none; }
html[data-theme="dark"] .datepick-inline .calendar-links .datepick-prev a::before, html[data-theme="dark"] .datepick-inline .calendar-links .datepick-next a::before { background: #06262d; }
@media (max-width: 600px) { html body .datepick-inline .calendar-links .datepick-prev a, html body .datepick-inline .calendar-links .datepick-next a { top: 6px !important; width: 40px !important; height: 40px !important; } html body .datepick-inline .calendar-links .datepick-prev:not(:has(a))::before { width: 40px; height: 40px; top: 6px; } }

/* ===== Gekozen dag: duidelijk zichtbaar in de agenda ===== */
:root { --cal-pick: #00798c; --cal-pick-t: #fff; --cal-pick-ring: rgba(0,121,140,.32); }
html[data-theme="dark"] { --cal-pick: #19d3ee; --cal-pick-t: #06262d; --cal-pick-ring: rgba(25,211,238,.38); }
html body div.datepick-inline td.datepick-days-cell.datepick-current-day { background: var(--cal-pick) !important; box-shadow: 0 0 0 3px var(--cal-pick-ring), 0 6px 14px rgba(0,80,95,.28) !important; position: relative; z-index: 2; }
html body div.datepick-inline td.datepick-days-cell.datepick-current-day, html body div.datepick-inline td.datepick-days-cell.datepick-current-day a, html body div.datepick-inline td.datepick-days-cell.datepick-current-day span { color: var(--cal-pick-t) !important; font-weight: 800 !important; text-shadow: none !important; }

/* ===== Gekozen dag boven het formulier ===== */
.hut-picked { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: 14px; background: var(--teal-050); border: 1px solid var(--cal-free-ring); border-left-width: 5px; color: var(--ink); line-height: 1.35; }
.hut-picked-ico { flex: none; width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, var(--teal), var(--teal-600)); display: grid; place-items: center; }
.hut-picked-ico::before { content: ""; width: 20px; height: 20px; background: #fff; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E") center/contain no-repeat; }
.hut-picked-lbl { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.hut-picked-val { display: block; font-size: 1.15rem; font-weight: 800; color: var(--cal-head); }
.hut-picked-val::first-letter { text-transform: uppercase; }
.hut-picked.is-empty { background: transparent; border-style: dashed; border-left-width: 1px; }
.hut-picked.is-empty .hut-picked-ico { background: var(--cal-line); }
.hut-picked.is-empty .hut-picked-ico::before { background: var(--muted); }
.hut-picked.is-empty .hut-picked-val { font-size: 1rem; font-weight: 600; color: var(--muted); }

/* ===== Invoervelden: netjes, ook met automatisch invullen van de browser ===== */
.wpbc_structure_form input[type="text"], .wpbc_structure_form input[type="email"], .wpbc_structure_form input[type="tel"], .wpbc_structure_form select, .wpbc_structure_form textarea { background: var(--field-bg); }
:root { --field-bg: #f6fafb; }
html[data-theme="dark"] { --field-bg: #111b1f; }
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, textarea:-webkit-autofill, select:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px var(--field-bg) inset !important; box-shadow: 0 0 0 1000px var(--field-bg) inset !important; -webkit-text-fill-color: var(--ink) !important; caret-color: var(--ink); border-color: var(--input-bd); transition: background-color 600000s 0s; }
input:autofill, textarea:autofill, select:autofill { box-shadow: 0 0 0 1000px var(--field-bg) inset !important; -webkit-text-fill-color: var(--ink) !important; }

/* ===== Bevestiging na het boeken ("Your booking id", gegevens, reserveringsdetails) ===== */
html body .wpbc_after_booking_thank_you_section { margin-top: 26px; text-align: left; }
html body .wpbc_after_booking_thank_you_section .wpbc_ty__message { margin: 0 0 14px; font-size: 1.1rem; font-weight: 700; color: var(--ink) !important; }
html body .wpbc_after_booking_thank_you_section .wpbc_ty__container { background: var(--field-bg) !important; border: 1px solid var(--cal-line) !important; border-radius: 16px !important; box-shadow: none !important; padding: 8px 22px 14px !important; line-height: 1.7 !important; font-size: 1rem; }
html body .wpbc_after_booking_thank_you_section .wpbc_ty__container, html body .wpbc_after_booking_thank_you_section .wpbc_ty__container * { color: var(--text) !important; }
html body .wpbc_after_booking_thank_you_section .wpbc_ty__container strong, html body .wpbc_after_booking_thank_you_section .wpbc_ty__container b { color: var(--ink) !important; }
html body .wpbc_after_booking_thank_you_section .wpbc_ty__container .wpbc_ty__header { margin: 8px 0 6px; padding: 6px 0 6px 16px; font-size: 1.15rem; font-weight: 500; line-height: 1.5; border-left: 5px solid transparent; border-image: linear-gradient(180deg, var(--teal), #8cc63f) 1; color: var(--ink) !important; }
html body .wpbc_after_booking_thank_you_section .wpbc_ty__container .wpbc_ty__header * { color: var(--ink) !important; }
html body .wpbc_after_booking_thank_you_section .wpbc_ty__container .wpbc_ty__content .wpbc_ty__content_text { border-top: 1px solid var(--cal-line); padding: 14px 0; }
html body .wpbc_after_booking_thank_you_section .wpbc_ty__container .wpbc_ty__content .wpbc_ty__content_text .wpbc_ty__section_header { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; line-height: 1.4; margin-bottom: .7em; color: var(--muted) !important; }
html body .wpbc_after_booking_thank_you_section .wpbc_ty__container .wpbc_ty__content .wpbc_ty__content_text h4 { font-size: 1.2rem; font-weight: 700; line-height: 1.4; margin: 0 0 .4em; color: var(--ink) !important; }
html body .wpbc_after_booking_thank_you_section .wpbc_ty__container a { color: var(--teal-700) !important; }