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

  /* Register Card */
  .register-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;
  }

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

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

  .register-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;
      /* Padding esquerda para ícone */
      color: #fff;
      font-size: 0.95rem;
      transition: 0.3s;
  }

  .input-custom.password-input {
      padding-right: 45px;
      /* Padding direita para olho */
  }

  .input-custom:focus {
      outline: none;
      border-color: var(--default-color);
      box-shadow: 0 0 10px rgba(255, 193, 7, 0.1);
  }

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

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

  .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;
  }

  /* === 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;
  }

  /* Custom Checkbox */
  .form-check-input {
      background-color: transparent;
      border-color: #444;
      cursor: pointer;
  }

  .form-check-input:checked {
      background-color: var(--default-color);
      border-color: var(--default-color);
  }

  .form-check-input:focus {
      border-color: var(--default-color);
  }

  /* Main Button */
  .btn-register {
      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-top: 10px;
      margin-bottom: 20px;
       transition: background 0.25s ease, box-shadow 0.25s ease, transform 0.15s ease;
  }

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

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


  /* 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: rgba(255, 193, 7, 0.1);
      color: #fff;
  }

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

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

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

  @media (max-width: 576px) {
      .register-card {
          padding: 25px;
          border-width: 1px;
      }

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