/* Kometa Travel — inquiry modal on the static offer pages (oferti/*.html).
   Loaded next to site-style.css and built on its variables and classes
   (.btn, .cin, .clbl2, .hp-wrap, .mconsent-row, .field-hint, .shake),
   so nothing here restyles what the rest of the site already defines.
   22.09.2026 */

/* ------------------------------------------------------------- backdrop */
.kz-back{
  position:fixed;inset:0;z-index:2000;display:none;
  background:rgba(15,27,48,.62);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:max(16px,env(safe-area-inset-top)) 16px calc(40px + env(safe-area-inset-bottom));
}
.kz-back.on{display:block}
body.kz-open{overflow:hidden}

/* ----------------------------------------------------------------- card */
.kz-card{
  position:relative;width:100%;max-width:560px;margin:auto;
  background:var(--c-bg,#fff);border:1px solid var(--line,#e9e2d3);
  border-radius:var(--r-lg,18px);
  box-shadow:0 40px 80px -40px rgba(20,33,61,.5);
  animation:kzIn .32s cubic-bezier(.22,1,.36,1);
}
@keyframes kzIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.kz-card{animation:none}}

.kz-head{
  background:var(--navy,#16263f);color:#fff;
  padding:1.4rem 3.2rem 1.25rem 1.6rem;
  border-radius:var(--r-lg,18px) var(--r-lg,18px) 0 0;
}
.kz-eyebrow{
  display:block;font-size:.67rem;font-weight:800;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold-soft,#ecddb8);margin-bottom:.45rem;
}
.kz-title{
  font-family:var(--sans,inherit);font-size:1.12rem;font-weight:700;
  line-height:1.3;letter-spacing:-.01em;color:#fff;
}
.kz-price{margin-top:.5rem;font-size:.86rem;color:rgba(255,255,255,.78)}
.kz-price b{color:var(--gold-soft,#ecddb8);font-weight:700}

.kz-x{
  position:absolute;top:.85rem;right:.85rem;width:38px;height:38px;
  border:0;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;
  cursor:pointer;display:grid;place-items:center;line-height:0;
  transition:background .25s;
}
.kz-x:hover{background:rgba(255,255,255,.26)}
.kz-x svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}

/* ----------------------------------------------------------------- form */
.kz-body{padding:1.35rem 1.6rem 1.6rem}
.kz-grid{display:grid;grid-template-columns:1fr 1fr;gap:.85rem}
.kz-grid .kz-wide{grid-column:span 2}
/* 16px is what keeps Safari on iPhone from zooming in on focus */
.kz-back .cin{font-size:16px}
.kz-back .cta-area{min-height:88px;resize:vertical;font-family:var(--font,inherit)}
.kz-back .mconsent{padding:.95rem 0 0}
.kz-back .field-hint{margin-top:.5rem}

.kz-send{width:100%;margin-top:1rem;justify-content:center;text-align:center}
.kz-send[disabled]{opacity:.65;pointer-events:none}

.kz-or{
  margin:1.15rem 0 .65rem;text-align:center;font-size:.74rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted,#6a6e82);
}
.kz-seeoffer{
  display:block;margin-top:1.1rem;text-align:center;font-size:.84rem;
  color:var(--muted,#6a6e82);text-decoration:underline;text-underline-offset:3px;
}
.kz-seeoffer:hover{color:var(--navy,#16263f)}

/* --------------------------------------------------------- confirmation */
.kz-ok{text-align:center;padding:1.6rem .4rem .4rem}
.kz-ok-ic{
  width:76px;height:76px;margin:0 auto 1.1rem;border-radius:50%;
  background:linear-gradient(135deg,#16a34a,#15803d);display:grid;place-items:center;
}
.kz-ok-ic svg{width:34px;height:34px;fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.kz-ok-t{font-size:1.18rem;font-weight:700;color:var(--ink,#1b1a26);margin-bottom:.55rem}
.kz-ok-d{font-size:.95rem;line-height:1.65;color:var(--muted,#6a6e82)}
.kz-ok .kz-cta-row{margin-top:1.35rem}

/* ------------------------------------------- phone + Viber (page & modal) */
.kz-cta-row{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin-top:.7rem}
.kz-cta{
  display:flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.78rem .7rem;border:1.5px solid var(--line,#e9e2d3);
  border-radius:var(--r-sm,10px);background:#fff;color:var(--navy,#16263f);
  font-size:.88rem;font-weight:700;text-decoration:none;line-height:1.2;
  transition:border-color .25s,background .25s,color .25s;
}
.kz-cta:hover{border-color:var(--gold,#c2a05e);background:var(--c-bg-sand,#f8f5ee)}
.kz-cta svg{width:18px;height:18px;flex:none;fill:currentColor}
.kz-cta-viber{color:#6c4ac4}
.kz-cta-viber:hover{border-color:#6c4ac4;background:#f6f3fd}
/* in the offer sidebar the column is narrow, so the two buttons stack, which
   also lines them up with the full-width inquiry button above them */
.dx-side .kz-cta-row{grid-template-columns:1fr;gap:.5rem}

/* ----------------------------------------------------------- narrow phones */
@media (max-width:520px){
  .kz-grid{grid-template-columns:1fr}
  .kz-grid .kz-wide{grid-column:span 1}
  .kz-cta-row{grid-template-columns:1fr}
  .kz-head{padding:1.2rem 3rem 1.1rem 1.15rem}
  .kz-body{padding:1.15rem 1.15rem 1.35rem}
  .kz-title{font-size:1.05rem}
}

/* The sticky price bar sits above the fold on phones — keep it out of the way
   while the modal is open, so it cannot overlap the send button. */
body.kz-open .kx-bar{display:none}

/* ------------------------------------- 27.09.2026: travellers, city, dates */
.kz-pax{display:flex;flex-direction:column;gap:.5rem}
.kz-pax .pk-row{padding:.6rem .85rem;border-radius:12px}
.kz-pax .pk-nm{font-size:.95rem}
.kz-pax .pk-sub{font-size:.78rem}
.kz-pax .pk-btn{width:38px;height:38px;font-size:1.3rem}
.kz-pax .pk-val{min-width:1.7rem;text-align:center;font-weight:700;font-size:1.05rem;color:var(--c-navy-900,#0f1b30)}
.kz-chips{display:flex;flex-wrap:wrap;gap:.45rem;margin:.15rem 0 .6rem}
.kz-chips[hidden]{display:none}
.kz-chips .pill{min-height:40px;padding:.45rem .95rem;font-size:.88rem;cursor:pointer;font-family:inherit}