/* 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; }