/**
 * MSW Grandparent Budget Calculator
 * v1.1.1 - Senior-friendly, warm family design
 */
.msw-grandparent-budget { max-width: 900px; margin: 0 auto; font-family: 'Verdana', 'Arial', sans-serif; font-size: 18px; line-height: 1.6; color: #4A3728; padding: 30px; }
.msw-grandparent-budget *, .msw-grandparent-budget *::before, .msw-grandparent-budget *::after { box-sizing: border-box; }

/* HEADER */
.msw-grandparent-budget .msw-calculator__header { text-align: center; margin-bottom: 30px; padding-bottom: 20px; border-bottom: 3px solid #C78B6B; }
.msw-grandparent-budget .msw-calculator__title { font-size: 32px; color: #6B4226; margin: 0 0 10px; }
.msw-grandparent-budget .msw-calculator__subtitle { font-size: 18px; color: #8B6F5C; margin: 0; }

/* INSTRUCTIONS */
.msw-grandparent-budget .msw-calculator__instructions { background: #FFF8F0; border: 1px solid #F0D8C0; border-radius: 8px; padding: 20px; margin-bottom: 30px; font-size: 16px; color: #6B5040; }

/* FORM SECTIONS */
.msw-form-section { background: #FFF; border: 2px solid #F0D8C0; border-radius: 10px; padding: 24px; margin-bottom: 20px; }
.msw-form-section__title { font-size: 22px; color: #6B4226; margin: 0 0 16px; }

/* FORM ROWS */
.msw-form-row { margin-bottom: 16px; }
.msw-form-row--three-col { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
.msw-form-label { display: block; font-size: 16px; font-weight: 600; color: #6B5040; margin-bottom: 6px; }
.msw-form-input, .msw-form-select { width: 100%; padding: font-size: 18px; border: 2px solid #E0C8B0; border-radius: 8px; background: #FFF; color: #4A3728; }
.msw-form-input:focus, .msw-form-select:focus { border-color: #C78B6B; outline: none; box-shadow: 0 0 0 3px rgba(199,139,107,0.2); }

/* BUTTONS */
.msw-button { font-size: 18px; font-weight: 700; padding: 14px 28px; border: none; border-radius: 10px; cursor: pointer; transition: all 0.2s; }
.msw-button--primary { background: #C78B6B; color: #FFF; }
.msw-button--primary:hover { background: #A0694A; }
.msw-form-actions { text-align: center; margin-top: 16px; }

/* ERROR MESSAGE */
.msw-error-message { background: #FFF5F0; border: 1px solid #E8A080; color: #8B4226; padding: 12px; border-radius: 8px; margin-top: 12px; font-size: 16px; text-align: center; display: none; }
.msw-error-message.active { display: block; }

/* SECTION TITLE */
.msw-section-title { font-size: 22px; color: #6B4226; margin: 30px 0 16px; }

/* GRANDCHILD CARD */
.msw-grandchild-card { background: #FFF; border: 2px solid #F0D8C0; border-radius: 12px; padding: 20px; margin-bottom: 16px; transition: border-color 0.2s; }
.msw-grandchild-card:hover { border-color: #C78B6B; }
.msw-grandchild-header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.msw-grandchild-header h4 { font-size: 20px; color: #6B4226; margin: 0; }
.msw-grandchild-age { background: #FFF0E0; color: #8B6040; padding: 4px 12px; border-radius: 20px; font-size: 14px; font-weight: 600; }
.msw-button-remove { width: 36px; height: 36px; border: 2px solid #E0C8B0; border-radius: 50%; background: #FFF; color: #C06040; font-size: 20px; cursor: pointer; margin-left: auto; display: flex; align-items: center; justify-content: center; transition: all 0.2s; }
.msw-button-remove:hover { background: #C06040; color: #FFF; border-color: #C06040; }

/* BUDGET CATEGORIES */
.msw-budget-categories { display: grid; gap: 12px; }
.msw-budget-category { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.msw-budget-label { font-size: 16px; font-weight: 600; color: #6B5040; min-width: 260px; }
.msw-budget-input-group { display: flex; align-items: center; gap: 8px; flex: 1; }
.msw-input-prefix { font-size: 18px; font-weight: 700; color: #8B6F5C; }
.msw-budget-input { width: 100px; padding: 10px 12px; font-size: 18px; border: 2px solid #E0C8B0; border-radius: 8px; text-align: right; }
.msw-budget-input:focus { border-color: #C78B6B; outline: none; box-shadow: 0 0 0 3px rgba(199,139,107,0.2); }
.msw-budget-hint { font-size: 13px; color: #C78B6B; cursor: pointer; text-decoration: underline; white-space: nowrap; }
.msw-budget-hint:hover { color: #A0694A; }

/* GRANDCHILD TOTAL */
.msw-grandchild-total { margin-top: 14px; padding-top: 14px; border-top: 2px solid #F0D8C0; font-size: 18px; color: #6B4226; text-align: right; }

/* RESULTS */
.msw-results { margin-top: 30px; }
.msw-results__title { font-size: 26px; text-align: center; color: #6B4226; margin: 0 0 20px; }

/* RESULT CARDS */
.msw-results-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 24px; }
.msw-result-card { background: #FFF8F0; border: 2px solid #F0D8C0; border-radius: 12px; padding: 18px; text-align: center; }
.msw-result-card--primary { background: #FFF0E0; border-color: #C78B6B; }
.msw-result-card__label { font-size: 13px; color: #8B6F5C; text-transform: uppercase; letter-spacing: 0.5px; }
.msw-result-card__value { font-size: 28px; font-weight: 800; color: #6B4226; margin: 6px 0; }

/* BREAKDOWN SECTIONS */
.msw-breakdown-section { background: #FFF; border: 2px solid #F0D8C0; border-radius: 10px; padding: 20px; margin-bottom: 16px; }
.msw-breakdown-section h4 { font-size: 20px; color: #6B4226; margin: 0 0 14px; }

/* PER-CHILD ITEMS */
.msw-per-child-item { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid #F5E8D8; font-size: 17px; }
.msw-per-child-item:last-child { border-bottom: none; }
.msw-per-child-name { font-weight: 700; color: #6B4226; min-width: 120px; }
.msw-per-child-amount { font-weight: 700; color: #C78B6B; }
.msw-per-child-yearly { font-size: 14px; color: #8B6F5C; }

/* CATEGORY ITEMS */
.msw-category-item { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid #F5E8D8; }
.msw-category-item:last-child { border-bottom: none; }
.msw-category-item__name { font-size: 16px; color: #6B5040; }
.msw-category-item__amount { font-weight: 700; color: #C78B6B; }

/* FAIR CHECK */
.msw-fair-check--equal, .msw-fair-check--balanced { color: #4A8B5C; font-size: 17px; }
.msw-fair-check--varied { color: #8B6B40; font-size: 17px; }

/* INSIGHTS */
.msw-insight { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-bottom: 1px solid #F5E8D8; font-size: 16px; color: #6B5040; }
.msw-insight:last-child { border-bottom: none; }
.msw-insight__icon { font-size: 22px; flex-shrink: 0; }

/* ACTIONS */
.msw-calc-actions { display: flex; gap: 15px; justify-content: center; margin-top: 24px; padding-top: 20px; border-top: 2px solid #F0D8C0; flex-wrap: wrap; }
.msw-calc-actions__save { background: #6B9F78; color: #FFF; }
.msw-calc-actions__save:hover { background: #5A8A67; }
.msw-calc-actions__print { background: #FFF; color: #6B4226; border: 2px solid #6B4226; }
.msw-calc-actions__print:hover { background: #6B4226; color: #FFF; }

/* TIPS */
.msw-tips { background: #FFF8F0; padding: 24px; border-radius: 8px; border: 2px solid #F0D8C0; margin-top: 30px; }
.msw-tips__title { font-size: 22px; color: #6B4226; margin: 0 0 16px; }
.msw-tips__list { list-style: none; padding: 0; margin: 0; }
.msw-tips__list li { padding: 12px 0 12px 35px; position: relative; border-bottom: 1px solid #F0D8C0; font-size: 16px; }
.msw-tips__list li:last-child { border-bottom: none; }
.msw-tips__list li::before { content: "💛"; position: absolute; left: 0; font-size: 18px; }

/* PRINT */
@media print {
    .msw-calculator__instructions, .msw-form-section, .msw-calc-actions, .msw-tips, .msw-button-remove { display: none !important; }
    .msw-results, .msw-grandchild-card { display: block !important; }
    body { background: white; }
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .msw-grandparent-budget { padding: 20px 15px; }
    .msw-form-row--three-col { grid-template-columns: 1fr; }
    .msw-results-grid { grid-template-columns: 1fr; }
    .msw-budget-category { flex-direction: column; align-items: flex-start; }
    .msw-budget-label { min-width: auto; }
    .msw-calc-actions { flex-direction: column; }
    .msw-calc-actions .msw-button { width: 100%; }
}

*:focus-visible { outline: 3px solid #C78B6B; outline-offset: 2px; }