/* CSS Variables */
:root {
  --primary-font: "Oswald", sans-serif;
  --secondary-font: "Limelight", serif;
  --primary-color: #ffffff;
  --secondary-color: #000000; 
  --body-background-color: #2f3c4b;
  --card-background-colour: #1a1a1a;
  --rating-color: #ffcf33;
  --hover-color: #99ffee;
  --search-button-color: #3700ff;
  --divider-color: #7a7a7a3d;
  --shadow-color: #0000006c;
  --primary-color-transparent: #ffffff8c;
}

/* Auth Page Layout */
.auth-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 80vh;
}

.auth-card {
    background: var(--card-background-colour);
    color: var(--primary-color);
    border-radius: 12px;
    padding: 35px 40px;
    width: 380px;
    box-shadow: 0px 0px 25px var(--shadow-color);
}

.auth-card a {
    color: var(--primary-color);
}

/* Title */
.auth-title {
    text-align: center;
    margin-bottom: 25px;
}

/* Form Fields */
.form-group label {
    color: var(--primary-color);
    font-size: 14px;
    margin-bottom: 6px;
    display: block;
}

.form-group input {
    width: 100%;
    padding: 10px 12px;
    border-radius: 6px;
    border: 1px solid var(--primary-color-transparent);
    background: var(--body-background-color);
    color: var(--primary-color);
}

/* Placeholder Styling */
.form-group input::placeholder {
    color: var(--primary-color);
    opacity: 1;
}

/* Password + Eye Icon */
.password-row {
    position: relative;
    display: flex;
    align-items: center;
}

.password-row input {
    width: 100%;
    padding-right: 40px; /* give the bigger icon more space */
}

/* Improved visibility toggle */
.password-toggle {
    width: 26px;         /* bigger, easier to see */
    height: 26px;
    position: absolute;
    right: 10px;
    cursor: pointer;
    opacity: 0.85;       /* slightly clearer by default */
    stroke: var(--primary-color);     /* ensure bright white lines */
    flex-shrink: 0;      /* prevents the SVG from collapsing */
}

.password-toggle:hover,
.password-toggle:focus {
    opacity: 1;
}

/* Secondary Text */
.auth-alt-text {
    text-align: center;
    margin-top: 15px;
    font-size: 14px;
}