/*
 * Cash Permuta – identidade visual da tela de login (app.cashpermuta.com.br/login)
 * Corax Media · out/2026
 *
 * Como usar: copie a pasta "cash-login" para /assets/ e inclua, DEPOIS de colors/purple.css:
 *   <link rel="stylesheet" href="/assets/cash-login/cash-login.css">
 * Não muda formulários, IDs, nomes de campos nem o JavaScript da página.
 */

/* ---------- Fonte Inter (mesma do site) ---------- */
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/inter-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/inter-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

body.bg-login{
  --cp-deep:#121513; --cp-char:#1B1E1C; --cp-char-2:#16261F; --cp-line:#36403A;
  --cp-muted:#A7B0AB; --cp-gold:#F2A23A; --cp-gold-2:#F7B455; --cp-green:#3DB37F;
  background:var(--cp-deep) !important;
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif !important;
  color:#fff;
  -webkit-font-smoothing:antialiased;
}
body.bg-login *{font-family:inherit}

/* ---------- Fundo: foto à esquerda + grafite com brilho verde ---------- */
body.bg-login .login-register{
  background:radial-gradient(110% 90% at 90% 0%,#173226 0%,var(--cp-deep) 58%) !important;
  position:fixed !important; inset:0 !important; height:auto !important; width:auto !important;
  display:flex !important; align-items:center; justify-content:flex-end;
  padding:24px clamp(24px,7vw,120px) !important; overflow:auto;
}
body.bg-login .login-register::before{
  content:""; position:absolute; top:0; bottom:0; left:0; width:54%;
  background:
    linear-gradient(90deg,rgba(18,21,19,.10) 0%,rgba(18,21,19,.35) 55%,var(--cp-deep) 100%),
    linear-gradient(0deg,rgba(18,21,19,.85) 0%,rgba(18,21,19,0) 45%),
    url(img/login-foto.webp) 40% center/cover no-repeat;
}
body.bg-login .login-register::after{
  content:"Gerando novos negócios.";
  position:absolute; left:clamp(24px,5vw,72px); bottom:clamp(32px,7vh,72px); max-width:min(46%,520px);
  font:600 clamp(1.9rem,3.2vw,2.9rem)/1.12 'Inter',sans-serif; letter-spacing:-.03em; color:#fff;
  padding-top:22px; border-top:3px solid var(--cp-gold); width:fit-content;
}

/* ---------- Cartão ---------- */
body.bg-login .login-box.card{
  position:relative !important; z-index:1;
  width:min(440px,100%) !important; margin:0 !important;
  background:var(--cp-char) !important; color:var(--cp-muted);
  border:1px solid var(--cp-line) !important; border-radius:18px !important;
  box-shadow:0 40px 90px -40px rgba(0,0,0,.85) !important;
}
body.bg-login .login-box .card-body{padding:40px 36px 32px !important}
body.bg-login .cp-forms{position:relative}
body.bg-login #loginform,
body.bg-login #recoverform{margin:0}
body.bg-login .login-box a.db{display:flex !important; justify-content:center; margin-bottom:6px}
body.bg-login img.logo-center{
  content:url(img/logo-cash-permuta.webp);   /* logo nova (fundo transparente) */
  width:auto !important; height:104px !important; max-width:100%; object-fit:contain;
}
body.bg-login .form-group{margin-bottom:14px}
body.bg-login .form-group.m-t-20{margin-top:24px !important}

/* ---------- Campos ---------- */
body.bg-login .form-control,
body.bg-login .form-material .form-control{
  background:var(--cp-deep) !important; background-image:none !important;
  border:1px solid var(--cp-line) !important; border-radius:10px !important;
  height:52px !important; padding:0 16px !important;
  color:#fff !important; font-size:15px !important; font-weight:500;
  box-shadow:none !important; transition:border-color .15s ease, box-shadow .15s ease;
}
body.bg-login .form-control::placeholder{color:var(--cp-muted) !important; opacity:1}
body.bg-login .form-control:focus{border-color:var(--cp-gold) !important; box-shadow:0 0 0 3px rgba(242,162,58,.2) !important; outline:0}
body.bg-login .form-control:-webkit-autofill{-webkit-text-fill-color:#fff !important; -webkit-box-shadow:0 0 0 1000px var(--cp-deep) inset !important; caret-color:#fff}

/* ---------- Lembrar-me / Esqueceu a senha ---------- */
body.bg-login .font-14{display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:14px !important}
body.bg-login .checkbox{margin:0; padding:0; min-height:0}
body.bg-login .checkbox label{
  color:var(--cp-muted) !important; font-size:14px; margin:0;
  padding-left:26px !important; height:20px !important; line-height:20px !important;
}
body.bg-login .checkbox label::before,
body.bg-login .checkbox label::after{
  content:'' !important; position:absolute; box-sizing:border-box; margin:0 !important;
  top:1px !important; left:0 !important; width:18px !important; height:18px !important;
}
body.bg-login .checkbox label::before{
  background:transparent !important; border:1.5px solid var(--cp-line) !important;
  border-radius:5px !important; transform:none !important; z-index:0;
}
body.bg-login .checkbox label::after{
  background:transparent !important; border:0 !important; border-radius:0 !important;
  transform:scale(0) !important; z-index:1;
}
body.bg-login .checkbox input[type="checkbox"]:checked + label::before{
  background:var(--cp-gold) !important; border-color:var(--cp-gold) !important;
}
body.bg-login .checkbox input[type="checkbox"]:checked + label::after{
  top:3px !important; left:6px !important; width:5px !important; height:10px !important;
  background:transparent !important; border-radius:0 !important;
  border:solid #1A1205 !important; border-width:0 2px 2px 0 !important;
  transform:rotate(40deg) !important; transform-origin:center !important;
}
body.bg-login #to-recover,
body.bg-login .text-dark{color:var(--cp-muted) !important; text-decoration:none}
body.bg-login #to-recover:hover{color:var(--cp-gold) !important}
body.bg-login #to-login{
  position:absolute; top:16px; left:16px; z-index:2;
  width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--cp-line); border-radius:50%; background:var(--cp-deep);
  color:var(--cp-muted) !important; text-decoration:none !important; margin:0;
  opacity:0; pointer-events:none;
  transition:opacity .22s ease, color .15s ease, border-color .15s ease, background .15s ease;
}
body.bg-login .login-box.is-recover #to-login{opacity:1; pointer-events:auto}
body.bg-login #to-login:hover,
body.bg-login #to-login:focus{color:var(--cp-gold) !important; border-color:var(--cp-gold); outline:none}
body.bg-login #to-login:focus-visible{outline:2px solid #fff; outline-offset:2px}
body.bg-login #to-login .cp-back-arrow{width:18px; height:18px; display:block}

/* ---------- Botões ---------- */
body.bg-login .login-box .btn,
body.bg-login .login-box .btn-info,
body.bg-login .btn-blue-trokz{
  background:var(--cp-gold) !important; border:0 !important; color:#1A1205 !important;
  border-radius:10px !important; height:52px; font-size:15px !important; font-weight:700 !important;
  letter-spacing:.06em; box-shadow:none !important; transition:background .15s ease, transform .15s ease;
}
body.bg-login .login-box .btn:hover,
body.bg-login .login-box .btn:focus{background:var(--cp-gold-2) !important; transform:translateY(-1px)}
body.bg-login .login-box .btn:focus-visible{outline:2px solid #fff; outline-offset:2px}
body.bg-login #loginform .btn:disabled,
body.bg-login #recoverform .btn:disabled{
  cursor:wait; transform:none !important; opacity:1;
}
body.bg-login #loginform .cp-btn-spin,
body.bg-login #recoverform .cp-btn-spin{
  display:inline-block; width:18px; height:18px; vertical-align:middle;
  border:2px solid rgba(26,18,5,.28); border-top-color:#1A1205; border-radius:50%;
  animation:cp-btn-spin .7s linear infinite;
}
@keyframes cp-btn-spin{ to { transform:rotate(360deg); } }

/* ---------- Textos e links ---------- */
body.bg-login .login-box .m-b-0 .col-sm-12{color:var(--cp-muted); font-size:14px; margin-top:6px}
body.bg-login .text-info,
body.bg-login .text-info b{color:var(--cp-gold) !important}
body.bg-login .text-info:hover{color:var(--cp-gold-2) !important}
body.bg-login .text-muted{color:var(--cp-muted) !important}
body.bg-login #recoverform p.text-muted{color:#fff !important; font-size:18px; font-weight:600; text-align:center; margin:0}

/* ---------- Celular e tablet: só o cartão, centralizado ---------- */
@media (max-width:960px){
  body.bg-login .login-register{justify-content:center; padding:20px !important}
  body.bg-login .login-register::before{width:100%; opacity:.18}
  body.bg-login .login-register::after{display:none}
  body.bg-login .login-box .card-body{padding:32px 22px 26px !important}
  body.bg-login img.logo-center{height:88px !important}
}