/* ========================================
   INDEX.CSS - TABLET RESPONSIVE STYLES (768px - 1023px)
   ======================================== */

@media (min-width: 768px) and (max-width: 1023px) {
  .container {
    width: 90%;
    padding: 1.5rem 2rem;
  }

  .login-container {
    padding: 2rem;
  }

  .login-form,
  .login-box {
    max-width: 500px;
    padding: 2.5rem;
  }

  .login-form h2,
  .login-box h2 {
    font-size: 2rem;
  }

  .login-form input,
  .login-box input {
    font-size: 1.1rem;
    padding: 0.9rem;
  }

  .modal {
    min-width: 400px;
    max-width: 80%;
    padding: 2rem;
  }

  .modal-buttons button {
    padding: 0.6rem 2rem;
    font-size: 1rem;
  }

  .tags-area {
    padding: 1.5%;
  }

  .tag {
    font-size: 1rem;
    padding: 8px 14px;
  }

  .error,
  .login-error,
  .success-message,
  .error-message {
    font-size: 1rem;
    padding: 1rem;
    margin: 1.2rem 0;
  }
}