/* =============================================================================
   17-checkout.css — Pénztár (WooCommerce checkout) az ICF arculaton

   ⚠️ SZÁNDÉKOSAN LAYEREN KÍVÜL, ugyanazért, amiért a 16-shop.css: a
   woocommerce.css és a woocommerce-layout.css layer nélküli, ezért ERŐSEBB a
   téma teljes layerezett készleténél. Egy `@layer components`-be írt szabály
   itt akármilyen specifikusan is alulmaradna.

   A SABLONHOZ NEM NYÚLUNK. A markup a WooCommerce-é (és a rendelés-táblánál a
   woocommerce-one-page-checkout plugin `review-order-opc.php`-jáé), így a
   plugin frissítése nem töri el a designt. Minden itt lent CSS.

   Mérve a stagingen (WC 10.9.4): a lap a `page.php` törzsében fut, a pénztár
   egy `woocommerce/classic-shortcode` blokk (`.woocommerce.wp-block-group`),
   tehát a 14-page.css a teljes 1140px-es rácsot adja neki, nem a 820px-es
   szöveghasábot.

   FŐ DÖNTÉS — a rendelés összegzője JOBB HASÁBBA kerül (1024px felett).
   A Woo alapelrendezésében a számlázási adatok a bal 48%-on futnak, a
   „További információk" a jobb 48%-on (ez ott EGYETLEN megjegyzés-mező), az
   összegző pedig teljes szélességben LEJJEBB. Élőben ez úgy nézett ki, hogy a
   lap jobb kétharmada üresen tátong, a fizetendő összeg meg egy képernyővel
   lentebb van. Griddel a form három közvetlen gyereke (`#customer_details`,
   `#order_review_heading`, `#order_review`) átrendezhető sablon-módosítás
   nélkül: balra az űrlap, jobbra az összegző + fizetés.
   ============================================================================= */

/* =============================================================================
   A LAP HASÁBJA — 1366px

   A belső oldalak tartalomhasábja 1140px (14-page.css, `--page-measure`), mert
   ott folyószöveg fut. A pénztár nem olvasnivaló: bal oldalt kéthasábos űrlap,
   jobb oldalt összegző — ezeknek szélesebb hasáb kell, különben a mezőpárok
   összeszorulnak. A változót írjuk felül, nem a szélességet: így a
   `.page-body__inner` és a benne futó `.wp-block-group` egyszerre követi.
   ============================================================================= */

.woocommerce-checkout .page-main {
  --page-measure: 85.375rem;   /* 1366px */
}

/* =============================================================================
   KUPON — a nyitó sáv és a kinyíló űrlap
   ============================================================================= */

/* A sáv alap-stílusát (fehér, lekerekített, kék ikon) a 16-shop.css adja a
   `.woocommerce-info`-nak. Itt csak a pénztárra jellemző arányok. */
.woocommerce-checkout .woocommerce-form-coupon-toggle {
  margin-block-end: var(--space-6);
}

.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info {
  padding-block: var(--space-4);
  font-size: var(--text-base);
}

.woocommerce-checkout .woocommerce-info a.showcoupon {
  color: var(--color-primary);
  font-weight: var(--fw-semibold);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.woocommerce-checkout .woocommerce-info a.showcoupon:hover {
  color: var(--color-primary-hover);
}

/* Kód + gomb egy sorban; szűk helyen egymás alá. A Woo itt is float-tal és
   47%-kal osztana. */
.woocommerce form.checkout_coupon {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;

  margin-block: 0 var(--space-6);
  padding: var(--space-6);

  border: 0;
  border-radius: var(--radius-card);
  background-color: var(--color-bg-alt);
  box-shadow: var(--shadow-card);
}

.woocommerce form.checkout_coupon .form-row {
  display: block;
  inline-size: auto;
  margin: 0;
  padding: 0;
  float: none;
}

.woocommerce form.checkout_coupon input.input-text {
  inline-size: 100%;
  padding: var(--space-3) var(--space-5);

  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background-color: var(--color-bg-alt);

  font-family: var(--font-sans);
  font-size: var(--text-base);
}

.woocommerce form.checkout_coupon .form-row-first {
  flex: 1 1 14rem;
}

.woocommerce form.checkout_coupon .form-row:has(button) {
  flex: 0 0 auto;
}

.woocommerce form.checkout_coupon .clear {
  display: none;   /* a float-os elrendezés maradéka, flexben fantom-sor lenne */
}

/* =============================================================================
   AZ ŰRLAP VÁZA — bal hasáb: adatok, jobb hasáb: összegző
   ============================================================================= */

.woocommerce form.checkout {
  margin-block: 0;
}

/* Az `.icf-checkout__summary` burkolót az inc/shop.php teszi a cím és az
   összegző köré (a Woo saját hookjaival) — enélkül a jobb hasáb két külön
   grid-elem lenne, és a bal oszlop magassága szétosztódna a két sor között:
   az összegző kártya a saját címétől fél képernyővel lejjebb csúszna. */
@media (min-width: 1024px) {

  .woocommerce form.checkout {
    display: grid;
    /* A jobb hasáb fix sávban mozog: 21rem alatt a hosszú termékcím négy sorba
       törik és a totál-sor számai összecsúsznak, 27rem fölött viszont a bal
       oldali kéthasábos mezőrács szűkülne be. */
    grid-template-columns: minmax(0, 1fr) minmax(21rem, 27rem);
    gap: var(--space-10);
    align-items: start;
  }

  /* A JS által beszúrt hibalista (érvénytelen mező, fizetési hiba) a lap
     tetején, teljes szélességben — különben a jobb hasáb aljára esne. */
  .woocommerce form.checkout > .woocommerce-NoticeGroup {
    grid-column: 1 / -1;
    margin-block-end: 0;
  }

  /* Az összegző végigkíséri a hosszú űrlapot. A `--scroll-offset` a lebegő
     fejléc alá igazít; a `max-block-size` + `overflow` azért kell, hogy egy
     többtételes kosárnál se lógjon ki a képernyőből. */
  .woocommerce form.checkout > .icf-checkout__summary {
    position: sticky;
    inset-block-start: calc(var(--scroll-offset, 0px) + var(--space-6));
  }

  /* A rendelés-forrás rejtett mezői (WC 8.5+) a form közvetlen gyerekei, tehát
     grid-elemként saját cellát kapnának. Rejtve is elküldi őket a böngésző. */
  .woocommerce form.checkout > wc-order-attribution-inputs {
    display: none;
  }
}

/* A Woo két 48%-os float-oszlopa helyett a bal hasábon egymás alatt fut a két
   blokk (számlázás, majd megjegyzés) — a jobb hasábot az összegző kapja. */
.woocommerce form.checkout #customer_details {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  inline-size: 100%;
}

.woocommerce form.checkout #customer_details .col-1,
.woocommerce form.checkout #customer_details .col-2 {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);

  inline-size: auto;
  float: none;
  margin: 0;
}

/* =============================================================================
   MEZŐCSOPORTOK — fehér kártyák
   ============================================================================= */

.woocommerce form.checkout .woocommerce-billing-fields,
.woocommerce form.checkout .woocommerce-additional-fields,
/* A szállítási blokk üresen is kirenderelődik (csak whitespace van benne),
   ezért CSAK akkor kap kártyát, ha tényleg van benne elem. */
.woocommerce form.checkout .woocommerce-shipping-fields:has(> *) {
  padding: var(--space-6);
  border-radius: var(--radius-card);
  background-color: var(--color-bg-alt);
  box-shadow: var(--shadow-card);
}

@media (min-width: 768px) {

  .woocommerce form.checkout .woocommerce-billing-fields,
  .woocommerce form.checkout .woocommerce-additional-fields,
  .woocommerce form.checkout .woocommerce-shipping-fields:has(> *) {
    padding: var(--space-8);
  }
}

.woocommerce form.checkout #customer_details h3 {
  margin-block: 0 var(--space-5);

  color: var(--color-text);
  font-family: var(--font-display);
  font-size: var(--text-h5);
  font-weight: var(--fw-bold);
  line-height: var(--lh-display);
}

/* =============================================================================
   MEZŐK

   A Woo float-os rácsát (47% + `form-row-first/last`) grid váltja ki: nem kell
   a sortörésekkel bajlódni, és a mezők alja egy vonalba kerül.
   ============================================================================= */

.woocommerce form.checkout .woocommerce-billing-fields__field-wrapper,
.woocommerce form.checkout .woocommerce-shipping-fields__field-wrapper,
.woocommerce form.checkout .woocommerce-additional-fields__field-wrapper {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
  align-items: start;
}

@media (max-width: 639px) {

  .woocommerce form.checkout .woocommerce-billing-fields__field-wrapper,
  .woocommerce form.checkout .woocommerce-shipping-fields__field-wrapper,
  .woocommerce form.checkout .woocommerce-additional-fields__field-wrapper {
    grid-template-columns: 1fr;
  }
}

.woocommerce form.checkout .form-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);

  grid-column: 1 / -1;   /* alapból teljes sor; a first/last párok szűkítik */
  inline-size: auto;
  margin: 0;
  padding: 0;
  float: none;
}

.woocommerce form.checkout .form-row-first,
.woocommerce form.checkout .form-row-last {
  grid-column: span 1;
}

.woocommerce form.checkout .form-row label {
  margin: 0;
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
}

.woocommerce form.checkout .form-row label.screen-reader-text {
  /* Az „Emelet, lépcsőház" mező címkéje rejtett — a mezőnek ne maradjon
     előtte üres sor. */
  position: absolute;
}

.woocommerce form.checkout .form-row .required {
  color: var(--color-error);
  text-decoration: none;
}

.woocommerce form.checkout .form-row .optional {
  color: var(--color-text-subtle);
  font-weight: var(--fw-regular);
}

.woocommerce form.checkout .woocommerce-input-wrapper {
  display: block;
  inline-size: 100%;
}

/* Az ICF űrlapnyelve pill (lásd 15-account.css: belépés, profilszerkesztő) —
   a szögletes Woo-mező kilógna belőle. */
.woocommerce form.checkout .form-row input.input-text,
.woocommerce form.checkout .form-row select,
.woocommerce form.checkout .form-row textarea {
  inline-size: 100%;
  padding: var(--space-3) var(--space-5);

  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background-color: var(--color-bg-alt);

  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--text-base);   /* 16px — ez alatt az iOS ránagyít a mezőre */
  line-height: var(--lh-normal);
}

.woocommerce form.checkout .form-row textarea {
  min-block-size: 6rem;
  border-radius: var(--radius-xl);   /* pill helyett lekerekített, több sorhoz */
  resize: vertical;
}

.woocommerce form.checkout .form-row :is(input, select, textarea):focus-visible {
  border-color: var(--color-border-focus);
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}

/* Validáció — a Woo a `form-row`-ra teszi az állapot-osztályt. */
.woocommerce form.checkout .form-row.woocommerce-invalid input.input-text,
.woocommerce form.checkout .form-row.woocommerce-invalid select,
.woocommerce form.checkout .form-row.woocommerce-invalid textarea {
  border-color: var(--color-error);
}

.woocommerce form.checkout .form-row.woocommerce-validated input.input-text,
.woocommerce form.checkout .form-row.woocommerce-validated select {
  border-color: var(--color-success);
}

/* --- „Céges számlázás" kapcsoló (számlázz.hu plugin, toggle mód) ---------
   A mezők elrejtését és kötelezővé tételét a plugin JS-e végzi; itt csak az
   arculat: a Woo a jelölőnégyzetet is a mezőcímke stílusával írná ki. */

.woocommerce form.checkout #wc_szamlazz_company_toggle_field label.checkbox {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  cursor: pointer;
}

.woocommerce form.checkout #wc_szamlazz_company_toggle_field input[type="checkbox"] {
  flex: none;
  inline-size: 1.125rem;
  block-size: 1.125rem;
  margin: 0;
  accent-color: var(--color-primary);
}

/* A Woo minden nem kötelező mezőhöz kiírja: „(nem kötelező)" — egy
   kapcsolónál ez értelmetlen. */
.woocommerce form.checkout #wc_szamlazz_company_toggle_field .optional {
  display: none;
}

/* --- Ország- és megyeválasztó (selectWoo / select2) ---------------------- */

.woocommerce form.checkout .select2-container .select2-selection--single {
  block-size: auto;
  padding: var(--space-3) var(--space-5);

  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background-color: var(--color-bg-alt);
}

.woocommerce form.checkout .select2-container .select2-selection--single
  .select2-selection__rendered {
  padding: 0;
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--lh-normal);
}

.woocommerce form.checkout .select2-container .select2-selection--single
  .select2-selection__arrow {
  inset-block-start: 50%;
  inset-inline-end: var(--space-4);
  block-size: auto;
  transform: translateY(-50%);
}

.woocommerce form.checkout .select2-container--focus .select2-selection--single,
.woocommerce form.checkout .select2-container--open .select2-selection--single {
  border-color: var(--color-border-focus);
}

/* A legördülő a <body> végére kerül, ezért NEM lehet a form alá kötni. */
.select2-container--default .select2-dropdown {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background-color: var(--color-bg-alt);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
}

.select2-container--default
  .select2-results__option--highlighted[aria-selected] {
  background-color: var(--color-primary);
  color: var(--color-text-invert);
}

/* =============================================================================
   ÖSSZEGZŐ — cím + kártya a jobb hasábon
   ============================================================================= */

.woocommerce form.checkout #order_review_heading {
  margin-block: var(--space-8) var(--space-4);

  color: var(--color-text);
  font-family: var(--font-display);
  font-size: var(--text-h5);
  font-weight: var(--fw-bold);
  line-height: var(--lh-display);
}

.woocommerce form.checkout #order_review {
  padding: var(--space-6);
  border-radius: var(--radius-card);
  background-color: var(--color-bg-alt);
  box-shadow: var(--shadow-card);
}

/* --- A tételtábla -------------------------------------------------------

   Két örökséget kell leszedni róla:

   1. A Woo alaptáblája külön keretet, 5px radiust és `border-collapse:
      separate`-t hoz — a kártyán belül ez dupla vonal lenne.
   2. A téma TARTALMI táblázat-stílusa (99-wp-overrides.css) a
      `.page-body__inner table` szelektorral kártyás táblát csinál: 34rem
      MINIMUM szélességgel és sötétkék fejlécsorral. Az összegző hasábja 23rem,
      tehát a tábla egyszerűen kilógott a kártyából, a fejléce meg kék sáv volt.
      Ez a tábla nem tartalmi táblázat, hanem egy összegző lista. */
.woocommerce form.checkout #order_review table.shop_table {
  min-inline-size: 0;
  margin: 0;
  border: 0;
  border-collapse: collapse;
  border-radius: 0;
  background-color: transparent;
  box-shadow: none;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
}

.woocommerce form.checkout #order_review table.shop_table thead th {
  padding: 0 0 var(--space-3);
  border: 0;
  background-color: transparent;

  color: var(--color-text-subtle);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.woocommerce form.checkout #order_review table.shop_table thead th.product-total {
  text-align: end;
}

/* A fejlécben a „mennyiség" felirat a terméknév oszlopában külön blokk — az
   összegzőben nincs hely külön oszlopnak, és az érték úgyis a sorban áll. */
.woocommerce form.checkout #order_review table.shop_table thead th .product-quantity {
  display: none;
}

.woocommerce form.checkout #order_review table.shop_table tbody tr,
.woocommerce form.checkout #order_review table.shop_table tfoot tr {
  /* a 99-wp-overrides csíkozása (minden második sor más háttér) itt zavaró */
  background-color: transparent;
}

.woocommerce form.checkout #order_review table.shop_table tbody td {
  padding: var(--space-4) 0;
  border: 0;
  border-block-start: 1px solid var(--color-border);
  vertical-align: top;
  color: var(--color-text);
  overflow-wrap: anywhere;   /* a hosszú, „|"-lal tagolt termékcímek miatt */
}

.woocommerce form.checkout #order_review table.shop_table tbody tr:first-child td {
  border-block-start: 0;
  padding-block-start: 0;
}

.woocommerce form.checkout #order_review td.product-name {
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
}

.woocommerce form.checkout #order_review td.product-total {
  white-space: nowrap;
  text-align: end;
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
}

/* A tétel törlése (× link a One Page Checkout tábláján). Alapból a
   terméknév fölött ült külön sorban — inline jelvényként a név MELLETT áll,
   halkan, hogy ne versenyezzen a fő akcióval. */
.woocommerce form.checkout #order_review td.product-name .product-remove {
  float: inline-end;
  margin-inline-start: var(--space-2);
}

.woocommerce form.checkout #order_review td.product-name a.remove {
  display: grid;
  place-items: center;

  inline-size: 1.5rem;
  block-size: 1.5rem;

  border-radius: var(--radius-full);
  background-color: transparent;
  color: var(--color-text-subtle);
  font-size: var(--text-lg);
  line-height: 1;
  text-decoration: none;
}

.woocommerce form.checkout #order_review td.product-name a.remove:hover {
  background-color: var(--color-error-soft);
  color: var(--color-error);
}

.woocommerce form.checkout #order_review td.product-name .product-quantity {
  margin-block-start: var(--space-3);
}

.woocommerce form.checkout #order_review td.product-name input.qty {
  inline-size: 4.5rem;
  padding: var(--space-1) var(--space-3);

  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background-color: var(--color-bg);

  font-family: var(--font-sans);
  font-size: var(--text-sm);
  text-align: center;
}

/* --- Összesítő sorok ----------------------------------------------------- */

.woocommerce form.checkout #order_review table.shop_table tfoot th,
.woocommerce form.checkout #order_review table.shop_table tfoot td {
  padding: var(--space-3) 0;
  border: 0;
  border-block-start: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--fw-regular);
  text-align: start;
}

.woocommerce form.checkout #order_review table.shop_table tfoot td {
  text-align: end;
  white-space: nowrap;
}

.woocommerce form.checkout #order_review table.shop_table tfoot tr.order-total th,
.woocommerce form.checkout #order_review table.shop_table tfoot tr.order-total td {
  padding-block-start: var(--space-4);
  border-block-start: 1px solid var(--color-border-strong);

  color: var(--color-primary);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--fw-bold);
}

/* A kupon-sor törlő linkje (a Woo a totálok közé teszi) */
.woocommerce form.checkout #order_review table.shop_table tfoot .cart-discount a {
  color: var(--color-text-subtle);
  font-size: var(--text-xs);
}

/* =============================================================================
   FIZETÉS
   ============================================================================= */

/* A Woo szürke (#ebe9eb) dobozt tesz a fizetési blokk alá — az összegző
   kártyán belül ez egy második, idegen doboz lenne. */
.woocommerce form.checkout #payment {
  margin-block-start: var(--space-6);
  border-radius: 0;
  background-color: transparent;
}

.woocommerce form.checkout #payment ul.payment_methods {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);

  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
}

.woocommerce form.checkout #payment ul.payment_methods li {
  margin: 0;
  padding: var(--space-3) var(--space-4);

  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background-color: var(--color-bg);

  font-size: var(--text-sm);
  line-height: var(--lh-normal);
}

.woocommerce form.checkout #payment ul.payment_methods li:has(input:checked) {
  border-color: var(--color-primary);
  background-color: var(--color-primary-soft);
}

.woocommerce form.checkout #payment ul.payment_methods li label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);

  margin: 0;
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: var(--fw-semibold);
  cursor: pointer;
}

.woocommerce form.checkout #payment ul.payment_methods li input.input-radio {
  margin: 0 var(--space-2) 0 0;
  accent-color: var(--color-primary);
  cursor: pointer;
}

.woocommerce form.checkout #payment ul.payment_methods li img {
  max-block-size: 1.5rem;
  inline-size: auto;
}

/* A fizetési mód leírása. A Woo szürke dobozt és fölé egy CSS-háromszöget
   rajzol (`::before`) — a kiválasztott mód amúgy is kiemelt hátteret kap, egy
   doboz a dobozban csak zajt vinne bele. Marad a halkabb szöveg. */
.woocommerce form.checkout #payment div.payment_box {
  margin: var(--space-2) 0 0;
  padding: 0;

  border-radius: 0;
  background-color: transparent;

  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: var(--lh-normal);
}

.woocommerce form.checkout #payment div.payment_box::before {
  content: none;
}

.woocommerce form.checkout #payment div.payment_box p:last-child {
  margin-block-end: 0;
}

/* --- Megrendelés gomb és a jogi szöveg ---------------------------------- */

.woocommerce form.checkout #payment div.form-row.place-order {
  margin: var(--space-6) 0 0;
  padding: 0;
}

.woocommerce form.checkout #payment .woocommerce-terms-and-conditions-wrapper {
  margin-block-end: var(--space-4);
}

.woocommerce form.checkout #payment .woocommerce-privacy-policy-text p {
  margin: 0;
  color: var(--color-text-subtle);
  font-size: var(--text-xs);
  line-height: var(--lh-normal);
  text-wrap: pretty;
}

.woocommerce form.checkout #payment .woocommerce-privacy-policy-link {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.woocommerce form.checkout #payment .validate-required label {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  font-size: var(--text-sm);
}

/* =============================================================================
   GOMBOK — az ICF pill formanyelve

   A Woo alapgombja szürke, szögletes. A `.btn` osztályt nem tudjuk rátenni a
   sablonok módosítása nélkül, ezért a `.button` kapja meg ugyanazokat az
   értékeket (ugyanazokból a tokenekből).
   ============================================================================= */

.woocommerce form.checkout #place_order,
.woocommerce form.checkout_coupon .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);

  padding: var(--space-3) var(--space-8);
  border: 0;
  border-radius: var(--radius-pill);

  background-color: var(--color-accent);
  color: var(--icf-deep-blue);

  font-family: var(--font-display);
  font-size: var(--text-lead);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  text-align: center;
  text-decoration: none;

  cursor: pointer;
  transition:
    background-color var(--duration-base) var(--ease),
    transform var(--duration-fast) var(--ease);
}

.woocommerce form.checkout #place_order:hover,
.woocommerce form.checkout_coupon .button:hover {
  background-color: var(--color-accent-hover);
  color: var(--icf-deep-blue);
  transform: translateY(-1px);
}

.woocommerce form.checkout #place_order:active,
.woocommerce form.checkout_coupon .button:active {
  transform: translateY(0);
}

.woocommerce form.checkout #place_order:focus-visible,
.woocommerce form.checkout_coupon .button:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 3px;
}

/* A megrendelés a lap egyetlen fő akciója: az összegző teljes szélességén. */
.woocommerce form.checkout #place_order {
  inline-size: 100%;
}

.woocommerce form.checkout_coupon .button {
  padding-inline: var(--space-6);
  font-size: var(--text-base);
}

/* =============================================================================
   BETÖLTÉS KÖZBEN (a Woo blockUI overlaye az összeg frissítésekor)
   ============================================================================= */

.woocommerce form.checkout .blockUI.blockOverlay {
  border-radius: var(--radius-card);
}

/* =============================================================================
   ÜRES KOSÁR / HIBAÜZENETEK a pénztáron
   ============================================================================= */

.woocommerce-checkout .woocommerce-error,
.woocommerce-checkout .woocommerce-message,
.woocommerce-checkout .woocommerce-info {
  font-size: var(--text-base);
}

.woocommerce-checkout .woocommerce-error {
  margin-block-end: var(--space-6);
  padding: var(--space-4) var(--space-6);
  list-style: none;
}

.woocommerce-checkout .woocommerce-error li {
  margin: 0;
}