/*
 * Customization Calculator — native page styles.
 * Ported from the inline <style> blocks of the Webflow export, plus a native
 * CSS replacement for the tooltip hover behaviour that Webflow IX2 used to drive
 * via data-w-id. No Webflow runtime is required.
 */

/* --- Original inline calculator transitions ------------------------------- */
.counter-group.disabled {
  opacity: 0.5;
  pointer-events: none;
  cursor: not-allowed;
}

.counter-group {
  transition: all 0.3s ease;
}

/* Main sections transitions */
.calculator-section:not(:first-child) {
  transition: all 0.3s ease;
}

/* Counter groups transitions */
#customized-pages,
#custom-pages {
  transition: all 0.3s ease;
}

/* Checkbox transitions */
.check-box {
  transition: all 0.3s ease;
}

#total-price {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

.counter-value {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

.card.option-card.selected {
  border-color: var(--new--primary-color) !important;
}

/* --- Native tooltip hover (replaces Webflow IX2 interaction) --------------- */
/* The exported desktop wrapper is a fixed, full-viewport overlay. That works only
   while Webflow IX2 is calculating the animation context; as native CSS it makes
   lower tooltips appear far away from their cards after scrolling. Anchor the
   wrapper to each option card on desktop, then keep the original mobile absolute
   layout from webflow.css.

   We force display:block (overriding webflow.css's display:none) and keep the
   element non-interactive while hidden via visibility + pointer-events, so the
   opacity/transform/filter transition actually runs (you cannot transition a
   display:none -> block change). */
.customization-calculator-page .calculator-tooltip-wrapper {
  display: block;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(14px);
  filter: blur(8px);
  transition: opacity 0.35s ease, transform 0.35s ease, filter 0.35s ease,
    visibility 0.35s ease;
}

.customization-calculator-page .position-relative-mobile:hover > .calculator-tooltip-wrapper,
.customization-calculator-page .position-relative-mobile:focus-within > .calculator-tooltip-wrapper {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  filter: blur(0);
}

/* Keep the centred tooltip card from intercepting the pointer so the hover
   stays bound to the option card underneath it. */
.customization-calculator-page .calculator-tooltip-wrapper .tooltip-calculator {
  pointer-events: none;
}

.customization-calculator-page .calculator-inner-container,
.customization-calculator-page .calculator-wrapper {
  position: relative;
  z-index: 20;
}

.customization-calculator-page .calculator-top-section {
  position: relative;
  z-index: 30;
}

.customization-calculator-page .calculator-bottom-section,
.customization-calculator-page .footer-wrap {
  position: relative;
  z-index: 1;
}

@media screen and (min-width: 768px) {
  .customization-calculator-page .position-relative-mobile {
    overflow: visible;
    position: relative;
  }

  .customization-calculator-page .position-relative-mobile:hover,
  .customization-calculator-page .position-relative-mobile:focus-within {
    z-index: 40;
  }

  .customization-calculator-page .calculator-tooltip-wrapper {
    inset: calc(100% + 16px) 0 auto 0;
    position: absolute;
    width: auto;
  }

  .customization-calculator-page .calculator-tooltip-wrapper .tooltip-calculator {
    left: 0;
    margin-left: 0;
    margin-right: 0;
    max-width: none;
    min-width: 0;
    position: absolute;
    top: auto;
    width: min(589px, calc(100vw - 48px));
  }

  .customization-calculator-page .calculator-tooltip-wrapper .tooltip-calculator.left-5 {
    left: 50%;
    transform: translateX(-50%);
  }

  .customization-calculator-page .calculator-tooltip-wrapper .tooltip-calculator.left--15 {
    left: auto;
    right: 0;
  }

  .customization-calculator-page .calculator-tooltip-wrapper .tooltip-calculator.small {
    max-width: 470px;
    width: min(470px, calc(100vw - 48px));
  }

  /* Viewport-aware flip: customization-calculator.js adds .tooltip-above to a card
     when its tooltip would not fit below it in the viewport. Anchor the tooltip
     ABOVE the card instead (and bottom-align the inner card so it grows upward)
     so it stays on screen instead of dropping below the fold. */
  .customization-calculator-page .position-relative-mobile.tooltip-above .calculator-tooltip-wrapper {
    inset: auto 0 calc(100% + 16px) 0;
    transform: translateY(-14px);
  }

  .customization-calculator-page .position-relative-mobile.tooltip-above .calculator-tooltip-wrapper .tooltip-calculator {
    top: auto;
    bottom: 0;
  }

  .customization-calculator-page .position-relative-mobile.tooltip-above:hover > .calculator-tooltip-wrapper,
  .customization-calculator-page .position-relative-mobile.tooltip-above:focus-within > .calculator-tooltip-wrapper {
    transform: translateY(0);
  }
}

/* --- Mobile: preview popup behaves as a modal ----------------------------- */
/* On touch the sticky :hover desktop relies on makes the preview pop up under the
   finger and (because it is pointer-events:none) lets taps fall through to the card
   below — a select/close loop. Drive the preview with the .mobile-popup-open class
   (customization-calculator.js) instead, give the preview + its X real pointer-events,
   and show a backdrop so the X / an outside tap close it without touching any card. */
@media screen and (max-width: 767px) {
  .customization-calculator-page .position-relative-mobile:hover > .calculator-tooltip-wrapper,
  .customization-calculator-page .position-relative-mobile:focus-within > .calculator-tooltip-wrapper {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(14px);
    filter: blur(8px);
  }

  .customization-calculator-page .position-relative-mobile.mobile-popup-open > .calculator-tooltip-wrapper {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    filter: blur(0);
  }

  .customization-calculator-page .position-relative-mobile.mobile-popup-open .tooltip-calculator,
  .customization-calculator-page .position-relative-mobile.mobile-popup-open .mobile-card-close-icon {
    pointer-events: auto;
  }

  /* Raise the open card (and its section) so the preview renders above the adjacent
     cards instead of behind them. */
  .customization-calculator-page .calculator-section:has(.mobile-popup-open) {
    position: relative;
    z-index: 5;
  }

  .customization-calculator-page .position-relative-mobile.mobile-popup-open {
    position: relative;
    z-index: 1000;
  }

  /* Dim the other cards while a preview is open, to focus it. (A covering backdrop is
     unreliable here — an ancestor filter traps fixed elements — so the outside-tap
     close is handled in JS, capture-phase, and this dim is the visual cue.) */
  .customization-calculator-page .calculator-wrapper.has-mobile-popup .position-relative-mobile:not(.mobile-popup-open) {
    opacity: 0.4;
    transition: opacity 0.3s ease;
  }
}

/* --- Header clearance ----------------------------------------------------- */
/* The shared header partial is wrapped in .header-position-absolute
   (position: absolute), which would overlap the calculator hero heading.
   The original Webflow page rendered the header in normal flow, so we restore
   that here (same approach the legal pages use). */
.customization-calculator-page .header-position-absolute {
  position: static;
}

/* --- Retina project icons ------------------------------------------------- */
/* The project-type card icons ship as 2x assets. We render them smaller than the
   original 88px so they stay crisp (retina) on standard displays. 66px = 44px + 50%. */
.customization-calculator-page .card-icon-large {
  width: 66px;
  height: auto;
}