/* -----------------------------------------------------------
   Ayeneh | 404 Error Page Styles (Final Version)
   Target: Elementor structure provided by user
   ----------------------------------------------------------- */

/* ----- 1. تنظیمات کانتینر اصلی صفحه ----- */
/* این کلاس مربوط به سکشن اصلی صفحه 404 شماست. */
/* با افزودن body.error404، مطمئن می‌شویم این استایل فقط در صفحه 404 اعمال می‌شود */
body.error404 .elementor-element-97e768d {
    min-height: 85vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 15px;
}

/* ----- 2. استایل کارت شیشه‌ای اصلی ----- */
/* این کلاس مربوط به کانتینر داخلی با کلاس glass-box است */
.elementor-element-5368823.glass-box {
    position: relative; /* برای لایه‌بندی محتوا ضروری است */
    padding: 50px 30px;
    text-align: center;
    overflow: hidden; /* جلوگیری از بیرون‌زدگی انیمیشن */
    max-width: 650px;
    width: 100%;
}

/* ----- 3. استایل متن بزرگ "404" در پس‌زمینه (مهم‌ترین بخش) ----- */
/* کلاس ویجت هدینگ اول (b6db45a) */
.elementor-element-b6db45a {
    position: absolute !important; /* برای قرارگیری در پس‌زمینه */
    top: 50%;
    left: 50%;
    z-index: 1; /* لایه زیرین */
    width: 100%;
    pointer-events: none; /* باعث می‌شود متن پس‌زمینه قابل کلیک نباشد */
}

.elementor-element-b6db45a .elementor-heading-title {
    font-family: var(--font-en) !important; /* استفاده از فونت انگلیسی برای اعداد */
    font-size: 12rem; /* بسیار بزرگ */
    font-weight: 900;
    line-height: 1;
    
    /* افکت متن توخالی و بسیار شفاف */
    color: var(--color-shadow-hover-rgba) !important;
    -webkit-text-stroke: 2px rgba(255, 255, 255, 0.04);
    
    /* انیمیشن شناور */
    animation: float-404 8s ease-in-out infinite;
}

/* ----- 4. استایل محتوای رویی (عکس، متن، دکمه) ----- */
/* تمام المان‌های فرزند کانتینر شیشه‌ای را در لایه رویی قرار می‌دهیم */
.elementor-element-5368823.glass-box .e-con-inner > .elementor-element {
    position: relative;
    z-index: 2; /* لایه رویی */
}

/* ویجت تصویر */
.elementor-element-73314d3 {
    margin-bottom: 20px;
}

/* خود تصویر */
.elementor-element-73314d3 .elementor-widget-container img {
    max-width: 100px;
    height: auto;
    opacity: 0.8;
    filter: drop-shadow(0 5px 15px rgba(0,0,0,0.2));
}

/* ویجت هدینگ دوم (متن توضیحات) */
.elementor-element-08ee077 .elementor-heading-title {
    color: var(--color-heading);
    font-size: 1.6rem;
    font-weight: 700;
    text-shadow: 0 5px 15px var(--bg-dark); /* سایه برای خوانایی بهتر */
    margin-bottom: 30px;
}

/* ----- 5. استایل دکمه بازگشت ----- */
/* ویجت دکمه */
.elementor-element-e5e1b91 .elementor-button {
    background: var(--color-accent);
    color: #ffffff;
    font-size: 1rem;
    font-weight: bold;
    padding: 14px 35px;
    border-radius: 50px;
    box-shadow: 0 8px 25px var(--shadow-accent);
    transition: all 0.3s ease-in-out;
}

.elementor-element-e5e1b91 .elementor-button:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px var(--shadow-accent-hover);
}


/* ----- 6. انیمیشن شناور برای عدد 404 ----- */
@keyframes float-404 {
    0%, 100% {
        transform: translate(-50%, -50%) translateY(0);
    }
    50% {
        transform: translate(-50%, -50%) translateY(-20px);
    }
}


/* ----- 7. استایل‌های ریسپانسیو برای موبایل ----- */
@media (max-width: 767px) {
    .elementor-element-b6db45a .elementor-heading-title {
        font-size: 10rem; /* کوچکتر کردن عدد ۴۰۴ */
    }

    .elementor-element-08ee077 .elementor-heading-title {
        font-size: 1.3rem; /* کوچکتر کردن متن توضیحات */
    }

    .elementor-element-5368823.glass-box {
        padding: 40px 20px;
    }
}