/* Container */
.tuition-widget { padding: 16px; }

/* Screen-reader only */
.sr-only {
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* Segmented toggle group (desktop/tablet) */
.control-group { display:flex; flex-wrap:wrap; margin: 0 0 16px 0; }
.control-group .segmented:not(:last-child) { margin-right:8px; }
.control-group .segmented { margin-bottom:8px; }
.segmented {
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  border:1px solid #b0b3b8;
  background:#fff; color:#041e42; font-weight:700;
  padding:10px 14px; border-radius:999px; cursor:pointer; line-height:1.2;
  transition:border-color 0.2s ease, box-shadow 0.2s ease;
}
.segmented.is-active {
  background:#041e42; color:#fff; border-color:#041e42;
}
.segmented:hover { border-color:#041e42; }
.segmented:focus-visible { outline:3px solid #99c2ff; outline-offset:2px; }

/* Card */
.snapshot-card {
  box-sizing:border-box; width:100%; max-width:720px; min-width:260px;
  background:#fff; border:1px solid #e0e2e5; border-radius:16px;
  box-shadow:0 6px 18px rgba(0,0,0,0.06); padding:24px; margin: 12px 0 4px 0;
}

/* Centered head: year on top, badge below, both centered */
.card-head {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  margin-bottom:6px;
  text-align:center;
}

/* Year styling: slightly smaller than price */
.card-title { margin:0; font-size:36px; color:#041e42; font-weight:700; line-height:1.1; }

/* Delta badge centered under year; new color scheme */
.delta-badge {
  display:inline-block;
  margin-top:6px;
  padding:6px 10px;
  border-radius:999px;
  font-size:14px;
  background:#041e42;
  color:#ffffff;
  border:1px solid #041e42;
}
.delta-badge:empty { display:none; }
/* keep classes but unify styles so JS doesn't matter */
.delta-pos, .delta-neg { background:#041e42; color:#ffffff; border-color:#041e42; }

.price { font-size:44px; font-weight:800; color:#041e42; margin:10px 0 6px 0; }
.context-note { margin:0 0 10px 0; color:#374151; font-size:14px; }

/* Details toggle with caret */
.sd-toggle {
  appearance:none; border:0; background:none; color:#041e42; font-weight:700;
  padding:8px 0; cursor:pointer; text-align:left; display:inline-flex; align-items:center;
}
.sd-toggle::after { content:'\25BC'; font-size:0.8em; margin-left:6px; transition: transform 0.2s ease; }
.sd-toggle[aria-expanded="true"]::after { transform: rotate(180deg); }
.sd-toggle:focus-visible { outline:3px solid #99c2ff; outline-offset:2px; }

/* Details panel */
.sd-panel { margin-top:8px; }
.row {
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  padding:10px 0;
  border-bottom:1px dashed #e5e7eb;
  font-size:1rem;
}
.row:last-of-type { border-bottom:0; }
.row.total span:first-child { font-weight:700; }
.cost { font-weight:600; color:#111827; }

/* Detail notes area */
.fine-print,
.updated {
  margin-top:8px;
  font-size:1rem;
  color:#000000;
  line-height:1.5;
}

/* Mobile dropdown controls */
.mobile-controls { display:none; }
.mobile-controls select {
  font:inherit;
  padding:8px 44px 8px 10px;
  border:1px solid #b0b3b8;
  border-radius:8px;
  background-color:#fff;
  color:#041e42;
  margin-right:8px;
  min-width:0;
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg fill='%23041e42' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 12px center;
  background-size:16px;
  cursor:pointer;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  line-height:1.25;
  background-clip:padding-box;
  transition:border-color 0.2s ease, box-shadow 0.2s ease;
}
.mobile-controls select:hover { border-color:#041e42; }
.mobile-controls select:focus-visible { outline:3px solid #99c2ff; outline-offset:2px; }
.mobile-controls select:last-child { margin-right:0; }

/* Narrow viewports */
@media (max-width:400px){ .mobile-controls select { padding-right:48px; } }
@media (max-width:340px){ .mobile-controls select { max-width:100%; } }

/* RTL */
[dir="rtl"] .mobile-controls select {
  padding-left:44px;
  padding-right:10px;
  background-position:left 12px center;
}

/* Reduce motion */
@media (prefers-reduced-motion: no-preference){
  .snapshot-card { transition: box-shadow .2s ease; }
  .snapshot-card:focus-within { box-shadow:0 10px 24px rgba(0,0,0,0.10); }
}

/* ---------- Responsive breakpoints ---------- */
@media (max-width:640px){
  .control-group { display:none; }
  .mobile-controls { display:flex; align-items:center; }
  .snapshot-card { padding:16px; }
  .card-head { margin-bottom:8px; }
  /* price remains larger; year scales down a bit for balance */
  .card-title { font-size:28px; }
  .price { font-size:32px; margin:8px 0 4px 0; }
  .context-note { font-size:13px; margin:0 0 8px 0; }
  .sd-toggle { padding:6px 0; }
}
@media (max-width:480px){
  .mobile-controls { width:100%; }
  .mobile-controls select { flex:1; }
  .price { font-size:30px; }
}
@media (max-width:360px){
  .mobile-controls { flex-direction:column; align-items:stretch; }
  .mobile-controls select { margin-right:0; margin-bottom:8px; }
  .mobile-controls select:last-child { margin-bottom:0; }
  .snapshot-card { padding:12px; border-radius:12px; }
  .card-title { font-size:26px; }
  .price { font-size:28px; }
  .context-note { font-size:12px; }
  .sd-toggle { padding:4px 0; }
}

/* --- PATCH: Remove dropdown caret on mobile --- */
@media (max-width: 640px) {
  .mobile-controls select {
    background-image: none !important;
    background-repeat: none !important;
    background-position: initial !important;
    background-size: 0 !important;
  }
}