/* ==========================================================
   MYJAT Membership Registration
   Simple / Clean / Responsive
========================================================== */

#myjat-membership-form {
    max-width: 1000px;
    margin: 40px auto;
    padding: 35px;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: var(--myjat-radius-1);
    box-shadow: 0 10px 25px rgba(0, 0, 0, .06);
}


/* =========================================================
   Header
========================================================= */

.myjat-form-header {
    text-align: center;
    margin-bottom: 25px;
}

#myjat-membership-form h1 {
    margin: 0;
    color: #f58220;
    font-size: 34px;
    line-height: 1.3;
}

#myjat-membership-form h2 {
    margin: 6px 0 20px;
    color: #444;
    font-size: 24px;
    font-weight: 600;
}

.myjat-form-meta {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 12px 15px;
    background: #fff8f1;
    border: 1px solid #f4d5bb;
    border-radius: var(--myjat-radius-1);
    font-size: 14px;
}


/* =====================================================
   REGISTRATION PROGRESS
===================================================== */

.myjat-registration-progress {
    display: flex;
    align-items: center;
    width: 100%;
    margin: 25px 0 40px;
}

.myjat-progress-step {
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    color: #333;
}

.myjat-progress-step span {
    width: 38px;
    height: 38px;
    border: 1px solid #999;
    border-radius: var(--myjat-radius-1);
    background: #fff;
    color: #555;

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

    font-size: 16px;
    font-weight: 600;
}


/* CURRENT STEP */

.myjat-progress-step.is-active span {
    background: #c65a11;
    border-color: #c65a11;
    color: #fff;
}

.myjat-progress-step.is-active strong {
    color: #c65a11;
}


/* COMPLETED STEP */

.myjat-progress-step.is-complete span {
    background: #7b2d26;
    border-color: #7b2d26;
    color: #fff;
}

.myjat-progress-step.is-complete strong {
    color: #7b2d26;
}


/* FUTURE STEP */

.myjat-progress-step:not(.is-active):not(.is-complete) span {
    background: #fff;
    border-color: #bbb;
    color: #333;
}

.myjat-progress-step:not(.is-active):not(.is-complete) strong {
    color: #333;
}


/* LINE */

.myjat-progress-line {
    height: 1px;
    background: #d5d5d5;
    flex: 1;
    margin: 0 12px;
}


/* COMPLETED LINE */

.myjat-progress-step.is-complete
    + .myjat-progress-line {
    background: #7b2d26;
}


/* =========================================================
   Steps
========================================================= */

.myjat-registration-step {
    display: none;
}

.myjat-registration-step.is-active {
    display: block;
}

.myjat-section-heading {
    margin-bottom: 25px;
}

.myjat-section-heading h3 {
    margin: 0 0 5px;
    text-align: left;
    color: #333;
    font-size: 21px;
}

.myjat-section-heading p {
    margin: 0;
    color: #777;
    font-size: 14px;
}

.myjat-sub-heading {
    margin-top: 30px;
}


/* =========================================================
   Form Fields
========================================================= */

.myjat-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.myjat-form-group {
    margin-bottom: 20px;
}

.myjat-form-group label {
    display: block;
    margin-bottom: 7px;
    color: #444;
    font-size: 14px;
    font-weight: 600;
}

.myjat-input,
.myjat-select,
.myjat-textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 11px 12px;
    border: 1px solid #d8d8d8;
    border-radius: var(--myjat-radius-1);
    background: #fff;
    color: #333;
    font: inherit;
}

.myjat-input:focus,
.myjat-select:focus,
.myjat-textarea:focus {
    outline: none;
    border-color: #f58220;
}

.myjat-textarea {
    resize: vertical;
}

.myjat-form-group small {
    display: block;
    margin-top: 6px;
    color: #777;
}


/* =========================================================
   Messages
========================================================= */


/* =====================================================
   MEMBERSHIP APPLICATION MESSAGE
===================================================== */

.myjat-success-message,
.myjat-warning-message {
    width: min(620px, 90%);
    margin: 35px auto;
    padding: 28px 32px;

    text-align: center;

    border-radius: var(--myjat-radius-1);
    border: 1px solid #ddd;

    box-sizing: border-box;
}


/* SUCCESS */

.myjat-success-message {
    background: #f1f8f1;
    border-color: #b8d8b8;
    color: #333;

    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

.myjat-success-message strong {
    color: #267326;
}


/* WARNING */

.myjat-warning-message {
    background: #fff8ed;
    border-color: #e5c99b;
    color: #444;

    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

.myjat-warning-message strong {
    color: #a45a00;
}




/* =========================================================
   Sankalp
========================================================= */

.myjat-sankalp {
    padding: 20px;
    border: 1px solid #ddd;
    background: #fafafa;
    border-radius: var(--myjat-radius-1);
    line-height: 1.8;
    color: #444;
    font-size: 15px;
}

.myjat-sankalp p {
    margin-top: 0;
    font-weight: 600;
}

.myjat-sankalp ol {
    margin: 10px 0 0;
    padding-left: 25px;
}

.myjat-sankalp li {
    margin-bottom: 12px;
}

.myjat-sankalp-agreement {
    margin: 25px 0;
    padding: 14px 15px;
    border: 1px solid #ddd;
    border-radius: var(--myjat-radius-1);
    background: #fff;
}

.myjat-sankalp-agreement label {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    color: #444;
    font-size: 14px;
    line-height: 1.6;
}

.myjat-sankalp-agreement input {
    margin-top: 4px;
}


/* =========================================================
   Photo
========================================================= */

#myjat-photo-preview {
    display: none;
    max-width: 150px;
    max-height: 180px;
    margin-top: 12px;
    border: 1px solid #ddd;
    border-radius: var(--myjat-radius-1);
}


/* =========================================================
   Buttons
========================================================= */

.myjat-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #eee;
}