:root {
  --fd: 'Sora', system-ui, sans-serif;
  --fb: 'Mulish', system-ui, sans-serif;
  --page: #ECE6DB;
  --brand: #F8B230;
  --brand-d: #C4870F;
}

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

/* Fon naqshi — sakkiz qirrali yulduz (ikki kvadrat). .card dan tashqarida,
   shuning uchun html2canvas ga daxli yo'q. */
body {
  font-family: var(--fb);
  background-color: var(--page);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%23DFD7C7' stroke-width='1.1'%3E%3Crect x='26' y='26' width='20' height='20'/%3E%3Crect x='26' y='26' width='20' height='20' transform='rotate(45 36 36)'/%3E%3C/g%3E%3C/svg%3E");
  color: #2B2A28;
  padding: 34px 22px 40px;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 1180px; margin: 0 auto }

/* ---------- brand ---------- */
.brand { text-align: center; margin-bottom: 26px }
/* Logo — ravoq (arka) shaklida: butun saytning shakl-leytmotivi. */
.brand .logo {
  width: 62px; height: 70px; border-radius: 31px 31px 14px 14px;
  background: var(--brand);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 12px;
  font-family: var(--fd); font-weight: 800; font-size: 25px; color: #fff;
  letter-spacing: -.5px;
  box-shadow: 0 6px 18px rgba(200, 140, 20, .35);
}
.brand h1 {
  font-family: var(--fd); font-weight: 800; font-size: 28px;
  letter-spacing: .4px; color: #262320; text-transform: uppercase;
}
/* Chiziq o'rniga ornament: ingichka chiziq + markazda romb. */
.brand .u { width: 82px; height: 2px; background: var(--brand); border-radius: 2px; margin: 13px auto 11px; position: relative }
.brand .u::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 9px; height: 9px;
  background: var(--brand); border: 3px solid var(--page); border-radius: 2px;
  transform: translate(-50%, -50%) rotate(45deg);
}
.brand p { font-family: var(--fb); font-weight: 600; color: #6B5F50; font-size: 14px; letter-spacing: .3px }

/* ---------- mavzular ---------- */
/* --c1d/--c2d — faqat pastki qirra rangi. Matn uchun --acc ishlatiladi:
   qirra ranglari matn sifatida AA dan o'tmaydi. */
.t-oltin {
  --c1: #FAB800; --c1d: #C48F00; --c2: #FAB800; --c2d: #C48F00;
  --ontitle: #151007; --onc2: #151007; --acc: #8A6300;
  --bg: #F1F6FA; --panel: #FCFDFF; --line: #DDE5EE; --txt: #232B39; --txt2: #5C6675;
}
.t-terrakota {
  --c1: #E46D57; --c1d: #B14733; --c2: #F0A93D; --c2d: #BE7C17;
  --ontitle: #2E211E; --onc2: #1E1206; --acc: #A8402C;
  --bg: #FBF4F2; --panel: #FFFCFB; --line: #EFDCD7; --txt: #2E211E; --txt2: #7C615B;
}
.t-hovarang {
  --c1: #203E87; --c1d: #12275C; --c2: #E3A63A; --c2d: #AF7715;
  --ontitle: #E8EEFB; --onc2: #17110A; --acc: #2B4E9E;
  --bg: #F2F5FB; --panel: #FBFCFF; --line: #DCE3F0; --txt: #202839; --txt2: #58627A;
}

/* ---------- views ---------- */
.view { display: none; animation: fade .34s ease }
.view.active { display: block }
@keyframes fade { from { opacity: 0; transform: translateY(10px) } to { opacity: 1; transform: none } }

.topbar { max-width: 1180px; margin: 0 auto 22px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap }
.back {
  background: #fff; border: 1px solid #E0D6C6; border-radius: 999px; padding: 9px 18px;
  cursor: pointer; font-family: var(--fb); font-weight: 700; font-size: 13.5px; color: #3A332B;
  display: inline-flex; align-items: center; gap: 7px; transition: background .15s;
}
.back:hover { background: #F6F0E6 }
.crumb { font-family: var(--fb); font-weight: 600; color: #6B5F50; font-size: 13.5px }

/* ---------- paket plitkalari ---------- */
.tiles { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; max-width: 770px; margin: 6px auto 0 }
.tile {
  flex: 0 1 340px; aspect-ratio: 1/1; border: none; border-radius: 150px 150px 26px 26px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  background: var(--c1); box-shadow: 0 14px 32px rgba(40, 30, 20, .20);
  transition: transform .2s, box-shadow .2s; padding: 34px 22px 22px; text-align: center;
}
.tile:hover { transform: translateY(-6px); box-shadow: 0 22px 46px rgba(40, 30, 20, .30) }
.tile .tname { font-family: var(--fd); font-weight: 800; font-size: 26px; letter-spacing: .5px; color: var(--ontitle); line-height: 1.05 }
.tile .tsub { font-family: var(--fd); font-weight: 700; font-size: 14px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ontitle); opacity: .85 }
.tile .tgo {
  margin-top: 6px; font-family: var(--fb); font-weight: 700; font-size: 13px;
  color: var(--onc2); background: var(--c2); padding: 7px 16px; border-radius: 999px; box-shadow: 0 2px 0 var(--c2d);
}

/* data.json fetch bilan kelguncha ko'rinadi. .card dan tashqarida — html2canvas ga tegmaydi. */
.tile-skel {
  flex: 0 1 340px; aspect-ratio: 1/1; border-radius: 150px 150px 26px 26px;
  background: linear-gradient(100deg, #E3DCCF 30%, #EFE9DE 50%, #E3DCCF 70%);
  background-size: 220% 100%; animation: skel 1.3s ease-in-out infinite;
}
@keyframes skel { from { background-position: 180% 0 } to { background-position: -80% 0 } }
@media (prefers-reduced-motion: reduce) { .tile-skel { animation: none } }

/* ---------- filtrlar ---------- */
/* subgrid: chap savol ikki qatorga tushsa ham ikkala ro'yxat bir chiziqda tursin.
   Subgrid ni tushunmaydigan brauzerda blok oddiy gridga aylanadi — shakli buziladi,
   lekin ishlaydi. */
.filter {
  max-width: 760px; margin: 0 auto 26px;
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto;
  gap: 8px 16px;
}
.filter-block {
  display: grid; grid-template-rows: subgrid; grid-row: span 2; gap: 8px; min-width: 0;
}
.filter-q {
  display: block; align-self: end;
  font-family: var(--fd); font-weight: 800; font-size: 14px; color: #3A332B;
  line-height: 1.35;
}
.filter-select {
  width: 100%; min-height: 52px; padding: 12px 44px 12px 19px;
  background: #fff; border: 1.5px solid #E0D6C6; border-radius: 999px;
  font-family: var(--fb); font-weight: 700; font-size: 15px; color: #3A332B;
  cursor: pointer; appearance: none;
  /* O'z strelkamiz: nativ strelka har OS da har xil ko'rinadi. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A8790E' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 18px;
  transition: border-color .15s, box-shadow .15s;
}
.filter-select:hover { border-color: var(--brand) }
.filter-select:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; border-color: var(--brand) }
/* Tanlab bo'lmaydigan yo'nalishlar ro'yxatda qoladi — kelayotgani ko'rinib tursin. */
.filter-select option:disabled { color: #9A8E7C }

/* Ikkala ro'yxat ham bitta qatorga sig'masa — ustma-ust. */
@media (max-width: 640px) {
  .filter { grid-template-columns: 1fr; grid-template-rows: auto; gap: 14px }
  .filter-block { grid-row: auto; grid-template-rows: auto auto }
}
.count { grid-column: 1 / -1; text-align: center; font-family: var(--fb); font-weight: 600; color: #6B5F50; font-size: 13px; margin-top: 8px }

.empty {
  max-width: 520px; margin: 30px auto; background: #fff; border: 1.5px dashed #E0D6C6;
  border-radius: 18px; padding: 30px 24px; text-align: center;
}
.empty b { display: block; font-family: var(--fd); font-weight: 800; font-size: 17px; color: #3A332B; margin-bottom: 7px }
.empty span { font-family: var(--fb); font-weight: 600; color: #7A6B57; font-size: 14px; line-height: 1.5 }

/* ---------- kartalar ---------- */
.cards { text-align: center; font-size: 0 }
.col { display: inline-block; vertical-align: top; width: 360px; margin: 11px; font-size: 14px }
.col .card { width: 100% }

.card {
  background: var(--bg); color: var(--txt); border-radius: 22px; padding: 14px;
  box-shadow: 0 10px 26px rgba(40, 30, 20, .10);
  display: flex; flex-direction: column; gap: 9px; text-align: left;
}
/* Podlojkalar border-bottom bilan, box-shadow bilan emas: html2canvas 1.4.1
   scale > 1 da box-shadow ni tushirib qoldiradi va yuklab olingan PNG yassi chiqadi. */
/* Ravoq: tepasi keng yoy, pasti tor burchak. border-radius xolos —
   html2canvas bunga bemalol chidaydi. */
.title {
  background: var(--c1); color: var(--ontitle); border-radius: 38px 38px 12px 12px; text-align: center;
  padding: 15px 12px 9px; border-bottom: 4px solid var(--c1d);
}
.title .tt { font-family: var(--fd); font-weight: 800; letter-spacing: .2px; font-size: 19px; text-transform: uppercase; line-height: 1.1 }
.title .ts { font-family: var(--fb); font-weight: 700; font-size: 11px; margin-top: 3px; opacity: .85 }

.airline {
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  padding: 9px 12px; display: flex; align-items: center; gap: 11px; justify-content: center;
}
.airline > svg { flex: none; color: var(--acc) }
.airline .al-name { font-family: var(--fd); font-weight: 700; color: var(--acc); font-size: 14px; letter-spacing: .2px; text-transform: uppercase }
.airline .al-route { font-size: 11px; color: var(--txt2); font-weight: 600; line-height: 1.35; margin-top: 2px }

.date-strip { text-align: center }
.date-label {
  font-family: var(--fb); font-weight: 700; color: var(--acc); font-size: 11px;
  letter-spacing: 1.2px; text-transform: uppercase;
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.date-pills { display: flex; gap: 6px; justify-content: center; align-items: center; margin-top: 6px }
/* "Barg" shakli: qarama-qarshi burchaklar keng/tor. */
.date-pill {
  background: var(--panel); border: 1px solid var(--line); border-radius: 13px 5px 13px 5px; padding: 6px 13px;
  font-family: var(--fd); font-weight: 700; color: var(--txt); font-size: 13.5px;
}
.date-dash { font-family: var(--fd); font-weight: 800; color: var(--acc); font-size: 22px; line-height: 1; letter-spacing: -1px; padding: 0 2px }

.days-badge {
  align-self: center; background: var(--c2); color: var(--onc2); border-radius: 999px;
  padding: 6px 20px 3px; font-family: var(--fd); font-weight: 800; letter-spacing: .4px; font-size: 14.5px;
  display: flex; align-items: center; gap: 8px; border-bottom: 3px solid var(--c2d);
}

.hotel {
  background: var(--panel); border: 1px solid var(--line); border-radius: 13px;
  padding: 9px 11px; display: flex; align-items: flex-start; gap: 11px;
}
.hotel .ic {
  flex: none; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center;
  margin-top: 1px; background: var(--bg); border-radius: 16px 16px 7px 7px;
}
.hotel .h-body { flex: 1; min-width: 0 }
.hotel .h-city { font-family: var(--fd); font-weight: 800; color: var(--acc); font-size: 15px; letter-spacing: .2px; text-transform: uppercase; line-height: 1.05 }
.hotel .h-name { font-family: var(--fb); font-weight: 700; color: var(--txt); font-size: 13.5px; margin-top: 3px; line-height: 1.2 }

.prices { display: flex; flex-direction: column; gap: 7px; margin-top: 1px }
.price-row {
  background: var(--panel); border: 1px solid var(--line); border-radius: 11px;
  padding: 5px 6px 5px 12px; display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.price-row .pl { display: flex; align-items: center; gap: 10px; font-family: var(--fb); font-weight: 700; color: var(--txt); font-size: 12.5px; min-width: 0 }
.price-row .pl svg { flex: none }
.price-row .pl span { line-height: 1.2 }
.price-tag {
  background: var(--c2); color: var(--onc2); border-radius: 13px 5px 13px 5px; padding: 6px 14px 4px;
  font-family: var(--fd); font-weight: 800; font-size: 15.5px; letter-spacing: .2px;
  min-width: 90px; text-align: center; border-bottom: 2px solid var(--c2d);
}
.note { text-align: center; font-family: var(--fb); font-weight: 600; color: var(--txt2); font-size: 11.5px; letter-spacing: .2px }

.transport {
  background: var(--c1); color: var(--ontitle); border-radius: 11px; padding: 8px; text-align: center;
  font-family: var(--fd); font-weight: 800; letter-spacing: .3px; font-size: 13.5px;
  display: flex; align-items: center; justify-content: center; gap: 9px; text-transform: uppercase;
}

.inc-head {
  text-align: center; font-family: var(--fb); font-weight: 800; color: var(--acc);
  font-size: 11.5px; letter-spacing: .3px; text-transform: uppercase; margin-top: 2px;
}
.inc-grid { text-align: center; font-size: 0; padding: 3px 0 0 }
.inc { display: inline-block; vertical-align: top; width: 25%; box-sizing: border-box; padding: 0 3px; margin-top: 9px; text-align: center }
.inc .ib {
  width: 28px; height: 30px; border-radius: 13px 13px 5px 5px; background: var(--panel); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center; margin: 0 auto 4px;
}
.inc small { display: block; font-family: var(--fb); font-weight: 600; color: var(--txt2); font-size: 8.8px; line-height: 1.18 }

.meals {
  background: var(--panel); border: 1px dashed var(--c2); border-radius: 12px;
  padding: 9px 12px; display: flex; align-items: center; gap: 12px; margin-top: 1px;
}
.meals svg { flex: none }
.meals .mtxt { font-family: var(--fb); font-weight: 700; color: var(--txt); font-size: 13px; line-height: 1.45 }
.meals .mtxt i { font-style: normal; color: var(--acc); font-family: var(--fd); font-weight: 800; letter-spacing: .2px }
.meals .mtxt b { color: var(--acc); font-family: var(--fd); font-weight: 800 }

.dl-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: calc(100% - 2px); margin: 11px auto 0;
  background: var(--c1); color: var(--ontitle); border: none; border-radius: 999px; padding: 13px;
  font-family: var(--fd); font-weight: 800; font-size: 14px; letter-spacing: .4px;
  cursor: pointer; box-shadow: 0 3px 0 var(--c1d); transition: transform .15s;
}
.dl-btn:hover { transform: translateY(-2px) }
.dl-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--c1d) }
.dl-btn:disabled { opacity: .6; cursor: wait }
.dl-btn svg { flex: none }

/* ---------- footer ---------- */
.cta {
  max-width: 1180px; margin: 34px auto 0; background: var(--brand); border-radius: 34px 34px 18px 18px;
  padding: 22px 26px 20px; text-align: center;
}
.cta p { font-family: var(--fd); font-weight: 800; color: #151007; font-size: 16px; line-height: 1.4 }

.foot {
  background: #211E1B; border-radius: 18px; padding: 18px 26px;
  display: flex; justify-content: center; align-items: center; gap: 40px; flex-wrap: wrap;
  max-width: 1180px; margin: 14px auto 0;
}
.foot .item { display: flex; align-items: center; gap: 12px; text-decoration: none }
.foot .item .tx { font-family: var(--fb); font-weight: 700; color: #F3ECE0; font-size: 15px; line-height: 1.3 }
.foot .item .lab {
  display: block; font-family: var(--fd); font-weight: 700; color: var(--brand);
  font-size: 10px; text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 2px;
}

@media (max-width: 820px) {
  .col { width: 100%; max-width: 380px; margin: 9px auto; display: block }
  .cards { font-size: 14px }
  .tiles { max-width: 420px }
  .tile, .tile-skel { flex: 1 1 100%; aspect-ratio: auto; min-height: 170px; border-radius: 64px 64px 22px 22px }
  .foot { gap: 18px; flex-direction: column; align-items: flex-start }
}

@media print {
  body { background: #fff; padding: 0 }
  .card { box-shadow: none }
  .dl-btn, .filter, .topbar { display: none }
}