/**
Theme Name: astra-nav
Author: Brainstorm Force
Author URI: http://wpastra.com/about/
Description: Astra is the fastest, fully customizable & beautiful theme suitable for blogs, personal portfolios and business websites. It is very lightweight (less than 50KB on frontend) and offers unparalleled speed. Built with SEO in mind, Astra comes with schema.org code integrated so search engines will love your site. Astra offers plenty of sidebar options and widget areas giving you a full control for customizations. Furthermore, we have included special features and templates so feel free to choose any of your favorite page builder plugin to create pages flexibly. Some of the other features: # WooCommerce Ready # Responsive # Compatible with major plugins # Translation Ready # Extendible with premium addons # Regularly updated # Designed, Developed, Maintained & Supported by Brainstorm Force. Looking for a perfect base theme? Look no further. Astra is fast, fully customizable and beautiful theme!
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: astra-nav
Template: astra
*/

/* Usunięcie domyślnych odstępów górnych i dolnych Astry */
.ast-separate-container #primary,
.ast-separate-container.ast-left-sidebar #primary,
.ast-separate-container.ast-right-sidebar #primary {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.ast-separate-container .site-content .ast-container {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

@font-face {
    font-family: 'SG';
    src: url('fonts/SpecialGothicExpandedOne-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Archivo Black';
    src: url('fonts/ArchivoBlack-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

.fm-nav-wrap *,
.fm-nav-wrap *::before,
.fm-nav-wrap *::after { box-sizing: border-box; }

.fm-nav-wrap {
  background: #12171b;
  border-bottom: 1px solid #2a2f33;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  position: relative;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;
}

.fm-nav-bottom {
  transition: max-height 0.25s ease, opacity 0.2s ease;
  max-height: 60px;
  overflow: hidden;
  z-index: 999;
}

.fm-nav-wrap.hide-bottom .fm-nav-bottom {
  max-height: 0;
  opacity: 0;
}

body {
  padding-top: 135px !important;
}

.fm-nav-row {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 32px;
}

/* ── TOP ROW ── */
.fm-nav-top {
  display: flex;
  align-items: center;
  gap: 20px;
  padding-top: 12px;
  padding-bottom: 12px;
}

.fm-logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  text-decoration: none;
}
.fm-logo img {
  height: 64px;
  width: auto;
  object-fit: contain;
  display: block;
}

.fm-search-wrap {
  flex: 1;
  position: relative;
  margin-right: 8px; /* mała przerwa od koszyka */
  margin-left: 8px;
  font-family: Montserrat;
}
.fm-search-form { position: relative; }
.fm-search-input {
  width: 100%;
  height: 46px;
  background: #1e2429;
  border: 1px solid #2e3438;
  border-radius: 8px;
  color: #ffffff;
  padding: 12px 16px 12px 36px !important;
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s;
  -webkit-appearance: none;
  font-family: Montserrat;
}
.fm-search-input::placeholder { color: #5a6370; }
.fm-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #5a6370;
  pointer-events: none;
  display: flex;
}
.fm-search-icon svg { width: 17px; height: 17px; }

/* Predictive dropdown */
.fm-search-results {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: #1e2429;
  border: 1px solid #2e3438;
  border-radius: 8px;
  overflow: hidden;
  z-index: 200;
  max-height: 420px;
  overflow-y: auto;
}
.fm-search-results.open { display: block; z-index: 200; }
.fm-search-results::-webkit-scrollbar { width: 4px; }
.fm-search-results::-webkit-scrollbar-thumb { background: #3a3f44; border-radius: 4px; }

.fm-result-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  text-decoration: none;
  border-bottom: 1px solid #262c30;
  transition: background 0.1s;
}
.fm-result-item:last-child { border-bottom: none; }
.fm-result-item:hover { background: #262c30; }
.fm-result-img-wrap {
  width: 44px;
  height: 64px;
  flex-shrink: 0;
  border-radius: 6px;
  overflow: hidden;
  background: #262c30;
}
.fm-result-img-wrap img {
  width: 44px;
  height: 64px;
  object-fit: cover;
  display: block;
}
.fm-result-info { flex: 1; min-width: 0; }
.fm-result-title {
  color: #ffffff;
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fm-result-price {
  color: #a0a8b0;
  font-size: 13px;
  font-weight: 600;
  margin-top: 0px;
  text-align: right;
}
.fm-search-status {
  padding: 16px;
  color: #5a6370;
  font-size: 13px;
  text-align: center;
}
/* Platform badges container */
.fm-result-platforms {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 8px;
}

/* Base badge */
.fm-platform-badge {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 9px 4px 7px;
border-radius: 5px;
font-size: 12px;
font-weight: 500;
line-height: 1;
letter-spacing: 0.01em;
user-select: none;
}

.fm-platform-badge svg {
flex-shrink: 0;
display: block;
}

/* Steam */
.fm-badge-steam {
background-color: #1b2838;
color: #c7d5e0;
border: 1px solid #2a475e;
}

/* Ubisoft */
.fm-badge-ubisoft {
background-color: #1b2838;
color: #c7d5e0;
border: 1px solid #2a475e;
}

.fm-badge-ubisoft svg path {
fill: #ffffff;
}

/* Rockstar */
.fm-badge-rockstar {
background-color: #1b2838;
color: #c7d5e0;
border: 1px solid #2a475e;
}

.fm-badge-rockstar svg path {
fill: #ffffff;
}

/* Microsoft */
.fm-badge-microsoft {
background-color: #1b2838;
color: #c7d5e0;
border: 1px solid #2a475e;
}

/* Actions */
.fm-nav-actions {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-shrink: 0;
  margin-left: auto;
}

.fm-cart-btn {
  background: #1e2429;
  border: 1px solid #2e3438;
  border-radius: 8px;
  color: #c8cdd2;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
  -webkit-appearance: none;
  appearance: none;
}
.fm-cart-btn:hover { border-color: #ffdd44; color: #ffffff; }
.fm-cart-btn svg { width: 20px; height: 20px; }
.fm-cart-count {
  position: absolute;
  top: -6px;
  right: -6px;
  background: #ffdd44;
  color: #0d1014;
  font-size: 10px;
  font-weight: 800;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fm-cart-count[hidden] { display: none; }

.fm-login-btn {
  background: #ffdd44;
  color: #0d1014;
  border: none;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  transition: background 0.15s;
}
.fm-login-btn:hover { background: #ffe566; color: #000000; }
.fm-login-btn svg { width: 16px; height: 16px; flex-shrink: 0; }

/* ── BOTTOM ROW ── */
.fm-nav-bottom { background: #111518; border-top: 1px solid #1e2429; width: 100%; letter-spacing: 1px; text-align: center; align-items: center; }
.fm-nav-bottom-inner {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

@media (min-width: 1300px) {
  .fm-nav-bottom-inner {
    margin-left: 60px;
  }
}

@media (max-width: 1300px) {
  .fm-nav-bottom-inner {
    margin-left: 30px;
  }
}

@media (max-width: 900px) {
  .fm-nav-bottom-inner {
    margin-left: 15px;
  }
}

/* Produkty dropdown */
.fm-dropdown-wrap {
  position: relative;
  flex-shrink: 0;
}

.fm-products-btn {
  font-family: 'SG';
  font-display: swap;
  background: #acb4bd;
  color: #0d1014;
  border: none;
  border-radius: 6px;
  padding: 7px 10px;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  transition: background 0.15s;
  -webkit-appearance: none;
  appearance: none;
}
.fm-products-btn:hover:not(.active) { background: #ffe566; }
#fm-products-btn.active { background-color: #ffdd44; }
.fm-products-btn svg { width: 18px; height: 18px; }

.fm-products-btn:focus {
  background: #acb4bd;
  color: #0d1014;
  outline: none;
  box-shadow: none;
}

.fm-products-btn:focus:hover:not(.active) {
  background: #ffe566;
}

#fm-products-btn.active,
.fm-products-btn.active,
.fm-products-btn.active:focus {
  background-color: #ffdd44;
}

.fm-dropdown {
  display: flex;
  position: fixed;
  background: #1e2429;
  border: 1px solid #2e3438;
  border-radius: 10px;
  min-width: 560px;
  z-index: 300;
  padding: 16px;
  gap: 24px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  align-items: stretch;
  
}

.fm-dropdown.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.fm-dd-col {
  flex: 1;
  position: relative;
  padding-right: 24px;
}
.fm-dd-col-gatunki {
  flex: 1;
  padding-right: 10px;
}
.fm-dd-col::after {
  content: '';
  position: absolute;
  right: 0;
  top: 25px;
  bottom: 1px;
  width: 1px;
  background: linear-gradient(
      to bottom,
      #1e2429,
      rgb(63, 71, 77) 30%,
      rgb(63, 71, 77) 70%,
      #1e2429
  );
}
.fm-dd-links {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0px 18px;
}
.fm-dd-heading {
  color: #646e7d;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  margin-bottom: 8px;
  padding: 0 8px;
}
.fm-dd-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 8px;
  border-radius: 6px;
  text-decoration: none;
  color: #c8cdd2;
  font-size: 13px;
  font-weight: 500;
  transition: background 0.1s, color 0.1s;
}
.fm-dd-link:hover { background: #262c30; color: #ffffff; }
.fm-dd-icon {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 16px;
}
.fm-dd-icon-all   { background: #292e37; }
.fm-dd-icon-steam { background: #292e37; }
.fm-dd-icon-ms    { background: #292e37; }
.fm-dd-icon-genre { background: #273636; }

.fm-dd-divider {
  width: 1px;
  align-self: stretch;
  background: rgb(157, 164, 170);
  flex-shrink: 0;
  margin: 4px 0;
}

.fm-dd-soon {
  color: #3a4048;
  font-size: 12px;
  padding: 9px 8px;
  font-style: italic;
}

/* Odbierz konto dropdown */
.fm-account-dropdown-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.fm-account-dropdown-btn {
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  appearance: none;
  -webkit-appearance: none;
  font-family: 'Archivo Black';
  font-size: 13px;
  font-weight: 300;
}

.fm-account-dropdown-btn span:first-child {
  line-height: 1;
}

.fm-account-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 12px;
  height: 12px;
  margin-top: 1px;
  color: #aeb6bf;
  transform: rotate(0deg);
  transition: transform 0.2s ease, color 0.15s ease;
}

.fm-account-chevron svg {
  width: 12px;
  height: 12px;
}

.fm-account-dropdown-btn:hover .fm-account-chevron,
.fm-account-dropdown-btn.is-active .fm-account-chevron,
.fm-account-dropdown-btn.active .fm-account-chevron {
  color: #ffffff;
}

.fm-account-dropdown-btn.active .fm-account-chevron {
  transform: rotate(180deg);
}

.fm-account-dropdown {
  position: fixed;
  background: #1e2429;
  border: 1px solid #2e3438;
  border-radius: 10px;
  padding: 10px;
  min-width: 250px;
  z-index: 300;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s ease, visibility 0.18s;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.fm-account-dropdown.open {
  opacity: 1;
  visibility: visible;
}

.fm-account-dropdown .fm-dd-link {
  padding: 10px 8px;
  border-radius: 6px;
  text-decoration: none;
  color: #ffffff;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: background 0.15s ease;
}

.fm-account-dropdown a.fm-dd-link:hover,
.fm-account-dropdown a.fm-dd-link:focus {
  background-color: #292e37 !important;
  color: #ffffff !important;
  opacity: 1 !important;
}

.fm-account-dropdown a.fm-dd-link:hover *,
.fm-account-dropdown a.fm-dd-link:focus * {
  color: #ffffff !important;
}

.fm-dd-icon-account {
  background: #292e37;
  color: #ffffff;
}

/* Nav links */
.fm-nav-links {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  padding: 0 8px;
  list-style: none;
  margin: 0;
}

/* Dopisane 'li a' zamiast samej klasy, żeby złapało menu WordPressa */
.fm-nav-links li a,
.fm-nav-link {
  font-family: 'Archivo Black';
  font-display: swap;
  position: relative;
  background: linear-gradient(45deg, #a0a8b0, rgb(183, 189, 196));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 13px;
  font-weight: 300;
  padding: 12px 8px;
  text-decoration: none;
  white-space: nowrap;
  display: inline-block;
  transition: color 0.15s;
}

.fm-nav-links li a::after,
.fm-nav-link::after {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 5px;
  height: 1px;
  background-color: #ffdd44;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.25s ease;
}

.fm-nav-links li a:hover::after,
.fm-nav-link:hover::after {
  transform: scaleX(1);
}

.fm-nav-links li a:hover,
.fm-nav-links li.current-menu-item a,
.fm-nav-links li.current_page_item a,
.fm-nav-link:hover,
.fm-nav-link.is-active {
  background: linear-gradient(to right, #ffffff, #e0e6eb);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Mobile */
@media (max-width: 900px) {
  .fm-dropdown { min-width: 320px; flex-direction: column; }
  .fm-dd-divider { width: auto; height: 1px; margin: 4px 0; }
}
@media (max-width: 908px) {
  .fm-nav-row { padding: 0 16px; }
  .fm-nav-bottom-inner { overflow-x: auto; scrollbar-width: none; }
  .fm-nav-bottom-inner::-webkit-scrollbar { display: none; }
  .fm-nav-links { justify-content: flex-start; }
  .fm-login-text { display: none; }
  .fm-login-btn { padding: 10px 12px; }
  .fm-nav-bottom {
    display: none;
  }
  body {
    padding-top: 79px !important;
  }
}

@media (max-width: 768px) {
  .fm-logo img {
    height: 55px;
  }
  .fm-search-input {
    font-size: 16px;
  }
}

.fm-search-mobile {
  
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  background: #1e2429;
  border: 1px solid #2e3438;
  border-radius: 8px;
  color: #c8cdd2;
}

  /* OVERLAY */
.fm-sidebar-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  z-index: 9999;
}
.fm-sidebar-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

/* SIDEBAR */
.fm-sidebar {
  position: absolute;
  top: 0;
  left: 0;
  width: 260px;
  height: 100%;
  background: #0d1014;
  transform: translateX(-100%);
  transition: transform 0.3s ease;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  scrollbar-width: none;
  overscroll-behavior: contain;
  flex: 1;
}
.fm-sidebar-inner {
  display: flex;
  flex-direction: column;
  padding: 12px 10px;
  gap: 2px;
  flex: 1;
}

/* SCROLLBAR-SIDEBAR */
.fm-sidebar-overlay.open .fm-sidebar {
  transform: translateX(0);
}
.fm-sidebar::-webkit-scrollbar {
  display: none;
}


/* HEADER */
.fm-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 10px 20px;
  border-bottom: 1px solid #1e2428;
  flex-shrink: 0;
}
.fm-sidebar-user {
  display: flex;
  align-items: center;
  gap: 10px;
}
.fm-sidebar-user-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #1e2428;
  border: 1.5px solid #2e3438;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.fm-sidebar-user-label--guest {
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.fm-sidebar-user-label--guest:hover {
  color: #f0c020;
}
.fm-sidebar-user-label--logged {
  color: #5a6470;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* X */
.fm-sidebar-close {
  background: none;
  border: none;
  color: #65707d;
  font-size: 18px;
  cursor: pointer;
  padding: 4px;
  line-height: 1;
}
.fm-sidebar-close:hover {
  color: #ffffff;
}

/* LINKS */
.fm-sidebar-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  color: #b0b8c2;
  text-decoration: none;
  font-size: 14px;
  transition: background 0.15s, color 0.15s;
}
.fm-sidebar-link:hover {
  background-color: #161b1f;
  color: #ffffff;
}
.fm-sidebar-link svg {
  flex-shrink: 0;
  opacity: 0.7;
}
.fm-sidebar-link:hover svg {
  opacity: 1;
}

/* BOTTOM / LOGOUT */
.fm-sidebar-bottom {
  padding: 10px 10px 18px;
  border-top: 1px solid #1e2428;
  flex-shrink: 0;
}
.fm-sidebar-logout {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  color: #b0b8c2;
  text-decoration: none;
  font-size: 14px;
  transition: background 0.15s;
}
.fm-sidebar-logout:hover {
  background: #1e1214;
}

/* DROPDOWN TRIGGER */
.fm-sidebar-dropdown-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  background: none;
  border: none;
  color: #b0b8c2;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.fm-sidebar-dropdown-trigger:hover {
  background: #161b1f;
  color: #ffffff;
}
.fm-sidebar-dropdown-trigger-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.fm-sidebar-dropdown-trigger svg:first-child {
  opacity: 0.7;
}
.fm-sidebar-dropdown-trigger:hover svg:first-child {
  opacity: 1;
}

/* CHEVRON animacja */
.fm-sidebar-chevron {
  transition: transform 0.25s ease;
  flex-shrink: 0;
}
.fm-sidebar-dropdown.open .fm-sidebar-chevron {
  transform: rotate(180deg);
}

/* DROPDOWN PANEL */
.fm-sidebar-dropdown-panel {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.3s ease;
}
.fm-sidebar-dropdown.open .fm-sidebar-dropdown-panel {
  max-height: 500px;
}

/* SEKCJE */
.fm-sidebar-dropdown-section {
  padding: 6px 0 4px;
}
.fm-sidebar-dropdown-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #646e7d;
  padding: 4px 12px 6px;
  margin: 0;
}
.fm-sidebar-dropdown-divider {
  height: 1px;
  background: #646e7d;
  margin: 4px 12px;
}

/* ITEMY */
.fm-sidebar-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px 8px 16px;
  color: #8a9299;
  text-decoration: none;
  font-size: 13px;
  border-radius: 6px;
  transition: background 0.15s, color 0.15s;
}
.fm-sidebar-dropdown-item:hover {
  background: #161b1f;
  color: #ffffff;
}
.fm-sidebar-dropdown-item--no-icon {
  padding-left: 16px;
}
.fm-sidebar-dropdown-icon {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: #1e2428;
  border-radius: 5px;
  padding: 3px;
}
.fm-sidebar-dropdown-icon svg {
  width: 16px;
  height: 16px;
}

/* BUTTON */
.fm-menu-btn {
  display: none;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  background: #1e2429;
  border: 1px solid #2e3438;
  border-radius: 8px;
  color: #c8cdd2;
  cursor: pointer;
  padding: 0;
  -webkit-appearance: none;
  appearance: none;
}

.fm-menu-btn:hover {
  border-color: #ffdd44;
  color: #ffdd44;
}

.fm-menu-icon {
  width: 22px;
  height: 22px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

@media (max-width: 908px) {
  .fm-menu-btn {
    display: flex;
  }
}

/* SEARCH BUTTON */
/* Mobile search toggle */
.fm-search-btn {
  display: none;
  background: none;
  border: none;
  color: #a0a8b0;
  cursor: pointer;
  padding: 6px;
  border-radius: 8px;
  transition: color 0.2s;
}
.fm-search-btn:hover { color: #ffffff; }
.fm-search-btn svg { width: 22px; height: 22px; display: block; }

.fm-search-overlay {
  display: none;
}

@media (max-width: 768px) {
  .fm-search-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 9998;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
  }

  .fm-search-overlay.is-active {
    display: block;
    opacity: 1;
    pointer-events: auto;
  }

  .fm-search-wrap {
    z-index: 9999;
  }
}

@media (max-width: 768px) {
  .fm-search-btn {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .fm-search-wrap {
    position: fixed;
    top: 10px;
    left: 0;
    right: 0;
    width: 100%;
    height: 60px;
    margin: 0;
    background: #141a1f;
    z-index: 9999;
    display: flex;
    align-items: center;
    padding: 0;
    transform: translateY(-100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.3s ease;
    opacity: 0;
    pointer-events: none;
  }
  .fm-search-icon {
    margin-left: 10px;
  }

  .fm-search-wrap.fm-search-active {
    transform: translateY(0);
    opacity: 1;
    pointer-events: all;
  }

  .fm-search-form {
    width: 100%;
    padding: 0 10px;
  }

  .fm-search-results.open {
    display: block;
    top: 60px;
    left: 0;
    right: 0;
    border-radius: 0;
    z-index: 9998;
    max-height: 360px;
  }

  
}

input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  height: 16px;
  width: 16px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ff0000' d='M18 6L6 18M6 6l12 12' stroke='%23ffdd44' stroke-width='3'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
}




/* Footer */
/* ==========================================================================
   Premium Footer Styles (Astra-Friendly)
   Kolory: Tło #161B1F | Akcent #FFDD44 | Surface #212830
   ========================================================================== */

/* 1. BEZPIECZNY STICKY FOOTER DLA ASTRY (BEZ html, body) */
body {
    display: flex !important;
    flex-direction: column !important;
    min-height: 100vh !important;
    margin: 0 !important;
}

/* Wymuszenie, aby główny kontener Astry rósł i wypychał resztę */
#page, .site {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
}

/* Treść główna zajmuje całą wolną przestrzeń */
#content, .site-content {
    flex-grow: 1 !important;
    width: 100% !important;
}

/* 2. GŁÓWNY KONTENER STOPKI */
.site-footer-premium {
    background-color: #111417;
    color: #94A3B8;
    font-family: inherit;
    border-top: 1px solid rgba(255, 255, 255, 0.03);
    width: 100%;
    padding: 70px 0 30px;
    position: relative;
    overflow: hidden;
    margin-top: auto !important;
}

.site-footer-premium .footer-container {
    max-width: 1450px;
    margin: 0 auto;
    padding: 0 40px;
    box-sizing: border-box;
    position: relative;
    z-index: 2;
}

/* 3. GÓRNY UKŁAD */
.site-footer-premium .footer-top-grid {
    display: flex;
    justify-content: flex-start; /* Zmienione z space-between - nie rozpycha na boki */
    align-items: flex-start;
    margin-bottom: 70px;
    flex-wrap: wrap;
    gap: 290px; /* To jest dystans między formularzem a linkami. Zwiększ lub zmniejsz, aby przesunąć linki! */
}

/* 4. SEKCJA NEWSLETTERA */
.site-footer-premium .footer-newsletter-section {
    max-width: 480px;
    width: 100%;
}

.site-footer-premium .newsletter-title {
    color: #F8FAFC;
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 12px;
    margin-top: 0;
    letter-spacing: -0.02em;
}

.site-footer-premium .newsletter-desc {
    font-size: 0.9rem;
    color: #94A3B8;
    margin-bottom: 25px;
    line-height: 1.6;
}

.site-footer-premium .newsletter-desc strong {
    color: #FFDD44;
}

/* --- TARCZA PRZED STYLAMI ASTRY --- */
.site-footer-premium form.newsletter-pill-form {
    display: flex;
    align-items: center;
    background-color: #1C2228 !important; /* Nowoczesne, chłodne szare tło */
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 50px !important;
    padding: 6px !important;
    margin-bottom: 25px !important;
    transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
}

.site-footer-premium form.newsletter-pill-form:focus-within {
    border-color: rgba(255, 221, 68, 0.5) !important;
    box-shadow: 0 0 15px rgba(255, 221, 68, 0.1) !important;
}

#page .site-footer-premium form.newsletter-pill-form input.pill-input[type="email"] {
    flex: 1 !important;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    color: #F8FAFC !important;
    padding: 12px 20px !important;
    font-size: 0.9rem !important;
    height: auto !important;
    margin: 0 !important;
}

#page .site-footer-premium form.newsletter-pill-form input.pill-input::placeholder {
    color: #64748B !important;
}

#page .site-footer-premium form.newsletter-pill-form button.pill-btn {
    background-color: #FFDD44 !important;
    color: #0F172A !important;
    border: none !important;
    border-radius: 50px !important;
    padding: 12px 28px !important;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    margin: 0 !important;
    box-shadow: none !important;
}

#page .site-footer-premium form.newsletter-pill-form button.pill-btn:hover {
    background-color: #FFE566 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(255, 221, 68, 0.2) !important;
}

/* 5. IKONY SOCIAL MEDIA - Ulepszony Glow Effect */
.site-footer-premium .footer-social-circles {
    display: flex;
    gap: 12px;
}

.site-footer-premium .social-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: #1C2228;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    color: #94A3B8;
    text-decoration: none;
    transition: all 0.3s ease;
}

.site-footer-premium .social-circle svg {
    width: 16px;
    height: 16px;
}

.site-footer-premium .social-circle:hover {
    border-color: #FFDD44;
    color: #FFDD44;
    background-color: rgba(255, 221, 68, 0.05);
    transform: translateY(-3px);
    box-shadow: 0 4px 15px rgba(255, 221, 68, 0.15);
}

/* 6. LINKI W MENU */
.site-footer-premium .footer-links-section {
    display: flex;
    gap: 250px; /* Odstęp między samymi kolumnami linków (Menu 1 a Menu 2) */
    padding-top: 5px;
}

.site-footer-premium .menu-hidden-title {
    display: none;
}

.site-footer-premium .premium-menu-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.site-footer-premium .premium-menu-list li {
    margin-bottom: 22px; /* ZWIĘKSZONY odstęp w pionie między poszczególnymi linkami */
}

.site-footer-premium .premium-menu-list a {
    color: #94A3B8;
    text-decoration: none;
    font-family: 'Montserrat', sans-serif; /* Dodajemy font tutaj */
    font-size: 14px; /* Tu ustalamy docelowy rozmiar linków */
    transition: all 0.2s ease;
    display: inline-block;
    position: relative;
}

.site-footer-premium .premium-menu-list a:hover {
    color: #F8FAFC;
    transform: translateX(4px);
}

.site-footer-premium .premium-menu-list a:hover::before {
    content: "›";
    position: absolute;
    left: -12px;
    color: #FFDD44;
}

/* 7. DOLNY PASEK - Wyśrodkowanie, kropki i kolorowe płatności */
.site-footer-premium .footer-bottom-bar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 25px;
    font-size: 0.8rem;
    color: #64748B;
}

/* Sekcja linków prawnych */
.site-footer-premium .footer-legal {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.site-footer-premium .footer-legal a {
    color: #64748B;
    text-decoration: none;
    transition: color 0.2s;
    display: flex;
    align-items: center;
}

/* Dodanie estetycznych kropek jako separatorów */
.site-footer-premium .footer-legal a:not(:last-child)::after {
    content: "•";
    color: rgba(255, 255, 255, 0.15); /* Półprzezroczysta kropka */
    margin: 0 16px; /* Odstęp wokół kropki */
    font-size: 1.1rem;
    pointer-events: none; /* Zapobiega przypadkowemu najechaniu na kropkę */
}

.site-footer-premium .footer-legal a:hover {
    color: #FFDD44;
}

/* Prawa autorskie */
.site-footer-premium .footer-copyright {
    text-align: center;
}

.site-footer-premium .footer-copyright strong {
    color: #F8FAFC;
    font-weight: 600;
}

/* Obrazek płatności */
.site-footer-premium .footer-payments {
    text-align: right;
}

.site-footer-premium .footer-payments img {
    height: 32px; /* POWIĘKSZONE z 24px do 32px */
    width: auto;
    /* Usunięto filtry (szarość/przezroczystość) - ikonki są teraz normalne! */
    transition: transform 0.2s ease;
}

/* Subtelny efekt powiększenia po najechaniu, skoro usunęliśmy zmianę koloru */
.site-footer-premium .footer-payments img:hover {
    transform: scale(1.05);
}

/* 8. RESPONSYWNOŚĆ */
@media (max-width: 1263px) {
    .site-footer-premium .footer-top-grid {
        flex-direction: column;
        align-items: center; 
        gap: 60px;
    }
    
    .site-footer-premium .footer-newsletter-section {
        max-width: 100%;
        text-align: center;
    }
    
    .site-footer-premium form.newsletter-pill-form {
        max-width: 480px;
        margin: 0 auto 25px auto !important;
    }
    
    .site-footer-premium .footer-social-circles {
        justify-content: center;
    }
    
    /* Wymuszamy układ obok siebie dla kolumn menu */
    .site-footer-premium .footer-links-section {
        width: 100%;
        display: flex;
        flex-direction: row; /* Zapewnia, że kolumny są obok siebie */
        justify-content: center;
        gap: 80px; /* Zmniejszony odstęp dla tabletów */
        padding-right: 0;
    }
    
    /* Skoro są obok siebie, tekst lepiej wygląda wyrównany do lewej */
    .site-footer-premium .footer-nav-column {
        text-align: left;
    }
    
    .site-footer-premium .premium-menu-list a:hover {
        transform: none;
    }
    
    .site-footer-premium .premium-menu-list a:hover::before {
        display: none;
    }
    
    .site-footer-premium .footer-bottom-bar {
        display: flex;
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }
    
    .site-footer-premium .footer-legal {
        justify-content: center;
        flex-wrap: wrap;
    }
    
    .site-footer-premium .footer-payments {
        text-align: center;
    }
}

/* Optymalizacja dla wąskich ekranów smartfonów */
@media (max-width: 600px) {
    .site-footer-premium .footer-links-section {
        gap: 60px; /* Zmniejszamy odstęp między kolumnami, by bezpiecznie zmieściły się na telefonie */
    }
    
    .site-footer-premium .footer-legal a:not(:last-child)::after {
        margin: 0 10px; /* Zmniejsza przerwy wokół kropek */
    }
}



/* ==========================================================================
   POPRAWKI KOSZYKA WOOCOMMERCE & ASTRA
   ========================================================================== */

/* 1. Całkowite ukrycie automatycznego napisu "Zobacz koszyk" */
a.added_to_cart.wc-forward {
    display: none !important;
}

/* 2. Usunięcie żółtego kwadratu (fokusu) z przycisku po kliknięciu */
.custom-home-page .card-cart-btn:focus,
.custom-home-page .card-cart-btn:active,
.custom-home-page .card-cart-btn.added {
    background-color: transparent !important;
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
}

/* Opcjonalnie: ukrycie systemowego "loadera" WooCommerce obok przycisku */
.custom-home-page .card-cart-btn::after {
    display: none !important;
}

/* ==========================================================================
   PROPORCJE ZDJĘCIA (OKŁADEK GIER) W SIDE CART
   ========================================================================== */
.xoo-wsc-img-col {
    width: 65px !important; 
    flex: 0 0 65px !important; /* Blokuje zwężanie się kontenera zdjęcia */
    height: auto !important;
}

.xoo-wsc-img-col img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 682 / 896 !important; /* Idealne proporcje Twoich okładek */
    object-fit: cover !important;
    border-radius: 4px !important;
}

/* ==========================================================================
   IDEALNE WYMUSZENIE CZCIONKI DLA SIDE CART (BEZ DOTYKANIA IKON)
   ========================================================================== */

/* 1. Nadajemy Montserrat na całe okno koszyka */
.xoo-wsc-container {
    font-family: 'Montserrat', sans-serif !important;
}

/* 2. Nadajemy Montserrat na wszystkie standardowe elementy tekstowe */
.xoo-wsc-container *:not([class*="icon"]):not([class*="bki"]) {
    font-family: 'Montserrat', sans-serif !important;
}

/* ==========================================================================
   TRUST BAR DLA SIDE CART (IKONY WSTRZYKNIĘTE PRZEZ CSS)
   ========================================================================== */
.sc-trust-bar {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 5px;
    padding: 10px 0;
    margin-top: 10px;
    width: 100%;
}

.sc-trust-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex: 1;
    gap: 8px;
}

/* Główne ustawienia ikonek jako tło */
.sc-trust-icon {
    width: 24px !important;
    height: 24px !important;
    display: block !important; 
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

/* 1. Ikonka Błyskawicy (Ekspresowa dostawa) */
.sc-icon-lightning {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13 2L3 14h9l-1 8 10-12h-9l1-8z' fill='none' stroke='%23ffdd44' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}

/* 2. Ikonka Tarczy (Bezpieczne płatności) */
.sc-icon-shield {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z' fill='none' stroke='%23ffdd44' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}

/* 3. Ikonka Koła (Szybki support) */
.sc-icon-support {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z' fill='none' stroke='%23ffdd44' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}

.sc-trust-title {
    font-weight: 600;
    font-size: 11px;
    color: #e4e6eb;
    line-height: 1.2;
}

.sc-trust-divider {
    width: 1px;
    height: 35px;
    background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.15), transparent);
    flex-shrink: 0;
}