/* ==========================================================================
   Thunder Lawns – React Signup (signup.css) — v3.7.2
   Path: wp-content/mu-plugins/thunderlawns-core/frontend/react-signup/src/styles/signup.css
   ========================================================================== */

/* =========================
   Component constants (NO token bridge)
   ========================= */
#tl-react-signup-form {
  font-family: inherit;

  /* Surface / card / input backgrounds */
  --tl-surface-bg: var(--white);
  --tl-card-bg: var(--bg-ultra-light);
  --tl-input-bg: var(--white);

  /* Inputs: unify height + padding across native + input-group */
  --tl-input-min-h: 48px;
  --tl-input-pad-y: calc(var(--space-xs) * 0.75);
  --tl-input-pad-x: calc(var(--space-xs) * 0.75);
  --tl-input-lh: 1.2;

  /* Shared control border */
  --tl-input-border: 1px solid color-mix(in oklch, var(--bg-ultra-light-text) 22%, transparent);
   
  /* UI sizing tokens (normalize “magic numbers”) */
  --tl-btn-min-h: 44px;              /* was 44px */
  --tl-spinner-size: 16px;           /* was 16px */
  --tl-icon-size-s: 16px;            /* stars, small icons */
  --tl-progress-dot-size: 12px;      /* was 17px */
  --tl-progress-bar-h: 2px;          /* was 5px */
  --tl-scrollbar-w: 6px;             /* was 6px */
  --tl-stroke-w: 2px;                /* used for spinner + strokes */

  /* Micro spacing (only to eliminate 2/4px one-offs without inflating UI) */
  --tl-space-2xs: calc(var(--space-xs) / 2);
  --tl-space-3xs: calc(var(--space-xs) / 4);

  /* Validation message spacing (pull up to counter input bottom margin) */
  --tl-error-msg-mt: calc(var(--space-s) * -0.75);
   
  /* Make the main “surface” white */
  background: var(--tl-surface-bg);
}

/* ==========================================================================
   Base / Structure
   ========================================================================== */

.tl-signup-form-container,
.tl-react-signup-form {
  font-family: inherit;
}

/* Step visibility */
:where(#tl-react-signup-form) .tl-step { display: none; }
:where(#tl-react-signup-form) .tl-step.active { display: block; }

/* ==========================================================================
   Shared form control base (reduce drift)
   - Covers: property inputs, msform controls, input-group controls, dropdown
   - IMPORTANT: This exact selector list is repeated in:
     1) Focus blocks, 2) Invalid blocks, 3) @supports not selector(:focus-visible)
     If you add/remove a control selector here, update those too.   
   - NOTE: If adding new control selectors, update the selector list here
     and in the Focus + Invalid blocks below (kept explicit for plain-CSS).
   - Intentionally DOES NOT set border-radius, width, or margins (those vary)
   ========================================================================== */
:where(#tl-react-signup-form) :is(
  .property-input,
  .signup_dd_fix,
  .msform :is(input, textarea, select),
  .input-group :is(.form-control, input)
) {
  padding: var(--tl-input-pad-y) var(--tl-input-pad-x);
  min-height: var(--tl-input-min-h);
  box-sizing: border-box;

  background-color: var(--tl-input-bg);
  color: var(--bg-ultra-light-text);
  border: var(--tl-input-border);

  font-size: var(--text-m);
  line-height: var(--tl-input-lh);
  box-shadow: var(--box-shadow-1);
}

/* ==========================================================================
   Property form layout
   ========================================================================== */

:where(#tl-react-signup-form) .property-form .row-form {
  display: flex;
  gap: var(--space-s);
  margin-bottom: 0;
}

:where(#tl-react-signup-form) .property-form .col-4,
:where(#tl-react-signup-form) .property-form .col-6 {
  flex: 1;
  min-width: 0; 
}

:where(#tl-react-signup-form) .property-form .col-12 {
  width: 100%;
  min-width: 0; 
}

/* --------------------------------------------------------------------------
   Property Details: layout hooks (JSX-added classnames)
   - .contact-row: Email + Phone row (mobile stacking + independent gap)
   - .city-state-zip-row: City/State/Zip row (mobile stacking behavior)
   -------------------------------------------------------------------------- */

:where(#tl-react-signup-form) .property-input {
  border-radius: var(--radius);
  margin-bottom: var(--space-xs);
  width: 100%;
}

/* Placeholder styling (cross-browser) */
:where(#tl-react-signup-form) .property-input::placeholder,
:where(#tl-react-signup-form) .property-input::-webkit-input-placeholder,
:where(#tl-react-signup-form) .property-input::-moz-placeholder,
:where(#tl-react-signup-form) .property-input:-ms-input-placeholder,
:where(#tl-react-signup-form) .property-input:-moz-placeholder {
  color: color-mix(in oklch, var(--bg-ultra-light-text) 65%, transparent);
  opacity: 1;
}

/* ==========================================================================
   Summary + promise text
   ========================================================================== */

:where(#tl-react-signup-form) .service-summary {
  background: var(--tl-card-bg);
  border-radius: var(--radius);
  padding: var(--space-s) var(--space-s) 0 var(--space-s);
  margin: var(--space-l) 0;
  color: var(--bg-ultra-light-text);
}

/* Review step: Service Summary title now lives OUTSIDE the card */
:where(#tl-react-signup-form) .review-summary-block {
  margin: var(--space-m) 0 var(--space-s);
}

:where(#tl-react-signup-form) .review-summary-block .review-step-title {
  margin: 0 0 var(--tl-space-2xs) 0;
  text-align: center;
  font-size: var(--text-xl);
  line-height: 1.2;
  color: var(--bg-ultra-light-heading);
}

/* In review step, don’t add extra vertical height via the card’s own margin */
:where(#tl-react-signup-form) .review-summary-block .service-summary {
  margin: 0;
  padding-bottom: var(--space-s); 
}

/* Review step: tighten summary rows and remove Plan→Tax divider */
:where(#tl-react-signup-form) .review-summary-block .summary-item {
  padding: var(--tl-space-2xs) 0;
}
:where(#tl-react-signup-form) .review-summary-block .summary-total {
  padding: var(--tl-space-3xs) 0;
  margin: var(--tl-space-3xs) 0;
}
:where(#tl-react-signup-form) .review-summary-block #tax-row.summary-total {
  border-top: 0;
  padding-top: 0;
  margin-top: 0;
}
:where(#tl-react-signup-form) .review-summary-block .service-summary .summary-total:last-of-type {
  margin-bottom: var(--tl-space-2xs);
  padding-bottom: var(--space-xs);
}

:where(#tl-react-signup-form) .summary-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-xs) 0;
  border-bottom: 1px solid color-mix(in oklch, var(--bg-ultra-light-text) 14%, transparent);
}

:where(#tl-react-signup-form) .summary-item:last-child {
  border-bottom: none;
}

:where(#tl-react-signup-form) .item-name {
  font-size: var(--text-m-to-s);
  color: var(--bg-ultra-light-text);
}

/* --------------------------------------------------------------------------
   Review step: Service plan + cadence on separate lines (global)
   Expects JSX to render:
     <span className="summary-plan">...</span>
     <span className="summary-cadence">...</span>
   -------------------------------------------------------------------------- */
:where(#tl-react-signup-form) .item-name .summary-plan,
:where(#tl-react-signup-form) .item-name .summary-cadence {
  display: block;
}

/* Slight separation so it doesn't look like one wrapped line */
:where(#tl-react-signup-form) .item-name .summary-plan {
  line-height: 1.2;
}

:where(#tl-react-signup-form) .item-name .summary-cadence {
  margin-top: var(--tl-space-3xs);
  line-height: 1.2;
}

/* If the plan name is long, allow wrapping cleanly */
:where(#tl-react-signup-form) .item-name .summary-plan,
:where(#tl-react-signup-form) .item-name .summary-cadence {
  word-break: break-word;
}

:where(#tl-react-signup-form) .item-price {
  font-weight: 400;
  font-size: var(--text-m-to-s);
  color: var(--bg-ultra-light-text);
}

:where(#tl-react-signup-form) .summary-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--tl-space-2xs) 0;
  margin: var(--tl-space-2xs) 0;
  border-top: 1px solid color-mix(in oklch, var(--bg-ultra-light-text) 14%, transparent);
}

:where(#tl-react-signup-form) .total-label,
:where(#tl-react-signup-form) .total-value {
  font-size: var(--text-m-to-s);
  color: var(--bg-ultra-light-text);
}

/* Promise text */
:where(#tl-react-signup-form) .promise-text {
  background: var(--tl-card-bg);
  border: 1px solid color-mix(in oklch, var(--bg-ultra-light-text) 12%, transparent);
  border-radius: var(--radius);
  padding: var(--space-m);
  margin-top: var(--space-m);
  margin-bottom: 0;
  font-size: var(--text-s);
  line-height: 1.5;
  color: var(--bg-ultra-light-text);
}

:where(#tl-react-signup-form) .promise-text p { margin-bottom: 0; }

/* ==========================================================================
   Navigation buttons
   ========================================================================== */

:where(#tl-react-signup-form) .tl-navigation {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--content-gap);
  row-gap: var(--space-m);
}

:where(#tl-react-signup-form) .tl-navigation.single-button { justify-content: flex-end; }

/* Base button style (shared) */
:where(#tl-react-signup-form) .action-button,
:where(#tl-react-signup-form) #nextBtn,
:where(#tl-react-signup-form) #prevBtn,
:where(#tl-react-signup-form) .tl-pay-btn,
.tl-modal .tl-pay-btn {
  min-height: var(--tl-btn-min-h, 44px);
  padding: var(--btn-padding-block) var(--btn-padding-inline);
  border-radius: var(--btn-border-radius);
  font-weight: var(--btn-font-weight);
  font-size: var(--text-m);
  white-space: nowrap;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: background-color .3s ease, transform .2s ease;
}

:where(#tl-react-signup-form) :is(.action-button, .tl-pay-btn):active:not(:disabled),
:where(#tl-react-signup-form) :is(#nextBtn, #prevBtn):active:not(:disabled),
.tl-modal .tl-pay-btn:active:not(:disabled) {
  transform: translateY(0.5px);
}

/* Generic primary action-button variant */
:where(#tl-react-signup-form) .next.action-button,
:where(#tl-react-signup-form) .action-button.next {
  border: 0 none;
  background: var(--accent);
  color: var(--black);
}

:where(#tl-react-signup-form) .next.action-button:hover:not(:disabled),
:where(#tl-react-signup-form) .action-button.next:hover:not(:disabled),
:where(#tl-react-signup-form) #nextBtn:hover:not(:disabled),
:where(#tl-react-signup-form) .tl-pay-btn:hover:not(:disabled),
.tl-modal .tl-pay-btn:hover:not(:disabled) {
  background: var(--accent-hover);
}
 
:where(#tl-react-signup-form) .action-button {
  border: 0 none;
  width: 100%;
  max-width: 200px;
  text-align: center;
}

/* Next */
:where(#tl-react-signup-form) #nextBtn,
:where(#tl-react-signup-form) .tl-pay-btn,
.tl-modal .tl-pay-btn {
  border: 0 none;
  background: var(--accent);
  color: var(--black);
}

/* Prev (make icon + text darken together) */
:where(#tl-react-signup-form) #prevBtn {
  background: transparent;
  border: 0 none;
  color: color-mix(in oklch, var(--bg-ultra-light-text) 50%, transparent);
}

:where(#tl-react-signup-form) #prevBtn > span {
  color: inherit;
}

/* Stroke-only SVG so it doesn’t “fill in” */
:where(#tl-react-signup-form) #prevBtn svg,
:where(#tl-react-signup-form) #prevBtn svg * {
  fill: none;
  stroke: currentColor;
  stroke-width: var(--tl-stroke-w);
  stroke-linecap: round;
  stroke-linejoin: round;
}

:where(#tl-react-signup-form) #prevBtn:hover:not(:disabled) {
  color: color-mix(in oklch, var(--bg-ultra-light-text) 95%, transparent);
}

/* Disabled + busy (form + modal) */
:where(#tl-react-signup-form) :is(.action-button, .tl-pay-btn):disabled,
:where(#tl-react-signup-form) :is(#nextBtn, #prevBtn):disabled,
.tl-modal .tl-pay-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  filter: grayscale(10%);
  transform: none;
  box-shadow: none;
}

:where(#tl-react-signup-form) :is(.action-button, .tl-pay-btn)[aria-busy="true"],
:where(#tl-react-signup-form) :is(#nextBtn, #prevBtn)[aria-busy="true"],
.tl-modal .tl-pay-btn[aria-busy="true"] {
  pointer-events: none;
}

:where(#tl-react-signup-form) :is(.action-button, .tl-pay-btn)[aria-busy="true"]::after,
:where(#tl-react-signup-form) :is(#nextBtn, #prevBtn)[aria-busy="true"]::after,
.tl-modal .tl-pay-btn[aria-busy="true"]::after {
  content: "";
  position: absolute;
  right: var(--space-xs);
  top: 50%;
  width: var(--tl-spinner-size, 16px);
  height: var(--tl-spinner-size, 16px);
  border-radius: 50%;
  border: var(--tl-stroke-w, 2px) solid currentColor;
  border-top-color: transparent;
  animation: tl-spin 0.6s linear infinite;
  pointer-events: none;
  transform: translateY(-50%);
}

@keyframes tl-spin { to { transform: translateY(-50%) rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  :where(#tl-react-signup-form) :is(.action-button, .tl-pay-btn):active:not(:disabled),
  :where(#tl-react-signup-form) :is(#nextBtn, #prevBtn):active:not(:disabled),
  .tl-modal .tl-pay-btn:active:not(:disabled) {
    transform: none;
  }
  
  .tl-modal,
  :where(#tl-react-signup-form) .summary-scroll-wrapper,
  .tl-modal .tl-modal-content .plan-btn {
    transition: none;
  }
   
  :where(#tl-react-signup-form) .action-button,
  :where(#tl-react-signup-form) #nextBtn,
  :where(#tl-react-signup-form) #prevBtn,
  :where(#tl-react-signup-form) .tl-pay-btn,
  .tl-modal .tl-pay-btn {
    transition: none;
  }
   
  :where(#tl-react-signup-form) :is(.action-button, .tl-pay-btn)[aria-busy="true"]::after,
  :where(#tl-react-signup-form) :is(#nextBtn, #prevBtn)[aria-busy="true"]::after,
  .tl-modal .tl-pay-btn[aria-busy="true"]::after { animation: none; }

  .tl-modal .tl-modal-content { animation: none; }
}

/* Optional busy text variant for Next */
:where(#tl-react-signup-form) #nextBtn.busy-text[aria-busy="true"] {
  background: var(--neutral-semi-light);
  color: transparent;
  transform: none;
}
:where(#tl-react-signup-form) #nextBtn.busy-text[aria-busy="true"]::after { display: none; }
:where(#tl-react-signup-form) #nextBtn.busy-text[aria-busy="true"]::before {
  content: "Processing…";
  position: absolute;
  left: var(--space-xs);
  right: var(--space-xs);
  top: 50%;
  transform: translateY(-50%);
  text-align: center;
  color: var(--text-dark);
  font-weight: 600;
}

/* ==========================================================================
   Progress bar + msform inputs
   ========================================================================== */

:where(#tl-react-signup-form) .msform {
  position: relative;
  margin-bottom: var(--container-gap);
}

:where(#tl-react-signup-form) .msform input,
:where(#tl-react-signup-form) .msform textarea,
:where(#tl-react-signup-form) .msform select {
  border-radius: var(--radius);
  margin-bottom: var(--space-xs);
  width: 100%;
  height: auto !important;
}

/* Unified focus styles for all "native" form controls in this flow */
:where(#tl-react-signup-form) :is(
  .property-input,
  .signup_dd_fix,
  .msform :is(input, textarea, select),
  .input-group :is(.form-control, input)
):focus:not(:focus-visible) {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--primary) 18%, transparent);
  outline: none;
}

/* Keyboard focus parity with buttons */
:where(#tl-react-signup-form) :is(
  .property-input,
  .signup_dd_fix,
  .msform :is(input, textarea, select),
  .input-group :is(.form-control, input)
):focus-visible {
  border-color: var(--primary);
  outline: 3px solid color-mix(in oklch, var(--secondary) 35%, transparent);
  outline-offset: 2px;
}

:where(#tl-react-signup-form) :is(.action-button, .tl-pay-btn):focus-visible,
:where(#tl-react-signup-form) :is(#nextBtn, #prevBtn):focus-visible {
  outline: 3px solid color-mix(in oklch, var(--secondary) 35%, transparent);
  outline-offset: 2px;
}

/* Prevent browser-default outlines on mouse focus (keyboard still uses :focus-visible) */
:where(#tl-react-signup-form) :is(.action-button, .tl-pay-btn):focus:not(:focus-visible),
:where(#tl-react-signup-form) :is(#nextBtn, #prevBtn):focus:not(:focus-visible) {
  outline: none;
}

/* Portal-safe focus ring: if the modal is rendered outside #tl-react-signup-form */
.tl-modal :is(.tl-pay-btn, .plan-btn, .tl-close):focus-visible {
  outline: 3px solid color-mix(in oklch, var(--secondary) 35%, transparent);
  outline-offset: 2px;
}

.tl-modal :is(.tl-pay-btn, .plan-btn, .tl-close):focus:not(:focus-visible) {
  outline: none;
}

/* Fallback for browsers that don't support :focus-visible
   - Ensures keyboard users still get a clear focus ring
   - Does NOT change behavior in modern browsers
*/
@supports not selector(:focus-visible) {
  :where(#tl-react-signup-form) :is(
    .property-input,
    .signup_dd_fix,
    .msform :is(input, textarea, select),
    .input-group :is(.form-control, input)
  ):focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px color-mix(in oklch, var(--primary) 18%, transparent);
    outline: 3px solid color-mix(in oklch, var(--secondary) 35%, transparent);
    outline-offset: 2px;
  }

  :where(#tl-react-signup-form) :is(.action-button, .tl-pay-btn):focus,
  :where(#tl-react-signup-form) :is(#nextBtn, #prevBtn):focus {
    outline: 3px solid color-mix(in oklch, var(--secondary) 35%, transparent);
    outline-offset: 2px;
  }

  .tl-modal :is(.tl-pay-btn, .plan-btn, .tl-close):focus {
    outline: 3px solid color-mix(in oklch, var(--secondary) 35%, transparent);
    outline-offset: 2px;
  }

  :where(#tl-react-signup-form) :is(
    .property-input,
    .signup_dd_fix,
    .msform :is(input, textarea, select),
    .input-group :is(.form-control, input)
  )[aria-invalid="true"]:focus {
    box-shadow: 0 0 0 3px color-mix(in oklch, var(--danger) 18%, transparent);
    outline: 3px solid color-mix(in oklch, var(--danger) 35%, transparent);
    outline-offset: 2px; 
  }
}

:where(#tl-react-signup-form) .progressbar {
  margin-bottom: var(--space-xs);
  overflow: hidden;
  display: flex;
  gap: 0;
  counter-reset: step;
  text-align: center;
  padding-left: 0;
}

:where(#tl-react-signup-form) .progressbar li {
  list-style-type: none;
  color: var(--bg-ultra-light-text);
  flex: 1 1 20%; 
  position: relative;
  font-size: var(--text-s);
}

:where(#tl-react-signup-form) .progressbar li:before {
  content: '';
  counter-increment: step;
  width: var(--tl-progress-dot-size);
  height: var(--tl-progress-dot-size);
  display: block;
  background: var(--tl-surface-bg);
  color: var(--bg-ultra-light-text);
  border-radius: 30px;
  margin: 0 auto var(--tl-space-2xs) auto;
  border: 1px solid color-mix(in oklch, var(--bg-ultra-light-text) 35%, transparent);
  z-index: 1;
  position: relative;
}

:where(#tl-react-signup-form) .progressbar li:after {
  content: '';
  width: 100%;
  height: var(--tl-progress-bar-h);
  background: color-mix(in oklch, var(--bg-ultra-light-text) 22%, transparent);
  position: absolute;
  left: -50%;
  top: calc((var(--tl-progress-dot-size) / 2) + 0.5px);
  transform: translateY(-50%);
}

:where(#tl-react-signup-form) .progressbar li:first-child:after { content: none; }

:where(#tl-react-signup-form) .progressbar li.active:before,
:where(#tl-react-signup-form) .progressbar li.active:after {
  background: var(--secondary);
  color: var(--white);
}

/* ==========================================================================
   Fieldset reset + third-party z-index overrides
   ========================================================================== */

:where(#tl-react-signup-form) fieldset {
  border: 0;
  padding: 0;
  margin: 0;
}


/* Payment step: add breathing room INSIDE the bordered fieldsets.
   The fieldset border is applied inline in JSX, but padding belongs here.
   This prevents the Reserve button and Stripe elements from touching the border
   on narrow widths. */
:where(#tl-react-signup-form) .payment-form fieldset {
  padding: 0;
}

/* Ensure modals + Google Places results render above WP UI */
.pac-container { z-index: 9999999 !important; }

/* ==========================================================================
   Utility helpers
   ========================================================================== */

:where(#tl-react-signup-form) .waiting_sign {
  position: absolute;
  top: 0; right: 0; left: 0; bottom: 0;
  margin: auto;
}

:where(#tl-react-signup-form) .date_picker_wrapper {
  max-width: 310px; /* fallback for non-DayPicker states */
  margin: var(--space-l) auto !important;
}

/* When DayPicker is present, daypicker.css owns sizing */
:where(#tl-react-signup-form) .date_picker_wrapper:has(.tl-rdp) {
  max-width: none;
}

:where(#tl-react-signup-form) input.service_date {
  /* Visually hidden, but preserved for semantics / screen readers / JS hooks */
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;   
  opacity: 0 !important;
  width: 1px !important;
  height: 1px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  pointer-events: none !important; 
}

/* ==========================================================================
   Field validation messages
   - New standard: .tl-field-error (used by JSX)
   - Back-compat: #phone_error (deprecated; keep until legacy markup removed)
   ========================================================================== */

:where(#tl-react-signup-form) :is(.tl-field-error, #phone_error) {
  color: var(--danger);
  font-size: var(--text-xs);
  margin-top: var(--tl-error-msg-mt);
}

/* Field invalid states (align visuals with error messaging)
   - No new classes required
   - Works automatically if JSX sets aria-invalid="true"
*/
:where(#tl-react-signup-form) :is(
  .property-input,
  .signup_dd_fix,
  .msform :is(input, textarea, select),
  .input-group :is(.form-control, input)
)[aria-invalid="true"] {
  border-color: var(--danger);
}

:where(#tl-react-signup-form) :is(
  .property-input,
  .signup_dd_fix,
  .msform :is(input, textarea, select),
  .input-group :is(.form-control, input)
)[aria-invalid="true"]:focus:not(:focus-visible) {
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--danger) 18%, transparent);
}

:where(#tl-react-signup-form) :is(
  .property-input,
  .signup_dd_fix,
  .msform :is(input, textarea, select),
  .input-group :is(.form-control, input)
)[aria-invalid="true"]:focus-visible {
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--danger) 18%, transparent);
  outline: 3px solid color-mix(in oklch, var(--danger) 35%, transparent);
  outline-offset: 2px; 
}

:where(#tl-react-signup-form) .icon {
  margin-right: var(--tl-space-3xs);
  font-size: var(--text-xs);
  vertical-align: middle;
}

:where(#tl-react-signup-form) .dark-text-button { color: var(--text-dark); }

/* ==========================================================================
   Deal box
   ========================================================================== */

:where(#tl-react-signup-form) .deal-box{
  background: var(--tl-card-bg);
  max-width: 415px;
  margin: auto;
  border-radius: var(--radius);
  padding: var(--space-m);
  margin-top: var(--content-gap);
  margin-bottom: var(--content-gap);
  color: var(--bg-ultra-light-text);
}

:where(#tl-react-signup-form) .deal-box .pricing-row {
  min-height: calc(var(--text-xxl) * 1.4);
}

:where(#tl-react-signup-form) .deal-box .first_step_price {
  display: inline-block;
  text-align: right;
}

:where(#tl-react-signup-form) .deal-box .best-deal{
  background: var(--tl-surface-bg);
  padding: var(--tl-space-2xs) var(--space-xs);
  border-radius: var(--radius);
  font-size: var(--text-xs);
  color: var(--bg-ultra-light-text);
  font-weight: 400;
}

:where(#tl-react-signup-form) .deal-box > p{
  margin-top: 0;
  text-align: left !important;
  margin-bottom: var(--content-gap);
  color: var(--bg-ultra-light-text);
}

:where(#tl-react-signup-form) .deal-box h3{
  font-size: var(--text-l);
  margin-top: var(--space-s);
  font-weight: 700;
  margin-bottom: 0;
  color: var(--bg-ultra-light-heading);
}

:where(#tl-react-signup-form) .deal-box p{
  color: var(--bg-ultra-light-heading);
  display: flex;
  align-items: center;
  gap: 0;
}

:where(#tl-react-signup-form) .deal-box p :is(.currency, .first_step_price) {
   margin-right: var(--tl-space-3xs);
   font-size: var(--text-xxl);
   font-weight: 700;
}

:where(#tl-react-signup-form) .deal-box p span.currency,
:where(#tl-react-signup-form) .deal-box p span.first_step_price {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

:where(#tl-react-signup-form) .deal-box ul{
  list-style-type: disc;
  padding-left: var(--nested-list-indent-spacing);
  padding-bottom: 0;
}

:where(#tl-react-signup-form) .deal-box ul li{
  margin-bottom: 0;
  color: color-mix(in oklch, var(--bg-ultra-light-text) 90%, transparent);
  font-size: var(--text-s);
}

:where(#tl-react-signup-form) .deal-box .per-visit {
  color: color-mix(in oklch, var(--bg-ultra-light-text) 90%, transparent);
  font-size: var(--text-m-to-s);
  font-weight: 400;
  padding-left: 0;
  position: static;
  top: auto;
  left: auto;
  font-style: normal;
  margin-left: 0;
  align-self: center;
}

/* ==========================================================================
   Modal
   ========================================================================== */

.tl-modal {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  z-index: 999999; 
  top: 0; left: 0;
  width: 100%;
  height: 100%;

  background-color: color-mix(in oklch, var(--black) 50%, transparent);

  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
}

.tl-modal.show {
  opacity: 1;
  visibility: visible;
}

.tl-modal .tl-modal-content {
  background: var(--white);
  color: var(--bg-ultra-light-text);
  box-sizing: border-box;
  padding: var(--container-gap);
  border-radius: var(--radius);
  width: 95%;
  max-width: 950px;
  position: relative;
  animation: fadeIn 0.4s ease;

  /* Modal close sizing token (kept on modal content for portal safety) */
  --tl-modal-close-font-size: var(--text-xl);
   
  /* Modal close positioning tokens (kept on modal content for portal safety) */
  --tl-modal-close-top: var(--space-s);
  --tl-modal-close-right: var(--space-m);
   
  box-shadow: 0 5px 30px color-mix(in oklch, var(--black) 20%, transparent);

  overflow: auto;
  overflow-x: hidden; 
  /* Constrain height so overflow scrolling actually works on short viewports */
  max-height: calc(100vh - (var(--space-l) * 2));
  max-height: calc(100dvh - (var(--space-l) * 2));
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.tl-modal .tl-close {
  position: absolute;
  top: var(--tl-modal-close-top);
  right: var(--tl-modal-close-right);
  font-size: var(--tl-modal-close-font-size);
  font-weight: 700;
  color: var(--bg-ultra-light-text);
  cursor: pointer;
  z-index: 10;
  line-height: 1;

  /* Make it a consistent tap target */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--tl-btn-min-h, 44px);
  min-height: var(--tl-btn-min-h, 44px);   
}

@keyframes fadeIn {
  from { transform: scale(0.95); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* Plan Buttons */
.tl-modal .tl-plan-buttons {
  display: flex;
  gap: 0;
  margin: var(--space-xs) 0 var(--space-s);
  justify-content: center;

  /* Match deal-box width behavior */
  width: 100%;
  max-width: 415px;
  margin-left: auto;
  margin-right: auto;
}

.tl-modal .tl-plan-buttons-inner {
  background: var(--tl-card-bg);
  border: 2px solid color-mix(in oklch, var(--bg-ultra-light-text) 14%, transparent);
  padding: var(--tl-space-3xs);
  border-radius: var(--btn-border-radius);

  /* Fill the container so the buttons can split evenly */
  width: 100%;

  /* Ensure the two buttons distribute 50/50 */
  display: flex;
}

.tl-modal .tl-modal-content .plan-btn {
  padding: var(--btn-padding-block) var(--btn-padding-inline);
  border: 1px solid transparent;

  background: var(--tl-card-bg);
  border-radius: var(--btn-border-radius);

  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
  font-weight: 400;

  color: color-mix(in oklch, var(--bg-ultra-light-text) 70%, transparent);
  font-size: var(--text-m);

  /* Force equal-width buttons */
  flex: 1 1 50%;
  width: 50%;
  text-align: center;

  /* If your labels ever get long, this prevents “Weekly” from hogging space */
  white-space: nowrap;
}

.tl-modal .tl-modal-content .plan-btn:hover {
  background-color: color-mix(in oklch, var(--bg-ultra-light) 88%, var(--bg-ultra-light-text));
}

.tl-modal .tl-modal-content .plan-btn.selected {
  background-color: var(--primary);
  border-color: var(--primary);
  color: var(--black);
}

/* Service Description */
.tl-modal .tl-modal-content p {
  color: var(--bg-ultra-light-text);
  font-size: var(--text-s);
}

.tl-modal .tl-modal-content .tl-service-title {
  font-size: var(--text-m);
  font-weight: 600;
  margin-bottom: var(--space-xs);
  color: var(--bg-ultra-light-heading);
}

.tl-modal .tl-modal-content h2 {
  font-size: var(--h3);
  text-align: center;
  color: var(--bg-ultra-light-heading);
  margin: var(--space-s) 0;
  padding: 0;
  font-weight: 600;
}

/* Primary CTAs */
.tl-modal .tl-modal-content .tl-pay-btn {
  display: inline-flex;
  margin: 0 auto;
}

/* Only the first step “Service Date” button — FORCE RIGHT ALIGN */
.tl-modal .tl-modal-content .tl-pay-btn.first_step_next_btn {
  display: block;
  width: fit-content;
  max-width: none;
  margin: 0 0 0 auto;
}

.tl-modal .tl-modal-content .tl-pay-btn.reserve-btn {
  width: 100%;
  max-width: 415px;
}

/* Portal-safe reserve button sizing:
   If the payment step is ever rendered outside .tl-modal (portals / embeds),
   we still want the Reserve button capped and centered. */
:where(#tl-react-signup-form) .tl-pay-btn.reserve-btn {
  width: 100%;
  max-width: 415px;
  margin-inline: auto;
}

.tl-modal .tl-modal-content .tl-pay-btn.reserve-btn:hover:not(:disabled) {
  background: var(--primary);
  transform: translateY(-1px);
}

.tl-modal .tl-modal-content .tl-pay-btn.reserve-btn:disabled {
  background: var(--neutral-semi-light);
  cursor: not-allowed;
  transform: none;
}

.tl-modal .tl-service-description {
  margin-bottom: var(--space-s);
  padding-bottom: 0;
  font-weight: 300;
}

.tl-modal .tl-pricing-box {
  gap: var(--paragraph-spacing);
}

.tl-modal .tl-pricing-box .pricing-row {
  margin-bottom: var(--space-m);
  line-height: 1;
}

.tl-modal .tl-features-title { text-align: left; }

/* ==========================================================================
   Summary scroll wrapper
   ========================================================================== */

:where(#tl-react-signup-form) .summary-scroll-wrapper {
  max-height: none;
  overflow-y: visible;
  transition: max-height 0.3s ease;
}

:where(#tl-react-signup-form) .summary-scroll-wrapper.scroll-enabled {
  max-height: 200px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in oklch, var(--bg-ultra-light-text) 22%, transparent) transparent;
  scrollbar-gutter: stable; 
  border: 1px solid color-mix(in oklch, var(--bg-ultra-light-text) 14%, transparent);
  padding-right: var(--tl-space-2xs);
  margin-bottom: var(--space-s);
}

:where(#tl-react-signup-form) .summary-scroll-wrapper.scroll-enabled::-webkit-scrollbar { width: var(--tl-scrollbar-w); }
:where(#tl-react-signup-form) .summary-scroll-wrapper.scroll-enabled::-webkit-scrollbar-thumb {
  background-color: color-mix(in oklch, var(--bg-ultra-light-text) 22%, transparent);
  border-radius: var(--radius);
}

/* ==========================================================================
   Input group + dropdown tweaks
   ========================================================================== */

:where(#tl-react-signup-form) .input-group {
  display: flex;
  align-items: stretch;
  width: 100%;
}

/* --------------------------------------------------------------------------
   Phone input-group sizing fix
   -------------------------------------------------------------------------- */
:where(#tl-react-signup-form) .property-form .input-group {
  margin-bottom: var(--space-xs);
}

:where(#tl-react-signup-form) .property-form .input-group .form-control {
  margin-bottom: 0;
}

/* Prepend wrapper */
:where(#tl-react-signup-form) .input-group-prepend {
  background: var(--tl-input-bg);
  border: var(--tl-input-border);
  border-right: none;
  border-radius: var(--radius) 0 0 var(--radius);
  color: color-mix(in oklch, var(--bg-ultra-light-text) 40%, transparent);
  display: flex;
  align-items: stretch;
  height: auto !important;
}

:where(#tl-react-signup-form) .input-group-prepend .input-group-text {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tl-input-min-h);
  height: var(--tl-input-min-h);
  padding: 0 0 0 var(--space-xs);
  font-size: var(--text-m);
  line-height: 1;
  box-sizing: border-box;
}

/* Phone input-group controls inherit sizing/padding from Shared form control base */

:where(#tl-react-signup-form) .input-group .form-control {
  border-radius: 0 var(--radius) var(--radius) 0;
  border-left: none;
}

/* Phone: hide +1 prepend (US-only) but keep a normal standalone input look */
:where(#tl-react-signup-form) .property-form .input-group-prepend {
  display: none;
}

/* Restore left border + full rounding now that prepend is hidden */
:where(#tl-react-signup-form) .property-form .input-group .form-control {
  border-left: var(--tl-input-border);
  border-radius: var(--radius);
}

:where(#tl-react-signup-form) .signup_dd_fix{
  height: auto !important;
  border-radius: var(--radius);

  /* Prevent selected text from overlapping the custom dropdown arrow */
  padding-right: calc(var(--tl-input-pad-x) + var(--space-m));
   
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  /* Arrow uses currentColor so it follows theme */
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg width=%2710%27 height=%277%27 viewBox=%270 0 10 7%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpath d=%27M1 1l4 4 4-4%27 stroke=%27currentColor%27 stroke-width=%271.5%27 fill=%27none%27 fill-rule=%27evenodd%27/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-xs) center;
  background-size: 10px 7px;
}

/* ==========================================================================
   Stripe trust badge
   ========================================================================== */

:where(#tl-react-signup-form) .tl-stripe-badge{
  max-width: 420px;
  margin: 0 auto var(--content-gap);
  text-align: center;
  font-family: inherit;
}

:where(#tl-react-signup-form) .tl-stripe-badge .badge-main{
  width: 100%;
  height: auto;
}

:where(#tl-react-signup-form) .tl-stripe-badge .card-logos{
  display: flex;
  justify-content: center;
  gap: var(--space-xs);
  margin-top: var(--space-xs);
}

:where(#tl-react-signup-form) .tl-stripe-badge .card-logos img{
  height: 28px;
  width: auto;
  object-fit: contain;
  filter: grayscale(10%);
  transition: filter 0.3s;
}

:where(#tl-react-signup-form) .tl-stripe-badge .card-logos img:hover{ filter: none; }

/* ==========================================================================
   Express checkout + payment
   ========================================================================== */

:where(#tl-react-signup-form) .express-checkout-section { margin-bottom: var(--space-m); }

:where(#tl-react-signup-form) .express-checkout-divider,
:where(#tl-react-signup-form) .payment-divider {
  text-align: center;
  position: relative;
}

:where(#tl-react-signup-form) .express-checkout-divider { margin-bottom: var(--space-s); }
:where(#tl-react-signup-form) .payment-divider { margin: var(--space-m) 0; }

:where(#tl-react-signup-form) .express-checkout-divider::before,
:where(#tl-react-signup-form) .payment-divider::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background-color: color-mix(in oklch, var(--bg-ultra-light-text) 18%, transparent);
}

:where(#tl-react-signup-form) .express-checkout-divider span,
:where(#tl-react-signup-form) .payment-divider span {
  background: var(--tl-surface-bg);
  padding: 0 var(--space-s);
  font-size: var(--text-s);
  color: color-mix(in oklch, var(--bg-ultra-light-text) 70%, transparent);
  position: relative;
  z-index: 1;
}

:where(#tl-react-signup-form) .express-checkout-container { margin-bottom: var(--content-gap); }

:where(#tl-react-signup-form) .payment-form {
  max-width: 500px;
  margin: 0 auto;
}

:where(#tl-react-signup-form) .payment-section { margin-bottom: var(--space-m); }
:where(#tl-react-signup-form) .card-container { margin-bottom: var(--space-s); }

:where(#tl-react-signup-form) .card-input {
  padding: var(--space-s);
  border: 1px solid color-mix(in oklch, var(--bg-ultra-light-text) 18%, transparent);
  border-radius: var(--radius);

  background: var(--tl-input-bg);
  color: var(--bg-ultra-light-text);

  transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

:where(#tl-react-signup-form) .card-input:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--primary) 18%, transparent);
}

:where(#tl-react-signup-form) .payment-error {
  color: var(--danger);
  font-size: var(--text-s);
  margin-top: var(--space-xs);
  padding: var(--space-xs) var(--space-s);

  background-color: var(--danger-ultra-light);
  border: 1px solid var(--danger-light);
  border-radius: var(--radius);
}

/* Payment step headers:
   - Fieldset legend: "Express Reservation"
   - Card header: "Credit or Debit Card"
*/
:where(#tl-react-signup-form) .payment-form fieldset > legend {
  font-size: var(--text-m);
}

:where(#tl-react-signup-form) .cc-payment-header {
  text-align: center;
  font-size: var(--text-m);
  line-height: 1.2;
  margin: 0;
  padding: 0;
}

/* Terms */
:where(#tl-react-signup-form) .terms-section {
  text-align: center;
  margin-top: var(--space-l);
}

:where(#tl-react-signup-form) .terms-section .terms-text {
  font-size: var(--text-s);
  color: color-mix(in oklch, var(--bg-ultra-light-text) 70%, transparent);
  margin-bottom: var(--space-s);
  line-height: 1.25;
}

/* Security Note */
:where(#tl-react-signup-form) .security-note {
  text-align: center;
  margin-top: var(--tl-space-2xs);
}

:where(#tl-react-signup-form) .security-note p {
  font-size: var(--text-s);
  color: color-mix(in oklch, var(--bg-ultra-light-text) 70%, transparent);
  margin: var(--tl-space-2xs) 0;
}

/* Stripe Elements Customization (third-party override) */
:where(#tl-react-signup-form) .StripeElement {
  box-sizing: border-box;
  padding: var(--space-xs) var(--space-s);
  border: none;
  border-radius: var(--radius);

  background-color: var(--tl-input-bg);
  color: var(--bg-ultra-light-text);

}

:where(#tl-react-signup-form) .StripeElement--focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--primary) 18%, transparent);
}

:where(#tl-react-signup-form) .StripeElement--invalid { border-color: var(--danger); }

:where(#tl-react-signup-form) .StripeElement--webkit-autofill {
  background-color: var(--warning-ultra-light) !important;
}

:where(#tl-react-signup-form) #express-checkout-element { margin-bottom: 0; }

:where(#tl-react-signup-form) .express-checkout-container[data-loading="true"] {
  opacity: 0.6;
  pointer-events: none;
}

:where(#tl-react-signup-form) .express-checkout-section[data-hidden="true"] { display: none; }

/* ==========================================================================
   Success message
   ========================================================================== */

:where(#tl-react-signup-form) .reservation-success {
  text-align: center;
  max-width: 600px;
  margin: var(--space-l) auto;
  padding: var(--space-l) var(--space-m);
  color: var(--text-color);
}

:where(#tl-react-signup-form) .success-icon {
  margin-bottom: var(--space-m);
  display: flex;
  justify-content: center;
}

:where(#tl-react-signup-form) .success-title {
  font-size: var(--h2, 2rem);
  font-weight: 700;
  color: var(--heading-color);
  margin-bottom: var(--space-m);
  line-height: 1.2;
}

:where(#tl-react-signup-form) .success-logo {
  margin-bottom: var(--space-l);
  display: flex;
  justify-content: center;
}

:where(#tl-react-signup-form) .th-logo {
  height: 60px;
  width: auto;
  max-width: 200px;
  object-fit: contain;
}

:where(#tl-react-signup-form) .success-content {
  max-width: 480px;
  margin: 0 auto;
}

:where(#tl-react-signup-form) .success-message {
  font-size: var(--text-l);
  font-weight: 600;
  color: var(--text-color);
  margin-bottom: var(--space-m);
  line-height: 1.5;
}

:where(#tl-react-signup-form) .success-details,
:where(#tl-react-signup-form) .success-support {
  font-size: var(--text-m);
  color: color-mix(in oklch, var(--text-color) 75%, transparent);
  margin-bottom: var(--space-s);
  line-height: 1.6;
}

:where(#tl-react-signup-form) .success-support { font-weight: 500; }

:where(#tl-react-signup-form) .success-logo img { max-width: 220px; }

/* ==========================================================================
   Lawn size selector (radio-card)
   ========================================================================== */

/* Match site pricing grid behavior:
   - 3 columns on desktop
   - 1 column at <= 992px
*/
:where(#tl-react-signup-form) .tl-lawn-group {
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 0;
  display: grid;
  align-items: initial;
  gap: var(--space-m);
  grid-template-columns: var(--grid-3);
}

@media (max-width: 992px) {
  :where(#tl-react-signup-form) .tl-lawn-group {
    grid-template-columns: var(--grid-1);
  }
}

:where(#tl-react-signup-form) .tl-lawn-group input[type="radio"] {
  position: absolute !important;
  opacity: 0 !important;
  width: 1px !important;
  height: 1px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  pointer-events: none !important;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

/* Card: NO hover behavior (no animated shadow/background/transform) */
:where(#tl-react-signup-form) .tl-radio-card {
  display: block;
  background: var(--tl-card-bg);
  color: var(--bg-ultra-light-text);
  border-radius: var(--radius);
  padding: var(--space-m);
  cursor: pointer;
  width: 100%;
  max-width: none;
  min-height: 320px;
  box-shadow: none;
  transition: none;
}

:where(#tl-react-signup-form) .tl-radio-card:focus-within {
  outline: 3px solid color-mix(in oklch, var(--secondary) 35%, transparent);
  outline-offset: 2px;
}

:where(#tl-react-signup-form) .tl-card-inner {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  gap: var(--space-s);
}

:where(#tl-react-signup-form) .tl-card-title {
  font-size: var(--text-xl);
  font-weight: 600;
  margin: 0;
  color: var(--bg-ultra-light-heading);
}

:where(#tl-react-signup-form) .tl-card-image {
  height: auto;
  width: 100%;
  aspect-ratio: 5 / 3;
  object-fit: contain;
}

/* Desktop slightly smaller; tablet/mobile keep what you liked */
:where(#tl-react-signup-form) .tl-card-range {
  color: var(--bg-ultra-light-text);
  font-size: var(--text-m);
}

:where(#tl-react-signup-form) .tl-card-hint {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tl-btn-min-h);
  width: auto;
  padding: var(--btn-padding-block) var(--btn-padding-inline);
  border-radius: var(--btn-border-radius);
  background: var(--accent);
  color: var(--black);
  font-weight: var(--btn-font-weight);
  font-size: var(--text-m);
  margin-top: var(--space-m);
  transition: background-color .3s ease, transform .2s ease;
}

@media (max-width: 992px) {
  :where(#tl-react-signup-form) .tl-card-hint {
    width: 100%;
  }
}

/* CTA hover stays (even though the card does nothing) */
:where(#tl-react-signup-form) .tl-card-hint:hover:not(:disabled),
:where(#tl-react-signup-form) .tl-card-hint:focus-visible {
  background: var(--accent-hover);
}

:where(#tl-react-signup-form) .tl-card-hint:active { transform: translateY(0.5px); }

/* ==========================================================================
   Review card (static Google testimonial)
   ========================================================================== */

:where(#tl-react-signup-form) .review-card {
  background: var(--tl-surface-bg); 
  border-radius: var(--radius);
  padding: var(--space-s);
  margin-top: var(--space-s);
  color: var(--bg-ultra-light-text);
}

:where(#tl-react-signup-form) .review-header {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--text-m-to-s); 
  font-weight: 600;
  color: var(--bg-ultra-light-heading);
  margin-bottom: var(--tl-space-2xs);
}

:where(#tl-react-signup-form) .google-badge-img {
  height: 18px;
  width: 18px;
  object-fit: contain;
  border-radius: var(--radius-xs);
}

:where(#tl-react-signup-form) .review-stars {
  display: flex;
  align-items: center;
  gap: var(--tl-space-3xs);
  margin: var(--tl-space-2xs) 0 var(--tl-space-2xs);
}

:where(#tl-react-signup-form) .review-stars .star {
  width: var(--tl-icon-size-s);
  height: var(--tl-icon-size-s);
  fill: var(--accent);
}

:where(#tl-react-signup-form) .review-stars .review-source {
  font-size: var(--text-s);
  padding-left: var(--space-xs); 
  color: color-mix(in oklch, var(--bg-ultra-light-text) 70%, transparent);
}

:where(#tl-react-signup-form) .review-quote {
  margin: var(--tl-space-2xs) 0 var(--tl-space-2xs);
  font-size: var(--text-s);
  color: var(--bg-ultra-light-text);
}

:where(#tl-react-signup-form) .review-author {
  font-size: var(--text-s);
  color: color-mix(in oklch, var(--bg-ultra-light-text) 75%, transparent);
  font-weight: 500;
}

/* Review step: note moved OUTSIDE the review card */
:where(#tl-react-signup-form) .review-note-outside {
  margin: var(--space-xs) 0 0;
  text-align: center;
  font-size: var(--text-s);
  font-weight: 600;
  line-height: 1.25;
  color: color-mix(in oklch, var(--bg-ultra-light-text) 75%, transparent);
}

/* Back-compat safety (if any old markup still renders .review-note somewhere) */
:where(#tl-react-signup-form) .review-note {
  margin: var(--tl-space-2xs) 0 0;
  text-align: center;
  font-size: var(--text-s);
  font-weight: 600;
  line-height: 1.25;
  color: color-mix(in oklch, var(--bg-ultra-light-text) 75%, transparent);
}

/* ==========================================================================
   Responsive (consolidated)
   ========================================================================== */

@media (max-width: 768px) {
  :where(#tl-react-signup-form) #address-fields .row-form:last-child input,
  :where(#tl-react-signup-form) #address-fields .row-form:last-child select {
    margin-bottom: 0;
  }

  /* Success message */
  :where(#tl-react-signup-form) .reservation-success {
    padding: var(--space-l) var(--space-s);
    margin: var(--content-gap) auto;
  }

  :where(#tl-react-signup-form) .success-title {
    font-size: var(--text-l);
    margin-bottom: var(--space-s);
  }

  :where(#tl-react-signup-form) .success-message {
    font-size: var(--text-m);
    margin-bottom: var(--space-s);
  }

  :where(#tl-react-signup-form) .success-details,
  :where(#tl-react-signup-form) .success-support {
    font-size: var(--text-m);
    margin-bottom: var(--space-s);
  }

  :where(#tl-react-signup-form) .success-icon { margin-bottom: var(--space-s); }
   
  :where(#tl-react-signup-form) .tl-navigation {
    flex-direction: column-reverse;
  }

  :where(#tl-react-signup-form) .review-summary-block .service-summary .summary-total:last-of-type {
    margin-bottom: 0;
    padding-bottom: 0;
  }
   
  :where(#tl-react-signup-form) #prevBtn,
  :where(#tl-react-signup-form) .next.action-button,
  :where(#tl-react-signup-form) #nextBtn {
    width: 100%;
    max-width: 415px; 
    justify-content: center;
  }

  :where(#tl-react-signup-form) .action-button { max-width: 100%; }

  :where(#tl-react-signup-form) .tl-stripe-badge { margin: calc(var(--space-xs) * -1) auto calc(var(--space-xs) * -1); }
  :where(#tl-react-signup-form) .Text--terms { font-size: var(--text-xs) !important; margin-top: calc(var(--tl-space-2xs) * -1) !important; }
  :where(#tl-react-signup-form) .p-GridCell { margin-bottom: var(--space-xs) !important; }
   
  :where(#tl-react-signup-form) .payment-form { max-width: 100%; padding: 0; }
  :where(#tl-react-signup-form) .express-checkout-divider span,
  :where(#tl-react-signup-form) .payment-divider span { font-size: var(--text-xs); }

  .tl-modal .tl-modal-content {
    width: 100%;
    height: 100vh;
    max-height: 100vh;     
    height: 100dvh;
    max-height: 100dvh; 
    border-radius: 0;
     
    /* Mobile modal padding: cheaper, still safe-area aware */
    padding:
      calc(var(--space-m) + env(safe-area-inset-top))
      calc(var(--space-m) + env(safe-area-inset-right))
      calc(var(--space-m) + env(safe-area-inset-bottom))
      calc(var(--space-m) + env(safe-area-inset-left));

    /* Reserve a header region so top UI doesn't collide on short viewports */
    --tl-modal-header-reserve: var(--space-m));

    /* Close button: anchor to the modal padding edge (padding handles safe-area) */
    --tl-modal-close-top: 0;
    --tl-modal-close-right: 0;
  }

  /* If the progress bar renders inside the modal, keep it clear of the close button */
  .tl-modal .tl-modal-content .progressbar {
    margin-top: var(--tl-modal-header-reserve);
  }
 
  .tl-modal .tl-modal-content .tl-pay-btn.first_step_next_btn {
    width: 100%;
    max-width: 415px;
    margin: 0 auto;
  }
   
  :where(#tl-react-signup-form) .progressbar li {
    font-size: var(--text-s);
    line-height: 1;
  }

  /* Review step: shave vertical padding further on mobile */
  :where(#tl-react-signup-form) .review-summary-block .service-summary {
    padding: var(--space-xs) var(--space-s) var(--space-xs);
  }
  :where(#tl-react-signup-form) .review-card {
    padding: var(--space-xs);
  }
}

/* --------------------------------------------------------------------------
   Property Details: mobile stacking rules (JSX hooks)
   - Below 650px:
     - Email + Phone: stack, with gap=0 (prevents double vertical spacing)
     - City / State / Zip: City full-width, State+Zip 50/50 on the row below
   -------------------------------------------------------------------------- */
@media (max-width: 650px) {
  :where(#tl-react-signup-form) .property-form .row-form.contact-row {
    flex-wrap: wrap;
    gap: 0; /* independent from the global row gap */
  }

  :where(#tl-react-signup-form) .property-form .row-form.contact-row .col-6 {
    flex: 1 1 100%;
    width: 100%;
  }

  :where(#tl-react-signup-form) .property-form .row-form.contact-row .input-group {
    width: 100%;
  }

  :where(#tl-react-signup-form) .property-form .row-form.city-state-zip-row {
    flex-wrap: wrap;
    row-gap: 0;
    column-gap: var(--space-s);
  }

  :where(#tl-react-signup-form) .property-form .row-form.city-state-zip-row .col-4:nth-child(1) {
    flex: 1 1 100%;
    width: 100%;
    min-width: 0;
  }

  :where(#tl-react-signup-form) .property-form .row-form.city-state-zip-row .col-4:nth-child(2),
  :where(#tl-react-signup-form) .property-form .row-form.city-state-zip-row .col-4:nth-child(3) {
    flex: 1 1 calc(50% - (var(--space-s) / 2));
    width: calc(50% - (var(--space-s) / 2));
    min-width: 0;
  }
}