/* =========================================================
   WOLF & FIRE — CLEAN CSS (sjednocené, bez duplicit)
   ========================================================= */

/* =========================================================
   0) DESIGN TOKENS (barvy, bordery, radius)
   ========================================================= */
:root{
  /* Core */
  --wf-bg: #040607;
  --wf-bg-2: #0a0a0a;
  --wf-panel: rgba(0,0,0,.55);
  --wf-panel-soft: rgba(0,0,0,.30);

  /* Text */
  --wf-text: #ffffff;
  --wf-text-muted: rgba(255,255,255,.78);
  --wf-text-dim: rgba(255,255,255,.55);

  /* Brand */
  --wf-accent: #ff0033;
  --wf-accent-hover: #e6002d;

  /* Borders */
  --wf-border: rgba(255,255,255,.22);
  --wf-border-strong: rgba(255,255,255,.32);

  /* Focus */
  --wf-focus: rgba(255,0,51,.75);
  --wf-focus-ring: rgba(255,0,51,.18);

  /* Radius */
  --wf-r-sm: 10px;
  --wf-r-md: 12px;
  --wf-r-lg: 14px;
  --wf-r-xl: 18px;

  /* Shadow */
  --wf-shadow-btn: 0 14px 30px rgba(255,0,51,.22);
  --wf-shadow-modal: 0 24px 80px rgba(0,0,0,.70);
}

/* =========================================================
   1) TYPO / H1 ANIMATION
   ========================================================= */
.homepage-texts-wrapper .welcome h1,
article.pageArticleDetail > header h1{
  text-align:center;
  font-weight:700;
  color:var(--wf-text);
  letter-spacing:.4px;
  animation:wfFadeUp .9s ease-out both;
}
@keyframes wfFadeUp{
  from{opacity:0; transform:translateY(8px);}
  to{opacity:1; transform:translateY(0);}
}

/* =========================================================
   2) GLOBAL DARK (web)
   ========================================================= */
body, #content-wrapper, #content, #content-inner{
  background:var(--wf-bg) !important;
  color:var(--wf-text) !important;
  margin:0; padding:0;
}
main#content, #content-wrapper, #content,
.content-wrapper, .content, .index-content-wrapper{
  color:var(--wf-text) !important;
}
main#content h1, main#content h2, main#content h3, main#content h4, main#content h5, main#content h6,
#content-wrapper h1, #content-wrapper h2, #content-wrapper h3, #content-wrapper h4, #content-wrapper h5, #content-wrapper h6,
#content h1, #content h2, #content h3, #content h4, #content h5, #content h6{
  color:var(--wf-text) !important;
}

/* Links (mimo WF CTA níže přebijeme) */
main#content a, #content-wrapper a, #content a{
  color:#7dd3fc !important;
}
main#content a:hover, #content-wrapper a:hover, #content a:hover{
  opacity:.9;
}

hr{
  border:0; height:1px;
  background:var(--wf-border-strong);
  margin:34px 0;
}

/* =========================================================
   3) LOGO HOVER (RED)
   ========================================================= */
#header .site-name a img{
  transition:filter .25s ease, opacity .25s ease;
}
#header .site-name a:hover img{
  filter: brightness(0) saturate(100%)
          invert(22%) sepia(98%) saturate(7421%)
          hue-rotate(356deg) brightness(95%) contrast(110%);
}

/* =========================================================
   4) FOOTER DARK
   ========================================================= */
#footer{
  background:var(--wf-bg) !important;
  border-top-color:var(--wf-border-strong)!important;
  color:var(--wf-text) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
#footer p, #footer span, #footer li, #footer a{color:var(--wf-text)!important;}
#footer a{opacity:.85;}
#footer a:hover{opacity:1;}

/* Hide empty consent label */
.form-group.consents label.whole-width{display:none!important;}

/* =========================================================
   5) UNIFIED INPUTS (celý web: login/footer/contact/modal/overlay)
   ========================================================= */
.form-control,
.content-window-in input,
.content-window-in textarea,
#formContact input,
#formContact textarea,
dialog#login input,
.js-dialog--modal input{
  background: var(--wf-panel) !important;
  color: var(--wf-text) !important;
  border: 1px solid var(--wf-border) !important;
  border-radius: var(--wf-r-md) !important;
  padding: 14px 16px !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.35) !important;
}

.form-control::placeholder,
.content-window-in input::placeholder,
.content-window-in textarea::placeholder,
#formContact input::placeholder,
#formContact textarea::placeholder,
dialog#login input::placeholder,
.js-dialog--modal input::placeholder{
  color: var(--wf-text-dim) !important;
}

/* Focus ring */
.form-control:focus,
.content-window-in input:focus,
.content-window-in textarea:focus,
#formContact input:focus,
#formContact textarea:focus,
dialog#login input:focus,
.js-dialog--modal input:focus{
  outline: none !important;
  border-color: var(--wf-focus) !important;
  box-shadow: 0 0 0 4px var(--wf-focus-ring) !important;
}

/* Autofill (Safari/Chrome) */
input:-webkit-autofill,
textarea:-webkit-autofill{
  -webkit-text-fill-color: var(--wf-text) !important;
  transition: background-color 999999s ease-in-out 0s;
  box-shadow: 0 0 0px 1000px var(--wf-panel) inset !important;
  border: 1px solid var(--wf-border) !important;
}

/* =========================================================
   6) UNIFIED PRIMARY BUTTONS (submit/login/cta v systému)
   ========================================================= */
button[type="submit"],
input[type="submit"],
.btn.btn-primary,
.formLogin .btn,
#formLogin .btn,
.formLogin .btn-login,
#formLogin .btn-login,
.content-window-in .btn,
.content-window-in input[type="submit"],
#formContact .btn,
#formContact input[type="submit"],
#footer .subscribe-form button.btn.btn-default{
  background: var(--wf-accent) !important;
  border-color: var(--wf-accent) !important;
  color: var(--wf-text) !important;
  border: none !important;
  border-radius: var(--wf-r-lg) !important;
  font-weight: 700 !important;
  letter-spacing: .3px !important;
  text-transform: none !important;
  box-shadow: var(--wf-shadow-btn) !important;
}

button[type="submit"]:hover,
input[type="submit"]:hover,
.btn.btn-primary:hover,
.formLogin .btn:hover,
#formLogin .btn:hover,
.content-window-in .btn:hover,
.content-window-in input[type="submit"]:hover,
#formContact .btn:hover,
#formContact input[type="submit"]:hover,
#footer .subscribe-form button.btn.btn-default:hover{
  background: var(--wf-accent-hover) !important;
  border-color: var(--wf-accent-hover) !important;
}

/* =========================================================
   7) OVERLAYS (cart/login/search) DARK
   ========================================================= */
.content-window-in{
  background:var(--wf-bg) !important;
  color:var(--wf-text) !important;
  position: relative !important;
}
.content-window-in p,
.content-window-in span,
.content-window-in label,
.content-window-in a,
.content-window-in h1,
.content-window-in h2,
.content-window-in h3,
.content-window-in h4,
.content-window-in h5{
  color:var(--wf-text) !important;
}

/* cart headings white */
.content-window-in .cart-heading,
.content-window-in .cart-heading.h1,
.content-window-in .cart-heading h1,
.content-window-in .h1,
.content-window-in h1{
  color:var(--wf-text)!important;
}
.content-window-in .cart-heading:before,
.content-window-in .cart-heading.h1:before,
.content-window-in .cart-heading h1:before{
  color:var(--wf-text)!important;
}

/* Overlay Back button (search/cart/login) */
.content-window-in .toggle-window-arr.btn > span{display:none !important;}
.content-window-in .toggle-window-arr.btn{
  position: absolute !important;
  top: 18px !important;
  left: 18px !important;
  z-index: 50 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px 14px !important;
  line-height: 1 !important;
  border-radius: var(--wf-r-lg) !important;
}
.content-window-in .toggle-window-arr.btn::before{
  position: static !important;
  margin: 0 8px 0 0 !important;
  vertical-align: middle !important;
}

/* =========================================================
   8) MOBILE MENU DARK + header icons
   ========================================================= */
.navigation-in{background:var(--wf-bg)!important;}
.navigation-in a,.navigation-in span,.navigation-in li{color:var(--wf-text)!important;}
.navigation-in a:hover,.navigation-in .active>a{color:var(--wf-accent)!important;}
.navigation-close:before,.navigation-close:after{background:var(--wf-text)!important;}
.header-icons a,.header-icons span,.user-action a{color:var(--wf-text)!important;}
.user-action{background:var(--wf-bg)!important;}

/* =========================================================
   9) LOGIN PAGE (body.customer-login) — zůstane dark
   ========================================================= */
body.customer-login,
body.customer-login #content-wrapper,
body.customer-login #content,
body.customer-login #content-inner{
  background:var(--wf-bg) !important;
  color:var(--wf-text) !important;
}

/* =========================================================
   10) LOGIN MODAL (dialog#login + js-dialog--modal)
   ========================================================= */
dialog#login::backdrop,
.js-dialog--modal::backdrop{
  background: rgba(0,0,0,.75);
  backdrop-filter: blur(6px);
}
dialog#login .dialog__wrapper,
.js-dialog--modal .dialog__wrapper{
  background:
    radial-gradient(1200px 500px at 20% -10%, rgba(255,0,51,.12), rgba(0,0,0,0) 55%),
    linear-gradient(180deg, rgba(12,12,12,.98), rgba(0,0,0,.98));
  color: var(--wf-text);
  border: 1px solid var(--wf-border);
  border-radius: var(--wf-r-xl);
  box-shadow: var(--wf-shadow-modal);
  padding: 28px 26px;
  max-width: 560px;
}
dialog#login h1, dialog#login h2, dialog#login h3,
.js-dialog--modal h1, .js-dialog--modal h2, .js-dialog--modal h3{
  color: var(--wf-text);
  letter-spacing: .2px;
  margin: 0 0 16px 0;
}
dialog#login .dialog__close,
.js-dialog--modal .dialog__close{
  opacity: .9;
  filter: invert(1);
}
dialog#login .dialog__close:hover,
.js-dialog--modal .dialog__close:hover{opacity:1;}
dialog#login .password-helper,
.js-dialog--modal .password-helper{opacity:.85;}

dialog#login a,
.js-dialog--modal a{
  color: rgba(255,255,255,.86) !important;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(255,255,255,.22);
}
dialog#login a:hover,
.js-dialog--modal a:hover{
  border-bottom-color: rgba(255,0,51,.6);
  color: var(--wf-text) !important;
}

@media (max-width: 520px){
  dialog#login .dialog__wrapper,
  .js-dialog--modal .dialog__wrapper{
    padding: 22px 18px;
    border-radius: 16px;
  }
}

/* =========================================================
   11) CONTACT FORM (id=formContact) — sjednocené
   ========================================================= */
#formContact{color:var(--wf-text);}
#formContact label{color:rgba(255,255,255,.9) !important;}
#formContact textarea{
  min-height: 200px;
  resize: vertical;
}
#formContact .error,
#formContact .validation-error,
#formContact .msg{
  color: rgba(255,255,255,.85);
}

/* (volitelné) rozumné šířky inputů na desktopu */
@media (min-width: 992px){
  #formContact input[type="text"],
  #formContact input[type="email"],
  #formContact input[type="tel"],
  #formContact input[type="password"],
  #formContact .form-control{
    max-width: 420px;
  }
}

/* =========================================================
   12) FOOTER — newsletter inputy (sjednocené)
   ========================================================= */
#footer .subscribe-form,
#footer .subscribe-form form,
#footer .subscribe-form .compact-form{
  color:var(--wf-text)!important;
}
#footer .subscribe-form input{
  background: var(--wf-panel) !important;
  border: 1px solid var(--wf-border) !important;
  color: var(--wf-text) !important;
}
#footer .subscribe-form input::placeholder{
  color: var(--wf-text-dim) !important;
}

/* =========================================================
   13) WF PAGE LAYOUT (wf-*)
   ========================================================= */
.wf-page, .wf-section, .wf-hero, .wf-grid, .wf-card, .wf-banner, .wf-img-wrap{box-sizing:border-box;}

.wf-page{
  max-width:980px;
  margin:0 auto;
  padding:10px 16px;
  font-family:inherit;
  line-height:1.65;
}
#content .wf-page,
#content-wrapper .wf-page,
#content-inner .wf-page{
  margin-left:auto!important;
  margin-right:auto!important;
  width:100%;
}

/* HERO */
.wf-hero{margin:10px 0 28px 0;}
.wf-hero p{
  max-width:760px;
  margin:0 auto;
  text-align:center;
  opacity:.9;
  font-size:16px;
}

/* Images */
.wf-img, .wf-banner img{
  width:100%!important;
  height:auto!important;
  display:block;
  border-radius:var(--wf-r-sm);
}
.wf-img-wrap{margin:18px 0 8px 0;}
.wf-banner{margin:18px 0;}

/* Sections */
.wf-section{margin:34px 0 40px 0;}
.wf-section h2{
  font-size:26px;
  margin:14px 0 8px 0;
  text-align:center;
}
.wf-section p{
  max-width:820px;
  margin:0 auto 10px auto;
  text-align:center;
  opacity:.95;
}
.wf-divider{
  height:1px;
  background:var(--wf-border-strong);
  margin:34px 0;
}

/* Grid + cards */
.wf-grid{
  display:grid!important;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
  align-items:stretch;
}
.wf-card{
  border:1px solid var(--wf-border-strong);
  border-radius:var(--wf-r-sm);
  background:rgba(0,0,0,.15);
  overflow:hidden;
}
.wf-card img{width:100%; height:auto; display:block;}
.wf-card-body{padding:12px 12px 10px;}
.wf-card h3{margin:0 0 6px; font-size:16px; font-weight:400; color:var(--wf-text);}
.wf-card p{margin:0; font-size:14px; font-weight:400; color:var(--wf-text); opacity:.92;}

/* Mobile */
@media (max-width:680px){
  .wf-grid{grid-template-columns:1fr!important;}
  .wf-section h2{font-size:22px;}
}

/* =========================================================
   14) WF CTA BUTTON (jedna definice)
   ========================================================= */
.wf-btn{
  display:flex;
  align-items:center;
  gap:12px;

  width:100%;
  padding:14px 16px;
  margin:14px 0 0 0;

  border-radius:16px;
  background:var(--wf-accent);
  color:var(--wf-text) !important;
  text-decoration:none;

  border:1px solid rgba(255,255,255,.14);
  transition: background .2s ease, transform .15s ease;
}
.wf-btn:hover{
  background:var(--wf-accent-hover);
  transform: translateY(-1px);
}
.wf-btn:active{transform:none;}
.wf-btn:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(255,255,255,.16);
}
.wf-btn *{color:var(--wf-text) !important;}

.wf-ic{
  width:44px;
  height:44px;
  border-radius:12px;
  display:grid;
  place-items:center;
  background:#000;
  flex:0 0 auto;
}
.wf-ic svg{display:block; fill:#fff;}

.wf-txt{display:flex; flex-direction:column; line-height:1.15; gap:3px; min-width:0;}
.wf-txt strong{font-size:15px; font-weight:600; letter-spacing:.2px;}
.wf-txt small{
  font-size:12px;
  color:rgba(255,255,255,.72) !important;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.wf-arrow{margin-left:auto; opacity:.9; font-size:16px;}

/* Cards: tlačítko je součást obsahu */
.wf-card .wf-btn{margin-top:14px;}

/* =========================================================
   15) SOCIAL CTA LAYOUT + ICON STYLES
   ========================================================= */
.wf-center{display:flex; justify-content:center; width:100%;}

.wf-social{
  width:100%;
  max-width:920px;
  display:grid;
  grid-template-columns:repeat(2, minmax(260px, 1fr));
  gap:14px;
}
@media (max-width:640px){
  .wf-social{grid-template-columns:1fr;}
}

/* YouTube: černé kolečko + bílý TV + černý play */
.wf-yt .wf-ic{background:#000 !important;}
.wf-yt .wf-ic svg path{fill:#fff !important;}
.wf-yt .wf-ic .wf-yt-play{fill:#000 !important;}

/* Instagram: černé kolečko + bílá ikonka */
.wf-ig .wf-ic{background:#000;}
.wf-ig .wf-ic svg{fill:#fff;}

/* =========================================================
   16) WF VIDEO PAGE (shorts + embeds) — čistá verze
   ========================================================= */
.wf-video-wrap{margin-bottom:20px;}
.wf-intro{
  max-width:700px;
  margin:0 auto 30px;
  opacity:.85;
  text-align:center;
}

.wf-video{
  position:relative;
  width:100%;
  padding-top:56.25%;
  border-radius:var(--wf-r-md);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.25);
  background:var(--wf-panel-soft);
}
.wf-video iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
}
.wf-video-vertical{padding-top:177.78%; /* 9:16 */ }

.wf-shorts-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:30px;
}
.wf-short{max-width:320px;}
.wf-small{font-size:14px; opacity:.7;}

/* Center single CTA (např. jen YouTube tlačítko) */
.wf-cta-center{
  display:flex;
  justify-content:center;
  margin:30px 0 40px;
}
.wf-cta-center .wf-btn{
  max-width:420px;
  width:100%;
}