/* Bioheal C5 i18n-lite brand polish (2026-06-10)
   Cél: a Luma fallback checkout + regisztráció/belépés narancs/kék Luma-elemeinek
   Bioheal-zöldre igazítása. SZŰK SCOPE: csak body-class alá kötött szabályok,
   és a fájl csak a checkout/customer handle-ökön töltődik (layout head css).
   Layout-refaktor NINCS, fizetési/szállítási logika érintetlen. */

:root {
    --bh-c5-green: #2D5A3D;
    --bh-c5-green-dark: #234731;
}

/* ---- elsődleges gombok (Luma kék/narancs -> brand zöld) ---- */
.checkout-index-index .action.primary,
.checkout-onepage-success .action.primary,
.customer-account-create .action.primary,
.customer-account-login .action.primary {
    background: var(--bh-c5-green);
    border-color: var(--bh-c5-green);
    border-radius: 9999px;
    padding-left: 2rem;
    padding-right: 2rem;
}
.checkout-index-index .action.primary:hover,
.checkout-index-index .action.primary:focus,
.checkout-onepage-success .action.primary:hover,
.customer-account-create .action.primary:hover,
.customer-account-login .action.primary:hover {
    background: var(--bh-c5-green-dark);
    border-color: var(--bh-c5-green-dark);
}

/* ---- checkout progress bar (Luma narancs -> zöld) ---- */
.checkout-index-index .opc-progress-bar-item._active:before,
.checkout-index-index .opc-progress-bar-item._complete:before,
.checkout-index-index .opc-progress-bar-item._active > span:before,
.checkout-index-index .opc-progress-bar-item._complete > span:before {
    background: var(--bh-c5-green);
}
.checkout-index-index .opc-progress-bar-item._active > span,
.checkout-index-index .opc-progress-bar-item._complete > span {
    color: var(--bh-c5-green-dark);
}
.checkout-index-index .opc-progress-bar-item._complete > span:after {
    border-color: #ffffff; /* pipa a zöld körben */
}

/* ---- linkek + apró akciók ---- */
.checkout-index-index .opc-wrapper a,
.checkout-index-index .opc-block-summary a,
.checkout-index-index .action-auth-toggle,
.customer-account-create .page-main a,
.customer-account-login .page-main a {
    color: var(--bh-c5-green);
}

/* ---- fejléc "Welcome" sáv halkítása ---- */
.checkout-index-index .panel.wrapper,
.checkout-onepage-success .panel.wrapper,
.customer-account-create .panel.wrapper,
.customer-account-login .panel.wrapper {
    background-color: var(--bh-c5-green-dark);
    border-bottom: 0;
}

/* ---- form-vezérlők brand-aktcent ---- */
.checkout-index-index input[type="radio"],
.checkout-index-index input[type="checkbox"],
.customer-account-create input[type="checkbox"],
.customer-account-login input[type="checkbox"] {
    accent-color: var(--bh-c5-green);
}
.checkout-index-index input[type="text"]:focus,
.checkout-index-index input[type="email"]:focus,
.checkout-index-index input[type="tel"]:focus,
.checkout-index-index select:focus,
.customer-account-create input:focus,
.customer-account-login input:focus {
    border-color: var(--bh-c5-green);
    box-shadow: 0 0 0 1px var(--bh-c5-green);
}

/* ---- durva Luma-törés finomítás: tartalom-szélesség + háttér ---- */
.checkout-index-index .page-main,
.customer-account-create .page-main,
.customer-account-login .page-main {
    max-width: 1280px;
}

/* ---- C3-chip trust-blokk ikon-méret FIX (2026-06-10) ----
   A checkout-trust-chip.js a header-be injektál egy bizalmi sávot
   (lakat = Biztonságos fizetés, boríték = Segítség), de a JS-hez tartozó
   ikon-méret CSS nem került át a 2.4.8 stagingre → a viewBox-os SVG-k a
   flex-konténer teljes magasságát felvették (1000+px „hatalmas lakat").
   Itt normál méretre fogjuk + a sávot rendezzük. Szűk scope (csak bh-trust-*). */
.bh-checkout-trust {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .35rem .6rem;
    font-size: .8rem;
    line-height: 1.2;
    color: var(--bh-c5-green-dark, #234731);
    margin: .4rem 0;
}
.bh-trust-ico {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px;
    flex: 0 0 18px;
    display: inline-block;
    vertical-align: middle;
}
.bh-trust-item,
.bh-trust-help {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
}
.bh-trust-help { color: inherit; text-decoration: none; }
.bh-trust-help:hover { text-decoration: underline; }
.bh-trust-sep { opacity: .45; }

/* ===== Fizetési mód kártyák + ikonok + leírások (Raiffeisen VPOS, 2026-06-16 v2) =====
   Scope: csak checkout. Raiffeisen elöl (sort_order=1). Minden mód = kártya + ikon +
   magyarázat; a Raiffeisen alatt a fő kártya/pénztárca logók nagyobb méretben. */
.checkout-index-index .payment-method {
    border: 1px solid #e3e8e0; border-radius: 14px; background: #fff;
    margin: 0 0 12px; padding: 15px 18px;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.checkout-index-index .payment-method:hover { border-color: #c9d6c6; }
.checkout-index-index .payment-method._active {
    border-color: var(--bh-c5-green); box-shadow: 0 2px 12px rgba(45,90,61,.10);
}
.checkout-index-index .payment-method-title.field.choice {
    display: flex; align-items: flex-start; gap: 12px; margin: 0; padding: 0;
}
.checkout-index-index .payment-method-title input[type="radio"] {
    margin: 4px 0 0; flex: 0 0 auto; width: 18px; height: 18px;
}
.checkout-index-index .payment-method-title label.label {
    display: block; flex: 1 1 auto; cursor: pointer; margin: 0;
    padding-left: 46px; min-height: 32px;
    background-repeat: no-repeat; background-position: 2px 1px; background-size: 30px 30px;
}
.checkout-index-index .payment-method-title label.label > span {
    font-weight: 600; font-size: 1.02rem; color: #234731; line-height: 1.3;
}
.checkout-index-index .payment-method-title label.label::after {
    display: block; margin-top: 3px; font-weight: 400; font-size: .85rem;
    line-height: 1.45; color: #5c6657;
}
/* Raiffeisen — kártya ikon + leírás; a logók a renderer .rvp-list-summary-ben */
.checkout-index-index label[for="raiffeisenvpos"] {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%232D5A3D'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='2'%20y='5'%20width='20'%20height='14'%20rx='2'/%3E%3Cpath%20d='M2%2010h20'/%3E%3Cpath%20d='M6%2015h5'/%3E%3C/svg%3E");
}
.checkout-index-index label[for="raiffeisenvpos"]::after {
    content: "Biztonságos fizetés a Raiffeisen Bank oldalán — bankkártyával vagy mobiltárcával:";
}
.checkout-index-index .rvp-list-summary { margin: 9px 0 2px; padding-left: 46px; }
.checkout-index-index .rvp-list-summary__logos {
    display: flex; flex-wrap: wrap; align-items: center; gap: 16px;
}
.checkout-index-index .rvp-list-summary__logos img { max-height: 42px; max-width: 100%; width: auto; height: auto; display: block; } /* bankfix2 06-17: cap by height so logos never blow up regardless of cached template */
/* Banki előre utalás — bank ikon */
.checkout-index-index label[for="banktransfer"] {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%232D5A3D'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M3%2021h18'/%3E%3Cpath%20d='M5%2021V10'/%3E%3Cpath%20d='M19%2021V10'/%3E%3Cpath%20d='M9.5%2021v-6h5v6'/%3E%3Cpath%20d='M3%2010l9-6%209%206'/%3E%3C/svg%3E");
}
.checkout-index-index label[for="banktransfer"]::after {
    content: "A visszaigazoló e-mailben kapott bankszámlaszámra utalsz; a rendelést a beérkezés után készítjük elő.";
}
/* Utánvét — bankjegy ikon */
.checkout-index-index label[for="cashondelivery"] {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%232D5A3D'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='2'%20y='6'%20width='20'%20height='12'%20rx='2'/%3E%3Ccircle%20cx='12'%20cy='12'%20r='2.6'/%3E%3Cpath%20d='M6%209.5v5M18%209.5v5'/%3E%3C/svg%3E");
}
.checkout-index-index label[for="cashondelivery"]::after {
    content: "Fizetés átvételkor a futárnál vagy a csomagponton (+349 Ft kezelési díj).";
}


/* ============================================================================
   §CHECKOUT-PREMIUM (2026-06-17) — Premium White polish for the Luma checkout.
   brand.css is NOT loaded here → literal hex + self-hosted Newsreader @font-face
   (same woff2 as brand.css; path is relative to this css folder).
   Rollback = strip from this §CHECKOUT-PREMIUM marker to EOF.
   ============================================================================ */
/* Newsreader (SIL OFL) normal — latin + latin-ext, weights 400 & 500 */
/* page canvas — warm cream + faint sage top wash (matches account/cart) */
.checkout-index-index{background:radial-gradient(130% 38% at 50% -6%, #EEF5EF 0%, rgba(238,245,239,0) 60%), #FAFBF8 !important;}
.checkout-index-index .page-main{padding-bottom:3rem;}

/* section + summary titles -> serif */
.checkout-index-index .step-title,
.checkout-index-index .opc-block-summary > .title,
.checkout-index-index .opc-block-shipping-information .shipping-information-title,
.checkout-index-index .checkout-payment-method .step-title{
  font-family:'Newsreader',Georgia,'Times New Roman',serif !important;
  font-weight:500 !important; font-size:1.5rem !important; letter-spacing:-.01em;
  color:#2B322E !important; border-bottom:1px solid rgba(23,35,30,.12) !important; padding-bottom:.55rem !important;}

/* form inputs + selects */
.checkout-index-index .input-text,
.checkout-index-index select,
.checkout-index-index .field .control input[type="text"],
.checkout-index-index .field .control input[type="email"],
.checkout-index-index .field .control input[type="tel"]{
  border:1px solid rgba(23,35,30,.22) !important; border-radius:10px !important; background:#F5F8F5 !important;
  padding:.7rem .9rem !important; height:auto !important; color:#2B322E !important; box-shadow:none !important;
  transition:border-color .16s ease, box-shadow .16s ease, background .16s ease;}
.checkout-index-index .input-text:focus,
.checkout-index-index select:focus{background:#fff !important; border-color:#5F9270 !important; box-shadow:0 0 0 3px #DFEDE2 !important; outline:none !important;}

/* labels */
.checkout-index-index .field > .label,
.checkout-index-index fieldset > .field > .label span{color:#6B7A70 !important; font-weight:600 !important; font-size:.82rem !important; letter-spacing:.02em;}

/* order summary — sage-tinted premium card */
.checkout-index-index .opc-block-summary,
.checkout-index-index .opc-summary-wrapper .opc-block-summary{
  background:linear-gradient(170deg, #EEF5EF 0%, #ffffff 42%) !important; border:1px solid #DFEDE2 !important;
  border-radius:24px !important; box-shadow:0 10px 32px rgba(23,35,30,.10) !important; padding:1.35rem 1.5rem !important;}
.checkout-index-index .opc-block-summary > .title{margin-top:0 !important;}
.checkout-index-index .opc-block-summary .table-totals .grand .price,
.checkout-index-index .table-totals .grand .amount .price,
.checkout-index-index .opc-block-summary .grand.totals .price{color:#034C3C !important; font-weight:700 !important;}
.checkout-index-index .opc-block-summary .minicart-items .product-item{border-color:rgba(23,35,30,.10) !important;}
.checkout-index-index .opc-block-summary .product-item .product-item-name-block,
.checkout-index-index .opc-block-summary .product-item .name{color:#2B322E !important;}
.checkout-index-index .opc-estimated-wrapper,
.checkout-index-index .opc-block-summary .product.options .toggle{color:#234731 !important;}

/* coupon / discount inputs inside checkout */
.checkout-index-index .payment-option-content .input-text,
.checkout-index-index .form-discount .input-text{background:#ffffff !important;}
/* ===== end §CHECKOUT-PREMIUM ===== */

/* ===== PayPal (paypal_express) — pénztárca ikon + magyar leírás; a logó a renderer .pp-list-summary-ben (2026-06-21) =====
   Ugyanaz a kártyás felület, mint a Raiffeisennél; ikon: pénztárca; logó: hivatalos PayPal SVG. */
.checkout-index-index label[for="paypal_express"] {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%232D5A3D'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M4%207h13a3%203%200%200%201%203%203v7a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2V6a2%202%200%200%201%202-2h9'/%3E%3Cpath%20d='M20%2012.5h-3.5a1.8%201.8%200%200%200%200%203.6H20z'/%3E%3C/svg%3E");
}
.checkout-index-index label[for="paypal_express"]::after {
    content: "Fizess PayPal-egyenleggel vagy bankkártyával — átirányítunk a PayPal biztonságos oldalára:";
}
.checkout-index-index .pp-list-summary { margin: 9px 0 2px; padding-left: 46px; }
.checkout-index-index .pp-list-summary__logos {
    display: flex; flex-wrap: wrap; align-items: center; gap: 16px;
}
.checkout-index-index .pp-list-summary__logos img { max-height: 30px; max-width: 100%; width: auto; height: auto; display: block; }

/* ============================================================================
   §CHECKOUT-HEADER-FOOTER (2026-07-08) — a Luma-pénztár FEJLÉC + LÁBLÉC
   harmonizálása a Bioheal Premium White arculathoz + az angol/elterelő
   elemek rendezése. brand.css itt NEM tölt → literál hex.
   Rollback = e blokk törlése a §CHECKOUT-HEADER-FOOTER markertől.
   ============================================================================ */

/* ---- FEJLÉC ---- */
.checkout-index-index .page-header{
  background:transparent !important; box-shadow:none !important;
  border-bottom:1px solid rgba(23,35,30,.10) !important; margin-bottom:1.4rem !important;}
.checkout-index-index .header.content{padding:1rem 1.1rem 1.1rem !important;}
/* felső üdvözlő sáv: mély márkazöld (ha nem lenne az) */
.checkout-index-index .panel.header,
.checkout-index-index .header.panel{background:#034C3C !important;}
.checkout-index-index .panel.header a,
.checkout-index-index .panel.header .greet.welcome,
.checkout-index-index .panel.header > .header.links > li{color:#EAF3EC !important;}
.checkout-index-index .panel.header a:hover{color:#fff !important;}
/* keresőmező: Bioheal Premium White input-stílus */
.checkout-index-index .block-search .input-text{
  border:1px solid rgba(23,35,30,.20) !important; border-radius:999px !important;
  background:#F5F8F5 !important; height:auto !important; padding:.55rem 1rem !important;}
.checkout-index-index .block-search .action.search{color:#2D5A3D !important;}
/* kosár darabszám-pill → márkazöld */
.checkout-index-index .minicart-wrapper .counter.qty{background:#2D5A3D !important; color:#fff !important;}
.checkout-index-index .minicart-wrapper .action.showcart .counter-number{color:#fff !important;}

/* ---- LÁBLÉC ---- */
.checkout-index-index .page-footer{
  background:#FAF8F2 !important; border-top:1px solid rgba(23,35,30,.10) !important; margin-top:2.4rem !important;}
.checkout-index-index .footer.content{padding:1.6rem 1.1rem !important; border-top:0 !important;}
/* newsletter a fizetési folyamatban felesleges elterelés (+ angol placeholder) → elrejtve */
.checkout-index-index .block.newsletter{display:none !important;}
/* footer-linkek: márkazöld, középre rendezve, tiszta */
.checkout-index-index .footer.content ul.footer.links{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  gap:.35rem 1.4rem; list-style:none; padding:0; margin:0 auto .7rem; max-width:52rem;}
.checkout-index-index .footer.content ul.footer.links > li{margin:0 !important; border:0 !important;}
.checkout-index-index .footer.content ul.footer.links a{
  color:#2D5A3D !important; font-size:.86rem !important; font-weight:600 !important; text-decoration:none !important;}
.checkout-index-index .footer.content ul.footer.links a:hover{color:#034C3C !important; text-decoration:underline !important;}
/* copyright — Bioheal ink, középre, halk */
.checkout-index-index .copyright{
  background:transparent !important; color:#68746C !important; font-size:.82rem !important;
  text-align:center !important; padding:.6rem 1rem 0 !important;}
/* ===== end §CHECKOUT-HEADER-FOOTER ===== */