/* DiveScanner site well — same left/right edges as Skyscanner.
   1100px max, 24px side gap on every screen. Loaded last so page-local
   780/920/980/1120/1180 columns cannot drift. Does not restyle controls. */
:root {
  --ds-home-well: 1100px;
  --ds-home-pad: 24px;
  --ds-home-gap: 28px;
  --ds-everywhere-inset: 16px;
}

html body .wrap,
html body .page-wrap,
html body .article-wrap,
html body .hero-inner,
html body .lb-wrap,
html body .trip-list,
html body .game-strip,
html body .ds-ghead,
html body .ds-gteaser,
html body .active-filters,
html body .advisor-box,
html body .results-header,
html body .state-box,
html body .ds-partner,
html body .visa-sec,
html body .faq-sec {
  max-width: var(--ds-home-well);
  width: min(var(--ds-home-well), calc(100% - 2 * var(--ds-home-pad)));
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
  padding-left: 0;
  padding-right: 0;
}

html body .search-card {
  max-width: var(--ds-home-well);
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

@media (max-width: 1024px) {
  html body .ds-msearch .hero-teaser,
  html body .ds-ghead,
  html body .ds-partner {
    max-width: var(--ds-home-well);
    width: min(var(--ds-home-well), calc(100% - 2 * var(--ds-home-pad)));
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 720px) {
  html body article.card,
  html body .article-content {
    padding-left: var(--ds-home-pad);
    padding-right: var(--ds-home-pad);
  }
}

/* === ds-home-glue-v69edge === */
/* One Skyscanner edge on every page: 24px side gap, 1100px well.
   Nav, airspace, hero, search card, featured, Everywhere, Play pill.
   Logo file has a baked transparent gutter (~39px of 118px native height).
   Footer already pulls the mark left with margin-left:-14px at 42px.
   Header uses the same ratio so the mask sits on the well, not the box. */
html body nav:not(.ds-banners):not(.ds-tabbar),
html body nav.ds-site-nav {
  position: relative;
  top: auto;
  padding-left: max(var(--ds-home-pad), calc((100% - var(--ds-home-well)) / 2));
  padding-right: max(var(--ds-home-pad), calc((100% - var(--ds-home-well)) / 2));
  box-sizing: border-box;
}

html body nav:not(.ds-banners) > a.logo .logo-img,
html body nav.ds-site-nav > a.logo .logo-img {
  height: 32px;
  max-height: 32px;
  width: auto;
  margin-left: calc(-1 * 39 / 118 * 32px);
}

@media (min-width: 1025px) {
  html body nav:not(.ds-banners) > a.logo .logo-img,
  html body nav.ds-site-nav > a.logo .logo-img {
    height: 56px;
    max-height: 56px;
    margin-left: calc(-1 * 39 / 118 * 56px);
  }
}

html body nav:not(.ds-banners) .nav-account-btn,
html body nav.ds-site-nav .nav-account-btn {
  padding-right: 0;
}

html body .airbar-in,
html body .airbar-open {
  padding-left: max(var(--ds-home-pad), calc((100% - var(--ds-home-well)) / 2));
  padding-right: max(var(--ds-home-pad), calc((100% - var(--ds-home-well)) / 2));
  box-sizing: border-box;
}

html body section.hero#search,
html body section.hero {
  padding-left: max(var(--ds-home-pad), calc((100% - var(--ds-home-well)) / 2));
  padding-right: max(var(--ds-home-pad), calc((100% - var(--ds-home-well)) / 2));
}

html body .ds-msearch .hero-teaser {
  margin-left: auto;
  margin-right: auto;
  max-width: var(--ds-home-well);
  width: min(var(--ds-home-well), calc(100% - 2 * var(--ds-home-pad)));
}

/* Play chip: content-width, flush to the well's left edge. Not centered. */
html body .ds-app {
  display: none;
}
html body .ds-apps-duo {
  justify-content: flex-start;
}
html body .ds-apps-duo-cell {
  flex: 0 0 auto;
  width: max-content;
  max-width: 100%;
  justify-content: flex-start;
  gap: 12px;
}
html body .ds-apps-duo-left {
  flex: 0 0 auto;
}
html body .ds-apps-duo-copy span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* === ds-home-glue-v70inline === */
/* Search Everywhere copy, CTA, and glued rec chip share one 16px inset
   from the photo card. Loaded last so 28/18/14/12/10 leftovers cannot drift. */
html body .ds-everywhere.ds-everywhere.ds-everywhere.ds-everywhere.ds-everywhere.ds-everywhere.ds-everywhere.ds-everywhere .ds-everywhere-in,
html body .ds-everywhere.ds-everywhere.ds-everywhere.ds-everywhere.ds-everywhere.ds-everywhere.ds-everywhere.ds-everywhere:has(> .dg-advice) .ds-everywhere-in {
  padding-left: var(--ds-everywhere-inset);
  padding-right: var(--ds-everywhere-inset);
  align-items: flex-start;
}
html body .ds-everywhere.ds-everywhere.ds-everywhere.ds-everywhere.ds-everywhere.ds-everywhere.ds-everywhere.ds-everywhere .ds-everywhere-cta {
  margin-left: 0;
  margin-right: 0;
  align-self: flex-start;
}
html body .ds-everywhere.ds-everywhere.ds-everywhere.ds-everywhere.ds-everywhere.ds-everywhere.ds-everywhere.ds-everywhere > section.dg-advice,
html body .ds-everywhere.ds-everywhere.ds-everywhere.ds-everywhere.ds-everywhere.ds-everywhere.ds-everywhere.ds-everywhere > .dg-advice {
  left: var(--ds-everywhere-inset);
  right: var(--ds-everywhere-inset);
  padding-top: 14px;
  padding-bottom: 14px;
}

/* === ds-home-glue-v72chiptop === */
/* Phone rec chip: kicker was glued to the rim (10px pad, 9px caps).
   16px top air inside the chip. Photo bottom pad grows with the chip
   so Search Everywhere stays above it. Same <a>. */
@media (max-width: 767px) {
  html body .ds-everywhere.ds-everywhere.ds-everywhere.ds-everywhere.ds-everywhere.ds-everywhere.ds-everywhere.ds-everywhere:has(> .dg-advice) .ds-everywhere-in,
  html body .ds-everywhere.ds-everywhere.ds-everywhere.ds-everywhere.ds-everywhere.ds-everywhere.ds-everywhere.ds-everywhere .ds-everywhere-in {
    min-height: 200px;
    padding-bottom: 100px;
  }
  html body .ds-everywhere.ds-everywhere.ds-everywhere.ds-everywhere.ds-everywhere.ds-everywhere.ds-everywhere.ds-everywhere > section.dg-advice,
  html body .ds-everywhere.ds-everywhere.ds-everywhere.ds-everywhere.ds-everywhere.ds-everywhere.ds-everywhere.ds-everywhere > .dg-advice {
    padding-top: 16px;
    padding-right: 12px;
    padding-bottom: 12px;
    padding-left: 12px;
    gap: 6px;
    justify-content: flex-start;
    height: auto;
    min-height: 0;
    max-height: none;
  }
  html body .ds-everywhere.ds-everywhere.ds-everywhere.ds-everywhere.ds-everywhere.ds-everywhere.ds-everywhere.ds-everywhere > section.dg-advice .dg-advice-kicker,
  html body .ds-everywhere.ds-everywhere.ds-everywhere.ds-everywhere.ds-everywhere.ds-everywhere.ds-everywhere.ds-everywhere > .dg-advice .dg-advice-kicker {
    line-height: 1.2;
  }
}

/* === ds-home-glue-v73playfit === */
/* Phone Play badge was shoved 74px past the chip because copy could not
   shrink. Badge stays inside the card, full badge visible, copy yields. */
html body .ds-apps-duo-cta {
  flex: 0 0 auto;
  min-width: 0;
}
html body .ds-apps-duo-cta img {
  height: 48px;
  width: auto;
  max-width: 130px;
  object-fit: contain;
  display: block;
}
@media (max-width: 767px) {
  html body .ds-apps-duo-cell {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    align-items: center;
  }
  html body .ds-apps-duo-left {
    flex: 1 1 auto;
    min-width: 0;
  }
  html body .ds-apps-duo-copy {
    min-width: 0;
  }
  html body .ds-apps-duo-copy strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  html body .ds-apps-duo-copy span {
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
  }
  html body .ds-apps-duo-cta img {
    height: 40px;
    max-width: 108px;
  }
}

/* === ds-home-glue-v74goarrow === */
/* Kiwi/Skyscanner go-chevron on compact rec and featured CTAs, every
   width including landscape. Same <a> / span. Search Everywhere and
   Sign in stay text. */
html body .ds-everywhere.ds-everywhere.ds-everywhere.ds-everywhere.ds-everywhere.ds-everywhere.ds-everywhere.ds-everywhere > section.dg-advice .dg-advice-list a,
html body .ds-everywhere.ds-everywhere.ds-everywhere.ds-everywhere.ds-everywhere.ds-everywhere.ds-everywhere.ds-everywhere > .dg-advice .dg-advice-list a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 50%;
  background: #0b3a66;
  color: #fff;
  font-size: 0;
  line-height: 0;
  text-indent: 0;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  flex: 0 0 36px;
}
html body .ds-everywhere.ds-everywhere.ds-everywhere.ds-everywhere.ds-everywhere.ds-everywhere.ds-everywhere.ds-everywhere > section.dg-advice .dg-advice-list a::after,
html body .ds-everywhere.ds-everywhere.ds-everywhere.ds-everywhere.ds-everywhere.ds-everywhere.ds-everywhere.ds-everywhere > .dg-advice .dg-advice-list a::after {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  margin: 0;
  border-style: solid;
  border-color: #fff;
  border-width: 2.5px 2.5px 0 0;
  transform: rotate(45deg) translateX(-1px);
}
@media (min-width: 768px) {
  html body .ds-everywhere.ds-everywhere.ds-everywhere.ds-everywhere.ds-everywhere.ds-everywhere.ds-everywhere.ds-everywhere > section.dg-advice .dg-advice-list li.is-on,
  html body .ds-everywhere.ds-everywhere.ds-everywhere.ds-everywhere.ds-everywhere.ds-everywhere.ds-everywhere.ds-everywhere > .dg-advice .dg-advice-list li.is-on {
    flex-wrap: nowrap;
    align-items: center;
  }
  html body .ds-everywhere.ds-everywhere.ds-everywhere.ds-everywhere.ds-everywhere.ds-everywhere.ds-everywhere.ds-everywhere > section.dg-advice .dg-advice-list a,
  html body .ds-everywhere.ds-everywhere.ds-everywhere.ds-everywhere.ds-everywhere.ds-everywhere.ds-everywhere.ds-everywhere > .dg-advice .dg-advice-list a {
    position: static;
    top: auto;
    right: auto;
    transform: none;
    margin-left: auto;
  }
}
html body .fteaser,
html body .ds-explore .fteaser {
  position: relative;
}
html body .fteaser-body {
  padding-right: 56px;
  box-sizing: border-box;
}
html body .fteaser .fteaser-cta,
html body .ds-explore .fteaser-cta,
html body .ds-ecta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin: 0;
  padding: 0;
  border-radius: 50%;
  background: #0b3a66;
  color: #fff;
  font-size: 0;
  line-height: 0;
  text-decoration: none;
  flex: 0 0 36px;
  overflow: hidden;
}
html body .fteaser .fteaser-cta,
html body .ds-explore .fteaser-cta {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
}
html body .fteaser .fteaser-cta::after,
html body .ds-explore .fteaser-cta::after,
html body .ds-ecta::after {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  border-style: solid;
  border-color: #fff;
  border-width: 2.5px 2.5px 0 0;
  transform: rotate(45deg) translateX(-1px);
}

/* === ds-home-glue-v77skyrow === */
/* Skyscanner row: 22px go on the text line, cards short and full-width.
   Labels stay. Rec/featured go stay 36px. Search Everywhere, Sign in,
   Compare trips stay words. Back is a text row, not a filled circle. */
html body a.lb-cta,
html body a.lb-cta2 {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: auto;
  height: 22px;
  margin: 0;
  padding: 0 26px 0 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #0b3a66;
  font-size: 14px;
  line-height: 22px;
  font-weight: 800;
  text-decoration: none;
  overflow: hidden;
  white-space: nowrap;
  flex: 0 1 auto;
  box-sizing: border-box;
}
html body a.lb-cta::after,
html body a.lb-cta2::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 22px;
  height: 22px;
  margin: 0;
  border: 0;
  border-radius: 50%;
  background-color: #0b3a66;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'><path fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M8 6l6 5-6 5'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 22px 22px;
  transform: none;
}
html body .lb-ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
}
html body .lb-grid {
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}
html body .lb-boat {
  position: relative;
  padding: 10px 12px;
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
}
html body .lb-boat h3 {
  font-size: 16px;
  line-height: 1.25;
  margin: 0 0 2px;
}
html body .lb-op {
  margin: 0 0 6px;
  font-size: 12px;
}
html body .lb-facts {
  margin: 0 0 6px;
}
html body .lb-facts li {
  display: none;
  border-bottom: 0;
}
html body .lb-facts li:first-child,
html body .lb-facts li:last-child {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 2px 0;
  font-size: 12px;
  line-height: 1.3;
}
html body .lb-facts li b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
html body .lb-boat > a.lb-cta {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  min-width: 0;
  margin: 0;
  top: auto;
  right: auto;
  position: static;
}
@media (max-width: 700px) {
  html body .lb-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    overflow: visible;
    scroll-snap-type: none;
    margin: 12px 0 8px;
    padding: 0;
    gap: 8px;
  }
  html body .lb-grid .lb-boat {
    flex: none;
    width: auto;
  }
  html body .lb-swipe-hint {
    display: none;
  }
}

html body .grid {
  gap: 8px;
}
html body .grid > a.card {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  padding: 8px 36px 8px 10px;
  border-radius: 12px;
  box-sizing: border-box;
}
html body .grid > a.card img {
  width: 72px;
  height: 72px;
  border-radius: 8px;
  object-fit: cover;
  flex: none;
}
html body .grid > a.card .body {
  min-width: 0;
  flex: 1 1 auto;
  padding: 0;
}
html body .grid > a.card .date {
  font-size: 11px;
  margin: 0 0 2px;
}
html body .grid > a.card h2,
html body .grid > a.card h3 {
  font-size: 15px;
  line-height: 1.25;
  margin: 0;
}
html body .grid > a.card p,
html body .grid > a.card .chips {
  display: none;
}
html body .grid > a.card::after {
  content: "";
  position: absolute;
  right: 10px;
  top: 50%;
  width: 22px;
  height: 22px;
  margin-top: -11px;
  border-radius: 50%;
  background-color: #0b3a66;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'><path fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M8 6l6 5-6 5'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 22px 22px;
  pointer-events: none;
}

html body .feat-wrap {
  margin: 8px 0 16px;
}
html body .feat .feat-img {
  min-height: 160px;
}
html body .feat .feat-body {
  padding: 16px 16px;
}
html body .feat h2 {
  font-size: 20px;
  margin: 0 0 8px;
}
html body .feat-nav {
  top: 80px;
  width: 28px;
  height: 28px;
  font-size: 18px;
}
@media (max-width: 640px) {
  html body .feat .feat-img {
    min-height: 140px;
  }
  html body .feat-nav {
    top: 70px;
    width: 28px;
    height: 28px;
  }
}

html body a.lb-cta:hover,
html body a.lb-cta2:hover {
  background: transparent;
  color: #0b3a66;
}
html body a.lb-cta:hover::after,
html body a.lb-cta2:hover::after,
html body .grid > a.card:hover::after {
  background-color: #0d3d6b;
}
html body a.lb-cta:focus-visible,
html body a.lb-cta2:focus-visible,
html body a.ds-back:focus-visible,
html body .grid > a.card:focus-visible {
  outline: 2px solid #42f5e6;
  outline-offset: 2px;
}

/* Back: Booking/Skyscanner text row, same line as the copy. Not a block. */
html body a.ds-back {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  width: auto;
  height: 22px;
  min-height: 22px;
  margin: 8px 24px 10px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #0d3d6b;
  box-sizing: border-box;
  font-size: 14px;
  line-height: 22px;
  font-weight: 800;
  text-decoration: none;
  overflow: visible;
  gap: 4px;
}
html body a.ds-back svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  flex: 0 0 auto;
}
html body a.ds-back .ds-back-lab {
  position: static;
  width: auto;
  height: auto;
  padding: 0;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: nowrap;
  border: 0;
  font-size: 14px;
  line-height: 22px;
  color: inherit;
}
@media (min-width: 1025px) {
  html body a.ds-back {
    margin: 8px 0 10px;
  }
}

/* === ds-home-glue-v85rec === */
/* Match strip sits above Search Everywhere. Rec chip stays glued on the
   photo bottom. Do not hide .dg-advice. */
html body .dg-match + .ds-everywhere.ds-everywhere.ds-everywhere.ds-everywhere.ds-everywhere.ds-everywhere.ds-everywhere.ds-everywhere {
  margin-top: 12px;
}

/* === ds-home-glue-v81gamepad === */
/* Game teaser card: the well reset zeroed left/right pad, so kick/title/
   copy/CTA sat on the teal rim. Restore inner card pad. Outer well width
   is unchanged. Preview iframe still fills .ds-gt-shot. Phone overlay,
   Play chip, and header are untouched. All three rotator games share this. */
html body .ds-gteaser {
  padding-top: 18px;
  padding-right: 24px;
  padding-bottom: 18px;
  padding-left: 24px;
}
@media (max-width: 1024px) {
  html body .ds-gteaser {
    padding-top: 14px;
    padding-right: 24px;
    padding-bottom: 14px;
    padding-left: 24px;
  }
}

/* Dark shortcut chips. Desktop + landscape tablet only.
   Phone / portrait tablet ≤1024 keep the existing square tiles.
   Five chips share the 1100px well: short (~72px) and slim (flex 1 1 0). */
@media (min-width: 1025px) {
  html body nav.ds-banners {
    display: block;
    box-sizing: border-box;
  }
  html body nav.ds-banners .ds-banners-row {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: flex-start;
    gap: 12px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: visible;
    grid-template-columns: none;
  }
  html body nav.ds-banners .ds-banner {
    display: flex;
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    max-width: none;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    box-sizing: border-box;
    height: 72px;
    min-height: 72px;
    max-height: 72px;
    aspect-ratio: auto;
    padding: 0 16px;
    font-size: 15px;
    gap: 10px;
  }
  html body nav.ds-banners .ds-banner svg {
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
  }
}

/* Search row: 72px fields, Compare 84×72, inside the well.
   Desktop + landscape tablet only. Phone unchanged. Controls stay in place. */
@media (min-width: 1025px) {
  html body #search .hb {
    align-items: stretch;
    justify-content: flex-start;
    gap: 12px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
  html body #search .hb-bar {
    min-height: 72px;
    height: 72px;
    min-width: 0;
    border-radius: 12px;
  }
  html body #search .hb-seg {
    min-height: 72px;
    height: 72px;
    min-width: 0;
    padding: 10px 28px 10px 16px;
    gap: 2px;
    justify-content: center;
  }
  html body #search .hb-lab {
    font-size: 11px;
    letter-spacing: .7px;
    line-height: 1.1;
  }
  html body #search .hb-val {
    font-size: 16px;
    line-height: 1.15;
  }
  html body #search .hb-opt {
    display: none;
  }
  html body #search .hb-caret {
    top: 50%;
    right: 12px;
    margin-top: -6px;
    font-size: 11px;
  }
  html body #search .hb-seg[aria-expanded="true"] .hb-caret {
    margin-top: -6px;
  }
  html body #search .hb-go {
    width: 84px;
    height: 72px;
    min-width: 84px;
    min-height: 72px;
    flex: 0 0 84px;
    padding: 12px 16px;
    gap: 0;
    font-size: 0;
    line-height: 0;
    border-radius: 12px;
    box-shadow: 0 12px 28px rgba(2, 11, 32, .28);
  }
  html body #search .hb-go i {
    font-size: 22px;
    line-height: 1;
  }
}

/* Phone subpages: Back, H1 and copy share the 24px well line.
   Articles hub, article pages, games hub, deals/offers. Desktop unchanged. */
@media (max-width: 720px) {
  html body:has(#agrid) a.ds-back,
  html body:has(.atopics) a.ds-back,
  html body:has(.play) a.ds-back,
  html body:has(#offers) a.ds-back {
    margin-left: 0;
    margin-right: 0;
  }
  html body:has(#agrid) h1,
  html body:has(.atopics) h1,
  html body:has(.play) h1,
  html body:has(#offers) .hero h1 {
    font-family: Inter, Arial, sans-serif;
    font-size: 28px;
    line-height: 1.2;
    letter-spacing: -.5px;
  }
  html body:has(#offers) section.hero {
    padding-left: 0;
    padding-right: 0;
  }
}