/*
 * Stijl voor de publieke veilingpagina's.
 *
 * Sluit aan op het bestaande theme in plaats van ernaast te gaan staan: dezelfde
 * accentkleuren (#1a1a18 en #39aa34), dezelfde zachte schaduw en randen als de
 * productkaarten, en Bootstrap 5 doet het raster. Er komt geen nieuwe UI-bibliotheek bij.
 *
 * De klassen dragen het voorvoegsel veiling__ zodat ze niet met de bestaande
 * product__- en products__-regels kunnen botsen.
 */

.veiling {
  --veiling-ink: #1a1a18;
  --veiling-accent: #39aa34;
  --veiling-muted: #6c757d;
  --veiling-line: #f2f2f2;
  --veiling-surface: #fff;
}

/* ---------------------------------------------------------------- status */

.veiling__status {
  align-items: center;
  display: inline-flex;
  font-size: 0.85rem;
  font-weight: 600;
  gap: 0.4rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}

.veiling__status-dot {
  border-radius: 50%;
  display: inline-block;
  flex: 0 0 auto;
  height: 0.55rem;
  width: 0.55rem;
}

.veiling__status--open {
  color: #39aa34;
}

.veiling__status--open .veiling__status-dot {
  background-color: #39aa34;
  box-shadow: 0 0 0 0.2rem rgba(57, 170, 52, 0.18);
}

.veiling__status--upcoming {
  color: #6c757d;
}

.veiling__status--upcoming .veiling__status-dot {
  background-color: #adb5bd;
}

.veiling__status--ended {
  color: #495057;
}

.veiling__status--ended .veiling__status-dot {
  background-color: #495057;
}

.veiling__status--cancelled {
  color: #dc3545;
}

.veiling__status--cancelled .veiling__status-dot {
  background-color: #dc3545;
}

/* Eindigt vandaag. Oranje en niet rood: rood betekent op deze site 'geannuleerd', en een
   veiling die vandaag sluit is geen fout maar een kans. De betekenis staat in de tekst, de
   kleur doet er alleen een schepje bovenop — wie kleuren niet onderscheidt leest hetzelfde.
   Contrast van #8a4b00 op #fff4e5 is ruim boven de AA-drempel. */
.veiling__urgent {
  align-items: center;
  background-color: #fff4e5;
  border: 1px solid #f3cf9a;
  border-radius: 1rem;
  color: #8a4b00;
  display: inline-flex;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1.2;
  padding: 0.2rem 0.55rem;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ---------------------------------------------------------------- overzicht */

/* section.overview levert de bovenruimte; hier alleen de zijkanten temperen, want de
   theme-regel zet daar 5rem op en de kaarten staan al in een container. */
.veiling-archive.overview {
  min-height: auto;
  padding-left: 0;
  padding-right: 0;
  padding-bottom: 4rem;
}

.veiling-archive__head {
  margin-bottom: 2rem;
}

.veiling-archive__intro {
  color: #6c757d;
  margin-bottom: 0;
  max-width: 64rem;
}

/* De inleiding was één alinea en is nu redactionele tekst uit de instellingen: meerdere
   alinea's, soms met vet erin. wpautop geeft elke alinea zijn eigen marges, en de eerste
   en laatste stapelen dan op de ruimte van het kopblok. */
.veiling-archive__intro > :first-child {
  margin-top: 0;
}

.veiling-archive__intro > :last-child {
  margin-bottom: 0;
}

/* Vet is het enige wat in deze tekst echt nadruk hoort te geven; de rest blijft rustig. */
.veiling-archive__intro strong {
  color: #1a1a18;
}

/* Lotnummer en titel horen links uit te lijnen. product__title draagt in het theme een
   eigen linkerinspringing die per breekpunt verschilt; binnen onze kop zetten we die uit
   in plaats van hem elders na te bouwen. */
.veiling__header .product__title {
  padding-left: 0;
}

.veiling-archive__empty {
  color: #6c757d;
  padding: 3rem 0;
  text-align: center;
}

.veiling-archive__empty-title {
  color: #1a1a18;
  font-size: 1.15rem;
  font-weight: 600;
  margin-bottom: 0.35rem;
}

.veiling-archive__empty-text {
  margin-bottom: 0;
}

/* De hele kaart is klikbaar via stretched-link op de knop onderaan. Daarvoor moet de
   kaart zelf het positioneringsanker zijn; zonder position:relative zou het gestrekte
   anker zich aan de dichtstbijzijnde voorouder vastmaken en over de buren heen vallen. */
.veiling__card {
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
}

/* Eén vaste verhouding voor alle kaarten. Zonder dit bepaalt elke foto zijn eigen hoogte
   en beginnen titel, prijs en klok van de kaarten in een rij op verschillende hoogtes.
   object-fit: cover snijdt bij in plaats van te vervormen. */
.veiling__card-media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.veiling__card-media .products__photo {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

/* De kaart als geheel reageert, niet alleen de knop: dat maakt op een aanraakscherm het
   verschil tussen "ik kan hier klikken" en gokken. */
.veiling__card-media .products__photo {
  transition: transform 0.25s ease;
}

.veiling__card:hover .veiling__card-media .products__photo,
.veiling__card:focus-within .veiling__card-media .products__photo {
  transform: scale(1.03);
}

.veiling__card-link {
  align-items: center;
  color: inherit;
  display: inline-flex;
  gap: 0.4rem;
  font-weight: 600;
  text-decoration: none;
}

.veiling__card-link:hover,
.veiling__card-link:focus-visible {
  text-decoration: underline;
}

.veiling__card-arrow {
  transition: transform 0.2s ease;
}

.veiling__card:hover .veiling__card-arrow {
  transform: translateX(0.2rem);
}

/* De inhoud vult de kaart op, zodat de knop bij kaarten van ongelijke hoogte toch
   allemaal op dezelfde lijn onderaan staat. */
.veiling__card-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding-top: 1rem;
}

.veiling__card-top {
  align-items: center;
  display: flex;
  gap: 0.75rem;
  justify-content: space-between;
  margin-bottom: 0.35rem;
}

.veiling__lotnumber {
  color: #6c757d;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* De grote variant staat in de donkere balk boven de lottitel. Het grijs van de kleine
   variant — die op een witte kaart staat — valt daar bijna weg. */
.veiling__lotnumber--lg {
  color: #fff;
  font-size: 0.9rem;
  margin-bottom: 0.25rem;
}

/* Beide klassen samen, zodat dit wint van .products__title uit het theme ongeacht in
   welke volgorde de stylesheets geladen worden. Die regel centreert, en een gecentreerde
   titel boven links uitgelijnde prijs, biedingen en knop leest als een fout. */
.products__title.veiling__card-title {
  font-size: 1.1rem;
  margin-bottom: 0.35rem;
  margin-top: 0;
  text-align: left;
}

.veiling__card-meta {
  color: #6c757d;
  font-size: 0.9rem;
  margin-bottom: 0.6rem;
}

/* Het bedrag is waar het oog als eerste heen moet: het is de reden dat iemand op een
   veiling klikt. Vandaar groter dan de titel eromheen en met wat lucht erboven. */
.veiling__card-price {
  border-top: 1px solid #f2f2f2;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 0.15rem;
  padding-top: 0.75rem;
}

.veiling__card-bidline {
  color: #6c757d;
  font-size: 0.875rem;
  margin-bottom: 0.5rem;
}

.veiling__card-sep {
  padding: 0 0.15rem;
}

/* De resterende tijd is op een veilingoverzicht een van de redenen dat iemand doorklikt,
   dus hij staat op zijn eigen regel met een klokmarker ervoor. */
.veiling__card-time {
  align-items: center;
  color: #6c757d;
  display: flex;
  font-size: 0.9rem;
  gap: 0.4rem;
  margin-bottom: 0.75rem;
  margin-top: 0;
}

.veiling__card-clock {
  flex: 0 0 auto;
}

/* Tabulaire cijfers voorkomen dat de regel elke seconde een paar pixels verspringt doordat
   een 1 smaller is dan een 8. */
.veiling__card-time--live .veiling__card-countdown {
  font-variant-numeric: tabular-nums;
}

/* Een lopende veiling: donker en vet, want dit is het getal waar het om draait. Een gepland
   lot houdt de gedempte kleur — daar telt de startdatum, niet de urgentie. */
.veiling__card-time--urgent {
  color: #1a1a18;
  font-size: 1rem;
}

.veiling__card-time--urgent .veiling__card-countdown {
  font-weight: 700;
}

.veiling__card-cta {
  margin-bottom: 0;
  margin-top: auto;
  padding-top: 0.25rem;
}

/* --------------------------------------------------------- blok op de homepage */

/* Even veel lucht boven en onder als de blokken ernaast (.banner gebruikt padding-block:
   2rem). Eerder stond hier .overview uit het thema, en dat is 7rem — bedoeld voor een
   pagina die op zichzelf staat, niet voor een blok tussen andere blokken. */
.veiling-home {
  padding-block: 2rem;
}

/* Dezelfde zijpadding als .banner__boxarea, zodat de titel en de kaarten links en rechts
   op exact dezelfde lijn uitkomen als het blok erboven. */
.veiling-home__inner {
  padding: 0 15px;
}

.veiling-home__head {
  margin-bottom: 1.5rem;
}

.veiling-home__title {
  margin-bottom: 0.35rem;
}

.veiling-home__intro {
  color: #6c757d;
  margin-bottom: 0;
}

.veiling-home__cta {
  margin-bottom: 0;
  margin-top: 1.5rem;
}

/* Op een telefoon staat de knop over de volle breedte: hij is daar de enige weg naar het
   overzicht, en wie het menu niet opent moet hem niet hoeven zoeken. */
@media (max-width: 575.98px) {
  .veiling-home__cta .button {
    display: block;
    text-align: center;
    width: 100%;
  }
}

/* ------------------------------------------------------------- bedrag kiezen */

.veiling__chooser {
  margin-bottom: 1rem;
}

.veiling__chooser-label,
.veiling__custom-label {
  color: #6c757d;
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 0.4rem;
}

.veiling__custom-label {
  margin-top: 0.9rem;
}

/* Drie naast elkaar zolang het past, en anders netjes wrappen. Op 375px blijft dat
   leesbaar omdat de bedragen kort zijn; bij lange bedragen zakt de derde eronder. */
.veiling__quick {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.veiling__quick-button {
  background-color: #fff;
  border: 1px solid #c9c9c4;
  border-radius: 0.35rem;
  color: #1a1a18;
  cursor: pointer;
  flex: 1 1 5.5rem;
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  min-height: 2.75rem;
  padding: 0.55rem 0.5rem;
  transition:
    border-color 0.15s ease,
    background-color 0.15s ease;
}

.veiling__quick-button:hover {
  border-color: #1a1a18;
}

/* De selectie staat niet alleen in de kleur: het vinkje ervoor en aria-pressed zeggen
   hetzelfde voor wie kleur niet onderscheidt of een schermlezer gebruikt. */
.veiling__quick-button.is-selected {
  background-color: #1a1a18;
  border-color: #1a1a18;
  color: #fff;
}

.veiling__quick-button.is-selected::before {
  content: "✓ ";
}

.veiling__quick-button:focus-visible {
  outline: 2px solid #39aa34;
  outline-offset: 2px;
}

.veiling__custom {
  align-items: stretch;
  display: flex;
}

.veiling__custom-prefix {
  align-items: center;
  background-color: #f6f6f4;
  border: 1px solid #c9c9c4;
  border-radius: 0.35rem 0 0 0.35rem;
  border-right: 0;
  color: #6c757d;
  display: flex;
  padding: 0 0.75rem;
}

.veiling__custom-input {
  border: 1px solid #c9c9c4;
  border-radius: 0 0.35rem 0.35rem 0;
  flex: 1 1 auto;
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  min-height: 2.75rem;
  padding: 0.55rem 0.7rem;
  width: 100%;
}

.veiling__custom-input:focus-visible {
  border-color: #1a1a18;
  outline: 2px solid #39aa34;
  outline-offset: 1px;
}

.veiling__amount-error {
  color: #a33;
  font-size: 0.85rem;
  margin: 0.45rem 0 0;
}

/* ---------------------------------------------------------------- lotpagina */

.veiling__header {
  margin-bottom: 1rem;
}

.veiling__box {
  background-color: #fff;
  border: 1px solid #f2f2f2;
  border-radius: 8px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
  margin-bottom: 1.5rem;
  padding: 1.25rem;
}

.veiling__box-head {
  align-items: center;
  border-bottom: 1px solid #f2f2f2;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: space-between;
  padding-bottom: 0.75rem;
}

.veiling__bidcount {
  color: #6c757d;
  font-size: 0.9rem;
}

.veiling__amount {
  display: flex;
  flex-direction: column;
  padding: 1rem 0 0.5rem;
}

.veiling__amount-label {
  color: #6c757d;
  font-size: 0.9rem;
}

.veiling__amount-value {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.2;
}

/* Bedrag en btw-regel naast elkaar, uitgelijnd op de onderkant van de cijfers in plaats
   van op het midden: anders zweeft de kleine tekst halverwege het grote bedrag.

   flex-wrap zorgt dat de regel op een smal scherm vanzelf onder het bedrag zakt in plaats
   van de prijs samen te drukken. Het bedrag blijft dus altijd volledig leesbaar. */
.veiling__amount-row {
  align-items: baseline;
  column-gap: 0.6rem;
  display: flex;
  flex-wrap: wrap;
  row-gap: 0;
}

/* Kleiner en grijs: de hiërarchie moet duidelijk blijven. Het bedrag is de boodschap,
   dit is de voetnoot erbij. */
.veiling__vatnote {
  color: #6c757d;
  font-size: 0.85rem;
}

.veiling__amount {
  padding-bottom: 1rem;
}

.veiling__countdown {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding-bottom: 0.75rem;
}

.veiling__countdown-label {
  color: #6c757d;
  font-size: 0.9rem;
}

.veiling__countdown-value {
  font-size: 1.25rem;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  /* Vaste breedte-illusie: zonder tabular-nums springt de tekst elke seconde. */
}

.veiling__extended {
  align-items: center;
  background-color: rgba(57, 170, 52, 0.08);
  border-radius: 6px;
  color: #2f7d2c;
  display: flex;
  font-size: 0.9rem;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  padding: 0.5rem 0.75rem;
}

.veiling__extended-icon {
  background-color: #39aa34;
  border-radius: 50%;
  flex: 0 0 auto;
  height: 0.5rem;
  width: 0.5rem;
}

.veiling__nextmin {
  color: #6c757d;
  margin-bottom: 0.75rem;
}

.veiling__nextmin strong {
  color: #1a1a18;
}

.veiling__highest {
  background-color: rgba(57, 170, 52, 0.1);
  border-radius: 6px;
  color: #2f7d2c;
  font-weight: 600;
  margin-bottom: 0.75rem;
  padding: 0.6rem 0.75rem;
}

/* Het bewerkknopje voor een beheerder, linksonder vast in beeld. Dezelfde plek en
   hetzelfde formaat als bij de stoelen en tafels in het theme, zodat Ludovic hem op
   dezelfde reflex vindt. Compact: 48px is groot genoeg om op een telefoon te raken en
   klein genoeg om niets te bedekken. */
.veiling__editfab {
  bottom: 1.5rem;
  left: 1rem;
  position: fixed;
  z-index: 1030;
}

.veiling__editfab-link {
  align-items: center;
  background-color: #1a1a18;
  border-radius: 50%;
  box-shadow: 0 2px 10px rgb(0 0 0 / 25%);
  color: #fff;
  display: flex;
  height: 48px;
  justify-content: center;
  text-decoration: none;
  width: 48px;
}

.veiling__editfab-link:hover,
.veiling__editfab-link:focus-visible {
  background-color: #39aa34;
  color: #fff;
}

/* De stickybalk met de biedknop staat onderaan op smalle schermen. Het knopje schuift
   daar dan bovenop in plaats van eronder te verdwijnen. */
@media (max-width: 991px) {
  .veiling__editfab {
    bottom: 5.5rem;
  }
}

/* Het minimumbedrag: groen zodra het behaald is, neutraal zolang het dat niet is.
   Bewust niet rood of oranje — er is niets mis, het lot is alleen nog niet verkoopbaar. */
.veiling__reserve-met,
.veiling__reserve-short {
  border-radius: 6px;
  font-size: 0.95rem;
  margin-bottom: 0.75rem;
  padding: 0.6rem 0.75rem;
}

.veiling__reserve-met {
  align-items: start;
  background-color: rgba(57, 170, 52, 0.1);
  color: #2f7d2c;
  display: flex;
  gap: 0.5rem;
}

/* Een vinkje vóór de tekst, zodat "behaald" ook zonder kleurwaarneming te zien is. */
.veiling__reserve-icon::before {
  content: "\2713";
  font-weight: 700;
}

.veiling__reserve-short {
  background-color: #f4f4f2;
  color: #44443f;
}

.veiling__reserve-met strong,
.veiling__reserve-short strong {
  display: block;
}

.veiling__reserve-sub {
  display: block;
  font-size: 0.85rem;
  font-weight: 400;
  margin-top: 0.1rem;
  opacity: 0.85;
}

.veiling__reserve-met[hidden],
.veiling__reserve-short[hidden] {
  display: none;
}

.veiling__message,
.veiling__livenotice,
.veiling__notice {
  border-radius: 6px;
  font-size: 0.95rem;
  margin-bottom: 0.75rem;
  padding: 0.6rem 0.75rem;
}

/* Fouten worden niet alleen met kleur aangeduid: er staat een teken voor, zodat het ook
   zonder kleurwaarneming leesbaar blijft. */
.veiling__message--error {
  background-color: rgba(220, 53, 69, 0.1);
  color: #a12833;
}

.veiling__message--error::before {
  content: "⚠ ";
  font-weight: 700;
}

.veiling__message--success {
  background-color: rgba(57, 170, 52, 0.12);
  color: #2f7d2c;
}

.veiling__message--success::before {
  content: "✓ ";
  font-weight: 700;
}

.veiling__message--info,
.veiling__message--busy {
  background-color: #f6f6f6;
  color: #495057;
}

.veiling__livenotice,
.veiling__notice--muted {
  background-color: #f6f6f6;
  color: #6c757d;
}

.veiling__cta-text {
  margin-bottom: 0.5rem;
}

.veiling__cta-sub {
  color: #6c757d;
  font-size: 0.9rem;
  margin-bottom: 0;
  margin-top: 0.5rem;
}

/* Het themablad zet .button op display:block. Dat is een auteursregel en verslaat dus het
   hidden-attribuut uit de browserstijl: zonder deze regel blijft een verborgen biedknop
   gewoon staan. */
.veiling__bid[hidden],
.veiling__sticky-button[hidden] {
  display: none;
}

.veiling__bid[disabled],
.veiling__sticky-button[disabled] {
  cursor: not-allowed;
  opacity: 0.55;
}

/* Zichtbare focus, ook voor wie met het toetsenbord navigeert. */
.veiling__bid:focus-visible,
.veiling__sticky-button:focus-visible,
.veiling__retry:focus-visible,
.veiling__card-link:focus-visible {
  outline: 3px solid #39aa34;
  outline-offset: 2px;
}

.veiling__specs {
  margin-top: 1.25rem;
}

.veiling__subtitle {
  font-size: 1.15rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.veiling__extra {
  margin-top: 1.25rem;
}

/* De lijn hoort bij het blok eronder: dicht tegen de titel aan, en met de lucht erbóven
   in plaats van eronder. Zo leest het als één geheel in plaats van als drie losse
   elementen met gelijke afstanden ertussen. */
.veiling__extra .line {
  margin: 0 0 1rem;
}

.veiling__extra .veiling__subtitle {
  margin-bottom: 0.35rem;
}

/* wpautop zet elke alinea in een eigen <p>, en die brengt zijn eigen marges mee. De
   eerste daarvan stapelde op de marge onder de titel — dat was de ruimte die opviel.
   De laatste deed hetzelfde onderaan het blok. */
.veiling__pickup > :first-child {
  margin-top: 0;
}

.veiling__pickup > :last-child {
  margin-bottom: 0;
}

/* ---------------------------------------------------------------- galerij */

.veiling__gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
}

.veiling__gallery-item {
  flex: 0 0 auto;
}

.veiling__gallery-photo {
  border: 1px solid #f2f2f2;
  height: 80px;
  object-fit: cover;
  width: 80px;
}

/* ---------------------------------------------------------------- vaste balk */

.veiling__sticky {
  background-color: #fff;
  border-top: 1px solid #e9ecef;
  bottom: 0;
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);
  display: none;
  left: 0;
  /* De balk mag de inhoud niet afdekken; onderaan de pagina staat daarom ruimte. */
  padding: 0.6rem 0.9rem calc(0.6rem + env(safe-area-inset-bottom, 0px));
  position: fixed;
  right: 0;
  z-index: 1030;
}

.veiling__sticky-inner {
  align-items: center;
  display: flex;
  gap: 0.75rem;
  justify-content: space-between;
  margin: 0 auto;
  max-width: 40rem;
}

.veiling__sticky-amount {
  font-size: 1.1rem;
  font-weight: 700;
  white-space: nowrap;
}

.veiling__sticky-button {
  margin-top: 0;
  width: auto;
}

@media (max-width: 991.98px) {
  .veiling__sticky:not([hidden]) {
    display: block;
  }

  /* Ruimte onder de pagina zodat de vaste balk nooit de laatste regel bedekt. */
  body.single-veiling_lot {
    padding-bottom: 5.5rem;
  }

  .veiling__amount-value {
    font-size: 1.75rem;
  }

  /* Onder 992px staan de foto en de veilingmodule onder elkaar in plaats van naast
       elkaar. Dan grenst het kader direct aan de foto erboven en aan de specificaties
       eronder, en loopt alles in elkaar over. Extra lucht erboven én eronder maakt er
       weer een los blok van.

       Alleen hier: op een breed scherm staat de module in een eigen kolom en zou die
       marge het bovenaan juist uit lijn trekken met de foto ernaast. */
  .veiling__box {
    margin-block: 2rem;
  }
}

@media (min-width: 992px) {
  .veiling__sticky {
    display: none !important;
  }
}

/* ------------------------------------------------- aanmelden vanaf het lot */

/* De stappen die een gast doorloopt nadat hij op de biedknop drukte. Bewust smal en
   rustig: dit is een onderbreking van waar hij mee bezig was, geen bestemming. */
.veiling__auth-amount {
  background: #f7f7f5;
  border-radius: 0.4rem;
  font-size: 1.05rem;
  margin-bottom: 1rem;
  padding: 0.65rem 0.85rem;
}

.veiling__auth-amount-label {
  color: #6c757d;
  margin-right: 0.35rem;
}

.veiling__auth-known {
  color: #6c757d;
  font-size: 0.9rem;
  margin-bottom: 0.85rem;
  /* Een lang adres mag de modal op een smal scherm niet oprekken. */
  overflow-wrap: anywhere;
}

.veiling__auth-label {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.veiling__auth-input {
  border: 1px solid #ccc;
  border-radius: 0.35rem;
  display: block;
  margin-bottom: 1rem;
  /* 1rem: onder 16px zoomt iOS het veld bij het focussen automatisch in, en dan
       verspringt de hele modal. */
  font-size: 1rem;
  padding: 0.7rem 0.75rem;
  width: 100%;
}

.veiling__auth-input:focus-visible {
  border-color: #1a1a18;
  outline: 2px solid #1a1a18;
  outline-offset: 1px;
}

.veiling__auth-check {
  align-items: flex-start;
  display: flex;
  font-size: 0.9rem;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.veiling__auth-check input {
  /* Ruim genoeg om met een duim te raken. */
  height: 1.15rem;
  margin-top: 0.1rem;
  width: 1.15rem;
}

.veiling__auth-error {
  background: #fdf0ef;
  border: 1px solid #a33;
  border-radius: 0.35rem;
  color: #7a2320;
  margin-bottom: 1rem;
  padding: 0.6rem 0.8rem;
}

.veiling__auth-notice {
  background: #eef8f1;
  border: 1px solid #176b3a;
  border-radius: 0.35rem;
  color: #0f4425;
  margin-bottom: 1rem;
  padding: 0.6rem 0.8rem;
}

.veiling__auth-fielderror {
  color: #a33;
  display: block;
  font-size: 0.85rem;
  margin: -0.75rem 0 1rem;
}

.veiling__auth-sub {
  color: #6c757d;
  font-size: 0.85rem;
  margin-bottom: 0;
  margin-top: 0.85rem;
}

.veiling__auth-form {
  margin-bottom: 0;
}

/* Links in de aanmeldstappen moeten als link herkenbaar zijn. Het theme haalt de
   onderstreping weg en de modal heeft geen kleurverschil, waardoor "veilingvoorwaarden"
   en "wachtwoord vergeten" als gewone tekst lazen. */
.veiling__auth a {
  color: #1a1a18;
  text-decoration: underline;
}

.veiling__auth a:hover,
.veiling__auth a:focus-visible {
  text-decoration: none;
}