/* Ruleta Criterio — shared components
   Buttons: split buttons with a separated chevron segment
   Links: underlined, accent colour (see base.css)
   Badges: colour-accent highlight tags
   Cards: flat, hairline borders
   Dividers: thin full-width hairline rules
   Motion: none — instant states only
*/

/* ---------- Buttons (split, chevron segment) ---------- */

.btn-split {
  display: inline-flex;
  align-items: stretch;
  text-decoration: none;
  border-radius: var(--radius-sm);
  overflow: hidden;
  font-weight: 700;
  font-size: var(--fs-sm);
  line-height: 1;
  cursor: pointer;
  border: none;
  font-family: inherit;

  & .btn-split__label {
    display: flex;
    align-items: center;
    padding: 13px 20px;
  }
  & .btn-split__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    flex-shrink: 0;
  }
  & svg { width: 14px; height: 14px; }
}

.btn-split--primary {
  & .btn-split__label { background: var(--c-accent); color: #fff; }
  & .btn-split__icon { background: var(--c-accent-dark); color: #fff; border-left: 1px solid rgba(255,255,255,0.28); }
  &:hover .btn-split__label { background: var(--c-accent-dark); }
  &:hover .btn-split__icon { background: var(--c-navy); }
}

.btn-split--secondary {
  border: var(--border-hairline);
  & .btn-split__label { background: var(--c-surface); color: var(--c-navy); }
  & .btn-split__icon { background: var(--c-bg-alt); color: var(--c-navy); border-left: var(--border-hairline); }
  &:hover .btn-split__label { background: var(--c-bg-alt); }
}

.btn-split--ghost {
  border: 1.5px solid rgba(255,255,255,0.35);
  & .btn-split__label { background: transparent; color: #fff; }
  & .btn-split__icon { background: rgba(255,255,255,0.12); color: #fff; border-left: 1px solid rgba(255,255,255,0.3); }
  &:hover .btn-split__label { background: rgba(255,255,255,0.1); }
}

.btn-split--sm .btn-split__label { padding: 9px 16px; }
.btn-split--sm .btn-split__icon { width: 32px; }
.btn-split--block { width: 100%; }
.btn-split--block .btn-split__label { flex: 1; justify-content: center; }

/* ---------- Badges & pills (colour-accent highlight tags) ---------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  background: var(--c-accent-tint);
  color: var(--c-accent-dark);
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;

  & svg { width: 13px; height: 13px; flex-shrink: 0; }
}

.badge--navy { background: var(--c-bg-alt); color: var(--c-navy); }
.badge--success { background: var(--c-success-tint); color: var(--c-success); }
.badge--warn { background: var(--c-warn-tint); color: var(--c-warn); }
.badge--outline { background: transparent; border: 1px solid var(--c-border-strong); color: var(--c-ink-muted); }

.badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.jurisdiction-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px 5px 8px;
  border-radius: var(--radius-pill);
  background: var(--c-navy);
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.02em;

  & svg { width: 14px; height: 14px; }
}

/* ---------- Star rating (five-star, halves) ---------- */

.stars {
  display: inline-flex;
  align-items: center;
  gap: 3px;

  & svg { width: 18px; height: 18px; }
  & .star-fill { color: var(--c-star); }
  & .star-empty { color: var(--c-star-empty); }
}

.rating {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.rating .rating-value {
  font-weight: 800;
  color: var(--c-navy);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
}

/* ---------- Cards (flat, hairline border) ---------- */

.card {
  background: var(--c-surface);
  border: var(--border-hairline);
  border-radius: var(--radius-md);
  padding: var(--sp-5);
}

.card--flat {
  box-shadow: none;
}

/* ---------- Operator card ---------- */

.op-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  background: var(--c-surface);
  border: var(--border-hairline);
  border-radius: var(--radius-md);
  padding: var(--sp-5);
  height: 100%;
}

.op-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-3);
}

.op-card__brand {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.op-card__logo {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-sm);
  border: var(--border-hairline);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;

  & img { width: 100%; height: 100%; object-fit: contain; padding: 8px; }
}

.op-card__logo--fallback {
  background: var(--c-bg-alt);
  color: var(--c-navy);
  font-weight: 800;
  font-size: var(--fs-md);
}

.op-card__name {
  margin: 0;
  font-size: var(--fs-md);
}

.op-card__desc {
  color: var(--c-ink-muted);
  font-size: var(--fs-sm);
  margin: 0;
}

.op-card__offer {
  font-size: var(--fs-sm);
  padding: var(--sp-3);
  background: var(--c-bg-alt);
  border-radius: var(--radius-sm);
  color: var(--c-ink);

  & strong { color: var(--c-navy); }
}

.op-card__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  margin-top: auto;
}

.op-card__fine {
  font-size: var(--fs-xs);
  color: var(--c-ink-faint);
  margin: 0;
}

.op-card--spotlight {
  border: 1.5px solid var(--c-accent);
  position: relative;
}

.op-card__rank {
  position: absolute;
  top: -12px;
  left: var(--sp-5);
  background: var(--c-navy);
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: 800;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
}

/* ---------- Section divider ---------- */

.divider {
  border: none;
  border-top: 1px solid var(--c-border);
  margin: 0;
}

.band {
  background: var(--c-bg-alt);
}

/* ---------- Trust strip ---------- */

.trust-strip {
  background: var(--c-navy);
  color: #E7ECF7;

  & .wrap { padding-block: var(--sp-7); }

  & h2 { color: #fff; }
  & p { color: #B9C3DC; }

  & a { color: #BFD3FF; }
}

.trust-strip__grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--sp-7);
  align-items: center;
}

.trust-facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
}

.trust-fact {
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: var(--radius-md);
  padding: var(--sp-4);

  & .trust-fact__value {
    display: block;
    font-size: var(--fs-xl);
    font-weight: 800;
    color: #fff;
    font-variant-numeric: tabular-nums;
    margin-bottom: 4px;
  }
  & .trust-fact__label { font-size: var(--fs-xs); color: #A9B4CC; }
}

@media (max-width: 860px) {
  .trust-strip__grid { grid-template-columns: 1fr; }
}

/* ---------- Table (criterion breakdown) ---------- */

.table-wrap {
  overflow-x: auto;
  border: var(--border-hairline);
  border-radius: var(--radius-md);
  background: var(--c-surface);
}

table.compare-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 720px;
  font-size: var(--fs-sm);

  & th, & td {
    padding: var(--sp-3) var(--sp-4);
    text-align: left;
    border-bottom: 1px solid var(--c-border);
    vertical-align: middle;
  }

  & thead th {
    background: var(--c-bg-alt);
    color: var(--c-navy);
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    position: sticky;
    top: 0;
  }

  & tbody tr:last-child td { border-bottom: none; }
  & tbody tr:hover { background: var(--c-accent-tint); }

  & td.num, & th.num { font-variant-numeric: tabular-nums; text-align: center; }

  & .tick { color: var(--c-success); font-weight: 800; }
  & .cross { color: var(--c-ink-faint); font-weight: 800; }
}

/* ---------- FAQ accordion ---------- */

.faq-item {
  border-bottom: 1px solid var(--c-border);

  &:first-child { border-top: 1px solid var(--c-border); }
}

.faq-item__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  background: none;
  border: none;
  text-align: left;
  font-family: inherit;
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--c-navy);
  padding: var(--sp-4) var(--sp-1);
  cursor: pointer;

  & svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--c-accent); }
}

.faq-item__a {
  display: none;
  padding: 0 var(--sp-1) var(--sp-4);
  color: var(--c-ink-muted);
  max-width: 68ch;
}

.faq-item.is-open .faq-item__a { display: block; }
.faq-item.is-open .faq-item__q svg { transform: rotate(45deg); }

/* ---------- Callouts / notes ---------- */

.callout {
  border: var(--border-hairline);
  border-left: 4px solid var(--c-accent);
  background: var(--c-surface);
  border-radius: var(--radius-sm);
  padding: var(--sp-4) var(--sp-5);

  & h3 { margin-bottom: var(--sp-2); }
  & p:last-child { margin-bottom: 0; }
}

.callout--warn { border-left-color: var(--c-warn); }
.callout--success { border-left-color: var(--c-success); }

.pullfact {
  border-top: var(--border-hairline);
  border-bottom: var(--border-hairline);
  padding: var(--sp-5) 0;
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--c-navy);
  line-height: 1.4;
}

/* ---------- Cookie banner ---------- */

.cookie-banner {
  position: fixed;
  left: var(--sp-4);
  right: var(--sp-4);
  bottom: var(--sp-4);
  z-index: 300;
  max-width: 620px;
  margin-inline: auto;
  background: var(--c-surface);
  border: var(--border-hairline);
  border-radius: var(--radius-md);
  box-shadow: 0 10px 30px rgba(15,27,51,0.18);
  padding: var(--sp-5);
  display: none;
}

.cookie-banner.is-visible { display: block; }

.cookie-banner p {
  font-size: var(--fs-sm);
  color: var(--c-ink-muted);
  margin-bottom: var(--sp-4);
}

.cookie-banner__actions {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
}

/* ---------- Forms ---------- */

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: var(--sp-4);

  & label { font-size: var(--fs-sm); font-weight: 700; color: var(--c-navy); }
  & input, & select, & textarea {
    font-family: inherit;
    font-size: var(--fs-base);
    padding: 11px 14px;
    border: var(--border-hairline);
    border-radius: var(--radius-sm);
    background: var(--c-surface);
    color: var(--c-ink);
  }
  & input:focus, & select:focus, & textarea:focus {
    outline: 2px solid var(--c-accent);
    outline-offset: 1px;
  }
  & textarea { min-height: 140px; resize: vertical; }
}

.form-note {
  font-size: var(--fs-xs);
  color: var(--c-ink-faint);
}

/* ---------- Utility layout ---------- */

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); }

.stack { display: flex; flex-direction: column; gap: var(--sp-4); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }

@media (max-width: 960px) {
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

.img-figure {
  margin: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: var(--border-hairline);

  & img { width: 100%; height: auto; }
  & figcaption {
    padding: var(--sp-3) var(--sp-4);
    font-size: var(--fs-xs);
    color: var(--c-ink-faint);
    background: var(--c-bg-alt);
  }
}