@import url("https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,100..900;1,9..144,100..900&family=Josefin+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap");

/* ==========================================================================
   Collins / DesignMyNight (DMN) booking widget skin

   This file overrides DMN defaults in two places:

   1) Embedded widget — mounted inside `#dmn-booking-host` (see `js/booking.js`)
      as a centred modal, consistent with `.tst-popup-bg`.

   2) DMN-hosted second stage — Collins loads this same file from the domain
      (see `stylesheet` / `stylesheet-href` on the widget script) on
      designmynight.com. Rules for that flow are scoped with `:has()` so they
      do not affect the main George site (this stylesheet is also linked in
      `base.njk`).

   If the site’s fonts/colours/radius/spacing are updated, review and update
   these overrides accordingly.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Modal host — mirrors `.tst-popup-bg` + `.tst-popup-frame` behaviour
   -------------------------------------------------------------------------- */

.dmn-booking-host {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background-image: linear-gradient(
    270deg,
    rgba(4, 25, 29, 0.9) 0%,
    rgba(4, 25, 29, 0.9) 70%
  );
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.35s ease-in-out, visibility 0.35s ease-in-out;
}

.dmn-booking-host--visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.dmn-booking-host__sr-title {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Panel card — matches `.tst-popup-bg .tst-popup-frame` */
.dmn-booking-host__panel {
  position: relative;
  width: min(100%, 560px);
  max-height: min(90vh, 880px);
  margin: 40px auto;
  padding: 0;
  text-align: left;
  background-color: #f2f6f7;
  border-radius: 10px;
  box-shadow: 0 5px 10px 0 rgba(26, 47, 51, 0.15);
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Decorative strips like `.tst-popup-frame:before` / `:after` */
.dmn-booking-host__panel::before {
  content: "";
  display: block;
  height: 10px;
  width: calc(100% - 30px);
  margin: 0 auto;
  border-radius: 5px 5px 0 0;
  background-color: #f2f6f7;
  opacity: 0.35;
}

.dmn-booking-host__panel::after {
  content: "";
  display: block;
  height: 10px;
  width: calc(100% - 30px);
  margin: 0 auto;
  border-radius: 0 0 5px 5px;
  background-color: #f2f6f7;
  opacity: 0.2;
}

.dmn-booking-host__close {
  position: absolute;
  top: 22px;
  right: 22px;
  z-index: 6;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  background: transparent;
  color: #1a2f33;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  transition: color 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.dmn-booking-host__close:hover {
  color: #e74c3c;
  transform: scale(1.15);
}

@media (max-width: 992px) {
  .dmn-booking-host {
    padding: 0 45px;
  }
}

@media (max-width: 790px) {
  .dmn-booking-host {
    align-items: flex-start;
    padding: 100px 10px 16px;
  }

  .dmn-booking-host__panel {
    width: 100%;
    max-height: calc(100vh - 115px);
    margin-top: 0;
  }
}

/* --------------------------------------------------------------------------
   Theme tokens (mirrors `css/style.css`)
   -------------------------------------------------------------------------- */

:root {
  --george-font-sans: "Josefin Sans", sans-serif;
  --george-font-serif: "Fraunces", serif;
  --george-accent: #f39c12;
  --george-text: #1a2f33;
  --george-surface: #f2f6f7;
  --george-surface-2: #ffffff;
  --george-border: rgba(26, 47, 51, 0.12);
  --george-shadow: 0 2px 12px 0 rgba(26, 47, 51, 0.12);
  --george-radius: 5px;
  --george-input-h: 50px;
}

/* --------------------------------------------------------------------------
   DMN root inside our panel — high specificity to beat `onsass` defaults
   -------------------------------------------------------------------------- */

.dmn-booking-host__panel #dmn-partner-widget {
  position: relative;
  z-index: 1;
  font-family: var(--george-font-sans) !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
  color: var(--george-text) !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  /* Extra top padding so content clears the host close control */
  padding: 48px 28px 32px !important;
  margin: 0 !important;
  max-width: none !important;
}

.dmn-booking-host__note {
  padding: 0 28px 24px;
  margin: 0;
  text-align: center !important;
  font-family: var(--george-font-sans) !important;
  font-size: 16px !important;
  line-height: 1.45 !important;
  color: rgba(26, 47, 51, 0.75) !important;
}

.dmn-booking-host__note a {
  color: var(--george-text);
  text-decoration: underline;
  font-weight: 700;
}

.dmn-booking-host__panel #dmn-widget-inner {
  font-family: inherit !important;
  color: inherit !important;
}

.dmn-booking-host__panel #dmn-partner-widget h1,
.dmn-booking-host__panel #dmn-partner-widget h2,
.dmn-booking-host__panel #dmn-partner-widget h3,
.dmn-booking-host__panel #dmn-partner-widget h4,
.dmn-booking-host__panel #dmn-partner-widget h5 {
  font-family: var(--george-font-serif) !important;
  color: var(--george-text) !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
}

.dmn-booking-host__panel #dmn-partner-widget [class*="stage"],
.dmn-booking-host__panel #dmn-partner-widget [class*="Stage"] {
  font-family: var(--george-font-sans) !important;
}

/* Vue transition wrappers often used by DMN */
.dmn-booking-host__panel #dmn-partner-widget [class^="dmn-"],
.dmn-booking-host__panel #dmn-partner-widget [class*=" dmn-"] {
  font-family: var(--george-font-sans) !important;
  color: var(--george-text) !important;
}

/* Inputs — match `form input` in theme */
.dmn-booking-host__panel #dmn-partner-widget input[type="text"],
.dmn-booking-host__panel #dmn-partner-widget input[type="email"],
.dmn-booking-host__panel #dmn-partner-widget input[type="tel"],
.dmn-booking-host__panel #dmn-partner-widget input[type="number"],
.dmn-booking-host__panel #dmn-partner-widget input[type="search"],
.dmn-booking-host__panel #dmn-partner-widget select,
.dmn-booking-host__panel #dmn-partner-widget textarea {
  font-family: var(--george-font-sans) !important;
  color: var(--george-text) !important;
  background-color: var(--george-surface-2) !important;
  border: 1px solid rgba(26, 47, 51, 0.18) !important;
  border-radius: var(--george-radius) !important;
  box-shadow: 0 2px 5px 0 rgba(26, 47, 51, 0.11) !important;
}

.dmn-booking-host__panel #dmn-partner-widget input:not([type="checkbox"]):not([type="radio"]),
.dmn-booking-host__panel #dmn-partner-widget select {
  min-height: var(--george-input-h) !important;
  padding: 0 20px !important;
}

.dmn-booking-host__panel #dmn-partner-widget textarea {
  padding: 14px 20px !important;
  min-height: 100px !important;
  resize: vertical !important;
}

.dmn-booking-host__panel #dmn-partner-widget input:focus,
.dmn-booking-host__panel #dmn-partner-widget select:focus,
.dmn-booking-host__panel #dmn-partner-widget textarea:focus {
  outline: none !important;
  border-color: rgba(243, 156, 18, 0.65) !important;
  box-shadow:
    0 2px 5px 0 rgba(26, 47, 51, 0.11),
    0 0 0 3px rgba(243, 156, 18, 0.18) !important;
}

/* Primary actions — match `.tst-btn` */
.dmn-booking-host__panel #dmn-partner-widget button[type="submit"],
.dmn-booking-host__panel #dmn-partner-widget .btn-primary-customer-journey,
.dmn-booking-host__panel #dmn-partner-widget button.btn-primary,
.dmn-booking-host__panel #dmn-partner-widget a.btn-primary {
  background-color: var(--george-accent) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--george-radius) !important;
  font-family: var(--george-font-sans) !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 2px !important;
  font-size: 14px !important;
  min-height: var(--george-input-h) !important;
  padding: 0 30px !important;
  transition: filter 0.3s ease-in-out, transform 0.3s ease-in-out, color 0.3s ease-in-out !important;
}

.dmn-booking-host__panel #dmn-partner-widget button[type="submit"]:hover,
.dmn-booking-host__panel #dmn-partner-widget .btn-primary-customer-journey:hover {
  filter: brightness(108%) !important;
  transform: scale(1.015) !important;
  color: var(--george-text) !important;
}

.dmn-booking-host__panel #dmn-partner-widget a:not(.btn-primary) {
  color: var(--george-accent) !important;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(243, 156, 18, 0.35) !important;
}

.dmn-booking-host__panel #dmn-partner-widget a:not(.btn-primary):hover {
  filter: brightness(108%);
}

/* Secondary / ghost buttons */
.dmn-booking-host__panel #dmn-partner-widget button[type="button"],
.dmn-booking-host__panel #dmn-partner-widget .btn-secondary {
  border-radius: var(--george-radius) !important;
  font-family: var(--george-font-sans) !important;
}

/* --------------------------------------------------------------------------
   DMN-hosted second stage (full page on designmynight.com)

   Scoped so they never match the George site: we exclude the embedded modal
   host (`#dmn-booking-host`) where `.order-summary` etc. may appear inside the
   widget. `.venue-photo` is treated as DMN full-page chrome.
   -------------------------------------------------------------------------- */

body:has(.venue-photo),
body:has(.order-summary):not(:has(#dmn-booking-host)) {
  font-family: var(--george-font-sans) !important;
  color: var(--george-text) !important;
  background-color: var(--george-surface) !important;
  -webkit-font-smoothing: antialiased;
}

body:has(.venue-photo) .venue-photo,
body:has(.order-summary):not(:has(#dmn-booking-host)) .venue-photo {
  border-radius: 0 0 var(--george-radius) var(--george-radius);
  overflow: hidden;
  box-shadow: var(--george-shadow);
}

body:has(.venue-photo) [class*="progress"],
body:has(.venue-photo) [class*="Progress"],
body:has(.venue-photo) [class*="step"],
body:has(.venue-photo) [class*="Step"],
body:has(.order-summary):not(:has(#dmn-booking-host)) [class*="progress"],
body:has(.order-summary):not(:has(#dmn-booking-host)) [class*="Progress"] {
  font-family: var(--george-font-sans) !important;
  color: var(--george-text) !important;
}

body:has(.venue-photo) [class*="progress"] [class*="active"],
body:has(.venue-photo) [class*="step"][class*="active"],
body:has(.order-summary):not(:has(#dmn-booking-host)) [class*="active"] {
  color: var(--george-accent) !important;
}

body:has(.venue-photo) h1,
body:has(.venue-photo) h2,
body:has(.venue-photo) h3,
body:has(.order-summary):not(:has(#dmn-booking-host)) h1,
body:has(.order-summary):not(:has(#dmn-booking-host)) h2,
body:has(.order-summary):not(:has(#dmn-booking-host)) h3 {
  font-family: var(--george-font-serif) !important;
  color: var(--george-text) !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
}

body:has(.venue-photo) label,
body:has(.order-summary):not(:has(#dmn-booking-host)) label {
  font-family: var(--george-font-sans) !important;
  color: var(--george-text) !important;
  font-weight: 600 !important;
}

body:has(.venue-photo) input[type="text"],
body:has(.venue-photo) input[type="email"],
body:has(.venue-photo) input[type="tel"],
body:has(.venue-photo) input[type="number"],
body:has(.venue-photo) input[type="search"],
body:has(.venue-photo) input[type="password"],
body:has(.venue-photo) input[type="date"],
body:has(.venue-photo) select,
body:has(.venue-photo) textarea,
body:has(.order-summary):not(:has(#dmn-booking-host)) input[type="text"],
body:has(.order-summary):not(:has(#dmn-booking-host)) input[type="email"],
body:has(.order-summary):not(:has(#dmn-booking-host)) input[type="tel"],
body:has(.order-summary):not(:has(#dmn-booking-host)) input[type="number"],
body:has(.order-summary):not(:has(#dmn-booking-host)) input[type="search"],
body:has(.order-summary):not(:has(#dmn-booking-host)) input[type="password"],
body:has(.order-summary):not(:has(#dmn-booking-host)) input[type="date"],
body:has(.order-summary):not(:has(#dmn-booking-host)) select,
body:has(.order-summary):not(:has(#dmn-booking-host)) textarea {
  font-family: var(--george-font-sans) !important;
  color: var(--george-text) !important;
  background-color: var(--george-surface-2) !important;
  border: 1px solid rgba(26, 47, 51, 0.18) !important;
  border-radius: var(--george-radius) !important;
  box-shadow: 0 2px 5px 0 rgba(26, 47, 51, 0.11) !important;
}

body:has(.venue-photo) input:not([type="checkbox"]):not([type="radio"]),
body:has(.venue-photo) select,
body:has(.order-summary):not(:has(#dmn-booking-host)) input:not([type="checkbox"]):not([type="radio"]),
body:has(.order-summary):not(:has(#dmn-booking-host)) select {
  min-height: var(--george-input-h) !important;
  padding: 0 20px !important;
}

body:has(.venue-photo) textarea,
body:has(.order-summary):not(:has(#dmn-booking-host)) textarea {
  padding: 14px 20px !important;
  min-height: 100px !important;
  resize: vertical !important;
}

body:has(.venue-photo) input:focus,
body:has(.venue-photo) select:focus,
body:has(.venue-photo) textarea:focus,
body:has(.order-summary):not(:has(#dmn-booking-host)) input:focus,
body:has(.order-summary):not(:has(#dmn-booking-host)) select:focus,
body:has(.order-summary):not(:has(#dmn-booking-host)) textarea:focus {
  outline: none !important;
  border-color: rgba(243, 156, 18, 0.65) !important;
  box-shadow:
    0 2px 5px 0 rgba(26, 47, 51, 0.11),
    0 0 0 3px rgba(243, 156, 18, 0.18) !important;
}

body:has(.venue-photo) input[aria-invalid="true"],
body:has(.venue-photo) select[aria-invalid="true"],
body:has(.venue-photo) textarea[aria-invalid="true"],
body:has(.venue-photo) .error,
body:has(.venue-photo) .field-error,
body:has(.venue-photo) .invalid-feedback,
body:has(.order-summary):not(:has(#dmn-booking-host)) input[aria-invalid="true"],
body:has(.order-summary):not(:has(#dmn-booking-host)) .error,
body:has(.order-summary):not(:has(#dmn-booking-host)) .field-error,
body:has(.order-summary):not(:has(#dmn-booking-host)) .invalid-feedback {
  border-color: #e74c3c !important;
}

body:has(.venue-photo) .error,
body:has(.venue-photo) .field-error,
body:has(.venue-photo) .invalid-feedback,
body:has(.venue-photo) [class*="error-message"],
body:has(.order-summary):not(:has(#dmn-booking-host)) .error,
body:has(.order-summary):not(:has(#dmn-booking-host)) .field-error,
body:has(.order-summary):not(:has(#dmn-booking-host)) .invalid-feedback {
  color: #c0392b !important;
  font-family: var(--george-font-sans) !important;
  font-size: 14px !important;
}

body:has(.venue-photo) .btn-primary-customer-journey,
body:has(.venue-photo) .btn-submit-booking,
body:has(.venue-photo) button[type="submit"].btn-primary,
body:has(.order-summary):not(:has(#dmn-booking-host)) .btn-primary-customer-journey,
body:has(.order-summary):not(:has(#dmn-booking-host)) .btn-submit-booking,
body:has(.order-summary):not(:has(#dmn-booking-host)) button[type="submit"].btn-primary {
  background-color: var(--george-accent) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--george-radius) !important;
  font-family: var(--george-font-sans) !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 2px !important;
  font-size: 14px !important;
  min-height: var(--george-input-h) !important;
  padding: 0 30px !important;
  transition: filter 0.3s ease-in-out, transform 0.3s ease-in-out, color 0.3s ease-in-out !important;
}

body:has(.venue-photo) .btn-primary-customer-journey:hover,
body:has(.venue-photo) .btn-submit-booking:hover,
body:has(.order-summary):not(:has(#dmn-booking-host)) .btn-primary-customer-journey:hover,
body:has(.order-summary):not(:has(#dmn-booking-host)) .btn-submit-booking:hover {
  filter: brightness(108%) !important;
  transform: scale(1.015) !important;
  color: var(--george-text) !important;
}

body:has(.venue-photo) .btn-add-diatary-requirements,
body:has(.order-summary):not(:has(#dmn-booking-host)) .btn-add-diatary-requirements {
  border-radius: var(--george-radius) !important;
  font-family: var(--george-font-sans) !important;
}

body:has(.venue-photo) .order-summary,
body:has(.order-summary):not(:has(#dmn-booking-host)) .order-summary {
  font-family: var(--george-font-sans) !important;
  color: var(--george-text) !important;
  background-color: var(--george-surface-2) !important;
  border: 1px solid var(--george-border) !important;
  border-radius: var(--george-radius) !important;
  box-shadow: var(--george-shadow) !important;
}

body:has(.venue-photo) .preorder-menus h2,
body:has(.order-summary):not(:has(#dmn-booking-host)) .preorder-menus h2 {
  font-family: var(--george-font-serif) !important;
  color: var(--george-text) !important;
}

body:has(.venue-photo) .preorder-payment-instructions,
body:has(.venue-photo) .instruction-summary,
body:has(.venue-photo) .preorder-payment-advance-warning,
body:has(.order-summary):not(:has(#dmn-booking-host)) .preorder-payment-instructions,
body:has(.order-summary):not(:has(#dmn-booking-host)) .instruction-summary,
body:has(.order-summary):not(:has(#dmn-booking-host)) .preorder-payment-advance-warning {
  font-family: var(--george-font-sans) !important;
  color: var(--george-text) !important;
}

body:has(.venue-photo) .alert-preorder-payment,
body:has(.venue-photo) .alert-preorder-requirements,
body:has(.venue-photo) .alert-alternative-availability,
body:has(.order-summary):not(:has(#dmn-booking-host)) .alert-preorder-payment,
body:has(.order-summary):not(:has(#dmn-booking-host)) .alert-preorder-requirements,
body:has(.order-summary):not(:has(#dmn-booking-host)) .alert-alternative-availability {
  font-family: var(--george-font-sans) !important;
  border-radius: var(--george-radius) !important;
  border-left: 4px solid var(--george-accent) !important;
  background-color: rgba(243, 156, 18, 0.08) !important;
  color: var(--george-text) !important;
}

body:has(.venue-photo) .booking-confirmation,
body:has(.venue-photo) [class*="confirmation"],
body:has(.venue-photo) [class*="success"],
body:has(.order-summary):not(:has(#dmn-booking-host)) .booking-confirmation,
body:has(.order-summary):not(:has(#dmn-booking-host)) [class*="confirmation"],
body:has(.order-summary):not(:has(#dmn-booking-host)) [class*="success"] {
  font-family: var(--george-font-sans) !important;
  color: var(--george-text) !important;
}

body:has(.venue-photo) .booking-confirmation h1,
body:has(.venue-photo) .booking-confirmation h2,
body:has(.order-summary):not(:has(#dmn-booking-host)) .booking-confirmation h1,
body:has(.order-summary):not(:has(#dmn-booking-host)) .booking-confirmation h2 {
  font-family: var(--george-font-serif) !important;
}

/* --------------------------------------------------------------------------
   Fallback: DMN classes if structure differs (lower priority than above)
   -------------------------------------------------------------------------- */

.dmn-booking-widget,
[class^="dmn-"],
[class*=" dmn-"] {
  font-family: var(--george-font-sans) !important;
}

.booking-modal__content,
.booking-container,
.dmn-modal__content {
  border-radius: var(--george-radius) !important;
}

.dmn-modal__overlay,
.dmn-overlay,
.booking-overlay {
  background: rgba(4, 25, 29, 0.9) !important;
}