/* Zenith UI v2 (modern dark + glass)
   This file is loaded AFTER style.css so it safely overrides legacy styles.
*/
:root{
  --z-accent:#fdb50d;
  --z-accent-2:#ffbf5b;
  --z-bg:#0b0b0d;
  --z-surface:rgba(18,18,22,.62);
  --z-surface-2:rgba(18,18,22,.78);
  --z-border:rgba(255,255,255,.10);
  --z-text:#f4f4f6;
  --z-muted:rgba(244,244,246,.72);
  --z-shadow:0 18px 45px rgba(0,0,0,.55);
  --z-radius:18px;
}

html, body{
  background-color: var(--z-bg);
  background-image:
    radial-gradient(1200px 700px at 20% -10%, rgba(253,181,13,.20), transparent 60%),
    radial-gradient(900px 500px at 95% 0%, rgba(255,191,91,.12), transparent 55%),
    radial-gradient(1000px 800px at 50% 120%, rgba(255,255,255,.06), transparent 60%),
    url(../img/bg2.png);
  background-size: auto, auto, auto, cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: var(--z-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Layout */
.container{
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 14px;
  padding-right: 14px;
  padding-top: 84px;
  padding-bottom: 160px;
}

/* Headings/text */
h1,h2,h3,h4,h5{ color: var(--z-text); text-shadow: 0 10px 30px rgba(0,0,0,.55); }
span,p{ color: var(--z-muted); }
.nav-link{ color: var(--z-accent-2); }

/* Header */
.header{
  background: linear-gradient(180deg, rgba(0,0,0,.72), rgba(0,0,0,.45));
  border: 1px solid var(--z-border);
  border-top: none;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--z-shadow);
  height: 56px;
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
}
.header .logo img{ height: 34px; filter: drop-shadow(0 10px 18px rgba(0,0,0,.55)); }
.header .logo h1{ letter-spacing: .5px; }
.header .header-btns a{ width: 66px; opacity: .92; }
.header .header-btns a:hover{ opacity: 1; transform: translateY(-1px); }
.header .header-btns span{ opacity: .85; }

/* Bottom nav */
.bottom-nav{
  border: 1px solid var(--z-border);
  border-bottom: none;
  background: linear-gradient(180deg, rgba(0,0,0,.40), rgba(0,0,0,.78));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 10px 8px;
}
.bottom-nav a{
  border-radius: 10px;
  margin: 0 4px;
  padding: 10px 8px;
  line-height: 1.05;
  transition: transform .12s ease, background-color .12s ease, color .12s ease, opacity .12s ease;
  opacity: .9;
}
.bottom-nav a i{ display:block; font-size: 18px; margin-bottom: 2px; }
.bottom-nav a:hover{ background: rgba(255,255,255,.06); opacity: 1; transform: translateY(-1px); }
.bottom-nav a.selected{
  background: rgb(255 255 255 / 11%);
  color: var(--z-text);
  box-shadow: 0 10px 22px rgba(0,0,0,.35);
  opacity: 1;
}

/* Cards */
.menu-card,
.reservation-card,
.profile-card,
.login-card{
  background: var(--z-surface);
  border: 1px solid var(--z-border);
  border-radius: var(--z-radius);
  box-shadow: var(--z-shadow);
}
.menu-card{ padding: 18px; }
.profile-card{ background: var(--z-surface-2); }
.login-card{ background: var(--z-surface-2); }

/* Images */
.novinka-img{
  border-radius: 14px;
  filter: drop-shadow(0 16px 26px rgba(0,0,0,.6));
}

/* Buttons (Bootstrap overrides) */
.btn{
  border-radius: 14px;
  box-shadow: 0 10px 22px rgba(0,0,0,.35);
}
.btn:active{ transform: translateY(1px); }
.btn-outline-secondary{
  border-color: rgba(255,255,255,.18) !important;
  color: var(--z-text) !important;
}
.btn-outline-secondary:hover{ background: rgba(255,255,255,.06) !important; }

/* Inputs */
.form-control,
.form-select,
input,
select,
textarea{
  background: rgba(0,0,0,.35) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  color: var(--z-text) !important;
  border-radius: 14px !important;
}
.form-control:focus,
.form-select:focus,
input:focus,
select:focus,
textarea:focus{
  border-color: rgba(253,181,13,.55) !important;
  box-shadow: 0 0 0 .2rem rgba(253,181,13,.15) !important;
}

/* Accent helpers */
.cat-active{
  background-color: var(--z-accent) !important;
  color: #111 !important;
}
#pay-btn{
  background: linear-gradient(180deg, var(--z-accent), #ffcc47);
  border-color: rgba(0,0,0,.55);
  color: #111;
}

/* Cart summary */
.cart-summary{
  border-top: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Smaller phones */
@media (max-width: 420px){
  .header .header-btns a{ width: 56px; }
  .bottom-nav a{ padding: 9px 6px; }
  .container{ padding-left: 10px; padding-right: 10px; }
}