/* ============================================
   CyberLab Waitlist - Complete RTL/LTR CSS
   ============================================ */

/* RTL Font */
[dir='rtl'] {
  font-family: 'Cairo', 'Poppins', sans-serif;
}

/* ============================================
   Light Mode Theme
   ============================================ */
body.light {
  background: linear-gradient(135deg, #e0e7ff 0%, #f8fafc 100%);
  color: #1e293b;
}

body.light .bg-cyber-darker {
  background: rgba(255, 255, 255, 0.9) !important;
  border-color: rgba(99, 102, 241, 0.1) !important;
}
.text-white2 {
  color: #f8fafc;
}
body.light .text-white {
  color: #1e293b !important;
}
body.light .text-white\/70 {
  color: #475569 !important;
}
body.light .text-white\/60 {
  color: #64748b !important;
}
body.light .bg-white\/5 {
  background: rgba(99, 102, 241, 0.05) !important;
}
body.light .bg-white\/10 {
  background: rgba(99, 102, 241, 0.08) !important;
}
body.light .border-white\/10 {
  border-color: rgba(99, 102, 241, 0.2) !important;
}
body.light .placeholder-white\/50::placeholder {
  color: #94a3b8 !important;
}
body.light .shadow-2xl {
  box-shadow: 0 20px 60px rgba(99, 102, 241, 0.15) !important;
}
body.light .shadow-lg {
  box-shadow: 0 10px 30px rgba(99, 102, 241, 0.1) !important;
}

body.light input,
body.light select {
  background: rgba(255, 255, 255, 0.6) !important;
  border-color: rgba(99, 102, 241, 0.2) !important;
}

body.light input:focus,
body.light select:focus {
  background: rgba(255, 255, 255, 0.9) !important;
  border-color: #0d6efd !important;
}

/* ============================================
   RTL/LTR Positioning
   ============================================ */

/* Controls Position */
[dir='ltr'] .controls-wrap {
  right: 0.75rem;
}
[dir='rtl'] .controls-wrap {
  left: 0.75rem;
}

@media (min-width: 640px) {
  [dir='ltr'] .controls-wrap {
    right: 1.25rem;
  }
  [dir='rtl'] .controls-wrap {
    left: 1.25rem;
  }
}

/* Background Shapes */
[dir='ltr'] .bg-gradient-shape-1 {
  top: -5rem;
  right: -5rem;
}
[dir='rtl'] .bg-gradient-shape-1 {
  top: -5rem;
  left: -5rem;
}

[dir='ltr'] .bg-gradient-shape-2 {
  bottom: -5rem;
  left: -5rem;
}
[dir='rtl'] .bg-gradient-shape-2 {
  bottom: -5rem;
  right: -5rem;
}

/* Content Flex Direction */
[dir='ltr'] .content-flex {
  flex-direction: column;
}
[dir='rtl'] .content-flex {
  flex-direction: column;
}

@media (min-width: 1024px) {
  [dir='ltr'] .content-flex {
    flex-direction: row;
  }
  [dir='rtl'] .content-flex {
    flex-direction: row-reverse;
  }
}

/* Text Alignment */
.content-text-align {
  text-align: center;
}

@media (min-width: 1024px) {
  [dir='ltr'] .content-text-align {
    text-align: left;
  }
  [dir='rtl'] .content-text-align {
    text-align: right;
  }
}

/* Badges Justify */
.badges-justify {
  justify-content: center;
}

@media (min-width: 1024px) {
  [dir='ltr'] .badges-justify {
    justify-content: flex-start;
  }
  [dir='rtl'] .badges-justify {
    justify-content: flex-end;
  }
}

/* Pills Justify */
.pills-justify {
  justify-content: center;
}

@media (min-width: 1024px) {
  [dir='ltr'] .pills-justify {
    justify-content: flex-start;
  }
  [dir='rtl'] .pills-justify {
    justify-content: flex-end;
  }
}

/* Form Labels */
.form-label {
  justify-content: center;
}

@media (min-width: 1024px) {
  [dir='ltr'] .form-label {
    justify-content: flex-start;
  }
  [dir='rtl'] .form-label {
    justify-content: flex-end;
  }
}

/* Icon Order in RTL */
[dir='rtl'] .icon-order-1 {
  order: 2;
}
[dir='rtl'] .icon-order-2 {
  order: 1;
}

/* Button Position */
.btn-submit {
  align-self: center;
}

@media (min-width: 640px) {
  [dir='ltr'] .btn-submit {
    align-self: flex-start;
  }
  [dir='rtl'] .btn-submit {
    align-self: flex-end;
  }
}

/* Social Justify */
.social-justify {
  justify-content: center;
}

@media (min-width: 1024px) {
  [dir='ltr'] .social-justify {
    justify-content: flex-start;
  }
  [dir='rtl'] .social-justify {
    justify-content: flex-end;
  }
}

/* Toast Position */
[dir='ltr'] .toast-wrap {
  right: 0.75rem;
}
[dir='rtl'] .toast-wrap {
  left: 0.75rem;
}

@media (min-width: 640px) {
  [dir='ltr'] .toast-wrap {
    right: 1.25rem;
  }
  [dir='rtl'] .toast-wrap {
    left: 1.25rem;
  }
}

/* Decorative Shapes Positions */
[dir='ltr'] .shape-pos-2 {
  right: 5rem;
}
[dir='rtl'] .shape-pos-2 {
  left: 5rem;
}

[dir='ltr'] .shape-pos-3 {
  right: 3rem;
}
[dir='rtl'] .shape-pos-3 {
  left: 3rem;
}

[dir='ltr'] .shape-pos-4 {
  right: 4rem;
}
[dir='rtl'] .shape-pos-4 {
  left: 4rem;
}

[dir='ltr'] .shape-pos-5 {
  right: -1.5rem;
}
[dir='rtl'] .shape-pos-5 {
  left: -1.5rem;
}

[dir='ltr'] .shape-pos-6 {
  right: 4rem;
}
[dir='rtl'] .shape-pos-6 {
  left: 4rem;
}

@media (min-width: 1024px) {
  [dir='ltr'] .shape-pos-2 {
    right: 6rem;
  }
  [dir='rtl'] .shape-pos-2 {
    left: 6rem;
  }

  [dir='ltr'] .shape-pos-3 {
    right: 4rem;
  }
  [dir='rtl'] .shape-pos-3 {
    left: 4rem;
  }

  [dir='ltr'] .shape-pos-4 {
    right: 5rem;
  }
  [dir='rtl'] .shape-pos-4 {
    left: 5rem;
  }

  [dir='ltr'] .shape-pos-5 {
    right: -2rem;
  }
  [dir='rtl'] .shape-pos-5 {
    left: -2rem;
  }

  [dir='ltr'] .shape-pos-6 {
    right: 5rem;
  }
  [dir='rtl'] .shape-pos-6 {
    left: 5rem;
  }
}

/* ============================================
   Theme Icon Toggle
   ============================================ */
body:not(.light) #themeToggle i::before {
  content: '\f186';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
}

body.light #themeToggle i::before {
  content: '\f185';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
}

/* ============================================
   Select Dropdown Arrow
   ============================================ */
.bg-select-arrow {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14'%3E%3Cpath fill='%230d6efd' d='M7 10L2 5h10z'/%3E%3C/svg%3E");

  background-repeat: no-repeat;
}

[dir='ltr'] .bg-select-arrow {
  background-position: right 0.9rem center;
  padding-right: 2.5rem;
}

[dir='rtl'] .bg-select-arrow {
  background-position: left 0.9rem center;
  padding-left: 2.5rem;
  padding-right: 1rem;
}

select option {
  background: #1a2332;
  color: white;
}

body.light select option {
  background: white;
  color: #1e293b;
}

/* ============================================
   Input Text Direction
   ============================================ */
[dir='rtl'] input,
[dir='rtl'] select {
  text-align: right;
  direction: rtl;
}

[dir='ltr'] input,
[dir='ltr'] select {
  text-align: left;
  direction: ltr;
}

/* ============================================
   Animations
   ============================================ */
@keyframes float {
  0%,
  100% {
    transform: translateY(0) rotate(-0.3deg);
  }
  50% {
    transform: translateY(-12px) rotate(0.3deg);
  }
}

.animate-float {
  animation: float 6s ease-in-out infinite;
  filter: drop-shadow(0 15px 35px rgba(0, 0, 0, 0.25));
}

body.light .animate-float {
  filter: drop-shadow(0 15px 35px rgba(99, 102, 241, 0.2));
}

@keyframes pulse-glow {
  0%,
  100% {
    box-shadow: 0 0 15px rgba(13, 110, 253, 0.4);
  }
  50% {
    box-shadow: 0 0 25px rgba(13, 110, 253, 0.6);
  }
}

.animate-pulse-glow {
  animation: pulse-glow 3s infinite;
}

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

.tick {
  animation: pop 0.35s cubic-bezier(0.2, 0.9, 0.3, 1);
}

/* ============================================
   Toast Notifications
   ============================================ */
.toast-card {
  background: rgba(26, 35, 50, 0.95);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  padding: 0.9rem 1.3rem;
  border-radius: 0.75rem;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.1);
  font-weight: 500;
  min-width: 280px;
}

body.light .toast-card {
  background: rgba(255, 255, 255, 0.95);
  color: #1e293b;
  box-shadow: 0 15px 50px rgba(99, 102, 241, 0.2);
  border-color: rgba(99, 102, 241, 0.3);
}

/* ============================================
   Image Loading Fix
   ============================================ */
.hero-img,
.shape-img {
  opacity: 1;
  transition: opacity 0.3s ease;
}

.hero-img.loading,
.shape-img.loading {
  opacity: 0.5;
}