*{font-family:'Plus Jakarta Sans',sans-serif; box-sizing: border-box;}
body{margin:0; background:#f8f9fa; min-height: 100vh;}

/* WRAPPER */
.auth-wrapper{display:flex; min-height:100vh;}

/* --- LEFT PANEL DESIGN --- */
.auth-left{
  width:50%;
  /* Smooth blend across the whole background */
  background: linear-gradient(135deg, #377679, #277c6c, #667fae);
  color:#fff;
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction: column;
  align-items:center;
  justify-content:center;
  padding:40px;
}

/* Dynamic Gradient Glow Overlay */
.auth-left::before {
  content: '';
  position: absolute;
  top: -20%;
  right: -20%;
  width: 80%;
  height: 80%;
  background: radial-gradient(circle, rgba(245,133,61,0.15) 0%, transparent 70%);
  z-index: 1;
  pointer-events: none;
}

.auth-left .content{ 
  max-width:540px; 
  z-index:3; 
  text-align:center; 
  margin-bottom: 10px;
}
.auth-left h1{
  font-size:3rem;
  font-weight:800; 
  margin-bottom: 15px;
  background: linear-gradient(135deg, #ffffff 40%, #fed7aa 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -1px;
}
.auth-left p{
  opacity:.85;
  margin:15px 0 20px 0;
  line-height:1.7; 
  font-size: 1.1rem;
  color: #cbd5e1;
}

/* Contact Info Styling */
.contact-info-panel {
  z-index: 3;
  margin-bottom: 25px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.contact-link {
  color: #fed7aa;
  text-decoration: none;
  font-size: 1.1rem;
  font-weight: 600;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.contact-link:hover {
  color: #f5853d;
  transform: translateY(-1px);
}

.contact-buttons {
  display: flex;
  gap: 15px;
  justify-content: center;
  margin-top: 5px;
}

.contact-btn {
  padding: 10px 18px;
  border-radius: 10px;
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.contact-btn.call-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #fff;
}
.contact-btn.call-btn:hover {
  background: rgba(255, 255, 255, 0.18);
  transform: translateY(-2px);
}

.contact-btn.wa-btn {
  background: #25d366;
  color: #fff;
}
.contact-btn.wa-btn:hover {
  background: #20ba5a;
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(37, 211, 102, 0.3);
}

/* Expanded & Styled Bubbles (Parallax & Floating Animations) */
.circle{
  position:absolute;
  border-radius:50%;
  background: linear-gradient(135deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.01) 100%);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  pointer-events: none;
}
.c1{ width:180px;height:180px;top:8%;left:8%; animation: float 8s ease-in-out infinite;}
.c2{ width:260px;height:260px;bottom:8%;right:6%; animation: float 12s ease-in-out infinite 1s;}
.c3{ width:110px;height:110px;top:55%;left:12%; animation: float 7s ease-in-out infinite 0.5s;}
.c4{ width:90px;height:90px;top:15%;right:15%; animation: float 9s ease-in-out infinite 2s;}
.c5{ width:140px;height:140px;bottom:15%;left:20%; animation: float 11s ease-in-out infinite 1.5s;}
.c6{ width:70px;height:70px;top:40%;right:8%; animation: float 6s ease-in-out infinite 2.5s;}

@keyframes float{
  0%{transform:translateY(0px) rotate(0deg);}
  50%{transform:translateY(-15px) rotate(5deg);}
  100%{transform:translateY(0px) rotate(0deg);}
}

/* Social Media Channels Panel */
.social-channels {
  z-index: 3;
  display: flex;
  gap: 15px;
  justify-content: center;
  align-items: center;
  margin-top: 5px;
}

.social-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #e2e8f0;
  font-size: 1.15rem;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.social-btn:hover {
  color: #fff;
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

/* Custom platform hover behavior */
.social-btn.fb:hover { background: #1877f2; border-color: #1877f2; }
.social-btn.tw:hover { background: #14171a; border-color: #14171a; }
.social-btn.yt:hover { background: #ff0000; border-color: #ff0000; }
.social-btn.ln:hover { background: #0077b5; border-color: #0077b5; }
.social-btn.ig:hover { background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); border-color: #e6683c; }
.social-btn.ln:hover { background: #9a09f4; border-color: #0077b5; }

/* --- RIGHT PANEL & BASE CONFIG (PRESERVED) --- */
.auth-right{
  width:50%;
  display:flex;
  flex-direction: column;
  align-items:center;
  justify-content:center;
  position:relative;
  padding: 20px;
  background:#f8f9fa;
  background-image: radial-gradient(#cbd5e1 1px, transparent 1px);
  background-size: 24px 24px;
}

.card{
  width:100%;
  max-width:450px;
  background:#fff;
  border-radius:24px;
  padding:40px;
  box-shadow:0 20px 50px rgba(0,0,0,0.05);
  position: relative;
  border: 1px solid rgba(0,0,0,0.05);
}

.card::before{
  content:"";
  position:absolute;
  top:0;left:0;right:0;height:5px;
  background:linear-gradient(90deg,#f5853d,#e8a44f);
  border-top-left-radius:24px;
  border-top-right-radius:24px;
}

.gradient-text{
  font-weight:800;
  font-size:1.8rem;
  color:#0f172a;
  letter-spacing: -0.5px;
}

.custom-input {
  position: relative;
  margin-bottom: 20px;
}

.custom-input input {
  width: 100%;
  padding: 16px 16px 16px 45px;
  border-radius: 12px;
  border: 1.5px solid #e2e8f0;
  background: #f8fafc;
  font-size: 1rem;
  outline: none;
  transition: all 0.3s ease;
}

.custom-input label {
  position: absolute;
  left: 45px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.9rem;
  color: #94a3b8;
  pointer-events: none;
  transition: all 0.2s ease;
}

.custom-input input:focus + label,
.custom-input input:not(:placeholder-shown) + label {
  top: 0;
  left: 12px;
  font-size: 0.75rem;
  background: #fff;
  padding: 0 8px;
  color: #f5853d;
  font-weight: 700;
}

.custom-input input:focus {
  border-color: #f5853d;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(245,133,61,0.1);
}

.input-icon {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.1rem;
  color: #94a3b8;
  z-index: 5;
}

.toggle-pass {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  color: #94a3b8;
  padding: 5px;
}

.btn-primary {
  width: 100%;
  padding: 16px;
  border: none;
  border-radius: 12px;
  background: #0f172a;
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s;
  margin-top: 10px;
}

.btn-primary:hover {
  background: #1e293b;
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(15,23,42,0.2);
}

.footer {
  text-align: center;
  margin-top: 25px;
  font-size: 0.85rem;
  color: #64748b;
}

.footer-link {
  color: #f5853d;
  font-weight: 700;
  text-decoration: none;
}

@media (max-width: 992px) {
  .auth-left { display: none; }
  .auth-right { width: 100%; padding: 20px; }
  .card { padding: 30px 20px; }
}

@media (max-height: 700px) {
    .auth-wrapper { min-height: auto; padding: 40px 0; }
}