:root{
  --green:#38b85a;
  --green-dark:#1d7b39;
  --blue:#13b7d8;
  --blue-dark:#0876aa;
  --dark:#071f24;
  --white:#ffffff;
  --muted:#d9eef0;
  --glass:rgba(255,255,255,.13);
  --glass-border:rgba(255,255,255,.24);
}

*{
  box-sizing:border-box;
  margin:0;
  padding:0;
}

html{
  scroll-behavior:smooth;
}

body{
  font-family:Inter, Arial, Helvetica, sans-serif;
  background:#f5fbfb;
  color:#102428;
  overflow-x:hidden;
}

*{
  scrollbar-width:thin;
  scrollbar-color:rgba(29,123,57,.42) transparent;
}

*::-webkit-scrollbar{
  width:10px;
  height:10px;
}

*::-webkit-scrollbar-track{
  background:transparent;
}

*::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,rgba(19,183,216,.48),rgba(56,184,90,.62));
  border:3px solid transparent;
  border-radius:999px;
  background-clip:content-box;
}

*::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(180deg,rgba(19,183,216,.72),rgba(56,184,90,.82));
  border:2px solid transparent;
  background-clip:content-box;
}

a{
  color:inherit;
}

.hero{
  min-height:100svh;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:22px;
  color:white;
  isolation:isolate;
  overflow:hidden;
}

.hero-bg{
  position:absolute;
  inset:0;
  background:
    linear-gradient(135deg,rgba(4,30,35,.78),rgba(6,95,110,.36)),
    url("slike/5.jpeg") center/cover no-repeat;
  filter:blur(3px) scale(1.025);
  z-index:-3;
}

.hero-overlay{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 20% 20%,rgba(19,183,216,.28),transparent 32%),
    radial-gradient(circle at 80% 25%,rgba(56,184,90,.2),transparent 34%),
    linear-gradient(180deg,rgba(0,0,0,.18),rgba(0,0,0,.5));
  z-index:-2;
  pointer-events:none;
}

.hero-inner{
  width:min(1040px,100%);
  display:grid;
  grid-template-columns:1fr;
  place-items:center;
  text-align:center;
  animation:rise .85s ease both;
}

@keyframes rise{
  from{opacity:0;transform:translateY(24px)}
  to{opacity:1;transform:translateY(0)}
}

/* --------------------------------------------------------------------------
   Obvestilo / promocijska pasica.
   Barve in animacijo določi lastnik v admin panelu; sem pridejo kot
   spremenljivke --ann-bg, --ann-fg in --ann-accent.
   -------------------------------------------------------------------------- */

.status{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:12px 18px;
  border-radius:999px;
  background:var(--ann-bg,rgba(255,255,255,.16));
  color:var(--ann-fg,#ffffff);
  border:1px solid rgba(255,255,255,.32);
  backdrop-filter:blur(18px);
  font-weight:900;
  letter-spacing:.8px;
  text-transform:uppercase;
  box-shadow:0 12px 35px rgba(0,0,0,.18);
  margin-bottom:28px;
  max-width:min(680px,100%);
  text-align:center;
  flex-wrap:wrap;
  justify-content:center;
}

@keyframes pulse{
  0%,100%{transform:scale(1);box-shadow:0 12px 35px rgba(0,0,0,.18)}
  50%{transform:scale(1.025);box-shadow:0 14px 42px rgba(19,183,216,.26)}
}

@keyframes annGlow{
  0%,100%{box-shadow:0 12px 35px rgba(0,0,0,.18)}
  50%{box-shadow:0 12px 35px rgba(0,0,0,.18),0 0 26px 5px var(--ann-accent,#ffe066)}
}

@keyframes annBlink{
  0%,100%{opacity:1}
  50%{opacity:.22}
}

.status.anim-pulse{animation:pulse 2.4s ease-in-out infinite}
.status.anim-glow{animation:annGlow 2.8s ease-in-out infinite}
.status.anim-blink .status-dot{animation:annBlink 1.3s ease-in-out infinite}

.status-dot{
  width:12px;
  height:12px;
  flex:0 0 12px;
  border-radius:50%;
  background:var(--ann-accent,#ffe066);
  box-shadow:0 0 0 8px color-mix(in srgb,var(--ann-accent,#ffe066) 18%,transparent);
}

@supports not (color: color-mix(in srgb, red 50%, blue)){
  .status-dot{box-shadow:0 0 0 8px rgba(255,255,255,.14)}
}

.status-link{
  padding:5px 13px;
  border-radius:999px;
  border:1px solid currentColor;
  font-size:.82em;
  text-transform:none;
  letter-spacing:0;
  text-decoration:none;
  color:inherit;
  font-weight:800;
  transition:.2s ease;
}

.status-link:hover{background:rgba(255,255,255,.2)}

h1{
  font-size:clamp(48px,9vw,112px);
  line-height:.9;
  letter-spacing:-4px;
  margin-bottom:18px;
  text-shadow:0 16px 48px rgba(0,0,0,.34);
}

.subtitle{
  font-size:clamp(19px,3vw,33px);
  font-weight:700;
  color:#e8fbff;
  margin-bottom:28px;
  text-shadow:0 10px 26px rgba(0,0,0,.25);
}

.availability{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding:16px 24px;
  border-radius:22px;
  background:linear-gradient(135deg,rgba(19,183,216,.88),rgba(56,184,90,.86));
  border:1px solid rgba(255,255,255,.35);
  box-shadow:0 18px 45px rgba(0,0,0,.22);
  font-size:clamp(18px,3vw,27px);
  font-weight:950;
  margin-bottom:28px;
}

.availability-btn{
  cursor:pointer;
  color:white;
  font-family:inherit;
  transition:.24s ease;
}

.availability-btn:hover{
  transform:translateY(-3px) scale(1.015);
  box-shadow:0 22px 56px rgba(0,0,0,.28);
}

.availability-btn:focus{
  outline:3px solid rgba(255,255,255,.55);
  outline-offset:4px;
}

.hero-text{
  max-width:700px;
  margin:0 auto 28px;
  font-size:18px;
  line-height:1.7;
  color:#eefeff;
}

.contact-row{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:13px;
  margin-top:8px;
}

.contact{
  width:58px;
  height:58px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.28);
  backdrop-filter:blur(14px);
  text-decoration:none;
  box-shadow:0 14px 35px rgba(0,0,0,.2);
  transition:.22s ease;
}

.contact:hover{
  transform:translateY(-4px) scale(1.04);
  background:rgba(255,255,255,.23);
}

.contact svg{
  width:28px;
  height:28px;
  fill:white;
}

.contact.call{background:rgba(8,118,170,.72)}
.contact.whatsapp{background:rgba(37,211,102,.72)}
.contact.viber{background:rgba(115,96,242,.72)}
.contact.facebook{background:rgba(24,119,242,.72)}

.scroll-hint{
  position:absolute;
  left:50%;
  bottom:24px;
  transform:translateX(-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  color:white;
  font-size:14px;
  font-weight:700;
  opacity:.92;
  text-decoration:none;
}

.mouse{
  width:28px;
  height:46px;
  border:2px solid rgba(255,255,255,.78);
  border-radius:999px;
  position:relative;
}

.mouse::after{
  content:"";
  position:absolute;
  top:8px;
  left:50%;
  width:5px;
  height:5px;
  border-radius:50%;
  background:white;
  transform:translateX(-50%);
  animation:wheel 1.4s infinite;
}

@keyframes wheel{
  0%{opacity:0;transform:translate(-50%,0)}
  35%{opacity:1}
  100%{opacity:0;transform:translate(-50%,18px)}
}

.section{
  padding:76px 20px;
  max-width:1180px;
  margin:auto;
}

.section-head{
  max-width:760px;
  margin:0 auto 34px;
  text-align:center;
}

.section-kicker{
  color:var(--green-dark);
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:1.2px;
  margin-bottom:10px;
}

h2{
  font-size:clamp(32px,5vw,58px);
  letter-spacing:-2px;
  color:#082d35;
  margin-bottom:14px;
}

.section-head p{
  font-size:18px;
  color:#52676c;
  line-height:1.65;
}

.features{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
  margin-bottom:58px;
}

.feature{
  background:white;
  border:1px solid #e1f0ee;
  border-radius:26px;
  padding:22px;
  min-height:142px;
  box-shadow:0 16px 42px rgba(5,58,65,.07);
}

.feature .icon{
  width:44px;
  height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:16px;
  background:linear-gradient(135deg,#e7faf0,#e5f8ff);
  margin-bottom:16px;
  font-size:23px;
}

.feature h3{
  font-size:19px;
  margin-bottom:7px;
  color:#092d32;
}

.feature p{
  line-height:1.55;
  color:#587075;
  font-size:15px;
}

.gallery{
  display:grid;
  grid-template-columns:2fr 1fr 1fr;
  grid-template-rows:190px 190px;
  gap:14px;
  align-items:stretch;
}

.gallery button{
  border:0;
  background:none;
  cursor:pointer;
  border-radius:24px;
  overflow:hidden;
  position:relative;
  box-shadow:0 16px 42px rgba(5,58,65,.12);
  min-height:0;
  isolation:isolate;
}

.gallery button:nth-child(1){
  grid-column:1 / 2;
  grid-row:1 / 3;
}

.gallery img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  transition:.35s ease;
}

.gallery button:hover img{
  transform:scale(1.045);
  filter:brightness(.84);
}

.gallery button::after{
  content:"Odpri";
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%) scale(.94);
  opacity:0;
  color:white;
  font-weight:950;
  padding:10px 15px;
  border-radius:999px;
  background:rgba(0,0,0,.42);
  transition:.22s ease;
  z-index:2;
  white-space:nowrap;
}

.gallery button:hover::after{
  opacity:1;
  transform:translate(-50%,-50%) scale(1);
}

.gallery button.show-all::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.12),rgba(0,0,0,.56));
  z-index:1;
}

.gallery button.show-all::after{
  content:"Prikaži vse slike";
  opacity:1;
  transform:translate(-50%,-50%) scale(1);
  background:rgba(255,255,255,.92);
  color:#102428;
  box-shadow:0 14px 36px rgba(0,0,0,.2);
}

.gallery-empty{
  border:1px dashed rgba(29,123,57,.28);
  background:linear-gradient(135deg,#ffffff,#f0fbf5);
  color:#587075;
  padding:24px;
  border-radius:24px;
  font-weight:850;
  line-height:1.55;
  text-align:center;
}

.gallery-loading{
  color:#587075;
  font-weight:900;
  padding:18px 0;
}

.cta{
  margin-top:70px;
  background:linear-gradient(135deg,#083843,#0b768b);
  color:white;
  border-radius:34px;
  padding:34px;
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:24px;
  align-items:center;
  box-shadow:0 24px 68px rgba(5,58,65,.22);
  overflow:hidden;
  position:relative;
}

.cta::after{
  content:"";
  position:absolute;
  width:260px;
  height:260px;
  border-radius:50%;
  background:rgba(56,184,90,.22);
  right:-80px;
  top:-80px;
}

.cta h2{
  color:white;
  font-size:clamp(28px,4vw,46px);
}

.cta p{
  color:#d9f6f8;
  font-size:17px;
  line-height:1.6;
}

.cta-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  justify-content:flex-end;
  position:relative;
  z-index:1;
}

.cta-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  min-height:54px;
  padding:14px 18px;
  border-radius:999px;
  text-decoration:none;
  color:white;
  font-weight:900;
  border:1px solid rgba(255,255,255,.24);
  background:rgba(255,255,255,.13);
  backdrop-filter:blur(14px);
  transition:.22s ease;
}

.cta-btn:hover{
  transform:translateY(-3px);
  background:rgba(255,255,255,.2);
}

.creator-card{
  margin-top:70px;
  text-align:center;
  color:#5d7378;
}

.creator-line{
  width:min(420px,80%);
  height:1px;
  margin:0 auto 22px;
  background:linear-gradient(90deg,transparent,#cfe2e2,transparent);
}

.creator-content{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:8px;
  font-size:15px;
  color:#71858a;
}

.creator-content strong{
  color:#21383d;
  font-weight:900;
}

.creator-content a{
  color:#0876aa;
  font-weight:800;
  text-decoration:none;
}

.creator-content a:hover{
  text-decoration:underline;
}

.copyright{
  margin-top:8px;
  font-size:13px;
  color:#8aa0a5;
  font-weight:600;
}

footer{
  padding:26px 20px 40px;
  text-align:center;
  color:#678;
  font-weight:700;
}


.pricing-section{
  max-width:1180px;
}

.pricing-panel{
  position:relative;
  overflow:hidden;
  border-radius:38px;
  padding:36px;
  color:white;
  background:
    radial-gradient(circle at 12% 14%,rgba(56,184,90,.30),transparent 34%),
    radial-gradient(circle at 88% 20%,rgba(19,183,216,.28),transparent 32%),
    linear-gradient(135deg,#083843,#0b768b);
  box-shadow:0 26px 76px rgba(5,58,65,.24);
}

.pricing-panel::after{
  content:"";
  position:absolute;
  width:310px;
  height:310px;
  border-radius:50%;
  right:-120px;
  bottom:-120px;
  background:rgba(255,255,255,.10);
  pointer-events:none;
}

.pricing-panel-inner{
  position:relative;
  z-index:1;
}

.pricing-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px;
  margin-bottom:24px;
}

.pricing-head h2{
  color:white;
  margin-bottom:8px;
}

.pricing-head p{
  max-width:650px;
  color:#d9f6f8;
  font-size:17px;
  line-height:1.6;
}

.pricing-badge{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 16px;
  border-radius:999px;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.24);
  color:white;
  font-weight:950;
  box-shadow:0 14px 34px rgba(0,0,0,.12);
  backdrop-filter:blur(12px);
  white-space:nowrap;
}

.pricing-grid{
  display:grid;
  grid-template-columns:1.08fr .92fr;
  gap:16px;
}

.pricing-card{
  border-radius:26px;
  padding:20px;
  background:rgba(255,255,255,.13);
  border:1px solid rgba(255,255,255,.22);
  box-shadow:0 18px 44px rgba(0,0,0,.12);
  backdrop-filter:blur(14px);
}

.pricing-card.main{
  grid-row:span 2;
}

.pricing-card h3{
  display:flex;
  align-items:center;
  gap:10px;
  color:white;
  font-size:21px;
  margin-bottom:16px;
  letter-spacing:-.3px;
}

.pricing-card p,
.pricing-card li{
  color:#e7fbfc;
  line-height:1.55;
  font-weight:650;
}

.price-rows{
  display:grid;
  gap:10px;
}

.price-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:13px 14px;
  border-radius:18px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.16);
}

.price-row strong{
  color:white;
  font-size:16px;
}

.price-row span{
  color:#d9f6f8;
  font-size:14px;
  font-weight:700;
}

.price-value{
  flex:0 0 auto;
  min-width:76px;
  text-align:center;
  padding:9px 12px;
  border-radius:999px;
  background:white;
  color:#0f6b34;
  font-weight:950;
  box-shadow:0 10px 22px rgba(0,0,0,.10);
}

.pricing-note{
  margin-top:14px;
  padding:14px 16px;
  border-radius:20px;
  background:linear-gradient(135deg,rgba(255,255,255,.18),rgba(255,255,255,.10));
  border:1px solid rgba(255,255,255,.18);
  color:#ecfeff;
  font-weight:800;
  line-height:1.55;
}

.pricing-list{
  list-style:none;
  display:grid;
  gap:10px;
}

.pricing-list li{
  position:relative;
  padding-left:22px;
}

.pricing-list li::before{
  content:"";
  position:absolute;
  left:0;
  top:.62em;
  width:8px;
  height:8px;
  border-radius:50%;
  background:#8ff0aa;
  box-shadow:0 0 0 5px rgba(143,240,170,.12);
}

.pricing-mini-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:16px;
  margin-top:16px;
}

.pricing-soft-card{
  border-radius:22px;
  padding:18px;
  background:rgba(255,255,255,.11);
  border:1px solid rgba(255,255,255,.16);
}

.pricing-soft-card h3{
  font-size:19px;
}

.pricing-cta{
  margin-top:18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:18px 20px;
  border-radius:24px;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.20);
  box-shadow:0 18px 44px rgba(0,0,0,.12);
  backdrop-filter:blur(14px);
}

.pricing-cta p{
  color:#e7fbfc;
  line-height:1.5;
  font-weight:750;
}

.pricing-cta strong{
  color:white;
  font-weight:950;
}

.pricing-cta-btn{
  flex:0 0 auto;
  min-height:52px;
  padding:14px 20px;
  border:0;
  border-radius:999px;
  background:white;
  color:#0f6b34;
  font-family:inherit;
  font-size:15px;
  font-weight:950;
  cursor:pointer;
  box-shadow:0 14px 32px rgba(0,0,0,.16);
  transition:.22s ease;
}

.pricing-cta-btn:hover{
  transform:translateY(-3px);
  box-shadow:0 18px 42px rgba(0,0,0,.22);
}

.pricing-fineprint{
  margin-top:14px;
  color:#cfeff2;
  font-size:13px;
  font-weight:700;
  line-height:1.45;
  opacity:.92;
}

.calendar-price-info{
  margin:18px auto 0;
  max-width:720px;
  display:grid;
  gap:7px;
  padding:14px 18px;
  border-radius:20px;
  background:linear-gradient(135deg,#eefaf3,#eefbff);
  border:1px solid #d7eee4;
  color:#315f50;
  font-size:14px;
  line-height:1.45;
  box-shadow:0 12px 34px rgba(5,58,65,.06);
}

.calendar-price-info strong{
  color:#0f5d32;
  font-weight:950;
}

.calendar-price-info span{
  font-weight:750;
}

/* --------------------------------------------------------------------------
   Vrstica z izbranim terminom.
   Nadomešča prejšnji gumb "Rezerviraj" — obrazec se odpre sam,
   takoj ko sta izbrana prihod in odhod.
   -------------------------------------------------------------------------- */

.calendar-actions{
  margin:20px 0 0;
}

.select-bar{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  padding:15px 18px;
  border-radius:22px;
  border:1px solid #d7eee4;
  background:linear-gradient(135deg,#f7fffb,#f1fbff);
  box-shadow:0 12px 32px rgba(5,58,65,.07);
}

.select-bar.waiting{
  border-style:dashed;
  background:#fbfefd;
  box-shadow:none;
}

.select-bar-main{
  flex:1;
  min-width:220px;
}

.select-bar-title{
  font-weight:950;
  font-size:17px;
  color:#0c3a2c;
  line-height:1.3;
}

.select-bar-sub{
  font-size:14px;
  color:#52676c;
  margin-top:4px;
  line-height:1.5;
}

.select-bar-total{
  font-size:22px;
  font-weight:950;
  color:var(--green-dark);
  white-space:nowrap;
}


.select-bar-reset:hover{border-color:var(--green);background:#f4fbf7}

.select-step{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:14px;
  font-weight:850;
  color:#0f6b34;
  background:#e9f8ef;
  border:1px solid #a9dfbe;
  border-radius:999px;
  padding:6px 13px;
}

.select-step .num{
  width:20px;height:20px;flex:0 0 20px;
  border-radius:50%;
  background:var(--green-dark);
  color:white;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:12px;
}

.booking-request-card{
  display:none;
  margin-top:20px;
  padding:22px;
  border-radius:26px;
  background:linear-gradient(135deg,#f7fffb,#f2fbff);
  border:1px solid #d7eee4;
  box-shadow:0 16px 42px rgba(5,58,65,.07);
}

.booking-request-card.active{
  display:block;
  animation:requestReveal .28s ease both;
}

@keyframes requestReveal{
  from{opacity:0;transform:translateY(12px)}
  to{opacity:1;transform:translateY(0)}
}

.booking-request-head{
  display:flex;
  justify-content:space-between;
  gap:18px;
  align-items:flex-start;
  margin-bottom:16px;
  flex-wrap:wrap;
}

.booking-request-kicker{
  color:var(--green-dark);
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.9px;
  font-size:12px;
  margin-bottom:6px;
}

.booking-request-card h3{
  font-size:clamp(22px,3vw,31px);
  color:#082d35;
  letter-spacing:-.8px;
  margin-bottom:7px;
}

.booking-request-card p{
  color:#52676c;
  line-height:1.55;
  font-weight:650;
  max-width:650px;
}

.booking-request-pill{
  display:inline-flex;
  align-items:center;
  gap:7px;
  white-space:nowrap;
  padding:10px 13px;
  border-radius:999px;
  background:#fff8dc;
  border:1px solid #efd27a;
  color:#755200;
  font-weight:900;
  font-size:13px;
}

.booking-request-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:13px;
}

.booking-request-field.full{
  grid-column:1 / -1;
}

.booking-request-field label{
  display:block;
  margin-bottom:7px;
  color:#23483b;
  font-weight:900;
  font-size:14px;
}

.booking-request-field input,
.booking-request-field textarea{
  width:100%;
  border:1px solid #cfe4d7;
  background:white;
  border-radius:15px;
  padding:0 13px;
  font:inherit;
  color:#102428;
  outline:none;
  box-shadow:0 8px 18px rgba(5,58,65,.035);
}

.booking-request-field input{
  height:48px;
}

.booking-request-field textarea{
  min-height:92px;
  padding-top:12px;
  resize:vertical;
}

.booking-request-field input:focus,
.booking-request-field textarea:focus{
  border-color:var(--green);
  box-shadow:0 0 0 4px rgba(56,184,90,.13);
}

.booking-request-actions{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  margin-top:16px;
}

.booking-request-submit{
  border:0;
  border-radius:999px;
  padding:14px 20px;
  background:linear-gradient(135deg,var(--blue),var(--green));
  color:white;
  font-family:inherit;
  font-weight:950;
  cursor:pointer;
  box-shadow:0 16px 36px rgba(5,58,65,.18);
  transition:.22s ease;
}

.booking-request-submit:hover{
  transform:translateY(-2px);
  box-shadow:0 20px 46px rgba(5,58,65,.23);
}

.booking-request-cancel{
  border:1px solid #d7eee4;
  border-radius:999px;
  padding:13px 18px;
  background:white;
  color:#315f50;
  font-family:inherit;
  font-weight:900;
  cursor:pointer;
  transition:.2s ease;
}

.booking-request-cancel:hover{
  background:#eefaf3;
  transform:translateY(-1px);
}

.booking-request-message{
  min-height:22px;
  color:#1d7b39;
  font-weight:900;
  line-height:1.45;
}

.booking-request-message.error{
  color:#b00000;
}

.booking-request-small{
  margin-top:12px;
  color:#6b8388;
  font-size:13px;
  font-weight:700;
  line-height:1.45;
}


.booking-request-field input[readonly]{
  cursor:pointer;
  background:
    linear-gradient(180deg,rgba(255,255,255,.96),rgba(248,255,251,.96));
  caret-color:transparent;
}

.booking-request-field input[readonly]:focus{
  cursor:pointer;
}

.date-picker-backdrop{
  position:fixed;
  inset:0;
  z-index:99980;
  display:none;
  background:transparent;
}

.date-picker-backdrop.active{
  display:block;
}

.modern-date-popover{
  position:fixed;
  z-index:99990;
  width:318px;
  max-width:calc(100vw - 28px);
  display:none;
  padding:14px;
  border-radius:24px;
  background:rgba(255,255,255,.97);
  border:1px solid rgba(205,235,222,.95);
  box-shadow:0 24px 70px rgba(5,58,65,.22);
  backdrop-filter:blur(18px);
  color:#102428;
  touch-action:manipulation;
}

.modern-date-popover.active{
  display:block;
  animation:datePickerIn .2s ease both;
}

@keyframes datePickerIn{
  from{opacity:0;transform:translateY(8px) scale(.98)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

.date-picker-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:12px;
}

.date-picker-title{
  font-weight:950;
  color:#082d35;
  letter-spacing:-.2px;
}

.date-picker-nav{
  display:flex;
  gap:7px;
}

.date-picker-nav button{
  width:34px;
  height:34px;
  border:0;
  border-radius:12px;
  background:linear-gradient(135deg,var(--blue),var(--green));
  color:white;
  font-size:20px;
  font-weight:950;
  cursor:pointer;
  box-shadow:0 10px 22px rgba(5,58,65,.12);
}

.date-picker-weekdays,
.date-picker-days{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:6px;
}

.date-picker-weekdays span{
  text-align:center;
  color:#6b8388;
  font-size:11px;
  font-weight:900;
  padding:4px 0;
}

.date-picker-day{
  aspect-ratio:1;
  border:1px solid #e1f0ee;
  border-radius:13px;
  background:#f8fffb;
  color:#103f32;
  font-weight:900;
  cursor:pointer;
  transition:.16s ease;
  font-family:inherit;
  font-size:13px;
  padding:0;
}

.date-picker-day:hover{
  transform:translateY(-1px);
  border-color:rgba(56,184,90,.72);
  box-shadow:0 10px 20px rgba(5,58,65,.09);
}

.date-picker-day.selected{
  color:white;
  border-color:transparent;
  background:linear-gradient(135deg,var(--blue),var(--green));
  box-shadow:0 12px 24px rgba(5,58,65,.18);
}

.date-picker-day.blocked,
.date-picker-day.past{
  cursor:not-allowed;
  opacity:.38;
  color:#8da2a6;
  background:#f2f6f5;
  box-shadow:none;
  transform:none;
}

.date-picker-day.empty{
  visibility:hidden;
  pointer-events:none;
}

.date-picker-hint{
  margin-top:11px;
  padding:10px 11px;
  border-radius:15px;
  background:linear-gradient(135deg,#eefaf3,#eefbff);
  color:#52676c;
  font-size:12px;
  line-height:1.4;
  font-weight:750;
}

.calendar-modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.72);
  z-index:45;
  display:none;
  align-items:center;
  justify-content:center;
  padding:18px;
  backdrop-filter:blur(10px);
}

.calendar-modal.active{
  display:flex;
}

.calendar-box{
  width:min(920px,100%);
  max-height:90svh;
  overflow:auto;
  overscroll-behavior:contain;
  border-radius:34px;
  background:linear-gradient(180deg,#ffffff,#f5fbfb);
  border:1px solid #dff0ed;
  box-shadow:0 30px 90px rgba(0,0,0,.38);
  padding:28px;
  position:relative;
  animation:rise .28s ease both;
  scrollbar-gutter:stable;
}

.calendar-close{
  position:absolute;
  top:18px;
  right:18px;
  width:46px;
  height:46px;
  border:0;
  border-radius:50%;
  background:#eef8f7;
  color:#0b3a43;
  font-size:30px;
  cursor:pointer;
  font-weight:700;
}

.calendar-close:hover{
  background:#dff2ee;
}

.calendar-head{
  max-width:720px;
  margin:0 auto 22px;
  text-align:center;
  padding:0 42px;
}

.calendar-kicker{
  color:var(--green-dark);
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:1.1px;
  margin-bottom:8px;
}

.calendar-head h2{
  font-size:clamp(30px,4vw,48px);
  margin-bottom:10px;
}

.calendar-head p{
  color:#52676c;
  line-height:1.55;
  font-size:16px;
}

.calendar-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  margin-bottom:18px;
}

.calendar-nav{
  display:flex;
  align-items:center;
  gap:10px;
}

.calendar-nav button{
  width:44px;
  height:44px;
  border:0;
  border-radius:15px;
  background:linear-gradient(135deg,var(--blue),var(--green));
  color:white;
  font-size:26px;
  font-weight:900;
  cursor:pointer;
  box-shadow:0 10px 24px rgba(5,58,65,.14);
}

.calendar-month-title{
  min-width:210px;
  text-align:center;
  font-size:23px;
  font-weight:950;
  color:#082d35;
}

.calendar-legend{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  color:#52676c;
  font-weight:850;
  font-size:14px;
}

.calendar-legend span{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:8px 11px;
  background:white;
  border:1px solid #e1f0ee;
  border-radius:999px;
}

.calendar-dot{
  width:12px;
  height:12px;
  border-radius:50%;
  display:inline-block;
}

.calendar-dot.free{background:var(--green)}
.calendar-dot.pending{background:#f4c542}
.calendar-dot.reserved{background:#e53935}

.availability-calendar{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:10px;
}

.availability-calendar .weekday{
  text-align:center;
  font-weight:900;
  color:#6b8388;
  padding:10px 0 8px;
  font-size:14px;
}

/* --------------------------------------------------------------------------
   Dan v koledarju.

   Vsak dan je razdeljen po diagonali na dve polovici:
     .cal-am — zgornji levi trikotnik  = DOPOLDNE (gost, ki ta dan odhaja)
     .cal-pm — spodnji desni trikotnik = POPOLDNE (gost, ki ta dan prihaja)

   Med trikotnikoma ostane tanka diagonalna reža, skozi katero se vidi
   ozadje celice — ta reža je vizualna ločnica med polovicama dneva.
   -------------------------------------------------------------------------- */

.calendar-day{
  min-height:76px;
  border-radius:18px;
  background:#ffffff;
  border:1px solid #cbeed7;
  padding:11px;
  color:#0d3a2c;
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  box-shadow:0 10px 24px rgba(5,58,65,.05);
  overflow:hidden;
  isolation:isolate;
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.calendar-day .cal-am,
.calendar-day .cal-pm{
  position:absolute;
  inset:0;
  z-index:-1;
}

.calendar-day .cal-am{
  -webkit-clip-path:polygon(0 0, calc(100% - 3px) 0, 0 calc(100% - 3px));
  clip-path:polygon(0 0, calc(100% - 3px) 0, 0 calc(100% - 3px));
}

.calendar-day .cal-pm{
  -webkit-clip-path:polygon(100% 3px, 100% 100%, 3px 100%);
  clip-path:polygon(100% 3px, 100% 100%, 3px 100%);
}

/* Kadar sta obe polovici enaki, reže ne rišemo — dan je videti enotno. */
.calendar-day:not(.split) .cal-am{
  -webkit-clip-path:polygon(0 0, 100% 0, 0 100%);
  clip-path:polygon(0 0, 100% 0, 0 100%);
}
.calendar-day:not(.split) .cal-pm{
  -webkit-clip-path:polygon(100% 0, 100% 100%, 0 100%);
  clip-path:polygon(100% 0, 100% 100%, 0 100%);
}

.st-free{background:linear-gradient(160deg,#f5fdf8,#e7f7ee)}
.st-confirmed{background:linear-gradient(160deg,#fff6f6,#ffe3e3)}
.st-pending{background:linear-gradient(160deg,#fffdf3,#fff1cd)}
.st-blocked{background:linear-gradient(160deg,#f4f6f7,#e4e9ec)}

.calendar-day.all-confirmed{border-color:#f0aaaa;color:#9d1c1c}
.calendar-day.all-pending{border-color:#efd27a;color:#755200}
.calendar-day.all-blocked{border-color:#c2ccd2;color:#4a5761}
.calendar-day.split{border-color:#b9d8cd}

.calendar-day.selectable{cursor:pointer}

.calendar-day.selectable:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 30px rgba(5,58,65,.09);
  border-color:rgba(56,184,90,.58);
}

/*
  Med izbiranjem datuma odhoda ločimo dve vrsti klikljivih dni:
  can-end je veljaven odhod, can-restart pa dan, ki lahko začne le novo izbiro.
*/
.calendar-day.can-end{
  border-color:rgba(29,123,57,.55);
}

.calendar-day.can-end:hover{
  border-color:var(--green-dark);
  box-shadow:0 0 0 2px rgba(29,123,57,.35),0 14px 30px rgba(5,58,65,.1);
}

.calendar-day.can-restart{
  opacity:.62;
  border-style:dashed;
}

.calendar-day.can-restart:hover{
  opacity:1;
  border-style:dashed;
  border-color:rgba(19,183,216,.7);
  box-shadow:0 10px 24px rgba(5,58,65,.08);
}

.calendar-day.disabled{cursor:not-allowed}

.calendar-day:focus-visible{
  outline:3px solid rgba(29,123,57,.5);
  outline-offset:2px;
}

/* Izbira termina */
.calendar-day.is-start,
.calendar-day.is-end{
  border-color:var(--green-dark);
  box-shadow:0 0 0 2px var(--green-dark), 0 14px 30px rgba(5,58,65,.12);
}

.calendar-day.in-range{
  border-color:rgba(29,123,57,.45);
  box-shadow:0 0 0 1px rgba(29,123,57,.3);
}

.calendar-day.in-range::after,
.calendar-day.is-start::after,
.calendar-day.is-end::after{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(56,184,90,.14);
  pointer-events:none;
  z-index:-1;
}

.calendar-day.empty{
  background:transparent;
  border:0;
  box-shadow:none;
  min-height:0;
  cursor:default;
}

.calendar-day.empty:hover{
  transform:none;
  box-shadow:none;
}

.calendar-day .day-number{
  font-size:17px;
  line-height:1;
  font-weight:950;
  letter-spacing:-.2px;
}

.calendar-day .day-status{
  align-self:flex-start;
  padding:4px 7px;
  border-radius:999px;
  background:rgba(255,255,255,.9);
  border:1px solid rgba(0,0,0,.08);
  color:#b42318;
  font-size:10.5px;
  font-weight:900;
  line-height:1;
  position:relative;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.calendar-day.all-pending .day-status{color:#8a6200}
.calendar-day.all-blocked .day-status{color:#4a5761}
.calendar-day.split .day-status{color:#0f6b34}

.calendar-day .day-price{
  align-self:flex-end;
  padding:5px 9px;
  border-radius:999px;
  background:white;
  border:1px solid rgba(56,184,90,.20);
  color:#0f6b34;
  font-size:14px;
  font-weight:950;
  line-height:1;
  box-shadow:0 8px 18px rgba(5,58,65,.05);
  position:relative;
}

.calendar-error{
  min-height:22px;
  margin-top:14px;
  text-align:center;
  color:#b00000;
  font-weight:900;
}

.lightbox{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.88);
  z-index:50;
  display:none;
  align-items:center;
  justify-content:center;
  padding:18px;
}

.lightbox.active{
  display:flex;
}

.lightbox img{
  max-width:min(1120px,100%);
  max-height:82svh;
  object-fit:contain;
  border-radius:18px;
  box-shadow:0 20px 60px rgba(0,0,0,.5);
}

.lightbox-btn{
  position:absolute;
  border:0;
  background:rgba(255,255,255,.12);
  color:white;
  width:48px;
  height:48px;
  border-radius:50%;
  font-size:28px;
  cursor:pointer;
  backdrop-filter:blur(10px);
  transition:.2s ease;
}

.lightbox-btn:hover{
  background:rgba(255,255,255,.22);
}

.close{
  top:18px;
  right:18px;
  font-size:32px;
}

.prev{
  left:18px;
  top:50%;
  transform:translateY(-50%);
}

.next{
  right:18px;
  top:50%;
  transform:translateY(-50%);
}


/* Scroll animacije */
.reveal{
  opacity:0;
  transform:translateY(34px);
  transition:opacity .8s ease, transform .8s ease;
  will-change:opacity, transform;
}

.reveal.visible{
  opacity:1;
  transform:translateY(0);
}

.feature.reveal:nth-child(1){transition-delay:.05s}
.feature.reveal:nth-child(2){transition-delay:.12s}
.feature.reveal:nth-child(3){transition-delay:.19s}
.feature.reveal:nth-child(4){transition-delay:.26s}
.feature.reveal:nth-child(5){transition-delay:.33s}
.feature.reveal:nth-child(6){transition-delay:.40s}

.gallery button.reveal{
  transform:translateY(28px) scale(.96);
}

.gallery button.reveal.visible{
  transform:translateY(0) scale(1);
}

.calendar-modal.active,
.lightbox.active{
  animation:modalFade .25s ease;
}

@keyframes modalFade{
  from{opacity:0}
  to{opacity:1}
}

.calendar-modal.active .calendar-box,
.lightbox.active img{
  animation:modalPop .32s ease both;
}

@keyframes modalPop{
  from{
    opacity:0;
    transform:scale(.94) translateY(14px);
  }
  to{
    opacity:1;
    transform:scale(1) translateY(0);
  }
}

.hero-bg{
  transition:transform .12s linear;
  transform:translateY(0) scale(1.025);
}

@media (prefers-reduced-motion: reduce){
  .reveal,
  .reveal.visible,
  .calendar-modal.active,
  .lightbox.active,
  .calendar-modal.active .calendar-box,
  .lightbox.active img,
  .hero-bg{
    animation:none !important;
    transition:none !important;
    transform:none !important;
    opacity:1 !important;
  }
}

@media(max-width:860px){
  .hero{
    min-height:100svh;
    padding:18px 14px 84px;
  }

  .hero-bg{
    background:
      linear-gradient(180deg,rgba(4,30,35,.75),rgba(6,95,110,.35)),
      url("slike/3.jpeg") center/cover no-repeat;
  }

  .status{
    font-size:13px;
    padding:10px 14px;
    margin-bottom:24px;
  }

  h1{
    font-size:clamp(52px,18vw,74px);
    letter-spacing:-2.4px;
  }

  .subtitle{
    font-size:20px;
  }

  .hero-text{
    font-size:16px;
  }

  .availability{
    width:100%;
    max-width:370px;
    padding:15px 16px;
    font-size:20px;
  }

  .contact{
    width:56px;
    height:56px;
  }

  .section{
    padding:54px 14px;
  }

  .features{
    grid-template-columns:1fr;
    gap:12px;
    margin-bottom:40px;
  }

  .feature{
    min-height:auto;
    border-radius:22px;
    padding:18px;
  }

  .gallery{
    display:flex;
    gap:12px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    padding:2px 2px 12px;
    margin-left:-2px;
    margin-right:-2px;
    -webkit-overflow-scrolling:touch;
  }

  .gallery button{
    flex:0 0 84%;
    min-height:270px;
    border-radius:22px;
    scroll-snap-align:center;
  }

  .gallery button:nth-child(1){
    grid-column:auto;
    grid-row:auto;
  }

  .gallery img{
    aspect-ratio:auto;
  }

  .gallery button::after{
    display:none;
  }

  .gallery button.show-all::after{
    display:block;
    font-size:14px;
    padding:9px 12px;
  }

  .cta{
    grid-template-columns:1fr;
    padding:24px;
    border-radius:26px;
  }

  .cta-actions{
    justify-content:stretch;
  }

  .cta-btn{
    width:100%;
  }

  .pricing-panel{
    padding:24px;
    border-radius:28px;
  }

  .pricing-head{
    display:grid;
    gap:14px;
    text-align:left;
  }

  .pricing-badge{
    width:max-content;
    max-width:100%;
    white-space:normal;
  }

  .pricing-grid,
  .pricing-mini-grid{
    grid-template-columns:1fr;
  }

  .price-row{
    align-items:flex-start;
  }

  .calendar-price-info{
    font-size:13px;
    padding:12px 14px;
    border-radius:16px;
  }

  .booking-request-card{
    padding:18px 14px;
    border-radius:22px;
  }

  .booking-request-grid{
    grid-template-columns:1fr;
  }

  .booking-request-pill{
    width:100%;
    justify-content:center;
    white-space:normal;
    text-align:center;
  }

  .booking-request-submit,
  .booking-request-cancel,

  .calendar-modal{
    padding:0;
    align-items:stretch;
    justify-content:stretch;
  }

  .calendar-box{
    width:100%;
    height:100svh;
    max-height:100svh;
    padding:18px 12px 78px;
    border-radius:0;
    border:0;
    scrollbar-width:none;
  }

  .calendar-box::-webkit-scrollbar{
    width:0;
    height:0;
  }

  .calendar-close{
    position:fixed;
    top:12px;
    right:12px;
    z-index:81;
    width:42px;
    height:42px;
    font-size:28px;
    background:rgba(255,255,255,.92);
    box-shadow:0 12px 34px rgba(5,58,65,.16);
  }

  .calendar-head{
    padding:0 50px 0 0;
    margin:0 0 16px;
    text-align:left;
  }

  .calendar-head h2{
    font-size:32px;
    line-height:1;
  }

  .calendar-head p{
    font-size:14px;
    line-height:1.48;
  }

  .calendar-price-info{
    margin:14px 0 0;
  }

  .calendar-top{
    justify-content:stretch;
    gap:10px;
    margin-bottom:12px;
  }

  .calendar-nav{
    width:100%;
    justify-content:space-between;
    gap:8px;
    padding:7px;
    border-radius:20px;
    background:#eefaf7;
    border:1px solid #d7eee4;
  }

  .calendar-nav button{
    width:42px;
    height:42px;
    border-radius:15px;
    flex:0 0 auto;
  }

  .calendar-month-title{
    min-width:0;
    flex:1;
    font-size:18px;
  }

  .calendar-legend{
    width:100%;
    flex-wrap:nowrap;
    overflow-x:auto;
    justify-content:flex-start;
    gap:8px;
    padding:2px 2px 6px;
    scrollbar-width:none;
  }

  .calendar-legend::-webkit-scrollbar{
    display:none;
  }

  .calendar-legend span{
    white-space:nowrap;
    padding:7px 10px;
    font-size:12px;
  }

  .availability-calendar{
    gap:5px;
  }

  .availability-calendar .weekday{
    font-size:11px;
    padding:8px 0 5px;
  }

  .calendar-day{
    min-height:54px;
    border-radius:13px;
    padding:6px;
    box-shadow:none;
  }

  .calendar-day .day-number{
    font-size:14px;
  }

  .calendar-day .day-status{
    font-size:8px;
    padding:4px 5px;
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .calendar-day .day-price{
    font-size:10px;
    padding:4px 6px;
  }

  .booking-request-card{
    margin-top:16px;
  }

  .booking-request-head{
    display:block;
  }

  .booking-request-card h3{
    line-height:1.04;
  }

  .booking-request-field input{
    height:52px;
    font-size:16px;
  }

  .booking-request-field textarea{
    font-size:16px;
  }

  .lightbox img{
    max-height:76svh;
  }

  .prev,.next{
    top:auto;
    bottom:18px;
    transform:none;
  }

  .prev{left:calc(50% - 62px)}
  .next{right:calc(50% - 62px)}
}



@media(max-width:760px){
  .date-picker-backdrop.active{
    background:rgba(0,0,0,.28);
    backdrop-filter:blur(4px);
  }

  .modern-date-popover{
    padding:16px;
    border-radius:28px 28px 22px 22px;
    box-shadow:0 -18px 70px rgba(5,58,65,.26);
  }

  .date-picker-day{
    border-radius:14px;
    font-size:14px;
  }
}

@media(max-width:390px){
  .hero{
    padding-inline:12px;
  }

  h1{
    font-size:48px;
  }

  .status{
    font-size:12px;
  }

  .scroll-hint{
    font-size:13px;
  }

  .calendar-box{
    padding:14px 9px 74px;
  }

  .calendar-head{
    padding-right:46px;
  }

  .calendar-head h2{
    font-size:29px;
  }

  .calendar-head p{
    font-size:13px;
  }

  .calendar-price-info{
    font-size:12px;
    padding:10px 11px;
  }

  .availability-calendar{
    gap:4px;
  }

  .calendar-day{
    min-height:48px;
    border-radius:11px;
    padding:5px;
  }

  .calendar-day .day-number{
    font-size:13px;
  }

  .calendar-day .day-status{
    font-size:0;
    width:9px;
    height:9px;
    padding:0;
    border-radius:50%;
    align-self:flex-end;
  }

  .calendar-day .day-price{
    font-size:9px;
    padding:3px 5px;
  }

  .modern-date-popover{
    left:8px !important;
    right:8px !important;
    bottom:8px !important;
  }
}
  

/* Dodatna mobilna optimizacija */
@media(max-width:760px){
  body.modal-open,
  body.modal-open html{
    overflow:hidden;
  }

  .pricing-panel{
    padding:22px 16px;
    border-radius:30px;
  }

  .pricing-card,
  .pricing-soft-card,
  .pricing-cta{
    border-radius:22px;
  }

  .pricing-cta{
    display:grid;
    grid-template-columns:1fr;
    gap:14px;
    text-align:center;
    padding:20px 16px;
  }

  .pricing-cta p{
    font-size:16px;
    line-height:1.45;
  }

  .pricing-cta-btn{
    width:100%;
    min-height:56px;
    font-size:16px;
  }

  .calendar-modal.active{
    align-items:stretch;
    justify-content:stretch;
  }

  .calendar-box{
    width:100%;
    height:100dvh;
    max-height:100dvh;
    border-radius:0;
    padding:16px 12px 96px;
    border:0;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }

  .calendar-box::-webkit-scrollbar{
    display:none;
  }

  .calendar-head{
    text-align:left;
    padding:0 50px 0 0;
    margin:0 0 14px;
  }

  .calendar-head h2{
    font-size:clamp(29px,9vw,36px);
    line-height:1;
  }

  .calendar-head p{
    font-size:14px;
    line-height:1.45;
  }

  .calendar-price-info{
    margin-top:12px;
    padding:12px 13px;
    font-size:13px;
    border-radius:18px;
  }

  .calendar-top{
    gap:10px;
    margin-bottom:10px;
  }

  .calendar-nav{
    width:100%;
    display:grid;
    grid-template-columns:46px 1fr 46px;
    gap:8px;
    align-items:center;
    padding:7px;
    border-radius:22px;
    background:#eefaf7;
    border:1px solid #d7eee4;
  }

  .calendar-nav button{
    width:46px;
    height:46px;
    border-radius:16px;
  }

  .calendar-month-title{
    min-width:0;
    width:100%;
    font-size:20px;
  }

  .calendar-legend{
    width:100%;
    gap:7px;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    font-size:11px;
  }

  .calendar-legend span{
    justify-content:center;
    white-space:nowrap;
    padding:7px 5px;
    gap:5px;
  }

  .calendar-dot{
    width:11px;
    height:11px;
    flex:0 0 11px;
  }

  .availability-calendar{
    gap:5px;
  }

  .availability-calendar .weekday{
    font-size:11px;
    padding:8px 0 5px;
  }

  .calendar-day{
    min-height:56px;
    padding:6px 4px;
    border-radius:14px;
    align-items:stretch;
  }

  .calendar-day .day-number{
    font-size:14px;
    padding-left:1px;
  }

  .calendar-day .day-price{
    align-self:center;
    white-space:nowrap;
    font-size:10px;
    line-height:1;
    padding:4px 5px;
    min-width:34px;
    text-align:center;
  }

  .calendar-day .day-status{
    align-self:center;
    white-space:nowrap;
    font-size:8.5px;
    line-height:1;
    padding:4px 5px;
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
  }



  .booking-request-card{
    margin-top:14px;
    padding:18px 14px;
    border-radius:24px;
  }

  .booking-request-head{
    display:block;
    margin-bottom:14px;
  }

  .booking-request-card h3{
    font-size:27px;
    line-height:1.04;
  }

  .booking-request-card p{
    font-size:14px;
    line-height:1.45;
  }

  .booking-request-grid{
    grid-template-columns:1fr;
    gap:11px;
  }

  .booking-request-field input{
    height:54px;
    font-size:16px;
  }

  .booking-request-field textarea{
    min-height:88px;
    font-size:16px;
  }

  .booking-request-actions{
    gap:10px;
  }

  .booking-request-submit,
  .booking-request-cancel{
    width:100%;
    min-height:52px;
  }

  .modern-date-popover{
    left:10px !important;
    right:10px !important;
    bottom:10px !important;
    top:auto !important;
    width:auto !important;
    max-width:none;
    padding:16px;
    border-radius:30px 30px 22px 22px;
  }

  .date-picker-days,
  .date-picker-weekdays{
    gap:5px;
  }

  .date-picker-day{
    min-height:42px;
    border-radius:14px;
    font-size:14px;
  }
}

@media(max-width:390px){
  .calendar-box{
    padding:14px 9px 92px;
  }

  .calendar-legend{
    gap:5px;
    font-size:10px;
  }

  .calendar-legend span{
    padding:6px 3px;
  }

  .availability-calendar{
    gap:4px;
  }

  .calendar-day{
    min-height:52px;
    border-radius:12px;
    padding:5px 3px;
  }

  .calendar-day .day-price{
    font-size:9px;
    min-width:30px;
    padding:3px 3px;
  }

  .calendar-day .day-status{
    font-size:7.5px;
    padding:3px 4px;
  }

}


/* Finalna optimizacija gumba Rezerviraj na telefonu */
@media(max-width:760px){
  .calendar-box{
    padding:16px 12px calc(22px + env(safe-area-inset-bottom)) !important;
    height:100dvh !important;
    max-height:100dvh !important;
  }




  .booking-request-card{
    margin-top:16px !important;
  }

  .booking-request-card.active{
    scroll-margin-top:12px;
  }
}

@media(max-width:390px){
  .calendar-box{
    padding:14px 9px calc(20px + env(safe-area-inset-bottom)) !important;
  }


}


/* ---------------------------------------------------------
   FINALNI POPRAVKI STABILNOSTI IN MOBILNE OPTIMIZACIJE
   Namen: manj tresenja pri scrollu, ostrejši font v ceniku,
   bolj stabilen koledar in bolj čista mobilna postavitev.
--------------------------------------------------------- */

html, body{
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

body.modal-open{
  overflow:hidden;
  touch-action:none;
}

body.modal-open .calendar-box{
  touch-action:pan-y;
}

.pricing-panel,
.pricing-card,
.pricing-soft-card,
.pricing-cta,
.pricing-badge,
.price-row,
.pricing-note{
  text-shadow:none !important;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  transform:none;
}

.pricing-card,
.pricing-soft-card,
.pricing-cta,
.pricing-badge{
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

.pricing-card,
.pricing-soft-card{
  background:rgba(255,255,255,.16);
}

.pricing-card p,
.pricing-card li,
.pricing-soft-card li,
.pricing-cta p{
  color:#f6ffff;
  font-weight:800;
}

.pricing-card h3,
.pricing-soft-card h3{
  font-weight:950;
}

.pricing-list li::before{
  box-shadow:0 0 0 4px rgba(143,240,170,.18);
}

.modern-date-popover{
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  background:#ffffff !important;
}

@media(max-width:860px){
  html{
    scroll-behavior:auto;
  }

  .reveal,
  .reveal.visible,
  .feature.reveal,
  .gallery button.reveal,
  .gallery button.reveal.visible,
  .pricing-panel.reveal,
  footer.reveal,
  .creator-card.reveal{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
    animation:none !important;
    will-change:auto !important;
  }

  .feature.reveal:nth-child(1),
  .feature.reveal:nth-child(2),
  .feature.reveal:nth-child(3),
  .feature.reveal:nth-child(4),
  .feature.reveal:nth-child(5),
  .feature.reveal:nth-child(6){
    transition-delay:0s !important;
  }

  .status,
  .hero-inner,
  .calendar-modal.active,
  .calendar-modal.active .calendar-box,
  .booking-request-card.active,
  .lightbox.active,
  .lightbox.active img{
    animation:none !important;
    transform:none !important;
  }

  .hero-bg{
    filter:blur(2px) scale(1.02);
    transform:none !important;
    transition:none !important;
  }

  .availability-btn:hover,
  .contact:hover,
  .feature:hover,
  .gallery button:hover img,
  .pricing-cta-btn:hover,
  .calendar-day:not(.empty):hover,
  .select-bar-reset:hover,
  .booking-request-submit:hover,
  .booking-request-cancel:hover,
  .date-picker-day:hover{
    transform:none !important;
  }
}

@media(max-width:760px){
  .section{
    padding:48px 14px;
  }

  .section-head{
    margin-bottom:24px;
  }

  .section-head h2{
    letter-spacing:-1.1px;
  }

  .pricing-panel{
    padding:20px 14px !important;
    border-radius:28px !important;
    box-shadow:0 18px 50px rgba(5,58,65,.18);
    background:
      radial-gradient(circle at 18% 0%,rgba(56,184,90,.18),transparent 34%),
      linear-gradient(135deg,#073d44,#0a7f91) !important;
  }

  .pricing-panel::after{
    width:210px;
    height:210px;
    right:-110px;
    bottom:-90px;
    opacity:.45;
  }

  .pricing-head{
    gap:12px !important;
    margin-bottom:16px;
  }

  .pricing-head h2{
    font-size:clamp(34px,11vw,46px);
    line-height:.95;
    letter-spacing:-1.6px;
  }

  .pricing-head p{
    font-size:15px;
    line-height:1.45;
    color:#eefeff;
  }

  .pricing-badge{
    padding:10px 13px;
    font-size:14px;
    background:rgba(255,255,255,.18) !important;
  }

  .pricing-grid,
  .pricing-mini-grid{
    gap:12px !important;
  }

  .pricing-card,
  .pricing-soft-card,
  .pricing-cta{
    padding:16px 14px !important;
    border-radius:22px !important;
    box-shadow:none !important;
    background:rgba(255,255,255,.14) !important;
  }

  .pricing-card h3,
  .pricing-soft-card h3{
    font-size:18px;
    line-height:1.15;
    margin-bottom:12px;
  }

  .pricing-card li,
  .pricing-soft-card li{
    font-size:14px;
    line-height:1.45;
  }

  .pricing-list{
    gap:11px;
  }

  .pricing-list li{
    padding-left:19px;
  }

  .pricing-list li::before{
    width:7px;
    height:7px;
    top:.58em;
  }

  .price-row{
    display:grid;
    grid-template-columns:1fr auto;
    align-items:center !important;
    padding:12px !important;
    gap:10px;
    background:rgba(255,255,255,.14);
  }

  .price-row strong{
    font-size:15px;
    line-height:1.15;
  }

  .price-row span{
    font-size:12px;
    line-height:1.2;
  }

  .price-value{
    min-width:68px;
    padding:8px 10px;
    font-size:15px;
  }

  .pricing-note{
    padding:13px;
    border-radius:18px;
    font-size:14px;
    line-height:1.45;
    background:rgba(255,255,255,.14);
  }

  .pricing-cta{
    text-align:left !important;
  }

  .pricing-cta p{
    font-size:14px !important;
    line-height:1.45 !important;
  }

  .pricing-cta-btn{
    min-height:54px !important;
    border-radius:18px !important;
    white-space:normal;
  }

  .pricing-fineprint{
    font-size:12px;
    line-height:1.45;
  }

  .calendar-modal{
    background:#ffffff !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }

  .calendar-box{
    height:100dvh !important;
    max-height:100dvh !important;
    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
    padding:15px 12px calc(24px + env(safe-area-inset-bottom)) !important;
    background:#ffffff !important;
  }

  .calendar-head{
    padding-right:54px !important;
  }

  .calendar-close{
    top:10px !important;
    right:10px !important;
    width:44px !important;
    height:44px !important;
    line-height:44px;
  }

  .calendar-price-info{
    font-size:13px !important;
    line-height:1.45 !important;
  }

  .calendar-legend{
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:7px !important;
    overflow:visible !important;
    padding:0 !important;
  }

  .calendar-legend span{
    min-width:0;
    justify-content:center;
    white-space:nowrap;
    font-size:11px !important;
    padding:7px 4px !important;
  }

  .calendar-dot{
    flex:0 0 10px !important;
    width:10px !important;
    height:10px !important;
  }

  .availability-calendar{
    gap:5px !important;
  }

  .calendar-day{
    min-height:56px !important;
    padding:6px 4px !important;
    border-radius:13px !important;
    box-shadow:none !important;
  }

  .calendar-day .day-number{
    font-size:14px !important;
  }

  .calendar-day .day-price{
    font-size:10px !important;
    min-width:35px;
    padding:4px 5px !important;
    white-space:nowrap !important;
  }

  .calendar-day .day-status{
    font-size:8px !important;
    padding:4px 4px !important;
    white-space:nowrap !important;
  }



  .booking-request-card{
    box-shadow:none !important;
  }

  .modern-date-popover.active{
    animation:none !important;
  }
}

@media(max-width:390px){
  .pricing-panel{
    padding:18px 12px !important;
  }

  .pricing-card,
  .pricing-soft-card,
  .pricing-cta{
    padding:15px 12px !important;
  }

  .calendar-box{
    padding:13px 9px calc(22px + env(safe-area-inset-bottom)) !important;
  }

  .calendar-legend{
    gap:5px !important;
  }

  .calendar-legend span{
    font-size:10px !important;
    padding:6px 3px !important;
  }

  .availability-calendar{
    gap:4px !important;
  }

  .calendar-day{
    min-height:53px !important;
    padding:5px 3px !important;
  }

  .calendar-day .day-price{
    font-size:9px !important;
    min-width:31px;
    padding:3px 3px !important;
  }

  .calendar-day .day-status{
    font-size:7px !important;
    padding:3px 3px !important;
  }
}


/* ==========================================================================
   Dodatki nove različice: polovični dnevi, izbira termina, obvestilo.
   Namenoma na koncu datoteke, da ne posegajo v obstoječi videz strani.
   ========================================================================== */

/* --------------------------------------------------- legenda s pol dneva */

.calendar-dot.blocked{background:#8a99a3}

.calendar-dot.split{
  background:linear-gradient(to bottom left,#e7f7ee 0 46%,#ffffff 46% 54%,#ffe3e3 54% 100%);
  border:1px solid #cbd9d3;
}

.calendar-legend-note{
  width:100%;
  font-size:13px;
  color:#52676c;
  line-height:1.5;
  margin-top:6px;
}

/* ------------------------------------------------- oznaki prihod / odhod */

.day-half{
  position:absolute;
  font-size:9.5px;
  font-weight:900;
  letter-spacing:.3px;
  text-transform:uppercase;
  opacity:.62;
  pointer-events:none;
}

.day-half.am{top:6px;right:8px}
.day-half.pm{bottom:6px;left:8px}

/* ------------------------------------------------------ obrazec in koraki */

.booking-request-dates{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  padding:12px 15px;
  border-radius:18px;
  background:white;
  border:1px solid #d7eee4;
  margin-bottom:16px;
  font-size:15px;
  font-weight:800;
  color:#0c3a2c;
}

.booking-request-dates .arrow{color:var(--green-dark)}

.booking-request-dates .change{
  margin-left:auto;
  border:0;
  background:none;
  color:var(--green-dark);
  font-family:inherit;
  font-size:14px;
  font-weight:800;
  cursor:pointer;
  text-decoration:underline;
  padding:4px;
}

.hp-field{
  position:absolute !important;
  left:-9999px !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden !important;
}

.booking-closed{
  padding:16px 18px;
  border-radius:18px;
  background:#fff8e8;
  border:1px solid #efd27a;
  color:#6d4c00;
  font-weight:800;
  text-align:center;
  margin-top:18px;
}

/* --------------------------------------------------------------- galerija */

.gallery img{background:#eef5f2}

/* ------------------------------------------------------------- odzivnost */

@media(max-width:760px){
  .select-bar{
    padding:13px 14px;
    gap:10px;
    border-radius:18px;
  }

  .select-bar-title{font-size:15.5px}
  .select-bar-sub{font-size:13px}
  .select-bar-total{font-size:19px}

  .select-bar-reset{
    padding:9px 15px;
    font-size:13.5px;
  }

  .day-half{display:none}

  .calendar-day .day-status{font-size:9.5px;padding:3px 6px}
}

@media(max-width:520px){
  .calendar-day{
    min-height:58px;
    padding:6px;
    border-radius:13px;
  }

  .calendar-day .cal-am{
    -webkit-clip-path:polygon(0 0, calc(100% - 2px) 0, 0 calc(100% - 2px));
    clip-path:polygon(0 0, calc(100% - 2px) 0, 0 calc(100% - 2px));
  }

  .calendar-day .cal-pm{
    -webkit-clip-path:polygon(100% 2px, 100% 100%, 2px 100%);
    clip-path:polygon(100% 2px, 100% 100%, 2px 100%);
  }

  .calendar-day .day-number{font-size:13.5px}
  .calendar-day .day-status{display:none}

  .calendar-day .day-price{
    font-size:10.5px;
    padding:2px 5px;
    box-shadow:none;
  }

  .select-bar-main{min-width:100%}
  .select-bar-total{font-size:18px}
  .select-bar-reset{width:100%}
}

/* Zelo ozki zasloni: cena bi se prekrivala s številko dneva. */
@media(max-width:360px){
  .calendar-day .day-price{display:none}
}

@media(prefers-reduced-motion:reduce){
  .status.anim-pulse,
  .status.anim-glow,
  .status.anim-blink .status-dot{
    animation:none !important;
  }
}