/* ============================================
   FOXIT.SI — Marketplace Redesign v7
   Works with custom header.tpl
   ============================================ */

:root {
  --red: #e63012;
  --dark: #1a1a2e;
  --nav: #232f3e;
  --border: #e0e0e0;
  --muted: #666;
  --radius: 8px;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  background: #f3f3f3 !important;
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif !important;
}

a { text-decoration: none !important; }

/* ═══════════════════════════════════════
   HEADER WRAPPER
═══════════════════════════════════════ */
#header {
  background: var(--dark) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  width: 100% !important;
}

/* ═══════════════════════════════════════
   ROW 1 — TOPBAR
═══════════════════════════════════════ */
.foxit-topbar {
  background: var(--dark);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  padding: 5px 0;
}
.foxit-topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.foxit-topbar-left #contact-link {
  color: #bbb !important;
  font-size: 12px !important;
}
.foxit-topbar-left #contact-link a {
  color: #fff !important;
  font-weight: 500 !important;
}
.foxit-topbar-right {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
}

/* Account */
.user-info {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}
.user-info a {
  color: #ccc !important;
  font-size: 12px !important;
  white-space: nowrap !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}
.user-info a:hover { color: #fff !important; }
.user-info .material-icons {
  font-size: 16px !important;
  color: #ccc !important;
}

/* Cart */
.blockcart .header a {
  color: #fff !important;
  font-size: 13px !important;
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  white-space: nowrap !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}
.blockcart .header a:hover { color: #ffccbb !important; }
.blockcart .material-icons.shopping-cart {
  font-size: 22px !important;
  color: #fff !important;
}
.cart-products-count {
  background: var(--red) !important;
  color: #fff !important;
  border-radius: 10px !important;
  padding: 1px 7px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  border: none !important;
}
.blockcart {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* ═══════════════════════════════════════
   ROW 2 — LOGO + SEARCH
═══════════════════════════════════════ */
.foxit-header-middle {
  background: var(--dark);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  padding: 10px 0;
}
.foxit-header-middle-inner {
  display: flex;
  align-items: center;
  gap: 20px;
}

/* ── LOGO: red oval behind the JPG logo ── */
.foxit-logo,
#_desktop_logo {
  flex: 0 0 auto;
}
.foxit-logo h1,
#_desktop_logo h1 {
  margin: 0 !important;
  padding: 0 !important;
}
.foxit-logo a,
#_desktop_logo a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--red) !important;
  border-radius: 50px !important;
  padding: 5px 14px !important;
  box-shadow: 0 2px 10px rgba(230,48,18,0.5) !important;
  text-decoration: none !important;
}
.foxit-logo img,
#_desktop_logo img {
  max-height: 46px !important;
  width: auto !important;
  display: block !important;
  /* no filter — show the JPG as-is on the red oval */
  mix-blend-mode: normal !important;
  filter: none !important;
  background: transparent !important;
}

/* ── SEARCH — X button no longer overlaps ── */
.foxit-search {
  flex: 1 1 auto;
  min-width: 0;
}
#search_widget {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}
#search_widget form {
  display: flex !important;
  align-items: stretch !important;
  background: #fff !important;
  border-radius: var(--radius) !important;
  overflow: visible !important;
  height: 44px !important;
  width: 100% !important;
  border: none !important;
  box-shadow: none !important;
  position: relative !important;
}
#search_widget input[type="text"] {
  flex: 1 !important;
  border: none !important;
  padding: 0 50px 0 16px !important;
  font-size: 14px !important;
  background: #fff !important;
  color: #111 !important;
  outline: none !important;
  height: 100% !important;
  min-width: 0 !important;
  border-radius: var(--radius) 0 0 var(--radius) !important;
}
#search_widget input[type="text"]::placeholder { color: #aaa !important; }
#search_widget button[type="submit"],
#search_widget .material-icons.search {
  background: var(--red) !important;
  color: #fff !important;
  font-size: 22px !important;
  padding: 0 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  height: 100% !important;
  border: none !important;
  border-radius: 0 var(--radius) var(--radius) 0 !important;
}
/* X clear button — sits inside, right of text, left of red button */
#search_widget .material-icons.clear {
  position: absolute !important;
  right: 60px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: #999 !important;
  font-size: 18px !important;
  cursor: pointer !important;
  z-index: 5 !important;
  background: transparent !important;
  padding: 0 4px !important;
  line-height: 1 !important;
}

/* ═══════════════════════════════════════
   ROW 3 — NAVIGATION (bigger, centered)
═══════════════════════════════════════ */
.foxit-nav {
  background: var(--nav);
  border-top: 1px solid rgba(255,255,255,0.06);
}
.foxit-nav #search_widget { display: none !important; }

/* Center the nav menu */
.foxit-nav .container,
.foxit-nav > div {
  display: flex !important;
  justify-content: center !important;
}

ul#top-menu {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  scrollbar-width: none !important;
  justify-content: center !important;
  width: 100% !important;
}
ul#top-menu::-webkit-scrollbar { display: none !important; }
ul#top-menu > li { flex-shrink: 0 !important; }

ul#top-menu > li > a.dropdown-item {
  color: #ddd !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  padding: 13px 20px !important;
  border-radius: 0 !important;
  border-bottom: 3px solid transparent !important;
  white-space: nowrap !important;
  display: block !important;
  transition: all 0.15s !important;
  background: transparent !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}
ul#top-menu > li > a.dropdown-item:hover {
  color: #fff !important;
  border-bottom: 3px solid var(--red) !important;
  background: rgba(255,255,255,0.06) !important;
}

/* ═══════════════════════════════════════
   SECTION TITLES
═══════════════════════════════════════ */
.products-section-title,
h2.h3,
.featured-products h2 {
  font-size: 20px !important;
  font-weight: 600 !important;
  color: #111 !important;
  padding-bottom: 8px !important;
  border-bottom: 3px solid var(--red) !important;
  display: inline-block !important;
  margin-bottom: 16px !important;
}

/* ═══════════════════════════════════════
   PRODUCT CARDS
═══════════════════════════════════════ */
.product-miniature {
  background: #fff !important;
  border: 0.5px solid var(--border) !important;
  border-radius: var(--radius) !important;
  overflow: hidden !important;
  transition: box-shadow 0.2s, transform 0.15s !important;
  position: relative !important;
}
.product-miniature:hover {
  box-shadow: 0 4px 18px rgba(0,0,0,0.12) !important;
  transform: translateY(-2px) !important;
}
.product-miniature .card-img-top {
  background: #f5f5f5 !important;
  padding: 12px !important;
  border-bottom: 0.5px solid var(--border) !important;
}
.product-miniature .card-body { padding: 12px !important; }
.product-miniature .product-title a {
  font-size: 13px !important;
  color: #111 !important;
  line-height: 1.5 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}
.product-miniature .product-title a:hover { color: var(--red) !important; }
.product-miniature .price { font-size: 18px !important; font-weight: 700 !important; color: var(--red) !important; }
.product-miniature .regular-price { font-size: 12px !important; color: #999 !important; text-decoration: line-through !important; }
.product-flag {
  background: var(--red) !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  border-radius: 5px !important;
  padding: 3px 8px !important;
}
.product-flag.new { background: #0066cc !important; }
.add-to-cart,
.product-miniature .add-to-cart {
  background: var(--red) !important;
  border-color: var(--red) !important;
  border-radius: 6px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 9px 16px !important;
  color: #fff !important;
  width: 100% !important;
  transition: background 0.2s !important;
}
.add-to-cart:hover { background: #c5280f !important; border-color: #c5280f !important; }

/* ═══════════════════════════════════════
   PRODUCT PAGE
═══════════════════════════════════════ */
.product-prices .current-price .price {
  color: var(--red) !important;
  font-size: 26px !important;
  font-weight: 700 !important;
}
.product-add-to-cart .add-to-cart {
  height: 50px !important;
  font-size: 15px !important;
  border-radius: 8px !important;
}

/* ═══════════════════════════════════════
   BUTTONS
═══════════════════════════════════════ */
.btn-primary {
  background: var(--red) !important;
  border-color: var(--red) !important;
  border-radius: 6px !important;
  color: #fff !important;
  transition: background 0.2s !important;
}
.btn-primary:hover { background: #c5280f !important; border-color: #c5280f !important; }

/* ═══════════════════════════════════════
   TRUST BAR
═══════════════════════════════════════ */
#block-reassurance {
  background: #fff !important;
  border: 0.5px solid var(--border) !important;
  border-radius: var(--radius) !important;
  padding: 14px 20px !important;
  margin: 14px 0 !important;
}
#block-reassurance ul {
  display: flex !important;
  justify-content: space-around !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}
#block-reassurance ul li {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}
#block-reassurance ul li img {
  width: 30px !important;
  height: 30px !important;
  filter: hue-rotate(330deg) saturate(4) brightness(0.75) !important;
}
#block-reassurance ul li span { font-size: 13px !important; color: #111 !important; font-weight: 500 !important; }

/* ═══════════════════════════════════════
   BREADCRUMB
═══════════════════════════════════════ */
.breadcrumb { background: transparent !important; padding: 8px 0 !important; font-size: 12px !important; }
.breadcrumb a { color: var(--muted) !important; }
.breadcrumb a:hover { color: var(--red) !important; }

/* ═══════════════════════════════════════
   PAGINATION
═══════════════════════════════════════ */
.page-item.active .page-link { background: var(--red) !important; border-color: var(--red) !important; }
.page-link { color: #111 !important; border-radius: 4px !important; }
.page-link:hover { color: var(--red) !important; }

/* ═══════════════════════════════════════
   FOOTER
═══════════════════════════════════════ */
#footer { background: var(--dark) !important; margin-top: 16px !important; }
#footer .footer-container { padding: 28px 0 0 !important; }

/* ── ALL footer column headings: red + uppercase
   Targets .h3 / h3 / p.h3 / .myaccount-title
   Does NOT use .title (too broad — causes doubling) ── */
#footer .h3,
#footer p.h3,
#footer h3,
#footer .myaccount-title,
#footer .myaccount-title a,
#footer .block-contact-title,
#footer .block-contact .h4,
#block_myaccount_infos .myaccount-title,
#block_myaccount_infos .myaccount-title a,
#block_myaccount_infos p.h3,
#block_myaccount_infos .h3,
#block_myaccount_infos h3 {
  color: var(--red) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  padding-bottom: 8px !important;
  border-bottom: 1px solid #2d2d45 !important;
  margin-bottom: 12px !important;
  display: block !important;
}

/* Footer links */
#footer ul li a,
#footer .links a,
#footer .account-list a {
  color: #aaa !important;
  font-size: 13px !important;
  line-height: 2.2 !important;
  display: block !important;
}
#footer ul li a:hover,
#footer .links a:hover,
#footer .account-list a:hover { color: #fff !important; }

/* Force collapse open on desktop */
@media (min-width: 768px) {
  #footer .collapse,
  #footer .account-list.collapse,
  #footer #contact-infos.collapse { display: block !important; }
}

/* ── FOOTER CONTACT: each item on its own line, spaced ── */
#footer #contact-infos {
  color: #aaa !important;
  font-size: 13px !important;
  line-height: 2 !important;
  display: block !important;
}
#footer #contact-infos a {
  color: #aaa !important;
  font-size: 13px !important;
}
#footer #contact-infos a:hover { color: #fff !important; }

/* Each contact line = its own block with breathing room */
#footer #contact-infos ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
#footer #contact-infos li,
#footer #contact-infos p {
  display: block !important;
  margin: 0 0 6px 0 !important;
  padding: 0 !important;
  color: #aaa !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
}
/* Remove any pseudo separators */
#footer #contact-infos li::after,
#footer #contact-infos p::after {
  content: '' !important;
}
/* Hide <br> — we use block display instead */
#footer #contact-infos br {
  display: none !important;
}

/* Footer bottom bar */
#footer .row:last-child {
  border-top: 1px solid #2d2d45 !important;
  padding: 12px 0 !important;
  margin-top: 0 !important;
}
#footer .text-sm-center a,
#footer .text-sm-center p { color: #555 !important; font-size: 12px !important; }

/* ═══════════════════════════════════════
   ALERTS
═══════════════════════════════════════ */
.alert-success { background: #d4edda !important; border-color: #c3e6cb !important; color: #155724 !important; border-radius: var(--radius) !important; }
.alert-danger { background: #f8d7da !important; border-color: #f5c6cb !important; color: #721c24 !important; border-radius: var(--radius) !important; }

/* ═══════════════════════════════════════
   BACK TO TOP
═══════════════════════════════════════ */
#scroll-top { background: var(--red) !important; border-color: var(--red) !important; border-radius: 50% !important; }

/* ═══════════════════════════════════════
   MOBILE
═══════════════════════════════════════ */
@media (max-width: 768px) {
  .foxit-topbar { display: none; }
  .foxit-header-middle-inner { flex-wrap: wrap; gap: 10px; }
  .foxit-logo { width: 60%; }
  .foxit-search { width: 100%; order: 3; flex: 1 1 100%; }
  ul#top-menu > li > a.dropdown-item {
    padding: 9px 10px !important;
    font-size: 12px !important;
    text-transform: none !important;
  }
  .product-miniature .price { font-size: 15px !important; }
  #footer .col-md-3, #footer .col-md-6 { margin-bottom: 16px !important; }
}