/* login-new.css — Login "Portal do Cliente" RAGA Motors.
   Porte fiel do design de referência (login-raga-motors.html / export Framer):
   valores, cores, espaçamentos e breakpoints iguais ao original. Fonte Satoshi. */

body.ff-login{
  margin:0; min-height:100vh; display:flex; align-items:center; justify-content:center;
  padding:48px;
  background:radial-gradient(circle at 15% 10%, #f4f9f0 0%, #f7f8f6 45%, #ffffff 100%);
  font-family:var(--font);
  color:#161616;
}
@media (max-width:1024px){ body.ff-login{ padding:24px; } }
@media (max-width:480px){ body.ff-login{ padding:0; } }

body.ff-login input::placeholder{ color:rgba(23,23,23,0.38); }
body.ff-login :focus-visible{ outline:2px solid #6cb33f; outline-offset:2px; border-radius:6px; }

/* ---- Shell de 2 painéis (entra com fade + slide, como o original) ---- */
.login-shell{
  display:flex; flex-direction:row; width:100%; max-width:1000px; margin:0 auto;
  background:#ffffff; border-radius:28px; overflow:hidden;
  box-shadow:0 24px 60px rgba(23,23,23,0.10), 0 2px 8px rgba(23,23,23,0.06);
  opacity:0; transform:translateY(22px);
  animation:loginShellIn .7s cubic-bezier(.2,.8,.2,1) forwards;
}
@keyframes loginShellIn{ to{ opacity:1; transform:translateY(0); } }
@media (max-width:1024px){ .login-shell{ flex-direction:column; } }
@media (max-width:480px){ .login-shell{ border-radius:0; box-shadow:none; } }
@media (prefers-reduced-motion:reduce){ .login-shell{ animation:none; opacity:1; transform:none; } }

/* ---- Painel esquerdo (marca) ---- */
.login-aside{
  position:relative; overflow:hidden; flex-shrink:0;
  width:44%; min-width:380px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:24px;
  padding:56px;
  background:linear-gradient(160deg, #f3f9ee 0%, #fbfcfa 60%);
}
@media (max-width:1024px){ .login-aside{ width:100%; min-width:0; min-height:220px; padding:30px 24px; gap:12px; } }
@media (max-width:480px){ .login-aside{ min-height:170px; } }

.la-diamond-big{
  position:absolute; background:#6cb33f; opacity:.9;
  width:260px; height:260px; border-radius:46px; transform:rotate(45deg);
  left:-110px; bottom:-130px; transition:transform .2s ease-out;
}
.la-diamond-outline{
  position:absolute; background:transparent; border:3px solid #6cb33f; opacity:.85;
  width:130px; height:130px; border-radius:26px; transform:rotate(45deg);
  right:42px; top:30px; transition:transform .2s ease-out;
}
@media (max-width:1024px){
  .la-diamond-big{ width:190px; height:190px; left:-70px; bottom:-90px; }
  .la-diamond-outline{ width:90px; height:90px; right:18px; top:-20px; }
}
@media (max-width:480px){
  .la-diamond-big{ width:150px; height:150px; }
  .la-diamond-outline{ width:70px; height:70px; }
}

.la-logo{ position:relative; z-index:2; width:220px; height:auto; }
@media (max-width:1024px){ .la-logo{ width:160px; } }
@media (max-width:480px){ .la-logo{ width:130px; } }

.la-bars{ position:relative; z-index:2; display:flex; flex-direction:column; gap:6px; width:130px; align-items:center; }
.la-bars i{ display:block; height:4px; width:100%; background:#6cb33f; border-radius:4px; }
@media (max-width:1024px){ .la-bars{ width:90px; } }
@media (max-width:480px){ .la-bars{ width:80px; } }

.la-tag{ position:relative; z-index:2; margin:0; text-align:center; font-size:14.5px; line-height:1.6; color:rgba(23,23,23,0.58); max-width:270px; }
@media (max-width:1024px){ .la-tag{ display:none; } }   /* só no desktop (notStacked) */

/* Fallback textual do logo (se img/raga-logo.png não existir) */
.raga-logo{ position:relative; z-index:2; font-family:var(--font); font-weight:800; font-size:42px; letter-spacing:-.03em; color:#161616; line-height:1; }
.raga-logo span{ color:#6cb33f; }
.raga-logo small{ display:block; font-size:13px; letter-spacing:.55em; color:#6b7168; font-weight:700; margin-top:4px; }

/* ---- Painel direito (formulário) ---- */
.login-html{ flex:1; display:flex; align-items:center; justify-content:center; padding:64px 60px; background:#ffffff; }
@media (max-width:1024px){ .login-html{ padding:44px 36px; } }
@media (max-width:480px){ .login-html{ padding:32px 22px; } }

.login-html input[type=radio], .login-html .tab{ display:none; }  /* abas ocultas (flip do reset) */

.login-form{ width:100%; max-width:400px; margin:0 auto; }
.login-form .sign-in-htm{ display:flex; flex-direction:column; gap:20px; }
.login-form .login-fields{ display:flex; flex-direction:column; gap:20px; }
.login-form .for-pwd-htm{ display:none; flex-direction:column; gap:16px; }
#tab-2:checked ~ .login-form .sign-in-htm{ display:none; }
#tab-2:checked ~ .login-form .for-pwd-htm{ display:flex; }
@media (max-width:480px){ .login-form .sign-in-htm, .login-form .login-fields{ gap:16px; } }

.login-head{ margin:0; }
.portal-badge{ align-self:flex-start; display:inline-flex; align-items:center; padding:6px 14px; background:#eef7e6; color:#33591c; font-size:12px; font-weight:700; letter-spacing:.04em; border-radius:999px; }
.login-title{ font-family:var(--font); font-weight:800; font-size:32px; line-height:1.15; letter-spacing:-.01em; margin:0; color:#161616; }
@media (max-width:480px){ .login-title{ font-size:25px; } }
.login-sub{ margin:10px 0 0; font-size:15px; color:rgba(23,23,23,0.58); }

.login-form .group{ display:flex; flex-direction:column; gap:7px; }
.login-form .label{ font-size:12.5px; font-weight:600; color:rgba(23,23,23,0.62); letter-spacing:.01em; }
.login-form .input{
  width:100%; min-height:50px; padding:0 16px; font-size:15px; font-family:var(--font);
  color:#161616; background:#f6f7f5; border:1.5px solid rgba(23,23,23,0.10); border-radius:14px;
  transition:border-color .15s ease, background .15s ease;
}
.login-form .input:hover{ border-color:rgba(23,23,23,0.2); }
.login-form .input:focus{ outline:none; border-color:#6cb33f; background:#ffffff; }

.input-eye{ position:relative; display:flex; }
.input-eye .input{ padding:0 48px 0 16px; }
.eye-btn{ position:absolute; right:4px; top:4px; bottom:4px; width:42px; background:transparent; border:none;
  border-radius:10px; cursor:pointer; display:flex; align-items:center; justify-content:center; color:rgba(23,23,23,0.5); }
.eye-btn:hover{ background:rgba(23,23,23,0.06); color:#33591c; }
.eye-btn.is-on{ color:#6cb33f; }

.login-row{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; }
.remember{ display:flex; align-items:center; gap:8px; font-size:13.5px; color:rgba(23,23,23,0.7); cursor:pointer; margin:0; }
.remember input{ width:17px; height:17px; accent-color:#6cb33f; cursor:pointer; border-radius:6px; }
.link-forgot{ font-size:13.5px; color:#437325; text-decoration:none; font-weight:600; }
.link-forgot:hover{ text-decoration:underline; }

.login-form .button{
  display:flex; align-items:center; justify-content:center; gap:8px; width:100%; min-height:52px;
  margin-top:6px; padding:0 20px; background:#6cb33f; color:#ffffff; border:none; border-radius:14px;
  font-family:var(--font); font-weight:700; font-size:15.5px; cursor:pointer;
  box-shadow:0 8px 20px rgba(108,179,63,0.32); transition:transform .12s ease, background .15s ease, box-shadow .15s ease;
}
.login-form .button:hover{ background:#5fa233; box-shadow:0 10px 24px rgba(108,179,63,0.4); }
.login-form .button:active{ transform:scale(.98); }
.imgSpinner{ display:block; margin:6px auto 0; height:24px; }

.login-help{ margin:2px 0 0; font-size:13.5px; color:rgba(23,23,23,0.55); text-align:center; }
.login-help a{ color:#33591c; text-decoration:none; font-weight:700; }
.login-help a:hover{ text-decoration:underline; }
.login-copy{ margin:6px 0 0; font-size:11.5px; color:rgba(23,23,23,0.38); text-align:center; }
.login-credit{ display:flex; align-items:center; justify-content:center; gap:6px; margin:0; text-decoration:none; }
.login-credit .txt{ font-size:11.5px; color:rgba(23,23,23,0.5); font-weight:600; }
.login-credit:hover .txt{ text-decoration:underline; }

/* ---- Recuperação de senha (reuso das mesmas classes; legível no fundo claro) ---- */
.for-pwd-htm .hr, .sign-in-htm .hr{ height:1px; background:#eceee8; margin:6px 0; border:0; }
.login-html a.text-white{ color:#437325 !important; font-weight:600; text-decoration:none; }
.login-html a.text-white:hover{ color:#6cb33f !important; }
.for-pwd-htm .group{ margin-bottom:0; }