/* =============================================
   Savings Goal Calculator – Frontend Styles
   ============================================= */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=DM+Mono:wght@400;500&display=swap');

/* ── Variables ─────────────────────────────── */
.sgc-app {
    --sgc-primary:    #1b4332;
    --sgc-primary-lt: #2d6a4f;
    --sgc-accent:     #52b788;
    --sgc-accent-lt:  #b7e4c7;
    --sgc-bg:         #f6faf7;
    --sgc-surface:    #ffffff;
    --sgc-border:     #d8eadf;
    --sgc-text:       #1a2e22;
    --sgc-muted:      #6b7f72;
    --sgc-positive:   #16a34a;
    --sgc-warn:       #d97706;
    --sgc-radius:     14px;
    --sgc-shadow:     0 2px 8px rgba(27,67,50,.07), 0 8px 32px rgba(27,67,50,.06);
    --sgc-font:       'Plus Jakarta Sans', system-ui, sans-serif;
    --sgc-mono:       'DM Mono', 'Fira Code', monospace;
}

/* ── Reset / Base ──────────────────────────── */
.sgc-app *, .sgc-app *::before, .sgc-app *::after { box-sizing: border-box; margin: 0; padding: 0; }
.sgc-app {
    font-family: var(--sgc-font);
    color: var(--sgc-text);
    background: var(--sgc-bg);
    border-radius: var(--sgc-radius);
    overflow: hidden;
    max-width: 900px;
    margin: 2rem auto;
    box-shadow: var(--sgc-shadow);
}

/* ── Hero ──────────────────────────────────── */
.sgc-hero {
    position: relative;
    background: var(--sgc-primary);
    padding: 3rem 2rem 2.5rem;
    text-align: center;
    overflow: hidden;
}
.sgc-hero__bg-circles { position: absolute; inset: 0; pointer-events: none; }
.sgc-hero__circle {
    position: absolute;
    border-radius: 50%;
    background: rgba(82,183,136,.12);
}
.sgc-hero__circle--1 { width: 300px; height: 300px; top: -120px; right: -80px; }
.sgc-hero__circle--2 { width: 180px; height: 180px; bottom: -60px; left: -40px; background: rgba(82,183,136,.08); }
.sgc-hero__circle--3 { width: 80px;  height: 80px;  top: 40px; left: 30%; background: rgba(82,183,136,.15); }

.sgc-hero__content { position: relative; z-index: 1; }
.sgc-hero__icon { font-size: 3rem; line-height: 1; margin-bottom: .75rem; display: block; filter: drop-shadow(0 4px 12px rgba(0,0,0,.3)); }
.sgc-hero__title {
    font-size: 2rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: -.02em;
    line-height: 1.15;
    margin-bottom: .6rem;
}
.sgc-hero__subtitle {
    font-size: .95rem;
    color: rgba(255,255,255,.72);
    max-width: 480px;
    margin: 0 auto;
    line-height: 1.6;
}

/* ── Stats Banner ──────────────────────────── */
.sgc-stats-banner {
    background: linear-gradient(135deg, var(--sgc-primary-lt) 0%, var(--sgc-primary) 100%);
    padding: 1.25rem 2rem;
}
.sgc-stats-banner__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
    max-width: 700px;
    margin: 0 auto;
}
.sgc-stat-item { text-align: center; }
.sgc-stat-item__number { font-size: 1.65rem; font-weight: 800; color: var(--sgc-accent); line-height: 1; margin-bottom: .3rem; }
.sgc-stat-item__label { font-size: .75rem; color: rgba(255,255,255,.7); line-height: 1.4; max-width: 130px; }
.sgc-stat-item__label em { font-style: italic; }
.sgc-stat-item--cta .sgc-stat-item__number { color: #fff; }
.sgc-stat-item--cta .sgc-stat-item__label { color: rgba(255,255,255,.9); }
.sgc-stat-divider { width: 1px; height: 48px; background: rgba(255,255,255,.2); }

/* ── Body ──────────────────────────────────── */
.sgc-body { padding: 2rem; }

/* ── Presets ───────────────────────────────── */
.sgc-presets { margin-bottom: 1.75rem; }
.sgc-presets__label { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--sgc-muted); margin-bottom: .6rem; }
.sgc-presets__list { display: flex; flex-wrap: wrap; gap: .5rem; }
.sgc-preset {
    background: var(--sgc-surface);
    border: 1.5px solid var(--sgc-border);
    border-radius: 99px;
    padding: .4rem 1rem;
    font-family: var(--sgc-font);
    font-size: .78rem;
    font-weight: 600;
    color: var(--sgc-text);
    cursor: pointer;
    transition: all .15s ease;
    white-space: nowrap;
}
.sgc-preset:hover, .sgc-preset.sgc-preset--active {
    background: var(--sgc-accent);
    border-color: var(--sgc-accent);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(82,183,136,.35);
}

/* ── Tabs ──────────────────────────────────── */
.sgc-tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .5rem;
    margin-bottom: 1.75rem;
    background: var(--sgc-surface);
    border: 1.5px solid var(--sgc-border);
    border-radius: var(--sgc-radius);
    padding: .4rem;
}
.sgc-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .3rem;
    padding: .75rem .5rem;
    border: none;
    border-radius: 10px;
    background: transparent;
    font-family: var(--sgc-font);
    font-size: .78rem;
    font-weight: 600;
    color: var(--sgc-muted);
    cursor: pointer;
    transition: all .18s ease;
    text-align: center;
    line-height: 1.3;
}
.sgc-tab__icon { font-size: 1.3rem; line-height: 1; }
.sgc-tab:hover { color: var(--sgc-primary); background: #f0f9f4; }
.sgc-tab--active {
    background: var(--sgc-primary);
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(27,67,50,.25);
}

/* ── Panels ────────────────────────────────── */
.sgc-panel { display: none; }
.sgc-panel--active { display: block; }
.sgc-panel__intro {
    background: var(--sgc-surface);
    border: 1.5px solid var(--sgc-border);
    border-radius: 10px;
    padding: .9rem 1.1rem;
    margin-bottom: 1.25rem;
    font-size: .87rem;
    color: var(--sgc-muted);
    line-height: 1.6;
}
.sgc-panel__intro strong { color: var(--sgc-primary); }

/* ── Form grid ─────────────────────────────── */
.sgc-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

/* ── Fields ────────────────────────────────── */
.sgc-field { display: flex; flex-direction: column; gap: .4rem; }
.sgc-field label {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .8rem;
    font-weight: 700;
    color: var(--sgc-text);
    letter-spacing: .01em;
}
.sgc-field__icon { font-size: .95rem; line-height: 1; }
.sgc-field__hint { font-size: .73rem; color: var(--sgc-muted); padding-left: .2rem; }

.sgc-input-wrap {
    display: flex;
    align-items: center;
    background: var(--sgc-surface);
    border: 1.5px solid var(--sgc-border);
    border-radius: 10px;
    overflow: hidden;
    transition: border-color .2s, box-shadow .2s;
}
.sgc-input-wrap:focus-within {
    border-color: var(--sgc-accent);
    box-shadow: 0 0 0 3px rgba(82,183,136,.18);
}
.sgc-input-prefix {
    padding: 0 .7rem;
    font-size: .85rem;
    font-weight: 600;
    color: var(--sgc-muted);
    background: #f4faf6;
    border-right: 1.5px solid var(--sgc-border);
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    flex-shrink: 0;
    user-select: none;
}
.sgc-input {
    flex: 1;
    border: none;
    outline: none;
    padding: .65rem .8rem;
    font-family: var(--sgc-font);
    font-size: .95rem;
    font-weight: 600;
    color: var(--sgc-text);
    background: transparent;
    min-width: 0;
}
.sgc-input::-webkit-inner-spin-button,
.sgc-input::-webkit-outer-spin-button { opacity: .5; }

/* ── Result card ───────────────────────────── */
.sgc-result-card {
    background: var(--sgc-surface);
    border: 1.5px solid var(--sgc-border);
    border-radius: var(--sgc-radius);
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(27,67,50,.07);
}

.sgc-result-card__main {
    background: linear-gradient(135deg, var(--sgc-primary) 0%, var(--sgc-primary-lt) 100%);
    padding: 1.75rem 1.5rem;
    text-align: center;
}
.sgc-result-card__label { font-size: .78rem; color: rgba(255,255,255,.65); text-transform: uppercase; letter-spacing: .1em; font-weight: 600; margin-bottom: .5rem; }
.sgc-result-card__value { font-size: 2.8rem; font-weight: 800; color: var(--sgc-accent); letter-spacing: -.03em; line-height: 1; }

.sgc-result-card__breakdown {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-bottom: 1.5px solid var(--sgc-border);
}
.sgc-breakdown-item {
    padding: 1rem;
    text-align: center;
    border-right: 1px solid var(--sgc-border);
}
.sgc-breakdown-item:last-child { border-right: none; }
.sgc-breakdown-item__label { font-size: .71rem; color: var(--sgc-muted); font-weight: 500; text-transform: uppercase; letter-spacing: .06em; margin-bottom: .3rem; }
.sgc-breakdown-item__value { font-size: .95rem; font-weight: 700; color: var(--sgc-text); }
.sgc-positive { color: var(--sgc-positive) !important; }
.sgc-accent   { color: var(--sgc-accent) !important; }

/* ── Progress bar ──────────────────────────── */
.sgc-progress-section { padding: 1rem 1.5rem; }
.sgc-progress-label {
    display: flex;
    justify-content: space-between;
    font-size: .75rem;
    font-weight: 600;
    color: var(--sgc-muted);
    margin-bottom: .4rem;
}
.sgc-progress-bar {
    width: 100%;
    height: 8px;
    background: #e8f5ee;
    border-radius: 99px;
    overflow: hidden;
}
.sgc-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--sgc-accent), var(--sgc-positive));
    border-radius: 99px;
    transition: width .5s cubic-bezier(.4,0,.2,1);
    min-width: 3px;
}

/* ── Milestones ────────────────────────────── */
.sgc-milestones { padding: 1rem 1.5rem; border-top: 1.5px solid var(--sgc-border); }
.sgc-milestones__label { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--sgc-muted); margin-bottom: .75rem; }
.sgc-milestones__list { display: flex; flex-direction: column; gap: .5rem; }
.sgc-milestone-row {
    display: flex;
    align-items: center;
    gap: .75rem;
    font-size: .82rem;
}
.sgc-milestone-row__dot {
    width: 10px; height: 10px; border-radius: 50%;
    flex-shrink: 0;
}
.sgc-milestone-row__name { color: var(--sgc-muted); flex: 1; }
.sgc-milestone-row__val { font-weight: 700; color: var(--sgc-text); }
.sgc-milestone-row--reached .sgc-milestone-row__name { color: var(--sgc-positive); font-weight: 600; }
.sgc-milestone-row--reached .sgc-milestone-row__dot { background: var(--sgc-positive); }
.sgc-milestone-row--active .sgc-milestone-row__dot { background: var(--sgc-accent); box-shadow: 0 0 0 3px rgba(82,183,136,.25); }
.sgc-milestone-row--future .sgc-milestone-row__dot { background: var(--sgc-border); }
.sgc-milestone-row__bar {
    flex: 2;
    height: 4px;
    background: #e8f5ee;
    border-radius: 99px;
    overflow: hidden;
}
.sgc-milestone-row__bar-fill {
    height: 100%;
    border-radius: 99px;
    background: var(--sgc-accent);
    transition: width .5s ease;
}

/* ── Tips ──────────────────────────────────── */
.sgc-tips { margin-top: 2rem; }
.sgc-tips__title { font-size: 1.05rem; font-weight: 700; color: var(--sgc-primary); margin-bottom: 1rem; }
.sgc-tips__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; }
.sgc-tip-card {
    background: var(--sgc-surface);
    border: 1.5px solid var(--sgc-border);
    border-radius: 12px;
    padding: 1rem 1.1rem;
    transition: border-color .2s, box-shadow .2s;
}
.sgc-tip-card:hover { border-color: var(--sgc-accent); box-shadow: 0 4px 16px rgba(82,183,136,.12); }
.sgc-tip-card__icon { font-size: 1.5rem; margin-bottom: .4rem; display: block; }
.sgc-tip-card h4 { font-size: .85rem; font-weight: 700; color: var(--sgc-primary); margin-bottom: .3rem; }
.sgc-tip-card p { font-size: .78rem; color: var(--sgc-muted); line-height: 1.55; }

/* ── Disclaimer ────────────────────────────── */
.sgc-disclaimer {
    background: #f0faf4;
    border-top: 1.5px solid var(--sgc-border);
    padding: .85rem 2rem;
}
.sgc-disclaimer p { font-size: .72rem; color: var(--sgc-muted); line-height: 1.55; }

/* ── Mobile ────────────────────────────────── */
@media (max-width: 600px) {
    .sgc-body { padding: 1.25rem 1rem; }
    .sgc-hero { padding: 2.25rem 1.25rem 2rem; }
    .sgc-hero__title { font-size: 1.5rem; }
    .sgc-hero__subtitle { font-size: .85rem; }

    /* Vertical stacked tabs on mobile */
    .sgc-tabs {
        grid-template-columns: 1fr;
        gap: .4rem;
        background: transparent;
        border: none;
        padding: 0;
        margin-bottom: 1.25rem;
    }
    .sgc-tab {
        flex-direction: row;
        justify-content: flex-start;
        padding: .85rem 1rem;
        border: 1.5px solid var(--sgc-border);
        border-radius: 10px;
        background: var(--sgc-surface);
        font-size: .85rem;
        text-align: left;
    }
    .sgc-tab__icon { font-size: 1.1rem; }
    .sgc-tab--active { background: var(--sgc-primary); border-color: var(--sgc-primary); }

    .sgc-form-grid { grid-template-columns: 1fr 1fr; gap: .75rem; }
    .sgc-result-card__value { font-size: 2.1rem; }
    .sgc-result-card__breakdown { grid-template-columns: 1fr; }
    .sgc-breakdown-item { border-right: none; border-bottom: 1px solid var(--sgc-border); }
    .sgc-breakdown-item:last-child { border-bottom: none; }
    .sgc-stats-banner__inner { gap: 1rem; }
    .sgc-stat-divider { display: none; }
    .sgc-tips__grid { grid-template-columns: 1fr; }
    .sgc-disclaimer { padding: .85rem 1rem; }
}
@media (max-width: 400px) {
    .sgc-form-grid { grid-template-columns: 1fr; }
    .sgc-presets__list { gap: .4rem; }
}