/* ===== GIVE EACH PAGE ADIFFERENT BG AND STYLE ===== */

body.page-register-artist .cs-register-login-wrapper{
background:
linear-gradient(to bottom,rgba(0,0,0,.65),rgba(18,10,31,.95)),
url('/wp-content/uploads/artist-bg.jpg') center/cover no-repeat;
}

body.page-register-client .cs-register-login-wrapper{
background:
linear-gradient(to bottom,rgba(0,0,0,.65),rgba(18,10,31,.95)),
url('/wp-content/uploads/client-bg.jpg') center/cover no-repeat;
}

body.page-studio-login .cs-register-login-wrapper{
background:
linear-gradient(to bottom,rgba(0,0,0,.65),rgba(18,10,31,.95)),
url('/wp-content/uploads/login-bg.jpg') center/cover no-repeat;
}


/* =========================
   GATEWAY BODY CLASS
========================= */

if($view === 'gateway'){
    add_filter('body_class', function($classes){
        $classes[] = 'page-gateway';
        return $classes;
    });
}


/* ==== CINEMATIC LOGIN ROLE ALERT STYLING====== */

.cs-role-alert{

display:none;
margin-bottom:12px;

padding:10px 14px;

font-size:13px;
font-weight:500;

border-radius:6px;

background:rgba(255,80,80,0.12);
border:1px solid rgba(255,80,80,0.35);

color:#ff6b6b;

animation: csFadeIn .4s ease;

}

@keyframes csFadeIn{

from{
opacity:0;
transform:translateY(-5px);
}

to{
opacity:1;
transform:translateY(0);
}

}

/* ====== ROLE ALERT HIGHLIGHTING ====== */

/* highlight role chooser when alert shows */

.cs-role-highlight{
animation: csRolePulse 1.2s ease 2;
border-radius:10px;
box-shadow:0 0 18px rgba(245,179,1,0.35);
}

/* ====== CS ROLE POLE PULSE ====== */

#choose-role{
animation: csRolePulse 1.2s ease;
}

@keyframes csRolePulse{

0%{transform:scale(1);}
50%{transform:scale(1.03);}
100%{transform:scale(1);}

}

/* ==== LOGIN HERO BACKGROUND ====== */

.cs-login-wrapper {
  font-family: 'Inter', sans-serif;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    linear-gradient(to bottom, rgba(0,0,0,0.65), rgba(18,10,31,0.95)),
    url("https://live.staticflickr.com/65535/55028321449_6897182b10.jpg") center/cover no-repeat;
  padding: 40px 20px;
  color: white;
}

/* ================= GLASS CARD ================= */

.cs-login-card {
  backdrop-filter: blur(18px);
  background: rgba(18,10,31,0.88);
  border: 1px solid rgba(245,179,1,0.15);
	
  border-radius: 20px;
  padding: 50px;
  max-width: 1000px;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  box-shadow: 0 25px 60px rgba(0,0,0,0.7);
}

/* ============= LEFT BRAND PANEL ================= */

.cs-brand {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* ================= LOGO ================= */

.cs-login-logo {
  margin-bottom: 40px;
  margin-top: 60px;
}

.cs-login-logo img {
  width: 260px;
  height: auto;
}

.cs-brand p {
  opacity: 0.85;
  line-height: 1.6;
  max-width: 380px;
}

.cs-brand-divider {
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg,#f5b301,#ff8c42);
  margin: 25px 0;
  border-radius: 4px;
}

/* ========== LOGIN PANEL =========== */

.cs-login-options h2 {
  font-size: 1.6rem;
  margin-bottom: 30px;
  font-weight: 700;
}

/* ========== ROLE SWITCH ========== */

.cs-role-buttons {
  display: flex;
  gap: 12px;
  margin-bottom: 30px;
}

.cs-role-buttons button {
  flex: 1;
  padding: 12px;
  border-radius: 30px;
  border: 1px solid rgba(245,179,1,0.4);
  background: transparent;
  color: #f5b301;
  font-weight: 600;
  cursor: pointer;
  transition: 0.3s ease;
}

.cs-role-buttons button.active,
.cs-role-buttons button:hover {
  background: linear-gradient(90deg,#f5b301,#ff8c42);
  color: #120a1f;
}

/* ================= FORM ================= */

.cs-login-form input,
.cs-login-form input[type="text"],
.cs-login-form input[type="email"],
.cs-login-form input[type="password"]{ 
  width: 100%;
  padding: 14px 18px;
	margin-top: 0px;
  margin-bottom: 50px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.1);
  background: #ffffff;
  color: #000000;
  font-size: 0.95rem;
  transition: 0.3s ease;
}

.cs-login-form input:focus {
  border-color: #f5b301;
  box-shadow: 0 0 12px rgba(245,179,1,0.3);
  outline: none;
  color: #fb5301;
}

.cs-login-form {
  display: flex;
  flex-direction: column;
}

.cs-login-form button {
  width: 100%;
  padding: 14px;
  border-radius: 30px;
  border: none;
  font-weight: 700;
  cursor: pointer;
  background: linear-gradient(90deg,#f5b301,#ff8c42);
  color: #120a1f;
  transition: 0.3s ease;
}

.cs-login-form button:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 25px rgba(245,179,1,0.35);
}

.cs-login-links {
  margin-top: 20px;
  font-size: 0.9rem;
  opacity: 0.8;
}

.cs-login-links a {
  color: #f5b301;
  margin-right: 15px;
  transition: 0.3s ease;
}

.cs-login-links a:hover {
  color: #ff8c42;
}

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

@media(max-width: 900px){
  .cs-login-card {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 40px 30px;
  }
}


/* ======== CINEMATIC WAVE (SUBTLE) ======== */

.cs-wave-cinematic {
  margin-top: 30px;
  display: flex;
  gap: 6px;
  height: 24px;
  align-items: flex-end;
}

.cs-wave-cinematic span {
  width: 3px;
  height: 10px;
  border-radius: 4px;
  background: linear-gradient(to top, #f5b301, #ffb347);
  opacity: 0.7;
  animation: cinematicWave 2.8s ease-in-out infinite;
  box-shadow: 0 0 6px rgba(245,179,1,0.25);
}

/* staggered timing */
.cs-wave-cinematic span:nth-child(2) {
  animation-delay: 0.4s;
}

.cs-wave-cinematic span:nth-child(3) {
  animation-delay: 0.8s;
}

@keyframes cinematicWave {
  0%, 100% {
    height: 10px;
    opacity: 0.6;
  }
  50% {
    height: 22px;
    opacity: 1;
  }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .cs-wave-cinematic span {
    animation: none;
    height: 14px;
  }
}

/*=====PEEKABOO EYE PSW=====*/

.cs-password-wrap {
  position: relative;
	margin-bottom: 60px;
}

.cs-password-wrap input {
  padding-right: 45px;
	padding-left: 45px;
}

.cs-password-toggle {
  position: absolute;
  right: 0px;
  top: 100%;
	
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: #f5b301;
  cursor: pointer;
  font-size: 16px;
  opacity: 0.7;
  transition: 0.2s ease;
}

.cs-password-toggle:hover {
  opacity: 1;
}

.cs-password-toggle.active {
  opacity: 1;
  transform: translateY(-50%) scale(1.1);
}

/* ==============================================
CS ROLE BASE AUTH UI REGISTRATION PAGES  WORKS
================================================= */

.cs-register-login-wrapper{
font-family:'Inter',sans-serif;
min-height:100vh;
display:flex;
align-items:center;
justify-content:center;
background:
linear-gradient(to bottom,rgba(0,0,0,0.65),rgba(18,10,31,0.95)),
url("https://live.staticflickr.com/65535/55071138803_10d610ddf0_b.jpg") center/cover no-repeat;
padding:40px 20px;
color:#fff;
}

/* CARD */

.cs-register-login-card{
backdrop-filter:blur(18px);
background:rgba(18,10,31,0.92);
border:1px solid rgba(245,179,1,0.15);
border-radius:20px;
padding:60px 50px;
max-width:480px;
width:100%;
box-shadow:0 25px 60px rgba(0,0,0,0.7);
text-align:center;

opacity:0;
transform:translateY(10px);
animation:csFadeIn .6s ease-out forwards;
}

@keyframes csFadeIn{
to{
opacity:1;
transform:translateY(0);
}
}

/* LOGO */

.cs-register-login-logo{
margin-top:20px;
margin-bottom:20px;
}

.cs-register-login-logo img{
width:260px;
height:auto;
}

/* DIVIDER */

.cs-register-divider{
width:50px;
height:2px;
margin:0 auto 35px auto;
background:linear-gradient(90deg,#f5b301,#ff8c42);
border-radius:4px;
}

/* ===== HEADING ===== */

.cs-register-login-options h2{
font-size:1.4rem;
margin-bottom:25px;
font-weight:700;
}

/* ===== FORM ====== */

.cs-register-login-form input,
.cs-register-login-form input[type="text"],
.cs-register-login-form input[type="email"],
.cs-register-login-form input[type="password"]{
width:100%;
padding:14px 18px;
margin-bottom:50px;
border-radius:12px;
border:1px solid rgba(255,255,255,0.1);
background:#ffffff;
color:#000;
font-size:.95rem;
transition:.3s ease;
}

.cs-register-login-form input:focus{
border-color:#f5b301;
box-shadow:0 0 12px rgba(245,179,1,0.3);
outline:none;
}

/* BUTTON */

.cs-register-login-form button,
.cs-register-login-form input[type="submit"]{
width:100%;
padding:14px;
border-radius:30px;
border:none;
font-weight:700;
cursor:pointer;
background:linear-gradient(90deg,#f5b301,#ff8c42);
color:#120a1f;
transition:.3s ease;
}

.cs-register-login-form button:hover{
transform:translateY(-2px);
box-shadow:0 12px 25px rgba(245,179,1,0.35);
}

/*===== CS REGISTER PEEKABOO EYE PSW=====*/

.cs-register-password-wrap{
position:relative;
margin-bottom:60px;
}

.cs-register-password-wrap input{
padding-right:45px;

}

.cs-register-password-toggle{
position:absolute;
right:0px;
top:100%;
transform:translateY(-50%);
background:transparent;
border:none;
color:#f5b301;
cursor:pointer;
font-size:16px;
opacity:.7;
transition:.2s ease;
}

.cs-register-password-toggle:hover{
opacity:1;
}

.cs-register-password-toggle.active{
opacity:1;
transform:translateY(-50%) scale(1.1);
}

/* CINEMATIC WAVE */

.cs-register-wave-cinematic{
margin-top:30px;
display:flex;
gap:6px;
height:24px;
align-items:flex-end;
}

.cs-register-wave-cinematic span{
width:3px;
height:10px;
border-radius:4px;
background:linear-gradient(to top,#f5b301,#ffb347);
opacity:.7;
animation:cinematicWave 2.8s ease-in-out infinite;
box-shadow:0 0 6px rgba(245,179,1,0.25);
}

.cs-register-wave-cinematic span:nth-child(2){
animation-delay:.4s;
}

.cs-register-wave-cinematic span:nth-child(3){
animation-delay:.8s;
}

@keyframes cinematicWave{
0%,100%{
height:10px;
opacity:.6;
}
50%{
height:22px;
opacity:1;
}
}

/* MOBILE */

@media(max-width:600px){

.cs-register-login-card{
padding:45px 30px;
}

}

/* ACCESSIBILITY */

@media(prefers-reduced-motion:reduce){

.cs-register-login-card{
animation:none;
opacity:1;
transform:none;
}

.cs-register-wave-cinematic span{
animation:none;
height:14px;
}

}

/* ======================================================
CS ROLE BASE AUTH UI DYNAMIC BACKGROUND IMAGES
====================================================== */

/* ARTIST BACKGROUND */
body.page-register-artist .cs-register-login-wrapper{
background:
linear-gradient(to bottom,rgba(0,0,0,.65),rgba(18,10,31,.95)),
url('/wp-content/uploads/2026/03/Futuristic-Afrobeats-Studio-and-Creative-Media-mixer.jpg') center/cover no-repeat;
}

/* CLIENT BACKGROUND */
body.page-register-client .cs-register-login-wrapper{
background:
linear-gradient(to bottom,rgba(0,0,0,.65),rgba(18,10,31,.95)),
url('/wp-content/uploads/2026/03/Explore-tech-hub-and-futuristic-creative-Music-Studio.jpg') center/cover no-repeat;
}



/* ===== AJAX PORTAL DESIGNS BEGINS ===== */

.cs-portal {
  display: flex;
   height: 50vh;
  width: 100%;
  justify-content: center;
}

.cs-portal-card {
  width: 260px;
  padding: 260px;
  border-radius: 20px;
  background: rgba(255,255,255,0.05);
  backdrop-filter: blur(12px);
  cursor: pointer;
  transition: all 0.4s ease;
  position: relative;
  overflow: hidden;
}

.cs-portal-card:hover {
  transform: scale(1.05);
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}

.cs-portal-card::after {
  content: "";
  position: absolute;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255,215,0,0.15), transparent);
  top: -50%;
  left: -50%;
  opacity: 0;
  transition: 0.5s;
}

.cs-portal-card:hover::after {
  opacity: 1;
}

/* === AJAX PORTAL EXPANION EFFECT === */

.cs-portal-card.cs-selected {
  transform: scale(1.15);
  box-shadow: 0 30px 80px rgba(0,0,0,0.6);

}


/* ===== AJAX PORTAL PULSE GLOW ==== */

@keyframes pulseGlow {
  0% { box-shadow: 0 0 0 rgba(255,215,0,0.0); }
  50% { box-shadow: 0 0 40px rgba(255,215,0,0.4); }
  100% { box-shadow: 0 0 0 rgba(255,215,0,0.0); }
}

.cs-portal-card.cs-selected {
  animation: pulseGlow 0.8s ease;
}

/* ==== 🔊 BONUS AJAX PANEL — AUDIO-REACTIVE ILLUSION (LIGHTWEIGHT) ==== */

@keyframes pulseWave {
  0% { opacity: 0.2; }
  50% { opacity: 0.6; }
  100% { opacity: 0.2; }
}

.cs-portal-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, rgba(255,215,0,0.15), transparent);
  animation: pulseWave 3s infinite;
}

/* ===== AJAX PORTAL TRUE FULL-SCREEN SPLIT ===== */

.cs-portal-split {
  display: flex;
  height: 100vh;
  width: 100%;
  
}

/* === AJAX TWO EQUAL HALVES === */

.cs-portal-panel {
  flex: 1;
  
  border-radius: 20px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.6s ease;
}

/* === ✨ STEP 5 — CONTENT (CENTERED + POWERFUL) == */

.cs-portal-content {
  position: absolute;
  z-index: 2;
  color: #fff;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  transition: all 0.4s ease;
}

.cs-portal-content h2 {
  font-size: 42px;
  font-weight: 800;
}

.cs-portal-content p {
  margin-top: 10px;
  opacity: 0.8;
}

/* === 📱 AJAX PORTAL TEXT RESPONSIVENESS (IMPORTANT FIX) === */

.cs-portal-content {
  max-width: 80%;
  padding: 20px;
}

@media (max-width: 768px) {
  .cs-portal-content h2 {
    font-size: 28px;
  }
}

/* === AJAX PORTAL HOVER TEXT ANIMATION === */

.cs-portal-panel-content {
  transform: translateY(20px);
  opacity: 0;
  transition: all 0.4s ease;
}

.cs-portal-panel:hover .cs-portal-panel-content {
  transform: translateY(0);
  opacity: 1;
}

/* == ⚡ STEP 6 — HOVER EXPANSION (THIS IS THE MAGIC) == */

.cs-portal-panel:hover {
  flex: 1.2;
  transform: translateY(-8px); box-shadow: 0 10px 25px rgba(76, 29, 149, 1); }
}

.cs-portal-panel:hover .cs-portal-panel-bg {
  transform: scale(1.1);
  filter: brightness(1.1);
}

/*🎬 == AJAX PORTAL BACKGROUND LAYER (IMAGE NOW, VIDEO NEXT) == */

.cs-portal-bg {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  transition: transform 0.8s ease, filter 0.8s ease;
  hover { transform: translateY(-8px); box-shadow: 0 10px 25px rgba(76, 29, 149, 1); }
}

/* ==🌒 AJAX — CINEMATIC OVERLAY == */

.cs-portal-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.9),
    rgba(0,0,0,0.2)
  );
}


/* ===== PORTAL BACKGROUND SIZE COVER CONTROL BEGINS ===== */

.cs-portal-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.cs-bg-inner {
  position: absolute;
  inset: -50px; /* 🔥 THIS IS YOUR CONTROL */
  background-image: url('https://live.staticflickr.com/65535/55161397590_260f924b4c_b.jpg');
  background-size: cover;
  background-position: center;
}
/* 💥 WHY THE ABOVE IS POWERFUL You can now: inset: -100px 0 -50px 0; */


/* 🔥 THIS IS YOUR PRTAL BG POSITION CONTROL */

.cs-portal-bg {
background-position: center center;} /* maybe remove and try what us below this
	background-position: center top;
	background-position: 50% 30%;
	background-position: left center;
 */
  

/* ===== PORTAL VIDEO CSS BEGINS ====== */

.cs-portal-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s ease, filter 0.8s ease;
}

/* ====== VIDEO CONTROL (EVEN BETTER) ===== */
 
.cs-portal-video {
  object-fit: cover;
  object-position: center;
}

.cs-portal-panel:hover .cs-portal-video {
  transform: scale(1.1);
  filter: brightness(1.2);
}


/* ===== PORTAL FOOTER GET STARTED LOGIN BUTTONS ====== */

.cs-portal-actions {
  margin-top: 60px;
  margin-bottom: 60px;
  display: flex;
  gap: 10px;
  justify-content: center;
}

.cs-portal-actions button {
  padding: 10px 16px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s ease;
}

/* Register (Primary) */
.cs-portal-actions .cs-enter {
  background: #ffd700;
  color: #000;
}

.cs-portal-actions .cs-enter:hover {
  background: #ffcc00;
}

/* Login (Secondary) */
.cs-portal-actions .cs-login {
  background: rgba(255,255,255,0.1);
  color: #fff;
}

.cs-portal-actions .cs-login:hover {
  background: rgba(255,255,255,0.2);
}