/* ============================================================
   ENIGMA FORGE — szlif wizualny sklepu (checkout + header)
   v1.2 · 11.08.2026 · czysty CSS, ZERO zmian funkcjonalnych
   v1.2: kroki — wariant klasy .checkout__steps-item--current (klik wstecz), stany complete
         szampanowe; przycisk ZLOZ ZAMOWIENIE (#payment-confirmation, btn-secondary!) zloty z blikiem
   Wpięcie: 1 linijka na końcu themes/enigma/templates/_partials/head.tpl:
   <link rel="stylesheet" href="/themes/enigma/assets/custom/css/custom-forge-shop.css?v=1">
   Iteracje: podbijać ?v=N po każdej podmianie pliku.
   Zakresy: #checkout (proces zamówienia) · .l-header/.ets_mm_megamenu (header, globalnie)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Marcellus&family=Jost:ital,wght@0,400;0,500;0,600;1,400&display=swap');

:root{
  --fg-champ:#d6b877;        /* szampan FORGE (karta projektu) */
  --fg-champ-2:#c9a96a;      /* szampan CTA home */
  --fg-champ-dim:#8a8265;
  --fg-copper:#8f6f42;       /* satyna miedź (gradient CTA) */
  --fg-copper-d:#8a6a3f;
  --fg-ink:#1a1509;          /* tekst na złocie */
  --fg-panel:#0c0c0d;        /* panel (ramki maila/karty FORGE) */
  --fg-line:#3a3428;         /* linia/obwódka */
  --fg-grey:#8a8577;         /* etykiety przygaszone */
  --fg-txt:#e8e6e1;
  --fg-disp:'Marcellus',Georgia,serif;
  --fg-lab:'Jost','Inter',sans-serif;
}

/* ---------- GLOBALNE DROBIAZGI (subtelne) ---------- */
::selection{background:rgba(214,184,119,.32);color:#fff}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid rgba(214,184,119,.55);outline-offset:2px}

/* ============================================================
   HEADER (wszystkie strony)
   ============================================================ */
.l-header{border-bottom:1px solid rgba(214,184,119,.14)}
.header-top{position:relative}
.header-top::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg,transparent 4%,rgba(214,184,119,.34) 30%,rgba(214,184,119,.5) 50%,rgba(214,184,119,.34) 70%,transparent 96%);pointer-events:none}

/* ikony akcji (szukaj / konto / koszyk): spokojny szampański hover */
.header-top__icon,.header-top__icon svg,.header-top__block a{transition:color .22s,fill .22s,opacity .22s}
.header-top__block a:hover .header-top__icon,
.header-top__block a:hover .header-top__icon svg,
.header-top__block a:hover{color:var(--fg-champ)}
.header-top__block a:hover svg path{fill:var(--fg-champ)}

/* licznik pozycji koszyka */
.blockcart [class*="count"],[class*="cart-products-count"]{
  background:linear-gradient(135deg,var(--fg-copper),var(--fg-champ-2) 60%,var(--fg-copper-d))!important;
  color:var(--fg-ink)!important;font-family:var(--fg-lab);font-weight:600}

/* menu główne (ets megamenu): typografia + animowany podkreślnik */
.ets_mm_megamenu .mm_menus_ul>li>a{
  font-family:var(--fg-lab)!important;letter-spacing:.12em;font-weight:500;
  position:relative;transition:color .22s}
.ets_mm_megamenu .mm_menus_ul>li>a::after{
  content:"";position:absolute;left:50%;right:50%;bottom:4px;height:1px;opacity:0;
  background:linear-gradient(90deg,transparent,var(--fg-champ),transparent);
  transition:left .26s ease,right .26s ease,opacity .26s}
.ets_mm_megamenu .mm_menus_ul>li>a:hover{color:var(--fg-champ)!important}
.ets_mm_megamenu .mm_menus_ul>li>a:hover::after{left:8%;right:8%;opacity:1}
.ets_mm_megamenu .mm_menus_ul>li.active>a{color:var(--fg-champ)!important}

/* pozycja menu Projektowni: ZŁOTA z wędrującym blikiem (zaświeci się sama, gdy pozycja powstanie)
   UWAGA z przymiarki: tekst pozycji ets siedzi w span.mm_menu_content_title — clip idzie na SPAN */
.ets_mm_megamenu .mm_menus_ul>li>a[href*="projektownia-forge"]{color:var(--fg-champ)!important}
.ets_mm_megamenu .mm_menus_ul>li>a[href*="projektownia-forge"]::after{left:8%;right:8%;opacity:.55}
.ets_mm_megamenu .mm_menus_ul>li>a[href*="projektownia-forge"] .mm_menu_content_title{
  color:transparent!important;
  background-image:linear-gradient(100deg,#c9a96a 0%,#d6b877 38%,#ffe9b8 50%,#d6b877 62%,#c9a96a 100%);
  background-size:230% 100%;background-position:110% 0;
  -webkit-background-clip:text;background-clip:text;
  animation:fgShine 5.2s ease-in-out infinite;font-weight:600}
@keyframes fgShine{0%,70%{background-position:110% 0}88%,100%{background-position:-15% 0}}
@media (prefers-reduced-motion:reduce){
  .ets_mm_megamenu .mm_menus_ul>li>a[href*="projektownia-forge"] .mm_menu_content_title{
    animation:none;color:var(--fg-champ)!important;background:none}}

/* rozwijane panele megamenu: ciemny panel w duchu FORGE */
.ets_mm_megamenu .mm_columns_ul{background:#0a0a0b!important;border:1px solid var(--fg-line)!important;
  box-shadow:0 18px 40px rgba(0,0,0,.55)!important}
.ets_mm_megamenu .mm_columns_ul a:hover{color:var(--fg-champ)!important}

/* ============================================================
   CHECKOUT — proces zamówienia (#checkout / body.page-order)
   ============================================================ */

/* nagłówek strony: ZAMÓWIENIE w rycie FORGE ze złotym kickiem */
#checkout h1{font-family:var(--fg-disp);font-weight:400;letter-spacing:.14em;text-transform:uppercase;
  position:relative;padding-bottom:18px}
#checkout h1::after{content:"";position:absolute;left:50%;transform:translateX(-50%);bottom:0;width:64px;height:2px;
  background:linear-gradient(90deg,transparent,var(--fg-champ),transparent)}

/* ---------- pasek kroków ---------- */
/* v1.2: motyw oznacza krok aktywny DWOJAKO - .current (normalny flow) ORAZ
   .checkout__steps-item--current (klik wstecz na pasku); lapiemy oba, a wariant BEM
   dostaje zdublowana klase bazowa, by specyficznoscia dorownac regulom .complete */
#checkout .checkout__steps-icon{
  background:var(--fg-panel)!important;border:1px solid var(--fg-line)!important;border-radius:50%;
  transition:background .25s,border-color .25s}
#checkout .checkout__steps-icon svg path{fill:var(--fg-grey)!important;transition:fill .25s}
#checkout .checkout__steps-item.complete .checkout__steps-icon{background:#14110a!important;border-color:var(--fg-champ-dim)!important}
#checkout .checkout__steps-item.complete .checkout__steps-icon svg path{fill:var(--fg-champ-2)!important}
#checkout .checkout__steps-item.complete .checkout__steps-content>*:first-child{color:#d9d6cf}
#checkout .checkout__steps-item.current .checkout__steps-icon,
#checkout .checkout__steps-item.checkout__steps-item--current .checkout__steps-icon{
  background:linear-gradient(135deg,var(--fg-copper),var(--fg-champ-2) 55%,var(--fg-copper-d))!important;
  border-color:var(--fg-champ-2)!important;box-shadow:0 0 0 1px rgba(214,184,119,.25),0 6px 18px rgba(201,169,106,.22)!important}
#checkout .checkout__steps-item.current .checkout__steps-icon svg path,
#checkout .checkout__steps-item.checkout__steps-item--current .checkout__steps-icon svg path{fill:var(--fg-ink)!important}
#checkout .checkout__steps-content{font-family:var(--fg-lab)}
#checkout .checkout__steps-content>*:first-child{font-family:var(--fg-disp);letter-spacing:.08em;font-size:15px;color:var(--fg-txt)}
#checkout .checkout__steps-item.current .checkout__steps-content>*:first-child,
#checkout .checkout__steps-item.checkout__steps-item--current .checkout__steps-content>*:first-child{color:var(--fg-champ)!important}
#checkout .checkout__steps-content>*:not(:first-child){color:var(--fg-grey);font-size:12px}

/* ---------- pozycje koszyka ---------- */
#checkout .cart-items{background:var(--fg-panel);border:1px solid var(--fg-line);border-radius:10px;padding:6px 14px}
#checkout .cart-items [class*="cart-item"]{border-color:#1c1a15}
#checkout .cart-items img{border:1px solid var(--fg-line);border-radius:6px;background:#000}
#checkout .cart-items a{transition:color .2s}
#checkout .cart-items a:hover{color:var(--fg-champ)}
#checkout .cart-items [class*="price"],#checkout .cart-items .price{color:var(--fg-champ);font-weight:600}
/* pole ilości i przyciski ± */
#checkout .cart-items input[type="number"],#checkout .cart-items [class*="qty"] input{
  background:#060607;border:1px solid var(--fg-line);color:var(--fg-txt)}
#checkout .cart-items button:hover{color:var(--fg-champ)}
/* link/rozwijka personalizacji przy pozycji */
#checkout .cart-items a[data-toggle],#checkout .cart-items [class*="customization"] a{color:var(--fg-champ-dim)}
#checkout .cart-items a[data-toggle]:hover{color:var(--fg-champ)}

/* ---------- podsumowanie ---------- */
#checkout .cart-summary{background:var(--fg-panel)!important;border:1px solid var(--fg-line)!important;
  border-radius:10px!important;overflow:hidden}
#checkout .cart-summary [class*="card-header"],#checkout .cart-summary h2,#checkout .cart-summary h3{
  font-family:var(--fg-disp);font-weight:400;letter-spacing:.1em;color:var(--fg-txt);
  border-bottom:1px solid var(--fg-line);position:relative}
#checkout .cart-summary [class*="line"],#checkout .cart-summary [class*="row"]{font-family:var(--fg-lab)}
#checkout .cart-summary [class*="label"]{color:var(--fg-grey)}
#checkout .cart-summary [class*="value"],#checkout .cart-summary strong,#checkout .cart-summary .price{color:var(--fg-txt)}
#checkout .cart-summary [class*="total"] ,#checkout .cart-summary [class*="total"] *{
  color:var(--fg-champ)!important;font-weight:600}
#checkout .cart-summary hr{border-color:var(--fg-line)}

/* pole kodu promocyjnego */
#checkout input[type="text"],#checkout .promo-code input{background:#060607;border:1px solid var(--fg-line);
  color:var(--fg-txt);border-radius:4px;transition:border-color .2s}
#checkout input[type="text"]:focus{border-color:var(--fg-champ-dim)}

/* ---------- przyciski akcji ---------- */
/* UWAGA (przymiarka na żywo 11.08): motyw daje głównemu CTA kasy klasę .btn-secondary,
   a .btn-order jest ukrytym wariantem — dlatego CTA w podsumowaniu dostaje gradient primary */
#checkout .cart-summary .btn-secondary,#checkout [class*="cart-detailed-actions"] .btn,#checkout .cart-summary a.btn{
  background:linear-gradient(135deg,var(--fg-copper) 0%,var(--fg-champ-2) 52%,var(--fg-copper-d) 100%)!important;
  color:var(--fg-ink)!important;border:0!important;border-radius:4px!important;
  font-family:var(--fg-lab)!important;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  padding-top:14px;padding-bottom:14px;box-shadow:0 6px 20px rgba(201,169,106,.18);
  transition:filter .22s,transform .15s,box-shadow .22s}
#checkout .cart-summary .btn-secondary:hover,#checkout .cart-summary a.btn:hover{
  filter:brightness(1.12);transform:translateY(-1px);color:var(--fg-ink)!important;
  box-shadow:0 10px 26px rgba(201,169,106,.26)}
#checkout .btn-primary,#checkout .btn-order{
  background:linear-gradient(135deg,var(--fg-copper) 0%,var(--fg-champ-2) 52%,var(--fg-copper-d) 100%)!important;
  color:var(--fg-ink)!important;border:0!important;border-radius:4px!important;
  font-family:var(--fg-lab)!important;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  padding-top:14px;padding-bottom:14px;
  box-shadow:0 6px 20px rgba(201,169,106,.18);transition:filter .22s,transform .15s,box-shadow .22s}
#checkout .btn-primary:hover,#checkout .btn-order:hover{filter:brightness(1.12);transform:translateY(-1px);
  box-shadow:0 10px 26px rgba(201,169,106,.26)}
#checkout .btn-primary:active,#checkout .btn-order:active{transform:translateY(0)}
#checkout .btn-primary:disabled,#checkout .btn-order:disabled{filter:grayscale(.55) brightness(.7);box-shadow:none}
/* przyciski drugorzędne (wstecz, kontynuuj zakupy) */
#checkout .btn-secondary,#checkout .btn-outline-primary{background:transparent!important;color:var(--fg-grey)!important;
  border:1px solid var(--fg-line)!important;border-radius:4px!important;font-family:var(--fg-lab)!important;
  letter-spacing:.12em;text-transform:uppercase;transition:color .2s,border-color .2s}
#checkout .btn-secondary:hover,#checkout .btn-outline-primary:hover{color:var(--fg-champ)!important;border-color:var(--fg-champ-dim)!important}

/* ---------- ZLOZ ZAMOWIENIE (final platnosci; motyw daje mu btn-secondary) ---------- */
#checkout #payment-confirmation .btn{position:relative;overflow:hidden;
  background:linear-gradient(135deg,var(--fg-copper) 0%,var(--fg-champ-2) 52%,var(--fg-copper-d) 100%)!important;
  color:var(--fg-ink)!important;border:0!important;border-radius:4px!important;
  font-family:var(--fg-lab)!important;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  padding:16px 34px;box-shadow:0 6px 20px rgba(201,169,106,.2);
  transition:filter .22s,transform .15s,box-shadow .22s}
#checkout #payment-confirmation .btn::after{content:"";position:absolute;top:-4px;bottom:-4px;left:-45%;width:32%;
  background:linear-gradient(100deg,transparent,rgba(255,244,214,.55),transparent);
  transform:skewX(-18deg);animation:fgBtnShine 4.8s ease-in-out infinite;pointer-events:none}
@keyframes fgBtnShine{0%,62%{left:-45%}84%,100%{left:130%}}
#checkout #payment-confirmation .btn:hover{filter:brightness(1.12);transform:translateY(-1px);
  box-shadow:0 10px 26px rgba(201,169,106,.28)}
#checkout #payment-confirmation .btn.disabled,#checkout #payment-confirmation .btn:disabled{
  filter:saturate(.5) brightness(.62);box-shadow:none;cursor:not-allowed}
#checkout #payment-confirmation .btn.disabled::after,#checkout #payment-confirmation .btn:disabled::after{animation:none;display:none}
@media (prefers-reduced-motion:reduce){#checkout #payment-confirmation .btn::after{animation:none;display:none}}

/* ---------- modal „Dostosowywanie produktu" (podgląd projektu FORGE) ---------- */
#checkout .modal-content{background:var(--fg-panel);border:1px solid var(--fg-line);border-radius:10px;
  box-shadow:0 24px 60px rgba(0,0,0,.65);color:var(--fg-txt)}
#checkout .modal-header{border-bottom:1px solid var(--fg-line)}
#checkout .modal-header .modal-title,#checkout .modal-header h4{
  font-family:var(--fg-disp);letter-spacing:.1em;color:var(--fg-champ);font-weight:400}
#checkout .modal-header .close,#checkout .modal-header [class*="close"]{color:var(--fg-grey);opacity:1;text-shadow:none;transition:color .2s}
#checkout .modal-header .close:hover{color:var(--fg-champ)}
#checkout .modal-body{font-family:var(--fg-lab)}
#checkout .modal-body img{border:1px solid var(--fg-line);border-radius:6px;background:#000}
/* etykiety wierszy personalizacji (Podgląd projektu / Numer projektu / Specyfikacja) */
#checkout .modal-body [class*="label"],#checkout .modal-body th,#checkout .modal-body dt{
  color:var(--fg-grey);text-transform:uppercase;letter-spacing:.1em;font-size:11px}
#checkout .modal-footer{border-top:1px solid var(--fg-line)}

/* ---------- kolejne kroki (dane / adres / dostawa / płatność) — spójna rama ---------- */
#checkout .checkout-step__content,#checkout [class*="checkout-step"] .content{font-family:var(--fg-lab)}
#checkout .checkout-step__content .form-control,#checkout .checkout-step__content select{
  background:#060607;border:1px solid var(--fg-line);color:var(--fg-txt);border-radius:4px}
#checkout .checkout-step__content .form-control:focus{border-color:var(--fg-champ-dim);box-shadow:0 0 0 2px rgba(214,184,119,.15)}
#checkout .checkout-step__content label{color:var(--fg-grey)}
#checkout input[type="radio"]:checked,#checkout input[type="checkbox"]:checked{accent-color:var(--fg-champ-2)}