:root{
  --bg0:#050914;
  --bg1:#070c1a;
  --text:#e9f2ff;
  --muted:rgba(233,242,255,.72);
  --glass:rgba(255,255,255,.08);
  --glass2:rgba(255,255,255,.12);
  --stroke:rgba(255,255,255,.16);
  --cyan:#22d3ee;
  --purple:#a855f7;
}

/* ===== Baseline safety (prevents text/layout overflow) ===== */
.bridge-theme, .bridge-theme * , .bridge-theme *::before, .bridge-theme *::after{box-sizing:border-box;}
.bridge-theme img, .bridge-theme svg, .bridge-theme video{max-width:100%; height:auto;}
.bridge-theme input, .bridge-theme select, .bridge-theme textarea, .bridge-theme button{max-width:100%;}

/* Allow long strings (country names, plan titles, emails) to wrap instead of breaking layout */
.bridge-title, .bridge-page-title{overflow-wrap:anywhere; word-break:break-word;}
.bridge-card, .bridge-step, .bridge-country{min-width:0;}

/* Generic panels inside cards (use instead of .bridge-step for wrappers) */
.bridge-panel{
  border-radius: 14px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
}

/* Two-column desktop layout that never overflows */
.bridge-2col{
  display:grid;
  grid-template-columns: minmax(0,1fr) 360px;
  gap: 1rem;
}
@media (max-width: 980px){
  .bridge-2col{grid-template-columns: 1fr;}
  .bridge-2col .bridge-aside{order:-1;}
}

/* Order/cart rows: wrap safely */
.bridge-row{
  display:flex;
  gap: 1rem;
  align-items:center;
  justify-content: space-between;
  flex-wrap:wrap;
  min-width:0;
}
.bridge-row-main{display:flex; gap:.6rem; align-items:center; min-width:0; flex:1;}
.bridge-row-text{min-width:0;}
.bridge-row-title{font-weight:900; overflow-wrap:anywhere; word-break:break-word;}
.bridge-row-sub{opacity:.86; font-weight:700; overflow-wrap:anywhere; word-break:break-word;}

/* Checkout form grid */
.bridge-form-grid{display:grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap:.75rem;}
@media (max-width: 760px){.bridge-form-grid{grid-template-columns: 1fr;}}

/* Theme hooks from base.html */
.bridge-theme{background:var(--bg0); color:var(--text);}

.bridge-header{
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(6,10,24,.35);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255,255,255,.08);
  box-shadow: none;
}

.bridge-brand{
  display:flex;
  gap:.6rem;
  align-items:center;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text);
}

.bridge-navlink{color: rgba(233,242,255,.85);}
.bridge-navlink:hover{color:#fff;}

.bridge-cta{
  margin-left: .25rem;
  display:inline-flex;
  align-items:center;
  border-radius: 9999px;
  padding:.55rem 1rem;
  font-weight: 800;
  color: #06101a;
  background: linear-gradient(90deg, var(--cyan), var(--purple));
  border: 1px solid rgba(255,255,255,.18);
}
.bridge-cta:hover{filter: brightness(1.05);}

/* Hero */
.bridge-hero{
  position: relative;
  min-height: calc(100vh - 72px);
  overflow:hidden;
}

.bridge-bg{position:absolute; inset:0;}
.bridge-grad{
  position:absolute; inset:-20%;
  background:
    radial-gradient(900px 520px at 20% 35%, rgba(34,211,238,.22), transparent 60%),
    radial-gradient(900px 520px at 70% 55%, rgba(168,85,247,.18), transparent 62%),
    radial-gradient(520px 360px at 50% 10%, rgba(56,189,248,.16), transparent 60%),
    linear-gradient(180deg, var(--bg1), var(--bg0));
}

.bridge-noise{
  position:absolute; inset:0;
  opacity:.08;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

.bridge-map{
  position:absolute;
  left: 50%;
  top: 46%;
  transform: translate(-50%,-50%);
  width: min(1200px, 92vw);
  opacity: .9;
  filter: drop-shadow(0 0 18px rgba(34,211,238,.18));
  pointer-events:none;
}

.bridge-glow{position:absolute; width:520px; height:520px; border-radius:9999px; filter: blur(40px); opacity:.6;}
.bridge-glow-a{left:-140px; top:20%; background: rgba(34,211,238,.18);}
.bridge-glow-b{right:-180px; top:10%; background: rgba(168,85,247,.16);}

.bridge-shell{position:relative; max-width: 1120px; margin: 0 auto; padding: 4.2rem 1rem 3.2rem;}

.bridge-grid{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 2.4rem;
  align-items:center;
}

@media (max-width: 980px){
  .bridge-grid{grid-template-columns: 1fr; gap: 2rem;}
  .bridge-phone-wrap{order: -1; justify-self:center;}
}

/* Glass card */
.bridge-card{
  width: min(520px, 92vw);
  padding: 2.2rem 2.1rem;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
  border: 1px solid rgba(255,255,255,.16);
  box-shadow:
    0 18px 60px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.12);
  backdrop-filter: blur(14px);
}

.bridge-title{
  font-size: clamp(2.4rem, 3.6vw, 3.3rem);
  line-height: 1.02;
  font-weight: 800;
  letter-spacing: -0.04em;
  margin: 0 0 1.4rem;
}

.bridge-sub{color: var(--muted); line-height: 1.55;}

.bridge-form{margin-top: .5rem;}
.bridge-label{display:block; font-size:.95rem; color: var(--muted); margin-bottom:.55rem;}

.bridge-inputrow{margin-bottom: 1.1rem;}
.bridge-input{
  width:100%;
  border-radius: 12px;
  padding: .9rem 1rem;
  background: rgba(10,16,34,.45);
  border: 1px solid rgba(255,255,255,.14);
  color: var(--text);
  outline:none;
}
.bridge-input::placeholder{color: rgba(233,242,255,.45);}
.bridge-input:focus{border-color: rgba(34,211,238,.42); box-shadow: 0 0 0 3px rgba(34,211,238,.12);}

.bridge-btn{
  width: 100%;
  border-radius: 12px;
  padding: .95rem 1rem;
  font-weight: 800;
  color: #06101a;
  background: linear-gradient(90deg, var(--cyan), var(--purple));
  border: 1px solid rgba(255,255,255,.18);
}
.bridge-btn:hover{filter: brightness(1.06);}

/* Compact CTA for narrow cards (e.g., plan list) */
.bridge-btn--compact{
  width: auto;
  padding: .55rem .9rem;
  border-radius: 9999px;
  font-weight: 900;
}

.bridge-dots{display:flex; gap:.45rem; justify-content:center; margin-top: 1.3rem; opacity:.55;}
.bridge-dots span{width:6px; height:6px; border-radius:9999px; background: rgba(233,242,255,.55);}
.bridge-dots span:nth-child(2){opacity:.9;}

/* Phone */
.bridge-phone-wrap{justify-self:end;}
.bridge-phone{
  width: min(320px, 78vw);
  aspect-ratio: 9 / 18.5;
  border-radius: 42px;
  background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.07));
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 30px 90px rgba(0,0,0,.55);
  position: relative;
  padding: 12px;
}
.bridge-phone::before{
  content:"";
  position:absolute;
  inset: 10px;
  border-radius: 34px;
  background: linear-gradient(180deg, rgba(7,12,26,.85), rgba(5,9,20,.92));
}
.bridge-phone-notch{
  position:absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 44%;
  height: 26px;
  border-radius: 0 0 16px 16px;
  background: rgba(0,0,0,.55);
  z-index: 3;
}
.bridge-phone-screen{position:absolute; inset: 22px; border-radius: 30px; overflow:hidden; z-index:2;}

.bridge-phone-screen{
  background:
    radial-gradient(420px 260px at 55% 40%, rgba(34,211,238,.22), transparent 60%),
    radial-gradient(420px 260px at 45% 70%, rgba(168,85,247,.18), transparent 60%),
    linear-gradient(180deg, rgba(7,12,26,.95), rgba(5,9,20,.96));
}

.bridge-esim-chip{
  position:absolute;
  left:50%;
  top: 44%;
  transform: translate(-50%,-50%);
  width: 140px;
  height: 140px;
  border-radius: 9999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 0 40px rgba(34,211,238,.18);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction: column;
}

.bridge-esim-rect{
  width: 52px;
  height: 68px;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(34,211,238,.85), rgba(168,85,247,.75));
  box-shadow: 0 0 24px rgba(34,211,238,.24);
  position: relative;
}
.bridge-esim-rect::after{
  content:"";
  position:absolute;
  inset: 10px;
  border-radius: 6px;
  border: 2px solid rgba(6,16,26,.55);
}
.bridge-esim-text{margin-top: .55rem; font-size:.85rem; color: rgba(233,242,255,.78);}

.bridge-orbit{
  position:absolute;
  left:50%;
  top: 52%;
  transform: translate(-50%,-50%) rotate(18deg);
  width: 220px;
  height: 140px;
  border-radius: 9999px;
  border: 1px solid rgba(34,211,238,.26);
  box-shadow: 0 0 30px rgba(34,211,238,.12);
  opacity: .75;
}
.bridge-orbit::after{
  content:"";
  position:absolute;
  width: 10px;
  height: 10px;
  border-radius: 9999px;
  background: rgba(34,211,238,.9);
  left: 14px;
  top: 18px;
  box-shadow: 0 0 18px rgba(34,211,238,.45);
}
.bridge-orbit-2{
  transform: translate(-50%,-50%) rotate(-22deg);
  width: 250px;
  height: 160px;
  border-color: rgba(168,85,247,.22);
  opacity: .6;
}

/* Links row */
.bridge-links{
  display:flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 2.2rem;
  color: rgba(233,242,255,.72);
}
.bridge-link{padding:.75rem 0; border-bottom: 1px solid rgba(255,255,255,.10); flex:1; text-align:center;}
.bridge-link:hover{color:#fff; border-bottom-color: rgba(34,211,238,.35);}

/* Countries grid (desktop-first) */
.bridge-country-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: .85rem;
}
@media (max-width: 980px){
  .bridge-country-grid{grid-template-columns: repeat(2, minmax(0,1fr));}
}

.bridge-country{
  display:flex;
  align-items:center;
  gap:.7rem;
  padding: .95rem 1rem;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
  border: 1px solid rgba(255,255,255,.16);
  text-decoration:none;
  color: var(--text);
  box-shadow: 0 16px 40px rgba(0,0,0,.28);
  transition: transform .15s ease, filter .15s ease;
}
.bridge-country:hover{transform: translateY(-1px); filter: brightness(1.04);}

.bridge-flag-img{
  width: 24px;
  height: 18px;
  border-radius: 4px;
  object-fit: cover;
  box-shadow: 0 8px 20px rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.18);
}
.bridge-flag-emoji{display:inline-block; font-size: 1.2rem; line-height:1; opacity:.95; font-family: "Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",system-ui,sans-serif;}

/* If emoji flags are not rendered on the OS/font stack, show ISO2 as a readable fallback */
.bridge-flag-iso{
  display:inline-block;
  font-size: .72rem;
  line-height: 1;
  padding: .18rem .34rem;
  border-radius: 6px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.24);
  color: rgba(255,255,255,.95);
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.bridge-country-name{font-weight: 800; letter-spacing: -0.02em;}

/* Popular pills (home) */
.bridge-popular-title{font-weight:800; opacity:.92; margin-bottom:.6rem;}
.bridge-popular-grid{display:flex; flex-wrap:wrap; gap:.5rem;}
.bridge-popular-pill{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.45rem .7rem;
  border-radius: 9999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(233,242,255,.92);
  text-decoration:none;
  font-weight:700;
  font-size:.92rem;
}
.bridge-popular-pill .bridge-flag-img{width:20px; height:15px; border-radius:3px;}
.bridge-popular-pill:hover{filter:brightness(1.05);}

/* Lower sections */
.bridge-sections{margin-top: 3rem;}
.bridge-section{padding: 2.2rem 0; border-top: 1px solid rgba(255,255,255,.08);}
.bridge-section h2{font-size: 1.4rem; font-weight: 800; margin-bottom: 1.1rem;}

.bridge-steps{display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: .9rem;}
@media (max-width: 760px){.bridge-steps{grid-template-columns: 1fr;}}

.bridge-step{
  border-radius: 14px;
  padding: 1rem 1rem;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  display:flex;
  gap:.8rem;
  align-items:center;
}
.bridge-step b{
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(34,211,238,.16);
  border: 1px solid rgba(34,211,238,.22);
}
.bridge-step span{color: rgba(233,242,255,.78); font-weight: 600;}

.bridge-test{display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .9rem;}
@media (max-width: 760px){.bridge-test{grid-template-columns: 1fr;}}
.bridge-quote{
  border-radius: 14px;
  padding: 1rem 1rem;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(233,242,255,.78);
}

/* ===== Extra landing pages ===== */
.bridge-page{
  position: relative;
  min-height: calc(100vh - 72px);
  overflow:hidden;
}

.bridge-page .bridge-shell{padding: 3.2rem 1rem 4rem;}

.bridge-page-head{
  display:flex;
  align-items:flex-end;
  justify-content: space-between;
  gap: 1.2rem;
  margin-bottom: 1.6rem;
}
@media (max-width: 760px){
  .bridge-page-head{flex-direction: column; align-items:flex-start;}
}

.bridge-page-title{
  font-size: clamp(2rem, 3vw, 2.8rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  margin: 0;
}

.bridge-page-sub{
  margin: .35rem 0 0;
  color: rgba(233,242,255,.72);
  max-width: 52ch;
}

.bridge-page-actions{display:flex; gap:.6rem; flex-wrap:wrap;}
.bridge-pill{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.55rem .9rem;
  border-radius: 9999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(233,242,255,.85);
}
.bridge-pill:hover{border-color: rgba(34,211,238,.30); color:#fff;}

.bridge-cards{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 1rem;
}
@media (max-width: 980px){.bridge-cards{grid-template-columns: 1fr;}}

.bridge-card2{
  border-radius: 18px;
  padding: 1.25rem 1.25rem;
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
  backdrop-filter: blur(14px);
}

.bridge-card2 h3{font-weight: 800; margin: 0 0 .55rem;}
.bridge-card2 p{color: rgba(233,242,255,.72); margin: 0;}

.bridge-kv{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: .8rem;
  margin-top: 1rem;
}
@media (max-width: 760px){.bridge-kv{grid-template-columns: 1fr;}}

.bridge-kv-item{
  border-radius: 14px;
  padding: .9rem 1rem;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
}
.bridge-kv-item b{display:block; color:#fff; margin-bottom:.25rem;}
.bridge-kv-item span{color: rgba(233,242,255,.72);}

/* ===== Mobile overrides for Cart + Checkout (inline-style safe) ===== */
@media (max-width: 980px){
  /* Force the 2-column layouts to stack even if template sets inline grid-template-columns */
  .bridge-2col{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  /* Prevent sticky sidebar from creating weird horizontal overflow on mobile */
  .bridge-2col > aside{
    position: static !important;
    top: auto !important;
    height: auto !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Make cards breathe better on small screens */
  .bridge-card{
    padding: 1.25rem !important;
    border-radius: 20px !important;
  }

  /* Headings: override inline font sizes for mobile */
  .bridge-title{
    font-size: 2rem !important;
    line-height: 1.05 !important;
  }

  /* Checkout form: stack the 2-column inputs */
  .bridge-form-grid{
    grid-template-columns: 1fr !important;
  }

  /* Ensure all inputs are full width (especially the custom delivery_email input) */
  .bridge-theme .form-control{
    width: 100% !important;
    display: block !important;
    border-radius: 12px;
    padding: .9rem 1rem;
    background: rgba(10,16,34,.45);
    border: 1px solid rgba(255,255,255,.14);
    color: var(--text);
    outline: none;
  }
  .bridge-theme .form-control::placeholder{color: rgba(233,242,255,.45);}
  .bridge-theme .form-control:focus{border-color: rgba(34,211,238,.42); box-shadow: 0 0 0 3px rgba(34,211,238,.12);}

  /* Safety: prevent sideways scrolling caused by long content */
  .bridge-card, .bridge-panel, .bridge-row, .bridge-2col > div, .bridge-2col > aside{min-width:0;}
}