/* ==========================
   GLOBAL THEME
   Makeup Artist Marketplace
   ========================== */


*{

box-sizing:border-box;

}


body{

margin:0;

padding:20px;

font-family:'Segoe UI', Arial, sans-serif;

background:#f8f8f8;

color:#333;

}



/* Headings */

h1{

text-align:center;

color:#e91e63;

font-size:28px;

}


h2{

color:#333;

}


h3{

color:#555;

}



/* Paragraph */

p{

font-size:16px;

line-height:1.6;

}



/* Links */

a{

color:#e91e63;

text-decoration:none;

font-weight:500;

}


a:hover{

text-decoration:underline;

}



/* Buttons */

button{

background:#e91e63;

color:white;

border:none;

padding:12px 20px;

border-radius:25px;

font-size:16px;

cursor:pointer;

transition:0.3s;

}


button:hover{

background:#c2185b;

}



/* Images */

img{

max-width:100%;

height:auto;

}



/* Common Card */

.card{

background:white;

border-radius:15px;

padding:20px;

margin:20px auto;

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

max-width:550px;

}



/* Common Box */

.box{

background:white;

max-width:500px;

margin:30px auto;

padding:25px;

border-radius:15px;

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

}



/* Forms */

input,
textarea,
select{

width:100%;

padding:12px;

margin:8px 0;

border:1px solid #ddd;

border-radius:10px;

font-size:16px;

font-family:inherit;

}



textarea{

min-height:100px;

resize:vertical;

}



/* Horizontal line */

hr{

border:none;

height:1px;

background:#ddd;

margin:25px 0;

}



/* Mobile Optimization */

@media(max-width:600px){


body{

padding:15px;

}



h1{

font-size:24px;

}


button{

width:100%;

margin-top:8px;

}


.card,
.box{

width:100%;

padding:18px;

}


}

/* ==========================
   HAMBURGER MENU
   ========================== */


/* Open Menu Button */

.menu-btn{

position:fixed;

top:15px;

left:15px;

width:45px;

height:45px;

display:flex;

align-items:center;

justify-content:center;

font-size:30px;

cursor:pointer;

background:white;

border-radius:10px;

z-index:1100;

box-shadow:0 2px 8px rgba(0,0,0,0.15);

}



/* Side Menu Panel */


.side-menu{

position:fixed;

top:0;

left:-280px;

width:260px;

height:100dvh;

background:white;

padding:70px 20px 20px;

display:flex;

flex-direction:column;

z-index:1200;

box-shadow:5px 0 20px rgba(0,0,0,0.15);

transition:0.3s ease;

overflow:hidden;

}

/* Open State */

.side-menu.active{

left:0;

}



/* Close Button */

.close{

position:absolute;

top:15px;

right:20px;

width:45px;

height:45px;

display:flex;

align-items:center;

justify-content:center;

font-size:35px;

cursor:pointer;

border-radius:50%;

}



/* Menu Links */

.side-menu a{

display:block;

padding:15px 10px;

text-decoration:none;

color:#333;

font-size:16px;

border-radius:8px;

}



/* Hover Effect */

.side-menu a:hover{

background:#ffe5ef;

color:#e91e63;

}

.menu-top{

flex:1;

overflow-y:auto;

}

/* Bottom Section */


.menu-bottom{

flex-shrink:0;

border-top:1px solid #ddd;

padding-top:15px;

}

/* Marketplace Highlight */

.menu-bottom a:first-child{

color:#e91e63;

font-weight:bold;

}



/* Mobile Adjustment */

@media(max-width:600px){


.menu-btn{

top:12px;

left:12px;

width:42px;

height:42px;

font-size:28px;

}


.side-menu{

width:240px;

}


.close{

top:12px;

right:15px;

}

}

/* =========================
   REGISTRATION PAGE
   ========================= */


.register-container{

min-height:100vh;

display:flex;

justify-content:center;

align-items:center;

padding:20px;

}



.register-box{

width:100%;

max-width:450px;

background:white;

padding:30px;

border-radius:20px;

box-shadow:0 5px 20px rgba(0,0,0,0.12);

}



.register-box h2{

text-align:center;

color:#e91e63;

margin-bottom:25px;

}



.register-box input,
.register-box select,
.register-box textarea{


width:100%;

padding:14px;

margin:10px 0;

border:1px solid #ddd;

border-radius:12px;

font-size:16px;

}



.register-box button{

width:100%;

padding:14px;

border-radius:25px;

font-size:17px;

background:#e91e63;

color:white;

border:none;

cursor:pointer;

}



.register-box button:hover{

background:#c2185b;

}

@media(max-width:600px){


body{

padding:10px;

}



.register-container{

padding:10px;

align-items:flex-start;

}



.register-box{

padding:20px;

border-radius:15px;

}



.register-box input,
.register-box select,
.register-box textarea{

font-size:16px;

padding:12px;

}


}

/* ==========================
   DASHBOARD
   ========================== */


.dashboard{

max-width:1100px;

margin:30px auto;

padding:20px;

}



.dashboard h1{

text-align:center;

font-size:clamp(24px,5vw,36px);

}



.dashboard > p{

text-align:center;

color:#777;

margin-bottom:30px;

}




.dashboard-card{

background:white;

padding:25px;

margin:20px 0;

border-radius:18px;

box-shadow:0 5px 20px rgba(0,0,0,0.1);

transition:0.3s;

}



.dashboard-card:hover{

transform:translateY(-5px);

}



.dashboard-card h2{

margin-top:0;

color:#e91e63;

}



.dashboard-card p{

color:#555;

}



.dashboard-card a{

display:inline-block;

margin-top:15px;

padding:12px 20px;

background:#e91e63;

color:white;

border-radius:25px;

text-decoration:none;

}



.dashboard-card a:hover{

background:#c2185b;

}



/* Desktop cards */


@media(min-width:700px){


.dashboard{

display:grid;

grid-template-columns:

repeat(2,1fr);

gap:20px;

}


.dashboard h1,
.dashboard > p{

grid-column:1/-1;

}


.dashboard-card{

margin:0;

}


}



/* Mobile */


@media(max-width:600px){


.dashboard{

padding:10px;

}



.dashboard-card{

padding:20px;

}



.dashboard-card a{

width:100%;

text-align:center;

}



}
/* =========================
   JOBS PAGE
   ========================= */


.jobs-container{

max-width:900px;

margin:30px auto;

padding:20px;

}


.jobs-container h2{

text-align:center;

color:#333;

margin-bottom:30px;

}




.job-card{

background:white;

padding:25px;

margin-bottom:20px;

border-radius:18px;

box-shadow:0 5px 20px rgba(0,0,0,0.1);

}



.job-card h3{

color:#e91e63;

font-size:22px;

}



.job-info p{

margin:12px 0;

color:#555;

}



.apply-btn,
.applied-btn{


width:100%;

padding:14px;

border:none;

border-radius:25px;

font-size:16px;

}



.apply-btn{

background:#e91e63;

color:white;

cursor:pointer;

}



.apply-btn:hover{

background:#c2185b;

}



.applied-btn{

background:#999;

color:white;

}




@media(max-width:600px){


.jobs-container{

padding:10px;

}



.job-card{

padding:20px;

}



.job-card h3{

font-size:20px;

}


}
/* ==========================
   MY APPLICATIONS
   ========================== */

.applications-container{

max-width:900px;

margin:30px auto;

padding:20px;

}

.applications-container h2{

text-align:center;

margin-bottom:30px;

color:#333;

}

.application-card{

background:#fff;

padding:25px;

margin-bottom:20px;

border-radius:18px;

box-shadow:0 5px 20px rgba(0,0,0,.08);

}

.application-card h3{

margin-top:0;

color:#e91e63;

}

.application-card p{

margin:12px 0;

color:#555;

}

.status{

display:inline-block;

padding:6px 14px;

border-radius:20px;

font-size:14px;

font-weight:bold;

color:white;

}


.status.applied{

background:#9c27b0;

}


.status.pending{

background:#ff9800;

}


.status.shortlisted{

background:#2196f3;

}


.status.selected{

background:#4caf50;

}


.status.rejected{

background:#f44336;

}


.primary-btn{

display:inline-block;

margin-top:15px;

padding:12px 22px;

background:#e91e63;

color:#fff;

text-decoration:none;

border-radius:25px;

}

.primary-btn:hover{

background:#c2185b;

}

@media(max-width:600px){

.applications-container{

padding:10px;

}

.application-card{

padding:18px;

}

}
/* ==========================
   PORTFOLIO PAGE
   ========================== */

.portfolio-container{

max-width:700px;

margin:30px auto;

padding:20px;

}

.portfolio-box{

background:#fff;

padding:30px;

border-radius:20px;

box-shadow:0 5px 20px rgba(0,0,0,.08);

}

.portfolio-box h2{

text-align:center;

color:#e91e63;

margin-top:0;

}

.page-subtitle{

text-align:center;

color:#777;

margin-bottom:25px;

}

.portfolio-box label{

display:block;

margin-top:15px;

margin-bottom:8px;

font-weight:600;

color:#444;

}

.portfolio-box input[type=file],

.portfolio-box textarea{

width:100%;

padding:12px;

border:1px solid #ddd;

border-radius:12px;

font-size:15px;

box-sizing:border-box;

}

.portfolio-box textarea{

resize:vertical;

}

.success-message{

background:#e8f5e9;

color:#2e7d32;

padding:12px;

border-radius:10px;

margin-bottom:20px;

text-align:center;

}

.primary-btn{

width:100%;

margin-top:20px;

padding:14px;

background:#e91e63;

color:#fff;

border:none;

border-radius:30px;

font-size:16px;

cursor:pointer;

transition:.3s;

}

.primary-btn:hover{

background:#c2185b;

}

@media(max-width:600px){

.portfolio-container{

padding:10px;

}

.portfolio-box{

padding:20px;

}

}
/* =======================
PORTFOLIO GALLERY
======================= */

.portfolio-item{

background:#fff;

padding:20px;

margin-top:20px;

border-radius:15px;

box-shadow:0 5px 15px rgba(0,0,0,.08);

text-align:center;

}



.portfolio-image{

width:100%;

max-width:350px;

border-radius:15px;

margin-bottom:15px;

}



.delete-btn{

display:inline-block;

padding:10px 20px;

background:#f44336;

color:#fff;

text-decoration:none;

border-radius:25px;

}



.delete-btn:hover{

background:#c62828;

}
/* ==========================
   ARTIST PROFILE
   ========================== */


.profile-container{

max-width:700px;

margin:30px auto;

padding:20px;

}



.profile-box{

background:white;

padding:30px;

border-radius:20px;

box-shadow:0 5px 20px rgba(0,0,0,.08);

}



.profile-box h2{

text-align:center;

color:#e91e63;

margin-bottom:25px;

}



.profile-box label{

display:block;

font-weight:600;

margin-top:15px;

margin-bottom:8px;

color:#444;

}



.profile-box input,
.profile-box textarea,
.profile-box select{


width:100%;

padding:12px;

border:1px solid #ddd;

border-radius:12px;

font-size:15px;

box-sizing:border-box;

}



.profile-box textarea{

resize:vertical;

}



.primary-btn{

width:100%;

margin-top:25px;

padding:14px;

background:#e91e63;

color:white;

border:none;

border-radius:30px;

font-size:16px;

cursor:pointer;

}



.primary-btn:hover{

background:#c2185b;

}



.success-message{

background:#e8f5e9;

color:#2e7d32;

padding:10px;

border-radius:10px;

text-align:center;

}



@media(max-width:600px){


.profile-container{

padding:10px;

}



.profile-box{

padding:20px;

}


}
/* JOB SEARCH BAR */

.job-search{

display:flex;

gap:10px;

max-width:700px;

margin:0 auto 30px;

}



.job-search input{

flex:1;

padding:14px 18px;

border-radius:30px;

border:1px solid #ddd;

font-size:16px;

outline:none;

}



.job-search button{

padding:14px 25px;

border:none;

border-radius:30px;

background:#e91e63;

color:white;

font-size:16px;

cursor:pointer;

}



.job-search button:hover{

background:#c2185b;

}



@media(max-width:600px){

.job-search{

flex-direction:column;

padding:0 10px;

}


.job-search button{

width:100%;

}

}
 /* NO JOBS MESSAGE */

.no-jobs-card{

background:white;

max-width:600px;

margin:40px auto;

padding:30px;

text-align:center;

border-radius:20px;

box-shadow:0 5px 20px rgba(0,0,0,.08);

}



.no-jobs-card h3{

color:#e91e63;

font-size:22px;

}



.no-jobs-card p{

color:#666;

}
/* ARTIST DASHBOARD PROFILE */
/* Dashboard Feature Cards */

.dashboard-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

gap:20px;

width:100%;

max-width:1000px;

margin:30px auto;

}


/* Individual Cards */

.dashboard-card{

background:white;

padding:25px;

border-radius:20px;

box-shadow:0 5px 20px rgba(0,0,0,.08);

display:flex;

flex-direction:column;

min-height:220px;

box-sizing:border-box;

}


/* Card heading */

.dashboard-card h2{

color:#e91e63;

margin-top:0;

}


/* Push button to bottom */

.dashboard-card p{

flex-grow:1;

color:#555;

}


/* Card button */

.dashboard-card a{

display:block;

text-align:center;

background:#e91e63;

color:white;

padding:12px;

border-radius:25px;

text-decoration:none;

margin-top:auto;

}
.profile-summary{

background:white;

max-width:700px;

margin:20px auto;

padding:25px;

border-radius:20px;

box-shadow:0 5px 20px rgba(0,0,0,.08);

display:flex;

align-items:center;

gap:30px;

}


.profile-photo{

width:120px;

height:120px;

border-radius:50%;

object-fit:cover;

flex-shrink:0;

}


.profile-summary-content{

flex:1;

}


.profile-summary h2{

color:#e91e63;

margin-top:0;

}


.dashboard-btn{

display:inline-block;

margin-top:10px;

padding:12px 25px;

background:#e91e63;

color:white;

text-decoration:none;

border-radius:25px;
margin:15px;


}




@media(max-width:600px){


.profile-summary{

flex-direction:column;

text-align:center;

gap:15px;

}


.profile-photo{

width:120px;

height:120px;

}


/* Dashboard cards mobile */

.dashboard-grid{

grid-template-columns:1fr;

padding:10px;

}


.dashboard-card{

min-height:200px;

width:100%;

}


/* Buttons full width on mobile */

.dashboard-card a,
.dashboard-btn{

width:100%;

box-sizing:border-box;

text-align:center;

}


/* Prevent dashboard overflow */

.dashboard{

width:100%;

padding:10px;

box-sizing:border-box;

}


}
/* ---------- SALON/PROFILE.PHP ---------- */

.form-container{

max-width:700px;

margin:40px auto;

padding:30px;

background:#fff;

border-radius:20px;

box-shadow:0 8px 25px rgba(0,0,0,.08);

}

.form-container h2{

text-align:center;

margin-bottom:25px;

color:#e91e63;

}

.form-container label{

display:block;

margin-top:15px;

margin-bottom:6px;

font-weight:600;

color:#444;

}

.form-container input,
.form-container textarea,
.form-container select{

width:100%;

padding:14px;

border:1px solid #ddd;

border-radius:12px;

font-size:15px;

box-sizing:border-box;

transition:.3s;

}

.form-container input:focus,
.form-container textarea:focus,
.form-container select:focus{

outline:none;

border-color:#e91e63;

box-shadow:0 0 0 3px rgba(233,30,99,.12);

}

.form-container textarea{

min-height:120px;

resize:vertical;

}

.primary-btn{

width:100%;

margin-top:20px;

padding:14px;

border:none;

border-radius:12px;

background:#e91e63;

color:white;

font-size:16px;

font-weight:600;

cursor:pointer;

transition:.3s;

}

.primary-btn:hover{

background:#d81b60;

}

.success-message{

background:#e8f5e9;

color:#2e7d32;

padding:12px;

border-radius:10px;

margin-bottom:20px;

text-align:center;

}

@media(max-width:768px){

.form-container{

margin:20px 15px;

padding:20px;

}

}

/* post-job.php */

.form-container textarea{

min-height:120px;

resize:vertical;

}

.form-container input[type="number"]{

max-width:220px;

}

.form-container h2{

display:flex;

align-items:center;

justify-content:center;

gap:10px;

}
/* Applicants */

.applicant-header{

display:flex;

align-items:center;

gap:20px;

margin-bottom:20px;

}

.applicant-photo{

width:90px;

height:90px;

border-radius:50%;

object-fit:cover;

border:3px solid #e91e63;

flex-shrink:0;

}

.applicant-details{

flex:1;

}

.applicant-details h3{

margin-bottom:10px;

color:#e91e63;

}

.status-badge{

display:inline-block;

padding:6px 12px;

background:#ffe5ef;

color:#e91e63;

border-radius:20px;

font-weight:600;

}

.empty-state{

background:#fff;

padding:40px;

border-radius:20px;

text-align:center;

box-shadow:0 5px 20px rgba(0,0,0,.08);

max-width:700px;

margin:40px auto;

}

@media(max-width:768px){

.applicant-header{

flex-direction:column;

text-align:center;

}

.applicant-photo{

width:110px;

height:110px;

}

}
/* Portfolio */

.portfolio-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

gap:20px;

margin-top:20px;

}

.portfolio-item{

background:#fff;

border-radius:15px;

overflow:hidden;

box-shadow:0 5px 15px rgba(0,0,0,.08);

}

.portfolio-image{

width:100%;

height:220px;

object-fit:cover;

display:block;

}

.portfolio-card p{

padding:15px;

text-align:center;
margin:15px;

}

.action-buttons{

display:flex;

gap:15px;

flex-wrap:wrap;

margin-top:20px;

}

.action-buttons .dashboard-btn{

flex:1;

text-align:center;

min-width:170px;

}

@media(max-width:768px){

.action-buttons{

flex-direction:column;

}

}
.hiring-status{

display:inline-block;

background:#ffe5ef;

color:#e91e63;

padding:8px 15px;

border-radius:20px;

font-weight:bold;

}
.job-search{

background:white;

padding:20px;

margin:20px auto;

max-width:700px;

border-radius:15px;

display:flex;

gap:10px;

flex-wrap:wrap;

}


.job-search input,
.job-search select{

flex:1;

padding:12px;

border:1px solid #ddd;

border-radius:8px;

}


.job-search button{

background:#e91e63;

color:white;

border:none;

padding:12px 25px;

border-radius:20px;

}


@media(max-width:600px){

.job-search{

flex-direction:column;

}

}

/* ==========================
   CITY AUTOCOMPLETE
   ========================== */

#citySuggestions{

position:absolute;

top:100%;

left:0;

background:white;

border:1px solid #ddd;

border-radius:10px;

width:100%;

max-height:220px;

overflow-y:auto;

z-index:2000;

box-shadow:0 5px 15px rgba(0,0,0,0.15);

margin-top:5px;

}



#citySuggestions div{

padding:12px 15px;

cursor:pointer;

font-size:15px;

color:#333;

}



#citySuggestions div:hover{

background:#ffe5ef;

color:#e91e63;

}
.city-box{

position:relative;

width:100%;

}

.applied-btn{

background:#28a745;

cursor:default;

opacity:.9;

}
/* Small navigation buttons */

.page-nav{

width:100%;

max-width:1100px;

margin:15px auto;

padding:0 15px;

box-sizing:border-box;

}


.small-nav-buttons{

display:flex;

gap:10px;

align-items:center;

}


.small-nav-btn{

display:inline-flex;

align-items:center;

justify-content:center;

background:#e91e63;

color:white !important;

padding:8px 18px;

border-radius:20px;

text-decoration:none !important;

font-size:14px;

font-weight:600;

border:none;

cursor:pointer;

}


.small-nav-btn:hover{

background:#c2185b;

}


/* Remove browser link colors */

/*.small-nav-btn:visited,*/
/*.small-nav-btn:active,*/
/*.small-nav-btn:focus{*/

/*color:white !important;*/

/*}*/
/* IMAGE LIGHTBOX */

.image-modal{

display:none;

position:fixed;

z-index:5000;

left:0;

top:0;

width:100%;

height:100%;

background:rgba(0,0,0,0.85);

justify-content:center;

align-items:center;

padding:20px;

}



.image-modal img{

max-width:95%;

max-height:90%;

border-radius:15px;

object-fit:contain;

}



.close-btn{

position:absolute;

top:15px;

right:25px;

font-size:45px;

font-weight:bold;

color:white;

cursor:pointer;

}
.error-message{

background:#ffebee;

color:#c62828;

padding:12px;

border-radius:10px;

text-align:center;

margin-bottom:15px;

font-weight:600;

}