/* login.css - HEY YO! login styles (animations + responsive) */

/* Reset */
* { margin:0; padding:0; box-sizing:border-box; }
html,body { height:100%; }
body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  min-height:100vh;
  overflow-x:hidden;
  background:#0b0f1a;
  color:#fff;
}

/* Animated gradient background */
.animated_background{
  position:fixed; inset:0;
  background: linear-gradient(135deg,#667eea 0%,#764ba2 25%,#f093fb 50%,#f5576c 75%,#4facfe 100%);
  background-size:400% 400%;
  animation: gradientShift 15s ease infinite;
  z-index:-2;
}
@keyframes gradientShift{
  0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}
}
.gradient_overlay{
  position:absolute; inset:0; background:rgba(0,0,0,0.12); z-index:-1;
}

/* floating orbs */
.floating_orbs{ position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.orb{ position:absolute; border-radius:50%; background:rgba(255,255,255,0.08); backdrop-filter: blur(8px); animation: floatOrb 20s ease-in-out infinite; }
.orb1{ width:120px;height:120px; left:8%; top:18%; animation-delay:0s;}
.orb2{ width:80px;height:80px; right:12%; top:8%; animation-delay:3s;}
.orb3{ width:150px;height:150px; left:70%; top:62%; animation-delay:6s;}
.orb4{ width:100px;height:100px; left:18%; bottom:20%; animation-delay:9s;}
.orb5{ width:60px;height:60px; right:30%; bottom:30%; animation-delay:12s;}
.orb6{ width:90px;height:90px; left:50%; top:80%; animation-delay:15s;}
@keyframes floatOrb {
  0%,100%{ transform:translateY(0) rotate(0); opacity:0.7 }
  50%{ transform:translateY(-50px) rotate(180deg); opacity:1 }
}

/* Nav header */
.nav_header{
  position:fixed; top:0; left:0; right:0;
  display:flex; justify-content:space-between; align-items:center;
  padding:14px 28px; z-index:1000;
  background:rgba(255,255,255,0.06); backdrop-filter: blur(12px);
  border-bottom:1px solid rgba(255,255,255,0.04);
}
.icr_logo{ display:flex; align-items:center; gap:12px; }
#main_logo{ height:60px; border-radius:10px; transition:transform .25s; box-shadow:0 10px 30px rgba(0,0,0,0.25); }
#main_logo:hover{ transform:scale(1.03) rotate(3deg); }
.brand_name{ font-weight:800; font-size:1.2rem; color:#fff; text-shadow:0 4px 18px rgba(0,0,0,0.35); }

/* nav list */
.nav{ display:flex; align-items:center; }
.nav_list{ display:flex; gap:20px; list-style:none; }
.nav_link{ color:#fff; text-decoration:none; padding:8px 14px; border-radius:14px; transition:all .2s; font-weight:500; }
.nav_link:hover{ background:rgba(255,255,255,0.08); transform:translateY(-2px); }

/* mobile toggles */
.nav_toggle, .nav_close{ display:none; font-size:1.3rem; color:#fff; cursor:pointer; }

/* main layout */
.login_body{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  padding:100px 20px 60px; position:relative; z-index:10;
}
.login_page{
  width:100%; max-width:1100px; display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center;
}

/* welcome */
.welcome_section{ text-align:center; animation:fadeInLeft .9s ease; }
.welcome_animation{ display:flex; justify-content:center; gap:16px; margin-bottom:30px; }
.chat_bubble{ width:74px; height:74px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.8rem; background:rgba(255,255,255,0.12); backdrop-filter: blur(10px); box-shadow:0 12px 30px rgba(0,0,0,0.3); animation:bubbleBounce 3s ease-in-out infinite; }
.bubble1{ animation-delay:0s } .bubble2{ animation-delay:.4s } .bubble3{ animation-delay:.8s }
@keyframes bubbleBounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-18px) scale(1.05)} }

.main_title{ font-size:3.6rem; font-weight:800; color:#fff; margin-bottom:8px; text-shadow: 3px 3px 18px rgba(0,0,0,0.35); line-height:1.05; }
.main_subtitle{ color:rgba(255,255,255,0.9); font-size:1.15rem; margin-top:8px; }

/* form card */
.login_card{
  background: rgba(255,255,255,0.08); backdrop-filter: blur(18px); border-radius:20px; padding:36px; position:relative;
  box-shadow:0 30px 60px rgba(0,0,0,0.35); border:1px solid rgba(255,255,255,0.06);
}
.login_card::before{ content:''; position:absolute; top:0; left:-120%; width:100%; height:100%; background:linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent); animation:shimmer 4s linear infinite; }
@keyframes shimmer{ 0%{left:-120%} 100%{left:120%} }

.embed_logo_container{ text-align:center; margin-bottom:18px; }
.embed_logo{ height:100px; border-radius:14px; box-shadow:0 12px 34px rgba(0,0,0,0.35); transition:transform .3s; }
.embed_logo:hover{ transform:scale(1.08) rotate(6deg); }
.logo_glow{ position:absolute; top:-8px; left:-8px; right:-8px; bottom:-8px; background:linear-gradient(45deg,#667eea,#764ba2,#f093fb); border-radius:18px; z-index:-1; opacity:.45; animation:logoGlow 3s ease-in-out infinite alternate; }
@keyframes logoGlow{ from{opacity:.3; transform:scale(.98)} to{opacity:.7; transform:scale(1.04)} }

.login_header{ font-size:1.35rem; font-weight:700; margin-bottom:6px; color:#fff; text-align:center; }
.login_subheader{ font-size:.95rem; color:rgba(255,255,255,0.85); text-align:center; margin-bottom:12px; }

/* inputs */
.inputgroup{ position:relative; margin-bottom:20px; }
.inputgroup input{
  width:100%; padding:16px 56px 16px 56px; background:rgba(255,255,255,0.04); border:2px solid rgba(255,255,255,0.06);
  border-radius:12px; color:#fff; font-size:1rem; transition:all .18s; backdrop-filter: blur(8px);
}
.inputgroup input:focus{ outline:none; border-color:rgba(255,255,255,0.18); background:rgba(255,255,255,0.06); box-shadow:0 10px 30px rgba(255,255,255,0.02); }
.inputgroup label{ position:absolute; left:56px; top:50%; transform:translateY(-50%); font-weight:500; color:rgba(255,255,255,0.7); transition:all .18s; pointer-events:none; }
.inputgroup.focused label, .inputgroup.has_value label{ top:8px; left:48px; font-size:.82rem; background:rgba(102,126,234,0.82); padding:4px 8px; border-radius:8px; color:#fff; }
.input_icon{ position:absolute; left:20px; top:50%; transform:translateY(-50%); color:rgba(255,255,255,0.7); font-size:1.1rem; transition:all .15s; }
.inputgroup.focused .input_icon{ color:#fff; transform:translateY(-50%) scale(1.05); }
.password_toggle{ position:absolute; right:18px; top:50%; transform:translateY(-50%); cursor:pointer; color:rgba(255,255,255,0.6); font-size:1.05rem; }

/* highlight */
.input_highlight{ position:absolute; bottom:0; left:50%; width:0; height:3px; background:linear-gradient(90deg,#667eea,#764ba2); transition:all .25s; transform:translateX(-50%); border-radius:2px; }
.inputgroup.focused .input_highlight{ width:100%; }

/* forgot */
.forgot{ text-align:right; margin-bottom:14px; }
.forgot_link{ color:rgba(255,255,255,0.85); cursor:pointer; display:inline-flex; gap:8px; align-items:center; font-size:.92rem; }
.forgot_link:hover{ color:#fff; transform:translateY(-2px); }

/* buttons */
.submit_btn{ width:100%; padding:14px 18px; border:none; border-radius:12px; font-weight:700; cursor:pointer; transition:all .18s; position:relative; overflow:hidden; display:flex; gap:10px; align-items:center; justify-content:center; }
.primary_btn{ background: linear-gradient(135deg,#667eea 0%,#764ba2 100%); color:#fff; box-shadow:0 15px 38px rgba(102,126,234,0.2); }
.secondary_btn{ background: linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03)); color:#fff; border:1px solid rgba(255,255,255,0.06); box-shadow:0 10px 26px rgba(0,0,0,0.12); }
.submit_btn:hover{ transform:translateY(-3px); }
.btn_loader{ display:none; position:absolute; left:16px; }
.submit_btn.loading .btn_loader{ display:block; }
.btn_text{ display:inline-block; transition:opacity .18s; }
.submit_btn.loading .btn_text{ opacity:0; }
.spinner{ width:18px; height:18px; border:2px solid rgba(255,255,255,0.25); border-top:2px solid #fff; border-radius:50%; animation:spin 1s linear infinite; }
@keyframes spin{ 0%{transform:rotate(0)}100%{transform:rotate(360deg)} }
.btn_ripple{ position:absolute; border-radius:50%; background:rgba(255,255,255,0.18); transform:scale(0); pointer-events:none; }
.btn_ripple.active{ animation:ripple .6s ease-out; }
@keyframes ripple{ to{ transform:scale(2); opacity:0 } }

/* active users */
.active_users_section{ text-align:center; margin-top:10px; padding-top:12px; border-top:1px solid rgba(255,255,255,0.04); }
.last_embed{ display:flex; gap:10px; justify-content:center; align-items:center; flex-wrap:wrap; margin-top:10px; }
.last_embed > div{ width:40px; height:40px; border-radius:50%; box-shadow:0 8px 20px rgba(0,0,0,0.2); animation:userPulse 3s ease-in-out infinite; }
@keyframes userPulse{ 0%,100%{ box-shadow:0 8px 20px rgba(0,0,0,0.2), 0 0 0 0 rgba(255,154,158,0.6) } 50%{ box-shadow:0 8px 20px rgba(0,0,0,0.2), 0 0 0 14px rgba(255,154,158,0) } }

/* air bubbles (floating) */
.air_bubbles{ position:fixed; inset:0; pointer-events:none; z-index:1; }
.air{ position:absolute; bottom:-120px; width:50px; height:50px; background:rgba(255,255,255,0.08); border-radius:50%; opacity:0.7; animation:bubble 15s infinite linear; }
.air1{ left:10%; width:60px; height:60px; animation-delay:0s; }
.air2{ left:20%; width:20px; height:20px; animation-delay:2s; animation-duration:12s; }
.air3{ left:35%; width:40px; height:40px; animation-delay:4s; }
.air4{ left:50%; width:80px; height:80px; animation-delay:0s; animation-duration:18s; }
.air5{ left:70%; width:35px; height:35px; animation-delay:3s; }
.air6{ left:80%; width:25px; height:25px; animation-delay:7s; animation-duration:20s; }
@keyframes bubble{
  0%{ transform:translateY(0vh) rotate(0deg); opacity:0 }
  10%{ opacity:.7 }
  90%{ opacity:.7 }
  100%{ transform:translateY(-100vh) rotate(360deg); opacity:0 }
}

/* notifications */
#notification_container{ position:fixed; top:20px; right:20px; z-index:2000; }
.notification{
  background:rgba(255,255,255,0.96); color:#111; padding:12px 16px; border-radius:10px; display:flex; gap:10px; align-items:center;
  box-shadow:0 12px 34px rgba(0,0,0,0.18); transform:translateX(360px); transition:all .28s; max-width:360px;
}
.notification.show{ transform:translateX(0); }
.notification.error{ border-left:4px solid #ff6b6b; }
.notification i{ color:#667eea; }
.notification.error i{ color:#ff6b6b; }

/* responsive */
@media (max-width:1024px){
  .login_page{ grid-template-columns:1fr; gap:30px; text-align:center; }
  .main_title{ font-size:2.6rem; }
}
@media (max-width:768px){
  .nav_list{ position:fixed; top:0; right:-100%; width:100%; height:100vh; background:rgba(0,0,0,0.95); flex-direction:column; justify-content:center; align-items:center; transition:all .25s; }
  .nav_list.show{ right:0; }
  .nav_toggle,.nav_close{ display:block; color:#fff; font-size:1.4rem; }
  .login_card{ padding:20px; }
}
@media (max-width:480px){
  .login_body{ padding:110px 14px 30px; }
  .main_title{ font-size:1.9rem; }
  .inputgroup input{ padding:14px 50px 14px 50px; font-size:.95rem; }
  #notification_container{ left:10px; right:10px; }
}

/* small helpers */
.fadeInLeft{ animation:fadeInLeft .8s ease; }
@keyframes fadeInLeft{ from{opacity:0; transform:translateX(-40px)} to{opacity:1; transform:none} }





/* === Mobile nav fix: make the nav menu slide-in on small screens ===
   Add this at the END of login.css so it overrides earlier rules.
*/
@media (max-width: 768px) {
  /* ensure the nav_list is off-canvas by default and full-screen when open */
  .nav .nav_list {
    position: fixed;
    top: 0;
    right: -100%;
    width: 100%;
    height: 100vh;
    background: rgba(0,0,0,0.95);
    backdrop-filter: blur(8px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
    transition: right .28s ease;
    z-index: 2500;
    padding: 20px;
  }

  /* show when parent .nav has .show (your JS toggles .show on #nav_menu/.nav) */
  .nav.show .nav_list {
    right: 0 !important;
  }

  /* make the toggles visible on mobile */
  .nav_toggle,
  .nav_close {
    display: block;
    color: #fff;
    font-size: 1.4rem;
  }

  /* ensure nav links are large tap targets */
  .nav_list .nav_link {
    font-size: 1.05rem;
    padding: 12px 18px;
    width: 100%;
    text-align: center;
  }
}



/* ===== Mobile nav close button placement & style =====
   Paste at the END of login.css
*/
.nav_close { display: none; }

/* Mobile: show close icon and ensure it's above the overlay */
@media (max-width: 768px) {
  .nav_close {
    display: block;
    position: fixed;    /* fixed so it sits above the full-screen menu */
    top: 18px;
    right: 18px;
    z-index: 2601;
    font-size: 1.6rem;
    color: #fff;
    cursor: pointer;
    background: rgba(0,0,0,0.25);
    padding: 6px 8px;
    border-radius: 6px;
  }

  /* ensure toggle (hamburger) stays visible and above background */
  .nav_toggle {
    z-index: 2602;
    display: block;
  }

  /* ensure nav_list (overlay) covers full screen */
  .nav .nav_list {
    z-index: 2600;
  }

  /* larger tap targets for mobile links */
  .nav_list .nav_link {
    padding: 14px 18px;
    font-size: 1.05rem;
    width: 100%;
    text-align: center;
  }
}


/* Floating-label CSS fallback (works without JavaScript) */
.inputgroup label {
  position: absolute;
  left: 56px;                 /* matches input left padding */
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255,255,255,0.7);
  font-size: 1rem;
  pointer-events: none;
  transition: all .18s ease;
  background: transparent;
  padding: 0 6px;
}

/* When input focused OR when placeholder not shown (user typed) move the label up */
.inputgroup input:focus + label,
.inputgroup input:not(:placeholder-shown) + label {
  top: 8px;
  left: 48px;
  font-size: .82rem;
  color: #ffffff;
  background: rgba(102,126,234,0.82);
  border-radius: 8px;
  padding: 4px 8px;
}

/* Also keep existing .focused/.has_value classes working (JS compatibility) */
.inputgroup.focused label,
.inputgroup.has_value label {
  top: 8px;
  left: 48px;
  font-size: .82rem;
  color: #ffffff;
  background: rgba(102,126,234,0.82);
  border-radius: 8px;
  padding: 4px 8px;
}

/* reduce label occlusion on long typed text */
.inputgroup input {
  /* ensure text sits above label when label is moved */
  position: relative;
  z-index: 2;
}

/* ensure label sits above input background but below caret */
.inputgroup label {
  z-index: 3;
}