.tiko-vp {
  --vp-height: 620px;
  --vp-gap: 12px;
  --vp-min: 240px;
  --vp-skew: -8deg;
  --vp-accent: #ffc400;
  --vp-overlay: #05070a;
  --vp-hover-zoom: 1.06;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.tiko-vp *,
.tiko-vp *::before,
.tiko-vp *::after {
  box-sizing: border-box;
}

.tiko-vp__track {
  display: flex;
  min-width: 0;
  height: var(--vp-height);
  gap: var(--vp-gap);
}

.tiko-vp__panel {
  position: relative;
  flex: 1 1 0;
  min-width: var(--vp-min);
  margin:
    var(--vp-mt, 0)
    var(--vp-mr, 0)
    var(--vp-mb, 0)
    var(--vp-ml, 0);
  text-decoration: none !important;
  color: inherit;
  z-index: var(--vp-z, 1);
  overflow: visible;
  transition:
    flex-grow .42s cubic-bezier(.2,.8,.2,1),
    filter .28s ease,
    transform .28s ease;
}

.tiko-vp__panel-inner {
  position: absolute;
  top: calc(var(--vp-extend-top, 0px) * -1);
  right: calc(var(--vp-extend-right, 0px) * -1);
  bottom: calc(var(--vp-extend-bottom, 0px) * -1);
  left: calc(var(--vp-extend-left, 0px) * -1);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.14);
  background: #11151c;
  isolation: isolate;
  clip-path: polygon(
    calc(var(--vp-clip-tl, 0%) + var(--vp-tl-x, 0%)) 0%,
    calc(100% - var(--vp-clip-tr, 0%) + var(--vp-tr-x, 0%)) 0%,
    calc(100% - var(--vp-right-mid, 0%)) var(--vp-break-y, 50%),
    calc(100% - var(--vp-clip-br, 0%) + var(--vp-br-x, 0%)) 100%,
    calc(var(--vp-clip-bl, 0%) + var(--vp-bl-x, 0%)) 100%,
    var(--vp-left-mid, 0%) var(--vp-break-y, 50%)
  );
}

.tiko-vp__shape--rectangle .tiko-vp__panel-inner {
  clip-path: inset(0);
}

/* True parallelograms use skew instead of clip-path.
   This preserves border-radius on all four corners. */
.tiko-vp__shape--parallelogram_forward .tiko-vp__panel-inner {
  clip-path: none;
  transform: skewX(calc(var(--vp-parallelogram-angle, 12deg) * -1));
  transform-origin: center;
}

.tiko-vp__shape--parallelogram_backward .tiko-vp__panel-inner {
  clip-path: none;
  transform: skewX(var(--vp-parallelogram-angle, 12deg));
  transform-origin: center;
}

/* Counter-skew image and content so they remain visually straight. */
.tiko-vp__shape--parallelogram_forward .tiko-vp__image {
  width: calc(var(--vp-img-scale, 1.12) * 118%);
  transform:
    skewX(var(--vp-parallelogram-angle, 12deg))
    translate(
      calc(-50% + var(--vp-img-x, 0%)),
      calc(-50% + var(--vp-img-y, 0%))
    );
}

.tiko-vp__shape--parallelogram_backward .tiko-vp__image {
  width: calc(var(--vp-img-scale, 1.12) * 118%);
  transform:
    skewX(calc(var(--vp-parallelogram-angle, 12deg) * -1))
    translate(
      calc(-50% + var(--vp-img-x, 0%)),
      calc(-50% + var(--vp-img-y, 0%))
    );
}

.tiko-vp__shape--parallelogram_forward .tiko-vp__content {
  transform:
    skewX(var(--vp-parallelogram-angle, 12deg))
    translate(var(--vp-content-x, 0), var(--vp-content-y, 0));
}

.tiko-vp__shape--parallelogram_backward .tiko-vp__content {
  transform:
    skewX(calc(var(--vp-parallelogram-angle, 12deg) * -1))
    translate(var(--vp-content-x, 0), var(--vp-content-y, 0));
}

.tiko-vp__shape--parallelogram_forward .tiko-vp__panel:hover .tiko-vp__image {
  transform:
    skewX(var(--vp-parallelogram-angle, 12deg))
    translate(
      calc(-50% + var(--vp-img-x, 0%)),
      calc(-50% + var(--vp-img-y, 0%))
    )
    scale(var(--vp-hover-zoom));
}

.tiko-vp__shape--parallelogram_backward .tiko-vp__panel:hover .tiko-vp__image {
  transform:
    skewX(calc(var(--vp-parallelogram-angle, 12deg) * -1))
    translate(
      calc(-50% + var(--vp-img-x, 0%)),
      calc(-50% + var(--vp-img-y, 0%))
    )
    scale(var(--vp-hover-zoom));
}

.tiko-vp--slanted .tiko-vp__panel,
.tiko-vp--overlap .tiko-vp__panel {
  transform: skewX(var(--vp-skew));
}

.tiko-vp--slanted .tiko-vp__panel-inner,
.tiko-vp--overlap .tiko-vp__panel-inner {
  clip-path: none;
}

.tiko-vp--overlap .tiko-vp__track {
  gap: 0;
}

.tiko-vp--overlap .tiko-vp__panel + .tiko-vp__panel {
  margin-left: calc(var(--vp-gap) * -1);
}

.tiko-vp__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.tiko-vp__image {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--vp-img-scale, 1.12) * 104%);
  height: calc(var(--vp-img-scale, 1.12) * 104%);
  min-width: 104%;
  min-height: 104%;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: var(--vp-focal-x, 50%) var(--vp-focal-y, 50%) !important;
  display: block;
  transform:
    translate(
      calc(-50% + var(--vp-img-x, 0%)),
      calc(-50% + var(--vp-img-y, 0%))
    );
  transition: transform .55s cubic-bezier(.2,.8,.2,1);
}

.tiko-vp--slanted .tiko-vp__image,
.tiko-vp--overlap .tiko-vp__image {
  transform:
    skewX(calc(var(--vp-skew) * -1))
    translate(
      calc(-50% + var(--vp-img-x, 0%)),
      calc(-50% + var(--vp-img-y, 0%))
    );
}

.tiko-vp__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: transparent;
}

.tiko-vp__overlay--none .tiko-vp__overlay { display: none; }

.tiko-vp__overlay--vertical .tiko-vp__overlay {
  background: linear-gradient(180deg, transparent 5%, rgba(5,7,10,.28) 52%, rgba(5,7,10,.94) 100%);
}

.tiko-vp__overlay--horizontal_left .tiko-vp__overlay {
  background: linear-gradient(90deg, rgba(5,7,10,.94) 0%, rgba(5,7,10,.45) 48%, transparent 100%);
}

.tiko-vp__overlay--horizontal_right .tiko-vp__overlay {
  background: linear-gradient(270deg, rgba(5,7,10,.94) 0%, rgba(5,7,10,.45) 48%, transparent 100%);
}

.tiko-vp__overlay--combined_left .tiko-vp__overlay {
  background:
    linear-gradient(90deg, rgba(5,7,10,.92) 0%, rgba(5,7,10,.32) 58%, transparent 100%),
    linear-gradient(180deg, transparent 18%, rgba(5,7,10,.78) 100%);
}

.tiko-vp__overlay--combined_right .tiko-vp__overlay {
  background:
    linear-gradient(270deg, rgba(5,7,10,.92) 0%, rgba(5,7,10,.32) 58%, transparent 100%),
    linear-gradient(180deg, transparent 18%, rgba(5,7,10,.78) 100%);
}

.tiko-vp__content {
  position: relative;
  z-index: 2;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 12px;
  transform:
    translate(
      var(--vp-content-x, 0),
      var(--vp-content-y, 0)
    );
}

.tiko-vp--slanted .tiko-vp__content,
.tiko-vp--overlap .tiko-vp__content {
  transform:
    skewX(calc(var(--vp-skew) * -1))
    translate(
      var(--vp-content-x, 0),
      var(--vp-content-y, 0)
    );
}


.tiko-vp__align--top .tiko-vp__content { justify-content: flex-start; }
.tiko-vp__align--center .tiko-vp__content { justify-content: center; }
.tiko-vp__align--bottom .tiko-vp__content { justify-content: flex-end; }

.tiko-vp__layout--full .tiko-vp__media { inset: 0; }
.tiko-vp__layout--full .tiko-vp__content {
  position: relative;
  z-index: 2;
  min-height: 100%;
}

.tiko-vp__layout--split_top .tiko-vp__panel-inner,
.tiko-vp__layout--split_bottom .tiko-vp__panel-inner {
  display: flex;
  flex-direction: column;
}

.tiko-vp__layout--split_top .tiko-vp__media,
.tiko-vp__layout--split_bottom .tiko-vp__media {
  position: relative;
  inset: auto;
  flex: 0 0 var(--vp-image-ratio, 48%);
  min-height: 0;
}

.tiko-vp__layout--split_top .tiko-vp__content,
.tiko-vp__layout--split_bottom .tiko-vp__content {
  position: relative;
  z-index: 2;
  flex: 1 1 auto;
  min-height: 0;
  background: var(--vp-text-bg, #060A11);
}

.tiko-vp__layout--split_bottom .tiko-vp__media { order: 2; }
.tiko-vp__layout--split_bottom .tiko-vp__content { order: 1; }

.tiko-vp__badge {
  align-self: flex-start;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--vp-accent);
  color: #080a0e;
  font-size: 11px;
  line-height: 1;
  font-weight: 900;
}

.tiko-vp__title {
  margin: 0 0 8px;
  color: #fff;
  font-family: "Manrope", sans-serif;
  font-size: 24px;
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -.03em;
}

.tiko-vp__description {
  max-width: 280px;
  margin: 0;
  color: #c9ced6;
  font-family: "Manrope", sans-serif;
  font-size: 14px;
  line-height: 1.5;
}

.tiko-vp__arrow {
  position: absolute;
  right: 24px;
  bottom: 24px;
  display: inline-flex;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--vp-accent);
  color: #080a0e;
  font-size: 20px;
  font-weight: 900;
  transition: transform .22s ease;
}

.tiko-vp--expand .tiko-vp__track:hover .tiko-vp__panel {
  filter: brightness(.72);
}

.tiko-vp--expand .tiko-vp__track .tiko-vp__panel:hover {
  flex-grow: 1.22;
  filter: brightness(1);
  z-index: 5;
}

.tiko-vp__panel:hover .tiko-vp__image {
  transform:
    translate(
      calc(-50% + var(--vp-img-x, 0%)),
      calc(-50% + var(--vp-img-y, 0%))
    )
    scale(var(--vp-hover-zoom));
}

.tiko-vp--slanted .tiko-vp__panel:hover .tiko-vp__image,
.tiko-vp--overlap .tiko-vp__panel:hover .tiko-vp__image {
  transform:
    skewX(calc(var(--vp-skew) * -1))
    translate(
      calc(-50% + var(--vp-img-x, 0%)),
      calc(-50% + var(--vp-img-y, 0%))
    )
    scale(var(--vp-hover-zoom));
}

.tiko-vp__panel:hover .tiko-vp__arrow {
  transform: translateX(4px);
}

/* Creative mosaic */
.tiko-vp--mosaic .tiko-vp__track {
  display: grid;
  overflow: visible;
  grid-template-columns: 1.05fr 1fr 1fr 1.05fr;
  grid-template-rows: 1fr 1fr;
  grid-template-areas:
    "city transfer transfer delivery"
    "city hourly corporate extras";
  gap: var(--vp-gap);
}

.tiko-vp--mosaic .tiko-vp__panel {
  min-width: 0;
  min-height: 0;
}

.tiko-vp--mosaic .tiko-vp__panel--city { grid-area: city; }
.tiko-vp--mosaic .tiko-vp__panel--transfer { grid-area: transfer; }
.tiko-vp--mosaic .tiko-vp__panel--delivery { grid-area: delivery; }
.tiko-vp--mosaic .tiko-vp__panel--hourly { grid-area: hourly; }
.tiko-vp--mosaic .tiko-vp__panel--corporate { grid-area: corporate; }
.tiko-vp--mosaic .tiko-vp__panel--extras { grid-area: extras; }

.tiko-vp--mosaic .tiko-vp__panel:hover {
  transform: translateY(-3px);
}

@media (max-width: 1024px) {
  .tiko-vp--mosaic .tiko-vp__track {
    height: auto;
    grid-template-columns: repeat(2, minmax(0,1fr));
    grid-template-rows: auto;
    grid-template-areas:
      "city transfer"
      "city delivery"
      "hourly corporate"
      "extras extras";
  }

  .tiko-vp--mosaic .tiko-vp__panel {
    min-height: 280px;
  }
}

@media (max-width: 767px) {
  .tiko-vp__track,
  .tiko-vp--mosaic .tiko-vp__track {
    height: auto;
  }

  .tiko-vp--mobile-stack .tiko-vp__track,
  .tiko-vp--mobile-stack.tiko-vp--mosaic .tiko-vp__track {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: none;
  }

  .tiko-vp--mobile-stack .tiko-vp__panel,
  .tiko-vp--mobile-stack.tiko-vp--mosaic .tiko-vp__panel {
    grid-area: auto !important;
    min-height: 280px;
    margin: 0;
  }

  .tiko-vp--mobile-scroll {
    overflow: hidden;
  }

  .tiko-vp--mobile-scroll .tiko-vp__track,
  .tiko-vp--mobile-scroll.tiko-vp--mosaic .tiko-vp__track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-bottom: 8px;
  }

  .tiko-vp--mobile-scroll .tiko-vp__track::-webkit-scrollbar {
    display: none;
  }

  .tiko-vp--mobile-scroll .tiko-vp__panel {
    flex: 0 0 84%;
    min-width: 84%;
    min-height: 300px;
    scroll-snap-align: start;
  }

  .tiko-vp__panel-inner {
    clip-path: none;
  }

  .tiko-vp__title {
    font-size: 21px;
  }

  .tiko-vp__description {
    font-size: 13px;
  }
}


/* Backward-compatible presets when focal sliders are not yet saved */
.tiko-vp__panel[style*="--vp-pos:left center"] .tiko-vp__image {
  object-position: 0% 50% !important;
}
.tiko-vp__panel[style*="--vp-pos:center center"] .tiko-vp__image {
  object-position: var(--vp-focal-x, 50%) var(--vp-focal-y, 50%) !important;
}
.tiko-vp__panel[style*="--vp-pos:right center"] .tiko-vp__image {
  object-position: 100% 50% !important;
}
.tiko-vp__panel[style*="--vp-pos:center top"] .tiko-vp__image {
  object-position: 50% 0% !important;
}
.tiko-vp__panel[style*="--vp-pos:center bottom"] .tiko-vp__image {
  object-position: 50% 100% !important;
}