/* volunteer-portal.css — «بوابة التطوع» pages (044, 2026-10-20): the
   opportunities list, one opportunity with its application, the guardian's
   consent page, and the «فرص مفتوحة الآن» strip on /volunteer.
   The identity's colours and Alexandria, as theme.css sets them. */

.vp { --vp-navy: #0A2A3D; --vp-teal: #12525C; --vp-teal-l: #3D7580; --vp-gold: #C9A227; --vp-gold-t: #7D6217;
  --vp-grey: #5A6B74; --vp-ground: #F4F6F7; --vp-line: #DDE4E7; --vp-ok: #1E6B3A; --vp-bad: #8A3B3B; }

.vp-wrap { max-width: 1200px; margin: 0 auto; padding: 32px 16px 64px; display: flex; flex-direction: column; gap: 22px; }
.vp-card { background: #fff; border: 1px solid var(--vp-line); border-radius: 14px; }
.vp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px;
  border-radius: 10px; font: inherit; font-weight: 600; font-size: 1rem; text-decoration: none; cursor: pointer; border: 0; }
.vp-btn--primary { background: var(--vp-teal); color: #fff; }
.vp-btn--primary:hover { background: var(--vp-navy); color: #fff; }
.vp-btn--ghost { background: #fff; color: var(--vp-teal); border: 1.5px solid var(--vp-teal); }
.vp-btn:disabled { opacity: .55; cursor: not-allowed; }
.vp a:focus-visible, .vp button:focus-visible, .vp input:focus-visible, .vp select:focus-visible, .vp textarea:focus-visible {
  outline: 3px solid var(--vp-teal-l); outline-offset: 2px; }

.vp-chip { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; font-size: .8125rem; background: #EAF1F2; color: var(--vp-teal); }
.vp-pill { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; font-size: .8125rem; font-weight: 700; }
.vp-pill--open { background: #E3F1E8; color: var(--vp-ok); }
.vp-pill--waitlist, .vp-pill--upcoming { background: #FFF4D6; color: var(--vp-gold-t); }
.vp-pill--closed, .vp-pill--completed, .vp-pill--cancelled { background: #EEF0F2; color: #4A5960; }

/* filters */
.vp-filters { padding: 18px; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; align-items: end; }
.vp-field { display: flex; flex-direction: column; gap: 6px; font-size: .8125rem; color: var(--vp-grey); font-weight: 500; }
.vp-field input, .vp-field select, .vp-field textarea, .vp-form input, .vp-form select, .vp-form textarea {
  font: inherit; font-size: .95rem; min-height: 46px; border: 1px solid #C9D3D7; border-radius: 10px; padding: 0 12px;
  background: #fff; color: var(--vp-navy); box-sizing: border-box; width: 100%; }
.vp-form textarea, .vp-field textarea { padding: 10px 12px; min-height: 90px; }
.vp-check { display: flex; gap: 10px; align-items: flex-start; font-size: .95rem; line-height: 1.7; color: #33464F; }
.vp-check input { width: 20px; height: 20px; min-height: 0; flex: none; margin-top: 4px; }
.vp-bar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; color: var(--vp-grey); }

/* cards */
.vp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 20px; }
.vp-op { display: flex; flex-direction: column; overflow: hidden; text-decoration: none; color: var(--vp-navy); transition: border-color .15s, box-shadow .15s; }
.vp-op:hover { border-color: #B9C8CD; box-shadow: 0 6px 20px rgba(10, 42, 61, .07); }
.vp-op__img { aspect-ratio: 16 / 9; background: #DCE9EB; position: relative; }
.vp-op__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vp-op__img .vp-pill { position: absolute; inset-block-start: 12px; inset-inline-start: 12px; }
.vp-op__body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 8px; }
.vp-op__area { font-size: .8125rem; color: var(--vp-teal); font-weight: 600; }
.vp-op h3 { margin: 0; font-size: 1.1rem; line-height: 1.55; }
.vp-op__when { font-size: .875rem; color: var(--vp-grey); }
.vp-op__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.vp-seats { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.vp-seats i { display: block; height: 6px; border-radius: 6px; background: #E6ECEE; overflow: hidden; }
.vp-seats b { display: block; height: 6px; background: var(--vp-teal); }
.vp-seats span { font-size: .8125rem; color: var(--vp-grey); }
.vp-skel { min-height: 330px; background: linear-gradient(90deg, #fff, #F1F4F5, #fff); background-size: 200% 100%; animation: vp-skel 1.4s infinite linear; }
@keyframes vp-skel { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .vp-skel { animation: none; } .vp-op { transition: none; } }

.vp-empty { padding: 36px 20px; text-align: center; display: flex; flex-direction: column; gap: 10px; align-items: center; border-style: dashed; }
.vp-empty strong { font-size: 1.1rem; }
.vp-empty p { margin: 0; color: var(--vp-grey); }
.vp-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

/* one opportunity */
.vp-detail { display: flex; flex-wrap: wrap; gap: 26px; align-items: flex-start; }
.vp-detail__main { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.vp-detail__side { flex: 1 1 320px; padding: 22px; display: flex; flex-direction: column; gap: 16px; }
.vp-cover { aspect-ratio: 21 / 8; border-radius: 14px; overflow: hidden; background: #DCE9EB; }
.vp-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vp-detail h1 { margin: 0; font-size: clamp(1.6rem, 3vw, 2.1rem); line-height: 1.45; text-wrap: balance; }
.vp-lead { margin: 0; font-size: 1.05rem; line-height: 1.95; color: #33464F; white-space: pre-line; }
.vp-block { padding: 22px; display: flex; flex-direction: column; gap: 12px; }
.vp-block h2 { margin: 0; font-size: 1.2rem; }
.vp-block ul { margin: 0; padding-inline-start: 20px; display: flex; flex-direction: column; gap: 6px; line-height: 1.8; color: #33464F; }
.vp-dl { display: grid; grid-template-columns: 110px 1fr; gap: 10px 14px; margin: 0; font-size: .95rem; }
.vp-dl dt { color: var(--vp-grey); }
.vp-dl dd { margin: 0; font-weight: 500; }
.vp-ext { border-top: 1px solid var(--vp-line); padding-top: 14px; display: flex; flex-direction: column; gap: 6px; font-size: .875rem; color: var(--vp-grey); line-height: 1.7; }
.vp-ext strong { color: var(--vp-navy); }

.vp-shift { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; padding: 14px 16px;
  border: 1px solid #E1E7EA; border-radius: 12px; background: #fff; font: inherit; color: var(--vp-navy); text-align: start; width: 100%; }
label.vp-shift { cursor: pointer; }
.vp-shift input { width: 20px; height: 20px; flex: none; }
.vp-shift.is-on { border: 2px solid var(--vp-teal); background: #EAF1F2; }
.vp-shift__t { display: flex; flex-direction: column; gap: 3px; flex: 1 1 200px; }
.vp-shift__t span { font-size: .875rem; color: var(--vp-grey); }
.vp-shift__s { font-size: .8125rem; font-weight: 600; color: var(--vp-teal); }
.vp-shift__s.is-full { color: var(--vp-gold-t); }

/* the application */
.vp-form { padding: 22px; display: flex; flex-direction: column; gap: 16px; }
.vp-form h2 { margin: 0; font-size: 1.2rem; }
.vp-form .vp-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 640px) { .vp-form .vp-grid2 { grid-template-columns: minmax(0, 1fr); } }
.vp-form label.vp-field { color: #33464F; font-size: .875rem; }
.vp-hint { font-size: .8125rem; color: var(--vp-grey); font-weight: 400; line-height: 1.7; }
.vp-guardian { padding: 18px; border-radius: 12px; background: #FFFCF2; border: 1px solid #E3C15A; display: flex; flex-direction: column; gap: 12px; }
.vp-guardian h3 { margin: 0; font-size: 1.05rem; }
.vp-say { margin: 0; padding: 12px 14px; border-radius: 10px; font-size: .95rem; line-height: 1.7; }
.vp-say.is-bad { background: #F6E7E7; color: var(--vp-bad); }
.vp-say.is-ok { background: #E3F1E8; color: var(--vp-ok); }
.vp-say.is-info { background: #EAF1F2; color: var(--vp-teal); }
.vp-done { padding: 32px 22px; text-align: center; display: flex; flex-direction: column; gap: 14px; align-items: center; }
.vp-done__ic { width: 60px; height: 60px; border-radius: 50%; background: #E3F1E8; display: flex; align-items: center; justify-content: center; color: var(--vp-ok); }
.vp-done p { margin: 0; line-height: 1.9; color: #33464F; max-width: 520px; }
.vp-signin { padding: 22px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.vp-signin p { margin: 0; color: #33464F; line-height: 1.8; }
.vp-tag { display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: .75rem; background: #FFF4D6; color: var(--vp-gold-t); font-weight: 600; }

/* the guardian page */
.vp-narrow { max-width: 640px; }

/* the strip on /volunteer */
.vp-strip { display: flex; flex-direction: column; gap: 18px; }
.vp-strip__head { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; justify-content: space-between; }
.vp-strip__head h2 { margin: 0; }
.vp-strip__head a { font-weight: 600; text-decoration: none; color: var(--vp-teal); }

/* «تطوّعي» in the donor page */
.vp-mine { display: flex; flex-direction: column; gap: 14px; }
.vp-mine__row { padding: 14px 16px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.vp-mine__row div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.vp-mine__row small { color: var(--vp-grey); }
.vp-mine__acts { display: flex; flex-wrap: wrap; gap: 18px; }
.vp-mine__note { flex-basis: 100%; font-size: .875rem; color: var(--vp-gold-t); }
.vp-pill--pending { background: #EAF1F2; color: var(--vp-teal); }
.vp-pill--needs_info { background: #FFF4D6; color: var(--vp-gold-t); }
.vp-pill--accepted { background: #E3F1E8; color: var(--vp-ok); }
.vp-pill--waitlisted, .vp-pill--withdrawn { background: #EEF0F2; color: #4A5960; }
.vp-pill--rejected { background: #F6E7E7; color: var(--vp-bad); }
.vp-linkbtn { background: none; border: 0; padding: 0; font: inherit; color: var(--vp-teal); font-weight: 600; cursor: pointer; text-decoration: underline; }