/* ==========================================================================
   SOTS — Country gate (non-dismissible country selector)
   Uses the site's existing tokens: navy / red / gold, Plus Jakarta Sans.
   ========================================================================== */

.cgate{
  position:fixed; inset:0; z-index:5000;
  display:none; align-items:center; justify-content:center;
  padding:20px;
  background:radial-gradient(circle at 20% 10%, rgba(197,22,44,.30), transparent 45%),
             radial-gradient(circle at 85% 85%, rgba(217,173,82,.28), transparent 45%),
             rgba(4,18,31,.86);
  -webkit-backdrop-filter:blur(9px); backdrop-filter:blur(9px);
}
.cgate.is-open{display:flex}
body.cgate-locked{overflow:hidden}

.cgate-card{
  width:min(560px,100%);
  max-height:min(720px, calc(100dvh - 40px));
  display:flex; flex-direction:column;
  background:#fff;
  border-radius:30px;
  overflow:hidden;
  box-shadow:0 50px 120px rgba(2,14,25,.55), 0 0 0 1px rgba(255,255,255,.4);
  animation:cgate-in .42s cubic-bezier(.16,.84,.44,1) both;
}
@keyframes cgate-in{
  from{opacity:0; transform:translateY(26px) scale(.97)}
  to{opacity:1; transform:none}
}

/* ---------- header ---------- */
.cgate-head{
  position:relative;
  padding:30px 28px 22px;
  background:linear-gradient(140deg,#071f35 0%,#0b314f 62%,#123f63 100%);
  color:#fff;
}
.cgate-head:before{
  content:''; position:absolute; right:-70px; top:-90px;
  width:250px; height:250px; border-radius:50%;
  background:rgba(217,173,82,.20);
}
.cgate-head:after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:3px;
  background:linear-gradient(90deg,var(--red,#c5162c) 0 34%,var(--gold,#d9ad52) 34% 68%,rgba(255,255,255,.35) 68%);
}
.cgate-mark{
  position:relative; z-index:2;
  display:flex; align-items:center; gap:12px; margin-bottom:16px;
}
.cgate-mark img{
  width:46px; height:46px; border-radius:50%; background:#fff;
  object-fit:contain; flex:none;
}
.cgate-mark span{
  font-size:11px; font-weight:900; letter-spacing:.2em;
  color:var(--gold,#d9ad52);
}
.cgate-head h2{
  position:relative; z-index:2;
  margin:0 0 8px; font-size:clamp(23px,4.6vw,30px);
  line-height:1.12; letter-spacing:-.035em; font-weight:900;
}
.cgate-head p{
  position:relative; z-index:2;
  margin:0 0 20px; font-size:14.5px; line-height:1.55;
  color:rgba(255,255,255,.80); max-width:44ch;
}

/* ---------- search ---------- */
.cgate-search{position:relative; z-index:2}
.cgate-search i{
  position:absolute; left:19px; top:50%; transform:translateY(-50%);
  font-size:15px; color:#8496a8; pointer-events:none;
}
.cgate-search input{
  width:100%; font:inherit; font-size:15.5px; font-weight:600;
  padding:16px 18px 16px 48px;
  border:0; border-radius:16px; outline:0;
  background:#fff; color:#061b2d;
  box-shadow:0 10px 30px rgba(2,14,25,.28);
  -webkit-appearance:none; appearance:none;
}
.cgate-search input::placeholder{color:#93a2b2; font-weight:500}
.cgate-search input::-webkit-search-cancel-button{display:none}
.cgate-search input:focus-visible{box-shadow:0 0 0 3px var(--gold,#d9ad52), 0 10px 30px rgba(2,14,25,.28)}

/* ---------- list ---------- */
.cgate-list{
  flex:1 1 auto; min-height:150px; overflow-y:auto;
  padding:10px; scrollbar-width:thin;
  overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
}
.cgate-group{
  padding:14px 14px 7px;
  font-size:11px; font-weight:900; letter-spacing:.14em;
  color:#8a99a9;
}
.cgate-group + .cgate-group{border-top:1px solid #eef2f6; margin-top:6px}

.cgate-opt{
  width:100%; display:flex; align-items:center; gap:14px;
  padding:12px 14px; border:0; border-radius:14px;
  background:transparent; text-align:left; cursor:pointer;
  font:inherit; font-size:15.5px; font-weight:750; color:#12293e;
  transition:background .16s ease, color .16s ease;
}
.cgate-opt:hover,.cgate-opt.is-active{background:#f4f7fa}
.cgate-opt:focus-visible{outline:2px solid var(--red,#c5162c); outline-offset:-2px}
.cgate-flag{
  font-size:24px; line-height:1; flex:none; width:32px;
  text-align:center; filter:saturate(1.05);
}
.cgate-name{flex:1 1 auto; min-width:0}
.cgate-badge{
  flex:none; font-size:10.5px; font-weight:900; letter-spacing:.07em;
  padding:5px 10px; border-radius:999px;
  background:#fdeff1; color:var(--red,#c5162c);
}
.cgate-tick{
  flex:none; width:22px; height:22px; border-radius:50%;
  border:2px solid #d3dce5; display:grid; place-items:center;
  color:#fff; font-size:10px;
}
.cgate-opt[aria-selected="true"]{background:#071f35; color:#fff}
.cgate-opt[aria-selected="true"] .cgate-badge{background:rgba(217,173,82,.22); color:var(--gold,#d9ad52)}
.cgate-opt[aria-selected="true"] .cgate-tick{background:var(--red,#c5162c); border-color:var(--red,#c5162c)}

.cgate-empty{
  padding:38px 24px; text-align:center; color:#6b7a8b;
  font-size:14.5px; line-height:1.6;
}
.cgate-empty strong{display:block; color:#12293e; font-size:16px; margin-bottom:5px}

/* ---------- footer ---------- */
.cgate-foot{
  flex:none; display:flex; align-items:center; gap:14px;
  padding:16px 20px; border-top:1px solid #e8edf3; background:#fbfcfe;
}
.cgate-status{
  flex:1 1 auto; min-width:0; font-size:13px; font-weight:700;
  color:#6b7a8b; line-height:1.4;
}
.cgate-status b{color:#12293e}
.cgate-go{
  flex:none; font:inherit; font-weight:900; font-size:15px;
  padding:14px 26px; border:0; border-radius:999px; cursor:pointer;
  background:var(--red,#c5162c); color:#fff;
  box-shadow:0 12px 26px rgba(197,22,44,.26);
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.cgate-go:hover:not(:disabled){transform:translateY(-2px); box-shadow:0 18px 34px rgba(197,22,44,.32)}
.cgate-go:disabled{background:#dfe5ec; color:#93a2b2; box-shadow:none; cursor:not-allowed}
.cgate-go:focus-visible{outline:3px solid var(--gold,#d9ad52); outline-offset:2px}

/* ---------- the "your region" chip left on the page afterwards ---------- */
.region-chip{
  display:inline-flex; align-items:center; gap:9px;
  padding:9px 15px; border-radius:999px;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.10);
  color:#fff; font-size:12.5px; font-weight:800; cursor:pointer;
  font-family:inherit; transition:background .2s ease, border-color .2s ease;
}
.region-chip:hover{background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.4)}
.region-chip .cgate-flag{font-size:17px; width:auto}
.region-chip u{text-decoration:none; color:var(--gold,#d9ad52)}
.region-chip.on-light{
  border-color:#e0e7ee; background:#fff; color:#12293e;
  box-shadow:0 6px 20px rgba(6,31,53,.08);
}
.region-chip.on-light u{color:var(--red,#c5162c)}

/* ---------- responsive ---------- */
@media (max-width:600px){
  .cgate{padding:0; align-items:flex-end}
  .cgate-card{
    width:100%; max-height:94dvh;
    border-radius:26px 26px 0 0;
  }
  @keyframes cgate-in{
    from{opacity:0; transform:translateY(70px)}
    to{opacity:1; transform:none}
  }
  .cgate-head{padding:22px 20px 18px}
  .cgate-head p{margin-bottom:16px; font-size:14px}
  .cgate-list{padding:8px}
  .cgate-opt{padding:14px 12px}
  .cgate-foot{padding:14px; gap:10px}
  .cgate-status{font-size:12px}
  .cgate-go{padding:14px 20px; font-size:14.5px}
}
@media (max-width:380px){
  .cgate-status{display:none}
  .cgate-go{flex:1 1 auto}
}

@media (prefers-reduced-motion:reduce){
  .cgate-card{animation:none}
  .cgate-go:hover:not(:disabled){transform:none}
}