/*
 * Fully Responsive CSS
 * Applied media queries for mobile-first adjustments
 */

/* === Base Styles for marzaz-application-wrapper === */
.marzaz-application-wrapper {
    max-width: 940px;
    width: 95%; /* Added for better small-screen fit */
    margin: 30px auto;
    padding: 25px; /* Unified padding for simpler adjustment */
    background: #ffffff;
    border-radius: 10px;
    border-top: 5px solid #1177FF;
    box-shadow: 0 12px 30px rgba(0,0,0,0.07);
    font-family: inherit, sans-serif;
    color: #222;
    box-sizing: border-box;
}

/* === Typography & Headers === */
.marzaz-title {
    margin-top: 0;
    margin-bottom: 4px;
    font-size: 24px;
    color: #1177FF;
    font-weight: 700;
}

.marzaz-subtitle {
    margin-top: 0;
    margin-bottom: 20px;
    color: #555;
    font-size: 14px;
}

.marzaz-step-card h3 {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 18px;
    color: #111827;
}

.marzaz-step-card h4 {
    margin-top: 18px;
    margin-bottom: 8px;
    font-size: 15px;
    color: #1f2933;
}

.marzaz-step-card h5 {
    margin-top: 10px;
    margin-bottom: 6px;
    font-size: 14px;
    color: #374151;
}

/* === Steps Header & Labels (Horizontal on Desktop) === */
.marzaz-steps-header {
    margin-bottom: 20px;
}

.marzaz-step-labels {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
}

.marzaz-step-label {
    flex: 1 1 120px;
    font-size: 12px;
    padding: 7px 10px;
    border-radius: 999px;
    border: 1px solid #e0e7ff;
    color: #6b7280;
    text-align: center;
    background: #f9fafb;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background 0.1s, border-color 0.1s;
}

.marzaz-step-label.is-active {
    background: #1177FF;
    border-color: #1177FF;
    color: #ffffff;
    font-weight: 600;
    box-shadow: 0 6px 14px rgba(17,119,255,0.35);
}

/* === Progress Bar === */
.marzaz-progress {
    width: 100%;
    height: 6px;
    background: #e5e7eb;
    border-radius: 999px;
    overflow: hidden;
}

.marzaz-progress-bar {
    height: 100%;
    width: 20%;
    background: linear-gradient(90deg, #1177FF, #4f9dff);
    border-radius: 999px;
    transition: width 0.25s ease-out;
}

/* === Steps Container & Cards === */
.marzaz-steps-container {
    position: relative;
    margin-top: 10px;
}

.marzaz-step-card {
    background: #f9fafb;
    border-radius: 8px;
    padding: 20px 18px 20px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 4px 10px rgba(15,23,42,0.03);
    opacity: 0;
    transform: translateX(12px);
    pointer-events: none;
    position: relative;
    transition: opacity 0.2s ease-out, transform 0.2s ease-out;
    display: none; /* Controlled by JS to be visible/hidden, but display: none is the initial state */
}

.marzaz-step-card.is-active {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
    display: block;
}

/* === Form Fields & Grid === */
.marzaz-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 15px 20px;
}

.marzaz-field {
    flex: 1 1 200px;
    margin-bottom: 12px;
}

.marzaz-field label {
    display: block;
    font-size: 13px;
    margin-bottom: 3px;
    font-weight: 600;
    color: #374151;
}

.marzaz-required-ind {
    color: #dc2626;
    margin-left: 3px;
    font-weight: 700;
}

.marzaz-field input[type="text"],
.marzaz-field input[type="date"],
.marzaz-field input[type="email"],
.marzaz-field select,
.marzaz-field textarea {
    width: 100%;
    padding: 8px 9px;
    border-radius: 6px;
    border: 1px solid #d1d5db;
    font-size: 13px;
    box-sizing: border-box;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.1s;
    background: #ffffff;
    color: #020617 !important;
}

.marzaz-field textarea {
    resize: vertical;
    min-height: 70px;
    color: #020617 !important;
}

.marzaz-field input:focus,
.marzaz-field select:focus,
.marzaz-field textarea:focus {
    outline: none;
    border-color: #1177FF;
    box-shadow: 0 0 0 2px rgba(17,119,255,0.15);
}

.marzaz-inline-options {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 20px;
    font-size: 13px;
}

.marzaz-inline-options label {
    font-weight: 400;
    color: #4b5563;
}

.marzaz-help {
    font-size: 12px;
    color: #6b7280;
    margin-top: 3px;
}

.marzaz-note {
    font-size: 11px;
    color: #9ca3af;
}

/* === Cards inside steps === */
.marzaz-employer-block,
.marzaz-edu-block,
.marzaz-ref-block {
    padding: 12px 12px 15px;
    border-radius: 6px;
    border: 1px solid #e5e7eb;
    margin-bottom: 15px;
    background: #ffffff;
}

/* === Alerts === */
.marzaz-alert {
    padding: 10px 12px;
    border-radius: 6px;
    margin-bottom: 15px;
    font-size: 13px;
}

.marzaz-alert-error {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
}

.marzaz-alert-success {
    background: #ecfdf3;
    border: 1px solid #bbf7d0;
    color: #166534;
}

.marzaz-alert ul {
    margin: 5px 0 0;
    padding-left: 18px;
}

/* === Wizard Buttons === */
.marzaz-step-nav {
    margin-top: 15px;
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.marzaz-step-nav-final {
    margin-top: 20px;
}

.marzaz-btn-prev,
.marzaz-btn-next,
.marzaz-submit-btn {
    border-radius: 999px;
    border: none;
    font-size: 13px;
    font-weight: 600;
    padding: 9px 20px;
    cursor: pointer;
    letter-spacing: 0.02em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    transition: background 0.15s, box-shadow 0.15s;
}

.marzaz-btn-prev {
    background: #e5e7eb;
    color: #374151;
    box-shadow: 0 3px 7px rgba(148,163,184,0.35);
}

.marzaz-btn-prev:hover {
    background: #d1d5db;
}

.marzaz-btn-next {
    background: #1177FF;
    color: #ffffff;
    box-shadow: 0 4px 11px rgba(17,119,255,0.45);
}

.marzaz-btn-next:hover {
    background: #0f67d6;
}

.marzaz-submit-btn {
    background: #111827;
    color: #ffffff;
    box-shadow: 0 5px 15px rgba(15,23,42,0.45);
}

.marzaz-submit-btn:hover {
    background: #020617;
}

.marzaz-submit-btn[disabled],
.marzaz-submit-btn[disabled]:hover {
    background: #9ca3af;
    box-shadow: none;
    cursor: not-allowed;
}

/* === Inline Errors & Honeypot === */
.marzaz-has-error input,
.marzaz-has-error select,
.marzaz-has-error textarea {
    border-color: #dc2626;
    background: #fef2f2;
}

.marzaz-error-msg {
    font-size: 11px;
    color: #b91c1c;
    margin-top: 2px;
    min-height: 13px;
}

.marzaz-honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}


@media (max-width: 768px) {
    /* Main wrapper adjustments */
    .marzaz-application-wrapper {
        width: calc(100% - 16px); /* Use full width minus small margin */
        padding: 18px 14px 25px;
        margin: 15px 8px 25px;
    }

    /* Step Labels adjustments */
    .marzaz-step-labels {
        flex-direction: column;
        gap: 5px; /* Tighter spacing when stacked */
    }

    .marzaz-step-label {
        flex: 1 1 100%; /* Make label take full width */
        text-align: left;
    }

    /* Reduce Step Card Padding */
    .marzaz-step-card {
        padding: 15px 15px 18px;
    }
}

@media (max-width: 640px) {
    /* Form Grid Collapse */
    .marzaz-grid {
        flex-direction: column;
        gap: 0; /* Remove gap when stacking vertically */
    }

    .marzaz-field {
        flex: 1 1 100%; /* Ensure fields take full width */
        margin-bottom: 15px; /* Add some margin back between stacked fields */
    }

    /* Button/Navigation Stacking */
    .marzaz-step-nav {
        flex-direction: column-reverse; /* Previous button goes on top */
        align-items: stretch;
        gap: 8px; /* Tighter button spacing */
    }

    .marzaz-step-nav-final {
        flex-direction: column-reverse;
    }

    .marzaz-btn-prev,
    .marzaz-btn-next,
    .marzaz-submit-btn {
        width: 100%;
    }
}