/* ریست ساده */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* فونت فارسی */
body {
    font-family: 'Vazirmatn', Tahoma, sans-serif;
    background-color: #121212;
    color: #f0f0f0;
    line-height: 1.8;
    /* padding: 20px; - این پدینگ رو از body حذف می‌کنم و به main و header می‌دهم */
    direction: rtl;
}

/* هدر */
header {
    background-color: #1e1e1e;
    padding: 20px; /* پدینگ برای هدر */
    text-align: center;
    border-bottom: 3px solid #ff2e63;
    width: 100%; /* مطمئن می‌شویم هدر کل عرض را بگیرد */
}

header .main-title {
    color: #ff2e63;
    font-size: 2.5rem;
    margin-bottom: 5px; /* کمی فاصله بین عنوان و پاراگراف */
}

header p {
    font-size: 1.1rem;
    color: #ccc;
    margin-bottom: 0; /* حذف margin-bottom اضافی */
}

/* منو */
nav ul {
    list-style: none;
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 15px;
    padding: 0; /* اطمینان از حذف پدینگ اضافی برای ul */
}

nav ul li a {
    color: #f0f0f0;
    text-decoration: none;
    padding: 6px 12px;
    border: 1px solid transparent;
    transition: all 0.3s ease;
    display: block; /* برای اینکه پدینگ روی کل لینک اعمال شود */
}

nav ul li a:hover {
    border-color: #ff2e63;
    color: #ff2e63;
}

/* --- استایل‌های عمومی برای محتوای اصلی --- */
main {
    max-width: 960px; /* حداکثر عرض برای محتوای اصلی */
    margin: 30px auto; /* وسط چین کردن محتوا و فاصله از بالا و پایین */
    padding: 0 20px; /* پدینگ از کناره‌ها برای ریسپانسیو بودن */
}

h1, h2 {
    margin: 30px 0 15px; /* فاصله بیشتر برای عناوین اصلی */
    color: #ffffff;
    text-align: center; /* عناوین وسط چین */
    font-size: 2rem; /* اندازه بزرگتر برای H2 های اصلی */
}

/* استایل برای h2 داخل سکشن‌ها */
.production-section h2,
.club-section h2,
.comments-section h2 {
    color: #ff2e63; /* رنگ قرمز برای عناوین سکشن‌ها */
    font-size: 1.8rem;
    margin-top: 0; /* حذف مارجین بالا اگر سکشن خودش مارجین داشته باشد */
}


p {
    margin: 10px 0 20px;
    max-width: 800px;
    margin-left: auto; /* برای وسط چین کردن پاراگراف‌ها با max-width */
    margin-right: auto;
    text-align: justify; /* متن منظم و هم‌تراز */
}

/* خط افقی */
hr {
    border: none;
    border-top: 1px solid #333;
    margin: 40px auto; /* فاصله بیشتر برای خط افقی */
    max-width: 600px; /* عرض کمتر برای خط افقی */
}

/* لیست‌ها */
ol, ul {
    margin: 20px auto; /* وسط چین کردن لیست‌ها */
    padding-right: 20px; /* پدینگ برای دایره‌ها/شماره‌ها */
    max-width: 800px; /* حداکثر عرض برای لیست‌ها */
}

ol li, ul li {
    padding: 5px 0;
    color: #ccc; /* رنگ روشن‌تر برای متن لیست */
}


/* --- استایل‌های جدید برای بخش‌های صفحه اصلی --- */

.production-section,
.club-section,
.comments-section {
    background-color: #1a1a1a;
    padding: 30px;
    border-radius: 16px;
    box-shadow: 0 0 20px rgba(255, 46, 99, 0.2);
    margin-bottom: 30px; /* فاصله بین سکشن‌ها */
    text-align: center; /* وسط چین کردن محتوای درون سکشن‌ها */
}

.production-section p,
.club-section p,
.comments-section p {
    text-align: justify; /* پاراگراف‌ها داخل سکشن‌ها هم‌تراز باشند */
}

.production-section ul,
.club-section ul {
    list-style: disc; /* دایره برای لیست‌های ul */
    text-align: right; /* متن لیست‌ها به سمت راست */
    margin-right: 20px; /* فاصله از راست برای دایره‌ها */
    max-width: 760px; /* کمی کمتر از سکشن */
    margin-left: auto;
    margin-right: auto; /* برای وسط چین کردن لیست‌ها با max-width */
}

figure {
    margin: 20px auto; /* وسط چین کردن شکل */
    max-width: 600px; /* حداکثر عرض برای شکل */
}

figure img {
    width: 100%; /* تصویر تمام عرض figure را بگیرد */
    height: auto;
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); /* کمی سایه برای عکس */
}

figcaption {
    font-size: 0.9rem;
    color: #aaa;
    margin-top: 10px;
}


/* --- استایل فرم نظرات (قبلاً هم داشتید، فقط کلاس جدید را اضافه کردم) --- */
.comments-section form {
    max-width: 600px; /* محدود کردن عرض فرم */
    margin: 20px auto; /* وسط چین کردن فرم */
    text-align: right; /* متن فرم از راست */
}

.comments-section label {
    display: block;
    margin-bottom: 8px;
    color: #ccc;
    font-size: 1rem;
}

.comments-section input[type="text"],
.comments-section textarea {
    width: 100%;
    padding: 12px;
    background-color: #2a2a2a;
    border: 1px solid #444;
    color: #fff;
    border-radius: 6px;
    margin-top: 5px;
    margin-bottom: 15px; /* فاصله بیشتر بعد از هر فیلد */
}

.comments-section textarea {
    min-height: 120px; /* حداقل ارتفاع برای تکست‌اریا */
    resize: vertical; /* فقط از نظر عمودی قابل تغییر اندازه باشد */
}

.comments-section input[type="submit"] {
    background-color: #ff2e63;
    color: white;
    border: none;
    padding: 12px 25px;
    margin-top: 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.3s;
    font-size: 1.1rem;
}

.comments-section input[type="submit"]:hover {
    background-color: #e6004c;
}


/* === داشبورد کاربری === */
/* این بخش‌ها مربوط به صفحات دیگر هستند و من تغییری در آنها ایجاد نکردم. */
.dashboard {
    max-width: 900px;
    margin: 40px auto;
    background-color: #1a1a1a;
    padding: 30px;
    border-radius: 16px;
    box-shadow: 0 0 25px rgba(255, 46, 99, 0.2);
}

.dashboard h2 {
    color: #ff2e63;
    margin-bottom: 25px;
    font-size: 1.8rem;
    text-align: center;
}

.user-info {
    background-color: #222;
    padding: 20px;
    border-radius: 12px;
    margin-bottom: 30px;
    border: 1px solid #333;
}

.user-info p {
    margin: 10px 0;
    font-size: 1.1rem;
}

.stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
}

.stat-card {
    background-color: #2a2a2a;
    padding: 20px;
    border-radius: 12px;
    text-align: center;
    border: 1px solid #444;
    transition: transform 0.3s ease;
}

.stat-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 0 12px rgba(255, 46, 99, 0.3);
}

.stat-card h3 {
    color: #ff2e63;
    margin-bottom: 10px;
    font-size: 1.4rem;
}

.stat-card p {
    font-size: 1.2rem;
    color: #ddd;
}

/* === کلاب لیزارد === */
/* این بخش هم مربوط به LizarClub.html است و تغییر چندانی اعمال نشده مگر تغییرات عمومی‌تر */
.club-page {
    max-width: 800px;
    margin: 40px auto;
    background-color: #1a1a1a;
    padding: 30px;
    border-radius: 16px;
    box-shadow: 0 0 20px rgba(255, 46, 99, 0.2);
    text-align: center; /* کل محتوای صفحه وسط چین باشد */
}

.club-page h1 {
    color: #ff2e63;
    margin-bottom: 20px;
    font-size: 2rem;
}

.club-page p {
    font-size: 1.1rem;
    color: #ccc;
    margin-bottom: 30px;
    text-align: justify; /* پاراگراف‌ها هم‌تراز شوند */
}

audio, video {
    margin-top: 20px;
    border-radius: 12px;
    outline: none;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
    max-width: 100%; /* مطمئن شویم ویدئو/صوت از کادر بیرون نزند */
    height: auto;
}

.club-page button {
    background-color: #ff2e63;
    border: none;
    color: white;
    padding: 10px 24px;
    margin: 15px 10px 0;
    font-size: 1rem;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.3s;
}

.club-page button:hover {
    background-color: #e6004c;
}


/* === فرم ورود به لیزارد کلاب === */
/* توجه: در اینجا body دوبار تعریف شده است. من فرض می‌کنم این body مربوط به فایل‌های فرم ورود و ثبت‌نام است و آن را دست نمی‌زنم. */
/* اگر می‌خواهید این استایل‌ها به body اصلی اعمال شوند، باید آن را با استایل body اصلی ادغام کنید. */
body { /* این بخش احتمالا از یک فایل دیگر کپی شده است */
    background-color: #0f0f0f;
    font-family: "Vazirmatn", sans-serif;
    margin: 0;
    padding: 0;
    direction: rtl;
}

.login-form {
    max-width: 420px;
    margin: 80px auto;
    background-color: #1a1a1a;
    padding: 30px 25px;
    border-radius: 16px;
    box-shadow: 0 0 25px rgba(255, 46, 99, 0.15);
    color: #fff;
}

.login-form h1 {
    text-align: center;
    color: #ff2e63;
    margin-bottom: 30px;
    font-size: 1.8rem;
}

.login-form label {
    display: block;
    margin-bottom: 6px;
    color: #ccc;
    font-size: 1rem;
}

.login-form input[type="text"],
.login-form input[type="password"] {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border-radius: 8px;
    border: 1px solid #444;
    background-color: #2a2a2a;
    color: white;
    font-size: 1rem;
    box-sizing: border-box;
}

.login-form input[type="checkbox"] {
    margin-left: 10px;
    vertical-align: middle;
}

.login-form button {
    width: 100%;
    background-color: #ff2e63;
    border: none;
    padding: 12px;
    font-size: 1rem;
    border-radius: 10px;
    color: white;
    cursor: pointer;
    transition: background 0.3s ease;
    margin-top: 15px;
}

.login-form button:hover {
    background-color: #e6004c;
}

.login-form a {
    display: block;
    text-align: center;
    margin-top: 15px;
    color: #ff2e63;
    text-decoration: none;
    font-size: 0.95rem;
}

.login-form a:hover {
    text-decoration: underline;
}


/* === فرم ثبت‌نام لیزارد کلاب === */
.signup-form {
    max-width: 500px;
    margin: 60px auto;
    background-color: #1a1a1a;
    padding: 30px 25px;
    border-radius: 16px;
    box-shadow: 0 0 25px rgba(255, 46, 99, 0.2);
    color: #fff;
}

.signup-form h1 {
    text-align: center;
    color: #ff2e63;
    margin-bottom: 30px;
    font-size: 1.8rem;
}

.signup-form label {
    display: block;
    margin-bottom: 6px;
    color: #ccc;
    font-size: 1rem;
}

.signup-form input,
.signup-form select {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border-radius: 8px;
    border: 1px solid #444;
    background-color: #2a2a2a;
    color: white;
    font-size: 1rem;
    box-sizing: border-box;
}

.signup-form button {
    width: 100%;
    background-color: #ff2e63;
    border: none;
    padding: 12px;
    font-size: 1rem;
    border-radius: 10px;
    color: white;
    cursor: pointer;
    transition: background 0.3s ease;
    margin-top: 15px;
}

.signup-form button:hover {
    background-color: #e6004c;
}