/* ==========================================================================
   subsidy.css — 長照輔具補助試算頁（/subsidy/）
   沿用 design-system.css 的暖橘配色與間距變數；類別一律以 sub- 開頭，
   避免與 catalog.css / intro.css 衝突。
   ========================================================================== */

.sub-wrap {
  max-width: 1040px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

/* ── 語意色：與 CTA 橘區隔，避免試算數字看起來像按鈕 ────────────────── */
.sub-wrap {
  --sub-gov:  #1F7A5A;  /* 政府給付 */
  --sub-self: #A96412;  /* 民眾部分負擔 */
  --sub-over: #B3261E;  /* 超額自費 */
}

/* ── 頁面開頭 ─────────────────────────────────────────────────────── */
.sub-intro h1 {
  font-size: var(--font-size-2xl);
  line-height: var(--line-height-tight);
  margin: 0 0 var(--space-3);
  color: var(--color-text-primary);
  text-wrap: balance;
}
.sub-intro p {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
}

.sub-basis {
  margin-top: var(--space-4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.sub-basis span {
  font-size: var(--font-size-xs);
  padding: 3px 10px;
  border-radius: var(--radius-full);
  background: var(--color-primary-pale);
  color: var(--color-primary-dark);
  border: 1px solid var(--color-border);
}

/* ── 卡片 ─────────────────────────────────────────────────────────── */
.sub-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--space-5) var(--space-6);
}
.sub-card > h2 {
  margin: 0 0 var(--space-4);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border-light);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

/* ── 表單 ─────────────────────────────────────────────────────────── */
.sub-grid { display: grid; gap: var(--space-4); }
.sub-g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sub-g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sub-g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 820px) {
  .sub-g2, .sub-g3, .sub-g4 { grid-template-columns: 1fr; }
}

.sub-wrap label {
  display: block;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-1);
  font-weight: var(--font-weight-medium);
}
.sub-wrap input,
.sub-wrap select {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--font-size-base);
  font-family: var(--font-primary);
  background: var(--color-surface);
  color: var(--color-text-primary);
}
.sub-wrap input[type="number"] { font-variant-numeric: tabular-nums; }
.sub-wrap input:focus-visible,
.sub-wrap select:focus-visible,
.sub-wrap button:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.sub-wrap input::placeholder { color: var(--color-text-muted); }
.sub-hint {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  margin-top: var(--space-1);
  line-height: 1.7;
}

/* ── 明細列 ───────────────────────────────────────────────────────── */
.sub-row {
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-bottom: var(--space-3);
  background: var(--color-bg);
}
.sub-row-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.sub-row-head h3 {
  margin: 0;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  letter-spacing: .1em;
  color: var(--color-primary-dark);
}
/* ── 品項選擇器：自訂清單，每項右側一顆星可釘選 ──────────────────── */
.sub-picker { position: relative; }

.sub-picker-field {
  width: 100%;
  text-align: left;
  padding: 9px 11px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text-primary);
  font-size: var(--font-size-base);
}
.sub-picker-field.is-placeholder { color: var(--color-text-muted); }
.sub-picker-field::after {
  content: "▾";
  float: right;
  color: var(--color-text-secondary);
}

.sub-picker-panel {
  display: none;
  position: absolute;
  z-index: 20;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.sub-picker.open .sub-picker-panel { display: block; }

.sub-picker-search {
  border: none !important;
  border-bottom: 1px solid var(--color-border-light) !important;
  border-radius: 0 !important;
}

.sub-picker-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 260px;
  overflow-y: auto;
}
.sub-opt-group {
  padding: 6px 11px 3px;
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  background: var(--color-bg);
  position: sticky;
  top: 0;
}
.sub-opt {
  display: flex;
  align-items: stretch;
  gap: 0;
}
.sub-opt.is-chosen { background: var(--color-primary-pale); }
.sub-opt-pick {
  flex: 1;
  text-align: left;
  padding: 7px 11px;
  background: none;
  border: none;
  border-radius: 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
}
.sub-opt-pick:hover { background: var(--color-primary-pale); }
.sub-opt-star {
  flex: none;
  width: 34px;
  background: none;
  border: none;
  border-radius: 0;
  color: var(--color-text-muted);
  font-size: 15px;
  line-height: 1;
}
.sub-opt-star:hover { background: var(--color-primary-pale); color: var(--color-primary-dark); }
.sub-opt-star.is-pinned { color: var(--color-primary); }
.sub-opt-empty {
  padding: 12px;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  text-align: center;
}

.sub-meta {
  font-size: var(--font-size-xs);
  color: var(--color-primary-dark);
  margin-top: var(--space-1);
  min-height: 18px;
  font-variant-numeric: tabular-nums;
}

/* ── 按鈕 ─────────────────────────────────────────────────────────── */
.sub-wrap button {
  font-family: var(--font-primary);
  cursor: pointer;
  border: none;
  border-radius: var(--radius-md);
  font-size: var(--font-size-base);
}
.sub-btn-del {
  background: transparent;
  color: var(--sub-over);
  border: 1px solid var(--color-border);
  padding: 5px 10px;
  font-size: var(--font-size-sm);
}
.sub-btn-add {
  background: var(--color-primary-pale);
  color: var(--color-primary-dark);
  border: 1px dashed var(--color-primary-light);
  padding: 11px 18px;
  font-weight: var(--font-weight-bold);
  width: 100%;
}
.sub-btn-add[disabled] { opacity: .5; cursor: not-allowed; }
.sub-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-5);
}
.sub-btn-main {
  background: var(--color-primary);
  color: #fff;
  padding: 13px 22px;
  font-weight: var(--font-weight-bold);
  flex: 1 1 190px;
}
.sub-btn-main:hover { background: var(--color-primary-dark); }
.sub-btn-ghost {
  background: var(--color-surface);
  color: var(--color-primary-dark);
  border: 1px solid var(--color-primary);
  padding: 13px 22px;
  font-weight: var(--font-weight-bold);
  flex: 1 1 190px;
}
.sub-btn-ghost:hover { background: var(--color-primary-pale); }
.sub-btn-link {
  background: none;
  border: none;
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  text-decoration: underline;
  padding: 0;
}
.sub-btn-link:hover { color: var(--color-primary-dark); }

/* ── 數字卡 ───────────────────────────────────────────────────────── */
.sub-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
}
.sub-row-stats {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border-light);
}
@media (max-width: 820px) {
  .sub-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.sub-stat {
  background: var(--color-surface);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  padding: 9px 12px;
}
.sub-stat .k {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}
.sub-stat .v {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  margin-top: 1px;
  font-variant-numeric: tabular-nums;
  color: var(--color-text-primary);
}
.sub-stat-gov  { border-left: 3px solid var(--sub-gov); }
.sub-stat-gov  .v { color: var(--sub-gov); }
.sub-stat-self { border-left: 3px solid var(--sub-self); }
.sub-stat-self .v { color: var(--sub-self); }
.sub-stat-over { border-left: 3px solid var(--sub-over); }
.sub-stat-over .v { color: var(--sub-over); }

/* ── 提醒 ─────────────────────────────────────────────────────────── */
.sub-note {
  background: var(--color-primary-pale);
  border: 1px solid var(--color-primary-light);
  border-radius: var(--radius-md);
  padding: 11px 14px;
  font-size: var(--font-size-sm);
  margin-top: var(--space-4);
  color: var(--color-primary-dark);
  line-height: 1.8;
}
.sub-note[hidden] { display: none; }

.sub-check {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin-top: var(--space-3);
}
.sub-check input { width: auto; margin-top: 4px; flex: none; }
.sub-check label {
  margin: 0;
  color: var(--color-text-primary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
}

.sub-disclaimer {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  line-height: 1.9;
  padding: 0 var(--space-1);
}
.sub-disclaimer strong { color: var(--color-text-primary); font-weight: var(--font-weight-medium); }

@media (prefers-reduced-motion: reduce) {
  .sub-wrap * { animation: none !important; transition: none !important; }
}