/*
 * Creddo Belgian VAT Calculator — public stylesheet.
 *
 * Brand:
 *   header yellow  #FFCE00
 *   dark blue      #004A6E
 *   light blue     #5CC4C4
 *   grey bg        rgb(250,250,250) / rgb(233,233,233)
 *   primary blue   rgb(43,125,246)
 *   font           Lato
 *
 * Button readability rule: selected = blue bg + white text, non-selected =
 * light grey bg + WHITE text (per brief). Reset button mirrors non-selected.
 */

.creddo-vat-be {
    font-family: "Lato", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: #222;
    background: rgb(250, 250, 250);
    border-radius: 12px;
    overflow: hidden;
    max-width: 880px;
    margin: 24px auto;
    box-shadow: 0 6px 24px rgba(0, 74, 110, .08);
}

.creddo-vat-be__header {
    background: #FFCE00;
    padding: 18px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.creddo-vat-be__title {
    color: #004A6E;
    font-weight: 900;
    font-size: 20px;
    margin: 0;
    letter-spacing: .2px;
}

/* --- Language toggle ---------------------------------------------------- */
.creddo-vat-be__lang {
    display: inline-flex;
    background: rgb(233, 233, 233);
    border-radius: 999px;
    padding: 4px;
    gap: 4px;
}
.creddo-vat-be__lang-btn {
    appearance: none;
    border: 0;
    cursor: pointer;
    padding: 8px 16px;
    font-family: inherit;
    font-weight: 700;
    color: #ffffff;
    background: rgb(180, 180, 180);
    border-radius: 999px;
    transition: background .15s ease;
    font-size: 14px;
}
.creddo-vat-be__lang-btn.is-active {
    background: #004A6E;
}
.creddo-vat-be__lang-btn:hover:not(.is-active) {
    background: rgb(150, 150, 150);
}

/* --- Form layout -------------------------------------------------------- */
.creddo-vat-be__form {
    padding: 24px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 24px;
}
.creddo-vat-be__row {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.creddo-vat-be__row:has(.creddo-vat-be__btngroup),
.creddo-vat-be__flags,
.creddo-vat-be__actions {
    grid-column: 1 / -1;
}
.creddo-vat-be__label {
    font-weight: 700;
    color: #004A6E;
    font-size: 14px;
}
.creddo-vat-be__input {
    appearance: none;
    border: 1px solid rgb(220, 220, 220);
    background: #fff;
    border-radius: 8px;
    padding: 10px 12px;
    font-family: inherit;
    font-size: 15px;
    color: #222;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.creddo-vat-be__input:focus {
    outline: none;
    border-color: #5CC4C4;
    box-shadow: 0 0 0 3px rgba(92, 196, 196, .25);
}

/* --- Pill buttons (excl/incl) ------------------------------------------ */
.creddo-vat-be__btngroup {
    display: inline-flex;
    gap: 8px;
    flex-wrap: wrap;
}
.creddo-vat-be__pill {
    appearance: none;
    border: 0;
    cursor: pointer;
    padding: 10px 18px;
    font-family: inherit;
    font-weight: 700;
    color: #ffffff;
    background: rgb(180, 180, 180);
    border-radius: 8px;
    font-size: 14px;
    transition: background .15s ease;
}
.creddo-vat-be__pill.is-active {
    background: rgb(43, 125, 246);
}
.creddo-vat-be__pill:hover:not(.is-active) {
    background: rgb(150, 150, 150);
}

/* --- Flags -------------------------------------------------------------- */
.creddo-vat-be__flags {
    border: 1px solid rgb(233, 233, 233);
    background: #fff;
    padding: 12px 16px 14px;
    border-radius: 8px;
}
.creddo-vat-be__flags legend {
    font-weight: 700;
    color: #004A6E;
    padding: 0 6px;
    font-size: 14px;
}
.creddo-vat-be__flag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 4px 12px 4px 0;
    font-size: 14px;
    color: #333;
}

/* --- Action buttons ---------------------------------------------------- */
.creddo-vat-be__actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 8px;
}
.creddo-vat-be__btn {
    appearance: none;
    border: 0;
    cursor: pointer;
    padding: 12px 22px;
    border-radius: 8px;
    font-family: inherit;
    font-weight: 800;
    font-size: 15px;
    color: #ffffff;
    transition: background .15s ease, transform .05s ease;
}
.creddo-vat-be__btn:active { transform: translateY(1px); }

.creddo-vat-be__btn--primary { background: rgb(43, 125, 246); }
.creddo-vat-be__btn--primary:hover { background: rgb(28, 105, 220); }
.creddo-vat-be__btn--primary[disabled] { opacity: .5; cursor: not-allowed; }

/* Reset = non-selected style: light grey bg, white text */
.creddo-vat-be__btn--reset { background: rgb(180, 180, 180); }
.creddo-vat-be__btn--reset:hover { background: rgb(150, 150, 150); }

/* --- Result card ------------------------------------------------------- */
.creddo-vat-be__result {
    padding: 0 24px;
}
.creddo-vat-be__result-card {
    background: #fff;
    border-radius: 10px;
    padding: 20px;
    border-left: 6px solid #5CC4C4;
    box-shadow: 0 2px 6px rgba(0, 74, 110, .06);
    margin-bottom: 24px;
}
.creddo-vat-be__result-card--review_required { border-left-color: #FFCE00; }
.creddo-vat-be__result-card--reverse_charge,
.creddo-vat-be__result-card--exempt,
.creddo-vat-be__result-card--zero,
.creddo-vat-be__result-card--outside_scope { border-left-color: #004A6E; }

.creddo-vat-be__result-card h3 {
    margin: 0 0 12px;
    color: #004A6E;
    font-weight: 900;
}
.creddo-vat-be__result-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin-bottom: 12px;
}
.creddo-vat-be__result-grid > div {
    background: rgb(250, 250, 250);
    border-radius: 8px;
    padding: 10px 12px;
}
.creddo-vat-be__result-grid span {
    display: block;
    font-size: 12px;
    color: #555;
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 4px;
}
.creddo-vat-be__result-grid strong {
    color: #004A6E;
    font-size: 16px;
}
.creddo-vat-be__expl { margin: 6px 0 0; color: #333; }

.creddo-vat-be__warnings,
.creddo-vat-be__missing {
    margin-top: 14px;
    padding: 10px 14px;
    background: rgb(233, 233, 233);
    border-radius: 8px;
}
.creddo-vat-be__warnings h4,
.creddo-vat-be__missing h4 {
    margin: 0 0 6px;
    color: #004A6E;
    font-size: 14px;
}

.creddo-vat-be__disclaimer {
    padding: 0 24px 24px;
    font-size: 12px;
    color: #666;
}

/* --- Mobile ------------------------------------------------------------ */
@media (max-width: 640px) {
    .creddo-vat-be__form { grid-template-columns: 1fr; padding: 18px; }
    .creddo-vat-be__title { font-size: 17px; }
    .creddo-vat-be__lang-btn { padding: 6px 12px; font-size: 13px; }
    .creddo-vat-be__btn { width: 100%; }
}