/**
 * خلفية موحدة محسّنة لجميع صفحات الموقع
 * ألوان الموقع: #D14F55 و #38184E
 */

/* ========== لوحة التحكم — يستخدم ثيم gaming (خلفية متدرجة) من theme-gaming.css ========== */

/* ========== LAYER 1: Main Background Gradient — للصفحة الرئيسية فقط ========== */
body.frontend-page .bg-unified-base,
body.standalone-bg .bg-unified-base {
    position: fixed;
    inset: 0;
    background: 
        radial-gradient(ellipse 140% 140% at 50% 50%, transparent 0%, rgba(0, 0, 0, 0.12) 100%),
        radial-gradient(ellipse 120% 80% at 80% 20%, rgba(77, 32, 104, 0.45) 0%, transparent 50%),
        radial-gradient(ellipse 100% 100% at 20% 80%, rgba(56, 24, 78, 0.5) 0%, transparent 45%),
        linear-gradient(160deg, #1a0a2e 0%, #2d0f47 25%, #38184E 50%, #2a0d3d 75%, #1e0828 100%);
    z-index: 0;
    pointer-events: none;
}

/* ========== LAYER 2: نسيج خفيف مع شبكة رفيعة ========== */
body.frontend-page .bg-unified-texture,
body.standalone-bg .bg-unified-texture {
    position: fixed;
    inset: 0;
    z-index: 1;
    background-image: 
        repeating-linear-gradient(
            90deg,
            transparent 0px,
            transparent 1px,
            rgba(255, 255, 255, 0.015) 1px,
            rgba(255, 255, 255, 0.015) 2px
        ),
        repeating-linear-gradient(
            0deg,
            transparent 0px,
            transparent 1px,
            rgba(255, 255, 255, 0.01) 1px,
            rgba(255, 255, 255, 0.01) 2px
        );
    background-size: 40px 40px;
    opacity: 0.8;
    pointer-events: none;
}

/* ========== LAYER 3: توهج ناعم بلون الموقع (أحمر/برتقالي) ========== */
body.frontend-page .bg-unified-glow,
body.standalone-bg .bg-unified-glow {
    position: fixed;
    top: -20%;
    right: -10%;
    width: 65%;
    height: 65%;
    min-width: 450px;
    min-height: 450px;
    background: radial-gradient(
        ellipse 70% 70% at 75% 25%,
        rgba(209, 79, 85, 0.35) 0%,
        rgba(209, 79, 85, 0.18) 30%,
        rgba(184, 67, 72, 0.08) 55%,
        transparent 75%
    );
    filter: blur(100px);
    z-index: 2;
    pointer-events: none;
}

/* ========== LAYER 4: أشكال دائرية شفافة — أنعم وأقل وضوحاً ========== */
body.frontend-page .bg-unified-circle,
body.standalone-bg .bg-unified-circle {
    position: fixed;
    border-radius: 50%;
    border: 1px solid;
    background: transparent;
    pointer-events: none;
    z-index: 3;
}

body.frontend-page .bg-unified-circle-tl,
body.standalone-bg .bg-unified-circle-tl {
    width: 120vmax;
    height: 120vmax;
    top: -50%;
    left: -50%;
    border-color: rgba(77, 32, 104, 0.18);
    box-shadow: 0 0 60px rgba(77, 32, 104, 0.08);
}

body.frontend-page .bg-unified-circle-ml,
body.standalone-bg .bg-unified-circle-ml {
    width: 80vmin;
    height: 80vmin;
    top: 50%;
    left: -30%;
    transform: translateY(-50%);
    border-color: rgba(77, 32, 104, 0.22);
    box-shadow: 0 0 80px rgba(77, 32, 104, 0.1), inset 0 0 60px rgba(77, 32, 104, 0.03);
}

body.frontend-page .bg-unified-circle-mr1,
body.standalone-bg .bg-unified-circle-mr1 {
    width: 50vmin;
    height: 50vmin;
    top: 25%;
    right: 15%;
    border-color: rgba(209, 79, 85, 0.25);
    box-shadow: 0 0 60px rgba(209, 79, 85, 0.12);
}

body.frontend-page .bg-unified-circle-mr2,
body.standalone-bg .bg-unified-circle-mr2 {
    width: 35vmin;
    height: 35vmin;
    top: 35%;
    right: 20%;
    border-color: rgba(232, 114, 120, 0.2);
    box-shadow: 0 0 45px rgba(209, 79, 85, 0.1);
}

body.frontend-page .bg-unified-circle-mr3,
body.standalone-bg .bg-unified-circle-mr3 {
    width: 55vmin;
    height: 55vmin;
    top: 15%;
    right: 5%;
    border-color: rgba(209, 79, 85, 0.18);
    box-shadow: 0 0 80px rgba(209, 79, 85, 0.08);
}

body.frontend-page .bg-unified-circle-bl,
body.standalone-bg .bg-unified-circle-bl {
    width: 100vmax;
    height: 100vmax;
    bottom: -45%;
    left: -45%;
    border-color: rgba(56, 24, 78, 0.15);
    box-shadow: 0 0 70px rgba(56, 24, 78, 0.06);
}

body.frontend-page .bg-unified-circle-br,
body.standalone-bg .bg-unified-circle-br {
    width: 60vmin;
    height: 60vmin;
    bottom: 15%;
    right: 10%;
    border-color: rgba(77, 32, 104, 0.2);
    box-shadow: 0 0 55px rgba(77, 32, 104, 0.1);
}

/* ========== LAYER 5: خطوط نيون منحنية — بلون الموقع ========== */
body.frontend-page .bg-unified-neon,
body.standalone-bg .bg-unified-neon {
    position: fixed;
    top: 0;
    right: 0;
    width: 55%;
    height: 100%;
    z-index: 4;
    pointer-events: none;
}

body.frontend-page .bg-unified-neon svg,
body.standalone-bg .bg-unified-neon svg {
    width: 100%;
    height: 100%;
    opacity: 0.7;
}

body.frontend-page .bg-unified-neon path,
body.standalone-bg .bg-unified-neon path {
    fill: none;
    stroke: rgba(209, 79, 85, 0.4);
    stroke-width: 1.2;
    stroke-linecap: round;
    filter: drop-shadow(0 0 8px rgba(209, 79, 85, 0.5));
}

body.frontend-page .bg-unified-neon .arc-path-1,
body.standalone-bg .bg-unified-neon .arc-path-1 {
    stroke: rgba(209, 79, 85, 0.5);
    stroke-width: 1.5;
}

body.frontend-page .bg-unified-neon .arc-path-2,
body.standalone-bg .bg-unified-neon .arc-path-2 {
    stroke: rgba(232, 114, 120, 0.35);
    stroke-width: 1.2;
}

body.frontend-page .bg-unified-neon .arc-path-3,
body.standalone-bg .bg-unified-neon .arc-path-3 {
    stroke: rgba(209, 79, 85, 0.3);
    stroke-width: 1;
}

/* ========== LAYER 6: Sparkle/Star — لمعان خفيف ========== */
body.frontend-page .bg-unified-sparkle,
body.standalone-bg .bg-unified-sparkle {
    position: fixed;
    bottom: 8%;
    right: 6%;
    width: 24px;
    height: 24px;
    z-index: 5;
    pointer-events: none;
}

body.frontend-page .bg-unified-sparkle-inner,
body.standalone-bg .bg-unified-sparkle-inner {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    transform: translate(-50%, -50%) rotate(45deg);
}

body.frontend-page .bg-unified-sparkle-inner::before,
body.frontend-page .bg-unified-sparkle-inner::after,
body.standalone-bg .bg-unified-sparkle-inner::before,
body.standalone-bg .bg-unified-sparkle-inner::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    background: rgba(255, 255, 255, 0.75);
    transform: translate(-50%, -50%);
    border-radius: 1px;
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.5), 0 0 12px rgba(209, 79, 85, 0.3);
}

body.frontend-page .bg-unified-sparkle-inner::before,
body.standalone-bg .bg-unified-sparkle-inner::before {
    width: 2px;
    height: 14px;
}

body.frontend-page .bg-unified-sparkle-inner::after,
body.standalone-bg .bg-unified-sparkle-inner::after {
    width: 14px;
    height: 2px;
}

/* ========== LAYER 7: شخصية جانبية ثابتة — عمود يساري بجوار المحتوى (تحت main z-index:10) ========== */
body.frontend-page .bg-character-layer,
body.standalone-bg .bg-character-layer {
    position: fixed;
    top: var(--character-top-offset, 110px);
    bottom: 0;
    left: calc(50% - 575px);
    width: 330px;
    height: calc(100vh - var(--character-top-offset, 110px));
    z-index: 4;
    pointer-events: none;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    opacity: 0.98;
    transition: opacity 0.25s ease;
    overflow: hidden;
}

/* صفحات الفئة/الخدمة: عمود يسار — الشخصية من أول مكان تحت النافبار (بدون فراغ فوقها) */
@media (min-width: 992px) {
    body.frontend-page:has(.category-page-wrap) .bg-character-layer,
    body.standalone-bg:has(.category-page-wrap) .bg-character-layer {
        left: max(0.5rem, env(safe-area-inset-left, 0px));
        right: auto;
        width: min(400px, 38vw);
        justify-content: flex-start;
        align-items: flex-start;
        align-content: flex-start;
        /* يبدأ تحت النافبار مباشرة — نفس أعلى المحتوى */
        top: var(--character-top-offset, 110px);
        padding-top: 0.35rem;
        height: auto;
        max-height: calc(100vh - var(--character-top-offset, 110px) - 0.5rem);
        bottom: auto;
    }
    body.frontend-page:has(.service-page-wrapper) .bg-character-layer,
    body.standalone-bg:has(.service-page-wrapper) .bg-character-layer {
        left: max(0.75rem, env(safe-area-inset-left, 0px));
        right: auto;
        width: min(320px, 32vw);
        justify-content: flex-start;
        align-items: flex-start;
        align-content: flex-start;
        top: var(--character-top-offset, 110px);
        padding-top: 0.35rem;
        height: auto;
        max-height: calc(100vh - var(--character-top-offset, 110px) - 0.5rem);
        bottom: auto;
    }
}

body.frontend-page .bg-character-layer img,
body.standalone-bg .bg-character-layer img {
    width: auto;
    height: 100%;
    object-fit: contain;
    object-position: top right;
    transform: none;
    filter: drop-shadow(0 16px 36px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 26px rgba(209, 79, 85, 0.24));
}

@media (min-width: 992px) {
    body.frontend-page:has(.category-page-wrap) .bg-character-layer img,
    body.standalone-bg:has(.category-page-wrap) .bg-character-layer img {
        height: auto;
        width: 100%;
        max-width: 100%;
        max-height: min(92vh, calc(100vh - var(--character-top-offset, 110px) - 6px));
        object-fit: contain;
        object-position: center top;
        align-self: flex-start;
    }
    body.frontend-page:has(.service-page-wrapper) .bg-character-layer img,
    body.standalone-bg:has(.service-page-wrapper) .bg-character-layer img {
        height: auto;
        width: 100%;
        max-width: 100%;
        max-height: min(88vh, calc(100vh - var(--character-top-offset, 110px) - 12px));
        object-fit: contain;
        object-position: center top;
        align-self: flex-start;
    }
}

body.frontend-page .bg-character-layer--hidden,
body.standalone-bg .bg-character-layer--hidden {
    opacity: 0;
}

/* Body background — الصفحة الرئيسية فقط */
body.frontend-page,
body.standalone-bg {
    background: linear-gradient(160deg, #1a0a2e 0%, #2d0f47 30%, #38184E 55%, #2a0d3d 80%, #1e0828 100%) !important;
}
body.frontend-page.has-announcement-bar,
body.standalone-bg.has-announcement-bar {
    --character-top-offset: 160px;
}
body.frontend-page:not(.has-announcement-bar),
body.standalone-bg:not(.has-announcement-bar) {
    --character-top-offset: 110px;
}

/* أقسام شفافة لإظهار الخلفية في الصفحة الرئيسية */
body.frontend-page .categories-section-outer,
body.frontend-page .category-page-wrap,
body.frontend-page .product-page-wrapper,
body.frontend-page .service-page-wrap {
    background: transparent !important;
}

/* كروت في الأقسام الشفافة — خلفية شبه شفافة للقراءة */
body.frontend-page .bg-transparent .card {
    background: rgba(56, 24, 78, 0.4) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    backdrop-filter: blur(12px);
}

body.frontend-page .bg-transparent .card .card-body {
    background: transparent !important;
    color: rgba(255, 255, 255, 0.95) !important;
}

body.frontend-page .bg-transparent .card .text-muted {
    color: rgba(255, 255, 255, 0.8) !important;
}

body.frontend-page .bg-transparent .card h4 {
    color: #fff !important;
    background: none !important;
    -webkit-text-fill-color: #fff !important;
}

@media (max-width: 768px) {
    body.frontend-page .bg-unified-glow,
    body.standalone-bg .bg-unified-glow {
        width: 90%;
        height: 50%;
        min-width: 300px;
        min-height: 300px;
    }
    body.frontend-page .bg-unified-circle-ml,
    body.standalone-bg .bg-unified-circle-ml {
        width: 100vmin;
        height: 100vmin;
        left: -50%;
    }
    body.frontend-page .bg-unified-neon,
    body.standalone-bg .bg-unified-neon {
        width: 70%;
    }
    body.frontend-page .bg-character-layer,
    body.standalone-bg .bg-character-layer {
        top: var(--character-top-offset-mobile, 100px);
        left: 22px;
        width: clamp(270px, 46vw, 500px);
        height: calc(100vh - var(--character-top-offset-mobile, 100px));
    }
    body.frontend-page .bg-character-layer img,
    body.standalone-bg .bg-character-layer img {
        height: 100%;
        width: auto;
        transform: none;
    }
    body.frontend-page.has-announcement-bar,
    body.standalone-bg.has-announcement-bar {
        --character-top-offset-mobile: 140px;
    }
    body.frontend-page:not(.has-announcement-bar),
    body.standalone-bg:not(.has-announcement-bar) {
        --character-top-offset-mobile: 110px;
    }
}

@media (max-width: 576px) {
    body.frontend-page .bg-unified-glow,
    body.standalone-bg .bg-unified-glow {
        min-width: 200px;
        min-height: 200px;
        width: 80%;
        height: 40%;
    }
    body.frontend-page .bg-character-layer,
    body.standalone-bg .bg-character-layer {
        display: none;
    }
}