@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700;800&display=swap');

:root {
  --ertiqa-teal: #16BAD6;
  --ertiqa-dark-teal: #0F8194;
  --ertiqa-dark: #0b1320;
  --ertiqa-card: #111c2e;
}

body.auth-page {
  background-color: var(--ertiqa-dark) !important;
  margin: 0 !important;
  overflow: hidden !important;
  font-family: 'Poppins', sans-serif !important;
}

/* Force App Container to Right Side */
body.auth-page #app {
  position: absolute !important;
  right: 0 !important;
  width: 58% !important;
  height: 100vh !important;
  background-color: var(--ertiqa-dark) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
}

/* HIDE ALL DEFAULT LOGOS AND BROKEN IMAGES ON RIGHT SIDE */
body.auth-page #app img,
body.auth-page #app svg,
.auth-wrapper img,
.auth-wrapper svg,
.auth-wrapper a > img {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  width: 0 !important;
}

/* STYLING FOR NEW HEADINGS ON RIGHT SIDE */
.ertiqa-main-heading {
  display: block !important;
  font-size: 2.1rem !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  margin-bottom: 0.6rem !important;
  line-height: 1.25 !important;
  text-align: center !important;
  font-family: 'Poppins', sans-serif !important;
}

.ertiqa-sub-heading {
  display: block !important;
  font-size: 0.92rem !important;
  font-weight: 400 !important;
  color: rgba(255, 255, 255, 0.75) !important;
  line-height: 1.5 !important;
  text-align: center !important;
  margin-bottom: 1.5rem !important;
  font-family: 'Poppins', sans-serif !important;
}

/* RIGHT SIDE FORM CARD STYLING */
.auth-wrapper .bg-white, 
.auth-wrapper .shadow-lg, 
.login-box {
  background-color: var(--ertiqa-card) !important;
  border: 1px solid rgba(22, 186, 214, 0.2) !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6) !important;
  border-radius: 16px !important;
  width: 100% !important;
  max-width: 420px !important;
  padding: 2.5rem !important;
}

.auth-wrapper label, 
.auth-wrapper span, 
.auth-wrapper a {
  color: #ffffff !important;
}

.auth-wrapper input {
  background-color: #1a2638 !important;
  border: 1px solid #2d3f58 !important;
  color: #ffffff !important;
  border-radius: 8px !important;
  padding: 0.75rem !important;
}

.auth-wrapper input:focus {
  border-color: var(--ertiqa-teal) !important;
  box-shadow: 0 0 0 2px rgba(22, 186, 214, 0.25) !important;
}

.auth-wrapper button[type="submit"],
.auth-wrapper .button.primary {
  background-color: var(--ertiqa-teal) !important;
  border-color: var(--ertiqa-teal) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  padding: 0.85rem !important;
  font-size: 1.05rem !important;
  transition: all 0.3s ease !important;
}

.auth-wrapper button[type="submit"]:hover {
  background-color: var(--ertiqa-dark-teal) !important;
}

/* LEFT PANEL STYLING (KEPT PERFECT AS USER LIKED) */
#ertiqa-premium-panel {
  position: absolute;
  left: 0;
  top: 0;
  width: 42%;
  height: 100vh;
  background: linear-gradient(145deg, #0b1320 0%, #0F8194 50%, #16BAD6 100%);
  overflow: hidden;
  z-index: 9999;
  font-family: 'Poppins', sans-serif;
  display: flex;
  flex-direction: column;
}

.bg-circle { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, 0.04); z-index: 1; }
.bg-circle-1 { width: 500px; height: 500px; top: -150px; right: -150px; }
.bg-circle-2 { width: 300px; height: 300px; bottom: 10%; left: -100px; }
.bg-circle-3 { width: 150px; height: 150px; bottom: 20%; right: 10%; background: rgba(255, 255, 255, 0.06); }
.bg-dots {
  position: absolute; top: 20px; right: 20px; width: 100px; height: 100px;
  background-image: radial-gradient(rgba(255,255,255,0.15) 2px, transparent 2px);
  background-size: 15px 15px; z-index: 1;
}

.panel-content {
  position: relative; z-index: 2; padding: 3rem 0 3rem 4rem;
  display: flex; flex-direction: column; height: 100%; box-sizing: border-box;
}

.logo-box {
  background: #ffffff; border-radius: 12px; padding: 12px 20px;
  display: inline-flex; align-items: center; justify-content: center;
  width: fit-content; box-shadow: 0 10px 25px rgba(0,0,0,0.15); margin-bottom: 3rem;
}
.logo-box img { height: 40px !important; width: auto !important; object-fit: contain !important; display: block !important; }

.hero-title { font-size: 2.6rem; font-weight: 800; line-height: 1.25; color: #ffffff; margin-bottom: 1rem; padding-right: 2rem; }
.hero-subtitle { font-size: 0.95rem; color: rgba(255, 255, 255, 0.9); line-height: 1.6; margin-bottom: 3rem; font-weight: 400; padding-right: 3rem; }

.ertiqa-swiper { width: 100%; margin-bottom: auto; padding-bottom: 40px !important; }
.swiper-slide {
  background: #ffffff; border-radius: 16px; padding: 1.8rem; width: 75% !important;
  box-shadow: 0 15px 35px rgba(0,0,0,0.1); display: flex; flex-direction: column;
  box-sizing: border-box; opacity: 0.5; transform: scale(0.9); transition: all 0.3s ease;
}
.swiper-slide-active { opacity: 1; transform: scale(1); }
.slide-icon {
  width: 45px; height: 45px; background: linear-gradient(135deg, #16BAD6, #0F8194);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  margin-bottom: 1.2rem; box-shadow: 0 8px 15px rgba(22, 186, 214, 0.3);
}
.slide-icon svg { width: 22px; height: 22px; fill: #fff; }
.swiper-slide h4 { font-size: 1.15rem; font-weight: 700; color: #111c2e; margin: 0 0 0.5rem 0; }
.swiper-slide p { font-size: 0.85rem; color: #555555; line-height: 1.5; margin: 0; }
.swiper-pagination-bullet { background: rgba(255,255,255,0.4) !important; opacity: 1 !important; width: 10px !important; height: 10px !important; }
.swiper-pagination-bullet-active { background: #ffffff !important; width: 25px !important; border-radius: 5px !important; }
.swiper-pagination { text-align: left !important; padding-left: 5px; }

@media (max-width: 900px) {
  #ertiqa-premium-panel { display: none !important; }
  body.auth-page #app { width: 100% !important; }
}