/**
 * Het Binnenwerk Booking - front-end style overrides.
 *
 * These rules style the GPL Booking Calendar / Pro booking forms so they
 * match the Het Binnenwerk brand (square corners, brand colours, full-width
 * inputs). They were copied verbatim from the theme stylesheet
 * wp-content/themes/hetbinnenwerk/css/custom16.css so the booking styling no
 * longer depends on the theme being active. The original theme rules are kept
 * in place; this file is an additive copy enqueued by the companion plugin.
 *
 * (c) Matica, Gerry Uytdenhouwen - 2026-06-24
 */

/* From custom16.css line 717 - time-slot selector chips */
.wpbc_times_selector div {
    color: #a66f13;
    border: 1px solid #ddbd98;
    border-radius: 0px !important;
    text-align: center;
    font-weight: 400;
    font-size: 0.9em;
}

/* From custom16.css line 727 - text/textarea/select inputs inside the form */
.booking_form_div textarea,
.booking_form_div input[type="text"],
.booking_form_div select {
    border-color: #DFDFDF;
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
    border-radius: 0px !important;
    border-style: solid;
    border-width: 1px;
    vertical-align: baseline;
    color: #000;
}

/* From custom16.css line 738 - primary booking button */
.booking_form_div input.button {
    padding: 0px 0px !important;
    height: 35px !important;
    display: inline-block !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    text-align: center !important;
    color: #144D42 !important;
    border: 1px solid #144D42 !important;
    text-transform: uppercase !important;
    border-radius: 0px !important;
    float: inherit !important;
}

/* From custom16.css line 752 - button font sizing across button variants */
.booking_form_div .submit,
.booking_form_div .button,
.booking_form_div .button-primary,
.booking_form_div .button-secondary,
.booking_form_div .button-highlighted,
.booking_form_div #postcustomstuff .submit input {
    font-size: 14px !important;
}

/* From custom16.css line 759 - structured form inputs full width */
.wpbc_structure_form input,
.wpbc_structure_form textarea {
    width: 100% !important;
    color: black !important;
}

/* From custom16.css line 777 - payment gateway form spacing */
#gateway_payment_forms2 {
    padding-bottom: 5em;
}

/* From custom16.css line 784 - payment gateway form spacing */
#gateway_payment_forms3 {
    /* background-color:#228c78; */
    padding: 5px;
}

/* From custom16.css line 790 - square corners on button inputs */
.booking_form input[type="button"] {
    border-radius: 0px !important;
}

/* From custom16.css line 799 - hide legend text on calendar legend cells */
.wpdev_hint_with_text .block_time.timespartly,
.wpdev_hint_with_text .block_booked.date_approved,
.wpdev_hint_with_text .block_pending.date2approve,
.wpdev_hint_with_text .block_free.datepick-days-cell a {
    font-size: 0px;
}

/* ──────────────────────────────────────────────────────────────────────────
 * "Toevoegen aan Google kalender" action button on the confirmation page.
 *
 * The core renders this as a plain grey text link (no class) inside
 * .wpbc_ty__content_text. We restyle it into a filled peach action button in the
 * brand palette so it reads as a clear call-to-action. Page only (not email).
 *
 * (c) Matica, Gerry Uytdenhouwen — 2026-06-27
 * ────────────────────────────────────────────────────────────────────────── */
.wpbc_ty__content_text a[href*="calendar.google"],
.wpbc_ty__content_text a[href*="google.com/calendar"] {
	display: inline-block;
	background-color: #EFAC80;
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Crect%20x%3D%273%27%20y%3D%275%27%20width%3D%2718%27%20height%3D%2716%27%20rx%3D%272.5%27%20fill%3D%27%23ffffff%27%20stroke%3D%27%23dadce0%27%2F%3E%3Crect%20x%3D%273%27%20y%3D%275%27%20width%3D%2718%27%20height%3D%274.5%27%20fill%3D%27%234285F4%27%2F%3E%3Crect%20x%3D%273%27%20y%3D%2716.5%27%20width%3D%2718%27%20height%3D%274.5%27%20fill%3D%27%23FBBC05%27%2F%3E%3Crect%20x%3D%273%27%20y%3D%275%27%20width%3D%274.5%27%20height%3D%2716%27%20fill%3D%27%2334A853%27%2F%3E%3Crect%20x%3D%2716.5%27%20y%3D%275%27%20width%3D%274.5%27%20height%3D%2716%27%20fill%3D%27%23EA4335%27%2F%3E%3Crect%20x%3D%277%27%20y%3D%279.5%27%20width%3D%2710%27%20height%3D%277%27%20fill%3D%27%23ffffff%27%2F%3E%3Crect%20x%3D%277.5%27%20y%3D%272.5%27%20width%3D%272%27%20height%3D%274%27%20rx%3D%271%27%20fill%3D%27%235f6368%27%2F%3E%3Crect%20x%3D%2715.5%27%20y%3D%272.5%27%20width%3D%272%27%20height%3D%274%27%20rx%3D%271%27%20fill%3D%27%235f6368%27%2F%3E%3C%2Fsvg%3E");
	background-repeat: no-repeat;
	background-position: 16px center;
	background-size: 18px 18px;
	color: #144D42 !important;
	font-weight: 700;
	text-decoration: none;
	padding: 11px 22px 11px 44px;
	border-radius: 6px;
	line-height: 1.2;
	margin: 10px 0 4px;
	transition: filter .2s ease, transform .1s ease;
}

.wpbc_ty__content_text a[href*="calendar.google"]:hover,
.wpbc_ty__content_text a[href*="google.com/calendar"]:hover {
	filter: brightness( 0.96 );
	transform: translateY( -1px );
	color: #144D42 !important;
}

/* ──────────────────────────────────────────────────────────────────────────
 * Confirmation panel polish (subtle branding).
 *
 * The thank-you message and the white details card are siblings inside
 * .wpbc_after_booking_thank_you_section; the message had white text on the teal
 * page background so it looked detached. We turn the whole section into one
 * unified white card and brand the section headers / labels in the house palette.
 *
 * (c) Matica, Gerry Uytdenhouwen — 2026-06-27
 * ────────────────────────────────────────────────────────────────────────── */
/* NOTE: selectors are body-prefixed and use the full chain so they out-rank the
 * core plugin's own confirmation rules (client.css) regardless of load order. */

/* Outer section becomes the single white card. */
body .wpbc_after_booking_thank_you_section {
	max-width: 560px;
	margin: 0 auto;
	background: #ffffff;
	border-radius: 10px;
	padding: 26px 28px;
	box-shadow: 0 6px 24px rgba( 0, 0, 0, 0.12 );
}

/* Intro "Dankjewel ..." message: now inside the card, dark + readable. */
body .wpbc_after_booking_thank_you_section .wpbc_ty__message {
	color: #144D42;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.35;
	margin: 0 0 18px;
}

/* Strip the inner container's own card (border/shadow/bg) -> one card only. */
body .wpbc_after_booking_thank_you_section .wpbc_ty__container {
	background: transparent;
	border: 0;
	box-shadow: none;
	padding: 0;
	margin: 0;
}

/* Booking-id line: brand peach accent bar instead of the default green. */
body .wpbc_after_booking_thank_you_section .wpbc_ty__container .wpbc_ty__header {
	border-left: 4px solid #EFAC80;
	padding: 4px 0 4px 14px;
	margin: 0 0 6px -4px;
	color: #144D42;
	font-size: 17px;
	line-height: 1.5;
}

/* Section headers in brand teal with a soft divider. */
body .wpbc_after_booking_thank_you_section .wpbc_ty__container .wpbc_ty__content .wpbc_ty__content_text .wpbc_ty__section_header {
	color: #144D42;
	font-weight: 700;
	font-size: 15px;
	letter-spacing: .02em;
	text-transform: uppercase;
	border-bottom: 2px solid rgba( 20, 77, 66, 0.12 );
	padding-bottom: 6px;
	margin: 4px 0 12px;
	line-height: 1.4;
}

/* Field labels in teal, values in a calm dark grey. */
body .wpbc_after_booking_thank_you_section .wpbc_ty__container .wpbc_ty__content .wpbc_ty__content_text strong {
	color: #144D42;
}

body .wpbc_after_booking_thank_you_section .wpbc_ty__container .wpbc_ty__content .wpbc_ty__content_text .fieldvalue {
	color: #333333;
}

/* ──────────────────────────────────────────────────────────────────────────
 * Booking form – "light card" restyle (chosen direction).
 *
 * The personal-info section (.wpbc_structure_form) sits directly on the dark
 * teal page as bare white inputs. We lift it onto a single white card with
 * teal labels, softly rounded bordered fields with a focus ring, and a filled
 * teal submit button — consistent with the confirmation card. The calendar
 * above stays as it is. Selectors are body-prefixed and use the full chain so
 * they out-rank the plugin/skin defaults regardless of load order.
 *
 * (c) Matica, Gerry Uytdenhouwen — 2026-07-02
 * ────────────────────────────────────────────────────────────────────────── */

/* The whole booking widget (calendar + legend + form) becomes ONE white card.
 * A deeper shadow plus a hairline border keep the card clearly lifted off the
 * dark teal page — including on lower-quality screens where a soft shadow fades. */
body .wpbc_booking_form_structure {
	background: #ffffff;
	border: 1px solid rgba( 0, 0, 0, 0.06 );
	border-radius: 10px;
	padding: 22px 24px;
	box-shadow: 0 10px 28px rgba( 0, 0, 0, 0.30 );
	box-sizing: border-box;
}

/* Legend text is white by default (it used to sit on the teal page); make it
   readable now that it lives inside the white card. */
body .wpbc_booking_form_structure .wpdev_hint_with_text {
	color: #144D42 !important;
}

/* Form section: no longer its own card — an inner block separated from the
   calendar/legend above by a soft divider. */
body .wpbc_structure_form {
	background: transparent;
	box-shadow: none;
	padding: 18px 0 0;
	margin-top: 16px;
	border-top: 1px solid rgba( 20, 77, 66, 0.12 );
	box-sizing: border-box;
}

/* Each field row: label (text in the <p>) + control, with breathing room. */
body .wpbc_structure_form p {
	color: #144D42;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	margin: 0 0 16px;
}
body .wpbc_structure_form p:last-child {
	margin-bottom: 0;
}

/* Inputs: soft rounded, subtle grey border, comfortable padding. */
body .wpbc_structure_form input[type="text"],
body .wpbc_structure_form input[type="email"],
body .wpbc_structure_form textarea,
body .wpbc_structure_form select {
	width: 100% !important;
	box-sizing: border-box !important;
	margin-top: 6px !important;
	padding: 10px 12px !important;
	border: 1px solid #d5d5d5 !important;
	border-radius: 6px !important;
	background: #ffffff !important;
	color: #222222 !important;
	font-weight: 400 !important;
	font-size: 14px !important;
}

/* Focus state: teal border + soft teal ring. */
body .wpbc_structure_form input[type="text"]:focus,
body .wpbc_structure_form input[type="email"]:focus,
body .wpbc_structure_form textarea:focus,
body .wpbc_structure_form select:focus {
	border-color: #144D42 !important;
	outline: none !important;
	box-shadow: 0 0 0 3px rgba( 20, 77, 66, 0.12 ) !important;
}

/* Submit button: filled teal, full width, uppercase. */
body .wpbc_structure_form input.wpbc_button_light,
body .wpbc_structure_form p input.btn {
	width: 100% !important;
	height: auto !important;
	margin-top: 4px !important;
	padding: 13px 22px !important;
	background: #144D42 !important;
	color: #ffffff !important;
	border: 1px solid #144D42 !important;
	border-radius: 6px !important;
	font-weight: 700 !important;
	font-size: 14px !important;
	text-transform: uppercase !important;
	cursor: pointer;
	transition: filter .2s ease, transform .1s ease;
}
body .wpbc_structure_form input.wpbc_button_light:hover,
body .wpbc_structure_form p input.btn:hover {
	filter: brightness( 1.12 ) !important;
	transform: translateY( -1px );
	color: #ffffff !important;
}

/* Time-slot chips aligned to the brand palette (replacing the gold skin):
 * unselected = teal outline on white; selected = filled peach with teal text. */
body .wpbc_times_selector div {
	color: #144D42 !important;
	background: #ffffff !important;
	border: 1px solid #144D42 !important;
	border-radius: 6px !important;
	font-weight: 600 !important;
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
/* Hover on an unselected chip: soft peach tint, keep the teal outline. */
body .wpbc_times_selector div:hover {
	background: rgba( 239, 172, 128, 0.22 ) !important;
	border-color: #EFAC80 !important;
	color: #144D42 !important;
}
body .wpbc_times_selector div.wpbc_time_selected {
	color: #144D42 !important;
	background: #EFAC80 !important;
	border-color: #EFAC80 !important;
	font-weight: 700 !important;
}
/* Hover on the selected chip: keep peach, just a touch darker. */
body .wpbc_times_selector div.wpbc_time_selected:hover {
	background: #EFAC80 !important;
	border-color: #EFAC80 !important;
	filter: brightness( 0.96 ) !important;
}