/* ======================================
   JOIN PROFESSIONAL
====================================== */

.pro-join-page {
    min-height: 100vh;
    background: #f7faff;
    /* space for fixed navbar */
    padding: 115px 0 80px;
    color: #031d3b;
}

.pro-join-wrapper {
    max-width: 740px;
    margin: 0 auto;
}


/* HEADER */

.pro-join-header {
    text-align: center;
    margin-bottom: 16px;
}

    .pro-join-header h1 {
        font-size: 36px;
        line-height: 1.2;
        font-weight: 700;
        margin: 0;
        color: #031b39;
    }

    .pro-join-header p {
        margin: 10px 0 0;
        color: #61728a;
        font-size: 16px;
    }


/* ======================================
   STEP INDICATOR
====================================== */

.pro-steps {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 9px;
    margin: 18px 0 24px;
}

.pro-step {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #7a8798;
}

.pro-step-circle {
    width: 33px;
    height: 33px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background: #eef1f6;
    font-size: 12px;
    font-weight: 700;
    transition: .2s;
}

.pro-step-text {
    font-size: 12px;
    font-weight: 500;
}

.pro-step.active {
    color: #071e3b;
}

    .pro-step.active .pro-step-circle,
    .pro-step.completed .pro-step-circle {
        background: #4763f5;
        color: #fff;
    }

.pro-step.completed {
    color: #071e3b;
}

.pro-steps > i {
    color: #c7cfda;
    font-size: 14px;
}


/* ======================================
   CONTENT
====================================== */

.pro-step-content {
    display: none;
}

    .pro-step-content.active {
        display: block;
    }

.pro-card {
    background: #fff;
    border: 1px solid #d7dfeb;
    border-radius: 16px;
    padding: 32px;
    box-shadow: 0 1px 3px rgba(0, 20, 60, .04);
}


/* CARD TITLE */

.pro-card-title {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    margin-bottom: 16px;
}

.pro-title-icon {
    width: 37px;
    height: 37px;
    min-width: 37px;
    border-radius: 11px;
    background: #eef0ff;
    color: #4763f5;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .pro-title-icon i {
        font-size: 18px;
    }

.pro-card-title h2 {
    font-size: 19px;
    font-weight: 700;
    margin: 4px 0 0;
    color: #041e3c;
}

.pro-card-title p {
    color: #61728a;
    font-size: 14px;
    margin: 6px 0 0;
}


/* ======================================
   SERVICES
====================================== */

.pro-services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 11px;
}

.pro-service {
    min-height: 61px;
    padding: 12px 14px;
    background: #fff;
    border: 1px solid #d7dfeb;
    border-radius: 12px;
    display: flex;
    gap: 11px;
    align-items: center;
    color: #041e3c;
    font-size: 14px;
    font-weight: 500;
    text-align: left;
    transition: .2s;
}

    .pro-service i {
        color: #0e365e;
        font-size: 16px;
        flex-shrink: 0;
    }

    .pro-service:hover {
        border-color: #8092ff;
        background: #fafbff;
    }

    .pro-service.selected {
        border-color: #4964ff;
        color: #4964ff;
        background: #eef0ff;
    }

        .pro-service.selected i {
            color: #4964ff;
        }

.pro-selected-count {
    display: none;
    margin-top: 17px;
    font-size: 13px;
    color: #61728a;
}

    .pro-selected-count strong {
        color: #4964ff;
    }


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

.pro-primary-btn {
    width: 100%;
    min-height: 48px;
    border: 0;
    border-radius: 24px;
    background: #4561f4;
    color: #fff;
    font-weight: 600;
    font-size: 15px;
    margin-top: 22px;
    transition: .2s;
}

    .pro-primary-btn i {
        margin-left: 9px;
    }

    .pro-primary-btn:hover:not(:disabled) {
        background: #3853e4;
    }

    .pro-primary-btn:disabled {
        background: #9eaefa;
        cursor: not-allowed;
    }


/* ======================================
   AREA
====================================== */

.pro-area-types {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin: 22px 0 26px;
}

.pro-area-type {
    min-height: 120px;
    border: 1px solid #d6dfeb;
    border-radius: 13px;
    background: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 7px;
    color: #071e3b;
    transition: .2s;
}

    .pro-area-type i {
        font-size: 25px;
        color: #66778b;
    }

    .pro-area-type strong {
        font-size: 14px;
    }

    .pro-area-type small {
        font-size: 12px;
        color: #6e7b91;
    }

    .pro-area-type.active {
        border-color: #4964ff;
        background: #eef0ff;
        color: #4964ff;
    }

        .pro-area-type.active i {
            color: #4964ff;
        }


/* FORM */

.pro-form-group {
    margin-top: 20px;
    position: relative;
}

    .pro-form-group label,
    .pro-label {
        display: block;
        font-size: 13px;
        font-weight: 500;
        margin-bottom: 7px;
        color: #031d3b;
    }

        .pro-label span {
            color: #69788c;
            font-weight: 400;
        }

.pro-input,
.pro-input-icon input {
    width: 100%;
    min-height: 50px;
    border: 1px solid #d7dfeb;
    background: #f9fbfd;
    border-radius: 12px;
    padding: 0 16px;
    color: #071e3b;
    font-size: 14px;
    outline: none;
    transition: .2s;
}

textarea.pro-input {
    padding-top: 13px;
}

.pro-input:focus,
.pro-input-icon input:focus {
    border-color: #4964ff;
    box-shadow: 0 0 0 3px rgba(73, 100, 255, .08);
}

.pro-input-icon {
    position: relative;
}

    .pro-input-icon i {
        position: absolute;
        left: 15px;
        top: 50%;
        transform: translateY(-50%);
        color: #74859a;
    }

    .pro-input-icon input {
        padding-left: 42px;
    }


/* POSTCODE */

.postcode-suggestions {
    display: none;
    position: absolute;
    top: 79px;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #d7dfeb;
    border-radius: 11px;
    z-index: 20;
    box-shadow: 0 8px 25px rgba(15, 36, 70, .1);
    overflow: hidden;
}

.postcode-suggestion-item {
    width: 100%;
    border: 0;
    background: #fff;
    padding: 11px 15px;
    text-align: left;
    font-size: 13px;
    color: #092543;
}

    .postcode-suggestion-item:hover {
        background: #f5f7ff;
    }

    .postcode-suggestion-item strong {
        margin-right: 9px;
    }


.selected-area-box {
    display: none;
    margin-top: 8px;
    min-height: 40px;
    background: #f4f6ff;
    border-radius: 10px;
    padding: 10px 16px;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
}

    .selected-area-box span {
        color: #4964ff;
    }

    .selected-area-box button {
        border: 0;
        background: transparent;
        color: #57667b;
        font-size: 12px;
    }


/* RANGE */

.pro-radius {
    margin-top: 26px;
}

    .pro-radius p {
        font-size: 13px;
    }

    .pro-radius strong {
        color: #4964ff;
    }

    .pro-radius input[type="range"] {
        width: 100%;
        accent-color: #4964ff;
    }

.radius-values {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: #708096;
}


/* ======================================
   ACTION ROW
====================================== */

.pro-action-row {
    display: flex;
    gap: 12px;
    margin-top: 20px;
}

    .pro-action-row .pro-primary-btn {
        flex: 1;
        margin-top: 0;
    }

.pro-back-btn {
    min-width: 135px;
    height: 48px;
    border: 1px solid #d7dfeb;
    border-radius: 24px;
    background: #fff;
    color: #071e3b;
    font-weight: 600;
}

    .pro-back-btn i {
        margin-right: 9px;
    }


/* ======================================
   PASSWORD
====================================== */

.pro-password-wrapper {
    position: relative;
}

    .pro-password-wrapper .pro-input {
        padding-right: 45px;
    }

    .pro-password-wrapper button {
        position: absolute;
        right: 13px;
        top: 50%;
        transform: translateY(-50%);
        border: 0;
        background: transparent;
        color: #64748b;
    }


/* TERMS */

.pro-terms-box {
    margin-top: 16px;
    border: 2px solid #aeb8ff;
    background: #f6f7ff;
    border-radius: 12px;
    padding: 15px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
    cursor: pointer;
}

    .pro-terms-box input {
        width: 20px;
        height: 20px;
        margin-top: 1px;
    }

    .pro-terms-box span {
        font-size: 13px;
    }

    .pro-terms-box a {
        color: #3556f6;
    }


.pro-login-text {
    text-align: center;
    margin-top: 17px;
    font-size: 13px;
    color: #627087;
}

    .pro-login-text button {
        border: 0;
        background: transparent;
        color: #3556f6;
    }


/* ======================================
   PROFILE
====================================== */

/* ======================================
   PROFILE
====================================== */

.profile-photo-section {
    display: flex;
    align-items: center;
    gap: 20px;
    margin: 24px 0 28px;
}

/* ======================================
   PROFILE IMAGE UPLOAD
====================================== */

.profile-photo-placeholder {
    width: 96px;
    height: 96px;
    min-width: 96px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px dashed #c5cfdf;
    border-radius: 50%;
    background: #f7f9fd;
    color: #63758d;
    cursor: pointer;
    overflow: hidden;
    transition: all .2s ease;
}

    .profile-photo-placeholder:hover {
        border-color: #4964ff;
        background: #f0f2ff;
        color: #4964ff;
    }


    .profile-photo-placeholder i {
        font-size: 28px;
        line-height: 1;
    }

    /* PROFILE PREVIEW */

    .profile-photo-placeholder img {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        object-fit: cover;
        border-radius: 50%;
        z-index: 2;
    }


.profile-photo-section strong {
    font-size: 14px;
}

.profile-photo-section p {
    margin: 5px 0 0;
    font-size: 13px;
    color: #77869a;
}

/* ======================================
   PROFILE HELPER
====================================== */

.profile-helper {
    font-size: 13px;
    color: #77869a;
    margin: 4px 0 0;
}

/* ======================================
   GALLERY CONTAINER
====================================== */

.gallery-preview-container {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 14px;
}


/* ======================================
   ADD PHOTO BUTTON
====================================== */

.gallery-upload-placeholder {
    width: 110px;
    height: 110px;
    border: 2px dashed #c5cfdf;
    border-radius: 14px;
    background: #f8faff;
    color: #60738b;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    transition: all .2s ease;
}


    .gallery-upload-placeholder:hover {
        border-color: #4964ff;
        background: #f0f2ff;
        color: #4964ff;
        transform: translateY(-1px);
    }


    .gallery-upload-placeholder i {
        width: 35px;
        height: 35px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: #e9edff;
        color: #4964ff;
        font-size: 17px;
    }

    .gallery-upload-placeholder span {
        font-size: 12px;
        font-weight: 600;
        color: #34465e;
    }
/* ======================================
   GALLERY IMAGE
====================================== */

.gallery-preview-item {
    position: relative;
    width: 110px;
    height: 110px;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid #d7dfeb;
    background: #f6f8fb;
}


    .gallery-preview-item img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }


/* ======================================
   REMOVE IMAGE BUTTON
====================================== */

.gallery-remove-btn {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 27px;
    height: 27px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(8, 20, 40, .72);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 4;
    transition: .2s;
}


    .gallery-remove-btn:hover {
        background: #dc3545;
    }


    .gallery-remove-btn i {
        font-size: 17px;
        line-height: 1;
    }


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

@media (max-width: 767px) {

    .pro-join-page {
        padding: 95px 0 55px;
    }

    .pro-join-wrapper {
        padding: 0 3px;
    }

    .pro-join-header h1 {
        font-size: 28px;
    }

    .pro-join-header p {
        font-size: 14px;
    }

    .pro-card {
        padding: 20px 16px;
    }

    .pro-step-text {
        display: none;
    }

    .pro-steps {
        gap: 8px;
    }

    .pro-services-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .pro-service {
        min-height: 57px;
        padding: 10px;
        font-size: 12px;
    }

    .pro-area-types {
        grid-template-columns: 1fr 1fr;
    }

    .pro-area-type {
        padding: 12px 7px;
    }

    .pro-action-row {
        align-items: stretch;
    }

    .pro-back-btn {
        min-width: 105px;
    }
}


@media (max-width: 450px) {

    .pro-service {
        font-size: 11px;
    }

    .pro-area-type strong {
        font-size: 12px;
    }

    .pro-area-type small {
        font-size: 10px;
    }
}

/* ======================================
   MOBILE PROFILE
====================================== */

@media (max-width: 575px) {

    .profile-photo-placeholder {
        width: 85px;
        height: 85px;
        min-width: 85px;
    }


    .profile-photo-section {
        gap: 14px;
    }


    .gallery-upload-placeholder,
    .gallery-preview-item {
        width: 95px;
        height: 95px;
    }
}