/* ================================================================
   LURAN — Luxury Polish Layer
   ----------------------------------------------------------------
   طبقة تجميل بصرية تُحمَّل بعد جميع ملفات CSS الأخرى لتغليف
   التصميم القائم بحُلَّة فاخرة داكنة بلمسات ذهبية.
   لا تغيّر HTML ولا تضيف أقساماً — تعيد طلاء العناصر الموجودة فقط.
   ================================================================ */

/* استيراد خطوط فاخرة (Tajawal للعربية، Inter للإنجليزية، Playfair للعناوين) */
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700;800&family=Inter:wght@300;400;500;600;700;800&family=Playfair+Display:wght@500;600;700;800&display=swap');

/* ================================================================
   1) إعادة تعريف متغيرات الجذر — لوحة ألوان فاخرة داكنة
   ================================================================ */
:root {
    /* لون الهوية (Brand) — مطابق للون الـ Rose-Gold في شعار LURAN */
    --brand:        #B78474;
    --brand-dark:   #9A6A5C;
    --brand-light:  #D4A494;
    --brand-rgb:    183, 132, 116;

    /* خلفيات الموقع — أسود مخملي بطبقات متعددة */
    --bg-main:      #0D0B14;   /* خلفية الموقع الرئيسية */
    --bg-section:   #14111F;   /* خلفية الأقسام البديلة */
    --bg-header:    #14111F;   /* رأس وتذييل الموقع */
    --bg-card:      #1E1A2C;   /* بطاقات وأسطح */
    --bg-elevated:  #252134;   /* عناصر مرتفعة (Modals / Dropdowns) */

    /* النصوص على الخلفية الداكنة */
    --text-primary:   rgba(255, 255, 255, 0.98);
    --text-secondary: rgba(255, 255, 255, 0.65);  /* محفوظ كما طُلب */
    --text-light:     #ffffff;
    --text-muted:     rgba(255, 255, 255, 0.45);

    /* الحدود */
    --border-color:  rgba(255, 255, 255, 0.08);
    --border-hover:  rgba(183, 132, 116, 0.4);

    /* ظلال أعمق تتناسب مع المظهر الداكن */
    --shadow-sm: 0 4px 14px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 8px 28px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.55);

    /* انتقال موحّد سلس */
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --ease-luxury: cubic-bezier(0.4, 0, 0.2, 1);

    /* الخطوط */
    --font-en:         'Inter', 'Poppins', system-ui, sans-serif;
    --font-ar:         'Tajawal', 'Cairo', system-ui, sans-serif;
    --font-display:    'Playfair Display', 'Inter', serif;
    --font-display-ar: 'Tajawal', 'Cairo', sans-serif;
}

/* ================================================================
   2) Body عام + تنعيم الخطوط + line-height مريح
   ================================================================ */
body {
    background: var(--bg-main);
    color: var(--text-primary);
    font-family: var(--font-en);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}
body[dir="rtl"] { font-family: var(--font-ar); }

/* العناوين */
h1, h2, h3, h4, h5, h6 {
    color: var(--text-primary);
    line-height: 1.25;
    letter-spacing: -0.015em;
}
[dir="ltr"] h1,
[dir="ltr"] h2,
[dir="ltr"] .section-title,
[dir="ltr"] .hero h1,
[dir="ltr"] .auth-card-logo h2 {
    font-family: var(--font-display);
    letter-spacing: -0.02em;
}
[dir="rtl"] h1,
[dir="rtl"] h2 {
    letter-spacing: 0;
    line-height: 1.4;
}

/* تظليل النص */
::selection { background: rgba(183, 132, 116, 0.32); color: #fff; }

/* شريط التمرير — درج ذهبي */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-section); }
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--brand-light), var(--brand-dark));
    border-radius: 10px;
    border: 2px solid var(--bg-section);
}
::-webkit-scrollbar-thumb:hover { background: var(--brand); }

/* ================================================================
   3) الناف بار — Glassmorphism داكن
   ================================================================ */
.navbar {
    background: rgba(13, 11, 20, 0.75);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    backdrop-filter: blur(24px) saturate(180%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03), 0 8px 24px rgba(0, 0, 0, 0.25);
}
.navbar-logo {
    display: flex;
    align-items: center;
    line-height: 0;
    background: none;
    -webkit-background-clip: initial;
    -webkit-text-fill-color: initial;
    background-clip: initial;
    color: inherit;
    letter-spacing: 0;
}
/* Brand-mark plate inside dark navbar.
   The PNG ships with a solid blush background that would otherwise read
   as a card glued onto the navy. We:
     • fade the left/right edges to transparent (mask) so the blush dissolves
       into the navbar instead of stopping abruptly,
     • drop a warm rose-gold halo behind so the black "L" lifts off the navy.
   The center where the L + bag + curl sit stays 100% visible. */
.navbar-logo img {
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
    filter: drop-shadow(0 2px 10px rgba(212, 164, 148, 0.35))
            drop-shadow(0 0 24px rgba(212, 164, 148, 0.18));
    border-radius: 0;
}
.navbar-links a {
    color: var(--text-primary);
    font-weight: 500;
    transition: color 0.3s var(--ease-luxury);
}
.navbar-links a:hover,
.navbar-links a.active { color: var(--brand-light); }
.navbar-links a::after { background: var(--brand); }

/* أزرار الناف */
.navbar-action-btn {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: none;
}
.navbar-action-btn:hover {
    background: linear-gradient(135deg, var(--brand-light), var(--brand-dark));
    color: #1a1410;
    border-color: transparent;
    box-shadow: 0 8px 22px rgba(183, 132, 116, 0.32);
    transform: translateY(-2px);
}

/* صندوق البحث في الناف */
.navbar-search {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: none;
}
.navbar-search input {
    background: transparent;
    color: var(--text-primary);
}
.navbar-search input::placeholder { color: var(--text-muted); }
.navbar-search button { color: var(--text-secondary); }
.navbar-search button:hover { color: var(--brand-light); }

/* مفتاح اللغة */
.lang-switch {
    background: rgba(255, 255, 255, 0.04);
    color: var(--brand-light);
    border-color: rgba(255, 255, 255, 0.1);
}
.lang-switch:hover {
    background: linear-gradient(135deg, var(--brand-light), var(--brand-dark));
    color: #1a1410;
    border-color: transparent;
}

/* قائمة المستخدم المنسدلة */
.user-dropdown {
    background: var(--bg-elevated);
    border: 1px solid var(--border-color);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6);
}
.user-dropdown a { color: var(--text-secondary); }
.user-dropdown a:hover {
    background: rgba(183, 132, 116, 0.08);
    color: var(--brand-light);
}
.user-dropdown hr { border-top-color: var(--border-color); }

/* قائمة الموبايل */
.navbar-links.active {
    background: rgba(13, 11, 20, 0.95);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border-top: 1px solid var(--border-color);
}

/* ================================================================
   4) الأزرار — تدرج ذهبي + توهج عند التحويم
   ================================================================ */
.btn-primary {
    background: linear-gradient(135deg, var(--brand-light) 0%, var(--brand) 50%, var(--brand-dark) 100%);
    color: #1a1410;
    font-weight: 600;
    border-radius: 12px;
    padding: 14px 28px;
    box-shadow: 0 6px 18px rgba(183, 132, 116, 0.22);
    letter-spacing: 0.01em;
}
.btn-primary:hover {
    background: linear-gradient(135deg, var(--brand-light) 0%, var(--brand) 100%);
    color: #1a1410;
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 14px 34px rgba(183, 132, 116, 0.4),
                0 0 0 1px rgba(183, 132, 116, 0.45);
}

.btn-outline {
    background: transparent;
    color: var(--brand-light);
    border: 1px solid rgba(183, 132, 116, 0.45);
    border-radius: 12px;
    padding: 13px 27px;
}
.btn-outline:hover {
    background: rgba(183, 132, 116, 0.08);
    color: var(--brand-light);
    border-color: var(--brand);
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(183, 132, 116, 0.18);
}

/* ================================================================
   5) البطاقات — مخمل داكن + توهج ذهبي عند التحويم
   ================================================================ */
.card,
.product-card,
.brand-card,
.feature-card,
.review-card,
.cart-item,
.checkout-summary,
.sidebar-filter {
    background: var(--bg-card);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                border-color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.card:hover,
.product-card:hover,
.feature-card:hover,
.review-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 40px rgba(183, 132, 116, 0.15),
                0 0 0 1px rgba(183, 132, 116, 0.25);
    border-color: rgba(183, 132, 116, 0.25);
}

/* بطاقة المنتج — تفاصيل */
.product-card-img {
    background: var(--bg-section);
    border-radius: 16px 16px 0 0;
}
.product-card-img img {
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 0;
}
.product-card:hover .product-card-img img { transform: scale(1.05); }

.product-card-name { color: var(--text-primary); }
.product-card-name a { color: var(--text-primary); }
.product-card-name a:hover { color: var(--brand-light); }
.product-card-category { color: var(--text-muted); }
.product-card-rating { color: var(--text-secondary); }
.product-card-rating .stars { color: #F5C24A; }

/* زر الـ wishlist */
.product-card-wishlist {
    background: rgba(13, 11, 20, 0.7);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: var(--text-primary);
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.product-card-wishlist:hover {
    background: var(--brand);
    color: #1a1410;
    border-color: var(--brand);
}
/* Solid red state once the product is saved — keeps the saved/unsaved
   distinction obvious even when the buyer is mid-hover on another card. */
.product-card-wishlist.active,
.product-card-wishlist.active:hover {
    background: #fff;
    color: #e11d2e;
    border-color: #e11d2e;
}
.product-card-wishlist.active i { color: #e11d2e; }

/* أسعار */
.price { color: var(--brand-light); font-weight: 700; }
.price-old { color: var(--text-muted); }

/* شارة الخصم */
.sale-badge {
    background: linear-gradient(135deg, #E5527A, #C73B5E);
    box-shadow: 0 4px 14px rgba(199, 59, 94, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* ================================================================
   6) بطاقات العلامات التجارية والميزات
   ================================================================ */
.brand-card { background: var(--bg-card); }
.brand-card img { filter: grayscale(100%) brightness(2.5); opacity: 0.45; }
.brand-card:hover img { filter: grayscale(0) brightness(1); opacity: 1; }
.brand-card-name { color: var(--text-secondary); }

.feature-card { background: var(--bg-card); }
.feature-card-icon {
    background: rgba(183, 132, 116, 0.1);
    color: var(--brand-light);
    border: 1px solid rgba(183, 132, 116, 0.25);
}
.feature-card h4 { color: var(--text-primary); }
.feature-card p { color: var(--text-secondary); }

/* ================================================================
   7) بطاقات الفئات
   ================================================================ */
.category-card { box-shadow: 0 4px 22px rgba(0, 0, 0, 0.4); }
.category-card-overlay {
    background: linear-gradient(to top,
        rgba(13, 11, 20, 0.92) 0%,
        rgba(13, 11, 20, 0.4) 55%,
        transparent 100%);
}
.category-card-name {
    color: #fff;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}
.category-card-count { color: rgba(255, 255, 255, 0.78); }

/* ================================================================
   8) قسم Hero — تدرج إشعاعي فاخر
   ================================================================ */
.hero {
    background: radial-gradient(ellipse at top, #2A1F3D 0%, #0D0B14 70%);
}
.hero::before {
    background: radial-gradient(circle, rgba(183, 132, 116, 0.18), transparent 70%);
}
.hero-decoration {
    background: radial-gradient(circle, rgba(183, 132, 116, 0.12), transparent 70%);
}
.hero-badge {
    background: rgba(183, 132, 116, 0.12);
    color: var(--brand-light);
    border: 1px solid rgba(183, 132, 116, 0.28);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}
.hero h1 {
    background: linear-gradient(135deg, #ffffff 0%, var(--brand-light) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: -0.02em;
}
.hero p { color: var(--text-secondary); }

/* ================================================================
   9) عناوين الأقسام
   ================================================================ */
.section-title { color: var(--text-primary); }
.section-subtitle { color: var(--text-secondary); }
.section-title::after {
    background: linear-gradient(90deg, transparent, var(--brand), transparent);
    height: 2px;
}
.section-alt { background: var(--bg-section); }

/* ================================================================
   10) المدخلات والنماذج
   ================================================================ */
input, textarea, select {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
    border-radius: 12px;
    padding: 12px 16px;
}
input::placeholder,
textarea::placeholder { color: var(--text-muted); }

input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: rgba(183, 132, 116, 0.55);
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 0 0 3px rgba(183, 132, 116, 0.15);
}
select option {
    background: var(--bg-card);
    color: var(--text-primary);
}

/* صور (border-radius ناعم) */
.product-card img,
.category-card img,
.gallery-main img,
.gallery-thumb img,
.profile-avatar,
.review-avatar,
.cart-item-img img {
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.product-card-img,
.cart-item-img,
.gallery-thumb {
    border-radius: 12px;
    overflow: hidden;
}
.gallery-main { border-radius: 16px; background: var(--bg-section); }

/* ================================================================
   11) التذييل — Footer
   ================================================================ */
.footer {
    background: var(--bg-section);
    border-top: 1px solid var(--border-color);
}
.footer-brand h3 {
    color: var(--brand-light);
    background: linear-gradient(135deg, var(--brand-light), var(--brand));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.footer-brand p,
.footer-col a { color: var(--text-secondary); }
.footer-col h4 { color: var(--text-primary); }
.footer-col a:hover { color: var(--brand-light); }
.footer-social a {
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-secondary);
    border: 1px solid rgba(255, 255, 255, 0.06);
}
.footer-social a:hover {
    background: linear-gradient(135deg, var(--brand-light), var(--brand-dark));
    color: #1a1410;
    border-color: transparent;
    box-shadow: 0 8px 22px rgba(183, 132, 116, 0.3);
}
.footer-bottom {
    border-top-color: var(--border-color);
    color: var(--text-muted);
}

/* ================================================================
   12) النشرة البريدية — Newsletter
   ================================================================ */
.newsletter-section {
    background: linear-gradient(135deg, #1E1A2C 0%, #2A1F3D 100%);
    border: 1px solid rgba(183, 132, 116, 0.22);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.4);
}
.newsletter-section h2 { color: var(--text-primary); }
.newsletter-section p { color: var(--text-secondary); }
.newsletter-form input {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--text-primary);
}
.newsletter-form input:focus {
    border-color: rgba(183, 132, 116, 0.6);
    background: rgba(255, 255, 255, 0.08);
}
.newsletter-form button {
    background: linear-gradient(135deg, var(--brand-light), var(--brand-dark));
    color: #1a1410;
}
.newsletter-form button:hover {
    box-shadow: 0 14px 34px rgba(183, 132, 116, 0.45);
    transform: translateY(-2px) scale(1.02);
}

/* ================================================================
   13) عربة التسوق + ملخص الدفع
   ================================================================ */
.cart-item-name { color: var(--text-primary); }
.cart-item-price { color: var(--brand-light); }
.cart-item-remove { color: var(--text-muted); }
.cart-item-remove:hover { color: #FCA5A5; }

.cart-quantity {
    border-color: rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.04);
    border-radius: 12px;
    overflow: hidden;
}
.cart-quantity button {
    background: transparent;
    color: var(--text-primary);
    border: none;
}
.cart-quantity button:hover {
    background: var(--brand);
    color: #1a1410;
}
.cart-quantity input {
    background: transparent;
    color: var(--text-primary);
    border-left-color: rgba(255, 255, 255, 0.1);
    border-right-color: rgba(255, 255, 255, 0.1);
}

.checkout-summary-item {
    border-bottom-color: var(--border-color);
    color: var(--text-secondary);
}
.checkout-summary-total { color: var(--brand-light); }

/* ================================================================
   14) فلتر الشريط الجانبي
   ================================================================ */
.sidebar-filter { padding: 24px; }
.filter-group h4 { color: var(--text-primary); }
.filter-tag {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-secondary);
    border-radius: 999px;
}
.filter-tag:hover,
.filter-tag.active {
    background: linear-gradient(135deg, var(--brand-light), var(--brand-dark));
    color: #1a1410;
    border-color: var(--brand);
}

/* ================================================================
   15) المراجعات
   ================================================================ */
.review-meta h5 { color: var(--text-primary); }
.review-meta span { color: var(--text-muted); }
.review-body { color: var(--text-secondary); }

/* ================================================================
   16) الملف الشخصي
   ================================================================ */
.profile-header {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
}
.profile-avatar { border-color: rgba(183, 132, 116, 0.45); }
.profile-info h2 { color: var(--text-primary); }
.profile-info p { color: var(--text-secondary); }
.profile-tabs { border-bottom-color: var(--border-color); }
.profile-tab { color: var(--text-secondary); }
.profile-tab:hover,
.profile-tab.active {
    color: var(--brand-light);
    border-bottom-color: var(--brand);
}

/* ================================================================
   17) شريط التنقل التسلسلي (Breadcrumb)
   ================================================================ */
.breadcrumb a { color: var(--text-secondary); }
.breadcrumb a:hover { color: var(--brand-light); }
.breadcrumb .current { color: var(--brand-light); }
.breadcrumb .separator { color: var(--text-muted); }

/* ================================================================
   18) تقييمات بالنجوم
   ================================================================ */
.star-rating .star { color: rgba(255, 255, 255, 0.18); }
.star-rating .star.filled { color: #F5C24A; }
.star-rating-input label { color: rgba(255, 255, 255, 0.18); }
.star-rating-input label:hover,
.star-rating-input label.active { color: #F5C24A; }

/* ================================================================
   19) المعرض (Gallery)
   ================================================================ */
.gallery-thumb { opacity: 0.55; border-color: transparent; }
.gallery-thumb:hover,
.gallery-thumb.active {
    border-color: var(--brand);
    opacity: 1;
}

/* ================================================================
   20) التنبيهات
   ================================================================ */
.alert-success {
    background: rgba(16, 185, 129, 0.12);
    color: #4ADE80;
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 12px;
}
.alert-error {
    background: rgba(239, 68, 68, 0.12);
    color: #FCA5A5;
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 12px;
}

/* ================================================================
   21) صفحات تسجيل الدخول/التسجيل
   ================================================================ */
.auth-page {
    background: radial-gradient(ellipse at top, #2A1F3D 0%, #0D0B14 70%);
    min-height: 100vh;
}
.auth-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    box-shadow: 0 28px 72px rgba(0, 0, 0, 0.55);
    border-radius: 20px;
}
.auth-card-logo h2 {
    background: linear-gradient(135deg, var(--brand-light), var(--brand));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: 4px;
}
.auth-card-logo p { color: var(--text-secondary); }
.auth-divider { color: var(--text-muted); }
.auth-divider::before,
.auth-divider::after { background: var(--border-color); }
.auth-footer { color: var(--text-secondary); }
.auth-footer a {
    color: var(--brand-light);
    font-weight: 600;
}
.auth-footer a:hover { color: var(--brand); }

/* ================================================================
   22) Skeleton Loader متوافق مع الوضع الداكن
   ================================================================ */
.luran-skeleton {
    background: linear-gradient(90deg, #1E1A2C 0%, #2A2438 50%, #1E1A2C 100%);
    background-size: 936px 100%;
}

/* ================================================================
   23) Spinner الدوران بلمسة ذهبية
   ================================================================ */
.luran-spinner {
    border-color: rgba(183, 132, 116, 0.2);
    border-top-color: var(--brand);
}

/* ================================================================
   24) انتقالات سلسة موحّدة على كل العناصر التفاعلية
   ================================================================ */
a, button, .btn,
.card, .product-card, .brand-card, .feature-card, .review-card,
.navbar-action-btn, .filter-tag, .lang-switch,
input, textarea, select,
.footer-col a, .footer-social a,
.user-dropdown a, .profile-tab,
.cart-quantity button, .gallery-thumb {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ================================================================
   25) معالجات صغيرة لتحسين العزل البصري للأيقونات الذهبية
   ================================================================ */
.text-brand { color: var(--brand-light); }
i.fa, i.fas, i.far, i.fab { transition: color 0.3s var(--ease-luxury); }

/* عند التركيز بلوحة المفاتيح — حلقة ذهبية لطيفة (a11y) */
:focus-visible {
    outline: 2px solid rgba(183, 132, 116, 0.6);
    outline-offset: 2px;
    border-radius: 8px;
}

/* ================================================================
   26) Brand wordmarks (footer + auth) — soft vignette + warm halo
   ----------------------------------------------------------------
   نفس مشكلة الـ navbar-mark: الـ luran-full.png يأتي بخلفية وردية
   صلبة. هنا الكلمة (LURAN) ممتدة أفقياً، فلا يصلح قص الحواف الجانبية.
   نستخدم vignette إهليلجي لطيف يذوّب الزوايا الأربع فقط في الخلفية
   الداكنة، مع هالة دافئة (rose-gold drop-shadow) ترفع الحرف الأسود
   بصرياً فيندمج مع المحيط دون أن يبدو الـ PNG كبطاقة دخيلة.
   ================================================================ */
.footer-brand-logo img,
.auth-card-logo-img {
    -webkit-mask-image: radial-gradient(ellipse 108% 130% at center, #000 68%, rgba(0,0,0,0.5) 86%, transparent 100%);
            mask-image: radial-gradient(ellipse 108% 130% at center, #000 68%, rgba(0,0,0,0.5) 86%, transparent 100%);
    filter: drop-shadow(0 4px 18px rgba(212, 164, 148, 0.32))
            drop-shadow(0 0 38px rgba(212, 164, 148, 0.18));
    border-radius: 0;
    background: transparent;
}

/* لو رغب أحدهم لاحقاً بإلغاء التذويب على شاشة كبيرة جداً */
@media (prefers-reduced-transparency: reduce) {
    .navbar-logo img,
    .footer-brand-logo img,
    .auth-card-logo-img {
        -webkit-mask-image: none;
                mask-image: none;
        border-radius: 12px;
        box-shadow: 0 0 0 1px rgba(212, 164, 148, 0.3),
                    0 8px 24px rgba(0, 0, 0, 0.5);
    }
}