/* dark-style.css - Dark Graphite theme (developer-friendly, variables) */
:root{
  --bg:#121212;
  --panel:#1a1a1a;
  --card-bg:#1f1f1f;
  --muted:#9a9a9a;
  --accent-yellow:#f1c40f; /* yellow accent */
  --price-silver:#d9d9d9;
  --divider:rgba(255,255,255,0.03);
  --radius:10px;
  --gap:16px;
  --font: 'Roboto', sans-serif;
}

/* Base */
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--bg);color:var(--price-silver);font-family:var(--font);-webkit-font-smoothing:antialiased}
a{color:var(--price-silver);text-decoration:none}

/* Header */
.header {
  position: relative;
  min-height: 140px;
  background: transparent;
  text-align: center;
  margin-bottom: 22px;
}

.header-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  left:0; top:0; width:100%; height:100%;
  background: url('images/header-bg.jpg') center/cover no-repeat;
  opacity: 0.15; /* прилагоди транспарентност */
}
.header-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 140px;
}
.logo-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
}
.header-welcome {
  color: #ddd;
  position: absolute;
  top: 10px;
  right: 30px;
  font-size: 1rem;
  opacity: 0.85;
}

.label.small.text-muted {
  color: #fff !important;
}

/* Tabs */
.tabs{display:flex;flex-wrap;gap:8px;padding:10px;background:transparent;border-bottom:1px solid var(--divider);overflow:auto;max-width:1100px;margin:0 auto}
.tab{padding:8px 12px;border-radius:8px;background:transparent;color:var(--muted);font-weight:600;cursor:pointer;white-space:nowrap;transition:all .18s ease}
.tab.active{background:rgba(241,196,15,0.12);color:var(--accent-yellow);box-shadow:0 2px 8px rgba(0,0,0,0.6)}

/* Container */
.container{max-width:1100px;margin:18px auto;padding:0 14px}

/* Grid (2 columns always) */
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gap)}
.card{background:var(--card-bg);border-radius:var(--radius);overflow:hidden;box-shadow:0 8px 20px rgba(0,0,0,0.6);transition:transform .18s ease;border:1px solid var(--divider)}
.card:hover{transform:translateY(-6px);border-color:var(--accent-yellow)}
.card img{width:100%;height:180px;object-fit:cover;background:#111}
.card .body{padding:12px;display:flex;justify-content:space-between;align-items:center}
.name{font-weight:700;color:#fff}
.price{font-weight:800;color:var(--accent-yellow)}

/* Category badge */
.category{display:inline-block;padding:6px 10px;border-radius:8px;background:rgba(241,196,15,0.06);color:var(--muted);font-size:12px;margin:8px}

/* List styles */
.list-container{padding:12px}
.list-item{background:var(--panel);border:1px solid var(--divider);padding:12px;border-radius:8px;margin-bottom:8px;display:flex;justify-content:space-between;align-items:center;transition:all .12s ease}
.list-item:hover{transform:translateX(4px);border-color:var(--accent-yellow)}
.list-left{display:flex;align-items:center;gap:12px}
.bullet{width:10px;height:10px;border-radius:50%;background:var(--accent-yellow);flex:0 0 10px}
.list-name{font-weight:600;color:#fff}
.list-price{font-weight:800;color:var(--accent-yellow);min-width:70px;text-align:right}

/* Empty state */
.empty{padding:16px;background:var(--panel);border-radius:8px;color:var(--muted);text-align:center}

/* Responsive - keep 2 columns always but adjust sizes */
@media(max-width:420px){
  :root{--gap:10px}
  .card img{height:140px}
  .name{font-size:14px}
  .list-item{padding:10px}
}

.card .desc {
  color: var(--muted);
  font-size: 13px;
  margin-top: 3px;
  line-height: 1.4;
  font-weight: 400;
  word-break: break-word;
}

/* Scrollbar */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:#0f0f0f}
::-webkit-scrollbar-thumb{background:#2f2f2f;border-radius:10px}

.img-fullscreen-overlay {
  position: fixed; top:0; left:0; width:100vw; height:100vh; 
  background: rgba(10,10,10,0.97); z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  transition: opacity 0.2s; cursor:zoom-out;
}
.img-fullscreen-overlay img {
  max-width: 96vw; max-height: 96vh; border-radius: 14px; box-shadow:0 4px 24px #000c;
  border: 2px solid var(--divider);
}
.img-fullscreen-overlay.hidden { opacity:0; pointer-events:none; }

.main-menu-categories {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin: 32px auto 32px auto;
  max-width: 420px;
  
}
.main-menu-card {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  background: #222;
  min-height: 180px;
  max-height: 215px;         /* Додади ова: максимална висина in px (пример 115) */
  cursor: pointer;
  display: flex;
  align-items: flex-end;
  box-shadow: 0 4px 24px #0008;
  margin-bottom: 22px;
  /* други својства... */
}
.main-menu-card img {
  position: absolute;
  left: 0; top: 0;
  width: 100%;               /* тоа е добро, но... */
  height: 100%;              /* ова е клучно! -> додади го ова */
  object-fit: cover;
  filter: brightness(0.62) contrast(1.1);
  pointer-events: none;
}
.main-menu-title {
  position: relative;
  z-index: 2;
  color: #fff;
  font-size: 2rem;
  font-weight: 700;
  width: 100%;
  text-align: center;
  padding: 32px 10px 20px 10px;
  text-shadow: 0 2px 10px #000;
  letter-spacing: 1px;
}

@media (max-width: 600px) {
  .main-menu-card {
    min-height: 140px;
    height: 200px;
    max-height: 220px;
  }
  .main-menu-title {font-size: 1.3rem; padding:18px 7px 12px 7px;}
}

.social-fab-holder {
  position: fixed;
  left: 0; right: 0;
  bottom: 26px;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2999;
  pointer-events: none;
}
#fabOpenBtn,
.social-fab-menu .sfab {
  width: 56px; height: 56px; border-radius: 50%;
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 20px #0006;
  font-size: 2.0rem;
  border: none; outline: none;
  cursor: pointer;
  transition: box-shadow 0.16s, transform 0.13s;
  pointer-events: auto;
  margin: 0 5px;
}
#fabOpenBtn:hover, .sfab:hover { box-shadow: 0 8px 24px #000b; transform: scale(1.11);}
#fabOpenBtn { z-index: 1; }
.social-fab-menu { 
  display: none; 
  gap: 18px; 
  background: none; 
  pointer-events: auto; 
  align-items: center;
}
.social-fab-menu.active { display: flex; }
.sfab-close:hover { background: #ffeaea !important; }

@media (max-width: 600px){
  #fabOpenBtn, .social-fab-menu .sfab { width: 42px; height: 42px; font-size: 1.3rem; }
  .social-fab-menu { gap: 11px; }
}

.d-flex .fw-bold,
.d-flex .small,
.d-flex .text-muted {
  color: #fff !important;
}


.footer-main {
  margin-top: 40px;
  padding: 14px 0 8px 0;
  color: #999;
  text-align: center;
  font-size: 1rem;
  background: none;
  opacity: 0.64;
}