/* ============================================================
   Auth Premium — لمسة زجاجية لصفحات الدخول والتسجيل
   يُحمَّل في layouts/auth.blade.php بعد premium-theme.css
   يعتمد توكنات premium-theme (--brand / --brand-rgb / --pt-*)
   وتوكنات محلية --auth-* تنقلب تحت html.dark-style
   ============================================================ */

/* ---------- التوكنات ---------- */
:root {
    --auth-card-bg: rgba(255, 255, 255, 0.62);
    --auth-card-border: rgba(255, 255, 255, 0.65);
    --auth-card-shadow: 0 18px 45px -18px rgba(90, 50, 15, 0.28), 0 2px 8px rgba(90, 50, 15, 0.06);
    --auth-title: #3c2f24;
    --auth-label: #5c4634;
    --auth-field-bg: rgba(255, 255, 255, 0.55);
    --auth-field-bg-focus: rgba(255, 255, 255, 0.9);
    --auth-field-border: rgba(120, 85, 55, 0.18);
    --auth-field-color: #4a3527;
    --auth-placeholder: rgba(90, 70, 50, 0.45);
    --auth-autofill-bg: #fdf9f5;
    --auth-orb-opacity: 0.5;
}

html.dark-style {
    --auth-card-bg: rgba(28, 31, 38, 0.68);
    --auth-card-border: rgba(255, 255, 255, 0.08);
    --auth-card-shadow: 0 18px 48px rgba(0, 0, 0, 0.45), 0 2px 8px rgba(0, 0, 0, 0.25);
    --auth-title: #e6e8ec;
    --auth-label: #c9cdd6;
    --auth-field-bg: rgba(255, 255, 255, 0.05);
    --auth-field-bg-focus: rgba(255, 255, 255, 0.09);
    --auth-field-border: rgba(255, 255, 255, 0.14);
    --auth-field-color: #e6e8ec;
    --auth-placeholder: rgba(230, 232, 236, 0.35);
    --auth-autofill-bg: #262a33;
    --auth-orb-opacity: 0.28;
}

/* ---------- خلفية الصفحة ---------- */
body {
    min-height: 100vh;
    background:
        radial-gradient(900px 500px at 85% -10%, rgba(var(--brand-rgb), 0.14), transparent 60%),
        radial-gradient(700px 450px at -10% 110%, rgba(var(--brand-rgb), 0.10), transparent 55%),
        linear-gradient(160deg, #faf6f2 0%, #f4eee8 45%, #f8f3ee 100%);
    background-attachment: fixed;
}

html.dark-style body {
    background:
        radial-gradient(900px 500px at 85% -10%, rgba(var(--brand-rgb), 0.16), transparent 60%),
        radial-gradient(700px 450px at -10% 110%, rgba(var(--brand-rgb), 0.10), transparent 55%),
        linear-gradient(160deg, #14161b 0%, #1a1d24 50%, #14161b 100%);
    background-attachment: fixed;
}

/* هالات زخرفية عائمة */
.auth-orb {
    position: fixed;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    filter: blur(60px);
    opacity: var(--auth-orb-opacity);
    animation: authOrbFloat 14s ease-in-out infinite alternate;
}

.auth-orb--1 {
    width: 320px;
    height: 320px;
    top: -80px;
    inset-inline-start: -60px;
    background: radial-gradient(circle, rgba(var(--brand-rgb), 0.25), transparent 70%);
}

.auth-orb--2 {
    width: 260px;
    height: 260px;
    bottom: -60px;
    inset-inline-end: -40px;
    background: radial-gradient(circle, rgba(var(--brand-rgb), 0.18), transparent 70%);
    animation-delay: -7s;
}

@keyframes authOrbFloat {
    from { transform: translateY(0) scale(1); }
    to   { transform: translateY(30px) scale(1.06); }
}

/* ---------- عرض الحاوية ---------- */
.authentication-wrapper {
    position: relative;
    z-index: 1;
}

.authentication-wrapper.authentication-basic .authentication-inner {
    max-width: 420px;
}

/* إخفاء أشكال Vuexy الزخرفية الافتراضية — الهالات بديلها */
.authentication-wrapper.authentication-basic .authentication-inner::before,
.authentication-wrapper.authentication-basic .authentication-inner::after {
    display: none;
}

/* ---------- البطاقة الزجاجية ---------- */
.authentication-wrapper .card {
    position: relative;
    background: var(--auth-card-bg);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    backdrop-filter: blur(16px) saturate(150%);
    border: 1px solid var(--auth-card-border) !important;
    border-radius: var(--pt-radius-lg, 1.25rem) !important;
    box-shadow: var(--auth-card-shadow) !important;
    overflow: hidden;
    animation: authCardIn 250ms ease-out both;
}

@keyframes authCardIn {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* خيط علوي بلون الهوية */
.authentication-wrapper .card::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    inset-inline: 0;
    height: 3px;
    z-index: 2;
    background: linear-gradient(90deg, transparent, var(--brand) 35%, var(--brand-light, #e8935a) 65%, transparent);
}

.authentication-wrapper .card-body {
    padding: 2rem 1.75rem;
}

@media (min-width: 992px) {
    .authentication-wrapper .card-body {
        padding: 2.5rem 2.75rem;
    }
}

/* ---------- الشعار والعناوين ---------- */
.authentication-wrapper .app-brand {
    display: flex;
    justify-content: center;
}

.authentication-wrapper .app-brand img {
    transition: transform 220ms ease;
}

.authentication-wrapper .app-brand a:hover img {
    transform: scale(1.04);
}

/* الشعار حسب المود: الافتراضي فاتح → النسخة داكنة الحبر */
.auth-brand-logo.brand-for-dark {
    display: none;
}

html.dark-style .auth-brand-logo.brand-for-light {
    display: none;
}

html.dark-style .auth-brand-logo.brand-for-dark {
    display: inline-block;
}

.authentication-wrapper .card-title {
    text-align: center;
    color: var(--auth-title);
}

.authentication-wrapper .card-text,
.authentication-wrapper p {
    color: var(--auth-label);
}

/* ---------- الحقول الزجاجية ---------- */
.authentication-wrapper .form-control,
.authentication-wrapper .input-group-text {
    background: var(--auth-field-bg);
    border: 1px solid var(--auth-field-border);
    color: var(--auth-field-color);
    transition: border-color 200ms ease, box-shadow 200ms ease, background 200ms ease;
}

.authentication-wrapper .form-control::placeholder {
    color: var(--auth-placeholder);
}

.authentication-wrapper .form-control:focus {
    background: var(--auth-field-bg-focus);
    border-color: rgba(var(--brand-rgb), 0.55);
    box-shadow: 0 0 0 0.2rem rgba(var(--brand-rgb), 0.12);
    color: var(--auth-field-color);
}

.authentication-wrapper .input-group-merge .form-control:focus + .input-group-text,
.authentication-wrapper .input-group:focus-within .input-group-text {
    border-color: rgba(var(--brand-rgb), 0.55);
}

/* الداكن: خصوصية أعلى لتجاوز html.dark-style .form-control في premium-theme
   — بدونها ينشطر الحقل: نصفه صلب #22262F ونصفه (أيقونة العين) زجاجي */
html.dark-style .authentication-wrapper .form-control,
html.dark-style .authentication-wrapper .input-group-text {
    background: var(--auth-field-bg);
    border-color: var(--auth-field-border);
    color: var(--auth-field-color);
}

html.dark-style .authentication-wrapper .form-control:focus {
    background: var(--auth-field-bg-focus);
    color: var(--auth-field-color);
}

/* الداكن: البطاقة تبقى زجاجية — html.dark-style .card في premium-theme يصمّتها */
html.dark-style .authentication-wrapper .card {
    background: var(--auth-card-bg);
    border-color: var(--auth-card-border) !important;
}

/* الداكن: hover الروابط يفتح لا يُظلم (brand-hover تحت تباين AA على الداكن) */
html.dark-style .authentication-wrapper a:not(.btn):hover {
    color: var(--brand-light, #f2b58c);
}

/* الداكن: راديو/تشيك غير محدد بلا أزرق Vuexy النشاز — الحالة المحددة بلون الهوية من premium-theme */
html.dark-style .authentication-wrapper .form-check-input:not(:checked) {
    --bs-form-check-bg: transparent;
    border-color: var(--auth-field-border);
}

/* التعبئة التلقائية للمتصفح — تُبقي النص مقروءاً في المودين */
.authentication-wrapper input:-webkit-autofill,
.authentication-wrapper input:-webkit-autofill:hover,
.authentication-wrapper input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--auth-field-color);
    -webkit-box-shadow: 0 0 0 1000px var(--auth-autofill-bg) inset;
    caret-color: var(--auth-field-color);
    transition: background-color 9999s ease-out;
}

.authentication-wrapper .form-label {
    color: var(--auth-label);
    font-weight: 600;
}

.authentication-wrapper .form-check-label {
    color: var(--auth-label);
}

/* الزر الرئيسي يأتي جاهزاً من premium-theme (تدرّج الهوية + الظل) */

/* ---------- أزرار الدخول الاجتماعي ---------- */
.authentication-wrapper .btn-facebook,
.authentication-wrapper .btn-twitter,
.authentication-wrapper .btn-google {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--auth-field-bg);
    border: 1px solid var(--auth-field-border);
    transition: transform 200ms ease, box-shadow 200ms ease;
}

.authentication-wrapper .btn-facebook { color: #1877f2; }
.authentication-wrapper .btn-twitter  { color: #1da1f2; }
.authentication-wrapper .btn-google   { color: #ea4335; }

.authentication-wrapper .btn-facebook:hover,
.authentication-wrapper .btn-twitter:hover,
.authentication-wrapper .btn-google:hover {
    transform: translateY(-2px);
    box-shadow: var(--pt-shadow-sm, 0 2px 8px rgba(0, 0, 0, 0.12));
}

/* ---------- مبدّل الثيم العائم ---------- */
.auth-style-toggle {
    position: fixed;
    top: 1.25rem;
    inset-inline-end: 1.25rem;
    z-index: 10;
    list-style: none;
    margin: 0;
    padding: 0;
}

.auth-style-toggle .nav-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--auth-card-bg);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid var(--auth-card-border);
    color: var(--auth-title);
    box-shadow: var(--pt-shadow-sm, 0 2px 8px rgba(0, 0, 0, 0.08));
    transition: color 200ms ease, transform 200ms ease;
}

.auth-style-toggle .nav-link:hover {
    color: var(--brand);
    transform: translateY(-1px);
}

/* ---------- تجاوب ---------- */
@media (max-width: 575.98px) {
    .authentication-wrapper .card-body {
        padding: 1.5rem 1.15rem;
    }

    .auth-orb {
        display: none;
    }
}

/* احترام تقليل الحركة */
@media (prefers-reduced-motion: reduce) {
    .auth-orb,
    .authentication-wrapper .card {
        animation: none;
    }
}