body {
    margin: 0;
    padding: 0;
    font-family: 'Vazirmatn', Tahoma, sans-serif;
    background: #f9fafc;
    color: #2d3748;
    direction: rtl;
    /* overflow: auto !important; - این خط ممکن است باعث مشکلات اسکرول در برخی موارد شود. */
    /* اگر اسکرول افقی دارید، بهتر است آن را حذف کنید یا روی 'hidden' تنظیم کنید و بعداً مدیریت کنید */
    /* برای جلوگیری از مشکلات احتمالی، اینجا آن را برداشتم. اگر لازم است، مجدداً اضافه کنید. */
}

/* کانتینر اصلی محتوا */
/* اگر فایل styles.css شما هم برای .container-gold استایل دارد، ممکن است نیاز باشد max-width آنجا را هم اصلاح کنید. */
.container-gold {
    width: 100%;
    max-width: none; /* اطمینان حاصل کنید که این کانتینر عرض را محدود نمی‌کند */
    padding: 0; /* padding را برای عناصر داخلی مدیریت می‌کنیم */
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 0; /* محتوا را در صفحه وسط‌چین می‌کند */
    margin-top: -15px;
}

/* Data Sections - کانتینرهای Grid که دو ویجت را نگه می‌دارند (مثلاً data6, data9, ...) */
.data9,
.data13,
.data16,
.data19,
.data22 {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* دو ستون با عرض مساوی */
    gap: 16px;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 20px; /* وسط‌چین کردن کل کانتینر Grid و فاصله از پایین */
    width: 100%; /* عرض کامل والد خود را می‌گیرد */
    max-width: none; /* حذف هرگونه محدودیت max-width برای این کانتینر */
    padding: 0 16px; /* پدینگ از کناره‌های صفحه برای کل مجموعه Grid */
    margin-top: 15px;
}

/* Individual Data Widgets - ویجت‌های قیمتی (مثلاً data7, data8, ...) */
.data7,
.data8,
.data10,
.data11,
.data14,
.data15,
.data17,
.data18,
.data20,
.data21,
.data23,
.data24 {
    margin: 0; /* margin اضافی حذف می‌شود، gap فضای بین را تامین می‌کند */
    width: 100%; /* عرض کامل سلول Grid خود را می‌گیرد */
    height: 310px; /* ارتفاع ثابت برای ویجت‌ها */
    background-color: #FFFFFF;
    border-radius: 25px;
    padding: 15px; /* پدینگ داخلی برای محتوای ویجت */
    box-sizing: border-box; /* padding در محاسبات عرض/ارتفاع لحاظ می‌شود */
    overflow: hidden; /* اگر محتوای ویجت بیشتر از ارتفاع 310px بود، از سرریز جلوگیری می‌کند */
}

/* Media query برای نمایش تک‌ستونی در موبایل */
@media (max-width: 767px) {
	.data6,
    .data9,
    .data13,
    .data16,
    .data19,
    .data22 {
        grid-template-columns: 1fr; /* یک ستون در موبایل */
        padding: 0 8px; /* پدینگ کمتر برای صفحات خیلی کوچک */
    }
	.data3,
	.data4,
    .data7,
    .data8,
    .data10,
    .data11,
    .data14,
    .data15,
    .data17,
    .data18,
    .data20,
    .data21,
    .data23,
    .data24 {
        height: auto; /* ارتفاع خودکار برای تطابق با محتوا */
        min-height: 180px; /* حداقل ارتفاع برای ویجت‌ها */
        margin-bottom: 10px; /* فاصله بین ویجت‌ها در حالت تک‌ستونی */
    }
}

/* سایر استایل‌ها که در API.css اصلی شما بودند و در price.html مستقیماً استفاده نشده‌اند */
/* اگر این بخش‌ها در صفحات دیگری استفاده می‌شوند، می‌توانید آن‌ها را حفظ کنید. اینجا به حالت responsive تغییر داده شدند. */

.data1 {
    display: grid;
    grid-template-columns: 1fr 350px;
    gap: 16px;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 30px;
    background-color: #FFFFFF;
    border-radius: 25px;
    width: 100%; /* یا هر مقدار مناسب دیگر */
    box-sizing: border-box;
    height: auto; /* حذف هرگونه محدودیت max-width برای این کانتینر */
    padding: 0 16px; /* پدینگ از کناره‌های صفحه برای کل مجموعه Grid */
    margin-top: 15px;
}

.data3,
.data4 {
    margin: 0; /* margin اضافی حذف می‌شود، gap فضای بین را تامین می‌کند */
    width: 100%; /* عرض کامل سلول Grid خود را می‌گیرد */
    height: 310px; /* ارتفاع ثابت برای ویجت‌ها */
    background-color: #FFFFFF;
    border-radius: 25px;
    padding: 15px; /* پدینگ داخلی برای محتوای ویجت */
    box-sizing: border-box; /* padding در محاسبات عرض/ارتفاع لحاظ می‌شود */
    overflow: hidden; /* اگر محتوای ویجت بیشتر از ارتفاع 310px بود، از سرریز جلوگیری می‌کند */
}

/* ------------ data5 (ویرایش واکنش‌گرا) ------------ */
.data5 {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* دو ستون با عرض مساوی */
    gap: 16px;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 20px; /* وسط‌چین کردن کل کانتینر Grid و فاصله از پایین */
    width: 100%; /* عرض کامل والد خود را می‌گیرد */
    max-width: none; /* حذف هرگونه محدودیت max-width برای این کانتینر */
    padding: 0 16px; /* پدینگ از کناره‌های صفحه برای کل مجموعه Grid */
}


.data5 .data3,
.data5 .data4 {
    width: 100%;
}

@media (max-width: 900px) {
  .data5 {
        grid-template-columns: 1fr; /* یک ستون در موبایل */
        padding: 0 8px; /* پدینگ کمتر برای صفحات خیلی کوچک */
     }
}

.price-online {
    box-sizing: border-box;
    height: auto;
    width: auto;
}

/* بلوک‌های price-XX که در کد اولیه شما بودند */
/* اینها به یک کلاس عمومی‌تر به نام .price-card نیاز دارند تا کد تکراری نباشد */
.price-card { /* کلاس جدید برای استایل‌های مشترک */
    height: 107px;
    background-color: #FFFFFF;
    border-radius: 25px;
    width: 100%; /* عرض منعطف */
    max-width: 220px; /* حفظ عرض اولیه به عنوان حداکثر */
    padding: 10px;
    box-sizing: border-box;
    display: flex; /* اگر محتوا داخلش نیاز به تراز دارد */
    align-items: center;
    justify-content: center;
}

/* اگر نمی‌خواهید کلاس price-card را اضافه کنید، اینها را به صورت جداگانه ویرایش کنید: */
.price-gold18,
.price-gold24,
.price-gold-old,
.price-gold-abshode,
.price-dollar,
.price-euro,
.price-pounds,
.price-AED,
.price-coin,
.price-coin-half,
.price-coin-quarter,
.price-coin-emmam,
.price-bitcoin,
.price-Ethereum,
.price-solana,
.price-Cardano {
    /* می‌توانید اینها را به .price-card تغییر دهید و استایل‌های مشترک را در آنجا بگذارید */
    height: 107px;
    background-color: #FFFFFF;
    border-radius: 25px;
    width: 400px; /* حفظ عرض اولیه به عنوان حداکثر */
    padding: 10px;
    box-sizing: border-box;
}

/* ------------ price-lineها (ویرایش واکنش‌گرا) ------------ */
.price-line1,
.price-line2,
.price-line3,
.price-line4 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    width: 100%;
    margin: 12px auto 0;
    padding: 0 clamp(12px, 4vw, 32px);
    align-items: stretch;
    justify-content: center;
}

.price-line1 > *,
.price-line2 > *,
.price-line3 > *,
.price-line4 > * {
    width: 100%;
    max-width: 100%;
    min-height: 110px;
    height: auto;
}

@media (max-width: 1024px) {
    .price-line1,
    .price-line2,
    .price-line3,
    .price-line4 {
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    }
}

@media (max-width: 768px) {
    .price-line1,
    .price-line2,
    .price-line3,
    .price-line4 {
        gap: 12px;
    }
}

@media (max-width: 520px) {
    .price-line1,
    .price-line2,
    .price-line3,
    .price-line4 {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    }
}

@media (max-width: 420px) {
    .price-line1,
    .price-line2,
    .price-line3,
    .price-line4 {
        grid-template-columns: 1fr;
        padding: 0 8px;
    }
}

.data6 {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* دو ستون با عرض مساوی */
    gap: 16px;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 20px; /* وسط‌چین کردن کل کانتینر Grid و فاصله از پایین */
    width: 100%; /* عرض کامل والد خود را می‌گیرد */
    max-width: none; /* حذف هرگونه محدودیت max-width برای این کانتینر */
    padding: 0 16px; /* پدینگ از کناره‌های صفحه برای کل مجموعه Grid */
    margin-top: 10px;
}

@media (max-width: 767px) {
    .data6 {
        grid-template-columns: 1fr; /* یک ستون در موبایل */
        padding: 0 8px; /* پدینگ کمتر برای صفحات خیلی کوچک */
    }
}

@media (max-width: 767px) {
    .data1 {
        grid-template-columns: 1fr; /* یک ستون در موبایل */
        padding: 0 8px; /* پدینگ کمتر برای صفحات خیلی کوچک */
    }
}
		
	.data26 {
    margin: 0; /* عرض کامل سلول Grid خود را می‌گیرد */
    height: 310px; /* ارتفاع ثابت برای ویجت‌ها */
    background-color: #FFFFFF;
    padding: 15px; /* پدینگ داخلی برای محتوای ویجت */
    box-sizing: border-box; /* padding در محاسبات عرض/ارتفاع لحاظ می‌شود */
    overflow: hidden;
    height: auto; /* حداقل ارتفاع برای ویجت‌ها */
    margin-bottom: 10px;
}
 .data25{
    margin: 0; /* margin اضافی حذف می‌شود، gap فضای بین را تامین می‌کند */
    width: 100%; /* عرض کامل سلول Grid خود را می‌گیرد */
    height: 310px; /* ارتفاع ثابت برای ویجت‌ها */
    background-color: #FFFFFF;
    padding: 15px; /* پدینگ داخلی برای محتوای ویجت */
    box-sizing: border-box; /* padding در محاسبات عرض/ارتفاع لحاظ می‌شود */
    overflow: hidden;
    height: auto; /* حداقل ارتفاع برای ویجت‌ها */
    margin-bottom: 10px;
}
	/* کانتینر های دو ستونی */
.data27,
.data30 {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
	width: 100%;
	padding-right: 16px;
	padding-left: 16px;
	margin-right: auto;
	margin-left: auto;
	/* ارتفاع بسته حذف شد تا اندازه با محتوا تنظیم شود */
	height: auto;
	min-width: 0px;
	min-height: 600px;
	margin-top: -10px;
	margin-bottom: -10px;
}

/* موبایل: تک ستونی */
@media (max-width: 767px) {
    .data27,
    .data30 {
        grid-template-columns: 1fr;
        padding: 0 8px;
    }
}

/* باکس‌های داخلی data27 و data30 */
.data28,
.data29,
.data31,
.data32 {
	width: 100%;
	border-radius: 25px;
	box-sizing: border-box;
	overflow: hidden;
	/* ارتفاع انعطاف‌پذیر مثل اخبار */
	height: auto;
	min-height: 310px;
}

/* موبایل */
@media (max-width: 767px) {
    .data28,
    .data29,
    .data31,
    .data32 {
	height: auto;
	min-height: 510px;
	margin-bottom: 12px;
    }
}