/**
 * ------------------------------------------------------------
 * 🔐 Authentication Module Stylesheet (auth.css)
 * ------------------------------------------------------------
 * Styling for:
 *   - Login & registration forms
 *   - Auth containers, titles, and links
 *   - Primary/secondary button gradients
 *   - Responsive layout
 *
 * Uses Quooter theme variables (see CSS.md)
 *
 * @package Quooter\Modules\Auth
 * @version 1.0
 * @license G2B2
 */

/* ============================================================
   🧩 Auth Container
============================================================ */
.auth-container {
  max-width: 480px;
  min-width: 360px;
  border: none;
  box-shadow: none;
  transition: none;
}

.auth-container:hover {
  box-shadow: none;
}

/* ============================================================
   🧩 Headings
============================================================ */
.auth-container h2 {
  text-align: center;
  margin-bottom: 1.5rem;
  color: var(--colour-text);
  font-size: var(--font-size-large);
  line-height: var(--line-height-heading);
}

/* ============================================================
   🧩 Links
============================================================ */
.auth-links {
  text-align: center;
}

/* ============================================================
   🧩 Responsive Tweaks
   Full-screen experience on phones
============================================================ */
@media (max-width: 480px) {
  .auth-container {
    width: 100%;
    height: auto;
    min-height: auto;

    /* Remove fixed sizing constraints */
    min-width: unset;
    max-width: 100%;

    margin: 0;
    padding: 1.5rem;

    border-radius: 0; /* natural mobile card feel */
    box-shadow: none; /* avoids clipped edges due to full screen */
    
    display: flex;
    flex-direction: column;
    justify-content: center; /* vertical centering */

    background: unset;
    border: unset;
    transition: unset;

  }
}