.internal-header{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    z-index:1000;
    background:
    radial-gradient(circle at top right,#1b70ff55 0%,transparent 35%),
    radial-gradient(circle at bottom left,#00b7ff22 0%,transparent 35%),
    linear-gradient(180deg,#06111d,#081827);
}

/*========================*/

.internal-container{
    width:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
}

/*========================*/

.internal-content{
    margin-top:360px;
}

/*========================*/

.page-title{
    color:#FFF;
    font-size:30px;
    font-weight:600;
    margin-bottom:20px;
}

/*========================*/

.internal-img{
    display:block;
    margin:80px auto 30px auto;
    width:320px;
    height:auto;
}

/*========================*/

.internal-img-txt{
    display:block;
    margin:100px auto 30px auto;
    width:280px;
    height:auto;
}

/*========================*/

.spacer{
    width:25%;
    height:4px;
    background-color:#006DFF;
    margin-top:-15px;
    margin-bottom:30px;
    border-radius:2px;
}

/*========================*/

.content-section{
    width:90%;
    max-width:1200px;
    margin:0 auto 30px;
}

/*========================*/

.content-section h3{
    color:#FFF;
    margin:25px 0 8px 5%;
}

/*========================*/

.content-section h2{
    width:90%;
    max-width:1080px;
    margin:0 auto 8px auto;
    color:#FFF;
    text-align:left !important;
}

.content-section p{
    width:90%;
    max-width:1080px;
    margin:0 auto 20px auto;
    color:#FFF;
    line-height:1.7;
    text-align:left;
}

/*========================*/

.back-home-btn{
    display:flex;
    justify-content:center;
    align-items:center;
    width:220px;
    height:42px;
    margin:50px auto;
    background:#FFF;
    color:#1B7CFF;
    border:2px solid #1B7CFF;
    border-radius:8px;
    font-size:16px;
    font-weight:600;
    text-decoration:none;
    gap:10px;
    transition:.3s;
}

.back-home-btn:hover{
    background:#1B7CFF;
    color:#FFF;
}

.back-home a{
    width:220px;
    text-decoration:none;
    display:flex;
    justify-content:center;
    align-items:center;
}

.back-home-btn span:first-child{
    font-size:20px;
    font-weight:700;
    line-height:1;
}

/*========================*/

.marketplace-intro{
    text-align:center;
    margin-bottom:40px;
}

.marketplace-intro h2{
    font-size:2rem;
    margin-bottom:12px;
}

.marketplace-subtitle{
    color:#6b7280;
    font-size:1.05rem;
    max-width:650px;
    margin:auto;
}

.marketplace-grid{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:22px;
}

.market-card{
    display:flex;
    align-items:center;
    gap:24px;

    width:90%;
    max-width:1100px;

    background:#fff;
    border:1px solid #e8ecf2;
    border-radius:18px;
    padding:28px;

    text-decoration:none;
    color:#111827;

    transition:all .25s ease;
    box-shadow:0 8px 20px rgba(0,0,0,.05);

    box-sizing:border-box;
}

.market-card:hover{
    transform:translateY(-4px);
    border-color:#2563eb;
    box-shadow:0 16px 35px rgba(0,0,0,.10);
}

.market-icon{
    font-size:48px;
    flex-shrink:0;
}

.market-info{
    flex:1;
}

.market-info h3{
    margin:0 0 8px;
    font-size:1.45rem;
}

.market-info p{
    margin:0;
    color:#6b7280;
    line-height:1.6;
}

.market-arrow{
    font-size:30px;
    color:#2563eb;
    font-weight:600;
    transition:.25s;
}

.market-card:hover .market-arrow{
    transform:translateX(6px);
}

.marketplace-intro h2{
    width:90%;
    max-width:1100px;
    margin:0 auto 12px auto;
    color:#FFF;
    text-align:center;
}

.marketplace-subtitle{
    width:80%;
    max-width:1100px;
    margin:0 auto 40px auto;
    color:#FFF;
    opacity:.8;
    text-align:center;
    line-height:1.7;
}

@media (max-width:768px){

.market-card{
    padding:22px;
    gap:18px;
}

.market-icon{
    font-size:30px;
}

.market-info h3{
    font-size:1.1rem;
    margin:0;
}

.market-info p{
display:none;
}

.market-arrow{
    font-size:24px;
}

.internal-img{
    display:block;
    margin:50px auto 30px auto;
    width:150px !important;
    height:auto !important;
}

.page-title{
    color:#FFF;
    font-size:20px;
    font-weight:600;
    margin-bottom:20px;
}

.marketplace-subtitle{
    margin:-120px auto 20px auto;
    color:#FFF;
    opacity:.8;
    text-align:center;
    line-height:1.7;
    width:90%;
}
.spacer{
    width:25%;
    height:2px;
    background-color:#006DFF;
    margin-top:-15px;
    margin-bottom:30px;
    border-radius:2px;
}

.market-card{
align-items:center;
gap:16px;
padding:10px;
border-radius:14px;
}

.back-home-btn{
    margin:40px auto -20px;
}

/*========================*/

.marketplace-page .marketplace-subtitle{
    margin-bottom:15px;
    width:90%;
}

.marketplace-page .marketplace-intro{
    margin-bottom:0 !important;
}

/* ===========================
   PC
=========================== */

@media (min-width:901px){

.marketplace-page .marketplace-subtitle{
    width:40%;
}

}

.professional-actions{
    width:90%;
    max-width:1100px;
    margin:45px auto 0 auto;
    display:flex;
    flex-direction:column;
    align-items:center;
}

.professionals-subtitle{
    width:80%;
    max-width:1100px;
    margin:0 auto 40px auto;
    color:#FFF;
    opacity:.8;
    line-height:1.7;
    text-align:center;
}

/*========================*/

.close-page{
    position:fixed;
    top:30px;
    right:30px;
    width:42px;
    height:42px;
    border:2px solid rgba(255,255,255,.25);
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    color:#FFF;
    font-size:30px;
    font-weight:600;
    transition:.25s;
    z-index:9999;
}

.close-page:hover{
    background:rgba(255,255,255,.12);
    border-color:#1b7cff;
    color:#1b7cff;
}

/*========================*/

.footer-bottom{
    position:fixed;
    left:0;
    bottom:0;
    width:100%;
    padding:20px 0;
    background:transparent;
    text-align:center;
}

/*========================*/

.professional-btn{
    width:360px;
    height:64px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0 auto 5px;
    border-radius:8px;
    text-decoration:none;
    font-size:19px;
    font-weight:600;
    letter-spacing:.3px;
    transition:.25s ease;
    cursor:pointer;
}

/*========================*/

.professional-primary{
    background:linear-gradient(135deg,#2b8cff,#0a63ff);
    color:#FFF;
    box-shadow:0 12px 30px rgba(27,124,255,.30);
}

.professional-primary:hover{
    transform:translateY(-3px);
    box-shadow:0 18px 40px rgba(27,124,255,.45);
}

.professional-secondary{
    background:rgba(255,255,255,.08);
    color:#FFF;
    border:1px solid rgba(255,255,255,.18);
    backdrop-filter:blur(10px);
}

.professional-secondary:hover{
    background:rgba(255,255,255,.12);
    color:#FFF;
    transform:translateY(-3px);

    border-color:#1b7cff;

}

/*==================================================*/
/* REGISTER */
/*==================================================*/

.register-container{

    width:90%;
    max-width:520px;
    margin:0 auto 30px auto;
    text-align:center;
}

/*==================================================*/

.step-indicator{
    display:inline-block;
    padding:8px 16px;
    border-radius:10px;
    border:1px solid #fff;
    background:rgba(0,109,255,.12);
    color:#fff;
    font-size:14px;
    font-weight:600;
    margin-bottom:25px;
}

/*==================================================*/

.register-container h2{
    color:#FFF;
    font-size:34px;
    font-weight:600;
    margin-bottom:15px;
}

/*==================================================*/

.register-title{
    color:#FFF;
    font-size:24px;
    font-weight:600;
    margin-bottom:15px;
}

/*==================================================*/

.register-content{
    margin-top:290px;
    background:#F7F9FC;
    padding-top:35px;
}

/*==================================================*/

.register-subtitle{
    color:#3E5168;
    font-weight:500;
    font-size:17px;
    line-height:1.7;
    margin-bottom:20px;
}

/*==================================================*/

.register-form{
    display:flex;
    flex-direction:column;
    gap:18px;
}

/*==================================================*/

.register-form input[type="text"],
.register-form input[type="email"],
.register-form input[type="tel"],
.register-form input[type="password"]{

    width:100%;
    height:58px;
    padding:0 20px;
    border:1px solid #3E5168;
    border-radius:12px;
    background:transparent;
    color:#2F3E4E;
    font-size:16px;
    box-sizing:border-box;
    outline:none;
    transition:.25s;
}

/*==================================================*/

.register-form input::placeholder{
    color:#3E5168;
}

/*==================================================*/

.register-form input:focus{
    background:transparent;
}

/*==================================================*/

.terms-check{
    display:flex;
    align-items:flex-start;
    gap:12px;
    margin:10px 0 20px;
    color:rgba(255,255,255,.75);
    font-size:15px;
    line-height:1.6;
    text-align:left;
}

/*==================================================*/

.terms-check input[type="checkbox"]{
    width:22px;
    height:22px;
}

/*==================================================*/

.terms-check input{
    margin-top:4px;
}

/*==================================================*/

.login-link{
    margin-top:10px;
    padding-bottom:30px;
    color:#4B5D73;
    font-size:15px;
}

/*==================================================*/

.login-link a{
    color:#006DFF;
    text-decoration:none;
    font-weight:600;
}

/*==================================================*/

.login-link a:hover{
    text-decoration:underline;
}

/*==================================================*/

.register-footer{
    margin-top:1px;
    color:#fff;
    text-align:center;
}

/*==================================================*/

@media(max-width:768px){
.register-container h2{
    font-size:28px;
}

.register-subtitle{
    font-size:16px;
}
}

/*==================================================*/

.register-form input{
    border:1px solid transparent;
    transition:.25s;
}

.register-form input.valid{
    border:1px solid #006DFF;
}

.register-form input.invalid{
    border:2px solid #ff3b3b;
}

/*==================================================*/

.professional-btn:disabled{
    background:#5b6472;
    box-shadow:none;
    cursor:not-allowed;
    opacity:.7;
}

/*==================================================*/

.password-requirements{
    margin:-12px 0 4px 4px;
    color:#4B5D73;
    font-size:13px;
    line-height:1.4;
    text-align:left;
    transition:.25s;
}
.password-requirements.invalid{
    color:#ff3b3b;
}
.password-requirements.valid{
    color:#2E8B57;
}

/*==================================================*/

#continueBtn:disabled{
background:#68717d;
color:#d5d9de;
box-shadow:none;
cursor:not-allowed;
opacity:1;
transform:none;
}
#continueBtn:disabled:hover{
background:#68717d;
box-shadow:none;
transform:none;
filter:none;
}

/*==================================================*/

.password-wrapper{
position:relative;
width:100%;
}

.password-wrapper input{
padding-right:55px;
}

.toggle-password{
position:absolute;
top:50%;
right:18px;
transform:translateY(-50%);
width:22px;
height:22px;
cursor:pointer;
user-select:none;
opacity:.75;
transition:.2s;
}

.toggle-password:hover{
opacity:1;
}

/*==================================================*/

.terms-check{
color:#4B5D73;
}

.terms-check a{
color:#4B5D73;
text-decoration:none;
font-weight:500;
transition:.25s;
}

.terms-check a:hover{
text-decoration:underline;
}

/*==================================================*/
/* REGISTER STEP 2 */
/*==================================================*/

.service-selector{
width:100%;
min-height:280px;
position:relative;
box-sizing:border-box;
}

.service-selector-button{
width:100%;
min-width:100%;
height:58px;
display:flex;
justify-content:space-between;
align-items:center;
padding:0 20px;
background:transparent;
border:1px solid #3E5168;
border-radius:12px;
font-size:16px;
color:#3E5168;
cursor:pointer;
transition:.25s;
box-sizing:border-box;
}

.service-selector-button:hover{
border-color:#006DFF;
}

.service-selector-arrow{
font-size:20px;
transition:.25s;
}

.service-options{
display:block;
width:100%;
margin-top:15px;
margin-bottom:28px;
border:1px solid #3E5168;
border-radius:12px;
background:#FFF;
overflow:hidden;
box-sizing:border-box;
}

.service-category{
padding:16px 20px;
background:#EEF4FC;
color:#006DFF;
font-size:15px;
font-weight:600;
border-bottom:1px solid #D8E2EE;
}

.service-option{
display:flex;
align-items:center;
gap:12px;
padding:16px 20px;
color:#3E5168;
font-size:16px;
cursor:pointer;
border-bottom:1px solid #EEF2F6;
}

.service-option:last-child{
border-bottom:none;
}

.service-option input[type="checkbox"]{
width:20px;
height:20px;
cursor:pointer;
}

.register-step2{
margin-bottom:80px;
}

/*==================================================*/
/* REGISTER STEPS FOOTER */
/*==================================================*/

.register-bottom-bar{
width:100%;
height:72px;
display:flex;
align-items:center;
justify-content:center;
background:rgba(7,19,32,.92);
backdrop-filter:blur(14px);
-webkit-backdrop-filter:blur(14px);
}

.register-bottom-bar p{
margin:0;
color:#FFF;
font-size:15px;
font-weight:500;
}

/*==================================================*/
/* STEP 3 */
/*==================================================*/

.review-main{
min-height:100vh;
display:flex;
justify-content:center;
align-items:flex-start;
padding:60px 15px 60px;
position:relative;
z-index:1;
}

.review-container{
width:100%;
max-width:850px;
}

.review-heading{
text-align:center;
margin-bottom:50px;
}

.review-final-step{
font-size:20px;
font-weight:700;
letter-spacing:2px;
text-transform:uppercase;
color:#3da5ff;
margin-bottom:12px;
}

.review-title{
width: 80%;
text-align:center;
font-size:52px;
font-weight:700;
color:#fff;
margin:0 auto 15px;
line-height:1.15;
text-align:center;
white-space:nowrap;
}

.review-subtitle{
width:85%;
margin:0 auto;
font-size:17px;
line-height:1.6;
color:rgba(255,255,255,.75);
text-align:center;
}

.review-section{
padding:28px 0;
border-top:1px solid rgba(255,255,255,.12);
}
.review-section:last-of-type{
border-bottom:1px solid rgba(255,255,255,.12);
}

.review-section-header{
display:flex;
align-items:center;
gap:20px;
margin-bottom:25px;
}

.review-section-title{
display:flex;
align-items:center;
gap:12px;
margin:0;
font-size:20px;
font-weight:600;
color:#fff;
}

.review-edit-btn{
background:none;
border:none;
color:#3da5ff;
font-size:18px;
font-weight:600;
cursor:pointer;
flex-shrink:0;
margin-left:20px;
padding:0;
}

.review-row{
margin-bottom:18px;
}
.review-label{
display:block;
font-size:14px;
font-weight:500;
color:rgba(255,255,255,.55);
margin-bottom:6px;
}

.review-value,
.review-services{
font-size:18px;
font-weight:500;
color:#ffffff;
}

.review-services div{
margin-bottom:8px;
}

.review-services div::before{
content:"•";
color:#3da5ff;
font-size:20px;
font-weight:700;
margin-right:10px;
}

.review-confirmation{
display:flex;
align-items:flex-start;
gap:12px;
margin:35px 0;
font-size:16px;
color:#ffffff;
cursor:pointer;
}

.review-confirmation input{
width:22px;
height:22px;
margin-top:3px;
cursor:pointer;
}

#createAccountBtn{
width:100%;
}

.review-heading h1{
color:#ffffff !important;
}

.review-heading p{
color:rgba(255,255,255,.78) !important;
}

.review-section h2{
color:#ffffff !important;
}

.review-edit-link{
font-size:16px;
font-weight:600;
color:#3da5ff;
text-decoration:none;
margin-left:auto;
transition:.25s;
}

.review-edit-link:hover{
color:#66b8ff;
text-decoration:underline;
}

/*==================================================*/
/* STEP 3 ACCOUNT EDIT MODAL */
/*==================================================*/
.review-modal-overlay{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
display:none;
align-items:center;
justify-content:center;
padding:20px;
background:rgba(7,19,32,.65);
backdrop-filter:blur(8px);
-webkit-backdrop-filter:blur(8px);
box-sizing:border-box;
z-index:10000;
}
.review-modal{
position:relative;
width:100%;
max-width:520px;
padding:38px 30px 30px;
background:#FFF;
border:2px solid #006DFF;
border-radius:18px;
box-shadow:0 25px 70px rgba(0,0,0,.35);
box-sizing:border-box;
}
.review-modal-close{
position:absolute;
top:12px;
right:16px;
width:36px;
height:36px;
display:flex;
align-items:center;
justify-content:center;
padding:0;
background:transparent;
border:none;
color:#3E5168;
font-size:30px;
font-weight:500;
line-height:1;
cursor:pointer;
}
.review-modal-title{
margin:0 35px 28px 0;
color:#071320;
font-size:24px;
font-weight:700;
line-height:1.3;
}
.review-modal-field{
margin-bottom:20px;
}
.review-modal-field label{
display:block;
margin:0 0 8px;
color:#3E5168;
font-size:14px;
font-weight:600;
}
.review-modal-field input{
width:100%;
height:56px;
padding:0 16px;
background:#FFF;
border:1px solid #A8B4C3;
border-radius:10px;
color:#071320;
font-family:'Poppins',sans-serif;
font-size:16px;
outline:none;
box-sizing:border-box;
transition:.25s;
}
.review-modal-field input:focus{
border-color:#006DFF;
box-shadow:0 0 0 3px rgba(0,109,255,.12);
}

.review-modal-actions{
display:flex;
flex-direction:column;
align-items:center;
gap:14px;
margin-top:28px;
}

.review-modal-cancel,
.review-modal-save{
width:88%;
height:58px;
display:flex;
align-items:center;
justify-content:center;
padding:0;
border-radius:12px;
font-family:'Poppins',sans-serif;
font-size:16px;
font-weight:600;
cursor:pointer;
transition:.25s;
box-sizing:border-box;
}

.review-modal-cancel{
background:#FFF;
border:1px solid #A8B4C3;
color:#3E5168;
}
.review-modal-save{
background:linear-gradient(135deg,#2b8cff,#0a63ff);
border:none;
color:#FFF;
box-shadow:0 10px 24px rgba(27,124,255,.28);
}
.review-modal-cancel:hover{
border-color:#006DFF;
color:#006DFF;
}
.review-modal-save:hover{
transform:translateY(-2px);
box-shadow:0 14px 30px rgba(27,124,255,.38);
}
@media(max-width:480px){
.review-modal{
padding:36px 20px 22px;
}
.review-modal-title{
font-size:21px;
}
.review-modal-actions{
flex-direction:column;
}
}

.review-modal-services{
display:flex;
flex-direction:column;
gap:12px;
}
.review-modal-service-option{
width:100%;
min-height:54px;
display:flex;
align-items:center;
gap:12px;
padding:12px 16px;
border:1px solid #A8B4C3;
border-radius:10px;
background:#FFF;
color:#3E5168;
font-size:15px;
font-weight:500;
cursor:pointer;
box-sizing:border-box;
}
.review-modal-service-option input{
width:21px;
height:21px;
margin:0;
flex-shrink:0;
cursor:pointer;
}

.review-modal-field input.valid{
border:1px solid #006DFF;
box-shadow:none;
}
.review-modal-field input.invalid{
border:2px solid #ff3b3b;
box-shadow:none;
}
.review-modal-save:disabled{
background:#68717d;
color:#d5d9de;
box-shadow:none;
cursor:not-allowed;
opacity:1;
transform:none;
}
.review-modal-save:disabled:hover{
background:#68717d;
box-shadow:none;
transform:none;
}

/*==================================================*/
/* PROFILE PHP */
/*==================================================*/

.profile-dashboard-button{
margin-top:35px;
}
.profile-error-message{
width:100%;
margin:0 0 25px;
padding:14px 18px;
background:#ffe7e7;
border:1px solid #ffb5b5;
border-radius:10px;
color:#bd3030;
font-size:14px;
font-weight:500;
}

/*==================================================*/
/* REGISTER & LOGIN BUTTONS */
/*==================================================*/

.register-btn,
.login-btn{
width:320px;
max-width:90%;
height:62px;
margin:0 auto 16px;
padding:0 24px;
display:flex;
align-items:center;
justify-content:flex-start;
gap:14px;
box-sizing:border-box;
background:#05090f;
color:#fff;
border-radius:15px;
font-size:20px;
font-weight:700;
text-decoration:none;
transition:.3s;
}

.register-btn{
border:2px solid #1b7cff;
box-shadow:0 0 18px rgba(27,124,255,.65);
}

.login-btn{
border:2px solid #1b7cff;
box-shadow:none;
}

.register-btn::before{
content:"👤";
font-size:22px;
flex-shrink:0;
}

.login-btn::before{
content:"🔑";
font-size:22px;
flex-shrink:0;
}

.register-btn:hover{
background:#0b1522;
box-shadow:0 0 26px rgba(27,124,255,.85);
}

.login-btn:hover{
background:#0b1522;
}

@media (min-width: 901px){
    .register-btn{
        margin-top:45px;
}
}


@media (min-width:769px) and (max-width:900px){
.internal-content:not(.register-content){
position:fixed;
top:360px;
bottom:75px;
left:0;
width:100%;
margin:0;
display:flex;
flex-direction:column;
justify-content:center;
}
.professionals-subtitle{
font-size:20px;
line-height:1.8;
}
.professional-actions{
margin-top:45px;
}
.footer-bottom{
position:fixed;
left:0;
bottom:0;
width:100%;
margin:0;
}
}

/*==================================================*/

.login-page{
min-height:100vh;
display:flex;
flex-direction:column;
}

.login-page .register-subtitle{
font-weight:600;
}

.login-page .internal-header{
position:relative;
flex-shrink:0;
}

.login-page .register-content{
margin-top:0;
flex:1;
width:100%;
display:flex;
justify-content:center;
align-items:center;
}

.login-page .register-container{
width:90%;
max-width:520px;
margin:0;
}

.login-page .register-footer{
flex-shrink:0;
margin:0;
padding:6px 0;
color:#fff;
text-align:center;
}

.login-page .register-footer p{
margin:0;
line-height:1.2;
}

@media(max-width:900px){
.login-page .register-content{
padding-bottom:65px;
}
.login-page .register-footer{
position:fixed;
left:0;
bottom:0;
width:100%;
height:52px;
margin:0;
padding:0;
display:flex;
align-items:center;
justify-content:center;
background:#071320;
z-index:9999;
}
}

@media(max-width:900px){
.login-page .register-container{
transform:translateY(-45px);
}
}

/*==================================================*/

.forgot-password{
width:100%;
margin-top:-6px;
margin-bottom:18px;
text-align:right;
}

.forgot-password a{
color:#4B5D73;
font-size:14px;
font-weight:500;
text-decoration:none;
transition:.25s;
}

.forgot-password a:hover{
color:#006DFF;
text-decoration:underline;
}

@media (min-width:769px) and (max-width:900px){
.internal-content.marketplace-page{
position:relative !important;
top:auto !important;
bottom:auto !important;
left:auto !important;
width:100%;
margin-top:360px !important;
display:block;
}

.marketplace-page .marketplace-subtitle{
width:60%;
}
}