*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:Arial, sans-serif;
}

body{
  background:black;
  color:white;
  padding-top:24px;
  padding-bottom:40px;
}

/* HEADER */

.header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:14px 20px;
  padding-top:28px;
  background:#161616;
  position:sticky;
  top:0;
  z-index:100;
}

.logo{
  font-size:24px;
  font-weight:bold;
  color:#ffcc00;
}

nav{
  display:flex;
  gap:12px;
}

.navBtn{
  padding:10px 18px;
  border:none;
  border-radius:12px;
  background:#242424;
  color:white;
  cursor:pointer;
  transition:0.3s;
}

.navBtn:hover{
  background:#ffcc00;
  color:black;
}

/* HERO */

.hero{
  text-align:center;
  padding:40px 20px 25px;
  max-width:900px;
  margin:auto;
}

.hero h1{
  font-size:45px;
  margin-bottom:18px;
}

.hero p{
  font-size:20px;
  color:#cccccc;
  max-width:650px;
  margin:auto;
  line-height:1.7;
}

.exploreBtn{
  margin-top:22px;
  padding:10px 18px;
  border:none;
  border-radius:12px;
  background:#ffcc00;
  color:black;
  font-size:14px;
  font-weight:bold;
  cursor:pointer;
  transition:0.3s;
}

.exploreBtn:hover{
  transform:scale(1.05);
}

/* CATEGORIES */

.categories{
  display:grid;
  grid-template-columns:
  repeat(auto-fit,minmax(160px,1fr));
  gap:12px;
  padding:10px 20px 0;
}

.card{
  background:#1f1f1f;
  padding:14px;
  border-radius:14px;
  text-align:center;
  font-size:18px;
  cursor:pointer;
  transition:0.3s;
}

.card:hover{
  transform:translateY(-5px);
  background:#2b2b2b;
}

/* MOBILE */

@media(max-width:700px){

  .header{
    flex-direction:column;
    gap:15px;
  }

  .hero h1{
    font-size:38px;
  }

  .hero p{
    font-size:16px;
  }

  .card{
    font-size:20px;
  }

}

/* ARTISTS */

.artistsSection{
  padding:50px 20px;
}

.artistsSection h2{
  text-align:center;
  font-size:34px;
  margin-bottom:30px;
}

.artistsGrid{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:25px;
}

.artistCard{
  background:#1a1a1a;
  width:280px;
  border-radius:18px;
  overflow:hidden;
  transition:0.3s;
}

.artistCard:hover{
  transform:translateY(-6px);
}

.artistImg{
  width:100%;
  height:210px;
  object-fit:cover;
  background:#222;
  display:block;
}

.artistCard h3{
  padding:18px 18px 8px;
  font-size:24px;
}

.artistCard p{
  padding:0 18px;
  color:#cccccc;
}

.viewBtn{
  margin:18px;
  padding:14px 22px;
  border:none;
  border-radius:12px;
  background:#ffcc00;
  color:black;
  font-weight:bold;
  cursor:pointer;
}

/* PROFILE */

.profileSection{
  max-width:620px;
  margin:40px auto;
  padding:28px;
  background:#1a1a1a;
  border-radius:20px;
  text-align:center;
  position:relative;
}

.profileImg{
  width:150px;
  height:150px;
  border-radius:50%;
  object-fit:cover;
  margin-bottom:25px;
}

.profileSection h1{
  font-size:30px;
  margin-bottom:10px;
}

.profileSection h3{
  color:#ffcc00;
  margin-bottom:20px;
}

.profileSection p{
  color:#cccccc;
  line-height:1.7;
}

.profileStats{
  display:flex;
  justify-content:center;
  gap:20px;
  flex-wrap:wrap;
  margin-top:35px;
}

.statBox{
  background:#242424;
  padding:20px;
  border-radius:18px;
  min-width:120px;
}

.statBox h2{
  color:#ffcc00;
}

.profileButtons{
  display:flex;
  justify-content:center;
  gap:14px;
  flex-wrap:wrap;
  margin-top:20px;
}

.profileBtn{
  padding:12px 20px;
  border:none;
  border-radius:14px;
  background:#ffcc00;
  color:black;
  font-weight:bold;
  cursor:pointer;
}

.secondaryBtn{
  background:#25D366;
  color:white;
}

/* LOGIN PAGE */

.loginSection{
  min-height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
  padding:20px;
}

.loginCard{
  width:100%;
  max-width:420px;
  background:#1a1a1a;
  padding:35px;
  border-radius:22px;
  text-align:center;
}

.loginCard h1{
  font-size:34px;
  margin-bottom:10px;
}

.loginCard p{
  color:#cccccc;
  margin-bottom:25px;
}

.loginCard input{
  width:100%;
  padding:14px;
  margin-bottom:16px;
  border:none;
  border-radius:12px;
  background:#242424;
  color:white;
  font-size:15px;
}

.loginPageBtn{
  width:100%;
  padding:14px;
  border:none;
  border-radius:12px;
  background:#ffcc00;
  color:black;
  font-size:16px;
  font-weight:bold;
  cursor:pointer;
}

.signupText{
  margin-top:20px;
  color:#cccccc;
}

#signupLink{
  color:#ffcc00;
  cursor:pointer;
  font-weight:bold;
}

#navbarUser{
  color:#ffcc00;
  font-weight:bold;
  display:flex;
  align-items:center;
}

textarea{
  width:100%;
  min-height:120px;
  padding:14px;
  margin-bottom:16px;
  border:none;
  border-radius:12px;
  background:#242424;
  color:white;
  font-size:15px;
  resize:none;
}

/* DASHBOARD */

.dashboardSection{
  padding:40px 20px;
}

.dashboardHeader{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:40px;
}

.dashboardHeader h1{
  font-size:32px;
}

#dashboardLogout{
  padding:10px 18px;
  border:none;
  border-radius:12px;
  background:red;
  color:white;
  cursor:pointer;
}

.dashboardCard{
  max-width:500px;
  background:#1a1a1a;
  border-radius:20px;
  overflow:hidden;
}

.dashboardCard img{
   width:100%;
  height:220px;
  object-fit:cover;
}

.dashboardContent{
  padding:20px;
}

.dashboardContent h2{
  margin-bottom:10px;
}

.dashboardContent p{
  color:#cccccc;
  margin-bottom:12px;
}

/* PROFESSIONAL DASHBOARD */

.dashboardHero{
  background:linear-gradient(
  135deg,
  #1a1a1a,
  #111111
  );

   padding:28px;
  border-radius:24px;
  margin-bottom:30px;
}

.dashboardTag{
  color:#ffcc00;
  font-size:18px;
  margin-bottom:10px;
  letter-spacing:1px;
}

.dashboardHero h1{
  font-size:36px;
  margin-bottom:14px;
}

.dashboardSub{
  color:#bdbdbd;
  max-width:420px;
  line-height:1.6;
  font-size:16px;
}

.dashboardCard{
  background:#161616;
  border:1px solid #2a2a2a;
  transition:0.3s;
}

.dashboardCard:hover{
  transform:translateY(-5px);
  border-color:#ffcc00;
}

/* STATS */

.statsGrid{
  display:grid;
  grid-template-columns:
  repeat(auto-fit,minmax(220px,1fr));
  gap:20px;
  margin-bottom:35px;
}

.statCard{
  background:#161616;
  border:1px solid #2a2a2a;
  border-radius:22px;
  padding:24px;
}

.statCard h3{
  color:#bbbbbb;
  margin-bottom:10px;
  font-size:16px;
}

.statCard h2{
  font-size:26px;
  color:#ffcc00;
}

/* QUICK ACTIONS */

.quickActions{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  margin-top:30px;
}

.quickActions button{
  padding:14px 22px;
  border:none;
  border-radius:14px;
  cursor:pointer;
  font-size:15px;
  font-weight:bold;
}

#editProfileBtn{
  background:#ffcc00;
  color:black;
}

#viewPublicBtn{
  background:#ffcc00;
  color:black;
}

#deleteProfileBtn{
  background:red;
  color:white;
}

/* SEARCH */

#searchInput{
  width:100%;
  max-width:420px;
  padding:14px 18px;
  margin:0 auto 30px;
  display:block;
  border:none;
  border-radius:14px;
  background:#1a1a1a;
  color:white;
  font-size:15px;
  outline:none;
  border:1px solid #2a2a2a;
}

#searchInput:focus{
  border-color:#ffcc00;
}

.emptyText{
  text-align:center;
  color:#999999;
  margin-top:30px;
}

.loadingText{
  text-align:center;
  color:#999999;
  margin-top:30px;
}

/* DASHBOARD LAYOUT */

.dashboardLayout{
  display:grid;
  grid-template-columns:
  1.2fr 0.8fr;
  gap:30px;
  align-items:start;
}

@media(max-width:900px){

  .dashboardLayout{

    grid-template-columns:1fr;

  }

}

/* MOBILE DASHBOARD */

@media(max-width:768px){

  .dashboardHeader{
    flex-direction:column;
    gap:16px;
    align-items:flex-start;
  }

  .dashboardHero{
    padding:20px;
  }

  .dashboardHero h1{
    font-size:28px;
  }

  .dashboardLayout{
    grid-template-columns:1fr;
  }

  .dashboardCard{
    max-width:100%;
  }

  .statsGrid{
    grid-template-columns:1fr 1fr;
  }

  .quickActions{
    flex-direction:column;
  }

  .quickActions button{
    width:100%;
  }

.dashboardHeader h1{
  font-size:26px;
}

.logoutBtn{
  padding:10px 16px;
  font-size:14px;
}

.dashboardCard{
  border-radius:18px;
}

.dashboardCard img{
  height:140px;
}

.dashboardContent{
  padding:12px;
}

.dashboardContent h2{
  font-size:18px;
  margin-bottom:6px;
}

.dashboardContent p{
  font-size:14px;
  margin-bottom:4px;
}

.quickActions{
  gap:10px;
}

.quickActions button{
  padding:12px;
  font-size:14px;
  border-radius:14px;
}

.statsGrid{
  gap:12px;
}

.statCard{
  min-height:100px;
  padding:12px;
  border-radius:14px;

  display:flex;
  flex-direction:column;
  justify-content:center;
}

.statCard h3{
  font-size:14px;
  line-height:1.4;
  margin-bottom:10px;
}

.statCard h2{
  font-size:20px;
}

}

/* MOBILE NAVBAR */

@media(max-width:768px){

  .header{
    flex-direction:column;
    align-items:center;
    gap:16px;
    padding:16px;
    position:sticky;
    top:0;
    z-index:999;
  }

  .logo{
    font-size:22px;
  }

  .navRight{
    width:100%;
    display:grid;
    grid-template-columns:
    repeat(2,1fr);
    gap:10px;
  }

  .navBtn{
    width:100%;
    padding:5px;
    font-size:10px;
  }

  .hero h1{
  font-size:20px;
  line-height:1.3;
}

  .hero p{
    font-size:15px;
    line-height:1.8;
  }

  .categories{
    grid-template-columns:1fr;
  }

.navbarUser{
  font-size:10px;
}

.card{
  padding:15px;
  font-size:16px;
  border-radius:15px;
}

.artistCard{
  border-radius:10px;
}

.artistImg{
  height:210px;
}

.artistCard h3{
  font-size:18px;
}

.artistCard p{
  font-size:14px;
}

.viewBtn{
  padding:8px 14px;
  font-size:12px;
}

#artistsTitle{
  font-size:20px;
  margin-bottom:15px;
}

#profileImg{
  width:120px;
  height:120px;
}

#profileName{
  font-size:18px;
}

#profileCategory{
  font-size:15px;
}

#profileBio{
  font-size:14px;
  line-height:1.6;
}

.profileStats{
  gap:10px;
}

.statBox{
  width:85px;
  height:85px;
}

.statBox h2{
  font-size:18px;
}

.statBox p{
  font-size:14px;
}

.profileButtons{
  gap:12px;
}

.profileButtons button{
  padding:10px 16px;
  font-size:14px;
}

.dashboardBookings{
  margin-top:12px;
}

.dashboardBookings h2{
  font-size:18px;
  margin-bottom:10px;
}

.bookingCard{
  padding:16px;
  border-radius:16px;
}

.bookingCard h3{
  font-size:15px;
  margin-bottom:10px;
}

.bookingCard p{
  font-size:12px;
  margin-bottom:6px;
}

.dashboardLayout{
  grid-template-columns:1fr;
  gap:6px;
}

.profileButtons{

  display:flex;

  flex-wrap:wrap;

  justify-content:center;

  gap:12px;
}

.reviewForm{

  width:100%;

  display:flex;

  flex-direction:column;

  gap:12px;
}

.reviewForm input,
.reviewForm textarea{

  width:100%;
}

.ratingBox{

  width:100%;

  display:flex;

  justify-content:center;

  flex-wrap:wrap;

  gap:8px;

  margin-top:10px;
}

.starBtn{

  min-width:50px;

  padding:10px;
}

.profileBtn{

  padding:10px 14px;

  font-size:14px;
}

}

/* FEATURED */

.featuredBadge{
  background:#ffcc00;
  color:black;
  padding:4px 10px;
  border-radius:30px;
  font-size:12px;
  margin-left:8px;
}

#featuredBtn{
  background:#ffcc00;
  color:black;
}

#featuredTitle{
  font-size:26px;
  margin-bottom:16px;
}

#featuredTitle span{
  font-size:18px;
}

/* BOOKING FORM */

.bookingForm{
  display:none;
  flex-direction:column;
  gap:14px;
  margin-top:24px;
}

.bookingForm input{
  padding:14px;
  border:none;
  border-radius:14px;
  background:#1a1a1a;
  color:white;
}

#sendBookingBtn{
  padding:14px;
  border:none;
  border-radius:14px;
  background:#ffcc00;
  color:black;
  font-weight:bold;
  cursor:pointer;
}

/* BOOKINGS */

.dashboardBookings{
  margin-top:40px;
}

.dashboardBookings h2{
  margin-bottom:20px;
}

.bookingCard{
  background:#161616;
  border:1px solid #2a2a2a;
  border-radius:18px;
  padding:18px;
  margin-bottom:16px;
}

.bookingCard h3{
  margin-bottom:10px;
}

.bookingCard p{
  color:#bbbbbb;
  margin-bottom:6px;
}

.noBookings{
  color:white;
  margin-top:14px;
  font-size:16px;
  opacity:0.7;
}

/* RATING */

.ratingBox{
  width:100%;

  display:flex;

  justify-content:center;

  gap:10px;

  margin:24px 0 10px;
}

.starBtn{
  padding:10px 14px;
  border:none;
  border-radius:10px;
  background:#1f1f1f;
  color:#ffcc00;
  cursor:pointer;
  font-size:14px;
  min-width:58px;
}

/* REVIEW FORM */

.reviewForm{
  display:flex;
  flex-direction:column;
  gap:14px;
  margin-top:24px;
}

.reviewForm input,
.reviewForm textarea{
  padding:14px;
  border:none;
  border-radius:14px;
  background:#1a1a1a;
  color:white;
}

.reviewForm textarea{
  min-height:100px;
  resize:none;
}

#sendReviewBtn{
  padding:14px;
  border:none;
  border-radius:14px;
  background:#ffcc00;
  color:black;
  font-weight:bold;
  cursor:pointer;
}

/* REVIEWS */

.reviewsContainer{
  margin-top:30px;
}

.reviewsContainer h2{
  margin-bottom:16px;
}

.reviewCard{

  background:#1a1a1a;

  border-radius:14px;

  padding:14px;

  margin-bottom:14px;
}

.reviewCard h3{

  margin-bottom:8px;

  font-size:16px;
}

.reviewCard p{

  color:#cccccc;

  font-size:14px;

  line-height:1.5;
}

.deleteReviewBtn{

  margin-top:12px;

  padding:8px 12px;

  border:none;

  border-radius:10px;

  background:red;

  color:white;

  cursor:pointer;
}

.deleteBookingBtn{

  margin-top:12px;

  padding:8px 12px;

  border:none;

  border-radius:10px;

  background:red;

  color:white;

  cursor:pointer;
}

/* HEADER LOGO */

.logo{

  display:flex;

  align-items:center;

  gap:10px;
}

.siteLogo{

  width:42px;

  height:42px;

  object-fit:cover;

  border-radius:12px;
}

/* LOADER */

#loader{

  position:fixed;

  top:0;
  left:0;

  width:100%;
  height:100%;

  background:black;

  display:flex;

  justify-content:center;

  align-items:center;

  z-index:9999;
}

.spinner{

  width:55px;
  height:55px;

  border:5px solid #333;

  border-top:5px solid #ffcc00;

  border-radius:50%;

  animation:spin 1s linear infinite;
}

@keyframes spin{

  100%{
    transform:rotate(360deg);
  }

}

/* FOOTER */

.footer{

  margin-top:40px;

  padding:20px;

  display:flex;

  justify-content:center;

  gap:20px;

  flex-wrap:wrap;

  border-top:1px solid #222;
}

.footer a{

  color:#cccccc;

  text-decoration:none;

  font-size:16px;
}

/* SIMPLE PAGES */

.pageBox{

  max-width:800px;

  margin:50px auto;

  padding:24px;

  line-height:1.8;
}

.pageBox h1{

  margin-bottom:24px;

  font-size:32px;
}

.pageBox p{

  margin-bottom:18px;

  color:#cccccc;

  font-size:16px;
}

/* MOBILE */

@media(max-width:768px){

  .pageBox{

    padding:18px;

    margin:30px auto;
  }

  .pageBox h1{

    font-size:26px;
  }

  .pageBox p{

    font-size:15px;
  }

}

/* INPUT STYLE */

.artistInput{

  width:100%;

  padding:16px;

  margin-top:18px;

  margin-bottom:18px;

  border:none;

  outline:none;

  border-radius:14px;

  background:#1e1e1e;

  color:#bab9b9;

  font-size:16px;

  box-sizing:border-box;
}

#toggleLoginPassword,
#toggleSignupPassword{

  margin-top:10px;

  background:none;

  border:none;

  color:#ffcc00;

  cursor:pointer;
}

#featuredArtistsGrid{
  display:flex;
  flex-wrap:wrap;
  gap:20px;
  justify-content:center;
  padding:20px;
}

 .backBtn{

  position:absolute;

  top:20px;

  left:20px;

  padding:8px 14px;

  border:none;

  border-radius:8px;

  background:#ffcc00;

  color:#000;

  font-weight:bold;

  cursor:pointer;

  z-index:10;

}

@media(max-width:700px){

  .hero h2{

    font-size:14px;

  }

}