/* Voluntier shared styles */
/* Only patterns confirmed byte-for-byte identical across 3+ pages. */
/* Do not add anything here that required picking a value between conflicting versions — */
/* that reconciliation happens in the rebrand/cosmetics pass, not here. */

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

.req { color: #e53e3e; margin-left: 2px; }

.page-eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: 2px; color: #2563a8; font-weight: 700; margin-bottom: 0.5rem; }

.submit-btn:hover { background: #1a4f8a; }
.submit-btn:disabled { background: #8ab0d8; cursor: not-allowed; }

.alert-success { background: #dcfce7; color: #15803d; border: 1px solid #86efac; }
.alert-error { background: #fee2e2; color: #b91c1c; border: 1px solid #fca5a5; }

/* Avatar crop modal (avatar-crop.js) */
.avatar-crop-modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.75); z-index: 10000; align-items: center; justify-content: center; }
.avatar-crop-modal.open { display: flex; }
.avatar-crop-box { background: #fff; border-radius: 16px; padding: 20px; width: 100%; max-width: 420px; box-shadow: 0 8px 40px rgba(0,0,0,0.4); }
.avatar-crop-image-wrap { width: 100%; height: 340px; background: #1a1a1a; border-radius: 8px; overflow: hidden; }
.avatar-crop-image { display: block; max-width: 100%; }
.avatar-crop-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }
.avatar-crop-btn { padding: 10px 20px; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; border: none; font-family: inherit; }
.avatar-crop-cancel { background: #eef3fa; color: #1a3c6e; }
.avatar-crop-cancel:hover { background: #dce8f5; }
.avatar-crop-save { background: #2563a8; color: #fff; }
.avatar-crop-save:hover { background: #1a4f8a; }
/* Circular live preview, Instagram-style: round the crop viewport instead of leaving a square box with a circle overlaid after the fact. */
.avatar-crop-modal .cropper-view-box,
.avatar-crop-modal .cropper-face { border-radius: 50%; }
.avatar-crop-modal .cropper-view-box { outline: 1px solid rgba(255,255,255,0.85); outline-color: rgba(255,255,255,0.85); }
.avatar-crop-modal .cropper-dashed,
.avatar-crop-modal .cropper-line,
.avatar-crop-modal .cropper-point.point-se,
.avatar-crop-modal .cropper-point.point-sw,
.avatar-crop-modal .cropper-point.point-ne,
.avatar-crop-modal .cropper-point.point-nw,
.avatar-crop-modal .cropper-point.point-n,
.avatar-crop-modal .cropper-point.point-s,
.avatar-crop-modal .cropper-point.point-e,
.avatar-crop-modal .cropper-point.point-w { display: none; }