/**
 * Homepage Stylesheet for ringbeta
 * Numbers / Mail / eSIM product sections
 */

/* Shared hero typography */
.home-hero-title {
  font-size: 3rem;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--tblr-body-color);
  margin-bottom: 1.25rem;
}

.home-hero-title-accent {
  color: var(--tblr-primary);
}

.home-hero-subtitle {
  font-size: 1.1rem;
  color: var(--tblr-secondary-color, #6c757d);
  max-width: 520px;
  margin-bottom: 2rem;
  line-height: 1.6;
}

/* ================= NUMBERS SECTION ================= */
.home-numbers-hero {
  padding: 5rem 0 3rem;
  background: linear-gradient(180deg, rgba(var(--tblr-primary-rgb), 0.05) 0%, rgba(var(--tblr-primary-rgb), 0) 60%);
}

/* Notification ticker: outer viewport has a light rounded background (mimics
   onlinesim's outer container color). Uses a solid flat color rather than a
   semi-transparent one, to avoid stacking with the hero section's own
   gradient and producing a visible color-banding seam at the container edge
   (an earlier rgba-over-gradient version did exactly that). The actual
   overflow:hidden clipping lives on the inner .home-notif-clip, which has no
   padding of its own; JS recalculates that height precisely from whichever
   4 cards are currently shown (card height varies by language/message
   length, so a fixed value would either clip a card or leave a gap). */
.home-notif-viewport {
  max-width: 480px;
  margin-left: auto;
  border-radius: 20px;
  background: #eaf1f8;
  padding: 10px 16px;
}

[data-bs-theme="dark"] .home-notif-viewport {
  background: rgba(255, 255, 255, 0.06);
}

.home-notif-clip {
  position: relative;
  height: 368px; /* fallback for first paint; JS recalculates precisely after load */
  overflow: hidden;
}

.home-notif-track {
  display: flex;
  flex-direction: column;
  will-change: transform;
}

.home-notif-card {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  margin-bottom: 14px;
  background: var(--tblr-bg-surface, #ffffff);
  border: 1px solid var(--tblr-border-color);
  border-radius: 16px;
  padding: 14px 18px;
  /*box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);*/
}

.home-notif-icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--tblr-bg-surface-secondary, rgba(0, 0, 0, 0.04));
}

.home-notif-icon img {
  width: 24px;
  height: 24px;
}

.home-notif-icon .ti {
  font-size: 22px;
  color: #25d366;
}

.home-notif-card > div {
  flex: 1;
  min-width: 0;
}

.home-notif-title {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--tblr-body-color);
}

.home-notif-text {
  font-size: 0.74rem;
  color: var(--tblr-secondary-color, #6c757d);
}

.home-stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 4rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--tblr-border-color);
  text-align: center;
}

.home-stat-value {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--tblr-primary);
}

.home-stat-label {
  font-size: 0.85rem;
  color: var(--tblr-secondary-color, #6c757d);
  margin-top: 4px;
}

/* ================= NUMBERS: HOW IT WORKS / WHY CHOOSE US (content & icons reused from /temp-number, same green color scheme) ================= */
.home-howto-card {
  background: var(--tblr-bg-surface, #ffffff);
  border: 1px solid var(--tblr-border-color, #e6e8ec);
  border-radius: 16px;
  padding: 24px 20px;
  text-align: center;
}

.home-howto-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(0, 209, 132, 0.1);
  color: #00a76a;
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 14px;
}

[data-bs-theme="dark"] .home-howto-icon {
  color: #4ce0a8;
}

.home-feature-card {
  background: var(--tblr-bg-surface, #ffffff);
  border: 1px solid var(--tblr-border-color, #e6e8ec);
  border-radius: 16px;
  padding: 20px;
}

.home-feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(0, 209, 132, 0.1);
  color: #00a76a;
  margin-bottom: 12px;
}

[data-bs-theme="dark"] .home-feature-icon {
  color: #4ce0a8;
}

/* ================= MAIL SECTION ================= */
.home-mail-hero {
  padding: 4rem 0;
}

/* Colored banner, mirroring the eSIM section: wraps the whole area in a
   blue-tinted background matching this module's own blue theme (CTA button
   and Bridge 1 are both blue), so the text and mail card read as one unit
   instead of floating on the plain page background. */
.home-mail-banner {
  background: #eaf1fd;
  padding: 3rem;
}

[data-bs-theme="dark"] .home-mail-banner {
  background: rgba(66, 99, 235, 0.1);
}

@media (max-width: 991.98px) {
  .home-mail-banner {
    padding: 2rem;
  }
}

.home-mail-card {
  background: var(--tblr-bg-surface, #ffffff);
  border: 1px solid var(--tblr-border-color);
  border-radius: 18px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  max-width: 440px;
  margin-right: auto;
}

/* ---- MAIL: HOW IT WORKS - colored background cards (distinct from Numbers' green circular icons) ---- */
.home-mail-step-card {
  border-radius: 14px;
  padding: 24px 20px;
}

.home-mail-step-icon {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}

/* Horizontal layout variant: icon on the left, title+description on the right
   (mirrors the reference site's stacked-card row layout) */
.home-mail-step-row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.home-mail-step-row .home-mail-step-icon {
  margin-bottom: 0;
}

.home-mail-step-rose {
  background: rgba(214, 51, 108, 0.07);
}
.home-mail-step-rose .home-mail-step-icon {
  background: rgba(214, 51, 108, 0.15);
  color: #d6336c;
}

.home-mail-step-amber {
  background: rgba(247, 103, 7, 0.07);
}
.home-mail-step-amber .home-mail-step-icon {
  background: rgba(247, 103, 7, 0.15);
  color: #f76707;
}

.home-mail-step-yellow {
  background: rgba(245, 159, 0, 0.09);
}
.home-mail-step-yellow .home-mail-step-icon {
  background: rgba(245, 159, 0, 0.18);
  color: #f59f00;
}

.home-mail-step-violet {
  background: rgba(132, 94, 247, 0.07);
}
.home-mail-step-violet .home-mail-step-icon {
  background: rgba(132, 94, 247, 0.15);
  color: #845ef7;
}

[data-bs-theme="dark"] .home-mail-step-rose { background: rgba(214, 51, 108, 0.12); }
[data-bs-theme="dark"] .home-mail-step-amber { background: rgba(247, 103, 7, 0.12); }
[data-bs-theme="dark"] .home-mail-step-yellow { background: rgba(245, 159, 0, 0.14); }
[data-bs-theme="dark"] .home-mail-step-violet { background: rgba(132, 94, 247, 0.12); }

/* ---- MAIL: WHY CHOOSE - hexagon icon cards with a whole-card hover color transition ---- */
.home-mail-feature-card {
  background: var(--tblr-bg-surface, #ffffff);
  border: 1px solid var(--tblr-border-color);
  border-radius: 14px;
  padding: 28px 20px;
  text-align: center;
  transition: background-color 250ms ease, border-color 250ms ease;
}

.home-mail-feature-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--tblr-primary-rgb), 0.1);
  color: var(--tblr-primary);
  clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0% 50%);
  transition: background-color 250ms ease, color 250ms ease;
}

.home-mail-feature-title,
.home-mail-feature-text {
  transition: color 250ms ease;
}

.home-mail-feature-title {
  color: var(--tblr-body-color);
}

.home-mail-feature-text {
  color: var(--tblr-secondary-color, #6c757d);
}

.home-mail-feature-card:hover {
  background: var(--tblr-primary);
  border-color: var(--tblr-primary);
}

.home-mail-feature-card:hover .home-mail-feature-icon {
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
}

.home-mail-feature-card:hover .home-mail-feature-title,
.home-mail-feature-card:hover .home-mail-feature-text {
  color: #ffffff;
}

.home-mail-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: linear-gradient(135deg, var(--tblr-primary), #4263eb);
  color: #ffffff;
  font-weight: 700;
}

.home-mail-card-badge {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.2);
}

.home-mail-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 20px;
  border-top: 1px solid var(--tblr-border-color);
}

.home-mail-item-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.85rem;
  color: #ffffff;
}

.home-mail-item-avatar-1 { background: #e50914; }
.home-mail-item-avatar-2 { background: #1b2838; }
.home-mail-item-avatar-3 { background: #1db954; }

.home-mail-item-body {
  flex: 1;
  min-width: 0;
}

.home-mail-item-title {
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--tblr-body-color);
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.home-mail-item-time {
  font-size: 0.72rem;
  color: var(--tblr-secondary-color, #6c757d);
  font-weight: 400;
  flex-shrink: 0;
}

.home-mail-item-text {
  font-size: 0.8rem;
  color: var(--tblr-secondary-color, #6c757d);
}

/* ================= ESIM SECTION ================= */
.home-esim-section {
  padding: 1rem 0 5rem;
}

/* A clearly saturated warm tone (matching this module's own orange CTA/icons);
   the text side and photo side share this same background so the photo's
   left-edge fade is actually visible — the previous near-white
   surface-secondary color had too little contrast for the blend to read. */
.home-esim-banner {
  background: #fdf1e0;
}

[data-bs-theme="dark"] .home-esim-banner {
  background: rgba(245, 159, 0, 0.1);
}

.home-esim-content {
  padding: 3.5rem;
}

.home-esim-benefits {
  list-style: none;
  padding: 0;
  margin: 0 0 2rem;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.home-esim-benefits li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.95rem;
  color: var(--tblr-body-color);
}

.home-esim-benefit-icon {
  flex-shrink: 0;
  color: #f59f00;
}

.home-esim-photo-wrap {
  height: 100%;
  min-height: 340px;
}

.home-esim-photo {
  width: 100%;
  height: 100%;
  min-height: 340px;
  object-fit: cover;
  display: block;
}

/* On desktop's side-by-side layout, fade the photo's left edge into the banner
   background so there's no hard vertical seam between it and the text column */
@media (min-width: 992px) {
  .home-esim-photo {
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 18%);
    mask-image: linear-gradient(to right, transparent 0%, black 18%);
  }
}

/* ---- ESIM: WHY CHOOSE - solid orange square icons + top accent line, distinct from Numbers/Mail ---- */
.home-esim-feature-card {
  position: relative;
  background: var(--tblr-bg-surface, #ffffff);
  border: 1px solid var(--tblr-border-color);
  border-radius: 12px;
  padding: 22px 20px;
  overflow: hidden;
  transition: background-color 450ms ease;
}

/* The top orange accent line is collapsed by default and expands from the
   center outward on hover (scaleX from 0 to 1, with transform-origin set to
   center so it grows symmetrically both ways) */
.home-esim-feature-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: #f59f00;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 450ms ease;
}

.home-esim-feature-card:hover::before {
  transform: scaleX(1);
}

.home-esim-feature-card:hover {
  background: rgba(245, 159, 0, 0.06);
}

[data-bs-theme="dark"] .home-esim-feature-card:hover {
  background: rgba(245, 159, 0, 0.12);
}

.home-esim-feature-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  background: #f59f00;
  color: #ffffff;
}

/* ---- ESIM: HOW IT WORKS - solid orange numbered circle icons + step connector line ---- */
.home-esim-step-card {
  background: var(--tblr-bg-surface, #ffffff);
  border: 1px solid var(--tblr-border-color);
  border-radius: 14px;
  padding: 28px 20px;
  text-align: center;
}

.home-esim-step-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
  background: #f59f00;
  color: #ffffff;
  box-shadow: 0 0 0 5px rgba(245, 159, 0, 0.12);
}

/* On desktop, add a horizontal connector line between the 3 steps to reinforce the "process flow" feel */
@media (min-width: 768px) {
  .home-esim-step-row [class*="col-"] {
    position: relative;
  }
  .home-esim-step-row [class*="col-"]:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 55px; /* aligned to the icon's vertical center (28px card padding-top + 26px icon radius, ~1px rounding is negligible) */
    left: calc(50% + 46px);
    right: calc(-50% + 46px);
    height: 2px;
    background: repeating-linear-gradient(to right, rgba(245, 159, 0, 0.4) 0 6px, transparent 6px 12px);
  }
}

/* ================= RESPONSIVE ================= */
@media (max-width: 991.98px) {
  .home-esim-content {
    padding: 2rem;
  }
  .home-esim-photo-wrap,
  .home-esim-photo {
    min-height: 240px;
  }
}

@media (max-width: 767.98px) {
  .home-hero-title {
    font-size: 2.2rem;
  }
  .home-stats-row {
    grid-template-columns: repeat(2, 1fr);
  }
  .home-notif-viewport,
  .home-mail-card {
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
  .home-notif-clip {
    height: 400px;
  }
}

/* ================= BRIDGE STRIPS (connective content between modules: alternating background + linking copy + trust badges) ================= */
.home-bridge {
  position: relative;
  overflow: hidden;
  padding: 3.25rem 0;
  border-top: 1px solid var(--tblr-border-color);
  border-bottom: 1px solid var(--tblr-border-color);
}

.home-bridge-1 {
  background: rgba(66, 99, 235, 0.06);
}

.home-bridge-2 {
  background: rgba(245, 159, 0, 0.06);
}

[data-bs-theme="dark"] .home-bridge-1 {
  background: rgba(66, 99, 235, 0.1);
}

[data-bs-theme="dark"] .home-bridge-2 {
  background: rgba(245, 159, 0, 0.1);
}

.home-bridge::before {
  content: '';
  position: absolute;
  top: 50%;
  right: -60px;
  transform: translateY(-50%);
  width: 320px;
  height: 320px;
  border-radius: 50%;
  pointer-events: none;
}

.home-bridge-1::before {
  background: radial-gradient(circle, rgba(66, 99, 235, 0.1) 0%, rgba(66, 99, 235, 0) 70%);
}

.home-bridge-2::before {
  background: radial-gradient(circle, rgba(245, 159, 0, 0.12) 0%, rgba(245, 159, 0, 0) 70%);
}

.home-bridge-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}

.home-bridge-text {
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--tblr-body-color);
  max-width: 620px;
  margin: 0;
}

.home-bridge-icon {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--tblr-bg-surface, #ffffff);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

.home-bridge-icon svg {
  width: 30px;
  height: 30px;
}

.home-bridge-1 .home-bridge-icon {
  color: #4263eb;
}

.home-bridge-2 .home-bridge-icon {
  color: #f59f00;
}

.home-bridge-badges {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.home-bridge-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--tblr-body-color);
  white-space: nowrap;
  background: var(--tblr-bg-surface, #ffffff);
  border-radius: 999px;
  padding: 10px 18px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.home-bridge-badge svg {
  color: #2fb344;
  flex-shrink: 0;
}

@media (max-width: 767.98px) {
  .home-bridge {
    padding: 2.5rem 0;
  }
  .home-bridge-inner {
    flex-direction: column;
    align-items: flex-start;
  }
  .home-bridge-text {
    font-size: 1.15rem;
  }
  .home-bridge-icon {
    width: 52px;
    height: 52px;
  }
  .home-bridge-icon svg {
    width: 24px;
    height: 24px;
  }
}