/* ============================================================
 * 922 Classic — TIER 1 overlay
 * Source: extracted from web.archive.org piaproxy.com (2024)
 * Loaded AFTER main CSS, overrides selectively.
 * Rollback: remove <link rel="stylesheet" href="/css/pia-classic.css">
 * ============================================================ */

:root{
  --pia-blue:        #ec5b4e;   /* keep current modern blue as default */
  --pia-blue-deep:   #ec5b4e;   /* authentic 922 primary blue */
  --pia-blue-hover:  #16396C;   /* authentic 922 hover (deep navy) */
  --pia-orange:      #FF8822;   /* 922 accent orange */
  --pia-navy:        #042040;   /* authentic 922 body text */
  --pia-slate:       #55687D;   /* authentic 922 secondary text */
  --pia-line:        #DEE0E9;   /* authentic 922 border colour */
}

/* ── 1. Open Sans as primary font (with Inter / 'Helvetica Neue' fallback) ── */
body,
h1,h2,h3,h4,h5,h6,
.hero h1, .hero h1 span,
.hero p, .hero .eyebrow,
.btn-primary,
.btn-secondary,
.section-head,
.section-head h2,
.section-head p,
input,button,select,textarea,
.type-card h3, .home-plan, .compare,
.coverage-section h2{
  font-family:'Helvetica Neue','Inter','Helvetica Neue',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif !important;
}
/* Stronger letter spacing tweak for headings — Open Sans needs slightly less tight tracking */
.hero h1{
  letter-spacing:-1.4px !important;
  font-weight:800 !important;
}
.hero h1 span{
  font-weight:700 !important;
}
.section-head h2, h2{
  letter-spacing:-.6px !important;
}

/* ── 2. Primary buttons — sharper corners (12-14 → 8px), 922-deep hover ── */
.btn-primary{
  border-radius:8px !important;
  transition:background-color .18s ease,box-shadow .18s ease,transform .12s ease;
}
.btn-primary:hover{
  background:var(--pia-blue-deep) !important;
  box-shadow:0 8px 22px rgba(14,111,222,.28) !important;
}
.btn-primary:active{
  background:var(--pia-blue-hover) !important;
}

/* Also sharpen the chat-launcher and coverage CTA */
.support-btn{border-radius:10px !important}
.coverage-more a{border-radius:8px !important}
.coverage-more a:hover{background:var(--pia-blue-deep) !important;border-color:var(--pia-blue-deep) !important}

/* ── 3. Orange "flag" accent on section heading bars (922 signature) ── */
.section-head{position:relative}
.section-head h2{
  position:relative;
  display:inline-block;
  padding-left:14px;
}
.section-head h2::before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
  width:3px;
  height:70%;
  background:var(--pia-orange);
  border-radius:1px;
}

/* Don't apply the bar on section-head where h2 is centred with em (coverage) */
.coverage-section .section-head h2{padding-left:0}
.coverage-section .section-head h2::before{display:none}

/* ── 4. Subtle 922-classic helpers (available as utility classes) ── */
.pia-accent{border-left:2px solid var(--pia-orange);padding-left:12px}
.pia-link-underline{position:relative;color:var(--pia-blue-deep);text-decoration:none;padding-bottom:2px}
.pia-link-underline::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--pia-blue-deep);transition:width .25s ease}
.pia-link-underline:hover::after{width:100%}

/* ── 5. Hero eyebrow badge — premium 922-classic ribbon ── */
.eyebrow{
  display:inline-flex !important;
  align-items:center !important;
  gap:10px !important;
  padding:9px 16px 9px 14px !important;
  background:linear-gradient(90deg, rgba(14,111,222,.22) 0%, rgba(14,111,222,.06) 100%) !important;
  border:none !important;
  border-left:3px solid var(--pia-orange) !important;
  border-radius:0 6px 6px 0 !important;
  color:#fff0ed !important;
  font-family:'Helvetica Neue','Helvetica Neue','Helvetica Neue',Inter,sans-serif !important;
  font-size:12px !important;
  font-weight:700 !important;
  letter-spacing:1.4px !important;
  text-transform:uppercase !important;
  margin-bottom:22px !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04) !important;
  text-shadow:0 1px 2px rgba(0,0,0,.25);
}
.eyebrow::before{
  content:"";
  width:8px;height:8px;border-radius:50%;
  background:#22c55e;
  box-shadow:0 0 0 0 rgba(34,197,94,.7);
  animation:eyebrowPulse 1.8s ease-out infinite;
  flex-shrink:0;
}
@keyframes eyebrowPulse{
  0%{box-shadow:0 0 0 0 rgba(34,197,94,.7)}
  70%{box-shadow:0 0 0 8px rgba(34,197,94,0)}
  100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}
}

/* ── 6. Support chat — PREMIUM larger button & avatar ── */
.support-widget{right:26px !important;bottom:26px !important}

/* The floating CTA button itself */
.support-btn{
  min-width:268px !important;
  height:72px !important;
  border-radius:18px !important;
  padding:8px 26px 8px 9px !important;
  gap:16px !important;
  background:linear-gradient(135deg, #08264d 0%, #ec5b4e 60%, #ec5b4e 100%) !important;
  box-shadow:
    0 18px 44px rgba(8,38,77,.35),
    0 4px 12px rgba(236,91,78,.30),
    inset 0 1px 0 rgba(255,255,255,.18) !important;
  border:1px solid rgba(255,255,255,.10) !important;
  transition:transform .18s ease, box-shadow .18s ease !important;
}
.support-btn:hover{
  transform:translateY(-2px) !important;
  box-shadow:
    0 22px 52px rgba(8,38,77,.42),
    0 8px 18px rgba(236,91,78,.40),
    inset 0 1px 0 rgba(255,255,255,.22) !important;
}

/* Avatar in the closed CTA button (was 44 → 56) */
.support-avatar{
  width:56px !important;
  height:56px !important;
  background:#0d3060 !important;
  border-radius:50% !important;
  overflow:hidden !important;
  padding:0 !important;
  border:2px solid rgba(255,255,255,.18) !important;
  box-shadow:0 2px 8px rgba(0,0,0,.22) !important;
}
.support-avatar img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  display:block !important;
}

/* Text block next to avatar */
.support-btn-text b{
  font-size:15.5px !important;
  font-weight:800 !important;
  letter-spacing:.1px !important;
  text-shadow:0 1px 2px rgba(0,0,0,.18) !important;
}
.support-btn-text span{
  font-size:12px !important;
  font-weight:600 !important;
  color:rgba(255,255,255,.85) !important;
  margin-top:3px !important;
  letter-spacing:.1px !important;
}

/* Green pulse dot — bigger & brighter for the bigger button */
.support-pulse{
  left:48px !important;
  top:8px !important;
  width:11px !important;
  height:11px !important;
  background:#22c55e !important;
  border:2px solid #08264d !important;
  box-shadow:0 0 0 0 rgba(34,197,94,.85) !important;
}

/* When the chat panel is open, the CTA shrinks back to just the avatar */
.support-widget.open .support-btn{
  min-width:64px !important;
  width:64px !important;
  height:64px !important;
  padding:4px !important;
  border-radius:50% !important;
}
.support-widget.open .support-avatar{
  width:54px !important;
  height:54px !important;
}

/* The mini avatar in the OPENED chat header */
.support-head-ava{
  width:44px !important;
  height:44px !important;
  background:#0d3060 !important;
  border:2px solid #0d3060 !important;
}
.support-head-ava .ava-inner{
  background:#0d3060 !important;
}
.support-head-ava .ava-inner img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
}
.support-head-ava::after{
  width:12px !important;
  height:12px !important;
  right:-2px !important;
  bottom:-2px !important;
  border-width:2.5px !important;
}
.support-head-info b{font-size:15px !important}
.support-head-info span{font-size:12px !important;margin-top:2px !important}

/* ── 9. Support chat panel — wider for readability ── */
.support-panel{
  width:min(440px, calc(100vw - 32px)) !important;
}
.support-body{
  max-height:440px !important;
  padding:14px 16px 6px !important;
}
.support-msg{
  font-size:13.5px !important;
  padding:10px 14px !important;
  max-width:86% !important;
}
.support-head{
  padding:13px 16px !important;
}
.support-head-info b{font-size:14px !important}
.support-head-info span{font-size:11.5px !important}
.support-form{padding:11px 14px !important}
.support-form input{font-size:13.5px !important;padding:10px 13px !important}
.support-form button{padding:10px 18px !important;font-size:13.5px !important}
.support-quick button{font-size:12px !important;padding:6px 12px !important}

/* ── 10. CHECKOUT MODAL — wider + 922 orange accents ── */
.pay-modal{padding:18px !important}
.pay-box{
  width:min(660px, 100%) !important;
  max-height:94vh !important;
  border-radius:16px !important;
  box-shadow:0 24px 70px rgba(4,18,36,.32) !important;
  border:1px solid #e3e8f1 !important;
  border-top:4px solid var(--pia-orange) !important;  /* signature 922 orange ribbon on top */
}
.pay-head{
  padding:20px 26px 16px !important;
  background:linear-gradient(180deg, #fafbfd 0%, #fff 100%) !important;
  border-bottom:1px solid #eef2f8 !important;
  position:relative !important;
}
.pay-head h3{
  font-size:20px !important;
  font-weight:800 !important;
  color:#08264d !important;
  letter-spacing:-.3px !important;
  position:relative !important;
  padding-left:14px !important;
}
.pay-head h3::before{
  content:"" !important;
  position:absolute !important;
  left:0 !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  width:3px !important;
  height:70% !important;
  background:var(--pia-orange) !important;
  border-radius:1px !important;
}
.pay-close{
  width:34px !important;
  height:34px !important;
  font-size:24px !important;
  border-radius:10px !important;
  transition:.15s !important;
}
.pay-close:hover{background:#f1f5f9 !important;color:#08264d !important}

.pay-body{padding:18px 26px 22px !important}

/* Selected plan / amount panel — orange-accented */
.pay-summary{
  background:linear-gradient(135deg, #fff7ec 0%, #f8fafc 100%) !important;
  border:1px solid #ffd9b3 !important;
  border-left:4px solid var(--pia-orange) !important;
  border-radius:12px !important;
  padding:14px 18px !important;
  margin-bottom:18px !important;
}
.pay-summary .pay-label{
  font-size:10.5px !important;
  font-weight:800 !important;
  color:#64748b !important;
  text-transform:uppercase !important;
  letter-spacing:1.2px !important;
  margin-bottom:4px !important;
}
.pay-summary .pay-value{
  font-size:17px !important;
  font-weight:800 !important;
  color:#08264d !important;
}
.pay-summary > div:last-child .pay-value{
  color:var(--pia-orange) !important;
  font-size:22px !important;
}

/* Coin chips — bigger, more readable */
.crypto-list{
  grid-template-columns:repeat(5,1fr) !important;
  gap:8px !important;
  margin:0 0 18px !important;
}
.crypto-btn{
  padding:10px 4px !important;
  font-size:11px !important;
  border-radius:10px !important;
  transition:.15s !important;
}
.crypto-btn:hover{
  border-color:#f3c7c1 !important;
  transform:translateY(-1px) !important;
}
.crypto-btn.active{
  border-color:var(--pia-orange) !important;
  background:#fff7ec !important;
  color:var(--pia-orange) !important;
  box-shadow:0 4px 12px rgba(245,166,35,.18) !important;
}
.crypto-btn .coin-icon{
  width:32px !important;
  height:32px !important;
  font-size:14px !important;
}
.crypto-btn b.coin-text{
  font-size:10.5px !important;
  font-weight:700 !important;
}
.crypto-btn b.coin-text span{
  font-size:8.5px !important;
  color:#94a3b8 !important;
  font-weight:600 !important;
  margin-top:1px !important;
}

/* Wallet box — orange accent border, BIG QR */
.wallet-box{
  background:linear-gradient(135deg, #f8fafc 0%, #fff5f3 100%) !important;
  border:1px solid #e3e8f1 !important;
  border-left:4px solid var(--pia-orange) !important;
  border-radius:14px !important;
  padding:20px !important;
  margin-bottom:16px !important;
  gap:22px !important;
  align-items:flex-start !important;
}
.qr{
  width:170px !important;
  height:170px !important;
  border-radius:12px !important;
  border:2px solid #fff !important;
  background:#fff !important;
  box-shadow:0 4px 14px rgba(8,38,77,.10), 0 0 0 1px #e3e8f1 !important;
  flex-shrink:0 !important;
}
.qr img{
  width:160px !important;
  height:160px !important;
  display:block !important;
}
#walletLabel{
  font-size:11.5px !important;
  font-weight:800 !important;
  color:#08264d !important;
  text-transform:uppercase !important;
  letter-spacing:1px !important;
}
.wallet-address{
  font-size:12.5px !important;
  line-height:1.5 !important;
  color:#0f1f3d !important;
  background:#fff !important;
  border:1px solid #eef2f8 !important;
  border-radius:6px !important;
  padding:6px 8px !important;
  margin:6px 0 8px !important;
}
.copy-btn{
  background:var(--pia-orange) !important;
  color:#fff !important;
  border:0 !important;
  border-radius:8px !important;
  padding:7px 14px !important;
  font-size:12px !important;
  font-weight:700 !important;
  cursor:pointer !important;
  transition:.15s !important;
  box-shadow:0 3px 10px rgba(245,166,35,.28) !important;
}
.copy-btn:hover{
  background:#e57610 !important;
  box-shadow:0 5px 14px rgba(245,166,35,.4) !important;
  transform:translateY(-1px) !important;
}

/* Email input — bigger, modern */
.pay-form label{
  font-size:11.5px !important;
  font-weight:800 !important;
  color:#475569 !important;
  letter-spacing:1px !important;
  margin-bottom:2px !important;
}
.pay-form input{
  padding:13px 14px !important;
  font-size:14px !important;
  border-radius:10px !important;
  border:1px solid #e2e8f0 !important;
}
.pay-form input:focus{
  border-color:var(--pia-orange) !important;
  box-shadow:0 0 0 3px rgba(245,166,35,.12) !important;
}

/* Continue button — 922 blue with confidence */
.pay-form button[type="submit"],
.pay-form .btn-primary,
.pay-form button.primary,
#payModal .btn-primary{
  padding:14px 18px !important;
  font-size:15px !important;
  font-weight:800 !important;
  border-radius:10px !important;
  background:linear-gradient(135deg, #ec5b4e 0%, #ec5b4e 100%) !important;
  box-shadow:0 8px 22px rgba(236,91,78,.32) !important;
  transition:.18s !important;
}
#payModal .btn-primary:hover{
  transform:translateY(-1px) !important;
  box-shadow:0 12px 28px rgba(236,91,78,.4) !important;
}

/* Trust badges grid — cleaner */
.pay-trust-grid{
  display:grid !important;
  grid-template-columns:repeat(2,1fr) !important;
  gap:8px !important;
  margin:14px 0 !important;
}
.pay-trust{
  font-size:11.5px !important;
  color:#475569 !important;
  background:#f8fafc !important;
  border:1px solid #eef2f8 !important;
  border-radius:8px !important;
  padding:8px 10px !important;
  line-height:1.35 !important;
}
.pay-trust strong{
  display:block !important;
  font-size:10.5px !important;
  color:#08264d !important;
  font-weight:800 !important;
  margin-bottom:2px !important;
  text-transform:uppercase !important;
  letter-spacing:.6px !important;
}

/* Coming-soon payment methods — subtle, no clutter */
.coming-pay{
  opacity:.55 !important;
  filter:saturate(.8) !important;
}
.coming-badge{
  background:#fff7ec !important;
  color:var(--pia-orange) !important;
  border:1px solid #ffd9b3 !important;
  font-size:9.5px !important;
  font-weight:800 !important;
  letter-spacing:.4px !important;
}

@media(max-width:560px){
  .pay-box{border-radius:14px !important}
  .pay-body{padding:14px 18px 18px !important}
  .crypto-list{grid-template-columns:repeat(5,1fr) !important;gap:5px !important}
  .crypto-btn{padding:7px 3px !important;font-size:9.5px !important}
  .crypto-btn .coin-icon{width:26px !important;height:26px !important;font-size:12px !important}
  .pay-trust-grid{grid-template-columns:1fr !important}
  .wallet-box{flex-direction:column !important;align-items:center !important;text-align:center !important;padding:16px !important;gap:14px !important}
  .qr{width:160px !important;height:160px !important;margin:0 auto !important}
  .qr img{width:150px !important;height:150px !important}
  .wallet-address{text-align:left !important;font-size:11.5px !important}
}

/* ── 7. Header logo — branded SVG wordmark (922 blue+orange, color-swap on scroll) ── */
.logo{height:64px !important;display:flex !important;align-items:center !important}
.logo .logo-svg{height:46px;width:auto;display:block;transition:height .18s}
.logo .lo-icon-bg{fill:#ec5b4e;transition:fill .18s}
.logo .lo-icon-p{fill:#fff}
.logo .lo-icon-dot{fill:#f5a623}
.logo .lo-pia{fill:#fff;transition:fill .18s}
.logo .lo-proxy{fill:#f5a623}
.logo .lo-r{fill:rgba(255,255,255,.55);transition:fill .18s}
.logo .lo-globe-bg{fill:#f5a623;transition:fill .18s}
.logo .lo-globe-line{stroke:#0a2540;transition:stroke .18s}
/* 922 official PNG wordmark logo (navy+coral) shown on white header */
.logo .logo-img{height:52px !important;width:auto !important;display:block !important;filter:none !important}
.hdr.scrolled .logo .logo-img{height:48px !important}
@media(max-width:700px){.logo .logo-img{height:42px !important}}
.hdr.scrolled .logo .lo-globe-bg{fill:#f5a623}
.hdr.scrolled .logo .lo-globe-line{stroke:#08264d}
.hdr.scrolled .logo{height:54px !important}
.hdr.scrolled .logo .logo-svg{height:38px}
.hdr.scrolled .logo .lo-pia{fill:#08264d}
.hdr.scrolled .logo .lo-r{fill:#94a3b8}
@media(max-width:700px){
  .logo{height:54px !important}
  .logo .logo-svg{height:36px}
  .hdr.scrolled .logo .logo-svg{height:30px}
}

/* ── 8. Product type-card icons — thematic gradient per product ── */
.type-card .icon{
  width:52px !important;
  height:52px !important;
  border-radius:14px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  color:#fff !important;
  font-size:0 !important; /* hide any leftover text */
  margin-bottom:18px !important;
  box-shadow:0 6px 16px rgba(8,38,77,.18) !important;
  position:relative;
  overflow:hidden;
}
.type-card .icon svg{width:26px;height:26px;display:block;position:relative;z-index:2}
.type-card .icon::after{
  content:"";position:absolute;right:-12px;top:-12px;width:26px;height:26px;
  background:rgba(255,255,255,.16);border-radius:50%;
}
/* SOCKS5 — speed/data: 922 blue → green */
.type-card .icon.s5{background:linear-gradient(135deg,#ec5b4e 0%,#00bd79 100%) !important}
/* Residential — home/warm: 922 blue → orange */
.type-card .icon.gb{background:linear-gradient(135deg,#ec5b4e 0%,#FF8822 100%) !important}
/* Static ISP — stable/server: deep navy → 922 blue */
.type-card .icon.isp{background:linear-gradient(135deg,#042040 0%,#ec5b4e 100%) !important}
/* Bundles — premium: purple → blue */
.type-card .icon.bundle{background:linear-gradient(135deg,#722ed1 0%,#ec5b4e 100%) !important}