/* Casa Show Webmail — brand overrides */
:root {
  --casa-blue: #113b59;
  --casa-blue-dark: #08283d;
  --casa-red: #e96b2c;
  --casa-ink: #102f43;
}

/* Login */
html:not(.ua-gmail-ui) body {
  background:
    radial-gradient(circle at 13% 16%, rgba(255,255,255,.16), transparent 27%),
    linear-gradient(116deg, var(--casa-blue-dark) 0 48%, #f5f7fb 48.1% 100%) !important;
}
html:not(.ua-gmail-ui) body:has(.buttonLogin)::before {
  content: none !important;
  display: none !important;
}
html:not(.ua-gmail-ui) body:has(.buttonLogin) form:has(.buttonLogin) {
  background: #fff !important;
  color: var(--casa-ink) !important;
  border-top: 5px solid var(--casa-red) !important;
}
html:not(.ua-gmail-ui) body:has(.buttonLogin) form:has(.buttonLogin)::before {
  content: "Acesse seu e-mail" !important;
  color: var(--casa-ink) !important;
}
html:not(.ua-gmail-ui) body:has(.buttonLogin) form:has(.buttonLogin)::after {
  content: "Use seu endereço corporativo e sua senha" !important;
}
html:not(.ua-gmail-ui) body:has(.buttonLogin) form:has(.buttonLogin) input:focus {
  border-color: var(--casa-blue) !important;
  box-shadow: 0 0 0 4px rgba(22,79,167,.13) !important;
}
html:not(.ua-gmail-ui) body:has(.buttonLogin) form:has(.buttonLogin) .buttonLogin {
  background: linear-gradient(135deg, var(--casa-blue), var(--casa-blue-dark)) !important;
  color: #fff !important;
  box-shadow: 0 10px 24px rgba(22,79,167,.24) !important;
}
html:not(.ua-gmail-ui) body:has(.buttonLogin) form:has(.buttonLogin) .buttonLogin:hover {
  background: linear-gradient(135deg, #1b5fc4, var(--casa-blue)) !important;
}
html:not(.ua-gmail-ui) body:has(.buttonLogin) .logo { display: none !important; }

/* Mailbox */
html.ua-gmail-ui .ua-brand img {
  width: 142px !important;
  height: 52px !important;
  max-width: 142px !important;
  max-height: 52px !important;
  object-fit: contain !important;
  object-position: left center !important;
}
html.ua-gmail-ui .ua-brand {
  width: 154px !important;
  min-width: 154px !important;
  max-width: 154px !important;
  height: 56px !important;
  min-height: 56px !important;
  overflow: hidden !important;
}
html.ua-gmail-ui .ua-inbox-tab {
  border-bottom-color: var(--casa-blue) !important;
  color: var(--casa-blue) !important;
}
html.ua-gmail-ui .buttonCompose {
  background: #e8effb !important;
  color: var(--casa-blue-dark) !important;
}
html.ua-gmail-ui .buttonCompose:hover { background: #d9e6f8 !important; }
#V-PopupsCompose header { background: var(--casa-blue-dark) !important; }
#V-PopupsCompose header .btn-success { background: var(--casa-red) !important; }
#V-PopupsCompose header .btn-success:hover { background: #c5101a !important; }

/* One integrated vector mark on the right. */
html body#rl-app:has(.buttonLogin)::after {
  content: "" !important;
  display: block !important;
  position: fixed !important;
  z-index: 20 !important;
  left: auto !important;
  right: calc(10vw - 37px) !important;
  top: 50% !important;
  width: 410px !important;
  height: 324px !important;
  transform: translateY(-50%) !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  background: url('/custom/gad-logo.svg?v=50') center/contain no-repeat !important;
}
html body#rl-app:has(.buttonLogin) #V-Login form {
  position: fixed !important;
  z-index: 21 !important;
  top: 50% !important;
  right: auto !important;
  left: -300px !important;
  transform: translateY(-50%) !important;
  width: min(440px, calc(100vw - 48px)) !important;
  margin: 0 !important;
  padding: 126px 42px 38px !important;
  background: #fff !important;
  color: var(--casa-ink) !important;
  border: 0 !important;
  border-top: 5px solid var(--casa-red) !important;
  border-radius: 25px !important;
  box-shadow: 0 28px 80px rgba(15,23,42,.22) !important;
  filter: none !important;
  opacity: 1 !important;
}
html body#rl-app:has(.buttonLogin) #V-Login form::before {
  content: "Acesse seu e-mail" !important;
  color: var(--casa-ink) !important;
}
html body#rl-app:has(.buttonLogin) #V-Login form::after {
  content: "Use seu endereço corporativo e sua senha" !important;
  color: #64748b !important;
}
html body#rl-app:has(.buttonLogin) #V-Login form input {
  background: #fff !important;
  color: var(--casa-ink) !important;
  border-color: #cbd5e1 !important;
}
html body#rl-app:has(.buttonLogin) #V-Login form .buttonLogin {
  color: #fff !important;
  background: linear-gradient(135deg, var(--casa-blue), var(--casa-blue-dark)) !important;
}
@media (max-width: 1100px) {
  html body#rl-app:has(.buttonLogin)::after {
    left: auto !important;
    right: 55px !important;
    width: 330px !important;
    height: 260px !important;
  }
}
@media (max-width: 900px) {
  html:not(.ua-gmail-ui) body { background: linear-gradient(145deg, var(--casa-blue-dark), var(--casa-blue)) !important; }
  html body#rl-app:has(.buttonLogin)::after { display: none !important; }
  html body#rl-app:has(.buttonLogin) #V-Login form {
    right: 50% !important;
    transform: translate(50%,-50%) !important;
  }
}

/* Login refinement — restrained, branded and responsive. */
html:not(.ua-gmail-ui) body:has(.buttonLogin) {
  background:
    radial-gradient(circle at 18% 82%, rgba(42,115,219,.34), transparent 25%),
    radial-gradient(circle at 38% 8%, rgba(255,255,255,.09), transparent 21%),
    linear-gradient(116deg, #082d68 0%, #0b3f88 47.9%, #f3f6fb 48%, #f8fafc 100%) !important;
}
html:not(.ua-gmail-ui) body:has(.buttonLogin)::before {
  content: "" !important;
  display: block !important;
  position: fixed !important;
  inset: 0 52% 0 0 !important;
  pointer-events: none !important;
  background-image: radial-gradient(rgba(255,255,255,.13) 1px, transparent 1px) !important;
  background-size: 24px 24px !important;
  -webkit-mask-image: linear-gradient(135deg, rgba(0,0,0,.55), transparent 72%) !important;
  mask-image: linear-gradient(135deg, rgba(0,0,0,.55), transparent 72%) !important;
}
html body#rl-app:has(.buttonLogin)::after {
  filter: drop-shadow(0 18px 24px rgba(10,47,112,.13)) !important;
}
html body#rl-app:has(.buttonLogin) #V-Login form {
  padding: 132px 44px 38px !important;
  border-top: 0 !important;
  border-radius: 24px !important;
  box-shadow: 0 30px 80px rgba(2,18,46,.28), 0 2px 8px rgba(2,18,46,.08) !important;
  outline: 1px solid rgba(255,255,255,.65) !important;
}
html body#rl-app:has(.buttonLogin) #V-Login form::before {
  font-size: 30px !important;
  font-weight: 750 !important;
  letter-spacing: -.8px !important;
}
html body#rl-app:has(.buttonLogin) #V-Login form::after {
  font-size: 14px !important;
  line-height: 1.5 !important;
}
html body#rl-app:has(.buttonLogin) #V-Login form.submitting::after {
  content: none !important;
  display: none !important;
  animation: none !important;
  border: 0 !important;
}
html body#rl-app:has(.buttonLogin) #V-Login form.submitting > * {
  opacity: .72 !important;
}
html body#rl-app:has(.buttonLogin) #V-Login form .controls {
  position: relative !important;
  margin-bottom: 18px !important;
  text-align: left !important;
}
html body#rl-app:has(.buttonLogin) #V-Login form .controls:first-of-type::before {
  content: none !important;
  display: none !important;
}
html body#rl-app:has(.buttonLogin) #V-Login form .login-field-label {
  display: block !important;
  margin: 0 0 7px 2px !important;
  color: #334155 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
}
html body#rl-app:has(.buttonLogin) #V-Login form .controls > span.fontastic {
  position: absolute !important;
  z-index: 2 !important;
  left: 17px !important;
  top: 43px !important;
  transform: translateY(-50%) !important;
  color: #52719f !important;
  opacity: 1 !important;
  font-size: 17px !important;
  line-height: 1 !important;
  pointer-events: none !important;
}
html body#rl-app:has(.buttonLogin) #V-Login form input {
  height: 52px !important;
  min-height: 52px !important;
  padding: 0 16px 0 50px !important;
  border: 1px solid #d7dfeb !important;
  border-radius: 11px !important;
  background: #fff !important;
  font-size: 15px !important;
  box-shadow: inset 0 1px 2px rgba(15,23,42,.025) !important;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease !important;
}
html body#rl-app:has(.buttonLogin) #V-Login form input:hover {
  border-color: #b8c5d8 !important;
  background: #fff !important;
}
html body#rl-app:has(.buttonLogin) #V-Login form input:focus {
  border-color: var(--casa-blue) !important;
  background: #fff !important;
  box-shadow: 0 0 0 4px rgba(22,79,167,.11) !important;
}
html body#rl-app:has(.buttonLogin) #V-Login form .controls[style*="display: flex"] {
  align-items: center !important;
  justify-content: space-between !important;
  min-height: 30px !important;
  margin: -2px 2px 20px !important;
  color: #526176 !important;
  font-size: 13px !important;
}
html body#rl-app:has(.buttonLogin) #V-Login form .e-checkbox {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  cursor: pointer !important;
}
html body#rl-app:has(.buttonLogin) #V-Login form .casa-remember-check {
  position: relative !important;
  display: inline-grid !important;
  place-items: center !important;
  flex: 0 0 18px !important;
  width: 18px !important;
  height: 18px !important;
  border: 1.5px solid #8ba0bd !important;
  border-radius: 50% !important;
  background: #fff !important;
  box-sizing: border-box !important;
  transition: background .16s ease, border-color .16s ease !important;
}
html body#rl-app:has(.buttonLogin) #V-Login form .casa-remember-check.is-checked {
  border-color: var(--casa-blue) !important;
  background: var(--casa-blue) !important;
}
html body#rl-app:has(.buttonLogin) #V-Login form .casa-remember-check.is-checked::after {
  content: "" !important;
  width: 7px !important;
  height: 4px !important;
  border-left: 2px solid #fff !important;
  border-bottom: 2px solid #fff !important;
  transform: translateY(-1px) rotate(-45deg) !important;
}
html body#rl-app:has(.buttonLogin) #V-Login form .e-checkbox span {
  display: inline !important;
  font-size: 13px !important;
  color: #526176 !important;
}
html body#rl-app:has(.buttonLogin) #V-Login form .language-buttons {
  display: none !important;
}
html body#rl-app:has(.buttonLogin) #V-Login form .language-button {
  display: grid !important;
  place-items: center !important;
  width: 30px !important;
  height: 30px !important;
  border-radius: 9px !important;
  color: #52719f !important;
  background: #eef3fa !important;
  text-decoration: none !important;
}
html body#rl-app:has(.buttonLogin) #V-Login form .buttonLogin {
  width: 100% !important;
  height: 54px !important;
  border: 0 !important;
  border-radius: 11px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 1.1px !important;
  box-shadow: 0 13px 28px rgba(10,63,136,.25) !important;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease !important;
}
html body#rl-app:has(.buttonLogin) #V-Login form .buttonLogin:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 16px 32px rgba(10,63,136,.3) !important;
  filter: brightness(1.06) !important;
}
html body#rl-app:has(.buttonLogin) #V-Login form .buttonLogin:active {
  transform: translateY(0) !important;
}
@media (max-width: 900px) {
  html:not(.ua-gmail-ui) body:has(.buttonLogin)::before { inset: 0 !important; }
  html body#rl-app:has(.buttonLogin) #V-Login form {
    left: 50% !important;
    right: auto !important;
    transform: translate(-50%,-50%) !important;
    width: min(440px, calc(100vw - 32px)) !important;
    padding-left: 32px !important;
    padding-right: 32px !important;
  }
}