/* AuthForge – Frontend */
/* Variables CSS injectées dynamiquement via wp_add_inline_style */

.af-wrap {
    font-family: var(--af-font);
    max-width: var(--af-max-width);
    width: 100%;
    background: var(--af-bg);
    border-radius: var(--af-radius);
    padding: 32px;
    box-shadow: var(--af-shadow);
    border: 1px solid var(--af-border);
    box-sizing: border-box;
    color: var(--af-text);
}

/* Forcer la police sur TOUS les éléments — les inputs/buttons héritent rarement */
.af-wrap *,
.af-wrap input,
.af-wrap button,
.af-wrap select,
.af-wrap textarea,
.af-wrap label {
    font-family: var(--af-font) !important;
    box-sizing: border-box;
}

/* Logo */
.af-logo { text-align: center; margin-bottom: 20px; }
.af-logo img { max-height: 56px; max-width: 180px; object-fit: contain; }

/* Titre */
.af-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--af-text);
    margin: 0 0 24px;
    text-align: center;
    letter-spacing: -.3px;
}

/* Description */
.af-description {
    font-size: 14px;
    color: #6b7280;
    margin: -8px 0 20px;
    line-height: 1.6;
}

/* Notices */
.af-notices { margin-bottom: 18px; }
.af-notice {
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 14px;
    margin: 0 0 10px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    line-height: 1.5;
}
.af-notice-error   { background: #fef2f2; color: var(--af-error);   border: 1px solid #fecaca; }
.af-notice-success { background: #f0fdf4; color: var(--af-success); border: 1px solid #bbf7d0; }
.af-notice-info    { background: #eff6ff; color: #1d4ed8;            border: 1px solid #bfdbfe; }

/* Champs */
.af-field-group { margin-bottom: 18px; }

.af-label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: var(--af-label);
    margin-bottom: 6px;
}

.af-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.af-forgot-link {
    font-size: 13px;
    color: var(--af-primary);
    text-decoration: none;
}
.af-forgot-link:hover { text-decoration: underline; }

.af-input-wrap { position: relative; }

.af-input {
    width: 100%;
    height: 42px;
    padding: 0 14px;
    border: 1.5px solid var(--af-border);
    border-radius: calc(var(--af-radius) - 4px);
    font-size: 15px;
    color: var(--af-text);
    background: var(--af-bg);
    transition: border-color .15s, box-shadow .15s;
    outline: none;
    -webkit-appearance: none;
}
.af-input-wrap .af-input { padding-right: 44px; }

.af-input:focus {
    border-color: var(--af-primary);
    box-shadow: 0 0 0 3px rgba(37,99,235,0.25);
}

.af-input::placeholder { color: #9ca3af; }

/* Toggle password */
.af-toggle-pwd {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    color: #9ca3af;
    display: flex;
    align-items: center;
    transition: color .15s;
}
.af-toggle-pwd:hover { color: var(--af-label); }

/* Remember me */
.af-remember { margin-bottom: 20px; }
.af-check-label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 14px;
    color: var(--af-label);
    user-select: none;
}
.af-checkbox { display: none; }
.af-check-custom {
    width: 18px; height: 18px;
    border: 2px solid var(--af-border);
    border-radius: 5px;
    flex-shrink: 0;
    transition: all .15s;
    position: relative;
}
.af-checkbox:checked + .af-check-custom {
    background: var(--af-primary);
    border-color: var(--af-primary);
}
.af-checkbox:checked + .af-check-custom::after {
    content: '';
    position: absolute;
    left: 3px; top: 1px;
    width: 8px; height: 5px;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(-45deg);
}

/* Bouton */
.af-btn {
    width: 100%;
    height: 44px;
    border: none;
    border-radius: calc(var(--af-radius) - 4px);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all .15s;
    letter-spacing: .01em;
}
.af-btn-primary {
    background: var(--af-primary);
    color: var(--af-primary-text);
}
.af-btn-primary:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(37,99,235,0.35);
}
.af-btn-primary:active {
    transform: translateY(0);
    filter: brightness(.95);
}

/* Lien alternatif */
.af-alt-link {
    text-align: center;
    margin: 16px 0 0;
    font-size: 14px;
    color: #6b7280;
}
.af-alt-link a {
    color: var(--af-primary);
    text-decoration: none;
    font-weight: 500;
}
.af-alt-link a:hover { text-decoration: underline; }

/* Indicateur de force */
.af-strength-meter {
    height: 4px;
    background: #e5e7eb;
    border-radius: 2px;
    margin-top: 8px;
    overflow: hidden;
}
.af-strength-bar {
    height: 100%;
    width: 0;
    border-radius: 2px;
    transition: width .3s, background .3s;
}
.af-strength-label {
    display: block;
    font-size: 12px;
    margin-top: 4px;
    font-weight: 500;
}

/* User links */
.af-user-name  { font-weight: 500; }
.af-logout-link, .af-login-link, .af-register-link {
    color: var(--af-primary);
    text-decoration: none;
}
.af-logout-link:hover, .af-login-link:hover, .af-register-link:hover {
    text-decoration: underline;
}