/* ==========================================================================
   Frizzar - tela de login (painel direito)
   Carregar DEPOIS de layout-blue-grey.css. O lado esquerdo (iframe) nao muda.
   ========================================================================== */

.fz-login {
    --fz-lg-bg: #fbfaf9;
    --fz-lg-text: #18181b;
    --fz-lg-muted: #71717a;
    --fz-lg-border: #e4e1dc;
    --fz-lg-ink: #0c0c0c;
    --fz-lg-red: #e5383b;
    --fz-lg-font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}

/* ---------- Layout: lado direito com largura minima confortavel ---------- */
.login-body { background-color: #fbfaf9 !important; }
.login-body .right-side.fz-login {
    width: 30%;
    min-width: 400px;
    height: 100vh;
    float: right;
    padding: 0 !important;
    overflow-y: auto;
    background: var(--fz-lg-bg) !important;
    background-image: none !important;
    text-align: left;
    font-family: var(--fz-lg-font);
    color: var(--fz-lg-text);
    box-sizing: border-box;
}
.login-body .left-side { width: calc(100% - max(30%, 400px)) !important; height: 100vh !important; }
.fz-login *, .fz-login *::before, .fz-login *::after { box-sizing: border-box; }

.fz-login__inner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100%;
    margin: 0 auto;
    padding: 48px 40px;
}

/* ---------- Marca e titulo ---------- */
.fz-login__brand { text-align: center; margin-bottom: 40px; }
.fz-login__brand img { width: 200px; max-width: 70%; height: auto; display: inline-block; }

.fz-login__title {
    margin: 0;
    font: 700 28px/1.15 var(--fz-lg-font);
    letter-spacing: -.02em;
    color: var(--fz-lg-text);
}
.fz-login__subtitle {
    margin: 8px 0 28px;
    font: 400 15px/1.45 var(--fz-lg-font);
    color: var(--fz-lg-muted);
}

/* ---------- Formulario ---------- */
.fz-login__form { display: flex; flex-direction: column; gap: 16px; margin: 0; }
.fz-login__field { display: flex; flex-direction: column; gap: 8px; }
.fz-login__label { font: 600 14px/1.2 var(--fz-lg-font); color: var(--fz-lg-text); }

.fz-login .fz-login__input,
.fz-login input.fz-login__input.ui-inputfield {
    width: 100% !important;
    height: 46px !important;
    padding: 0 14px !important;
    border: 1px solid var(--fz-lg-border) !important;
    border-radius: 10px !important;
    background: #fff !important;
    box-shadow: none !important;
    color: var(--fz-lg-text) !important;
    font: 400 15px/1 var(--fz-lg-font) !important;
    transition: border-color .15s, box-shadow .15s;
}
.fz-login .fz-login__input::placeholder { color: #a1a1aa !important; }
.fz-login .fz-login__input:focus,
.fz-login input.fz-login__input.ui-state-focus {
    border-color: var(--fz-lg-ink) !important;
    box-shadow: 0 0 0 3px rgba(12, 12, 12, .08) !important;
    outline: none !important;
}
/* autopreenchimento do navegador (tirava o fundo azul claro) */
.fz-login .fz-login__input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 40px #fff inset !important;
    -webkit-text-fill-color: var(--fz-lg-text) !important;
}

.fz-login__pass { position: relative; }
.fz-login .fz-login__pass .fz-login__input { padding-right: 46px !important; }
.fz-login__eye {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--fz-lg-muted);
    cursor: pointer;
}
.fz-login__eye:hover { background: #f1efec; color: var(--fz-lg-text); }

.fz-login__row { display: flex; justify-content: flex-end; margin-top: -4px; }
.fz-login a.fz-login__link,
.fz-login a.fz-login__link:visited {
    color: var(--fz-lg-text) !important;
    font: 500 14px/1.2 var(--fz-lg-font);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.fz-login a.fz-login__link:hover { color: #000 !important; }

.fz-login__error {
    padding: 10px 12px;
    border-radius: 10px;
    background: #fdecec;
    color: #b42325;
    font: 500 13.5px/1.4 var(--fz-lg-font);
}

.fz-login__submit {
    height: 50px;
    margin-top: 4px;
    border: 0;
    border-radius: 999px;
    background: var(--fz-lg-ink);
    color: #fff;
    font: 600 16px/1 var(--fz-lg-font);
    cursor: pointer;
    transition: background-color .15s;
}
.fz-login__submit:hover { background: #2a2a2d; }
.fz-login__submit:active { transform: translateY(1px); }

.fz-login a:focus-visible,
.fz-login button:focus-visible { outline: 2px solid var(--fz-lg-ink); outline-offset: 2px; }

/* ---------- Baixe o app ---------- */
.fz-login__app { margin-top: 40px; }
.fz-login__divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 16px;
    font: 500 13.5px/1 var(--fz-lg-font);
    color: var(--fz-lg-muted);
}
.fz-login__divider::before,
.fz-login__divider::after { content: ''; flex: 1; height: 1px; background: var(--fz-lg-border); }
.fz-login__stores { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fz-store,
.fz-store:visited {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 52px;
    padding: 0 10px;
    border-radius: 10px;
    background: var(--fz-lg-ink);
    color: #fff !important;
    text-decoration: none !important;
    transition: background-color .15s;
}
.fz-store:hover { background: #2a2a2d; }
.fz-store__txt { display: flex; flex-direction: column; line-height: 1.1; text-align: left; white-space: nowrap; min-width: 0; }
.fz-store__txt small { font: 400 10.5px/1.1 var(--fz-lg-font); opacity: .85; }
.fz-store__txt strong { font: 600 15px/1.15 var(--fz-lg-font); letter-spacing: -.01em; }

/* ---------- Icones (CSS mask; sem SVG no XHTML) ---------- */
.fz-login-ico {
    display: inline-block;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    background-color: currentColor;
    -webkit-mask: var(--fz-lg-ico) center / contain no-repeat;
            mask: var(--fz-lg-ico) center / contain no-repeat;
}
.fz-login-ico--eye { --fz-lg-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); }
.fz-login__eye.is-on .fz-login-ico--eye { --fz-lg-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49'/%3E%3Cpath d='M14.084 14.158a3 3 0 0 1-4.242-4.242'/%3E%3Cpath d='M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143'/%3E%3Cpath d='m2 2 20 20'/%3E%3C/svg%3E"); }
.fz-login-ico--apple { --fz-lg-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701'/%3E%3C/svg%3E"); width: 22px; height: 22px; }
.fz-login-ico--play { --fz-lg-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M22.018 13.298l-3.919 2.218-3.515-3.493 3.543-3.521 3.891 2.202a1.49 1.49 0 0 1 0 2.594zM1.337.924a1.486 1.486 0 0 0-.112.568v21.017c0 .217.045.419.124.6l11.155-11.087L1.337.924zm12.207 10.065l3.258-3.238L3.45.195a1.466 1.466 0 0 0-.946-.179l11.04 10.973zm0 2.067l-11 10.933c.298.036.612-.016.906-.183l13.324-7.54-3.23-3.21z'/%3E%3C/svg%3E"); width: 20px; height: 20px; }

/* o banner antigo do app (capa-mobile-rodape) foi substituido pelo "Baixe o app" */
.login-body .panel-mobile { display: none !important; }

/* ---------- Tablet / celular ---------- */
@media (max-width: 64em) {
    .login-body .right-side.fz-login { min-width: 360px; }
    .login-body .left-side { width: calc(100% - max(30%, 360px)) !important; }
}
@media (max-width: 50em) {
    /* o tema ja esconde o lado esquerdo nesse tamanho */
    .login-body .right-side.fz-login {
        width: 100%;
        min-width: 0;
        height: auto;
        min-height: 100vh;
        float: none;
    }
    .fz-login__inner { padding: 40px 24px 32px; justify-content: flex-start; }
    .fz-login__brand { margin: 8px 0 32px; }
    .fz-login__title { font-size: 24px; }
    .fz-login a.fz-login__link { color: var(--fz-lg-text) !important; }
}
@media (max-width: 360px) {
    .fz-login__stores { grid-template-columns: 1fr; }
}