/**
 * footerpage.css - استایل مشترک صفحه‌های «قوانین و مقررات» و «درباره ما»
 *                 (پوشه includes/headerorfooter/footer)
 *
 * هر دو صفحه با این خط بارگذاری می‌شوند:
 *   $pageStyles = ['footerpage.css'];
 * و این فایل فقط با متغیرهای رنگ تعریف‌شده در includes/headerorfooter/header.php کار می‌کند
 * (--green-*، --red-*، --gray-*، --white، --radius، --shadow) تا پالت سبز/قرمز سایت حفظ شود.
 * همه کلاس‌ها پیشوند «footerpage-» دارند (هم‌الگو با auth.css و mypersonalpage.css).
 *
 * بخش‌ها:
 *   ۱) چیدمان کلی و مسیر راهنما (.footerpage-wrap / .footerpage-breadcrumb)
 *   ۲) کارت سرصفحه (.footerpage-hero / .footerpage-title / .footerpage-sub)
 *   ۳) کارت متن و فهرست شماره‌دار قوانین (.footerpage-card / .footerpage-item)
 *   ۴) جعبه تأکید «خدمات رایگان» و جعبه یادآوری پذیرش قوانین
 *   ۵) دکمه‌های پایین صفحه (.footerpage-btn)
 *   ۶) موبایل (۶۴۰px) و حالت prefers-reduced-motion
 */

/* ---------- ۱) چیدمان کلی و مسیر راهنما ---------- */
.footerpage-wrap {
    max-width: 880px;
    padding-bottom: 10px;
}

.footerpage-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 14px;
    font-size: .82rem;
    color: var(--gray-600);
}

.footerpage-breadcrumb a {
    color: var(--green-700);
    text-decoration: none;
}

.footerpage-breadcrumb a:hover { text-decoration: underline; }

.footerpage-breadcrumb-sep { color: rgba(20, 83, 45, .45); }

/* ---------- ۲) کارت سرصفحه ---------- */
.footerpage-hero {
    position: relative;
    padding: 24px 24px 22px;
    background: var(--white);
    border: 1px solid rgba(20, 83, 45, .10);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
}

/* نوار رنگی سبز/قرمز بالای کارت، هم‌خوان با نوار هدر و فوتر سایت */
.footerpage-hero::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 5px;
    background: linear-gradient(90deg,
        var(--red-600) 0%, var(--red-600) 45%,
        var(--green-600) 45%, var(--green-600) 100%);
}

.footerpage-hero-head {
    display: flex;
    align-items: center;
    gap: 14px;
}

.footerpage-hero-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 16px;
    color: var(--green-700);
    background: var(--green-050);
    border: 1px solid rgba(22, 163, 74, .22);
}

.footerpage-title {
    margin: 0 0 2px;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--green-900);
    line-height: 1.6;
}

.footerpage-sub {
    margin: 0;
    font-size: .9rem;
    color: var(--gray-600);
    line-height: 1.8;
}

/* ---------- ۳) کارت متن و فهرست شماره‌دار قوانین ---------- */
.footerpage-card {
    margin: 20px 0 0;
    padding: 6px 22px 10px;
    background: var(--white);
    border: 1px solid rgba(20, 83, 45, .10);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.footerpage-card-title {
    margin: 18px 0 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--green-900);
    line-height: 1.8;
}

.footerpage-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.footerpage-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px 10px;
    border-bottom: 1px dashed rgba(20, 83, 45, .16);
    border-radius: 12px;
    transition: background-color .18s ease;
}

.footerpage-item:last-child { border-bottom: 0; }
.footerpage-item:hover { background: var(--green-050); }

/* شماره هر بند: دایره سبز کم‌رنگ + رقم فارسی */
.footerpage-item-num {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    font-size: .9rem;
    font-weight: 700;
    color: var(--green-700);
    background: var(--green-050);
    border: 1px solid rgba(22, 163, 74, .28);
}

.footerpage-item-text {
    margin: 0;
    font-size: .95rem;
    color: var(--gray-900);
    line-height: 1.95;
}

/* متن اصلی صفحه «درباره ما» (کمی بزرگ‌تر از متن بندهای قوانین) */
.footerpage-lead {
    margin: 12px 0 0;
    font-size: 1.02rem;
    color: var(--gray-900);
    line-height: 2;
}

/* ---------- ۴) جعبه تأکید و جعبه یادآوری ---------- */
.footerpage-highlight {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 18px 0 6px;
    padding: 16px 18px;
    border-radius: var(--radius);
    background: var(--green-050);
    border: 1px solid rgba(22, 163, 74, .28);
    color: var(--green-900);
    font-size: .95rem;
}

.footerpage-highlight p { margin: 0; line-height: 1.95; }

.footerpage-highlight-icon,
.footerpage-note-icon {
    flex: 0 0 auto;
    display: inline-flex;
}

.footerpage-highlight-icon { color: var(--green-600); margin-top: 3px; }

/* یادآوری پذیرش قوانین: جعبه خط‌چین قرمز کم‌رنگ */
.footerpage-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 20px 0 0;
    padding: 14px 16px;
    border-radius: var(--radius);
    background: #fef4f4;
    border: 1px dashed rgba(220, 38, 38, .35);
    color: var(--red-700);
    font-size: .85rem;
    line-height: 1.9;
}

.footerpage-note-icon { color: var(--red-600); margin-top: 2px; }

/* ---------- ۵) دکمه‌های پایین صفحه ---------- */
.footerpage-cta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin: 24px 0 0;
}

/* کلاس پایه .btn از هدر سایت می‌آید؛ این دو کلاس فقط رنگ را روی زمینه روشن تنظیم می‌کنند */
.footerpage-btn { min-width: 190px; }

.footerpage-btn--primary {
    background: var(--green-600);
    border-color: var(--green-600);
    color: var(--white);
    box-shadow: 0 4px 12px rgba(22, 163, 74, .28);
}

.footerpage-btn--primary:hover {
    background: var(--green-700);
    border-color: var(--green-700);
}

.footerpage-btn--ghost {
    background: var(--white);
    border-color: rgba(22, 163, 74, .45);
    color: var(--green-700);
}

.footerpage-btn--ghost:hover {
    background: var(--green-050);
    border-color: var(--green-600);
}

/* ---------- ۶) موبایل ---------- */
@media (max-width: 640px) {
    .footerpage-hero { padding: 20px 16px 18px; }
    .footerpage-hero-head { gap: 10px; }
    .footerpage-hero-icon { width: 44px; height: 44px; border-radius: 14px; }
    .footerpage-title { font-size: 1.25rem; }
    .footerpage-card { padding: 4px 14px 8px; }
    .footerpage-item { gap: 10px; padding: 15px 6px; }
    .footerpage-cta { flex-direction: column; gap: 10px; }
    .footerpage-btn { width: 100%; }
}

/* ---------- حالت کاهش انیمیشن (کاربران حساس به حرکت) ---------- */
@media (prefers-reduced-motion: reduce) {
    .footerpage-item,
    .footerpage-btn { transition: none; }
    .footerpage-btn:hover { transform: none; }
}