/* Window replacement calculator - styles */
.wwc-section { max-width: 760px; margin: 20px auto; padding: 12px; font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; }
.wwc-card { background: #fff; border-radius: 12px; box-shadow: 0 6px 18px rgba(20,20,30,0.06); padding: 20px; border: 1px solid rgba(0,0,0,0.04); }
.wwc-card h2 { margin: 0 0 6px 0; font-size: 1.4rem; }
.wwc-desc { margin: 0 0 14px 0; color: #555; font-size: 0.95rem; }

.wwc-form { display: grid; gap: 12px; }
.wwc-row { display: flex; flex-direction: column; gap: 6px; }
.wwc-inline { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

label { font-size: 0.9rem; color: #333; }
input[type="number"], select { padding: 10px 12px; border-radius: 8px; border: 1px solid rgba(0,0,0,0.09); font-size: 0.95rem; outline: none; }
input[type="number"]:focus, select:focus { box-shadow: 0 0 0 3px rgba(29,161,242,0.08); border-color: rgba(29,161,242,0.25); }

.wwc-actions { display:flex; gap:10px; margin-top:6px; }
.wwc-btn { background:#1da1f2; color: #fff; border:none; padding:10px 14px; border-radius:10px; cursor:pointer; font-weight:600; }
.wwc-ghost { background: transparent; color: #1da1f2; border: 1px solid rgba(29,161,242,0.18); }

.wwc-result { margin-top: 16px; padding: 12px; border-radius: 10px; background: #fafafa; border: 1px solid rgba(0,0,0,0.03); }
.wwc-result h3 { margin: 0 0 8px 0; font-size:1.05rem; }
.wwc-breakdown p { margin: 6px 0; color: #333; }
.wwc-breakdown ul { margin: 6px 0 0 16px; padding: 0; color: #444; }
.wwc-total { display:flex; justify-content:space-between; align-items:center; margin-top:10px; padding-top:8px; border-top:1px dashed rgba(0,0,0,0.04); }
.wwc-total strong { font-size:1.25rem; }

.wwc-footer { margin-top:12px; color:#666; font-size:0.85rem; }

@media (max-width:640px) {
  .wwc-inline { grid-template-columns: 1fr; }
  .wwc-section { padding: 10px; }
}