/**
 * ═══════════════════════════════════════════════════════════════
 * PREMIUM VOLUNTEER FORM UI (FINAL PRODUCTION VERSION)
 * File: /assets/css/volunteer.css
 * ═══════════════════════════════════════════════════════════════
 */

 :root {

    --primary: #7c3aed;
    --primary-dark: #5b21b6;
    --secondary: #ec4899;

    --success: #16a34a;
    --danger: #dc2626;
    --info: #2563eb;

    --text: #111827;
    --text-light: #6b7280;

    --border: #e5e7eb;

    --background: #f8fafc;
    --white: #ffffff;

    --shadow-sm: 0 2px 10px rgba(0,0,0,0.04);
    --shadow-md: 0 10px 30px rgba(0,0,0,0.08);
    --shadow-lg: 0 20px 60px rgba(0,0,0,0.12);

    --radius-sm: 12px;
    --radius-md: 18px;
    --radius-lg: 28px;

    --transition: all 0.25s ease;
}

/**
 * =========================================================
 * PAGE
 * =========================================================
 */

.volunteer-page {

    padding: 80px 20px;

    background:
        linear-gradient(
            180deg,
            #f9fafb 0%,
            #ffffff 100%
        );
}

.volunteer-page .container {

    max-width: 1150px;
    margin: 0 auto;
}

/**
 * =========================================================
 * HEADER
 * =========================================================
 */

.page-header {

    text-align: center;

    margin-bottom: 40px;
}

.page-header h1 {

    font-size: 3rem;
    font-weight: 800;

    color: var(--text);

    margin-bottom: 15px;
}

.page-header p {

    max-width: 720px;

    margin: 0 auto;

    color: var(--text-light);

    font-size: 1.05rem;
    line-height: 1.8;
}

/**
 * =========================================================
 * FORM CONTAINER
 * =========================================================
 */

.volunteer-form {

    background: var(--white);

    padding: 50px;

    border-radius: var(--radius-lg);

    box-shadow: var(--shadow-lg);

    position: relative;

    overflow: hidden;
}

/**
 * =========================================================
 * PROGRESS BAR
 * =========================================================
 */

.volunteer-progress {

    margin-bottom: 35px;
}

.progress-bar {

    width: 100%;
    height: 10px;

    background: #edf2f7;

    border-radius: 999px;

    overflow: hidden;
}

.progress-fill {

    width: 0%;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            var(--primary),
            var(--secondary)
        );

    transition: width .35s ease;
}

.progress-text {

    margin-top: 12px;

    text-align: center;

    font-weight: 600;

    color: var(--text-light);
}

/**
 * =========================================================
 * STEP SYSTEM
 * =========================================================
 */

.form-step {

    display: none;

    animation: fadeSlide .4s ease;
}

.form-step.active {

    display: block;
}

@keyframes fadeSlide {

    from {

        opacity: 0;
        transform: translateY(20px);
    }

    to {

        opacity: 1;
        transform: translateY(0);
    }
}

/**
 * =========================================================
 * FORM SECTION
 * =========================================================
 */

.form-section {

    margin-bottom: 40px;
}

.form-section-title {

    font-size: 1.7rem;
    font-weight: 700;

    color: var(--text);

    margin-bottom: 10px;
}

.form-section-description {

    color: var(--text-light);

    line-height: 1.8;

    margin-bottom: 30px;
}

/**
 * =========================================================
 * GRID SYSTEM
 * =========================================================
 */

.row {

    display: flex;
    flex-wrap: wrap;

    margin-left: -12px;
    margin-right: -12px;
}

.col-12,
.col-md-4,
.col-md-6 {

    padding-left: 12px;
    padding-right: 12px;

    box-sizing: border-box;
}

.col-12 {

    width: 100%;
}

.col-md-4 {

    width: 33.3333%;
}

.col-md-6 {

    width: 50%;
}

.mb-4 {

    margin-bottom: 24px;
}

/**
 * =========================================================
 * LABELS
 * =========================================================
 */

.form-label {

    display: block;

    margin-bottom: 10px;

    font-size: .95rem;
    font-weight: 600;

    color: var(--text);
}

/**
 * =========================================================
 * INPUTS
 * =========================================================
 */

.form-control {

    width: 100%;

    padding: 15px 18px;

    border: 1px solid var(--border);

    border-radius: var(--radius-sm);

    background: #fff;

    font-size: 1rem;
    color: var(--text);

    transition: var(--transition);

    outline: none;

    box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}

.form-control:focus {

    border-color: var(--primary);

    box-shadow:
        0 0 0 4px rgba(124,58,237,.12);

    transform: translateY(-1px);
}

/**
 * =========================================================
 * TEXTAREA
 * =========================================================
 */

textarea.form-control {

    min-height: 160px;

    resize: vertical;
}

/**
 * =========================================================
 * SELECT
 * =========================================================
 */

select.form-control {

    appearance: none;

    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%236b7280' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 7l4.5 4 4.5-4'/%3E%3C/svg%3E");

    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 18px;

    padding-right: 45px;

    cursor: pointer;
}

/**
 * =========================================================
 * FORM HINTS
 * =========================================================
 */

.form-hint,
.upload-hint {

    display: block;

    margin-top: 10px;

    color: var(--text-light);

    font-size: .85rem;

    line-height: 1.6;
}

/**
 * =========================================================
 * FILE UPLOADS
 * =========================================================
 */

.upload-card {

    height: 100%;

    padding: 25px;

    border-radius: 20px;

    background: #fff;

    border: 1px solid #edf0f5;

    box-shadow: 0 4px 20px rgba(0,0,0,0.03);

    transition: var(--transition);
}

.upload-card:hover {

    transform: translateY(-3px);

    border-color: rgba(124,58,237,.25);

    box-shadow: 0 12px 30px rgba(124,58,237,.08);
}

.upload-box {

    margin-top: 15px;
}

input[type="file"].form-control {

    padding: 14px;

    border: 2px dashed #d6d9e0;

    background: #fafbff;

    cursor: pointer;
}

input[type="file"].form-control:hover {

    border-color: var(--primary);

    background: #f5f3ff;
}

/**
 * =========================================================
 * INVALID INPUT
 * =========================================================
 */

.is-invalid {

    border-color: #ef4444 !important;

    box-shadow:
        0 0 0 4px rgba(239,68,68,.12) !important;
}

/**
 * =========================================================
 * NAVIGATION
 * =========================================================
 */

.wizard-navigation {

    display: flex;

    justify-content: space-between;
    align-items: center;

    margin-top: 45px;

    gap: 15px;
}

/**
 * =========================================================
 * BUTTONS
 * =========================================================
 */

.btn {

    border: none;

    cursor: pointer;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 10px;

    transition: var(--transition);

    font-weight: 700;

    text-decoration: none;
}

.btn-primary {

    padding: 16px 40px;

    border-radius: 999px;

    background:
        linear-gradient(
            135deg,
            var(--primary),
            var(--secondary)
        );

    color: #fff;

    box-shadow:
        0 10px 30px rgba(124,58,237,.25);
}

.btn-primary:hover {

    transform: translateY(-3px);

    box-shadow:
        0 20px 50px rgba(124,58,237,.35);
}

.btn-secondary {

    padding: 16px 30px;

    border-radius: 999px;

    background: #eef2f7;

    color: var(--text);
}

.btn-secondary:hover {

    background: #e2e8f0;
}


/**
 * =========================================================
 * REVIEW STEP
 * =========================================================
 */

 .review-card {

    background: #fafbff;

    border: 1px solid #edf0f5;

    border-radius: 24px;

    padding: 35px;

    margin-top: 25px;
}

.review-group {

    margin-bottom: 35px;
}

.review-group:last-child {

    margin-bottom: 0;
}

.review-title {

    font-size: 1.2rem;
    font-weight: 700;

    color: var(--text);

    margin-bottom: 20px;
}

.review-item {

    display: flex;

    justify-content: space-between;
    align-items: center;

    gap: 20px;

    padding: 14px 0;

    border-bottom: 1px solid #eceff5;
}

.review-item span {

    color: var(--text-light);
}

.review-item strong {

    color: var(--text);
    text-align: right;
}

.review-text {

    margin-bottom: 20px;
}

.review-text label {

    display: block;

    margin-bottom: 10px;

    font-weight: 600;

    color: var(--text);
}

.review-text p {

    background: #fff;

    padding: 18px;

    border-radius: 14px;

    line-height: 1.8;

    border: 1px solid #edf0f5;

    color: var(--text-light);
}

/**
 * =========================================================
 * CONSENT
 * =========================================================
 */

.consent-box {

    margin-top: 35px;

    padding: 25px;

    border-radius: 20px;

    background: #f5f3ff;

    border: 1px solid rgba(124,58,237,.12);
}

.consent-label {

    display: flex;

    align-items: flex-start;

    gap: 15px;

    cursor: pointer;

    line-height: 1.7;

    color: var(--text);
}

.consent-label input {

    margin-top: 4px;

    width: 18px;
    height: 18px;

    accent-color: var(--primary);
}
/**
 * =========================================================
 * TOAST (CENTERED)
 * =========================================================
 */

.toast {

    position: fixed;

    top: 30px;
    left: 50%;

    transform:
        translateX(-50%)
        translateY(-30px);

    min-width: 320px;
    max-width: 500px;

    padding: 18px 24px;

    border-radius: 14px;

    color: #fff;

    font-weight: 600;

    text-align: center;

    box-shadow:
        0 20px 60px rgba(0,0,0,.18);

    opacity: 0;

    visibility: hidden;

    transition: all .35s ease;

    z-index: 999999;
}

.toast.show {

    opacity: 1;

    visibility: visible;

    transform:
        translateX(-50%)
        translateY(0);
}

.toast.success {

    background:
        linear-gradient(
            135deg,
            #16a34a,
            #22c55e
        );
}

.toast.error {

    background:
        linear-gradient(
            135deg,
            #dc2626,
            #ef4444
        );
}

.toast.info {

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #3b82f6
        );
}

/**
 * =========================================================
 * SUCCESS PAGE
 * =========================================================
 */

.success-page {

    padding: 120px 20px;
}

.success-card {

    max-width: 700px;

    margin: 0 auto;

    background: #fff;

    padding: 60px;

    border-radius: var(--radius-lg);

    text-align: center;

    box-shadow: var(--shadow-lg);
}

.success-icon {

    width: 100px;
    height: 100px;

    margin: 0 auto 30px;

    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    background: rgba(22,163,74,.1);

    font-size: 2.5rem;
}

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

@media (max-width: 992px) {

    .col-md-4 {

        width: 50%;
    }
}

@media (max-width: 768px) {

    .volunteer-page {

        padding: 40px 15px;
    }

    .volunteer-form {

        padding: 30px 20px;
    }

    .page-header h1 {

        font-size: 2.2rem;
    }

    .col-12,
    .col-md-4,
    .col-md-6 {

        width: 100%;
    }

    .wizard-navigation {

        flex-direction: column;
    }

    .btn-primary,
    .btn-secondary {

        width: 100%;
    }

    .toast {

        width: calc(100% - 30px);

        min-width: auto;

        top: 20px;
    }
}