/* ==========================================================
   WCTA Payment Portal — v2 design system
   Palette: ink navy, deep indigo, parchment, brand orange, signal green
   Type: Fraunces (display) / Inter (body & UI) / IBM Plex Mono (figures)
========================================================== */

:root{
  --ink:#0B1330;
  --indigo:#141B42;
  --parchment:#F6F4EE;
  --paper:#FFFFFF;
  --orange:#FF6B00;
  --orange-deep:#CC5200;
  --orange-soft:#FFC199;
  --orange-tint:#FFF1E6;
  --green:#1F9D55;
  --green-soft:#E7F6EC;
  --slate:#5B6478;
  --slate-light:#8890A0;
  --border:#E7E2D6;
  --radius-lg:22px;
  --radius-md:16px;
  --radius-sm:10px;
  --shadow-card:0 10px 30px rgba(11,19,48,0.06);
  --shadow-lift:0 24px 60px rgba(11,19,48,0.14);
  --font-display:'Fraunces', serif;
  --font-body:'Inter', sans-serif;
  --font-mono:'IBM Plex Mono', monospace;
}

*{ margin:0; padding:0; box-sizing:border-box; }

body{
  font-family:var(--font-body);
  background:var(--parchment);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{ font-family:var(--font-display); letter-spacing:-0.01em; }
button, input{ font-family:inherit; }

button:focus-visible, input:focus-visible, .course-option:focus-visible, a:focus-visible{
  outline:2px solid var(--orange);
  outline-offset:2px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; transition-duration:0.001ms !important; }
}

/* ---------- LOGIN (split panel) ---------- */

.login-screen{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:40px 20px;
}

.login-shell{
  width:100%;
  max-width:920px;
  background:var(--paper);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lift);
  display:grid;
  grid-template-columns:1fr 1.1fr;
  overflow:hidden;
}

.login-brand{
  background:linear-gradient(160deg,var(--ink),var(--indigo));
  color:white;
  padding:48px 40px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.brand-mark{
  width:52px; height:52px;
  border-radius:12px;
  background:var(--orange);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700; font-size:19px;
  margin-bottom:24px;
}

.login-brand h2{ font-size:26px; font-weight:600; line-height:1.25; margin-bottom:12px; }
.brand-line{ color:#C7CCDE; font-size:14px; margin-bottom:28px; }

.brand-points{ list-style:none; display:flex; flex-direction:column; gap:14px; }
.brand-points li{ display:flex; align-items:center; gap:12px; font-size:14px; color:#DDE1EE; }
.brand-points span{
  width:26px; height:26px; border-radius:50%;
  background:rgba(255,107,0,0.18); color:var(--orange-soft);
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:700; flex-shrink:0;
  font-family:var(--font-mono);
}

.login-form-panel{ padding:48px 44px; }

.login-badge{
  display:inline-block; font-family:var(--font-mono); font-size:11px;
  letter-spacing:0.08em; background:var(--green-soft); color:var(--green);
  padding:6px 12px; border-radius:20px; margin-bottom:18px; font-weight:600;
}

.login-form-panel h2{ font-size:26px; font-weight:600; margin-bottom:8px; }
.login-form-panel > p{ color:var(--slate); margin-bottom:26px; font-size:14px; line-height:1.6; }

.login-form-panel label{ display:block; font-size:12px; font-weight:600; color:var(--slate); margin-bottom:6px; }

.login-form-panel input[type="email"],
.login-form-panel input[type="password"],
.login-form-panel input[type="text"]{
  width:100%; padding:14px 16px; border:1px solid var(--border); border-radius:var(--radius-sm);
  font-size:15px; margin-bottom:16px; outline:none; transition:border-color 0.2s ease;
}

.login-form-panel input:focus{ border-color:var(--orange); }

.password-field{ position:relative; }
.password-field input{ padding-right:46px; }
.toggle-password{
  position:absolute; right:8px; top:50%; transform:translateY(calc(-50% - 8px));
  background:none; border:none; cursor:pointer; font-size:16px; opacity:0.6;
}
.toggle-password:hover{ opacity:1; }

.remember-row{
  display:flex; align-items:center; gap:8px; font-size:13px; color:var(--slate);
  font-weight:400; margin-bottom:22px; cursor:pointer;
}
.remember-row input{ width:16px; height:16px; accent-color:var(--orange); }

.login-form-panel button#loginBtn{
  width:100%; background:linear-gradient(120deg,var(--orange),var(--orange-deep));
  color:white; border:none; padding:16px; border-radius:var(--radius-sm);
  font-size:15px; font-weight:700; cursor:pointer;
  transition:transform 0.15s ease, box-shadow 0.15s ease;
}
.login-form-panel button#loginBtn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px rgba(255,107,0,0.3); }
.login-form-panel button#loginBtn:disabled{ opacity:0.7; cursor:progress; transform:none; }

.login-error{ color:#C0392B; font-size:13px; margin-top:12px; min-height:16px; }

/* ---------- HEADER ---------- */

.header{
  background:var(--ink);
  border-bottom:3px solid var(--orange);
  padding:22px 60px;
  display:flex; justify-content:space-between; align-items:center; color:white;
}

.logo-section{ display:flex; align-items:center; gap:16px; }

.logo{
  width:50px; height:50px; border-radius:12px; background:var(--orange);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700; font-size:18px;
}

.wordmark h1{ font-size:19px; font-weight:600; line-height:1.1; }
.wordmark p{
  color:var(--orange-soft); font-family:var(--font-mono); font-size:11px;
  letter-spacing:0.16em; text-transform:uppercase; margin-top:2px;
}

.header-right{ display:flex; align-items:center; gap:18px; }
.secure{ font-size:13px; color:#C7CCDE; display:flex; align-items:center; gap:6px; }

.chat-btn{
  border:1px solid rgba(255,255,255,0.25); background:transparent; color:white;
  padding:11px 20px; border-radius:30px; cursor:pointer; font-size:14px; font-weight:500;
  transition:background 0.2s ease, border-color 0.2s ease;
}
.chat-btn:hover{ background:rgba(255,255,255,0.1); border-color:rgba(255,255,255,0.5); }

/* ---------- PROGRESS TRACK ---------- */

.progress-track{ max-width:1300px; margin:36px auto 8px; padding:0 60px; }

.progress-bar{
  height:8px; border-radius:20px; background:#E9E6DC; overflow:hidden; margin-bottom:22px;
}
.progress-fill{
  height:100%; width:62%; border-radius:20px;
  background:linear-gradient(90deg,var(--ink),var(--orange));
}

.progress-labels{ display:flex; justify-content:space-between; gap:10px; }

.progress-step{ display:flex; align-items:center; gap:12px; flex:1; }

.progress-step .dot{
  width:34px; height:34px; border-radius:50%; background:#E9E6DC; color:var(--slate-light);
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; flex-shrink:0;
}
.progress-step.done .dot{ background:var(--ink); color:white; }
.progress-step.active .dot{ background:var(--orange); color:white; box-shadow:0 0 0 6px var(--orange-tint); }

.progress-step h3{ font-size:14px; font-weight:600; }
.progress-step p{ font-size:12px; color:var(--slate); }

/* ---------- LAYOUT ---------- */

.container{
  max-width:1300px; margin:auto; display:grid; grid-template-columns:2fr 1fr;
  gap:30px; padding:24px 60px 70px; align-items:start;
}

.card{
  background:var(--paper); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:34px; margin-bottom:25px; box-shadow:var(--shadow-card);
}

/* ---------- HERO ---------- */

.hero{ display:flex; align-items:center; justify-content:space-between; gap:30px; }
.hero-text{ flex:1; }

.eyebrow{
  font-family:var(--font-mono); font-size:12px; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--orange); font-weight:600;
}

.hero h2{ font-size:38px; font-weight:600; margin:14px 0 16px; line-height:1.15; }
.hero-text p{ color:var(--slate); line-height:1.7; max-width:48ch; margin-bottom:20px; }

.hero-cta{
  display:inline-flex; align-items:center; gap:6px; color:var(--orange); font-weight:600;
  font-size:14px; text-decoration:none;
}
.hero-cta:hover{ text-decoration:underline; }

.hero-ring{ position:relative; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.hero-ring-label{
  position:absolute; display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.hero-ring-label strong{ font-family:var(--font-mono); font-size:22px; color:var(--ink); }
.hero-ring-label span{ font-size:10px; color:var(--slate); text-transform:uppercase; letter-spacing:0.06em; }

/* ---------- SECTION TITLES ---------- */

.section-title{
  font-size:24px; font-weight:600; margin-bottom:25px; display:flex; align-items:baseline; gap:12px;
}
.section-title .num{
  font-family:var(--font-mono); font-size:13px; color:var(--orange); border:1px solid #FFCFA3;
  background:var(--orange-tint); padding:3px 8px; border-radius:6px; letter-spacing:0.05em;
}

/* ---------- COURSE ---------- */

.course-card{
  border:1px solid var(--border); border-radius:var(--radius-md); padding:22px;
  display:flex; justify-content:space-between; align-items:center;
}
.course-info{ display:flex; align-items:center; gap:20px; }

.course-image{
  width:84px; height:84px; background:var(--ink); border-radius:18px;
  display:flex; align-items:center; justify-content:center; color:white; font-size:36px; flex-shrink:0;
}

#studentName{
  font-family:var(--font-body); font-size:14px; font-weight:600; color:var(--slate);
  text-transform:uppercase; letter-spacing:0.04em; margin-bottom:4px;
}
#courseName{ font-size:20px; font-weight:600; }
#studentCohort{ color:var(--slate); margin-top:4px; }
.course-card small{ color:var(--slate-light); font-family:var(--font-mono); font-size:12px; }

.course-card button{
  border:1px solid var(--ink); background:white; color:var(--ink); padding:11px 20px;
  border-radius:10px; cursor:pointer; font-weight:500; transition:background 0.2s ease, color 0.2s ease;
}
.course-card button:hover{ background:var(--ink); color:white; }

.course-options{ display:none; margin-top:20px; gap:12px; flex-wrap:wrap; }
.course-option{
  background:#F3F1E9; padding:14px 18px; border-radius:12px; cursor:pointer;
  transition:background 0.2s ease, color 0.2s ease; font-weight:500; display:flex; align-items:center; gap:8px;
}
.course-option:hover{ background:var(--ink); color:white; }
.course-option.selected{ background:var(--ink); color:white; box-shadow:0 0 0 2px var(--orange); }

/* ---------- PAYMENT DETAILS ---------- */

.payment-box{ border:1px solid var(--border); border-radius:var(--radius-md); padding:24px; }
.row{ display:flex; justify-content:space-between; margin-bottom:18px; font-size:15px; }
.row span:last-child, .summary-row strong{ font-family:var(--font-mono); }
.strike{ text-decoration:line-through; color:var(--slate-light); }
.green{ color:var(--green); }
.total{ border-top:1px dashed var(--border); padding-top:20px; margin-top:20px; font-size:22px; align-items:center; }
.total strong{ font-family:var(--font-mono); color:var(--ink); }

/* ---------- BENEFITS ---------- */

.benefit-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.benefit{ text-align:left; }
.benefit-icon{
  width:52px; height:52px; background:var(--green-soft); border-radius:14px;
  display:flex; align-items:center; justify-content:center; font-size:20px; margin-bottom:14px;
}
.benefit h4{ font-size:15px; font-weight:600; margin-bottom:6px; }
.benefit p{ color:var(--slate); font-size:14px; line-height:1.5; }

/* ---------- PAYMENT SUMMARY (signature) ---------- */

.right{ position:relative; }
.sticky-card{ position:sticky; top:24px; }

.summary-card{
  background:var(--paper); border:1px solid var(--border); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lift); padding:30px;
}

.summary-head{
  display:flex; justify-content:space-between; align-items:center; padding-bottom:18px;
  margin-bottom:16px; border-bottom:1px solid var(--border);
}
.ticket-label{
  font-family:var(--font-mono); font-size:11px; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--orange); font-weight:600;
}
.ticket-id{ font-family:var(--font-mono); font-size:11px; color:var(--slate-light); }

.summary-row{ display:flex; justify-content:space-between; margin-bottom:16px; font-size:14px; }
.summary-row strong{ font-weight:600; }

.summary-divider{ height:1px; background:var(--border); margin:6px 0 20px; }

.summary-total{ display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:22px; }
.summary-total span{
  color:var(--slate); font-size:13px; text-transform:uppercase; letter-spacing:0.08em; font-family:var(--font-mono);
}
.summary-total h2{ font-family:var(--font-mono); font-size:30px; font-weight:600; color:var(--ink); }

.payment-method-title{ font-size:16px; font-weight:600; margin-bottom:16px; }

.bank-box{ background:var(--parchment); border:1px solid var(--border); border-radius:var(--radius-md); padding:20px; }
.bank-header{ font-size:15px; font-weight:700; margin-bottom:18px; }
.bank-row{ display:flex; justify-content:space-between; margin-bottom:13px; font-size:14px; align-items:center; }
.bank-row:last-child{ margin-bottom:0; }
.bank-row strong{ color:var(--ink); font-family:var(--font-mono); }

.copy-wrap{ display:flex; align-items:center; gap:10px; }
.copy-btn{
  border:1px solid var(--border); background:white; color:var(--ink); font-size:11px;
  font-weight:600; padding:5px 10px; border-radius:8px; cursor:pointer; transition:background 0.2s ease;
}
.copy-btn:hover{ background:var(--orange-tint); border-color:var(--orange-soft); }
.copy-btn.copied{ background:var(--green-soft); color:var(--green); border-color:transparent; }

.payment-note{
  background:var(--orange-tint); color:#9A4A00; padding:15px; border-radius:var(--radius-sm);
  margin-top:20px; font-size:13px; line-height:1.6; border:1px solid #FFCFA3;
}

.pay-btn{
  width:100%; background:linear-gradient(120deg,var(--orange),var(--orange-deep)); border:none;
  padding:18px; color:white; border-radius:var(--radius-sm); font-size:16px; font-weight:700;
  margin-top:22px; cursor:pointer; transition:transform 0.15s ease, box-shadow 0.15s ease;
}
.pay-btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px rgba(255,107,0,0.3); }
.pay-btn:active{ transform:translateY(0); }

.verified-seal{
  text-align:center; margin-top:16px; font-size:12px; color:var(--slate-light);
  font-family:var(--font-mono); letter-spacing:0.04em;
}

/* ---------- MOBILE STICKY PAY BAR ---------- */

.mobile-pay-bar{
  display:none; position:fixed; bottom:0; left:0; right:0; background:var(--paper);
  border-top:1px solid var(--border); padding:14px 20px; align-items:center; justify-content:space-between;
  box-shadow:0 -10px 30px rgba(11,19,48,0.1); z-index:50;
}
.mobile-pay-bar div{ display:flex; flex-direction:column; }
.mobile-pay-bar span{ font-size:11px; color:var(--slate); text-transform:uppercase; letter-spacing:0.06em; }
.mobile-pay-bar strong{ font-family:var(--font-mono); font-size:18px; }
.mobile-pay-btn{
  background:linear-gradient(120deg,var(--orange),var(--orange-deep)); color:white; text-decoration:none;
  font-weight:700; padding:12px 22px; border-radius:10px; font-size:14px;
}

/* ---------- FOOTER ---------- */

.footer{ background:var(--ink); color:white; padding:60px; }
.footer-grid{ max-width:1300px; margin:auto; display:grid; grid-template-columns:repeat(4,1fr); gap:40px; }
.footer h2{ font-size:20px; font-weight:600; margin-bottom:10px; }
.footer h3{ font-size:15px; font-weight:600; margin-bottom:16px; color:var(--orange-soft); }
.footer ul{ list-style:none; }
.footer li{ margin-bottom:12px; color:#C7CCDE; font-size:14px; }
.footer p{ margin-top:10px; color:#AEB4C8; font-size:14px; }

/* ==========================================================
   RESPONSIVE
========================================================== */

@media(max-width:992px){
  .container{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .hero{ flex-direction:column; align-items:flex-start; }
  .hero-ring{ align-self:center; }
  .sticky-card{ position:static; }
  .login-shell{ grid-template-columns:1fr; max-width:480px; }
  .login-brand{ display:none; }
}

@media (max-width: 768px) {
  body{ overflow-x:hidden; padding-bottom:76px; }

  .header{ padding:20px; flex-direction:column; text-align:center; gap:16px; }
  .header-right{ width:100%; justify-content:center; }
  .chat-btn{ width:100%; max-width:280px; }

  .progress-track{ padding:0 20px; margin:24px auto; }
  .progress-labels{ flex-wrap:wrap; row-gap:16px; }
  .progress-step{ min-width:45%; }

  .container{ grid-template-columns:1fr; gap:20px; padding:0 16px 40px; }
  .card{ padding:22px; border-radius:18px; }

  .hero h2{ font-size:27px; line-height:1.25; }
  .hero-text p{ font-size:15px; }
  .section-title{ font-size:20px; }

  .benefit-grid{ grid-template-columns:1fr; }

  .course-card{ flex-direction:column; align-items:flex-start; gap:20px; }
  .course-info{ width:100%; }
  .course-image{ width:66px; height:66px; font-size:28px; }
  .course-card button{ width:100%; }
  .course-options{ flex-direction:column; }

  .footer{ padding:40px 20px; }
  .footer-grid{ grid-template-columns:1fr; gap:25px; }

  .mobile-pay-bar{ display:flex; }

  .login-form-panel{ padding:34px 24px; }
}

@media (max-width: 480px) {
  .hero h2{ font-size:23px; }
  .card{ padding:18px; }
  .course-image{ width:58px; height:58px; font-size:24px; }
  .pay-btn{ font-size:15px; }
  .summary-total h2{ font-size:24px; }
}