/* =====================================================================
   Shared Authentication Pages Styles
   ===================================================================== */

body {
    margin: 0;
    padding: 0;
    font-family: var(--ds-font-family-sans);
    min-height: 100vh;
}

/* Password toggle icon visibility */
.c-input__icon-button .password-hide {
    display: none;
}

.c-input__icon-button .password-show {
    display: block;
}

.auth-split-container {
    display: grid;
    min-height: 100vh;
    grid-template-columns: 1fr;
}

@media (min-width: 1024px) {
    .auth-split-container {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 1280px) {
    .auth-split-container {
        grid-template-columns: 2fr 1fr;
    }
}

.auth-image-side {
    display: none;
    position: relative;
    background: var(--ds-color-accent);
    background-image: url('../../img/common/illustrations/auth-background.png');
    background-size: cover;
    background-position: center;
    padding: var(--ds-space-xxl);
}

@media (min-width: 1024px) {
    .auth-image-side {
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

.auth-image-side svg {
    position: absolute;
    z-index: 0;
    opacity: 0.3;
}

.auth-image-side img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 1;
}

.auth-form-side {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--ds-color-surface);
    padding: var(--ds-space-xl);
}

.auth-form-container {
    width: 100%;
    max-width: 28rem;
}

.back-link {
    display: inline-flex;
    align-items: center;
    gap: var(--ds-space-s);
    margin-bottom: var(--ds-space-xl);
    color: var(--ds-color-accent);
    text-decoration: none;
    font-size: var(--ds-font-size-s);
    transition: var(--ds-duration-fast);
}

.back-link:hover {
    gap: var(--ds-space-m);
}

.back-link i {
    transition: transform var(--ds-duration-fast);
}

.back-link:hover i {
    transform: translateX(-0.25rem);
}

.auth-logo {
    display: flex;
    align-items: center;
    gap: var(--ds-space-m);
    margin-bottom: var(--ds-space-xl);
}

.auth-logo__link {
    display: flex;
    align-items: center;
    gap: var(--ds-space-m);
    text-decoration: none;
    color: var(--ds-color-accent);
}

.auth-logo svg {
    width: auto;
    height: 80px;
}

.auth-logo h2 {
    margin: 0;
    font-size: var(--ds-font-size-xl);
    font-weight: var(--ds-font-weight-semibold);
    color: var(--ds-color-text);
}

.auth-header {
    margin-bottom: var(--ds-space-l);
}

.auth-header h3 {
    margin: 0 0 var(--ds-space-s) 0;
    font-size: 1.875rem;
    font-weight: var(--ds-font-weight-semibold);
    color: var(--ds-color-text);
}

.auth-header p {
    margin: 0;
    color: var(--ds-color-text-weak);
}

.auth-magic-link {
    margin-bottom: var(--ds-space-l);
}

.auth-magic-link p {
    margin: 0;
    color: var(--ds-color-text-weak);
}

.auth-magic-link a {
    color: var(--ds-color-accent);
    text-decoration: none;
    font-weight: var(--ds-font-weight-medium);
}

.auth-magic-link a:hover {
    text-decoration: underline;
}

.auth-buttons {
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-m);
    margin-bottom: var(--ds-space-l);
}

@media (min-width: 640px) {
    .auth-buttons {
        flex-direction: row;
        gap: var(--ds-space-l);
    }
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin-bottom: var(--ds-space-l);
}

.auth-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--ds-space-m);
}

.auth-remember {
    display: flex;
    align-items: center;
    gap: var(--ds-space-s);
}

.auth-footer {
    text-align: center;
}

.auth-footer p {
    margin: 0;
    color: var(--ds-color-text-weak);
}

.auth-footer a {
    color: var(--ds-color-accent);
    text-decoration: none;
    font-weight: var(--ds-font-weight-medium);
}

.auth-footer a:hover {
    text-decoration: underline;
}

/* =====================================================================
   Password Strength Meter
   ===================================================================== */

.password-strength-meter {
    margin-top: var(--ds-space-s);
}

.password-strength-meter__bar {
    height: 4px;
    background-color: var(--ds-color-border);
    border-radius: var(--ds-radius-pill);
    overflow: hidden;
    margin-bottom: var(--ds-space-xs);
}

.password-strength-meter__fill {
    height: 100%;
    width: 0%;
    transition: width var(--ds-duration-normal) var(--ds-ease-out),
                background-color var(--ds-duration-normal) var(--ds-ease-out);
    border-radius: var(--ds-radius-pill);
}

.password-strength-meter__fill--very-weak {
    background-color: var(--ds-color-status-danger);
}

.password-strength-meter__fill--weak {
    background-color: #f97316;
}

.password-strength-meter__fill--fair {
    background-color: var(--ds-color-status-warning);
}

.password-strength-meter__fill--good {
    background-color: #84cc16;
}

.password-strength-meter__fill--strong {
    background-color: var(--ds-color-status-success);
}

.password-strength-meter__text {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: var(--ds-font-size-xs);
    color: var(--ds-color-text-weak);
}

.password-strength-meter__label {
    font-weight: var(--ds-font-weight-medium);
    transition: color var(--ds-duration-normal) var(--ds-ease-out);
}

.password-strength-meter__label--very-weak {
    color: var(--ds-color-status-danger);
}

.password-strength-meter__label--weak {
    color: #f97316;
}

.password-strength-meter__label--fair {
    color: var(--ds-color-status-warning);
}

.password-strength-meter__label--good {
    color: #84cc16;
}

.password-strength-meter__label--strong {
    color: var(--ds-color-status-success);
}

.password-strength-meter__requirements {
    font-size: var(--ds-font-size-xs);
    color: var(--ds-color-text-weaker);
}