/* Lezaji.net homepage V10 / 2026 visual proof-of-concept
   Homepage only. Existing PHP/business logic and database structure are untouched. */

:root {
  --lz-bg: #05090d;
  --lz-bg-2: #09131d;
  --lz-panel: #0b1721;
  --lz-panel-2: #14273a;
  --lz-line: #263b4e;
  --lz-line-soft: rgba(128, 164, 192, .20);
  --lz-text: #edf4f8;
  --lz-muted: #a9bac6;
  --lz-petrol: #159bb1;
  --lz-petrol-light: #5fc8d7;
  --lz-green: #91b837;
  --lz-green-light: #d5e07e;
  --lz-green-soft: rgba(145, 184, 55, .16);
  --lz-orange: #f68a12;
  --lz-orange-2: #ff9c2c;
  --lz-radius: 8px;
  --lz-shadow: 0 18px 45px rgba(0, 0, 0, .22);
}

html { background: var(--lz-bg); }
body {
  margin: 0 !important;
  padding: 0 18px 34px !important;
  color: var(--lz-text) !important;
  background:
    radial-gradient(circle at 50% -20%, rgba(24, 70, 99, .38), transparent 46%),
    linear-gradient(180deg, #03070a 0, #07111a 520px, #0d1b28 100%) !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 14px !important;
  line-height: 1.45;
}

body * { box-sizing: border-box; }
body a { color: #84d7e2 !important; font-family: Arial, Helvetica, sans-serif !important; }
body a:hover { color: var(--lz-orange-2) !important; }

#wrapper.home-2026 {
  position: relative !important;
  float: none !important;
  width: 100% !important;
  max-width: 1120px !important;
  height: auto !important;
  margin: 0 auto !important;
  padding: 0 !important;
  overflow: visible !important;
}

/* language strip */
#jezici {
  width: 100% !important;
  height: 30px !important;
  margin: 0 !important;
  padding: 8px 2px 0 !important;
  text-align: left !important;
  position: relative !important;
  overflow: visible !important;
}
#jezik {
  font: 700 12px Arial, Helvetica, sans-serif !important;
  color: var(--lz-orange) !important;
}
#jezik a {
  font: 400 12px Arial, Helvetica, sans-serif !important;
  color: #d8e2e8 !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
}
#jezik a:hover { color: var(--lz-orange-2) !important; }
#jezik + #jezik:before { content: " | "; color: #667b8a; margin-right: 4px; }

/* modernized header while keeping old branding */
#zaglavlje {
  position: relative !important;
  display: block !important;
  float: none !important;
  width: 100% !important;
  height: 82px !important;
  margin: 0 !important;
  border: 1px solid rgba(89, 125, 151, .22) !important;
  border-radius: var(--lz-radius) var(--lz-radius) 0 0 !important;
  background: linear-gradient(180deg, #0a1620 0%, #050b10 100%) !important;
  overflow: hidden !important;
}
#zaglavlje:before {
  content: "lezaji.com";
  position: absolute;
  left: 24px;
  top: 17px;
  color: #f2f5f7;
  font: 300 36px/1 Arial, Helvetica, sans-serif;
  letter-spacing: -1.8px;
}
#zaglavlje:after {
  content: "lezaji.";
  position: absolute;
  left: 24px;
  top: 17px;
  color: var(--lz-orange);
  font: 300 36px/1 Arial, Helvetica, sans-serif;
  letter-spacing: -1.8px;
  width: 103px;
  overflow: hidden;
  white-space: nowrap;
}

/* Homepage already carries the large original Lezaji.net signature in the hero.
   Instead of repeating the logo, use one restrained industrial status detail. */
.home-2026 #zaglavlje:before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 24px !important;
  top: 21px !important;
  width: 38px !important;
  height: 38px !important;
  border: 1px solid rgba(92, 128, 149, .72) !important;
  border-radius: 50% !important;
  background:
    radial-gradient(circle at 50% 50%, #07131c 0 30%, transparent 31%),
    repeating-conic-gradient(from 0deg, #f28a13 0 5deg, #6f8795 6deg 10deg, transparent 11deg 30deg),
    radial-gradient(circle at 50% 50%, transparent 0 53%, #355567 54% 64%, #091923 65% 72%, transparent 73%) !important;
  box-shadow: 0 0 0 3px rgba(11, 31, 42, .68), inset 0 0 10px rgba(92, 139, 163, .18) !important;
  animation: lz-bearing-indicator 22s linear infinite !important;
}
.home-2026 #zaglavlje:after {
  content: "B2B INDUSTRIAL  /  EST. 2009" !important;
  display: block !important;
  position: absolute !important;
  left: 76px !important;
  top: 29px !important;
  width: auto !important;
  overflow: visible !important;
  color: #9eb2bf !important;
  font: 700 10px/1.2 Arial, Helvetica, sans-serif !important;
  letter-spacing: .13em !important;
  white-space: nowrap !important;
}
@keyframes lz-bearing-indicator {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .home-2026 #zaglavlje:before { animation: none !important; }
}

#MainMenu {
  position: absolute !important;
  top: 22px !important;
  right: 18px !important;
  left: auto !important;
  width: auto !important;
  height: 42px !important;
  margin: 0 !important;
}
#tab { height: 42px !important; margin: 0 !important; }
#tab ul {
  display: flex !important;
  float: none !important;
  gap: 2px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
#tab li { float: none !important; display: block !important; }
#tab a {
  float: none !important;
  width: auto !important;
  height: 38px !important;
  padding: 0 !important;
  border-radius: 5px !important;
  background: transparent !important;
}
#tab a span, #tab a span:hover {
  display: block !important;
  min-width: 76px !important;
  height: 38px !important;
  padding: 0 13px !important;
  line-height: 38px !important;
  font: 600 12px/38px Arial, Helvetica, sans-serif !important;
  color: #e6eef3 !important;
  background: transparent !important;
  border-radius: 5px !important;
  text-align: center !important;
}
#tab a span:hover {
  color: #fff !important;
  background: rgba(29, 91, 121, .28) !important;
}
#tab li:first-child a span {
  color: #fff !important;
  box-shadow: inset 0 -2px 0 var(--lz-orange);
}

/* Original 2009 hero stays the visual signature. */
#telo.home-hero {
  position: relative !important;
  float: none !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 955 / 448;
  margin: 14px 0 0 !important;
  border: 1px solid rgba(95, 135, 161, .20) !important;
  border-radius: var(--lz-radius) !important;
  background-image: url(../images/index-pic.jpg) !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  box-shadow: var(--lz-shadow);
  overflow: hidden;
}
#telo.home-hero:after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 80px rgba(0,0,0,.12);
}

/* Search: visually dominant, but one compact block. */
.home-search-panel {
  margin: 14px 0 0;
  padding: 20px 22px 18px;
  border: 1px solid var(--lz-line);
  border-radius: var(--lz-radius);
  background: linear-gradient(135deg, rgba(14, 34, 50, .98), rgba(7, 17, 25, .98));
  box-shadow: inset 0 2px 0 rgba(145, 184, 55, .20), 0 12px 28px rgba(0,0,0,.18);
}
.home-section-kicker {
  margin-bottom: 4px;
  color: var(--lz-green-light);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .09em;
}
.home-search-panel h1 {
  float: none !important;
  width: auto !important;
  margin: 0 0 17px !important;
  padding: 0 !important;
  color: #fff !important;
  font: 600 20px/1.25 Arial, Helvetica, sans-serif !important;
  text-align: left !important;
}
.home-search-grid {
  display: grid;
  grid-template-columns: 1.45fr .9fr .9fr auto;
  gap: 12px;
  align-items: end;
}
.home-field label {
  display: block;
  margin: 0 0 6px;
  color: #d8e3ea;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .035em;
}
.home-field input,
.home-field select {
  display: block;
  width: 100%;
  height: 42px;
  margin: 0;
  padding: 0 12px;
  border: 1px solid #385064;
  border-radius: 5px;
  outline: none;
  background: #08131d;
  color: #f5f7f8;
  font: 14px Arial, Helvetica, sans-serif;
}
.home-field input::placeholder { color: #8093a0; }
.home-field input:focus,
.home-field select:focus {
  border-color: var(--lz-petrol);
  box-shadow: 0 0 0 2px rgba(21, 155, 177, .13);
}
.home-search-action button {
  height: 42px;
  min-width: 154px;
  margin: 0;
  padding: 0 23px;
  border: 0;
  border-radius: 5px;
  cursor: pointer;
  color: #fff;
  background: linear-gradient(180deg, var(--lz-orange-2), #df6f00);
  font: 700 14px Arial, Helvetica, sans-serif;
  box-shadow: 0 8px 20px rgba(246, 138, 18, .13);
}
.home-search-action button:hover { filter: brightness(1.08); }
.home-search-options {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 13px;
  color: #c7d2d9;
  font-size: 12px;
}
.home-search-options label { cursor: pointer; }
.home-search-options input { vertical-align: -2px; accent-color: var(--lz-petrol); }
.home-search-options a { margin-left: auto; font-size: 12px !important; }

/* Three quiet secondary entry points; no dashboard/luna-park feeling. */
.home-quick-links {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 10px;
}
.home-quick-links a {
  display: block;
  min-height: 70px;
  padding: 14px 17px;
  border: 1px solid rgba(75, 110, 135, .38);
  border-radius: var(--lz-radius);
  background: rgba(12, 27, 39, .88);
  text-decoration: none !important;
  transition: border-color .18s ease, background .18s ease;
}
.home-quick-links a:hover {
  border-color: rgba(145, 184, 55, .62);
  background: rgba(19, 35, 43, .96);
}
.home-quick-links span {
  display: block;
  color: #f2f5f7;
  font-size: 14px;
  font-weight: 700;
}
.home-quick-links small {
  display: block;
  margin-top: 4px;
  color: #9db684;
  font-size: 12px;
}

.home-info-row {
  display: grid;
  grid-template-columns: 1.45fr 1fr;
  gap: 10px;
  margin-top: 10px;
}
.home-stats,
.home-account {
  min-height: 96px;
  border: 1px solid rgba(75, 110, 135, .34);
  border-radius: var(--lz-radius);
  background: rgba(7, 17, 25, .88);
}
.home-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  padding: 14px 8px;
}
.home-stats div {
  min-width: 0;
  padding: 3px 15px;
  border-right: 1px solid rgba(103, 135, 157, .22);
}
.home-stats div:last-child { border-right: 0; }
.home-stats strong {
  display: block;
  color: #fff;
  font-size: 19px;
  font-weight: 600;
}
.home-stats span {
  display: block;
  margin-top: 3px;
  color: #91a5b2;
  font-size: 11px;
}
.home-account {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 15px 16px;
}
.home-account-copy { min-width: 0; }
.home-account-copy span,
.home-account-copy strong { display: block; }
.home-account-copy span { color: #a8b8c2; font-size: 12px; }
.home-account-copy strong { margin-top: 5px; color: var(--lz-green-light); font-size: 14px; }
.home-account-actions { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.home-btn-primary,
.home-btn-secondary,
.home-btn-link {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 4px;
  text-decoration: none !important;
  font-size: 11px !important;
  font-weight: 700;
  white-space: nowrap;
}
.home-btn-primary { color: #fff !important; background: #d9750b; border: 1px solid #eb8d27; }
.home-btn-secondary { color: #e6eef2 !important; background: #122637; border: 1px solid #365064; }
.home-btn-link { color: #7fd0dd !important; background: transparent; border: 0; }

/* Re-style the existing shared footer markup only on the homepage. */
.home-2026 #footer {
  position: relative !important;
  float: none !important;
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  width: 100% !important;
  height: auto !important;
  min-height: 175px !important;
  left: 0 !important;
  top: 0 !important;
  margin: 10px 0 0 !important;
  padding: 24px 24px 54px !important;
  border: 1px solid rgba(75, 110, 135, .30) !important;
  border-radius: var(--lz-radius) !important;
  background: linear-gradient(180deg, rgba(11, 26, 38, .98), rgba(5, 12, 18, .98)) !important;
  font-family: Arial, Helvetica, sans-serif !important;
  overflow: hidden !important;
}
.home-2026 #naslov1,
.home-2026 #naslov2,
.home-2026 #naslov3 {
  position: static !important;
  float: none !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 18px !important;
  color: #fff !important;
  font: 700 12px/1.3 Arial, Helvetica, sans-serif !important;
  border-right: 1px solid rgba(107, 139, 159, .18);
}
.home-2026 #naslov3 { border-right: 0; }
.home-2026 .naslov1 { color: #8399a8 !important; font: inherit !important; }
.home-2026 #dole-linkovi-grupa1 {
  position: static !important;
  width: auto !important;
  height: auto !important;
  margin-top: 12px !important;
  font-family: Arial, Helvetica, sans-serif !important;
}
.home-2026 .zalinkoveCopy { display: none !important; }
.home-2026 .zalinkove {
  position: static !important;
  float: none !important;
  width: auto !important;
  height: auto !important;
  margin: 0 0 6px !important;
  padding: 0 !important;
  line-height: 1.35 !important;
  background: none !important;
}
.home-2026 .zalinkove a {
  color: #aab9c3 !important;
  font: 12px Arial, Helvetica, sans-serif !important;
  text-decoration: none !important;
}
.home-2026 .zalinkove a:hover { color: var(--lz-green-light) !important; }
.home-2026 #menidole { display: none !important; }
.home-2026 #copy {
  position: absolute !important;
  float: none !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 15px !important;
  top: auto !important;
  width: auto !important;
  height: auto !important;
  color: #718591 !important;
  font: 11px Arial, Helvetica, sans-serif !important;
  text-align: center !important;
}

/* Hide legacy homepage blocks because their functions have been preserved above. */
.home-2026 #foter-index { display: none !important; }


/* V2: subtle callbacks to the original 2009 palette without changing the dark character. */
.home-quick-links a:before {
  content: "";
  display: block;
  width: 28px;
  height: 2px;
  margin-bottom: 10px;
  background: linear-gradient(90deg, var(--lz-green), rgba(145,184,55,0));
}
.home-stats strong { text-shadow: 0 0 18px rgba(145, 184, 55, .06); }
.home-stats div:first-child strong { color: #f2f7e7; }
.home-btn-secondary:hover { border-color: rgba(145, 184, 55, .58); background: #172b39; }
.home-btn-link:hover { color: var(--lz-green-light) !important; }
.home-2026 #footer:before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(145,184,55,.35), transparent);
}

/* First-visit portal introduction. Intentionally quiet: one message, one button. */
body.lz-modal-open { overflow: hidden; }
.lz-intro {
  display: none;
  position: fixed;
  z-index: 99999;
  inset: 0;
  padding: 22px;
  align-items: center;
  justify-content: center;
  background: rgba(0, 6, 10, .72);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.lz-intro.is-visible { display: flex; }
.lz-intro-card {
  display: flex;
  gap: 18px;
  width: 100%;
  max-width: 540px;
  padding: 24px;
  border: 1px solid rgba(93, 126, 147, .58);
  border-top: 2px solid var(--lz-green);
  border-radius: 8px;
  background: linear-gradient(145deg, #0c1b27 0%, #071018 100%);
  box-shadow: 0 28px 80px rgba(0,0,0,.58);
}
.lz-intro-mark {
  flex: 0 0 42px;
  width: 42px; height: 42px;
  border: 1px solid rgba(145,184,55,.65);
  border-radius: 50%;
  color: var(--lz-green-light);
  font: 700 20px/40px Arial, Helvetica, sans-serif;
  text-align: center;
  background: rgba(145,184,55,.07);
}
.lz-intro-copy { min-width: 0; }
.lz-intro-kicker {
  margin: 0 0 5px;
  color: var(--lz-green-light);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .11em;
}
.lz-intro h2 {
  margin: 0 0 9px !important;
  padding: 0 !important;
  color: #fff !important;
  font: 600 20px/1.28 Arial, Helvetica, sans-serif !important;
}
.lz-intro p {
  margin: 0 !important;
  color: #b6c4cd !important;
  font: 13px/1.55 Arial, Helvetica, sans-serif !important;
}
#lz-intro-ok {
  min-width: 104px;
  height: 36px;
  margin: 17px 0 0;
  padding: 0 18px;
  border: 1px solid #ef8d24;
  border-radius: 4px;
  cursor: pointer;
  color: #fff;
  background: linear-gradient(180deg, #f7922c, #d96e06);
  font: 700 12px Arial, Helvetica, sans-serif;
}
#lz-intro-ok:hover, #lz-intro-ok:focus {
  outline: none;
  filter: brightness(1.08);
  box-shadow: 0 0 0 2px rgba(145,184,55,.16);
}
@media (max-width: 980px) {
  body { padding: 0 12px 26px !important; }
  #zaglavlje { height: 132px !important; }
  #zaglavlje:before, #zaglavlje:after { top: 18px; }
  #MainMenu {
    left: 14px !important;
    right: 14px !important;
    top: 78px !important;
    height: 44px !important;
    overflow-x: auto;
    overflow-y: hidden;
  }
  #tab ul { width: max-content !important; min-width: 100% !important; }
  #tab a span, #tab a span:hover { min-width: 92px !important; }
  .home-search-grid { grid-template-columns: 1.3fr 1fr; }
  .home-search-action button { width: 100%; }
  .home-info-row { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
  body { padding: 0 8px 20px !important; }
  #jezici { padding-left: 4px !important; }
  #tab a span, #tab a span:hover { min-width: 82px !important; padding: 0 10px !important; font-size: 11px !important; }

  #telo.home-hero {
    margin-top: 8px !important;
    min-height: 230px;
    aspect-ratio: auto;
    background-size: cover !important;
    background-position: center top !important;
  }
  .home-search-panel { margin-top: 8px; padding: 16px 14px 14px; }
  .home-search-panel h1 { font-size: 18px !important; }
  .home-search-grid { grid-template-columns: 1fr; gap: 10px; }
  .home-search-options { flex-wrap: wrap; gap: 11px 16px; }
  .home-search-options a { width: 100%; margin-left: 0; }

  .home-quick-links { grid-template-columns: 1fr; gap: 7px; margin-top: 8px; }
  .home-quick-links a { min-height: 58px; padding: 11px 14px; }

  .home-stats { grid-template-columns: 1fr; padding: 5px 14px; }
  .home-stats div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 15px;
    padding: 9px 0;
    border-right: 0;
    border-bottom: 1px solid rgba(103, 135, 157, .18);
  }
  .home-stats div:last-child { border-bottom: 0; }
  .home-stats strong { font-size: 17px; }
  .home-account { flex-direction: column; align-items: stretch; }
  .home-account-actions { justify-content: flex-start; }

  .home-2026 #footer { grid-template-columns: 1fr !important; padding: 20px 18px 50px !important; }
  .home-2026 #naslov1,
  .home-2026 #naslov2,
  .home-2026 #naslov3 {
    padding: 13px 0 !important;
    border-right: 0 !important;
    border-bottom: 1px solid rgba(107, 139, 159, .16);
  }
  .home-2026 #naslov3 { border-bottom: 0 !important; }
}

@media (max-width: 520px) {
  .lz-intro { padding: 14px; }
  .lz-intro-card { display: block; padding: 20px 18px; }
  .lz-intro-mark { width: 36px; height: 36px; margin-bottom: 13px; line-height: 34px; }
  .lz-intro h2 { font-size: 18px !important; }
  #lz-intro-ok { width: 100%; height: 40px; }
}

/* ============================================================
   V3 / August 2026
   Closer to the original Lezaji homepage: familiar icon language,
   stronger statistics and direct login, while keeping V2 layout.
   ============================================================ */

/* Reuse small original Lezaji icon assets instead of introducing a new icon set. */
.home-quick-links a {
  position: relative;
  padding-left: 54px;
}
.home-quick-links a:before {
  position: absolute;
  left: 16px;
  top: 17px;
  width: 26px;
  height: 26px;
  margin: 0;
  border: 1px solid rgba(145,184,55,.20);
  border-radius: 4px;
  background-color: rgba(5,13,20,.45);
  background-repeat: no-repeat;
  background-position: center center;
  image-rendering: auto;
}
.home-quick-links .home-link-offers:before { background-image: url(../images/6.1.gif); }
.home-quick-links .home-link-demand:before { background-image: url(../images/5.1.gif); }
.home-quick-links .home-link-sellers:before { background-image: url(../images/1.1.gif); }

/* The old homepage always gave statistics visual weight; V3 restores that hierarchy. */
.home-info-row {
  grid-template-columns: 1.35fr .95fr;
}
.home-stats,
.home-account {
  min-height: 174px;
  border-color: rgba(83, 119, 142, .42);
  box-shadow: inset 0 1px 0 rgba(145,184,55,.08);
}
.home-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto 1fr;
  align-items: stretch;
  padding: 0;
  overflow: hidden;
}
.home-stats-heading {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 17px !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(103,135,157,.20) !important;
  background: linear-gradient(90deg, rgba(24,52,71,.52), rgba(8,19,28,.18));
}
.home-stats-heading strong {
  color: var(--lz-green-light) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .045em;
  text-transform: uppercase;
  text-shadow: none !important;
}
.home-stats-heading-icon {
  display: block;
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  background-image: url(../images/statistika2.gif);
  background-repeat: no-repeat;
  background-position: left center;
  background-size: auto 22px;
  border-radius: 2px;
}
.home-stat {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 16px 15px !important;
  border-right: 1px solid rgba(103,135,157,.20) !important;
}
.home-stat:last-child { border-right: 0 !important; }
.home-stat-icon {
  display: block;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(84,126,150,.24);
  border-radius: 5px;
  background-color: rgba(17,35,49,.70);
  background-repeat: no-repeat;
  background-position: center center;
}
.home-stat-articles .home-stat-icon { background-image: url(../images/new9.gif); }
.home-stat-users .home-stat-icon { background-image: url(../images/new1.gif); }
.home-stat-searches .home-stat-icon { background-image: url(../images/new5.gif); }
.home-stat-copy {
  display: block;
  min-width: 0;
}
.home-stat-copy strong {
  display: block;
  color: #fff !important;
  font-size: 28px !important;
  line-height: 1 !important;
  font-weight: 600 !important;
  letter-spacing: -.025em;
  text-shadow: 0 0 20px rgba(145,184,55,.07) !important;
}
.home-stat-copy small {
  display: block;
  margin-top: 7px;
  color: #a5b990;
  font-size: 11px;
  line-height: 1.3;
}

/* Direct login stays on the homepage, preserving a long-standing user habit. */
.home-account {
  display: block;
  padding: 0 16px 13px;
}
.home-account-heading {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  margin: 0 -16px 12px;
  padding: 0 16px;
  border-bottom: 1px solid rgba(103,135,157,.20);
  background: linear-gradient(90deg, rgba(24,52,71,.48), rgba(8,19,28,.16));
}
.home-account-heading strong {
  color: #f2f5f7;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.home-account-heading-icon {
  width: 20px;
  height: 20px;
  background: url(../images/new1.gif) no-repeat center center;
}
.home-login-form { margin: 0; padding: 0; }
.home-login-fields {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  gap: 7px 9px;
  align-items: center;
}
.home-login-fields label {
  color: #aebdc7;
  font-size: 11px;
  font-weight: 600;
}
.home-login-fields input {
  width: 100%;
  height: 31px;
  margin: 0;
  padding: 0 9px;
  border: 1px solid #385064;
  border-radius: 4px;
  outline: none;
  color: #f4f7f8;
  background: #07131c;
  font: 12px Arial, Helvetica, sans-serif;
}
.home-login-fields input:focus {
  border-color: var(--lz-green);
  box-shadow: 0 0 0 2px rgba(145,184,55,.10);
}
.home-login-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 9px;
}
.home-remember {
  color: #9fafb9;
  font-size: 10px;
  white-space: nowrap;
}
.home-remember input { vertical-align: -2px; accent-color: var(--lz-green); }
.home-login-actions button {
  min-width: 94px;
  height: 31px;
  padding: 0 13px;
  border: 1px solid #ef8d24;
  border-radius: 4px;
  cursor: pointer;
  color: #fff;
  background: linear-gradient(180deg, #f7922c, #d96e06);
  font: 700 11px Arial, Helvetica, sans-serif;
}
.home-login-actions button:hover { filter: brightness(1.07); }
.home-login-links {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 8px;
}
.home-login-links a { font-size: 10px !important; }
.home-register-link { color: var(--lz-green-light) !important; font-weight: 700; }

/* Logged-in account keeps the same compact panel. */
.home-account-copy { margin-bottom: 10px; }
.home-account-actions { justify-content: flex-start; }

/* Shared footer now carries the real 2009–2026 line and modernization credit. */
.home-2026 #copy {
  font-size: 11px !important;
  line-height: 1.45 !important;
}
.home-2026 #copy:after {
  content: none !important;
  display: none !important;
}
#copy .lz-footer-credit {
  display: block;
  margin-top: 2px;
  color: #718591;
  font: 10px/1.45 Arial, Helvetica, sans-serif;
  white-space: nowrap;
}
#copy .lz-footer-credit a {
  color: #79c9d7 !important;
  text-decoration: none !important;
  font-weight: 700;
}
#copy .lz-footer-credit a:hover {
  color: #f7922c !important;
  text-decoration: none !important;
}

@media (max-width: 680px) {
  .home-quick-links a {
    padding-left: 50px;
  }
  .home-quick-links a:before {
    left: 13px;
    top: 14px;
  }

  .home-stats {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    padding: 0;
  }
  .home-stats-heading {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 0 14px !important;
    border-bottom: 1px solid rgba(103,135,157,.20) !important;
  }
  .home-stat {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    padding: 11px 14px !important;
    border-right: 0 !important;
    border-bottom: 1px solid rgba(103,135,157,.18) !important;
  }
  .home-stat:last-child { border-bottom: 0 !important; }
  .home-stat-copy {
    display: flex;
    width: 100%;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
  }
  .home-stat-copy strong { font-size: 20px !important; }
  .home-stat-copy small {
    margin-top: 0;
    color: #91a5b2;
    font-size: 10px;
    text-align: right;
  }

  .home-account {
    display: block;
    padding: 0 14px 14px;
  }
  .home-account-heading {
    margin: 0 -14px 12px;
    padding: 0 14px;
  }
  .home-login-fields {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .home-login-fields label { margin-top: 3px; }
  .home-login-fields input { height: 36px; }
  .home-login-actions { margin-top: 11px; }
  .home-login-actions button { height: 34px; }
  .home-login-links { align-items: flex-start; flex-direction: column; gap: 4px; }
}

/* ============================================================
   V4 / August 2026
   Preserve the personality of the original Lezaji homepage:
   familiar small colourful icons, yellow/green link accents and
   a modern direct-login panel. SR iteration only.
   ============================================================ */

/* Old small icons are intentionally kept: they are part of the portal's character. */
.home-quick-links a {
  padding-left: 58px;
}
.home-quick-links a:before {
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 3px;
  background-color: rgba(23, 43, 58, .72);
  box-shadow: inset 0 0 0 1px rgba(125, 158, 178, .16);
  background-size: auto;
}
.home-quick-links .home-link-offers:before {
  background-image: url(../images/spec.pon.gif);
}
.home-quick-links .home-link-demand:before {
  background-image: url(../images/new6.gif);
}
.home-quick-links .home-link-sellers:before {
  background-image: url(../images/icon1.gif);
}
.home-quick-links span {
  color: #f4f7f8;
}
.home-quick-links small {
  color: #b6c982;
}
.home-quick-links a:hover span {
  color: #fff;
}
.home-quick-links a:hover small {
  color: var(--lz-green-light);
}

/* Statistics use the actual three legacy visual cues from the old homepage. */
.home-stats-heading-icon {
  width: 25px;
  height: 24px;
  flex-basis: 25px;
  background-image: url(../images/kocka2-bg.gif);
  background-position: right top;
  background-size: auto;
}
.home-stat-icon {
  width: 38px;
  height: 36px;
  flex-basis: 38px;
  border: 0;
  border-radius: 3px;
  background-color: transparent;
  background-position: left top;
  background-repeat: no-repeat;
  box-shadow: none;
}
.home-stat-users .home-stat-icon {
  background-image: url(../images/posete-bg.gif);
}
.home-stat-articles .home-stat-icon {
  background-image: url(../images/statistika2.gif);
}
.home-stat-searches .home-stat-icon {
  background-image: url(../images/statistika3.gif);
}
.home-stat-copy strong {
  font-size: 30px !important;
}
.home-stat-users .home-stat-copy small { color: #d5dc7b; }
.home-stat-articles .home-stat-copy small { color: #9dd0dd; }
.home-stat-searches .home-stat-copy small { color: #e5b35a; }

/* Login keeps the long-standing workflow, but visually belongs to the 2026 UI. */
.home-account-heading-icon {
  margin-left: auto;
  order: 2;
  width: 27px;
  height: 24px;
  background-image: url(../images/kocka3-bg.gif);
  background-repeat: no-repeat;
  background-position: right top;
}
.home-account-heading strong {
  order: 1;
  color: var(--lz-orange-2);
  text-transform: none;
  font-size: 14px;
  letter-spacing: 0;
}
.home-login-context {
  margin: -2px 0 11px;
  padding: 0 0 10px;
  border-bottom: 1px solid rgba(103,135,157,.16);
}
.home-login-context p {
  margin: 0 0 3px;
  color: #b8c5cc;
  font-size: 11px;
  line-height: 1.4;
}
.home-login-context strong {
  color: var(--lz-green-light);
  font-size: 12px;
  font-weight: 700;
}
.home-login-fields input {
  background: linear-gradient(180deg, #0a1822, #07121a);
}
.home-login-links .home-register-link {
  color: #e9c23f !important;
}
.home-login-links .home-register-link:hover {
  color: var(--lz-green-light) !important;
}

/* Footer: bring back the old yellow-green navigation rhythm without looking dated. */
.home-2026 #naslov1,
.home-2026 #naslov2,
.home-2026 #naslov3 {
  letter-spacing: .01em;
}
.home-2026 #naslov1:before,
.home-2026 #naslov2:before,
.home-2026 #naslov3:before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 12px;
  margin: 0 4px 0 -2px;
  vertical-align: -2px;
  background: url(../images/STRELICA-LINKS1.gif) no-repeat center center;
}
.home-2026 .naslov1 {
  color: var(--lz-green) !important;
}
.home-2026 .zalinkove {
  position: relative !important;
  padding-left: 14px !important;
}
.home-2026 .zalinkove:before {
  content: "";
  position: absolute;
  left: 0;
  top: 1px;
  width: 9px;
  height: 11px;
  background: url(../images/STRELICA-LINKS1.gif) no-repeat center center;
}
.home-2026 .zalinkove a {
  color: #c1ccd2 !important;
}
.home-2026 .zalinkove a:hover {
  color: var(--lz-green-light) !important;
}

@media (max-width: 680px) {
  .home-stat-icon {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
  }
  .home-stat-copy strong {
    font-size: 22px !important;
  }
  .home-login-context {
    margin-top: 0;
  }
  .home-2026 #naslov1:before,
  .home-2026 #naslov2:before,
  .home-2026 #naslov3:before {
    margin-left: 0;
  }
}

/* ============================================================
   V5 / August 2026
   Preserve the colourful legacy icon personality, but remove the
   old sprite backgrounds. On phones show the complete navigation
   instead of hiding the remaining links in a horizontal scroller.
   ============================================================ */

/* Transparent crops made from the original Lezaji artwork. */
.home-stats-heading-icon {
  width: 26px;
  height: 24px;
  flex-basis: 26px;
  background-image: url(../images/home-2026/icon-stats.png);
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat;
}
.home-stat-icon {
  width: 38px;
  height: 38px;
  flex-basis: 38px;
  background-color: transparent !important;
  background-position: center center !important;
  background-size: auto !important;
  background-repeat: no-repeat !important;
  box-shadow: none !important;
}
.home-stat-users .home-stat-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d5dc7b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
}
.home-stat-articles .home-stat-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239dd0dd' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3v18h18'/%3E%3Cpath d='m7 15 4-4 3 3 5-6'/%3E%3Cpath d='M15 8h4v4'/%3E%3C/svg%3E");
}
.home-stat-searches .home-stat-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e5b35a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4-4'/%3E%3C/svg%3E");
}
.home-account-heading-icon {
  width: 27px;
  height: 26px;
  background-image: url(../images/home-2026/icon-key.png);
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat;
}

/* Full mobile navigation: familiar menu remains visible, but every item is reachable. */
@media (max-width: 680px) {
  #tab {
    width: 100% !important;
    height: auto !important;
  }
  #tab ul {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    width: 100% !important;
    min-width: 0 !important;
    gap: 2px !important;
  }
  #tab li {
    width: auto !important;
    min-width: 0 !important;
  }
  #tab a,
  #tab a span,
  #tab a span:hover {
    width: 100% !important;
    min-width: 0 !important;
  }
  #tab a span,
  #tab a span:hover {
    padding: 0 3px !important;
    font-size: 10px !important;
    white-space: nowrap !important;
  }
}

/* ============================================================
   V6 / August 2026
   Bring back the original homepage rhythm: two live offers and
   two live requests, compact statistics/login, and a roomier
   two-row mobile menu. SR iteration only.
   ============================================================ */

/* Live offer / demand cards: same three-column place, now with real data. */
.home-quick-links .home-quick-card {
  position: relative;
  min-height: 124px;
  padding: 14px 16px 12px 58px;
  border: 1px solid rgba(75, 110, 135, .38);
  border-radius: var(--lz-radius);
  background: rgba(12, 27, 39, .88);
  transition: border-color .18s ease, background .18s ease;
}
.home-quick-links .home-quick-card:hover {
  border-color: rgba(145, 184, 55, .52);
  background: rgba(16, 32, 43, .96);
}
.home-quick-links .home-quick-card:before {
  content: "";
  position: absolute;
  left: 16px;
  top: 16px;
  width: 28px;
  height: 28px;
  border-radius: 3px;
  background-color: rgba(23, 43, 58, .72);
  background-repeat: no-repeat;
  background-position: center center;
  box-shadow: inset 0 0 0 1px rgba(125, 158, 178, .16);
}
.home-quick-links .home-link-offers:before { background-image: url(../images/spec.pon.gif); }
.home-quick-links .home-link-demand:before { background-image: url(../images/new6.gif); }
.home-quick-links .home-link-sellers:before { background-image: url(../images/icon1.gif); }
.home-quick-title {
  display: inline-block !important;
  padding: 0 !important;
  color: #f4f7f8 !important;
  font: 700 14px/1.25 Arial, Helvetica, sans-serif !important;
  text-decoration: none !important;
}
.home-quick-title:before { display: none !important; content: none !important; }
.home-live-list {
  margin-top: 8px;
  min-height: 42px;
}
.home-live-item {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 5px;
  min-width: 0;
  margin: 4px 0;
  padding-left: 11px;
  color: #d9e2e7;
  font-size: 11px;
  line-height: 1.25;
}
.home-live-item:before {
  content: "\203A";
  position: absolute;
  left: 0;
  top: -1px;
  color: #f1c400;
  font-size: 15px;
  font-weight: 700;
}
.home-live-item span {
  display: block;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #d9e2e7;
  font-size: 11px;
  font-weight: 600;
}
.home-live-item a,
.home-quick-more {
  color: var(--lz-green-light) !important;
  font-size: 10px !important;
  text-decoration: underline !important;
  white-space: nowrap;
}
.home-live-item a:before,
.home-quick-more:before { display: none !important; content: none !important; }
.home-live-empty {
  margin: 5px 0 0;
  color: #9fb0ba;
  font-size: 11px;
  line-height: 1.35;
}
.home-quick-more {
  display: inline-block !important;
  margin-top: 6px;
  padding: 0 !important;
}
.home-sellers-copy {
  margin: 9px 0 8px;
  color: #aab9c3;
  font-size: 11px;
  line-height: 1.35;
}

/* The title was simply "Statistika" on the original homepage. */
.home-stats-heading strong { letter-spacing: .035em; }

/* Reduce the empty desktop feeling without inventing new content. */
@media (min-width: 681px) {
  .home-stats,
  .home-account { min-height: 158px; }
  .home-stat { padding-top: 12px !important; padding-bottom: 12px !important; }
  .home-stat-copy strong { font-size: 29px !important; }
  .home-account-heading { margin-bottom: 9px; }
  .home-login-context { margin-bottom: 8px; padding-bottom: 7px; }
  .home-login-actions { margin-top: 7px; }
  .home-login-links { margin-top: 6px; }
}

/* Keep every menu item visible on phones, with a little more breathing room. */
@media (max-width: 680px) {
  #tab a,
  #tab a span,
  #tab a span:hover { height: 42px !important; }
  #tab a span,
  #tab a span:hover { line-height: 42px !important; font: 600 10px/42px Arial, Helvetica, sans-serif !important; }

  .home-quick-links .home-quick-card {
    min-height: 0;
    padding: 12px 13px 11px 50px;
  }
  .home-quick-links .home-quick-card:before {
    left: 13px;
    top: 13px;
  }
  .home-live-list { min-height: 0; margin-top: 7px; }
  .home-live-item { margin: 5px 0; }
  .home-quick-more { margin-top: 5px; }
}

/* ============================================================
   V7 / August 2026
   Polish only: remove inherited "button/card" styling from the
   live offer/request links, stack Statistics + Login on phones,
   and tighten spacing without adding any new homepage content.
   ============================================================ */

/* Nested links inside the three live cards must remain compact text links.
   Older generic .home-quick-links a rules were giving each of them a card box. */
.home-quick-links .home-quick-card a {
  min-height: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transition: color .18s ease !important;
}
.home-quick-links .home-quick-card a:hover {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.home-quick-links .home-quick-title {
  display: inline-block !important;
  width: auto !important;
  padding: 0 !important;
}
.home-quick-links .home-live-item a {
  display: inline !important;
  width: auto !important;
  padding: 0 !important;
  line-height: 1.25 !important;
}
.home-quick-links .home-quick-more {
  display: inline-block !important;
  width: auto !important;
  padding: 0 !important;
  line-height: 1.3 !important;
}

/* Compact the three secondary cards now that they contain real 2+2 data. */
.home-quick-links .home-quick-card {
  min-height: 108px;
  padding-top: 13px;
  padding-bottom: 11px;
}
.home-live-list { margin-top: 7px; }
.home-live-item { margin: 5px 0; }
.home-sellers-copy { margin: 8px 0 5px; }
.home-quick-more { margin-top: 3px; }

/* A little less empty vertical space on wide screens. */
@media (min-width: 681px) {
  .home-stats,
  .home-account { min-height: 150px; }
  .home-stats-heading,
  .home-account-heading { height: 36px; min-height: 36px; }
  .home-stat { padding-top: 10px !important; padding-bottom: 10px !important; }
  .home-account { padding-bottom: 10px; }
  .home-account-heading { margin-bottom: 7px; }
  .home-login-context { margin-bottom: 6px; padding-bottom: 6px; }
  .home-login-fields { gap: 5px 9px; }
  .home-login-fields input { height: 30px; }
  .home-login-actions { margin-top: 6px; }
  .home-login-actions button { height: 30px; }
  .home-login-links { margin-top: 5px; }
}

/* Phone layout: familiar full two-row menu stays visible, just breathes a bit more.
   Statistics and Login must each use the full width instead of squeezing side-by-side. */
@media (max-width: 680px) {
  #tab ul { gap: 3px 2px !important; }
  #tab a,
  #tab a span,
  #tab a span:hover { height: 45px !important; }
  #tab a span,
  #tab a span:hover {
    line-height: 45px !important;
    font: 600 10px/45px Arial, Helvetica, sans-serif !important;
  }

  .home-quick-links .home-quick-card {
    min-height: 0;
    padding-top: 12px;
    padding-bottom: 11px;
  }
  .home-live-item { margin: 6px 0; }

  .home-info-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
  }
  .home-stats,
  .home-account {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
  }
  .home-account { margin: 0 !important; }
}

/* ============================================================
   V8 / August 2026
   Final homepage polish: tighter full mobile navigation and better
   use of space inside Offers / Requests / Sellers without adding
   any new content or changing PHP/business logic.
   ============================================================ */

/* Let the actual 2+2 rows use the whole card width. The icon belongs to
   the card heading only; the content below should not stay indented. */
.home-quick-links .home-quick-card {
  display: flex;
  flex-direction: column;
  min-height: 116px;
  padding: 13px 16px 12px;
}
.home-quick-links .home-quick-card:before {
  left: 16px;
  top: 13px;
}
.home-quick-links .home-quick-title {
  margin-left: 42px !important;
  min-height: 28px !important;
  line-height: 28px !important;
}
.home-live-list {
  width: 100%;
  margin-top: 7px;
  border-top: 1px solid rgba(103,135,157,.14);
}
.home-live-item {
  width: 100%;
  min-height: 28px;
  margin: 0;
  padding: 6px 0 6px 12px;
  align-items: center;
  border-bottom: 1px solid rgba(103,135,157,.12);
}
.home-live-item:last-child { border-bottom: 0; }
.home-live-item span {
  flex: 1 1 auto;
  padding-right: 8px;
}
.home-live-item a {
  flex: 0 0 auto;
  margin-left: auto;
  text-align: right;
}
.home-live-empty {
  margin: 0;
  padding: 10px 0 4px;
}
.home-sellers-copy {
  flex: 1 1 auto;
  margin: 8px 0 5px;
  padding-top: 7px;
  border-top: 1px solid rgba(103,135,157,.14);
  line-height: 1.45;
}
.home-quick-links .home-link-sellers .home-quick-more {
  align-self: flex-start;
  margin-top: auto;
}

/* On wide screens the three cards should feel populated, not like oversized
   empty tiles. Keep them compact and let separators give the content rhythm. */
@media (min-width: 681px) {
  .home-quick-links .home-quick-card { min-height: 118px; }
}

/* Final shared phone header: branding stays in the page content, while the
   navigation gets the full compact header. This applies to home and inner pages. */
@media (max-width: 680px) {
  #zaglavlje {
    height: 94px !important;
    overflow: visible !important;
  }
  #zaglavlje:before,
  #zaglavlje:after,
  .home-2026 #zaglavlje:before,
  .home-2026 #zaglavlje:after {
    content: none !important;
    display: none !important;
  }
  #MainMenu {
    top: 8px !important;
    left: 7px !important;
    right: 7px !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
  }
  #tab ul {
    gap: 2px !important;
  }
  #tab a,
  #tab a span,
  #tab a span:hover {
    height: 39px !important;
  }
  #tab a span,
  #tab a span:hover {
    padding: 0 2px !important;
    line-height: 39px !important;
    font: 600 10px/39px Arial, Helvetica, sans-serif !important;
  }

  .home-quick-links .home-quick-card {
    min-height: 0;
    padding: 11px 13px 10px;
  }
  .home-quick-links .home-quick-card:before {
    left: 13px;
    top: 11px;
  }
  .home-quick-links .home-quick-title {
    margin-left: 39px !important;
    min-height: 28px !important;
    line-height: 28px !important;
  }
  .home-live-list { margin-top: 6px; }
  .home-live-item {
    min-height: 27px;
    padding-top: 5px;
    padding-bottom: 5px;
  }
  .home-sellers-copy {
    margin-top: 6px;
    padding-top: 6px;
  }
}

/* Very narrow phones: save a few more pixels without sacrificing visibility. */
@media (max-width: 390px) {
  #tab a,
  #tab a span,
  #tab a span:hover { height: 37px !important; }
  #tab a span,
  #tab a span:hover {
    line-height: 37px !important;
    font: 600 9.5px/37px Arial, Helvetica, sans-serif !important;
  }
}

/* ============================================================
   V9 / August 2026
   Final micro-polish: slightly larger legacy statistic icons on
   desktop and precise vertical centering of the yellow live-row arrows.
   ============================================================ */

/* Keep the original transparent artwork, just give the three cues a
   touch more presence on desktop. Mobile proportions stay unchanged. */
@media (min-width: 681px) {
  .home-stat-articles .home-stat-icon {
    background-size: 24px auto !important;
  }
  .home-stat-users .home-stat-icon {
    background-size: 22px auto !important;
  }
  .home-stat-searches .home-stat-icon {
    background-size: 22px auto !important;
  }
}

/* Center the familiar yellow chevron against each offer/request row. */
.home-live-item:before {
  top: 50% !important;
  transform: translateY(-50%);
  line-height: 1;
}

/* ============================================================
   V10 / August 2026
   Final statistics alignment + a restrained bit of 2026 polish.
   No business logic changes.
   ============================================================ */

/* Treat icon + number/caption as one centered visual unit on desktop. */
.home-stat {
  display: grid !important;
  grid-template-columns: 42px auto !important;
  justify-content: center !important;
  align-items: center !important;
  column-gap: 14px !important;
}
.home-stat-icon {
  display: block !important;
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  margin: 0 !important;
  align-self: center !important;
  justify-self: center !important;
  background-position: center center !important;
  transform-origin: center center;
  transition: transform .18s ease, filter .18s ease;
}
.home-stat-articles .home-stat-icon { background-size: 31px auto !important; }
.home-stat-users .home-stat-icon { background-size: 29px auto !important; }
.home-stat-searches .home-stat-icon { background-size: 29px auto !important; }
.home-stat-copy {
  width: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  align-self: center !important;
}

/* Tiny interaction only: the old colourful cues come alive without becoming flashy. */
@media (hover: hover) and (pointer: fine) {
  .home-stat:hover .home-stat-icon {
    transform: translateY(-1px) scale(1.06);
    filter: brightness(1.08);
  }
  .home-quick-links .home-quick-card {
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
  }
  .home-quick-links .home-quick-card:hover {
    transform: translateY(-1px);
    border-color: rgba(145,184,55,.48);
    box-shadow: 0 10px 22px rgba(0,0,0,.14), inset 0 1px 0 rgba(145,184,55,.06);
  }
}

/* One soft sheen across the primary search button after page load.
   It runs once and respects reduced-motion preferences. */
.home-search-action button {
  position: relative;
  overflow: hidden;
  transition: transform .16s ease, filter .16s ease, box-shadow .16s ease;
}
.home-search-action button:after {
  content: "";
  position: absolute;
  top: -35%;
  left: -45%;
  width: 30%;
  height: 170%;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.24), transparent);
  transform: skewX(-20deg);
}
@media (prefers-reduced-motion: no-preference) {
  .home-search-action button:after {
    animation: lz-search-sheen 1.05s ease 1.15s 1 both;
  }
}
@keyframes lz-search-sheen {
  0%   { left: -45%; opacity: 0; }
  20%  { opacity: .55; }
  100% { left: 120%; opacity: 0; }
}
@media (hover: hover) and (pointer: fine) {
  .home-search-action button:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(246,138,18,.20);
  }
}

/* Phone rows: keep the useful compact layout, but center each legacy icon
   exactly against its statistic content and give it a little more presence. */
@media (max-width: 680px) {
  .home-stat {
    display: grid !important;
    grid-template-columns: 36px minmax(0, 1fr) !important;
    justify-content: stretch !important;
    align-items: center !important;
    column-gap: 12px !important;
  }
  .home-stat-icon {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    align-self: center !important;
    justify-self: center !important;
  }
  .home-stat-articles .home-stat-icon { background-size: 27px auto !important; }
  .home-stat-users .home-stat-icon { background-size: 25px auto !important; }
  .home-stat-searches .home-stat-icon { background-size: 25px auto !important; }
  .home-stat-copy {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    align-items: center !important;
    column-gap: 12px !important;
    width: 100% !important;
  }
  .home-stat-copy strong {
    justify-self: start !important;
    margin: 0 !important;
  }
  .home-stat-copy small {
    justify-self: end !important;
    align-self: center !important;
    margin: 0 !important;
    line-height: 1.25 !important;
  }
}


/* ============================================================
   V11 / August 2026
   Terminology polish + one restrained entrance sequence.
   Public UI says "Prodavci"; legacy ?modul=klijenti route stays intact.
   ============================================================ */

/* A single, deliberate entrance rhythm: enough to feel alive, never "animated".
   The original hero remains untouched; only opacity and a few pixels of movement. */
@media (prefers-reduced-motion: no-preference) {
  .home-2026 #telo.home-hero,
  .home-2026 .home-search-panel,
  .home-2026 .home-quick-links,
  .home-2026 .home-info-row {
    opacity: 0;
    transform: translateY(7px);
    animation: lz-home-reveal .56s cubic-bezier(.22,.61,.36,1) forwards;
    will-change: opacity, transform;
  }
  .home-2026 #telo.home-hero { animation-delay: .04s; }
  .home-2026 .home-search-panel { animation-delay: .12s; }
  .home-2026 .home-quick-links { animation-delay: .20s; }
  .home-2026 .home-info-row { animation-delay: .28s; }

  /* A faint metallic glint across the original hero, once per page load. */
  .home-2026 #telo.home-hero:before {
    content: "";
    position: absolute;
    z-index: 1;
    top: -20%;
    left: -32%;
    width: 18%;
    height: 140%;
    pointer-events: none;
    opacity: 0;
    background: linear-gradient(100deg, transparent 0%, rgba(255,255,255,.08) 45%, rgba(255,255,255,.14) 50%, rgba(255,255,255,.06) 55%, transparent 100%);
    transform: skewX(-16deg);
    animation: lz-hero-glint 1.15s ease .72s 1 both;
  }
}

@keyframes lz-home-reveal {
  from { opacity: 0; transform: translateY(7px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes lz-hero-glint {
  0%   { left: -32%; opacity: 0; }
  16%  { opacity: .7; }
  100% { left: 116%; opacity: 0; }
}


/* ============================================================
   Mobile menu 2026: compact brand + hamburger dropdown.
   Desktop/tablet navigation remains unchanged.
   ============================================================ */
.lz-mobile-menu-toggle,
.lz-mobile-nav-bar {
  display: none !important;
}

@media (max-width: 680px) {
  #zaglavlje {
    height: 60px !important;
    overflow: visible !important;
    z-index: 60 !important;
  }

  #MainMenu {
    top: 5px !important;
    left: 7px !important;
    right: 7px !important;
    width: auto !important;
    height: 50px !important;
    overflow: visible !important;
  }

  .lz-mobile-menu-toggle {
    display: block !important;
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  .lz-mobile-nav-bar {
    position: relative !important;
    z-index: 2 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    height: 50px !important;
    padding: 0 10px 0 13px !important;
    border: 1px solid rgba(89, 125, 151, .24) !important;
    border-radius: 6px !important;
    background: linear-gradient(180deg, #0b1923 0%, #07131c 100%) !important;
    box-sizing: border-box !important;
  }

  .lz-mobile-brand {
    color: #eef3f6 !important;
    font: 300 25px/1 Arial, Helvetica, sans-serif !important;
    letter-spacing: -1.2px !important;
    white-space: nowrap !important;
  }
  .lz-mobile-brand span {
    color: #f58a1f !important;
  }

  .lz-mobile-menu-button {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    width: 42px !important;
    height: 42px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 5px !important;
    background: transparent !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent !important;
  }
  .lz-mobile-menu-button:hover,
  .lz-mobile-menu-button:active {
    background: rgba(29, 91, 121, .24) !important;
  }
  .lz-mobile-menu-button span {
    display: block !important;
    width: 22px !important;
    height: 2px !important;
    border-radius: 2px !important;
    background: #e8eef2 !important;
    transition: transform .18s ease, opacity .18s ease !important;
    transform-origin: center !important;
  }

  #tab {
    position: absolute !important;
    top: 54px !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 80 !important;
    display: none !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid rgba(89, 125, 151, .34) !important;
    border-radius: 6px !important;
    background: #081721 !important;
    box-shadow: 0 14px 30px rgba(0, 0, 0, .38) !important;
    overflow: hidden !important;
  }

  #lz-mobile-menu-toggle:checked ~ #tab {
    display: block !important;
  }

  #lz-mobile-menu-toggle:checked ~ .lz-mobile-nav-bar .lz-mobile-menu-button span:nth-child(1) {
    transform: translateY(7px) rotate(45deg) !important;
  }
  #lz-mobile-menu-toggle:checked ~ .lz-mobile-nav-bar .lz-mobile-menu-button span:nth-child(2) {
    opacity: 0 !important;
  }
  #lz-mobile-menu-toggle:checked ~ .lz-mobile-nav-bar .lz-mobile-menu-button span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg) !important;
  }

  #tab ul {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    min-width: 0 !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 5px !important;
    box-sizing: border-box !important;
  }
  #tab li {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    border-bottom: 1px solid rgba(103, 135, 157, .13) !important;
  }
  #tab li:last-child {
    border-bottom: 0 !important;
  }
  #tab a,
  #tab a span,
  #tab a span:hover {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 42px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }
  #tab a span,
  #tab a span:hover {
    padding: 0 13px !important;
    color: #e5edf2 !important;
    font: 600 13px/42px Arial, Helvetica, sans-serif !important;
    text-align: left !important;
    white-space: nowrap !important;
    border-radius: 4px !important;
  }
  #tab a span:hover {
    color: #fff !important;
    background: rgba(29, 91, 121, .26) !important;
  }
  #tab a span.lz-menu-active {
    color: #fff !important;
    background: rgba(245, 138, 31, .08) !important;
  }
}


/* ============================================================
   V15 / August 2026
   Micro-polish requested during final review:
   - precise optical centering of the yellow chevrons in homepage lists/footer
   - more balanced modernization credit line in the footer
   ============================================================ */

/* Offer / request rows: keep the familiar yellow cue but center it exactly
   against each text row, not slightly above it. */
.home-live-item:before {
  top: 50% !important;
  transform: translateY(-50%);
  line-height: 1 !important;
}

/* Footer list chevrons: align them optically with the first text baseline. */
.home-2026 .zalinkove {
  display: flex !important;
  align-items: center !important;
  min-height: 20px;
  padding-left: 15px !important;
}
.home-2026 .zalinkove:before {
  top: 50% !important;
  transform: translateY(-50%);
  line-height: 1 !important;
}

/* Small balance tweak for the three footer headings as well. */
.home-2026 #naslov1:before,
.home-2026 #naslov2:before,
.home-2026 #naslov3:before {
  vertical-align: -1px;
}


/* ============================================================
   V16 / August 2026
   Final review corrections:
   - homepage mobile brand mirrors the desktop rotating-bearing identity
   - yellow row/footer cues use a true CSS chevron for optical centering
   ============================================================ */

/* Homepage only: replace the plain mobile lezaji.com wordmark with the
   compact desktop identity. The hamburger remains untouched on the right. */
@media (max-width: 680px) {
  .home-2026 .lz-mobile-brand {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    height: 42px !important;
    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
    letter-spacing: 0 !important;
  }
  .home-2026 .lz-mobile-brand span {
    display: none !important;
  }
  .home-2026 .lz-mobile-brand:before {
    content: "" !important;
    display: block !important;
    flex: 0 0 34px !important;
    width: 34px !important;
    height: 34px !important;
    margin: 0 10px 0 0 !important;
    border: 1px solid rgba(92, 128, 149, .72) !important;
    border-radius: 50% !important;
    background:
      radial-gradient(circle at 50% 50%, #07131c 0 30%, transparent 31%),
      repeating-conic-gradient(from 0deg, #f28a13 0 5deg, #6f8795 6deg 10deg, transparent 11deg 30deg),
      radial-gradient(circle at 50% 50%, transparent 0 53%, #355567 54% 64%, #091923 65% 72%, transparent 73%) !important;
    box-shadow: 0 0 0 2px rgba(11,31,42,.68), inset 0 0 9px rgba(92,139,163,.18) !important;
    animation: lz-bearing-indicator 22s linear infinite !important;
    box-sizing: border-box !important;
  }
  .home-2026 .lz-mobile-brand:after {
    content: "B2B INDUSTRIAL / EST. 2009" !important;
    display: block !important;
    min-width: 0 !important;
    color: #9eb2bf !important;
    font: 700 8.5px/1.2 Arial, Helvetica, sans-serif !important;
    letter-spacing: .10em !important;
    white-space: nowrap !important;
  }
}
@media (max-width: 370px) {
  .home-2026 .lz-mobile-brand:before {
    flex-basis: 31px !important;
    width: 31px !important;
    height: 31px !important;
    margin-right: 8px !important;
  }
  .home-2026 .lz-mobile-brand:after {
    font-size: 7.6px !important;
    letter-spacing: .075em !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .home-2026 .lz-mobile-brand:before { animation: none !important; }
}

/* Use a geometrically centered CSS chevron instead of a font glyph/image
   whose built-in whitespace made the yellow cues look off-center. */
.home-live-item:before {
  content: "" !important;
  left: 1px !important;
  top: 50% !important;
  width: 5px !important;
  height: 5px !important;
  margin: 0 !important;
  border: solid #f1c400 !important;
  border-width: 2px 2px 0 0 !important;
  background: none !important;
  font-size: 0 !important;
  line-height: 0 !important;
  transform: translateY(-50%) rotate(45deg) !important;
  box-sizing: border-box !important;
}

.home-2026 .zalinkove {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  min-height: 20px !important;
  padding-left: 15px !important;
}
.home-2026 .zalinkove:before {
  content: "" !important;
  left: 1px !important;
  top: 50% !important;
  width: 5px !important;
  height: 5px !important;
  margin: 0 !important;
  border: solid #f1c400 !important;
  border-width: 2px 2px 0 0 !important;
  background: none !important;
  font-size: 0 !important;
  line-height: 0 !important;
  transform: translateY(-50%) rotate(45deg) !important;
  box-sizing: border-box !important;
}