/* ==========================================================================
   Brach.nl App — checkout in app-stijl (Fase 2, taak 1: visueel gelijktrekken)

   Alleen geladen op de WooCommerce-checkoutpagina (is_checkout()), zie
   class-brachapp-checkout-style.php. Raakt het betaalproces zelf niet aan,
   puur stijl: kleuren, koppen en knoppen uit dezelfde design tokens als
   app-shell.css, zodat de checkout oogt als een doorlopend deel van de app
   in plaats van een sprong naar een andere pagina-stijl (thema/Divi).

   Selectors geverifieerd tegen de WooCommerce-checkout-templates
   (form-checkout.php, payment.php) i.p.v. aangenomen: #order_review,
   .woocommerce-checkout-review-order, #payment/.woocommerce-checkout-payment,
   #place_order zijn WooCommerce's eigen vaste markup, niet thema-afhankelijk.

   Zelfde tokenwaarden als app-shell.css (zie de toelichting daar over de
   rolverdeling van het palet): navy/zwart als basis, het lichte accentblauw
   als primaire actiekleur, oranje BEWUST NIET als generieke tweede
   hoofdkleur.
   ========================================================================== */

:root {
  --color-bg-secondary:    #DEF8FC;
  --color-bg-inverse:      #FFFFFF;
  --color-bg-card:         #002842;

  --color-text-on-light:   #002842;
  --color-text-primary:    #FFFFFF;
  --color-text-tertiary:   rgba(0, 40, 66, 0.6);
  --color-text-link:       #2EA3F2;
  --color-text-link-hover: #0B83B7;

  --color-border-primary:  rgba(0, 40, 66, 0.15);
  --color-border-focus:    #2EA3F2;

  --color-accent-primary:        #0B83B7;
  --color-accent-primary-hover:  #0A6E9A;

  --color-status-error: #C62828;

  --font-family-display: "Poppins", Helvetica, Arial, Lucida, sans-serif;
  --font-family-body:    "Poppins", Helvetica, Arial, Lucida, sans-serif;

  --font-size-base: 16px;
  --font-size-lg:   20px;
  --font-size-xl:   24px;

  --font-weight-medium:   500;
  --font-weight-semibold: 600;

  --space-4: 8px;
  --space-5: 12px;
  --space-6: 16px;
  --space-7: 24px;

  --border-radius-md:   10px;
  --border-radius-lg:   16px;
  --border-radius-full: 999px;

  --shadow-sm: 0 1px 2px rgba(0, 40, 66, 0.08);

  --duration-fast:  150ms;
  --easing-default: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---- Basistypografie op de checkout, zonder de thema-lay-out te breken ---- */
.woocommerce-checkout,
.woocommerce-checkout h2,
.woocommerce-checkout h3,
.woocommerce-checkout label {
  font-family: var(--font-family-body);
}

.woocommerce-checkout h2,
.woocommerce-checkout h3,
#order_review_heading {
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-on-light);
}

.woocommerce-checkout a {
  color: var(--color-text-link);
}
.woocommerce-checkout a:hover,
.woocommerce-checkout a:focus {
  color: var(--color-text-link-hover);
}

/* ---- Invoervelden: zelfde afronding en focusstijl als de app-schil ---- */
.woocommerce-checkout input.input-text,
.woocommerce-checkout select,
.woocommerce-checkout textarea {
  border-radius: var(--border-radius-md);
  border: 1px solid var(--color-border-primary);
  font-family: var(--font-family-body);
  font-size: var(--font-size-base);
}
.woocommerce-checkout input.input-text:focus,
.woocommerce-checkout select:focus,
.woocommerce-checkout textarea:focus {
  outline: none;
  border-color: var(--color-border-focus);
  box-shadow: 0 0 0 3px rgba(46, 163, 242, 0.35);
}

/* ---- Orderoverzicht-kaart: navy kaartachtergrond, zelfde als de app ---- */
#order_review.woocommerce-checkout-review-order,
.woocommerce-checkout-review-order-table {
  background: var(--color-bg-secondary);
  border-radius: var(--border-radius-lg);
  padding: var(--space-7);
}

.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td {
  color: var(--color-text-on-light);
  border-color: var(--color-border-primary);
}

.woocommerce-checkout-review-order-table .order-total .woocommerce-Price-amount {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-on-light);
}

/* ---- Betaalmethodes: kaart-stijl, consistent met de rest van de checkout ---- */
#payment.woocommerce-checkout-payment {
  background: var(--color-bg-inverse);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-sm);
}

/* ---- Winkelwagenpagina: zelfde kaart-stijl voor de regelstabel en het
   totaaloverzicht als de checkout — selectors geverifieerd tegen
   WooCommerce's eigen cart/cart.php en cart/cart-totals.php templates.
   De "Verder naar afrekenen"-knop (checkout-button.button.alt.wc-forward)
   deelt de knopstijl hieronder al automatisch (zelfde .button.alt-selector
   als #place_order). ---- */
.woocommerce-cart-form__contents {
  border-radius: var(--border-radius-lg);
  overflow: hidden;
}
.woocommerce-cart-form__contents th,
.woocommerce-cart-form__contents td {
  color: var(--color-text-on-light);
  border-color: var(--color-border-primary);
}

.cart-collaterals .cart_totals {
  background: var(--color-bg-secondary);
  border-radius: var(--border-radius-lg);
  padding: var(--space-7);
}
.cart-collaterals .cart_totals th,
.cart-collaterals .cart_totals td {
  color: var(--color-text-on-light);
  border-color: var(--color-border-primary);
}
.cart-collaterals .order-total .woocommerce-Price-amount {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-on-light);
}

/* ---- De hoofdknop (Bestelling plaatsen): dezelfde stijl als
   .brachapp-activiteit__inschrijven in app-shell.css, bewust hier
   herhaald i.p.v. gedeeld — deze stylesheet moet ook zelfstandig werken
   als de checkout ooit los van de app-schil-route blijft draaien
   (zie de terugval-optie in taak 2, "checkout binnen de app-schil houden"). ---- */
#place_order.button,
.woocommerce-checkout .button.alt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5) var(--space-7);
  border: none;
  border-radius: var(--border-radius-full);
  background: var(--color-accent-primary);
  color: var(--color-text-primary);
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-base);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--duration-fast) var(--easing-default);
}
#place_order.button:hover,
#place_order.button:focus,
.woocommerce-checkout .button.alt:hover,
.woocommerce-checkout .button.alt:focus {
  background: var(--color-accent-primary-hover);
  color: var(--color-text-primary);
}

/* ---- Foutmeldingen: status-rood, consistent met de statuskleuren-conventie ---- */
.woocommerce-checkout .woocommerce-error,
.woocommerce-checkout .woocommerce-NoticeGroup-checkout .woocommerce-error {
  border-radius: var(--border-radius-md);
  border-left: 4px solid var(--color-status-error);
}