/* GenyConnect VPN mobile clarity pass — 2026-10-12.
   Scoped visual refinements; checkout and subscriber data remain unchanged. */
.account-dashboard .gc-vpn-intro{
  gap:14px;
  padding:18px;
  border-radius:18px;
  background:color-mix(in srgb,var(--primary) 4%,var(--paper));
  border-color:color-mix(in srgb,var(--primary) 22%,var(--line));
  box-shadow:none;
}
.account-dashboard .gc-vpn-intro-copy{gap:5px}
.account-dashboard .gc-vpn-eyebrow{
  font-size:.63rem;
  font-weight:850;
  letter-spacing:.06em;
  line-height:1.25;
}
.account-dashboard .gc-vpn-intro-copy>strong{
  font-size:1.12rem;
  letter-spacing:-.015em;
  line-height:1.32;
}
.account-dashboard .gc-vpn-intro-copy>small{
  max-width:600px;
  font-size:.73rem;
  line-height:1.62;
}
.account-dashboard .gc-vpn-modes{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:4px;
  min-width:0;
  padding:4px;
  border:1px solid color-mix(in srgb,var(--primary) 12%,var(--line));
  border-radius:14px;
  background:color-mix(in srgb,var(--soft) 72%,var(--paper));
}
.account-dashboard .gc-vpn-modes>.gc-vpn-mode{
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:center;
  gap:9px;
  width:100%;
  min-width:0;
  min-height:51px;
  padding:10px 9px;
  border:1px solid transparent;
  border-radius:10px;
  background:transparent;
  box-shadow:none;
  color:var(--muted);
  text-align:center;
  font:inherit;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:background .15s ease,color .15s ease,border-color .15s ease;
}
.account-dashboard .gc-vpn-modes>.gc-vpn-mode.is-active{
  background:var(--paper);
  color:var(--ink);
  border-color:color-mix(in srgb,var(--primary) 19%,var(--line));
  box-shadow:0 1px 6px color-mix(in srgb,var(--ink) 6%,transparent);
}
.account-dashboard .gc-vpn-modes>.gc-vpn-mode:not(.is-active):hover{
  background:color-mix(in srgb,var(--paper) 55%,transparent);
}
.account-dashboard .gc-vpn-modes>.gc-vpn-mode:focus-visible{
  outline:2px solid var(--primary);
  outline-offset:2px;
}
.account-dashboard .gc-vpn-modes .gc-vpn-mode-svg{
  display:block;
  flex:0 0 19px;
  width:19px;
  height:19px;
  min-width:19px;
  stroke:currentColor;
  color:inherit;
}
.account-dashboard .gc-vpn-modes .gc-vpn-mode-title{
  display:block;
  flex:0 1 auto;
  min-width:0;
  font-size:.79rem;
  line-height:1.32;
  font-weight:820;
  overflow-wrap:anywhere;
  white-space:normal;
}
.account-dashboard .gc-vpn-modes .gc-vpn-mode-count{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  min-width:21px;
  height:21px;
  padding:1px 5px;
  border-radius:999px;
  background:color-mix(in srgb,var(--primary) 12%,var(--paper));
  color:var(--primary);
  font-size:.67rem;
  line-height:1;
  font-weight:850;
  font-variant-numeric:tabular-nums;
}

/* Clear purchase/ownership distinction. A subscriber does not need a fresh
   dollar and GENY sales quote for an already-active country. */
.account-dashboard .account-service-plans.gc-shop-grid{
  gap:12px;
}
.account-dashboard .gc-shop-card{
  gap:12px;
  border-radius:18px;
  padding:18px;
  border-color:color-mix(in srgb,var(--primary) 16%,var(--line));
  box-shadow:0 4px 15px color-mix(in srgb,var(--ink) 3%,transparent);
}
.account-dashboard .gc-shop-card.is-owned{
  background:color-mix(in srgb,var(--primary) 2%,var(--paper));
  border-color:color-mix(in srgb,var(--primary) 28%,var(--line));
}
.account-dashboard .gc-shop-country{
  flex-wrap:nowrap;
  align-items:center;
  gap:12px;
}
.account-dashboard .gc-shop-flag{
  flex:0 0 46px;
  width:46px;
  height:46px;
  border-radius:13px;
  font-size:1.58rem;
}
.account-dashboard .gc-shop-country-copy{
  min-width:0;
  gap:3px;
}
.account-dashboard .gc-shop-country-copy strong{
  font-size:1.03rem;
  line-height:1.32;
}
.account-dashboard .gc-shop-country-copy small{
  font-size:.63rem;
  line-height:1.2;
}
.account-dashboard .gc-shop-owned{
  flex:0 0 auto;
  margin-inline-start:auto;
  min-height:27px;
  padding:5px 10px;
  font-size:.66rem;
  line-height:1.2;
}
.account-dashboard .gc-shop-active-note{
  margin:2px 0 3px;
  padding:12px 13px;
  border-radius:11px;
  background:color-mix(in srgb,var(--primary) 7%,var(--paper));
  color:var(--muted);
  font-size:.75rem;
  line-height:1.65;
}
.account-dashboard .gc-shop-card.is-owned .gc-shop-action.button{
  margin-top:2px;
  min-height:45px;
  border-radius:11px;
  border-color:color-mix(in srgb,var(--primary) 28%,var(--line));
  background:var(--paper);
  color:var(--ink);
  box-shadow:none;
}
.account-dashboard .gc-shop-card.is-owned .gc-shop-action.button:hover{
  background:color-mix(in srgb,var(--primary) 10%,var(--paper));
}
.account-dashboard .gc-shop-duration{
  padding:8px 11px;
  font-size:.71rem;
  border-radius:10px;
}
.account-dashboard .gc-shop-price-row{
  display:grid;
  gap:9px;
  justify-items:start;
  align-content:start;
  width:100%;
  padding:13px 14px;
  border:1px solid color-mix(in srgb,var(--primary) 10%,var(--line));
  border-radius:13px;
  background:color-mix(in srgb,var(--soft) 36%,var(--paper));
}
.account-dashboard .gc-shop-price-caption{
  font-size:.66rem;
  font-weight:750;
}
.account-dashboard .gc-shop-price.gc-shop-usd-base{
  display:inline-flex;
  direction:ltr;
  unicode-bidi:isolate;
  align-items:baseline;
  gap:7px;
}
.account-dashboard .gc-shop-usd-base strong{
  font-size:1.8rem;
  font-weight:860;
  letter-spacing:-.025em;
  line-height:1.15;
}
.account-dashboard .gc-shop-usd-base span{
  font-size:.69rem;
  font-weight:760;
}
.account-dashboard .gc-shop-geny-quote{
  display:grid;
  align-content:start;
  justify-items:start;
  gap:4px;
  width:100%;
  margin-top:2px;
  padding-top:10px;
  border-top:1px solid color-mix(in srgb,var(--primary) 10%,var(--line));
}
.account-dashboard .gc-shop-quote-label{
  font-size:.67rem;
  line-height:1.45;
  color:var(--muted);
}
.account-dashboard .gc-shop-geny-quote>bdi.gc-shop-quote-number{
  display:inline-flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:flex-start;
  gap:6px;
  direction:ltr;
  unicode-bidi:isolate;
  max-width:100%;
  color:var(--primary);
  line-height:1.3;
  white-space:normal;
  overflow-wrap:anywhere;
}
.account-dashboard .gc-shop-geny-quote>bdi.gc-shop-quote-number strong{
  font-size:.94rem;
  font-weight:840;
  color:var(--primary);
  letter-spacing:0;
  font-variant-numeric:tabular-nums;
}
.account-dashboard .gc-shop-quote-number span{
  font-size:.77rem;
  font-weight:790;
  color:var(--primary);
}
.account-dashboard .gc-shop-quote-hint{
  font-size:.61rem;
  line-height:1.5;
  color:var(--muted);
}
.account-dashboard .gc-shop-feature{
  margin:0;
  font-size:.7rem;
  line-height:1.5;
}
.account-dashboard .gc-shop-action.button{
  min-height:46px;
  border-radius:11px;
  font-size:.77rem;
  padding:11px;
}
.account-dashboard .gc-shop-pay-note{
  margin:0;
  font-size:.66rem;
  line-height:1.65;
}
@media(max-width:760px){
  .account-dashboard .gc-vpn-intro{
    padding:15px;
    gap:12px;
  }
  .account-dashboard .gc-vpn-intro-copy>strong{
    font-size:1.01rem;
  }
  .account-dashboard .gc-vpn-intro-copy>small{
    font-size:.69rem;
  }
  .account-dashboard .gc-vpn-modes>.gc-vpn-mode{
    min-height:49px;
    padding:9px 6px;
    gap:6px;
  }
  .account-dashboard .gc-vpn-modes .gc-vpn-mode-svg{
    flex-basis:17px;
    width:17px;
    height:17px;
    min-width:17px;
  }
  .account-dashboard .gc-vpn-modes .gc-vpn-mode-title{
    font-size:.73rem;
    line-height:1.24;
  }
  .account-dashboard .gc-vpn-modes .gc-vpn-mode-count{
    min-width:19px;
    height:19px;
    font-size:.62rem;
  }
  .account-dashboard .gc-shop-card{
    padding:15px;
    gap:11px;
  }
  .account-dashboard .gc-shop-price-row{
    padding:12px;
  }
  .account-dashboard .gc-shop-usd-base strong{
    font-size:1.72rem;
  }
  .account-dashboard .gc-shop-geny-quote>bdi.gc-shop-quote-number strong{
    font-size:.9rem;
  }
}
@media(max-width:375px){
  .account-dashboard .gc-vpn-modes>.gc-vpn-mode{
    gap:5px;
    padding-inline:4px;
  }
  .account-dashboard .gc-vpn-modes .gc-vpn-mode-title{
    font-size:.68rem;
  }
  .account-dashboard .gc-vpn-modes .gc-vpn-mode-svg{
    flex-basis:16px;
    width:16px;
    min-width:16px;
    height:16px;
  }
  .account-dashboard .gc-shop-flag{
    flex-basis:41px;
    width:41px;
    height:41px;
  }
}
@media(prefers-reduced-motion:reduce){
  .account-dashboard .gc-vpn-modes>.gc-vpn-mode{
    transition:none;
  }
}