/* theme-vodenicata-premium.dark.css
   Premium DARK UI (black background) inspired by printed menu elegance
   Drop-in override after /css/style.css
*/

:root{
  --bg:#0B0C0F;
  --bg2:#0F1117;

  --surface: rgba(255,255,255,.06);
  --surface2: rgba(255,255,255,.10);
  --surface3: rgba(255,255,255,.14);

  --ink:#F2F2F2;
  --text:#D7D7D7;
  --muted:#A7A7A7;

  --line: rgba(255,255,255,.14);
  --line2: rgba(255,255,255,.22);

  --accent:#C7A76A;   /* premium gold */
  --accent2:#8A6F3E;  /* deep gold/brown */

  --shadow: 0 18px 48px rgba(0,0,0,.55);
  --shadow2: 0 12px 28px rgba(0,0,0,.45);

  --radius:22px;
  --radius2:16px;
}

/* Fix current layout constraints (style.css has html overflow hidden + 100vh body) */
html{ overflow-x:hidden !important; overflow-y:auto !important; }
body{
  height:auto !important;
  min-height:100vh;
  background:
    radial-gradient(900px 600px at 10% -10%, rgba(199,167,106,.12), transparent 55%),
    radial-gradient(900px 600px at 110% 10%, rgba(199,167,106,.08), transparent 55%),
    radial-gradient(1200px 800px at 50% 120%, rgba(255,255,255,.05), transparent 60%),
    linear-gradient(180deg, var(--bg), var(--bg2)) !important;
  color: var(--text) !important;
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
}

/* Headings */
h1,h2,h3,.home-title h2,.category-title h2,.item-page-title h2{
  font-family: "Cinzel", serif !important;
  letter-spacing:.08em;
  text-transform: uppercase;
  color: var(--ink) !important;
}

/* Links default */
a{ color: var(--accent); }
a:hover{ color: #E3C98B; }

/* Top header */
.header-wrapper{
  height:72px !important;
  background: rgba(11,12,15,.78) !important;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  box-shadow: none !important;
  position: sticky;
  top: 0;
}
.header-wrapper .logo img{
  height: 42px !important;
  margin-left: 18px !important;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.55));
}
.header-wrapper .burger,
.header-wrapper .language{
  background: var(--surface2) !important;
  border: 1px solid var(--line);
  box-shadow: 0 10px 22px rgba(0,0,0,.45) !important;
}
.header-wrapper .burger-wrapper div{
  background-color: var(--accent) !important;
  box-shadow: none !important;
}

/* Slide navigation */
.navigation{
  background: rgba(11,12,15,.92) !important;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow2) !important;
}
.header-wrapper .nav-links a{
  border-bottom: 2px solid rgba(199,167,106,.35) !important;
  color: var(--ink) !important;
}
.header-wrapper .nav-links a:hover{
  border-bottom: 2px solid rgba(199,167,106,.65) !important;
}

/* “Title bars” */
.home-title, .category-title, .item-page-title{
  background: transparent !important;
  color: var(--ink) !important;
  box-shadow: none !important;
  padding: 12px 16px !important;
  border-bottom: 1px solid var(--line);
}
.home-title h2, .category-title h2, .item-page-title h2{
  text-align:center;
  font-size: 18px !important;
  margin: 6px 0;
  color: var(--ink) !important;
}

/* Wrapper spacing */
.wrapper{
  padding: 18px 16px 44px !important;
  gap: 14px;
  justify-content: center !important;
}

/* CATEGORY cards (Default.aspx .card) */
.card{
  width: 320px !important;
  border-radius: var(--radius) !important;
  border: 1px solid var(--line) !important;
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.05)) !important;
  box-shadow: var(--shadow2) !important;
  overflow:hidden;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.card:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow) !important;
  border-color: rgba(199,167,106,.45) !important;
}

.card__wrapper{ flex-direction: column; align-items: stretch !important; padding: 0 !important; }
.card__image{
  width: 100% !important;
  height: 160px;
  border-radius: 0 !important;
  margin: 0 !important;
  overflow:hidden;
}
.card__image img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  border-radius: 0 !important;
}
.card__title{
  margin: 0 !important;
  padding: 12px 12px 14px !important;
}
.card__title h2{
  font-size: 14px !important;
  line-height: 18px !important;
  margin:0;
  color: var(--ink) !important;
}
.card__title h6{
  font-size: 12px !important;
  color: var(--muted) !important;
}
.card__title h6 span{ color: var(--accent) !important; }

.card__svg{
  position:absolute !important;
  right: 12px; top: 12px;
  width: 40px !important;
  height: 40px !important;
  border-radius: 16px;
  background: rgba(11,12,15,.55) !important;
  border: 1px solid var(--line);
  display:grid !important;
  place-items:center;
}
.card__svg img{ width: 18px !important; height: 18px !important; opacity:.95; filter: invert(1); }

/* ITEM cards (GroupView/SubGroupView .item-wrapper) */
.item-wrapper{
  width: 320px !important;
  border-radius: var(--radius) !important;
  border: 1px solid var(--line) !important;
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.05)) !important;
  box-shadow: var(--shadow2) !important;
  overflow:hidden;
  flex-direction: column;
  align-items: stretch !important;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.item-wrapper:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow) !important;
  border-color: rgba(199,167,106,.45) !important;
}

.item-wrapper .item-image{ width: 100% !important; height: 180px !important; }
.item-wrapper .item-image img{
  width: 100% !important;
  height: 100% !important;
  border-radius: 0 !important;
  padding: 0 !important;
  object-fit: cover;
}

.item-wrapper .item-content{ padding: 12px 12px 14px !important; }
.item-wrapper .item-content .title-button{ align-items: flex-start; gap: 10px; }
.item-wrapper .item-content .title-button .item-title h2{
  font-size: 14px !important;
  line-height: 18px !important;
  letter-spacing:.03em;
  text-transform: uppercase;
  margin:0;
  color: var(--ink) !important;
}

/* Wishlist heart button */
.heart-link{
  margin-left: auto;
  width: 40px;
  height: 40px;
  border-radius: 16px;
  background: rgba(11,12,15,.55) !important;
  border: 1px solid var(--line);
  display:grid;
  place-items:center;
}
.heart-link .heart-icon,
.heart-link input[type="image"]{
  width: 18px !important;
  height: 18px !important;
  filter: invert(1);
  opacity:.9;
}

/* Description */
.item-wrapper .item-content .description{
  font-size: 13px !important;
  color: var(--muted) !important;
  margin-top: 6px;
}

/* Price row */
.item-wrapper .item-content .price{
  border-bottom: 1px solid var(--line) !important;
  padding-left: 0 !important;
  margin-top: 10px;
}
.item-wrapper .item-content .price::before{ content:"" !important; }
.item-wrapper .item-content .price h6{
  font-size: 16px !important;
  color: var(--ink) !important;
  font-weight: 900;
}

/* Sub info */
.item-wrapper .item-content .sub-info{ margin-top: 10px; gap: 10px; }
.item-wrapper .item-content .sub-info .product{ display:none !important; } /* hide SIF */
.item-wrapper .item-content .sub-info .time{
  font-size: 12px !important;
  color: var(--muted) !important;
  padding-left: 0 !important;
}
.item-wrapper .item-content .sub-info .time::before{ content:"" !important; }
.item-wrapper .item-content .sub-info .read-more{
  margin-left:auto;
  border: 1px solid rgba(199,167,106,.35) !important;
  background: rgba(255,255,255,.06) !important;
  color: var(--accent) !important;
  border-radius: 14px !important;
  padding: 7px 10px !important;
  font-size: 12px !important;
}
.item-wrapper .item-content .sub-info .read-more:hover{
  border-color: rgba(199,167,106,.55) !important;
  background: rgba(255,255,255,.10) !important;
}

/* Category banner image: keep but darken a touch */
.category img{ filter: brightness(.78) contrast(1.05); }

/* Item details page */
.item-page{ height: 320px !important; border-bottom: 1px solid var(--line); }
.item-page-title{ border-bottom: 0; }
.item-page-wrapper{
  padding: 16px !important;
  max-width: 760px;
  margin: 0 auto;
}
.item-page-wrapper .item-page-time span,
.item-page-wrapper .item-page-price span,
.item-page-wrapper .item-page-nummer span{ color: var(--muted) !important; }
.item-page-wrapper h6{ color: var(--ink) !important; }
.item-page-nummer{ display:none !important; } /* hide SIF on details */

/* Footer: premium floating pill */
footer{ background: transparent !important; box-shadow: none !important; }
footer .footer-wrapper{
  width: 320px !important;
  background: rgba(11,12,15,.80) !important;
  border: 1px solid var(--line);
  box-shadow: var(--shadow2) !important;
  backdrop-filter: blur(10px);
}
footer .button{ background: transparent !important; }
footer .button img{ filter: invert(1); opacity:.92; }
footer .button .items-count{
  color: #0B0C0F !important;
  background: linear-gradient(135deg, rgba(199,167,106,.98), rgba(160,124,58,.92)) !important;
  box-shadow: 0 10px 18px rgba(199,167,106,.20) !important;
}

/* SALE badge */
.sale-page .item-wrapper{ position:relative; }
.sale-page .item-wrapper::after{
  content:"АКЦИЈА";
  position:absolute;
  top: 14px;
  left: 14px;
  padding: 6px 10px;
  border-radius: 999px;
  font-family: "Cinzel", serif;
  font-size: 11px;
  letter-spacing: .10em;
  color: #0B0C0F;
  background: linear-gradient(135deg, rgba(199,167,106,.98), rgba(160,124,58,.92));
  box-shadow: 0 10px 18px rgba(0,0,0,.45);
  z-index: 3;
}

/* Wishlist drawer (dark) */
.wish-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
  z-index: 10000;
}
.wish-backdrop.is-open{ opacity: 1; pointer-events:auto; }

.wish-drawer{
  position: fixed;
  top: 0;
  right: 0;
  height: 100dvh;
  width: min(420px, 92vw);
  background: rgba(11,12,15,.96);
  border-left: 1px solid var(--line);
  box-shadow: -18px 0 44px rgba(0,0,0,.60);
  transform: translateX(110%);
  transition: transform .22s ease;
  z-index: 10001;
  display: flex;
  flex-direction: column;
}
.wish-drawer.is-open{ transform: translateX(0); }

.wish-drawer__header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 14px 14px;
  border-bottom: 1px solid var(--line);
}
.wish-drawer__title{
  font-family: "Cinzel", serif;
  text-transform: uppercase;
  letter-spacing: .10em;
  font-weight: 700;
  color: var(--ink);
  font-size: 14px;
}
.wish-drawer__close{
  width: 40px;
  height: 40px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.06);
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  color: var(--accent);
}

.wish-drawer__body{ padding: 12px; overflow:auto; flex:1; }
.wish-empty{
  border: 1px dashed var(--line2);
  background: rgba(255,255,255,.05);
  border-radius: var(--radius2);
  padding: 14px;
  color: var(--muted);
  font-size: 13px;
}
.wish-list{ display:flex; flex-direction:column; gap:10px; }

.wish-item{
  display:flex;
  gap: 10px;
  align-items:center;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.06);
  border-radius: var(--radius2);
  padding: 10px;
  box-shadow: 0 10px 18px rgba(0,0,0,.45);
  text-decoration:none;
}
.wish-item__img{
  width: 56px;
  height: 56px;
  border-radius: 14px;
  overflow:hidden;
  flex: 0 0 auto;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.05);
}
.wish-item__img img{ width:100%; height:100%; object-fit:cover; filter: brightness(.95); }
.wish-item__title{ font-size:13px; font-weight:700; color: var(--ink); margin:0 0 4px; }
.wish-item__sub{ font-size:12px; color: var(--muted); margin:0; }
.wish-item__price{ font-weight:900; color: var(--ink); font-size:13px; margin-left:8px; white-space:nowrap; }

.wish-drawer__footer{
  padding: 12px 12px 14px;
  border-top: 1px solid var(--line);
  display:flex;
  gap: 10px;
  align-items:center;
}
.wish-action{
  flex: 1;
  border: 1px solid rgba(199,167,106,.35);
  background: rgba(255,255,255,.06);
  color: var(--accent);
  border-radius: 14px;
  padding: 10px 12px;
  font-size: 13px;
  cursor:pointer;
}
.wish-action:hover{ background: rgba(255,255,255,.10); border-color: rgba(199,167,106,.55); }
.wish-open-page{
  flex: 0 0 auto;
  text-decoration:none;
  font-size: 12px;
  color: var(--accent);
  padding: 10px 10px;
  border-radius: 14px;
  border: 1px solid rgba(199,167,106,.25);
  background: rgba(255,255,255,.05);
}
.wish-open-page:hover{ background: rgba(255,255,255,.10); border-color: rgba(199,167,106,.45); }