/**
 * MysteryBril — 17 · Winkelwagen en afrekenen
 * ---------------------------------------------------------------------------
 * Beide pagina's gebruiken de WooCommerce Cart- en Checkout-blokken. Die
 * bouwen hun HTML met JavaScript op, dus we stylen hier de klassen die
 * WooCommerce daarbij gebruikt (wc-block-…).
 *
 * De velden zelf blijven ongemoeid: adres, verzending en betaling zijn nodig
 * om te kunnen bestellen, ook al staan ze niet in de ontwerpschets.
 * ---------------------------------------------------------------------------
 */

/* NB: WooCommerce laadt de CSS van deze blokken ná het thema. Daarom staat er
   op de layout- en kaartregels hieronder !important. */

/* --- Breedte gelijk aan de rest van de site --- */
.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout {
  max-width: var(--theme-block-max-width, 1200px) !important;
  margin-inline: auto !important;
}

/* --- Twee kolommen --- */
.woocommerce-cart .wc-block-components-sidebar-layout,
.woocommerce-checkout .wc-block-components-sidebar-layout {
  display: flex !important;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 40px !important;
}
.wc-block-cart.is-large .wc-block-cart__main,
.wc-block-checkout.is-large .wc-block-checkout__main {
  flex: 1 1 55% !important;
  width: auto !important;
  padding: 0 !important;
}
.wc-block-cart.is-large .wc-block-cart__sidebar,
.wc-block-checkout.is-large .wc-block-checkout__sidebar {
  flex: 1 1 340px !important;
  width: auto !important;
  max-width: 420px !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* --- Kaarten: zijbalk en panelen --- */
.wc-block-cart__sidebar,
.wc-block-checkout__sidebar {
  padding: 26px !important;
  border: 1px solid var(--mb-line-soft) !important;
  background: var(--mb-card) !important;
}
/* De knopcontainer in de zijbalk krijgt geen eigen vlak. */
.wc-block-cart__submit,
.wc-block-cart__submit-container {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

/* --- Koppen boven een blok --- */
.wc-block-components-title,
.wc-block-components-checkout-step__title,
.wc-block-cart-items__header {
  font-family: var(--mb-font-body) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--mb-white) !important;
}
.wc-block-components-checkout-step__description {
  font-family: var(--mb-font-body);
  font-size: 13px;
  color: #bbbbbb;
}
.wc-block-components-checkout-step__heading {
  margin-top: 0;
}

/* --- Regels in de winkelwagen --- */
.wc-block-cart-items__row,
.wc-block-cart-items__header {
  border-bottom: 1px solid var(--mb-line-soft) !important;
}
.wc-block-components-product-name {
  font-family: var(--mb-font-body) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  color: var(--mb-white) !important;
}
.wc-block-components-product-name:hover {
  color: var(--mb-orange) !important;
}
.wc-block-components-product-metadata,
.wc-block-components-product-metadata__description {
  font-family: var(--mb-font-body);
  font-size: 12px;
  line-height: 1.5;
  color: #bbbbbb;
}
.wc-block-components-product-price__value,
.wc-block-formatted-money-amount,
.wc-block-components-formatted-money-amount {
  font-family: var(--mb-font-body);
  color: var(--mb-white);
}

/* --- Aantal-teller --- */
.wc-block-components-quantity-selector {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  border: 1px solid var(--mb-line) !important;
  border-radius: 0 !important;
  background: var(--mb-black) !important;
}
.wc-block-cart-item__quantity > * {
  flex: 0 0 auto;
}
.wc-block-components-quantity-selector::after {
  display: none !important;
}
.wc-block-components-quantity-selector__input,
.wc-block-components-quantity-selector__button {
  background: transparent !important;
  color: var(--mb-white) !important;
  font-family: var(--mb-font-body) !important;
  font-weight: 700;
  box-shadow: none !important;
}
.wc-block-components-quantity-selector__button:hover {
  background: var(--mb-orange) !important;
  color: var(--mb-white) !important;
}

/* Aantal en verwijderen naast elkaar, met ruimte ertussen.
   WooCommerce plaatst de verwijderlink standaard absoluut; hier zetten we hem
   terug in de flow zodat hij niet over de plusknop valt. */
.wc-block-cart-item__quantity {
  display: flex !important;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.wc-block-cart-item__remove-link {
  position: static !important;
  margin: 0 !important;
}

/* --- Verwijderen --- */
.wc-block-cart-item__remove-link {
  font-family: var(--mb-font-body) !important;
  font-size: 12px !important;
  color: #999999 !important;
  text-decoration: none !important;
}
.wc-block-cart-item__remove-link:hover {
  color: var(--mb-orange) !important;
}

/* --- Totalen --- */
.wc-block-components-totals-wrapper {
  border-top: 1px solid var(--mb-line-soft) !important;
}
.wc-block-components-totals-item__label,
.wc-block-components-totals-item__value {
  font-family: var(--mb-font-body);
  font-size: 13.5px;
  color: var(--mb-white);
}
.wc-block-components-totals-footer-item {
  font-size: 16px;
}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
  font-weight: 700;
  color: var(--mb-white);
}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
  font-size: 18px;
  font-weight: 800;
  color: var(--mb-orange) !important;
}
.wc-block-components-totals-footer-item-tax {
  font-size: 11px;
  color: #999999;
}

/* --- Invoervelden --- */
.wc-block-components-text-input input,
.wc-block-components-textarea,
.wc-block-components-select__container,
.wc-block-components-combobox-control input {
  border: 1px solid var(--mb-line) !important;
  border-radius: 0 !important;
  background: var(--mb-black) !important;
  color: var(--mb-white) !important;
  font-family: var(--mb-font-body) !important;
  font-size: 13.5px !important;
}
.wc-block-components-text-input input:focus,
.wc-block-components-textarea:focus,
.wc-block-components-combobox-control input:focus {
  outline: none !important;
  border-color: var(--mb-orange) !important;
  box-shadow: none !important;
}
.wc-block-components-text-input label,
.wc-block-components-combobox-control label {
  font-family: var(--mb-font-body) !important;
  color: #aaaaaa !important;
}
.wc-block-components-text-input.is-active label {
  color: var(--mb-orange) !important;
}

/* --- Kortingscode --- */
.wc-block-components-totals-coupon .wc-block-components-panel__button,
.wc-block-components-panel__button {
  font-family: var(--mb-font-body) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em;
  color: var(--mb-white) !important;
}
.wc-block-components-panel__button-icon {
  fill: var(--mb-orange);
}

/* --- Knoppen --- */
.wc-block-components-button:not(.is-link) {
  padding: 15px 30px !important;
  border: 1px solid var(--mb-orange) !important;
  border-radius: 0 !important;
  background: var(--mb-orange) !important;
  color: var(--mb-white) !important;
  font-family: var(--mb-font-body) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  box-shadow: none !important;
  transition: all 0.2s ease;
}
.wc-block-components-button:not(.is-link):hover {
  background: var(--mb-orange-bright) !important;
  border-color: var(--mb-orange-bright) !important;
  color: var(--mb-white) !important;
}
.wc-block-components-button__text {
  color: inherit !important;
}
/* Secundaire knop, bv. "Toepassen" bij de kortingscode */
.wc-block-components-totals-coupon__button {
  background: transparent !important;
  border-color: var(--mb-white) !important;
  color: var(--mb-white) !important;
  padding: 12px 18px !important;
  letter-spacing: 0.06em !important;
}
.wc-block-components-totals-coupon__button:hover {
  background: var(--mb-white) !important;
  border-color: var(--mb-white) !important;
  color: var(--mb-black) !important;
}

/* --- Betaalmethodes en verzendopties --- */
.wc-block-components-radio-control__option,
.wc-block-checkout__shipping-option {
  border: 1px solid var(--mb-line-soft) !important;
  background: transparent !important;
}
/* Gekozen optie in de huisstijl; standaard tekent WooCommerce hier blauw. */
.wc-block-components-radio-control__option--checked-option-highlighted,
.wc-block-components-radio-control-accordion-option--checked-option-highlighted {
  border-color: var(--mb-orange) !important;
  box-shadow: inset 0 0 0 1px var(--mb-orange) !important;
}
.woocommerce-cart input[type="checkbox"],
.woocommerce-cart input[type="radio"],
.woocommerce-checkout input[type="checkbox"],
.woocommerce-checkout input[type="radio"] {
  accent-color: var(--mb-orange);
}
.wc-block-components-radio-control__label,
.wc-block-components-radio-control__description {
  font-family: var(--mb-font-body);
  color: var(--mb-white);
}
.wc-block-components-radio-control__input:checked::before {
  background: var(--mb-orange) !important;
}

/* --- Meldingen --- */
.wc-block-components-notice-banner {
  border-radius: 0 !important;
  background: var(--mb-card) !important;
  color: var(--mb-white) !important;
}

/* --- Adreskaart op de afrekenpagina --- */
.wc-block-components-address-card {
  border: 1px solid var(--mb-line-soft) !important;
  color: var(--mb-white);
}
.wc-block-components-address-card__edit {
  color: var(--mb-orange) !important;
}

/* --- Voorwaarden en overige tekst --- */
.wc-block-checkout__terms,
.wc-block-checkout__guest-checkout-notice,
.wc-block-components-checkbox__label {
  font-family: var(--mb-font-body);
  font-size: 12.5px;
  color: #bbbbbb;
}
.wc-block-checkout__terms a,
.wc-block-components-checkbox__label a {
  color: var(--mb-orange) !important;
}

/* --- Mobiel --- */
@media (max-width: 880px) {
  .woocommerce-cart .wc-block-components-sidebar-layout,
  .woocommerce-checkout .wc-block-components-sidebar-layout {
    gap: 22px;
  }
  .wc-block-cart__sidebar .wc-block-components-sidebar,
  .wc-block-checkout__sidebar .wc-block-components-sidebar,
  .wc-block-checkout__main > .wc-block-components-form > .wc-block-components-checkout-step,
  .wc-block-cart__payment-options {
    padding: 20px;
  }
}

/* ---------------------------------------------------------------------------
 * Onderstaande regels stonden eerder in Weergave → Aanpassen → Extra CSS.
 * Ze zijn hierheen verplaatst zodat alle CSS in het child theme staat en met
 * het thema meeverhuist naar de live site.
 * ------------------------------------------------------------------------- */

/* --- Verwijderknop in de winkelwagen: alleen het oranje prullenbak-icoon --- */
.wc-block-cart-item__remove-link {
  border: none !important;
}
.wc-block-cart-item__remove-link svg {
  color: var(--mb-orange);
  margin-top: -15px;
  height: 30px;
  width: 30px;
}
.wc-block-cart-item__remove-link:hover {
  background: transparent !important;
  background-color: transparent !important;
}

/* --- Afrekenen: randen om alle invoervelden --- */
.wc-block-checkout .wc-block-components-text-input input,
.wc-block-checkout .wc-block-components-text-input input[type="text"],
.wc-block-checkout .wc-block-components-text-input input[type="email"],
.wc-block-checkout .wc-block-components-text-input input[type="tel"],
.wc-block-checkout .wc-block-components-text-input input[type="number"] {
  border: solid 1px #dddddd70 !important;
  border-radius: 4px !important;
}

.wc-block-checkout .wc-blocks-components-select__select,
.wc-block-checkout .wc-blocks-components-select__container {
  border: solid 1px #dddddd70 !important;
  border-radius: 4px !important;
}

.wc-block-checkout .wc-block-components-text-input.is-active input,
.wc-block-checkout .wc-block-components-text-input input:focus,
.wc-block-checkout .wc-blocks-components-select__select:focus {
  border: solid 1px #cc4e00a1 !important;
  box-shadow: none !important;
  outline: none !important;
}

.wc-block-checkout .wc-block-components-text-input.is-active label,
.wc-block-checkout .wc-block-components-text-input label {
  color: var(--mb-orange) !important;
}

#shipping-country {
  border: none !important;
}