:root {
    --register-dark-blue: #063363;
    --register-primary: #0878bd;
    --register-light-blue: #1598d6;
    --register-text: #0b3159;
    --register-gray: #737c87;
    --register-border: #d8dee7;
    --register-background: #f7f9fd;
    --register-danger: #d43145;
    --register-success: #23a26d;
}

.register-page {
    min-height: 100vh;
    color: var(--register-text);
    background: radial-gradient( circle at 85% 7%, rgba(35, 150, 217, 0.08), transparent 24% ), #f8faff;
}

.register-hero {
    min-height: 100vh;
    position: relative;
    overflow: hidden;
    padding: 38px 0 28px;
}

.register-page-decoration {
    width: 410px;
    height: 650px;
    position: absolute;
    top: 90px;
    left: -80px;
    opacity: 0.16;
    pointer-events: none;
    background: linear-gradient( rgba(7, 106, 172, 0.2), rgba(7, 106, 172, 0) ), url("../images/electricity-towers.jpg") center / cover no-repeat;
    mask-image: linear-gradient( to right, black, transparent );
}

.register-page-heading {
    position: relative;
    z-index: 2;
    margin-bottom: 33px;
    text-align: center;
}

    .register-page-heading h1 {
        margin: 0;
        color: #092f5a;
        font-size: 37px;
        font-weight: 800;
    }

    .register-page-heading p {
        margin: 12px 0 4px;
        color: #68727f;
        font-size: 16px;
    }

    .register-page-heading span {
        color: #68727f;
        font-size: 15px;
    }

/* ===============================
   Progress
================================ */

.registration-progress {
    width: min(100%, 660px);
    min-height: 100px;
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin: 0 auto 27px;
}

.progress-line {
    height: 2px;
    position: absolute;
    z-index: 1;
    top: 22px;
    right: 16.66%;
    left: 16.66%;
    overflow: hidden;
    background: #d6dbe2;
}

    .progress-line span {
        width: 0;
        height: 100%;
        display: block;
        margin-right: 0;
        background: #168fcf;
        transition: width 0.35s ease;
    }

.progress-step {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 12px;
    border: none;
    color: #707985;
    background: transparent;
    font-family: inherit;
    cursor: pointer;
}

.step-number {
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #cfd5de;
    border-radius: 50%;
    color: #4c5967;
    background: #ffffff;
    font-size: 17px;
    font-weight: 700;
    transition: 0.25s ease;
}

.step-name {
    font-size: 14px;
    font-weight: 600;
}

.progress-step.active .step-number {
    border-color: #1089ca;
    color: #ffffff;
    background: linear-gradient( 135deg, #0969b2, #1598d5 );
    box-shadow: 0 7px 18px rgba(12, 125, 190, 0.22);
}

.progress-step.active .step-name {
    color: #0b4776;
    font-weight: 800;
}

.progress-step.completed .step-number {
    border-color: #1a91cd;
    color: #168cc7;
    background: #eef9ff;
}

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

.registration-step {
    display: none;
    position: relative;
    z-index: 3;
}

    .registration-step.active {
        display: block;
        animation: stepFadeIn 0.35s ease;
    }

@keyframes stepFadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

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

.registration-card {
    width: min(100%, 1100px);
    margin: 0 auto 22px;
    padding: 31px 37px 27px;
    border: 1px solid rgba(13, 78, 130, 0.05);
    border-radius: 17px;
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 12px 35px rgba(26, 62, 99, 0.07);
}

.step-card-heading {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 30px;
}

.step-heading-icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    color: #087fc2;
    background: #edf8fd;
    font-size: 28px;
}

.step-card-heading span {
    display: block;
    margin-bottom: 5px;
    color: #0b4776;
    font-size: 16px;
    font-weight: 800;
}

.step-card-heading h2 {
    margin: 0;
    color: #123a60;
    font-size: 16px;
    font-weight: 700;
}

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

.registration-grid {
    display: grid;
    gap: 26px 31px;
}

    .registration-grid.two-columns {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

.registration-field label {
    display: block;
    margin-bottom: 9px;
    color: #263e55;
    font-size: 14px;
    font-weight: 700;
}

.required-star {
    color: var(--register-danger);
}

.field-input-container {
    position: relative;
}

.register-input {
    width: 100%;
    height: 51px;
    padding: 0 48px;
    border: 1px solid var(--register-border);
    border-radius: 7px;
    outline: none;
    color: #2d4358;
    background: #ffffff;
    font-family: inherit;
    font-size: 14px;
    text-align: right;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

    .register-input::placeholder {
        color: #a0a6ae;
    }

    .register-input:focus {
        border-color: #178ccc;
        box-shadow: 0 0 0 4px rgba(20, 140, 202, 0.08);
    }

.field-icon {
    position: absolute;
    top: 50%;
    left: 16px;
    color: #8c96a1;
    font-size: 17px;
    transform: translateY(-50%);
    pointer-events: none;
}

.toggle-password-button {
    width: 40px;
    height: 40px;
    position: absolute;
    top: 50%;
    right: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    color: #7d8996;
    background: transparent;
    font-size: 17px;
    transform: translateY(-50%);
    cursor: pointer;
}

    .toggle-password-button:hover {
        background: #f1f5f8;
    }

.password-field {
    padding-right: 50px;
}

.field-validation-error,
.field-validation-valid {
    display: block;
    min-height: 18px;
    margin-top: 5px;
    color: var(--register-danger);
    font-size: 12px;
}

.input-validation-error {
    border-color: var(--register-danger) !important;
    background: #fffafb;
}

.register-summary:empty,
.validation-summary-valid {
    display: none;
}

/* ===============================
   Identity images
================================ */

.identity-images-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 25px 0 13px;
    color: #243d56;
    font-size: 14px;
    font-weight: 700;
}

    .identity-images-title small {
        color: #8a929d;
        font-size: 12px;
        font-weight: 400;
    }

.identity-upload-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

.identity-file-input {
    width: 1px;
    height: 1px;
    position: absolute;
    overflow: hidden;
    opacity: 0;
}

.identity-upload-card {
    min-height: 205px;
    position: relative;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    padding: 22px;
    border: 1px dashed #cbd4df;
    border-radius: 10px;
    background: #ffffff;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

    .identity-upload-card:hover {
        border-color: #148ccc;
        background: #fafdff;
        transform: translateY(-2px);
    }

.identity-side-label {
    position: absolute;
    top: 14px;
    right: 14px;
    padding: 3px 10px;
    border-radius: 4px;
    color: #356181;
    background: #eef5fa;
    font-size: 11px;
}

.upload-preview-container {
    width: 56px;
    height: 50px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 5px;
}

.upload-main-icon {
    color: #0788ca;
    font-size: 38px;
}

.identity-preview {
    width: 100%;
    height: 100%;
    display: none;
    border-radius: 6px;
    object-fit: cover;
}

    .identity-preview.visible {
        display: block;
    }

.identity-upload-card.has-image
.upload-main-icon {
    display: none;
}

.identity-upload-card strong {
    color: #29445c;
    font-size: 13px;
}

.upload-description {
    margin-top: 7px;
    color: #737d87;
    font-size: 11px;
    line-height: 1.6;
}

.upload-button {
    min-width: 116px;
    margin-top: 10px;
    padding: 6px 17px;
    border-radius: 5px;
    color: #ffffff;
    background: linear-gradient( 90deg, #075fae, #1596d4 );
    font-size: 12px;
    font-weight: 700;
}

.selected-file-name {
    max-width: 90%;
    margin-top: 7px;
    overflow: hidden;
    color: #1686bf;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ===============================
   Phone
================================ */

.phone-field {
    height: 51px;
    display: grid;
    grid-template-columns: 120px 1fr;
    direction: ltr;
}

.country-code-select {
    height: 51px;
    padding: 0 12px;
    border: 1px solid var(--register-border);
    border-right: none;
    border-radius: 7px 0 0 7px;
    outline: none;
    color: #4a5967;
    background: #ffffff;
    font-family: inherit;
}

.phone-number-input {
    border-radius: 0 7px 7px 0;
    direction: rtl;
}

/* ===============================
   Password rules
================================ */

.password-requirements {
    margin-top: 11px;
    padding: 13px 16px;
    border: 1px solid #e3e7ec;
    border-radius: 7px;
    background: #fafbfd;
}

    .password-requirements > span {
        color: #485767;
        font-size: 12px;
        font-weight: 700;
    }

    .password-requirements ul {
        display: grid;
        gap: 5px;
        margin: 9px 0 0;
        padding: 0;
        list-style: none;
    }

    .password-requirements li {
        display: flex;
        align-items: center;
        gap: 7px;
        color: #7d8790;
        font-size: 11px;
    }

        .password-requirements li i {
            font-size: 12px;
        }

        .password-requirements li.valid {
            color: var(--register-success);
        }

/* ===============================
   Terms
================================ */

.terms-container {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 25px;
}

.terms-checkbox {
    width: 18px;
    height: 18px;
    accent-color: #1086c7;
}

.terms-container label {
    margin: 0;
    color: #596674;
    font-size: 13px;
}

.terms-container a {
    color: #087db9;
    font-weight: 700;
}

.terms-error {
    margin-right: 27px;
}

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

.step-actions {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    margin-top: 28px;
}

    .step-actions.single-action {
        justify-content: flex-end;
    }

.next-step-button,
.previous-step-button,
.register-submit-button {
    min-width: 112px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border-radius: 7px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.next-step-button,
.register-submit-button {
    border: none;
    color: #ffffff;
    background: linear-gradient( 90deg, #075ead, #1597d5 );
    box-shadow: 0 6px 16px rgba(13, 124, 185, 0.16);
}

.previous-step-button {
    border: 1px solid #1784bd;
    color: #1376a8;
    background: #ffffff;
}

    .next-step-button:hover,
    .previous-step-button:hover,
    .register-submit-button:hover {
        transform: translateY(-1px);
    }

.final-actions {
    margin-top: 29px;
}

.register-submit-button {
    min-width: 270px;
}

    .register-submit-button:disabled {
        opacity: 0.7;
        cursor: wait;
    }

/* ===============================
   Support
================================ */

.register-support-card {
    width: min(100%, 1170px);
    min-height: 78px;
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 28px;
    margin: 0 auto;
    padding: 18px 25px;
    border-radius: 9px;
    background: #ffffff;
    box-shadow: 0 8px 26px rgba(28, 61, 95, 0.06);
    color: #67727e;
    font-size: 13px;
}

    .register-support-card a {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        color: #087ebd;
        font-weight: 600;
    }

    .register-support-card i {
        font-size: 18px;
    }

.support-separator {
    width: 1px;
    height: 24px;
    background: #e0e5eb;
}

/* ===============================
   Responsive
================================ */

@media (max-width: 991.98px) {

    .registration-card {
        padding: 28px 25px;
    }

    .registration-grid.two-columns,
    .identity-upload-grid {
        grid-template-columns: 1fr;
    }

    .register-page-decoration {
        display: none;
    }
}

@media (max-width: 575.98px) {

    .register-hero {
        padding-top: 25px;
    }

    .register-page-heading h1 {
        font-size: 29px;
    }

    .register-page-heading p {
        font-size: 14px;
    }

    .registration-progress {
        min-height: 88px;
    }

    .step-number {
        width: 39px;
        height: 39px;
        font-size: 14px;
    }

    .progress-line {
        top: 19px;
    }

    .step-name {
        font-size: 11px;
    }

    .registration-card {
        padding: 22px 16px;
        border-radius: 13px;
    }

    .step-card-heading {
        margin-bottom: 24px;
    }

    .step-heading-icon {
        width: 47px;
        height: 47px;
        font-size: 23px;
    }

    .identity-images-title {
        align-items: flex-start;
        flex-direction: column;
        gap: 5px;
    }

    .phone-field {
        grid-template-columns: 105px 1fr;
    }

    .step-actions {
        justify-content: space-between;
    }

    .next-step-button,
    .previous-step-button {
        flex: 1;
    }

    .final-actions {
        align-items: stretch;
        flex-direction: column-reverse;
    }

    .register-submit-button {
        width: 100%;
        min-width: 0;
    }

    .register-support-card {
        align-items: flex-start;
        flex-direction: column;
        gap: 13px;
    }

    .support-separator {
        width: 100%;
        height: 1px;
    }
    .identity-check-message {
        min-height: 21px;
        margin-top: 14px;
        padding: 0;
        border-radius: 7px;
        font-size: 13px;
        font-weight: 600;
    }

        .identity-check-message:empty {
            display: none;
        }

        .identity-check-message.success {
            display: block;
            padding: 11px 14px;
            border: 1px solid rgba(35, 162, 109, 0.22);
            color: #188052;
            background: rgba(35, 162, 109, 0.07);
        }

        .identity-check-message.error {
            display: block;
            padding: 11px 14px;
            border: 1px solid rgba(212, 49, 69, 0.20);
            color: #b62639;
            background: rgba(212, 49, 69, 0.06);
        }

    .next-step-button:disabled {
        opacity: 0.72;
        cursor: wait;
        transform: none;
    }
}