/* تعریف متغیرهای رنگ برای دسترسی سریع در آینده */
:root {
    --bg-color: #FDFBF7;
    /* رنگ پس‌زمینه کرم روشن */
    --text-color: #1A1A1A;
    /* رنگ مشکی مات متن و لوگو */
    --accent-color: #8B5A2B;
    /* رنگ قهوه‌ای چوبی برای دکمه‌ها */
    --white: #ffffff;
}

/* ریست کردن تنظیمات پیش‌فرض مرورگر */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Morabba', sans-serif;
    /* استفاده از فونت وزیرمتن */
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: 'Morabba', sans-serif;
    /* تغییر به فونت مربع */
}

/* استایل دهی به نوار بالایی سایت */
/* استایل دهی به نوار بالایی سایت */
/* استایل نوار بالایی سایت - ثابت در بالای صفحه */
/* استایل نوار بالایی سایت - ثابت در بالای صفحه */
/* استایل نوار بالایی سایت - ثابت در بالای صفحه */
header {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    background-color: var(--white);
    /* حالت اولیه: پس‌زمینه سفید جامد */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);

    /* ترانزیشن نرم فقط برای تغییر رنگ پس‌زمینه و سایه */
    transition: background-color 0.4s ease, box-shadow 0.4s ease;
}

/* استایل داخل نوار */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1px 5%;
}

/* وقتی جاوااسکریپت کلاس scrolled را اضافه کرد: */
header.scrolled {
    background-color: rgba(255, 255, 255, 0);
    /* پس‌زمینه کاملا شفاف (Opacity صفر) */
    box-shadow: none;
    /* حذف سایه */
    /* هیچ افکت بلوری (blur) در کار نیست */
}

/* متن‌ها و لوگو همیشه مشکی هستند تا روی پس‌زمینه سفید خوانا باشند */
.logo h3 {
    color: var(--text-color);
}

.nav-links a {
    color: var(--text-color);
}

.hamburger span {
    background-color: var(--text-color);
}

/* متن‌ها و لوگو همیشه مشکی هستند تا روی شیشه سفید خوانا باشند */
.logo h3 {
    color: var(--text-color);
}

.nav-links a {
    color: var(--text-color);
}

.hamburger span {
    background-color: var(--text-color);
}

.nav-links a {
    color: #fff;
    /* سفید روی عکس */
    transition: color 0.4s ease;
}

.hamburger span {
    background-color: #fff;
    /* همبرگر سفید روی عکس */
    transition: background-color 0.4s ease;
}

/* وقتی اسکرول شد، رنگ‌ها به مشکی برگردد */
.navbar.scrolled .logo h3,
.navbar.scrolled .nav-links a {
    color: var(--text-color);
    /* مشکی */
}

.navbar.scrolled .hamburger span {
    background-color: var(--text-color);
    /* مشکی */
}

.logo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

/* استایل اختصاصی برای متن لوگو */
.logo h3 {
    font-size: 18px;
    /* سایز دلخواهتان، مثلا 24 پیکسل */
    font-weight: bold;
    /* ضخامت فونت */
    letter-spacing: 0px;
    /* فاصله بین حروف (برای لوگوهای لاتین لوکس، این VERY تاثیرگذار است) */
    margin: 10px 0;
    /* حذف فاصله‌های پیش‌فرض */
    padding-top: 5px;
    color: var(--text-color);
    /* رنگ مشکی */
}

/* اگر از کلاس english-name استفاده کرده بودید، این هم حذف کنید */


/* مهم: کنترل سایز دقیق لوگو */
.logo-icon {
    width: 80px;
    height: 80px;
    object-fit: contain;
    margin-left: -10px;
    /* فاصله کمی بین لوگو و متن */
    flex-shrink: 0;
    /* این دستور جلوی فشرده شدن لوگو را وقتی صفحه کوچک می‌شود می‌گیرد */
}

.english-name {
    font-size: 12px;
    color: gray;
    font-weight: normal;
    margin-top: 5px;
    /* فاصله کمی برای زیباتر شدن */
}

.nav-links {
    list-style: none;
    display: flex;
    gap: 30px;
    margin: 0;
    /* ریست کردن مارجین پیش‌فرض */
    padding: 0;
    /* ریست کردن پدینگ پیش‌فرض */
}

.nav-links a {
    text-decoration: none;
    color: var(--text-color);
    font-weight: bold;
    transition: color 0.3s;
}

.nav-links a:hover {
    color: var(--accent-color);
    /* وقتی موس میره روش قهوه‌ای میشه */
}

/* بخش اصلی هیرو (معرفی اولیه) */
/* کادر بیرونی که فضای اسکرول را ایجاد میکند (ارتفاع زیاد دارد) */
/* کادر بیرونی که فضای اسکرول را ایجاد میکند */
.hero-scroll {
    height: 300vh;
    position: relative;
}

/* کادر داخلی که موقع اسکرول ثابت (Sticky) می‌ماند */
.hero-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    width: 100vw;
    /* عرض کامل صفحه */
    overflow: hidden;
    display: flex;
    flex-direction: column;
    /* چینش عمودی متن و دکمه */
    justify-content: space-between;
    /* این متن را بالا و دکمه را پایین هل می‌دهد */
    padding-top: 90px;
    /* فاصله شعار از نوار بالا (ناوبار) */
    padding-bottom: 30px;
    /* فاصله دکمه از پایین صفحه (همان اندازه بالا) */
    box-sizing: border-box;
    /* جلوگیری از بهم ریختن سایز */
    background-color: transparent;
    /* حذف پس‌زمینه مشکی */
}

/* عکس فریم‌ها - تمام صفحه بدون حاشیه */
.hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* این کلمه عکس را بدون کشیدگی تمام صفحه می‌گیرد */
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    /* عکس در لایه پایین */
}

/* کادر متن شعار - بالا */
.hero-text-overlay {
    position: relative;
    z-index: 2;
    /* متن بالای عکس */
    text-align: center;
    color: #fff;
    text-shadow: 0 4px 10px rgba(0, 0, 0, 0.7);
    /* سایه متن برای خوانایی روی عکس */
    padding: 0 20px;
}

/* کادر دکمه - پایین */
.hero-button-overlay {
    position: relative;
    z-index: 2;
    text-align: center;
    /* دکمه در وسط قرار گیرد */
}

/* استایل دکمه شیشه‌ای (Glassmorphism) */
.btn-glass {
    background: rgba(255, 255, 255, 0.2);
    /* پس‌زمینه نیمه شفاف سفید */
    backdrop-filter: blur(10px);
    /* افکت بلور شیشه ای - مهم */
    -webkit-backdrop-filter: blur(10px);
    /* برای مرورگر سافاری */
    border: 1px solid rgba(255, 255, 255, 0.4);
    /* حاشیه نیمه شفاف */
    color: #fff;
    padding: 15px 40px;
    text-decoration: none;
    border-radius: 50px;
    /* گوشه‌های کاملا گرد */
    font-weight: bold;
    font-size: 18px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    /* سایه ملایم زیر دکمه */
    transition: all 0.3s ease;
    display: inline-block;
}

/* وقتی موس میره روی دکمه */
.btn-glass:hover {
    background: rgba(255, 255, 255, 0.4);
    /* کم‌کم شفاف‌تر */
    border: 1px solid rgba(255, 255, 255, 0.8);
    transform: translateY(-3px);
    /* کمی بالا می‌آید */
}

/* استایل دکمه‌ها */
.btn {
    background-color: var(--text-color);
    color: var(--white);
    padding: 15px 30px;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    transition: all 0.3s ease;
}

.btn:hover {
    background-color: var(--accent-color);
    transform: translateY(-3px);
    /* وقتی موس میره روش کمی پایین‌تر میاد */
}

/* بخش مزایا (سه ستون) */
/* بخش مزایا (سه ستون) */
.features {
    display: flex;
    justify-content: space-between;
    padding: 80px 10%;
    gap: 30px;
    flex-wrap: wrap;
    /* این دستور باعث می‌شود اگر صفحه موبایل بود، کادرها زیر هم بروند نه روی هم */
}

.feature-box {
    background: var(--white);
    padding: 30px;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    flex: 1 1 300px;
    /* این یعنی هر کادر حداقل ۳۰۰ پیکسل فضا می‌گیرد */
}

.feature-box h3 {
    margin-bottom: 15px;
    color: var(--accent-color);
}

/* پایین صفحه */
footer {
    text-align: center;
    padding: 20px;
    background-color: var(--text-color);
    color: var(--white);
    font-size: 14px;
}

/* استایل دکمه همبرگری - پیش‌فرض در کامپیوتر مخفی است */
.hamburger {
    display: none;
    flex-direction: column;
    cursor: pointer;
    gap: 5px;
    z-index: 100;
}

.hamburger span {
    width: 25px;
    height: 3px;
    background-color: var(--text-color);
    transition: all 0.3s ease;
}

/* کدهای موبایل و تبلت */
@media (max-width: 768px) {

    /* نمایش دکمه همبرگری در موبایل */
    .hamburger {
        display: flex;
    }

    /* مخفی کردن منوی افقی در موبایل */
    .nav-links {
        position: absolute;
        top: 100%;
        right: 0;
        background-color: var(--white);
        width: 100%;
        flex-direction: column;
        align-items: center;
        gap: 15px;
        padding: 20px 0;
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
        z-index: 999;
        display: flex;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px);
        transition: all 0.3s ease;
    }

    .nav-links.active {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    /* تنظیمات بخش هیرو برای موبایل */
    .hero-sticky {
        padding-top: 80px;
        padding-bottom: 80px;
    }

    .hero-text-overlay h1 {
        font-size: 28px;
    }

    .hero-text-overlay p {
        font-size: 16px;
    }
}

/* <--- این آکولاد بسته شدن @media است و نباید جا بیفتد */
.hero-text-overlay p {
    font-size: 16px;
}

/* استایل پنل مدیریت */
.admin-container {
    max-width: 600px;
    margin: 50px auto;
    background: var(--white);
    padding: 40px;
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

.admin-container h1 {
    text-align: center;
    margin-bottom: 30px;
    font-size: 24px;
}

#product-form input,
#product-form textarea {
    width: 100%;
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-family: 'Morabba', sans-serif;
    font-size: 16px;
}

#product-form button {
    width: 100%;
    padding: 15px;
    background-color: var(--text-color);
    color: #fff;
    border: none;
    border-radius: 5px;
    font-size: 18px;
    cursor: pointer;
    transition: background 0.3s;
}

#product-form button:hover {
    background-color: var(--accent-color);
}

#success-msg {
    display: none;
    text-align: center;
    color: green;
    font-weight: bold;
    margin-top: 20px;
}

/* ============================================================
   پوینتر (نشانگر موس) سفارشی لوکس — فقط صفحات عمومی (body.lux-cursor)
   فلش قهوه‌ای هماهنگ با هویت سایت (#8B5A2B) + دورخط کرم
   تا روی پس‌زمینه‌های تیره (فوتر/لایت‌باکس) هم دیده شود
   پنل مدیریت (admin.html) این کلاس را ندارد و نشانگر استاندارد می‌ماند
   ============================================================ */
.lux-cursor,
.lux-cursor * {
    cursor: url('/img/cursors/arrow.svg?v=1') 4 2, auto;
}

/* عناصر قابل کلیک: همان فلش + هاله‌های طلایی کلیک */
.lux-cursor a,
.lux-cursor button,
.lux-cursor [role='button'],
.lux-cursor .btn,
.lux-cursor .btn-glass,
.lux-cursor .zoom-icon,
.lux-cursor .hamburger,
.lux-cursor label {
    cursor: url('/img/cursors/pointer.svg?v=1') 4 2, pointer;
}

/* فیلدهای متنی: نشانگر استاندارد برای ویرایش راحت متن */
.lux-cursor input[type='text'],
.lux-cursor input[type='email'],
.lux-cursor input[type='tel'],
.lux-cursor input[type='password'],
.lux-cursor textarea,
.lux-cursor select {
    cursor: auto;
}