﻿.mypools-restoration-calculator { 
  width: 100%; 
} 
 
.mypools-restoration-shell { 
  background: radial-gradient(circle at top left, rgba(0,123,255,.18), transparent 35%), linear-gradient(135deg, #07111f 0%, #0b1d33 45%, #0f2d4e 100%); 
  color: #fff; 
  border-radius: 30px; 
  padding: clamp(22px, 4vw, 32px); 
  box-shadow: 0 20px 45px rgba(0,0,0,.28); 
} 
 
.mypools-restoration-shell h2 { 
  color: #fff; 
  font-size: clamp(1.9rem, 5vw, 2.8rem); 
  line-height: 1; 
  margin-bottom: 8px; 
} 
 
.mypools-restoration-subtitle, 
.mypools-restoration-note { 
  color: rgba(255,255,255,.72); 
} 
 
.mypools-restoration-price-box { 
  background: rgba(0, 80, 160, .5); 
  border: 1px solid rgba(255,255,255,.15); 
  border-radius: 24px; 
  padding: 22px 18px; 
  text-align: center; 
  margin: 24px 0; 
} 
 
.mypools-restoration-price-label { opacity: .85; margin-bottom: 8px; } 
.mypools-restoration-price { font-size: clamp(2.3rem, 7vw, 3.4rem); font-weight: 850; color: #d4f0ff; } 
.mypools-restoration-note { font-size: .8rem; max-width: 520px; margin: 8px auto 0; } 
 
.mypools-restoration-section { 
  background: rgba(255,255,255,.055); 
  border: 1px solid rgba(255,255,255,.1); 
  border-radius: 22px; 
  padding: 18px; 
  margin-bottom: 18px; 
} 
 
.mypools-restoration-section label { 
  display: block; 
  color: #fff; 
  font-weight: 700; 
  margin-bottom: 10px; 
} 
 
.mypools-restoration-section input[type="range"] { width: 100%; } 
.mypools-restoration-slider-value { color: #8ccdff; font-size: 1.35rem; font-weight: 800; margin-top: 10px; } 
 
.mypools-restoration-conditions { display: flex; gap: 12px; flex-wrap: wrap; } 
.mypools-restoration-condition { flex: 1; min-width: 100px; cursor: pointer; text-align: center; border: 1px solid rgba(255,255,255,.15); border-radius: 18px; padding: 12px 8px; background: rgba(20,30,48,.5); transition: .2s; } 
.mypools-restoration-condition.active { border-color: #66d9ff; background: rgba(0,157,255,.2); } 
.mypools-restoration-condition input { display: none; } 
.mypools-restoration-condition strong { display: block; color: #fff; } 
.mypools-restoration-condition span { font-size: .75rem; opacity: .78; } 
 
.mypools-restoration-section input[type="text"] { width: 100%; margin: 0 0 14px; border: 1px solid rgba(255,255,255,.15); border-radius: 16px; padding: 12px 14px; background: rgba(0,0,0,.35); color: #fff; } 
.mypools-restoration-breakdown { background: rgba(0,0,0,.28); border-radius: 18px; padding: 18px; font-size: .9rem; line-height: 1.65; } 
.mypools-restoration-breakdown hr { margin: 10px 0; border: 0; border-top: 1px solid rgba(255,255,255,.18); } 
.mypools-restoration-cta { text-align: center; margin-top: 22px; } 
.mypools-restoration-cta a { display: inline-flex; background: linear-gradient(105deg, #1db954, #25d366); color: #fff !important; text-decoration: none; padding: 14px 26px; border-radius: 999px; font-weight: 800; } 
 
@media (max-width: 620px) { 
  .mypools-restoration-conditions { flex-direction: column; } 
} 
 
/* Mobile full-width estimator */ 
@media (max-width: 760px) { 
  .mypools-contractor-page .mypools-two-column { 
    width: 100%; 
    max-width: none; 
    padding-left: 0; 
    padding-right: 0; 
    gap: 18px; 
  } 
 
  .mypools-contractor-page .mypools-two-column > section:first-child { 
    width: min(100% - 32px, 1120px); 
    margin: 0 auto; 
  } 
 
  .mypools-contractor-page .mypools-calculator-card { 
    width: 100%; 
    border-radius: 0; 
    border-left: 0; 
    border-right: 0; 
    padding: 0; 
    box-shadow: none; 
    background: transparent; 
  } 
 
  .mypools-restoration-shell { 
    width: 100%; 
    border-radius: 0; 
    padding: 22px 16px 28px; 
  } 
} 
 
/* Estimate page: calculator first */ 
.mypools-estimate-page { 
  width: min(1120px, calc(100% - 36px)); 
  margin: 0 auto; 
  padding: clamp(22px, 5vw, 56px) 0; 
} 
 
@media (max-width: 760px) { 
  .mypools-estimate-page { 
    width: 100%; 
    padding: 0; 
  } 
} 
 
/* Keep restoration condition options in one row on mobile */ 
@media (max-width: 620px) {
