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

/* ── Bill amount input: large prominent number ───────────────────────────── */
.bill-input-wrap {
    position: relative;
}
.bill-currency-prefix {
    position:    absolute;
    left:        1rem;
    top:         50%;
    transform:   translateY(-50%);
    font-size:   1.25rem;
    font-weight: 700;
    color:       var(--muted);
    pointer-events: none;
    user-select: none;
}
#bill-amount {
    padding-left:  3rem;
    font-size:     1.75rem;
    font-weight:   700;
    letter-spacing: -0.01em;
    color:         var(--text);
    width:         100%;
    height:        3.5rem;
}
#bill-amount::placeholder {
    color:       var(--border);
    font-weight: 400;
}

/* ── Tip percentage pills ────────────────────────────────────────────────── */
.tip-row {
    display:     flex;
    align-items: center;
    gap:         0.5rem;
    flex-wrap:   wrap;
    margin-top:  0.25rem;
}
.tip-pills {
    display: flex;
    gap:     0.375rem;
    flex-wrap: wrap;
}
.tip-pill {
    padding:       0.35rem 0.875rem;
    border-radius: 999px;
    border:        1.5px solid var(--border);
    background:    var(--bg);
    color:         var(--text);
    font-size:     0.875rem;
    font-weight:   600;
    cursor:        pointer;
    transition:    background 0.15s, border-color 0.15s, color 0.15s;
    line-height:   1;
}
.tip-pill:hover {
    border-color: var(--accent);
    color:        var(--accent);
}
.tip-pill.active {
    background:   var(--accent);
    border-color: var(--accent);
    color:        #fff;
}
.tip-custom-wrap {
    display:     flex;
    align-items: center;
    gap:         0.375rem;
}
.tip-custom-label {
    font-size:   0.8125rem;
    color:       var(--muted);
    font-weight: 600;
    white-space: nowrap;
}
#tip-custom {
    width:       4.5rem;
    padding:     0.35rem 0.5rem;
    font-size:   0.875rem;
    font-weight: 600;
    text-align:  center;
    border-radius: 8px;
}

/* ── People slider row ───────────────────────────────────────────────────── */
.people-row {
    display:        flex;
    align-items:    center;
    gap:            0.875rem;
    flex-wrap:      wrap;
}
.people-slider-wrap {
    flex: 1;
    min-width: 160px;
}
#people-slider {
    width:          100%;
    accent-color:   var(--accent);
    cursor:         pointer;
    height:         4px;
    border-radius:  2px;
    appearance:     none;
    -webkit-appearance: none;
    background:     linear-gradient(to right, var(--accent) 5%, var(--border) 5%);
    outline:        none;
    border:         none;
    padding:        0;
    margin:         0;
}
#people-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width:              1.125rem;
    height:             1.125rem;
    border-radius:      50%;
    background:         var(--accent);
    cursor:             pointer;
    border:             2px solid #fff;
    box-shadow:         0 1px 4px rgba(0,0,0,0.18);
    transition:         transform 0.1s;
}
#people-slider::-webkit-slider-thumb:hover {
    transform: scale(1.15);
}
#people-slider::-moz-range-thumb {
    width:        1.125rem;
    height:       1.125rem;
    border-radius: 50%;
    background:   var(--accent);
    cursor:       pointer;
    border:       2px solid #fff;
}
.people-number-wrap {
    display:     flex;
    align-items: center;
    gap:         0.5rem;
}
#people-number {
    width:       3.5rem;
    padding:     0.35rem 0.5rem;
    font-size:   1rem;
    font-weight: 700;
    text-align:  center;
    border-radius: 8px;
}
#people-label {
    font-size:   0.8125rem;
    color:       var(--muted);
    font-weight: 600;
    min-width:   5rem;
}

/* ── Toggle switches ─────────────────────────────────────────────────────── */
.toggle-row {
    display:     flex;
    align-items: flex-start;
    gap:         0.75rem;
}
.toggle-switch {
    position:  relative;
    width:     2.75rem;
    height:    1.5rem;
    flex-shrink: 0;
    margin-top: 0.1rem;
}
.toggle-switch input {
    opacity: 0;
    width:   0;
    height:  0;
    position: absolute;
}
.toggle-track {
    position:      absolute;
    inset:         0;
    background:    var(--border);
    border-radius: 999px;
    cursor:        pointer;
    transition:    background 0.2s;
}
.toggle-track::after {
    content:       '';
    position:      absolute;
    left:          3px;
    top:           3px;
    width:         1.125rem;
    height:        1.125rem;
    border-radius: 50%;
    background:    #fff;
    box-shadow:    0 1px 3px rgba(0,0,0,0.2);
    transition:    transform 0.2s;
}
.toggle-switch input:checked + .toggle-track {
    background: var(--accent);
}
.toggle-switch input:checked + .toggle-track::after {
    transform: translateX(1.25rem);
}
.toggle-switch input:focus-visible + .toggle-track {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
.toggle-info {
    display:   flex;
    flex-direction: column;
    gap:       0.15rem;
}
.toggle-label {
    font-size:   0.9375rem;
    font-weight: 600;
    color:       var(--text);
    cursor:      pointer;
}
.toggle-sublabel {
    font-size: 0.8125rem;
    color:     var(--muted);
}
.toggles-note {
    font-size:   0.8125rem;
    color:       var(--muted);
    font-style:  italic;
    margin-top:  0.25rem;
}

/* ── Field labels inside tool card ──────────────────────────────────────── */
.tc-field {
    margin-bottom: 1.375rem;
}
.tc-field:last-child {
    margin-bottom: 0;
}
.tc-label {
    display:       block;
    font-size:     0.8125rem;
    font-weight:   700;
    color:         var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 0.5rem;
}
.tc-divider {
    border:  none;
    border-top: 1px solid var(--border);
    margin:  1.375rem 0;
}

/* ── Results section ─────────────────────────────────────────────────────── */
.tc-results {
    background:    var(--bg);
    border-radius: 10px;
    padding:       1.25rem 1.375rem;
    margin-top:    0.5rem;
}
.tc-result-row {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    padding:         0.4rem 0;
    font-size:       0.9375rem;
    color:           var(--text);
}
.tc-result-row.is-hidden {
    display: none;
}
.tc-result-label {
    color: var(--muted);
}
.tc-result-value {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.tc-results-divider {
    border:      none;
    border-top:  1.5px solid var(--border);
    margin:      0.5rem 0;
}
.tc-result-row.total-row {
    font-size:   1rem;
    font-weight: 700;
}
.tc-result-row.total-row .tc-result-value {
    font-weight: 800;
}
.tc-per-person-block {
    margin-top:    1rem;
    background:    #fff;
    border:        2px solid var(--accent);
    border-radius: 10px;
    padding:       1rem 1.375rem;
    display:       flex;
    justify-content: space-between;
    align-items:   center;
}
.tc-per-person-label-text {
    font-size:   0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color:       var(--muted);
}
#per-person-label {
    display:     block;
    font-size:   0.9375rem;
    font-weight: 600;
    color:       var(--text);
    margin-top:  0.125rem;
}
#result-per-person {
    font-size:   2rem;
    font-weight: 800;
    color:       var(--accent);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

/* ── ASEAN info box ──────────────────────────────────────────────────────── */
.asean-info-box {
    background:    #eff6ff;
    border:        1.5px solid #bfdbfe;
    border-radius: 10px;
    padding:       1.125rem 1.25rem;
    margin-top:    1.25rem;
}
.asean-info-box-title {
    font-size:   0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color:       #1e40af;
    margin-bottom: 0.75rem;
}
.asean-country-list {
    display:       flex;
    flex-direction: column;
    gap:           0.5rem;
}
.asean-country-item {
    font-size:  0.875rem;
    color:      #1e3a5f;
    line-height: 1.5;
}
.asean-country-item strong {
    font-weight: 700;
}

/* ── Disclaimer box ──────────────────────────────────────────────────────── */
.tc-disclaimer {
    background:    #fffbeb;
    border:        1px solid #fde68a;
    border-radius: 8px;
    padding:       0.75rem 1rem;
    font-size:     0.8125rem;
    color:         #92400e;
    margin-top:    1.25rem;
    line-height:   1.5;
}
.tc-disclaimer strong {
    font-weight: 700;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
    #bill-amount {
        font-size: 1.375rem;
    }
    #result-per-person {
        font-size: 1.625rem;
    }
    .tip-row {
        gap: 0.375rem;
    }
    .tip-pill {
        padding: 0.3rem 0.625rem;
        font-size: 0.8125rem;
    }
    .people-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.625rem;
    }
    .people-slider-wrap {
        width: 100%;
    }
    .tc-per-person-block {
        flex-direction: column;
        gap: 0.5rem;
        text-align: center;
    }
}

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