/* ------------------------ */
/* CSS Custom Properties */
/* ------------------------ */
:root {
  /* Colors */
  --primary-color: #0057ff;
  --primary-dark: #003ecb;
  --white: #fff;
  --background-light: #f1f5ff;
  --error-color: #ff4757;
  --success-color: #2ed573;
  
  /* Shadows */
  --shadow-light: 0 5px 15px rgba(0,0,0,0.1);
  --shadow-medium: 0 15px 40px rgba(0,0,0,0.15);
  --shadow-primary: 0 5px 15px rgba(0,87,255,0.3);
  --shadow-primary-hover: 0 8px 20px rgba(0,87,255,0.4);
  
  /* Animations */
  --transition-fast: all 0.3s ease;
  --transition-smooth: all 0.7s cubic-bezier(0.68,-0.55,0.27,1.55);
  
  /* Sizes */
  --border-radius-small: 8px;
  --border-radius-medium: 12px;
  --border-radius-large: 20px;
  --border-radius-full: 50px;
}

/* ------------------------ */
/* Global Styles */
/* ------------------------ */
* { 
  box-sizing: border-box; 
  font-family: 'Segoe UI', Arial, sans-serif; 
  margin: 0; 
  padding: 0; 
}

body {
  background: linear-gradient(135deg, #eaf3ff 0%, #d6e7ff 100%);
  display: flex; 
  justify-content: center; 
  align-items: center; 
  height: 100vh !important;
  overflow: hidden; 
  position: relative;
}

/* ------------------------ */
/* Background Bubbles */
/* ------------------------ */
.bg-bubble { 
  position: absolute; 
  border-radius: 50%; 
  background: rgba(0,87,255,0.1); 
  animation: float 15s infinite ease-in-out; 
  z-index: -1; 
}

.bg-bubble:nth-child(1) { 
  width: 150px; 
  height: 150px; 
  top: 10%; 
  left: 5%; 
  animation-delay: 0s;
}

.bg-bubble:nth-child(2) { 
  width: 100px; 
  height: 100px; 
  top: 70%; 
  left: 80%; 
  animation-delay: 2s;
}

.bg-bubble:nth-child(3) { 
  width: 200px; 
  height: 200px; 
  top: 40%; 
  left: 70%; 
  animation-delay: 4s;
}

.bg-bubble:nth-child(4) { 
  width: 120px; 
  height: 120px; 
  top: 80%; 
  left: 10%; 
  animation-delay: 6s;
}

@keyframes float {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-20px) rotate(10deg);
  }
}

html, body {
  max-width: 100%;
  overflow-x: hidden;
}
/* ------------------------ */
/* Main Container */
/* ------------------------ */
.container { 
  background: var(--white); 
  border-radius: var(--border-radius-large); 
  box-shadow: var(--shadow-medium); 
  width: 900px; 
  max-width: 90%; 
  min-height: 550px; 
  position: relative; 
  overflow: hidden; 
  transform: translateY(20px); 
  opacity: 0; 
  animation: containerAppear 0.8s ease-out forwards; 
}

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

/* ------------------------ */
/* Forms */
/* ------------------------ */
.form-container { 
  position: absolute; 
  top: 0; 
  height: 100%; 
  transition: var(--transition-smooth); 
}

form { 
  background: var(--white); 
  display: flex; 
  flex-direction: column; 
  justify-content: center; 
  padding: 0 60px; 
  height: 100%; 
  opacity: 0; 
  transform: translateX(-20px); 
  animation: formAppear 0.5s ease-out 0.3s forwards; 
}

@keyframes formAppear { 
  to { 
    opacity: 1; 
    transform: translateX(0); 
  } 
}

form h1 { 
  margin-bottom: 25px; 
  color: var(--primary-color); 
  font-weight: 700; 
  font-size: 28px; 
  position: relative; 
}

form h1::after { 
  content: ''; 
  position: absolute; 
  bottom: -8px; 
  left: 0; 
  width: 50px; 
  height: 4px; 
  background: var(--primary-color); 
  border-radius: 2px; 
}

/* Inputs */
.input-group { 
  position: relative; 
  margin: 12px 0; 
}

input { 
  width: 100%; 
  padding: 16px 20px 16px 45px !important; 
  border-radius: var(--border-radius-medium); 
  border: 2px solid transparent; 
  background: var(--background-light); 
  outline: none; 
  font-size: 15px; 
  transition: var(--transition-fast); 
}

input:focus { 
  border-color: var(--primary-color); 
  background: var(--white); 
  box-shadow: 0 0 0 3px rgba(0,87,255,0.1);
}

.input-icon { 
  position: absolute; 
  left: 15px; 
  top: 50%; 
  transform: translateY(-50%); 
  font-size: 18px; 
  color: var(--primary-color); 
}
/* ------------------------ */

.otp-container {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin: 30px 0;
  flex-wrap: wrap;
}

.otp-input {
  width: 55px !important;
  height: 60px !important;
  padding: 12px !important;
  background: var(--white) !important;
  border: 2px solid #e0e0e0 !important;
  border-radius: var(--border-radius-medium) !important;
  font-size: 24px !important;
  font-weight: 600;
  text-align: center;
  color: #000000 !important; /* ← This forces black text */
  transition: all 0.3s ease;
  outline: none;
}

.otp-input:focus {
  border-color: var(--primary-color) !important;
  box-shadow: 0 0 0 3px rgba(0, 87, 255, 0.1);
  transform: scale(1.05);
}

.otp-input::placeholder {
  color: #cccccc;
}

/* Buttons */
button { 
  border: none; 
  border-radius: var(--border-radius-full); 
  padding: 16px 50px; 
  margin-top: 20px; 
  font-size: 16px; 
  font-weight: 600; 
  color: var(--white); 
  background: var(--primary-color); 
  cursor: pointer; 
  position: relative; 
  overflow: hidden; 
  transition: var(--transition-fast); 
  box-shadow: var(--shadow-primary);
}

button:hover { 
  background: var(--primary-dark)!important; 
  transform: translateY(-3px); 
  box-shadow: var(--shadow-primary-hover); 
}

button:active { 
  transform: translateY(0); 
}

button::after { 
  content: ''; 
  position: absolute; 
  top: 50%; 
  left: 50%; 
  width: 5px; 
  height: 5px; 
  background: rgba(255,255,255,0.5); 
  opacity: 0; 
  border-radius: 50%; 
  transform: scale(1) translate(-50%,-50%); 
  transform-origin: 50% 50%; 
}

button:focus:not(:active)::after { 
  animation: ripple 1s ease-out; 
}

@keyframes ripple {
  0% {
    transform: scale(0);
    opacity: 0.5;
  }
  100% {
    transform: scale(50);
    opacity: 0;
  }
}

/* Sign In / Sign Up Panels */
.sign-in { 
  left: 0;
  width: 50%;
  z-index: 2; 
}

.sign-up { 
  left: 0;
  width: 50%;
  opacity: 0;
  z-index: 1; 
}

/* Overlay */
.overlay-container { 
  position: absolute; 
  top: 0; 
  left: 50%; 
  width: 50%; 
  height: 100%; 
  overflow: hidden; 
  transition: var(--transition-smooth); 
  z-index: 100; 
}

.overlay { 
  background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%); 
  color: var(--white); 
  position: relative; 
  left: -100%; 
  width: 200%; 
  height: 100%; 
  transform: translateX(0); 
  transition: var(--transition-smooth);
}

.overlay-panel { 
  position: absolute; 
  display: flex; 
  flex-direction: column; 
  justify-content: center; 
  align-items: center; 
  text-align: center; 
  top: 0; 
  height: 100%; 
  width: 50%; 
  padding: 0 40px; 
  opacity: 0; 
  transform: translateX(20px); 
  animation: panelAppear 0.5s ease-out 0.5s forwards; 
}

@keyframes panelAppear { 
  to { 
    opacity: 1; 
    transform: translateX(0); 
  } 
}

.overlay-left { 
  transform: translateX(0%);
}

.overlay-right { 
  right: 0; 
  transform: translateX(0); 
}

.ghost { 
  background: transparet; 
  border: 2px solid var(--white); 
  color: var(--white); 
  box-shadow: none;
}

.ghost:hover { 
  background: rgba(255,255,255,0.1); 
  transform: translateY(-3px);
}

/* Active Panel Animations */
.container.right-panel-active .sign-in { 
  transform: translateX(100%); 
}

.container.right-panel-active .sign-up { 
  transform: translateX(100%); 
  opacity: 1; 
  z-index: 5; 
}

.container.right-panel-active .overlay-container { 
  transform: translateX(-100%); 
}

.container.right-panel-active .overlay { 
  transform: translateX(50%); 
}

/* Logo Styles */
.logo-container { 
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  margin-bottom: 25px; 
}

.logo-circle { 
  width: 90px; 
  height: 90px; 
  background: rgba(255,255,255,0.2); 
  border-radius: 50%; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  margin-bottom: 15px; 
  box-shadow: var(--shadow-light);
}

.logo-bus { 
  font-size: 40px; 
  color: white; 
  transform: scaleX(-1);
}

.logo-text { 
  font-size: 24px; 
  font-weight: 800; 
  color: white; 
  letter-spacing: 1px;
}

.logo-subtext { 
  font-size: 14px; 
  color: rgba(255,255,255,0.8); 
  margin-top: 5px;
}

/* Toast */
#toast { 
  position: fixed; 
  bottom: 30px; 
  right: 30px; 
  background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%); 
  color: white; 
  padding: 18px 30px; 
  border-radius: var(--border-radius-medium); 
  font-size: 15px; 
  font-weight: 500; 
  opacity: 0; 
  transform: translateY(20px) scale(0.9); 
  transition: var(--transition-smooth); 
  z-index: 9999; 
  display: flex; 
  align-items: center; 
  gap: 10px; 
  box-shadow: var(--shadow-primary);
}

#toast.show { 
  opacity: 1; 
  transform: translateY(0) scale(1); 
}

#toast i { 
  font-size: 20px; 
}

/* Success Animation */
.success-animate { 
  animation: pop 0.5s ease; 
}

@keyframes pop { 
  0% {
    transform: scale(0.8);
  } 
  50% {
    transform: scale(1.1);
  } 
  100% {
    transform: scale(1);
  } 
}

/* Error / Success Messages */
#error, #success { 
  font-size: 14px; 
  margin: 10px 0; 
  padding: 10px 15px; 
  border-radius: var(--border-radius-small); 
  text-align: center; 
  transition: var(--transition-fast); 
}

#error { 
  color: var(--error-color); 
  background: rgba(255,71,87,0.1); 
  border-left: 4px solid var(--error-color); 
}

#success { 
  color: var(--success-color); 
  background: rgba(46,213,115,0.1); 
  border-left: 4px solid var(--success-color); 
}

/* Responsive */
@media screen and (max-width: 768px) {
  .container {
    width: 95%; 
    min-height: 500px;
  }
  
  form {
    padding: 0 40px;
  }
  
  .overlay-panel {
    padding: 0 20px;
  }
  
  .overlay-panel h1 {
    font-size: 26px;
  }
}

@media screen and (max-width: 480px) {
  form {
    padding: 0 25px;
  }
  
  form h1 {
    font-size: 24px;
  }
  
  input {
    padding: 14px 20px 14px 40px !important;
  }
  
  .logo-circle {
    width: 70px; 
    height: 70px;
  }
  
  .logo-bus {
    font-size: 32px;
  }
  
  .logo-text {
    font-size: 20px;
  }
  
  #toast {
    right: 15px; 
    bottom: 15px; 
    padding: 15px 20px;
  }
}

/* إضافات جديدة للـ Select */
.form-select {
  width: 100%;
  padding: 16px 20px 16px 45px;
  border-radius: var(--border-radius-medium);
  border: 2px solid transparent;
  background: var(--background-light);
  outline: none;
  font-size: 15px;
  color: #333;
  transition: var(--transition-fast);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
}

.form-select:focus {
  border-color: var(--primary-color);
  background: var(--white);
  box-shadow: 0 0 0 3px rgba(0,87,255,0.1);
}

.input-group select + .input-icon {
  pointer-events: none;
}

.input-group::after {
  content: '\f078';
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--primary-color);
  pointer-events: none;
  font-size: 14px;
  z-index: 1;
}

.input-group select {
  position: relative;
  z-index: 2;
}
/* ===============================
   MOBILE RESPONSIVE FIX
================================ */

@media screen and (max-width: 768px) {

  body {
    height: auto !important;
    overflow-y: auto;
  }

  .container {
    width: 100%;
    min-height: auto;
    border-radius: 0;
  }

  /* الفورم ياخد عرض الشاشة كله */
  .form-container {
    position: relative;
    width: 100%;
    height: auto;
    transform: none !important;
  }

  .sign-in,
  .sign-up {
    width: 100%;
    position: relative;
    transform: none !important;
    opacity: 1;
  }

  /* إلغاء فكرة النص بنص */
  .overlay-container {
    display: none;
  }

  form {
    padding: 40px 25px;
    height: auto;
  }

  button {
    width: 100%;
    padding: 14px;
    margin-top: 15px;
  }
}

/* ===============================
   FORM TOGGLE LOGIC (MOBILE)
================================ */

@media screen and (max-width: 768px) {

  /* الوضع الافتراضي Sign In */
  .sign-up {
    display: none;
  }

  /* لما يتحول لـ Sign Up */
  .container.right-panel-active .sign-in {
    display: none;
  }

  .container.right-panel-active .sign-up {
    display: block;
  }
}