/* static/css/style.css */

/* --- تنظیمات کلی و فونت --- */
body {
    font-family: 'Vazirmatn', sans-serif;
    background-color: #f9f9f9;
    color: #333;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

/* --- کانتینر اصلی --- */
.container {
    width: 100%;
    padding: 20px;
}

/* --- باکس فرم ورود و ثبت نام --- */
.form-box, .welcome-box {
    background-color: #ffffff;
    padding: 30px 40px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    max-width: 400px;
    margin: auto;
    text-align: center;
}

.form-box h2 {
    margin-top: 0;
    margin-bottom: 10px;
    color: #1a1a1a;
    font-weight: 700;
}

.form-box p {
    margin-bottom: 25px;
    color: #666;
    font-size: 14px;
}

/* --- گروه‌بندی فرم‌ها --- */
.form-group {
    margin-bottom: 20px;
    text-align: right; /* لیبل‌ها راست‌چین باشند */
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    font-size: 14px;
}

.form-group input {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
    box-sizing: border-box; /* برای اینکه padding عرض را زیاد نکند */
    direction: ltr; /* شماره موبایل و رمز از چپ به راست نوشته شوند */
    text-align: left;
}

.form-group input:focus {
    outline: none;
    border-color: #A62626; /* رنگ قرمز دیوار */
    box-shadow: 0 0 5px rgba(166, 38, 38, 0.2);
}

/* --- دکمه‌ها --- */
.btn {
    width: 100%;
    padding: 12px;
    background-color: #A62626; /* رنگ اصلی دیوار */
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.btn:hover {
    background-color: #8c1f1f;
}

.btn-secondary {
    background-color: #6c757d;
}

.btn-secondary:hover {
    background-color: #5a6268;
}

/* --- لینک جابجایی بین فرم‌ها --- */
.switch-form {
    margin-top: 20px;
    font-size: 14px;
}

.switch-form a {
    color: #A62626;
    text-decoration: none;
    font-weight: 500;
}

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

/* --- پیام‌های فلش (خطا و موفقیت) --- */
.flash-error {
    background-color: #f8d7da;
    color: #721c24;
    padding: 10px;
    border: 1px solid #f5c6cb;
    border-radius: 5px;
    margin-bottom: 15px;
    font-size: 14px;
}

.flash-success {
    background-color: #d4edda;
    color: #155724;
    padding: 10px;
    border: 1px solid #c3e6cb;
    border-radius: 5px;
    margin-bottom: 15px;
    font-size: 14px;
}

/* --- باکس خوش آمد گویی --- */
.welcome-box h1 {
    font-size: 28px;
}

.welcome-box p {
    font-size: 16px;
    margin-bottom: 30px;
}
/* static/css/style.css */
/* ... کدهای قبلی برای فرم ورود و ... اینجا هستند ... */

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

/* جلوگیری از پوشانده شدن محتوا توسط نوار ناوبری */
body {
    padding-bottom: 80px; /* به اندازه ارتفاع نوار ناوبری */
}

.main-content {
    width: 100%;
    max-width: 900px; /* برای ظاهر بهتر در دسکتاپ */
    margin: 0 auto;
    padding: 20px;
}

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #eee;
    padding-bottom: 15px;
    margin-bottom: 20px;
}

.page-header h1 {
    margin: 0;
    font-size: 24px;
}

.logout-link {
    color: #A62626;
    text-decoration: none;
    font-size: 14px;
}

.page-content {
    text-align: center;
    color: #888;
}


/* --- استایل نوار ناوبری پایین --- */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #ffffff;
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.08);
    z-index: 1000;
}

.nav-list {
    display: flex;
    justify-content: space-around;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 5px 0;
}

.nav-item a {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: #888;
    padding: 5px 15px;
    transition: color 0.2s ease;
}

.nav-item .nav-text {
    font-size: 11px;
    margin-top: 2px;
}

.nav-item i {
    font-size: 24px;
}

/* استایل آیتم فعال */
.nav-item.active a {
    color: #A62626; /* رنگ قرمز دیوار */
}

/* استایل دکمه وسطی (ثبت آگهی) */
.nav-item-special a {
    background-color: #A62626;
    color: white;
    padding: 8px 16px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 5px; /* فاصله بین آیکون و متن */
    font-size: 13px;
    font-weight: 500;
    transform: translateY(-15px); /* کمی بالاتر از بقیه */
    box-shadow: 0 4px 8px rgba(166, 38, 38, 0.3);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.nav-item-special a:hover {
    transform: translateY(-18px);
    box-shadow: 0 6px 12px rgba(166, 38, 38, 0.4);
}

.nav-item-special i {   
    font-size: 20px;
}
.ad-form {
    display: flex;
    flex-direction: column;
    gap: 20px; /* فاصله بین المان های فرم */
}

.form-group {
    display: flex;
    flex-direction: column;
}

.form-group label {
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 8px;
    color: #333;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 15px;
    font-family: 'Vazirmatn', sans-serif;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #A62626;
    box-shadow: 0 0 0 3px rgba(166, 38, 38, 0.1);
}

.form-group textarea {
    resize: vertical; /* فقط اجازه تغییر سایز عمودی */
}

/* استایل مخصوص آپلود فایل */
.file-upload-wrapper {
    border: 2px dashed #ddd;
    border-radius: 8px;
    padding: 30px;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s, background-color 0.2s;
}

.file-upload-wrapper:hover {
    border-color: #A62626;
    background-color: #fefafa;
}

.file-upload-wrapper label {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    color: #888;
}

.file-upload-wrapper i {
    font-size: 40px;
}

.file-upload-wrapper span {
    font-weight: 500;
    font-size: 16px;
}

/* مخفی کردن اینپوت فایل اصلی */
.file-upload-wrapper input[type="file"] {
    display: none;
}

/* استایل دکمه ثبت */
.submit-btn {
    background-color: #A62626;
    color: white;
    border: none;
    padding: 15px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.2s;
    margin-top: 10px;
}

.submit-btn:hover {
    background-color: #8c1f1f;
}
/* ------------------------------------- */
/* --- استایل های آپلودر سفارشی عکس --- */
/* ------------------------------------- */

.image-uploader {
    position: relative;
    width: 150px; /* اندازه دلخواه */
    height: 150px; /* اندازه دلخواه */
    border: 2px dashed #ccc;
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden; /* برای اینکه گوشه های عکس از کادر بیرون نزند */
    background-color: #f8f8f8;
    transition: all 0.3s ease;
}

.image-uploader:hover {
    border-color: #007bff;
    background-color: #f1f7ff;
}

/* مخفی کردن input پیش فرض */
.image-uploader input[type="file"] {
    display: none;
}

.image-uploader .uploader-label {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    /* این بخش برای نمایش عکس به عنوان پس زمینه است */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.image-uploader .upload-prompt {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #888;
}

.image-uploader .upload-prompt i {
    font-size: 48px;
    margin-bottom: 8px;
}

.image-uploader .upload-prompt span {
    font-size: 14px;
    font-weight: 500;
}

/* دکمه حذف عکس */
.image-uploader .remove-image-btn {
    position: absolute;
    top: 8px;
    left: 8px; /* تغییر به left برای RTL */
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
    font-size: 18px;
    display: none; /* در حالت عادی مخفی است */
    justify-content: center;
    align-items: center;
    cursor: pointer;
    line-height: 1;
    padding: 0;
}

/* وقتی عکس آپلود شد، این دکمه نمایش داده می شود */
.image-uploader.has-image .remove-image-btn {
    display: flex;
}

/* وقتی عکس آپلود شد، متن راهنما مخفی می شود */
.image-uploader.has-image .upload-prompt {
    display: none;
}

.home-grid {
    display: grid;
    grid-template-columns: 280px 1fr; /* یک ستون ثابت برای فیلتر، بقیه برای آگهی */
    gap: 30px;
    margin-top: 20px;
}

/* ستون فیلترها */
.filters-sidebar {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    height: fit-content; /* ارتفاع متناسب با محتوا */
}

.filters-sidebar h3 {
    margin-top: 0;
    margin-bottom: 20px;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}

.filter-form .filter-group {
    margin-bottom: 20px;
}

.filter-form label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    font-size: 14px;
}

.filter-form input[type="text"],
.filter-form input[type="number"] {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 14px;
}

.filter-form .price-range {
    display: flex;
    align-items: center;
    gap: 8px;
}

.filter-form .price-range span {
    color: #888;
}

.filter-actions {
    margin-top: 25px;
}

.filter-btn {
    width: 100%;
    padding: 12px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.filter-btn:hover {
    background-color: #0056b3;
}

.reset-link {
    display: block;
    text-align: center;
    margin-top: 12px;
    color: #dc3545;
    font-size: 14px;
    text-decoration: none;
}

.reset-link:hover {
    text-decoration: underline;
}

/* ستون آگهی ها */
.ad-listings .ad-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
}

.ad-card {
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.07);
    transition: transform 0.2s, box-shadow 0.2s;
    display: flex;
    flex-direction: column;
}

.ad-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.ad-card-image {
    width: 100%;
    height: 180px; /* ارتفاع ثابت برای عکس */
    background-color: #f0f0f0;
}

.ad-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* عکس ها را بدون تغییر نسبت ابعاد، کادر را پر می کنند */
}

.ad-card-body {
    padding: 15px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.ad-title {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 10px 0;
    color: #333;
}

.ad-price {
    font-size: 18px;
    font-weight: 700;
    color: #28a745;
    margin: 0 0 15px 0;
}

.ad-meta {
    font-size: 13px;
    color: #777;
    margin-top: auto; /* این متا دیتا را به پایین کارت می چسباند */
    display: flex;
    align-items: center;
    gap: 8px;
}
.ad-meta:last-child {
    margin-top: 5px;
}

.ad-meta i {
    font-size: 16px;
    vertical-align: middle;
}

.no-results {
    text-align: center;
    padding: 50px;
    background-color: #fff;
    border-radius: 8px;
    color: #777;
}
/* -------------------------------------- */
/* --- استایل جدید صفحه اصلی (Home) --- */
/* -------------------------------------- */

/* نوار جستجو و فیلتر */
.search-filter-bar {
    background-color: #fff;
    padding: 12px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    margin-bottom: 30px;
}

.filter-form-inline {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 10px;
}

.filter-item {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    background-color: #f5f5f5;
    border-radius: 6px;
}

.filter-item i {
    color: #666;
    font-size: 20px;
    margin-left: 8px; /* فاصله آیکون از متن */
}

.filter-item input {
    border: none;
    outline: none;
    background: transparent;
    font-size: 14px;
    width: 100%;
}
.filter-item input::placeholder {
    color: #888;
}

/* استایل خاص برای فیلتر قیمت */
.price-filter {
    display: flex;
    align-items: center;
}
.price-filter input {
    width: 100px; /* عرض ثابت برای فیلدهای قیمت */
}
.price-filter span {
    margin: 0 5px;
    color: #aaa;
}

/* استایل بخش اصلی جستجو که بزرگتر است */
.search-item {
    flex-grow: 1; /* این باعث می شود تا جای خالی را پر کند */
    padding: 0; /* پدینگ داخلی ندارد چون دکمه و اینپوت داخلش هستند */
}
.search-item input {
    padding: 8px 12px;
}

.search-btn {
    border: none;
    background-color: #007bff;
    color: white;
    padding: 8px 16px;
    border-radius: 6px 0 0 6px; /* گرد کردن گوشه ها */
    cursor: pointer;
    font-size: 20px;
    display: flex;
    align-items: center;
    transition: background-color 0.2s;
}
.search-btn:hover {
    background-color: #0056b3;
}

/* جداکننده عمودی */
.divider {
    width: 1px;
    height: 25px;
    background-color: #e0e0e0;
}

/* دکمه ریست فیلترها */
.reset-link-inline {
    color: #dc3545;
    font-size: 24px;
    display: flex;
    align-items: center;
    padding: 8px;
    border-radius: 6px;
    text-decoration: none;
    transition: background-color 0.2s;
}
.reset-link-inline:hover {
    background-color: #fbebee;
}


/* -- استایل های لیست آگهی ها (با بهبود جزئی) -- */
.ad-listings {
    margin-top: 20px;
}

.ad-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
}

/* کل کارت را به لینک تبدیل می کنیم */
.ad-card-link {
    text-decoration: none;
    color: inherit;
}

.ad-card {
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.07);
    transition: transform 0.2s, box-shadow 0.2s;
    display: flex;
    flex-direction: column;
    height: 100%; /* برای اینکه همه کارت ها هم قد باشند در یک ردیف */
}

.ad-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.ad-card-image {
    width: 100%;
    height: 180px;
    background-color: #f0f0f0;
}

.ad-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ad-card-body {
    padding: 15px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.ad-title {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 10px 0;
}

.ad-price {
    font-size: 18px;
    font-weight: 700;
    color: #28a745;
    margin: 0 0 auto 0; /* این قیمت را بالا نگه می دارد و متا را به پایین هل می دهد */
}

.ad-meta-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: #777;
    margin-top: 15px;
    padding-top: 10px;
    border-top: 1px solid #f0f0f0;
}

.ad-location, .ad-time {
    display: flex;
    align-items: center;
    gap: 5px;
}
.ad-location i, .ad-time i {
    font-size: 16px;
}

.no-results {
    text-align: center;
    padding: 50px;
    background-color: #fff;
    border-radius: 8px;
    color: #777;
    grid-column: 1 / -1; /* باعث می شود کل عرض گرید را بگیرد */
}
.ad-detail-container {
    display: grid;
    grid-template-columns: 1fr 350px; /* ستون اصلی انعطاف پذیر، ستون کناری ثابت */
    gap: 30px;
    align-items: flex-start;
}

/* ستون کناری (سایدبار) */
.ad-detail-sidebar {
    position: sticky; /* سایدبار با اسکرول صفحه حرکت نمی کند */
    top: 20px;
}

.ad-detail-image {
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 20px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
.ad-detail-image img {
    width: 100%;
    height: auto;
    display: block;
}

.contact-info-box {
    background-color: #fff;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #e0e0e0;
    text-align: center;
}
.contact-info-box h4 {
    margin-top: 0;
    margin-bottom: 15px;
}
#show-contact-btn {
    width: 100%;
    padding: 12px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    border: none;
    background-color: #007bff;
    color: white;
    border-radius: 8px;
    transition: background-color 0.3s;
}
#show-contact-btn:hover {
    background-color: #0056b3;
}
#show-contact-btn i {
    vertical-align: middle;
    margin-left: 8px;
    font-size: 20px;
}

#contact-details p {
    margin-bottom: 10px;
    color: #555;
}
.phone-number {
    background-color: #e9f5ff;
    border: 1px dashed #007bff;
    padding: 15px;
    border-radius: 8px;
}
.phone-number span {
    font-size: 22px;
    font-weight: bold;
    color: #0056b3;
    letter-spacing: 2px;
}

/* ستون اصلی محتوا */
.ad-detail-main {
    background-color: #fff;
    padding: 30px;
    border-radius: 12px;
}
.ad-detail-main h1 {
    margin-top: 0;
    font-size: 28px;
}
.ad-timestamp {
    color: #888;
    font-size: 14px;
    margin-bottom: 30px;
}

.info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 30px;
    padding-bottom: 30px;
    border-bottom: 1px solid #eee;
}

.info-item {
    display: flex;
    align-items: center;
    background-color: #f9f9f9;
    padding: 15px;
    border-radius: 8px;
}
.info-item i {
    font-size: 28px;
    color: #007bff;
    margin-left: 15px;
}
.info-item div {
    display: flex;
    flex-direction: column;
}
.info-item span {
    font-size: 14px;
    color: #666;
}
.info-item strong {
    font-size: 16px;
    font-weight: 600;
    color: #333;
}

.ad-description h3 {
    margin-bottom: 15px;
}
.ad-description p {
    line-height: 1.8;
    color: #444;
    white-space: pre-wrap; /* این خط جادویی را اضافه کنید! */
}
/* static/css/style.css */

/* ============ استایل های صفحه دیوار من ============ */

.my-divar-container {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    margin-top: 2rem;
}

/* --- سایدبار --- */
.my-divar-sidebar {
    flex: 0 0 250px; /* سایدبار عرض ثابت خواهد داشت */
    background-color: #fff;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 16px;
    position: sticky;
    top: 100px; /* فاصله از بالای صفحه بعد از اسکرول */
}

.user-info {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--border-color);
}

.user-info .bx {
    font-size: 2.5rem;
    color: var(--primary-color);
}

.user-info span {
    font-weight: 600;
    font-size: 1.1rem;
}

.my-divar-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.my-divar-menu a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 10px;
    border-radius: 6px;
    color: #333;
    text-decoration: none;
    font-weight: 500;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.my-divar-menu a:hover {
    background-color: #f0f2f5;
}

.my-divar-menu a.active {
    background-color: var(--primary-color);
    color: #fff;
}

.my-divar-menu a .bx {
    font-size: 1.4rem;
}

.logout-btn {
    width: 100%;
    margin-top: 24px;
}

/* --- بخش اصلی --- */
.my-divar-main {
    flex-grow: 1; /* بخش اصلی بقیه فضا را می گیرد */
}

/* آیتم های لیست آگهی های من */
.my-ad-item {
    display: flex;
    gap: 16px;
    align-items: center;
    background-color: #fff;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 16px;
    transition: box-shadow 0.2s ease;
}
.my-ad-item:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.my-ad-item-image {
    width: 100px;
    height: 100px;
    flex-shrink: 0;
}

.my-ad-item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
}

.my-ad-item-details {
    flex-grow: 1;
}

.my-ad-item-details a {
    text-decoration: none;
    color: inherit;
}

.my-ad-item-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0 0 8px 0;
}

.my-ad-item-price {
    font-size: 1rem;
    font-weight: 500;
    color: #555;
    margin: 0;
}
.my-ad-item-timestamp {
    font-size: 0.8rem;
    color: #888;
}

.my-ad-item-actions {
    display: flex;
    gap: 8px;
}
.btn.disabled {
    cursor: not-allowed;
    opacity: 0.6;
}
/* static/css/style.css */

/* ============ استایل هدر دسکتاپ ============ */
.main-header {
    background-color: #fff;
    border-bottom: 1px solid var(--border-color);
    padding: 1rem 0;
    position: sticky;
    top: 0;
    z-index: 1000;
    display: none; /* به طور پیش فرض مخفی است و در حالت دسکتاپ نمایش داده می شود */
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-color);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
}

.logo .bx {
    font-size: 1.8rem;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* static/css/my_divar.css */

/* ---------------------------------------------------- */
/* --- استایل‌های کلی برای کانتینر اصلی صفحه دیوار من --- */
/* ---------------------------------------------------- */
.my-divar-container {
    display: flex; /* فعال کردن Flexbox */
    flex-direction: column; /* چیدمان پیش‌فرض برای موبایل: ستونی */
    gap: 2rem; /* ایجاد فاصله بین سایدبار و محتوای اصلی */
    padding: 1rem;
    max-width: 1200px;
    margin: 2rem auto; /* وسط چین کردن کل کانتینر */
}

/* ------------------------------------- */
/* --- استایل‌های سایدبار (منوی کناری) --- */
/* ------------------------------------- */
.my-divar-sidebar {
    background-color: #f8f9fa;
    padding: 1.5rem;
    border-radius: 8px;
    border: 1px solid #dee2e6;
    display: flex;
    flex-direction: column; /* آیتم‌های داخل سایدبار هم ستونی باشند */
    height: fit-content; /* ارتفاع سایدبار به اندازه محتوایش باشد */
}

.my-divar-sidebar .user-info {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.1rem;
    font-weight: bold;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #e9ecef;
    margin-bottom: 1rem;
}

.my-divar-sidebar .user-info i {
    font-size: 2rem;
    color: #495057;
}

.my-divar-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.my-divar-menu a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 15px;
    border-radius: 6px;
    text-decoration: none;
    color: #343a40;
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
    margin-bottom: 5px; /* فاصله بین آیتم‌های منو */
}

.my-divar-menu a:hover {
    background-color: #e9ecef;
}

.my-divar-menu a.active {
    background-color: #0d6efd; /* رنگ آبی بوت استرپ برای آیتم فعال */
    color: #fff;
    font-weight: 500;
}

.my-divar-menu a i {
    font-size: 1.4rem;
}

.my-divar-sidebar .logout-btn {
    margin-top: auto; /* این دکمه را به انتهای سایدبار می‌چسباند */
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* ----------------------------- */
/* --- استایل‌های محتوای اصلی --- */
/* ----------------------------- */
.my-divar-main {
    flex-grow: 1; /* این بخش تمام فضای باقی‌مانده را اشغال می‌کند */
}

.page-header {
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #e0e0e0;
}

.page-header h1 {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.page-header p {
    color: #6c757d;
}

.my-ads-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.my-ad-item {
    display: flex;
    gap: 1.5rem;
    background-color: #fff;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 1rem;
    transition: box-shadow 0.2s ease-in-out;
}

.my-ad-item:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.my-ad-item-image {
    width: 120px;
    height: 120px;
    flex-shrink: 0; /* جلوگیری از کوچک شدن عکس */
}

.my-ad-item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
}

.my-ad-item-details {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.my-ad-item-details a {
    text-decoration: none;
    color: inherit;
}

.my-ad-item-title {
    font-size: 1.2rem;
    font-weight: 600;
    margin: 0 0 0.5rem 0;
}

.my-ad-item-price {
    font-size: 1.1rem;
    font-weight: bold;
    color: #28a745; /* رنگ سبز */
    margin: 0 0 0.5rem 0;
}

.my-ad-item-timestamp {
    font-size: 0.9rem;
    color: #6c757d;
    margin-top: auto; /* تاریخ را به پایین می‌چسباند */
}

.my-ad-item-actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    justify-content: center;
}

/* ------------------------------------------------------------- */
/* --- Media Query برای دسکتاپ (صفحات با عرض بیشتر از 768px) --- */
/* ------------------------------------------------------------- */
@media (min-width: 768px) {
    .my-divar-container {
        flex-direction: row; /* چیدمان را به ردیفی (کنار هم) تغییر می‌دهد */
        align-items: flex-start; /* آیتم‌ها از بالا تراز می‌شوند */
    }

    .my-divar-sidebar {
        width: 280px; /* یک عرض ثابت برای سایدبار در نظر می‌گیریم */
        flex-shrink: 0; /* اجازه نمی‌دهیم سایدبار کوچک شود */

        /* این بخش کلیدی است: سایدبار با اسکرول صفحه حرکت می‌کند و وقتی به بالا رسید، ثابت می‌ماند */
        position: sticky;
        top: 2rem; /* فاصله از بالای صفحه بعد از چسبیدن */
    }

    .my-divar-main {
        width: 100%; /* عرض کامل فضای باقی‌مانده را می‌گیرد */
    }
}

/* static/css/style.css */

/* ---------------------------------- */
/*      استایل‌های پایه و عمومی      */
/* ---------------------------------- */

:root {
    --primary-color: #a62626; /* رنگ اصلی مشابه دیوار */
    --secondary-color: #6c757d;
    --background-color: #f8f9fa;
    --text-color: #333;
    --border-color: #dee2e6;
    --white: #fff;
    --box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    --nav-height: 65px; /* ارتفاع نوار ناوبری پایین */
}

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
}

body {
    font-family: 'Vazirmatn', sans-serif;
    direction: rtl;
    background-color: var(--background-color);
    color: var(--text-color);
    line-height: 1.6;
    /* پدینگ پایین برای اینکه محتوا زیر نوار ناوبری نرود */
    padding-bottom: calc(var(--nav-height) + 1rem); 
}

a {
    text-decoration: none;
    color: var(--primary-color);
    transition: color 0.2s ease-in-out;
}

a:hover {
    color: darken(var(--primary-color), 10%);
}

ul {
    list-style: none;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

input, button, textarea, select {
    font-family: inherit;
    font-size: 1rem;
}

.container {
    width: 100%;
    padding: 1rem;
    margin-right: auto;
    margin-left: auto;
}

.main-content {
    width: 100%;
}

.page-header {
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-color);
}

.page-header h1 {
    font-size: 1.5rem;
    font-weight: 700;
}

/* ---------------------------------- */
/*           استایل دکمه ها           */
/* ---------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border: 1px solid transparent;
    border-radius: 8px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    width: 100%; /* دکمه ها در موبایل تمام عرض باشند */
    text-align: center;
}
.btn i {
    font-size: 1.2rem;
}

.btn-primary {
    background-color: var(--primary-color);
    color: var(--white);
}
.btn-primary:hover {
    background-color: #8c2020;
}

.btn-secondary {
    background-color: var(--secondary-color);
    color: var(--white);
}
.btn-secondary:hover {
    background-color: #5a6268;
}

.btn-danger {
    background-color: #dc3545;
    color: var(--white);
}
.btn-danger:hover {
    background-color: #c82333;
}
.btn-outline {
    background-color: transparent;
    color: var(--text-color);
    border-color: var(--border-color);
}
.btn-outline:hover {
    background-color: #f1f1f1;
}

/* ---------------------------------- */
/*       نوار ناوبری پایین (موبایل)    */
/* ---------------------------------- */

.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--nav-height);
    background-color: var(--white);
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    z-index: 1000;
}

.nav-list {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 100%;
}

.nav-item, .nav-item-special {
    flex-grow: 1;
}

.nav-item a, .nav-item-special a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #888;
    font-size: 0.7rem;
    padding: 0.5rem 0;
    height: 100%;
}

.nav-item.active a {
    color: var(--primary-color);
}

.nav-item i {
    font-size: 1.5rem;
    margin-bottom: 2px;
}

.nav-item-special a {
    background-color: var(--primary-color);
    color: var(--white);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    position: relative;
    bottom: 20px;
    margin: 0 auto;
    box-shadow: 0 4px 12px rgba(166, 38, 38, 0.4);
}

.nav-item-special a i {
    font-size: 2rem;
}
.nav-item-special a span {
    font-size: 0.6rem;
    position: absolute;
    bottom: -15px;
    color: var(--text-color);
}

/* ---------------------------------- */
/*         صفحه اصلی (Home)          */
/* ---------------------------------- */

/* نوار جستجو و فیلتر */
.search-filter-bar {
    margin-bottom: 2rem;
    background: var(--white);
    padding: 0.5rem;
    border-radius: 8px;
    box-shadow: var(--box-shadow);
}

.filter-form-inline {
    display: flex;
    flex-direction: column; /* در موبایل زیر هم قرار میگیرند */
    gap: 0.5rem;
}

.filter-item {
    display: flex;
    align-items: center;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 0.5rem;
}
.filter-item i {
    color: var(--secondary-color);
    margin-left: 0.5rem;
}
.filter-item input {
    border: none;
    outline: none;
    width: 100%;
    background: transparent;
}
.filter-item input::placeholder {
    color: #aaa;
}
.price-filter input {
    text-align: center;
}
.price-filter span {
    margin: 0 0.25rem;
}
.search-item {
    flex-grow: 1; /* در دسکتاپ فضای بیشتری میگیرد */
}
.search-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--primary-color);
    padding: 0 0.5rem;
}
.search-btn i {
    font-size: 1.5rem;
}
.reset-link-inline {
    text-align: center;
    padding: 0.5rem;
    color: var(--secondary-color);
}
.divider {
    display: none; /* در موبایل جداکننده ها مخفی هستند */
}


/* شبکه نمایش آگهی ها */
.ad-grid {
    display: grid;
    /* در موبایل تک ستونه */
    grid-template-columns: 1fr; 
    gap: 1rem;
}

.ad-card-link {
    color: inherit;
    display: block;
}

.ad-card {
    background: var(--white);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: var(--box-shadow);
    transition: transform 0.2s, box-shadow 0.2s;
    display: flex; /* برای چیدمان افقی عکس و متن در موبایل */
    flex-direction: row;
    height: 120px; /* ارتفاع ثابت برای کارت ها */
}
.ad-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.ad-card-image {
    width: 120px; /* عرض ثابت عکس */
    flex-shrink: 0;
}

.ad-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* عکس کاد رو پر کنه و دفرمه نشه */
}

.ad-card-body {
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex-grow: 1;
    overflow: hidden;
}

.ad-title {
    font-size: 0.9rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ad-price {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-color);
}
.ad-meta-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.75rem;
    color: var(--secondary-color);
}
.ad-location, .ad-time {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

/* ---------------------------------- */
/*        صفحه جزئیات آگهی          */
/* ---------------------------------- */

.ad-detail-container {
    display: flex;
    flex-direction: column; /* در موبایل زیر هم */
    gap: 2rem;
}
.ad-detail-sidebar {
    width: 100%;
}
.ad-detail-image img {
    border-radius: 8px;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    margin-bottom: 1rem;
}
.ad-actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
}
.contact-info-box {
    background-color: var(--white);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1rem;
    text-align: center;
}
.phone-number {
    background-color: #e9ecef;
    padding: 0.75rem;
    border-radius: 6px;
    margin-top: 1rem;
    font-weight: 700;
    font-size: 1.2rem;
    letter-spacing: 2px;
}

.ad-detail-main h1 {
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}
.ad-timestamp {
    color: var(--secondary-color);
    font-size: 0.8rem;
    margin-bottom: 1.5rem;
}

.info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* دو ستونه در موبایل */
    gap: 1rem;
    margin-bottom: 2rem;
}
.info-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem;
}
.info-item i {
    font-size: 1.8rem;
    color: var(--secondary-color);
}
.info-item div {
    display: flex;
    flex-direction: column;
}
.info-item span {
    font-size: 0.8rem;
    color: #666;
}
.info-item strong {
    font-size: 0.95rem;
    font-weight: 700;
}

.ad-description {
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}
.ad-description h3 {
    margin-bottom: 1rem;
}

/* ---------------------------------- */
/*          صفحه دیوار من           */
/* ---------------------------------- */

.my-divar-container {
    display: flex;
    flex-direction: column; /* چیدمان ستونی در موبایل */
    gap: 2rem;
}

.my-divar-sidebar {
    background-color: var(--white);
    border-radius: 8px;
    padding: 1rem;
    box-shadow: var(--box-shadow);
}
.user-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
    font-weight: 500;
}
.user-info i {
    font-size: 2rem;
    color: var(--secondary-color);
}
.my-divar-menu ul {
    display: flex; /* منو در موبایل افقی باشه */
    justify-content: space-around;
}
.my-divar-menu a {
    display: flex;
    flex-direction: column; /* آیکون بالای متن */
    align-items: center;
    gap: 0.25rem;
    padding: 0.5rem;
    border-radius: 6px;
    color: var(--text-color);
    font-size: 0.8rem;
}
.my-divar-menu a.active {
    color: var(--primary-color);
    background-color: #fdeeee;
}
.my-divar-menu a i {
    font-size: 1.5rem;
}
.logout-btn {
    margin-top: 1rem;
}

.my-ad-item {
    background-color: var(--white);
    border-radius: 8px;
    box-shadow: var(--box-shadow);
    margin-bottom: 1rem;
    padding: 1rem;
    display: flex;
    gap: 1rem;
    align-items: center;
}
.my-ad-item-image {
    width: 80px;
    height: 80px;
    flex-shrink: 0;
}
.my-ad-item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
}
.my-ad-item-details {
    flex-grow: 1;
}
.my-ad-item-details a {
    color: var(--text-color);
}
.my-ad-item-title {
    font-size: 1rem;
    font-weight: 500;
    margin-bottom: 0.25rem;
}
.my-ad-item-price {
    font-size: 0.9rem;
    margin-bottom: 0.25rem;
}
.my-ad-item-timestamp {
    font-size: 0.75rem;
    color: var(--secondary-color);
}
.my-ad-item-actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.my-ad-item-actions .btn-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
}


/* ---------------------------------- */
/*    بخش ریسپانسیوسازی (Media Queries) */
/* ---------------------------------- */

/* تبلت و صفحات بزرگتر (عرض 768 پیکسل به بالا) */
@media (min-width: 768px) {
    .container {
        max-width: 720px;
    }
    
    body {
        /* در دسکتاپ نوار ناوبری پایین نداریم، پس پدینگ اضافه رو برمیداریم */
        padding-bottom: 1rem; 
    }

    .bottom-nav {
        display: none; /* نوار ناوبری پایین در دسکتاپ مخفی است */
    }

    /* صفحه اصلی */
    .filter-form-inline {
        flex-direction: row; /* نوار جستجو افقی می شود */
        align-items: center;
    }
    .filter-item {
        border: none;
        padding: 0;
    }
    .filter-item input {
        padding: 0.5rem;
        border: 1px solid var(--border-color);
        border-radius: 6px;
    }
    .reset-link-inline {
        margin-right: auto; /* دکمه ریست را به سمت راست هل می دهد */
    }
    .divider {
        display: block;
        width: 1px;
        height: 30px;
        background-color: var(--border-color);
        margin: 0 1rem;
    }

    .ad-grid {
        /* در تبلت سه ستونه */
        grid-template-columns: repeat(3, 1fr);
    }
    .ad-card {
        flex-direction: column; /* چیدمان کارت ها عمودی می شود */
        height: auto;
    }
    .ad-card-image {
        width: 100%;
        height: 180px; /* ارتفاع ثابت برای عکس ها */
    }

    /* صفحه جزئیات آگهی */
    .ad-detail-container {
        flex-direction: row; /* چیدمان دو ستونه */
        align-items: flex-start;
    }
    .ad-detail-sidebar {
        width: 300px; /* عرض ثابت سایدبار */
        flex-shrink: 0;
        position: sticky; /* سایدبار هنگام اسکرول ثابت بماند */
        top: 20px;
    }
    .ad-detail-main {
        flex-grow: 1;
    }

    /* صفحه دیوار من */
    .my-divar-container {
        flex-direction: row; /* چیدمان دو ستونه */
        align-items: flex-start;
        gap: 2rem;
    }
    .my-divar-sidebar {
        width: 250px;
        flex-shrink: 0;
        position: sticky; /* سایدبار هنگام اسکرول ثابت بماند */
        top: 20px;
    }
    .my-divar-menu ul {
        flex-direction: column; /* منو در دسکتاپ عمودی میشه */
        gap: 0.5rem;
    }
    .my-divar-menu a {
        flex-direction: row; /* آیکون کنار متن */
        justify-content: flex-start;
    }
    .my-divar-main {
        flex-grow: 1;
    }
    .my-ad-item-actions {
        flex-direction: row; /* دکمه های مدیریت افقی */
    }
}


/* دسکتاپ های بزرگ (عرض 992 پیکسل به بالا) */
@media (min-width: 992px) {
    .container {
        max-width: 960px;
    }

    .ad-grid {
        /* در دسکتاپ بزرگ چهار ستونه */
        grid-template-columns: repeat(4, 1fr);
    }
}

/* دسکتاپ های خیلی بزرگ (عرض 1200 پیکسل به بالا) */
@media (min-width: 1200px) {
    .container {
        max-width: 1140px;
    }
}

/* static/css/my_divar.css (نسخه نهایی و اصلاح شده) */

/* ------------------------------------------------------------------ */
/* --- استایل‌های اصلی (Mobile First) --- */
/* این استایل‌ها برای همه اندازه‌های صفحه اعمال می‌شوند، مگر اینکه در مدیا کوئری بازنویسی شوند */
/* ------------------------------------------------------------------ */

.my-divar-container {
    display: flex;
    flex-direction: column; /* چیدمان ستونی برای موبایل (سایدبار بالا، محتوا پایین) */
    gap: 1.5rem;
    padding: 1rem;
    max-width: 1200px;
    margin: 1rem auto;
}

/* --- استایل سایدبار برای موبایل --- */
.my-divar-sidebar {
    /* 
     * این بخش کلیدی‌ترین قسمت برای حل مشکل شماست.
     * ما به صورت پیش‌فرض (موبایل) هرگونه position خاص را لغو می‌کنیم.
    */
    position: static !important; /* سایدبار را به یک عنصر عادی در جریان صفحه تبدیل می‌کند */
    width: 100%; /* تمام عرض را در موبایل اشغال می‌کند */
    top: auto; /* مقدار top را ریست می‌کند */
    
    background-color: #f8f9fa;
    padding: 1.5rem;
    border-radius: 8px;
    border: 1px solid #dee2e6;
    display: flex;
    flex-direction: column;
    height: fit-content; /* ارتفاع متناسب با محتوا */
}

/* استایل‌های داخلی سایدبار (منو، اطلاعات کاربر و ...) */
.my-divar-sidebar .user-info {
    display: flex; align-items: center; gap: 10px; font-size: 1.1rem;
    font-weight: bold; padding-bottom: 1.5rem; border-bottom: 1px solid #e9ecef;
    margin-bottom: 1rem;
}
.my-divar-sidebar .user-info i { font-size: 2rem; color: #495057; }
.my-divar-menu ul { list-style: none; padding: 0; margin: 0; }
.my-divar-menu a {
    display: flex; align-items: center; gap: 12px; padding: 12px 15px; border-radius: 6px;
    text-decoration: none; color: #343a40; transition: all 0.2s ease-in-out; margin-bottom: 5px;
}
.my-divar-menu a:hover { background-color: #e9ecef; }
.my-divar-menu a.active { background-color: #0d6efd; color: #fff; font-weight: 500; }
.my-divar-menu a i { font-size: 1.4rem; }
.my-divar-sidebar .logout-btn {
    margin-top: auto; /* دکمه خروج را به پایین می‌چسباند */
    width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px;
}

/* --- استایل محتوای اصلی و کارت‌های آگهی --- */
.my-divar-main { flex-grow: 1; }
.page-header { margin-bottom: 2rem; padding-bottom: 1rem; border-bottom: 1px solid #e0e0e0; }
.page-header h1 { font-size: 1.8rem; margin-bottom: 0.5rem; }
.page-header p { color: #6c757d; }
.my-ads-list { display: flex; flex-direction: column; gap: 1.5rem; }
.my-ad-item {
    display: flex; gap: 1rem; background-color: #fff; border: 1px solid #dee2e6;
    border-radius: 8px; padding: 1rem; transition: box-shadow 0.2s ease-in-out;
    flex-direction: column; /* چیدمان ستونی برای کارت‌ها در موبایل */
}
.my-ad-item:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
.my-ad-item-image { width: 100%; height: 180px; flex-shrink: 0; }
.my-ad-item-image img { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; }
.my-ad-item-details { flex-grow: 1; display: flex; flex-direction: column; }
.my-ad-item-details a { text-decoration: none; color: inherit; }
.my-ad-item-title { font-size: 1.2rem; font-weight: 600; margin: 0.5rem 0; }
.my-ad-item-price { font-size: 1.1rem; font-weight: bold; color: #28a745; margin: 0 0 0.5rem 0; }
.my-ad-item-timestamp { font-size: 0.9rem; color: #6c757d; margin-top: auto; }
.my-ad-item-actions { display: flex; gap: 0.5rem; justify-content: flex-end; margin-top: 1rem; }

/* ------------------------------------------------------------------ */
/* --- استایل‌های دسکتاپ --- */
/* این استایل‌ها فقط برای صفحاتی با عرض 768 پیکسل یا بیشتر اعمال می‌شوند */
/* ------------------------------------------------------------------ */
@media (min-width: 768px) {
    .my-divar-container {
        flex-direction: row; /* چیدمان به ردیفی (کنار هم) تغییر می‌کند */
        gap: 2rem;
        margin: 2rem auto;
    }

    .my-divar-sidebar {
        /* در دسکتاپ، رفتار sticky را دوباره فعال می‌کنیم */
        position: sticky !important;
        top: 2rem; /* فاصله از بالا بعد از چسبیدن */
        width: 280px; /* یک عرض ثابت برای سایدبار */
        flex-shrink: 0; /* جلوگیری از کوچک شدن سایدبار */
    }

    /* بازگرداندن استایل کارت آگهی به حالت دسکتاپ */
    .my-ad-item {
        flex-direction: row;
    }
    .my-ad-item-image {
        width: 120px;
        height: 120px;
    }
    .my-ad-item-title { margin-top: 0; }
    .my-ad-item-actions { flex-direction: column; justify-content: center; margin-top: 0; }
}

/* static/css/ad_detail.css */

/* ------------------------------------------------------------------ */
/* --- استایل‌های اصلی (Mobile First) --- */
/* این استایل‌ها برای همه اندازه‌های صفحه اعمال می‌شوند (پیش‌فرض موبایل است) */
/* ------------------------------------------------------------------ */

/* یک کانتینر برای کل صفحه جزئیات آگهی */
.ad-detail-container {
    display: flex;
    flex-direction: column; /* چیدمان ستونی برای موبایل (محتوا و سایدبار زیر هم) */
    gap: 1.5rem;
    padding: 1rem;
    max-width: 1200px;
    width: 100%;
    margin: 1rem auto;
}

/* --- استایل سایدبار برای موبایل --- */
.ad-detail-sidebar {
    /* 
     * این بخش کلیدی‌ترین قسمت برای حل مشکل شماست.
     * ما به صورت پیش‌فرض (موبایل) هرگونه position خاص را لغو می‌کنیم.
    */
    position: static !important; /* سایدبار را به یک عنصر عادی در جریان صفحه تبدیل می‌کند */
    width: 100%;
    top: auto; /* ریست کردن فاصله از بالا */

    /* استایل‌های ظاهری سایدبار */
    border: 1px solid #dee2e6;
    background-color: #fff;
    border-radius: 8px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem; /* فاصله بین المان‌های داخلی سایدبار */
}

.ad-detail-image {
    width: 100%;
    height: 250px; /* یک ارتفاع مناسب برای تصویر در موبایل */
    border-radius: 6px;
    overflow: hidden; /* اطمینان از اینکه تصویر از گوشه‌های گرد بیرون نمی‌زند */
}

.ad-detail-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* تصویر را به بهترین شکل ممکن در کادر جای می‌دهد */
}

/* استایل دکمه‌ها و بخش‌های دیگر سایدبار */
.ad-actions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
}

.btn { /* استایل پایه برای دکمه‌ها */
    width: 100%;
    padding: 12px;
    border-radius: 6px;
    border: 1px solid transparent;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.btn-danger { background-color: #dc3545; color: white; }
.btn-danger:hover { background-color: #c82333; }
.btn-outline { border-color: #6c757d; color: #6c757d; background-color: transparent; }
.btn-outline:hover { background-color: #f1f1f1; }
.btn-primary { background-color: #0d6efd; color: white; }
.btn-primary:hover { background-color: #0b5ed7; }

.contact-info-box {
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 1rem;
    background-color: #f8f9fa;
    text-align: center;
}
.contact-info-box h4 {
    margin-top: 0;
    margin-bottom: 1rem;
}
.phone-number {
    background-color: #e9ecef;
    padding: 10px;
    border-radius: 6px;
    font-size: 1.2rem;
    font-weight: bold;
    letter-spacing: 2px;
    margin-top: 0.5rem;
}


/* ------------------------------------------------------------------ */
/* --- استایل‌های دسکتاپ --- */
/* این استایل‌ها فقط برای صفحاتی با عرض 992 پیکسل یا بیشتر اعمال می‌شوند */
/* ------------------------------------------------------------------ */
@media (min-width: 992px) {
    .ad-detail-container {
        flex-direction: row; /* چیدمان ردیفی (سایدبار و محتوا کنار هم) */
        align-items: flex-start; /* المان‌ها از بالا تراز شوند */
        gap: 2rem;
    }

    .ad-detail-sidebar {
        /* در دسکتاپ، رفتار sticky را دوباره فعال می‌کنیم */
        position: sticky !important;
        top: 2rem; /* فاصله از بالای صفحه بعد از چسبیدن */
        width: 320px; /* یک عرض ثابت برای سایدبار در دسکتاپ */
        flex-shrink: 0; /* جلوگیری از کوچک شدن سایدبار */
    }

    .ad-detail-image {
        height: 200px; /* تنظیم ارتفاع تصویر برای دسکتاپ */
    }

    /* این بخش برای محتوای اصلی است که باید در HTML شما وجود داشته باشد */
    .ad-detail-main {
        flex-grow: 1; /* باعث می‌شود محتوای اصلی باقی‌مانده فضا را پر کند */
    }
}