/* ============ صفحات الدخول والتسجيل ============ */
.auth-page {
    --brand-primary: #512BD4;
    --brand-secondary: #2d3e50;
    min-height: 100vh;
    display: flex;
    background: #f4f6f9;
    font-family: var(--brand-font,
                 "Lyon Arabic Display"),
             "Lyon Arabic Display",
             Arial,
             sans-serif;
    overflow: hidden;
}

/* ---- لوحة الهوية ---- */
.auth-brand {
    position: relative;
    flex: 1 1 46%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    background: linear-gradient(155deg, var(--brand-primary) 0%, var(--brand-secondary) 100%);
    color: #fff;
    overflow: hidden;
}

.auth-brand__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: .35;
    pointer-events: none;
    animation: auth-float 10s ease-in-out infinite;
}
.auth-brand__glow--one { width: 320px; height: 320px; background: #fff; top: -80px; inset-inline-start: -60px; }
.auth-brand__glow--two { width: 260px; height: 260px; background: #fff; bottom: -60px; inset-inline-end: -40px; animation-delay: -4s; }

@keyframes auth-float {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-20px) scale(1.05); }
}

.auth-brand__content { position: relative; z-index: 1; max-width: 420px; text-align: center; }

.auth-brand__logo {
    width: 96px; height: 96px; object-fit: contain;
    border-radius: 24px; background: rgba(255,255,255,.12);
    padding: 14px; margin-bottom: 1.75rem;
    box-shadow: 0 10px 30px rgba(0,0,0,.15);
}

.auth-brand__title { font-size: 2rem; font-weight: 800; margin-bottom: .75rem; }
.auth-brand__subtitle { font-size: 1.05rem; opacity: .9; line-height: 1.8; margin-bottom: 2rem; }

.auth-brand__features { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .85rem; text-align: start; }
.auth-brand__features li {
    display: flex; align-items: center; gap: .65rem; font-size: .95rem;
    background: rgba(255,255,255,.08); padding: .65rem .9rem; border-radius: 12px;
    backdrop-filter: blur(4px);
}
.auth-brand__feature-icon { width: 22px; height: 22px; flex-shrink: 0; }

/* ---- لوحة النموذج ---- */
.auth-form-wrapper { flex: 1 1 54%; display: flex; align-items: center; justify-content: center; padding: 2rem; }

.auth-card {
    width: 100%; max-width: 420px; background: #fff;
    border-radius: 22px; padding: 2.5rem 2.25rem;
    box-shadow: 0 20px 60px rgba(20,30,50,.08);
}

.auth-card__mobile-brand { display: none; align-items: center; gap: .6rem; margin-bottom: 1.5rem; font-weight: 700; color: var(--brand-primary); }
.auth-card__mobile-brand img { width: 36px; height: 36px; object-fit: contain; }

.auth-card__title { font-size: 1.6rem; font-weight: 800; color: #1a2233; margin-bottom: .35rem; }
.auth-card__subtitle { color: #6b7385; font-size: .95rem; margin-bottom: 1.75rem; }

.auth-alert { padding: .75rem 1rem; border-radius: 12px; font-size: .9rem; margin-bottom: 1.25rem; }
.auth-alert--error { background: #fdeceb; color: #b3261e; border: 1px solid #f6c7c3; }
.auth-alert--success { background: #e9f9f0; color: #147850; border: 1px solid #b9e8cf; }

.auth-form { display: flex; flex-direction: column; gap: 1.15rem; }
.auth-field label { display: block; font-size: .85rem; font-weight: 600; color: #384057; margin-bottom: .4rem; }

.auth-input { position: relative; display: flex; align-items: center; }
.auth-input svg { position: absolute; inset-inline-start: 14px; width: 18px; height: 18px; color: #98a1b3; pointer-events: none; }

.auth-input input {
    width: 100%; padding: .8rem 1rem; padding-inline-start: 42px;
    border: 1.5px solid #e4e7ee; border-radius: 12px; font-size: .95rem;
    color: #1a2233; background: #f9fafc;
    transition: border-color .2s, box-shadow .2s, background .2s;
}
.auth-input input::placeholder { color: #a7aebd; }
.auth-input input:focus {
    outline: none; border-color: var(--brand-primary); background: #fff;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-primary) 15%, transparent);
}

.auth-input__toggle {
    position: absolute; inset-inline-end: 10px; border: none; background: none;
    color: var(--brand-primary); font-size: .8rem; font-weight: 600; cursor: pointer; padding: .3rem .5rem;
}

.auth-field .validation-message { display: block; color: #d64545; font-size: .8rem; margin-top: .35rem; }

.auth-submit {
    margin-top: .4rem; border: none; border-radius: 12px; padding: .9rem 1rem;
    font-size: 1rem; font-weight: 700; color: #fff;
    background: linear-gradient(120deg, var(--brand-primary), var(--brand-secondary));
    cursor: pointer; transition: transform .15s, box-shadow .15s, opacity .15s;
    box-shadow: 0 10px 24px color-mix(in srgb, var(--brand-primary) 35%, transparent);
}
.auth-submit:hover:not(:disabled) { transform: translateY(-2px); }
.auth-submit:disabled { opacity: .7; cursor: not-allowed; }

.auth-switch { text-align: center; margin-top: 1.75rem; font-size: .9rem; color: #6b7385; }
.auth-switch a { color: var(--brand-primary); font-weight: 700; text-decoration: none; }
.auth-switch a:hover { text-decoration: underline; }

.auth-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

@media (max-width: 900px) {
    .auth-brand { display: none; }
    .auth-form-wrapper { flex: 1 1 100%; }
    .auth-card__mobile-brand { display: flex; }
}
@media (max-width: 480px) {
    .auth-form-grid { grid-template-columns: 1fr; }
    .auth-card { padding: 2rem 1.4rem; border-radius: 18px; }
}
.auth-card--wide { max-width: 640px; }

.auth-form-grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 700px) { .auth-form-grid--4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .auth-form-grid--4 { grid-template-columns: 1fr; } }

.auth-section-title {
    font-size: 1.05rem; font-weight: 800; color: #1a2233;
    margin: 1.5rem 0 .25rem; padding-top: 1rem; border-top: 1px solid #eef0f4;
}
.auth-section-title:first-of-type { border-top: none; padding-top: 0; margin-top: .5rem; }
.auth-section-desc { color: #6b7385; font-size: .85rem; margin: 0 0 .5rem; }
.auth-field__hint { color: #8a92a3; font-size: .78rem; margin: -.15rem 0 .4rem; }

.auth-input--plain, .auth-select, .auth-textarea {
    width: 100%; padding: .75rem .9rem; border: 1.5px solid #e4e7ee; border-radius: 12px;
    font-size: .92rem; color: #1a2233; background: #f9fafc; font-family: inherit;
    transition: border-color .2s, box-shadow .2s, background .2s;
}
.auth-textarea { resize: vertical; min-height: 80px; }
.auth-input--plain:focus, .auth-select:focus, .auth-textarea:focus {
    outline: none; border-color: var(--brand-primary); background: #fff;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-primary) 15%, transparent);
}
.auth-input--other { margin-top: .5rem; }

.auth-checkbox-group { display: flex; flex-direction: column; gap: .5rem; }
.auth-checkbox { display: flex; align-items: center; gap: .55rem; font-size: .9rem; color: #384057; cursor: pointer; }
.auth-checkbox input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--brand-primary); cursor: pointer; }

.auth-page {
    position: relative;
    overflow: hidden;
    background-image: linear-gradient(
        to bottom,
        var(--brand-primary) 0%,
        var(--brand-secondary) 100%
    );
}

.auth-page::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: var(--brand-calligraphy);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center top;
    mix-blend-mode: multiply;
    mask-image: linear-gradient(
        to bottom,
        rgba(0, 0, 0, var(--calligraphy-opacity-top)) 0%,
        rgba(0, 0, 0, var(--calligraphy-opacity-bottom)) 100%
    );
    -webkit-mask-image: linear-gradient(
        to bottom,
        rgba(0, 0, 0, var(--calligraphy-opacity-top)) 0%,
        rgba(0, 0, 0, var(--calligraphy-opacity-bottom)) 100%
    );
}

.auth-page > * {
    position: relative;
    z-index: 1;
}

@media (min-width: 901px) {
    .auth-page {
        height: 100vh;      /* بدل الاعتماد على min-height بس */
    }

    .auth-form-wrapper {
        height: 100vh;
        overflow-y: auto;
        align-items: safe center;   /* يمنع قطع الجزء العلوي وقت السكرول */
    }

    .auth-brand {
        height: 100vh;
    }
}