@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

* {box-sizing: border-box;}

html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 100%;
}
body {
    background-color: #F0F0F0;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    font-family: 'Roboto', verdana, sans-serif;
}
.container {
  padding: 48px 24px;
  display: flex;
  justify-content: center; /* Centraliza na horizontal */
  align-items: center;     /* Centraliza na vertical */
  min-height: 100dvh;      /* Ocupa 100% da altura da tela, cresce se o conteudo for maior */
}
.login {
    display: block;
    width: 400px;
    max-width: 100%;
    margin: auto auto;
    text-align: center;
}
.login-logo {
    display: block;
    margin: 0 auto 36px;
    max-height: 100px;
    max-width: 100%;
    object-fit: contain;
}
body.login-plain { background-color: #fff; }
.login-plain .login-help a { color: #17658c; }
.login-help a:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.login #commit { margin-bottom: 0; }

.formfields {
    background-color: #fff;
    background: linear-gradient(to bottom, #fff 75%, #ECF1F8 100%);
    border: 1px solid #dce8f8;
    border-radius: 12px;
    box-shadow: 0 0 0 8px rgba(0, 0, 0, 0.1);
    padding: 20px;
    font-size: 14px;

}

h1 {
    font-size: 18px;
    font-weight: bolder;
    margin: 0 auto 10px auto;
}
h2 {
    font-size: 16px;
    font-weight: normal;
    margin: 0 auto 10px auto;
}
.error {
    font-size: 12px;
    color: #c00 !important;
}

#username, #password, #email, #mfacode, #commit, #coupon, .commit {
    padding: 8px 16px;
    margin-bottom: 20px;
    width: 100%;
    border: 1px solid #DDDDDD;
    border-radius: 4px;
    font-size: 14px;
}
#password:disabled {
    background-color: #E4E4E4;
    border-color: #C8C8C8;
    color: #9A9A9A;
    cursor: not-allowed;
}
#password:disabled::placeholder {
    color: #B5B5B5;
}
#commit, .commit {
    background-color: #3399CC;
    border: 1px solid #2B82AD;
    color: #fff;
    text-transform: uppercase;
    cursor: pointer;
}
#commit.loading {
    cursor: wait;
    opacity: 0.85;
    pointer-events: none;
}
#commit.loading::after {
    content: "";
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-left: 10px;
    vertical-align: -2px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: login-spin 0.7s linear infinite;
}
@keyframes login-spin {
    to { transform: rotate(360deg); }
}
.login-help a {
    color: #fff;
}
.remember-me {
    display: flex;
    flex-wrap: nowrap;
    gap: 15px;
    flex-direction: row;
    align-items: center;
}
.switch-container {
    display: flex;
    align-items: center;
    padding: 8px 16px;
    margin-bottom: 20px;
    width: 50%;
    border: 1px solid #DDDDDD;
    border-radius: 4px;
}

.switch {
  position: relative;
  display: inline-block;
  width: 32px;
  height: 16px;
  margin-right: 10px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  border-radius: 12px;
  transition: background-color 0.4s ease;
}

.slider::before {
  position: absolute;
  content: "";
  height: 12px;
  width: 12px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  border-radius: 50%;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- STATE CHANGES --- */

/* Change track color when checked */
input:checked + .slider {
  background-color: #2196F3; /* Modern Blue */
}

/* Move the knob to the right when checked */
input:checked + .slider::before {
  transform: translateX(16px);
}

/* Optional: Add a focus ring for keyboard accessibility */
input:focus-visible + .slider {
  box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.4);
}
/* Split login only; recovery/change-password pages keep their existing layout. */
body.login-page { background: #fff; color: #18253b; }
.login-page [hidden] { display: none !important; }
.login-shell { display: grid; grid-template-columns: 40% 60%; min-height: 100vh; min-height: 100dvh; }
.login-art { background-color: #3399cc; background-size: cover; background-position: center; }
.login-content { display: flex; min-width: 0; align-items: center; justify-content: center; padding: 56px 32px; }
.login-form { width: 360px; max-width: 100%; }
.login-page .login-logo { width: auto; max-width: 220px; max-height: 72px; margin: 0 0 44px; object-position: left center; }
.login-page h1 { font-size: 26px; font-weight: 700; margin: 0 0 10px; }
.login-intro { color: #637086; font-size: 14px; line-height: 1.5; margin: 0 0 30px; }
.login-page label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 9px; }
.login-page #username, .login-page #password, .login-page #mfacode { height: 44px; padding: 10px 12px; color: #18253b; background: #fff; border-color: #cdd4de; }
.login-password { position: relative; }
.login-page #password { padding-right: 45px; margin-bottom: 0; }
#password-toggle { position: absolute; right: 0; top: 0; width: 44px; height: 44px; display: grid; place-items: center; border: 0; background: transparent; color: #637086; cursor: pointer; }
.login-options { display: flex; justify-content: space-between; gap: 12px; margin: 16px 0 24px; align-items: baseline; }
.login-page a, .login-page .login-text-button { font-size: 13px; color: #17658c; text-decoration: none; }
.login-page a:hover, .login-page .login-text-button:hover { text-decoration: underline; }
.login-text-button { border: 0; padding: 0; background: transparent; font-family: inherit; cursor: pointer; text-align: left; }
.login-page #commit, .login-secondary { width: 100%; min-height: 44px; border-radius: 4px; font: 700 14px 'Roboto', verdana, sans-serif; cursor: pointer; }
.login-page #commit { background: #17658c; border-color: #17658c; margin: 0; text-transform: none; }
.login-page #commit:hover { background: #124f6e; }
.login-secondary { color: #26364b; background: #fff; border: 1px solid #cdd4de; padding: 10px 12px; }
.login-secondary:hover { background: #f5f7fa; }
.login-divider { display: flex; gap: 16px; align-items: center; margin: 22px 0; font-size: 12px; color: #637086; }
.login-divider::before, .login-divider::after { content: ''; height: 1px; background: #e1e6ed; flex: 1; }
.login-page .login-help { margin: 28px 0 0; text-align: center; }
.login-page :is(input, button, a):focus-visible { outline: 2px solid #17658c; outline-offset: 3px; }
.login-page .error { padding: 12px; border-left: 3px solid #bc2525; background: #fff3f3; line-height: 1.5; }
.login-page.login-plain .login-shell { grid-template-columns: 1fr; }
.login-page.login-plain .login-art { display: none; }
@media (max-width: 760px) {
    .login-shell { grid-template-columns: 1fr; }
    .login-art { display: none; }
    .login-content { padding: 40px 24px; }
    .login-page .login-logo { margin-bottom: 32px; max-width: 200px; }
    .login-page h1 { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) { #commit.loading::after { animation: none; } }