* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;
  font-family: 'Poppins', sans-serif;
  color: #004d40;
  background: #e8f5e9;
}

a {
  text-decoration: none;
  color: inherit;
}

header {
  background: #fff;
  padding: 20px 40px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  position: sticky;
  top: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

header .logo img {
  height: 130px;
  border-radius: 0;
  box-shadow: none !important;
}

header .header-text {
  font-weight: 700;
  font-size: 2rem;
  color: #225885;
  margin-left: 0;
  user-select: none;
}
header .header-text2 {
  color: #225885;
}

header .left-group {
  display: flex;
  align-items: center;
  gap: 30px;
}

nav {
  display: flex;
  gap: 30px;
  align-items: center;
}

nav a {
  font-weight: 600;
  color: #225885;
  font-size: 1.1rem;
  position: relative;
  padding-bottom: 3px;
}

nav a:hover {
  color: #1b5e20;
}

nav a.active::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 3px;
  background: #4caf50;
  bottom: -8px;
  left: 0;
  border-radius: 2px;
}

.quote-btn {
  background-color: #4caf50;
  color: white !important;
  padding: 12px 30px;
  border-radius: 30px;
  font-weight: 700;
  font-size: 1.1rem;
  box-shadow: 0 6px 15px rgba(76, 175, 80, 0.7);
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
  display: inline-block;
  text-decoration: none;
}

.quote-btn:hover {
  background-color: #357a38;
  box-shadow: 0 10px 30px rgba(27, 94, 32, 0.85);
  color: white !important;
}

.hero {
  position: relative;
  height: 65vh;
  background: url('https://www.ClearOasisPools.com/images/photo-1614667288602-9ac6e37318a7.jpg') center/cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 77, 64, 0.5);
  backdrop-filter: blur(6px);
}

.hero-content {
  position: relative;
  max-width: 800px;
  padding: 0 20px;
}

.hero-content h1 {
  font-size: 3.5rem;
  margin-bottom: 20px;
  font-weight: 700;
  text-shadow: 1px 1px 6px rgba(0, 0, 0, 0.6);
}

.hero-content p {
  font-size: 1.3rem;
  margin-bottom: 30px;
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5);
}

main {
  max-width: 1100px;
  margin: 60px auto 80px auto;
  padding: 1px 20px;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 20px;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
}

.main--b {
  padding: 10px 40px 50px 40px;
}
/*
  The gallery page previously used an excessively large bottom padding
  (800px) to make room for a "coming soon" notice. Now that the page
  contains actual content, we reduce the bottom padding so that there
  isn't a massive blank space below the gallery. A modest bottom
  padding ensures the fixed "Get an Instant Quote" button has space
  without creating unnecessary scroll distance.
*/
.main--g {
  padding: 1vh 1vh 100px 1vh;
}

.intro {
  text-align: center;
  margin-bottom: 60px;
}

.intro h2 {
  font-size: 2.8rem;
  font-weight: 700;
  color: #2e7d32;
  margin-bottom: 20px;
}

.intro p {
  font-size: 1.2rem;
  color: #004d40;
  max-width: 700px;
  margin: 0 auto;
}

.services {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  gap: 40px;
}

.service-box {
  background: white;
  border-radius: 16px;
  padding: 30px;
  box-shadow: 0 6px 18px rgba(107, 191, 89, 0.3);
  flex: 1 1 280px;
  max-width: 320px;
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.service-box:hover {
  transform: translateY(-8px);
  box-shadow: 0 14px 40px rgba(107, 191, 89, 0.6);
}

.service-icon {
  font-size: 4rem;
  color: #4caf50;
  margin-bottom: 18px;
}

.service-box h3 {
  font-size: 1.6rem;
  margin-bottom: 15px;
  color: #225885;
}

.service-box p {
  font-size: 1.1rem;
  color: #004d40;
}

footer {
  background-color: #2e7d32;
  color: white;
  text-align: center;
  padding: 45px 12px;
  font-weight: 600;
  font-size: 1.1rem;
}

footer a {
  text-decoration: underline;
}

.nav-toggle {
  display: none;
  font-size: 2rem;
  background: none;
  border: none;
  color: #225885;
  cursor: pointer;
  z-index: 1001;
}

.nav-menu {
  display: flex;
  gap: 30px;
  align-items: center;
  right: -100%;
  transition: right 0.3s ease-in-out;
}

.nav-menu a {
  font-weight: 600;
  color: #225885;
  font-size: 1.1rem;
  position: relative;
  padding-bottom: 3px;
}

.nav-menu.open {
  right: 0;
}

.nav-overlay {
  display: none;
}

.nav-menu .close-nav {
  display: none;
}

#openQuoteFormBtn {
  position: fixed;
  bottom: 30px;
  right: 30px;
  background-color: #4caf50;
  color: white;
  border: none;
  padding: 15px 25px;
  border-radius: 30px;
  font-weight: 700;
  font-size: 1.1rem;
  cursor: pointer;
  box-shadow: 0 6px 15px rgba(76, 175, 80, 0.7);
  z-index: 99999;
  transition: opacity 150ms ease, transform 150ms ease;
  will-change: opacity, transform;
  visibility: visible;
}

#openQuoteFormBtn.hidden-in-footer {
  opacity: 0;
  visibility: hidden; 
  pointer-events: none;    
  transform: translateY(6px);
}

#quoteFormModal {
  display: none;
  position: fixed;
  z-index: 100000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  overflow: auto;
}

.modal-card {
  background: white;
  border-radius: 15px;
  max-width: 680px;
  margin: 60px auto;
  padding: 30px 40px;
  position: relative;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

#closeQuoteFormBtn {
  position: absolute;
  top: 18px;
  right: 18px;
  font-size: 24px;
  font-weight: bold;
  border: none;
  background: transparent;
  cursor: pointer;
  color: #444;
}

.wizard-title {
  color: #225885;
  text-align: center;
  margin: 10px 0 20px;
}

.progress-container {
  width: 100%;
  background: #e0e0e0;
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 20px;
}

.progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #4caf50, #2e7d32);
  transition: width 250ms ease;
}

.step {
  display: none;
}

.step.active {
  display: block;
}

.wizard-actions {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  gap: 8px;
}

.btn {
  background-color: #4caf50;
  color: white;
  border: none;
  padding: 12px 25px;
  border-radius: 30px;
  font-weight: 700;
  font-size: 1.05rem;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.btn[disabled] {
  opacity: .5;
  cursor: not-allowed;
}

.btn-outline {
  background: white;
  color: #2e7d32;
  border: 2px solid #4caf50;
}

.service-btn {
  position: relative;
  display: inline-block; /* shrink underline to text */
  color: #2e7d32;
  cursor: pointer;
}

.service-btn::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px; /* a little gap below text */
  width: 100%;
  height: 2px;
  background-color: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.service-btn:hover::after {
  transform: scaleX(1);
  opacity: 1;
}

.btn-outline:hover {
  background: #e8f5e9;
}

.field {
  margin-bottom: 18px;
}

.label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
}

.label .info-btn {
  margin-left: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: 14px;
  font-weight: 700;
  border: 2px solid #225885;
  color: #225885;
  background: #eef6ff;
  cursor: pointer;
  vertical-align: middle;
}

.label .info-btn:hover {
  background: #d8ecff;
}

.input {
  width: 100%;
  padding: 12px;
  border-radius: 10px;
  border: 1.8px solid #ccc;
  font-size: 1rem;
  background: #fff;
}

.select {
  width: 100%;
  padding: 12px;
  border-radius: 10px;
  border: 1.8px solid #ccc;
  font-size: 1rem;
  background: #fff;
}

.hint {
  font-size: .9rem;
  color: #666;
  margin-top: 6px;
}

.error {
  color: #b00020;
  font-weight: 600;
  margin-top: 6px;
}

.info-panel {
  display: none;
  background: #ffffff;
  border: 2px solid #b3e5fc;
  border-radius: 10px;
  padding: 12px;
  margin: 8px 0 0;
  color: #0d47a1;
  font-size: .9rem;
  box-shadow: 0 4px 12px rgba(13, 71, 161, 0.08);
}

#finalResult {
  display: none;
  margin-top: 18px;
  padding: 18px;
  border-radius: 14px;
  background: #ffffff;
  border: 2px solid #c8e6c9;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.quote-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin-top: 10px;
}

.price-card {
  border-radius: 14px;
  padding: 16px;
  text-align: center;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
  border: 2px solid transparent;
}

.price-card h4 {
  margin: 0 0 8px;
  font-size: 1.05rem;
  color: #093b5c;
}

.price-card .big {
  font-size: 2rem;
  font-weight: 800;
}

.chem {
  background: #f3fff6;
  border-color: #56bb6f;
}

.ess {
  background: #eef6ff;
  border-color: #5b9bd5;
}

.adv {
  background: #fff8e1;
  border-color: #f4b400;
}

.actions-final {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.disclaimer {
  font-size: .75rem;
  color: #35524a;
  margin-top: 15px;
}

.info-box {
  display: none;
  background: #fff8e1;
  border: 2px solid #f4b400;
  color: #5d4200;
  padding: 14px;
  border-radius: 12px;
  margin: 10px 0 0;
}

.h1--s {
  color: #225885;
  font-size: 2.8rem;
  margin-bottom: 40px;
  text-align: center;
}

.plans {
  margin: 40px 0;
}

.plans h2 {
  color: #225885;
  font-size: 2.5rem;
  text-align: center;
  margin-bottom: 30px;
}

.plan-container {
  display: flex;
  gap: 25px;
  flex-wrap: wrap;
  justify-content: center;
}

.plan-card {
  border-radius: 15px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  padding: 25px;
  flex: 1 1 300px;
  max-width: 320px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.plan-card h3 {
  margin-bottom: 12px;
}

.plan-card p {
  font-size: 1.05rem;
  margin-bottom: 12px;
}

.plan-card ul {
  padding-left: 20px;
  margin-bottom: 12px;
}

.plan-card ul li {
  margin-bottom: 6px;
}

.plan-card em {
  color: #225885;
}

.plan-card.essential {
  background-color: #d1e7dd;
  color: #0f5132;
}

.plan-card.standard {
  background-color: #cfe2ff;
  color: #084298;
}

.plan-card.premium {
  background-color: #ffe5b4;
  color: #664d03;
}

.plan-card.essential .select-btn {
  background-color: #198754;
  color: white;
}

.plan-card.essential .select-btn:hover {
  background-color: #146c43;
}

.plan-card.standard .select-btn {
  background-color: #0d6efd;
  color: white;
}

.plan-card.standard .select-btn:hover {
  background-color: #084298;
}

.plan-card.premium .select-btn {
  background-color: #ffc107;
  color: #664d03;
}

.plan-card.premium .select-btn:hover {
  background-color: #d39e00;
  color: #442a00;
}

.addons {
  max-width: 1100px;
  border-radius: 15px;
  padding-left: 25px;
  margin: 40px auto 0 auto;
}

.addons a {
  text-decoration: underline;
}

.soon {
  max-width: 1100px;
  border-radius: 15px;
  margin: 40px 40px 0 40px;
  display: flex;
  justify-content: center;
  font-size: 1.5rem;
}

@media (max-width: 900px) {
  .services {
    flex-direction: column;
    align-items: center;
  }

  .nav-toggle {
    display: block;
    position: absolute;
    right: 20px;
  }

  .nav-toggle.hide {
    display: none;
  }

  .nav-menu {
    flex-direction: column;
    gap: 20px;
    background-color: #fff;
    position: fixed;
    top: 0;
    right: -100%;
    width: 75%;
    height: 100%;
    padding: 60px 30px;
    box-shadow: -4px 0 10px rgba(0, 0, 0, 0.2);
    transition: right 0.3s ease-in-out;
    z-index: 1000;
  }

  .nav-menu.open {
    right: 0;
  }

  .nav-overlay {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: 999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease-in-out;
  }

  .nav-overlay.show {
    opacity: 1;
    pointer-events: auto;
  }

  .nav-menu .close-nav {
    display: block;
    background: none;
    border: none;
    font-size: 2rem;
    color: #225885;
    position: absolute;
    top: 20px;
    right: 20px;
    cursor: pointer;
  }

  header .header-text,.header-text2 {
    display: none;
  }

  .nav-menu a {
    font-size: 1.2rem;
    padding: 10px 0;
  }

  header {
    align-items: center;
  }

  .left-group {
    display: flex;
    justify-content: center;
    width: 100%;
  }

  .hero-content h1 {
    font-size: 2.7rem;
  }

  .hero-content p {
    font-size: 1.1rem;
  }
}

@media (max-width: 480px) {
  .hero-content a.cta-btn {
    font-size: 1.1rem;
    padding: 12px 28px;
  }
}

@media (max-width: 600px) {
  main {
    margin: 40px 10px 60px 10px;
    padding: 20px;
  }

  h1 {
    font-size: 2.2rem;
    margin-bottom: 30px;
  }

  .plan-card h3 {
    font-size: 1.5rem;
  }

  .plan-card p {
    font-size: 1rem;
  }
}


/* === Final page: side-by-side cards (no size changes), clearer text === */
#finalResult .quote-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(180px, 1fr)) !important;
  gap: 14px !important;
}

#finalResult h3 {
  color: #0a3a5c !important;
  font-weight: 800 !important;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

#finalResult .price-card h4 {
  color: #0a3a5c !important;
  font-weight: 700 !important;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

#finalResult .disclaimer {
  color: #35524a !important;
}

#finalResult .actions-final {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}

/* keep two green buttons on the left; push Start Over to the far right */
#finalResult .actions-final { justify-content: flex-start; }
#finalResult #startOverBtn { margin-left: auto; }

.quote-grid { gap: 18px; }
.price-card { border-radius: 16px; padding: 20px; }
.price-card h4 { font-weight: 700; color: #0a3a5c; }
.big.price { display:flex; align-items:baseline; justify-content:center; gap:6px; }
.big.price .per { font-size: 1rem; font-weight: 600; color: #9e9e9e; opacity: .9; }
.btn-xl { padding: 16px 28px; font-size: 1.05rem; border-radius: 999px; }
.btn-solid { background:#39a44a; color:#fff; border:none; box-shadow:0 8px 16px rgba(57,164,74,.35); }
.btn-solid:hover { background:#2f8a3e; box-shadow:0 12px 24px rgba(47,138,62,.45); }
.btn-outline { background:#fff; color:#2e7d32; border:2px solid #2e7d32; box-shadow:none; }
.btn-outline:hover { background:#f3fff6; }
.actions-final .sub { display:block; font-size:.85rem; font-weight:600; opacity:.9; margin-top:4px; }
.disclaimer { font-size:.8rem; color:#35524a; margin-top:16px; }

/* === Pricing cards: responsive stacking === */

/* Phones (≤600px): stack 1 per row */
@media (max-width: 600px) {
  /* Plans section (flex → single column) */
  .plan-container {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }
  .plan-card {
    max-width: 100%;
    flex: 1 1 auto;
  }

  /* Final quote cards (grid → single column) */
  .quote-grid {
    grid-template-columns: 1fr !important;
    gap: 14px;
  }
  #finalResult .quote-grid {
    grid-template-columns: 1fr !important; /* override the always-3-col rule */
  }

  /* Optional: if your action buttons were spaced for desktop */
  #finalResult .actions-final { justify-content: flex-start; }
  #finalResult #startOverBtn { margin-left: 0; }
}

/* Tablets (601–900px): show two columns */
@media (min-width: 601px) and (max-width: 900px) {
  .plan-container {
    justify-content: center;
    gap: 16px;
  }
  .plan-card {
    max-width: 420px;
    flex: 1 1 45%;
  }

  .quote-grid {
    grid-template-columns: repeat(2, minmax(200px, 1fr)) !important;
  }
  #finalResult .quote-grid {
    grid-template-columns: repeat(2, minmax(200px, 1fr)) !important;
  }
}

/* =========================
   FINAL ACTION BUTTONS — DESKTOP BASE (EXACT SPEC)
   ========================= */
#finalResult .actions-final {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  flex-wrap: nowrap !important;         /* stay on one row on desktop */
}

/* Reset any push-right behavior from earlier CSS */
#finalResult #startOverBtn { 
  margin-left: 0 !important; 
}

/* Shared base for all three buttons */
#finalResult #scheduleBtn,
#finalResult #emailCopyBtn,
#finalResult #startOverBtn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  border-radius: 999px !important;       /* pill shape */
  height: 60px !important;
  padding: 0 24px !important;
  line-height: 1.2 !important;
  box-shadow: none !important;           /* no shadows */
  white-space: normal !important;
}

/* First two GREEN buttons — IDENTICAL size/color/shape */
#finalResult #scheduleBtn,
#finalResult #emailCopyBtn {
  background: #39a44a !important;        /* green fill */
  color: #ffffff !important;
  border: none !important;
  width: 240px !important;               /* SAME width for both */
}

/* Third button — WHITE outlined */
#finalResult #startOverBtn {
  background: #ffffff !important;
  color: #2e7d32 !important;
  border: 2px solid #2e7d32 !important;
  min-width: 180px !important;
}

/* Remove any extra/sub text ONLY inside the first button */
#finalResult #scheduleBtn .sub,
#finalResult #scheduleBtn small,
#finalResult #scheduleBtn span.sub,
#finalResult #scheduleBtn .desc,
#finalResult #scheduleBtn .subtitle {
  display: none !important;
}

/* Prevent old .btn styles from re-adding shadows or margins */
#finalResult .btn-solid,
#finalResult .btn-outline {
  box-shadow: none !important;
}

/* =========================
   MOBILE RESPONSIVE (≤600px)
   ========================= */
/* Keep all 3 buttons in ONE ROW on phones using a 3-col grid */
@media (max-width: 600px) {
  #finalResult .actions-final {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 10px !important;
    align-items: stretch !important;
    justify-items: stretch !important;
  }

  /* Buttons fill their cells equally on mobile */
  #finalResult #scheduleBtn,
  #finalResult #emailCopyBtn,
  #finalResult #startOverBtn {
    width: 100% !important;
    min-width: 0 !important;
    height: 52px !important;
    padding: 0 12px !important;
    border-radius: 999px !important;
    font-size: 0.95rem !important;
    box-shadow: none !important;
    white-space: normal !important;
  }

  /* Ensure first two stay identical green on mobile */
  #finalResult #scheduleBtn,
  #finalResult #emailCopyBtn {
    background: #39a44a !important;
    color: #ffffff !important;
    border: none !important;
  }

  /* Third stays white outlined on mobile */
  #finalResult #startOverBtn {
    background: #ffffff !important;
    color: #2e7d32 !important;
    border: 2px solid #2e7d32 !important;
  }
}

/* =========================
   ULTRA-NARROW FALLBACK (≤360px)
   ========================= */
/* Single-row horizontal scroll if space is too tight */
@media (max-width: 360px) {
  #finalResult .actions-final {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x mandatory !important;
    padding-bottom: 6px !important;
  }
  #finalResult .actions-final > * {
    flex: 0 0 220px !important;    /* equal button width for scroll */
    scroll-snap-align: start !important;
  }
}

/* -----------------------------------------
   Gallery Styles
   These styles define the appearance of the gallery section on
   gallery.html. The grid will automatically wrap and adjust
   based on the available width. To add more images, simply
   update the `galleryImages` array in gallery.html.
--------------------------------------------*/
.gallery-section {
  text-align: center;
  padding: 40px 0;
}

.gallery-section h2 {
  font-size: 2.6rem;
  color: #2e7d32;
  margin-top: 0;
  margin-bottom: 30px;
  font-weight: 700;
}

.gallery-grid {
  /* Use flexbox to create a responsive grid that wraps items. Flexbox
     provides wider browser support and ensures consistent layout across
     devices. Each gallery-item will adjust its width based on the
     available space. */
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

/* Base style for each gallery item. The flex-basis sets the default
   width to roughly one third of the container minus the gap. */
.gallery-item {
  flex: 1 1 calc(33.333% - 20px);
  max-width: calc(33.333% - 20px);
}

/* Two columns on medium screens */
@media (max-width: 768px) {
  .gallery-item {
    flex: 1 1 calc(50% - 20px);
    max-width: calc(50% - 20px);
  }
}

/* Single column on small screens */
@media (max-width: 480px) {
  .gallery-item {
    flex: 1 1 100%;
    max-width: 100%;
  }
}

.gallery-item img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(107, 191, 89, 0.25);
  transition: transform 0.3s ease;
}

.gallery-item img:hover {
  transform: scale(1.05);
}

/* Carousel styles for gallery.html
   The gallery now uses a carousel instead of a grid. Images rotate
   automatically and maintain a uniform size. */
.carousel {
  width: 100%;
  height: 380px; /* Fixed height for uniform image sizing */
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(107, 191, 89, 0.25);
  position: relative;
}

.carousel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}