/* Header: mirrors jetpac-frontend HeaderV2 (headerv2/index.tsx, subcomponents.tsx) minus the
   language, currency, cart and account controls. Mobile bar below 768px and tablet bar below
   1280px, both opening the .jp-menu drawer; logo + search row and nav row at 1280px+.
   Both rows share the page container in default.hbs (max-w-[1440px], --jp-page-gutter side
   padding), so the header lines up with the content and footer at every width. */
.jp-header-top,
.jp-header-nav {
  box-sizing: border-box;
  max-width: 1440px;
  margin-inline: auto;
}
.jp-header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px var(--jp-page-gutter);
  background: #fff;
}
.jp-header-brand {
  display: flex;
  align-items: center;
  gap: 32px;
  min-width: 0;
}
.jp-logo-link,
.jp-logo-link img {
  display: block;
}
.jp-logo-link img {
  width: 99px;
  height: 24px;
  object-fit: contain;
}
.jp-destination-search,
.jp-menu-search {
  align-items: center;
  justify-content: space-between;
  height: 50px;
  box-sizing: border-box;
  padding: 10px 15px;
  border: 1px solid #cfd2f7;
  border-radius: 12px;
  background: #fff;
  color: #76808a;
  font: inherit;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  text-align: start;
  text-decoration: none;
  cursor: pointer;
}
.jp-destination-search {
  display: none;
  flex: 1;
}
.jp-menu-search {
  display: flex;
  width: 100%;
  margin-bottom: 16px;
}
.jp-search-button {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: #3320a2;
  color: #fff;
}
.jp-search-button img,
.jp-search-button svg {
  display: block;
  width: 20px;
  height: 20px;
}
.jp-header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
.jp-blog-search {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #1a1d21;
  cursor: pointer;
}
.jp-blog-search svg {
  width: 24px;
  height: 24px;
}
/* Explore eSIMs, styled like the frontend's Sign up button (.jetpac-cta-primary in its
   globals.css): the --header size in the desktop bar, the full size in the drawer footer. */
.jp-header-cta,
.jp-menu-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  background-color: #413cad;
  color: #fff;
  font-weight: 400;
  line-height: 1.5;
  text-decoration: none;
  white-space: nowrap;
}
.jp-header-cta:hover,
.jp-menu-cta:hover {
  background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2));
}
.jp-header-cta {
  display: none;
  height: 41px;
  padding: 10px 15px;
  border-radius: 12px;
  font-size: 14px;
}
.jp-menu > summary,
.jp-menu-group > summary,
.jp-nav-group > summary {
  list-style: none;
  cursor: pointer;
}
.jp-menu > summary::-webkit-details-marker,
.jp-menu-group > summary::-webkit-details-marker,
.jp-nav-group > summary::-webkit-details-marker {
  display: none;
}
.jp-menu > summary {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
}
.jp-menu-bars {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  width: 19px;
}
.jp-menu-bars span {
  height: 2px;
  border-radius: 6px;
  background: #3320a2;
}
.jp-menu-close {
  display: none;
  width: 24px;
  height: 24px;
}
.jp-menu[open] .jp-menu-bars {
  display: none;
}
.jp-menu[open] .jp-menu-close {
  display: block;
}
/* The open drawer has its own search bar, so the bar's search icon steps aside. */
.jp-header-actions:has(.jp-menu[open]) .jp-blog-search {
  display: none;
}
/* --site-header-h is the live header height + 16px (jetpac-header.js), so the drawer starts
   right under the header, promo bar included. */
.jp-menu-panel {
  position: fixed;
  z-index: 1;
  inset-inline: 0;
  top: calc(var(--site-header-h) - 16px);
  bottom: 0;
  box-sizing: border-box;
  padding: 0 var(--jp-page-gutter) calc(120px + env(safe-area-inset-bottom));
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #f5f5f5;
}
/* Pinned like the frontend's logged-out drawer footer; the panel's bottom padding keeps the
   last menu group scrollable above it. */
.jp-menu-footer {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  padding: 23px var(--jp-page-gutter) calc(23px + env(safe-area-inset-bottom));
  background: #fff;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.06);
}
.jp-menu-cta {
  width: 100%;
  height: 50px;
  padding: 0 24px;
  border-radius: 14px;
  font-size: 16px;
}
.jp-menu-group {
  padding: 16px 0;
  border-bottom: 1px solid #d9d9d9;
}
.jp-menu-group > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #1a1d21;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
}
.jp-menu-group > summary > span {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.jp-menu-chevron {
  flex: none;
  width: 24px;
  height: 24px;
  color: #1a1d21;
  transition: transform 150ms ease;
}
.jp-menu-group[open] .jp-menu-chevron {
  transform: rotate(180deg);
}
.jp-menu-links {
  display: grid;
  margin-top: 16px;
}
.jp-menu-links a,
.jp-nav-dropdown a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #1a1d21;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  text-decoration: none;
}
.jp-menu-links a {
  box-sizing: border-box;
  width: 100%;
  padding: 10px 15px;
  border-radius: 8px;
}
.jp-menu-links img,
.jp-nav-dropdown img {
  flex: none;
  width: 16px;
  height: 16px;
  object-fit: contain;
}
.jp-new-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 10px;
  border-radius: 8px;
  background: #e7e9f8;
  color: #3320a2;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
}
.jp-header-nav {
  display: none;
}
.jp-nav-group {
  position: relative;
}
.jp-nav-group > summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-bottom: 8px;
  color: #1a1d21;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
}
.jp-nav-chevron {
  flex: none;
  width: 16px;
  height: 16px;
  transition: transform 150ms ease;
}
.jp-nav-group[open] .jp-nav-chevron {
  transform: rotate(180deg);
}
.jp-nav-dropdown {
  position: absolute;
  z-index: 20;
  inset-inline-start: 0;
  top: 100%;
  display: grid;
  gap: 8px;
  min-width: 250px;
  box-sizing: border-box;
  margin-top: 4px;
  padding: 16px;
  background: #fff;
  border: 1px solid #cfd2f7;
  border-radius: 12px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
}
.jp-nav-dropdown a {
  white-space: nowrap;
}
/* Open mobile drawer: the frontend's full-screen drawer covers the promo bar and brings its own
   grey logo/close row, which the bar imitates here. */
@media (max-width: 767.98px) {
  .jp-header:has(.jp-menu[open]) .jp-promo-bar {
    display: none;
  }
  .jp-header:has(.jp-menu[open]) .jp-header-top {
    padding-block: 25px;
    background: #f5f5f5;
  }
}
@media (max-width: 1279.98px) {
  html:has(.jp-menu[open]),
  html:has(.jp-menu[open]) body {
    overflow: hidden;
  }
}
@media (min-width: 768px) {
  .jp-header-top {
    padding-block: 25px;
  }
  .jp-header-actions {
    gap: 16px;
  }
  .jp-menu-panel {
    padding-top: 16px;
  }
  .jp-menu-chevron {
    color: #76808a;
  }
  .jp-menu-links {
    gap: 4px;
    margin-top: 12px;
    padding-bottom: 4px;
  }
  .jp-menu-group .jp-new-badge {
    border-radius: 10px;
  }
}
@media (min-width: 1280px) {
  .jp-header-top {
    padding-block: 20px;
  }
  .jp-header-brand {
    width: 563px;
  }
  .jp-logo-link img {
    width: 147px;
    height: 35.712px;
  }
  .jp-destination-search {
    display: flex;
  }
  .jp-header-actions {
    height: 41px;
    gap: 0;
  }
  .jp-blog-search {
    display: none;
  }
  .jp-header-cta {
    display: inline-flex;
  }
  .jp-menu {
    display: none;
  }
  .jp-header-nav {
    display: flex;
    align-items: center;
    gap: 36px;
    padding: 10px var(--jp-page-gutter) 0;
  }
}

/* Footer: mirrors jetpac-frontend FooterV2. Stacked (logo, badges, link grid,
   social/legal) below 1280px; one row plus a right-aligned bottom row at 1280px+. */
.jp-footer {
  margin-top: auto;
  padding: 40px var(--jp-page-gutter);
  background: #f5f5f5;
  color: #1a1d21;
  font-family: var(--font-sans);
}
.jp-footer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 349px;
  margin: 0 auto;
}
.jp-footer-logo,
.jp-footer-logo img,
.jp-footer-store,
.jp-footer-store img {
  display: block;
}
.jp-footer-logo img {
  width: 127px;
  height: 31px;
}
.jp-footer-stores {
  order: 1;
  display: flex;
  align-items: center;
  gap: 7.086px;
  margin-top: 25px;
}
.jp-footer-store img {
  width: 98px;
  height: 31px;
}
.jp-footer-columns {
  order: 2;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 50px 20px;
  width: 100%;
  margin-top: 30px;
}
.jp-footer-heading {
  margin: 0 0 16px;
  color: #1a1d21;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
}
.jp-footer-column ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.jp-footer-column a,
.jp-footer-legal a {
  color: #76808a;
  font-weight: 400;
  text-decoration: none;
  transition: color 150ms ease;
}
.jp-footer-column a {
  font-size: 14px;
  line-height: 21px;
}
.jp-footer-column a:hover,
.jp-footer-legal a:hover {
  color: #1a1d21;
}
.jp-footer-bottom {
  order: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-top: 30px;
}
.jp-footer-social {
  display: flex;
  align-items: center;
  gap: 5px;
}
.jp-social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34.248px;
  height: 34.248px;
  border-radius: 17.124px;
  color: #1a1d21;
}
.jp-social-link svg {
  display: block;
  width: 17px;
  height: 17px;
}
.jp-footer-legal {
  display: flex;
  align-items: center;
  gap: 20px;
}
.jp-footer-legal a {
  font-size: 10px;
  line-height: 15px;
}
@media (min-width: 768px) {
  .jp-footer-inner {
    max-width: 672px;
  }
}
@media (min-width: 1280px) {
  /* Same 1440px container as the header and content row. */
  .jp-footer-inner {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "logo columns stores"
      "bottom bottom bottom";
    align-items: start;
    max-width: calc(1440px - 2 * var(--jp-page-gutter));
  }
  .jp-footer-logo {
    grid-area: logo;
    margin: 2px 60px 0 0;
  }
  .jp-footer-columns {
    grid-area: columns;
    display: flex;
    gap: 30px;
    margin-top: 0;
  }
  /* 160px columns, allowed to shrink so the badges never wrap just above 1280px. */
  .jp-footer-column {
    flex: 0 1 160px;
    min-width: 0;
  }
  .jp-footer-stores {
    grid-area: stores;
    margin-top: 0;
  }
  .jp-footer-store--apple img {
    width: 102.159px;
    height: 29.526px;
  }
  .jp-footer-store--google img {
    width: 103.22px;
    height: 32.034px;
  }
  .jp-footer-bottom {
    grid-area: bottom;
    justify-self: end;
    align-items: flex-end;
    gap: 16px;
    margin-top: 16px;
  }
  .jp-footer-legal a {
    font-size: 12px;
    line-height: 18px;
  }
}