/* ============================================================
   APSHINFO REGISTRATION EXPERIENCE V1
   Shared visual system for Volunteer, Member, Internship,
   CSR Partner and Event registration.
   Presentation only — no form/business logic changes.
   ============================================================ */

:root{
  --rg-bg:#f5f8f7;
  --rg-card:#ffffff;
  --rg-text:#17211d;
  --rg-muted:#66756e;
  --rg-line:#dce7e1;
  --rg-green:#0b7a5d;
  --rg-green-dark:#075c47;
  --rg-orange:#e96516;
  --rg-soft:#eef8f4;
  --rg-radius:18px;
  --rg-shadow:0 13px 34px rgba(27,65,50,.07);
}

/* General density */
.auth-page,
.mr-wrap,
.csr-register-page,
.event-register-page,
.intern-apply-section{
  background:
    radial-gradient(circle at 8% 6%,rgba(11,122,93,.055),transparent 26%),
    radial-gradient(circle at 92% 12%,rgba(233,101,22,.045),transparent 24%),
    var(--rg-bg)!important;
}

.auth-panel,
.mr-card,
.csr-reg,
.er-wrap,
.intern-apply-shell{
  max-width:1180px!important;
}

input,select,textarea,button{font-family:inherit}
input,select,textarea{box-sizing:border-box}

/* ------------------------------------------------------------
   VOLUNTEER
   ------------------------------------------------------------ */
.auth-page{
  padding:28px 18px 44px!important;
  min-height:auto!important;
}
.auth-panel{
  gap:20px!important;
  align-items:start!important;
}
.auth-intro{
  padding:30px 28px!important;
  border-radius:22px!important;
  min-height:0!important;
  box-shadow:var(--rg-shadow)!important;
  position:sticky;
  top:82px;
}
.auth-intro h1{
  font-size:clamp(1.8rem,3vw,2.55rem)!important;
  line-height:1.08!important;
  margin:7px 0 9px!important;
}
.auth-intro p{
  font-size:.91rem!important;
  line-height:1.55!important;
  margin-bottom:16px!important;
}
.volunteer-benefits{
  gap:8px!important;
}
.volunteer-benefits>div{
  padding:10px 12px!important;
  font-size:.82rem!important;
  border-radius:12px!important;
}
.auth-form-card{
  border-radius:22px!important;
  padding:24px 26px!important;
  box-shadow:var(--rg-shadow)!important;
}
.auth-form-card h2{
  font-size:1.55rem!important;
  line-height:1.15!important;
  margin-bottom:5px!important;
}
.auth-subtitle{
  font-size:.82rem!important;
  line-height:1.45!important;
  margin-bottom:14px!important;
}
.registration-note{
  padding:10px 12px!important;
  margin:10px 0 14px!important;
  border-radius:12px!important;
  font-size:.78rem!important;
  line-height:1.4!important;
}
.modern-form-grid{
  gap:12px 14px!important;
}
.auth-form-card .field{
  gap:4px!important;
}
.auth-form-card .field label{
  font-size:.76rem!important;
  font-weight:800!important;
}
.auth-form-card .field input,
.auth-form-card .field select,
.auth-form-card .field textarea{
  min-height:42px!important;
  padding:9px 11px!important;
  border-radius:10px!important;
  font-size:.82rem!important;
}
.auth-form-card .field textarea{min-height:76px!important}
.volunteer-help,.volunteer-password-note{
  font-size:.7rem!important;
  line-height:1.35!important;
}
.auth-submit{
  min-height:44px!important;
  padding:10px 15px!important;
  border-radius:11px!important;
  font-size:.86rem!important;
  margin-top:12px!important;
}
.auth-links{
  margin-top:12px!important;
  font-size:.76rem!important;
}

/* ------------------------------------------------------------
   MEMBERSHIP
   ------------------------------------------------------------ */
.mr-wrap{
  padding:26px 18px 46px!important;
}
.mr-card{
  border-radius:22px!important;
  padding:24px 28px!important;
  box-shadow:var(--rg-shadow)!important;
}
.mr-head{
  text-align:left!important;
  margin-bottom:16px!important;
  padding-bottom:14px;
  border-bottom:1px solid var(--rg-line);
}
.mr-head h1{
  font-size:clamp(1.65rem,3vw,2.2rem)!important;
  line-height:1.1!important;
  color:#145f4a!important;
}
.mr-head p{
  margin:6px 0 0!important;
  font-size:.84rem!important;
  color:var(--rg-muted)!important;
  line-height:1.45!important;
}
.mr-grid{
  gap:12px 14px!important;
}
.mr-grid label{
  font-size:.76rem!important;
  line-height:1.3!important;
}
.mr-grid input,.mr-grid select,.mr-grid textarea{
  margin-top:5px!important;
  min-height:42px!important;
  padding:9px 11px!important;
  border-radius:10px!important;
  font-size:.82rem!important;
  background:#fff!important;
}
.mr-grid textarea{min-height:74px!important}
.mr-grid h3{
  font-size:1rem!important;
  margin:5px 0 10px!important;
}
.payment-options{
  gap:8px!important;
}
.payment-options label{
  padding:10px 12px!important;
  border-radius:11px!important;
  font-size:.78rem!important;
  cursor:pointer;
  transition:.18s ease;
}
.payment-options label:has(input:checked){
  border-color:#2f9475!important;
  background:#f0faf6!important;
  box-shadow:0 0 0 2px rgba(11,122,93,.08);
}
.pay-panel{
  padding:13px!important;
  border-radius:12px!important;
  margin-top:9px!important;
  font-size:.8rem!important;
}
.pay-panel p{margin:4px 0!important}
.qr{
  max-width:150px!important;
  max-height:150px!important;
}
.submit{
  min-height:44px!important;
  padding:10px 16px!important;
  border-radius:11px!important;
  font-size:.88rem!important;
}

/* ------------------------------------------------------------
   CSR
   ------------------------------------------------------------ */
.csr-register-page{
  margin:0!important;
  padding:28px 18px 46px!important;
  max-width:none!important;
}
.csr-reg{
  margin:auto!important;
  padding:24px 28px!important;
  border-radius:22px!important;
  box-shadow:var(--rg-shadow)!important;
}
.csr-reg h1{
  font-size:clamp(1.7rem,3vw,2.25rem)!important;
  line-height:1.1!important;
  margin:0 0 6px!important;
}
.csr-reg>p,
.csr-reg .csr-intro{
  font-size:.84rem!important;
  line-height:1.5!important;
}
.csr-guidance{
  margin:12px 0 15px!important;
  padding:11px 13px!important;
  border-radius:12px!important;
  font-size:.78rem!important;
  line-height:1.42!important;
}
.csr-grid{
  gap:12px 14px!important;
}
.csr-f{
  gap:4px!important;
}
.csr-f label,
.csr-f>span:first-child{
  font-size:.76rem!important;
  font-weight:800!important;
}
.csr-f input,.csr-f select,.csr-f textarea{
  min-height:42px!important;
  padding:9px 11px!important;
  border-radius:10px!important;
  font-size:.82rem!important;
}
.csr-f textarea{min-height:76px!important}
.csr-help{
  margin-top:3px!important;
  font-size:.67rem!important;
  line-height:1.35!important;
}
.csr-declaration{
  padding:11px 12px!important;
  border-radius:12px!important;
  font-size:.75rem!important;
  line-height:1.4!important;
}
.csr-submit{
  min-height:44px!important;
  padding:10px 15px!important;
  border-radius:11px!important;
  font-size:.86rem!important;
}

/* ------------------------------------------------------------
   EVENT
   ------------------------------------------------------------ */
.event-register-page{
  padding:28px 18px 46px!important;
}
.er-wrap{
  margin:auto!important;
  padding:0!important;
}
.er-hero{
  padding:22px 26px!important;
  border-radius:20px!important;
  min-height:0!important;
}
.er-hero h1{
  font-size:clamp(1.65rem,3vw,2.2rem)!important;
  line-height:1.08!important;
  margin:4px 0 6px!important;
}
.er-hero p{
  font-size:.84rem!important;
  line-height:1.45!important;
}
.er-card{
  margin-top:16px!important;
  padding:22px 26px!important;
  border-radius:20px!important;
  box-shadow:var(--rg-shadow)!important;
}
.er-grid{
  gap:12px 14px!important;
  margin-top:15px!important;
}
.er-field{
  gap:4px!important;
}
.er-field label{
  font-size:.76rem!important;
}
.er-field input,.er-field select,.er-field textarea{
  min-height:42px!important;
  padding:9px 11px!important;
  border-radius:10px!important;
  font-size:.82rem!important;
}
.er-field textarea{min-height:76px!important}
.er-section{
  margin-top:18px!important;
}
.er-section h2{
  font-size:1.02rem!important;
  margin:0 0 9px!important;
}
.er-alert{
  margin:12px 0!important;
  padding:10px 12px!important;
  font-size:.78rem!important;
}
.er-submit,.er-card button[type=submit]{
  min-height:44px!important;
  padding:10px 15px!important;
  border-radius:11px!important;
  font-size:.86rem!important;
}

/* ------------------------------------------------------------
   INTERNSHIP APPLICATION — retain modern page, tighten form
   ------------------------------------------------------------ */
.intern-apply-section{
  padding-top:32px!important;
  padding-bottom:46px!important;
}
.intern-apply-shell{
  gap:18px!important;
}
.intern-apply-summary{
  padding:22px!important;
  border-radius:20px!important;
  top:82px!important;
}
.intern-apply-summary h2{
  font-size:1.3rem!important;
  line-height:1.15!important;
}
.intern-apply-summary p{
  font-size:.77rem!important;
  line-height:1.45!important;
}
.summary-hours{
  gap:6px!important;
  margin:12px 0!important;
}
.summary-hours span{
  padding:8px!important;
}
.summary-hours b{
  font-size:1rem!important;
}
.summary-step{
  gap:9px!important;
  padding:8px 0!important;
}
.summary-step i{
  width:28px!important;
  height:28px!important;
  font-size:.7rem!important;
}
.summary-step b{font-size:.76rem!important}
.summary-step small{font-size:.66rem!important;line-height:1.3!important}
.intern-form-card{
  padding:23px 26px!important;
  border-radius:20px!important;
}
.form-card-head{
  margin-bottom:15px!important;
}
.form-card-head h2{
  font-size:1.45rem!important;
  margin:3px 0 4px!important;
}
.form-card-head p{
  font-size:.78rem!important;
  line-height:1.42!important;
}
.form-section-title{
  margin:18px 0 10px!important;
  gap:9px!important;
}
.form-section-title>span{
  width:29px!important;
  height:29px!important;
  font-size:.7rem!important;
}
.form-section-title b{font-size:.84rem!important}
.form-section-title small{font-size:.65rem!important}
.intern-form .form-grid{
  gap:11px 13px!important;
}
.intern-form label{
  font-size:.75rem!important;
}
.intern-form input,.intern-form select,.intern-form textarea{
  margin-top:4px!important;
  min-height:41px!important;
  padding:8px 10px!important;
  border-radius:9px!important;
  font-size:.8rem!important;
}
.intern-form textarea{min-height:70px!important}
.intern-form label small{
  font-size:.64rem!important;
  line-height:1.3!important;
}
.college-choice,.schedule-note,.seed-fund-note{
  padding:11px 12px!important;
  border-radius:12px!important;
  margin:9px 0 11px!important;
}
.college-choice b,.schedule-note b,.seed-fund-note b{
  font-size:.78rem!important;
}
.college-choice small,.schedule-note span,.seed-fund-note p{
  font-size:.68rem!important;
  line-height:1.4!important;
}
.choice-buttons{
  gap:7px!important;
}
.choice-buttons label{
  padding:8px 10px!important;
  border-radius:10px!important;
}
.schedule-preview{
  gap:7px!important;
  margin-top:9px!important;
}
.schedule-preview span{
  padding:8px 9px!important;
  font-size:.68rem!important;
  border-radius:10px!important;
}
.declaration{
  padding:10px 11px!important;
  font-size:.7rem!important;
  line-height:1.4!important;
}
.intern-submit{
  min-height:45px!important;
  padding:10px 15px!important;
  font-size:.84rem!important;
  border-radius:11px!important;
}

/* Common polish */
.auth-form-card,
.mr-card,
.csr-reg,
.er-card,
.intern-form-card{
  border:1px solid rgba(205,221,213,.92)!important;
}
.auth-form-card input:focus,
.auth-form-card select:focus,
.auth-form-card textarea:focus,
.mr-card input:focus,.mr-card select:focus,.mr-card textarea:focus,
.csr-reg input:focus,.csr-reg select:focus,.csr-reg textarea:focus,
.er-card input:focus,.er-card select:focus,.er-card textarea:focus,
.intern-form-card input:focus,.intern-form-card select:focus,.intern-form-card textarea:focus{
  outline:none!important;
  border-color:#3a9a7c!important;
  box-shadow:0 0 0 3px rgba(11,122,93,.09)!important;
}
input[type=file]{
  padding:7px 8px!important;
  background:#fbfdfc!important;
}
button,input,select,textarea{transition:border-color .17s,box-shadow .17s,background .17s,transform .17s}
button[type=submit]:hover{transform:translateY(-1px)}

@media(max-width:900px){
  .auth-intro,.intern-apply-summary{position:static!important}
  .auth-panel,.intern-apply-shell{grid-template-columns:1fr!important}
  .auth-intro{padding:22px!important}
}
@media(max-width:720px){
  .auth-page,.mr-wrap,.csr-register-page,.event-register-page{padding:16px 10px 32px!important}
  .auth-form-card,.mr-card,.csr-reg,.er-card,.intern-form-card{padding:18px 14px!important;border-radius:16px!important}
  .modern-form-grid,.mr-grid,.csr-grid,.er-grid,.intern-form .form-grid{grid-template-columns:1fr!important;gap:10px!important}
  .full,.wide,.csr-f.full,.er-field.full{grid-column:auto!important}
  .payment-options{grid-template-columns:1fr!important}
  .intern-apply-section{padding:20px 10px 34px!important}
  .intern-apply-summary{padding:17px!important}
}