/* ==========================================================================
   ۱. تنظیمات پایه و فونت (بهینه‌سازی شده بدون گوگل فونت)
   ========================================================================== */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: Tahoma, 'Segoe UI', Arial, sans-serif; 
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: #090a0f; /* رنگ زاپاس پس‌زمینه */
    overflow-x: hidden;
}

/* ==========================================================================
   ۲. انیمیشن متحرک پس‌زمینه (Snowfall / Stars)
   ========================================================================== */
.animated-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
    overflow: hidden;
}

#stars1, #stars2, #stars3 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#stars1 {
    background: url('../images/stars1.png') repeat;
    animation: animStar 50s linear infinite;
}

#stars2 {
    background: url('../images/stars2.png') repeat;
    animation: animStar 100s linear infinite;
}

#stars3 {
    background: url('../images/stars3.png') repeat;
    animation: animStar 150s linear infinite;
}

@keyframes animStar {
    from { transform: translateY(0px); }
    to { transform: translateY(-2000px); }
}

/* ==========================================================================
   ۳. کلاس‌های چیدمان و فاصله‌ها (Utility Classes)
   ========================================================================== */
.min-h-full {
    min-height: 100vh;
}

.flex-h-center {
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.flex-both-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.relative {
    position: relative;
}

.absolute {
    position: absolute;
}

/* فاصله‌ها بر اساس استایل اچ‌تی‌ام‌ال شما */
.mt-48 { margin-top: 48px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.py-10 { padding-top: 12px; padding-bottom: 12px; }
.m-auto { margin-left: auto; margin-right: auto; }
.text-center { text-align: center; }

/* ==========================================================================
   ۴. استایل المان‌های صفحه
   ========================================================================== */
.page-full-wrap {
    width: 100%;
    max-width: 480px; /* عرض استاندارد برای صفحات لینک‌بایو */
    padding: 40px 20px;
    box-sizing: border-box;
    z-index: 1;
}

.display-image {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    border: 2px solid rgba(255, 255, 255, 0.2);
}

.page-title {
    font-size: 1.05rem;
    font-weight: bold;
    line-height: 1.8;
    margin-bottom: 0;
    direction: rtl; /* نمایش درست متن‌های فارسی */
}

/* اعمال استایل به هدر ۲ برای ساعات کاری */
h2.page-title {
    font-size: 0.95rem;
    font-weight: normal;
    opacity: 0.9;
}

.page-text-color {
    color: #ffffff;
}

/* اضافه کردن کلاس جامانده برای اعمال فونت */
.page-text-font {
    font-family: Tahoma, 'Segoe UI', sans-serif;
}

/* ==========================================================================
   ۵. استایل دکمه‌ها (افکت شیشه‌ای Glassmorphism)
   ========================================================================== */
.page-item-wrap {
    position: relative;
    margin-bottom: 16px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    width: 100%;
}

.page-item-wrap:hover {
    transform: translateY(-2px);
}

.page-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 14px;
    z-index: 1;
    pointer-events: none; /* جلوگیری از بلاک کردن کلیک */
}

.page-item-each {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #ffffff;
    min-height: 54px;
    z-index: 2;
    direction: rtl;
    padding: 10px 20px;
    box-sizing: border-box;
}

.link-each-image {
    width: 28px;
    height: 28px;
    object-fit: contain;
    position: absolute;
    right: 16px; /* آیکون‌ها در سمت راست متن فارسی قرار بگیرند */
}

.item-title {
    font-size: 0.95rem;
    font-weight: 500;
    width: 100%;
    text-align: center;
    padding: 0 30px;
}

.background-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
    opacity: 0.3;
    pointer-events: none;
}