/* کانتینر اصلی صفحه قوانین */
.rules-page {
    width: 100% !important; /* به صورت پیش‌فرض تمام عرض موجود را بگیرد */
    max-width: 800px !important; /* اما در دسکتاپ از 800 پیکسل بیشتر نشود */
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 20px !important;
    direction: rtl;
    background: #f9f9f9;
    border-radius: 20px;
    box-sizing: border-box;
}

/* تیتر ها */
.rules-page h2, 
.rules-page h3 {
    text-align: center !important;
    font-size: 19px !important;
    font-weight: 800 !important;
    color: #8d1b50 !important;
    margin: 20px 0 10px !important;
    transition: color 0.3s ease;
}

/* باکس مقدمه - متمایز و شیک */
.rules-page p:first-of-type {
    background: #FCFDFF !important; /* یک تم رنگی بسیار ملایم یاسی برای تمایز */
    border: 1px dashed #d8b4c4 !important; /* حاشیه نقطه‌چین بنفش روشن */
    border-radius: 20px !important;
    padding: 25px 35px !important;
    color: #666 !important;
    font-size: 15px !important;
    text-align: center !important;
    line-height: 1.9 !important;
    margin-bottom: 0px !important;
    box-shadow: inset 0 0 15px rgba(255,255,255,0.5) !important;
    position: relative;
}

/* کارت‌های قوانین - استایل تمیز */
.rules-page p:not(:first-of-type) {
    background: #ffffff !important;
    border-radius: 20px !important;
    padding: 30px !important;
    margin-bottom: 0px !important;
    color: #444 !important;
    line-height: 2 !important;
    font-size: 15.5px !important;
    text-align: center !important;
    
    border: 1px solid #eee !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.02) !important;
    
    /* ترنزیشن نرم‌تر */
    transition: all 0.3s ease !important;
    cursor: default;
}

/* افکت هاور ملایم و حرفه‌ای */
.rules-page p:not(:first-of-type):hover {
    transform: translateY(-4px); /* ارتفاع کمتر برای هاور */
    box-shadow: 0 12px 25px rgba(141, 27, 80, 0.1) !important; /* سایه با ته رنگ بنفش برند */
    border-color: #8d1b50 !important;
    background: #fff !important;
}

/* مخصوص حل مشکل باکس تسویه حساب (پاپ‌آپ) */
/* رفع مشکل پدینگ در باکس تسویه حساب و موبایل */
@media screen and (max-width: 600px) {
    .rules-page {
        padding: 0 !important; /* حذف پدینگ کانتینر اصلی در فضای کوچک */
        background: transparent !important; /* حذف پس‌زمینه خاکستری در فضای تنگ برای تمیزی بیشتر */
        width: 100% !important;
    }

    .rules-page p:first-of-type,
    .rules-page p:not(:first-of-type) {
        padding: 15px 10px !important; /* پدینگ کمتر داخل باکس‌ها */
        margin-bottom: 15px !important;
        font-size: 13px !important;
        border-radius: 10px !important; /* لبه‌های کمی تیزتر برای فضای کوچک */
    }

    .rules-page h2, 
    .rules-page h3 {
        font-size: 16px !important;
        margin-top: 15px !important;
    }
}

/* یک ترفند اضافه برای باکس‌های اسکرول‌دار تسویه حساب */
.woocommerce-checkout .rules-page {
    padding: 5px !important;
}