* {
    scrollbar-width: thin;
    scrollbar-color: var(--placeholder) var(--gray-first);
}

/* Chrome, Edge and Safari */
*::-webkit-scrollbar {
    height: 6px;
    width: 6px;
}

*::-webkit-scrollbar-track {
    border-radius: 5px;
    background-color: var(--gray-first);
}

*::-webkit-scrollbar-track:hover {
    background-color: var(--gray-first);
}

*::-webkit-scrollbar-track:active {
    background-color: var(--gray-first);
}

*::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background-color: var(--placeholder);
}

*::-webkit-scrollbar-thumb:hover {
    background-color: var(--placeholder);
}

*::-webkit-scrollbar-thumb:active {
    background-color: var(--placeholder);
}


:root {
    /* Rich, Darker Pink */
    --primary: #7c3aed; 
    --primary-dark: #6732c3; 
     --primary-10: rgba(124, 58, 237, 0.15); 
     --primary-20: rgba(124, 58, 237, 0.20); 
    /* A deep Midnight Navy to pair with the dark pink for elegance */
    --secondary: #1E1E45; 
    --black-100: #000000; 
    --base-color:#eaeaea; 
    --dark: #0a0a0a;
    --bg-dark: #0a0a0a;
    --bg-surface: #111111;
    --bg-elevated: #1a1a1a;
    --dark-first: #0f0f0f;
    --white: #ffffff;
    --gray-text: #aaaaaa;
    --card-border:#2a2a2a;
    --card-bg: #121212;
    --border-gray: #222;
    --dark-gray-text: #cccccc;
    --field-border: #334155;
    --gray-first: #A1A1AA;
    --gray-second: #E5E7EB;
    --dark-gray-third: #181826;
    --ratings: #f59e0b;
    --placeholder: #8b8b8b;
    --gray-fourth: #333333;
    --alert: #dc2626;
    --success: #10b981;
    --success-15: rgba(16, 185, 129, 0.15);



    --font-head: 'Bebas Neue', sans-serif;
    --font-body: 'Outfit', sans-serif;
    
    /* Updated gradient to use the darker, richer tones */
    --grad: linear-gradient(90deg, #763aed, #4A00E0);

    /* Font Size */
    --base-text:16px;
    
    --text-11:11px;
    --text-12:12px;
    --text-13:13px;
    --text-14:14px;
    --text-15:15px;
    --text-19:19px;
    --text-18:18px;
    --text-21:21px;
    --text-22:22px;
    --text-24:24px;
    --text-28:28px;
    --text-32:32px;
    --text-35:35px;
    --text-40:40px;
    --text-45:45px;
    --text-48:48px;
    --text-60:60px;
    --text-64:64px;
    --text-80:80px;
    --text-104:104px;

     /* Border Rounded */
    --border-r-4: 4px;
    --border-r-6: 6px;
    --border-r-8: 8px;
    --border-r-10: 10px;
    --border-r-12: 12px;
    --border-r-16: 15px;
    --border-r-20: 20px;
    --border-r-24: 24px;
    --border-r-30: 30px;

	
}

/* Form Elemens */

.form-control::-moz-placeholder {
    color:var(--placeholder);
    opacity:1
  }
  .form-control::placeholder {
    color:var(--placeholder);
    opacity:1
  }
  .form-control:-ms-input-placeholder {
    color: var(--placeholder);
    opacity: 1;
  }
  .form-control:disabled {
  background-color: var(--dark-gray-third);
  opacity: 1;
}
input.form-control,
textarea.form-control,
select.form-control {
    background-color: transparent;
    border: 2px solid var(--field-border);
    border-radius: var(--border-r-8);
    box-shadow: none;
    font-size: var(--base-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 50px;
    color: var(--white);
    padding: 10px 20px;
    font-weight: 400;
}
select.form-control {background-image: url(../images-nct/select-arrow.svg); background-position: 97% center; background-repeat: no-repeat; background-size: 24px 24px;}
input.form-control:focus,
textarea.form-control:focus,
select.form-control:focus
{box-shadow: none; border: 1px solid var(--primary); background-color: transparent; color: var(--white);}
textarea.form-control {
    height: auto;
    overflow: auto;
    white-space: normal;
    resize: none;
}

.form-group {
    margin-bottom:20px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body { 
    font-family: var(--font-body); 
    background: var(--bg-dark); 
    color:var(--base-color) ; 
    -webkit-font-smoothing: subpixel-antialiased;
    -webkit-text-stroke: 1px transparent;
    padding: 0;
    margin: 0;
    font-size: var(--base-text);
}
a {
    outline: none;
    cursor: pointer;
    color: var(--primary);
    text-decoration: none;
}

a:hover,
a:focus {
    color: var(--primary-dark);
    text-decoration: none;
}
a,
button,
.btn {
    -webkit-transition: all 0.3s ease-out 0s;
    -moz-transition: all 0.3s ease-out 0s;
    -o-transition: all 0.3s ease-out 0s;
    transition: all 0.3s ease-out 0s;
}
img {
    max-width: 100%;
}
.card {color: var(--base-color);}
/* Navbar */
header { background: var(--bg-surface); position: sticky; top: 0; z-index: 1000;
    box-shadow: 0 4px 30px rgba(0,0,0,0.6); min-height: 80px;} 
.navbar {
    display: flex; justify-content: space-between; align-items: center; 
    padding-top: 12px; padding-bottom: 12px;

}
header .container-fluid {padding: 0 5%;}
header .navbar .nav-links {gap: 40px;}


/* Navigation */
.nav-links { display: flex; height: 100%; justify-content: center;}
.dropdown { position: relative; display: flex; align-items: center; }

.dropbtn {
    background: none; border: none; font-family: var(--font-body);
    font-size: var(--text-14); font-weight: 700; padding: 0;
    height: 100%; text-transform: uppercase; cursor: pointer; color: var(--dark-gray-text);
    transition: 0.2s;
    display: inline-flex; gap: 5px; align-items: center;
}
.dropbtn:hover { color: var(--primary); }
.dropbtn i {font-size: var(--text-12);}
/* Dropdown Content */
.dropdown-content {
    display: none; position: absolute; background: var(--bg-elevated);
    top: 100%; left: 0; min-width: 196px; padding: 20px 25px; 
    box-shadow: 0 20px 40px rgba(0,0,0,0.8); 
    border-radius: 0 0 var(--border-r-12) var(--border-r-12);
    border-top: 3px solid var(--primary);
    z-index: 1100;
    transition: 0.5s;
}

.dropdown:nth-child(3) .dropdown-content,
.dropdown:nth-child(4) .dropdown-content { left: auto; right: 0; }

.dropdown:hover .dropdown-content { display: block; }


/* Buttons */
.password-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.toggle-password {
  position: absolute;
  right: 15px;
  cursor: pointer;
  color: var(--text-light);
  display: flex;
  align-items: center;
  user-select: none;
  color: var(--text-light);
  opacity: 0.7;
}

.register-btn {
    background: var(--grad); color: var(--white); padding: 7px 22px;
    text-decoration: none; font-weight: 800; border-radius: var(--border-r-4);
    font-family: var(--font-head); font-size:var(--text-18); letter-spacing: 1px;
    transition: 0.3s;
}
.register-btn:hover, .register-btn:focus { 
    transform: translateY(-2px); 
    box-shadow: 0 5px 15px rgba(184, 20, 102, 0.4);  color: var(--white);
}
.register-btn-border {
    background: transparent; color: var(--white); padding: 7px 22px;
    text-decoration: none; font-weight: 800; border-radius: var(--border-r-4);
    font-family: var(--font-head); font-size:var(--text-18); letter-spacing: 1px;
    transition: 0.3s; border: 1px solid var(--primary);
}
.register-btn-border:hover, .register-btn-border:focus { 
    transform: translateY(-2px); 
    box-shadow: 0 5px 15px rgba(184, 20, 102, 0.4);  color: var(--white);
}
.hero-search-btn {
   background-color: var(--white);
    color: var(--black-100); 
    border: none;
    font-family: var(--font-head); 
    font-size: var(--text-24);
     padding: 12px 45px;
    border-radius: 100px; 
    cursor: pointer; transition: 0.3s;
    letter-spacing: 1px;  
}

.hero-search-btn:hover, .hero-search-btn:focus { 
    background: var(--primary); 
    color: var(--white);
}



/* Common UI Class */

.common-section {padding: 100px 4.4%;}

.container {max-width: 1224px;}

.content-grid { display: grid; grid-template-columns: repeat(0, 1fr); gap: 15px; }

.content-grid a { 
    text-decoration: none; color: var(--gray-text); font-size: var(--text-14); 
    padding: 5px 0; transition: 0.2s; font-weight: 400;
}
.content-grid a:hover { color: var(--primary); padding-left: 5px; }

/* Auth Buttons */
.auth-buttons { display: flex; gap: 20px; align-items: center; }

.login { 
    text-decoration: none; 
    color: var(--white); 
    font-weight: 600; 
    font-size: var(--text-14); 
    text-transform: uppercase; 
}


/* Hero Section */
.hero {
    min-height: 85vh; position: relative; display: flex; align-items: center; justify-content: center;
    background: url('../images-nct/banner-img1.jpg') center/cover no-repeat;
    color: var(--white); text-align: center;
}

.hero:before { content: "";
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to bottom, rgba(0,0,0,0.6), rgba(0,0,0,0.9));opacity: 0.7;
}

.hero-content { position: relative; z-index: 5; width: 90%; max-width: 1100px;  margin: 0 auto;}

.hero-content h1 { 
    font-family: var(--font-head); font-size: var(--text-104); line-height: 0.85; margin-bottom: 15px; font-weight: 700;
}

.hero-content h1 span { color: var(--primary); }

.hero-content p { 
    font-size: var(--text-22); 
    font-weight: 300; 
    margin-bottom: 50px; 
    opacity: 0.85; 
}

/* Search Container */
.search-container {
    background: var(--bg-surface); padding: 10px; border-radius: 100px;
    display: flex; align-items: center; box-shadow: 0 30px 60px rgba(0,0,0,0.8);
    max-width: 950px; margin: 0 auto;
}

.search-input-group {
    flex: 1; padding: 10px 25px; text-align: left; border-right: 1px solid var(--gray-fourth);
}

.search-input-group:last-of-type { border-right: none; }

.search-input-group label { 
    display: block; font-family: var(--font-head); color: #bbbbbb; 
    font-size:var(--text-14); letter-spacing: 1px;
}

.search-input-group input {
    width: 100%; border: none; outline: none; font-family: var(--font-body);
    font-size: var(--base-text); font-weight: 600; color: var(--white); background: transparent;
}


.how-it-works { background:var(--dark-first); }
.section-title {margin-bottom: 60px;}
.section-title .title {font-family: var(--font-head); font-size: var(--text-80); color: var(--white); margin:0; }
.section-title .title span {color: var(--primary); }
.section-title .subtitle { font-family: var(--font-body);  font-size: var(--text-18); color: var(--gray-text); margin:5px 0 0;  
}




.cards-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }

.first-card { 
    padding: 50px; border-radius:var(--border-r-12);
    border: 2px solid var(--card-border);
    background: var(--card-bg);
    transition: 0.4s ease;
}

.first-card:hover { 
    border-color: var(--primary); 
    box-shadow: 0 20px 40px rgba(184, 20, 102, 0.2); 
}

.first-card .card-title {  display: flex; align-items: center; justify-content: space-between;
      margin-bottom: 30px; color: var(--white);
}
.first-card .card-title h3 { 
    font-family: var(--font-head); font-size: var(--text-40); 
    margin: 0; 
}
.first-card .card-title h3 span {color: var(--primary);}

.why-choose-us h3 span {
	color: var(--primary);
}

.cta-banners h2 span { 
	color: var(--primary); 
}	

.step { 
    display: flex; gap: 20px; margin-bottom: 25px;
    font-family: var(--font-body); text-align: left;
    line-height: 1.6;
}
.step:last-child {margin-bottom: 0;} 

.step span { 
    font-family: var(--font-head); font-size: var(--text-24); 
    color: var(--primary); min-width: 30px;
}

.step strong { 
    display: block; 
    color: var(--white); 
    font-size: var(--text-18); 
    font-weight: 600;
}

.btn-card {
    display: inline-block; margin-top: 30px; padding: 15px 40px;
    background: var(--white); color: var(--black-100); text-decoration: none;
    font-family: var(--font-head); font-size: var(--text-19); 
    border-radius: var(--border-r-4); transition: 0.3s; border: none; outline: none;
}

.btn-card:hover, .btn-card:focus { 
    background: var(--primary); 
    color: var(--white);
    transform: translateY(-3px); 
}
.btn-card-lg {
    display: inline-block; margin-top: 10px; padding: 15px 40px;
    background: var(--white); color: var(--black-100); text-decoration: none;
    font-family: var(--font-head); font-size: var(--text-24); 
    border-radius: var(--border-r-4); transition: 0.3s; border: none; outline: none;
    letter-spacing: 1px;
}

.btn-card-lg:hover, .btn-card-lg:focus { 
    background: var(--primary); 
    color: var(--white);
    transform: translateY(-3px); 
}




.featured-spotlight {background: var(--dark-first); }



.spotlight-grid { 
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 40px;
}

.spotlight-card { 
    background-color: var(--card-bg); border-radius: var(--border-r-12); overflow: hidden;
    box-shadow: 0 10px 20px rgba(0,0,0,0.8); transition: 0.3s;
}

.spotlight-card:hover { 
    transform: translateY(-10px); 
    box-shadow: 0 20px 30px rgba(0,0,0,0.9); 
}

.spotlight-card .card-img { display: block;}
.spotlight-card .card-img img {width: 100%; max-height: 220px; object-fit: cover; }

.spotlight-card .card-info { padding: 20px; }

.spotlight-card .card-info h3 { 
    font-family: var(--font-head); 
    font-size:var(--text-24); 
    margin-bottom: 0; 
    color: var(--white);
}

.spotlight-card .role { 
    font-family: var(--font-body); 
    color: var(--primary); 
    font-weight: 600; 
    margin-bottom: 5px; 
}

.spotlight-card .rating { 
    font-family: var(--font-body); 
    font-size:var(--text-14); 
    color: var(--ratings); 
    margin-top:10px; 
    display: flex; gap: 6px; align-items: center;
}

.spotlight-card .book-now { 
    display: block; 
    font-family: var(--font-head); 
    color: var(--white); 
    text-decoration: none; 
    font-size: var(--text-18); 
   padding: 10px 0 0;
}

.book-now:hover { color: var(--primary); }



.common-tab {background-color: var(--bg-elevated);   padding: 5px; border-radius: 50px; margin-bottom: 50px; border: none; box-shadow: none;}
.common-tab-container {
  display: flex;
  margin: 0 auto;
  justify-content: center;
  align-items: center;
}
.common-tab.nav-tabs .nav-link {  padding: 12px 30px; border: none; border-radius: 50px;
    cursor: pointer; font-family: var(--font-head); font-size:var(--text-18);
    transition: 0.3s; background: transparent;
    color: var(--dark-gray-text);}
.common-tab.nav-tabs .nav-link.active {  background: var(--primary); 
    color: var(--white); }    

.toggle-container { 
    background-color: var(--bg-elevated); display: inline-flex; 
    padding: 5px; border-radius: 50px; margin-bottom: 50px; 
}

.toggle-btn { 
    padding: 12px 30px; border: none; border-radius: 50px;
    cursor: pointer; font-family: var(--font-head); font-size: var(--text-18);
    transition: 0.3s; background: transparent;
    color: var(--dark-gray-text);
}

.toggle-btn.active { 
    background: var(--primary); 
    color: var(--white); 
}

.steps-grid { 
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; 
}

.step-card { 
background: var(--card-bg);
  padding: 40px 25px;
  border-radius: var(--border-r-16);
  border: 1px solid var(--card-border);
  transition: 0.3s;}
.step-card:hover {
  border-color: var(--primary);
  transform: translateY(-5px);
}
.step-number { 
    font-family: var(--font-head); font-size: var(--text-48); 
    color: var(--primary); margin-bottom: 10px; 
}

.step-card h4 { 
    font-family: var(--font-head); 
    font-size: var(--text-22); 
    margin-bottom: 10px; 
    color: var(--white);
}

.step-card p { 
    font-family: var(--font-body); 
    font-size: var(--text-15); 
    color: var(--gray-link); 
}
.step-card p:last-child {margin-bottom: 0;} 

/* Testimonials */
.testimonials { padding: 100px 5%; background: var(--dark-first); }



.testimonial-grid { 
    display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 50px; 
}

.testimonial-card { 
    padding: 40px; background: var(--card-bg); border-radius: var(--border-r-12);
    border-left: 5px solid var(--primary); position: relative;
}

.quote-mark { 
    font-size: var(--text-60); color: var(--primary); 
    opacity: 0.3; line-height: 1; margin-bottom: 10px; 
}

.quote-text { 
    font-family: var(--font-body); font-size: var(--text-18); 
    font-style: italic; color: var(--dark-gray-text); margin-bottom: 25px; line-height: 1.6;
}

.author h4 { 
    font-family: var(--font-head); 
    font-size: var(--text-21); 
    margin-bottom: 2px; 
    color: var(--white);
}

.author span { 
    font-family: var(--font-body); 
    color: var(--primary); 
    font-size:var(--text-14); 
}
.type-box {
    border: 2px solid var(--field-border); /* Default visible border */
    transition: 0.3s all ease;
    cursor: pointer; 
    padding: 30px;
    border-radius: var(--border-r-12); 
    text-align: center; 
    background: rgba(255,255,255,0.03);
    margin-bottom: 30px;
}
.type-box h3 {font-family: var(--font-head); letter-spacing: 1px; font-weight: 700; margin: 5px 0 0; font-size: var(--text-22);}
.type-box .type-icon {font-size: var(--text-40); color: var(--primary); margin-bottom: 15px;} 
.registration-card {background: var(--card-bg); padding: 50px; border-radius: var(--border-r-20); border: 1px solid var(--card-border); box-shadow: 0 20px 50px rgba(0,0,0,0.5);}

.type-box.selected {
    border-color: var(--primary) !important; /* The Purple/Pink border */
    background: rgba(184, 20, 102, 0.1) !important; /* Subtle glow */
    transform: translateY(-5px);
}
.auth-page {max-width: 800px; margin: 60px auto; padding: 0 20px;}
.auth-title {margin-bottom: 40px;}
.auth-title h1 {font-size: var(--text-60); margin-bottom: 0; font-family: var(--font-head); font-weight: 700;}
/* .auth-title h1 span {color: var(--primary);} */
.auth-title p {color: var(--gray-text); margin: 10px 0 0;}

/* Social Login (Below Form) */
.social-auth {
    margin-top: 25px;
    text-align: center;
}

.social-icons {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 15px;
}

.social-btn {
    width: 45px;
    height: 45px;
    border: 1px solid var(--card-border);
    border-radius: var(--border-r-10);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-19);
    cursor: pointer;
    transition: 0.3s;
    background: transparent;
}

.social-btn:hover {
    background: var(--primary);
    border-color: var(--primary);
    transform: translateY(-3px);
}

.divider {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 20px 0 10px;
    color: var(--gray-second);
    font-size: var(--text-11);
    letter-spacing: 1px;
    font-weight: 600;
}

.divider::before, .divider::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid var(--card-border);
}

.divider:not(:empty)::before {
    margin-right: 1em;
}

.divider:not(:empty)::after {
    margin-left: 1em;
}



.author-info { 
    display: flex; 
    align-items: center; 
    gap: 15px; 
    margin-top: 20px; 
}

.author-img { 
    width: 60px; 
    height: 60px; 
    border-radius: 50%; 
    object-fit: cover; 
    border: 3px solid var(--primary); 
}

.author-text h4 { 
    font-family: var(--font-head); 
    font-size: var(--text-18); 
    margin-bottom: 2px; 
    color: var(--white);
    margin: 0;
}

.author-text span { 
    font-family: var(--font-body); 
    color: var(--primary); 
    font-size: var(--text-14);  margin-top: 4px;
    display: block;
}


.features-grid { 
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 50px; 
}

.feature-card { 
    background: var(--card-bg); padding: 40px 25px; border-radius: var(--border-r-16);
    border: 1px solid var(--card-border); transition: 0.3s;
}

.feature-card:hover { 
    border-color: var(--primary); 
    transform: translateY(-5px); 
}

.icon { font-size: var(--text-40); margin-bottom: 20px; color: var(--primary); }

.feature-card h3 { 
    font-family: var(--font-head); font-size:var(--text-24); margin-bottom: 15px; 
    color: var(--white); font-weight: 700;
}

.feature-card p { 
    font-family: var(--font-body); font-size: var(--text-15); color: var(--gray-link); line-height: 1.6; 
}
.feature-card p:last-child {margin-bottom: 0;}



/* CTA Banners */
.cta-banners { 
    display: flex; 
    width: 100%; 
    min-height: 350px; 
    overflow: hidden; 
}

.banner { 
    flex: 1; 
    display: flex; 
    align-items: center; 
    justify-content: center;
    text-align: center; 
    color: #fff; 
    padding: 40px;
    position: relative; 
    background-size: cover; 
    background-position: center;
    background-repeat: no-repeat;
}

/* Explicitly darken backgrounds so text is readable */
.organizer-banner { 
    background-color: #111111; 
}

.artist-banner { 
    background-color: var(--primary); 
}

/* Overlay to ensure readability */
.banner::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 1;
}

.banner-content { position: relative; z-index: 2; }

.banner h2 { 
    font-family: var(--font-head); 
    font-size: var(--text-48); 
    margin-bottom: 15px; 
    letter-spacing: 1px;
}

.banner p { 
    font-family: var(--font-body); 
    margin-bottom: 30px; 
    font-size:var(--text-18);
    color: #dddddd;
}

.cta-btn {
    padding: 12px 40px; 
    background: var(--white); 
    color: var(--black-100);
    text-decoration: none; 
    font-family: var(--font-head); 
    font-size: var(--text-18); 
    border-radius: var(--border-r-4); 
    transition: 0.3s; 
    display: inline-block;
    text-transform: uppercase;
}

.cta-btn:hover, .cta-btn:focus  { 
    background: var(--primary); 
    color: var(--white); 
    transform: scale(1.05); 
}

/* Responsive: Stack on mobile */




/* Layout Container */
.main-footer { background: var(--dark-first); padding: 50px 4.4% 30px; border-top: 1px solid var(--border-gray); }

.footer-container { 
    display: grid; 
    grid-template-columns: repeat(3, minmax(250px, 1fr)); 
    gap: 40px; 
}

/* Col 1 & 2 Adjustments */
.footer-col h4 { 
    font-family: var(--font-head); 
    margin-bottom: 20px; 
    color: var(--white); 
    font-size: var(--text-22);
}

.footer-links { list-style: none; padding: 0; }

.footer-links li a { 
    color: var(--gray-link); 
    text-decoration: none; 
    margin-bottom: 10px; 
    display: block; 
}

.footer-links li a:hover { color: var(--primary); }

/* Social Links */
.social-links { 
    display: flex; 
    gap: 20px; 
    margin-top: 20px; 
}

.social-links a { 
    font-size: var(--text-24); 
    color: var(--dark-gray-text); 
    transition: 0.3s; 
}

.social-links a:hover { color: var(--primary); }

/* Newsletter & App */
.subscribe-form { display: flex; flex-direction: column; gap: 10px; margin-bottom: 25px; }

.subscribe-form input { 
    padding: 12px; 
    border: 1px solid var(--gray-fourth); 
    border-radius: 4px; 
    background: var(--bg-elevated);
    color: var(--white);
    font-size: var(--base-text);
}

.subscribe-form button { 
    padding: 12px; 
    background: var(--primary); 
    color: #fff; 
    border: none; 
    border-radius: var(--border-r-4); 
    font-weight: 600; 
    cursor: pointer; 
    font-size: var(--base-text);
}
.subscribe-form button:hover, .subscribe-form button:focus {background-color: var(--primary-dark); color: var(--white);}
.app-downloads { 
    display: flex; 
    gap: 10px; 
    margin-top: 15px; 
    align-items: center;
}

.app-btn { 
    height: 45px; 
    width: auto; 
    object-fit: contain; 
    display: block;
}

/* Footer Bottom */
.footer-bottom { 
    margin-top: 60px; 
    padding-top: 20px; 
    border-top: 1px solid #222; 
    text-align: center; 
    font-size: var(--text-14); 
    color: #777;
}



/* Sidebar and Sticky Logic */
.profile-page-wrapper { max-width: 1200px; margin: 0 auto; }

.main-profile-body { 
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 50px;
    padding:20px;
    max-width: 1200px;
}

.sticky-sidebar { position: sticky; top: 120px; height: fit-content; }

.booking-card { 
    border: 1px solid var(--card-border); 
    border-radius: 16px; 
    padding: 30px; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.8); 
    background: var(--card-bg);
}

.card-avatar { width: 80px; height: 80px; border-radius: 50%; margin-bottom: 15px; }
.instant-badge {
  display: inline-flex;
  align-items: center;
  background: rgba(16,185,129,0.12);
  color: #10b981;
  padding: 6px 12px;
  border-radius: 50px;
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  border: 1px solid #10b981;
}
.share-save-btns { display: flex; gap: 15px; margin-bottom: 20px; justify-content: flex-end; }

.share-save-btns button { 
    border: none; 
    background: none; 
    cursor: pointer; 
    font-weight: 600; 
    color: var(--gray-first);
}

.card-details p { margin: 10px 0; color: var(--gray-link); }

.card-details i { margin-right: 10px; color: var(--primary); }

.price-hint { 
    text-align: center; 
    margin-top: 15px; 
    color: #777; 
    font-size: var(--text-14); 
}

/* Sticky Menu */




/* Fixed Button Style */
.btn-card-white {
    display: inline-block; 
    margin-top: 20px; 
    padding: 12px 30px;
    color: var(--white); 
    text-decoration: none; 
    font-family: var(--font-head); 
    font-size: var(--text-18); 
    border-radius: var(--border-r-4); 
    transition: 0.3s; 
    background: transparent; 
    border: 2px solid var(--white) !important; 
    cursor: pointer;
}

.btn-card-white:hover, .btn-card-white:focus {
    background: var(--primary);
    border: 2px solid var(--white) !important; 
    color: var(--white);
}

/* Capsules */
.details-container {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 20px;
}

.capsule {
    background: var(--bg-elevated);
    color: var(--dark-gray-text);
    padding: 8px 20px;
    border-radius: 100px;
    font-family: var(--font-body);
    font-size: var(--text-15);
    font-weight: 600;
    border: 1px solid var(--gray-fourth);
    transition: 0.3s;
}

.capsule:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: #222;
}

section[id]{
    scroll-margin-top:140px;
}

/* Artist Grid */
.artist-grid { 
    display: grid; 
    grid-template-columns: repeat(4, 1fr); 
    gap: 25px; 
    width: 100%;
}

/* Artist Card */
.artist-card { 
    border: 1px solid var(--card-border); 
    border-radius: 16px; 
    overflow: hidden; 
    position: relative; 
    transition: 0.3s; 
    height: auto; 
    width: 300px; 
    background: var(--card-bg);
}

.artist-card:hover { 
    transform: translateY(-5px); 
    box-shadow: 0 10px 20px rgba(0,0,0,0.8); 
    border-color: var(--primary);
}
.artist-card .card-footer {padding: 0 20px 20px;}
.artist-card img { width: 100%; height: 200px; object-fit: cover; }

.card-body { padding: 15px; }

.heart-icon { 
    position: absolute; 
    top: 15px; 
    right: 15px; 
    background: rgba(0,0,0,0.6); 
    padding: 0;
    display: flex; 
    align-items: center;
        justify-content: center; 
        width: 36px; 
        height: 36px; 
    border-radius: 50%; 
    cursor: pointer; 
}

/* Icon transition */
.heart-icon i {
    transition: color 0.3s ease; 
}

.heart-icon:hover i {
    color: var(--primary);
}

.cta-book { 
    width: 100%; 
    padding: 12px 24px; 
    background: var(--primary); 
    color: var(--white); 
    border: none; 
    border-radius: var(--border-r-8); 
    margin-top: 10px; 
    cursor: pointer; 
    font-weight: 600;
}
.cta-book:hover, .cta-book:focus {background-color: var(--primary-dark); color: var(--white);}
.cancel-btn { 
    padding: 12px; 
    background: transparent; 
    color: var(--gray-first); 
    border: none; 
    margin-top: 10px; 
    cursor: pointer; 
    font-weight: 600;
}
.cancel-btn:hover, .cancel-btn:focus {background-color: transparent; color: var(--white);}
.menu.btn12 {display: none;}

header .back-btn {color: var(--text-muted); text-decoration: none; font-family: var(--font-head); font-size: var(--text-18); letter-spacing: 1px; transition: 0.3s; display: flex; align-items: baseline; gap: 8px;}
header .back-btn:hover, header .back-btn:focus {color: var(--primary);}

.workflow-section {
     position: relative; 
    background: url('../images-nct/image3.jpg') center/cover no-repeat;

}

.workflow-section:before { content: "";
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to bottom, rgba(0,0,0,0.7), rgba(0,0,0,0.9)); 
}
.workflow-section .container { position: relative; z-index: 5;}

.password-toggle {
  position: absolute;
  right: 15px;
  top: 16px;
  cursor: pointer;
 color: var(--placeholder);
}
.small-card {max-width: 600px;}
.auth-footer {
  text-align: center;
  margin-top: 20px;
  font-size: var(--base-text);
}

.back-to-login {
  display: inline-block;
  color: var(--white);
  text-decoration: none;
  font-weight: 600;
}
.resend-link {
  color: var(--primary);
  text-decoration: none;
  font-weight: 700;
  cursor: pointer;
}

.code-inputs {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-bottom: 30px;
}
input.code-input {
  width: 70px;
  height: 80px;
  border-radius: var(--border-r-12);
  border-width: 2px;
  text-align: center;
  font-size: var(--text-24);
  font-weight: 800;
  color: var(--primary);
  transition: 0.2s;
  outline: none;
}
.profile-page-wrapper {
    margin-top: 40px;
}

/* Space after header */

.profile-hero-panel {
    padding: 20px;
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;

}


/* Headline & Colors */
.hero-left h1 {
    font-family: var(--font-head);
    font-size: var(--text-64);
    color: var(--primary);
    margin-bottom: 5px;
}


/* Menu Spacing */
.sticky-menu {
    position: sticky;
    top: 80px;   
   
    z-index: 900;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    padding: 20px;
    display: flex;
    gap: 60px;
    font-family: var(--font-head);
    font-size: var(--text-24);
    margin-bottom: 40px;
}

/* When scrolled */
.sticky-menu.scrolled {
    background: rgba(24,24,38,0.95);
    border-bottom: 1px solid rgba(255,255,255,0.06);
    box-shadow: 0 8px 20px rgba(0,0,0,0.4);
	
}

.sticky-menu a {
    text-decoration: none;
    color: var(--gray-first);
}

.sticky-menu a:hover {
    color: var(--white);
}

.sticky-menu a.active {
    color: var(--primary);
    border-bottom: 3px solid var(--primary);
    padding-bottom: 10px;
}


.share-save-btns {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
    justify-content: flex-end;
}

.share-save-btns button {
    border: none;
    background: transparent;
    cursor: pointer;
    font-weight: 600;
    color: var(--gray-first);
}


/* Review Colors */
.rating-block {
    color: var(--ratings);
    font-weight: 600;
    margin-top: 10px;
}

.content-left {
    color: var(--gray-first);
    padding-bottom: 0;
}


/* Gallery Grid */
.spotlight-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.spotlight-card img {
    width: 100%;
    height: 250px;
    width: 250px;
    object-fit: cover;
    border-radius: var(--border-r-8);
}


/* Layout */
.left-panel { width: 62%; }

.section-block {
    border-bottom: 1px solid rgba(255,255,255,0.06);
    margin-bottom: 0;
    padding-bottom: 70px;
}

.ap-main-section {
    display: flex;
    align-items: start;
    justify-content: space-between;
}

.sticky-sidebar {
    width: 31%;
    top: 180px;
}


/* Hero Stats */

.hero-stats-wrapper {
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: flex-end;
    padding-top: 10px;
}

.stat-item {
    display: flex;
    align-items: center;
    width: 204px;
    gap: 15px;
    font-family: var(--font-head);
    color: var(--gray-second);
    border: 1px solid rgba(255,255,255,0.08);
    padding: 10px 20px;
    border-radius: var(--border-r-12);
    min-width: 180px;
    background-color: var(--dark-gray-third);
}

.stat-item i {
    font-size: var(--text-24);
    color: var(--primary);
}

.stat-item .stat-value {
    font-size: var(--text-24);
    line-height: 1;
}

.stat-item .stat-label {
    font-size:var(--text-13);
    color: var(--gray-first);
    font-family: var(--font-body);
}


/* Event Card Grid */
.events-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 30px;
}
.events-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    margin-top: 30px;
}

.event-card {
    
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.06);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.event-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.6);
}

.event-poster {
    width: 100%;
    height: 200px;
    background-size: cover;
    background-position: center;
    position: relative;
}

.event-date-tag {
    position: absolute;
    top: 15px;
    left: 15px;
    background: rgba(24, 24, 38, 0.95);
    padding: 8px 12px;
    border-radius: 8px;
    text-align: center;
    font-weight: 800;
    line-height: 1;
    box-shadow: 0 4px 6px rgba(0,0,0,0.5);
    color: #E5E7EB;
}

.event-content {
    padding: 20px;
}

.btn-see-all {
    display: block;
    width: 200px;
    margin: 40px auto 0;
    padding: 12px;
    text-align: center;
    border: 2px solid var(--primary);
    color: var(--primary);
    text-decoration: none;
    font-weight: 700;
    border-radius: 50px;
    transition: 0.3s;
}

.btn-see-all:hover {
    background: var(--primary);
    color: #fff;
}

.jobs-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 30px;
}

.job-card {
    display: flex;
    align-items: center;
    
    padding: 20px 30px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.06);
    justify-content: space-between;
    transition: 0.3s;
}

.job-card:hover {
    border-color: var(--primary);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
}

.job-badge {
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: 8px;
    display: inline-block;
}

.btn-apply {
    background: var(--primary);
    color: var(--white);
    padding: 12px 30px;
    border-radius: 50px;
    font-weight: 700;
    text-decoration: none;
    font-size:var(--text-14);
    outline: none;
    border: 1px solid var(--primary);
    transition: 0.3s;
}

.btn-apply:hover, .btn-apply:focus {
    background: var(--primary-dark);  
    border-color: var(--primary-dark);
    transform: scale(1.05);
    box-shadow: 0 15px 30px rgba(0,0,0,0.6);
    color: var(--white);
} 
.btn-apply-border {
    border:1px solid var(--primary);
    background-color: transparent;
    color: var(--primary);
    padding: 12px 30px;
    border-radius: 50px;
    font-weight: 700;
    text-decoration: none;
    font-size:var(--text-14);
    transition: 0.3s;
}

.btn-apply-border:hover, .btn-apply-border:focus {
    background: var(--primary);  
    border-color: var(--primary);
    transform: scale(1.05);
    box-shadow: 0 15px 30px rgba(0,0,0,0.6);
    color: var(--white);
} 
.btn-light-border {
    border:1px solid var(--card-border);
    background-color: transparent;
    color: var(--gray-text);
    padding: 12px 30px;
    border-radius: 50px;
    font-weight: 700;
    text-decoration: none;
    font-size:var(--text-14);
    transition: 0.3s;
}

.btn-light-border:hover, .btn-light-border:focus {
    background: var(--white);  
    border-color: var(--white);
    transform: scale(1.05);
    box-shadow: 0 15px 30px rgba(0,0,0,0.6);
    color: var(--dark);
} 
.cancel-label {color: var(--alert);}
.link-btn {
    border:none;
    background-color: transparent;
    color: var(--primary);
    padding: 0;
    border-radius: 50px;
    font-weight: 700;
    text-decoration: underline;
    font-size:var(--text-14);
    color: var(--gray-text);
    transition: 0.3s;
}

.link-btn:hover, .link-btn:focus {
    text-decoration: none;
    color: var(--white);
    transform: scale(1.05);
    color: var(--white);
} 

.btn-cancel {
    background: var(--dark);
    color: var(--white);
    padding: 12px 30px;
    border-radius: 50px;
    font-weight: 700;
    text-decoration: none;
    font-size:var(--text-14);
    border: 1px solid var(--gray-fourth);
    transition: 0.3s;
}

.btn-cancel:hover, .btn-cancel:focus {
    background: var(--dark);
    transform: scale(1.05);
     border: 1px solid var(--gray-fourth);
    box-shadow: 0 15px 30px rgba(0,0,0,0.6);
    color: var(--white);
} 
.btn-sm {
    background: var(--primary);
    color: var(--white);
    padding: 6px 20px;
    border-radius: 6px;
    font-weight: 700;
    text-decoration: none;
    font-size: var(--text-13);
}

.btn-sm:hover, .btn-sm:focus {
    background: var(--primary-dark); /* kept same (already dark-friendly) */
    color: var(--white);
    box-shadow: 0 15px 30px rgba(0,0,0,0.6);
    outline: none;
} 
.btn-sm-white {
    background: var(--white);
    color: var(--dark);
    padding: 6px 20px;
    border-radius: var(--border-r-6);
    font-weight: 700;
    text-decoration: none;
    font-size: var(--text-13);
}

.btn-sm-white:hover, .btn-sm-white:focus {
    background: var(--white); /* kept same (already dark-friendly) */
    color: var(--dark);
    outline: none;
} 
.btn-alert {background-color: var(--alert); padding: 6px 20px;
    border-radius: var(--border-r-6);
    font-weight: 700;
    color: var(--white);
    text-decoration: none;
    font-size: var(--text-13);}
.btn-alert:hover, .btn-alert:focus {background-color: var(--alert); color: var(--white); transform: scale(1.05);}
.btn-remove {background-color: rgba(220, 38, 38, 0.10); padding: 6px 20px;
    border-radius: var(--border-r-6);
    font-weight: 700;
    color: var(--alert);
    text-decoration: none;
    font-size: var(--text-13); border: 1px solid var(--alert); border: 1px solid rgba(220, 38, 38, 0.20);}
.btn-remove:hover, .btn-remove:focus {background-color: var(--alert); color: var(--white); ; border-color: var(--alert);}
.btn-sm-secondary {
    background: #f1f5f9;
    padding: 6px 20px;
    border-radius: var(--border-r-6);
    font-weight: 700;
    text-decoration: none;
    font-size: var(--text-13);
    border: 1px solid #e2e8f0;
    color: var(--dark-gray-third);
}

.btn-sm-secondary:hover, .btn-sm-secondary:focus {
    background: var(--gray-first); /* kept same (already dark-friendly) */
    color: var(--dark-first);
    box-shadow: 0 15px 30px rgba(0,0,0,0.6);
    outline: none;
} 
.btn-sm-close {
    background: #f1f5f9;
    padding: 6px 20px;
    border-radius: 50px;
    font-weight: 700;
    text-decoration: none;
    font-size: var(--text-13);
    border: 1px solid #e2e8f0;
    color: #475569;
}

.btn-sm-close:hover, .btn-sm-close:focus {
    background: var(--white); /* kept same (already dark-friendly) */
    color: var(--dark-first);
    box-shadow: 0 15px 30px rgba(0,0,0,0.6);
    outline: none;
} 

h3.category {font-size: var(--text-24); font-weight: 600; margin-bottom: 15px;}
p.meta {margin: 10px 0; color: var(--gray-first);}
.ratings {color: var(--ratings);  display: flex; gap: 3px; align-items: center;}
.ratings span .count {color: var(--gray-first); font-size: var(--base-text); }
.verified-artist {font-size: var(--text-24); color: #3b82f6;}
.about-artist {display: block; grid-template-columns: 2fr 1fr; gap: 50px;  max-width: 1200px; margin: 0 auto;}

.section-heading {display: flex;justify-content: space-between; margin-bottom: 20px; align-items: center;}
.section-heading .section-head {
   font-family: var(--font-head);
  font-size: var(--text-32);
  margin:0px;
  color: #E5E7EB;
}
.section-heading .section-slogan{
 color: var(--gray-first); margin: 15px 0 0;
}
.about-content { line-height: 1.8; color: var(--gray-first); font-size: var(--text-18); }
.about-content p { margin-bottom: 20px; }
.about-content p:last-child { margin-bottom: 0; }
.gallery-section {  padding:80px 0 0; }
.music-details, .availability-section, .review-section, .faq-section, .recent-events-section, .jobs-section {padding-top: 80px;}
.calendar-card {border: 1px solid rgba(255,255,255,0.06); padding: 20px; border-radius: 12px;  margin-top: 20px;}
.section-heading  .btn-card-white {padding:10px 25px; font-size: var(--base-text); margin-top: 0;}
.review-card {padding: 25px; border: 1px solid rgba(255,255,255,0.06); border-radius: var(--border-r-12); margin-bottom: 20px;}
.review-header {display: flex; justify-content: space-between; margin-bottom: 15px; align-items: center;}
.review-header h4 {font-family: var(--font-body); font-weight: 700; color:#E5E7EB; font-size: var(--text-24); margin: 0;}
.ratings-sm {color: var(--ratings);  display: flex; gap: 1px; align-items: center;}
.review-card p {color: var(--gray-first); font-size: var(--base-text); line-height: 1.6;}
.review-card p:last-child {margin-bottom: 0;}
.see-all-link {color: var(--primary); font-family: var(--font-head); font-size: var(--text-19); text-decoration: none; border-bottom: 2px solid var(--primary);}
.common-accordion .accordion-item {background-color: transparent; margin-bottom: 20px;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--border-r-8); }
.common-accordion .accordion-item:last-child {margin-bottom: 0;}
.common-accordion .accordion-button {background-color: transparent; font-weight: 700;
  cursor: pointer;
  outline: none;
  list-style: none;
  color: #E5E7EB; box-shadow: none; border: none; padding:20px;}

 

.common-accordion .accordion-button::after {content: "\f107"; font-family: 'Font Awesome 7 Free'; background-image: none; }

.common-accordion .accordion-body  {color: var(--gray-first); 
  line-height: 1.6;
  margin-top: 15px; padding: 0 20px 20px; margin: 0;}
.common-accordion .accordion-body p {margin-bottom: 15px;}
.common-accordion .accordion-body p:last-child {margin-bottom: 0;}
.circle-80 {width: 80px; height: 80px; border-radius: 50%; border: 1px solid var(--gray-first); display: flex; align-items: center; justify-content: center;}
.circle-80 img {width: 100%; height: 100%; border-radius: 50%; object-fit: cover;}
.booking-card .card-top {text-align: center; margin-bottom: 20px;}
.booking-card .card-top h3 {margin: 10px 0 0; color:#E5E7EB; font-size:var(--text-28)}

.card-details .text-icon {margin: 0 0 10px;  display: flex; align-items: center; gap: 6px; color: var(--gray-first);}
.text-icon i {color: var(--primary); }
.text-review i {color: var(--ratings); }
.booking-price-section h2 {font-size: var(--text-28); font-weight: 800; color: #E5E7EB; margin: 20px 0 10px;}
.booking-price-section h2 sub {font-size: var(--text-14); color: #A1A1AA; font-weight: 600;}
.booking-price-section p {font-size:var(--text-12); color: #6B7280; margin: 4px 0 0;}
.card-details .instant-badge {  margin: 15px 0 0;}
.similar-section {margin: 80px 0 0; padding: 0 0 80px;}
.similar-section h2 {font-family: var(--font-head); font-size: var(--text-32); margin-bottom: 30px; color: #E5E7EB;}
.similar-card h3 {font-size:var(--text-28); margin-bottom: 0; }
.similar-card p   {
  color: #A1A1AA;
  margin: 5px 0 0;
}
.tag-container {
  margin-top: 5px;
}
.review-price {display: flex; justify-content: space-between; align-items: center; margin: 10px 0;}
.booking-card-price {font-weight: 800; font-size: var(--text-18); color:#E5E7EB;}
.similar-card .ratings-sm {font-size: var(--text-14); gap: 2px;}
    .ratings-sm span .count {
  color: var(--gray-first);
  font-size: var(--text-14); display: inline-block; margin-left: 3px;
}
.similar-card {width: 280px;}
.event-month { font-size: var(--text-12); color: var(--primary); margin-bottom: 4px;}
.event-date { font-size: var(--text-18); color:#E5E7EB;}
.event-card .event-content h4 {font-size: var(--text-19); font-weight: 800; margin: 0px; color:#E5E7EB;}
.event-card .event-content .card-icon-block {font-size:var(--text-14); color: var(--gray-first); margin: 8px 0 0; display: flex; gap: 4px; align-items: baseline;}
.event-card .event-content .card-disc {font-size: var(--text-14); color: var(--gray-first); font-weight: 600; margin: 10px 0 0;}
.events-grid .event-poster { background-color: #0f172a;}
.events-grid .event-poster img {width: 100%; height: 100%; object-fit: cover;}
.job-left-info {flex: 1.5;}
.job-middle-info {flex: 1;}
.job-right-info {flex: 1;}
.job-left-info h4 {font-size:var(--text-21); font-weight: 800; margin: 0; cursor: pointer; color:#E5E7EB;}
.job-middle-info h3 {font-size: var(--text-24); font-weight: 800; color: #E5E7EB; margin: 0;}
.job-middle-info p {font-size: var(--text-13); color: #6B7280; text-transform: uppercase; font-weight: 700; margin: 5px 0 0;}
.job-icon-block {color: var(--gray-first); margin: 5px 0 0; display: flex; gap: 4px; align-items: baseline;}

.job-modal-top {background: #0f172a; color: #E5E7EB; padding: 30px; position: relative;}
.job-modal-top h2 {font-family: var(--font-head); font-size: var(--text-32); margin: 0; color:#E5E7EB;}

.modal-icon-block {color: var(--gray-first); margin: 5px 0 0; display: flex; gap: 4px; align-items: baseline;}
.job-modal-middle {padding: 30px; display: grid; grid-template-columns: 1.5fr 1fr; gap: 30px; background-color: #181826;}
.job-disc-left h4 {text-transform: uppercase; font-size: var(--text-13); color: #6B7280; letter-spacing: 1px; margin:0 0 10px;}
.job-disc-left p {color: #A1A1AA; line-height: 1.6; font-size: var(--base-text); margin: 0 0 15px;}
.job-disc-left ul {color: #A1A1AA; padding-left: 20px; line-height: 1.8;}
.job-disc-right {background: #0f172a; padding: 20px; border-radius: var(--border-r-12);}
.job-info-cell {margin-bottom: 20px;}
.job-info-cell:last-child {margin-bottom: 0;}
.job-info-cell h4 { font-size:var(--text-12); color: #6B7280; font-weight: 700; margin: 0;}
.job-info-cell p {font-weight: 700; color: #E5E7EB; margin: 4px 0 0;}
.job-info-cell h3 {font-size: var(--text-24); font-weight: 700; color: #E5E7EB; margin: 4px 0 0;}
.job-modal-bottom {padding: 20px 30px; background: #0f172a; text-align: right;}
.modal .cancel-btn {background: transparent; border: none; font-weight: 600; margin-right: 20px; cursor: pointer; color:#A1A1AA;}
.modal .btn-apply {padding: 12px 30px; border-radius: 50px; background: var(--primary); color: var(--white); border: none; font-weight: 700;}
.job-detail-modal .modal-content {border-radius: var(--border-r-16);
  overflow: hidden;
  background-color: transparent;}
.search-main, .review-main {margin:40px 0;}

        .search-wrapper {
            background: rgba(255,255,255,0.05);
            border: 1px solid rgba(255,255,255,0.08);
            backdrop-filter: blur(10px);
            border-radius: var(--border-r-30);
            padding: 10px;
            max-width: 1100px;
            margin: 0 auto 40px;
        }

        .search-box {
            background: rgba(255,255,255,0.05);
            border-radius: var(--border-r-24);
            padding: 15px 20px;
        }

        .search-box label {
            font-size: var(--text-11);
            text-transform: uppercase;
            letter-spacing: 2px;
            color: var(--primary-light);
            font-weight: 700;
            margin-bottom: 8px;
        }

        .search-box input {
            background: transparent;
            border: none;
            width: 100%;
            color: #fff;
            font-size: var(--text-18);
            font-weight: 600;
        }

        .search-box input:focus {
            outline: none;
            box-shadow: none;
        }

        .search-box input::placeholder {
            color: #6b7280;
        }

        .filter-btn {
            background: var(--primary);
            border: none;
            color: #fff;
            border-radius: var(--border-r-24);
            padding: 24px 20px;
            font-size: var(--text-18);
            font-weight: 500;
            width: 100%;
            transition: 0.3s ease;
            height: 100%;
        }

        .filter-btn:hover {
            background: var(--primary-dark);
        }

 .artist-content {
            padding: 20px 20px 15px;
        }

        .artist-content h3 {
            font-size: var(--text-22);
            font-weight: 700;
            margin: 0;
        }

        .artist-content p {
            color: #cbd5e1;
            font-size: var(--text-14);
            line-height: 1.7;
            margin: 10px 0 0;
        }

.tag-wrapper {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin: 15px 0 0 0; 
        }

        .artist-tag {
            border: 1px solid rgba(255,255,255,0.1);
            background: rgba(255,255,255,0.03);
            padding: 6px 14px;
            border-radius: 50px;
            font-size: 12px;
            transition: 0.3s ease;
            color: var(--dark-gray-text);
        }

        .artist-tag:hover {
            border-color: var(--primary);
            color: var(--primary-light);
        }

        .artist-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 15px 0 0;
            color: #94a3b8;
            font-size: var(--text-14);
        }
.artist-footer-label {color: var(--gray-text); font-size:var(--text-13); font-weight: 600; text-transform: uppercase;}
       .artist-content   .price {
            font-size: var(--text-22);
            font-weight: 700;
            color: var(--white);
        }

.artist-card.card {width: 100%;}
.artist-card.card .cta-book {margin-top: 0;}


.offcanvas-header {border-bottom: 1px solid var(--card-border); padding: 15px 20px;}
.offcanvas-body, .offcanvas-footer {padding: 20px;}
.offcanvas-footer {border-top: 1px solid var(--card-border);}
.offcanvas-header .btn-close {background-image: none; border: none; outline: none; color: var(--gray-first); font-size: var(--text-18);}
.offcanvas-title {font-size: var(--text-22); margin: 0; font-weight: 600;}
  .offcanvas {
            background: rgba(0, 0, 0, 0.7);
            color: #fff;
            -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
        }
  .offcanvas .form-group {margin-bottom: 30px;}
  .offcanvas .form-group:last-child {margin-bottom: 0;}
  .offcanvas .filter-title {font-size: var(--text-18); font-weight: 600; margin: 0 0 6px;}
 .form-check-input {width: 18px; height: 18px;}
 .form-check-input:checked {
            background-color: var(--primary);
            border-color: var(--primary);
        }

  .offcanvas .form-check .form-check-label {
  display: inline-block;
  font-size: var(--base-text);
  padding-left: 5px;
  color: var(--gray-first);
  font-weight: 400;
}

.offcanvas-backdrop.show {
  opacity: .8;
}
.filter-check-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.offcanvas .filter-check-row .form-check {
  min-width: 47%;
  margin: 0;
}
  .offcanvas .form-check {margin-bottom: 10px;}
  .offcanvas .form-check:last-child {margin-bottom:0;}
.range-value {display: flex; justify-content: space-between; font-size: var(--text-13); font-weight: 600; color: #666; margin-top: 5px;}
.form-range {accent-color: var(--primary);}
.booking-form {max-width: 900px; margin-top: 40px;}
.breadcrumb-item + .breadcrumb-item::before, .breadcrumb-item.active {color: var(--gray-text);}
.booking-summary {
  background-color:rgba(124, 58, 237, 0.10);
  padding: 20px;
  border-radius: var(--border-r-12);
  border: 1px dashed var(--primary);
}
.booking-summary p {
font-size: var(--text-13); color: var(--gray-first); display: flex; align-items: baseline; gap: 4px; margin: 0;
}


.dashboard-wrapper {
    display: flex;
    min-height: calc(100vh - 80px); /* Adjust based on your header height */
}

/* Sidebar Styling */
.sidebar {
    width: 260px;
    background-color: #121212;
    border-right: 1px solid rgba(255,255,255,0.06);
    padding: 30px 0;
    display: flex;
    flex-direction: column;
}

.sidebar .nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px 20px;
    text-decoration: none;
    color: #64748b;
    font-weight: 500;
    transition: 0.3s;
    border-left: 4px solid transparent;
}

.sidebar .nav-item i {
    width: 20px;
    font-size: var(--text-18);
}

.sidebar .nav-item:hover {
    color: var(--primary);
   background: var(--bg-dark);
}

.sidebar .nav-item.active {
    color: var(--primary);
   background: var(--bg-dark);
    border-left: 4px solid var(--primary);
    font-weight: 700;
}

.user-profile-trigger {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    padding: 0px 8px 0;
    border-radius: 50px;
    transition: 0.3s;
}
.user-profile-trigger i {font-size: var(--text-11); color: var(--gray-text);}
.header-profile-menu .dropdown-menu {min-width: 250px; border-radius: var(--border-r-12); overflow: hidden; background-color: var(--dark);}
.header-profile-menu .dropdown-info {padding: 16px 20px; background: var(--card-bg); border-bottom: 1px solid var(--card-border);}
.header-profile-menu .dropdown-info h5 {font-size: var(--text-12); color: var(--gray-text); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; margin: 0;}
.dropdown-list {padding: 8px 0;}
.dropdown-list .dropdown-item {display: flex; align-items: center; gap: 12px; padding: 10px 20px; font-size: var(--text-14); font-weight: 600; color: var(--gray-text); text-decoration: none; transition: 0.2s; background: transparent;}
.dropdown-list .dropdown-item i {width: 18px; text-align: center; font-size: var(--text-15); opacity: 0.85;}
.dropdown-list .dropdown-item:hover, .dropdown-list .dropdown-item:focus {background-color: var(--primary-10); color: var(--primary);}
.dropdown-list .dropdown-item.logout-btn {border-top: 1px solid var(--card-border); color: #ef4444; margin: 6px 0;}
.dropdown-list .dropdown-item.logout-btn:hover, .dropdown-list .dropdown-item.logout-btn:focus {color: #ef4444; background-color: 
    rgba(239, 68, 68, 0.10);}
.header-profile-menu .dropdown-info h4 {font-size: var(--base-text); color: var(--white); font-weight:00;  margin: 2px 0 0;}
.user-profile-trigger:hover {
    background: var(--bg-dark);
}
.header-search {position: relative; max-width: 500px; width: 100%; margin: 0 auto; }
.header-search .form-control {height: 40px; border-radius: var(--border-r-16); padding: 5px 10px 5px 45px; border-width: 1px;}
.header-search i {position: absolute; left: 14px; top: 13px; color: var(--gray-text); opacity: 0.5;}
.user-profile-trigger::after {display:none;}

.user-avatar {
    width: 38px;
    height: 38px;
    background: var(--bg-dark);
    border: 2px solid var(--card-border);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gray-first);
    overflow: hidden;
}

.user-avatar i {
    font-size: 1.1rem;
}

/* If user has an actual image */
.user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.inner-main {margin: 40px 0; width: 100%;}
.page-header {display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px;}
.page-header h1 {font-size: var(--text-45); color: var(--gray-second); margin: 0; font-family: var(--font-head);}
.page-header p {font-size: var(--base-text); color: var(--gray-first); margin: 5px 0 0;}

/* Stats Grid */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.stats-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.stat-card {
    background: var(--card-bg);
    padding: 25px;
    border-radius: var(--border-r-16);
      border: 1px solid var(--card-border);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.stat-card h3 {
    font-size: var(--text-14);
    color: var(--gray-first);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
    font-weight: 700;
}

.stat-card .value {
    font-family: var(--font-head);
    font-size:var(--text-35);
    color: var(--white);
}

.stat-card .trend {
    font-size: var(--text-14);
    margin-top: 5px;
    color: var(--gray-text);
}

.trend.up { color: #10b981; }

/* Booking Request List */
.recent-bookings {
    margin-top: 40px;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    gap: 10px;
}
.section-header h2 {
 font-family: var(--font-head); font-size: var(--text-32); margin: 0; color: var(--white);
}
.more-link { font-size: var(--text-14); font-weight: 600;}
.dropdown-menu {background: var(--card-bg); border: 1px solid var(--card-border);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);}
.dropdown-item {color: var(--gray-first);}
.dropdown-item:hover, .dropdown-item:focus {background-color: var(--dark-first); color: #fff;}
.notification-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  background: var(--primary);
  color: var(--white);
  font-size: var(--text-11);
  font-weight: 700;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--gray-first);
}
.nav-icon-wrapper {
  position: relative;
  cursor: pointer;
  font-size: var(--text-21);
  color: var(--gray-first);
}
.booking-item-card {
      background: var(--card-bg);
    padding: 20px 25px;
    border-radius: var(--border-r-12);
    border: 1px solid var(--card-border);
  
    margin-bottom: 15px;
    transition: 0.3s;
}

.booking-item-card:hover {
    border-color: var(--primary);
    box-shadow: 0 4px 12px rgba(184, 20, 102, 0.05);
}

.booking-info {
    display: flex;
    align-items: center;
    gap: 20px;
}

.square-50 {
    width: 50px;
    height: 50px;
    min-width: 50px;
    min-height: 50px;
    background: var(--dark-gray-third);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-r-10);
    font-size: var(--text-18);
}
.square-50 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--border-r-10);
}
.event-details h4 {
    font-family: var(--font-body);
    font-size: var(--text-18);
    margin-bottom: 2px;
    font-weight: 600;
     
}
.event-info p {
    font-size: var(--text-14);
    color: #64748b;
    margin: 5px 0 0;
}

.event-details p {
    font-size: var(--text-14);
    color: var(--gray-first)
}

.booking-meta {
    text-align: center;
    margin-right: 0;
}
.booking-meta p {
   font-size: var(--text-13); text-transform: uppercase; color:var(--gray-text); font-weight: 600; margin: 0;
}
.booking-meta  p.active {
   color: #10b981;
}

.booking-amount {
    font-family: var(--font-head);
    font-size: var(--text-22);
}

.booking-actions {
    display: flex;
    gap: 10px;
    justify-content: end;
}
.label-hidden {font-size: var(--text-14); font-weight: 600; text-transform: uppercase; opacity: 0.5;}
.icon-block {display: inline-flex; align-items:baseline; gap: 4px; }
.booking-form-count {background-color: rgba(124, 58, 237, 0.10);
  padding: 20px;
  border-radius: var(--border-r-12);
  border: 1px dashed var(--primary); height: 100%; min-height: 186px; display: flex; flex-direction: column; justify-content: center; align-items: center; margin-top: 0;}
.booking-form-count ul {list-style: none; padding-left: 0; color: var(--gray-first);  margin: 0; width: 100%;}
.booking-form-count ul li {padding-bottom:15px; display: flex; align-items: center; gap: 6px; justify-content: space-between;}
.booking-form-count ul li:last-child {border-bottom: none; margin-bottom: 0; padding-bottom: 0; padding-top: 15px; border-top: 1px solid var(--primary); }
.booking-form-count ul li h4 {font-size: var(--text-18); font-weight: 400; margin: 0;}
.booking-form-count ul li h3 {font-size: var(--text-22); font-weight: 600; margin: 0; color: var(--white);}
.booking-form-count p {font-size: var(--text-12); margin: 10px 0 0; display: flex; align-items: baseline; gap: 4px; color: var(--gray-first);}

.common-modal .modal-header {border-bottom: 1px solid var(--card-border); padding: 15px 20px;  
  color: var(--white);
  position: relative;
  border-radius: 12px 12px 0 0;
}
.common-modal .modal-footer {border-top: 1px solid var(--card-border); padding: 15px 20px;  
  color: var(--white);
  position: relative;
  border-radius: 0 0 12px 12px;
}
.common-modal .modal-body {padding:20px;  
  color: var(--white);
  position: relative;
  background-color: var(--dark);
}
.common-modal .modal-content {border-radius: var(--border-r-12); background: var(--card-bg); border:1px solid var(--card-border);}
.modal-backdrop {--bs-backdrop-opacity: 0.8; }
.common-modal .modal-header .btn-close {background-image: none; border: none; outline: none; color: var(--gray-first); font-size: var(--text-18); width: 30px; height: 30px; padding: 0; display: flex; align-items: center; justify-content: center;}

.common-modal .modal-title {font-size: var(--text-22); margin: 0; font-weight: 600;}
.ratings-lg {font-size: var(--text-28); color: var(--ratings); display: flex; gap: 4px; align-items: center;}
.review-total-block  {text-align: right;}
.review-total-block h2 {font-size: var(--text-35); font-weight: 800; margin: 0 0 7px; line-height: 1;}
.review-total-block p{font-size: var(--text-13); color:var(--gray-text); margin: 7px 0 0px;}
.review-filter-block {border: 1px solid var(--card-border);
  border-radius: var(--border-r-12);
  padding: 25px;

  margin-bottom: 30px;}

.review-filter-block h4 {font-size: var(--text-14); font-weight: 700; margin:0 0 10px; color: var(--white);}
.filter-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 20px;
}

.filter-tabs .filter-tab {
  color: var(--dark-gray-text);
  padding: 8px 20px;
  border-radius: 100px;
  font-family: var(--font-body);
  font-size: var(--text-15);
  font-weight: 600;
  border: 1px solid var(--gray-fourth);background-color: transparent; outline: none; cursor: pointer;
}
.filter-tabs .filter-tab.active {
  color: var(--white);background-color: var(--primary); border-color: var(--primary);
}
.review-feed-item { 
  padding: 25px;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--border-r-12);
    box-shadow: 0 10px 30px rgba(0,0,0,0.8);
  background: var(--card-bg);
  margin-bottom: 20px;
}
.review-feed-item:hover {border-color: var(--primary); box-shadow: 0 10px 30px rgba(184, 20, 102, 0.05);}
.review-top-left {display: flex; gap: 15px; align-items: center;}
.review-top-left h4 {margin: 0; font-size: var(--text-18); font-weight: 700; }
.review-top-left p {margin: 5px 0 0; font-size: var(--text-14); color: var(--gray-first); }

.circle-50 {width: 50px; height: 50px; min-width: 50px; min-height: 50px; border-radius: 50%; border: 1px solid var(--card-border); display: flex; align-items: center; justify-content: center; font-weight: 700;}
.circle-50 img {width: 100%; height: 100%; border-radius: 50%; object-fit: cover;}
.circle-60 {width: 60px; height: 60px; min-width: 60px; min-height: 60px; border-radius: 50%; border: 1px solid var(--card-border); display: flex; align-items: center; justify-content: center; font-weight: 700;}
.circle-60 img {width: 100%; height: 100%; border-radius: 50%; object-fit: cover;}
.circle-35 {width: 35px; height: 35px; min-width: 35px; min-height: 35px; border-radius: 50%; border: 1px solid var(--card-border); display: flex; align-items: center; justify-content: center; font-weight: 700;}
.circle-35 img {width: 100%; height: 100%; border-radius: 50%; object-fit: cover;}
.review-top {display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 15px;}
.review-content p {color: var(--gray-first); font-size: var(--base-text); line-height: 1.6; margin: 0 0 15px;}
.review-content p:last-child {margin-bottom: 0;}
.review-footer {display: flex; align-items: center; gap: 20px; border-top: 1px solid var(--card-border); padding-top: 15px; margin-top: 15px; font-size: var(--text-13); color: var(--gray-first);}

.common-card {
  background: var(--card-bg);
  padding: 25px;
  border-radius: var(--border-r-16);
  border: 1px solid var(--card-border);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}
.space-25 {padding: 25px;}
.common-card-header {padding: 20px 25px; border-bottom: 1px solid var(--card-border); display: flex; justify-content: space-between; align-items: center; gap: 10px;}
.common-card-title {margin: 0; font-weight: 800; text-transform: uppercase; font-size: var(--text-21); color: var(--white); display: flex; align-items: baseline; gap: 8px;}
.common-card-slogan {margin: 0;  font-size: var(--text-14); color: var(--gray-text); }
.title-link { font-size: var(--text-14); font-weight: 700;}
.event-cell {display: flex; align-items: center; padding: 15px; border: 1px solid var(--card-border);  border-radius: var(--border-r-12); margin-bottom: 15px;}
.event-date-square {width: 50px; height: 50px; min-width: 50px; min-height: 50px;  background: var(--bg-surface); border-radius: var(--border-r-8); color: #fff; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;  line-height: 1; border: 1px solid var(--card-border); gap: 0;}
.event-date-square p {font-size: var(--text-12); text-transform: uppercase; margin: 0; width: 100%; text-align: center;  }
.event-date-square h4 {font-size: var(--text-18); margin:0; font-weight: 700; width: 100%; text-align: center;}
.event-mid-part {flex: 1; margin-left: 15px;}
.event-mid-part h3 {margin: 0; font-size: var(--base-text); font-weight: 600; color: var(--white);}
.event-mid-part p {margin: 4px 0 0; font-size: var(--text-13); color: var(--gray-text);}
.text-green {color: #10b981 !important;}
.text-white {color: var(--white) !important;}
.text-yellow, .stat-card h3.text-yellow {color: #f59e0b;}
.text-alert  {color: var(--alert);}
.text-primary  {color: var(--primary) !important;}
.event-right-part h4 {font-weight: 700; margin: 0; font-size: var(--base-text); color: var(--white);}
.event-right-part p {margin: 4px 0 0; font-size: var(--text-12); color: var(--gray-text);}
.active-cell {background-color: var(--bg-dark);}
.watchlist-cell {display: flex; gap: 12px; margin-bottom: 20px; align-items: center;}
.watchlist-cell:last-child {margin-bottom: 0;}
.watchlist-info {flex: 1; }
.watchlist-info h4 {font-size: var(--text-14); font-weight: 700; color: var(--white); margin: 0;}
.watchlist-info p {font-size: var(--text-12); margin: 5px 0 0; font-weight: 600; } 
.watchlist-info .arrow {color: var(--gray-text); font-size: var(--text-13);} 
select.table-form-control {width: auto; padding: 7px 15px; height: 40px; min-width: 185px;}
.common-table thead th {font-size: var(--text-12); color: var(--gray-first); text-transform: uppercase; border-bottom: 1px solid var(--card-border); background: var(--dark); padding: 15px 20px;}
.common-table thead tr th:first-child {border-radius: var(--border-r-16) 0 0;}
.common-table thead tr th:last-child {border-radius:0 var(--border-r-16) 0 0;}
.common-table tbody td {font-size: var(--text-14); color: var(--white); border-bottom: 1px solid var(--card-border); background:transparent; padding: 15px 20px;}
.common-table h4 {font-size: var(--base-text); font-weight: 700; color: var(--white); margin: 0;}
.common-table p {font-size: var(--text-13);  color: var(--gray-first); margin: 0;}
.status  {
  padding: 4px 10px; border-radius: var(--border-r-20); font-size: var(--text-12); font-weight: 700;  display: inline-block; text-transform: uppercase;
}
.status.completed {background-color: #1b2922; color: #059669;}
.status.pending {background-color: #29231b; color: #f59e0b;}
.status.blue {background-color: #1b2229; color: #154bde;}
.status.purple {background-color: #251b29; color: #8829d6;}
.status.primary {background-color: var(--primary-10); color: var(--primary);}
.status.primary-fill {background-color: var(--primary); color: var(--white);}
.status.cancel {background-color: #291b1b; color: var(--alert);}
.status.dark  {background: var(--dark); color: var(--gray-text);}
/* .status.round-4 {border-radius: var(--border-r-4);} */
.table-price {font-size: var(--base-text); font-weight: 700;  margin: 0;}
.pagination {gap: 10px; margin-top: 50px;}
.pagination .page-link {
  color: var(--gray-first);
  display:flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--border-r-6);
  border: 1px solid var(--card-border);
  color: var(--gray-first);
  background-color: transparent;
  min-width: 32px;
  height: 32px;
  padding: 0;
  box-shadow: none;
  outline: none;
}
.pagination .page-item.active .page-link {background-color: var(--primary); border-color: var(--primary); color: #fff;}
.messages-container { display: flex; height: calc(100vh - 160px);   border-radius: var(--border-r-16);border: 1px solid var(--card-border);overflow: hidden; box-shadow: 0 10px 25px rgba(0,0,0,0.05);  
  box-shadow: 0 10px 30px rgba(0,0,0,0.8);
  background: var(--card-bg);
}
.inbox-panel {width: 380px; border-right: 1px solid var(--card-border); display: flex; flex-direction: column; }
.msg-left-header {padding: 20px; border-bottom: 1px solid var(--card-border);}
.msg-left-header h1 {font-family: var(--font-head); font-size: var(--text-22); margin: 0 0 15px 0; font-weight: 700;}
.msg-search {position: relative;}
.msg-search i {position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--dark-gray-text); font-size: var(--text-14);}
.msg-search .form-control {width: 100%; padding: 10px 10px 10px 40px; border: 1px solid var(--card-border); border-radius: var(--border-r-6);  outline: none; background: var(--card-bg); color: var(--white); height: 40px;}
.msg-list {overflow-y: auto; flex: 1;}
.msg-item {padding: 20px; display: flex; gap: 12px; cursor: pointer; background: transparent; border-bottom: 1px solid var(--card-border); align-items: center; border-left: 4px solid transparent;}
.msg-item.active {padding: 20px; display: flex; gap: 12px; cursor: pointer; background: var(--bg-dark); border-bottom: 1px solid var(--card-border); align-items: center; border-left: 4px solid var(--primary);}
.msg-item-content {flex: 1; width: calc(100% - 70px);}
.msg-item-top {display: flex; justify-content: space-between; margin-bottom: 4px; gap: 5px; align-items: center;}
.msg-item-top h4 {font-size: var(--base-text); font-weight: 700; margin: 0; color: var(--white);  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.msg-item-top p {font-size: var(--text-12); color: var(--gray-first); margin: 0;}

.msg-item-bottom p {margin: 0; font-size: var(--text-14); color: var(--gray-first); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.chat-list {
  /* max-height: calc(100vh - 100px); */
  overflow: auto;
  max-height: 100vh;
}

.chat-window {flex: 1; display: flex; flex-direction: column;}
.chat-right-header {padding: 18px 20px; border-bottom: 1px solid var(--card-border); display: flex; justify-content: space-between; align-items: center;}
.chat-header-left {display: flex; align-items: center; gap: 10px;}
.chat-header-left h3 {margin: 0; font-weight: 700; font-size: var(--text-18);font-family: var(--font-head);}
.inner-dropdown .dropdown-toggle::after {display: none;}
.inner-dropdown .dropdown-toggle {color:var(--base-color); font-size: var(--text-14); }
.message-feed {flex: 1; padding: 20px; overflow-y: auto; background: var(--bg-dark);display: flex; flex-direction: column; gap: 20px;}
.msg-devider {display: flex; align-items: center; justify-content: center; margin: 10px 0;}
.devider-hr {flex: 1; height: 1px; background: var(--card-border); }
.devider-text {padding: 0 10px; font-size: var(--text-12); font-weight: 700; color: var(--gray-text); text-transform: uppercase; letter-spacing: 1px;}
.other-chat {max-width: 75%; display: flex; gap: 12px;}
.other-chat-bubble {background: var(--card-bg); padding: 14px 18px; border-radius: 0 var(--border-r-16) var(--border-r-16) var(--border-r-16); border: 1px solid var(--card-border); }
.other-chat-bubble p {margin: 0 0 10px 0; font-size: var(--text-15); color: var(--white);}
.other-chat-bubble p:last-child {margin-bottom: 0;} 
.msg-time {font-size: var(--text-11); color: var(--gray-text); margin-top: 6px; display: block;}
.my-chat {max-width: 70%; align-self: flex-end; display: flex; flex-direction: column; align-items: flex-end;}
.my-chat-bubble {background-color: var(--primary); padding: 14px 18px; border-radius: var(--border-r-16) var(--border-r-16) 0 var(--border-r-16);   }

.my-chat-bubble p {margin: 0 0 10px 0; font-size: var(--text-15); color: var(--white);}
.my-chat-bubble p:last-child {margin-bottom: 0;} 
.message-form {padding: 15px 20px; border-top: 1px solid var(--card-border); background: var(--bg-dark);}
.message-form .form-control {flex: 1; background: var(--card-bg);  border-color: var(--card-border);  padding: 10px 65px 10px 15px; height: 64px; border-radius: var(--border-r-12);}
.message-form .msg-btn {background: var(--primary); border: none; width: 42px; height: 42px; border-radius: 50%; color: var(--white); cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 10px rgba(184, 20, 102, 0.2); font-size: var(--text-14); position: absolute; right: 15px; top: 10px;} 
.message-form .msg-btn:hover, .message-form .msg-btn:focus {background-color: var(--primary-dark);}
.message-form .form-group { position: relative; margin: 0;}




.review-top-grid {
  display: grid;
  grid-template-columns: 2fr 2fr;
  gap: 30px;

}
.review-progress {border-right: 1px solid var(--card-border); padding-right: 30px;}
.review-progress  h4 {
  font-size: var(--text-14);
  font-weight: 700;
  margin: 0 0 10px;
  color: var(--white);
}
.progress-wrapper {margin-top: 20px;}
.progress-block {display: flex; align-items: center; gap: 10px; margin-bottom: 8px;}
.progress-block:last-child {margin-bottom: 0;}
.progress-block .progress {margin-bottom: 0; width: 100%; height: 8px;background-color: var(--gray-fourth);}
.progress-value {font-size:var(--text-13);  color: var(--gray-text); white-space: nowrap; }
.progress-block .progress .bg-success {color: #10b981;}
.settings-main .common-card { margin-bottom: 30px;}
.settings-main .common-card:last-child {margin-bottom: 0;} 
.notification-item {display: flex; justify-content: space-between; align-items: center; padding: 0 0 15px; margin-bottom: 15px; border-bottom: 1px solid var(--card-border);}
.notification-item:last-child {border-bottom: none; padding-bottom: 0; margin-bottom: 0;} 
.notification-info h4  {font-size: var(--base-text); font-weight: 600; margin: 0; color: var(--white);}
.notification-info p  {font-size: var(--text-14);  margin: 4px 0 0; color: var(--gray-text);}

.switch {
            position: relative;
            display: inline-block;
            width: 44px;
            height: 22px;
        }

        .switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }

       .switch  .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: var(--gray-fourth);
            transition: .4s;
            border-radius: 34px;
        }

        .switch .slider:before {
            position: absolute;
            content: "";
            height: 16px;
            width: 16px;
            left: 3px;
            bottom: 3px;
            background-color: var(--white);
            transition: .4s;
            border-radius: 50%;
        }

        .switch input:checked+.slider {
            background-color: var(--primary);
        }

        .switch input:checked+.slider:before {
            transform: translateX(22px);
        }

.alert-bg {background-color:  rgba(71, 5, 5, 0.2)}
.account-card h4 {font-size: var(--base-text); font-weight: 700; margin: 0;}
.account-card p {font-size: var(--text-13);  margin: 5px 0 0; color: var(--gray-text);}
.account-card .btn {margin-top: 20px;}
.reply-form {position: relative;}
.reply-form .btn {position: absolute; right: 15px; top:25px; border-radius: 50px; }
.reply-form .form-control {padding-right: 120px;}
.review-comment {background: var(--bg-dark);border: 1px solid var(--card-border); padding: 20px;border-radius: var(--border-r-12); }
.review-comment-value { margin-left: 65px;}
.review-comment-info p {font-size: var(--base-text); color: var(--gray-text); margin-bottom: 10px;}
.review-comment-info p:last-child {margin-bottom: 0;}
.filter-view-more {
  width: 100%;
}
select option {
    background-color: #000;
}
.filter-view-more {font-weight: 700;}
.filter-view-more a:hover {text-decoration: underline;}
.total-events h3 {margin: 0; color: var(--white); font-weight: 400; font-size: var(--text-18);}
.total-events h3 span {font-weight: 700; color: var(--primary);}
.common-tabs {gap: 30px; border-bottom-color: transparent;}
.common-tabs .nav-link {
  padding: 15px 0 12px;
  font-size: var(--text-18);
  color: var(--gray-text);
  background-color:transparent;
  border: none;
  outline: none;
  box-shadow: none;
  position: relative;
  text-transform: uppercase;
  font-weight: 600;
  border-bottom: 3px solid transparent;
  margin-bottom: 30px;
}

.common-tabs .nav-link.active {border-bottom-color: var(--primary); color: var(--primary); background-color: transparent;}
.booking-card-left {
  display: flex;
  align-items: center;
  gap: 25px;
  flex: 2;
}

.booking-card-main {
  display: flex !important;
}

.square-70 {
    width: 70px;
    height: 70px;
    min-width: 70px;
    min-height: 70px;
   background: var(--primary-10);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-r-10);
    font-size: var(--text-18);
}
.square-32 {
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
   background: var(--primary-10);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-r-10);
    font-size: var(--text-14);
}
.square-85 {
    width: 85px;
    height: 85px;
    min-width: 85px;
    min-height: 85px;
   background: var(--primary-10);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-r-10);
    font-size: var(--text-18);
}
.square-48 {
    width: 48px;
    height: 48px;
    min-width: 48px;
    min-height: 48px;
    background: var(--primary-10);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-r-10);
    font-size: var(--text-18);
    flex-wrap: wrap;
}
.booking-card-left .square-70 {padding-top: 6px;}
.date-square .day {font-size: var(--text-32); font-weight: 600; line-height: 1; width: 100%; font-family: var(--font-head);}
.date-square .month {font-size: var(--text-22); font-weight: 500; width: 100%; font-family: var(--font-head);}
.date-square-md .day {font-size: var(--text-18); font-weight: 600; line-height: 1; width: 100%; font-family: var(--font-head); width: 100%; text-align: center;}
.date-square-md .month {font-size: var(--text-14); font-weight: 500; width: 100%; font-family: var(--font-head); width: 100%; text-align: center;}
.booking-event-info h3 {font-size: var(--text-22); margin: 0 0 10px; font-weight: 800; color: var(--white); } 
.booking-event-info p {margin-bottom: 5px; font-size: var(--text-14);
  color: var(--gray-first);}
.booking-event-info p:last-child {margin-bottom: 0;}
.booking-card-center {text-align: right;}
.booking-card-center h2 {font-size: var(--text-35); font-weight: 800; color: var(--white); font-family: var(--font-head); margin: 0;}

.booking-card-center .status {margin-top: 10px;}
.booking-card-right {display: flex; gap: 12px; flex-direction: column; padding-left: 20px; border-left: 1px solid var(--card-border);}

.booking-card-performer:hover  {border-color: var(--primary);}

.booking-card-list .booking-card-performer {margin-bottom: 30px;}
.booking-card-list .booking-card-performer:last-child {margin-bottom: 0;}
.booking-cancel {opacity: 0.5;}
.booking-cancel h3, .booking-cancel h2 {text-decoration: line-through; }


.persona-card {
  border-width: 2px;
  border-radius: var(--border-r-24);
   width: 100%; 
  padding: 25px 20px;
  transition: all 0.4s ease;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  position: relative;
  height: 100%;
  min-height: 260px;
}

.persona-card:hover {
  border-color: var(--primary);
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(184, 20, 102, 0.08);
}


.add-role-card {
  border: 2px dashed var(--card-border);
  border-radius: var(--border-r-24);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: 0.3s;
  text-decoration: none;
  width: 100%; 
  height: 100%;
    min-height: 260px;
 
}

.add-role-card:hover {
  border-color: var(--primary);
  background: var(--bg-dark);
  border-color: var(--primary);
  color: var(--primary);
}
.add-role-icon-circle {width: 80px;
  height: 80px;
  border: 2px dashed var(--card-border);
   color: var(--gray-text);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 15px;
  transition: 0.3s;}
.add-role-icon-circle i {font-size: var(--text-24); }
.add-role-card h2{
            font-family: var(--font-head); 
            font-size: var(--text-18); 
            text-transform: uppercase; 
            font-weight: 700;
            color: var(--gray-text);
            margin: 0;
            letter-spacing: 1px;}


.persona-icon-circle {border: none; background-color: var(--primary-10); font-size: var(--text-40);}

.persona-title {
  font-family: var(--font-head);
  font-size: var(--text-32);
  color: var(--white);
  margin-bottom: 0;
  text-transform: uppercase;
}
.real-name {font-size: var(--text-18); font-weight: 600; margin: 0;}


.status-toggle-wrapper {
  margin-top: 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding-top: 15px;
  border-top: 1px solid var(--card-border);
  width: 100%;
}
.profile-modal-main {padding: 0; background-color: var(--card-bg);}
.pd-left {padding: 35px;}
.pd-left h2 {font-family: var(--font-head); font-size: var(--text-32); margin: 20px 0 0;  color: var(--white);}
.pd-left .pd-address {color: var(--gray-text); font-size: 1.1rem; margin:10px 0 0;}
.pd-date-block {display: flex;justify-content: space-between; gap: 20px; margin-top: 30px;}
.pd-date-block label {display: block; font-size: var(--text-12); font-weight: 800; text-transform: uppercase; color: var(--dark-gray-text);}
.pd-date-block p.value {display: block; font-size: var(--base-text); color: var(--white); font-weight: 600; text-transform: uppercase; margin: 4px 0 0;}
.pd-date-block p {display: block; font-size: var(--base-text); color: var(--white); margin: 0px 0 10px;}
.pd-date-block p:last-child {margin-bottom: 0;}
.pd-date-block .Description {display: block; font-size: var(--text-12); font-weight: 800; text-transform: uppercase; color: var(--dark-gray-text);}
.modal-content {box-shadow: 0 0 30px rgba(255,255,255,0.2);}
.profile-right-info {background-color: var(--bg-dark); border-left: 1px solid var(--card-border); padding: 35px;}
.profile-right-info h3 {font-family: var(--font-head); font-size: var(--text-18); margin-bottom: 20px; color: var(--white); font-weight: 700;}

.financial-summary {padding: 20px; margin-bottom: 20px;}
.financial-summary p {font-size: var(--text-13); margin: 0;color: var(--dark-gray-text);}
.financial-summary h4 {font-family: var(--font-head); font-size: var(--text-32); font-weight: 700; color:var(--white); margin: 5px 0 0;}
.check-row {font-size: var(--text-14); padding: 0; margin: 0; list-style-type: none;}
.check-row li {margin-bottom: 10px; display: flex; gap: 8px; align-items: baseline; color: var(--dark-gray-text); padding: 0;}

.modal-title-lg {font-family: var(--font-head);
  font-size:var(--text-35);
  margin: 0;}

.common-modal-lg .modal-header {padding: 25px 35px;}
.common-modal-lg .modal-body {padding: 30px 35px;}
.common-modal-lg .modal-footer {padding: 25px 35px;}
.pic-buttons {background-color: rgba(0, 0, 0, 0.7); width: 100%; height: 100%; position: absolute; left: 0; top: 0; display: flex; align-items: center; justify-content: center;}
.profile-action {position: relative; overflow: hidden; border-radius: 50%;}
.pic-buttons {display: flex; gap: 6px; align-items: center; opacity: 0;}
.edit-pic-btn {font-size: var(--text-18); color: var(--white); padding: 4px;}
.delete-pic-btn, .delete-pic-btn:hover, .delete-pic-btn:focus   {color: var(--alert);font-size: var(--text-18); padding: 4px;}
.custom-file {display: inline-block; position: relative; overflow: hidden; cursor: pointer;}
.custom-file input[type="file"] {position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer;}

.profile-action:hover .pic-buttons {opacity: 1;}

.private-note {font-size: var(--text-14); color: var(--primary); font-weight: 600; margin: 0;}
.profile-card .common-card-header {background-color: var(--primary-10);}
.profile-left h1 {
    font-family: var(--font-head);
    font-size: var(--text-64);
    color: var(--white);
    margin-bottom: 0;
}
.profile-left h3 {
    font-size: var(--text-32);
    color: var(--white);
    margin: 0px;
}
.profile-left h4 {
    font-size: var(--text-22);
    color: var(--white);
    margin: 5px 0 0;
}
.icon-wrapper {display: flex; align-items: center; gap: 15px; flex-wrap: wrap; margin-top: 15px;}
.second-tag {
  background: var(--primary-10);
  color: var(--primary);
  padding: 6px 16px;
  border-radius: 50px;
  font-size: var(--text-14);
  font-weight: 600;
  border: 1px solid var(--primary-10);
}

.second-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 15px;
}

.second-tag h5 {margin: 0; font-weight: 700; font-size: var(--base-text);}
.second-tag h5 span {font-weight: 400; font-size: var(--text-13);}
.profile-top-right {text-align: right;}
.welcome-card {background-color: var(--white); color: var(--dark-first);}
.welcome-card h2 {font-family: var(--font-head); font-size: var(--text-28); margin: 0; font-weight: 700;}
.welcome-card p {margin: 8px 0 0; color: var(--base-text); font-size: var(--text-15);}

.started-cell {display: flex; align-items: start; gap: 15px; margin-bottom: 30px; opacity: 0.7;}
.started-cell:last-child {margin-bottom: 0;} 
.started-circle {width: 36px; height: 36px; min-width: 36px; min-height: 36px; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: var(--base-text); border: 1px solid var(--card-border); color: var(--gray-text); border-radius: 50%; position: relative;}
.started-cell h4 {font-size: var(--base-text); font-weight: 700; margin: 0;}
.started-cell p {font-size: var(--text-14);  margin: 3px 0 0; color: var(--gray-text);}
.verified-cell.started-cell h4, .verified-cell.started-cell p {opacity: 0.5;}

.verified-cell.started-cell .started-circle {color: var(--success); background-color: var(--success-15); border-color: var(--success-15);}
.verified-cell.started-cell .started-circle::after  {content: "\f058"; font-family: var(--fa-family-classic); font-size: var(--base-text); position: absolute;
  right: -3px;
  bottom: -7px;
}
.current-cell.started-cell {opacity: 1;}
.current-cell.started-cell h4 {color: var(--white);}
.current-cell.started-cell .started-circle {color: var(--primary); background-color: var(--primary-10); border-color: var(--primary); border: 2px dashed;}

.hbw-cell {display: flex; align-items: start; gap: 15px; margin-bottom: 30px; opacity: 0.7;}
.hbw-cell:last-child {margin-bottom: 0;} 

.hbw-cell h4 {font-size: var(--text-14); font-weight: 700; margin: 0;}
.hbw-cell p {font-size: var(--text-13);  margin: 3px 0 0; color: var(--gray-text);}
.hbw-icon {font-size: var(--text-19); color: var(--gray-text);}

.db-contact-card {
  color: var(--gray-second);
  border: 1px solid rgba(255,255,255,0.08);
  padding: 10px 20px;
  border-radius: var(--border-r-12);
  background-color: var(--dark-gray-third);
  margin-top: 15px;
}
.db-contact-card p {margin: 0 0 10px 0; font-size: var(--text-13); color: var(--gray-text); font-weight: 600;}
.vi-block {display: flex; gap: 16px; align-items: center; background-color:var(--dark); padding: 20px; border: 1px solid var(--card-border); border-radius: 12px;}
.profile-belt {padding: 25px; display: flex; gap: 15px; flex-direction: column;}
.vi-block h4 {margin: 0 0 2px 0; font-size: var(--base-text); color: var(--white); font-weight: 700;}
.vi-block p {margin: 0; font-size:var(--text-13); color: var(--gray-text); line-height: 1.4;}


.block-icon-44 {
  background: #172a36;
  color: #0284c7;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-19);
  flex-shrink: 0;
}
.feature-icon-44 {
  background: var(--primary-10);
  color: var(--primary);
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-19);
  flex-shrink: 0;
}
.vi-right {display: flex; gap: 12px; align-items: center; flex-shrink: 0;}
.vi-midd-info {display: flex; align-items: center; justify-content: space-between; flex: 1; gap: 20px;}
.small-blue-btn {background: #0284c7;  color: var(--white);  border: none;  padding: 6px 14px;  border-radius: var(--border-r-4); font-weight: 700;  font-size: var(--text-13);  box-shadow: 0 4px 10px rgba(2, 132, 199, 0.15); border: none; outline: none;}
.small-blue-btn:hover, .small-blue-btn:focus {background: #0284c7;  color: var(--white); border: none; transform: scale(1.05);}

.feature-profile-panel {display: flex; gap: 16px; align-items: center; background-color:var(--dark); padding: 20px; border: 1px solid var(--card-border); border-radius: 12px; position: relative;}

.feature-profile-panel::before {position: absolute; top: -50px; right: -50px; width: 150px; height: 150px; background: var(--primary); opacity: 0.15; border-radius: 50%; filter: blur(30px); pointer-events: none;}
.feature-info-main {display: flex; gap: 20px; align-items: center; justify-content: space-between; flex-wrap: wrap; width: 100%;}
.feature-left {display: flex; gap: 16px; align-items: center; flex: 1; min-width: 280px;}
.feature-left h4 {margin: 0; font-size: var(--base-text); color: var(--white); font-weight: 700; }
.feature-left p {margin: 5px 0 0 0; font-size:var(--text-14); color: var(--gray-text); line-height: 1.4;}
.feature-btn {	background: linear-gradient(135deg, var(--primary) 0%, #9d174d 100%);  color: var(--white);  border: none;  padding: 12px 24px;  border-radius: var(--border-r-8);  font-weight: 700;  font-size: var(--text-15);  box-shadow: 0 4px 15px rgba(184, 20, 102, 0.25); display: inline-flex; align-items: center; gap: 8px; transition: transform 0.2s;}
.feature-btn:hover, .feature-btn:focus {color: var(--white);transform: scale(1.05);}
.feature-right {display: flex; align-items: center; flex-shrink: 0;}
.inner-section-header {display: flex; align-items: center; justify-content: space-between; margin-bottom: 15px;}
.inner-section-header h3 {font-family: var(--font-head); font-size: var(--text-28); margin-bottom: 15px; font-weight: 800; margin: 0; color: var(--white);}
.profile-sections {margin-top: 30px;}
.profile-section-inner {margin: 0 28px 40px; border-bottom: 1px solid var(--card-border); padding-bottom: 30px;}
.profile-section-inner:last-child {border-bottom: none; padding-bottom: 0; margin-bottom: 0;}
.empty-prompt {
  text-align: center;
  padding: 20px 10px;
  border: 2px dashed var(--gray-fourth);
  border-radius: var(--border-r-12);
  transition: 0.3s;
}

.empty-prompt p {
  font-size: var(--text-14);
  color: var(--gray-text);
  margin-bottom: 15px;
}
.add-gallery {
  border: 2px dashed var(--card-border);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 250px;
  min-height: 250px;
  cursor: pointer;
  transition: 0.3s;
  background: transparent;
  text-align: center;
}
.add-gallery:hover {border-color: var(--primary); background-color: var(--primary-10);}
.browse-info i {font-size:var(--text-40); color: var(--primary); margin-bottom: 10px;}
.browse-info h4 {font-size:var(--base-text); font-weight: 600; margin: 0; }
.input-group-text {background-color: transparent; border-color: var(--field-border); border-width: 2px; color: var(--gray-text); font-size: var(--text-14);}
.focus-checkbox-grid {display: grid; 
        grid-template-columns: repeat(auto-fill, minmax(47%, 1fr)); 
        gap: 10px; 
        padding: 20px; 
        border-radius: var(--border-r-12); 
        }
.about-content p {font-size: var(--base-text);}
.contact-info-block {display: flex;
  align-items: center;
  gap: 12px;}
.contact-info-block i {min-width: 20px; font-size: var(--text-21); color: var(--primary);}
.contact-right-info h4 {margin: 0; font-size:var(--text-12); color: var(--gray-text); text-transform: uppercase; font-weight: 700;}
.contact-right-info p {margin: 0; margin: 0;font-weight: 600;font-size: var(--text-15); color: var(--white);}

.gallery-item {position: relative; border-radius: var(--border-r-16); overflow: hidden; width: 250px; height: 250px;}
.gallery-item:hover .media-overlay {opacity: 1;}
.gallery-img {width: 100%; height: 100%; object-fit: cover;}
.media-overlay {position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(124, 58, 237,0.50); padding: 15px; display: flex; justify-content: end; opacity: 0;}
.media-overlay .delete-media {width: 35px; height: 35px; background-color: var(--white); border: 1px solid var(--gray-first); border-radius: var(--border-r-8); padding: 0; margin: 0; outline: none; display: flex; align-items: center; justify-content: center; font-size: var(--base-text); color: var(--alert);}

.close-profile {
  width: 35px;
  height: 35px;
  position: absolute;
  right: -7px;
  top: -10px;
  background-color: var(--card-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--card-border);
  font-size: var(--text-14);
  color: var(--alert);
  z-index: 2;
}

.faq-btns {display: flex; align-items: center; gap: 12px;padding-right: 20px;}
.faq-btn-block {display: flex; align-items: center; gap: 15px; }


.faq-btn {color: var(--gray-text);  font-size: 14px; display: inline-block;}
.faq-btn.delete-qtn {color: var(--alert);}

.profile-img-block {display: flex; gap: 10px; align-items: center;}
.profile-promoter-info h1 {line-height: 1;}
.profile-promoter-info h4 {line-height: 1; margin-top: 0;}


.banner-browse {
  border: 2px dashed var(--card-border);
  border-radius: var(--border-r-16);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 130px;
  cursor: pointer;
  transition: 0.3s;
  background: transparent;
  text-align: center;
}
.banner-browse:hover {border-color: var(--primary); background-color: var(--primary-10);}
.banner-browse-info i {font-size:var(--text-32); color: var(--primary); margin-bottom: 8px;}
.banner-browse-info h4 {font-size:var(--text-14); font-weight: 700; margin: 0; color: var(--white);}
.banner-browse-info p {font-size:var(--text-12); margin: 4px 0 0; }
.common-filter .form-control {height: 40px; padding-top: 4px; padding-bottom: 4px;}
.filter-search {position: relative;}
.filter-search .form-control {padding-left: 40px;}
.filter-search i {position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--gray-text); font-size: var(--text-14); pointer-events: none;}

.event-card-center {display: flex; align-items: center; justify-content: center; gap:30px; flex-wrap: wrap;}
.event-card-center .event-center-info h3  {font-size:var(--text-24); font-weight: 900; color: var(--white); display: block; line-height: 1; margin: 0; text-align: center; text-align: center;}
.event-card-center .event-center-info p  {font-size: var(--text-12); color: var(--gray-text); font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; margin: 4px 0 0; text-align: center;}
.event-toggle-wrapper {display: flex; gap: 8px; align-items: center; flex-wrap: wrap;}
.event-toggle-wrapper .status-text {font-size: var(--text-12);}
.event-action {display: flex; align-items: center; gap: 8px;}
.event-card-right {display: flex; flex-wrap: wrap; align-items: center; gap: 15px; justify-content: end;}
.event-card-right h5 {font-size: var(--text-14); font-weight: 700; color: var(--gray-text); text-transform: uppercase; letter-spacing: 0.5px; user-select: none; margin: 0;}
.card-table .common-table tbody tr:last-child td {border-bottom: none;}
.table-profile-block {display: flex; gap: 10px; align-items: center; min-width: 300px; max-width: 300px; white-space: nowrap;} 

.table-action {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.db-search-card .icon-lg {color: var(--primary); font-size: var(--text-28); margin-bottom: 10px;}
.db-search-card h4 {margin: 0 0 8px 0; text-transform: uppercase; font-weight: 800; font-size:var(--text-19); color: var(--white);}
.db-search-card p {margin: 0 0 20px 0; font-size: var(--text-14); color: var(--gray-text);   }
.inline-radio {display: flex; gap: 15px; align-items: center; flex-wrap: wrap;}
.form-check-input[type="radio"] {border: 1px solid var(--field-border); background-color: transparent;}
.form-check-input:checked[type="radio"] {border-color: var(--primary); --bs-form-check-bg-image:none; display: flex; align-items: center; justify-content: center;}
.form-check-input:checked[type="radio"]:before {content: ""; width: 10px; height: 10px; background-image: none; border-radius: 50%; background-color: var(--primary); display: block;}
.form-check-input:focus {box-shadow: none; outline: none;}
.form-block {
  background-color: rgba(124, 58, 237, 0.10);
  padding: 20px;
  border-radius: var(--border-r-12);
  border: 1px dashed var(--primary);
  
}
.form-section-head {margin-bottom: 10px;}
.form-section-head h4 {margin: 0; font-size: var(--base-text); font-weight: 700; color: var(--white);}
.form-section-head p {margin: 4px 0 0; font-size: var(--text-13); font-weight: 700; color: var(--gray-text);}
.primary-note {margin: 2px 0 0 0; font-size: var(--text-13); color: var(--gray-text);  }
.search-card-top {
  width: 100%;
  height: 110px;

  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--card-border);
}

.search-card-top i {
  font-size: var(--text-35);
}
.search-card-top.first-belt {  background-color: rgb(59, 130, 246, 0.10);   color: #3b82f6;}
.search-card-top.second-belt {background-color: rgb(5, 150, 105, 0.10); color: #059669;}
.card-icon-block {  margin-top: 10px;}
.card-icon-block p {margin-top: 4px; color: var(--gray-text);}
.card-time-block {margin:15px 0 25px;border: 1px solid var(--card-border);   background: var(--card-border); border-radius: var(--border-r-8); padding: 10px 12px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 5px;}
.card-time-block p {font-size: var(--text-14); gap: 4px; margin: 0; font-weight: 500;}
.hrs-label {background: var(--bg-dark); color: var(--white); padding: 2px 8px; border-radius:var(--border-r-4); font-weight: 700; font-size: var(--text-12);}
.table-profile-link {font-weight: 700; font-size: var(--text-13);}

.table-action-switch {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  justify-content: start;
}



.no-data-card {
        border-radius: var(--border-r-20);
        padding: 60px 40px;
        text-align: center;
        max-width: 680px;
        margin: 40px auto;
        box-shadow: 0 4px 20px rgba(15, 23, 42, 0.02);
        background: var(--card-bg);
        border-radius: var(--border-r-16);
        border: 1px solid var(--card-border);
}

.no-data-card .circle-80 {border-color: var(--primary-10); background-color: var(--primary-10); color: var(--primary); font-size: var(--text-35);}
.no-data-card h2 {font-family: var(--font-head); font-size:var(--text-28); font-weight: 800; color: var(--white); margin: 24px 0 0px 0; }
.no-data-card p {font-size:var(--text-15); color: var(--gray-text); line-height: 1.6; margin: 12px 0 0 0; max-width: 480px;}
.no-data-card .btn-apply {margin-top: 30px;}
.vf-note {font-size: var(--text-14); color: var(--gray-text);}
.vf-note:last-child {margin: 0;}
.form-highlight {padding: 20px;}
.doc-browse {min-height: 145px;}
.inner-event-banner {position: relative; min-height: 266px; display: flex; align-items: center; justify-content: center; border-radius: var(--border-r-20); overflow: hidden; margin-bottom: 30px;}
.banner-img {position: absolute; width: 100%; height: 100%; left: 0; top: 0;}
.banner-img img {width: 100%; height: 100%; object-fit: cover;}
.banner-img::before {content: ""; background: linear-gradient(to right, rgba(15, 23, 42, 0.95) 35%, rgba(15, 23, 42, 0.4) 100%); position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
.event-banner-content {display: flex; gap: 30px; align-items: center; flex-wrap: wrap; position: relative; z-index: 2; width: 100%; padding: 30px;}
.event-banner-content h1 {margin: 0; font-size: var(--text-45); font-weight: 900; font-family: var(--font-head); letter-spacing: -0.5px; line-height: 1.1; text-shadow: 0 2px 12px rgba(0,0,0,0.4); color: var(--white);}
.eb-info {flex: 1; min-width: 280px;}
.banner-icon-block {margin: 10px 0 0; font-size: var(--text-18); color: var(--gray-text); display: flex; align-items: center; gap: 24px; flex-wrap: wrap;}
.banner-icon {display: flex; align-items: center; gap: 8px; text-shadow: 0 1px 4px rgba(0,0,0,0.4);}
.about-card p {font-size: var(--text-15); color: var(--gray-text);}
.about-card p:last-child {margin-bottom: 0;}
.event-details .common-card {margin-bottom: 30px;}
.host-card h4 {font-size: var(--base-text); font-weight: 700; color: var(--white); margin: 15px 0 0;}
.host-card p {font-size: var(--text-14);  color: var(--gray-text); margin: 5px 0 0;}

.ov-info p { font-size: var(--text-12); color: var(--gray-text); font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; margin: 0 0 4px;}
.ov-info h5 {font-size: var(--text-14); font-weight: 600; color: var(--white); margin: 0;}
.ov-info h6 {font-size: var(--text-13); font-weight: 400; color: var(--white); margin: 4px 0 0;}
.overview-cell {display: flex; gap: 10px; align-items: start; margin-bottom: 14px;}
.overview-cell:last-child {margin-bottom: 0;}
.protect-square {background-color: #272e32; color: #0284c7;}
.fund-note {background: var(--bg-dark); padding: 10px 12px; border-radius: var(--border-r-8); font-size: var(--text-12); color: var(--gray-text); font-weight: 600; display: flex; gap: 6px; align-items: center;}
.event-detail-main {background-color: var(--bg-dark); padding-bottom: 0;}
.similar-section h2 {font-family: var(--font-head); font-size: var(--text-22); font-weight: 800; color: var(--white); margin: 0 0 20px 0; }
.cd-block {margin-left:1.5rem;}
.modal-header-icon {display: flex; align-items: center; gap: 10px;}
.modal-header-icon h5 {font-size: var(--text-18); font-weight: 700; margin: 0; color: var(--white);}
.modal-header-icon p {font-size: var(--text-12); font-weight: 700; margin: 0; color: var(--primary); text-transform: uppercase;}
.modal-header-icon p.book-id {font-weight: 400; margin: 0; color: var(--gray-text);}

.add-img {
  border: 2px dashed var(--card-border);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 170px;
  cursor: pointer;
  transition: 0.3s;
  background: transparent;
  text-align: center;
}
.add-img:hover {border-color: var(--primary); background-color: var(--primary-10);}
.browse-info i {font-size:var(--text-18); color: var(--primary);}
.browse-info h4 {font-size:var(--text-14); font-weight: 700; margin: 10px 0 0; }
.browse-info p {font-size:var(--text-12); color: var(--gray-text); margin: 5px 0 0; }
.add-img .circle-50 {background-color: var(--primary-10); border:none}
.overview-block {margin-bottom: 24px;}
.overview-block:last-child {margin-bottom: 0;}
.performance-slot h5 {font-size:var(--text-12); font-weight: 700; color: var(--primary); text-transform: uppercase; letter-spacing: 0.5px;  margin: 0px;}
.performance-slot h4 {margin: 4px 0 0px 0; font-size: var(--text-21); font-weight: 800; color: var(--white);}
.performance-slot p {margin: 8px 0 0; font-size: var(--text-14); color: var(--gray-text); font-weight: 500;}
.dtv-block h5 {font-size: var(--text-12); font-weight: 700; color: var(--gray-text); text-transform: uppercase; margin-bottom: 6px;}
.dtv-info-row {margin-bottom: 5px;}
.dtv-info-row:last-child {margin-bottom: 0;} 
.dtv-info {font-size: var(--text-14);  color: var(--gray-text); display: flex; align-items: center; gap: 6px; margin-bottom: 0;}
.dtv-info i {color:var(--gray-text)}
.dtv-info b {color: var(--white); font-weight: 600;}
.overview-block .common-card {padding: 20px;}
.modal-mid-size {max-width:600px;}
.booked-block {display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 20px;
  border-bottom: 1px dashed var(--card-border);}

.booked-block h5 {font-size: var(--text-12); font-weight: 700; color: var(--gray-text); text-transform: uppercase; margin: 0;}
.booked-block h4 {font-size: var(--text-15); font-weight: 800; color: var(--white); margin:4px 0 0 0;}
.payment-summary-block h4 {font-weight: 700; color: var(--white); font-size: var(--text-13); text-transform: uppercase; margin-bottom: 12px;}
.payment-row {display: flex; flex-direction: column; gap: 10px;}
.payment-cell {display: flex; justify-content: space-between; }
.payment-cell p {font-size: var(--text-14); color: var(--gray-text); margin: 0;}
.payment-cell h5 {font-size: var(--text-14); color: var(--white); margin: 0; font-weight: 600;}
.payment-total {display: flex; justify-content: space-between; align-items: center; padding-top: 12px; border-top: 1px solid var(--card-border);}
.payment-total h4 {font-size: var(--text-15); color: var(--white); margin: 0; font-weight: 800; text-transform: inherit;}
.payment-total h3 {font-size: var(--text-21); color: var(--primary); margin: 0; font-weight: 900}


.modal-header-second {display: flex; align-items: start; flex-direction: column; gap: 4px;}
.modal-header-second h3 {font-size: var(--text-21); font-weight: 700; margin: 4px 0 0; color: var(--white);}
.modal-header-second p {font-size: var(--text-14); margin: 0; color: var(--gray-text); }
.overview-block .overview-card {padding: 14px;}
.overview-card p {font-size: var(--text-11); font-weight: 700; color: var(--gray-text); text-transform: uppercase; margin: 0 0 4px 0;}
.overview-card h3 {font-size: var(--text-18); font-weight: 800; color: var(--white); margin: 4px 0 0; }
.dynamic-data-block h4 {font-size: var(--text-14); font-weight: 700; color: var(--white); margin: 0 0 10px; text-transform: uppercase;}
.dynamic-data-block p {font-size: var(--text-14); color: var(--gray-text); margin: 0 0 10px;}
.dynamic-data-block p:last-child {margin-bottom: 0;}
.dynamic-data-block ul {margin: 0; padding-left: 20px; font-size: var(--text-14); color: var(--gray-text); line-height: 1.7; font-weight: 400;}
.dynamic-data-block ul li {margin-bottom: 6px;}
.event-icon-block {display: flex; align-items: center; gap: 6px; font-size: var(--text-14); font-weight: 500; color: var(--gray-text); margin: 0;}
.job-event-info h4 {text-align: right; font-size: var(--text-14); font-weight: 700; color: var(--white); margin: 0;}
.overview-block .job-event-info {padding: 14px;}
.job-event-row {margin-bottom: 10px;}
.job-event-row:last-child {margin-bottom: 0;}

.table-price span {font-weight: 400;color: var(--gray-text); font-size: var(--text-14);}
.table-ratings {display: flex; align-items: center; gap: 4px; font-size: var(--text-14); font-weight: 700; color: var(--white);}
.table-ratings i {color: var(--ratings); font-size: var(--text-13);}
.table-ratings .r-count {font-weight: 400;color: var(--gray-text); font-size: var(--text-13);}
.fav-btn {width: 33px; height: 33px; border-radius: var(--border-r-6); font-size: var(--text-14); background-color: var(--primary-10); border:1px solid var(--primary); color: var(--primary); display: flex; align-items: center; justify-content: center; padding: 4px 0 0;}
.fav-btn:hover, .fav-btn:focus {background-color: var(--primary-20);}  

@media (min-width:1400px) {
    .container {max-width: 1480px; padding-left: 40px; padding-right: 40px;}
}

/* Media Query */
@media (min-width:1199.99px) {
.offcanvas.offcanvas-end {width: 550px;}
}

@media (max-width:1199.99px) {
 .menu.btn12 {display: inline-block; margin-left: 3px;}
    .btn12 {
      position: relative;
      width: 30px;
      height: 30px;
      background-color: transparent;
      padding: 0;
      border: none;
      outline: none;
      box-shadow: none;
      transition-duration: 0.5s;
    }
    .btn12 .icon {
      transition-duration: 0.5s;
      position: absolute;
      height: 2px;
      width: 24px;
      top: 15px;
      background-color: var(--white);
    }
    .btn12 .icon:before {
      transition-duration: 0.5s;
      position: absolute;
      width: 24px;
      height: 2px;
      background-color: var(--white);
      content: "";
      top: -10px;
      left: 0;
    }
    .btn12 .icon:after {
      transition-duration: 0.5s;
      position: absolute;
      width: 24px;
      height: 2px;
      background-color: var(--white);
      content: "";
      top: 10px;
      left: 0;
    }
    .btn12.open .icon {
      transition-duration: 0.5s;
      background: transparent;
    }
    .btn12.open .icon:before {
      transform: rotateZ(45deg) scaleX(1.25) translate(6.5px, 6.5px);
    }
    .btn12.open .icon:after {
      transform: rotateZ(-45deg) scaleX(1.25) translate(6px, -6px);
    }
    .btn12:hover {
      cursor: pointer}
      .nav-icon-btn { width: 30px; height: 30px; min-width: 30px; min-height: 30px;}
      .nav-icon-btn img {max-width: 28px;}
      .navbar-collapse {opacity: 0; visibility: hidden; position: fixed; left: -270px; top: 0; height: 100%; overflow: auto; -webkit-transition: all 0.5s ease-out 0s;
    -moz-transition: all 0.5s ease-out 0s;
    -o-transition: all 0.5s ease-out 0s;
    transition: all 0.5s ease-out 0s; z-index: 999; background-color: var(--dark-first); width: 270px; text-align: left; padding: 20px; display: block !important;}
      .toggle-sidebar .navbar-collapse {opacity:1; visibility:visible; left: 0; top: 0; z-index: 102; }
      .menu.open:after {position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 101; background-color: rgba(0,0,0,0.60); content: "";}
.dropdown-content {position: static; padding: 7px;}
.dropbtn {width: 100%; padding: 6px 0;}
.nav-links {display: block; height: auto;}
.dropdown {display: block;}
}
@media (max-width: 1024px) { .spotlight-grid { grid-template-columns: repeat(2, 1fr); }  .features-grid { grid-template-columns: repeat(2, 1fr); }}

@media (max-width:990px) {
.hero-content h1 { font-size: var(--text-40); line-height: 1;}
.hero {min-height: inherit;}
.common-section {padding: 50px 0;}
.hero-content p {font-size: var(--text-18); margin-bottom: 20px;}
.content-grid {gap: 7px;}
.hero-search-btn {padding: 8px 25px; font-size: var(--text-18);}
.section-title .title {font-size: var(--text-40);}
.section-title .subtitle {font-size: var(--base-text);}
.section-title {margin-bottom: 30px;}
.first-card {padding: 20px;}
.first-card .card-title h3 {font-size: var(--text-24);}
.step {gap: 5px; margin-bottom: 15px; flex-wrap: wrap;}
.step strong {font-size: var(--base-text);}
 .cards-grid { grid-template-columns: 1fr; gap: 20px;}
 .first-card .card-title {margin-bottom: 15px;}
 .steps-grid {grid-template-columns: repeat(2, 1fr);
  gap: 10px;}
  .step-card {padding: 10px;}
  .step-number {font-size: var(--text-24);}
  .step-card h4 {font-size: var(--text-18);}
  .banner h2 {font-size: var(--text-22); margin-bottom: 10px;}
  .banner {padding: 30px 15px;}
  .footer-bottom {margin-top: 15px; padding-top: 10px;}
   .footer-container { grid-template-columns: 1fr; text-align: center; gap: 15px;}
    .social-links { justify-content: center; }
    .app-downloads { justify-content: center; }
    .social-links {margin-top: 10px;}
    .banner p {margin-bottom: 15px;}
    .cta-btn {padding: 8px 20px; font-size: var(--base-text);}
    .banner::before {height: auto;}
    .feature-card {padding: 15px;}
    .testimonial-card {padding: 20px;}
    .quote-mark {font-size: var(--text-40); margin-bottom: 0;}
    .testimonial-grid {gap: 20px;}
    .quote-text {font-size: var(--base-text);}
    .author-text h4 {font-size: var(--base-text);}
    .register-btn {padding: 5px 15px; font-size: var(--base-text)}
}

@media (max-width: 768px) {
    .cta-banners { flex-direction: column; }
    .banner { min-height: inherit; }
    .cta-banners {min-height: inherit;}
    .registration-card {padding: 20px;}
    .auth-title h1 {font-size: var(--text-40);}
    .auth-title p {font-size: var(--text-14);}
    .auth-title {margin-bottom: 20px;}
    .type-box {padding: 12px;}
    .type-box h3 {font-size: var(--text-18);}
    .type-box .type-icon {font-size: 30px; margin-bottom: 10px;}
    .btn-card-lg {padding: 10px 20px; font-size: var(--text-18); margin-top: 0;}
    .auth-page {margin: 30px auto; padding: 0;}
     .testimonial-grid { grid-template-columns: 1fr; }
}

@media (max-width: 600px) { .spotlight-grid { grid-template-columns: 1fr; } .features-grid { grid-template-columns: 1fr; } }