@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700;900&display=swap');

/* ── Variables ─────────────────────────────────────── */
:root{
  --cv-yellow:#f5c518;
  --cv-dark-blue:#00394f;
  --cv-btn-blue:#4a90d9;
  --cv-light-blue:#5ab8a6;
  --cv-bg:#ffffff;
  --cv-section:#f5f5f5;
  --cv-border:#d9d9d9;
  --cv-muted:#c8cdd3;
  --cv-text:#00394f;
  --cv-radius:0.75rem;
}

/* ── Base ──────────────────────────────────────────── */
.creddo-vat{font-family:'Lato',sans-serif;max-width:860px;margin:0 auto;color:var(--cv-text);box-sizing:border-box}
.creddo-vat *,.creddo-vat *::before,.creddo-vat *::after{box-sizing:inherit}

/* ── Hero ──────────────────────────────────────────── */
.creddo-vat__hero{background:var(--cv-yellow);padding:1.5rem 2rem;text-align:center;border-radius:var(--cv-radius) var(--cv-radius) 0 0}
.creddo-vat__hero h1{margin:0;font-weight:900;font-size:1.75rem;color:var(--cv-dark-blue)}
.creddo-vat__hero p{margin:.25rem 0 0;font-size:.875rem;color:var(--cv-dark-blue)}

/* ── Body ──────────────────────────────────────────── */
.creddo-vat__body{background:var(--cv-bg);border:1px solid var(--cv-border);border-top:none;border-radius:0 0 var(--cv-radius) var(--cv-radius);padding:1.5rem 2rem}

/* ── Section card ──────────────────────────────────── */
.creddo-vat__section{background:var(--cv-section);border-radius:var(--cv-radius);padding:1.5rem;margin-bottom:1.5rem}

/* ── Labels / headings ─────────────────────────────── */
.creddo-vat__label{display:block;font-size:.875rem;font-weight:700;margin-bottom:.375rem;color:var(--cv-dark-blue)}
.creddo-vat__heading{font-size:1.125rem;font-weight:700;margin:0 0 .25rem;color:var(--cv-dark-blue)}
.creddo-vat__subtext{font-size:.875rem;color:#5a7a8a;margin:0 0 1rem}

/* ── Input ─────────────────────────────────────────── */
.creddo-vat__input{width:100%;border:1px solid var(--cv-border);border-radius:.5rem;padding:.75rem 1rem;font-size:1rem;font-family:inherit;background:var(--cv-bg);color:var(--cv-text);outline:none;transition:box-shadow .2s}
.creddo-vat__input:focus{box-shadow:0 0 0 2px var(--cv-btn-blue)}
.creddo-vat__input--search{padding-left:2.5rem;font-size:.875rem}

/* ── Search wrap ───────────────────────────────────── */
.creddo-vat__search-wrap{position:relative;margin-bottom:1rem}
.creddo-vat__search-icon{position:absolute;left:.75rem;top:50%;transform:translateY(-50%);width:1rem;height:1rem;color:#5a7a8a}

/* ── Toggle buttons ────────────────────────────────── */
.creddo-vat__toggles{display:flex;gap:.75rem}
.creddo-vat__toggle{flex:1;border:1px solid var(--cv-muted);border-radius:.5rem;padding:.625rem 1rem;font-size:.875rem;font-weight:600;font-family:inherit;cursor:pointer;transition:all .2s;background:var(--cv-muted);color:#fff}
.creddo-vat__toggle--active{background:var(--cv-btn-blue);border-color:var(--cv-btn-blue);color:#fff}

/* ── Category grid ─────────────────────────────────── */
.creddo-vat__categories{max-height:360px;overflow-y:auto;padding-right:.25rem}
.creddo-vat__cat-group{margin-bottom:1rem}
.creddo-vat__cat-group-title{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:#5a7a8a;margin-bottom:.5rem}
.creddo-vat__cat-grid{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}

/* ── Category button ───────────────────────────────── */
.creddo-vat__cat{text-align:left;border:1px solid var(--cv-border);border-radius:.5rem;padding:.625rem .75rem;cursor:pointer;transition:all .2s;background:var(--cv-bg);font-family:inherit;width:100%}
.creddo-vat__cat:hover{background:var(--cv-section)}
.creddo-vat__cat--active{background:var(--cv-btn-blue);border-color:var(--cv-btn-blue)}
.creddo-vat__cat-top{display:flex;align-items:center;justify-content:space-between}
.creddo-vat__cat-label{font-size:.875rem;font-weight:600;color:var(--cv-dark-blue)}
.creddo-vat__cat--active .creddo-vat__cat-label{color:#fff}
.creddo-vat__cat-badge{font-size:.75rem;font-weight:700;padding:.125rem .375rem;border-radius:.25rem;background:var(--cv-section);color:var(--cv-dark-blue)}
.creddo-vat__cat-badge--reduced{background:#dbeafe;color:#1e40af}
.creddo-vat__cat-badge--exempt{background:var(--cv-section);color:#5a7a8a}
.creddo-vat__cat--active .creddo-vat__cat-badge{background:rgba(255,255,255,.2);color:#fff}
.creddo-vat__cat-desc{font-size:.75rem;margin-top:.125rem;color:#5a7a8a}
.creddo-vat__cat--active .creddo-vat__cat-desc{color:rgba(255,255,255,.9)}

/* ── Summary ───────────────────────────────────────── */
.creddo-vat__summary{margin-top:1rem;border:1px solid var(--cv-border);border-radius:.5rem;padding:.75rem 1rem;background:var(--cv-bg);display:flex;align-items:center;justify-content:space-between}
.creddo-vat__summary-label{font-size:.875rem;font-weight:700}
.creddo-vat__summary-desc{font-size:.75rem;color:#5a7a8a;margin-left:.5rem}
.creddo-vat__summary-rate{font-size:1.125rem;font-weight:900}

/* ── Action buttons ────────────────────────────────── */
.creddo-vat__actions{display:flex;gap:.75rem;margin-bottom:1rem}
.creddo-vat__btn{border:none;border-radius:.5rem;padding:.875rem 1.5rem;font-size:1rem;font-weight:700;font-family:inherit;cursor:pointer;transition:opacity .2s;outline:none}
.creddo-vat__btn:focus-visible{box-shadow:0 0 0 2px var(--cv-btn-blue)}
.creddo-vat__btn--primary{flex:1;background:var(--cv-btn-blue);color:#fff}
.creddo-vat__btn--primary:hover{opacity:.9}
.creddo-vat__btn--secondary{background:var(--cv-muted);color:#fff;border:1px solid var(--cv-muted)}
.creddo-vat__btn--secondary:hover{opacity:.9}

/* ── Error ─────────────────────────────────────────── */
.creddo-vat__error{color:#dc2626;font-size:.875rem;margin-top:.5rem}

/* ── Result card ───────────────────────────────────── */
.creddo-vat__result{border-radius:var(--cv-radius);padding:1.5rem;margin-top:1rem}
.creddo-vat__result--success{background:#ecfdf5;border:1px solid #22c55e}
.creddo-vat__result--info{background:#eff6ff;border:1px solid var(--cv-btn-blue)}
.creddo-vat__result--exempt{background:var(--cv-section);border:1px solid var(--cv-border)}
.creddo-vat__result-header{display:flex;align-items:center;gap:.75rem;margin-bottom:1rem}
.creddo-vat__result-title{font-size:1.125rem;font-weight:700}
.creddo-vat__result-pct{margin-left:auto;font-size:1.5rem;font-weight:900}
.creddo-vat__result-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1rem;margin-bottom:1rem}
.creddo-vat__result-cell{background:var(--cv-bg);border-radius:.5rem;padding:.75rem;text-align:center}
.creddo-vat__result-cell-label{font-size:.875rem;color:#5a7a8a}
.creddo-vat__result-cell-value{font-size:1.25rem;font-weight:700}
.creddo-vat__result-explanation{font-size:.875rem;margin-bottom:.75rem}
.creddo-vat__result-warning{display:flex;align-items:flex-start;gap:.5rem;font-size:.875rem;margin-bottom:.25rem;color:#92400e}
.creddo-vat__result-disclaimer{margin-top:1rem;padding-top:.75rem;border-top:1px solid var(--cv-border);font-size:.75rem;color:#5a7a8a;font-style:italic}
.creddo-vat__no-results{text-align:center;padding:1rem;font-size:.875rem;color:#5a7a8a}

/* ── Responsive ────────────────────────────────────── */
@media(max-width:640px){
  .creddo-vat__body{padding:1rem 1.25rem}
  .creddo-vat__section{padding:1rem}
  .creddo-vat__hero{padding:1.25rem 1rem}
  .creddo-vat__hero h1{font-size:1.5rem}
  .creddo-vat__cat-grid{grid-template-columns:1fr}
  .creddo-vat__result-grid{grid-template-columns:1fr}
  .creddo-vat__actions{flex-direction:column}
  .creddo-vat__btn{width:100%}
  .creddo-vat__summary{flex-direction:column;align-items:flex-start;gap:.5rem}
}