/*
  Web Form Safety Layer (Cerasia Holdings)

  Purpose:
  - Keep Web Forms usable even when marketing/Webflow assets are accidentally injected.
  - Avoid blank pages caused by `web_form.bundle.css` setting `body{display:none}` for FOUC.

  Scope:
  - ONLY routes under /rental-application* and /book_showing*
*/

body:is([data-path^="rental-application"], [data-path^="/rental-application"]),
body:is([data-path^="book_showing"], [data-path^="/book_showing"]) {
  display: block !important;
}

/* Webflow export CSS can blow up inline SVG icons inside Frappe controls.
   Keep form icons at sane sizes on public webforms. */
body:is([data-path^="rental-application"], [data-path^="/rental-application"]) svg.icon,
body:is([data-path^="book_showing"], [data-path^="/book_showing"]) svg.icon {
  width: 14px !important;
  height: 14px !important;
}

body:is([data-path^="rental-application"], [data-path^="/rental-application"]) .select-icon,
body:is([data-path^="book_showing"], [data-path^="/book_showing"]) .select-icon {
  width: 14px !important;
  height: 14px !important;
  flex: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Frappe hides conditional controls by toggling `.hide-control` on the control wrapper.
   If we skip the normal Website CSS pipeline, this class may be undefined and the form
   will look like "depends_on is broken" (and iframe height will explode). */
body:is([data-path^="rental-application"], [data-path^="/rental-application"]) .hide-control,
body:is([data-path^="book_showing"], [data-path^="/book_showing"]) .hide-control {
  display: none !important;
}

/* Defensive select visibility for rental routes.
   This keeps selected option text visible even if brand/theme CSS leaks in. */
body:is([data-path^="rental-application"], [data-path^="/rental-application"]) select.form-control,
body:is([data-path^="rental-application"], [data-path^="/rental-application"]) select.input-with-feedback.form-control {
  display: block !important;
  color: #151515 !important;
  -webkit-text-fill-color: #151515 !important;
  text-indent: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

body:is([data-path^="rental-application"], [data-path^="/rental-application"]) .frappe-control[data-fieldtype="Select"] .control-value.like-disabled-input {
  display: none !important;
}

/* Firefox can render focused selects with transparent glyph color. */
body:is([data-path^="rental-application"], [data-path^="/rental-application"]) select.form-control:-moz-focusring,
body:is([data-path^="rental-application"], [data-path^="/rental-application"]) select.input-with-feedback.form-control:-moz-focusring {
  color: transparent !important;
  text-shadow: 0 0 0 #151515 !important;
}

/* Ensure Frappe "hide" semantics always work on these routes. */
body:is([data-path^="rental-application"], [data-path^="/rental-application"]) .hide,
body:is([data-path^="book_showing"], [data-path^="/book_showing"]) .hide,
body:is([data-path^="rental-application"], [data-path^="/rental-application"]) .success-page.hide,
body:is([data-path^="book_showing"], [data-path^="/book_showing"]) .success-page.hide {
  display: none !important;
}

/* Hide fieldname tooltips (debug helpers) on public forms. */
body:is([data-path^="rental-application"], [data-path^="/rental-application"]) .tooltip-content,
body:is([data-path^="book_showing"], [data-path^="/book_showing"]) .tooltip-content {
  display: none !important;
}

/* AirDatepicker injects `.datepickers-container` into the DOM for Date/Datetime
   controls. Keep it overlay-only (never in normal document flow) while still
   allowing the picker to open and be clickable. */
body:is([data-path^="rental-application"], [data-path^="/rental-application"]) .datepickers-container,
body:is([data-path^="book_showing"], [data-path^="/book_showing"]) .datepickers-container {
  position: fixed !important;
  left: 0 !important;
  top: 0 !important;
  width: 0 !important;
  height: 0 !important;
  overflow: visible !important;
  z-index: 9999 !important;
}

body:is([data-path^="rental-application"], [data-path^="/rental-application"]) .datepickers-container .datepicker,
body:is([data-path^="book_showing"], [data-path^="/book_showing"]) .datepickers-container .datepicker {
  pointer-events: none;
}

body:is([data-path^="rental-application"], [data-path^="/rental-application"]) .datepickers-container .datepicker.active,
body:is([data-path^="book_showing"], [data-path^="/book_showing"]) .datepickers-container .datepicker.active {
  pointer-events: auto;
}

/* Mobile: remove extra padding around the form container. */
@media screen and (max-width: 767px) {
  body:is([data-path^="rental-application"], [data-path^="/rental-application"]) .web-form-container,
  body:is([data-path^="book_showing"], [data-path^="/book_showing"]) .web-form-container {
    padding: 0 !important;
  }
}