/* Zen Fibre Order Flow Integration — theme overrides */

/* FIX 1: Topbar left-align */
.tw-topbar-left {
  justify-content: flex-start !important;
}

/* FIX 2: Hero search form - visible bordered input */
.tw-hero__search {
  background: rgba(255, 255, 255, 0.08) !important;
}

.tw-hero__search-input,
input.tw-hero__search-input {
  background: transparent !important;
  background-color: transparent !important;
  color: #fff !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
  border-radius: 8px !important;
}

.tw-hero__search-input::placeholder,
input.tw-hero__search-input::placeholder {
  color: rgba(255, 255, 255, 0.55) !important;
}

.tw-hero__search-input:-webkit-autofill,
input.tw-hero__search-input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px rgba(6, 16, 32, 0.01) inset !important;
  -webkit-text-fill-color: #fff !important;
}

/* FIX 3: Button colors */
.zfo-btn,
.zfo-btn-primary,
button.zfo-btn,
button.zfo-btn-primary {
  color: #fff !important;
}

.tw-pkg-cta,
a.tw-pkg-cta,
.tw-pkg-cta:visited,
.tw-pkg-cta .tw-btn,
.tw-pkg-cta a.tw-btn {
  color: #fff !important;
  border-radius: 50px !important;
}

.tw-pkg-cta .tw-btn:hover,
.tw-pkg-cta a.tw-btn:hover,
a.tw-pkg-cta:hover {
  color: #fff !important;
}

.tw-pkg-card--featured .tw-pkg-cta,
.tw-pkg-card--featured a.tw-pkg-cta,
.tw-pkg-card--featured .tw-pkg-cta .tw-btn {
  color: #fff !important;
}

.tw-btn.tw-btn--primary,
a.tw-btn.tw-btn--primary {
  color: #fff !important;
}

.tw-pkg-cta {
  color: #fff !important;
}

.zfo-btn-ghost,
button.zfo-btn-ghost {
  color: #374151 !important;
  border: 1.5px solid #d1d5db !important;
  background: #fff !important;
}

/* FIX 4 & 5: Broadband-order page — no duplicate hero / CTA */
body.tw-zfo-order-page .th-page-hero,
body.page-id-1660 .th-page-hero,
body.tw-zfo-order-page section:has(#th-page-postcode),
body.page-id-1660 section:has(#th-page-postcode) {
  display: none !important;
}

/* FIX 7: Order page shell — 1340px max, compact top spacing */
body.tw-zfo-order-page .tw-zfo-order-main,
body.page-id-1660 .th-page-main {
  padding: 0 !important;
  background: transparent !important;
}

body.tw-zfo-order-page .tw-zfo-order-shell,
body.page-id-1660 .th-page-body,
body.page-id-1660 .entry-content {
  max-width: 1340px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 50px 24px !important;
  box-sizing: border-box !important;
}

body.tw-zfo-order-page .zfo-wrap,
body.page-id-1660 .zfo-wrap {
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Address list scroll — theme hides global scrollbars */
body.tw-zfo-order-page .zfo-address-list,
html body .zfo-wrap .zfo-address-list {
  max-height: min(380px, 52vh) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-width: thin !important;
}

body.tw-zfo-order-page .zfo-address-list::-webkit-scrollbar,
html body .zfo-wrap .zfo-address-list::-webkit-scrollbar {
  width: 8px !important;
  height: 8px !important;
}

body.tw-zfo-order-page .zfo-address-list::-webkit-scrollbar-thumb,
html body .zfo-wrap .zfo-address-list::-webkit-scrollbar-thumb {
  display: block !important;
  background: #57d6e2 !important;
  border-radius: 4px !important;
}

/* Order flow preloader overlay */
.zfo-preloader {
  position: fixed !important;
  inset: 0 !important;
  z-index: 999999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(11, 29, 58, 0.58) !important;
  backdrop-filter: blur(4px) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity 0.2s ease, visibility 0.2s ease !important;
  pointer-events: none !important;
}

.zfo-preloader.is-active {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: all !important;
}

body.zfo-preloader-open {
  overflow: hidden !important;
}

.zfo-preloader__box {
  background: #fff !important;
  border-radius: 16px !important;
  padding: 32px 36px !important;
  text-align: center !important;
  box-shadow: 0 24px 64px rgba(11, 29, 58, 0.25) !important;
  max-width: 320px !important;
  width: calc(100% - 32px) !important;
}

.zfo-preloader__spinner {
  width: 44px !important;
  height: 44px !important;
  margin: 0 auto 18px !important;
  border: 3px solid #e2e8f0 !important;
  border-top-color: #57d6e2 !important;
  border-radius: 50% !important;
  animation: zfo-spin 0.75s linear infinite !important;
}

@keyframes zfo-spin {
  to {
    transform: rotate(360deg);
  }
}

.zfo-preloader__text {
  margin: 0 0 6px !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: #0b1d3a !important;
}

.zfo-preloader__sub {
  margin: 0 !important;
  font-size: 0.85rem !important;
  color: #5a6a85 !important;
}

.zfo-btn.is-loading {
  opacity: 0.8 !important;
  cursor: wait !important;
  pointer-events: none !important;
}

/* FIX 6: Package tab panels display */
.tw-pkg-panel.active {
  display: grid !important;
}

/* Postcode validation error — always below form bar */
.zfo-inline-error {
  display: block !important;
  width: 100% !important;
  max-width: 500px !important;
  color: #e53e3e !important;
  font-size: 13px !important;
  margin: 8px auto 0 !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  clear: both !important;
  text-align: center !important;
}

.pkg-hero-inner .zfo-inline-error,
.tw-hero__search .zfo-inline-error,
.tw-cta__form-wrap .zfo-inline-error,
.cov-checker-card .zfo-inline-error {
  max-width: 500px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

/* FIX 7: Footer max-width */
.tw-footer__main,
.tw-footer__inner,
.tw-footer__bottom-inner {
  max-width: 1540px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* FIX 9: RESPONSIVE - Inner pages, About, Contact */

/* Header navigation hamburger at tablet */
@media (max-width: 1100px) {
  .tw-nav,
  .th-nav {
    display: none !important;
  }

  .tw-hamburger,
  .th-mobile-toggle {
    display: flex !important;
  }

  .tw-header-phone,
  .th-header-phone {
    display: none !important;
  }

  .tw-hero__inner,
  html body .tw-hero__inner {
    padding: 0 20px !important;
  }

  /* Package page responsive */
  .pkg-hero-inner {
    padding: 0 20px !important;
  }

  .pkg-plans-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .pkg-search-bar {
    width: calc(100% - 40px) !important;
    max-width: 100% !important;
  }

  /* Inner page sections */
  .th-packages-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* Mobile portrait (<=768px) */
@media (max-width: 768px) {
  /* Ensure all inner content is contained */
  html,
  body {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  /* Inner sections padding */
  html body [class*="__inner"] {
    max-width: 100% !important;
  }

  html body .tw-inner-section__inner,
  html body .tw-inner-hero__inner,
  html body .tw-inner-cta__inner {
    padding-left: 20px !important;
    padding-right: 20px !important;
    max-width: 100% !important;
  }

  /* Hero text sizes */
  .tw-inner-hero__title,
  .th-inner-hero h1 {
    font-size: clamp(1.8rem, 6vw, 3rem) !important;
  }

  /* Header */
  .tw-header-inner,
  html body .tw-header-inner {
    padding: 0 16px !important;
  }

  /* Footer */
  .tw-footer__nav {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 24px !important;
  }

  html body .tw-footer__inner,
  html body .tw-footer__main,
  html body .tw-footer__bottom,
  html body .tw-footer__bottom-inner {
    padding-left: 16px !important;
    padding-right: 16px !important;
    max-width: 100% !important;
  }

  /* CTA strips */
  .tw-cta__inner,
  html body .tw-cta__inner {
    flex-direction: column !important;
    text-align: center !important;
  }

  .tw-cta__actions,
  .th-cta-strip__actions {
    flex-direction: column !important;
    align-items: center !important;
  }

  /* Coverage section */
  .tw-coverage__grid,
  .tw-coverage-grid {
    grid-template-columns: 1fr !important;
  }

  /* Why section */
  .tw-why__grid {
    grid-template-columns: 1fr !important;
  }

  /* Stats */
  .tw-stats__grid,
  .tw-stats__inner {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Tech section */
  .tw-tech__grid {
    grid-template-columns: 1fr !important;
  }

  /* Reviews */
  .tw-reviews__grid {
    grid-template-columns: 1fr !important;
  }

  /* FAQ */
  .tw-faq__grid {
    grid-template-columns: 1fr !important;
  }

  /* Business section */
  .tw-business__grid {
    grid-template-columns: 1fr !important;
  }

  /* How section */
  .tw-how__steps {
    grid-template-columns: 1fr !important;
  }

  /* Package page search bar */
  .pkg-search-bar {
    flex-direction: column !important;
    gap: 12px !important;
    border-radius: 16px !important;
    padding: 16px !important;
  }

  .pkg-search-bar input {
    width: 100% !important;
    border-radius: 50px !important;
  }

  .pkg-search-bar button,
  #pkg-check-btn {
    width: 100% !important;
    border-radius: 50px !important;
  }

  /* Package plans grid */
  .pkg-plans-grid {
    grid-template-columns: 1fr !important;
  }

  .tw-pkg-tabs {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  /* About page */
  .th-about-story__grid,
  .th-about-team-content {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  .th-values-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }

  .th-team-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .th-inner-section__inner,
  html body .th-inner-section__inner {
    padding: 0 20px !important;
  }

  /* Contact page */
  .th-contact-grid,
  .tw-contact-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  .th-contact-map-inner {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  /* Coverage checker page */
  .th-coverage-grid,
  .cov-input-row {
    grid-template-columns: 1fr !important;
    flex-direction: column !important;
    gap: 12px !important;
  }

  #cov-postcode {
    width: 100% !important;
  }

  #cov-check-btn {
    width: 100% !important;
    border-radius: 50px !important;
  }

  /* Tech section (inner pages) */
  .th-tech-pillars,
  .th-tech-grid {
    grid-template-columns: 1fr !important;
  }

  /* Business page */
  .th-business-usp-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Inner hero actions */
  .tw-inner-hero__actions,
  .th-inner-hero__actions {
    flex-direction: column !important;
    gap: 12px !important;
  }

  .tw-inner-hero__actions a,
  .th-inner-hero__actions a {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
  }

  /* Broadband order page */
  body.tw-zfo-order-page .tw-zfo-order-shell,
  body.page-id-1660 .th-page-body {
    padding: 40px 16px !important;
  }
}

/* Small mobile (<=480px) */
@media (max-width: 480px) {
  .tw-stats__grid,
  .tw-stats__inner {
    grid-template-columns: 1fr !important;
  }

  .th-values-grid,
  .th-team-grid {
    grid-template-columns: 1fr !important;
  }

  .th-business-usp-grid {
    grid-template-columns: 1fr !important;
  }

  /* Footer nav */
  .tw-footer__nav,
  .th-footer-grid {
    grid-template-columns: 1fr !important;
  }

  /* Inner page hero title */
  .tw-inner-hero__title,
  .th-inner-hero h1 {
    font-size: clamp(1.6rem, 7vw, 2.2rem) !important;
  }

  /* Package cards */
  .th-package-card {
    padding: 20px 16px !important;
  }

  /* Contact info cards */
  .tw-contact-info-card,
  .th-contact-info-card {
    padding: 20px !important;
  }
}