/*
 * Account, inloggen, bedankt, zoeken en 404 — Wietzadenshop
 * ----------------------------------------
 * Bron: docs/design/wietzadenshop-account.html, -inloggen.html, -bedankt.html,
 * -zoekresultaten.html en -404.html
 */

.zoek {
  background-color: var(--color-bg-lite);
  color:            var(--color-text-lite);
}

/* ----------------------------------------
 * ACCOUNT — layout
 * ---------------------------------------- */

.dash-wrap {
  padding: 26px 0 90px;
}

.dash-grid {
  display:               grid;
  grid-template-columns: 250px 1fr;
  gap:                   36px;
  align-items:           start;
}

.dash-nav {
  position:         sticky;
  top:              100px;
  padding:          14px;
  background-color: var(--color-card-lite);
  border:           1px solid var(--color-line-lite);
  border-radius:    var(--radius-panel);
}

.dash-nav__item {
  display:         flex;
  align-items:     center;
  gap:             var(--space-3);
  padding:         13px 14px;
  border-radius:   9px;
  font-family:     var(--font-heading);
  font-weight:     var(--font-semibold);
  font-size:       var(--text-sm);
  color:           var(--color-text-muted-lite);
  text-decoration: none;
  transition:      background-color var(--transition-fast),
                   color var(--transition-fast);
}

.dash-nav__item svg {
  flex-shrink: 0;
  color:       var(--color-text-faint-lite);
}

.dash-nav__item:hover {
  background-color: var(--color-surface-lite);
  color:            var(--color-text-lite);
}

.dash-nav__item.is-on {
  background-color: var(--color-text-lite);
  color:            var(--color-bg-lite);
}

.dash-nav__item.is-on svg {
  color: var(--color-primary-hover);
}

.dash-nav__item--uit {
  margin-top:    6px;
  border-top:    1px solid var(--color-line-lite);
  border-radius: 0;
  color:         var(--color-text-faint-lite);
}

/* ----------------------------------------
 * ACCOUNT — kerncijfers
 * ---------------------------------------- */

.dash-cards {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   var(--space-4);
  margin-bottom:         28px;
}

.dcard {
  padding:          22px;
  background-color: var(--color-card-lite);
  border:           1px solid var(--color-line-lite);
  border-radius:    12px;
}

.dcard__getal {
  font-family:    var(--font-heading);
  font-weight:    var(--font-black);
  font-size:      30px;
  letter-spacing: var(--tracking-tight);
  color:          var(--color-text-lite);
}

.dcard__label {
  margin-top:     2px;
  font-family:    var(--font-heading);
  font-weight:    var(--font-semibold);
  font-size:      13px;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color:          var(--color-text-muted-lite);
}

/* ----------------------------------------
 * ACCOUNT — bestellingen
 * ---------------------------------------- */

.orders {
  overflow:         hidden;
  background-color: var(--color-card-lite);
  border:           1px solid var(--color-line-lite);
  border-radius:    var(--radius-panel);
}

.orders__title {
  padding:        22px 24px;
  border-bottom:  1px solid var(--color-line-lite);
  font-family:    var(--font-heading);
  font-weight:    var(--font-extrabold);
  font-size:      18px;
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
}

.orders--leeg {
  display:        flex;
  flex-direction: column;
  align-items:    flex-start;
  gap:            var(--space-5);
  padding:        32px;
  color:          var(--color-text-muted-lite);
}

.otable {
  width:           100%;
  border-collapse: collapse;
}

.otable th {
  padding:        14px 24px;
  border-bottom:  1px solid var(--color-line-lite);
  text-align:     left;
  font-family:    var(--font-heading);
  font-weight:    var(--font-bold);
  font-size:      11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color:          var(--color-text-muted-lite);
}

.otable td {
  padding:       16px 24px;
  border-bottom: 1px solid var(--color-line-lite);
  font-size:     14.5px;
  color:         var(--color-text-lite);
}

.otable tr:last-child td {
  border-bottom: none;
}

.otable__nr {
  font-family: var(--font-heading);
  font-weight: var(--font-bold);
}

.otable__view {
  font-family:     var(--font-heading);
  font-weight:     var(--font-bold);
  font-size:       var(--text-xs);
  text-transform:  uppercase;
  color:           var(--color-primary-dark);
  text-decoration: none;
}

/* Statuslabels: groen als het klaar is, blauw onderweg, amber in behandeling. */
.status {
  display:          inline-block;
  padding:          5px 10px;
  border-radius:    var(--radius-full);
  background-color: var(--color-surface-lite);
  color:            var(--color-text-muted-lite);
  font-family:      var(--font-heading);
  font-weight:      var(--font-bold);
  font-size:        var(--text-2xs);
  letter-spacing:   var(--tracking-caps);
  text-transform:   uppercase;
}

.status--completed {
  background-color: var(--color-primary-soft);
  color:            var(--color-primary-dark);
}

.status--processing,
.status--on-hold {
  background-color: #f6efdc;
  color:            #8a6d1f;
}

.status--pending {
  background-color: #e7eef7;
  color:            #2f5b8f;
}

.status--cancelled,
.status--failed,
.status--refunded {
  background-color: #f7e9e7;
  color:            #a4342a;
}

/* ----------------------------------------
 * INLOGGEN EN REGISTREREN
 * ---------------------------------------- */

.auth-wrap {
  padding: 26px 0 90px;
}

.auth-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   28px;
  align-items:           start;
}

.auth-grid--enkel {
  max-width:             560px;
  grid-template-columns: 1fr;
}

.auth-card {
  padding:          34px;
  background-color: var(--color-card-lite);
  border:           1px solid var(--color-line-lite);
  border-radius:    var(--radius-band);
}

/*
 * WooCommerce zet zelf een rand en padding om de in- en registratieformulieren.
 * Binnen onze kaart geeft dat een kader in een kader.
 */
.woocommerce .auth-card form.login,
.woocommerce .auth-card form.register {
  padding:       0;
  margin:        0;
  border:        none;
  border-radius: 0;
}

.auth-card__title {
  margin-bottom:  var(--space-3);
  font-family:    var(--font-heading);
  font-weight:    var(--font-extrabold);
  font-size:      22px;
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
}

.auth-card__lead {
  margin-bottom: var(--space-6);
  font-size:     15px;
  color:         var(--color-text-muted-lite);
}

.auth-card .form-row {
  display:        flex;
  flex-direction: column;
  gap:            6px;
  margin:         0 0 var(--space-4);
}

.auth-card label {
  font-family:    var(--font-heading);
  font-weight:    var(--font-semibold);
  font-size:      11px;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color:          var(--color-text-muted-lite);
}

.auth-card input[type="text"],
.auth-card input[type="email"],
.auth-card input[type="password"] {
  height:           50px;
  padding:          0 14px;
  background-color: var(--color-bg-lite);
  border:           1.5px solid var(--color-line-strong-lite);
  border-radius:    var(--radius-input);
  font-family:      var(--font-body);
  font-size:        15px;
  color:            var(--color-text-lite);
  transition:       border-color var(--transition-fast);
}

.auth-card input:focus {
  outline:      none;
  border-color: var(--color-primary);
}

.auth-card__rij {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  flex-wrap:       wrap;
  gap:             var(--space-3);
  margin-bottom:   var(--space-5);
}

.auth-card__onthoud {
  display:        flex;
  align-items:    center;
  gap:            var(--space-2);
  font-family:    var(--font-body);
  font-size:      var(--text-sm);
  text-transform: none;
  letter-spacing: 0;
  color:          var(--color-text-lite);
}

.auth-card__vergeten {
  font-size: var(--text-sm);
  color:     var(--color-primary-dark);
}

.auth-card__knop {
  width: 100%;
}

.auth-card__note {
  margin-bottom: var(--space-5);
  font-size:     13px;
  color:         var(--color-text-faint-lite);
}

.auth-voordelen {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-3);
  margin-top:     var(--space-6);
}

.auth-voordelen li {
  display:     flex;
  align-items: center;
  gap:         var(--space-3);
  font-size:   var(--text-sm);
  color:       var(--color-text-muted-lite);
}

.auth-voordelen svg {
  flex-shrink: 0;
  color:       var(--color-primary-dark);
}

/* ----------------------------------------
 * BEDANKT
 * ---------------------------------------- */

.thanks {
  padding: 50px 0 90px;
}

.thanks-top {
  max-width:  600px;
  margin:     0 auto 40px;
  text-align: center;
}

.thanks-top__check {
  display:          grid;
  place-items:      center;
  width:            72px;
  height:           72px;
  margin:           0 auto 22px;
  background-color: var(--color-primary-soft);
  color:            var(--color-primary-dark);
  border-radius:    var(--radius-full);
}

.thanks-top__title {
  margin-bottom:  var(--space-3);
  font-family:    var(--font-heading);
  font-weight:    var(--font-black);
  font-size:      clamp(30px, 4.4vw, 50px);
  line-height:    var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
}

.thanks-top p {
  font-size: 16.5px;
  color:     var(--color-text-muted-lite);
}

.thanks-top__nr {
  font-family: var(--font-heading);
  font-weight: var(--font-bold);
  color:       var(--color-text-lite);
}

.thanks-top__acties {
  margin-top: var(--space-6);
}

.thanks-grid {
  display:               grid;
  grid-template-columns: 1.3fr 1fr;
  gap:                   28px;
  align-items:           start;
  max-width:             940px;
}

.tbox {
  padding:          26px;
  background-color: var(--color-card-lite);
  border:           1px solid var(--color-line-lite);
  border-radius:    var(--radius-panel);
}

.tbox__title {
  margin-bottom:  18px;
  font-family:    var(--font-heading);
  font-weight:    var(--font-extrabold);
  font-size:      var(--text-base);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}

.tinfo__row {
  display:       flex;
  gap:           var(--space-3);
  padding:       12px 0;
  border-bottom: 1px solid var(--color-line-lite);
  font-size:     var(--text-sm);
  color:         var(--color-text-muted-lite);
}

.tinfo__row:last-child {
  border-bottom: none;
}

.tinfo__row svg {
  flex-shrink: 0;
  margin-top:  2px;
  color:       var(--color-primary-dark);
}

.tinfo__row b {
  display:     block;
  font-family: var(--font-heading);
  font-weight: var(--font-semibold);
  color:       var(--color-text-lite);
}

.thanks-cta {
  margin-top: 40px;
  text-align: center;
}

/* ----------------------------------------
 * ZOEKRESULTATEN
 * ---------------------------------------- */

.search-hero {
  padding: 34px 0 10px;
}

.search-bar {
  display:   flex;
  gap:       var(--space-3);
  max-width: 640px;
  margin-bottom: var(--space-8);
}

.search-bar input[type="search"] {
  flex:             1;
  min-width:        0;
  height:           54px;
  padding:          0 16px;
  background-color: var(--color-card-lite);
  border:           1.5px solid var(--color-line-strong-lite);
  border-radius:    var(--radius-input);
  font-family:      var(--font-body);
  font-size:        15px;
  color:            var(--color-text-lite);
  transition:       border-color var(--transition-fast);
}

.search-bar input[type="search"]:focus {
  outline:      none;
  border-color: var(--color-primary);
}

.search-hero__title {
  margin-bottom:  var(--space-3);
  font-family:    var(--font-heading);
  font-weight:    var(--font-black);
  font-size:      clamp(30px, 4.4vw, 52px);
  line-height:    var(--leading-none);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
}

.search-hero__title span {
  color: var(--color-primary-dark);
}

.search-hero__aantal {
  font-size: var(--text-sm);
  color:     var(--color-text-muted-lite);
}

.search-wrap {
  padding: 34px 0 90px;
}

.zoek .product-card__add {
  background-color: var(--color-primary-soft);
  color:            var(--color-primary-dark);
}

.zoek .product-card__add:hover {
  background-color: var(--color-primary);
  color:            var(--color-on-primary);
}

.zoek-leeg {
  display:        flex;
  flex-direction: column;
  align-items:    flex-start;
  gap:            var(--space-6);
  padding:        20px 0 60px;
  font-size:      var(--text-md);
  color:          var(--color-text-muted-lite);
}

/* Paginering van de zoekresultaten: zelfde vorm als in de shop. */
.zoek .page-numbers {
  display:         flex;
  justify-content: center;
  flex-wrap:       wrap;
  gap:             var(--space-2);
  margin-top:      50px;
  list-style:      none;
}

.zoek .page-numbers li .page-numbers {
  display:         grid;
  place-items:     center;
  min-width:       44px;
  height:          44px;
  padding:         0 10px;
  border:          1.5px solid var(--color-line-strong-lite);
  border-radius:   var(--radius-input);
  font-family:     var(--font-heading);
  font-weight:     var(--font-bold);
  font-size:       var(--text-sm);
  color:           var(--color-text-lite);
  text-decoration: none;
}

.zoek .page-numbers li .page-numbers.current {
  background-color: var(--color-text-lite);
  border-color:     var(--color-text-lite);
  color:            var(--color-bg-lite);
}

/* ----------------------------------------
 * 404
 * ---------------------------------------- */

.nf {
  display:         flex;
  align-items:     center;
  justify-content: center;
  min-height:      64vh;
  padding:         80px 0;
  text-align:      center;
  background-color: var(--color-bg-lite);
  color:            var(--color-text-lite);
}

/*
 * Als flex-kind gaat de container anders op zijn inhoud staan, waardoor de
 * gutter buiten het scherm valt en de pagina 10px te breed wordt.
 */
.nf > .container {
  width: 100%;
}

.nf__cijfer {
  font-family:    var(--font-heading);
  font-weight:    var(--font-black);
  font-size:      clamp(90px, 18vw, 190px);
  line-height:    0.9;
  letter-spacing: -0.04em;
  color:          var(--color-text-lite);
}

.nf__cijfer span {
  color: var(--color-primary);
}

.nf__title {
  margin:         10px 0 var(--space-3);
  font-family:    var(--font-heading);
  font-weight:    var(--font-extrabold);
  font-size:      clamp(22px, 3vw, 32px);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
}

.nf__lead {
  max-width: 44ch;
  margin:    0 auto 26px;
  font-size: var(--text-base);
  color:     var(--color-text-muted-lite);
}

.nf__zoek {
  display:   flex;
  gap:       var(--space-3);
  max-width: 460px;
  margin:    0 auto var(--space-6);
}

.nf__zoek input[type="search"] {
  flex:             1;
  min-width:        0;
  height:           52px;
  padding:          0 16px;
  background-color: var(--color-card-lite);
  border:           1.5px solid var(--color-line-strong-lite);
  border-radius:    var(--radius-input);
  font-family:      var(--font-body);
  font-size:        15px;
  color:            var(--color-text-lite);
}

.nf__zoek input[type="search"]:focus {
  outline:      none;
  border-color: var(--color-primary);
}

.nf__links {
  display:         flex;
  justify-content: center;
  flex-wrap:       wrap;
  gap:             var(--space-3);
}

/* ----------------------------------------
 * RESPONSIVE
 * ---------------------------------------- */

@media (max-width: 960px) {

  .dash-grid {
    grid-template-columns: 1fr;
  }

  .dash-nav {
    position:  static;
    display:   flex;
    flex-wrap: wrap;
    gap:       4px;
  }

  .dash-nav__item--uit {
    border-top: none;
    border-radius: 9px;
  }

  .dash-cards {
    grid-template-columns: 1fr;
  }

  .auth-grid,
  .thanks-grid {
    grid-template-columns: 1fr;
  }

  /* De tabel wordt een lijst met labels ervoor. */
  .otable thead {
    display: none;
  }

  .otable td {
    display:         flex;
    justify-content: space-between;
    gap:             var(--space-4);
    padding:         12px 20px;
  }

  .otable td::before {
    content:        attr(data-label);
    font-family:    var(--font-heading);
    font-weight:    var(--font-bold);
    font-size:      11px;
    text-transform: uppercase;
    color:          var(--color-text-muted-lite);
  }
}

@media (max-width: 560px) {

  .auth-card,
  .tbox {
    padding: 24px;
  }
}