/* Volunteer recruitment page + application wizard */

body > *:not(.kx-bg-deep):not(.vol-modal-backdrop):not(.mobile-menu):not(.mobile-menu-backdrop){
  position: relative; z-index: 1;
}

/* ---------- hero ---------- */
.vol-hero{ text-align:center; padding:44px 0 10px; }
.vol-title{
  font-family:var(--kx-display,inherit); font-weight:900; line-height:1.05;
  font-size:clamp(32px,7vw,60px); margin:18px 0 0;
}
.vol-title-gold{
  background:linear-gradient(90deg, var(--kx-goldA,#fcd34d), var(--kx-goldB,#f59e0b));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.vol-tagline{
  margin:14px 0 0; font-family:var(--kx-display,inherit); font-style:italic;
  font-size:clamp(18px,3.4vw,24px); color:rgba(252,211,77,.95);
}
.vol-sub{ margin:8px auto 0; max-width:54ch; color:var(--kx-muted,rgba(255,255,255,.7)); font-size:15px; }

.vol-facts{
  display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin:26px 0 0;
}
.vol-fact{
  display:flex; align-items:center; gap:10px; text-align:left;
  border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.04);
  border-radius:14px; padding:11px 16px;
}
.vol-fact .vf-ico{
  width:20px; height:20px; flex:0 0 auto;
  fill:none; stroke:currentColor; stroke-width:1.5;
  stroke-linecap:round; stroke-linejoin:round;
  color:rgba(252,211,77,.85);
}
.vol-fact b{ display:block; font-size:14px; font-weight:800; }
.vol-fact small{ display:block; color:rgba(255,255,255,.55); font-size:12px; margin-top:1px; }

.vol-cta{
  margin-top:26px; cursor:pointer;
  border-radius:999px; padding:15px 38px; font-size:16px; font-weight:950;
  border:1px solid rgba(245,158,11,.35); color:#111;
  background:linear-gradient(180deg, rgba(252,211,77,.97), rgba(245,158,11,.97));
  box-shadow:0 12px 34px rgba(245,158,11,.24);
  transition:transform .12s ease, box-shadow .2s ease, filter .2s ease;
}
.vol-cta:hover{ transform:translateY(-2px); filter:brightness(1.04); box-shadow:0 16px 42px rgba(245,158,11,.32); }
.vol-cta:active{ transform:translateY(0); }
.vol-cta-note{ margin:12px 0 0; font-size:12.5px; color:rgba(255,255,255,.5); }

/* ---------- info cards ---------- */
.vol-cards{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(268px,1fr));
  gap:16px; margin:40px 0 0;
}
.vol-card{
  border:1px solid rgba(255,255,255,.1); border-radius:18px; padding:22px 22px 20px;
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  transition:border-color .2s ease, transform .2s ease;
}
.vol-card:hover{ border-color:rgba(245,158,11,.4); transform:translateY(-3px); }
.vol-card .vc-ico{
  display:block; width:26px; height:26px;
  fill:none; stroke:currentColor; stroke-width:1.4;
  stroke-linecap:round; stroke-linejoin:round;
  color:rgba(252,211,77,.8);
}
.vol-card h2{
  margin:12px 0 14px; font-size:15px; font-weight:900; letter-spacing:.06em;
  text-transform:uppercase; color:rgba(252,211,77,.95);
}
.vol-card ul{ margin:0; padding:0; list-style:none; }
.vol-card li{
  position:relative; padding-left:20px; margin:9px 0;
  font-size:14.5px; line-height:1.55; color:rgba(255,255,255,.84);
}
.vol-card li::before{
  content:""; position:absolute; left:0; top:8px; width:7px; height:7px;
  border-radius:999px; background:linear-gradient(135deg, var(--kx-goldA,#fcd34d), var(--kx-goldB,#f59e0b));
}
.vol-card li b{ color:#fff; }
.vc-note{ margin:14px 0 0; font-style:italic; font-size:13.5px; color:rgba(252,211,77,.9); }

/* ---------- closing ---------- */
.vol-closing{
  margin:42px 0 0; text-align:center; padding:34px 20px;
  border:1px solid rgba(245,158,11,.26); border-radius:20px;
  background:radial-gradient(120% 140% at 50% 0%, rgba(245,158,11,.12), rgba(255,255,255,.02));
}
.vol-closing h2{ margin:0; font-family:var(--kx-display,inherit); font-size:clamp(22px,4vw,30px); font-weight:900; }
.vol-closing p{ margin:8px 0 0; color:rgba(255,255,255,.7); }

/* ---------- modal ---------- */
.vol-modal-backdrop{
  position:fixed; inset:0; z-index:10000; padding:18px;
  background:rgba(0,0,0,.76); backdrop-filter:blur(6px);
  display:none; align-items:center; justify-content:center;
}
.vol-modal-backdrop.show{ display:flex; opacity:1; animation:volFade .2s ease both; }
@keyframes volFade{ from{opacity:0} to{opacity:1} }

.vol-modal{
  position:relative; width:min(560px,100%); max-height:90vh; overflow-y:auto;
  border-radius:20px; border:1px solid rgba(255,255,255,.13); color:#fff;
  background:linear-gradient(180deg, rgba(20,18,14,.99), rgba(10,10,12,.99));
  box-shadow:0 30px 90px rgba(0,0,0,.6);
  animation:volIn .25s cubic-bezier(.2,.9,.3,1.2) both;
}
@keyframes volIn{ from{ transform:translateY(14px) scale(.97); opacity:0 } to{ transform:none; opacity:1 } }

.vol-x{
  position:absolute; top:12px; right:12px; z-index:2;
  width:34px; height:34px; border-radius:999px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(255,255,255,.18); background:rgba(0,0,0,.45); color:#fff;
}
.vol-x svg{
  width:15px; height:15px; fill:none; stroke:currentColor;
  stroke-width:1.8; stroke-linecap:round;
}
.vol-x:hover{ background:rgba(0,0,0,.8); }

.vol-modal-head{ padding:22px 22px 0; }
.vol-modal-title{ margin:0 34px 14px 0; font-size:20px; font-weight:900; }
.vol-steps{ display:flex; gap:8px; flex-wrap:wrap; }
.vol-step{
  display:flex; align-items:center; gap:7px; font-size:12.5px; font-weight:700;
  color:rgba(255,255,255,.45);
}
.vol-step i{
  display:flex; align-items:center; justify-content:center; font-style:normal;
  width:22px; height:22px; border-radius:999px; font-size:11.5px; font-weight:900;
  border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.05);
}
.vol-step.is-active{ color:#fff; }
.vol-step.is-active i{ background:rgba(245,158,11,.95); border-color:transparent; color:#111; }
.vol-step.is-done i{ background:rgba(245,158,11,.25); border-color:rgba(245,158,11,.5); color:rgba(252,211,77,.95); }

.vol-prog{ height:4px; border-radius:999px; background:rgba(255,255,255,.09); margin:14px 0 0; overflow:hidden; }
.vol-prog-fill{
  height:100%; width:33%; border-radius:999px; transition:width .25s ease;
  background:linear-gradient(90deg, var(--kx-goldA,#fcd34d), var(--kx-goldB,#f59e0b));
}

.vol-modal-body{ padding:18px 22px 4px; }
.vol-panel{ display:none; }
.vol-panel.is-active{ display:block; animation:volPanel .18s ease; }
@keyframes volPanel{ from{opacity:.4; transform:translateX(6px)} to{opacity:1; transform:none} }

.vol-label{ display:block; margin:14px 0 6px; font-size:13px; font-weight:800; color:rgba(255,255,255,.8); }
.vol-label:first-child{ margin-top:0; }
.vol-label span{ color:rgba(245,158,11,.95); }
.vol-input{
  width:100%; border-radius:12px; padding:12px 14px; font-size:15px; color:#fff;
  border:1px solid rgba(255,255,255,.15); background:rgba(255,255,255,.05);
  outline:none; transition:border-color .15s ease, background .15s ease;
}
.vol-input::placeholder{ color:rgba(255,255,255,.35); }
.vol-input:focus{ border-color:rgba(245,158,11,.65); background:rgba(255,255,255,.08); }
.vol-input.is-bad{ border-color:rgba(248,113,113,.8); background:rgba(248,113,113,.08); }
.vol-textarea{ min-height:132px; resize:vertical; line-height:1.6; font-family:inherit; }
.vol-hint{ margin:8px 0 0; font-size:12.5px; color:rgba(255,255,255,.45); }

.vol-choices{ display:flex; gap:9px; flex-wrap:wrap; }
.vol-choice{ position:relative; cursor:pointer; }
.vol-choice input{ position:absolute; opacity:0; width:0; height:0; }
.vol-choice span{
  display:inline-block; border-radius:999px; padding:10px 18px; font-size:14px; font-weight:700;
  border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.04); color:rgba(255,255,255,.8);
  transition:.15s ease;
}
.vol-choice input:checked + span{
  border-color:rgba(245,158,11,.9); background:rgba(245,158,11,.16); color:#fff;
}
.vol-choice input:focus-visible + span{ outline:2px solid rgba(245,158,11,.7); outline-offset:2px; }

.vol-hp{ position:absolute; left:-5000px; width:1px; height:1px; opacity:0; }
.vol-err{
  display:none; margin:14px 0 0; border-radius:10px; padding:10px 12px; font-size:13.5px;
  border:1px solid rgba(248,113,113,.4); background:rgba(248,113,113,.12); color:#fecaca;
}
.vol-err.show{ display:block; }

.vol-modal-foot{
  display:flex; gap:10px; align-items:center; padding:16px 22px 20px;
}
.vol-btn-ghost{
  border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.04);
  color:rgba(255,255,255,.8); border-radius:12px; padding:12px 18px;
  font-weight:800; font-size:14px; cursor:pointer;
}
.vol-btn-ghost:hover:not(:disabled){ background:rgba(255,255,255,.09); color:#fff; }
.vol-btn-ghost:disabled{ opacity:.35; cursor:not-allowed; }
.vol-btn-gold{
  flex:1; text-align:center; text-decoration:none; cursor:pointer;
  border-radius:12px; padding:12px 20px; font-weight:950; font-size:15px;
  border:1px solid rgba(245,158,11,.35); color:#111;
  background:linear-gradient(180deg, rgba(252,211,77,.96), rgba(245,158,11,.96));
}
.vol-btn-gold:hover{ filter:brightness(1.05); }
.vol-btn-gold:disabled{ opacity:.6; cursor:progress; }

/* ---------- success ---------- */
.vol-modal-success{ text-align:center; padding:34px 26px 28px; }
.vol-check{
  width:66px; height:66px; margin:0 auto 18px; border-radius:999px;
  display:flex; align-items:center; justify-content:center; color:#111;
  background:linear-gradient(180deg, rgba(252,211,77,.97), rgba(245,158,11,.97));
  box-shadow:0 10px 30px rgba(245,158,11,.35);
  animation:volPop .35s cubic-bezier(.2,.9,.3,1.4) both;
}
@keyframes volPop{ from{ transform:scale(.4); opacity:0 } to{ transform:none; opacity:1 } }
.vol-check svg{
  width:30px; height:30px; fill:none; stroke:currentColor;
  stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round;
}
.vol-success-title{ margin:0 0 10px; font-family:var(--kx-display,inherit); font-size:24px; font-weight:900; }
.vol-success-msg{ margin:0 auto; max-width:44ch; font-size:15px; line-height:1.7; color:rgba(255,255,255,.82); }
.vol-success-msg b{ color:#fff; }
.vol-success-sub{ margin:12px 0 0; font-size:13.5px; color:rgba(252,211,77,.9); }
.vol-success-actions{ margin-top:22px; display:flex; justify-content:center; }
.vol-success-actions .vol-btn-gold{ flex:0 1 auto; padding:12px 30px; }

@media (max-width:560px){
  .vol-modal-foot{ flex-wrap:wrap; }
  .vol-btn-ghost{ order:2; flex:1; }
  .vol-btn-gold{ order:1; flex:1 0 100%; }
  .vol-steps .vol-step{ font-size:11.5px; }
}