/* Main Login Section */
   .login-section {
       flex-grow: 1;
       display: flex;
       align-items: center;
       justify-content: center;
       padding: 75px 5px 80px 5px;
   }

   /* Login Card - Matches Image Design */
   .login-card {
       background: #000;
       border: 1px solid var(--default-color);
       border-radius: 12px;
       padding: 40px;
       width: 100%;
       max-width: 600px;
       box-shadow: 0 0 50px rgba(0, 0, 0, 0.8);
       position: relative;
       min-height: 520px;
       /* Altura mínima para evitar pulos na transição */
       display: flex;
       align-items: center;
       /* Centralizar verticalmente o conteúdo */
   }

   .card-content-wrapper {
       width: 100%;
   }

   .login-title {
       text-align: center;
       font-size: 2rem;
       font-weight: 700;
       color: #fff;
       margin-bottom: 5px;

   }

   .login-title span {
       color: var(--default-color);
   }

   .login-subtitle {
       text-align: center;
       color: #888;
       font-size: 0.9rem;
       margin-bottom: 30px;
   }

   /* Form Labels & Inputs */
   .form-label {
       color: #ccc;
       font-size: 0.9rem;
       margin-bottom: 8px;
   }

   .input-group-custom {
       position: relative;
       margin-bottom: 20px;
   }

   .input-custom {
       width: 100%;
       background: transparent;
       border: 1px solid #333;
       border-radius: 6px;
       padding: 12px 15px 12px 45px;
       color: #fff;
       font-size: 0.95rem;
       transition: 0.3s;
   }


   .input-custom.password-input {
       padding-right: 45px;
   }

   .input-custom:focus {
       outline: none;
       border-color: var(--default-color);
   }

   .input-custom::placeholder {
       color: #555;
   }

   .input-icon {
       position: absolute;
       left: 15px;
       top: 50%;
       transform: translateY(-50%);
       color: #666;
       pointer-events: none;

   }

   /* Ícone Toggle Senha (Olho) - Lado Direito */
   .password-toggle {
       position: absolute;
       right: 15px;
       top: 50%;
       transform: translateY(-50%);
       color: var(--default-color);
       cursor: pointer;
       z-index: 5;
       transition: 0.3s;
   }

   .password-toggle:hover {
       color: #fff;
   }

   .forgot-pass {
       display: block;
       text-align: right;
       color: #aaa;
       font-size: 0.8rem;
       text-decoration: none;
       margin-top: -15px;
       /* Pull up closer to input */
       margin-bottom: 25px;
       cursor: pointer;
       transition: 0.3s;
   }

   .forgot-pass:hover {
       color: var(--default-color);
   }

   /* Main Button */
   .btn-login {
       width: 100%;
       background: transparent;
       border: 1px solid var(--default-color);
       color: var(--default-color);
       padding: 12px;

       font-weight: 700;
       font-size: 1.1rem;
       border-radius: 6px;
       text-transform: uppercase;
       transition: 0.3s;
       margin-bottom: 20px;
   }

   .btn-login:hover {
       background: var(--default-color);
       color: #000;

   }

   .btn-login:disabled {
       background: #2a2a2a;
       color: #9ca3af;
       border: 1px solid #3a3a3a;
       cursor: not-allowed;
       opacity: 0.75;
       box-shadow: none;
       transform: none;
   }

   .btn-recovery {
       width: 100%;
       background: transparent;
       border: 1px solid var(--default-color);
       color: var(--default-color);
       padding: 12px;

       font-weight: 700;
       font-size: 1.1rem;
       border-radius: 6px;
       text-transform: uppercase;
       transition: 0.3s;
       margin-bottom: 20px;
   }

   .btn-recovery:hover {
       background: var(--default-color);
       color: #000;

   }

   .btn-recovery:disabled {
       background: #2a2a2a;
       color: #9ca3af;
       border: 1px solid #3a3a3a;
       cursor: not-allowed;
       opacity: 0.75;
       box-shadow: none;
       transform: none;
   }

   .btn-reset {
       width: 100%;
       background: transparent;
       border: 1px solid var(--default-color);
       color: var(--default-color);
       padding: 12px;

       font-weight: 700;
       font-size: 1.1rem;
       border-radius: 6px;
       text-transform: uppercase;
       transition: 0.3s;
       margin-bottom: 20px;
   }

   .btn-reset:hover {
       background: var(--default-color);
       color: #000;

   }

   .btn-reset:disabled {
       background: #2a2a2a;
       color: #9ca3af;
       border: 1px solid #3a3a3a;
       cursor: not-allowed;
       opacity: 0.75;
       box-shadow: none;
       transform: none;
   }

   .btn-secondary-action {
       width: 100%;
       background: transparent;
       border: 1px solid #444;
       color: #aaa;
       padding: 10px;

       font-weight: 700;
       font-size: 1rem;
       border-radius: 6px;
       text-transform: uppercase;
       transition: 0.3s;
       margin-top: -10px;
       /* Pull closer to previous button */
   }

   .btn-secondary-action:hover {
       border-color: #fff;
       color: #fff;
   }

   /* Divider */
   .divider {
       display: flex;
       align-items: center;
       text-align: center;
       color: #444;
       font-size: 0.8rem;
       margin-bottom: 20px;
   }

   .divider::before,
   .divider::after {
       content: '';
       flex: 1;
       border-bottom: 1px solid #222;
   }

   .divider::before {
       margin-right: 10px;
   }

   .divider::after {
       margin-left: 10px;
   }

   /* Social Buttons */
   .social-row {
       display: flex;
       gap: 15px;
       margin-bottom: 30px;
   }

   .btn-social {
       flex: 1;
       background: transparent;
       border: 1px solid var(--default-color);
       color: var(--default-color);
       padding: 10px;
       border-radius: 6px;
       display: flex;
       align-items: center;
       justify-content: center;
       gap: 10px;
       font-size: 0.9rem;
       transition: 0.3s;
       text-decoration: none;
   }

   .btn-social:hover {
       background: var(--default-color);
       color: #000000;
       font-weight: 700;
   }

   /* Footer Text */
   .register-text {
       text-align: center;
       font-size: 0.9rem;
       color: #fff;
   }

   .register-text a {
       color: var(--default-color);
       text-decoration: none;
       font-weight: 700;
   }

   .register-text a:hover {
       text-decoration: underline;
   }

   /* === Password Strength Styles (Horizontal Layout) === */
   .pass-strength-container {
       display: flex;
       align-items: center;
       justify-content: space-between;
       gap: 15px;
       margin-top: 6px;
       /* Bem perto do input */
       margin-bottom: 15px;
       opacity: 0;
       transition: all 0.3s ease;
       height: 0;
       overflow: hidden;
   }

   .pass-strength-container.visible {
       opacity: 1;
       height: auto;
       padding-bottom: 5px;
   }

   .strength-bars {
       flex-grow: 1;
       display: flex;
       gap: 3px;
       height: 3px;
   }

   .strength-seg {
       flex: 1;
       background: #222;
       border-radius: 2px;
       transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
   }

   .strength-text {
       font-size: 0.7rem;
       text-align: right;
       font-weight: 700;

       text-transform: uppercase;
       letter-spacing: 1px;
       color: #555;
       white-space: nowrap;
       min-width: 90px;
       /* Garante alinhamento */
       transition: color 0.3s;
   }

   /* Strength Colors Classes */
   .seg-weak {
       background: #dc3545 !important;
       box-shadow: 0 0 5px #dc3545;
   }

   .seg-fair {
       background: #fd7e14 !important;
       box-shadow: 0 0 5px #fd7e14;
   }

   .seg-good {
       background: var(--default-color) !important;
       box-shadow: 0 0 5px var(--default-color);
   }

   .seg-strong {
       background: #198754 !important;
       box-shadow: 0 0 8px #198754;
   }

   .text-weak {
       color: #dc3545;
   }

   .text-fair {
       color: #fd7e14;
   }

   .text-good {
       color: var(--default-color);
   }

   .text-strong {
       color: #198754;
   }


   @media (max-width: 576px) {
       .login-card {
           padding: 25px;
           border-width: 1px;
           min-height: auto;
       }

       .login-title {
           font-size: 1.8rem;
       }
   }