/* ========================================================================== Kit Delivery slide-in panel ("Order Kit Delivery") Same right-side canvas convention as .fc-size-chart-canvas (see that block in form.css + class-registration-form-widget.php's render_size_chart_canvas()) — new class names so the two panels never collide, since both can exist on the same page. ========================================================================== */ /* .fc-kd-btn's own `display: inline-block` rule below has the same specificity as the browser's default `[hidden] { display: none }` UA rule, and — being declared later, in this stylesheet — was silently winning, so a button rendered with the `hidden` attribute (e.g. [data-action="continue-to-kits"], meant to stay hidden until a lookup resolves) showed immediately instead. This compound selector has higher specificity than .fc-kd-btn alone, so it wins the initial [hidden] state correctly — and, having no !important, a later jQuery .show() (which sets an inline style) still safely overrides it, since an inline style always beats a non-!important stylesheet rule regardless of selector specificity. */ .fc-kd-btn[hidden] { display: none; } .fc-kit-delivery-canvas { position: fixed; inset: 0; z-index: 100000; visibility: hidden; pointer-events: none; } /* The manual-kid-row DOB field's AirDatepicker (kit-delivery-panel.js) is deliberately given no `container` option, so the library appends its calendar near rather than inside this panel's own scrollable body — its default z-index (100) would otherwise render underneath this canvas's own 100000. */ .air-datepicker.fc-custom-datepicker { z-index: 100001; } .fc-kit-delivery-canvas.is-open { visibility: visible; pointer-events: auto; } .fc-kit-delivery-overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); opacity: 0; transition: opacity 0.25s ease; } .fc-kit-delivery-canvas.is-open .fc-kit-delivery-overlay { opacity: 1; } .fc-kit-delivery-panel { position: absolute; top: 0; right: 0; bottom: 0; width: 420px; max-width: 92vw; background: #fff; box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15); transform: translateX(100%); transition: transform 0.3s ease; display: flex; flex-direction: column; } .fc-kit-delivery-canvas.is-open .fc-kit-delivery-panel { transform: translateX(0); } .fc-kit-delivery-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid #eee; flex-shrink: 0; } .fc-kit-delivery-header h3 { margin: 0; font-size: 17px; color: #333; } .fc-kit-delivery-close { background: none; border: none; font-size: 26px; line-height: 1; color: #999; cursor: pointer; padding: 0 4px; } .fc-kit-delivery-close:hover { color: #333; } .fc-kit-delivery-body { padding: 20px; overflow-y: auto; flex: 1; } .fc-kd-step-title { font-size: 14px; font-weight: 700; color: #333; margin: 0 0 12px; } .fc-kd-help-text { font-size: 13px; color: #666; margin: 0 0 14px; } .fc-kd-error-text { font-size: 13px; color: #d63638; margin: 0 0 10px; min-height: 0; } .fc-kd-error-text:empty { display: none; } .fc-kd-lookup-status { font-size: 13px; color: #666; margin: 6px 0 14px; } /* readonly (kit-delivery-panel.js — calendar-only entry, see that file's own comment on why), same convention as form.js's own input[readonly].fc-sibling-dob: without this it renders with the browser's default greyed-out readonly look, reading as "disabled" rather than "pick a date". */ .fc-kd-manual-dob[readonly] { background-color: #fff; cursor: pointer; } .fc-kd-delivery-charge-notice { font-size: 14px; font-weight: 600; color: #333; background: #FFF5F5; border: 1px solid #FFD6D6; border-radius: 6px; padding: 10px 14px; margin: 0 0 14px; } /* Custom select dropdown — ported from form.css (Academy Registration Form widget) / initCustomSelects() in kit-delivery-panel.js. A native