:root{
  --black:#171411; --coal:#221E1A; --paper:#F1EEE7;
  --red:#9E2620; --red-deep:#7E1B16; --yellow:#F0B41C;
  --bone:#E9E4D8; --ink:#262220;
  --display:'Rubik Distressed','Oswald',sans-serif;
  --label:'Oswald',sans-serif;
  --body:'Rubik',sans-serif;
  --marker:'Permanent Marker',cursive;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}
body{font-family:var(--body);background:var(--paper);color:var(--ink);line-height:1.6;position:relative}
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:999;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
html{background:#171411 url('../img/pozadina.svg') repeat;background-size:620px;background-attachment:fixed}
body{max-width:1280px;margin:0 auto;box-shadow:0 0 50px rgba(0,0,0,.45)}
.badge-img{height:3.8rem;width:auto;display:block;position:absolute;right:1.4rem;top:50%;transform:translateY(-50%)}
@media (max-width:700px){.badge-img{position:static;transform:none}.topbar{padding:.9rem 1.5rem}}
a{color:inherit;text-decoration:none}
:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}

/* ===== header / nav (shared with homepage) ===== */
.topbar{background:var(--black);color:var(--bone);display:flex;align-items:center;justify-content:flex-start;gap:1.5rem;padding:.9rem 5rem .9rem 1.4rem;flex-wrap:wrap;position:relative}
.logo{display:flex;align-items:center;gap:.5rem}
.logo-img{height:4.2rem;width:auto;display:block}
.bolt-img{height:3.9rem;width:auto;display:block}
.moto-img{height:3.4rem;width:auto;display:block}
.logo-mark{font-family:var(--marker);font-size:1.7rem;color:var(--bone);white-space:nowrap}
.logo-year{display:flex;flex-direction:column;gap:.2rem;font-family:var(--label);font-weight:600;font-size:.65rem}
.logo-year span{background:var(--red);color:var(--bone);padding:.05rem .3rem;line-height:1.2}
.tagline{font-family:var(--display);font-size:1.05rem;line-height:1.15;text-transform:uppercase;letter-spacing:.04em;max-width:16ch}
.nav{background:var(--red);display:flex;flex-wrap:wrap;position:sticky;top:0;z-index:50;box-shadow:0 3px 0 rgba(0,0,0,.35)}
.nav-links > a{font-family:var(--display);font-size:1rem;letter-spacing:.06em;color:var(--bone);padding:.8rem 1.4rem;text-transform:uppercase;border-right:1px solid var(--red-deep);transition:background .15s}
.nav-links > a:hover{background:var(--red-deep)}
.nav-links > a[aria-current]{background:var(--black)}

/* ===== page layout ===== */
.wrap{max-width:1060px;margin:0 auto;padding:3rem 1.5rem 4rem;display:grid;grid-template-columns:1.4fr 1fr;gap:3rem;align-items:start}
h1{font-family:var(--display);font-size:clamp(2rem,5vw,2.8rem);text-transform:uppercase;letter-spacing:.03em;color:var(--black);margin-bottom:.4rem}
.lede{margin-bottom:2rem;max-width:55ch}

/* ===== form ===== */
.form-card{background:#fff;border:3px solid var(--black);box-shadow:8px 8px 0 var(--black);padding:1.8rem 1.6rem}
fieldset{border:none;margin-bottom:1.4rem}
legend{font-family:var(--label);font-weight:600;font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--red);margin-bottom:.7rem}
.row{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
.field{margin-bottom:.9rem}
label{display:block;font-family:var(--label);font-weight:500;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;margin-bottom:.3rem}
label .req{color:var(--red)}
input,select,textarea{
  width:100%;font-family:var(--body);font-size:1rem;color:var(--ink);
  background:var(--paper);border:2px solid var(--black);padding:.6rem .7rem;border-radius:0;
}
input:focus,select:focus,textarea:focus{outline:3px solid var(--yellow);outline-offset:0;border-color:var(--black)}
textarea{resize:vertical;min-height:110px}
select:disabled{opacity:.45;cursor:not-allowed}
.err{display:none;color:var(--red);font-size:.8rem;margin-top:.25rem;font-weight:500}
.field.invalid input,.field.invalid select,.field.invalid textarea{border-color:var(--red);background:#FBEFEE}
.field.invalid .err{display:block}
.submit{
  display:inline-block;width:100%;cursor:pointer;border:none;
  background:var(--red);color:var(--bone);
  font-family:var(--display);font-size:1.35rem;letter-spacing:.05em;text-transform:uppercase;
  padding:.75em 1.2em;box-shadow:6px 6px 0 var(--black);
  transition:transform .12s, box-shadow .12s;
}
.submit:hover{transform:translate(3px,3px);box-shadow:3px 3px 0 var(--black)}
.submit:disabled{opacity:.6;cursor:wait;transform:none}
.form-note{font-size:.8rem;color:#6b645c;margin-top:.9rem}
.status{display:none;margin-top:1.2rem;padding:1rem 1.1rem;font-weight:500;border:3px solid var(--black)}
.status.ok{display:block;background:#E4EFE2;border-color:#3E6B3A}
.status.fail{display:block;background:#FBEFEE;border-color:var(--red)}

/* ===== booking calendar + slots ===== */
.book-picker{
  display:grid;
  grid-template-columns:1.05fr 1fr;
  gap:1rem;
  margin-top:.35rem;
}
.book-cal{
  background:var(--black);
  color:var(--bone);
  border:3px solid var(--black);
  padding:.85rem .8rem 1rem;
}
.book-cal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.5rem;
  margin-bottom:.7rem;
}
.book-cal-head strong{
  font-family:var(--display);
  font-size:1rem;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.book-cal-nav{
  width:2rem;height:2rem;
  border:2px solid #36302A;
  background:transparent;
  color:var(--bone);
  font-size:1.2rem;
  line-height:1;
  cursor:pointer;
}
.book-cal-nav:hover{border-color:var(--yellow);color:var(--yellow)}
.book-cal-dow{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:.2rem;
  margin-bottom:.35rem;
  text-align:center;
  font-family:var(--label);
  font-size:.62rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#9C948A;
}
.book-cal-grid{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:.25rem;
}
.book-day{
  aspect-ratio:1;
  border:2px solid transparent;
  background:transparent;
  color:var(--bone);
  font-family:var(--label);
  font-weight:600;
  font-size:.85rem;
  cursor:pointer;
}
.book-day.is-empty{visibility:hidden;pointer-events:none}
.book-day.is-disabled,
.book-day.is-sunday{
  opacity:.28;
  cursor:not-allowed;
}
.book-day.is-today{border-color:#5A5046}
.book-day:not(.is-disabled):hover{border-color:var(--yellow);color:var(--yellow)}
.book-day.is-selected{
  background:var(--red);
  border-color:var(--red);
  color:var(--bone);
}
.book-slots{
  border:3px solid var(--black);
  background:var(--paper);
  padding:.85rem .8rem;
  min-height:100%;
}
.book-slots-label{
  font-family:var(--label);
  font-weight:600;
  font-size:.72rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--red);
  margin-bottom:.65rem;
}
.book-slots-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:.45rem;
}
.book-slot{
  border:2px solid var(--black);
  background:#fff;
  color:var(--ink);
  font-family:var(--label);
  font-weight:600;
  font-size:.85rem;
  letter-spacing:.04em;
  padding:.55rem .3rem;
  cursor:pointer;
  transition:background .12s, color .12s;
}
.book-slot:hover{background:var(--yellow)}
.book-slot.is-selected{
  background:var(--black);
  color:var(--bone);
}
.book-slots-empty{
  margin-top:.4rem;
  font-size:.88rem;
  color:#6b645c;
}
.field.invalid .book-picker{outline:3px solid var(--red);outline-offset:2px}

/* ===== sidebar ===== */
.side h2{font-family:var(--display);font-size:1.35rem;text-transform:uppercase;letter-spacing:.04em;margin-bottom:.8rem}
.direct{display:flex;flex-direction:column;gap:.8rem;margin-bottom:2.2rem}
.direct a{
  background:var(--black);color:var(--bone);text-align:center;
  font-family:var(--label);font-weight:600;letter-spacing:.08em;text-transform:uppercase;font-size:.85rem;
  padding:.85em 1.2em;box-shadow:5px 5px 0 rgba(0,0,0,.25);
  transition:transform .12s, box-shadow .12s;
}
.direct a:hover{transform:translate(2px,2px);box-shadow:3px 3px 0 rgba(0,0,0,.25)}
.direct a.viber{background:#665CAC}
.expect{background:var(--black);color:var(--bone);padding:1.5rem 1.4rem}
.expect h2{color:var(--yellow)}
.expect ul{list-style:none}
.expect li{padding:.55rem 0;border-bottom:1px solid #36302A;font-size:.92rem}
.expect li:last-child{border-bottom:none}
.expect strong{color:var(--yellow);font-family:var(--label);font-weight:600;letter-spacing:.05em}

footer{background:var(--black);text-align:center;padding:2.5rem 1rem}
.wordmark-img{width:min(520px,82%);height:auto;display:inline-block}
.foot-meta{margin-top:1rem;color:#8C8478;font-size:.78rem;font-family:var(--label);letter-spacing:.14em;text-transform:uppercase}

@media (max-width:820px){
  .wrap{grid-template-columns:1fr;gap:2.2rem}
  .row{grid-template-columns:1fr}
  .book-picker{grid-template-columns:1fr}
  .book-slots-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .nav{justify-content:flex-start}
  .topbar{justify-content:center;text-align:center}
}
@media (max-width:480px){
  .book-slots-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}