/* ════════════════════════════════════════════════════════════════════════════
   RECATOOLS — Salary Calculator — style.css
   Tool-specific overrides only.
   Base styles live in /assets/css/tool-page.css.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Salary number input ─────────────────────────────────────────────────────── */
#salary-input {
    font-size:   1.75rem;
    font-weight: 700;
    font-family: 'IBM Plex Sans', sans-serif;
    text-align:  right;
    letter-spacing: -0.02em;
    padding-right: 1rem;
}

/* ── Period pill group ───────────────────────────────────────────────────────── */
.period-pills,
.country-pills {
    display:    flex;
    flex-wrap:  wrap;
    gap:        0.5rem;
    margin-top: 0.75rem;
}

.period-pill,
.country-pill {
    padding:       0.4rem 1rem;
    border:        1.5px solid var(--border);
    border-radius: 999px;
    font-size:     0.875rem;
    font-weight:   600;
    color:         var(--muted);
    background:    transparent;
    cursor:        pointer;
    transition:    background 0.15s, color 0.15s, border-color 0.15s;
    white-space:   nowrap;
}

.period-pill:hover,
.country-pill:hover {
    border-color: var(--accent);
    color:        var(--accent);
}

.period-pill.active,
.country-pill.active {
    background:   var(--accent);
    border-color: var(--accent);
    color:        #fff;
}

/* ── Work hours/days row ─────────────────────────────────────────────────────── */
.work-params-row {
    display:   flex;
    gap:       1rem;
    flex-wrap: wrap;
    margin-top: 1rem;
}

.work-param {
    display:        flex;
    flex-direction: column;
    gap:            0.25rem;
    flex:           1 1 120px;
}

.work-param label {
    font-size:   0.8125rem;
    font-weight: 600;
    color:       var(--muted);
}

.work-param input {
    padding:       0.5rem 0.75rem;
    border:        1.5px solid var(--border);
    border-radius: 8px;
    font-size:     1rem;
    font-weight:   600;
    font-family:   'IBM Plex Sans', sans-serif;
    background:    var(--bg);
    color:         var(--text);
    width:         100%;
    transition:    border-color 0.15s;
}

.work-param input:focus {
    outline:      none;
    border-color: var(--accent);
}

/* ── 4-cell salary results grid ──────────────────────────────────────────────── */
.salary-grid {
    display:               grid;
    grid-template-columns: repeat(4, 1fr);
    gap:                   0.75rem;
    margin-top:            1.5rem;
}

@media (max-width: 640px) {
    .salary-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.salary-result-card {
    background:    var(--bg);
    border:        1.5px solid var(--border);
    border-radius: 14px;
    padding:       1rem 0.75rem;
    text-align:    center;
    transition:    border-color 0.15s, box-shadow 0.15s;
}

.salary-result-card--highlight {
    border-color: var(--accent);
    background:   #FFF5F2;
}

.salary-period-label {
    font-size:     0.75rem;
    font-weight:   700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color:         var(--muted);
    margin-bottom: 0.375rem;
}

.salary-amount {
    font-size:   1.25rem;
    font-weight: 700;
    color:       var(--text);
    font-family: 'IBM Plex Sans', sans-serif;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.salary-unit {
    font-size:   0.75rem;
    font-weight: 500;
    color:       var(--muted);
    margin-left: 0.1em;
}

/* ── CPF section ─────────────────────────────────────────────────────────────── */
.cpf-section {
    margin-top:    1.5rem;
    border:        1.5px solid #d4e8d0;
    border-radius: 14px;
    background:    #f6fbf5;
    padding:       1.25rem;
}

.cpf-section-header {
    display:     flex;
    flex-wrap:   wrap;
    gap:         0.75rem;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.cpf-badge,
.tax-badge {
    display:       inline-flex;
    align-items:   center;
    gap:           0.375rem;
    font-size:     0.8125rem;
    font-weight:   700;
    color:         #2d7a25;
    background:    #d4e8d0;
    border-radius: 999px;
    padding:       0.25rem 0.75rem;
    white-space:   nowrap;
}

/* ── Age bracket selector ────────────────────────────────────────────────────── */
.age-selector-wrap {
    display:  flex;
    flex-wrap: wrap;
    gap:      0.375rem;
}

.age-pill {
    padding:       0.25rem 0.625rem;
    border:        1.5px solid #c0d8bb;
    border-radius: 999px;
    font-size:     0.75rem;
    font-weight:   600;
    color:         #4a7a44;
    background:    transparent;
    cursor:        pointer;
    transition:    background 0.15s, color 0.15s, border-color 0.15s;
    white-space:   nowrap;
}

.age-pill:hover {
    border-color: #2d7a25;
    color:        #2d7a25;
}

.age-pill.active {
    background:   #2d7a25;
    border-color: #2d7a25;
    color:        #fff;
}

/* ── CPF rows ────────────────────────────────────────────────────────────────── */
.cpf-rows {
    display:        flex;
    flex-direction: column;
    gap:            0.5rem;
}

.cpf-row {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    gap:             1rem;
    font-size:       0.9375rem;
    padding:         0.375rem 0;
    border-bottom:   1px solid #e4f0e1;
}

.cpf-row:last-child {
    border-bottom: none;
}

.cpf-row--total {
    font-weight:   700;
    border-top:    2px solid #c0d8bb;
    margin-top:    0.25rem;
    padding-top:   0.625rem;
    border-bottom: none;
}

.cpf-row--package {
    font-weight: 600;
    border-bottom: none;
}

.cpf-label {
    color:     var(--text);
    flex:      1;
}

.cpf-value {
    font-weight:  600;
    color:        var(--text);
    white-space:  nowrap;
    text-align:   right;
}

.cpf-negative { color: #b94a48; }
.cpf-positive { color: #2d7a25; }
.cpf-takehome { color: #2d7a25; font-size: 1.05rem; }
.cpf-package  { color: #1a5c6b; }
.cpf-unit {
    font-size:   0.75rem;
    font-weight: 500;
    color:       var(--muted);
    margin-left: 0.1em;
}

.cpf-bracket-label {
    font-size:  0.8125rem;
    color:      var(--muted);
    font-weight: 500;
    text-align:  right;
    max-width:   240px;
}

/* ── Tax section (nested in CPF section) ─────────────────────────────────────── */
.tax-section {
    margin-top:    1.25rem;
    border-top:    1.5px dashed #c0d8bb;
    padding-top:   1rem;
}

.tax-section-header {
    margin-bottom: 0.75rem;
}

.cpf-disclaimer {
    font-size:   0.8125rem;
    color:       var(--muted);
    margin-top:  1rem;
    line-height: 1.5;
}

.cpf-disclaimer a {
    color:           var(--accent);
    text-decoration: none;
}

.cpf-disclaimer a:hover {
    text-decoration: underline;
}

/* ── Section dividers ────────────────────────────────────────────────────────── */
.group-label {
    font-size:     0.75rem;
    font-weight:   700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color:         var(--muted);
    margin:        1.25rem 0 0.5rem;
}

/* ── Responsive tweaks ───────────────────────────────────────────────────────── */
@media (max-width: 480px) {
    #salary-input {
        font-size: 1.375rem;
    }
    .salary-amount {
        font-size: 1.0625rem;
    }
    .cpf-row {
        font-size: 0.875rem;
    }
    .age-pill {
        font-size: 0.6875rem;
        padding:   0.2rem 0.5rem;
    }
}

/* cache-buster: 2026-05-24T05:06:05Z */