/* ═══════════════════════════════════════════
   gratuity.css — Gratuity Calculator specific styles
   Requires: calc-global.css
   Reuses .ppf-stat-cards / .lockin-box / donut patterns
   from ppf.css/epf.css for visual consistency.
═══════════════════════════════════════════ */

:root {
    --grat-green:      #047857;
    --grat-green-soft: #D1FAE5;
    --grat-gold:       #B45309;
    --grat-gold-soft:  #FEF3C7;
}

.field-empty-prompt {
    font-size: .7rem;
    color: var(--danger);
    margin-top: 5px;
    display: none;
    align-items: center;
    gap: 4px;
    background: var(--danger-soft);
    border: 1px solid #FECACA;
    border-radius: 8px;
    padding: .3rem .6rem;
}
.field-empty-prompt.show { display: flex; }

.ppf-stat-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 1.2rem;
}
.ppf-stat-card {
    border-radius: 14px;
    padding: .9rem 1rem;
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    border: 1.5px solid transparent;
    transition: transform .15s ease, box-shadow .15s;
}
.ppf-stat-card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(13,37,69,.09); }

.ppf-stat-card.card-invested { background: #CCFBF1; border-color: #5EEAD4; }
.ppf-stat-card.card-invested .psc-icon  { color: #0D9488; background: #99F6E4; }
.ppf-stat-card.card-invested .psc-value { color: #0D9488; }

.ppf-stat-card.card-interest { background: var(--grat-gold-soft); border-color: #FDE68A; }
.ppf-stat-card.card-interest .psc-icon  { color: var(--grat-gold); background: #FEF3C7; }
.ppf-stat-card.card-interest .psc-value { color: var(--grat-gold); }

.ppf-stat-card.card-tax { background: var(--grat-green-soft); border-color: #6EE7B7; }
.ppf-stat-card.card-tax .psc-icon  { color: var(--grat-green); background: #D1FAE5; }
.ppf-stat-card.card-tax .psc-value { color: var(--grat-green); }

.ppf-stat-card.card-lockin { background: #EDE9FE; border-color: #C4B5FD; }
.ppf-stat-card.card-lockin .psc-icon  { color: #7C3AED; background: #DDD6FE; }
.ppf-stat-card.card-lockin .psc-value { color: #7C3AED; }

.psc-icon {
    width: 34px; height: 34px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: .95rem; flex-shrink: 0;
}
.psc-body { flex: 1; min-width: 0; }
.psc-label {
    font-size: .65rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .06em; color: var(--slate); margin-bottom: 3px;
}
.psc-value {
    font-size: 1.05rem; font-weight: 800; font-family: var(--font-mono);
    color: var(--navy); line-height: 1.2;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.psc-sub {
    font-size: .67rem; color: var(--slate); margin-top: 2px; line-height: 1.4;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.lockin-box {
    background: var(--grat-green-soft);
    border: 1.5px solid #6EE7B7;
    border-radius: var(--r-md);
    padding: .75rem 1rem;
    margin-bottom: 1.2rem;
    display: flex;
    font-size: .77rem;
    color: #065f46;
    font-weight: 500;
    align-items: flex-start;
    gap: .5rem;
}
.lockin-box i { color: var(--grat-green); font-size: .9rem; flex-shrink: 0; margin-top: 1px; }
.lockin-box.warn {
    background: #FEF2F2; border-color: #FECACA; color: #991B1B;
}
.lockin-box.warn i { color: var(--danger); }

.hero-tax-banner {
    margin-top: 10px;
    background: rgba(255,255,255,.13);
    border: 1px solid rgba(255,255,255,.28);
    border-radius: 12px;
    padding: .55rem .85rem;
    display: flex; align-items: center; gap: 8px;
    font-size: .78rem; font-weight: 600; color: #fff; flex-wrap: wrap;
}
.hero-tax-banner i { color: #6EE7B7; }

#gratDonutTip {
    position: absolute; bottom: 105%; left: 50%; transform: translateX(-50%);
    background: #0D2545; border-radius: 16px; overflow: hidden;
    pointer-events: none; opacity: 0; transition: opacity .18s; z-index: 20;
    width: 192px; box-shadow: 0 20px 40px rgba(13,37,69,.35), 0 4px 12px rgba(13,37,69,.2);
}
.donut-arc { transition: opacity .18s, stroke-width .15s; fill: none; stroke-width: 16px; }
.dl-item.dl-active .dl-txt, .dl-item.dl-active .dl-val { color: var(--navy); font-weight: 700; }
.dl-item.dl-dim { opacity: .4; }

@media (max-width: 700px) {
    .ppf-stat-cards { grid-template-columns: 1fr 1fr; gap: 8px; }
    .psc-value { font-size: .9rem; }
}
@media (max-width: 480px) {
    .ppf-stat-cards { grid-template-columns: 1fr 1fr; gap: 6px; }
    .ppf-stat-card { padding: .7rem .75rem; }
    .psc-icon { width: 28px; height: 28px; font-size: .8rem; }
    .psc-value { font-size: .82rem; }
    .psc-sub { font-size: .62rem; }
}