*{margin:0;padding:0;box-sizing:border-box;font-family:sans-serif}

body{
height:100vh;
display:flex;
justify-content:center;
align-items:center;

background:linear-gradient(135deg,#0f2027,#203a43,#2c5364);
transition:0.3s;
}

body.light{
background:linear-gradient(135deg,#fdfbfb,#ebedee);
}

.mobile-container{
	
width:360px;
background:white;
border-radius:16px;
overflow:hidden;
box-shadow:0 15px 40px rgba(0,0,0,0.25);
padding:35px;
position:relative;
border-top:5px solid #ba8f0b; /* ⚡ signature */
}

.form{
display:none;
animation:slide 0.4s ease;
}

.form.active{
display:block;
}

@keyframes slide{
from{opacity:0;transform:translateX(30px)} /* Το transform στο animation σου ✔ ΔΕΝ φταίει, είναι για τα forms είναι ΟΚ  */
to{opacity:1;transform:translateX(0)}
}

h2{text-align:center;margin-bottom:20px}

.input-group{position:relative;margin:15px 0}

.input-group i.fa-user,
.input-group i.fa-lock{
position:absolute;
left:10px;
top:50%;
transform:translateY(-50%);
color:#aaa;
}

.input-group input{
width:100%;
padding:12px 40px;
border:1px solid #ddd;
border-radius:10px;
}

.input-group input{
width:100%;
padding:12px 40px;
border:1px solid #ccc;
border-radius:8px;
background:#f9f9f9;
transition:0.2s;
}

.input-group input:focus{
border-color:#ba8f0b; /* ⚡  */
background:white;
outline:none;
}

.toggle-pass{
 position:absolute;
  z-index:1;
right:10px;
top:50%;
transform:translateY(-50%); 
cursor:pointer;
color:#aaa;
}

.mobile-container button{
  width:100%;
  padding:12px;
  border:none;
  border-radius:10px;
  background:#ba8f0b; /* ⚡ */
  color:#222;
  margin-top:15px;
  cursor:pointer;
  font-weight:bold;
}

button:hover{
  background:#bf9e37; /* ⚡ ΜΕ ΤΟ ΠΟΥ ΤΟ ΠΑΤΑΩ ΑΛΛΑΖΕΙ ΣΚΙΑ ΧΡΩΜΑ */
}

.remember{ 
display:flex;
align-items:center;
gap:8px;
margin-top:10px;
font-size:14px;
}

.strength{
height:6px;
background:#eee;
border-radius:10px;
margin-top:5px;
overflow:hidden;
}

#strengthBar{
height:100%;
width:0%;
transition:0.3s;
}

p{
text-align:center;
margin-top:15px;
cursor:pointer;
color:#1f4037;/* 🔴 ΕΔΩ είναι το πρόβλημα ΒΑΖΕΙ ΜΟΡΦΟΠΟΙΗΣΗ ΓΙΑ ΟΛΕΣ ΤΙΣ ΠΑΡΑΓΡΑΦΟΥΣ*/
font-size:14px;
}

.toggle-theme{
position:absolute;
top:10px;
right:15px;
cursor:pointer;
}




/* ===== gia to COPYRIGHT ΔΕΝ ΕΜΦΑΝΙΖΕΤΑΙ ΤΟ 2026 Electrical Services | ===== */

.page-wrapper{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  height:100vh;
}

.footer{
  position:absolute;
  bottom:15px;
  width:100%;
  text-align:center;
  font-size:16px;
   color:#ffffff; /* 🔥 ΑΣΠΡΟ για να φαίνεται den doyleye prin giat to p{ exei mayra grammata morfopoiisi egw evala <h5>   */
  /*  padding:10px 20px; */  /* συμπλήρωσης για το πάνω και το κάτω μέρος και 20px για την αριστερή και τη δεξιά πλευρά ενός στοιχείου */
  /* background-color: hsla(120, 100%, 90%, 0.3);*/ /*apalo gkri ,einai koyti poy perilambanei grammata .. poly kalo  */
  /* border-radius:5px; */ /*,einai koyti poy perilambanei grammata thn kabilosi sta akra toy */
}

.footer a{
  color:#d2e034; /* oroi- xrhshs xrwma grammata */
  text-decoration:none;
  margin-left:5px;
}

.footer a:hover{
  text-decoration:underline;
}
.home-btn{
  position:fixed;
  top:20px;
  left:20px;
  z-index:2000;

  display:flex;
  align-items:center;
  gap:8px;

  background:#ffc107;
  color:#222;
  padding:10px 16px;

  border-radius:8px;
  text-decoration:none;
  font-size:14px;
  font-weight:bold;

  box-shadow:0 5px 15px rgba(0,0,0,0.3);
  transition:0.3s;
  
  
}

.home-btn:hover{
  background:#e0a800;
  transform:translateY(-2px);
}

.home-btn i{
  font-size:16px;
}