/* Appliance Repair vs Replace Widget (v0.3 compact) */
:root{
  --apw-font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  --apw-brand-red:   #C8102E;
  --apw-brand-blue:  #143D6B;
  --apw-brand-navy:  #0B2A4A;
  --apw-brand-slate: #B7C1CE;
  --apw-brand-white: #FFFFFF;
  --apw-money:       #1B5E20;
  --apw-danger:      #C62828;
  --apw-ink:     #101418;
  --apw-muted:   #6B7680;
  --apw-bg:      #ffffff;
  --apw-panel:   #F6F8FA;
  --apw-border:  #E3E8EF;
  --apw-shadow:  0 2px 10px rgba(0,0,0,0.06);
  --apw-radius:  12px;
  --apw-fs: 14px;
}

.apw *{ box-sizing:border-box; }
.apw{
  font-family: var(--apw-font);
  font-size: var(--apw-fs);
  color: var(--apw-ink);
  background: var(--apw-bg);
  border: 1px solid var(--apw-border);
  border-radius: var(--apw-radius);
  padding: 12px;
  max-width: 680px;
  margin: 10px auto;
  box-shadow: var(--apw-shadow);
}
.apw.compact{ max-width: 680px; }

.apw header{
  display:grid; grid-template-columns: 1fr auto 1fr;
  align-items:center; gap:8px; margin-bottom:6px;
}
.apw .apw-logo{ display:flex; align-items:center; }
.apw .apw-logo img{ width:30px; height:30px; object-fit:contain; display:block; }
.apw h1{ margin:0; text-align:center; font-size:1.25rem; letter-spacing:.2px; }
.apw .apw-right{ display:flex; justify-content:flex-end; }
.apw .apw-tag{
  display:inline-flex; align-items:center; gap:6px; font-size:0.8rem; color: var(--apw-muted);
  padding: 2px 6px; background:#fff; border:1px dashed var(--apw-border); border-radius:999px;
}

.apw .apw-grid{ display:grid; gap:8px; grid-template-columns: 1fr; }
.apw .apw-card{ background: var(--apw-panel); border:1px solid var(--apw-border); border-radius: var(--apw-radius); padding:10px; }
.apw label{ font-weight:700; display:block; margin-bottom:4px; }
.apw .hint{ color: var(--apw-muted); font-size: 0.9rem; }

.apw select, .apw input[type="text"], .apw input[type="number"], .apw input[type="range"]{
  width:100%; padding:8px 10px; border-radius:10px; border:1px solid var(--apw-border); background:#fff; outline:none;
}
.apw input[type="number"]{ max-width: 150px; }
.apw .row{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }

.apw .chipset{ display:flex; gap:6px; flex-wrap:wrap; }
.apw .chip{
  border:1px solid var(--apw-border); background:#fff; padding:5px 10px; border-radius:999px;
  cursor:pointer; font-size:0.9rem; font-weight:700; display:inline-flex; align-items:center; gap:6px;
}
.apw .chip[aria-selected="true"]{ outline:2px solid var(--apw-brand-navy); outline-offset:2px; }
.apw .chip .dollars{ color: var(--apw-money); font-weight:900; letter-spacing:1px; }

.apw .chip-budget{ background: var(--apw-brand-red); color:#fff; border-color: var(--apw-brand-red); }
.apw .chip-popular{ background:#fff; color: var(--apw-ink); border-color: var(--apw-border); }
.apw .chip-premium{ background: var(--apw-brand-blue); color:#fff; border-color: var(--apw-brand-blue); }

.apw .toggles{ display:grid; gap:8px; grid-template-columns: 1fr; }
@media(min-width:560px){ .apw .toggles{ grid-template-columns: 1fr 1fr 1fr; } }
.apw .toggle{ background:#fff; border:1px solid var(--apw-border); border-radius:10px; padding:8px; }
.apw .toggle .topline{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.apw .toggle .note{ font-size:0.8rem; color: var(--apw-muted); margin-top:4px; }

.apw .switch{ position:relative; width:42px; height:24px; }
.apw .switch input{ opacity:0; width:0; height:0; }
.apw .slider{ position:absolute; inset:0; background:#d4dbe3; border-radius:999px; transition:.2s; }
.apw .slider:before{ content:""; position:absolute; height:18px; width:18px; left:3px; top:3px; background:white; border-radius:50%; box-shadow:0 1px 3px rgba(0,0,0,.2); transition:.2s; }
.apw .switch input:checked + .slider{ background: var(--apw-brand-navy); }
.apw .switch input:checked + .slider:before{ transform: translateX(18px); }

.apw .results-wrap{ border:2px solid var(--apw-brand-navy); background:#fff; border-radius:12px; padding:10px; box-shadow: var(--apw-shadow); }
.apw .conclusion{
  display:flex; align-items:center; gap:10px; padding:10px; border-radius:10px; font-weight:900; font-size:1.1rem;
  border:1px solid transparent; margin-bottom:8px;
}
.apw .concl-repair{ background:#e8f5e9; color: var(--apw-money); border-color:#c8e6c9; }
.apw .concl-replace{ background:#ffebee; color: var(--apw-danger); border-color:#ffcdd2; }
.apw .concl-neutral{ background:#fff8e1; color:#795548; border-color:#ffe0b2; }

.apw .prices{ display:grid; gap:8px; grid-template-columns:1fr 1fr; }
.apw .price-box{ background:var(--apw-panel); border:1px solid var(--apw-border); border-radius:10px; padding:8px; }
.apw .price{ font-size:1.5rem; font-weight:900; }
.apw .price.repair{ color: var(--apw-money); }
.apw .price.replace{ color: var(--apw-danger); }

.apw .details-toggle{ margin-top:6px; display:flex; justify-content:flex-end; }
.apw .details-btn{ background:#fff; border:1px solid var(--apw-border); border-radius:999px; padding:6px 10px; cursor:pointer; font-weight:700; }

.apw .breakdowns{ display:none; margin-top:6px; }
.apw .breakdowns.show{ display:grid; gap:8px; grid-template-columns:1fr 1fr; }
.apw .breakdown{ font-size:0.9rem; }
.apw .breakdown .line{ display:flex; justify-content:space-between; padding:4px 0; border-bottom:1px dashed var(--apw-border); }
.apw .breakdown .line:last-child{ border-bottom:none; }

.apw .apw-footer{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:6px; flex-wrap:wrap; }
.apw .btn{ appearance:none; border:1px solid var(--apw-border); background:#fff; border-radius:10px; padding:8px 10px; cursor:pointer; font-weight:700; }