/* styles.css (mobile-first) */
:root{
  --primary:#FF7274;
  --secondary:rgba(255, 128, 130, 0.05);
  --soft:var(--secondary);
  --section-alt-bg:#F9FAFB;
  --text:rgba(0,0,0,.8);
  --muted:rgba(0,0,0,.6);
  --radius:20px;
  --pill:100px;
  --shadow:0 10px 30px rgba(0,0,0,.08);
}

*{box-sizing:border-box}
html{
  scroll-behavior:smooth;
  height:100%;
}
body{
  height:100%;
  margin:0;
  font-family:"Montserrat",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:#fff;
}

img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}

.container{
  width:min(1123px, calc(100% - 32px));
  margin-inline:auto;
}

.center{text-align:center}
.mt-20{margin-top:20px}
.h2{
  margin:0 0 22px;
  font-weight:700;
  font-size:22px;
  line-height:27px;
  color:#000;
}
.muted{
  margin:0;
  color:rgba(0,0,0,.8);
  opacity:.9;
  font-size:16px;
  line-height:29px;
}
@media (min-width: 992px){
  .h2{font-size:30px;line-height:37px}
  .muted{font-size:18px;line-height:34px}
}

/* TOP BAR */
.topbar{
  background:#fff;
  position:sticky;
  top:0;
  z-index:10;
  border-bottom:1px solid rgba(0,0,0,.06);
}
.topbar__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 0;
  gap:14px;
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
}
.brand__text{
  font-size:18px;
  line-height:22px;
  color:#000;
}
.brand__text strong{letter-spacing:.8px}

.topbar__actions{
  display:flex;
  align-items:center;
  gap:12px;
}
.pill{
  display:none; /* hidden on mobile to match hamburger style */
  align-items:center;
  gap:12px;
  padding:8px 20px;
  border-radius:var(--pill);
  background:var(--soft);
}
/* Topbar contact pills: white container, coral icon on light pink circle (Figma) */
.pill--contact{
  background:#fff;
  box-shadow:0 1px 4px rgba(0,0,0,.06);
}
.pill--contact .pill__text{
  color:rgba(0,0,0,.85);
  font-size:14px;
  line-height:18px;
}
.pill__icon-wrap{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  border-radius:50%;
  background:var(--contact-icon-bg, rgba(255,114,116,.18));
  flex-shrink:0;
}
.pill__icon-wrap .pill__icon.profession-icon{
  background-color:var(--primary);
}
.pill__icon{
  width:28px;height:28px;border-radius:50%;
  background:var(--primary);
  display:grid;place-items:center;
  color:#fff;
  font-size:14px;
}
/* Profession icons: mask so color comes from CSS (primary / white in topbar) */
.profession-icon{
  display:inline-block;
  flex-shrink:0;
  -webkit-mask-size:contain;
  mask-size:contain;
  -webkit-mask-position:center;
  mask-position:center;
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
}
.pill__icon.profession-icon{
  background-color:#fff;
}
.pill__icon.profession-icon--email{
  width:20px;height:12px;
  -webkit-mask-image:url("svg/profession/email.svg");
  mask-image:url("svg/profession/email.svg");
}
.pill__icon.profession-icon--phone{
  width:18px;height:20px;
  -webkit-mask-image:url("svg/profession/phone.svg");
  mask-image:url("svg/profession/phone.svg");
}
.contact-item__icon.profession-icon{
  background-color:var(--primary);
  flex:0 0 24px;
}
.contact-item__icon.profession-icon--pin{
  width:14px;height:24px;
  -webkit-mask-image:url("svg/profession/pin.svg");
  mask-image:url("svg/profession/pin.svg");
  -webkit-mask-size:contain;
  mask-size:contain;
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-position:center;
  mask-position:center;
}
.contact-item__icon.profession-icon--phone{
  width:18px;height:20px;
  -webkit-mask-image:url("svg/profession/phone.svg");
  mask-image:url("svg/profession/phone.svg");
  -webkit-mask-size:contain;
  mask-size:contain;
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-position:center;
  mask-position:center;
}
.contact-item__icon.profession-icon--email{
  width:22px;
  height:12px;
  flex:0 0 24px;
  -webkit-mask-image:url("svg/profession/email.svg");
  mask-image:url("svg/profession/email.svg");
  -webkit-mask-size:contain;
  mask-size:contain;
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-position:center;
  mask-position:center;
}
.contact-item__icon.profession-icon--time{
  width:20px;height:20px;
  -webkit-mask-image:url("svg/profession/time.svg");
  mask-image:url("svg/profession/time.svg");
  -webkit-mask-size:contain;
  mask-size:contain;
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-position:center;
  mask-position:center;
}
.profession-icon--scissors{
  width:29px;height:33px;
  -webkit-mask-image:url("svg/profession/scissors.svg");
  mask-image:url("svg/profession/scissors.svg");
  background-color:var(--primary);
}
.pill__text{
  font-size:12px;
  line-height:15px;
  color:rgba(0,0,0,.8);
  white-space:nowrap;
}
.burger{
  width:44px;height:44px;
  border:0;
  border-radius:12px;
  background:var(--soft);
  display:grid;
  place-items:center;
  gap:6px;
  padding:10px;
  cursor:pointer;
}
.burger span{
  width:18px;height:2px;
  background:rgba(0,0,0,.7);
  display:block;
  border-radius:2px;
}

/* Mobile drawer (hamburger menu) */
.drawer-overlay{
  position:fixed;
  inset:0;
  z-index:100;
  background:rgba(0,0,0,.4);
  opacity:0;
  visibility:hidden;
  transition:opacity .25s ease, visibility .25s ease;
}
.drawer-overlay.is-open{
  opacity:1;
  visibility:visible;
}
.drawer{
  position:fixed;
  top:0;
  right:0;
  bottom:0;
  width:min(280px, 85vw);
  background:#fff;
  box-shadow:-4px 0 24px rgba(0,0,0,.12);
  padding:24px 0;
  transform:translateX(100%);
  transition:transform .25s ease;
}
.drawer-overlay.is-open .drawer{
  transform:translateX(0);
}
.drawer__links{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.drawer__link{
  display:flex;
  align-items:center;
  gap:14px;
  padding:14px 24px;
  color:var(--text);
  text-decoration:none;
  font-size:16px;
  transition:background .2s;
}
.drawer__link:hover,
.drawer__link:focus{
  background:var(--soft);
}
.drawer__icon{
  flex-shrink:0;
  width:24px;
  height:24px;
  background-color:var(--primary);
  -webkit-mask-size:contain;
  mask-size:contain;
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-position:center;
  mask-position:center;
}
.drawer__icon.profession-icon--pin{
  width:14px;height:24px;
  -webkit-mask-image:url("svg/profession/pin.svg");
  mask-image:url("svg/profession/pin.svg");
}
.drawer__icon.profession-icon--phone{
  width:18px;height:20px;
  -webkit-mask-image:url("svg/profession/phone.svg");
  mask-image:url("svg/profession/phone.svg");
}
.drawer__icon.profession-icon--email{
  width:22px;height:14px;
  -webkit-mask-image:url("svg/profession/email.svg");
  mask-image:url("svg/profession/email.svg");
}

/* Floating back-to-top */
.back-to-top{
  position:fixed;
  bottom:24px;
  right:24px;
  z-index:50;
  width:48px;
  height:48px;
  border-radius:50%;
  border:0;
  background:var(--primary);
  color:#fff;
  cursor:pointer;
  display:grid;
  place-items:center;
  box-shadow:0 4px 16px rgba(0,0,0,.15);
  opacity:0;
  visibility:hidden;
  transform:translateY(8px);
  transition:opacity .25s ease, visibility .25s ease, transform .25s ease;
}
.back-to-top.is-visible{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}
.back-to-top:hover{
  background:var(--primary);
  filter:brightness(1.08);
}
.back-to-top svg{
  width:24px;
  height:24px;
}

@media (min-width: 992px){
  .pill{display:flex}
  .burger{display:none}
  .brand__text{font-size:24px;line-height:29px}
  .drawer-overlay{display:none}
}

/* HERO */
.hero{
  position:relative;
  height:420px;
  overflow:hidden;
}
.hero__bg{
  position:absolute; inset:0;
  background:
    linear-gradient(0deg, rgba(0,0,0,.4), rgba(0,0,0,.4)),
    url("./img/female-hairdresser-beauty-salon.jpg") center/cover no-repeat;
}
.hero__content{
  position:relative;
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:14px;
  padding:36px 0;
}
.hero__title{
  margin:0;
  color:#fff;
  font-weight:700;
  font-size:28px;
  line-height:34px;
}
.hero__subtitle{
  margin:0;
  color:#fff;
  font-weight:400;
  font-size:18px;
  line-height:24px;
}
.hero__cta{
  width:auto;
  padding-left:14px;
  padding-right:14px;
  align-self:flex-start;
}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  border-radius:var(--pill);
  padding:10px 26px;
  border:1px solid transparent;
  cursor:pointer;
  font-weight:700;
  font-size:16px;
  line-height:20px;
}
.btn--primary{
  background:var(--primary);
  color:#fff;
}
.btn--ghost{
  background:#fff;
  color:rgba(0,0,0,.8);
  border-color:rgba(0,0,0,.12);
}
@media (min-width: 992px){
  .hero{height:590px}
  .hero__title{font-size:37px;line-height:45px}
  .hero__subtitle{font-size:27px;line-height:33px}
  .btn{font-size:18px;line-height:22px}
}

/* SECTIONS */
.section{padding:56px 0}
.section--soft{background:var(--soft)}
.section--plain{background:#fff}
body>section:nth-of-type(even){background:var(--section-alt-bg)}

.section-head{
  display:flex;
  flex-direction:column;
  gap:14px;
  margin-bottom:18px;
}
.section-head__line{
  width:81px;
  height:0;
  border-top:3px solid var(--primary);
}
.section-head__title{
  margin:0;
  color:#000;
  font-weight:700;
  font-size:22px;
  line-height:27px;
}
.section-head--center{
  align-items:center;
  text-align:center;
}
@media (min-width: 992px){
  .section{padding:80px 0}
  .section-head__title{font-size:30px;line-height:37px}
}

/* TWO COL */
.two-col{
  display:grid;
  grid-template-columns:1fr;
  gap:24px;
  align-items:start;
}
.image-card img{
  width:100%;
  height:auto;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
@media (min-width: 992px){
  .two-col{
    grid-template-columns:472px 1fr;
    gap:45px;
    align-items:start;
  }
}

/* O nas (about) – ena slika levo, tekst desno; na mobilnem slika zgoraj, tekst spodaj */
.about-section{
  display:grid;
  grid-template-columns:1fr;
  gap:24px;
  align-items:start;
}
.about-section__image{
  order:1;
}
.about-section__image img{
  width:100%;
  height:auto;
  object-fit:cover;
  border-radius:0;
  box-shadow:var(--shadow);
  display:block;
}
.about-section__content{order:2}
.about-section__title{
  margin:0 0 16px;
  font-size:22px;
  font-weight:700;
  line-height:1.3;
  color:var(--primary);
}
.about-desc{
  font-size:16px;
  line-height:26px;
  color:rgba(0,0,0,.8);
}
.about-desc p{margin:0 0 12px}
.about-desc p:last-child{margin-bottom:0}
@media (min-width: 992px){
  .about-section{
    grid-template-columns:minmax(280px, 1fr) 1fr;
    gap:40px;
    align-items:start;
  }
  .about-section__image{order:1}
  .about-section__content{order:2}
  .about-section__title{font-size:26px;margin-bottom:20px}
}

/* Banner */
.section--banner{
  background:var(--banner-bg, var(--primary));
  color:#fff;
  padding:48px 0;
}
.banner-inner{text-align:center}
.banner-title{margin:0 0 12px;font-size:22px;font-weight:700;line-height:1.3}
.banner-text{margin:0 0 20px;font-size:16px;line-height:1.5;opacity:.95}
.banner-inner .btn--primary{background:#fff;color:var(--banner-bg, var(--primary))}
.banner-inner .btn--primary:hover{opacity:.95}
@media (min-width: 992px){
  .section--banner{padding:64px 0}
  .banner-title{font-size:28px}
}

/* Storitve: slike brez zaobljenih vogalov (samo na tem layoutu) */
#storitve .image-card img{border-radius:0}

/* CARDS – klasične kartice: horizontalno (vrstica), skrit scroll, puščica desno */
.cards{margin-top:28px}
.cards-row{position:relative}
.cards--3{
  display:flex;
  flex-wrap:nowrap;
  flex-direction:row;
  gap:16px;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  margin-left:-16px;
  margin-right:-16px;
  /* Prva (in ob pomiku) kartica na sredini */
  padding-left:calc(50vw - max(140px, min(42.5vw, 160px)));
  padding-right:calc(50vw - max(140px, min(42.5vw, 160px)));
  scroll-padding-inline:calc(50vw - max(140px, min(42.5vw, 160px)));
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.cards--3::-webkit-scrollbar{display:none}
.cards--3 .service-card{
  flex:0 0 min(85vw, 320px);
  min-width:280px;
  scroll-snap-align:center;
}
.cards-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:2;
  width:48px;
  height:48px;
  border:0;
  background:transparent;
  color:var(--primary);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:opacity .2s, transform .2s;
}
.cards-nav:hover{opacity:.85;transform:translateY(-50%) scale(1.08)}
.cards-nav:active{transform:translateY(-50%) scale(.95)}
.cards-nav svg{width:28px;height:28px}
.cards-nav--left{left:8px}
.cards-nav--right{right:8px}
.service-card{
  background:rgba(255,114,116,.05);
  border-radius:12px;
  padding:26px;
}
.service-card__icon{margin-bottom:14px}
.service-card__title{
  margin:0 0 10px;
  font-weight:700;
  font-size:18px;
  line-height:22px;
  color:#000;
}
.service-card__text{
  margin:0;
  font-weight:400;
  font-size:16px;
  line-height:24px;
  color:#121212;
}
@media (min-width: 992px){
  .cards-nav{display:none}
  /* Na desktopu brez container omejitve, da kartice ostanejo na sredini */
  .cards-row .container.cards.cards--3{
    width:100%;
    max-width:none;
  }
  .cards--3{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:45px;
    margin-top:40px;
    overflow:visible;
    margin-left:0;
    margin-right:0;
    padding-left:0;
    padding-right:0;
  }
  .cards--3 .service-card{
    flex:0 0 300px;
    min-width:0;
    max-width:320px;
    scroll-snap-align:none;
  }
  .service-card{padding:40px;border-radius:0}
  .service-card__title{font-size:22px;line-height:27px}
  .service-card__text{font-size:20px;line-height:24px}
}

/* SERVICES IMAGE GRID */
.profession-services-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
  margin-top:32px;
}
@media (max-width: 991px){
  .profession-services-grid{
    display:flex;
    flex-wrap:nowrap;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    margin-left:-16px;
    margin-right:-16px;
    padding-left:16px;
    padding-right:16px;
    gap:12px;
  }
  .profession-services-grid__tile{
    scroll-snap-align:start;
    flex:0 0 85vw;
    min-width:280px;
  }
}
.profession-services-grid__tile{
  min-height:220px;
}
.profession-services-grid__tile--image{
  background:#111;
}
.profession-services-grid__tile--image img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  border-radius:0;
}
.profession-services-grid__tile--text{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:1.5rem 1.75rem;
  text-align:left;
}
.profession-services-grid__tile--text h3,
.profession-services-grid__tile--text .profession-services-grid__title{
  margin:0 0 .5rem;
  font-weight:700;
  font-size:1.35rem;
  line-height:1.2;
}
.profession-services-grid__tile--text p,
.profession-services-grid__tile--text .profession-services-grid__desc{
  margin:0;
  font-size:.95rem;
  line-height:1.4;
  max-width:28ch;
  font-weight:400;
}
.profession-services-grid__tile--text-dark{
  background:var(--soft, #f5ebe6);
  color:var(--text, rgba(0,0,0,.85));
}
.profession-services-grid__tile--text-pink{
  background:var(--primary, #f57279);
  color:#fff;
}
.profession-services-grid__image-placeholder{
  width:100%;
  height:100%;
  min-height:100%;
  background:var(--soft, #f5ebe6);
}
.profession-services-grid__image-placeholder--primary{
  background:var(--primary, #f57279);
}
.profession-services-grid__image-placeholder--soft{
  background:var(--soft, #f5ebe6);
}
@media (min-width: 992px){
  .profession-services-grid{
    grid-template-columns:repeat(4, 300px);
    grid-template-rows:repeat(2, 300px);
    width:1200px;
    height:600px;
    margin-left:auto;
    margin-right:auto;
    overflow:hidden;
  }
  .profession-services-grid__tile{
    min-height:300px;
  }
}

/* PRICING */
.tabs{
  display:flex;
  gap:12px;
  justify-content:center;
  flex-wrap:wrap;
  margin:18px 0 20px;
}
.tab{
  padding:10px 26px;
  border-radius:var(--pill);
  border:1px solid rgba(0,0,0,.12);
  background:#fff;
  cursor:pointer;
  font-size:14px;
  line-height:18px;
}
.tab--active{
  background:var(--primary);
  color:#fff;
  border-color:transparent;
  font-weight:700;
}
@media (min-width: 992px){
  .tab{font-size:16px;line-height:20px}
}

.price-list{
  width:100%;
  max-width:760px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:18px;
}
/* Skrij neaktivne panele cenika (preklapljanje z gumbi) – display:flex v .price-list sicer preglasi [hidden] */
#cenik .price-list-panel[hidden],
#cenik .price-list-wrapper > .price-list-panel[hidden]{
  display:none !important;
}
.price-item__row{
  display:flex;
  justify-content:space-between;
  gap:18px;
}
.price-item__name{
  font-weight:700;
  font-size:16px;
  line-height:24px;
  color:rgba(0,0,0,.8);
}
.price-item__price{
  font-weight:700;
  font-size:16px;
  line-height:24px;
  color:var(--primary);
  white-space:nowrap;
}
.price-item__desc{
  font-style:italic;
  font-weight:400;
  font-size:14px;
  line-height:24px;
  color:rgba(0,0,0,.8);
}
@media (min-width: 992px){
  .price-item__name,.price-item__price{font-size:20px;line-height:24px}
  .price-item__desc{font-size:16px;line-height:29px}
}

/* BOOKING */
.booking{
  display:grid;
  grid-template-columns:1fr;
  gap:18px;
  margin-top:24px;
}
.calendar, .reserve{
  background:#fff;
  border-radius:14px;
}
.calendar__month{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  padding:16px;
  background:var(--soft);
  border-radius:var(--pill);
  width:max-content;
}
.calendar__monthName{
  font-weight:700;
  font-size:16px;
  line-height:20px;
  color:rgba(0,0,0,.8);
}
.icon-btn{
  width:34px;height:34px;
  border-radius:50%;
  border:0;
  background:transparent;
  color:var(--primary);
  font-size:22px;
  cursor:pointer;
}
.calendar__days{
  margin-top:14px;
  display:flex;
  gap:12px;
  overflow:auto;
  padding-bottom:6px;
}
.day{
  width:50px;
  flex:0 0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
}
.day__dow{
  text-transform:uppercase;
  font-weight:700;
  font-size:14px;
  line-height:18px;
  color:#000;
}
.day__num{
  width:50px;height:50px;
  display:grid;place-items:center;
  border-radius:25px;
  font-weight:700;
  font-size:18px;
  line-height:22px;
}
.day--active .day__dow{color:var(--primary)}
.day--active .day__num{
  background:var(--primary);
  color:#fff;
}
.day__num--plain{color:rgba(0,0,0,.8)}
.day--disabled .day__dow,
.day__num--muted{color:#B6B6B6}

.slots{
  margin-top:18px;
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:12px;
}
.slot{
  height:52px;
  border-radius:10px;
  border:0;
  background:var(--soft);
  color:rgba(0,0,0,.8);
  font-size:16px;
  line-height:20px;
  cursor:pointer;
}
.slot--selected{
  background:rgba(255,128,130,.52);
  color:rgba(255,255,255,.9);
}

.reserve{
  border:1px solid rgba(0,0,0,.06);
  border-radius:14px;
  padding:16px;
  background:#fff;
}
.reserve__title{
  font-weight:700;
  font-size:16px;
  line-height:20px;
  color:#000;
}
.reserve__subtitle{
  margin-top:6px;
  font-size:12px;
  line-height:15px;
  color:rgba(0,0,0,.7);
}

.form{margin-top:14px;display:flex;flex-direction:column;gap:12px}
.field{display:flex;flex-direction:column;gap:6px}
.field__label{font-size:12px;color:rgba(0,0,0,.6)}
.input, .textarea{
  width:100%;
  border:1px solid rgba(0,0,0,.08);
  background:#F2F2F2;
  border-radius:12px;
  padding:10px 14px;
  outline:none;
}
.textarea{border-radius:14px}
.form__actions{
  display:flex;
  gap:10px;
  justify-content:flex-end;
  flex-wrap:wrap;
}

@media (min-width: 992px){
  .booking{
    grid-template-columns: 1.2fr .8fr;
    gap:26px;
    align-items:start;
  }
  .slots{grid-template-columns:repeat(6, 1fr);gap:20px}
  .reserve{padding:20px;border-radius:20px}
  .calendar__monthName{font-size:18px;line-height:22px}
  .slot{font-size:20px;line-height:24px}
}

/* LOGOS */
.logos{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:20px;
  align-items:center;
  margin-top:18px;
}
.logos__img{
  width:100%;
  height:60px;
  object-fit:contain;
  opacity:.9;
}
@media (min-width: 992px){
  .logos{grid-template-columns:repeat(4, 1fr);gap:46px}
  .logos__img{height:110px}
}

/* PARTNERS "Sodelujemo z" – brez horizontalnega pomika */
#sodelujemo{overflow-x:clip}
@supports not (overflow-x: clip){#sodelujemo{overflow-x:hidden}}
.partners .section-head__title{margin-bottom:18px}
.partners__viewport{overflow:hidden;width:100%}
.partners__track{display:flex;align-items:center;gap:40px;width:max-content}
.partners__item{flex:0 0 auto;width:140px;height:60px;display:flex;align-items:center;justify-content:center}
.partners__link{display:flex;align-items:center;justify-content:center;width:100%;height:100%;text-decoration:none;color:inherit}
.partners__img{max-width:100%;max-height:100%;object-fit:contain;opacity:.9}
@media (min-width: 992px){
  .partners__item{width:180px;height:80px}
}
.partners--loop .partners__track{animation:partnersScroll 30s linear infinite}
@keyframes partnersScroll{
  0%{transform:translateX(0)}
  100%{transform:translateX(-50%)}
}
.partners--slide .partners__scroll{
  display:flex;align-items:center;gap:40px;overflow-x:auto;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;padding-bottom:8px
}
.partners--slide .partners__scroll .partners__item{scroll-snap-align:start}
.partners--slide .partners__scroll::-webkit-scrollbar{height:6px}
.partners--slide .partners__scroll::-webkit-scrollbar-track{background:rgba(0,0,0,.06);border-radius:3px}
.partners--slide .partners__scroll::-webkit-scrollbar-thumb{background:rgba(0,0,0,.2);border-radius:3px}
/* Brez horizontalnega pomika – vsebina se obreže, brez scrollbarja */
@media (max-width: 991px){
  .partners__viewport{overflow-x:hidden;overflow-y:hidden}
  .partners--slide .partners__scroll{overflow-x:hidden;overflow-y:hidden}
}

/* GALLERY – brez horizontalnega pomika; lihe vrstice: prva slika 1/4, sode: prva slika 3/4 */
#galerija{overflow-x:clip}
@supports not (overflow-x: clip){#galerija{overflow-x:hidden}}
#galerija .gallery{
  display:flex;
  flex-direction:column;
  gap:10px;
  overflow-x:hidden;
  margin-top:1.25rem;
}
#galerija .muted.center{
  margin-bottom:0;
}
.gallery-row{
  display:flex;
  flex-wrap:nowrap;
  overflow-x:auto;
  overflow-y:hidden;
  gap:10px;
  margin-left:calc(-1 * var(--section-padding-x, 16px));
  margin-right:calc(-1 * var(--section-padding-x, 16px));
  padding-left:var(--section-padding-x, 16px);
  padding-right:var(--section-padding-x, 16px);
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.gallery-row::-webkit-scrollbar{
  display:none;
}
.gallery-item{
  flex:0 0 auto;
  margin:0;
  padding:0;
  border:0;
  background:transparent;
  cursor:pointer;
  display:block;
  line-height:0;
}
.gallery-item img{
  width:min(45vw, 220px);
  height:160px;
  object-fit:cover;
  border-radius:var(--radius);
  display:block;
}
/* Liha vrstica: prva slika samo 1/4 (desna četrtina) vidna */
.gallery-row--odd .gallery-item:first-child{
  margin-left:calc(-3 * min(45vw, 220px) / 4);
}
/* Soda vrstica: prva slika 3/4 vidna (leva četrtina obrezana) */
.gallery-row--even .gallery-item:first-child{
  margin-left:calc(-1 * min(45vw, 220px) / 4);
}
@media (min-width: 768px){
  .gallery-row{gap:10px}
  .gallery-item img{width:280px;height:200px}
  .gallery-row--odd .gallery-item:first-child{margin-left:calc(-3 * 280px / 4)}
  .gallery-row--even .gallery-item:first-child{margin-left:calc(-1 * 280px / 4)}
}
@media (min-width: 992px){
  .gallery-item img{width:300px;height:274px}
  .gallery-row--odd .gallery-item:first-child{margin-left:calc(-3 * 300px / 4)}
  .gallery-row--even .gallery-item:first-child{margin-left:calc(-1 * 300px / 4)}
}

/* Galerija – lightbox ob kliku */
.gallery-lightbox{
  position:fixed;
  inset:0;
  z-index:200;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  opacity:0;
  visibility:hidden;
  transition:opacity .25s ease, visibility .25s ease;
}
.gallery-lightbox.is-open{
  opacity:1;
  visibility:visible;
}
.gallery-lightbox__backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.85);
  cursor:pointer;
}
.gallery-lightbox__close{
  position:absolute;
  top:16px;
  right:16px;
  z-index:2;
  width:48px;
  height:48px;
  border:0;
  border-radius:50%;
  background:rgba(255,255,255,.2);
  color:#fff;
  cursor:pointer;
  display:grid;
  place-items:center;
  transition:background .2s;
}
.gallery-lightbox__close:hover{
  background:rgba(255,255,255,.35);
}
.gallery-lightbox__close svg{
  width:24px;
  height:24px;
}
/* Levo/desno navigacija – samo na desktopu */
.gallery-lightbox__nav{
  display:none;
}
@media (min-width:992px){
  .gallery-lightbox__nav{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    z-index:2;
    width:52px;
    height:52px;
    border:0;
    border-radius:50%;
    background:rgba(255,255,255,.2);
    color:#fff;
    cursor:pointer;
    display:grid;
    place-items:center;
    transition:background .2s;
  }
  .gallery-lightbox__nav:hover{
    background:rgba(255,255,255,.35);
  }
  .gallery-lightbox__nav svg{
    width:28px;
    height:28px;
  }
  .gallery-lightbox__nav--prev{left:20px;}
  .gallery-lightbox__nav--next{right:20px;}
  .gallery-lightbox--single .gallery-lightbox__nav{display:none;}
}
.gallery-lightbox__content{
  position:relative;
  z-index:1;
  max-width:100%;
  max-height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}
.gallery-lightbox__img{
  max-width:100%;
  max-height:calc(100vh - 40px);
  width:auto;
  height:auto;
  object-fit:contain;
  border-radius:var(--radius);
  box-shadow:0 20px 60px rgba(0,0,0,.5);
}

/* CONTACT — map left (rounded), contact info right with orange icons */
.contact{
  display:grid;
  grid-template-columns:1fr;
  gap:26px;
  align-items:start;
}
.contact__map-wrap{
  min-height:280px;
  width:100%;
}
.contact__map-col .map-card{
  border-radius:16px;
  overflow:hidden;
  box-shadow:var(--shadow);
  height:100%;
  min-height:280px;
}
.contact__map-col .map-card iframe{
  display:block;
  width:100%;
  height:100%;
  min-height:280px;
}
.contact .contact-item__icon.profession-icon{
  background-color:#e85d04;
}
.contact-list{
  list-style:none;
  padding:0;
  margin:0 0 18px;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.contact-item{
  display:flex;
  gap:14px;
  align-items:center;
  font-size:16px;
  line-height:26px;
  color:rgba(0,0,0,.8);
}
.contact-item__icon{
  color:var(--primary);
  font-size:18px;
  width:24px;
  flex:0 0 24px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.map-card img{
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.grid-2{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
}
.grid-2__full{grid-column:1 / -1}
.input--pill{border-radius:var(--pill)}
.input--pill.input--error,.textarea--card.textarea--error{border:2px solid #c00;outline:none}
.textarea--card{border-radius:var(--radius);padding:12px 16px}
.form--contact .btn{width:max-content}
.form--contact__message{margin-bottom:12px;padding:12px 16px;border-radius:var(--radius);font-size:15px}
.form--contact__message--success{background:rgba(0,128,0,.12);color:#0a5c0a;border:1px solid rgba(0,128,0,.3)}
.form--contact__message--error{background:rgba(200,0,0,.08);color:#a00;border:1px solid rgba(200,0,0,.25)}
.form--contact__message[hidden]{display:none!important}
.form--contact__field-error{margin-top:4px;font-size:13px;color:#c00}

@media (min-width: 992px){
  .contact{
    grid-template-columns: 1fr 1fr;
    gap:121px;
  }
  .grid-2{grid-template-columns:1fr 1fr;gap:23px}
}

/* FOOTER */
.footer{
  background:#5E5E5E;
  padding:44px 0;
  color:rgba(229,229,229,.9);
}
.footer__inner{
  display:grid;
  grid-template-columns:1fr;
  gap:24px;
}
.brand--footer .brand__text{color:#fff}
.footer__lines{margin-top:12px;display:grid;gap:8px;font-size:14px;line-height:22px}
.footer__social{
  margin-top:16px;
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:center;
}
.footer__social-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:rgba(229,229,229,.9);
  transition:color .2s, opacity .2s;
}
.footer__social-link:hover{
  color:#fff;
  opacity:1;
}
.footer__social-link img{
  width:24px;
  height:24px;
  display:block;
}
.footer__meta{
  display:grid;
  gap:10px;
  font-style:italic;
  font-size:14px;
  line-height:22px;
}
@media (min-width: 992px){
  .footer{padding:60px 0}
  .footer__inner{
    grid-template-columns: 1fr auto;
    align-items:start;
    gap:40px;
  }
  .footer__lines,.footer__meta{font-size:16px;line-height:26px}
}
/* FIX: #termini horizontal overflow */
#termini {
  overflow-x: clip;         /* modern */
}
@supports not (overflow-x: clip) {
  #termini { overflow-x: hidden; }
}

/* da grid itemi ne silijo širine */
#termini .booking,
#termini .calendar,
#termini .reserve {
  min-width: 0;
}

/* slots grid: prepreči min-content overflow */
#termini .slots {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* če se dnevi raztegujejo, naj ostane overflow znotraj */
#termini .calendar__days {
  max-width: 100%;
  overflow-x: auto;
}

/* dodatno: reži vse, kar gre ven */
#termini .calendar {
  overflow: hidden;
}

/* Lit booking widget: use page theme (--primary) for accent */
#termini planego-booking-widget,
.booking planego-booking-widget {
  --planego-accent: var(--primary);
}

.reserve--v2{
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:20px;
  padding:22px;
}

.reserve--v2 .reserve__head{
  padding:0;
  margin-bottom:16px;
}

.reserve--v2 .reserve__title{
  font-weight:700;
  font-size:22px;
  line-height:27px;
  color:#000;
}

.reserve--v2 .reserve__subtitle{
  margin-top:10px;
  font-weight:400;
  font-size:18px;
  line-height:22px;
  color:rgba(0,0,0,.85);
}

/* input look like screenshot (white, outline) */
.input--outline{
  background:#fff;
  border:1px solid rgba(0,0,0,.18);
  border-radius:14px;
  padding:14px 16px;
}

/* spacing closer to figma */
.reserve-form{ gap:18px; }
.reserve--v2 .field__label{
  font-size:16px;
  line-height:20px;
  color:rgba(0,0,0,.7);
}
.reserve--v2 .field__label--strong{
  font-weight:700;
  color:#000;
  margin-bottom:8px;
}

/* grid: 2 columns on >= 520px */
.reserve--v2 .grid-2{
  display:grid;
  grid-template-columns:1fr;
  gap:18px;
}
.reserve--v2 .grid-2__full{ grid-column:1 / -1; }

@media (min-width: 520px){
  .reserve--v2 .grid-2{ grid-template-columns:1fr 1fr; }
}

/* custom checkboxes (like square outlines) */
.checks{
  display:flex;
  flex-wrap:wrap;
  gap:22px;
  padding-top:6px;
}

.check{
  display:flex;
  align-items:center;
  gap:12px;
  cursor:pointer;
  user-select:none;
}
.check input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

.check__box{
  width:26px;
  height:26px;
  border-radius:6px;
  border:1px solid rgba(0,0,0,.20);
  background:#fff;
  display:inline-block;
  position:relative;
}

.check__text{
  font-size:18px;
  line-height:22px;
  color:rgba(0,0,0,.85);
}

/* checked state */
.check input:checked + .check__box{
  border-color:var(--primary);
}
.check input:checked + .check__box::after{
  content:"";
  position:absolute;
  inset:6px;
  background:var(--primary);
  border-radius:4px;
}

.check--wide{ margin-top:8px; }

/* notice box (pink) */
.notice{
  border:1px solid rgba(255,114,116,.55);
  background:rgba(255,114,116,.18);
  border-radius:16px;
  padding:18px 18px;
}
.notice__title{
  font-weight:700;
  font-size:18px;
  line-height:22px;
  color:rgba(0,0,0,.85);
  margin-bottom:10px;
}
.notice__text{
  font-size:18px;
  line-height:30px;
  color:rgba(0,0,0,.75);
}

/* buttons row like screenshot */
.form__actions--split{
  display:flex;
  gap:16px;
  justify-content:space-between;
  flex-wrap:nowrap;
}

.btn--wide{
  width:50%;
  height:52px;
  border-radius:100px;
}

.btn--ghost{
  background:#fff;
  border:2px solid rgba(0,0,0,.35);
  color:rgba(0,0,0,.45);
  font-weight:700;
}

@media (min-width: 992px){
  .reserve--v2{ padding:28px; }
  .reserve--v2 .reserve__title{ font-size:30px; line-height:37px; }
  .reserve--v2 .reserve__subtitle{ font-size:28px; line-height:34px; }
}
/* ===== Malice (weekly menu) ===== */
/* Ozadje sekcije pride iz inline style (background-color + --menu-pattern-opacity), da transparentnost vedno deluje. */
.menu{
  position: relative;
  padding: 70px 0;
  min-height: 480px;
  background-color: rgba(255, 245, 245, 0.98); /* fallback, če inline style manjka */
  overflow-x: clip; /* prepreči desni overflow */
}
@supports not (overflow-x: clip){
  .menu{ overflow-x: hidden; }
}
/* Slika ozadja: ločen sloj z opacity (--menu-image-opacity), da je slika res prosojna. */
.menu__bg{
  position: absolute;
  inset: 0;
  z-index: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: var(--menu-image-opacity, 0.5);
  pointer-events: none;
}
/* Barvni overlay nad sliko (transparentnost barve iz --menu-color-overlay v inline style). */
.menu__overlay{
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

/* pattern ozadje (zamenjaj url, ko boš imel sliko iz figme) */
.menu::before{
  content:"";
  position:absolute;
  inset:0;
  background-image: url("assets/food-pattern.png"); /* <-- zamenjaj */
  background-repeat: repeat;
  background-size: 900px auto;
  opacity: var(--menu-pattern-opacity, .22);
  pointer-events:none;
}

/* container */
.menu__inner{
  position: relative;
  z-index: 1;
  max-width: 980px;
  margin: 0 auto;
  padding: 0 16px;
  text-align: center;
}

.menu__title{
  font-size: 26px;
  line-height: 32px;
  font-weight: 700;
  margin: 0 0 10px;
}

.menu__lead{
  max-width: 760px;
  margin: 0 auto 18px;
  font-size: 14px;
  line-height: 22px;
  color: rgba(0,0,0,.65);
}

/* tabs – horizontalni scroll, da se vsi dnevi prikažejo na ozkih zaslonih */
.menu__tabs{
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  justify-content: center;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 10px 2px 16px;
  margin: 0 auto 10px;
  max-width: 100%;
  min-width: 0;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  scroll-behavior: smooth;
}
.menu__tabs::-webkit-scrollbar{ display: none; }

/* Na ozkem zaslonu poravnaj tab-e levo, da je prvi gumb viden in se da pomikati v desno */
@media (max-width: 991px){
  .menu__tabs{ justify-content: flex-start; }
}

.menu__tab{
  flex: 0 0 auto;
  width: 108px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.65);
  border-radius: 10px;
  padding: 10px 10px 9px;
  cursor:pointer;
  text-align:center;
  transition: background .25s ease, border-color .25s ease, color .25s ease, transform .2s ease;
}
.menu__tab:hover{
  background: rgba(255,255,255,.9);
}
.menu__tab:active{
  transform: scale(0.98);
}
.menu__tabDay{
  display:block;
  font-weight:700;
  font-size: 12px;
  line-height: 14px;
}
.menu__tabDate{
  display:block;
  margin-top:4px;
  font-size: 11px;
  line-height: 13px;
  color: rgba(0,0,0,.55);
  transition: color .25s ease;
}
.menu__tab.is-active{
  background: var(--primary, #FF7274);
  border-color: transparent;
  color: #fff;
}
.menu__tab.is-active .menu__tabDate{ color: rgba(255,255,255,.85); }

/* card – perspektiva za flip animacijo panelov */
.menu__card{
  max-width: 760px;
  margin: 0 auto;
  background: rgba(255,255,255,.62);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 18px;
  padding: 18px 16px;
  text-align:left;
  perspective: 1200px;
}

/* rows */
.menu__list{
  display:flex;
  flex-direction:column;
  gap:14px;
}
/* Skrij vse panele dni; prikaži samo aktivnega (preklapljanje z gumbi) */
.menu__listPanel{
  display:none;
}
.menu__card > .menu__listPanel{
  display:none;
}
.menu__listPanel.is-active{
  display:flex;
  animation: tracking-in-contract-bck-top 1s cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal both;
}
.menu__card > .menu__listPanel.is-active{
  display:flex;
  animation: tracking-in-contract-bck-top 1s cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal both;
}
@keyframes tracking-in-contract-bck-top{
  0%{
    letter-spacing: .3em;
    transform: translateZ(400px) translateY(-300px);
    opacity: 0;
  }
  40%{
    opacity: .6;
  }
  100%{
    letter-spacing: normal;
    transform: translateZ(0) translateY(0);
    opacity: 1;
  }
}

.menu__row{
  display:grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items:start;
  padding-bottom: 14px;
  border-bottom: 1px dashed rgba(0,0,0,.18);
}
.menu__row:last-child{ border-bottom: 0; padding-bottom: 0; }

.menu__rowTitle{
  font-weight:700;
  font-size: 14px;
  line-height: 18px;
  margin-bottom: 3px;
}
.menu__rowDesc{
  font-size: 13px;
  line-height: 20px;
  color: rgba(0,0,0,.62);
}

.menu__price{
  font-weight:700;
  color: var(--primary, #FF7274);
  white-space: nowrap;
  padding-top: 2px;
}

.menu__subTitle{
  text-align:center;
  font-weight:700;
  margin: 18px 0 12px;
}

.menu__empty{
  margin: 8px 0 4px;
  text-align:center;
  font-size:13px;
  line-height:20px;
  color: rgba(0,0,0,.64);
  font-style: italic;
}

.menu__foot{
  margin: 16px 0 0;
  font-size: 12px;
  line-height: 18px;
  color: rgba(0,0,0,.6);
}

/* desktop tweaks */
@media (min-width: 992px){
  .menu{ padding: 90px 0; }
  .menu__title{ font-size: 30px; line-height: 36px; }
  .menu__lead{ font-size: 14px; line-height: 24px; }
  .menu__tab{ width: 120px; }
  .menu__card{ padding: 22px 22px; }
  .menu__rowTitle{ font-size: 15px; }
  .menu__rowDesc{ font-size: 14px; }
}