/* =======================================================================
   VAT Calculator Ireland — aligned to shared PAYE / Holiday UI system
   Shared shell, fields, buttons, breakdowns and empty states live in ic-base.css
   ======================================================================= */

/* ---------- Title / icons ---------- */
.ic-vatcalc .ic-title-icon {
    overflow: visible;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ---------- Mode tab bar spacing; shared tab button styling lives in ic-base.css. ---------- */
.ic-vatcalc .ic-tab-bar {
    padding: 0 0 10px;
    background: transparent;
}

/* ---------- Panel toggle ---------- */
.ic-vatcalc .ic-panel {
    display: block;
}

.ic-vatcalc .ic-panel--hidden {
    display: none;
}

/* ---------- Section header spacing ---------- */
.ic-vatcalc .ic-section-header {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* ---------- VAT rate pills ---------- */
.ic-vatcalc .ic-rate-group {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ic-vatcalc .ic-rate-pill {
    cursor: pointer;
    margin: 0;
}

.ic-vatcalc .ic-rate-pill input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.ic-vatcalc .ic-rate-pill span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 8px 14px;
    border: 1.5px solid var(--ic-input-border);
    border-radius: var(--ic-radius-sm);
    background: var(--ic-input-bg);
    color: var(--ic-text-muted);
    font-family: var(--ic-font);
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    user-select: none;
    transition: all .15s ease;
}

.ic-vatcalc .ic-rate-pill span:hover {
    border-color: var(--ic-input-hover-border);
    color: var(--ic-text);
    background: var(--ic-input-hover-bg);
}

.ic-vatcalc .ic-rate-pill input[type="radio"]:checked + span {
    background: var(--ic-primary);
    color: #fff;
    border-color: var(--ic-primary);
    box-shadow: 0 1px 4px rgba(30, 58, 138, .18);
}

.ic-vatcalc .ic-rate-pill input[type="radio"]:focus-visible + span {
    outline: 2px solid var(--ic-primary);
    outline-offset: 2px;
}

.ic-vatcalc .ic-custom-rate-wrap {
    animation: ic-baseFadeIn .2s ease;
}

/* ---------- Outdated dimming ---------- */
.ic-vatcalc .ic-results--outdated .ic-stagger {
    opacity: .45;
    pointer-events: none;
    transition: opacity .2s ease;
}

/* ---------- Result reveal ---------- */
.ic-vatcalc .ic-stagger > * {
    opacity: 0;
    animation: ic-baseFadeIn .3s ease-out forwards;
}

.ic-vatcalc .ic-stagger > *:nth-child(1) { animation-delay: 0ms; }
.ic-vatcalc .ic-stagger > *:nth-child(2) { animation-delay: 60ms; }
.ic-vatcalc .ic-stagger > *:nth-child(3) { animation-delay: 120ms; }
.ic-vatcalc .ic-stagger > *:nth-child(4) { animation-delay: 180ms; }
.ic-vatcalc .ic-stagger > *:nth-child(5) { animation-delay: 240ms; }

/* ---------- Mobile ---------- */
@media (max-width: 700px) {
    .ic-vatcalc .ic-tab-bar {
        padding: 0 0 8px;
    }

    .ic-vatcalc .ic-rate-pill span {
        min-height: 36px;
        padding: 7px 11px;
        font-size: 12px;
    }
}

/* Inline € prefix like PAYE / Holiday */
.ic-vatcalc .ic-input-prefix-wrap {
    position: relative;
}

.ic-vatcalc .ic-input-prefix {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ic-text-light);
    font-weight: 600;
    line-height: 1;
    pointer-events: none;
    background: transparent;
    border: 0;
    min-width: 0;
    padding: 0;
}

.ic-vatcalc .ic-input-has-prefix {
    padding-left: 34px !important;
}