/* =========================================================
   AI WITH EVERYONE
   Favorite Page
   ========================================================= */


/* =========================================================
   Variables
   Keep aligned with product.css / category.css
   ========================================================= */

:root {
    --aiwe-favorite-text: #1f2937;
    --aiwe-favorite-text-secondary: #6b7280;

    --aiwe-favorite-border: #e5e7eb;
    --aiwe-favorite-border-hover: #c7d2fe;

    --aiwe-favorite-surface: #ffffff;
    --aiwe-favorite-surface-soft: #f8fafc;

    --aiwe-favorite-primary: #4f46e5;
    --aiwe-favorite-primary-soft: #eef2ff;

    --aiwe-favorite-gold: #a16207;
    --aiwe-favorite-gold-soft: #fefce8;

    --aiwe-favorite-radius: 16px;

    --aiwe-favorite-shadow:
        0 2px 8px rgba(15, 23, 42, 0.04);

    --aiwe-favorite-shadow-hover:
        0 16px 36px rgba(79, 70, 229, 0.10);
}


/* =========================================================
   Header
   ========================================================= */

.aiwe-favorite-page-header {
    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fbfcff 100%
        );

    border-bottom:
        1px solid
        var(--aiwe-favorite-border);
}


.aiwe-back-link {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        6px;

    color:
        var(--aiwe-favorite-text-secondary);

    font-size:
        0.88rem;

    text-decoration:
        none !important;

    transition:
        color 0.18s ease,
        transform 0.18s ease;
}


.aiwe-back-link:hover {
    color:
        var(--aiwe-favorite-primary);

    text-decoration:
        none !important;

    transform:
        translateX(-2px);
}


/* =========================================================
   Hero
   ========================================================= */

.aiwe-favorite-hero {
    display:
        flex;

    align-items:
        flex-start;

    gap:
        20px;

    padding:
        26px 28px;

    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #fffdf7 52%,
            #f8f7ff 100%
        );

    border:
        1px solid
        var(--aiwe-favorite-border);

    border-radius:
        var(--aiwe-favorite-radius);

    box-shadow:
        var(--aiwe-favorite-shadow);
}


.aiwe-favorite-hero-icon {
    width:
        56px;

    height:
        56px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    flex-shrink:
        0;

    color:
        var(--aiwe-favorite-gold);

    background:
        linear-gradient(
            135deg,
            #fefce8 0%,
            #fef3c7 100%
        );

    border:
        1px solid
        #fde68a;

    border-radius:
        16px;

    box-shadow:
        0 8px 20px
        rgba(161, 98, 7, 0.08);
}


.aiwe-favorite-hero-icon svg {
    width:
        26px;

    height:
        26px;

    stroke-width:
        1.8;
}


.aiwe-favorite-eyebrow {
    margin-bottom:
        8px;

    color:
        #697386;

    font-size:
        0.72rem;

    font-weight:
        700;

    letter-spacing:
        0.09em;
}


.aiwe-favorite-title {
    margin:
        0 0 10px 0;

    color:
        #111827;

    font-size:
        clamp(1.75rem, 3vw, 2.35rem);

    font-weight:
        700;

    line-height:
        1.25;
}


.aiwe-favorite-subtitle {
    margin:
        0;

    color:
        var(--aiwe-favorite-text-secondary);

    font-size:
        1rem;

    line-height:
        1.7;
}


.aiwe-favorite-note {
    max-width:
        720px;

    margin-top:
        16px;

    padding-top:
        14px;

    color:
        #4b5563;

    font-size:
        0.88rem;

    line-height:
        1.7;

    border-top:
        1px solid
        #eef0f4;
}


/* =========================================================
   Summary Card
   ========================================================= */

.aiwe-favorite-summary-card {
    position:
        relative;

    padding:
        26px;

    background:
        var(--aiwe-favorite-surface);

    border:
        1px solid
        var(--aiwe-favorite-border);

    border-radius:
        var(--aiwe-favorite-radius);

    box-shadow:
        var(--aiwe-favorite-shadow);

    overflow:
        hidden;
}


.aiwe-favorite-summary-card::after {
    content:
        "";

    position:
        absolute;

    width:
        140px;

    height:
        140px;

    right:
        -55px;

    bottom:
        -70px;

    background:
        radial-gradient(
            circle,
            rgba(161, 98, 7, 0.10) 0%,
            rgba(161, 98, 7, 0) 70%
        );

    pointer-events:
        none;
}


.aiwe-summary-icon {
    width:
        40px;

    height:
        40px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    margin-bottom:
        18px;

    color:
        var(--aiwe-favorite-gold);

    background-color:
        var(--aiwe-favorite-gold-soft);

    border-radius:
        12px;
}


.aiwe-summary-icon svg {
    width:
        20px;

    height:
        20px;
}


.aiwe-summary-title {
    color:
        #111827;

    font-size:
        1.05rem;

    font-weight:
        700;
}


.aiwe-summary-text {
    margin-top:
        8px;

    color:
        var(--aiwe-favorite-text-secondary);

    font-size:
        0.88rem;

    line-height:
        1.6;
}


/* =========================================================
   List Section
   ========================================================= */

.aiwe-favorite-list-section {
    background:
        #f8fafc;
}


.aiwe-section-heading {
    margin-bottom:
        26px;
}


/* =========================================================
   Favorite Cards
   favorite.js creates Bootstrap .card elements
   ========================================================= */

#favoriteList .card {
    position:
        relative;

    color:
        var(--aiwe-favorite-text);

    background:
        var(--aiwe-favorite-surface);

    border:
        1px solid
        var(--aiwe-favorite-border);

    border-radius:
        var(--aiwe-favorite-radius);

    box-shadow:
        var(--aiwe-favorite-shadow);

    overflow:
        hidden;

    margin-top:
        4px;

    margin-bottom:
        14px;

    height:
        calc(100% - 18px) !important;

    transition:
        transform 0.22s ease,
        box-shadow 0.22s ease,
        border-color 0.22s ease,
        background 0.22s ease;
}


#favoriteList .card:hover {
    border-color:
        var(--aiwe-favorite-border-hover);

    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #f8faff 60%,
            #f3f4ff 100%
        );

    box-shadow:
        var(--aiwe-favorite-shadow-hover);

    transform:
        translateY(-4px);
}


#favoriteList .card::before {
    content:
        "";

    position:
        absolute;

    left:
        0;

    top:
        0;

    width:
        3px;

    height:
        100%;

    background:
        linear-gradient(
            180deg,
            #f59e0b 0%,
            #c4b5fd 100%
        );

    opacity:
        0;

    transition:
        opacity 0.22s ease;
}


#favoriteList .card:hover::before {
    opacity:
        1;
}


#favoriteList .card-body {
    padding:
        24px;
}


.aiwe-favorite-task-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}


.aiwe-favorite-access-badge {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 4px 9px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}


.aiwe-favorite-access-trial {
    color: #3730a3;
    background: #eef2ff;
    border: 1px solid #c7d2fe;
}


.aiwe-favorite-access-preview {
    color: #475569;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}


#favoriteList .aiwe-task-number {
    display:
        inline-flex;

    align-items:
        center;

    min-height:
        28px;

    padding:
        4px 10px;

    color:
        var(--aiwe-favorite-primary);

    background-color:
        var(--aiwe-favorite-primary-soft);

    border:
        1px solid
        #dfe3ff;

    border-radius:
        999px;

    font-size:
        0.75rem;

    font-weight:
        700;

    letter-spacing:
        0.04em;
}


#favoriteList h2 {
    color:
        #111827;

    line-height:
        1.45;
}


#favoriteList p {
    line-height:
        1.7;
}


/* =========================================================
   Favorite Card Buttons
   ========================================================= */

#favoriteList .btn-dark {
    color:
        #ffffff;

    background:
        linear-gradient(
            135deg,
            #4f46e5 0%,
            #6366f1 100%
        );

    border-color:
        #4f46e5;

    border-radius:
        10px;

    font-size:
        0.86rem;

    font-weight:
        600;

    box-shadow:
        none;

    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        background 0.18s ease;
}


#favoriteList .btn-dark:hover {
    color:
        #ffffff;

    background:
        linear-gradient(
            135deg,
            #4338ca 0%,
            #5b5bd6 100%
        );

    border-color:
        #4338ca;

    box-shadow:
        0 8px 18px
        rgba(79, 70, 229, 0.18);

    transform:
        translateY(-1px);
}


#favoriteList .btn-outline-secondary {
    color:
        #6b7280;

    background:
        #ffffff;

    border-color:
        #e5e7eb;

    border-radius:
        10px;

    font-size:
        0.84rem;

    font-weight:
        500;

    transition:
        color 0.18s ease,
        background-color 0.18s ease,
        border-color 0.18s ease;
}


#favoriteList .btn-outline-secondary:hover {
    color:
        #92400e;

    background:
        #fffbeb;

    border-color:
        #fcd34d;
}


/* =========================================================
   Empty State
   ========================================================= */

.aiwe-favorite-empty {
    padding:
        58px 24px;

    text-align:
        center;

    color:
        var(--aiwe-favorite-text-secondary);

    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #fbfcff 100%
        );

    border:
        1px dashed
        #d7dce5;

    border-radius:
        var(--aiwe-favorite-radius);
}


.aiwe-favorite-empty-icon {
    width:
        58px;

    height:
        58px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    margin-bottom:
        18px;

    color:
        #a16207;

    background:
        #fefce8;

    border:
        1px solid
        #fde68a;

    border-radius:
        16px;
}


.aiwe-favorite-empty-icon svg {
    width:
        26px;

    height:
        26px;

    stroke-width:
        1.7;
}


/* =========================================================
   Focus
   ========================================================= */

.aiwe-back-link:focus-visible,
#favoriteList .btn:focus-visible {
    outline:
        3px solid
        rgba(79, 70, 229, 0.16);

    outline-offset:
        3px;
}


/* =========================================================
   Reduced Motion
   ========================================================= */

@media
(prefers-reduced-motion: reduce) {

    .aiwe-back-link,
    #favoriteList .card,
    #favoriteList .btn {

        transition:
            none;
    }


    .aiwe-back-link:hover,
    #favoriteList .card:hover,
    #favoriteList .btn:hover {

        transform:
            none;
    }
}


/* =========================================================
   Tablet / Mobile
   ========================================================= */

@media
(max-width: 991.98px) {

    .aiwe-favorite-hero,
    .aiwe-favorite-summary-card {
        min-height:
            auto;
    }
}


@media
(max-width: 767.98px) {

    .aiwe-favorite-hero {
        padding:
            22px;

        gap:
            16px;
    }


    .aiwe-favorite-hero-icon {
        width:
            50px;

        height:
            50px;

        border-radius:
            14px;
    }


    .aiwe-favorite-hero-icon svg {
        width:
            23px;

        height:
            23px;
    }


    .aiwe-favorite-summary-card {
        padding:
            22px;
    }


    #favoriteList .card-body {
        padding:
            20px;
    }


    .aiwe-section-heading {
        margin-bottom:
            20px;
    }
}


/* =========================================================
   Small Mobile
   ========================================================= */

@media
(max-width: 575.98px) {

    .aiwe-favorite-hero {
        display:
            block;
    }


    .aiwe-favorite-hero-icon {
        margin-bottom:
            16px;
    }


    .aiwe-favorite-title {
        font-size:
            1.65rem;
    }


    #favoriteList .d-flex.gap-2 {
        flex-direction:
            column;
    }


    #favoriteList .btn {
        width:
            100%;
    }
}


/* =========================================================
   Bootstrap 5.3 Color Modes
   ========================================================= */

[data-bs-theme="dark"] {
    --aiwe-favorite-text: #e5e7eb;
    --aiwe-favorite-text-secondary: #94a3b8;
    --aiwe-favorite-border: #334155;
    --aiwe-favorite-border-hover: #6366f1;
    --aiwe-favorite-surface: #111827;
    --aiwe-favorite-surface-soft: #172033;
    --aiwe-favorite-primary: #a5b4fc;
    --aiwe-favorite-primary-soft: rgba(99, 102, 241, 0.16);
    --aiwe-favorite-gold: #fde68a;
    --aiwe-favorite-gold-soft: rgba(245, 158, 11, 0.12);
    --aiwe-favorite-shadow: 0 2px 8px rgba(0, 0, 0, 0.20);
    --aiwe-favorite-shadow-hover: 0 16px 36px rgba(0, 0, 0, 0.30);
}

[data-bs-theme="dark"] .aiwe-favorite-page-header {
    background: linear-gradient(
        180deg,
        #111827 0%,
        #0f172a 100%
    );
}

[data-bs-theme="dark"] .aiwe-favorite-hero {
    background: linear-gradient(
        135deg,
        #111827 0%,
        #171a24 52%,
        #172033 100%
    );
}

[data-bs-theme="dark"] .aiwe-favorite-hero-icon,
[data-bs-theme="dark"] .aiwe-favorite-empty-icon {
    color: #fde68a;
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(250, 204, 21, 0.32);
}

[data-bs-theme="dark"] .aiwe-favorite-title,
[data-bs-theme="dark"] .aiwe-summary-title,
[data-bs-theme="dark"] #favoriteList h2 {
    color: #f8fafc;
}

[data-bs-theme="dark"] .aiwe-favorite-list-section {
    background: #0f172a;
}

[data-bs-theme="dark"] .aiwe-favorite-summary-card,
[data-bs-theme="dark"] #favoriteList .card,
[data-bs-theme="dark"] .aiwe-favorite-empty {
    background: var(--aiwe-favorite-surface);
    border-color: var(--aiwe-favorite-border);
    color: var(--aiwe-favorite-text);
}

[data-bs-theme="dark"] #favoriteList .card:hover {
    background: linear-gradient(
        135deg,
        #111827 0%,
        #172033 100%
    );
    border-color: var(--aiwe-favorite-border-hover);
}

[data-bs-theme="dark"] .aiwe-favorite-access-trial {
    color: #c7d2fe;
    background: rgba(99, 102, 241, 0.16);
    border-color: rgba(129, 140, 248, 0.42);
}

[data-bs-theme="dark"] .aiwe-favorite-access-preview {
    color: #cbd5e1;
    background: #172033;
    border-color: #334155;
}

[data-bs-theme="dark"] #favoriteList .btn-outline-secondary {
    color: #cbd5e1;
    background: #111827;
    border-color: #475569;
}

[data-bs-theme="dark"] #favoriteList .btn-outline-secondary:hover {
    color: #fde68a;
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(250, 204, 21, 0.42);
}