/* ==========================================================================
   DE AUTOKAART (03-10-2026) - home-carrousel, /cars en de alternatieven.
   Opmaak: application/helpers/autokaart_helper.php.

   Kleur alleen op de prijs en de knop. Beide via een eigen variabele die
   terugvalt op de accentkleur van de verhuurder:
     --pt-kaart-knop        vulling van de knop
     --pt-kaart-knop-hover  vulling bij hover
     --pt-kaart-prijs       het bedrag (donkerder dan de knop: kleine tekst op wit)
   Labels, specificaties en "/ jour" zijn grijs.

   De knoptekst is 19px vet: "grote tekst" volgens WCAG, waarvoor 3:1 geldt.
   Wit op een oranje als #EA580C haalt 3,56:1 - genoeg voor deze maat, niet
   voor kleinere tekst. Wie de knop kleiner maakt, maakt hem ook donkerder.
   ========================================================================== */

:root {
  --ak-grijs: #6B7280;
  --ak-tekst: #374151;
  --ak-rand: #E5E7EB;
}

/* ---------- onderkant: prijs links, knop rechts, nooit afbreken ---------- */
.ak-voet {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: nowrap;
  min-width: 0;
}
.ak-prijs {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 0 1 auto;
}
.ak-vanaf {
  font-size: 12px;
  line-height: 1.3;
  color: var(--ak-grijs);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ak-regel {
  display: flex;
  align-items: baseline;
  gap: 4px;
  white-space: nowrap;
  line-height: 1.1;
}
.ak-bm {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  white-space: nowrap;
}
.ak-bedrag,
.ak-munt {
  color: var(--pt-kaart-prijs, #C2410C);
  font-weight: 700;
  letter-spacing: -0.01em;
}
.ak-bedrag { font-size: 25px; }
.ak-munt   { font-size: 16px; }
.ak-dag {
  font-size: 13px;
  color: var(--ak-grijs);
  font-weight: 500;
}
.ak-onder {
  font-size: 12px;
  color: var(--ak-grijs);
  margin-top: 3px;
  white-space: nowrap;
}

.ak-knop,
a.ak-knop,
button.ak-knop {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 112px;
  padding: 12px 22px;
  border: 0;
  border-radius: 999px;
  background: var(--pt-kaart-knop, var(--pt-accent, #F76B1C));
  color: #fff;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.15;
  white-space: nowrap;
  text-decoration: none;
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
  transition: background-color .15s ease;
  box-shadow: none;
}
.ak-knop::after {
  content: "\2192";               /* → */
  display: inline-block;
  transition: transform .15s ease;
}
.ak-knop:hover,
.ak-knop:focus,
a.ak-knop:hover,
a.ak-knop:focus,
button.ak-knop:hover,
.ak-kaart:hover .ak-knop {
  background: var(--pt-kaart-knop-hover, var(--pt-kaart-prijs, #C2410C));
  color: #fff;
  text-decoration: none;
}
.ak-knop:hover::after,
.ak-kaart:hover .ak-knop::after { transform: translateX(3px); }
.ak-knop:focus-visible {
  outline: 3px solid rgba(0, 0, 0, .35);
  outline-offset: 2px;
}
[dir="rtl"] .ak-knop::after { content: "\2190"; }   /* ← in RTL */
[dir="rtl"] .ak-knop:hover::after,
[dir="rtl"] .ak-kaart:hover .ak-knop::after { transform: translateX(-3px); }

/* Kleine knop (alternatieven): 14px is GEEN grote tekst, dus een donkerdere
   vulling - de hover-kleur van de grote knop (#C2410C op de demo: 5,18:1). */
.ak-knop.ak-knop--klein {
  font-size: 14px;
  padding: 7px 14px;
  min-width: 0;
  gap: 6px;
  background: var(--pt-kaart-knop-hover, #C2410C);
}
.ak-knop.ak-knop--klein:hover,
a:hover .ak-knop.ak-knop--klein,
a:focus .ak-knop.ak-knop--klein { filter: brightness(.88); }

/* Smalle onderkant: eerst kleiner, nooit afkappen. De onderkant zelf is de
   container, zodat het klopt in elke kaart (home, /cars, alternatieven) en
   in elke taal: "Wynajmij" en "1 500 Dhs / dzień" zijn breder dan het Frans.
   De knoptekst blijft 19px (grote tekst, zie boven); alleen de opvulling
   krimpt. In de allersmalste stand mag "/ jour" onder het bedrag. */
.ak-voet { container-type: inline-size; }
.ak-voet .ak-prijs { flex: 1 1 auto; }
.ak-voet .ak-knop { flex: 0 0 auto; }
@container (max-width: 340px) {
  .ak-voet   { gap: 8px; }
  .ak-bedrag { font-size: 21px; }
  .ak-munt   { font-size: 13px; }
  .ak-dag    { font-size: 12px; }
  .ak-voet > .ak-knop,
  .ak-voet .ak-knopform .ak-knop { padding: 11px 16px; min-width: 0; gap: 6px; }
}
@container (max-width: 300px) {
  .ak-bedrag { font-size: 20px; }
  .ak-voet > .ak-knop,
  .ak-voet .ak-knopform .ak-knop { padding: 10px 13px; }
  .ak-regel { flex-wrap: wrap; row-gap: 0; }
}

/* ---------- specificaties: twee kolommen, gelijke regelhoogte ---------- */
.ak-specs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 16px;
}
.ak-specs li {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 22px;
  line-height: 20px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ak-tekst);
  min-width: 0;
}
.ak-specs li span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ak-specs li.ak-breed { grid-column: 1 / -1; }
.ak-specs li i {
  flex: 0 0 18px;
  text-align: center;
  font-size: 14px;
  font-style: normal;
  color: var(--pt-accent, #F76B1C);
}

/* ---------- borgregel ---------- */
.ak-borg {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  background: #F7F7F8;
  border: 1px solid var(--ak-rand);
  border-radius: 10px;
  font-size: 13.5px;
  color: var(--ak-tekst);
}
.ak-borg-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  white-space: nowrap;
}
.ak-borg-icoon { color: var(--ak-grijs); flex: 0 0 auto; }
.ak-borg-bedrag {
  font-weight: 700;
  color: #111827;
  white-space: nowrap;
}

/* ---------- categorie linksboven ---------- */
.ak-badge {
  position: absolute;
  top: 14px;
  inset-inline-start: 14px;
  z-index: 2;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--pt-kaart-badge, #FFEDD5);
  color: var(--pt-kaart-badge-tekst, #9A3412);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  text-transform: none;
  letter-spacing: 0;
  white-space: nowrap;
}
@supports (background: color-mix(in srgb, red 50%, white)) {
  .ak-badge {
    background: var(--pt-kaart-badge, color-mix(in srgb, var(--pt-accent, #F76B1C) 14%, #fff));
    color: var(--pt-kaart-badge-tekst, color-mix(in srgb, var(--pt-accent, #F76B1C) 55%, #000));
  }
  .ak-bedrag, .ak-munt {
    color: var(--pt-kaart-prijs, color-mix(in srgb, var(--pt-accent, #F76B1C) 82%, #000));
  }
  .ak-knop.ak-knop--klein {
    background: var(--pt-kaart-knop-hover, color-mix(in srgb, var(--pt-kaart-knop, var(--pt-accent, #F76B1C)) 82%, #000));
  }
  .ak-knop:hover, .ak-knop:focus,
  a.ak-knop:hover, a.ak-knop:focus,
  button.ak-knop:hover, .ak-kaart:hover .ak-knop {
    background: var(--pt-kaart-knop-hover, color-mix(in srgb, var(--pt-kaart-knop, var(--pt-accent, #F76B1C)) 82%, #000));
  }
}