/* ============================================================
   ESDIAC Data — Data Top-Up Page
   style.css  |  Mobile-first  |  Urbanist font
   ============================================================ */


/* ============================================================
   1. CSS RESET & BASE
   ============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  overflow-x: hidden;
}


body {
  /* Urbanist throughout the whole site */
  font-family: 'Urbanist', sans-serif;
  color: #1a1a2e;
  background-color: #F7F7F7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a {
  text-decoration: none;
  color: inherit;
}

ul {
  list-style: none;
}

img {
  display: block;
  max-width: 100%;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
}


/* ============================================================
   2. NAVBAR
   Structure:
     .navbar              → sticky outer wrapper (page bg, padding)
     .navbar__container   → the floating white card (rounded, bordered)
   ============================================================ */

/* ---
   Outer wrapper: sticky, matches page background.
   The vertical + horizontal padding creates the visible
   space between the card and the viewport edges.
--- */
.navbar {
  background-color: #ffffff;
  /* Responsive padding: small on mobile, grows on larger screens */
  padding: 0.75rem 1rem;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
}

/* ---
   The floating card:
   - white background + subtle border + rounded corners
   - max-width mirrors the Figma value (1320px)
   - min-height uses rem so it scales with root font size
   - internal padding uses rem (converted from Figma px values)
     top/bottom: 15px → 0.9375rem
     left: 14px → 0.875rem  |  right: 8px → 0.5rem
   - display:flex handles the inner layout
--- */
.navbar__container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;          /* anchor for mobile dropdown */

  width: 100%;
  max-width: 1320px;
  margin: 0 auto;

  min-height: 4.375rem;        /* 70px in rem */
  padding: 0.9375rem 0.875rem; /* 15px 14px — symmetric; Figma's 8px right
                                   was the inner item gap, not card padding */

  background-color: #ffffff;
  border: 0.5px solid #e0e0e0;
  border-radius: 1.25rem;      /* 20px in rem */
}


/* --- Left group: logo + nav tightly together --- */
.navbar__left {
  display: flex;
  align-items: center;
  gap: 2rem; /* space between logo and first nav link */
}

/* --- Logo --- */
.navbar__logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.navbar__logo-img {
  width: 2.25rem;   /* 36px */
  height: 2.25rem;
  object-fit: contain;
}

.navbar__logo-text {
  font-size: clamp(0.9rem, 1.5vw, 1.1rem);
  font-weight: 700;
  color: #1a1a2e;
  white-space: nowrap;
}


/* --- Hamburger toggle (mobile only) --- */
.navbar__toggle {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 1.5rem;
  height: 1.125rem;
  padding: 0;
  flex-shrink: 0;
}

.navbar__toggle-bar {
  display: block;
  width: 100%;
  height: 2px;
  background-color: #1a1a2e;
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}


/* --- Nav links (hidden on mobile, shown as dropdown) --- */
.navbar__nav {
  display: none;
  flex-direction: column;

  /* Position below the card, aligned to its edges */
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  right: 0;

  background-color: #ffffff;
  border: 0.5px solid #e0e0e0;
  border-radius: 1.25rem;
  padding: 1rem 0.875rem;
  z-index: 999;

  /* Soft shadow so it floats above content */
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

/* Open state toggled via JS */
.navbar__nav.is-open {
  display: flex;
}

.navbar__nav-list {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.navbar__nav-item {
  width: 100%;
}

.navbar__nav-link {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.625rem 0.5rem;
  font-size: 0.9375rem;
  font-weight: 500;
  color: #333333;
  border-radius: 0.5rem;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.navbar__nav-link:hover {
  background-color: #f0f0f5;
  color: #1a1a2e;
}

/* Dropdown chevron */
.navbar__dropdown-icon {
  flex-shrink: 0;
  transition: transform 0.2s ease;
}


/* --- Right-side actions (hidden on mobile) --- */
.navbar__actions {
  display: none;
  align-items: center;
  gap: 1rem;
  flex-shrink: 0;
  margin-left: auto; /* pushes actions to the far right */
}

/* Language selector — pill container matching Figma spec */
.navbar__lang {
  display: flex;
  align-items: center;
  gap: 0.25rem;                /* 4px gap between text, chevron, flag */

  /* Padding: top/bottom 8px, right 8px, left 12px → rem */
  padding: 0.5rem 0.5rem 0.5rem 0.75rem;

  /* Pill shape: 42px radius → large enough value in rem */
  border-radius: 2.625rem;

  border: 0.75px solid #d0d0d8;
  background-color: #f8f8fa;

  font-size: 0.875rem;
  font-weight: 500;
  color: #333333;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  white-space: nowrap;
}

.navbar__lang:hover {
  background-color: #efeff4;
  border-color: #b8b8c8;
}

.navbar__lang-text {
  font-size: 0.9375rem;
  font-weight: 600;
  font-family: 'Urbanist', sans-serif;
  color: #1a1a2e;
}

/* Flag: circular crop to match the design */
.navbar__flag {
  width: 1.75rem;   /* ~28px circular flag */
  height: 1.75rem;
  object-fit: cover;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Get the app link */
.navbar__get-app {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #333333;
  padding: 0.25rem 0.375rem;
  border-radius: 0.375rem;
  transition: background-color 0.2s ease;
  white-space: nowrap;
}

.navbar__get-app:hover {
  background-color: #f0f0f5;
}

.navbar__app-icon {
  flex-shrink: 0;
  color: #555555;
}

/* Log in button */
.navbar__login-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.625rem 1.375rem;
  background-color: #071738;
  color: #ffffff;
  font-family: 'Urbanist', sans-serif;
  font-size: clamp(0.875rem, 1.2vw, 0.9375rem);
  font-weight: 600;
  border-radius: 3.125rem; /* 50px pill shape */
  transition: background-color 0.2s ease, transform 0.1s ease;
  white-space: nowrap;
}

.navbar__login-btn:hover {
  background-color: #0e2147;
  transform: translateY(-1px);
}

.navbar__login-btn:active {
  transform: translateY(0);
}


/* Push content below the fixed navbar (~70px card + padding) */
main {
  padding-top: 5.5rem;
}

/* ============================================================
   3. HERO / PAGE HEADER SECTION
   ============================================================ */

.hero {
  background-color: #F7F7F7;
  padding: 3rem 1rem 2.5rem;
}

.hero__container {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* "Data Top-Up" heading — Figma spec:
   font-size: 60px | weight: 700 | line-height: 120% | color: #071738
   Using clamp() so it scales down on smaller screens */
.hero__title {
  font-family: 'Urbanist', sans-serif;
  font-weight: 700;
  font-size: clamp(2rem, 5vw, 3.75rem); /* 3.75rem = 60px */
  line-height: 1.2;                      /* 120% */
  letter-spacing: 0;
  color: #071738;
  margin-bottom: 1rem;
}

/* Subtitle — Figma spec:
   font-size: 16px | weight: 400 | line-height: 140% | color: #090909 */
.hero__subtitle {
  font-family: 'Urbanist', sans-serif;
  font-weight: 400;
  font-size: 1rem;         /* 16px */
  line-height: 1.4;        /* 140% */
  letter-spacing: 0;
  color: #090909;
}

/* ============================================================
   4. COUNTRY CARDS SECTION
   ============================================================ */

.countries {
  background-color: #ffffff;
  padding: 2rem 1rem 3rem;
}

.countries__container {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* ---
   Grid: 1 column mobile → 2 tablet → 3 desktop
   Cards fill equal columns, gap between them
--- */
.countries__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.875rem; /* gap between cards */
}

/* ---
   Individual card — Figma spec:
   background: #F7F5F3 | border-radius: 10px | border: 1.33px
   internal padding creates the ~71px height
--- */
.country-card {
  display: flex;
  align-items: center;
  justify-content: space-between;

  background-color: #F7F5F3;
  border: 1.33px solid #e8e4e0;
  border-radius: 0.625rem;     /* 10px */

  /* Vertical padding sets the card height naturally */
  padding: 1rem 1.25rem;
  gap: 0.5rem;

  text-decoration: none;
  transition: box-shadow 0.2s ease, transform 0.15s ease;
  cursor: pointer;
}

.country-card:hover {
  box-shadow: 0 4px 16px rgba(7, 23, 56, 0.08);
  transform: translateY(-2px);
}

/* Left side: flag + text stacked */
.country-card__info {
  display: flex;
  align-items: center;
  gap: 1.5rem; /* 24px gap between flag and text */
  flex: 1;
  min-width: 0;
}

/* Flag: rectangular, fixed size */
.country-card__flag {
  width: 2.75rem;  /* ~44px */
  height: 1.875rem; /* ~30px */
  object-fit: cover;
  border-radius: 4px;
  flex-shrink: 0;
  /* Subtle shadow so flag pops off the card */
  box-shadow: 0 1px 4px rgba(0,0,0,0.12);
}

/* Text block: country name + network */
.country-card__text {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}

/* Country name — Figma spec:
   font-weight: 600 | font-size: 20px | line-height: 140% | color: #071738 */
.country-card__name {
  font-family: 'Urbanist', sans-serif;
  font-weight: 600;
  font-size: clamp(1rem, 2vw, 1.25rem); /* 20px at desktop */
  line-height: 1.4;
  color: #071738;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Network text — Figma spec:
   font-weight: 400 | font-size: 16px | line-height: 140% | color: #6E6E6E */
.country-card__network {
  font-family: 'Urbanist', sans-serif;
  font-weight: 400;
  font-size: 1rem; /* 16px */
  line-height: 1.4;
  color: #6E6E6E;
}

/* Arrow circle — Figma spec:
   border: 1px solid #071738, filled dark navy, white arrow */
.country-card__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;   /* 36px circle */
  height: 2.25rem;
  border-radius: 50%;
  border: 1px solid #071738;
  background-color: #071738;
  color: #ffffff;
  flex-shrink: 0;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

.country-card:hover .country-card__arrow {
  background-color: #0e2147;
  border-color: #0e2147;
  transform: translateX(2px);
}

/* ---
   "View all countries" CTA button
--- */
.countries__cta {
  display: flex;
  justify-content: center;
  margin-top: 2.5rem;
}

.countries__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;               /* 8px gap */

  /* Figma: padding 16px top/bottom, 24px left/right */
  padding: 1rem 1.5rem;

  /* Figma: min-width ~374px but let content breathe responsively */
  min-width: clamp(200px, 50vw, 23.375rem); /* 374px max */
  min-height: 4.5625rem;     /* 73px */

  background-color: #071738;
  color: #ffffff;
  font-family: 'Urbanist', sans-serif;
  font-weight: 600;
  font-size: 1.125rem;       /* slightly larger to fill the 73px height */

  border: 1px solid #071738;
  border-radius: 2.5rem;     /* 40px */

  white-space: nowrap;
  transition: background-color 0.2s ease, transform 0.15s ease;
}

.countries__btn:hover {
  background-color: #0e2147;
  transform: translateY(-2px);
}

.countries__btn:active {
  transform: translateY(0);
}

/* ============================================================
   5. NETWORKS SECTION
   ============================================================ */

.networks {
  background-color: #ffffff;
  padding: 2rem 1rem;
}

.networks__container {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* --- Breadcrumb --- */
.breadcrumb__list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.375rem;
  list-style: none;
  margin-bottom: 1.5rem;
}

.breadcrumb__link {
  font-family: 'Urbanist', sans-serif;
  font-size: 0.9375rem;
  font-weight: 400;
  color: #3E4554;
  transition: color 0.2s ease;
}

.breadcrumb__link:hover {
  color: #071738;
}

.breadcrumb__item--sep {
  color: #3E4554;
  display: flex;
  align-items: center;
}

.breadcrumb__item--active {
  font-family: 'Urbanist', sans-serif;
  font-size: 0.9375rem;
  font-weight: 400;
  color: #3E4554;
}

/* --- Two-panel layout --- */
.networks__panels {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* --- Left panel --- */
.networks__left-panel {
  background-color: #ffffff;
  border: 1px solid #E7E7E7;
  border-radius: 0.75rem;
  padding: 1rem;
  width: 100%;
}

/* Search bar */
.networks__search {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid #E7E7E7;
  border-radius: 0.5rem;
  padding: 0.625rem 0.875rem;
  margin-bottom: 1rem;
  color: #6E6E6E;
}

.networks__search-input {
  border: none;
  outline: none;
  background: transparent;
  font-family: 'Urbanist', sans-serif;
  font-size: 0.9375rem;
  color: #071738;
  width: 100%;
}

.networks__search-input::placeholder {
  color: #6E6E6E;
}

/* Country list */
.networks__country-list {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.networks__country-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.625rem 0.75rem;
  border-radius: 0.5rem;
  transition: background-color 0.2s ease;
}

.networks__country-item:hover {
  background-color: #F7F5F3;
}

.networks__country-item--active {
  background-color: #F7F5F3;
}

.networks__country-info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.networks__country-flag {
  width: 1.75rem;
  height: 1.25rem;
  object-fit: cover;
  border-radius: 3px;
  flex-shrink: 0;
}

.networks__country-name {
  font-family: 'Urbanist', sans-serif;
  font-size: 1rem;
  font-weight: 500;
  color: #071738;
}

/* Arrow buttons */
.networks__country-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background-color: #6E6E6E;
  color: #ffffff;
  flex-shrink: 0;
  transition: background-color 0.2s ease;
}

.networks__country-arrow--active {
  background-color: #071738;
}

/* --- Right panel --- */
.networks__right-panel {
  background-color: #ffffff;
  border: 1px solid #E7E7E7;
  border-radius: 0.75rem;
  padding: 1.5rem;
  flex: 1;
}

/* Heading */
.networks__heading {
  margin-bottom: 1.5rem;
}

.networks__title {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-family: 'Urbanist', sans-serif;
  font-weight: 700;
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  color: #071738;
  margin-bottom: 0.375rem;
}

.networks__title-flag {
  width: 2rem;
  height: 1.375rem;
  object-fit: cover;
  border-radius: 3px;
  flex-shrink: 0;
}

.networks__subtitle {
  font-family: 'Urbanist', sans-serif;
  font-size: 0.9375rem;
  font-weight: 400;
  color: #6E6E6E;
}

/* Network cards grid */
.networks__cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.875rem;
}

/* Individual network card */
.network-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #F7F5F3;
  border: 1px solid #E7E7E7;
  border-radius: 0.625rem;
  padding: 1rem 1.25rem;
  transition: box-shadow 0.2s ease, transform 0.15s ease;
  cursor: pointer;
}

.network-card:hover {
  box-shadow: 0 4px 16px rgba(7, 23, 56, 0.08);
  transform: translateY(-2px);
}

.network-card__text {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.network-card__name {
  font-family: 'Urbanist', sans-serif;
  font-weight: 600;
  font-size: 1rem;
  color: #071738;
}

.network-card__plans {
  font-family: 'Urbanist', sans-serif;
  font-weight: 400;
  font-size: 0.875rem;
  color: #6E6E6E;
}

.network-card__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background-color: #071738;
  color: #ffffff;
  flex-shrink: 0;
  transition: background-color 0.2s ease, transform 0.15s ease;
}

.network-card:hover .network-card__arrow {
  background-color: #0e2147;
  transform: translateX(2px);
}


/* ============================================================
   5b. PLANS SECTION
   ============================================================ */

.plans {
  background-color: #ffffff;
  padding: 2rem 1rem;
}

.plans__container {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* Two-panel layout */
.plans__panels {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* Left panel */
.plans__left-panel {
  background-color: #ffffff;
  border: 1px solid #E7E7E7;
  border-radius: 0.75rem;
  padding: 1rem;
  width: 100%;
}

/* Carrier list */
.carrier-list {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  list-style: none;
}

.carrier-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.625rem 0.75rem;
  border-radius: 0.5rem;
  transition: background-color 0.2s ease;
}

.carrier-item:hover {
  background-color: #F7F5F3;
}

.carrier-item--active {
  background-color: #F7F5F3;
}

.carrier-item__name {
  font-family: 'Urbanist', sans-serif;
  font-size: 1rem;
  font-weight: 500;
  color: #071738;
}

.carrier-item__right {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.carrier-item__count {
  font-family: 'Urbanist', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  color: #6E6E6E;
  background-color: #F7F5F3;
  border: 1px solid #E7E7E7;
  border-radius: 6px;
  width: 2rem;   /* same as arrow circle */
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Right panel */
.plans__right-panel {
  background-color: #ffffff;
  border: 1px solid #E7E7E7;
  border-radius: 0.75rem;
  padding: 1.5rem;
  flex: 1;
}

.plans__heading {
  margin-bottom: 3.5rem;
}

.plans__title {
  font-family: 'Urbanist', sans-serif;
  font-weight: 700;
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  color: #071738;
  margin-bottom: 0.25rem;
}

.plans__subtitle {
  font-family: 'Urbanist', sans-serif;
  font-size: 0.9375rem;
  font-weight: 400;
  color: #6E6E6E;
}

/* Wrapper — no extra height, card stays same size as others */
.plan-card__wrapper {
  position: relative;
}

/* Badge floats above the card without affecting card size or position */
.plan-card__wrapper .plans__popular-badge {
  top: -1.75rem;
}

/* Popular Plan badge — sits above the card, overlapping its top edge */
.plans__popular-badge {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  background-color: #FFD646;
  color: #071738;
  font-family: 'Urbanist', sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0.75rem 0.875rem;
  border-radius: 0.375rem;
  z-index: 0;
}

/* Plan cards grid */
.plans__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  overflow: visible;
}

/* Individual plan card */
.plan-card {
  background-color: #F7F5F3;
  border: 1px solid #E7E7E7;
  border-radius: 0.75rem;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0;
  transition: box-shadow 0.2s ease;
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.plan-card:hover {
  box-shadow: 0 4px 16px rgba(7, 23, 56, 0.08);
}

.plan-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 0.75rem;
}

/* White body section with rounded top corners */
.plan-card__body {
  background-color: #ffffff;
  border-radius: 1.25rem 1.25rem 0 0;
  margin: 0 -1rem -1rem -1rem;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.plan-card__carrier {
  font-family: 'Urbanist', sans-serif;
  font-weight: 600;
  font-size: 1rem;
  color: #071738;
}

.plan-card__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #071738;
  transition: transform 0.15s ease;
}

.plan-card:hover .plan-card__arrow {
  transform: translateX(3px);
}

.plan-card__label {
  font-family: 'Urbanist', sans-serif;
  font-size: 0.75rem;
  font-weight: 400;
  color: #6E6E6E;
}

.plan-card__details {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.plan-card__price {
  font-family: 'Urbanist', sans-serif;
  font-weight: 700;
  font-size: 1.5rem;
  color: #071738;
}

.plan-card__meta {
  display: flex;
  flex-direction: row;
  gap: 1.5rem;
}

.plan-card__meta-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.375rem;
  font-family: 'Urbanist', sans-serif;
  font-size: 0.75rem;
  font-weight: 400;
  color: #6E6E6E;
}

/* Buy button */
.plan-card__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0.75rem;
  background-color: #071738;
  color: #ffffff;
  font-family: 'Urbanist', sans-serif;
  font-weight: 600;
  font-size: 0.9375rem;
  border-radius: 2rem;
  margin-top: 0.5rem;
  transition: background-color 0.2s ease;
}

.plan-card__btn:hover {
  background-color: #0e2147;
}


/* ============================================================
   5. PLAN DETAILS PAGE
   ============================================================ */

.detail {
  background-color: #ffffff;
  padding: 2rem 1rem 4rem;
}

.detail__container {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* Two-panel layout */
.detail__panels {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-top: 1.5rem;
}

/* LEFT panel — white card */
.detail__left-panel {
  background-color: #ffffff;
  border: 1px solid #E7E7E7;
  border-radius: 0.75rem;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  box-shadow:
    0px 10px 23px 0px #D1D1D11A,
    0px 41px 41px 0px #D1D1D117,
    0px 93px 56px 0px #D1D1D10D,
    0px 166px 66px 0px #D1D1D103,
    0px 259px 72px 0px #D1D1D100;
}

/* Back link — pill with border */
.detail__back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: 'Urbanist', sans-serif;
  font-size: 0.9375rem;
  font-weight: 500;
  color: #071738;
  border: 1px solid #E7E7E7;
  border-radius: 2rem;
  padding: 0.625rem 1.25rem;
  align-self: flex-start;
}

.detail__back-link:hover {
  background-color: #F7F5F3;
}

/* Divider line */
.detail__divider {
  border: none;
  border-top: 1px solid #E7E7E7;
  margin: 0;
}

/* Large price */
.detail__price {
  font-family: 'Urbanist', sans-serif;
  font-size: clamp(2rem, 5vw, 2.75rem);
  font-weight: 700;
  color: #071738;
  margin: 0;
}

/* Plan name badge — fits content only */
.detail__plan-badge {
  display: inline-block;
  align-self: flex-start;
  background-color: #74A2FF17;
  color: #071738;
  font-family: 'Urbanist', sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0.625rem;
  border-radius: 1rem;
  gap: 0.625rem;
}

/* Section labels */
.detail__section-label {
  font-family: 'Urbanist', sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  color: #6E6E6E;
  margin: 0;
}

.detail__section-label--mt {
  margin-top: 2rem;
}

/* Plan details table — separate rows with white gaps */
.detail__table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0.5rem 0.5rem;
}

.detail__table-row {
  background-color: #F7F5F3;
}

.detail__table-row td {
  font-family: 'Urbanist', sans-serif;
  font-size: 0.9375rem;
  font-weight: 400;
  color: #071738;
  padding: 0.75rem 1rem;
}

/* Round only first and last rows */
.detail__table-row:first-child td:first-child {
  border-radius: 0.5rem 0 0 0;
}

.detail__table-row:first-child td:last-child {
  border-radius: 0 0.5rem 0 0;
}

.detail__table-row:last-child td:first-child {
  border-radius: 0 0 0 0.5rem;
}

.detail__table-row:last-child td:last-child {
  border-radius: 0 0 0.5rem 0;
}

.detail__table-key {
  color: #6E6E6E !important;
  width: 50%;
}

/* Included in plan checklist */
.detail__checklist {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.detail__checklist-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-family: 'Urbanist', sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: 0%;
  color: #071738;
}

.detail__checklist-item span {
  flex: 1;
}

.detail__checklist-item svg {
  flex-shrink: 0;
  color: #071738;
}

/* RIGHT panel — amount payable card */
.detail__right-panel {
  background-color: #F7F5F3;
  border-radius: 16px;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-self: flex-start;
  width: 100%;
  min-height: 193px;
}

.detail__amount-label {
  font-family: 'Urbanist', sans-serif;
  font-size: 0.875rem;
  font-weight: 400;
  color: #6E6E6E;
  margin: 0;
}

.detail__amount-price {
  font-family: 'Urbanist', sans-serif;
  font-size: clamp(1.75rem, 4vw, 2.25rem);
  font-weight: 700;
  color: #071738;
  margin: 0;
}

/* Dashed divider between price and buy button */
.detail__amount-divider {
  border: none;
  border-top: 1.5px dashed #C8C8C8;
  margin: 0;
}

.detail__buy-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0.875rem 1.5rem;
  background-color: #071738;
  color: #ffffff;
  font-family: 'Urbanist', sans-serif;
  font-weight: 600;
  font-size: 1rem;
  border-radius: 2rem;
  transition: background-color 0.2s ease;
}

.detail__buy-btn:hover {
  background-color: #0e2147;
}

/* Desktop layout — side by side */
@media (min-width: 917px) {
  .detail__panels {
    flex-direction: row;
    align-items: flex-start;
  }

  .detail__left-panel {
    flex: 1;
  }

  .detail__right-panel {
    width: min(407px, 35%);
    flex-shrink: 0;
  }
}


/* ============================================================
   6. WHATSAPP CTA SECTION
   ============================================================ */

.whatsapp-cta {
  background-color: #0F0926;
  padding: 2.5rem 1rem;
  display: flex;
  align-items: center;
}

.whatsapp-cta__container {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 1rem;

  display: flex;
  flex-direction: column;
  align-items: center; /* centers button on mobile */
  gap: 1.5rem;
  width: 100%;
}

/* Left group: icon + text side by side */
.whatsapp-cta__left {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.whatsapp-cta__icon {
  flex-shrink: 0;
  width: 3.5rem;   /* 56px */
  height: 3.5rem;
}

.whatsapp-cta__text {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

/* "Message via WhatsApp" — Figma spec: Urbanist SemiBold 28px */
.whatsapp-cta__title {
  font-family: 'Urbanist', sans-serif;
  font-weight: 600;
  font-size: clamp(1.25rem, 3vw, 1.75rem); /* 1.75rem = 28px */
  line-height: 1.2;                         /* 120% */
  letter-spacing: 0;
  color: #ffffff;
}

/* Subtitle text */
.whatsapp-cta__subtitle {
  font-family: 'Urbanist', sans-serif;
  font-weight: 400;
  font-size: clamp(0.875rem, 1.5vw, 1rem);
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.75);
}

/* "Send a Message" button — Figma spec */
.whatsapp-cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;               /* 8px */

  width: 100%;               /* full width on mobile */
  max-width: 228px;
  height: 56px;

  padding: 14px 40px;
  border-radius: 40px;

  background-color: #ffffff;
  color: #0F0926;
  font-family: 'Urbanist', sans-serif;
  font-weight: 600;
  font-size: 1rem;
  white-space: nowrap;

  transition: background-color 0.2s ease, transform 0.15s ease;
}

.whatsapp-cta__btn:hover {
  background-color: #f0f0f0;
  transform: translateY(-2px);
}

.whatsapp-cta__btn:active {
  transform: translateY(0);
}


/* ============================================================
   6. RESPONSIVE — TABLET (917px+)
   ============================================================ */
@media (min-width: 917px) {

  /* A little more outer padding so the card breathes more */
  .navbar {
    padding: 0.875rem 1.5rem;
  }

  /* Hide hamburger */
  .navbar__toggle {
    display: none;
  }

  /* Nav becomes an inline row inside the card */
  .navbar__nav {
    display: flex;
    flex-direction: row;
    position: static;
    background: none;
    border: none;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
  }

  .navbar__nav-list {
    flex-direction: row;
    align-items: center;
    gap: 0.125rem;
  }

  .navbar__nav-item {
    width: auto;
  }

  .navbar__nav-link {
    padding: 0.5rem 0.75rem;
    font-size: 0.9375rem;
  }

  /* Show right-side actions */
  .navbar__actions {
    display: flex;
  }

  /* Hero — more breathing room on tablet */
  .hero {
    padding: 4rem 1.5rem 3rem;
  }

  /* Cards — 2 columns on tablet */
  .countries__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Networks — side by side on tablet, both panels equal height */
  .networks__panels {
    flex-direction: row;
    align-items: stretch;
  }

  .networks__left-panel {
    width: 280px;
    flex-shrink: 0;
  }

  /* Network cards — 2 columns on tablet */
  .networks__cards {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Plans — side by side on tablet */
  .plans__panels {
    flex-direction: row;
    align-items: stretch;
  }

  .plans__left-panel {
    width: 280px;
    flex-shrink: 0;
  }

  /* Plan cards — 2 columns on tablet */
  .plans__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .countries {
    padding: 2.5rem 1.5rem 4rem;
  }

  /* WhatsApp — fixed height and row layout on tablet+ */
  .whatsapp-cta {
    padding: 0 1.5rem;
    height: 141px;
  }

  .whatsapp-cta__container {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
  }

  .whatsapp-cta__btn {
    width: 228px;   /* fixed Figma width on larger screens */
    flex-shrink: 0;
  }

  /* Footer — 2 columns on tablet */
  .footer__container {
    grid-template-columns: 1fr 1fr;
  }

  .footer__form {
    max-width: 324px;
  }

  .footer__subscribe-btn {
    width: 119px;
  }

  /* Steps — 3 columns on tablet+, capped at 424px each */
  .mt-steps__grid {
    grid-template-columns: repeat(3, minmax(0, 424px));
  }

  .mt-step {
    height: 450px;
  }

  /* Features — col gap on tablet+ */
  .mt-features__col {
    gap: 2.5rem;
  }

  .mt-feature-card {
    height: 384px;
  }

  .mt-feature-card--center {
    height: 808px; /* 2 × 384 + 40 gap */
  }

  /* App CTA — row layout on tablet+ */
  .mt-app-cta__content {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

}


/* ============================================================
   8. FOOTER
   ============================================================ */

/* Main footer area — light grey background */
.footer__main {
  background-color: #F7F7F7;
  padding: 2rem 1.25rem;
}

.footer__container {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 1.25rem;

  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}

/* --- Brand column: logo + desc + newsletter + socials --- */
.footer__brand {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.footer__logo {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.footer__logo-img {
  width: 2.25rem;
  height: 2.25rem;
  object-fit: contain;
}

.footer__logo-text {
  font-family: 'Urbanist', sans-serif;
  font-weight: 700;
  font-size: 1.125rem;
  color: #071738;
}

.footer__desc {
  font-family: 'Urbanist', sans-serif;
  font-weight: 400;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: #4a4a5a;
  max-width: 100%;
}

/* Newsletter block */
.footer__newsletter-title {
  font-family: 'Urbanist', sans-serif;
  font-weight: 700;
  font-size: 1.125rem;
  color: #071738;
  margin-bottom: 0.25rem;
}

.footer__newsletter-sub {
  font-family: 'Urbanist', sans-serif;
  font-weight: 400;
  font-size: 0.9375rem;
  color: #4a4a5a;
  line-height: 1.5;
  margin-bottom: 0.875rem;
}

/* Email input + button — Figma spec */
.footer__form {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 26px;
  padding: 8px 8px 8px 14px;
  width: 100%;
  height: 53px;
  box-sizing: border-box;
}

.footer__input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-family: 'Urbanist', sans-serif;
  font-size: 0.9375rem;
  color: #071738;
  min-width: 0;
}

.footer__input::placeholder {
  color: #aaaaaa;
}

.footer__subscribe-btn {
  flex-shrink: 0;
  height: 37px;
  padding: 9px 10px;
  font-size: 0.75rem;
  background-color: #071738;
  color: #ffffff;
  font-family: 'Urbanist', sans-serif;
  font-weight: 600;
  font-size: 0.9375rem;
  border: none;
  border-radius: 22px;
  cursor: pointer;
  transition: background-color 0.2s ease;
  white-space: nowrap;
}

.footer__subscribe-btn:hover {
  background-color: #0e2147;
}

/* Social icons row */
.footer__socials {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.footer__social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background-color: #ffffff;
  border: none;
  color: #071738;
  transition: background-color 0.2s ease;
}

.footer__social-link:hover {
  background-color: #e0e0e8;
}

/* --- Nav links column (Data Plan, Data Top-up, Contact us) --- */
.footer__nav-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.footer__nav-link {
  font-family: 'Urbanist', sans-serif;
  font-weight: 400;
  font-size: 1rem;
  color: #4a4a5a;
  transition: color 0.2s ease;
}

.footer__nav-link--bold {
  font-weight: 700;
  font-size: 1.125rem;
  color: #071738;
}

.footer__nav-link:hover {
  color: #071738;
}

/* --- Secondary columns (Company, Help, Other products) --- */
.footer__col-heading {
  font-family: 'Urbanist', sans-serif;
  font-weight: 500;
  font-size: 1rem;
  color: #6E6E6E;
  margin-bottom: 0.875rem;
}

.footer__col-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.footer__col-link {
  font-family: 'Urbanist', sans-serif;
  font-weight: 400;
  font-size: 1rem;
  color: #4a4a5a;
  transition: color 0.2s ease;
}

.footer__col-link:hover {
  color: #071738;
}

/* --- Download column --- */
.footer__download {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.footer__app-badge {
  display: block;
  transition: opacity 0.2s ease;
}

.footer__app-badge:hover {
  opacity: 0.85;
}

.footer__qr {
  border: 1.5px solid #e0e0e0;
  border-radius: 0.5rem;
  overflow: hidden;
  display: inline-block;
  width: fit-content;
}

/* --- Bottom bar --- */
.footer__bottom {
  background-color: #0F0926;
  padding: 1.25rem 1rem;
}

.footer__bottom-container {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 1rem;

  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.footer__copyright {
  font-family: 'Urbanist', sans-serif;
  font-weight: 400;
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.75);
}

.footer__legal {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.footer__legal-link {
  font-family: 'Urbanist', sans-serif;
  font-weight: 400;
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.75);
  transition: color 0.2s ease;
}

.footer__legal-link:hover {
  color: #ffffff;
}


/* ============================================================
   9. MOBILE TOP-UP — STEPS SECTION
   ============================================================ */

.mt-steps {
  background-color: #FFFDFA;
  padding: 3rem 1rem;
}

.mt-steps__container {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 1rem;
}

.mt-steps__heading {
  font-family: 'Urbanist', sans-serif;
  font-weight: 700;
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  color: #071738;
  text-align: center;
  margin-bottom: 3rem;
}

.mt-steps__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

/* Each step card */
.mt-step {
  background-color: #ffffff;
  border: 1px solid #E7E7E7;
  border-radius: 1rem;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 300px;
}

.mt-step__number {
  font-family: 'Urbanist', sans-serif;
  font-weight: 700;
  font-size: 3rem; /* 48px */
  line-height: 1.2;
  letter-spacing: 0%;
  color: #6E6E6E;
  margin-bottom: 1.25rem;
}

/* Visual illustration area — fixed height so text aligns across all 3 cards */
.mt-step__visual {
  display: flex;
  align-items: flex-start;
  height: 160px;
  overflow: hidden;
  margin-bottom: 0.75rem;
}

.mt-step__title {
  font-family: 'Urbanist', sans-serif;
  font-weight: 600;
  font-size: 1.25rem; /* 20px */
  line-height: 1.4;
  letter-spacing: 0;
  color: #071738;
  margin-bottom: 0.5rem;
}

.mt-step__desc {
  font-family: 'Urbanist', sans-serif;
  font-weight: 400;
  font-size: 1.125rem; /* 18px */
  line-height: 1.4;
  letter-spacing: 0;
  color: #6E6E6E;
}

/* --- Country pills (step 01) --- */
.mt-step__countries {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  overflow: hidden;
}

.mt-step__countries-row {
  display: flex;
  flex-direction: row;
  gap: 0.625rem;
  overflow: hidden;
}

.mt-step__country-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: 1.33px solid #E7E7E7;
  border-radius: 0.875rem;
  padding: 0.625rem 0.75rem 0.625rem 0.625rem;
  font-family: 'Urbanist', sans-serif;
  font-size: clamp(0.875rem, 1.35vw, 1.2175rem); /* ~19.48px */
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0;
  text-align: center;
  color: #071738;
  white-space: nowrap;
}

.mt-step__country-pill--active {
  background-color: #F7F5F3;
  border: 1.33px solid #E7E7E7;
}

.mt-step__pill-flag {
  width: 18px;
  height: auto;
  border-radius: 2px;
  flex-shrink: 0;
}

.mt-step__pill-check {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-left: auto;
}

/* --- Mini plan cards (step 02) --- */
.mt-step__plans {
  display: flex;
  flex-direction: row;
  gap: 0.75rem;
  overflow: hidden;
}

.mt-step__plan-card {
  width: 220px;
  flex-shrink: 0;
  border: 1px solid #E7E7E7;
  border-radius: 0.75rem;
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.mt-step__plan-card--selected {
  background-color: #F7F5F3;
  border: 1.33px solid #E7E7E7;
}

.mt-step__plan-top {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.mt-step__plan-flag {
  width: 18px;
  height: auto;
  border-radius: 2px;
  flex-shrink: 0;
}

.mt-step__plan-carrier {
  font-family: 'Urbanist', sans-serif;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #6E6E6E;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mt-step__plan-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mt-step__plan-price {
  font-family: 'Urbanist', sans-serif;
  font-weight: 700;
  font-size: 1.25rem;
  color: #071738;
}

.mt-step__plan-selected-icon {
  flex-shrink: 0;
}

/* --- Confirmation card (step 03) --- */
.mt-step__confirmation {
  width: 100%;
  border: 1px solid #E7E7E7;
  border-radius: 0.75rem;
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.mt-step__confirm-icon {
  display: flex;
  align-items: center;
}

.mt-step__confirm-text {
  font-family: 'Urbanist', sans-serif;
  font-weight: 600;
  font-size: 0.9375rem;
  color: #071738;
}

.mt-step__confirm-bars {
  display: flex;
  gap: 0.375rem;
}

.mt-step__confirm-bar {
  display: block;
  height: 10px;
  flex: 1;
  background-color: #071738;
  border-radius: 4px;
}


/* ============================================================
   10. MOBILE TOP-UP — FEATURES SECTION
   ============================================================ */

.mt-features {
  background-color: #FFFDFA;
  padding: 3rem 1rem;
}

.mt-features__container {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 1rem;
}

.mt-features__heading {
  font-family: 'Urbanist', sans-serif;
  font-weight: 700;
  font-size: clamp(1.75rem, 3.5vw, 3rem); /* 48px */
  line-height: 1.2;
  letter-spacing: 0;
  color: #071738;
  margin-bottom: 2.5rem;
}

/* Desktop: 3-column layout */
.mt-features__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 413px));
  gap: 2.5rem;
  align-items: start;
}

.mt-features__col {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* Base card */
.mt-feature-card {
  border: 1px solid #E7E7E7;
  border-radius: 1rem; /* 16px */
  padding: 2.5rem; /* 40px */
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  overflow: hidden;
  position: relative;
}

/* Short card height (mobile: auto) */

/* Gradient variants */
.mt-feature-card--navy {
  background: linear-gradient(180deg, rgba(8, 23, 55, 0.5) 0%, rgba(8, 23, 55, 0) 40%), #ffffff;
}

.mt-feature-card--amber {
  background: linear-gradient(180deg, rgba(234, 153, 4, 0.25) 0%, rgba(234, 153, 4, 0) 40%), #ffffff;
}

.mt-feature-card--center {
  background: linear-gradient(180deg, rgba(1, 32, 103, 0.5) 0%, rgba(102, 147, 251, 0) 80%), #ffffff;
}

/* Icon box — square with rounded corners */
.mt-feature-card__icon-box {
  width: 3.5rem;  /* ~56px */
  height: 3.5rem;
  border-radius: 0.875rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.mt-feature-card__icon-box--navy {
  background-color: #071738;
}

.mt-feature-card__icon-box--amber {
  background-color: #C98C00;
}

.mt-feature-card__icon-box--blue {
  background-color: #1A3AA3;
}

.mt-feature-card__title {
  font-family: 'Urbanist', sans-serif;
  font-weight: 700;
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  line-height: 1.3;
  color: #071738;
}

.mt-feature-card__desc {
  font-family: 'Urbanist', sans-serif;
  font-weight: 400;
  font-size: clamp(0.9375rem, 1.2vw, 1rem);
  color: #071738;
  line-height: 1.6;
}

/* Man image in center card */
.mt-feature-card__man {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 58%;
  object-fit: cover;
  object-position: top center;
  transform: scaleX(-1);
}


/* ============================================================
   11. MOBILE TOP-UP — APP DOWNLOAD CTA
   ============================================================ */

.mt-app-cta {
  background-color: #FFFDFA;
  padding: 5rem 3.75rem; /* top: 80px, left/right: 60px */
}

.mt-app-cta__container {
  max-width: 1320px;
  height: 460px;
  margin: 0 auto;
  background: linear-gradient(90deg, #071738 0%, #24407B 100%);
  border-radius: 2.5rem; /* 40px */
  padding: 3.5rem 3.75rem;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
}

.mt-app-cta__content {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  max-width: 480px;
}

.mt-app-cta__heading {
  font-family: 'Urbanist', sans-serif;
  font-weight: 700;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  color: #ffffff;
  line-height: 1.25;
}

.mt-app-cta__btns {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 1rem;
}

.mt-app-cta__badge {
  display: block;
  transition: opacity 0.2s ease;
}

.mt-app-cta__badge:hover {
  opacity: 0.85;
}

/* Star decorations */
.mt-app-cta__star {
  position: absolute;
  pointer-events: none;
}

/* Ellipse stroke — bottom-left, large arc partially clipped */
.mt-app-cta__ellipse {
  position: absolute;
  width: 480px;
  height: 550px;
  bottom: 20px;
  left: -60px;
  pointer-events: none;
}
/* Ellipse stroke — bottom-right, horizontal mirror of left */
/* Ellipse stroke — bottom-right, horizontal mirror of left */
.mt-app-cta__ellipse-right {
  position: absolute;
  width: 480px;
  height: 550px;
  bottom: 20px;
  right: -60px;
  transform: scaleX(-1);
  pointer-events: none;
}

/* Small star — top-left */
.mt-app-cta__star--small {
  width: 20px;
  height: 20px;
  top: 3.5rem;
  left: 3.5rem;
}

/* Closeup man — mobile homepage CTA */
.mt-app-cta__closeup {
  position: absolute;
  bottom: -284px;
  right: -97px;
  width: 720px;
  height: auto;
  transform: scaleX(-1);
  pointer-events: none;
  z-index: 5;
}

/* Top-right star */
.mt-app-cta__star--topright {
  width: 24px;
  height: 24px;
  top: 3.5rem;
  right: 3.5rem;
}

/* Large star — center bottom */
.mt-app-cta__star--large {
  width: 36px;
  height: 36px;
  bottom: 3.5rem;
  left: 50%;
  transform: translateX(-50%);
}

/* ---- Circular people images ---- */
.mt-app-cta__images {
  position: absolute;
  top: 0;
  right: 0;
  width: 55%;
  height: 100%;
}

.mt-cta-circle {
  position: absolute;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}

.mt-cta-circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* woman1 — top-right, large, partially overflowing corner */
.mt-cta-circle--woman1 {
  width: 280px;
  height: 280px;
  top: -160px;
  right: -100px;
  transform: rotate(20deg);
}

/* man3 — center-left of cluster, medium */
.mt-cta-circle--man3 {
  width: 105px;
  height: 105px;
  top: 80px;
  right: 260px;
}

/* woman2 — center-right, medium */
.mt-cta-circle--woman2 {
  width: 120px;
  height: 120px;
  top: 170px;
  right: 60px;
  transform: rotate(10deg);
}

/* man4 — bottom-left, large */
.mt-cta-circle--man4 {
  width: 240px;
  height: 240px;
  bottom: -60px;
  right: 160px;
  transform: rotate(-30deg);
}

/* man5 — bottom-right, small, partially clipped */
.mt-cta-circle--man5 {
  width: 130px;
  height: 130px;
  bottom: -10px;
  right: -35px;
  transform: rotate(-15deg);
}


/* ============================================================
   7. RESPONSIVE — DESKTOP (1200px+)
   ============================================================ */
@media (min-width: 1200px) {

  /* More outer padding at full desktop */
  .navbar {
    padding: 1rem 2rem;
  }

  .navbar__container {
    padding: 0.9375rem 1.5rem;
  }

  /* Hero — full desktop padding */
  .hero {
    padding: 5rem 2rem 4rem;
  }

  /* Cards — 3 columns on desktop, matching Figma */
  .countries__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Network cards — 3 columns on desktop */
  .networks__cards {
    grid-template-columns: repeat(3, 1fr);
  }

  .networks__left-panel {
    width: 300px;
  }

  /* Plan cards — 3 columns on desktop */
  .plans__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .plans__left-panel {
    width: 300px;
  }

  .countries {
    padding: 3rem 2rem 5rem;
  }

  .navbar__nav-link {
    font-size: 1rem;
  }

  .navbar__lang,
  .navbar__get-app {
    font-size: 0.9375rem;
  }

  .navbar__actions {
    gap: 1.25rem;
    margin-left: auto;
  }

  /* Footer — full 6-column layout on desktop matching Figma */
  .footer__container {
    grid-template-columns: 2.5fr 0.9fr 0.9fr 0.9fr 0.9fr 1.3fr;
    align-items: start;
    column-gap: 1.5rem;
  }

  .footer__main {
    padding: 4rem 2rem;
  }

  .footer__bottom {
    padding: 1.5rem 2rem;
  }

  /* Steps section desktop */
  .mt-steps {
    padding: 5rem 2rem;
  }

  .mt-steps__grid {
    grid-template-columns: repeat(3, minmax(0, 424px));
  }

  .mt-step {
    height: 450px;
  }

  /* Features — desktop padding */
  .mt-features {
    padding: 5rem 2rem;
  }

  /* App CTA desktop padding */
  .mt-app-cta {
    padding: 5rem 2rem;
  }
}

/* ============================================================
   CTA SECTION — TABLET (max 1024px)
   ============================================================ */
@media (max-width: 1024px) {

  /* Shrink people images cluster */
  .mt-cta-circle--woman1 {
    width: 200px;
    height: 200px;
    top: -120px;
    right: -60px;
  }

  .mt-cta-circle--man3 {
    width: 80px;
    height: 80px;
    top: 60px;
    right: 180px;
  }

  .mt-cta-circle--woman2 {
    width: 90px;
    height: 90px;
    top: 140px;
    right: 40px;
  }

  .mt-cta-circle--man4 {
    width: 170px;
    height: 170px;
    bottom: -40px;
    right: 110px;
  }

  .mt-cta-circle--man5 {
    width: 95px;
    height: 95px;
    bottom: -10px;
    right: -20px;
  }

  /* Shrink ellipses so they don't crowd content */
  .mt-app-cta__ellipse,
  .mt-app-cta__ellipse-right {
    width: 340px;
    height: 390px;
  }

  /* ---- Features section ---- */

  /* Single column: cols and center card all stack */
  .mt-features__grid {
    grid-template-columns: 1fr;
  }

  /* Reset fixed heights set at 917px+ */
  .mt-feature-card,
  .mt-feature-card--center {
    height: auto;
  }

  /* Hide man image — only shown on desktop */
  .mt-feature-card__man {
    display: none;
  }
}

/* ============================================================
   CTA SECTION — MOBILE (max 640px)
   ============================================================ */
@media (max-width: 640px) {

  .mt-app-cta {
    padding: 2.5rem 1rem;
  }

  /* Auto height so content isn't cut off */
  .mt-app-cta__container {
    height: auto;
    min-height: 260px;
    padding: 2.5rem 1.75rem;
    border-radius: 1.5rem;
    justify-content: center;
  }

  /* Center everything on mobile */
  .mt-app-cta__content {
    flex-direction: column;
    max-width: 100%;
    align-items: center;
    text-align: center;
    gap: 1.5rem;
  }

  .mt-app-cta__btns {
    justify-content: center;
  }

  /* Hide people images — too cramped on small screens */
  .mt-app-cta__images {
    display: none;
  }

  /* Hide ellipses on mobile */
  .mt-app-cta__ellipse,
  .mt-app-cta__ellipse-right {
    display: none;
  }

  /* Hide large star on mobile */
  .mt-app-cta__star--large {
    display: none;
  }

  /* Shrink small star */
  .mt-app-cta__star--small {
    width: 14px;
    height: 14px;
    top: 1.25rem;
    left: 1.25rem;
  }
}


/* ============================================================
   12. eSIM REGION — TAB BAR
   ============================================================ */

/* Tab bar sits on same background as hero */
.esim-tabs {
  background-color: #ffffff;
  padding: 2.5rem 1rem 2.5rem;
}

.esim-tabs__container {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* Pill container — light grey bg */
.esim-tabs__bar {
  display: flex;
  align-items: center;
  background-color: #F7F5F3;
  border-radius: 0.625rem;
  padding: 0.25rem;
}

/* Each tab button */
.esim-tabs__btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  font-family: 'Urbanist', sans-serif;
  font-weight: 500;
  font-size: 1rem;
  color: #6B7280;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
  white-space: nowrap;
}

.esim-tabs__btn:hover {
  color: #071738;
}

/* Active tab — white pill */
.esim-tabs__btn--active {
  background-color: #ffffff;
  color: #071738;
  font-weight: 600;
  max-width: 424px;
  height: 41px;
  border-radius: 16px;
  border: 1px solid #E7E7E7;
  padding: 8px 16px;
  gap: 8px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

/* Dot indicator before active tab label */
.esim-tabs__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: #071738;
  flex-shrink: 0;
}


/* ============================================================
   13. eSIM REGION — SELECT A REGION SECTION
   ============================================================ */

.region-select {
  background-color: #ffffff;
  padding: 0 1rem 4rem;
}

.region-select__container {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* White card wrapping heading + grid */
.region-select__card {
  background-color: #ffffff;
  border: 1px solid #E7E7E7;
  border-radius: 1rem;
  padding: 2.5rem;
  box-shadow:
    0px 10px 23px 0px #D1D1D11A,
    0px 41px 41px 0px #D1D1D117,
    0px 93px 56px 0px #D1D1D10D,
    0px 166px 66px 0px #D1D1D103,
    0px 259px 72px 0px #D1D1D100;
}

.region-select__heading {
  font-family: 'Urbanist', sans-serif;
  font-weight: 700;
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  color: #071738;
  margin-bottom: 0.375rem;
}

.region-select__sub {
  font-family: 'Urbanist', sans-serif;
  font-weight: 400;
  font-size: 0.9375rem;
  color: #6B7280;
  margin-bottom: 2rem;
}

/* 3-column grid of region cards */
.region-select__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.875rem;
}

/* Individual region card */
.region-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  background-color: #F7F5F3;
  border: 1px solid #E7E7E7;
  border-radius: 0.625rem;
  text-decoration: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.region-card:hover {
  border-color: #071738;
  box-shadow: 0 2px 8px rgba(7, 23, 56, 0.08);
}

.region-card__name {
  font-family: 'Urbanist', sans-serif;
  font-weight: 500;
  font-size: 1rem;
  color: #071738;
}

/* Dark circle with arrow icon */
.region-card__arrow {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background-color: #071738;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #ffffff;
  transition: background-color 0.2s ease;
}

.region-card:hover .region-card__arrow {
  background-color: #1A3AA3;
}

/* ---- Responsive ---- */
@media (max-width: 768px) {
  .region-select__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .region-select__card {
    padding: 1.5rem;
  }
}

@media (max-width: 480px) {
  .region-select__grid {
    grid-template-columns: 1fr;
  }

  .esim-tabs__btn {
    font-size: 0.875rem;
    padding: 0.625rem 0.5rem;
  }
}


/* ============================================================
   13b. eSIM COUNTRY — COUNTRY SELECTION GRID
   ============================================================ */

.country-select__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.875rem;
  margin-top: 1.5rem;
}

/* Individual country card */
.country-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  background-color: #F7F5F3;
  border: 1px solid #E7E7E7;
  border-radius: 0.625rem;
  text-decoration: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  min-width: 0;
}

.country-card:hover {
  border-color: #071738;
  box-shadow: 0 2px 8px rgba(7, 23, 56, 0.08);
}

.country-card__flag {
  width: 32px;
  height: 24px;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid #E7E7E7;
  flex-shrink: 0;
}

.country-card__flag img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.country-card__name {
  font-family: 'Urbanist', sans-serif;
  font-weight: 500;
  font-size: 1rem;
  color: #071738;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Dark circle arrow — same as region card */
.country-card__arrow {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background-color: #071738;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #ffffff;
  margin-left: auto;
  transition: background-color 0.2s ease;
}

.country-card:hover .country-card__arrow {
  background-color: #1A3AA3;
}

/* View all countries button */
.country-select__footer {
  display: flex;
  justify-content: center;
  margin-top: 2rem;
}

.country-select__view-all {
  display: inline-block;
  background-color: #071738;
  color: #ffffff;
  font-family: 'Urbanist', sans-serif;
  font-weight: 600;
  font-size: 1rem;
  padding: 0.875rem 2.5rem;
  border-radius: 40px;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.country-select__view-all:hover {
  background-color: #0e2147;
}

/* ---- Responsive ---- */
@media (max-width: 768px) {
  .country-select__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .country-select__grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   14. eSIM REGION PLANS — SIDEBAR + PLANS LAYOUT
   ============================================================ */

.esim-plans {
  background-color: #ffffff;
  padding: 1.5rem 1rem 4rem;
}

.esim-plans__container {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* Two-panel flex row */
.esim-plans__layout {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
  margin-top: 1.5rem;
}

/* ---- LEFT SIDEBAR ---- */
.esim-sidebar {
  width: 322px;
  min-height: 478px;
  flex-shrink: 0;
  background-color: #ffffff;
  border: 1px solid #E7E7E7;
  border-radius: 20px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  box-sizing: border-box;
  box-shadow:
    0px 10px 23px 0px #D1D1D11A,
    0px 41px 41px 0px #D1D1D117,
    0px 93px 56px 0px #D1D1D10D,
    0px 166px 66px 0px #D1D1D103,
    0px 259px 72px 0px #D1D1D100;
}

/* Search bar */
.esim-sidebar__search-wrap {
  position: relative;
  margin-bottom: 0.5rem;
}

.esim-sidebar__search-icon {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  color: #9CA3AF;
  pointer-events: none;
}

.esim-sidebar__search {
  width: 100%;
  padding: 0.625rem 0.75rem 0.625rem 2.25rem;
  border: 1px solid #E7E7E7;
  border-radius: 0.5rem;
  font-family: 'Urbanist', sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 140%;
  letter-spacing: 0%;
  color: #071738;
  background-color: #ffffff;
  outline: none;
  transition: border-color 0.2s ease;
  box-sizing: border-box;
}

.esim-sidebar__search::placeholder {
  color: #3E4554;
}

.esim-sidebar__search:focus {
  border-color: #071738;
}

/* Region list */
.esim-sidebar__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.esim-sidebar__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.625rem 0.75rem;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.esim-sidebar__item:hover {
  background-color: #F7F5F3;
}

.esim-sidebar__item--active {
  background-color: #F7F5F3;
}

.esim-sidebar__name {
  font-family: 'Urbanist', sans-serif;
  font-weight: 500;
  font-size: 0.9375rem;
  color: #071738;
  flex: 1;
}

/* Flag inside sidebar (used on country pages) */
.esim-sidebar__flag {
  width: 28px;
  height: 20px;
  border-radius: 3px;
  overflow: hidden;
  border: 1px solid #E7E7E7;
  flex-shrink: 0;
}

.esim-sidebar__flag img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Arrow circles */
.esim-sidebar__arrow {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background-color: #6E6E6E;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  flex-shrink: 0;
}

.esim-sidebar__arrow--active {
  background-color: #071738;
  color: #ffffff;
}

/* ---- RIGHT PLANS PANEL ---- */
.esim-plans__main {
  flex: 1;
  background-color: #ffffff;
  border: 1px solid #E7E7E7;
  border-radius: 0.75rem;
  padding: 1.75rem;
  min-width: 0;
  box-shadow:
    0px 10px 23px 0px #D1D1D11A,
    0px 41px 41px 0px #D1D1D117,
    0px 93px 56px 0px #D1D1D10D,
    0px 166px 66px 0px #D1D1D103,
    0px 259px 72px 0px #D1D1D100;
}

.esim-plans__heading {
  font-family: 'Urbanist', sans-serif;
  font-weight: 700;
  font-size: clamp(1.25rem, 2.5vw, 1.5rem);
  color: #071738;
  margin-bottom: 0.25rem;
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.esim-plans__heading-flag {
  width: 38.4px;
  height: 30.89px;
  border-radius: 4px;
  object-fit: cover;
  border: 1px solid #E7E7E7;
  flex-shrink: 0;
}

.esim-plans__sub {
  font-family: 'Urbanist', sans-serif;
  font-weight: 400;
  font-size: 0.9375rem;
  color: #6B7280;
  margin-bottom: 1.25rem;
}

/* ---- FILTER PILLS ---- */
.esim-filter {
  display: flex;
  flex-wrap: nowrap;
  gap: 25px;
  margin-bottom: 1.5rem;
  background-color: #E9E7F6;
  border-radius: 40px;
  padding: 6px 25px 6px 6px;
  max-width: 600px;
  width: 100%;
  height: 47px;
  align-items: center;
  box-sizing: border-box;
}

.esim-filter__btn {
  padding: 0.4375rem 1rem;
  border-radius: 2rem;
  border: none;
  background-color: transparent;
  font-family: 'Urbanist', sans-serif;
  font-weight: 500;
  font-size: 0.875rem;
  color: #6B7280;
  cursor: pointer;
  transition: color 0.2s ease;
  white-space: nowrap;
}

.esim-filter__btn:hover {
  color: inherit;
}

.esim-filter__btn--active:hover {
  color: #ffffff;
}

.esim-filter__btn--active {
  background-color: #071738;
  color: #ffffff;
  border-color: #071738;
  width: auto;
  height: 35px;
  border-radius: 40px;
  padding: 8px 16px;
  gap: 5px;
  flex-shrink: 0;
}

/* ---- PLAN CARDS GRID ---- */
.esim-plan-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

/* Individual plan card — grey top header, white body bottom */
.esim-plan-card {
  background-color: #F7F5F3;
  border: 1px solid #E7E7E7;
  border-radius: 0.75rem;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow: hidden;
  transition: box-shadow 0.2s ease;
}

.esim-plan-card:hover {
  box-shadow: 0 4px 16px rgba(7, 23, 56, 0.08);
}

/* Card header: title + arrow — sits on grey background */
.esim-plan-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 0.75rem;
}

.esim-plan-card__title {
  font-family: 'Urbanist', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  color: #071738;
}

.esim-plan-card__arrow {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: 1px solid #E7E7E7;
  background-color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #071738;
  flex-shrink: 0;
}

/* White body — negative margins pull it flush to card edges */
.esim-plan-card__body {
  background-color: #ffffff;
  border-radius: 1.25rem 1.25rem 0 0;
  margin: 0 -1rem -1rem -1rem;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

/* Price + validity row */
.esim-plan-card__info {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.5rem;
}

.esim-plan-card__price-group {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.esim-plan-card__now {
  font-family: 'Urbanist', sans-serif;
  font-weight: 400;
  font-size: 0.75rem;
  color: #9CA3AF;
}

.esim-plan-card__price {
  font-family: 'Urbanist', sans-serif;
  font-weight: 700;
  font-size: 1.375rem;
  color: #071738;
}

.esim-plan-card__validity-group {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  color: #6B7280;
}

.esim-plan-card__validity {
  font-family: 'Urbanist', sans-serif;
  font-weight: 400;
  font-size: 0.75rem;
  color: #6B7280;
  white-space: nowrap;
}

/* Buy button */
.esim-plan-card__btn {
  display: block;
  width: 100%;
  padding: 0.625rem 1rem;
  background-color: #071738;
  color: #ffffff;
  font-family: 'Urbanist', sans-serif;
  font-weight: 600;
  font-size: 0.9375rem;
  text-align: center;
  border-radius: 2rem;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.esim-plan-card__btn:hover {
  background-color: #1A3AA3;
}

/* ---- RESPONSIVE ---- */
/* Sidebar stacks above plans panel below 1024px */
@media (max-width: 1024px) {
  .esim-plans__layout {
    flex-direction: column;
    align-items: stretch;
  }

  .esim-sidebar {
    width: 100%;
    min-height: unset;
  }

  .esim-plan-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Filter scrolls horizontally so all tabs stay on one line */
  .esim-filter {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .esim-filter::-webkit-scrollbar {
    display: none;
  }
}

@media (max-width: 480px) {
  .esim-plan-grid {
    grid-template-columns: 1fr;
  }

  .esim-filter {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 12px;
    padding: 6px 12px 6px 6px;
    /* Fade hint on right edge to signal more content */
    mask-image: linear-gradient(to right, black 85%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, black 85%, transparent 100%);
  }

  .esim-filter__btn {
    font-size: 0.8125rem;
    padding: 0.375rem 0.75rem;
    flex-shrink: 0;
  }

  .esim-filter__btn--active {
    width: auto;
    flex-shrink: 0;
  }
}


/* ============================================================
   15. eSIM REGION DETAILS — ADDITIONAL TEXT + COVERAGE
   ============================================================ */

/* Additional details paragraph */
.detail__additional-text {
  font-family: 'Urbanist', sans-serif;
  font-weight: 400;
  font-size: 0.9375rem;
  color: #4B5563;
  line-height: 1.7;
  margin-bottom: 2rem;
}

/* ---- Coverage section ---- */
/* ============================================================
   SECTION 16 — COMPATIBILITY MODAL
   ============================================================ */

.compat-modal__overlay {
  display: none;
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.compat-modal--open {
  display: flex;
}

.compat-modal__card {
  background-color: #ffffff;
  border-radius: 1.25rem;
  padding: 2rem 1.5rem;
  max-width: 480px;
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;
}

.compat-modal__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: #000000;
  border: none;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #ffffff;
}

.compat-modal__icon {
  width: 200px;
  height: 200px;
  object-fit: contain;
}

.compat-modal__title {
  font-family: 'Urbanist', sans-serif;
  font-weight: 800;
  font-size: 42px;
  line-height: 120%;
  letter-spacing: 0%;
  color: #071738;
  margin: 0;
}

@media (max-width: 480px) {
  .compat-modal__title {
    font-size: 28px;
  }

  .compat-modal__buy-btn {
    width: 100%;
  }
}

.compat-modal__desc {
  font-family: 'Urbanist', sans-serif;
  font-weight: 400;
  font-size: 1rem;
  color: #6E6E6E;
  line-height: 1.6;
  margin: 0;
}

.compat-modal__buy-btn {
  display: block;
  width: min(568px, 100%);
  height: 54px;
  background-color: #071738;
  color: #ffffff;
  text-align: center;
  padding: 10px 16px;
  border-radius: 40px;
  font-family: 'Urbanist', sans-serif;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  margin-top: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.compat-modal__buy-btn:hover {
  background-color: #0e2147;
}

/* ============================================================
   SECTION 17 — COVERAGE
   ============================================================ */

.coverage {
  margin-top: 2rem;
  border-top: 1px solid #E7E7E7;
  padding-top: 1.5rem;
  background-color: #FFFDFA;
}

.coverage__heading {
  font-family: 'Urbanist', sans-serif;
  font-weight: 700;
  font-size: 1.25rem;
  color: #071738;
  margin-bottom: 0.25rem;
}

.coverage__sub {
  font-family: 'Urbanist', sans-serif;
  font-weight: 400;
  font-size: 0.875rem;
  color: #6B7280;
  margin-bottom: 1.25rem;
}

/* Search bar */
.coverage__search-wrap {
  position: relative;
  margin-bottom: 1rem;
  max-width: 804px;
}

.coverage__search-icon {
  position: absolute;
  left: 0.875rem;
  top: 50%;
  transform: translateY(-50%);
  color: #3E4554;
  pointer-events: none;
  width: 24px;
  height: 24px;
}

.coverage__search {
  width: 100%;
  padding: 0.75rem 1rem 0.75rem 3rem;
  border: 1px solid #E7E7E7;
  border-radius: 0.625rem;
  font-family: 'Urbanist', sans-serif;
  font-weight: 600;
  font-size: 1.25rem; /* 20px */
  line-height: 1.4;
  color: #071738;
  background-color: #ffffff;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.2s ease;
}

.coverage__search::placeholder {
  color: #3E4554;
}

.coverage__search:focus {
  border-color: #071738;
}

/* Country list */
.coverage__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: 804px;
}

/* Individual country row — card style */
.coverage__row {
  background-color: #ffffff;
  border: 1px solid #E7E7E7;
  border-radius: 0.75rem;
  overflow: hidden;
}

.coverage__row-main {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 0.875rem 1rem;
  cursor: pointer;
  user-select: none;
}

.coverage__identity {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  flex: 1;
}

.coverage__tags {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
  margin-left: auto;
}

/* Flag — rectangular box with border */
.coverage__flag {
  width: 40px;
  height: 30px;
  border-radius: 5px;
  border: 1px solid #E7E7E7;
  flex-shrink: 0;
  overflow: hidden;
  display: flex;
}

.coverage__flag img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.coverage__name {
  font-family: 'Urbanist', sans-serif;
  font-weight: 600;
  font-size: 1.25rem; /* 20px */
  line-height: 1.4;
  color: #071738;
  flex: 1;
}

/* Network tags — defined in .coverage__row-main block above */

.coverage__tag {
  font-family: 'Urbanist', sans-serif;
  font-weight: 500;
  font-size: 0.75rem;
  color: #000000;
  background-color: #E7E7E7;
  border: 1px solid #E7E7E7;
  border-radius: 8px;
  width: 30px;
  height: 30px;
  font-family: 'Urbanist', sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 140%;
  letter-spacing: 0%;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  white-space: nowrap;
}

/* Chevron — points down by default, rotates up when expanded */
.coverage__chevron {
  color: #6B7280;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

/* Sub-list (expanded) */
.coverage__sub-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: none;
  flex-direction: column;
  border-top: 1px solid #F0F0F0;
}

.coverage__sub-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem 0.75rem 1rem;
  border-bottom: 1px solid #F0F0F0;
}

.coverage__sub-item:last-child {
  border-bottom: none;
}

.coverage__sub-name {
  font-family: 'Urbanist', sans-serif;
  font-weight: 400;
  font-size: 0.9375rem;
  color: #4B5563;
  flex: 1;
}

/* Expanded state */
.coverage__row--expanded .coverage__sub-list {
  display: flex;
}

.coverage__row--expanded .coverage__chevron {
  transform: rotate(180deg);
}

/* Responsive */
@media (max-width: 768px) {
  .coverage__list,
  .coverage__search-wrap {
    max-width: 100%;
  }

  .coverage__search {
    font-size: 1rem;
  }

  .coverage__name {
    font-size: 1rem;
  }

  .coverage__tags {
    gap: 0.25rem;
  }

  .coverage__tag {
    font-size: 0.6875rem;
    padding: 2px 6px;
  }
}

/* ── WHATSAPP CTA ─────────────────────────────────────────── */
.dt-whatsapp {
  padding: 2rem 3.75rem;
}

.dt-whatsapp__container {
  max-width: 1320px;
  margin: 0 auto;
  background: #F7F5F3;
  border-radius: 20px;
  padding: 24px 32px;
  display: flex;
  align-items: center;
  gap: 20px;
}

.dt-whatsapp__icon {
  width: 56px;
  height: 56px;
  background: #E8FBF0;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.dt-whatsapp__body {
  flex: 1;
}

.dt-whatsapp__title {
  font-family: 'Urbanist', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: #071738;
  margin-bottom: 2px;
}

.dt-whatsapp__sub {
  font-family: 'Urbanist', sans-serif;
  font-size: 14px;
  color: #6E7A8A;
}

.dt-whatsapp__btn {
  font-family: 'Urbanist', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #ffffff;
  background: #25D366;
  text-decoration: none;
  padding: 12px 28px;
  border-radius: 40px;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.2s;
}

.dt-whatsapp__btn:hover {
  background: #1ebe5a;
}