/* ── Наши чартер аранжмани на екранот „Пакети" (28.08.2026) ──────────────────
   Андреј: „samo klaudija whitelabeli resi — veke so ti rekov za paketiete i
   staj gi paketite od aurora".

   Зошто постои: нивниот екран „Пакети" оди право на eTrip. Нашите три чартер
   блока (Хургада, Тунис, Коста Брава) не се во таа шина воопшто, значи на
   whitelabel не постоеја. Оваа лента ги црта од нашата рута
   `/savana/public/wl/package-*`, под нивната форма, без да допре ниту еден
   нивни React јазол.

   Ако рутата падне или врати празно, лентата се КРИЕ — но кажува зошто (види
   `pkgrail.js`, три состојби). Празна школка со наслов е полоша од ништо.

   Врати назад: тргни ги двата `pkgrail.*` реда од sub_filter во ДВАТА блока на
   `whitelabel-klaudija.nginx.conf`, па `nginx -t && nginx -s reload`. */

.sv-pkgrail {
  margin: 20px auto 8px;
  padding: 0 16px;
  max-width: 1200px;
  font-family: inherit;
}

.sv-pkgrail-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 12px;
  margin-bottom: 14px;
}

.sv-pkgrail-title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--brand-text, #1f2937);
  letter-spacing: -0.01em;
}

.sv-pkgrail-sub {
  margin: 0;
  font-size: 0.82rem;
  color: var(--brand-text-secondary, #6b7280);
}

/* ── Избор: блок · поаѓање · ноќи ─────────────────────────────────────────
   Телефон прво — една колона, полиња преку цела ширина, ≥44px висина. */
.sv-pkgrail-pick {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-bottom: 16px;
}

@media (min-width: 640px) {
  .sv-pkgrail-pick { grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
}

.sv-pkgrail-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }

.sv-pkgrail-field > span {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--brand-text-secondary, #6b7280);
}

.sv-pkgrail-field select {
  min-height: 46px;                       /* тап-цел ≥44px */
  padding: 0 34px 0 12px;
  font: inherit;
  font-size: 0.92rem;
  color: var(--brand-text, #1f2937);
  background: var(--brand-surface, #fff);
  border: 1px solid var(--brand-border, rgba(0, 0, 0, .16));
  border-radius: 12px;
  cursor: pointer;
  width: 100%;
  max-width: 100%;                        /* нула хоризонтален скрол на 390px */
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%236b7280'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 22px;
}

.sv-pkgrail-field select:disabled { opacity: .55; cursor: default; }

/* ── Филтер и подредување (29.08.2026, „zaso nemam filtriranje?") ─────────
   Телефон прво: панелот е зад копче ≥46px; на ≥768px копчето исчезнува и
   панелот е секогаш отворен. Групите се редат во колона на тесно, во ред со
   виткање на широко. */
.sv-pkgflt { margin: 0 0 14px; }
.sv-pkgflt[hidden] { display: none !important; }

.sv-pkgflt-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: 46px;                        /* тап-цел ≥44px */
  padding: 0 14px;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--brand-text, #1f2937);
  background: var(--brand-surface, #fff);
  border: 1px solid var(--brand-border, rgba(0, 0, 0, .16));
  border-radius: 12px;
  cursor: pointer;
}

.sv-pkgflt-badge {
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-style: normal;
  font-size: 0.74rem;
  font-weight: 800;
  color: #fff;
  background: var(--brand-accent, #f0801a);
}
.sv-pkgflt-badge[hidden] { display: none; }

.sv-pkgflt-panel {
  display: none;
  margin-top: 10px;
  padding: 12px 14px;
  border: 1px solid var(--brand-border, rgba(0, 0, 0, .12));
  border-radius: 12px;
  background: var(--brand-surface, #fff);
}
.sv-pkgflt.open .sv-pkgflt-panel { display: grid; }
.sv-pkgflt-panel { grid-template-columns: 1fr; gap: 14px; }

@media (min-width: 768px) {
  .sv-pkgflt-toggle { display: none; }
  .sv-pkgflt-panel { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px 22px; }
}

.sv-pkgflt-group { display: flex; flex-direction: column; gap: 8px; min-width: 0; }

.sv-pkgflt-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--brand-text-secondary, #6b7280);
}

.sv-pkgflt-sort {
  min-height: 44px;
  padding: 0 34px 0 12px;
  font: inherit;
  font-size: 0.88rem;
  color: var(--brand-text, #1f2937);
  background: var(--brand-surface, #fff);
  border: 1px solid var(--brand-border, rgba(0, 0, 0, .16));
  border-radius: 10px;
  cursor: pointer;
  width: 100%;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%236b7280'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 22px;
}

/* Двоен лизгач за цена: двата input-а лежат врз иста шина; шината не прима
   допири (pointer-events: none), само палците. Пополнетиот дел е div што JS
   го помести — нема зависност од браузерски track-стилови. */
.sv-range { position: relative; height: 32px; }

.sv-range::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 4px;
  transform: translateY(-50%);
  border-radius: 999px;
  background: var(--brand-border, #e5e7eb);
}

.sv-range-fill {
  position: absolute;
  top: 50%;
  height: 4px;
  transform: translateY(-50%);
  border-radius: 999px;
  background: var(--brand-accent, #f0801a);
}

.sv-range input[type='range'] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 32px;
  margin: 0;
  background: none;
  pointer-events: none;
  -webkit-appearance: none;
  appearance: none;
}

.sv-range input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  pointer-events: auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--brand-accent, #f0801a);
  border: 3px solid #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
  cursor: pointer;
}

.sv-range input[type='range']::-moz-range-thumb {
  pointer-events: auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--brand-accent, #f0801a);
  border: 3px solid #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
  cursor: pointer;
}

.sv-pkgflt-range-out { font-size: 0.84rem; font-weight: 700; color: var(--brand-text, #1f2937); }

.sv-pkgflt-chips { display: flex; flex-wrap: wrap; gap: 8px; }

.sv-pkgflt-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;                        /* тап-цел и на чипови */
  padding: 0 12px;
  font: inherit;
  font-size: 0.84rem;
  color: var(--brand-text, #1f2937);
  background: var(--brand-surface, #fff);
  border: 1px solid var(--brand-border, rgba(0, 0, 0, .18));
  border-radius: 999px;
  cursor: pointer;
}

.sv-pkgflt-chip em {
  font-style: normal;
  font-size: 0.74rem;
  color: var(--brand-text-secondary, #6b7280);
}

.sv-pkgflt-chip[aria-pressed='true'] {
  background: var(--brand-accent, #f0801a);
  border-color: var(--brand-accent, #f0801a);
  color: #fff;
}
.sv-pkgflt-chip[aria-pressed='true'] em { color: rgba(255, 255, 255, .85); }

.sv-pkgflt-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin-top: 10px;
}

.sv-pkgflt-count { font-size: 0.84rem; font-weight: 700; color: var(--brand-text-secondary, #6b7280); }

.sv-pkgflt-reset {
  min-height: 44px;
  padding: 0 14px;
  font: inherit;
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--brand-accent, #f0801a);
  background: none;
  border: 1px solid var(--brand-accent, #f0801a);
  border-radius: 999px;
  cursor: pointer;
}
.sv-pkgflt-reset[hidden] { display: none; }

.sv-pkgflt-empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 16px;
  border: 1px dashed var(--brand-border, rgba(0, 0, 0, .18));
  border-radius: 12px;
  font-size: 0.88rem;
  color: var(--brand-text-secondary, #6b7280);
}
.sv-pkgflt-empty p { margin: 0; }

/* ── Картички ─────────────────────────────────────────────────────────────── */
.sv-pkgrail-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

@media (min-width: 640px)  { .sv-pkgrail-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .sv-pkgrail-grid { grid-template-columns: 1fr 1fr 1fr; } }

.sv-pkgcard {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--brand-border, rgba(0, 0, 0, .12));
  border-radius: 16px;
  background: var(--brand-surface, #fff);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
}

/* Рамката НЕ се растегнува по висината на текстот до неа — сопствен сооднос,
   инаку сечеме туѓ кадар (мерено 28.08: 66% исечено на соседна страница). */
.sv-pkgcard-img {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  background: linear-gradient(135deg, #eef1f5, #e3e8ee);
  overflow: hidden;
  flex: 0 0 auto;
}

.sv-pkgcard-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Картичка без слика е нормална состојба (мерено: ~2/3 од објектите имаат
   слика), затоа местото го држи мирен знак, не празна дупка. */
.sv-pkgcard-noimg {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  opacity: .35;
}

.sv-pkgcard-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  color: #fff;
  background: #d92d20;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
}

.sv-pkgcard-body { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px 14px; }

.sv-pkgcard-name {
  margin: 0;
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--brand-text, #1f2937);
}

.sv-pkgcard-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  font-size: 0.78rem;
  color: var(--brand-text-secondary, #6b7280);
}

.sv-pkgcard-stars { color: #f5b400; letter-spacing: 1px; }

.sv-pkgcard-price { display: flex; align-items: baseline; gap: 8px; margin-top: 2px; }

.sv-pkgcard-price b {
  font-size: 1.18rem;
  font-weight: 800;
  color: var(--brand-accent, #f0801a);
}

.sv-pkgcard-price s { font-size: 0.82rem; color: var(--brand-text-muted, #9ca3af); }

/* Основата на цената е дел од понудата, не ситен печат: фиксна единица
   НИКОГАШ „по лице", и чартер лет мора да се именува дека е вклучен. */
.sv-pkgcard-basis {
  font-size: 0.74rem;
  line-height: 1.35;
  color: var(--brand-text-secondary, #6b7280);
}

/* ── Пораки ───────────────────────────────────────────────────────────────── */
.sv-pkgrail-note {
  padding: 14px 16px;
  border: 1px dashed var(--brand-border, rgba(0, 0, 0, .18));
  border-radius: 12px;
  font-size: 0.86rem;
  color: var(--brand-text-secondary, #6b7280);
  background: var(--brand-surface, #fff);
}

.sv-pkgrail[hidden] { display: none !important; }