/* CCW Cost Calculator — clean, modern, professional */
.ccw-cc-wrap{
  --ccw-bg:#ffffff;
  --ccw-card:#ffffff;
  --ccw-text:#0b1220;
  --ccw-muted:#5b6476;
  --ccw-border:rgba(15,23,42,.12);
  --ccw-soft:rgba(15,23,42,.06);
  --ccw-primary:#155eef;
  --ccw-primary2:#0b3aa6;
  --ccw-shadow: 0 12px 40px rgba(2,6,23,.10);
  --ccw-shadow2: 0 10px 22px rgba(2,6,23,.08);
  --ccw-radius:16px;
  --ccw-radius2:12px;
  --ccw-font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  font-family: var(--ccw-font);
  color: var(--ccw-text);
  background: var(--ccw-bg);
  border: 1px solid var(--ccw-border);
  border-radius: calc(var(--ccw-radius) + 6px);
  padding: 20px;
  box-shadow: var(--ccw-shadow2);
  max-width: 1100px;
}

.ccw-cc-wrap[data-theme="dark"]{
  --ccw-bg:#0b1220;
  --ccw-card:#0f172a;
  --ccw-text:#e5e7eb;
  --ccw-muted:#9aa3b2;
  --ccw-border:rgba(148,163,184,.18);
  --ccw-soft:rgba(148,163,184,.12);
  --ccw-primary:#60a5fa;
  --ccw-primary2:#93c5fd;
  --ccw-shadow: 0 12px 40px rgba(0,0,0,.42);
  --ccw-shadow2: 0 10px 22px rgba(0,0,0,.30);
}

.ccw-cc-header{
  display:flex;
  gap:16px;
  align-items:flex-start;
  justify-content:space-between;
  margin-bottom:14px;
}

.ccw-cc-title{
  margin: 0 0 6px 0;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -.02em;
}
.ccw-cc-subtitle{
  margin: 0;
  color: var(--ccw-muted);
  font-size: 14px;
}

.ccw-cc-badge{
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid var(--ccw-border);
  background: linear-gradient(180deg, rgba(21,94,239,.12), rgba(21,94,239,.04));
  color: var(--ccw-text);
  font-size: 12px;
  white-space: nowrap;
}

.ccw-cc-tabs{
  display:flex;
  gap:8px;
  padding:8px;
  border-radius: 999px;
  background: var(--ccw-soft);
  border: 1px solid var(--ccw-border);
  width: fit-content;
  margin: 14px 0 18px;
}

.ccw-cc-tab{
  appearance:none;
  border:0;
  background:transparent;
  color: var(--ccw-muted);
  font-weight: 600;
  font-size: 13px;
  padding: 10px 14px;
  border-radius: 999px;
  cursor:pointer;
  transition: transform .08s ease, background .2s ease, color .2s ease, box-shadow .2s ease;
}
.ccw-cc-tab:hover{ transform: translateY(-1px); }
.ccw-cc-tab.is-active{
  color: var(--ccw-text);
  background: var(--ccw-card);
  box-shadow: 0 8px 18px rgba(2,6,23,.10);
  border: 1px solid var(--ccw-border);
}

.ccw-cc-body{ margin-top: 6px; }

.ccw-cc-grid{
  display:grid;
  grid-template-columns: 1.2fr .9fr;
  gap:16px;
}
@media (max-width: 960px){
  .ccw-cc-grid{ grid-template-columns: 1fr; }
}

.ccw-cc-card{
  background: var(--ccw-card);
  border: 1px solid var(--ccw-border);
  border-radius: var(--ccw-radius);
  padding: 16px;
  box-shadow: var(--ccw-shadow2);
}

.ccw-cc-cardhead h3{
  margin:0 0 6px 0;
  font-size: 16px;
  letter-spacing:-.01em;
}
.ccw-cc-cardhead h4{
  margin:0;
  font-size: 14px;
}
.ccw-cc-muted{
  margin:0;
  color: var(--ccw-muted);
  font-size: 13px;
  line-height: 1.45;
}
.ccw-cc-divider{
  height: 1px;
  background: var(--ccw-border);
  margin: 14px 0;
}

.ccw-cc-options{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:10px;
  margin-top: 12px;
}
@media (max-width: 640px){
  .ccw-cc-options{ grid-template-columns: 1fr; }
}

.ccw-cc-option{
  appearance:none;
  border: 1px solid var(--ccw-border);
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(2,6,23,.02));
  border-radius: var(--ccw-radius2);
  padding: 12px 12px;
  text-align:left;
  cursor:pointer;
  transition: transform .08s ease, border-color .2s ease, box-shadow .2s ease;
}
.ccw-cc-option:hover{ transform: translateY(-1px); box-shadow: var(--ccw-shadow2); }
.ccw-cc-option.is-selected{
  border-color: rgba(21,94,239,.55);
  box-shadow: 0 14px 30px rgba(21,94,239,.14);
  background: linear-gradient(180deg, rgba(21,94,239,.14), rgba(21,94,239,.04));
}
.ccw-cc-optiontitle{
  font-weight: 800;
  font-size: 14px;
}
.ccw-cc-optionmeta{
  margin-top: 4px;
  color: var(--ccw-muted);
  font-size: 12px;
}

.ccw-cc-planhead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.ccw-cc-pill{
  display:inline-flex;
  align-items:center;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--ccw-border);
  background: var(--ccw-soft);
  color: var(--ccw-muted);
  font-size: 12px;
  font-weight: 600;
}

.ccw-cc-plans{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.ccw-cc-chip{
  display:flex;
  align-items:center;
  gap:10px;
  border-radius: 999px;
  border: 1px solid var(--ccw-border);
  background: transparent;
  padding: 10px 12px;
  cursor:pointer;
  transition: transform .08s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
.ccw-cc-chip:hover{ transform: translateY(-1px); box-shadow: var(--ccw-shadow2); }
.ccw-cc-chip.is-selected{
  border-color: rgba(21,94,239,.55);
  background: linear-gradient(180deg, rgba(21,94,239,.14), rgba(21,94,239,.04));
}
.ccw-cc-chip strong{ font-size: 13px; }
.ccw-cc-chip span{ font-size: 12px; color: var(--ccw-muted); }

.ccw-cc-summarybox{
  border: 1px solid var(--ccw-border);
  border-radius: var(--ccw-radius);
  padding: 14px;
  background: linear-gradient(180deg, rgba(21,94,239,.08), rgba(2,6,23,.02));
}

.ccw-cc-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding: 8px 0;
  border-bottom: 1px dashed var(--ccw-border);
}
.ccw-cc-row:last-child{ border-bottom: 0; }

.ccw-cc-k{ color: var(--ccw-muted); font-size: 12px; font-weight: 700; }
.ccw-cc-v{ font-size: 13px; font-weight: 700; text-align:right; }

.ccw-cc-total{
  display:flex;
  gap: 14px;
  justify-content:space-between;
  align-items:stretch;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--ccw-border);
}
@media (max-width: 520px){
  .ccw-cc-total{ flex-direction:column; }
}

.ccw-cc-total-label{
  color: var(--ccw-muted);
  font-size: 12px;
  font-weight: 800;
}
.ccw-cc-total-value{
  font-size: 28px;
  font-weight: 900;
  letter-spacing: -.02em;
  margin-top: 6px;
}
.ccw-cc-total-meta{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap: 6px;
  min-width: 220px;
}

.ccw-cc-actions{
  display:flex;
  gap: 10px;
  margin-top: 14px;
  flex-wrap:wrap;
}

.ccw-cc-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 8px;
  border-radius: 12px;
  padding: 11px 14px;
  border: 1px solid var(--ccw-border);
  background: var(--ccw-card);
  color: var(--ccw-text);
  font-weight: 800;
  font-size: 13px;
  text-decoration:none;
  cursor:pointer;
  transition: transform .08s ease, box-shadow .2s ease, border-color .2s ease;
}
.ccw-cc-btn:hover{
  transform: translateY(-1px);
  box-shadow: var(--ccw-shadow2);
}
.ccw-cc-btn-primary{
  border-color: rgba(21,94,239,.55);
  background: linear-gradient(180deg, rgba(21,94,239,.9), rgba(11,58,166,.9));
  color:#fff;
  box-shadow: 0 16px 34px rgba(21,94,239,.22);
}

.ccw-cc-footnote{
  margin: 12px 0 0;
  color: var(--ccw-muted);
  font-size: 12px;
  line-height: 1.45;
}

.ccw-cc-list{
  display:grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 12px;
}
.ccw-cc-listitem{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding: 12px;
  border-radius: var(--ccw-radius2);
  border: 1px solid var(--ccw-border);
  cursor:pointer;
  transition: transform .08s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
.ccw-cc-listitem:hover{ transform: translateY(-1px); box-shadow: var(--ccw-shadow2); }
.ccw-cc-listitem.is-selected{
  border-color: rgba(21,94,239,.55);
  background: linear-gradient(180deg, rgba(21,94,239,.14), rgba(21,94,239,.04));
}
.ccw-cc-listtitle{
  font-weight: 900;
  font-size: 14px;
}
.ccw-cc-listmeta{
  margin-top: 4px;
  color: var(--ccw-muted);
  font-size: 12px;
}
.ccw-cc-price{
  font-weight: 900;
  font-size: 16px;
  white-space:nowrap;
}

.ccw-cc-bulk{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 12px;
  margin-top: 10px;
}
@media (max-width: 900px){
  .ccw-cc-bulk{ grid-template-columns: 1fr; }
}
.ccw-cc-bulkbox{
  padding: 14px;
  border-radius: var(--ccw-radius);
  border: 1px solid var(--ccw-border);
  background: var(--ccw-card);
  box-shadow: var(--ccw-shadow2);
}
.ccw-cc-bulkbox h4{ margin: 0 0 6px 0; font-size: 15px; }
.ccw-cc-bulkbox p{ margin: 0 0 10px 0; color: var(--ccw-muted); font-size: 13px; }
.ccw-cc-bulkbox ul{
  margin: 0 0 14px 18px;
  color: var(--ccw-muted);
  font-size: 13px;
}
.ccw-cc-finegrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (max-width: 520px){
  .ccw-cc-finegrid{ grid-template-columns: 1fr; }
}
.ccw-cc-finegrid > div{
  border: 1px dashed var(--ccw-border);
  border-radius: 12px;
  padding: 10px;
  display:flex;
  justify-content:space-between;
  gap: 8px;
}

.ccw-cc-toast{
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: var(--ccw-card);
  color: var(--ccw-text);
  border: 1px solid var(--ccw-border);
  border-radius: 999px;
  padding: 10px 14px;
  box-shadow: var(--ccw-shadow);
  z-index: 99999;
  font-weight: 800;
  font-size: 13px;
}


/* Ensure selected option text is dark for readability */
.ccw-cc-option.is-selected,
.ccw-cc-option.is-selected .ccw-cc-optiontitle,
.ccw-cc-option.is-selected .ccw-cc-optionmeta,
.ccw-cc-chip.is-selected,
.ccw-cc-chip.is-selected strong,
.ccw-cc-chip.is-selected span {
  color: #000 !important;
}