.savings-simulator{padding:28px;background:#fff;margin:20px auto;max-width:1100px;border-radius:10px;box-shadow:0 6px 28px rgba(20,20,40,0.06)}
.sim-hero{padding:14px 0 8px}
.sim-hero h1{margin:0 0 6px;font-size:26px}
.sim-hero .lead{color:#555;margin:0 0 6px}
.sim-grid{display:flex;flex-direction:column;gap:18px}
.card{background:#ffffff;border-radius:8px;padding:16px;border:1px solid #eef2f5}
.sim-form{width:100%}
.sim-form h2{margin-top:0;font-size:18px}
.sim-form label{display:block;margin-bottom:12px;font-weight:600;color:#333}
.field-row{margin-bottom:14px}
.field-row .field-inputs{display:flex;gap:8px;align-items:center}
.field-row .field-inputs input[type="number"], .field-row .field-inputs select{flex:1;padding:10px;margin-top:6px;border:1px solid #d7dde3;border-radius:6px;font-size:15px}
.field-row .field-inputs .range{width:160px}
.field-help{font-size:13px;color:#63707a;margin-top:6px}
.field-row label{display:block;margin-bottom:6px;font-weight:700}
.sim-form input[type=range]{-webkit-appearance:none;height:6px;background:#e7edf1;border-radius:6px}
.sim-form input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:#1b6b3f}
.sim-results{width:100%}
.sim-form.compact .field-row{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.sim-form.compact .field-row label{width:36%;margin:0;font-size:14px}
.sim-form.compact .field-row .field-inputs{width:64%;margin-top:0}
.sim-form.compact .field-row .field-help{font-size:12px;margin-top:6px;color:#7a878f}
.items-list.improved{display:flex;flex-wrap:wrap;gap:10px}
.items-list.improved .item{flex:1 1 calc(50% - 10px);display:flex;align-items:center;gap:10px;padding:12px;border-radius:10px;margin-bottom:0;background:linear-gradient(180deg,#fff,#fbfdff);box-shadow:0 2px 8px rgba(10,10,30,0.04);border:1px solid #eef6f4}
.items-list.improved .emoji{font-size:26px;margin-right:8px}
.items-list.improved .meta{flex:1}
.items-list.improved .meta .name{font-weight:700}
.items-list.improved .meta .price{color:#6b7278;font-size:13px}
.items-list.improved .badge{background:#f5f7fb;padding:6px 8px;border-radius:999px;font-weight:700;color:#2b2f35}
.goal .emoji{font-size:18px;margin-right:8px}
.goal{display:flex;align-items:center;justify-content:space-between;padding:10px;border-radius:10px;margin-bottom:8px;background:linear-gradient(180deg,#fff,#fbfbff);box-shadow:0 1px 6px rgba(10,10,30,0.03)}
.goal .label{display:flex;align-items:center;gap:8px}
.results-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.results-header .big-total{font-size:22px;font-weight:700;color:#1b6b3f}
.results-grid{display:flex;gap:12px;margin-bottom:12px}
.result-item{flex:1;background:#fbfcfd;padding:10px;border-radius:6px;border:1px solid #f0f3f5}
.result-item span{display:block;color:#666;font-size:13px}
.result-item strong{display:block;margin-top:6px;font-size:16px}
.goals-list{margin-top:8px}
.goal{display:flex;align-items:center;justify-content:space-between;padding:8px;border-radius:6px;margin-bottom:8px;background:#fcfcfd;border:1px solid #eef3ef}
.goal .label{font-weight:600}
.goal .progress{height:10px;background:#eee;border-radius:6px;overflow:hidden;width:40%}
.goal .bar{height:100%;background:#b7e4c7;width:0}
.items-list.improved .item{display:flex;align-items:center;justify-content:space-between;padding:10px;border-radius:6px;margin-bottom:8px;background:#fff;border:1px solid #eef2f5}
.items-list .item .item-info{color:#555}
.item.enough{border-left:4px solid #2f9e44}
.note{font-size:0.9em;color:#666;margin-top:6px}
.sim-footer{margin-top:12px;color:#666;font-size:13px}

@media(max-width:880px){
	.sim-grid{flex-direction:column}
	.results-header{align-items:flex-start}
}

/* Mobile-specific optimizations */
@media(max-width:600px){
	.savings-simulator{padding:18px;margin:12px}
	.sim-hero h1{font-size:20px}
	.sim-hero .lead{font-size:14px}

	/* Compact form: stack label + input for touch screens */
	.sim-form.compact .field-row{flex-direction:column;align-items:stretch}
	.sim-form.compact .field-row label{width:100%;margin-bottom:6px}
	.sim-form.compact .field-row .field-inputs{width:100%;gap:6px}
	.sim-form.compact .field-row .field-inputs .range{width:100%}
	.sim-form.compact .field-row .field-help{font-size:12px}

	/* Make result blocks stack and more readable */
	.results-header{flex-direction:column;align-items:flex-start;gap:10px}
	.results-header .big-total{font-size:20px}
	.results-grid{flex-direction:column}
	.result-item{width:100%}

	/* Items: single-column cards full width */
	.items-list.improved{gap:8px}
	.items-list.improved .item{flex:1 1 100%;padding:12px}
	.items-list.improved .emoji{font-size:28px}
	.items-list.improved .meta .name{font-size:15px}
	.items-list.improved .meta .price{font-size:12px}
	.items-list.improved .badge{font-size:13px;padding:8px 10px}

	/* Goals: more compact and readable */
	.goal{padding:10px}
	.goal .label{font-size:14px}
	.goal .emoji{font-size:20px}

	/* Range controls bigger for touch */
	.sim-form input[type=range]{height:10px}
	.sim-form input[type=range]::-webkit-slider-thumb{width:20px;height:20px}

	/* Increase tappable area */
	.sim-form .field-inputs input[type="number"], .sim-form .field-inputs select{padding:12px;font-size:15px}
}