/* ===========================
   COMPONENTS — Premium Taxi v6
   v6: Fluid font-size za tariff-price i slider-header h2 (clamp).
=========================== */

/* ===================== BUTTONS ===================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
  padding: 0.58rem 1.4rem;
  font-size: 0.75rem; font-weight: 500; letter-spacing: 0.10em; text-transform: uppercase;
  border-radius: var(--radius); border: none; cursor: pointer;
  text-decoration: none; white-space: nowrap; line-height: 1;
  transition: background .2s, color .2s, transform .2s, box-shadow .2s, border-color .2s, opacity .2s;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation; user-select: none;
}
.btn:disabled { opacity: .52; cursor: not-allowed; transform: none !important; }
.btn:active:not(:disabled) { transform: scale(0.97) !important; }
.btn-gold    { background: var(--gold); color: #0f0e0a; }
.btn-gold:hover:not(:disabled) { background: var(--gold-light); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(201,168,76,.35); }
.btn-outline { background: transparent; border: 1.5px solid var(--gold); color: var(--gold); }
.btn-outline:hover:not(:disabled) { background: var(--gold); color: #0f0e0a; }
.btn-ghost   { background: transparent; border: 1px solid var(--border-hard); color: var(--text2); }
.btn-ghost:hover:not(:disabled) { border-color: var(--gold); color: var(--gold); }
.btn-full { width: 100%; }
.btn-lg   { padding: 0.72rem 1.85rem; font-size: 0.78rem; }

/* ===================== CARDS ===================== */
.card {
  background: var(--card-bg); border: 1px solid var(--border);
  border-radius: var(--radius); backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: border-color .25s, transform .25s, box-shadow .25s;
}
.card:hover         { border-color: var(--gold); transform: translateY(-3px); box-shadow: var(--shadow); }
.card-featured      { border-color: var(--gold) !important; box-shadow: 0 0 0 1px var(--gold), var(--shadow); }
.card-static:hover  { transform: none; box-shadow: none; border-color: var(--border); }

/* ===================== BADGES / TAGS ===================== */
.badge        { display:inline-block; font-size:.62rem; letter-spacing:.15em; text-transform:uppercase; background:var(--gold); color:#0f0e0a; padding:.18rem .65rem; border-radius:999px; font-weight:500; }
.badge-muted  { background:var(--bg3); color:var(--text2); }
.badge-subtle { background:var(--gold-alpha); color:var(--gold); border:1px solid var(--border); }

.tag-pill {
  display: inline-block; font-size: .68rem; font-weight: 500; letter-spacing: .20em; text-transform: uppercase;
  color: var(--gold); border: 1px solid var(--border); padding: .28rem 1rem; border-radius: 999px;
  background: var(--gold-alpha);
}

.t-badge       { display:inline-flex; align-items:center; gap:.35rem; font-size:.73rem; padding:.2rem .65rem; border-radius:999px; font-weight:500; }
.t-day         { background:rgba(201,168,76,.14); color:var(--gold); }
.t-night       { background:rgba(100,80,200,.14); color:var(--night-color); }
.t-special     { background:rgba(200,100,60,.14); color:#e07a45; }

.pay-icon { display:inline-flex; align-items:center; gap:.3rem; font-size:.73rem; padding:.2rem .6rem; border:1px solid var(--border); border-radius:var(--radius); color:var(--text2); }

/* ===================== SPINNER ===================== */
.spinner { width:28px; height:28px; border:2px solid var(--border); border-top-color:var(--gold); border-radius:50%; animation:spin .7s linear infinite; margin:0 auto; }

/* ===================== ALERTS ===================== */
.alert { padding:.9rem 1.1rem; border-radius:var(--radius); font-size:.87rem; line-height:1.6; display:flex; gap:.7rem; align-items:flex-start; animation:slideIn .28s ease; }
.alert-success { background:var(--success-bg); border:1px solid rgba(45,122,79,.28); color:var(--success); }
.alert-error   { background:var(--error-bg);   border:1px solid rgba(181,58,42,.28); color:var(--error); }
.alert-icon    { font-size:1rem; flex-shrink:0; margin-top:.1rem; }

/* ===================== FORMS ===================== */
.form-group   { display:flex; flex-direction:column; gap:.38rem; }
.form-label   { font-size:.71rem; letter-spacing:.11em; text-transform:uppercase; color:var(--text3); font-weight:500; }
.form-input, .form-select, .form-textarea {
  background: var(--input-bg); border: 1px solid var(--border-hard);
  border-radius: var(--radius); padding: .65rem .85rem; color: var(--text);
  font-size: .9rem; line-height: 1.5; width: 100%; min-width: 0;
  -webkit-appearance: none; appearance: none;
  transition: border-color .18s, box-shadow .18s;
}
.form-input::placeholder, .form-textarea::placeholder { color:var(--text3); }
.form-input:focus, .form-select:focus, .form-textarea:focus {
  outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201,168,76,.13);
}
.form-textarea { resize:vertical; min-height:110px; }
.form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='%23c9a84c' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .85rem center; padding-right:2.4rem; cursor:pointer;
}
.form-hint    { font-size:.75rem; color:var(--text3); line-height:1.5; }
.form-err     { font-size:.74rem; color:var(--error); display:none; line-height:1.4; }
.has-err .form-err { display:block; }
.has-err .form-input, .has-err .form-select, .has-err .form-textarea { border-color:var(--error); }
.form-row-2  { display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; }
.form-stack  { display:flex; flex-direction:column; gap:1.1rem; }
.form-consent { display:flex; align-items:flex-start; gap:.55rem; font-size:.79rem; color:var(--text3); line-height:1.55; cursor:pointer; }
.form-consent input[type="checkbox"] { width:15px; height:15px; flex-shrink:0; margin-top:.15rem; accent-color:var(--gold); cursor:pointer; }
.form-consent a { color:var(--gold); }
.form-actions { display:flex; align-items:center; gap:1rem; flex-wrap:wrap; margin-top:.25rem; }

.info-box { background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius); padding:1rem 1.35rem; font-size:.81rem; color:var(--text2); line-height:1.7; }
.info-box strong { color:var(--text); display:block; margin-bottom:.3rem; font-size:.83rem; }

/* ===================== AUTOCOMPLETE ===================== */
.ac-wrap { position:relative; flex:1; min-width:0; }
.ac-dropdown {
  position:absolute; top:calc(100% + 1px); left:0; right:0; z-index:600;
  background:var(--input-bg); border:1px solid var(--gold); border-top:none;
  border-radius:0 0 var(--radius) var(--radius);
  max-height:220px; overflow-y:auto; box-shadow:var(--shadow);
  overscroll-behavior:contain;
  /* Smooth momentum scroll on iOS */
  -webkit-overflow-scrolling: touch;
  /* Prevent dropdown from being clipped by parent overflow */
  will-change: scroll-position;
}
.ac-item { padding:.6rem .88rem; min-height:44px; display:flex; flex-direction:column; justify-content:center; font-size:.84rem; color:var(--text); cursor:pointer; border-bottom:1px solid var(--border); transition:background .12s; -webkit-tap-highlight-color:transparent; user-select:none; }
.ac-item:last-child  { border-bottom:none; }
.ac-item:hover, .ac-item.ac-focused { background:var(--bg2); color:var(--gold); }
.ac-main { font-weight:500; font-size:.86rem; }
.ac-sub  { color:var(--text3); font-size:.75rem; margin-top:.06rem; }
.ac-type { font-size:.67rem; color:var(--gold); background:var(--gold-alpha); padding:.04rem .32rem; border-radius:3px; margin-left:.35rem; vertical-align:middle; }

/* ===================== FEATURE GRID ===================== */
.features-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:1.15rem; margin-top:2.25rem; }
.feature-card   { padding:1.65rem 1.5rem; }
.feature-card,
.special-card,
.review-card { height: 100%; }
.feature-icon   { font-size:1.65rem; margin-bottom:.85rem; }
.feature-card h3 { font-size:1.08rem; margin-bottom:.35rem; }
.feature-card p  { color:var(--text2); font-size:.85rem; line-height:1.65; }

/* ===================== SPECIAL GRID ===================== */
.special-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:1.15rem; }
.special-card { padding:1.55rem; }
.special-emoji { font-size:1.85rem; margin-bottom:.65rem; }
.special-card h3 { font-size:1.12rem; margin-bottom:.3rem; }
.special-card p  { color:var(--text2); font-size:.85rem; line-height:1.65; }
.price-note { display:inline-block; background:var(--gold-alpha); border:1px solid var(--border); border-radius:var(--radius); padding:.2rem .6rem; font-size:.74rem; color:var(--gold); margin-top:.65rem; }

/* ===================== TARIFF CARDS ===================== */
.tariff-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1.35rem; padding:2.75rem var(--px); max-width:var(--max-w); margin:0 auto; }
.tariff-card  { padding:1.85rem; }
.tariff-name  { font-size:1.4rem; margin:.3rem 0 .2rem; }
.tariff-hours { font-size:.75rem; color:var(--gold); letter-spacing:.04em; margin-bottom:1.1rem; }
.tariff-price { font-size: clamp(2rem, 5vw, 2.5rem); font-weight:300; line-height:1.05; }
.tariff-price span { font-size:.92rem; color:var(--text3); }
.tariff-list  { list-style:none; font-size:.83rem; color:var(--text2); margin-top:1rem; }
.tariff-list li { padding:.2rem 0; display:flex; gap:.45rem; line-height:1.5; }
.tariff-list li::before { content:'—'; color:var(--gold); flex-shrink:0; }

/* ===================== KM SLIDER ===================== */
.slider-section {
  border-top: 1px solid var(--border);
  padding: 2.5rem var(--px) 3rem;
  max-width: var(--max-w);
  margin: 0 auto;
}

.slider-header { margin-bottom: 1.5rem; }
.slider-header h2 { font-size: clamp(1.35rem, 3vw, 1.75rem); margin-bottom: .3rem; }
.slider-header p  { color: var(--text3); font-size: .85rem; line-height: 1.6; }

/* Tariff toggle */
.tariff-toggle {
  display: inline-flex; border: 1px solid var(--border-hard);
  border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 1.75rem;
}
.tariff-toggle button {
  padding: .48rem 1.1rem; font-size: .73rem; font-weight: 500;
  letter-spacing: .09em; text-transform: uppercase; border: none;
  background: transparent; color: var(--text3); cursor: pointer;
  transition: background .2s, color .2s;
  -webkit-tap-highlight-color: transparent;
  font-family: 'DM Sans', sans-serif;
}
.tariff-toggle button.active.is-day   { background: var(--gold); color: #0f0e0a; }
.tariff-toggle button.active.is-night { background: var(--night-color); color: #fff; }

/* Slider track — uses JS-set inline style for fill */
.km-slider-wrap { position: relative; padding-top: 2.2rem; margin-bottom: 1.75rem; }

.km-slider {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 6px; border-radius: 999px;
  background: var(--bg3); outline: none; cursor: pointer;
  display: block;
}

/* Filled portion via JS inline background */
.km-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--gold); border: 3px solid var(--bg);
  box-shadow: 0 0 0 2px var(--gold);
  cursor: grab; transition: box-shadow .2s, transform .15s;
}
.km-slider::-moz-range-thumb {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--gold); border: 3px solid var(--bg);
  box-shadow: 0 0 0 2px var(--gold);
  cursor: grab;
}
.km-slider:active::-webkit-slider-thumb { transform: scale(1.12); cursor: grabbing; }

/* Night thumb */
.km-slider.is-night::-webkit-slider-thumb { background: var(--night-color); box-shadow: 0 0 0 2px var(--night-color); }
.km-slider.is-night::-moz-range-thumb     { background: var(--night-color); box-shadow: 0 0 0 2px var(--night-color); }

/* Slider value bubble */
.km-bubble {
  position: absolute; top: 0;
  transform: translateX(-50%);
  background: var(--gold); color: #0f0e0a;
  font-size: .73rem; font-weight: 700; padding: .2rem .6rem;
  border-radius: 999px; white-space: nowrap; pointer-events: none;
  transition: left .04s linear;
  line-height: 1.4;
}
.km-bubble::after {
  content: ''; position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%); border: 4px solid transparent;
  border-top-color: var(--gold);
}
.km-bubble.is-night { background: var(--night-color); }
.km-bubble.is-night::after { border-top-color: var(--night-color); }

/* km slider labels */
.km-labels { display: flex; justify-content: space-between; font-size: .72rem; color: var(--text3); margin-top: .5rem; }

/* Result cards */
.slider-result { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

.src-card {
  background: var(--card-bg); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 1.25rem 1.35rem;
  text-align: center; transition: border-color .25s, box-shadow .25s;
}
.src-card.is-active     { border-color: var(--gold);        box-shadow: 0 0 0 1px var(--gold-alpha); }
.src-card.is-active.is-night { border-color: var(--night-color); box-shadow: 0 0 0 1px rgba(100,80,200,.22); }

.src-label   { font-size: .69rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text3); margin-bottom: .45rem; }
.src-price   { font-family: 'Cormorant Garamond', serif; font-size: 2.1rem; font-weight: 300; line-height: 1; }
.src-price.is-day   { color: var(--gold); }
.src-price.is-night { color: var(--night-color); }
.src-range   { font-size: .74rem; color: var(--text3); margin-top: .2rem; min-height: 1.2em; }
.src-detail  { font-size: .76rem; color: var(--text2); margin-top: .55rem; line-height: 1.55; min-height: 1.2em; }

/* Over-100 notice */
.km-over-notice {
  display: none; margin-top: 1rem;
  background: var(--gold-alpha); border: 1px solid var(--border);
  border-radius: var(--radius); padding: .9rem 1.1rem;
  font-size: .85rem; color: var(--text2); line-height: 1.65;
  align-items: flex-start; gap: .75rem;
}
.km-over-notice.show { display: flex; }
.km-over-notice strong { color: var(--text); }

/* Reference table */
.km-table { width:100%; border-collapse:collapse; margin-top:1.5rem; font-size:.83rem; }
.km-table th { text-align:left; padding:.5rem .75rem; font-size:.68rem; letter-spacing:.10em; text-transform:uppercase; color:var(--text3); font-weight:500; border-bottom:1px solid var(--border); font-family:'DM Sans',sans-serif; }
.km-table td { padding:.5rem .75rem; border-bottom:1px solid var(--border); color:var(--text2); }
.km-table tr:last-child td { border-bottom:none; }
.km-table tr.row-hi td { background:var(--gold-alpha); color:var(--text); font-weight:600; }
.km-table .price-d  { color:var(--gold); font-weight:600; }
.km-table .price-n  { color:var(--night-color); font-weight:600; }

/* ===================== FAQ ===================== */
.faq-wrap { max-width:740px; margin:0 auto; }
.faq-item { border-bottom:1px solid var(--border); }
.faq-q {
  width:100%; background:none; border:none; text-align:left; padding:1.1rem 0;
  font-size:.93rem; color:var(--text); cursor:pointer;
  display:flex; justify-content:space-between; align-items:center;
  gap:1rem; transition:color .2s; line-height:1.5;
  -webkit-tap-highlight-color:transparent;
}
.faq-q:hover { color:var(--gold); }
.faq-chevron { width:20px; height:20px; flex-shrink:0; border:1px solid var(--border); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.62rem; transition:transform .3s,border-color .2s; }
.faq-item.open .faq-chevron { transform:rotate(180deg); border-color:var(--gold); }
.faq-a { max-height:0; overflow:hidden; transition:max-height .38s ease,padding .3s; color:var(--text2); font-size:.87rem; line-height:1.75; }
.faq-item.open .faq-a { max-height:400px; padding-bottom:1.1rem; }

/* ===================== PROSE ===================== */
.prose h2 { font-size:1.3rem; margin:1.8rem 0 .4rem; color:var(--text); }
.prose p, .prose li { color:var(--text2); font-size:.88rem; line-height:1.78; margin-bottom:.4rem; }
.prose ul { padding-left:1.2rem; }
.prose a  { color:var(--gold); }
.prose strong { color:var(--text); }

/* ===================== CTA STRIP ===================== */
.cta-strip { background:var(--bg2); border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:4rem var(--px); text-align:center; }
.cta-strip h2 { font-size:clamp(1.75rem,3.5vw,2.75rem); }
.cta-strip p  { color:var(--text2); margin:.7rem auto 1.85rem; max-width:450px; font-size:.92rem; }
.cta-actions  { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }

/* ===================== BOTTOM ACTION BAR (mobile) =====================
   Fiksna traka na dnu ekrana s dvije tipke: Pozovi + WhatsApp.
   Uvijek vidljiva, ne ometa sadržaj (body padding-bottom kompenzira).
   Skrivena na desktopu (≥821px).
*/
.bottom-bar {
  display: none; /* prikazuje responsive.css na mobilnom */
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 800;
  background: var(--bg2);
  border-top: 1px solid var(--border);
  padding: .6rem 1rem calc(.6rem + env(safe-area-inset-bottom));
  gap: .65rem;
  -webkit-tap-highlight-color: transparent;
}
.bottom-bar-btn {
  flex: 1;
  display: flex; align-items: center; justify-content: center; gap: .45rem;
  padding: .72rem .5rem;
  border-radius: var(--radius);
  font-size: .8rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  text-decoration: none; cursor: pointer; border: none;
  font-family: 'DM Sans', sans-serif;
  transition: opacity .15s, transform .15s;
  min-height: 44px;
}
.bottom-bar-btn:active { opacity: .82; transform: scale(.97); }

.bottom-bar-call {
  background: var(--card);
  border: 1.5px solid var(--gold);
  color: var(--gold);
}
.bottom-bar-wa {
  background: #25D366;
  color: #fff;
}
.bottom-bar-wa svg { flex-shrink: 0; }

/* Legacy FAB classes — hidden, kept for any JS references */
.fab-reserve, .fab-call, .fab-wa { display: none !important; }


/* ===================== MESSAGING BUTTONS ===================== */

/* Channel buttons row */
.channel-btns {
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}

/* Base channel button */
.btn-channel {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .62rem 1.25rem;
  border-radius: var(--radius);
  border: none;
  cursor: pointer;
  text-decoration: none;
  font-family: 'DM Sans', sans-serif;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .04em;
  transition: transform .2s, box-shadow .2s, filter .15s;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  white-space: nowrap;
  flex-shrink: 0;
}
.btn-channel:hover  { transform: translateY(-2px); filter: brightness(1.07); }
.btn-channel:active { transform: scale(0.97); }

/* WhatsApp */
.btn-wa {
  background: #25D366;
  color: #fff;
  box-shadow: 0 3px 14px rgba(37,211,102,.35);
}
.btn-wa:hover { box-shadow: 0 5px 18px rgba(37,211,102,.45); }

/* Viber */
.btn-viber {
  background: #7B519D;
  color: #fff;
  box-shadow: 0 3px 14px rgba(123,81,157,.35);
}
.btn-viber:hover { box-shadow: 0 5px 18px rgba(123,81,157,.45); }


/* Channel icons */
.btn-channel svg { width: 18px; height: 18px; flex-shrink: 0; }

/* Contact channel divider */
.channel-divider {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin: 1.25rem 0;
  color: var(--text3);
  font-size: .75rem;
  letter-spacing: .10em;
  text-transform: uppercase;
}
.channel-divider::before,
.channel-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* Quick contact strip on home */
.quick-contact {
  display: flex;
  gap: .75rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 1.5rem;
}

/* Footer channel icons */
.footer-channels {
  display: flex;
  gap: .5rem;
  margin-top: .75rem;
  flex-wrap: wrap;
}
.footer-channel-link {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .82rem;
  padding: .22rem .65rem;
  border-radius: var(--radius);
  text-decoration: none;
  transition: opacity .2s;
}
.footer-channel-link:hover { opacity: .82; }
.footer-channel-link.wa     { background: rgba(37,211,102,.12); color: #1aaa50; }
.footer-channel-link.tg     { background: rgba(34,158,217,.12); color: #1a7faa; }
.footer-channel-link.viber  { background: rgba(123,81,157,.12); color: #7B519D; }
[data-theme="dark"] .footer-channel-link.wa    { color: #25D366; }
[data-theme="dark"] .footer-channel-link.tg    { color: #5bc8f5; }
[data-theme="dark"] .footer-channel-link.viber { color: #b07fd4; }


/* ===================== REVIEWS ===================== */
.reviews-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.25rem;
  margin-top: 1.75rem;
}
.review-card {
  padding: 1.35rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: .6rem;
}
.reviews-grid .review-card,
.features-grid .feature-card,
.special-grid .special-card { justify-content: flex-start; }
.review-stars { color: var(--gold); font-size: .95rem; letter-spacing: .1em; }
.review-text  { font-size: .87rem; color: var(--text2); line-height: 1.7; font-style: italic; }
.review-author { font-size: .73rem; color: var(--text3); letter-spacing: .08em; text-transform: uppercase; }
.reviews-cta  { text-align: center; margin-top: 1.5rem; }


/* ===================== QUICK DESTINATION LINKS ===================== */
.quick-dest-links {
  display: flex;
  flex-wrap: wrap;
  gap: .85rem;
  justify-content: center;
  margin-top: 1.75rem;
}
.qd-link-card {
  display: flex; flex-direction: column; align-items: center; gap: .45rem;
  padding: 1rem 1.3rem;
  min-width: 120px;
  background: var(--card-bg); border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer; text-align: center; text-decoration: none;
  transition: border-color .2s, transform .2s, box-shadow .2s;
  font-family: 'DM Sans', sans-serif;
  -webkit-tap-highlight-color: transparent;
  min-height: 108px;
}
.qd-link-card:hover { border-color: var(--gold); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.qd-link-card:active { transform: scale(0.97); }
.qd-link-icon  { font-size: 1.5rem; line-height: 1; }
.qd-link-label { font-size: .68rem; letter-spacing: .10em; text-transform: uppercase; color: var(--text2); }

.channel-btns {
  align-items: stretch;
}

.channel-btns .btn-channel {
  justify-content: center;
  min-width: 180px;
}

/* Responsive: show FABs on mobile */
@media (max-width: 768px) {
  .fab-wa { display: flex; }
}

/* ===================== POPUP v7 ADDITIONS ===================== */

.popup-timelabel {
  font-size: .76rem;
  color: var(--text3);
  letter-spacing: .06em;
  margin: -.4rem 0 .8rem;
  text-transform: uppercase;
}

.popup-row-sub {
  background: var(--gold-alpha);
  border-radius: var(--radius);
  padding: .3rem .6rem !important;
  margin: -.1rem 0 .15rem;
  font-size: .78rem !important;
}
.popup-row-sub span:first-child { color: var(--text3) !important; }
.popup-included-note {
  font-size: .72rem;
  color: var(--success);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.popup-km-breakdown {
  font-size: .73rem;
  color: var(--text3);
  margin-top: .25rem;
  line-height: 1.5;
  display: none;
}

/* Popup action buttons row */
.popup-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin-top: .85rem;
}

.popup-call {
  background: var(--bg2);
  border: 1px solid var(--border-hard);
  color: var(--text);
  font-weight: 600;
  font-size: .76rem;
  padding: .55rem .95rem;
  border-radius: var(--radius);
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  text-decoration: none;
  cursor: pointer;
  transition: border-color .2s, color .2s;
  flex: 1; min-width: 120px; justify-content: center;
}
.popup-call:hover { border-color: var(--gold); color: var(--gold); }

.popup-btn-sm {
  flex: 1;
  min-width: 90px;
  justify-content: center;
  padding: .55rem .75rem !important;
  font-size: .73rem !important;
}

.popup-btn-calc {
  width: 100%;
  margin-top: .1rem;
  font-size: .75rem;
}

/* Tariff cards - add per km line */
.tariff-perkm {
  font-size: .8rem;
  color: var(--text3);
  margin-top: .25rem;
}
.tariff-perkm strong { color: var(--gold); }

/* ===================== VEHICLES SLIDER ===================== */
.vehicles-section { padding: 3.5rem var(--px); }

.vehicles-slider {
  position: relative;
  max-width: 860px;
  margin: 2rem auto 0;
  overflow: hidden;
  border-radius: var(--radius-lg);
}

.vehicles-track {
  display: flex;
  transition: transform .5s cubic-bezier(.4,0,.2,1);
  will-change: transform;
}

.vehicle-card {
  flex: 0 0 100%;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.vehicle-img {
  aspect-ratio: 4/3;
  object-fit: cover;
  width: 100%;
  height: 100%;
  display: block;
  background: var(--bg3);
}

/* Placeholder when no image */
.vehicle-img-placeholder {
  aspect-ratio: 4/3;
  background: linear-gradient(135deg, var(--bg2), var(--bg3));
  display: flex; align-items: center; justify-content: center;
  font-size: 3.5rem; color: var(--text3);
}

.vehicle-info {
  padding: 1.75rem 1.75rem;
  display: flex; flex-direction: column; justify-content: center; gap: .75rem;
}

.vehicle-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.55rem; font-weight: 400;
  color: var(--text); line-height: 1.2;
}

.vehicle-desc {
  color: var(--text2); font-size: .88rem; line-height: 1.7;
}

.vehicle-tags {
  display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .25rem;
}

.vehicle-tag {
  font-size: .67rem; font-weight: 500; letter-spacing: .09em; text-transform: uppercase;
  padding: .22rem .65rem;
  border: 1px solid var(--border-hard);
  border-radius: 999px;
  color: var(--text3);
}

/* Dots */
.vehicles-dots {
  display: flex; justify-content: center; gap: .5rem;
  margin-top: 1.1rem; padding-bottom: .25rem;
}

.vehicles-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--bg3); border: 1.5px solid var(--border-hard);
  cursor: pointer; transition: background .25s, border-color .25s;
  padding: 0;
}

.vehicles-dot.active {
  background: var(--gold); border-color: var(--gold);
}

@media (max-width: 680px) {
  .vehicle-card { grid-template-columns: 1fr; }
  .vehicle-img, .vehicle-img-placeholder { aspect-ratio: 16/9; }
  .vehicle-info { padding: 1.25rem 1.1rem; }
  .vehicle-name { font-size: 1.3rem; }
}

/* ── LANG SWITCHER ── */
.lang-switcher {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 33px; height: 33px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: transparent;
  color: var(--text2);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-decoration: none;
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color .2s, color .2s, transform .2s;
  -webkit-tap-highlight-color: transparent;
  font-family: 'DM Sans', sans-serif;
}
.lang-switcher:hover {
  border-color: var(--gold);
  color: var(--gold);
  transform: scale(1.05);
}

/* ── PRICING POPUP ── */
#pricing-popup {
  position: fixed; inset: 0; z-index: 3100;
  background: var(--modal-bg);
  backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
  display: flex; align-items: center; justify-content: center;
  padding: 1.25rem;
  opacity: 0; pointer-events: none;
  transition: opacity .28s;
}
#pricing-popup.show {
  opacity: 1; pointer-events: auto;
}
.pricing-popup-card {
  max-width: 380px;
}
#pricing-popup.show .popup-card {
  transform: scale(1) translateY(0);
}

/* ══════════════════════════════════════════════════════════
   QUICK DESTINATIONS WIDGET
══════════════════════════════════════════════════════════ */
.qd-section {
  margin: 0 auto 2rem;
  max-width: 680px;
}
.qd-inner {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.6rem 1.5rem 1.4rem;
  box-shadow: var(--shadow);
}

/* Naslov se naslanja na .calc-header koji već postoji */
.qd-inner .calc-header {
  margin-bottom: 1.2rem;
}

/* ── Polazište row ── */
.qd-origin-row {
  display: flex;
  align-items: center;
  gap: .55rem;
  flex-wrap: wrap;
  margin-bottom: .85rem;
}
.qd-locate-btn {
  white-space: nowrap;
  flex-shrink: 0;
}
.qd-or {
  font-size: .82rem;
  color: var(--text3);
  flex-shrink: 0;
}
.qd-ac-wrap {
  flex: 1;
  min-width: 160px;
}
.qd-origin-input {
  width: 100%;
}

/* ── Select ── */
.qd-dest-row {
  margin-bottom: 1rem;
}
.qd-select {
  width: 100%;
  background: var(--input-bg, var(--surface));
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .65rem .85rem;
  font-size: .9rem;
  font-family: 'DM Sans', sans-serif;
  cursor: pointer;
  transition: border-color .2s;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23c9a84c' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .85rem center;
  padding-right: 2.4rem;
}
.qd-select:focus {
  outline: none;
  border-color: var(--gold);
}
.qd-select option,
.qd-select optgroup {
  background: var(--surface);
  color: var(--text);
}

/* ── Gumb row ── */
.qd-btn-row {
  display: flex;
  justify-content: flex-start;
}

/* URL param highlight — kratki flash na selectu kad je dest predoabran */
.qd-select.qd-preselected {
  border-color: var(--gold);
  box-shadow: 0 0 0 2px rgba(201,168,76,.25);
  transition: border-color .3s, box-shadow .3s;
}