@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800;900&display=swap');

.sc-wrapper {
    --primary: #28a745;
    --dark: #000;
    --grey-bg: #f8f9fa;
    --border: #e0e0e0;
    --blue: #007bff;
    max-width: 550px;
    margin: 20px auto;
    background: #fff;
    border-radius: 20px;
    border: 4px solid var(--primary); 
    box-shadow: 0 15px 35px rgba(0,0,0,0.1);
    font-family: 'Inter', sans-serif;
    box-sizing: border-box;
}

.sc-wrapper * { box-sizing: border-box; }

.sc-header { padding: 25px; text-align: center; border-bottom: 1px solid #eee; }
.sc-header h1 { margin: 0; font-size: 24px; font-weight: 800; }
.green-text { color: var(--primary); }

.sc-tabs { display: flex; background: #f0f0f0; margin: 15px; border-radius: 12px; padding: 5px; }
.tab-btn { flex: 1; padding: 12px; border: none; border-radius: 10px; cursor: pointer; font-weight: 700; background: transparent; }
.tab-btn.active { background: #fff; color: var(--primary); box-shadow: 0 4px 12px rgba(0,0,0,0.08); }

.sc-main-content { padding: 0 20px 20px; }
.sc-section-title { font-size: 13px; font-weight: 800; text-transform: uppercase; color: #999; margin: 25px 0 12px; display: flex; align-items: center; gap: 10px; }
.sc-section-title::after { content: ""; height: 1px; background: #eee; flex: 1; }

/* --- LOAD BOX FIX: Forced Containment --- */
.load-box { border: 1px solid var(--border); border-radius: 14px; padding: 15px 10px; background: #fff; width: 100%; overflow: hidden; }

/* Grid Definition to keep cross inside */
.appliance-header, .appliance-row { 
    display: grid; 
    grid-template-columns: 2fr 1.3fr 0.7fr 0.7fr 35px; 
    gap: 6px; 
    margin-bottom: 10px; 
    align-items: center; 
    width: 100%;
}

.appliance-header span { font-size: 10px; font-weight: 800; color: #777; text-align: center; }
.appliance-header span:first-child { text-align: left; padding-left: 5px; }

/* min-width: 0 prevents inputs from pushing cross out */
.appliance-row input { 
    width: 100%; 
    min-width: 0 !important; 
    height: 38px; 
    border: 1px solid var(--border); 
    border-radius: 6px; 
    font-size: 13px; 
    text-align: center; 
    background: var(--grey-bg); 
    outline: none; 
}
.appliance-row input:first-child { text-align: left; padding-left: 10px; }

/* Professional Fit Cross Button */
.btn-remove { 
    background: #e8f0fe; color: var(--blue); border: 1px solid #b6d4fe; 
    border-radius: 6px; height: 34px; width: 34px; cursor: pointer; 
    font-weight: 800; font-size: 16px; display: flex; 
    justify-content: center; align-items: center; justify-self: center; 
}
.btn-remove:hover { background: var(--blue); color: #fff; }

.btn-add { width: 100%; background: var(--blue); color: #fff; border: none; padding: 12px; border-radius: 10px; cursor: pointer; font-weight: 700; margin-top: 10px; }

/* Pricing Section */
.sc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.full-width { grid-column: span 2; }
.sc-field label { display: block; font-size: 12px; font-weight: 700; margin-bottom: 6px; }
.sc-field input, .sc-field select { width: 100%; height: 46px; border: 1px solid var(--border); border-radius: 10px; background: var(--grey-bg); padding: 0 12px; font-size: 14px; outline: none; }

.btn-primary { width: 100%; background: var(--primary); color: #fff; border: none; padding: 18px; border-radius: 15px; font-weight: 800; font-size: 16px; cursor: pointer; margin-top: 25px; box-shadow: 0 6px 20px rgba(40, 167, 69, 0.3); }

/* Results Styling */
.sc-results-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 10px; }
.sc-res-card { background: var(--grey-bg); border: 1px solid #eee; padding: 20px 10px; border-radius: 15px; text-align: center; display: flex; flex-direction: column; gap: 8px; }
.sc-res-card.full-width { grid-column: span 2; }
.green-res-card { background: var(--primary); grid-column: span 2; border: none; }

.big-black { font-size: 15px !important; font-weight: 900 !important; color: #000 !important; text-transform: uppercase; letter-spacing: 0.5px; }
.white-label { font-size: 15px !important; font-weight: 900 !important; color: #fff !important; text-transform: uppercase; letter-spacing: 0.5px; }
.large-black { font-size: 30px !important; font-weight: 900 !important; color: #000 !important; }
.large-white { font-size: 32px !important; font-weight: 900 !important; color: #fff !important; }

.warning-msg { background: #fff3cd; color: #856404; font-size: 12px; padding: 12px; border-radius: 10px; text-align: center; margin-top: 15px; border: 1px solid #ffeeba; }
.btn-group { display: flex; gap: 10px; margin-top: 25px; }
.btn-outline { flex: 1; padding: 12px; border-radius: 12px; border: 1px solid var(--border); background: #fff; color: #666; font-weight: 700; cursor: pointer; }

.formula-hint { font-size: 11px; text-align: center; color: #aaa; margin-top: 20px; line-height: 1.5; }
.disclaimer-note { font-size: 10px; text-align: center; color: #999; margin-top: 5px; }
.sc-hidden { display: none !important; }
.mt-10 { margin-top: 10px; }

@media (max-width: 500px) {
    .appliance-header, .appliance-row { grid-template-columns: 1.5fr 1.3fr 0.7fr 0.7fr 30px; gap: 4px; }
    .sc-results-grid { grid-template-columns: 1fr; }
    .sc-res-card.full-width, .green-res-card { grid-column: span 1; }
}