/* =============================================================================
   LOGIN PAGE STYLES - Redesign (teal centered card)
   Transforms the 2-column Vuexy layout into a single centered teal card
   matching the Figma design.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. PAGE BACKGROUND - default white, background-image set via inline style
      when login_background_image / login_bg is configured
   ----------------------------------------------------------------------------- */
.radial-gradient {
  background-color: #fff;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Hide the animated radial-gradient overlay from styles.css */
.radial-gradient::before {
  display: none !important;
}

/* -----------------------------------------------------------------------------
   2. HIDE the right background column entirely
   ----------------------------------------------------------------------------- */
.bg-custom {
  display: none !important;
}

/* Also remove the ::after overlay since column is hidden */
.bg-custom::after {
  display: none !important;
}

/* -----------------------------------------------------------------------------
   3. MAKE LEFT COLUMN full-width (override Bootstrap col-lg-6/xl-5/xxl-4)
   ----------------------------------------------------------------------------- */
.radial-gradient .row.gx-0 > div:first-child {
  flex: 0 0 100% !important;
  max-width: 100% !important;
  width: 100% !important;
}

/* Parent wrapper - transparent bg, centered */
.radial-gradient .bg-body {
  background: transparent !important;
}

/* -----------------------------------------------------------------------------
   4. AUTH CARD - teal centered card (matching Figma: 527px, p-62px, #5dbecc)
   ----------------------------------------------------------------------------- */
.auth-card {
  max-width: 527px !important;
  flex: 0 0 auto !important;
  background: var(--login-card-bg, var(--main-color, #5dbecc));
  color: var(--login-card-text, #29343d);
  padding: 62px;
  border-radius: 8px;
}

@media (max-width: 767.98px) {
  .auth-card {
    padding: 32px 24px;
  }
}

/* -----------------------------------------------------------------------------
   5. LOGO - área ampliada, proporção original preservada
   ----------------------------------------------------------------------------- */
.auth-card .logo-img {
  text-align: center;
  margin-bottom: 8px;
}

/* Anula o quadrado fixo de 70x70 de custom-style.css (.logo) e deixa a imagem
   crescer dentro da área disponível sem cortar, esticar ou achatar.
   Funciona para logos horizontais, verticais e quadradas. */
.auth-card .logo-img img,
.auth-card .logo-img img.logo {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 160px;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}

@media (max-width: 767.98px) {
  .auth-card .logo-img img,
  .auth-card .logo-img img.logo {
    max-height: 120px;
  }
}

/* Logo fallback text (when no image) */
.auth-card .logo-img h2,
.auth-card .logo-img span {
  color: var(--login-card-text, #fff) !important;
}

/* -----------------------------------------------------------------------------
   6. HEADING & SUBTITLE - hide to match Figma (no "Login" heading in design)
   ----------------------------------------------------------------------------- */
.auth-card > h2.fs-7 {
  display: none;
}

.auth-card > p.mb-9 {
  display: none;
}

/* -----------------------------------------------------------------------------
   7. FORM LABELS - dark on teal background
   ----------------------------------------------------------------------------- */
.auth-card .form-label {
  color: var(--login-card-text, #29343d);
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 8px;
}

/* -----------------------------------------------------------------------------
   8. FORM INPUTS - white with subtle border on teal bg
   ----------------------------------------------------------------------------- */
.auth-card .form-control {
  background: #fff;
  border: 1px solid #e0e6eb;
  border-radius: 4px;
  padding: 12px 16px;
  font-family: 'Manrope', sans-serif;
  font-size: 14px;
  color: #29343d;
}

.auth-card .form-control:focus {
  border-color: #025260;
  box-shadow: 0 0 0 0.15rem rgba(2, 82, 96, 0.15);
}

.auth-card .form-control::placeholder {
  color: #a0aab2;
}

/* Input group - password eye button */
.auth-card .input-group .btn-outline-primary {
  border: 1px solid #e0e6eb !important;
  border-left: none !important;
  color: #6c757d !important;
  background: #fff !important;
  border-radius: 0 4px 4px 0;
}

.auth-card .input-group .btn-outline-primary:hover {
  background-color: #f8f9fa !important;
  color: #6c757d !important;
}

.auth-card .input-group .form-control {
  border-right: none;
}

.auth-card .input-group .form-control:focus + .btn-outline-primary {
  border-color: #025260 !important;
}

/* -----------------------------------------------------------------------------
   9. LINKS - dark, centered, underlined
   ----------------------------------------------------------------------------- */
.auth-card .d-sm-flex {
  justify-content: center !important;
}

.auth-card a.text-primary,
.auth-card a.fw-medium {
  color: var(--login-card-text, #001726) !important;
  text-decoration: underline;
  font-family: 'Manrope', sans-serif;
  font-weight: 500;
  font-size: 14px;
  opacity: 0.85;
}

.auth-card a.text-primary:hover,
.auth-card a.fw-medium:hover {
  color: var(--login-card-text, #001726) !important;
  opacity: 1;
}

/* -----------------------------------------------------------------------------
   10. PRIMARY BUTTON - dark teal, centered, auto-width
   ----------------------------------------------------------------------------- */
.auth-card .btn-primary {
  background-color: var(--main-color-dark, #025260) !important;
  border-color: var(--main-color-dark, #025260) !important;
  border-radius: 8px;
  font-family: 'Manrope', sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 24px;
  padding: 10px 40px;
  width: auto !important;
  display: block;
  margin-left: auto;
  margin-right: auto;
  height: auto;
}

.auth-card .btn-primary:hover {
  background-color: color-mix(in srgb, var(--main-color-dark, #025260) 85%, black) !important;
  border-color: color-mix(in srgb, var(--main-color-dark, #025260) 85%, black) !important;
}

/* -----------------------------------------------------------------------------
   11. WHATSAPP CARD
   ----------------------------------------------------------------------------- */
.bg-whats {
  background-color: #146252;
}

/* Style WhatsApp card text on teal bg */
.auth-card .bg-whats {
  border-radius: 8px;
}