/* Nuovo stile modernizzato per la pagina di login */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@600;700;800&display=swap');

:root{
  /* base page */
  --bg1: #f3f7fb; /* light */
  --bg2: #ffffff; /* white */

  /* accents */
  --accent: #2ea3ff; /* primary action */
  --accent-strong: #1b7fe0;

  /* card palette (lighter, warmer dark) */
  --card-start: rgba(30, 67, 119, 0.86);
  --card-end: rgba(19, 43, 75, 0.78);
  --card-text: #e9f6ff;

  /* inputs inside card */
  --input-bg: rgba(255,255,255,0.04);
  --input-border: rgba(255,255,255,0.12);
  --placeholder: rgba(233,246,255,0.6);

  --muted: #6b7b8e;
}

*{box-sizing: border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  /* sfondo luminoso e pulito: gradiente chiaro */
  background: linear-gradient(135deg, #f8fbff 0%, #e8f7ff 45%, #ffffff 100%);
  color: #0b2546;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  position:relative;
  /* rimuovere qualsiasi bordo e ombra per un look pulito */
  border: none;
  box-shadow: none;
}

.page-wrap{
  width:100%;
  max-width:980px;
  display:grid;
  grid-template-columns:1fr 420px;
  gap:40px;
  align-items:center;
}

.brand-panel{
  color:var(--accent);
  text-align:center; /* centra contenuto per mobile */
  display:block;
  
}
.brand-panel img{display:block;margin:0 auto 30px;width: 100%;}
.brand-panel h1{
  font-size:34px; /* dimensione leggibile ma non button-like */
  margin:0 0 8px 0;
  font-weight:700;
  /* usare Poppins per un look moderno */
  font-family: 'Poppins', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  letter-spacing:0.6px;
  text-transform:uppercase;
  display:inline-block;
  position:relative;
  padding:0; /* rimuovere padding per non sembrare un pulsante */
  border-radius:0;
  /* gradient text invece di sfondo pieno */
  background: linear-gradient(90deg, var(--accent), var(--accent-strong));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: unset;
  box-shadow:none;
  transform: none;
}



/* sottolineatura sottile e luminosa sotto il titolo */
.brand-panel h1::after{
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height:3px;
  border-radius:3px;
  background: linear-gradient(90deg, rgba(46,163,255,0.9), rgba(27,127,224,0.9));
  opacity:0.95;
}


.brand-panel p{
  color:var(--muted);
  line-height:1.45;
  margin:0 auto;
  margin-top:6px;
  font-size:14px;
  max-width:300px;
}

.card{
  /* refined soft dark card (lighter than before) */
  background: linear-gradient(180deg, var(--card-start), var(--card-end));
  color: var(--card-text);
  width: 95%;
  border-radius:12px;
  padding:22px 20px;
  box-shadow: 0 10px 28px rgba(8,18,34,0.24);
  border: 1px solid rgba(255,255,255,0.06);
}

form{width:100%}
.form-group{margin-bottom:16px}
label{display:block;font-size:15px;color:var(--muted);margin-bottom:8px}

/* colors inside card for harmony and contrast */
.card label{color:var(--card-text);opacity:0.95}
.card .helper{color:var(--card-text);opacity:0.82}
.card .small-link{color:var(--accent)}

/* inputs inside the card: softer background and lighter text */
.card input.testo{
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  color: var(--card-text);
}
.card input.testo::placeholder{color:var(--placeholder)}
.card input.testo:focus{box-shadow:0 8px 20px rgba(12,30,56,0.16);border-color:var(--accent-strong)}

.input-row{display:flex;gap:12px;align-items:center}
input.testo{
  width:100%;
  padding:12px 14px;
  border-radius:10px;
  border:1px solid rgba(15,23,42,0.08);
  background: #fff;
  color: #0b2546;
  font-size:16px;
  outline:none;
  transition: box-shadow .12s, border-color .12s, transform .06s;
}
input.testo::placeholder{color:rgba(11,37,70,0.35);text-transform:none}
input.testo:focus{box-shadow:0 6px 18px rgba(31,45,61,0.06);border-color:var(--accent)}

.password-wrapper{position:relative;margin-bottom:12px}
.input-with-icon{position:relative;display:block}
.input-with-icon .testo{padding-right:52px;display:block;width:100%} /* spazio per bottone occhio */
.input-with-icon .toggle-password{position:absolute;right:8px;top:50%;transform:translateY(-50%)}
.toggle-password{
  background:transparent;
  border:0;
  color:var(--muted);
  cursor:pointer;
  padding:6px;
  border-radius:8px;
  font-weight:600;
  display:flex;align-items:center;justify-content:center;width:36px;height:36px
}
.toggle-password:hover{color:var(--accent);background:rgba(46,163,255,0.08)}

.remember-row{display:flex;align-items:center;justify-content:center;margin-top:4px}
.remember-row .remember{display:flex;align-items:center;gap:10px;color:var(--card-text);font-size:14px}
.remember-row input[type="checkbox"]{width:18px;height:18px;border-radius:4px}

.submit{display:inline-block;width:100%;padding:12px 16px;border-radius:10px;border:0;background:linear-gradient(90deg,var(--accent),var(--accent-strong));color:#052033;font-weight:700;font-size:16px;cursor:pointer}
.submit:active{transform:translateY(1px)}
.submit:focus{outline:2px solid rgba(46,163,255,0.18);outline-offset:2px}

.helper{margin-top:12px;text-align:center;color:var(--muted);font-size:13px}

.small-link{color:rgba(255,255,255,0.85);text-decoration:underline;cursor:pointer}

/* eye icon sizing and toggle behavior */
.toggle-password svg{width:20px;height:20px;fill:currentColor}
.toggle-password .icon-hide{display:none}
.toggle-password.show .icon-hide{display:block}
.toggle-password.show .icon-show{display:none}

@media (max-width:900px){
  .page-wrap{grid-template-columns:1fr}
  .card{max-width:520px;margin:auto}
  body{align-items:start;}
}

/* legacy styles kept for compatibility */
.select-stylish{padding:10px;border:1px solid rgba(255,255,255,0.06);border-radius:6px;background:#fff;color:#333;width:100%}

/* loading popup and spinner (kept but simplified) */
#loadingPopup{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.6);z-index:9999}
.loading-indicator-center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:80px;height:80px;border-radius:50%;border:6px solid rgba(255,255,255,0.08);border-top-color:var(--accent);animation:spin 1s linear infinite}
@keyframes spin{0%{transform:translate(-50%,-50%) rotate(0)}100%{transform:translate(-50%,-50%) rotate(360deg)}}