/* =========================================================================
   Twinco Booking Modal — port of components/ui/BookingModal.tsx
   ========================================================================= */
/* Gradual entrance: use visibility (not display:none) so opacity can transition, and
   animate the panel in (fade + slide-up + slight scale). */
.twinco-modal { position: fixed; inset: 0; z-index: 100; overflow-y: auto; background: rgba(0, 8, 45, 0.7); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.35s ease, visibility 0s linear 0.35s; font-family: var(--twinco-font-sans); }
.twinco-modal.is-open { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 0.35s ease, visibility 0s linear 0s; }
.twinco-modal *, .twinco-modal *::before, .twinco-modal *::after { box-sizing: border-box; }
.twinco-modal [hidden] { display: none !important; }

.twinco-modal__backdrop { display: flex; min-height: 100%; align-items: center; justify-content: center; padding: 16px; }
.twinco-modal__panel { position: relative; width: 100%; max-width: 460px; border-radius: var(--twinco-radius-card); background: #fff; padding: 24px; box-shadow: 0 30px 80px 0 rgba(0, 8, 45, 0.45); opacity: 0; transform: translateY(24px) scale(0.96); transition: opacity 0.35s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
.twinco-modal.is-open .twinco-modal__panel { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	.twinco-modal, .twinco-modal.is-open, .twinco-modal__panel, .twinco-modal.is-open .twinco-modal__panel { transition-duration: 0.01ms; transform: none; }
}
.twinco-modal__close { position: absolute; right: 20px; top: 20px; display: flex; width: 36px; height: 36px; align-items: center; justify-content: center; border-radius: 9999px; font-size: 22px; line-height: 1; color: var(--twinco-ash); background: none; border: 0; cursor: pointer; transition: background 0.2s ease, color 0.2s ease; }
.twinco-modal__close:hover { background: rgba(5, 7, 8, 0.05); color: var(--twinco-jet); }

.twinco-modal__form { display: flex; flex-direction: column; gap: 14px; }
.twinco-modal__head { display: flex; flex-direction: column; gap: 6px; padding-right: 40px; }
.twinco-modal__title { font-size: 28px; font-weight: 700; line-height: 1.1; color: var(--twinco-navy); }
.twinco-modal__subtitle { font-size: 14px; line-height: 1.4; color: var(--twinco-slate); }
.twinco-modal__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.twinco-modal__field { display: flex; width: 100%; flex-direction: column; align-items: flex-start; gap: 6px; }
.twinco-modal__label { font-size: 13px; font-weight: 600; color: var(--twinco-jet); }
.twinco-modal .twinco-modal__input { width: 100%; border-radius: 10px; border: 1px solid var(--twinco-silver); background: var(--twinco-surface); padding: 11px 14px; font-size: 15px; color: var(--twinco-jet); outline: none; transition: border 0.2s ease, box-shadow 0.2s ease; -webkit-appearance: none; appearance: none; }
.twinco-modal__input::placeholder { color: var(--twinco-ash); opacity: 1; }
.twinco-modal__input:focus { border-color: var(--twinco-blue); box-shadow: 0 0 0 2px rgba(20, 123, 254, 0.2); }

.twinco-modal__pick { display: flex; flex-direction: column; gap: 10px; }
.twinco-modal__calendar { width: 100%; border-radius: 10px; border: 1px solid var(--twinco-silver); background: var(--twinco-surface); padding: 10px; }
.twinco-modal__cal-head { margin-bottom: 8px; display: flex; align-items: center; justify-content: space-between; }
.twinco-modal__cal-nav { display: flex; width: 24px; height: 24px; align-items: center; justify-content: center; border-radius: 9999px; color: var(--twinco-jet); background: none; border: 0; cursor: pointer; font-size: 16px; transition: background 0.2s ease; }
.twinco-modal__cal-nav:hover:not([disabled]) { background: rgba(20, 123, 254, 0.1); }
.twinco-modal__cal-nav[disabled] { cursor: not-allowed; opacity: 0.3; }
.twinco-modal__cal-month { font-size: 13px; font-weight: 600; color: var(--twinco-jet); }
.twinco-modal__cal-week { margin-bottom: 4px; display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; }
.twinco-modal__cal-wd { text-align: center; font-size: 10px; font-weight: 500; color: var(--twinco-ash); }
.twinco-modal__cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; }
.twinco-modal__cal-day { margin: 0 auto; display: flex; width: 28px; height: 28px; align-items: center; justify-content: center; border-radius: 9999px; font-size: 12px; color: var(--twinco-jet); background: none; border: 0; cursor: pointer; transition: background 0.2s ease; }
.twinco-modal__cal-day:hover:not([disabled]):not(.is-selected) { background: rgba(20, 123, 254, 0.1); }
.twinco-modal__cal-day.is-selected { background: var(--twinco-blue); font-weight: 600; color: #fff; }
.twinco-modal__cal-day.is-past { cursor: not-allowed; color: var(--twinco-silver); }
.twinco-modal__cal-day.is-today { font-weight: 600; color: var(--twinco-blue); }

.twinco-modal__slots { display: flex; flex-wrap: wrap; gap: 8px; }
.twinco-modal__slot { border-radius: var(--twinco-radius-pill); border: 1px solid var(--twinco-silver); background: #fff; padding: 7px 16px; font-size: 13px; font-weight: 500; color: var(--twinco-jet); cursor: pointer; transition: border 0.2s ease, color 0.2s ease, background 0.2s ease; }
.twinco-modal__slot:hover { border-color: var(--twinco-blue); color: var(--twinco-blue); }
.twinco-modal__slot.is-selected { border-color: var(--twinco-blue); background: var(--twinco-blue); color: #fff; }

.twinco-modal__consent { display: flex; align-items: flex-start; gap: 10px; }
.twinco-modal__consent input { margin-top: 2px; width: 18px; height: 18px; flex-shrink: 0; cursor: pointer; accent-color: var(--twinco-blue); }
.twinco-modal__consent span { font-size: 13px; line-height: 1.4; color: var(--twinco-slate); }
.twinco-modal__consent a { font-weight: 600; color: var(--twinco-blue); text-decoration: underline; text-underline-offset: 2px; }

.twinco-modal__submit { margin-top: 4px; display: flex; height: 48px; width: 100%; align-items: center; justify-content: center; border-radius: var(--twinco-radius-pill); font-size: var(--twinco-text-button); font-weight: 600; color: #fff; border: 0; cursor: pointer; --brand-angle: 123.784deg; transition: filter 0.2s ease; }
.twinco-modal__submit:hover:not([disabled]) { filter: brightness(1.1); }
.twinco-modal__submit[disabled] { cursor: not-allowed; opacity: 0.4; }

.twinco-modal__success { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 40px 0; text-align: center; }
.twinco-modal__success-icon { display: flex; width: 64px; height: 64px; align-items: center; justify-content: center; border-radius: 9999px; background: rgba(20, 123, 254, 0.1); font-size: 32px; color: var(--twinco-blue); }
.twinco-modal__success-title { font-size: 28px; font-weight: 700; color: var(--twinco-navy); }
.twinco-modal__success-text { max-width: 380px; font-size: 15px; line-height: 1.4; color: var(--twinco-slate); }
.twinco-modal__done { margin-top: 8px; display: flex; height: 44px; align-items: center; justify-content: center; border-radius: var(--twinco-radius-pill); padding: 0 32px; font-size: var(--twinco-text-button); font-weight: 600; color: #fff; border: 0; cursor: pointer; --brand-angle: 123.784deg; transition: filter 0.2s ease; }
.twinco-modal__done:hover { filter: brightness(1.1); }

/* Neutralize Elementor/theme button outline+border bleeding onto the modal
   buttons (calendar days, time slots, nav, close). Scoped 0,2,0 + outline!important. */
.twinco-modal .twinco-modal__panel button { outline: none !important; -webkit-appearance: none; appearance: none; }
.twinco-modal .twinco-modal__cal-nav,
.twinco-modal .twinco-modal__cal-day,
.twinco-modal .twinco-modal__close { border: 0; box-shadow: none; }
.twinco-modal .twinco-modal__cal-nav { color: var(--twinco-jet); }
.twinco-modal .twinco-modal__cal-day { color: var(--twinco-jet); }
.twinco-modal .twinco-modal__cal-day.is-past { color: var(--twinco-silver); }
.twinco-modal .twinco-modal__cal-day.is-today { color: var(--twinco-blue); }
.twinco-modal .twinco-modal__cal-day.is-selected { color: #fff; background: var(--twinco-blue); }
.twinco-modal .twinco-modal__close { color: var(--twinco-ash); }
.twinco-modal .twinco-modal__slot { border: 1px solid var(--twinco-silver); box-shadow: none; color: var(--twinco-jet); }
.twinco-modal .twinco-modal__slot:hover { border-color: var(--twinco-blue); color: var(--twinco-blue); }
.twinco-modal .twinco-modal__slot.is-selected { border-color: var(--twinco-blue); background: var(--twinco-blue); color: #fff; }
.twinco-modal .twinco-modal__submit, .twinco-modal .twinco-modal__done { color: #fff; }

/* ---- Elementor Pro Form (when wired) — styled to match the modal ----
   Elementor lays fields out with a negative-margin row + per-field padding gutters,
   which overflow the narrow modal panel. Replace that whole system with our own
   flex+gap layout and force border-box so padded inputs never exceed their column. */
.twinco-modal .twinco-modal__proform, .twinco-modal .twinco-modal__proform * { box-sizing: border-box; }
.twinco-modal .twinco-modal__proform .elementor-form-fields-wrapper { display: flex; flex-wrap: wrap; gap: 14px; margin: 0 !important; width: 100%; }
.twinco-modal .twinco-modal__proform .elementor-field-group { display: flex; flex-direction: column; align-items: stretch; gap: 6px; margin: 0 !important; padding: 0 !important; width: 100% !important; max-width: 100%; min-width: 0; }
.twinco-modal .twinco-modal__proform .elementor-field-group.elementor-col-50 { width: calc(50% - 7px) !important; }
.twinco-modal__proform .elementor-field-label { font-family: var(--twinco-font-inter); font-size: 13px; font-weight: 600; color: var(--twinco-jet); margin: 0; text-align: left; }
/* Elementor sets inputs to flex:1 1 100%, which in our column group bursts past the
   column width. Pin them to fill exactly their group, never exceed it. */
.twinco-modal .twinco-modal__proform .elementor-field-textual { flex: 0 0 auto !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; border: 1px solid var(--twinco-silver); border-radius: 10px; background: var(--twinco-surface); padding: 11px 14px; font-family: var(--twinco-font-inter); font-size: 15px; color: var(--twinco-jet); outline: none; box-shadow: none; }
.twinco-modal__proform .elementor-field-textual::placeholder { color: var(--twinco-ash); opacity: 1; }
.twinco-modal__proform .elementor-field-textual:focus { border-color: var(--twinco-blue); box-shadow: 0 0 0 2px rgba(20, 123, 254, 0.2); }
.twinco-modal .twinco-modal__proform .elementor-button, .twinco-modal .twinco-modal__proform button[type="submit"] { display: flex; height: 48px; width: 100%; align-items: center; justify-content: center; border: 0; border-radius: var(--twinco-radius-pill); font-size: var(--twinco-text-button); font-weight: 600; color: #fff; background-image: linear-gradient(123.784deg, var(--twinco-navy) 8.8727%, var(--twinco-cyan) 104.61%); }
/* Hidden date/time fields (populated by JS) must not leave an empty field-group gap. */
.twinco-modal .twinco-modal__proform .elementor-field-type-hidden { display: none !important; }
/* Consent (acceptance): hide the empty "Consent" label, keep the checkbox + link inline. */
.twinco-modal .twinco-modal__proform .elementor-field-type-acceptance > .elementor-field-label { display: none !important; }
.twinco-modal .twinco-modal__proform .elementor-field-type-acceptance .elementor-field-subgroup,
.twinco-modal .twinco-modal__proform .elementor-field-type-acceptance .elementor-field-option { display: flex; align-items: flex-start; gap: 10px; }
.twinco-modal .twinco-modal__proform .elementor-field-type-acceptance label,
.twinco-modal .twinco-modal__proform .elementor-field-type-acceptance span { font-family: var(--twinco-font-inter); font-size: 13px; line-height: 1.4; color: var(--twinco-slate); }
.twinco-modal .twinco-modal__proform .elementor-field-type-acceptance input[type="checkbox"] { margin-top: 2px; width: 18px; height: 18px; flex-shrink: 0; accent-color: var(--twinco-blue); }
.twinco-modal .twinco-modal__proform .elementor-field-type-acceptance a { font-weight: 600; color: var(--twinco-blue); text-decoration: underline; text-underline-offset: 2px; }
/* Date/time picker woven into the Pro form flow (moved by JS): full-width row between
   the contact fields and the consent + submit. */
.twinco-modal .elementor-form-fields-wrapper .twinco-modal__pick--inform { flex: 0 0 100%; width: 100%; }
/* Pro's inline success message, styled to the modal. */
.twinco-modal .twinco-modal__proform .elementor-message-success { border-radius: 10px; background: rgba(20, 123, 254, 0.08); padding: 16px; font-family: var(--twinco-font-inter); font-size: 14px; line-height: 1.4; color: var(--twinco-navy); }

@media (max-width: 639.98px) {
	.twinco-modal__backdrop { padding: 12px; }
	.twinco-modal__grid { grid-template-columns: 1fr; }
	/* Calendar overflowed the panel on phones: the day cells sit inside the Pro form
	   wrapper and pick up its button padding, so each `1fr` track (min-width: auto)
	   was floored at ~49px -> 7 tracks ~341px inside a 276px grid, pushing Saturday
	   out past the card. Let the tracks shrink and pin the cells back to their size. */
	.twinco-modal .twinco-modal__cal-week,
	.twinco-modal .twinco-modal__cal-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); }
	.twinco-modal .twinco-modal__cal-day { width: 28px; min-width: 0; max-width: 100%; padding: 0; }
	.twinco-modal .twinco-modal__slots { justify-content: flex-start; }
}