/* ============================================================
   Wireless Dynamics – Fibre Plan Selector
   Design Tokens & Component Styles (from Figma)
   ============================================================ */

/* ── Design Tokens ──────────────────────────────────────────── */
:root {
  /* Colors */
  --navy:       #06425a;
  --teal-1:     #41bbb8;
  --teal-2:     #72cac8;
  --teal-3:     #95d5d4;
  --teal-4:     #b9e2e0;
  --orange-1:   #ff9601;
  --orange-2:   #faab50;
  --orange-3:   #fed3a2;
  --light-grey: #f5f5f5;
  --soft-black: #1f2323;
  --white:      #ffffff;

  /* Spacing */
  --space-3xs:  8px;
  --space-2xs:  12px;
  --space-xs:   16px;
  --space-sm:   20px;
  --space-ms:   24px;
  --space-md:   32px;
  --space-ml:   40px;
  --space-lg:   64px;
  --space-xl:   80px;
  --space-2xl:  120px;
  --space-section-lg: 112px;
  --space-section-md: 80px;

  /* Layout */
  --container-max: 1280px;
  --content-max:   768px;
  --content-md:    560px;
  --page-padding:  64px;

  /* Border Radii */
  --radius-card:  16px;
  --radius-btn:   8px;
  --radius-field: 5px;
  --radius-checkbox: 2px;

  /* Shadows */
  --shadow-card:   0 2px 8px rgba(6, 66, 90, 0.08);
  --shadow-sticky: 0 4px 16px rgba(6, 66, 90, 0.12);
}

/* ── Base ───────────────────────────────────────────────────── */
*,
*::before,
*::after { box-sizing: border-box; }

body {
  font-family: 'Montserrat', sans-serif;
  color: var(--navy);
  background: var(--white);
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Hero ───────────────────────────────────────────────────── */
.hero-bg {
  background: linear-gradient(135deg, #053a4f 0%, #06425a 30%, #085a6e 60%, #0a7a8c 100%);
  position: relative;
  overflow: hidden;
}

.hero-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 70% 120%, rgba(65, 187, 184, 0.3) 0%, transparent 60%),
    radial-gradient(ellipse at 20% 80%, rgba(255, 150, 1, 0.15) 0%, transparent 50%);
  pointer-events: none;
}

/* ── Speed Gauge ────────────────────────────────────────────── */
.speed-gauge { width: 180px; height: 180px; }

.gauge-track {
  fill: none;
  stroke: #fff;
  stroke-width: 24;
  stroke-linecap: round;
  stroke-dasharray: 353.43 471.24;
  transform: rotate(135deg);
  transform-origin: center;  filter: url(#gauge-inner-shadow);}

.gauge-fill {
  fill: none;
  stroke-width: 24;
  stroke-linecap: round;
  stroke-dasharray: 353.43 471.24;
  stroke-dashoffset: 353.43;
  transform: rotate(135deg);
  transform-origin: center;
  transition: stroke-dashoffset 0.6s ease;
}

.gauge-inner {
  fill: white;
  filter: url(#gauge-inner-drop-shadow);
}

/* ── Card Selection States ──────────────────────────────────── */
.plan-card,
.term-card {
  position: relative;
  overflow: hidden;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
  cursor: pointer;
}

.plan-card:hover,
.term-card:hover {
  border-color: var(--teal-1);
  box-shadow: var(--shadow-card);
  transform: translateY(-2px);
}

.plan-card.selected,
.term-card.selected {
  border-color: var(--teal-1);
  border-width: 2px;
}

/* ── Selected Marker ────────────────────────────────────────── */
.selected-marker {
  display: none;
  position: absolute;
  bottom: 0;
  right: 0;
  background: var(--teal-1);
  border-top-left-radius: var(--radius-card);
  padding: var(--space-3xs);
  align-items: center;
  justify-content: center;
}

.plan-card.selected .selected-marker,
.term-card.selected .selected-marker {
  display: flex;
}

/* ── Checkbox & Radio ───────────────────────────────────────── */
.custom-checkbox,
.custom-radio {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border: 1px solid var(--teal-1);
  background: var(--white);
  cursor: pointer;
  flex-shrink: 0;
  margin-top: 3px;
}

.custom-checkbox { border-radius: var(--radius-checkbox); }
.custom-radio    { border-radius: 50%; }

.custom-checkbox:checked {
  background: var(--teal-1);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.5 11.5L3 8l1-1 2.5 2.5 5-5 1 1z'/%3E%3C/svg%3E");
  background-size: 16px;
  background-position: center;
  background-repeat: no-repeat;
}

.custom-radio:checked {
  background: var(--white);
  border-width: 4px;
  border-color: var(--teal-1);
}

/* ── Banners ────────────────────────────────────────────────── */
.banner {
  border-left-width: 5px;
  border-left-style: solid;
  border-radius: 5px;
  padding: var(--space-sm);
  display: flex;
  gap: 12px;
  align-items: center;
}

.banner--success {
  background: var(--teal-3);
  border-left-color: var(--teal-1);
}

.banner--warning {
  background: var(--orange-3);
  border-left-color: var(--orange-1);
}

.banner svg { flex-shrink: 0; }

/* ── Accordion ──────────────────────────────────────────────── */
.accordion-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease;
}

.accordion-item.open .accordion-answer {
  max-height: 500px;
  padding-bottom: var(--space-ms);
}

.accordion-icon {
  transition: transform 0.3s ease;
}

.accordion-item.open .accordion-icon {
  transform: rotate(180deg);
}

/* ── Form Inputs ────────────────────────────────────────────── */
.page-grid .form-input {
  width: 100%;
  border: 1px solid var(--teal-1);
  border-radius: var(--radius-field);
  padding: var(--space-xs) var(--space-xs) var(--space-xs) var(--space-2xs);
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  font-size: 18px;
  font-weight: 500;
  color: var(--navy);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  background: var(--white);
  height: 45px;
  letter-spacing: -0.18px;
  line-height: 1.1;
}

.form-input:focus {
  border-color: var(--navy);
  box-shadow: 0 0 0 2px rgba(6, 66, 90, 0.15);
}

.form-input::placeholder {
  color: var(--teal-2);
  font-weight: 500;
}

/* ── Buttons ────────────────────────────────────────────────── */
.btn-primary {
  background: var(--navy);
  color: var(--white);
  font-family: 'Montserrat', sans-serif;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.18px;
  line-height: 1.1;
  padding: var(--space-2xs) var(--space-xs);
  border-radius: var(--radius-btn);
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 45px;
  transition: background 0.2s, transform 0.15s;
}

.btn-primary:hover {
  background: #053a4f;
  transform: translateY(-1px);
}

.btn-outline {
  border: 1px solid var(--navy);
  color: var(--navy);
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  font-weight: 400;
  padding: var(--space-2xs) var(--space-ms);
  background: transparent;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.btn-outline:hover {
  background: var(--navy);
  color: var(--white);
}

/* ── Option Container (radio/checkbox groups) ───────────────── */
.option-container {
  background: var(--white);
  border: 1px solid var(--teal-3);
  border-radius: var(--radius-btn);
  padding: var(--space-xs);
  display: flex;
  gap: var(--space-xs);
  align-items: flex-start;
  cursor: pointer;
  transition: border-color 0.2s;
}

.option-container:hover {
  border-color: var(--teal-1);
}

.option-container.selected {
  border: 2px solid var(--teal-1);
}

/* ── Term Badge Gradient ────────────────────────────────────── */
.term-badge {
  border-radius: var(--radius-btn);
  padding: 4px var(--space-3xs);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: -0.11px;
  text-transform: uppercase;
  color: var(--navy);
  line-height: 1.1;
  width: fit-content;
}

.term-badge__fixed-term, .term-badge__flexi-term {
  background: var(--teal-3);
}

.term-badge__open-term {
  background: var(--orange-3);
}

/* ── Note Bar ───────────────────────────────────────────────── */
.note-bar {
  background: var(--light-grey);
  border-radius: var(--radius-field);
  padding: var(--space-sm);
  font-size: 14px;
  font-weight: 500;
  color: var(--navy);
  letter-spacing: -0.14px;
  line-height: 1;
}

/* ── Summary Check Bullet ───────────────────────────────────── */
.summary-bullet {
  display: flex;
  gap: var(--space-3xs);
  align-items: flex-start;
}

.summary-bullet svg { flex-shrink: 0; margin-top: 1px; }

/* ── Sticky Summary ─────────────────────────────────────────── */
.sticky-summary {
  position: sticky;
  top: 40px;
  align-self: start;
}

/* ── Conditional Visibility ─────────────────────────────────── */
/* Using .is-visible instead of .visible to avoid collision with
   Tailwind v4's built-in .visible { visibility: visible } utility.
   !important ensures these override any Tailwind display utilities. */
.hidden-section { display: none !important; }
.hidden-section.is-visible { display: flex !important; }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 1024px) {
  :root {
    --page-padding: 24px;
  }

  .page-grid {
    grid-template-columns: 1fr !important;
  }

  /* Summary becomes a slide-up drawer on mobile, sitting above the bar */
  .sticky-summary {
    position: fixed;
    bottom: 64px; /* clears the fixed summary bar */
    left: 0;
    right: 0;
    top: unset;
    align-self: unset;
    order: 0;
    z-index: 200;
    max-height: calc(80vh - 64px);
    overflow-x: hidden;
    overflow-y: auto;
    border-radius: 16px 16px 0 0;
    transform: translateY(calc(100% + 64px)); /* fully below bar when closed */
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .sticky-summary.drawer-open {
    transform: translateY(0);
  }

  /* Round only the top corners of the inner card */
  .sticky-summary > div {
    border-radius: 16px 16px 0 0 !important;
  }

  /* Totals are shown in the bar — hide the footer inside the drawer */
  .sticky-summary #summary-footer {
    display: none !important;
  }

  /* Add space at the bottom of main so content clears the fixed bar */
  .wd-plan-selector main {
    padding-bottom: 80px;
  }
}

/* ── Mobile Summary Bar ─────────────────────────────────────── */
.mob-drawer-close { display: none; }
#mobile-summary-bar { display: none; }
#mobile-summary-overlay { display: none; }

@media (max-width: 1024px) {
  .mob-drawer-close {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--navy);
    padding: 4px;
    border-radius: 4px;
    flex-shrink: 0;
  }

  .mob-drawer-close:hover { background: var(--light-grey); }

  #mobile-summary-bar {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 201;
    background: var(--navy);
    color: var(--white);
    padding: 12px 20px;
    padding-bottom: max(14px, env(safe-area-inset-bottom));
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-family: 'Montserrat', sans-serif;
  }

  .mob-bar-left {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }

  .mob-bar-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--teal-4);
    letter-spacing: -0.12px;
    line-height: 1.2;
  }

  .mob-bar-price {
    font-size: 18px;
    font-weight: 600;
    color: var(--white);
    letter-spacing: -0.18px;
    line-height: 1.1;
  }

  #mobile-summary-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 8px;
    color: var(--white);
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -0.14px;
    padding: 8px 12px;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background 0.2s;
  }

  #mobile-summary-toggle:hover { background: rgba(255, 255, 255, 0.1); }

  .mob-bar-chevron {
    transition: transform 0.3s ease;
  }

  .mob-bar-chevron.is-open {
    transform: rotate(180deg);
  }

  #mobile-summary-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 199;
    background: rgba(6, 66, 90, 0.6);
  }

  #mobile-summary-overlay.is-visible {
    display: block;
  }
}

@media (max-width: 768px) {
  .plan-grid,
  .term-grid {
    grid-template-columns: 1fr !important;
  }

  .page-grid .form-input {
    font-size: 14px;
  }

  .name-grid {
    grid-template-columns: 1fr !important;
  }

  .hero-content h1 {
    font-size: 36px !important;
  }

  .wd-plan-selector .flex-col.gap-\[80px\] {
    gap: 50px;
  }
}

/* ── Form validation error state ─────────────────────────── */
.field-error {
  border-color: var(--orange-1) !important;
}

/* ── Devoli Autocomplete Dropdown ────────────────────────── */
.devoli-ac-list {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 1000;
  margin: 4px 0 0;
  text-align: left;
  padding: 0;
  list-style: none;
  background: var(--white);
  border: 1px solid var(--teal-4);
  border-radius: var(--radius-field);
  box-shadow: var(--shadow-card);
  max-height: 240px;
  overflow-y: auto;
}

.devoli-ac-item {
  padding: 10px 14px;
  font-size: 14px;
  color: var(--soft-black);
  cursor: pointer;
  transition: background 0.15s ease;
}

.devoli-ac-item:hover,
.devoli-ac-item.devoli-ac-active {
  background: var(--teal-4);
  color: var(--navy);
}

.devoli-ac-empty {
  padding: 10px 14px;
  font-size: 14px;
  color: #999;
  font-style: italic;
}

/* ── Themify Specificity Overrides ──────────────────────────── */
/* ROOT CAUSE: Tailwind v4 places all utilities inside @layer. Any
   unlayered stylesheet (Themify included) always beats @layer content
   regardless of specificity. We re-declare every Tailwind utility the
   plugin uses as unlayered CSS scoped to .wd-plan-selector, giving them
   (0,2,0) — enough to beat Themify's element selectors at (0,0,1).    */

/* ── Base colour & font ── */
.wd-plan-selector {
  color: var(--navy);
  font-family: 'Montserrat', sans-serif;
}

/* Force text elements to inherit from the wrapper rather than pick up
   Themify's theme-wide element colour rules (0,0,1). The (0,1,1) rule
   below loses to the (0,2,0) colour utilities declared right after it,
   so explicit Tailwind colour classes (text-white, text-teal-4, etc.)
   still win when present. */
.wd-plan-selector p,
.wd-plan-selector span,
.wd-plan-selector button,
.wd-plan-selector button:hover,
.wd-plan-selector label,
.wd-plan-selector h1,
.wd-plan-selector h2,
.wd-plan-selector h3,
.wd-plan-selector h4,
.wd-plan-selector h5,
.wd-plan-selector h6,
.wd-plan-selector li       { color: inherit; }

/* ── Text colour utilities ── */
.wd-plan-selector .text-navy     { color: var(--navy); }
.wd-plan-selector .text-white    { color: var(--white); }
.wd-plan-selector .text-teal-1   { color: var(--teal-1); }
.wd-plan-selector .text-teal-2   { color: var(--teal-2); }
.wd-plan-selector .text-teal-4   { color: var(--teal-4); }
.wd-plan-selector .text-orange-1 { color: var(--orange-1); }

/* Stop Themify's a / a:hover colour rules leaking in, but preserve
   explicit Tailwind colour classes on links (higher specificity wins). */

.wd-plan-selector a:hover,
.wd-plan-selector a:focus          { color: inherit; }
.wd-plan-selector .text-teal-1,
.wd-plan-selector .text-teal-1:hover { color: var(--teal-1); }

/* ── Display utilities ── */
.wd-plan-selector .block    { display: block; }
.wd-plan-selector .flex     { display: flex; }
.wd-plan-selector .grid     { display: grid; }
.wd-plan-selector .inline   { display: inline; }
.wd-plan-selector .contents { display: contents; }

/* ── Flex utilities ── */
.wd-plan-selector .flex-col        { flex-direction: column; }
.wd-plan-selector .flex-1          { flex: 1 1 0%; }
.wd-plan-selector .shrink-0        { flex-shrink: 0; }
.wd-plan-selector .items-center    { align-items: center; }
.wd-plan-selector .items-end       { align-items: flex-end; }
.wd-plan-selector .items-start     { align-items: flex-start; }
.wd-plan-selector .justify-between { justify-content: space-between; }
.wd-plan-selector .self-start      { align-self: flex-start; }

/* ── Grid utilities ── */
.wd-plan-selector .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wd-plan-selector .grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ── Background utilities ── */
.wd-plan-selector .bg-white      { background-color: var(--white); }
.wd-plan-selector .bg-light-grey { background-color: var(--light-grey); }

/* ── Margin utilities ── */
.wd-plan-selector .mx-auto     { margin-inline: auto; }
.wd-plan-selector .mt-auto     { margin-top: auto; }
.wd-plan-selector .mt-8        { margin-top: 2rem; }
.wd-plan-selector .mt-\[1px\]  { margin-top: 1px; }
.wd-plan-selector .mt-\[2px\]  { margin-top: 2px; }
.wd-plan-selector .mt-\[8px\]  { margin-top: 8px; }
.wd-plan-selector .mt-\[24px\] { margin-top: 24px; }

/* ── Padding utilities ── */
.wd-plan-selector .p-\[16px\]   { padding: 16px; }
.wd-plan-selector .p-\[20px\]   { padding: 20px; }
.wd-plan-selector .p-\[24px\]   { padding: 24px; }
.wd-plan-selector .px-\[20px\]  { padding-inline: 20px; }
.wd-plan-selector .px-\[24px\]  { padding-inline: 24px; }
.wd-plan-selector .px-\[64px\]  { padding-inline: 64px; }
.wd-plan-selector .py-\[12px\]  { padding-block: 12px; }
.wd-plan-selector .py-\[20px\]  { padding-block: 20px; }
.wd-plan-selector .py-\[40px\]  { padding-block: 40px; }
.wd-plan-selector .py-\[80px\]  { padding-block: 80px; }
.wd-plan-selector .py-\[112px\] { padding-block: 112px; }
.wd-plan-selector .pt-\[4px\]   { padding-top: 4px; }
.wd-plan-selector .pt-\[20px\]  { padding-top: 20px; }
.wd-plan-selector .pt-\[200px\] { padding-top: 200px; }
.wd-plan-selector .pr-\[24px\]  { padding-right: 24px; }
.wd-plan-selector .pb-\[2px\]   { padding-bottom: 2px; }
.wd-plan-selector .pb-\[20px\]  { padding-bottom: 20px; }
.wd-plan-selector .pb-\[80px\]  { padding-bottom: 80px; }

/* ── Component padding & colour ── */
.wd-plan-selector .form-input {
  padding: var(--space-xs) var(--space-xs) var(--space-xs) var(--space-2xs);
  color: var(--navy);
}
.wd-plan-selector .btn-primary {
  padding: var(--space-2xs) var(--space-xs);
  color: var(--white);
}
.wd-plan-selector .btn-outline {
  padding: var(--space-2xs) var(--space-ms);
  color: var(--navy);
}
.wd-plan-selector .option-container { padding: var(--space-xs); }
.wd-plan-selector .banner           { padding: var(--space-sm); }
.wd-plan-selector .note-bar         { padding: var(--space-sm); color: var(--navy); }

/* ── Hover specificity boost ── */
/* Adding .wd-plan-selector prefix raises these to (0,3,0), beating any
   Themify button:hover / a:hover rule at (0,0,2) or (0,1,1).          */
.wd-plan-selector .plan-card:hover,
.wd-plan-selector .term-card:hover {
  border-color: var(--teal-1);
  box-shadow: var(--shadow-card);
  transform: translateY(-2px);
}
.wd-plan-selector .btn-primary:hover {
  background: #053a4f;
  color: var(--white);
  transform: translateY(-1px);
}
.wd-plan-selector .btn-outline:hover {
  background: var(--navy);
  color: var(--white);
}
.wd-plan-selector .option-container:hover { border-color: var(--teal-1); }

.wd-plan-selector a {
  color: var(--teal-1);
}

/* ── Checkbox & radio reset ─────────────────────────────────── */
/* Themify's input:is([type=radio],[type=checkbox]) rule (0,1,1) overrides
   .custom-checkbox / .custom-radio at (0,1,0), forcing 1.3em sizing,
   .6em padding, and a theme border-radius. Prefixing with .wd-plan-selector
   raises our selector to (0,2,0) to win the specificity battle. */
.wd-plan-selector .custom-checkbox,
.wd-plan-selector .custom-radio {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
  max-width: 16px;
  border: 1px solid var(--teal-1);
  border-radius: var(--radius-checkbox);
  background: var(--white);
  padding: 0;
  margin: 3px 0 0 0;
  cursor: pointer;
  flex-shrink: 0;
  display: inline-block;
  vertical-align: middle;
}

.wd-plan-selector .custom-radio { border-radius: 50%; }

.wd-plan-selector .custom-checkbox:checked {
  background: var(--teal-1);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.5 11.5L3 8l1-1 2.5 2.5 5-5 1 1z'/%3E%3C/svg%3E");
  background-size: 16px;
  background-position: center;
  background-repeat: no-repeat;
}

.wd-plan-selector .custom-radio:checked {
  background: var(--white);
  border-width: 4px;
  border-color: var(--teal-1);
}

/* ── Screen reader only (visually hidden) ───────────────────── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* ── Fibre Checker Widget Wrapper ───────────────────────────── */
/* Scoped wrapper to override Themify's input/spacing rules on
   the simple address checker shortcode. */
.fibre-checker-wrapper {
  width: 100%;
}

.fibre-checker-wrapper .flex {
  flex-wrap: wrap;
}

.fibre-checker-wrapper .form-input.fibre-checker-address {
  margin: 0;
  width: 100%;
}

@media (max-width: 768px) {
  .fibre-checker-wrapper .fibre-checker-widget .flex.gap-\[12px\] {
    flex-direction: column;
    gap: var(--space-xs);
  }

  .fibre-checker-wrapper .fibre-checker-widget .flex-1 {
    width: 100%;
  }

  .fibre-checker-wrapper .fibre-checker-widget .btn-primary {
    width: 100%;
  }

  .wd-plan-selector .flex.gap-\[12px\].items-center {
    flex-direction: column;
    align-items: stretch;
  }
}

.wd-plan-selector .custom-checkbox::before,
.wd-plan-selector .custom-checkbox:checked::before,
.wd-plan-selector .custom-radio:checked::before {
  content: none;
}