/* =========================
   LOGIN HERO
========================= */
.login-header{

  position: absolute;

}

body.login-page{

  overflow-x:hidden;

}

.login-hero{

  min-height: 100vh;

  margin-top: 0;

  padding-top: 0;
  display: flex;

  align-items: center;

  justify-content: center;

  padding: 120px 20px 40px;

  overflow: hidden;

}

.login-page{

  background:
    linear-gradient(
      rgba(4,12,20,.72),
      rgba(4,12,20,.84)
    ),
    url("../img/wall.webp");
background-size:220% !important;
background-position:center center !important;
  background-repeat:no-repeat;

}

/* =========================
   LOGIN PAGE WALL
========================= */

.login-page .login-hero{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

/* CENTRO */

.login-brand{

  position: absolute;

  top: 32px;

  left: 38px;

  z-index: 20;

  font-family: "Playfair Display", serif;

  font-size: 2rem;

  font-weight: 700;

  color: #f3c433;

  text-decoration: none;

  letter-spacing: -.03em;

  transition: opacity .3s ease;

}

.login-brand:hover{

  opacity: .7;

}
.login-page .header{

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  z-index: 50;

}
.login-page .container{

  width: 100%;

  max-width: none;

  margin: 0;

}
.login-page .header-inner{

  justify-content: flex-start;

  padding-left: 42px;

}

.login-kicker{

  font-family:'Inter', sans-serif;

  font-size: 22px;

  letter-spacing:4px;

  text-transform:uppercase;

  color:#f2c94c;

  opacity:.85;

  margin-bottom:18px;

}

.login-divider{

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 14px;

  font-size: 12px;

  letter-spacing: .12em;

  text-transform: uppercase;

  color: rgba(255,255,255,.45);
}


 .login-divider::before,
.login-divider::after{

  content: "";

  flex: 1;

  height: 1px;

  background: rgba(255,255,255,.08);

}
 
/* SFONDO OVERLAY */

.login-overlay {

  position: absolute;

  inset: 0;

}


/* LOGIN CONTENT */

.login-content {
  width: 100%;
  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 16px;
  margin: 0 auto;
  padding: 120px 40px;
  z-index: 2;
  max-width: 900px;
 transform: translateY(-20px);

}

/* TITLE */

.login-title {
 font-size: clamp(3rem, 7vw, 5.8rem);

  line-height: .95;
  margin-top: 20px;
  margin-bottom: 10px;

}

/* SUBTITLE */

.login-subtitle {

  margin-top: 10px;

  font-size: 15px;
letter-spacing: 3.2px;
opacity: .75;
margin-bottom:30px;
  color: var(--panea-white);
}



/* LOGIN BOX */

.login-box{

 width: 100%;
 margin-top:30px;

  max-width: 440px;

  padding: 24px;
 
  display: flex;
  align-items: center;
  flex-direction: column;

  gap: 22px;

  backdrop-filter: blur(10px);

  border: 1px solid rgba(255,255,255,.12);

  background: rgba(13,46,64,.52);

box-shadow:
  0 8px 30px rgba(0,0,0,.18);

  border-radius: 30px;
  }

/* BUTTONS CONTAINER */

.login-buttons{

  display: flex;

  gap: 14px;

  margin-top: 6px;

}
/* BUTTONS */

.login-btn,
.register-btn{

  max-width: 260px;

  margin: 0 auto;

  display: flex;

  align-items: center;

  justify-content: center;

 width: 220px;

  height: 56px;

  border-radius: 18px;

  font-size: 17px;

  font-family: 'Inter', sans-serif;

  font-weight: 600;

  cursor: pointer;

  transition: 0.3s ease;
   background:var(--panea-yellow);
color:#0d2e40;

}

/* LOGIN BUTTON */

.login-btn{
  font-weight:700;
 margin-top:10px;
  box-shadow:0 8px 30px rgba(243,198,35,.22);
}

.login-form{

  display:flex;

  flex-direction:column;

  gap:18px;

}

.login-heading{

  margin-bottom:45px;

}
/* REGISTER BUTTON */

.register-btn{

  background: transparent;

  border:1px solid rgba(255,255,255,.12);

  color: rgba(255,255,255,.82);

}

.register-btn:hover{

  border-color:var(--panea-yellow);
  color:var(--panea-yellow);

}

.login-back{

  position: absolute;

  top: 42px;

  z-index: 30;

  color: #f8f3eb;

  text-decoration: none;

  font-size: 14px;

  letter-spacing: .12em;

  text-transform: uppercase;
   right:40px;
left:auto;
transform:none;

}

.login-back:hover{

  color: #f3c623;

  letter-spacing: .26em;

}


.login-buttons button{

  height: 54px;

  border-radius: 18px;

  font-size: 15px;

}

/* FOOTER */

.login-footer{

  margin-top: 34px;

  line-height: 1.5;

  font-style: italic;

  color: rgba(255,255,255,.88);
   font-size:1rem;
opacity:.72;

}

.login-form input{

  width:100%;

  padding:16px 18px;

  border-radius:18px;

  border:1px solid rgba(255,255,255,.15);

  background:
    rgba(255,255,255,.08);

  color:#f5efe6;

  font-size:1rem;

  backdrop-filter:blur(10px);

}

.login-form input:-webkit-autofill,
.login-form input:-webkit-autofill:hover,
.login-form input:-webkit-autofill:focus{

  -webkit-text-fill-color:
    #f5efe6;

  -webkit-box-shadow:
    0 0 0px 1000px
    rgba(255,255,255,.08)
    inset;

  border:
    1px solid rgba(255,255,255,.15);

}
/* =========================
   LOGIN LINK
========================= */

.login-cta {

  margin-top: 24px;
  color: var(--panea-yellow);
}

.login-cta a {

  color: #f0b94b;

  text-decoration: none;

  font-weight: 600;

}

.login-cta a:hover {

  opacity: 0.8;

}


.back-link{

  display: inline-flex;

  align-items: center;

  gap: 10px;

  padding: 10px 18px;

  margin-bottom: 34px;

  border-radius: 999px;

  background: rgba(7, 19, 35, 0.72);

  border: 1px solid rgba(255,255,255,0.08);

  backdrop-filter: blur(10px);

  color: #ffffff;

  font-size: 0.95rem;

  font-weight: 600;

  text-decoration: none;

  transition: 0.3s ease;

}

.back-link:hover{

  background: rgba(25, 60, 78, 0.95);

  transform: translateY(-2px);

}

.back-link::before{

  content: "←";

  color: #f3c623;

}

/* =========================
   AUTH SWITCH
========================= */

.auth-switch{

  display:flex;

  align-items:center;

  justify-content:center;

  gap:18px;

  margin-top:22px;

  margin-bottom:28px;

}

/* BUTTONS */

.auth-switch-btn{

  background:transparent;

  border:none;

  padding:0;

  color:rgba(255,255,255,.52);

  font-size:.9rem;

  font-weight:600;

  letter-spacing:.02em;

  cursor:pointer;

  transition:.25s ease;

}

/* HOVER */

.auth-switch-btn:hover{

  color:white;

}

/* ACTIVE */

.auth-switch-btn.active{

  color:#f5c518;

}

/* DIVIDER */

.auth-divider{

  width:1px;

  height:16px;

  background:
    rgba(255,255,255,.16);

}

/* =========================
   LOGIN DIVIDER
========================= */

.login-divider{

  margin:26px 0 22px;

  text-align:center;

  font-size:.72rem;

  letter-spacing:.18em;

  text-transform:uppercase;

  color:rgba(255,255,255,.34);

  position:relative;

}

.login-divider::before,
.login-divider::after{

  content:"";

  position:absolute;

  top:50%;

  width:36%;

  height:1px;

  background:
    rgba(255,255,255,.08);

}

.login-divider::before{

  left:0;

}

.login-divider::after{

  right:0;

}

/* =========================
   GOOGLE BUTTON
========================= */

.google-login-btn{

  width:100%;

  height:58px;

  border:none;

  border-radius:999px;

  background:#ffffff;

  color:#111;

  display:flex;

  align-items:center;

  justify-content:center;

  gap:12px;

  font-size:.95rem;

  font-weight:600;

  letter-spacing:.01em;

  cursor:pointer;

  transition:.28s ease;

  box-shadow:
    0 10px 30px rgba(0,0,0,.16);

}

/* ICON */

.google-login-btn i{

  font-size:1rem;

}

/* HOVER */

.google-login-btn:hover{

  transform:translateY(-2px);

  background:#f7f7f7;

  box-shadow:
    0 18px 40px rgba(0,0,0,.22);

}

/* ACTIVE */

.google-login-btn:active{

  transform:translateY(0);

}