/* ==========================================================
   Snow Day SEARCH Calculator - scoped styles (prefix: .sdcs-)
   Sky-blue -> white gradient background + falling snow effect.
   ========================================================== */

.sdcs-wrap{
  --sdcs-sky-deep:#4fa8e0;
  --sdcs-sky-mid:#a9d8f2;
  --sdcs-sky-light:#e8f5fc;
  --sdcs-white:#ffffff;
  --sdcs-ink:#0b2e4a;
  --sdcs-ink-soft:#4a6b85;
  --sdcs-card-bg:#ffffff;
  --sdcs-card-border:#dcecf7;
  --sdcs-accent:#2f9fe0;
  --sdcs-shadow:0 10px 30px rgba(47,159,224,0.15);

  position:relative;
  display:block;
  width:100%;
  max-width:100%;
  
  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color:var(--sdcs-ink);
  overflow:hidden;
  border-radius:0;
  margin:0;
  padding:0;
}

.sdcs-wrap *{box-sizing:border-box;}

.sdcs-snowCanvas{
  position:absolute;
  top:0; left:0;
  width:100%; height:100%;
  pointer-events:none;
  z-index:1;
}

.sdcs-page{
  position:relative;
  z-index:2;
  max-width:600px;
  margin:0 auto;
  padding:50px 18px 60px;
  text-align:center;
}

.sdcs-tag{
  font-size:0.75rem;
  letter-spacing:2px;
  font-weight:700;
  color:var(--sdcs-white);
  opacity:0.9;
  text-transform:uppercase;
  margin-bottom:10px;
}
.sdcs-h1{
  font-size:2.2rem;
  font-weight:800;
  color:var(--sdcs-white);
  margin:0 0 10px;
  line-height:1.2;
  text-shadow:0 2px 12px rgba(11,46,74,0.25);
}
.sdcs-sub{
  font-size:1rem;
  color:var(--sdcs-white);
  opacity:0.95;
  max-width:480px;
  margin:0 auto 30px;
  line-height:1.5;
}

.sdcs-search-pill{
  background:rgba(255,255,255,0.9);
  border:none;
  border-radius:50px;
  padding:8px;
  display:flex;
  gap:8px;
  box-shadow:var(--sdcs-shadow);
  max-width:520px;
  margin:0 auto;
}
.sdcs-search-pill input{
  flex:1;
  border:none !important;
  outline:none !important;
  background:transparent !important;
  padding:12px 16px;
  font-size:0.95rem;
  color:var(--sdcs-ink);
  box-shadow:none !important;
  -webkit-appearance:none;
  appearance:none;
  border-radius:0;
}
/* Explicitly remove the blue focus ring/line on the search field */
.sdcs-search-pill input:focus,
.sdcs-search-pill input:focus-visible,
.sdcs-search-pill input:active{
  outline:none !important;
  border:none !important;
  box-shadow:none !important;
  background:transparent !important;
}
.sdcs-search-pill button{
  border:none;
  border-radius:40px;
  padding:12px 26px;
  background:linear-gradient(135deg,var(--sdcs-accent),#5bc6e8);
  color:#fff;
  font-weight:700;
  font-size:0.9rem;
  cursor:pointer;
  white-space:nowrap;
  transition:transform 0.15s ease, box-shadow 0.15s ease;
}
.sdcs-search-pill button:hover{transform:translateY(-2px); box-shadow:0 6px 18px rgba(47,159,224,0.5);}

.sdcs-fetch-status{
  text-align:center;
  font-size:0.8rem;
  color:var(--sdcs-white);
  opacity:0.9;
  margin-top:12px;
  min-height:18px;
}
.sdcs-fetch-note{
  text-align:center;
  font-size:0.72rem;
  color:var(--sdcs-blue);
  opacity:0.75;
  margin-top:2px;
}

.sdcs-result-card{
  background:var(--sdcs-card-bg);
  border:1px solid var(--sdcs-card-border);
  border-radius:20px;
  padding:26px 24px 20px;
  box-shadow:var(--sdcs-shadow);
  text-align:center;
  margin-top:26px;
  display:none;
}
.sdcs-prob-circle{
  width:130px;height:130px;
  margin:0 auto 14px;
  border-radius:50%;
  background:conic-gradient(var(--sdcs-accent) var(--sdcs-pct,0%), #eaf5fb 0);
  display:flex;align-items:center;justify-content:center;
  position:relative;
}
.sdcs-prob-circle::before{
  content:"";
  position:absolute;
  width:104px;height:104px;
  border-radius:50%;
  background:#fff;
}
.sdcs-prob-num{
  position:relative;
  font-size:1.6rem;
  font-weight:800;
  color:var(--sdcs-ink);
}
.sdcs-verdict{
  font-size:1.1rem;
  font-weight:700;
  margin:4px 0 4px;
  color:var(--sdcs-ink);
}
.sdcs-verdict-desc{
  font-size:0.85rem;
  color:var(--sdcs-ink-soft);
  margin-bottom:6px;
}
.sdcs-breakdown{
  text-align:left;
  margin-top:14px;
  font-size:0.78rem;
  color:var(--sdcs-ink-soft);
  border-top:1px solid var(--sdcs-card-border);
  padding-top:12px;
}
.sdcs-breakdown div{
  display:flex;
  justify-content:space-between;
  padding:3px 0;
}

@media (max-width:520px){
  .sdcs-h1{font-size:1.6rem;}
  .sdcs-search-pill{flex-direction:column; border-radius:20px; padding:10px;}
  .sdcs-search-pill button{width:100%;}
}