/* ============================================================
   daycrunch® — pb3 widget theme  (theme.css)
   ------------------------------------------------------------
   Brand override for the Performance Buildings pbui widgets,
   authored against the widget source CSS (AssetList, AssetDetail,
   AssetBooking*). Default widget look is Roboto + Material purple
   (#6200ee) + grey chips + 8px radii; this maps it onto daycrunch:
   Libre Baskerville/Georgia serif, orange #F16D2D, ink neutrals,
   --r-btn/--r-card radii, bordered cards.

   Per the pbui README ("Customize CSS"), the widget CSS is inlined
   with high priority, so overrides use !important. Load AFTER
   daycrunch.css (so the --tokens resolve); included globally via
   includes/head.php. Final visual tuning happens on a live render.
   ============================================================ */

/* ---- font + native control accent on every widget root ---- */
pbui-asset-list,
pbui-asset-detail,
pbui-asset-list-availability,
pbui-asset-booking,
pbui-asset-booking-public,
pbui-asset-booking-detail,
pbui-parking-booking,
pbui-parking-booking-public,
pbui-my-bookings,
pbui-instant-booking,
pbui-auth,
pbui-signup,
.asset-list,
.asset-detail,
.booking-widget,
.booking-detail {
  font-family: "Libre Baskerville", Georgia, serif !important;
  color: var(--ink) !important;
  accent-color: var(--orange) !important;
}

/* ============ BUTTONS ============ */
/* filled / primary */
.pb-button,
.pbo-button,
.basic-button,
.long-button,
.asset-booking-button,
pbui-asset-booking-detail .pb-button-outline {
  font-family: Georgia, serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: none !important;
  border-radius: var(--r-btn) !important;
  border: 1.5px solid transparent !important;
  background: var(--orange) !important;
  color: #fff !important;
  padding: 0.82em 1.4em !important;
  line-height: 1 !important;
  box-shadow: 0 8px 22px -12px var(--orange) !important;
  transition: background 0.25s ease, transform 0.25s ease, color 0.25s ease, border-color 0.25s ease !important;
}
.pb-button:hover,
.pbo-button:hover,
.basic-button:hover,
.long-button:hover,
.asset-booking-button:hover,
pbui-asset-booking-detail .pb-button-outline:hover {
  background: var(--orange-deep) !important;
  transform: translateY(-2px) !important;
}
/* outline / secondary */
.pb-button-outline,
.pb-button-outline-2,
.pb-button-table-outline {
  background: transparent !important;
  color: var(--ink) !important;
  border: 1.5px solid var(--ink) !important;
  box-shadow: none !important;
  border-radius: var(--r-btn) !important;
  font-family: Georgia, serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: none !important;
  padding: 0.78em 1.3em !important;
  transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease !important;
}
.pb-button-outline:hover,
.pb-button-outline-2:hover,
.pb-button-table-outline:hover {
  background: var(--ink) !important;
  color: var(--cream) !important;
  transform: translateY(-2px) !important;
}
.pb-button-small {
  padding: 0.6em 1em !important;
  font-size: 0.8rem !important;
}
.pb-chip {
  font-family: Georgia, serif !important;
  font-weight: 700 !important;
  font-size: 0.74rem !important;
  background: var(--white) !important;
  color: var(--ink) !important;
  border: 1px solid var(--line) !important;
  border-radius: 20px !important;
  padding: 0.4em 0.75em !important;
}

/* ============ FILTER SELECTORS (pax / type / floor / building) ============ */
.type-selector,
.building-selector {
  justify-content: flex-start !important;
}
.general-booking-selectors {
  justify-content: flex-start !important;
}
.pax-selector-label,
.floor-selector-label,
.multiselect-label,
.select-view-by-label {
  font-family: Georgia, serif !important;
  font-weight: 700 !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--ink-faint) !important;
}
/* pax dropdown */
.pax-selector select {
  font-family: "Libre Baskerville", Georgia, serif !important;
  font-size: 0.95rem !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-btn) !important;
  background: var(--white) !important;
  color: var(--ink) !important;
  box-shadow: none !important;
  height: auto !important;
  padding: 0.6em 0.85em !important;
}
/* building chips */
.building-selector-item {
  font-family: Georgia, serif !important;
  font-size: 0.86rem !important;
  font-weight: 700 !important;
  background: var(--white) !important;
  color: var(--ink) !important;
  border: 1px solid var(--line) !important;
  border-radius: 20px !important;
  padding: 0.5em 0.9em !important;
}
.building-selector-item:hover,
.building-selector-item-active {
  background: color-mix(in srgb, var(--orange) 12%, white) !important;
  color: var(--orange-deep) !important;
  border-color: color-mix(in srgb, var(--orange) 45%, white) !important;
}
.building-selector-item-city {
  color: var(--ink-faint) !important;
  font-weight: 400 !important;
}
/* type chips */
.type-selector-item {
  font-family: Georgia, serif !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  background: var(--white) !important;
  color: var(--ink) !important;
  border: 1px solid var(--line) !important;
  border-radius: 20px !important;
  padding: 0.5em 0.9em !important;
}
.type-selector-item:hover,
.type-selector-item-active {
  background: color-mix(in srgb, var(--orange) 12%, white) !important;
  color: var(--orange-deep) !important;
  border-color: color-mix(in srgb, var(--orange) 45%, white) !important;
}
.type-selector-item-disabled,
.type-selector-item-disabled:hover {
  color: var(--ink-faint) !important;
  background: var(--white) !important;
  border-color: var(--line-soft) !important;
  opacity: 0.6 !important;
}
/* floor radio */
.floor-selector-item:hover .floor-selector-radio {
  border-color: var(--orange) !important;
}
.floor-selector-radio {
  border-color: var(--ink-faint) !important;
}
.floor-selector-radio-active {
  border-color: var(--orange) !important;
  background-color: var(--orange) !important;
}

/* ============ ASSET LIST + TILES (room cards) ============ */
.asset-list-grid {
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) !important;
  gap: clamp(14px, 1.6vw, 20px) !important;
}
.asset-tile {
  background: var(--white) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-card) !important;
  overflow: hidden !important;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease !important;
}
.asset-tile:hover {
  border-color: color-mix(in srgb, var(--orange) 40%, var(--line)) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 14px 30px -22px rgba(35, 33, 30, 0.5) !important;
}
.asset-tile-image {
  border-radius: 0 !important;
}
.asset-tile-infobox {
  background: var(--white) !important;
  padding: 1rem 1.1rem 1.15rem !important;
  font-family: "Libre Baskerville", Georgia, serif !important;
  color: var(--ink) !important;
}
.asset-tile-infobox-type {
  font-family: Georgia, serif !important;
  font-weight: 700 !important;
  font-size: 0.68rem !important;
  letter-spacing: 0.13em !important;
  text-transform: uppercase !important;
  color: var(--orange) !important;
  margin-bottom: 0.25rem !important;
}
.asset-tile-infobox-display {
  font-family: "Libre Baskerville", Georgia, serif !important;
  font-weight: 700 !important;
  font-size: 1.12rem !important;
  line-height: 1.2 !important;
  color: var(--ink) !important;
}
.asset-tile-infobox-pax {
  color: var(--ink-soft) !important;
  font-size: 0.86rem !important;
}
.asset-tile-infobox-price {
  color: var(--ink) !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
}

/* ============ AVAILABILITY CHIP ============ */
.availability-chip,
.pbo-availability-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.4em !important;
  font-family: Georgia, serif !important;
  font-weight: 700 !important;
  font-size: 0.66rem !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  padding: 0.34em 0.62em !important;
  border-radius: 20px !important;
  background: color-mix(in srgb, #1f8a5b 14%, white) !important;
  color: #1f8a5b !important;
  border: 1px solid color-mix(in srgb, #1f8a5b 30%, white) !important;
}

/* ============ FLOORPLAN ============ */
.floorplan-details {
  border-radius: var(--r-card) !important;
  border: 1px solid var(--line) !important;
  background: var(--white) !important;
}
.floorplan-details h4 {
  font-family: "Libre Baskerville", Georgia, serif !important;
  color: var(--ink) !important;
}
.floorplan-room {
  fill: color-mix(in srgb, var(--orange) 55%, transparent) !important;
}
.floorplan-room:hover {
  border-color: var(--orange) !important;
}

/* ============ ASSET DETAIL + HEADER ============ */
.asset-header-headline {
  font-family: "Libre Baskerville", Georgia, serif !important;
  font-weight: 700 !important;
  letter-spacing: -0.005em !important;
  line-height: 1.12 !important;
  color: var(--ink) !important;
}
.asset-location-display {
  color: var(--ink-faint) !important;
}
.asset-detail-description,
.asset-detail-description ul,
.asset-detail-description li {
  color: var(--ink-soft) !important;
  line-height: 1.6 !important;
}
.asset-detail-description-list-icon {
  color: var(--orange) !important;
}
.asset-detail-image-container,
.asset-detail-image,
.asset-detail-image-tour,
.floorplan-details-image {
  border-radius: var(--r-card) !important;
  overflow: hidden !important;
}
.asset-booking-container,
.asset-booking,
.asset-request {
  border-radius: var(--r-card) !important;
  border: 1px solid var(--line) !important;
}

/* ============ BOOKING DETAIL (headline + invitees) ============ */
.booking-headline {
  font-family: "Libre Baskerville", Georgia, serif !important;
  color: var(--ink) !important;
  font-weight: 700 !important;
}
.pb-invitee-item-name-abbreviation-bg {
  background-color: color-mix(in srgb, var(--orange) 16%, white) !important;
}
.pb-invitee-item-name-abbreviation {
  color: var(--orange-deep) !important;
}

/* ============ AUTH widget (nav login / logout) ============ */
pbui-auth .pb-button,
pbui-auth .pbo-button {
  padding: 0.55em 1em !important;
  box-shadow: none !important;
  font-size: 0.8rem !important;
}

/* ============ SIGNUP widget (account creation form) ============ */
/* Light-DOM form controls inside <pbui-signup>. (If the widget uses shadow
   DOM these won't penetrate — then the widget must be themed via its own
   theme/::part hooks; this covers the common light-DOM case.) */
pbui-signup {
  display: block !important;
  color: var(--ink) !important;
  accent-color: var(--orange) !important;
}
pbui-signup label,
.signup label,
.signup-label {
  font-family: Georgia, serif !important;
  font-weight: 700 !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--ink-soft) !important;
}
/* The widget renders Material-UI <FilledInput>: an inner <input>/<select> sits
   inside a .MuiFilledInput-root wrapper that carries a grey fill + 4px radius +
   a bottom "underline". Theming only the inner control left the wrapper's near-
   square grey corners poking out behind the rounded input (the corner edges).
   Fix: the WRAPPER carries the white fill, border and radius; the inner control
   is transparent + borderless; the MUI underline pseudo-elements are removed. */
.pb-app .MuiInputBase-root,
.pb-app .MuiFilledInput-root,
.pb-app .MuiOutlinedInput-root,
.pb-app .pb-input {
  background: var(--white) !important;
  background-color: var(--white) !important;
  border: 1.5px solid var(--line) !important;
  border-radius: var(--r-btn) !important;
  box-shadow: none !important;
  overflow: hidden !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}
/* remove MUI's filled "underline" (bottom border drawn via pseudo-elements) */
.pb-app .MuiFilledInput-underline::before,
.pb-app .MuiFilledInput-underline::after,
.pb-app .MuiInput-underline::before,
.pb-app .MuiInput-underline::after {
  display: none !important;
  border: 0 !important;
  content: none !important;
}
/* the actual control inside the wrapper: transparent, borderless, square */
.pb-app input:not([type="checkbox"]):not([type="radio"]):([type="button"]),
.pb-app select,
.pb-app textarea,
.pb-app .MuiInputBase-input,
.pb-app .MuiSelect-select {
  font-family: "Libre Baskerville", Georgia, serif !important;
  font-size: 1rem !important;
  color: var(--ink) !important;
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0.8em 1em !important;
}
.pb-app .MuiSelect-select {
  padding-right: 2.4em !important;
}
/* focus ring lives on the wrapper, not the inner control */
.pb-app .MuiInputBase-root.Mui-focused,
.pb-app .MuiInputBase-root:focus-within {
  border-color: var(--orange) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--orange) 18%, transparent) !important;
}
/* keep the in-field adornment (password show/hide) area transparent */
.pb-app .MuiInputAdornment-root {
  background: transparent !important;
  background-color: transparent !important;
}
pbui-signup [type="submit"],
pbui-signup button[type="submit"],
pbui-signup .pb-button {
  font-family: Georgia, serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  background: var(--orange) !important;
  color: #fff !important;
  border: 1.5px solid transparent !important;
  border-radius: var(--r-btn) !important;
  padding: 0.82em 1.4em !important;
  box-shadow: 0 8px 22px -12px var(--orange) !important;
  transition: background 0.25s ease, transform 0.25s ease !important;
  width: auto !important;
  height: auto !important;
}
pbui-signup [type="submit"]:hover,
pbui-signup button[type="submit"]:hover,
pbui-signup .pb-button:hover {
  background: var(--orange-deep) !important;
  transform: translateY(-2px) !important;
}
/* password show/hide (and other in-field icon buttons) — NOT primary buttons */
pbui-signup button:not([type="submit"]):not(.pb-button) {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--ink-faint) !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0.2em !important;
  width: auto !important;
  height: auto !important;
}
pbui-signup button:not([type="submit"]) svg {
  width: 18px !important;
  height: 18px !important;
}
pbui-signup a {
  color: var(--orange-deep) !important;
}

.pb-app * {
  font-family: "Libre Baskerville", Georgia, serif !important;
}

.pb-app {
  padding: 0px !important;
}

.Mui-selected {
  background-color: var(--orange) !important;
}

.pb-container {
  padding-left: 0px !important;
  padding-right: 0px !important;
  margin-left: 0px !important;
  margin-right: 0px !important;
}

.booking-detail > .MuiGrid-container:first-of-type {
  margin-top: 0px !important;
}

.asset-location-display {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: Georgia, serif;
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* .pb-app .MuiInputBase-root {
  font-family: inherit;
  font-size: 0.9rem;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-btn);
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: border-color 0.2s;
} */

/* .pb-app .MuiInputBase-root::before {
  border-bottom: none !important;
} */

.pb-app .Mui-checked {
  color: var(--orange) !important;
}

pbui-invitee-edit-public .MuiGrid-container {
  padding-bottom: 16px !important;
}

pbui-invitee-edit-public .booking-headline {
  display: none;
}

.pb-app .MuiCard-root {
  box-shadow: none !important;
  border: 1px solid var(--line);
}

.pb-app .asset-tile-image img {
  border-radius: 4px;
}

.floorplan-details .pb-button-small {
  font-size: 12px;
  color: var(--orange) !important;
  transition: background 0.25s ease, transform 0.25s ease, color 0.25s ease, border-color 0.25s ease !important;
  border-radius: var(--r-btn) !important;
  border: 1.5px solid transparent !important;
}

.floorplan-details .pb-button-small:hover {
  border-color: var(--orange) !important;
}

pbui-asset-booking .type-selector,
pbui-asset-booking .building-selector,
pbui-asset-booking .floor-selector,
pbui-asset-booking .pax-selector,
pbui-asset-list .type-selector,
pbui-asset-list .building-selector,
pbui-asset-list .floor-selector,
pbui-asset-list .pax-selector {
  margin-bottom: 0px !important;
}

pbui-asset-booking-detail .booking-headline {
  display: none;
}