/* ===== RAIL MENI — samostalni stil (2026-09-12) =====
   Ide na stranice koje NE ucitavaju /assets/css/style.css (sektorske i landing
   stranice sa sopstvenim inline CSS-om). Sve boje imaju fallback, pa meni
   izgleda isto i kad stranica nema D&L palet promenljive.
   Na stranicama koje ucitavaju style.css ovaj fajl nije potreban.          */

.rail-nav-scope,
:root {
  --rail-white: var(--white, #ffffff);
  --rail-bg2: var(--bg2, #f0ede6);
  --rail-sand: var(--sand, #e8e3d9);
  --rail-accent: var(--accent, #1a5c8a);
  --rail-accent-pale: var(--accent-pale, #e8f1f8);
  --rail-text: var(--text, #18181a);
  --rail-text-mid: var(--text-mid, #484848);
}

/* dugme u navigaciji (samo mobilni) */
.rail-burger {
  display: none; width: 48px; height: 48px; border: 0; background: transparent;
  cursor: pointer; flex-direction: column; justify-content: center;
  align-items: center; gap: 5px; padding: 0;
}
.rail-burger span {
  display: block; width: 24px; height: 2.5px; background: var(--rail-text);
  border-radius: 2px; transition: transform .25s, opacity .2s;
}
.rail-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.rail-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.rail-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* jezicak na desktopu */
.rail-tab {
  position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 210;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 16px 10px 14px; border: 1px solid var(--rail-sand); border-right: 0;
  border-radius: 14px 0 0 14px; background: var(--rail-white); color: var(--rail-text);
  cursor: pointer; box-shadow: -4px 0 18px rgba(0,0,0,.08);
  transition: background .2s, transform .25s; font: inherit;
}
.rail-tab:hover { background: var(--rail-accent-pale); }
.rail-tab-icon { display: flex; flex-direction: column; gap: 4px; }
.rail-tab-icon i { display: block; width: 20px; height: 2.5px; background: var(--rail-accent); border-radius: 2px; }
.rail-tab-label {
  writing-mode: vertical-rl; font-size: .72rem; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase; color: var(--rail-text-mid);
}
body.rail-open .rail-tab { transform: translate(120%, -50%); }

/* panel */
.rail-overlay { position: fixed; inset: 0; background: rgba(24,24,26,.45); z-index: 300; opacity: 0; transition: opacity .25s; }
.rail-overlay.show { opacity: 1; }
.rail-overlay[hidden] { display: none; }
.rail-panel {
  position: fixed; top: 0; right: 0; height: 100dvh; width: min(380px, 88vw);
  background: var(--rail-white); z-index: 310; display: flex; flex-direction: column;
  padding: 18px 26px 28px; overflow-y: auto; transform: translateX(105%);
  transition: transform .3s cubic-bezier(.4,0,.2,1);
  box-shadow: -12px 0 40px rgba(0,0,0,.14);
  font-family: inherit; text-align: left;
}
.rail-panel.open { transform: translateX(0); }
.rail-head { display: flex; align-items: center; justify-content: space-between; height: 46px; margin-bottom: 14px; }
.rail-head .nav-logo { font-weight: 800; font-size: 1.1rem; color: var(--rail-text); text-decoration: none; }
.rail-head .nav-logo span { color: var(--rail-accent); }
.rail-close { border: 0; background: transparent; font-size: 2rem; line-height: 1; color: var(--rail-text-mid); cursor: pointer; padding: 4px 8px; }
.rail-close:hover { color: var(--rail-accent); }

/* jezici kao pilule */
.rail-panel .lang-sw { display: flex; gap: 8px; margin-bottom: 20px; }
.rail-panel .lang-sw a {
  min-height: 40px; min-width: 56px; display: inline-flex; align-items: center;
  justify-content: center; font-size: .82rem; font-weight: 700; letter-spacing: .06em;
  border: 1px solid var(--rail-sand); border-radius: 999px;
  background: var(--rail-white); color: var(--rail-text-mid); text-decoration: none;
}
.rail-panel .lang-sw a.active { background: var(--rail-accent); border-color: var(--rail-accent); color: #fff; }

/* stavke */
.rail-list { list-style: none; border-top: 1px solid var(--rail-sand); margin: 0; padding: 0; }
.rail-list > li { border-bottom: 1px solid var(--rail-sand); }
.rail-link, .rail-toggle {
  display: flex; align-items: center; gap: 12px; width: 100%;
  min-height: 48px; padding: 15px 4px; font: inherit; font-size: 1.05rem;
  font-weight: 700; color: var(--rail-text); background: transparent; border: 0;
  text-align: left; cursor: pointer; text-decoration: none; transition: color .15s;
}
.rail-link:hover, .rail-toggle:hover { color: var(--rail-accent); }
.rail-toggle b { width: 18px; font-weight: 500; color: var(--rail-accent); font-size: 1.2rem; line-height: 1; transition: transform .25s; }
.rail-toggle[aria-expanded="true"] b { transform: rotate(45deg); }
.rail-link { padding-left: 34px; }
.rail-sub { list-style: none; max-height: 0; overflow: hidden; transition: max-height .3s ease; margin: 0; padding: 0; }
.rail-group.open .rail-sub { max-height: 420px; }
.rail-sub a {
  display: flex; align-items: center; min-height: 44px;
  padding: 9px 4px 9px 34px; font-size: .95rem; font-weight: 500;
  color: var(--rail-text-mid); text-decoration: none;
}
.rail-sub a:hover { color: var(--rail-accent); }

/* WhatsApp u dnu panela */
.rail-cta {
  margin-top: auto; position: sticky; bottom: 0; display: block; text-align: center;
  background: #25D366; color: #fff; font-weight: 800; padding: 14px 18px;
  border-radius: 50px; text-decoration: none;
}
.rail-cta:hover { background: #1fb85a; }
.rail-cta-t { display: block; }
.rail-cta-s { display: block; font-size: .82rem; font-weight: 600; opacity: .92; }
body.rail-open { overflow: hidden; }

@media (max-width: 680px) {
  .rail-burger { display: flex; }
  .rail-tab { display: none; }
  .rail-panel { width: min(340px, 86vw); }
}

/* Lina i plutajuca dugmad se sklanjaju dok je meni otvoren */
@media (max-width: 1023px) {
  body.rail-open #dl-ai,
  body.rail-open .wa-float,
  body.rail-open .viber-float { display: none !important; }
}

/* Desktop: ove stranice zadrzavaju svoj postojeci gornji meni.
   Rail je ovde SAMO mobilni — ne diramo desktop navigaciju koja radi. */
@media (min-width: 681px) {
  .rail-tab, .rail-panel, .rail-overlay { display: none !important; }
  .rail-burger { display: none !important; }
  body.rail-open { overflow: auto; }
}