/* ============================================================
   MS VPN — ACH Authorization · Aurora Cyber Aesthetic
   Namespace: ms-ach-*
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;800;900&family=JetBrains+Mono:wght@500;700&family=Caveat:wght@400;500;600;700&display=swap');

/* Outer centering container — forces the form card to sit centered on the
   page even if the surrounding theme/page-builder column is off-center or
   has uneven padding. */
.ms-ach-outer{display:flex;justify-content:center;width:100%;max-width:100%;box-sizing:border-box;}
.ms-ach-outer,.ms-ach-outer *{box-sizing:border-box;}

.ms-ach-wrap {
  --ma-cyan:#00f0ff;--ma-magenta:#ff2daa;--ma-violet:#8b5cf6;
  --ma-white:#e8edf5;--ma-muted:rgba(232,237,245,.62);--ma-dim:rgba(232,237,245,.40);
  --ma-glass:rgba(10,18,35,.58);--ma-glass-b:saturate(1.8) blur(32px);
  --ma-border:rgba(0,240,255,.10);--ma-border-h:rgba(0,240,255,.24);
  --ma-ff:'Outfit',system-ui,sans-serif;--ma-ff-mono:'JetBrains Mono',ui-monospace,monospace;
  --ma-ease:cubic-bezier(.22,1,.36,1);--ma-radius:20px;--ma-radius-lg:26px;--ma-max:720px;
  position:relative;display:block;width:100%;max-width:860px;margin:24px auto;margin-left:auto;margin-right:auto;color:var(--ma-white);
  background:radial-gradient(1200px 700px at 15% 0%,rgba(0,240,255,.05),transparent 55%),radial-gradient(900px 600px at 85% 10%,rgba(139,92,246,.04),transparent 55%),linear-gradient(180deg,#040710,#030508 60%,#040710);
  border:1px solid var(--ma-border);border-radius:var(--ma-radius-lg);
  padding:clamp(16px,2.8vw,30px);box-shadow:0 18px 60px rgba(0,0,0,.50),0 0 80px rgba(0,240,255,.03) inset;
  overflow:hidden;clear:both;float:none;inset-inline:auto;font-family:var(--ma-ff);-webkit-font-smoothing:antialiased;isolation:isolate;
}
.ms-ach-wrap *{box-sizing:border-box;}
/* Mobile overflow safety + reliable centering — keep the whole form inside the
   viewport and centered no matter what container the theme places it in. */
.ms-ach-wrap{overflow-x:hidden;box-sizing:border-box;}
.ms-ach-shell,.ms-ach-hero,.ms-ach-card,.ms-ach-form{max-width:100%;min-width:0;}
.ms-ach-title,.ms-ach-subtitle{max-width:100%;overflow-wrap:break-word;}
.ms-ach-section,.ms-ach-section-header,.ms-ach-field,.ms-ach-row{min-width:0;}
.ms-ach-section-title,.ms-ach-label{overflow-wrap:break-word;min-width:0;}

/* Particles */
.ms-ach-particles{position:absolute;inset:0;width:100%;height:100%;max-width:100%;z-index:0;pointer-events:none;}

/* Background */
.ms-ach-bg{position:absolute;inset:-2px;pointer-events:none;overflow:hidden;z-index:0;}
.ms-ach-aurora{position:absolute;width:200%;left:-50%;filter:blur(80px);mix-blend-mode:screen;will-change:transform;}
.ms-ach-aurora--a{top:-12%;height:320px;background:linear-gradient(90deg,transparent 8%,rgba(0,240,255,.18) 25%,rgba(139,92,246,.14) 45%,rgba(255,45,170,.10) 65%,transparent 82%);opacity:.28;animation:maAurora 14s ease-in-out infinite alternate;}
.ms-ach-aurora--b{bottom:-8%;height:260px;background:linear-gradient(90deg,transparent 12%,rgba(255,45,170,.12) 35%,rgba(0,240,255,.08) 60%,transparent 78%);opacity:.18;animation:maAurora 18s ease-in-out infinite alternate-reverse;}

/* Shell */
.ms-ach-shell{max-width:var(--ma-max);margin:0 auto;position:relative;z-index:1;}

/* Hero */
.ms-ach-hero{padding:clamp(18px,2.6vw,28px);border-radius:var(--ma-radius-lg);background:var(--ma-glass);backdrop-filter:var(--ma-glass-b);-webkit-backdrop-filter:var(--ma-glass-b);border:1px solid var(--ma-border);position:relative;overflow:hidden;transition:border-color .3s ease;}
.ms-ach-hero:hover{border-color:var(--ma-border-h);}
.ms-ach-hero__glow{position:absolute;inset:-1px;background:radial-gradient(700px 220px at 20% 0%,rgba(0,240,255,.07),transparent 55%),radial-gradient(600px 260px at 80% 10%,rgba(255,45,170,.04),transparent 55%);pointer-events:none;opacity:.6;transition:opacity .3s ease;}
.ms-ach-hero:hover .ms-ach-hero__glow{opacity:1;}

.ms-ach-badge{position:relative;display:inline-flex;align-items:center;gap:10px;padding:10px 16px;border-radius:999px;background:rgba(0,240,255,.06);border:1px solid rgba(0,240,255,.20);color:var(--ma-cyan);letter-spacing:.18em;text-transform:uppercase;font-weight:700;font-size:12px;font-family:var(--ma-ff-mono);}
.ms-ach-badge__dot{width:8px;height:8px;border-radius:99px;background:var(--ma-cyan);box-shadow:0 0 12px var(--ma-cyan),0 0 28px rgba(0,240,255,.30);animation:maPulse 2s ease-in-out infinite;}

.ms-ach-title{position:relative;margin:14px 0 6px;font-size:clamp(22px,4vw,36px);font-weight:900;line-height:1.12;letter-spacing:-.03em;overflow-wrap:break-word;word-break:break-word;hyphens:auto;background:linear-gradient(105deg,var(--ma-cyan) 0%,#60e0ff 18%,var(--ma-white) 35%,var(--ma-magenta) 55%,var(--ma-violet) 70%,var(--ma-cyan) 85%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:maHoloShift 6s ease-in-out infinite;}
.ms-ach-subtitle{position:relative;margin:0;color:var(--ma-muted);font-size:14px;line-height:1.5;font-weight:300;}

/* Card */
.ms-ach-card{margin-top:16px;background:var(--ma-glass);backdrop-filter:var(--ma-glass-b);-webkit-backdrop-filter:var(--ma-glass-b);border:1px solid var(--ma-border);border-radius:var(--ma-radius);padding:20px;position:relative;overflow:hidden;transition:border-color .3s ease;}
.ms-ach-card:hover{border-color:var(--ma-border-h);}
.ms-ach-card__glow{position:absolute;inset:-1px;background:radial-gradient(500px 180px at 10% 0%,rgba(0,240,255,.05),transparent 55%),radial-gradient(400px 150px at 90% 100%,rgba(139,92,246,.03),transparent 55%);pointer-events:none;opacity:.4;transition:opacity .3s ease;}
.ms-ach-card:hover .ms-ach-card__glow{opacity:.8;}

/* Messages */
.ms-ach-messages .ms-ach-success,.ms-ach-messages .ms-ach-error{border-radius:14px;padding:14px 16px;border:1px solid var(--ma-border);background:rgba(0,0,0,.22);margin-bottom:14px;font-weight:400;}
.ms-ach-success{color:#60e0ff;border-color:rgba(0,240,255,.25)!important;background:rgba(0,240,255,.04)!important;}
.ms-ach-error{color:#ff7ec6;border-color:rgba(255,45,170,.25)!important;background:rgba(255,45,170,.04)!important;}

/* Form */
.ms-ach-form{margin-top:0;position:relative;}

/* Sections — group related fields with a numbered header and thin divider */
.ms-ach-section{margin-top:20px;}
.ms-ach-section:first-of-type{margin-top:4px;}
.ms-ach-section-header{display:flex;align-items:center;gap:10px;margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid rgba(0,240,255,.10);}
.ms-ach-section-num{font-family:var(--ma-ff-mono);font-size:10px;color:var(--ma-cyan);background:rgba(0,240,255,.08);padding:3px 7px;border-radius:6px;letter-spacing:.1em;font-weight:700;}
.ms-ach-section-title{font-size:12px;color:var(--ma-white);letter-spacing:.14em;text-transform:uppercase;font-weight:700;font-family:var(--ma-ff-mono);}

.ms-ach-field{margin-top:10px;display:flex;flex-direction:column;}
.ms-ach-field:first-child{margin-top:0;}
.ms-ach-label{display:flex;align-items:center;gap:7px;margin:0 0 4px;color:var(--ma-cyan);letter-spacing:.12em;text-transform:uppercase;font-size:10px;font-weight:700;font-family:var(--ma-ff-mono);min-height:14px;}
.ms-ach-label svg{opacity:.7;flex-shrink:0;}

.ms-ach-input,.ms-ach-select{width:100%;max-width:100%;min-width:0;display:block;padding:11px 14px;border:1px solid var(--ma-border);border-radius:10px;background:rgba(0,0,0,.25);color:var(--ma-white);font-family:var(--ma-ff);font-size:14px;outline:none;transition:border-color .2s ease,background .2s ease,box-shadow .2s ease;line-height:1.2;}
.ms-ach-input::placeholder{color:var(--ma-dim);font-weight:300;}
.ms-ach-input:focus,.ms-ach-select:focus{border-color:var(--ma-border-h);background:rgba(0,240,255,.03);box-shadow:0 0 18px rgba(0,240,255,.06);}
.ms-ach-input[readonly]{cursor:default;opacity:.85;}
.ms-ach-select{appearance:none;-webkit-appearance:none;cursor:pointer;background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300f0ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'/%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right 12px center;background-size:14px 14px;padding-right:36px;}

/* Rows — grid for the row itself; fields inside don't add their own top margin
   because the row's gap already handles spacing. align-items:start anchors
   every column to the same top edge so labels and inputs line up across the row. */
.ms-ach-row{display:grid;gap:12px;margin-top:10px;align-items:start;}
.ms-ach-row > .ms-ach-field{margin-top:0;}
@media(min-width:720px){.ms-ach-row--3{grid-template-columns:1fr 1fr 1fr;}.ms-ach-row--2{grid-template-columns:1fr 1fr;}.ms-ach-row--promo{grid-template-columns:1fr auto;align-items:end;}}
/* Mobile (<720px): the promo row stacks — make each cell and the Apply
   button fill the full width so the input and button align perfectly. */
@media(max-width:719.98px){
  .ms-ach-row--promo > div{width:100%;}
  .ms-ach-row--promo .ms-ach-btn-secondary{width:100%;}
}

.ms-ach-help{margin-top:6px;color:var(--ma-dim);font-size:12px;line-height:1.5;font-weight:300;}
.ms-ach-help--payment{margin-top:6px;}
#promoMessage:empty{margin-top:0;line-height:0;}

.ms-ach-divider{height:1px;background:linear-gradient(90deg,transparent,rgba(0,240,255,.18),rgba(139,92,246,.12),transparent);margin:18px 0;}

/* Buttons */
.ms-ach-btn,.ms-ach-btn-secondary{border-radius:14px;padding:13px 16px;font-weight:800;cursor:pointer;font-family:var(--ma-ff);transition:transform .2s var(--ma-ease),box-shadow .2s var(--ma-ease),border-color .2s ease;}

.ms-ach-btn{width:100%;display:inline-flex;align-items:center;justify-content:center;gap:10px;position:relative;overflow:hidden;margin-top:18px;color:#030508;background:linear-gradient(135deg,#00f0ff,#00c4d6 40%,#0090a8);border:1px solid rgba(0,240,255,.45);box-shadow:0 0 28px rgba(0,240,255,.14),0 12px 30px rgba(0,0,0,.45);font-size:15px;}
.ms-ach-btn__shimmer{position:absolute;inset:-60%;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.28) 50%,transparent 60%);transform:translateX(-100%);animation:maShimmer 3s ease-in-out infinite;pointer-events:none;}
.ms-ach-btn:hover{transform:translateY(-2px);box-shadow:0 0 36px rgba(0,240,255,.22),0 16px 40px rgba(0,0,0,.55);}

.ms-ach-btn-secondary{background:var(--ma-glass);backdrop-filter:var(--ma-glass-b);-webkit-backdrop-filter:var(--ma-glass-b);color:var(--ma-white);border:1px solid var(--ma-border);white-space:nowrap;font-size:14px;}
.ms-ach-btn-secondary:hover{transform:translateY(-1px);border-color:var(--ma-border-h);box-shadow:0 8px 20px rgba(0,0,0,.30);}

/* Signature */
/* Signature pad — DocuSign-style with subtle baseline guide */
.ms-ach-signature{position:relative;border:1px solid var(--ma-border);border-radius:14px;background:rgba(0,0,0,.28);padding:0;transition:border-color .2s ease;overflow:hidden;}
.ms-ach-signature:hover{border-color:var(--ma-border-h);}
.ms-ach-signature canvas{width:100%;height:160px;display:block;background:transparent;cursor:crosshair;touch-action:none;position:relative;z-index:1;}
.ms-ach-signature__baseline{position:absolute;left:24px;right:24px;bottom:36px;height:1px;background:repeating-linear-gradient(to right,rgba(0,240,255,.20) 0 6px,transparent 6px 12px);pointer-events:none;z-index:0;}
.ms-ach-signature__x{position:absolute;left:18px;bottom:30px;color:rgba(0,240,255,.40);font-family:var(--ma-ff-mono);font-size:18px;font-weight:700;pointer-events:none;z-index:0;line-height:1;}
.ms-ach-signature__hint{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:rgba(0,240,255,.28);font-size:13px;letter-spacing:.05em;pointer-events:none;z-index:0;transition:opacity .25s ease;}
.ms-ach-signature.is-signed .ms-ach-signature__hint{opacity:0;}
.ms-ach-signature-controls{margin-top:10px;display:grid;grid-template-columns:1fr 1fr;gap:10px;}

/* Checkbox */
.ms-ach-checkbox{margin-top:16px;display:flex;gap:14px;align-items:flex-start;padding:14px 16px;border:1px solid var(--ma-border);border-radius:14px;background:rgba(0,0,0,.22);transition:border-color .2s ease;}
.ms-ach-checkbox:hover{border-color:var(--ma-border-h);}
.ms-ach-checkbox input{width:20px;height:20px;margin-top:2px;accent-color:var(--ma-cyan);}
.ms-ach-checkbox label{margin:0;font-weight:400;color:var(--ma-muted);line-height:1.6;font-size:14px;}
.ms-ach-checkbox label strong{color:var(--ma-cyan);font-weight:800;}

/* Reveal
   Visible by default so the form never disappears if a theme, optimizer,
   page builder, or blocked script prevents the reveal animation from firing. */
[data-ms-reveal]{opacity:1;transform:none;transition:opacity .6s var(--ma-ease),transform .6s var(--ma-ease);}
html.ms-ach-js [data-ms-reveal]{opacity:0;transform:translateY(24px);}
html.ms-ach-js [data-ms-reveal].is-visible{opacity:1;transform:translateY(0);}

/* Responsive */
@media(max-width:360px){.ms-ach-wrap{padding:12px;}.ms-ach-card{padding:14px;}}

/* Keyframes */
@keyframes maAurora{0%{transform:translateX(-6%) scaleY(1);}50%{transform:translateX(6%) scaleY(1.10);}100%{transform:translateX(-6%) scaleY(1);}}
@keyframes maHoloShift{0%{background-position:0% 50%;}50%{background-position:100% 50%;}100%{background-position:0% 50%;}}
@keyframes maPulse{0%,100%{opacity:1;}50%{opacity:.4;}}
@keyframes maShimmer{0%{transform:translateX(-100%);}35%{transform:translateX(200%);}100%{transform:translateX(200%);}}