/* TLX Consultation – Fullscreen Popup (site-wide trigger)
   This file is intentionally small and safe to load globally.
   The heavy form styles (consult.css) are loaded only when the popup opens.
*/

:root{
  --tlx-green: #111111;
}

/* Prevent theme smooth scrolling from affecting unlock scroll restoration */
html.tlx-no-smooth, html.tlx-no-smooth * { scroll-behavior: auto !important; }

/* --- Overlay + fullscreen sheet --- */
/*
  NOTE:
  On HTML elements, `pointer-events:none` on a parent does not reliably
  prevent hit-testing on positioned descendants across browsers.
  We therefore toggle pointer-events on the dialog + close button explicitly.
*/
.tlx-consult-modal.tlx-consult-modal--fullscreen{
  position: fixed;
  inset: 0;
  z-index: 999999;
  /*
    IMPORTANT:
    pointer-events:none on the wrapper makes the entire modal subtree
    non-interactive in several browsers. We only disable hit-testing
    when CLOSED (and while CLOSING to avoid invisible blockers).
  */
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 220ms ease, visibility 0s linear 220ms;
}

/* Open state: interactive + visible */
.tlx-consult-modal.tlx-consult-modal--fullscreen.is-open{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  /*
    Force hit-testing ON while open.
    Some builder/theme stacks apply pointer-events rules to overlays/modals;
    we override aggressively to ensure inputs/buttons are clickable.
  */

  transition: opacity 220ms ease;
}

/* Closing state: keep visible so it can fade out, but allow page interaction */
.tlx-consult-modal.tlx-consult-modal--fullscreen.is-closing{
  opacity: 0;
  visibility: visible;
  pointer-events: none;
  transition: opacity 220ms ease;
}

/* Ensure the dialog subtree is always interactive while open */
.tlx-consult-modal--fullscreen.is-open .tlx-consult-modal__dialog,
.tlx-consult-modal--fullscreen.is-open .tlx-consult-modal__dialog *{

}

/* Hard safety: if something goes wrong with classes, never let a closed modal
   block the page. This also helps if other CSS overrides our pointer-events. */
.tlx-consult-modal--fullscreen[aria-hidden="true"]{
  pointer-events: none !important;
}
.tlx-consult-modal--fullscreen[aria-hidden="false"]{
  pointer-events: auto !important;
}

/* Keep the close button clickable above everything */
.tlx-consult-modal--fullscreen .tlx-consult-modal__close{ pointer-events: auto !important; }

.tlx-consult-modal--fullscreen .tlx-consult-modal__overlay{
  position: absolute;
  inset: 0;
  /* FULLSCREEN WHITE (no split + no blur). We keep the overlay for semantics
     and to avoid theme CSS targeting it, but it does not intercept clicks. */
  background: #ffffff;
  opacity: 1;
  pointer-events: none;
  transition: none;
}

/* Overlay is always white in fullscreen mode */
.tlx-consult-modal--fullscreen.is-open .tlx-consult-modal__overlay{ opacity: 1; }

.tlx-consult-modal--fullscreen .tlx-consult-modal__dialog{
  /* Hard override of consult.css modal styles (which are for the centered modal)
     to guarantee TRUE fullscreen behavior. */
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  max-height: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  display: block !important;
  overflow: auto !important;
  -webkit-overflow-scrolling: touch;
  background: #ffffff !important;
  z-index: 1;

  /* Avoid transforms on the scrollable fullscreen container.
     iOS Safari can get "stuck" with taps/scroll after transform animations
     on fixed + overflow:auto layers. We animate opacity only here and do
     the "waterfall" effect on inner content instead. */
  opacity: 0;
  transition: opacity 180ms ease;
}

.tlx-consult-modal--fullscreen.is-open .tlx-consult-modal__dialog{
  opacity: 1;
}

/* Content wrapper to match your “page” layout */
.tlx-consult-modal--fullscreen .tlx-consult-modal__content{
  min-height: 100dvh;
  min-height: 100svh;
  padding: clamp(18px, 3.6vw, 70px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.tlx-consult-modal--fullscreen .tlx-consult-modal__sheet{
  width: min(1120px, 100%);
  background: transparent;
  padding: 0;
}

/* Header that matches the “white page” layout */
.tlx-popup-hero{
  text-align: center;
  margin: 0 auto 34px;
  max-width: 72ch;
}

.tlx-popup-hero__kicker{
  font: 600 12px/1.2 "Manrope", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tlx-green);
  margin-bottom: 10px;
}

.tlx-popup-hero__title{
  font: 500 clamp(34px, 4.2vw, 56px)/1.05 "Manrope", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  letter-spacing: -0.02em;
  color: #111;
  margin: 0 0 12px;
}

.tlx-popup-hero__sub{
  font: 400 18px/1.65 "Manrope", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: #3c3c3c;
  margin: 0;
}

/* Close button: top-right corner of the viewport */
.tlx-consult-modal--fullscreen .tlx-consult-modal__close{
  /* Reset to avoid Elementor/theme button styles */
  all: unset;
  position: fixed !important;
  top: calc(16px + env(safe-area-inset-top)) !important;
  right: calc(16px + env(safe-area-inset-right)) !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,0.96) !important;
  border: 1px solid rgba(0,0,0,0.10) !important;
  color: #111 !important;
  display: grid !important;
  place-items: center !important;
  font-size: 22px !important;
  line-height: 1 !important;
  cursor: pointer !important;
  z-index: 1000000 !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.18) !important;
  -webkit-tap-highlight-color: transparent;
  transition: transform 220ms cubic-bezier(.2,.8,.2,1), opacity 180ms ease;
}

/* Center the × visually (font metrics differ across browsers) */
.tlx-consult-modal--fullscreen .tlx-consult-modal__close-x{
  display: block;
  transform: translateY(-3px);
}

/* Lightweight loader shown while the form assets are fetched */
.tlx-popup-loading{
  width: 100%;
  min-height: 240px;
  display: grid;
  place-items: center;
  gap: 12px;
  padding: 40px 0;
}

.tlx-popup-loading__text{
  font: 500 14px/1.4 "Manrope", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: #5b5b5b;
}

.tlx-popup-spinner{
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 3px solid rgba(0,0,0,0.14);
  border-top-color: rgba(17,17,17,0.95);
  animation: tlxSpin 820ms linear infinite;
}

@keyframes tlxSpin{ to{ transform: rotate(360deg); } }

.tlx-consult-modal--fullscreen .tlx-consult-modal__close:hover{ transform: scale(1.04); }
.tlx-consult-modal--fullscreen .tlx-consult-modal__close:active{ transform: scale(0.98); }

/* Make sure the sheet has room for the close button on small screens */
@media (max-width: 560px){
  .tlx-consult-modal--fullscreen .tlx-consult-modal__content{ padding: 14px; }
  .tlx-consult-modal--fullscreen .tlx-consult-modal__close{
    top: calc(12px + env(safe-area-inset-top)) !important;
    right: calc(12px + env(safe-area-inset-right)) !important;
    width: 42px !important;
    height: 42px !important;
  }
}

/* --- “Waterfall” open animation: hero then form settles in --- */
.tlx-consult-modal--fullscreen.is-open .tlx-popup-hero{
  animation: tlxDropIn 620ms cubic-bezier(.16,1,.3,1) both;
}

.tlx-consult-modal--fullscreen.is-open .tlx-consult-shell{
  animation: tlxFadeUp 700ms cubic-bezier(.16,1,.3,1) 80ms both;
}

@keyframes tlxDropIn{
  from{ opacity: 0; transform: translateY(-10px); }
  to{ opacity: 1; transform: translateY(0); }
}

@keyframes tlxFadeUp{
  from{ opacity: 0; transform: translateY(14px); }
  to{ opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce){
  .tlx-consult-modal--fullscreen .tlx-consult-modal__overlay,
  .tlx-consult-modal--fullscreen .tlx-consult-modal__dialog{
    transition: none !important;
  }
  .tlx-consult-modal--fullscreen.is-open .tlx-popup-hero,
  .tlx-consult-modal--fullscreen.is-open .tlx-consult-shell{
    animation: none !important;
  }
}

/* --------------------------------------------------------------------------
   Trigger button styles (optional helpers)
   You can paste the HTML snippet with class="tlx-book-btn" anywhere.
---------------------------------------------------------------------------*/

.tlx-book-btn{
  font-family: "Manrope", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
  background: var(--tlx-green) !important;
  color: #ffffff !important;
  border: 0 !important;
  border-radius: 999px !important;
  padding: 14px 22px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  line-height: 1 !important;
  text-decoration: none !important;
  cursor: pointer !important;
  user-select: none !important;
  -webkit-tap-highlight-color: transparent;
  transition: transform 180ms ease, filter 180ms ease, opacity 180ms ease;
  justify-content: center;
}

.tlx-book-btn:hover{ transform: translateY(-1px) scale(1.01); filter: brightness(0.98); }
.tlx-book-btn:active{ transform: translateY(0) scale(0.99); filter: brightness(0.96); }
.tlx-book-btn:focus{ outline: none !important; }
.tlx-book-btn:focus-visible{ box-shadow: 0 0 0 4px rgba(17,17,17,0.28) !important; }

.tlx-book-btn__icon{
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
}

.tlx-book-btn__icon svg{ width: 18px; height: 18px; }

.tlx-book-btn--menu{
  padding: 10px 16px !important;
  font-size: 13px !important;
}