/* ====================================================================
    THEME VARIABLES
==================================================================== */
:root {
  /* Background images */
  --bg-image-light: url('images/background-lights.jpg');
  --bg-image-dark: url('images/background-stars.jpg');
  --bg-image: var(--bg-image-light);

  /* Light (default) */
  --body-bg: #f6f5f7;

  /* Glass theme + accent */
  --container-bg: rgba(255, 255, 255, 0.4);
  --form-bg: transparent;
  --overlay-bg: linear-gradient(to right, #00c6ff, #0072ff);
  --overlay-color: #ffffff;

  --text-color: #333;
  --link-color: #333;

  --input-bg: rgba(255, 255, 255, 0.5);
  --input-color: #333;
  --input-icon-color: #555;
  --placeholder-color: #555;

  --button-bg: #0072ff;
  --button-border: 1px solid #0072ff;
  --button-color: #fff;

  --ghost-button-bg: transparent;
  --ghost-button-border: 1px solid #fff;
  --ghost-button-color: #fff;

  --social-border: 1px solid rgba(51, 51, 51, 0.3);
  --social-color: #333;

  --select-bg: rgba(255,255,255,0.5);
  --select-color: #333;
  --select-option-bg: #fff;
  --select-option-color: #333;

  --toggle-icon-color: #0072ff;

  /* Modals */
  --modal-bg: #87CEEB;          /* success cloud */
  --modal-text-color: #fff;
  --modal-cloud-color: #fff;
  --modal-close-button: #fff;
  --modal-close-hover: #eee;

  --text-modal-bg: #fff;          /* policy/terms */
  --text-modal-text-color: #333;
  --text-modal-close-color: #aaa;
  --text-modal-close-hover: #333;
}

/* Dark mode overrides */
body.dark-mode {
  --bg-image: var(--bg-image-dark);
  --body-bg: #000;

  --container-bg: rgba(0, 0, 0, 0.3);
  --overlay-bg: linear-gradient(to right, #0072ff, #00c6ff);
  --overlay-color: #ffffff;

  --text-color: #ffffff;
  --link-color: #ffffff;

  --input-bg: rgba(255, 255, 255, 0.1);
  --input-color: #ffffff;
  --input-icon-color: #aaa;
  --placeholder-color: #bbb;

  --button-bg: #00c6ff;
  --button-border: 1px solid #00c6ff;
  --button-color: #fff;

  --social-border: 1px solid rgba(255,255,255,0.2);
  --social-color: #fff;

  --select-bg: rgba(255,255,255,0.1);
  --select-color: #fff;
  --select-option-bg: #333;
  --select-option-color: #fff;

  --toggle-icon-color: #fff;
  
  /* ========== BUG FIX: MODAL TEXT VISIBILITY ========== */
  --text-modal-bg: #222; /* Darker bg for modal */
  --text-modal-text-color: #eee; /* Brighter text for modal */
  --text-modal-close-color: #aaa;
  --text-modal-close-hover: #fff;
  --social-border: 1px solid rgba(255, 255, 255, 0.2); /* Ensure border is visible */
  /* ==================================================== */
}

/* ====================================================================
    BASE
==================================================================== */
* { box-sizing: border-box; }

body {
  background-color: var(--body-bg);
  background-image: var(--bg-image);
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;

  position: relative;
  display: flex;
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center horizontally */
  flex-direction: column;

  /* FONT AND FOOTER FIX CHANGES */
  font-family: 'Inter', sans-serif; /* <-- UPDATED FONT */
  min-height: 100vh; /* <-- FOOTER FIX: Allow body to grow */
  margin: 0; 
  padding: 0;
  overflow-x: hidden; /* Prevent horizontal scroll */
  
  transition: background-image .5s ease-in-out;
}

/* Theme switch */
.theme-switch-container{
  position:absolute; top:20px; right:20px;
  display:flex; align-items:center; z-index:1001;
}
.theme-switch-container i{
  color:var(--toggle-icon-color); margin:0 5px; font-size:16px; transition:color .3s, transform .3s;
}
/* ========== ICON HOVER FIX ========== */
.theme-switch-container i:hover {
  transform: scale(1.15);
}
/* =================================== */

.theme-switch{ position:relative; display:inline-block; width:44px; height:24px; }
.theme-switch input{ opacity:0; width:0; height:0; }
.slider{ position:absolute; cursor:pointer; inset:0; background:#ccc; transition:.4s; }
.slider:before{
  position:absolute; content:""; height:18px; width:18px; left:3px; bottom:3px;
  background:#fff; transition:.4s;
}
input:checked + .slider{ background:#555; }
body.dark-mode input:checked + .slider{ background:#87CEEB; }
input:checked + .slider:before{ transform: translateX(20px); }
.slider.round{ border-radius:24px; } .slider.round:before{ border-radius:50%; }

/* Text */
h1{ font-weight:700; margin:0; color:var(--text-color); }
p{ font-size:14px; font-weight:100; line-height:20px; letter-spacing:.5px; margin:20px 0 30px; color:var(--overlay-color); }
form p{ color: var(--text-color); }
span{ font-size:12px; color:var(--text-color); }
a{ color:var(--link-color); font-size:14px; text-decoration:none; margin:15px 0; }

/* Buttons */
button{
  border-radius:20px; border:var(--button-border);
  background:var(--button-bg); color:var(--button-color);
  font-size:12px; font-weight:700; padding:12px 45px; letter-spacing:1px; text-transform:uppercase;
  transition: transform 80ms ease-in, background-color .3s, border-color .3s, filter .25s;
  cursor:pointer;
}
button:active{ transform: scale(.95); }
button:focus{ outline: none; }
button.ghost{ background:var(--ghost-button-bg); border-color:var(--ghost-button-border); color:var(--ghost-button-color); }

/* Forms */
form{
  background: var(--form-bg);
  display:flex; align-items:center; justify-content:center; flex-direction:column;
  padding:0 50px; height:100%; text-align:center; transition: background-color .3s ease;
}
input{
  background: var(--input-bg); color:var(--input-color);
  border:none; padding:12px 15px; margin:8px 0; width:100%;
  border-radius:5px; transition: background-color .3s, color .3s;
}
input::placeholder{ color:var(--placeholder-color); opacity:1; }

.password-wrapper{ position:relative; width:100%; }
.password-wrapper input{ padding-right:45px; }
.password-wrapper i{
  position:absolute; top:50%; right:15px; transform:translateY(-50%);
  cursor:pointer; color:var(--input-icon-color);
  transition: color .3s, transform .2s; /* Added transition */
}
/* ========== ICON HOVER FIX ========== */
.password-wrapper i:hover{ 
  color:var(--text-color);
  transform: translateY(-50%) scale(1.1);
}
/* =================================== */

#password-feedback{ font-size:12px; height:15px; margin-top:5px; text-align:left; width:100%; }

/* Container (glass) */
.container{
  background: var(--container-bg);
  border-radius:10px;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 8px 32px rgba(0,0,0,.37);
  position:relative; overflow:hidden;
  width:768px; max-width:100%; min-height:480px;
  transition: background-color .3s, box-shadow .3s;

  /* FOOTER FIX: Add margins to center vertically and provide space */
  margin-top: 20px;
  margin-bottom: 20px;
}
.form-container{ position:absolute; top:0; height:100%; transition: all .6s ease-in-out; }
.sign-in-container{ left:0; width:50%; z-index:2; opacity:1; }
.sign-up-container{ left:0; width:50%; z-index:1; opacity:0; }

.social-container{ margin:20px 0; }
.social-container a{
  border: var(--social-border);
  border-radius:50%; display:inline-flex; justify-content:center; align-items:center;
  margin:0 5px; height:40px; width:40px; color:var(--social-color);
  background: rgba(255,255,255,.1);
  transition: background-color .3s, color .3s, border-color .3s, transform .2s ease-out; /* <-- Updated transition */
}

/* ========== ICON HOVER FIX ========== */
.social-container a:hover{
  color:var(--button-color); 
  background: var(--button-bg); 
  border-color: var(--button-bg); 
  transform: scale(1.15); /* <-- Updated hover effect */
  box-shadow: 0 4px 12px rgba(0, 114, 255, 0.3);
}
body.dark-mode .social-container a:hover {
  box-shadow: 0 4px 12px rgba(0, 198, 255, 0.3);
}
/* =================================== */

/* Overlay panels */
.overlay-container{ position:absolute; top:0; left:50%; width:50%; height:100%; overflow:hidden; transition: transform .6s ease-in-out; z-index:100; }
.overlay{
  background: var(--overlay-bg); color: var(--overlay-color);
  background-repeat:no-repeat; background-size:cover; background-position:0 0;
  position:relative; left:-100%; height:100%; width:200%;
  transform: translateX(0); transition: transform .6s ease-in-out, background .3s ease;
}
.overlay-panel{
  position:absolute; display:flex; align-items:center; justify-content:center; flex-direction:column;
  padding:0 40px; text-align:center; top:0; height:100%; width:50%;
  transform: translateX(0); transition: transform .6s ease-in-out;
}
.overlay-panel h1{ color: var(--overlay-color); }
.overlay-left{ transform: translateX(-20%); }
.overlay-right{ right:0; transform: translateX(0); }

.container.right-panel-active .sign-in-container{ transform: translateX(100%); opacity:0; }
.container.right-panel-active .overlay-container{ transform: translateX(-100%); }
.container.right-panel-active .sign-up-container{ transform: translateX(100%); opacity:1; z-index:5; animation: show .6s; }
@keyframes show { 0%,49.99%{opacity:0;z-index:1;} 50%,100%{opacity:1;z-index:5;} }
.container.right-panel-active .overlay{ transform: translateX(50%); }
.container.right-panel-active .overlay-left{ transform: translateX(0); }
.container.right-panel-active .overlay-right{ transform: translateX(20%); }

/* Modals */
.modal{
  display:none; position:fixed; inset:0; z-index:1000;
  background: rgba(0,0,0,.6); animation: fadeIn .5s;
}
.cloud-modal-content{
  background: var(--modal-bg); color: var(--modal-text-color);
  margin: 15% auto; padding:30px; width:90%; max-width:450px; text-align:center;
  border-radius:20px; box-shadow:0 5px 15px rgba(0,0,0,.3); position:relative; overflow:hidden; animation: slideIn .5s;
  text-shadow:1px 1px 3px rgba(0,0,0,.2);
}
.cloud-modal-content h2{ color: var(--modal-text-color); }
.cloud{ width:200px; height:60px; background: var(--modal-cloud-color); border-radius:200px; position:absolute; opacity:.8; }
.cloud:before, .cloud:after{ content:''; position:absolute; background: var(--modal-cloud-color); width:100px; height:80px; top:-15px; left:10px; border-radius:100px; transform: rotate(30deg); }
.cloud:after{ width:120px; height:120px; top:-55px; right:15px; left:auto; }
.cloud-1{ top:20%; left:-250px; animation: drift 15s linear infinite; }
.cloud-2{ top:40%; left:-300px; animation: drift 20s linear infinite 5s; }
.cloud-3{ top:65%; left:-200px; animation: drift 18s linear infinite 8s; }
.cloud-4{ bottom:15%; right:-250px; animation: drift-right 16s linear infinite 3s; }
.cloud-5{ bottom:35%; right:-200px; animation: drift-right 22s linear infinite 10s; }
@keyframes drift{ from{transform:translateX(0)} to{transform:translateX(800px)} }
@keyframes drift-right{ from{transform:translateX(0)} to{transform:translateX(-800px)} }
.close-button{ color:var(--modal-close-button); position:absolute; top:10px; right:20px; font-size:30px; font-weight:700; }
.close-button:hover{ color:var(--modal-close-hover); cursor:pointer; }

.modal-content-text{
  background: var(--text-modal-bg); 
  color: var(--text-modal-text-color);
  margin:10% auto; padding:25px 30px; border-radius:10px; width:90%; max-width:700px;
  box-shadow:0 5px 15px rgba(0,0,0,.3); position:relative; animation: slideIn .5s;
  transition: background .3s, color .3s; /* Added transition */
}
.modal-content-text h2{
  color:var(--text-modal-text-color); 
  margin-top:0; padding-bottom:10px; 
  border-bottom:1px solid var(--social-border);
  transition: color .3s, border-color .3s; /* Added transition */
}

/* ========== BUG FIX: MODAL TEXT VISIBILITY ========== */
.modal-content-text p, .modal-content-text ul{ 
  color: var(--text-modal-text-color); 
  font-weight: 400; /* Make text readable */
  opacity: 0.95; /* Ensure full opacity */
  line-height: 1.6;
  transition: color .3s;
}
/* ==================================================== */

.modal-text-content{ max-height:50vh; overflow-y:auto; padding-right:15px; }
.modal-text-content::-webkit-scrollbar{ width:8px; }
.modal-text-content::-webkit-scrollbar-track{ background: var(--input-bg); border-radius:4px; }
.modal-text-content::-webkit-scrollbar-thumb{ background: var(--input-icon-color); border-radius:4px; }
.modal-text-content::-webkit-scrollbar-thumb:hover{ background: var(--text-modal-close-hover); }
.close-button-text{ 
  color:var(--text-modal-close-color); 
  position:absolute; top:15px; right:25px; 
  font-size:30px; font-weight:700;
  transition: color .3s;
}
.close-button-text:hover{ color:var(--text-modal-close-hover); cursor:pointer; }

@keyframes fadeIn{ from{opacity:0} to{opacity:1} }
@keyframes slideIn{ from{transform:translateY(-50px); opacity:0} to{transform:translateY(0); opacity:1} }

/* Select */
select{
  background: var(--select-bg); color: var(--select-color); border:none;
  padding:12px 15px; margin:8px 0; width:100%; font-family:'Inter',sans-serif; font-size:12px;
  border-radius:5px; appearance:none; cursor:pointer; transition: background .3s, color .3s;
}
select option[disabled]{ color: var(--placeholder-color); }
select option{ background: var(--select-option-bg); color: var(--select-option-color); }

/* Remember me */
.remember-me-container{
  width:100%; display:flex; align-items:center; justify-content:flex-start;
  margin:10px 0 15px 0; font-size:14px; color: var(--text-color);
}
.remember-me-container input[type="checkbox"]{
  width:16px; height:16px; margin:0 8px 0 0;
  appearance:none; -webkit-appearance:none; background: var(--input-bg);
  border:1px solid var(--social-border); border-radius:3px; position:relative; cursor:pointer;
}
.remember-me-container input[type="checkbox"]:checked{ background: var(--button-bg); border-color: var(--button-bg); }
.remember-me-container input[type="checkbox"]:checked::after{
  content:'\2713'; font-size:12px; font-weight:700; color: var(--button-color);
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
}
.remember-me-container label{ cursor:pointer; margin:0; color:var(--text-color); font-size:14px; font-weight:400; }

/* Language switcher */
.language-switcher-container {
  display: flex;
  align-items: center;
  gap: 8px; /* Space between icon and select */
}
.language-switcher-container i {
  color: var(--text-color);
  font-size: 18px;
  opacity: .7;
  transition: opacity .3s, color .3s, transform .3s;
}
.language-switcher-container select{
  background:transparent; color:var(--text-color); border:none; padding:0; margin:0;
  font-family:'Inter',sans-serif; font-size:13px; font-weight:400; opacity:.8; cursor:pointer; appearance:none;
}

/* ========== ICON HOVER FIX ========== */
.language-switcher-container:hover i {
  opacity: 1;
  transform: scale(1.1);
}
.language-switcher-container select:hover{ 
  opacity:1; 
}
/* =================================== */

.language-switcher-container select option{ background: var(--select-option-bg); color: var(--select-option-color); }

/* Footer */
.page-footer{
  width:100%; /* <-- FOOTER FIX: Ensure it spans width */
  padding:15px 40px; background:transparent; z-index:10; color:var(--text-color);
  border-top:1px solid var(--social-border); transition: color .3s, border-color .3s;
  
  /* FOOTER FIX: This pushes the footer to the bottom */
  margin-top: auto; 
}
.page-footer .footer-content{
  max-width:1200px; margin:0 auto; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:20px;
}
.footer-dev-info{ display:flex; align-items:center; gap:15px; }
.footer-profile-pic{ width:40px; height:40px; border-radius:50%; object-fit:cover; border:1px solid var(--social-border); }
.footer-dev-text{ text-align:left; }
.page-footer p{ margin:0; font-size:13px; font-weight:400; opacity:.8; line-height:1.4; }
.page-footer .copyright{ font-size:12px; opacity:.6; }
.footer-policy-links{ display:flex; gap:20px; }

/* ========== BUG FIX: VISIBILITY ========== */
.page-footer .footer-policy-links a{ 
  font-size:13px; 
  color:var(--text-color); 
  opacity: 1; /* <-- FIX: Was 0.8 */
  font-weight: 600; /* <-- FIX: Added bold */
  text-decoration: underline; /* <-- FIX: Added underline */
  transition: opacity .3s, color .3s; 
  cursor:pointer; 
  margin:0; 
}
.page-footer .footer-policy-links a:hover{ 
  opacity:0.8; /* <-- FIX: Inverted hover opacity */
  text-decoration:none; 
}
/* ======================================== */

.footer-social-links{ display:flex; align-items:center; gap:20px; }
.footer-social-links .footer-icon{ 
  color:var(--text-color); 
  font-size:18px; 
  opacity:.7; 
  transition: opacity .3s, color .3s, transform .2s ease-out; /* <-- Updated transition */
  margin:0; 
}

/* ========== ICON HOVER FIX ========== */
.footer-social-links .footer-icon:hover{ 
  opacity:1; 
  transform: scale(1.15); /* <-- Updated hover effect */
}
/* =================================== */


/* Desktop footer pin */
@media (min-width:769px){
  /* FOOTER FIX: Removed absolute positioning */
  .page-footer{ /* position:absolute; bottom:0; left:0; */ }
  
  body{
    /* FOOTER FIX: Removed padding-bottom and overflow-y */
    /* padding-bottom:70px; overflow-y:auto; */
  }
}

/* Mobile layout */
@media (max-width:768px){
  body{ 
    height:auto; /* Keep min-height:100vh from base */
    overflow-y:auto; 
  }
  .theme-switch-container{ top:15px; right:15px; }
  .theme-switch-container i{ font-size:14px; }
  .theme-switch{ width:40px; height:22px; }
  .slider:before{ height:16px; width:16px; left:3px; bottom:3px; }
  input:checked + .slider:before{ transform: translateX(18px); }

  .container{
    width:100vw; min-height:100vh; border-radius:0; box-shadow:none;
    backdrop-filter:none; -webkit-backdrop-filter:none; border:none;
    background: rgba(255,255,255,.9);
    margin-top: 0; /* Remove desktop margins */
    margin-bottom: 0;
  }
  body.dark-mode .container{ background: rgba(0,0,0,.85); }

  .form-container{ width:100%; position:absolute; top:0; left:0; height:100%; min-height:100vh; justify-content:center; padding:0 40px; }
  .sign-in-container{ z-index:10; opacity:1; }
  .sign-up-container{ z-index:5; opacity:0; }
  .overlay-container{ display:none; }
  .mobile-toggle{ display:block; }

  .container.right-panel-active .sign-in-container{ transform:none; opacity:0; z-index:5; }
  .container.right-panel-active .sign-up-container{ transform:none; opacity:1; z-index:10; animation:none; }

  .cloud-modal-content{ margin:20% auto; width:90%; }
  .modal-content-text{ margin:10% auto; padding:20px; }
  .modal-text-content{ max-height:60vh; }

  .remember-me-container{ font-size:13px; }
  .remember-me-container label{ font-size:13px; }
}

/* ====================================================================
    MARKET POLISH OVERRIDES
==================================================================== */

/* readability overlay on images */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none;
  background: linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.18));
  z-index:0;
}
body.dark-mode::before{ background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.35)); }
:root{ --ring:#38bdf8; --cta-grad: radial-gradient(120% 120% at 0% 0%, #38bdf8 0%, #0ea5e9 55%, #2563eb 100%); }

.container{
  max-width: clamp(360px, 92vw, 980px);
  min-height: clamp(540px, 86vh, 760px);
  border-radius: 18px;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
}
h1{ font-weight:800; letter-spacing:.3px; font-size: clamp(22px, 3.2vw, 34px); }

input, select{
  height:52px; border-radius:12px !important; border:1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(6px);
}
input:focus-visible, select:focus-visible{ outline:0; box-shadow:0 0 0 3px var(--ring); }
.password-wrapper i{ width:28px; text-align:center; }

button{
  min-height:48px; border-radius:14px; border:0;
  background: var(--cta-grad); color:#fff;
  box-shadow:0 14px 30px rgba(56,189,248,.25);
}
button:hover{ filter: brightness(1.05); }
button.ghost{ background:transparent; border:1px solid rgba(255,255,255,.9); }

.field-error{
  display:block; min-height:16px; margin-top:2px; font-size:12px; color:#ff6b6b; text-align:left;
}

.overlay{ box-shadow: inset 0 0 0 9999px rgba(0,0,0,.06); }
body.dark-mode .overlay{ box-shadow: inset 0 0 0 9999px rgba(0,0,0,0); }

.page-footer{
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
    background: linear-gradient(to top, rgba(0,0,0,.06), rgba(0,0,0,0));
  border-top-color: rgba(255,255,255,.15);
}

/* large desktop */
@media (min-width:1200px){
  .container{ max-width:1040px; }
  form{ padding: 0 56px; }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}

/* keyboard focus helper */
.kb-focus{ box-shadow:0 0 0 3px var(--ring) !important; outline:0 !important; }