/*
 * هاب «حساب من» (includes/class-account-hub.php): صفحه مهمان /my-account/ و پایین داشبورد پنل.
 * فهرست پیوند مثل صفحه تنظیمات اپ: کارت با حاشیه، ردیف ۵۲ پیکسلی با کاشی آیکن و پیکان.
 * وزن دوکلاسه عمدی است: قانون لینک و عنوان کیت قالب (۰،۱،۱) را می‌برد.
 */

.fap-hub {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 640px;
    margin: 0 auto;
    padding: 16px 16px 32px;
}

.fap-hub .fap-hub-login {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    padding: 18px;
    background: var(--fap-c-surface, #fff);
    border: 1px solid var(--fap-c-line, #e0e8e9);
    border-radius: var(--fap-r-lg, 16px);
}

.fap-hub .fap-hub-login__ico {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--fap-brand-50, #eef8f6);
    color: var(--fap-brand-600, #0d8276);
}

.fap-hub .fap-hub-login__title {
    margin: 0 0 4px;
    color: var(--fap-c-ink, #13292d);
    font-size: var(--fap-fs-lg, 16px);
    font-weight: 700;
    line-height: 1.5;
}

.fap-hub .fap-hub-login__desc {
    margin: 0;
    color: var(--fap-c-muted, #566a6e);
    font-size: var(--fap-fs-sm, 13px);
    line-height: 1.8;
}

.fap-hub .fap-hub-login .fap-btn {
    grid-column: 1 / -1;
}

.fap-hub-group {
    overflow: hidden;
    background: var(--fap-c-surface, #fff);
    border: 1px solid var(--fap-c-line, #e0e8e9);
    border-radius: var(--fap-r-lg, 16px);
}

.fap-hub-group .fap-hub-group__title {
    margin: 0;
    padding: 14px 16px 4px;
    color: var(--fap-c-muted, #566a6e);
    font-size: var(--fap-fs-sm, 13px);
    font-weight: 700;
    line-height: 1.6;
}

/* بی پدینگ پایین: زمینه هاور آخرین ردیف تا لبه گرد کارت می‌رسد (قبلا یک نوار سفید ۴ پیکسلی زیرش می‌ماند) */
.fap-hub-group .fap-hub-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.fap-hub-list > li {
    margin: 0;
}

.fap-hub-list > li + li {
    border-top: 1px solid var(--fap-c-line-soft, #edf2f2);
}

.fap-hub-list .fap-hub-row {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 52px;
    padding: 6px 16px;
    color: var(--fap-c-ink, #13292d);
    font-size: var(--fap-fs-md, 14px);
    font-weight: 500;
    line-height: 1.5;
    text-decoration: none;
    transition: background-color .15s;
}

.fap-hub-list .fap-hub-row:hover {
    background: var(--fap-c-bg-soft, #f8fafa);
    color: var(--fap-c-ink, #13292d);
}

.fap-hub-list .fap-hub-row:focus-visible {
    outline: 2px solid var(--fap-brand-600, #0d8276);
    outline-offset: -2px;
}

.fap-hub-list .fap-hub-row__ico {
    display: flex;
    flex: 0 0 36px;
    align-items: center;
    justify-content: center;
    height: 36px;
    border-radius: var(--fap-r-sm, 10px);
    background: var(--fap-brand-50, #eef8f6);
    color: var(--fap-brand-600, #0d8276);
}

.fap-hub-list .fap-hub-row__label {
    flex: 1 1 auto;
    min-width: 0;
}

.fap-hub-list .fap-hub-row__go {
    display: flex;
    color: var(--fap-c-faint, #98aaae);
}

/*
 * دسکتاپ، فقط صفحه مهمان (.fap-hub؛ پایین داشبورد پنل همان فهرست می‌ماند): ستون باریک ۶۴۰ با ردیف‌های
 * بلند جای خالی می‌ساخت. کارت ورود یک نوار (آیکن، متن، دکمه)، خدمات کاشی‌های چهارستونه و صفحه‌های
 * فرمولا یک ردیف کاشی کوتاه. کاشی کلیک‌خور فقط حاشیه brand-200 می‌گیرد (قاعده ۵).
 */
@media (min-width: 1024px) {
    .fap-hub {
        gap: 28px;
        max-width: 1080px;
        padding: 32px 16px 64px;
    }

    .fap-hub .fap-hub-login {
        grid-template-columns: auto minmax(0, 1fr) auto;
        gap: 20px;
        padding: 24px 28px;
    }

    .fap-hub .fap-hub-login__ico {
        width: 60px;
        height: 60px;
    }

    .fap-hub .fap-hub-login__title {
        font-size: var(--fap-fs-xl, 18px);
        font-weight: 800;
    }

    .fap-hub .fap-hub-login__desc {
        font-size: var(--fap-fs-md, 14px);
    }

    .fap-hub .fap-hub-login .fap-btn {
        grid-column: auto;
        min-width: 200px;
    }

    .fap-hub .fap-hub-group {
        overflow: visible;
        background: none;
        border: 0;
        border-radius: 0;
    }

    .fap-hub .fap-hub-group .fap-hub-group__title {
        padding: 0 0 12px;
        color: var(--fap-c-ink, #13292d);
        font-size: var(--fap-fs-lg, 16px);
        font-weight: 800;
    }

    .fap-hub .fap-hub-group .fap-hub-list {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 12px;
    }

    .fap-hub .fap-hub-group--site .fap-hub-list {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .fap-hub .fap-hub-list > li + li {
        border-top: 0;
    }

    .fap-hub .fap-hub-list .fap-hub-row {
        height: 100%;
        padding: 16px;
        background: var(--fap-c-surface, #fff);
        border: 1px solid var(--fap-c-line, #e0e8e9);
        border-radius: var(--fap-r-lg, 16px);
        transition: border-color .15s, background-color .15s;
    }

    .fap-hub .fap-hub-group--services .fap-hub-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
        min-height: 124px;
        font-weight: 700;
    }

    .fap-hub .fap-hub-group--services .fap-hub-row__ico {
        flex-basis: 44px;
        width: 44px;
        height: 44px;
        border-radius: var(--fap-r-md, 12px);
    }

    .fap-hub .fap-hub-list .fap-hub-row:hover {
        border-color: var(--fap-brand-200, #c6e9e4);
        background: var(--fap-c-surface, #fff);
    }

    .fap-hub .fap-hub-list .fap-hub-row:focus-visible {
        outline-offset: 2px;
    }

    .fap-hub .fap-hub-list .fap-hub-row__go {
        display: none;
    }
}

/* پایین داشبورد پنل */
.fap-hub-more {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 16px;
}

/* «نصب اپ فرمولا» (Account_Hub::render_groups، اپ وب): همان ردیف، ولی دکمه؛ پنهان تا fap-pwa.js */
.fap-hub-group--app[hidden] { display: none; }
.fap-hub-list button.fap-hub-row {
    width: 100%;
    margin: 0;
    border: 0;
    background: none;
    font-family: inherit;
    text-align: start;
    white-space: normal; /* ریست دکمه قالب یک‌خطی است و توضیح از کارت بیرون می‌زد */
    cursor: pointer;
}
.fap-hub-list .fap-hub-row__label small {
    display: block;
    color: var(--fap-c-muted, #566a6e);
    font-size: var(--fap-fs-xs, 12px);
    font-weight: 400;
}
@media (min-width: 1024px) {
    /* یک ردیف تمام‌عرض، نه یک کاشی تنها در شبکه چهارستونه */
    .fap-hub .fap-hub-group--app .fap-hub-list { grid-template-columns: minmax(0, 1fr); }
}