/* Aanvullende stijlen voor de .NET-versie (winkelwagen + beheer) */

.sitebar__cart {
  float: right;
  font-weight: 600;
}

/* Winkelwagen */
/* Laat de tabel op smalle schermen in zichzelf scrollen in plaats van de pagina te verbreden */
.cart-tabel-wrap {
  overflow-x: auto;
}

.cart-tabel {
  min-width: 480px;
  width: 100%;
  background: #fff;
  border-radius: 4px;
}

.cart-tabel th,
.cart-tabel td {
  padding: 12px 15px;
  border-bottom: 1px solid #eee;
  vertical-align: middle;
}

.cart-tabel img {
  max-height: 70px;
}

.cart-aantal {
  width: 70px;
  text-align: center;
}

.cart-totaalregel td {
  font-weight: 700;
  border-bottom: none;
}

.cart-optie {
  margin-top: 6px;
}

.cart-optie label {
  font-size: 0.9rem;
  color: #555;
  margin: 0;
  cursor: pointer;
}

.cart-optie input {
  margin-right: 6px;
}

.cart-oudeprijs {
  color: #999;
  text-decoration: line-through;
  font-size: 0.9rem;
}

.cart-gratis {
  color: #97be36;
  font-weight: 600;
  font-size: 0.9rem;
  margin-top: 4px;
}

/* Melding van de 'elk vierde boek gratis'-actie onder de winkelwagen */
.cart-actiemelding {
  margin-top: 15px;
  padding: 12px 15px;
  border: 1px solid #97be36;
  border-radius: 4px;
  background: #f4f9e7;
  color: #5f7d16;
  font-weight: 600;
}

.cart-actievoorwaarde {
  margin-top: 10px;
  color: #888;
  font-size: 0.85rem;
}

/* Tegels om de bestelling mee aan te vullen; boeken die al in de wagen zitten zijn gemarkeerd */
.boektegel-kolom {
  display: flex;
  margin-bottom: 25px;
}

.boektegel {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 20px 15px;
  background: #f7f7f7;
  border: 2px solid #ececec;
  border-radius: 10px;
  text-align: center;
}

.boektegel--in-wagen {
  background: #eaf6dc;
  border-color: #97be36;
}

/* Vult de resterende hoogte, zodat titel en knop van alle tegels op één lijn staan */
.boektegel__beeld {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}

.boektegel__beeld img {
  max-height: 200px;
}

.boektegel__titel {
  color: #5e7bb8;
  font-weight: 600;
}

.boektegel__prijs {
  margin: 4px 0 12px;
  color: #777;
  font-size: 0.9rem;
}

.boektegel__knop[disabled] {
  opacity: 0.7;
}

.boektegel__status {
  padding: 8px 18px;
  color: #5f7d16;
  font-weight: 600;
}

.boektegel__melding {
  margin: 6px 0 0;
  color: #5f7d16;
  font-size: 0.85rem;
  font-weight: 600;
  animation: boektegel-melding 0.4s ease;
}

@keyframes boektegel-melding {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}

/* Photofacts Academy erbij bestellen; zelfde opzet als de bundelaanbieding op de oude bestelpagina */
.pfa-aanbod {
  margin-top: 25px;
}

.pfa-aanbod__vlak {
  display: flow-root; /* houdt de gefloate afbeeldingen binnen het vlak */
  margin: 0;
  padding: 25px 50px;
  background-color: #e5f7da;
  border: 2px solid #e5f7da;
  border-radius: 25px;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.pfa-aanbod__vlak:hover {
  border-color: #97be36;
}

.pfa-aanbod__vlak--aan {
  border-color: #97be36;
  box-shadow: 0 0 0 0.2rem rgba(151, 190, 54, 0.25);
}

.pfa-aanbod__beeld {
  float: right;
  margin: 0 0 15px 25px;
  text-align: center;
}

.pfa-aanbod__beeld img {
  display: block;
  max-width: 130px;
  max-height: 120px;
  margin: 0 auto;
}

.pfa-aanbod__plus {
  display: block;
  color: #97be36;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.4;
}

.pfa-aanbod__kop {
  display: flex;
  align-items: baseline;
  line-height: 2rem;
}

/* Vaste breedte zodat een titel over twee regels netjes blijft inspringen */
.pfa-aanbod__kop input {
  flex: none;
  width: 1.1rem;
  height: 1.1rem;
}

.pfa-aanbod__prijs {
  margin: 5px 0 0 30px;
}

.pfa-aanbod__slot {
  margin-left: 35px;
  margin-bottom: 0;
}

@media screen and (max-width: 767px) {
  .pfa-aanbod__vlak {
    padding: 25px;
    border-radius: 20px;
  }

  .pfa-aanbod__beeld {
    margin-left: 15px;
  }

  .pfa-aanbod__beeld img {
    max-width: 80px;
    max-height: 80px;
  }

  .pfa-aanbod__prijs,
  .pfa-aanbod__slot {
    margin-left: 0;
  }

  .pfa-aanbod .sectionTwoP2__list {
    padding-left: 25px;
  }
}

@media screen and (max-width: 475px) {
  .pfa-aanbod__vlak {
    padding: 15px;
    border-radius: 15px;
  }
}

/* Tweede, minder opvallende bestelknop naast 'bestel nu': alleen het eBook */
.sectionOne__link--grijs {
  margin: 5px 0 5px 10px;
  background-color: #8c8c8c;
}

.sectionOne__link--grijs:hover {
  background-color: rgba(140, 140, 140, 0.8);
}

.knop-secundair {
  display: inline-block;
  padding: 10px 24px;
  border: 2px solid #97be36;
  border-radius: 4px;
  color: #97be36;
  font-weight: 600;
  background: transparent;
}

.knop-secundair:hover {
  background: #97be36;
  color: #fff;
  text-decoration: none;
}

.product-kaart {
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 6px;
  padding: 20px;
  margin-bottom: 20px;
}

.product-kaart--uitgelicht {
  border-color: #97be36;
  border-width: 2px;
}

.product-kaart .prijs {
  font-size: 1.4rem;
  font-weight: 700;
}

/* Adressuggesties op het afrekenformulier (wwwroot/js/adres-autocomplete.js) */
.adres-auto {
  position: relative;
}

.adres-auto__lijst {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 20;
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  max-height: 260px;
  overflow-y: auto;
}

.adres-auto__optie {
  padding: 8px 12px;
  cursor: pointer;
}

.adres-auto__optie + .adres-auto__optie {
  border-top: 1px solid #eee;
}

.adres-auto__optie:hover,
.adres-auto__optie--actief {
  background: #f0f6e0;
}

/* De beheeromgeving heeft een eigen stylesheet: wwwroot/css/beheer.css */