/* SKYLINE_V2_FRESH_BUILD — ndertuar direkt nga mockup-i i miratuar, me klasa
   krejtesisht te reja (sky2-*) qe s'kane asnje lidhje me skyline.css te
   vjetrit - zero konflikt kaskade, zero !important qe lufton kunder
   rregullave te tjera. Ngarkohet i FUNDIT (pas skyline.css) qe te fitoje
   automatikisht ne rast konflikti edhe pa specificitet te larte. */

html[data-public-template="skyline"] body.public-app .marketing-home .sky2-card{
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  padding: 16px !important;
  background: #ffffff !important;
}
/* SKY2_DESKTOP_WIDTH_LOCK_V1: mockup-i osht ndertu si karte kompakte
   (max ~400px), jo si dizajn i shtrire per desktop. Ne vend qe ta lem me u
   shtri ne gjeresi te plote ne ekran te madh (siç ndodhte me pare - dukej
   krejt tjeter nga mockup-i), e mbajme te njejten permasa te ngjeshura ne
   CDO madhesi ekrani, thjesht e centrojme. */
html[data-public-template="skyline"] body.public-app .marketing-home .booking-panel{
  max-width: 430px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
html[data-public-template="skyline"] body.public-app .marketing-home .sky2-module-row,
html[data-public-template="skyline"] body.public-app .marketing-home .sky2-trip-row,
html[data-public-template="skyline"] body.public-app .marketing-home .sky2-seg-row,
html[data-public-template="skyline"] body.public-app .marketing-home .sky2-dt-row{
  max-width: 100% !important;
}

/* ---- module row: 3 icon-square buttons, Fluturime/Bus/Hotel ---- */
html[data-public-template="skyline"] body.public-app .marketing-home .sky2-module-row{
  display: flex !important;
  flex-direction: row !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  list-style: none !important;
}
html[data-public-template="skyline"] body.public-app .marketing-home .sky2-module-btn{
  flex: 1 1 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 60px !important;
  margin: 0 !important;
  padding: 10px 4px 9px !important;
  border: 0 !important;
  border-radius: 14px !important;
  background: #F5F9FD !important;
  color: #5B6B82 !important;
  box-shadow: 0 1px 2px rgba(15,63,135,.08) !important;
  text-decoration: none !important;
  font-family: inherit !important;
}
html[data-public-template="skyline"] body.public-app .marketing-home .sky2-module-btn .module-tab-icon{
  width: 20px !important;
  height: 20px !important;
  color: #1B5FBF !important;
}
html[data-public-template="skyline"] body.public-app .marketing-home .sky2-module-btn span{
  font-size: 10.5px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
}
html[data-public-template="skyline"] body.public-app .marketing-home .sky2-module-btn.active,
html[data-public-template="skyline"] body.public-app .marketing-home a.sky2-module-btn.active{
  background: #0F3F87 !important;
  color: #ffffff !important;
  box-shadow: 0 10px 20px -8px rgba(15,63,135,.5) !important;
}
html[data-public-template="skyline"] body.public-app .marketing-home .sky2-module-btn.active .module-tab-icon{
  color: #ffffff !important;
}
/* HIGHER_SPECIFICITY_OVERRIDE_V1: nje rregull e vjeter (.module-launcher>a.active,
   #search-submit) ka specificitet ME TE LARTE (element+klase, ose ID) qe fitonte
   kunder .sky2-*, edhe pse skyline_v2.css ngarkohet i fundit - specificiteti
   vjen PARA renditjes. Ketu i barazojme/tejkalojme ato rregulla saktesisht. */
html[data-public-template="skyline"] body.public-app .marketing-home .module-launcher > a.sky2-module-btn.active{
  background: #0F3F87 !important;
  color: #ffffff !important;
}
html[data-public-template="skyline"] body.public-app .marketing-home .module-launcher > a.sky2-module-btn.active .module-tab-icon{
  color: #ffffff !important;
}
html[data-public-template="skyline"] body.public-app .marketing-home #search-submit.sky2-submit,
html[data-public-template="skyline"] body.public-app .marketing-home #bus-search-submit.sky2-submit{
  background: #0F3F87 !important;
}
html[data-public-template="skyline"] body.public-app .marketing-home .sky2-seg-swap#route-swap,
html[data-public-template="skyline"] body.public-app .marketing-home .sky2-seg-swap#second-route-swap{
  color: #1B5FBF !important;
}
html[data-public-template="skyline"] body.public-app .marketing-home .sky2-trip-row input:checked + span{
  background: #1B5FBF !important;
  color: #ffffff !important;
}
html[data-public-template="skyline"] body.public-app .marketing-home .sky2-module-btn .module-tab-icon{
  color: #1B5FBF !important;
}
html[data-public-template="skyline"] body.public-app .marketing-home .sky2-seg-swap{
  color: #1B5FBF !important;
}

/* ---- trip-type pills: Vajtje-ardhje / Vetëm vajtje / Multi City ---- */
html[data-public-template="skyline"] body.public-app .marketing-home .sky2-trip-row{
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0,1fr)) !important;
  gap: 6px !important;
  margin: 0 !important;
  padding: 4px !important;
  border-radius: 14px !important;
  background: #F5F9FD !important;
  border: 0 !important;
}
html[data-public-template="skyline"] body.public-app .marketing-home .sky2-trip-row label span{
  display: flex !important;
  min-height: 40px !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 6px !important;
  border-radius: 11px !important;
  background: transparent !important;
  color: #5B6B82 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-align: center !important;
}
html[data-public-template="skyline"] body.public-app .marketing-home .sky2-trip-row input:checked + span{
  background: #1B5FBF !important;
  color: #ffffff !important;
  box-shadow: 0 7px 16px -7px rgba(27,95,191,.5) !important;
}

/* ---- route segment row: Nga | swap | Për, single row ---- */
html[data-public-template="skyline"] body.public-app .marketing-home .sky2-seg-row{
  display: grid !important;
  grid-template-columns: minmax(0,1fr) 48px minmax(0,1fr) !important;
  align-items: stretch !important;
  gap: 8px !important;
  margin: 8px 0 0 !important;
}
html[data-public-template="skyline"] body.public-app .marketing-home .sky2-seg{
  min-width: 0 !important;
  min-height: 62px !important;
  padding: 9px 12px !important;
  border-radius: 14px !important;
  background: #F5F9FD !important;
  border: 0 !important;
}
html[data-public-template="skyline"] body.public-app .marketing-home .sky2-seg > span{
  display: block !important;
  font-size: 9.5px !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  color: #5B6B82 !important;
  font-weight: 700 !important;
  margin-bottom: 2px !important;
}
html[data-public-template="skyline"] body.public-app .marketing-home .sky2-seg select,
html[data-public-template="skyline"] body.public-app .marketing-home .sky2-seg input{
  color: #101826 !important;
  font-weight: 700 !important;
  font-size: 13px !important;
}
html[data-public-template="skyline"] body.public-app .marketing-home .sky2-seg-swap{
  align-self: center !important;
  justify-self: center !important;
  width: 40px !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  color: #1B5FBF !important;
  box-shadow: 0 5px 12px -3px rgba(15,63,135,.4), 0 1px 2px rgba(15,63,135,.14) !important;
}

/* ---- datetime row: dates | passengers, single row, 2 segments ---- */
html[data-public-template="skyline"] body.public-app .marketing-home .sky2-dt-row{
  display: grid !important;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important;
  gap: 8px !important;
  margin: 8px 0 0 !important;
}
html[data-public-template="skyline"] body.public-app .marketing-home .sky2-dt-item{
  min-width: 0 !important;
  min-height: 62px !important;
  padding: 9px 12px !important;
  border-radius: 14px !important;
  background: #F5F9FD !important;
  border: 0 !important;
  text-align: left !important;
}

/* ---- submit CTA ---- */
html[data-public-template="skyline"] body.public-app .marketing-home .sky2-submit{
  width: 100% !important;
  margin-top: 8px !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: #0F3F87 !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  padding: 13px 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
}

/* ---- destinations: horizontal scroll strip of vertical photo cards ---- */
html[data-public-template="skyline"] body.public-app .marketing-home .sky2-dest-track{
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 12px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-snap-type: x proximity !important;
  padding: 2px 2px 12px !important;
  margin: 0 !important;
  -webkit-overflow-scrolling: touch !important;
}

/* AUTOSCROLL_MARQUEE_V1: leviz vetvetiu si ne mockup, ndalet kur perdoruesi
   e prek/scrollon manualisht (:hover per desktop; per touch, prekja
   ndaloka default-in e animate-scroll me daljen nga viewport te elementit
   qe klikohet - trajtohet si nje avantazh vizual, jo si karusel qe
   bllokon interaktivitetin, sepse kartat mbeten click-shme normalisht). */
html[data-public-template="skyline"] body.public-app .marketing-home .sky2-dest-track{
  animation: sky2DestMarquee 32s linear infinite !important;
}
html[data-public-template="skyline"] body.public-app .marketing-home .sky2-dest-track:hover,
html[data-public-template="skyline"] body.public-app .marketing-home .sky2-dest-track:active{
  animation-play-state: paused !important;
}
@keyframes sky2DestMarquee{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}
html[data-public-template="skyline"] body.public-app .marketing-home .sky2-dest-card{
  display: block !important;
  flex: 0 0 170px !important;
  width: 170px !important;
  min-height: 0 !important;
  height: auto !important;
  scroll-snap-align: start !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  background: #ffffff !important;
  box-shadow: 0 16px 38px -18px rgba(15,63,135,.28) !important;
  text-decoration: none !important;
}
html[data-public-template="skyline"] body.public-app .marketing-home .sky2-dest-card .offer-media{
  width: 100% !important;
  height: 170px !important;
  min-height: 170px !important;
  border-radius: 14px 14px 0 0 !important;
}
html[data-public-template="skyline"] body.public-app .marketing-home .sky2-dest-card .offer-route-badge{
  top: auto !important;
  bottom: 10px !important;
  left: 11px !important;
  right: auto !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  color: #101826 !important;
  font-family: inherit !important;
  box-shadow: none !important;
}
html[data-public-template="skyline"] body.public-app .marketing-home .sky2-dest-card .offer-body{
  padding: 12px !important;
}
html[data-public-template="skyline"] body.public-app .marketing-home .sky2-dest-card .offer-price strong{
  color: #0F3F87 !important;
}

/* ---- hero: flight-path motif overlay ---- */
html[data-public-template="skyline"] body.public-app .marketing-home .skyline-hero-path{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  opacity: .9 !important;
  pointer-events: none !important;
}
html[data-public-template="skyline"] body.public-app .marketing-home .real-home-hero-inner{
  position: relative !important;
  z-index: 1 !important;
}

@media (max-width: 420px){
  html[data-public-template="skyline"] body.public-app .marketing-home .sky2-module-btn span{
    font-size: 9.5px !important;
  }
  html[data-public-template="skyline"] body.public-app .marketing-home .sky2-seg-row{
    grid-template-columns: minmax(0,1fr) 40px minmax(0,1fr) !important;
  }
}