:root {
    --js-bg: #EDEDED;
    --js-header-bg: #2b2b2b;
    --js-primary: #008374;
    --primary: #265f5c;
    --js-primary-soft: #0aa790;
    --js-primary-dark: #026655;
    --js-accent: #F6B925;
    --js-card-bg: #ffffff;
    --js-chip-bg: #f9fafb;
    --js-border: #dddddd;
    --black: #332f2f;
    --js-border-soft: #e5e7eb;
    --js-text-main: #1f2937;
    --js-text-muted: #6b7280;
    --yellow: #f6bb26;
    --teal-light: #026655;;
    /* px ? em converted */
    --radius-lg: 1em;
    /* 16px */
    --radius-md: 0.875em;
    /* 14px */
    --radius-pill: 62.4375em;
    /* 999px */
    --shadow-soft: 0 0.125em 0.375em rgba(15, 23, 42, .05);
    --shadow-hover: 0 0.625em 1.5625em rgba(15, 23, 42, .16);
    --font-main: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    --ui-scaling: 0.8333vw;
}

/* Favourites overview dashboard */
.fav-overview-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr 1fr;
    gap: 1em;
    padding: 1em;
    background: #f8fafc;
}

.fav-overview-panel {
    background: #fff;
    border: 0.1em solid #dfe6ee;
    border-radius: 0.95em;
    overflow: hidden;
    box-shadow: 0 0.6em 1.6em rgba(15, 23, 42, 0.08);
    min-height: 20em;
}

.fav-category-panel {
    grid-column: span 2;
}

.fav-overview-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1em;
    padding: 1.2em 1.4em;
    color: #fff;
    background: #313131;
}

.fav-overview-title {
    font-size: 1.15em;
    font-weight: 900;
}

.fav-overview-icon {
    width: 2.4em;
    height: 2.4em;
    border-radius: 0.8em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--yellow);
    background: rgba(255, 255, 255, 0.08);
    flex: 0 0 auto;
}

.fav-overview-body {
    padding: 1.2em 1.4em 1.4em;
}

.fav-status-layout {
    display: grid;
    grid-template-columns: 11em 1fr;
    align-items: center;
    gap: 1.25em;
    min-height: 13.5em;
}

.fav-donut {
    width: 11em;
    aspect-ratio: 1;
    border-radius: 50%;
    display: grid;
    place-items: center;
    position: relative;
    box-shadow: inset 0 0 0 0.1em rgba(15, 23, 42, 0.05), 0 1em 2em rgba(15, 23, 42, 0.08);
}

.fav-donut::after {
    content: "";
    position: absolute;
    inset: 1.55em;
    border-radius: 50%;
    background: #fff;
    box-shadow: inset 0 0 0 0.1em #edf2f7;
}

.fav-donut > div {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    line-height: 1.1;
}

.fav-donut strong {
    font-size: 2.1em;
    font-weight: 900;
    color: #111827;
}

.fav-donut span {
    font-size: 0.85em;
    color: var(--js-text-muted);
    font-weight: 900;
}

.fav-overview-legend,
.fav-overview-row {
    display: grid;
}

.fav-overview-legend {
    gap: 0.7em;
}

.fav-overview-legend-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.65em;
    padding: 0.55em 0.7em;
    border: 0.1em solid #edf2f7;
    border-radius: 0.75em;
    background: #fbfdff;
    color: var(--js-text-main);
    font-weight: 900;
}

.fav-dot {
    width: 0.75em;
    height: 0.75em;
    border-radius: 50%;
    background: var(--js-primary);
}

.fav-dot.is-urgent { background: var(--yellow); }
.fav-dot.is-pro { background: #2563eb; }
.fav-dot.is-other { background: #a855f7; }

.fav-overview-row {
    gap: 0.55em;
    padding: 0.85em;
    border: 0.1em solid #e4eaf2;
    border-radius: 0.85em;
    background: #fff;
}

.fav-overview-row + .fav-overview-row {
    margin-top: 0.8em;
}

.fav-category-panel .fav-overview-body {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9em;
}

.fav-category-panel .fav-overview-row {
    margin-top: 0;
}

.fav-overview-row-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1em;
    min-width: 0;
    font-weight: 900;
    color: var(--js-text-main);
}

.fav-overview-row-top span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fav-overview-track {
    height: 0.65em;
    border-radius: 999px;
    background: #eef2f7;
    overflow: hidden;
}

.fav-overview-fill {
    height: 100%;
    border-radius: inherit;
    background: var(--js-primary);
}

.fav-overview-fill.is-country {
    background: #2563eb;
}

.fav-price-hero {
    padding: 1.1em;
    border-radius: 1em;
    color: #fff;
    background: linear-gradient(135deg, #006b5f 0%, #008374 58%, #0aa790 100%);
    box-shadow: 0 0.8em 1.6em rgba(0, 131, 116, 0.22);
}

.fav-price-hero span,
.fav-price-grid span {
    display: block;
    font-size: 0.86em;
    font-weight: 900;
    opacity: 0.82;
}

.fav-price-hero strong {
    display: block;
    margin-top: 0.35em;
    font-size: 1.35em;
    line-height: 1.2;
    font-weight: 900;
}

.fav-price-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75em;
    margin-top: 0.9em;
}

.fav-price-grid > div {
    padding: 0.9em;
    border: 0.1em solid #e4eaf2;
    border-radius: 0.85em;
    background: #fff;
}

.fav-price-grid strong {
    display: block;
    margin-top: 0.3em;
    font-size: 1em;
    font-weight: 900;
    color: #111827;
}

.fav-empty-overview {
    display: grid;
    place-items: center;
    min-height: 26em;
    padding: 1em;
    background: #f8fafc;
}

.fav-empty-card {
    width: min(100%, 42em);
    padding: 3em 2em;
    border: 0.1em solid #dfe6ee;
    border-radius: 1em;
    background: #fff;
    text-align: center;
    box-shadow: 0 0.6em 1.6em rgba(15, 23, 42, 0.08);
}

.fav-empty-icon {
    width: 4em;
    height: 4em;
    margin: 0 auto 1em;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--js-primary);
    background: #e9f8f5;
    font-size: 1.4em;
}

.fav-empty-card h3 {
    font-size: 1.6em;
    font-weight: 900;
    color: var(--js-text-main);
    margin-bottom: 0.35em;
}

.fav-empty-card p {
    color: var(--js-text-muted);
    font-weight: 800;
    margin-bottom: 1.3em;
}

.fav-empty-btn {
    border: 0;
    border-radius: 999px;
    padding: 0.9em 1.4em;
    background: var(--js-primary);
    color: #fff;
    font-weight: 900;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
}

.fav-sidebar-icon {
    width: 1.15em;
    height: 1.15em;
    min-width: 1.15em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: currentColor;
}

.fav-sidebar-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

@media (max-width: 650px) {
    .fav-overview-grid,
    .fav-category-panel .fav-overview-body {
        grid-template-columns: 1fr;
    }
    .fav-category-panel {
        grid-column: auto;
    }
    .fav-status-layout {
        grid-template-columns: 1fr;
        justify-items: center;
    }
    .fav-overview-legend {
        width: 100%;
    }
}


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box
}

#topLoader {
    position: fixed;
    top: 0;
    left: 0;
    height: 0.4em;
    width: 0%;
    background: var(--yellow);
    z-index: 999999;
    transition: width 0.4s ease;
}

.custom-scale-wrapper {
    font-size: var(--ui-scaling);
    width: 100%;
}

@media (max-width: 1000px) {
    .custom-scale-wrapper {
        font-size: 10px;
    }
}

@media (min-width: 7680px) {
    .custom-scale-wrapper {
        font-size: 64px;
    }
}

.ico {
    font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
}

.ico {
    font-size: 1em;
    line-height: 1;
}


html,
body {
    height: 100%
}


body {
    font-family: var(--font-main);
    background: var(--js-bg);
    color: var(--js-text-main);
    -webkit-font-smoothing: antialiased;
    font-weight: 400;
}

a {
    text-decoration: none;
    color: inherit
}


.page {
    max-width: 100%;
    margin: 0 auto;
    padding: 1.6em 1.5em 2.4em;
    padding-inline: 8em;
}

@media (max-width:767px) {
    .page {
        padding: 1.25rem 1rem 1.8rem;
        padding-top: 1em;
    }
}

/* CARDS / WELCOME */
.card {
    background: var(--js-card-bg);
    border-radius: var(--radius-lg);
    border: 1px solid var(--js-border);
    box-shadow: var(--shadow-soft);
    padding: 1.4em 1.45em;
    font-size: 1em;
    box-shadow: rgba(0, 0, 0, 0.14) 0px 0.18em 0.5em;
}

.welcome {
    margin-bottom: 1.6em;
    background: linear-gradient(135deg, var(--js-primary-dark), var(--js-primary-soft));
    color: #f9fafb;
    border-color: transparent;
    box-shadow: 0 0.6em 1.8em rgba(0, 0, 0, .25);
    position: relative;
    overflow: hidden;
    font-size: 1em;
}

.welcome::after {
    content: "";
    position: absolute;
    right: -3.75em;
    top: -2.5em;
    width: 11.25em;
    height: 11.25em;
    border-radius: 50%;
    border: 1.6em solid rgba(255, 255, 255, .06);
}

.welcome-inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.4em;
    flex-wrap: wrap;
}

.welcome-left {
    display: flex;
    align-items: center;
    gap: 1em;
    flex-wrap: wrap;
}

.welcome-badge {
    width: 2.6em;
    height: 2.6em;
    border-radius: 1.1em;
    background: rgba(255, 255, 255, .12);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8em;
}

.welcome-text h2 {
    font-size: 1.55em;
    font-weight: 700;
    margin-bottom: .2em;
}

.welcome-text p {
    color: #e5f9f7;
    font-size: 1.1em;
    max-width: 36em;
    font-weight: 400;
    margin-bottom: 0;
}

.welcome-badge i {
    font-size: 1.1em;
}


/* BUTTONS */
.btn {
    padding: 1em 2em;
    border: none;
    border-radius: 3em;
    font-size: 1.1em;
    font-weight: 600;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    cursor: pointer;
    transition: 0.16s;
    white-space: nowrap;
    box-shadow: 0 0.625em 1.375em rgba(15, 23, 42, .22);
}

.btn-primary {
    background: var(--teal-light);
    color: #fff;
    box-shadow: 0 0.25em 1em rgba(38, 95, 92, 0.3);
}

.btn-primary:hover {
    transform: translateY(-0.2em);
    opacity: 0.9;
    background: var(--teal-light);
}

.btn-primary:active {
    background-color: var(--teal-light) !important;
}

.btn-secondary {
    background: #313131;
    color: #fff;
}

.btn-secondary:hover {
    background: #313131;
    transform: translateY(-0.2em);
    opacity: 0.99999;
}

.btn-green {
    background: var(--teal-light);
    color: #fff;
}

.btn-green:hover {
    background: var(--teal-light);
    transform: translateY(-0.0625em);
    box-shadow: 0 0.75em 1.625em rgba(15, 23, 42, .28);
    color: #fff;
    opacity: 0.9;
}

.btn-ghost {
    background: #fff;
    color: var(--js-primary-dark);
    border: 0.125em solid rgba(0, 131, 116, .3);
    box-shadow: 0 0.25em 0.75em rgba(15, 23, 42, .06);
    padding: 0.8em 1.8em;
}

.btn-ghost:hover {
    border-color: var(--js-primary-dark);
    background: #f5fffd;
    color: var(--js-primary-dark);
    opacity: 0.9;
}

.btn-icon-only {
    padding: 0.65em 0.9em;
}

.actions {
    display: flex;
    gap: 0.7em;
    flex-wrap: wrap;
}

/* STATS */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14.4em, 1fr));
    gap: 1.1em;
    margin-bottom: 1.6em;
    font-size: 1em;
}

.stat-card {
    position: relative;
    overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease;
    font-size: 1em;
    background-color: rgb(255, 255, 255);
    box-shadow: rgba(0, 0, 0, 0.14) 0px 0.18em 0.5em;
    border-width: 0.2em;
    border-style: solid;
    border-color: rgba(0, 0, 0, 0.18);
    border-image: initial;
}

.stat-card::before {
    content: "";
    position: absolute;
    inset: auto -40% -40% auto;
    height: 80%;
    background: radial-gradient(circle at top, var(--js-primary-soft), transparent 60%);
    opacity: .14;
    pointer-events: none;
}

.stat-card:hover {
    transform: translateY(-.2em);
    /* 3px */
    box-shadow: var(--shadow-hover);
}

.stat-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: .8em;
}

.stat-label {
    font-size: 1.1em;
    color: var(--js-text-muted);
    margin-bottom: .3em;
    font-weight: 600;
}

.stat-value {
    font-size: 2.4em;
    font-weight: 700;
    color: var(--js-text-main);
    line-height: 1.1;
}

.stat-foot {
    margin-top: .9em;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: .983em;
    color: var(--js-text-muted);
    font-weight: 400;
}

.stat-icon {
    width: 2.5em;
    height: 2.5em;
    border-radius: 5.1em;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5em;
    background: var(--js-chip-bg);
}

.stat-icon.a {
    background: #e6f7f5;
    color: var(--js-primary-dark);
}

.stat-icon.b {
    background: #fff3e6;
    color: var(--js-accent);
}

.stat-icon.c {
    background: #e6f0ff;
    color: #2563eb;
}

.stat-icon.d {
    background: #f3e6ff;
    color: #9333ea;
}

.chip {
    padding: 0.5426em .97em;
    border-radius: var(--radius-pill);
    border: 1px solid var(--js-border-soft);
    background: var(--js-chip-bg);
    font-size: 0.9em;
    line-height: 1em;
    font-weight: 600;
    color: var(--js-text-main);
    display: inline-flex;
    align-items: center;
    gap: .25em;
}

.chip.good {
    background: #e6f7f5;
    border-color: rgba(0, 131, 116, .32);
    color: var(--js-primary-dark);
}

.chip.warn {
    background: #fff3e6;
    border-color: rgba(246, 185, 37, .4);
    color: #b45309;
}

/* ==========  toolbar ========= */
/* =========================================================
   TOOLBAR & TABS (Balanced Scaling)
   ========================================================= */
.toolbar {
    background: #fff;
    border-radius: 0.75em;
    border: 0.08em solid var(--js-border);
    padding: 0.6em 1em;
    display: flex;
    align-items: center;
    gap: 0.8em;
    flex-wrap: wrap;
    margin-bottom: 1.25em;
    box-shadow: 0 0.1em 0.3em rgba(0, 0, 0, 0.04);
}

.tabs {
    display: flex;
    gap: 0.2em;
}

.tab {
    padding: 0.5em 1em;
    border-radius: 0.5em;
    font-size: 0.95em;
    font-weight: 600;
    cursor: pointer;
    border: none;
    background: none;
    color: var(--js-text-muted);
    transition: all 0.15s;
    font-family: var(--font-main);
    display: flex;
    align-items: center;
}

.tab.active {
    background: var(--js-primary-soft);
    color: #fff;
}

.tab .tc {
    font-size: 0.95em;
    font-weight: 700;
    margin-left: 0.3em;
    opacity: 0.8;
}

.vsep {
    width: 0.08em;
    height: 1.4em;
    background: var(--js-border-soft);
}

.sort-sel {
    border: 0.08em solid var(--js-border);
    border-radius: 0.5em;
    padding: 0.4em 0.7em;
    font-size: 0.95em;
    background: var(--js-bg-alt);
    color: var(--js-text-main);
    cursor: pointer;
    font-family: var(--font-main);
    font-weight: 500;
    outline: none;
}

.sort-sel:focus {
    border-color: var(--js-primary);
}

.ml {
    margin-left: auto;
}

/* View Toggles (Grid/List) */
.vtoggle {
    display: flex;
    gap: 0.25em;
}

.vb {
    width: 2.2em;
    /* Slightly increased for better touch target */
    height: 2.2em;
    border-radius: 0.45em;
    border: 0.08em solid var(--js-border);
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}

.vb svg {
    width: 1em;
    /* Scaled icon */
    height: 1em;
    stroke: var(--js-text-muted);
    fill: none;
    stroke-width: 2;
}

.vb.active {
    background: var(--js-primary);
    border-color: var(--js-primary);
}

.vb.active svg {
    stroke: #fff;
}

/* Mobile Adjustments */
@media (max-width: 600px) {
    .ml {
        margin-left: 0;
        width: 100%;
    }

    .toolbar {
        gap: 1em;
    }

    .sort-sel {
        flex: 1;
    }
}

/* =========================================================
    SIDEBAR SYSTEM (Balanced Scaling)
    ========================================================= */
.body-wrap {
    display: flex;
    gap: 1.1em;
    align-items: flex-start;
    margin-top: 2em;
}

.sidebar {
    width: 18em;
    /* 210px equivalent */
    flex-shrink: 0;
    background: #fff;
    border-radius: 1em;
    border: 0.08em solid var(--border);
    box-shadow: 0 0.125em 0.4em rgba(0, 0, 0, 0.05);
    overflow: hidden;
    position: sticky;
    top: 6em;
}

.sb-head {
    padding: 1em 1.2em 0.8em;
    border-bottom: 0.08em solid var(--border);
}

.sb-head h3 {
    font-size: 1.2em;
    font-weight: 800;
    color: var(--text);
    margin: 0;
}

.section-header {
    background: #313131;
    color: white;
    padding: 0.7em 1.5em;
    font-size: 1.2em;
    font-weight: 700;
}

.sb-section {
    padding: 0.8em 1em;
    border-bottom: 0.08em solid var(--border);
}

.sb-section:last-child {
    border-bottom: none;
}

.sb-label {
    font-size: 0.9em;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--muted);
    margin-bottom: 0.6em;
}

.sb-item {
    display: flex;
    align-items: center;
    gap: 0.6em;
    line-height: 1.5em;
    padding: 0.5em 0.7em;
    border-radius: 0.6em;
    cursor: pointer;
    font-size: 1.1em;
    font-weight: 600;
    color: var(--sub);
    transition: all 0.15s;
    margin-bottom: 0.2em;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    font-family: 'Inter', sans-serif;
}

.sb-item:hover {
    background: var(--teal-light);
    color: #fff;
}

.sb-item.active {
    background: var(--teal-light);
    color: #fff;
}

.sb-emoji {
    width: 1.85em;
    /* 28px approx */
    height: 1.85em;
    border-radius: 0.5em;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1em;
    flex-shrink: 0;
}

.sb-item.active .sb-emoji {
    background: var(--teal-icon);
}

.sb-count {
    margin-left: auto;
    font-size: 1em;
    font-weight: 800;
    background: var(--border);
    color: var(--sub);
    padding: 0.15em 0.5em;
    border-radius: 1.25em;
    flex-shrink: 0;
}

.sb-item.active .sb-count {
    background: var(--teal);
    color: #fff;
}

.main-panel {
    flex: 1;
    min-width: 0;
}

/* =========================================================
   CATEGORY BAR (Balanced Scaling with Root Variables)
   ========================================================= */
.cat-bar {
    display: flex;
    align-items: center;
    gap: 0.5em;
    margin-bottom: 1.25em;
    flex-wrap: wrap;
}

.cat-btn {
    display: flex;
    align-items: center;
    gap: 0.4em;
    padding: 0.5em 1.2em;
    border-radius: var(--radius-pill);
    border: 0.1em solid var(--js-border);
    background: var(--js-card-bg);
    font-size: 1em;
    font-weight: 700;
    color: var(--js-text-main);
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: var(--font-main);
    box-shadow: var(--shadow-soft);
    user-select: none;
}

.cat-btn:hover {
    border-color: var(--js-primary);
    color: var(--js-primary);
    background: var(--js-chip-bg);
    transform: translateY(-0.05em);
    box-shadow: 0 0.25em 0.5em rgba(0, 0, 0, 0.05);
}

.cat-btn.active {
    border-color: var(--js-primary);
    color: #ffffff;
    background: var(--js-primary);
    box-shadow: 0 0.4em 0.8em rgba(0, 131, 116, 0.2);
}

.cat-n {
    background: var(--js-primary);
    color: #ffffff;
    font-size: 0.9em;
    font-weight: 800;
    min-width: 1.5em;
    height: 1.5em;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.3em;
    transition: all 0.2s ease;
}

/* Jab button active na ho to count badge ka style */
.cat-btn:not(.active) .cat-n {
    background: var(--js-border-soft);
    color: var(--js-text-muted);
}

/* Jab button active ho to count badge ka style */
.cat-btn.active .cat-n {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

/* Small Screen Optimization */
@media (max-width: 480px) {
    .cat-bar {
        gap: 0.4em;
    }

    .cat-btn {
        padding: 0.4em 0.8em;
        font-size: 0.78em;
    }
}




/* -- ADS GRID -- */
.ads-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1em;
}

.ads-list {
    display: flex;
    flex-direction: column;
    gap: .85rem
}

/* -- AD CARD -- */
.ad-card {
    background: var(--js-card-bg);
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 0.08em solid var(--js-border);
    box-shadow: var(--shadow-soft);
    transition: transform 0.22s, box-shadow 0.22s, border-color 0.22s;
    position: relative;
    cursor: pointer;
    animation: rise 0.38s ease both;
}

.ad-card:hover {
    transform: translateY(-0.25em);
    box-shadow: var(--shadow-hover);
    border-color: var(--js-primary-soft);
}

.ad-list-card {
    background: var(--js-card-bg);
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 0.08em solid var(--js-border);
    box-shadow: var(--shadow-soft);
    display: flex;
    transition: transform 0.22s, box-shadow 0.22s;
    position: relative;
    cursor: pointer;
    animation: rise 0.38s ease both;
}

.ad-list-card:hover {
    transform: translateY(-0.125em);
    box-shadow: var(--shadow-hover);
    border-color: var(--js-primary-soft);
}

@keyframes rise {
    from {
        opacity: 0;
        transform: translateY(1em);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.ad-card:nth-child(1),
.ad-list-card:nth-child(1) {
    animation-delay: .04s
}

.ad-card:nth-child(2),
.ad-list-card:nth-child(2) {
    animation-delay: .08s
}

.ad-card:nth-child(3),
.ad-list-card:nth-child(3) {
    animation-delay: .12s
}

.ad-card:nth-child(4),
.ad-list-card:nth-child(4) {
    animation-delay: .16s
}

.ad-card:nth-child(5),
.ad-list-card:nth-child(5) {
    animation-delay: .20s
}

.ad-card:nth-child(6),
.ad-list-card:nth-child(6) {
    animation-delay: .24s
}

.ad-card:nth-child(7),
.ad-list-card:nth-child(7) {
    animation-delay: .28s
}

.ad-card:nth-child(8),
.ad-list-card:nth-child(8) {
    animation-delay: .32s
}

.c-img {
    width: 100%;
    height: 18em;
    width: 100%;
    object-fit: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    background: linear-gradient(145deg, #b2d9d2, #95c5bc);
}

.c-img i {
    font-size: 7em;
}

.ad-list-card .c-img {
    width: 42em;
    height: 18em;
}

.ad-list-card {
    width: 100%;
}

.ad-list-card .c-content {
    width: 100%;
    position: relative;
}

.c-img::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, .08));
}

.l-img {
    width: 11.875em;
    min-height: 10em;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3.5em;
    position: relative;
    overflow: hidden;
    background: linear-gradient(145deg, #b2d9d2, #95c5bc);
}

.c-badges {
    position: absolute;
    top: 0.7em;
    left: 0.7em;
    display: flex;
    gap: 0.35em;
    z-index: 2;
}

.ad-feature-icon-stack {
    position: absolute;
    left: 0.7em;
    top: 0.7em;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 0.38em;
    pointer-events: none;
}

.ad-feature-icon {
    width: 2.55em;
    height: 2.55em;
    border-radius: 999px;
    border: 0.14em solid #f7c818;
    background: rgba(22, 24, 28, 0.88);
    color: #f7c818;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0.35em 0.9em rgba(0, 0, 0, 0.28);
    overflow: hidden;
}

.ad-feature-icon img {
    width: 1.55em !important;
    height: 1.55em !important;
    object-fit: contain !important;
    display: block;
}

.ad-feature-icon i {
    font-size: 1.35em;
    line-height: 1;
}

.cb {
    padding: 0.25em 0.65em;
    border-radius: 1.25em;
    font-size: 0.95em;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.cb-new {
    background: var(--js-primary);
    color: #fff;
}

.cb-pro {
    background: var(--js-header-bg);
    color: #fff;
}

.cb-urgent {
    background: #dc3545;
    color: #fff;
}

.hbtn {
    position: absolute;
    top: 0.7em;
    right: 0.7em;
    z-index: 2;
    width: 2.2em;
    height: 2.2em;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, .5);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.18s;
}

.fav-card-heart {
    background: rgba(255, 255, 255, 0.94);
    border: 0.08em solid rgba(0, 131, 116, 0.18);
    color: var(--yellow);
    box-shadow: 0 0.35em 0.9em rgba(0, 0, 0, 0.22);
}

.fav-card-heart i {
    font-size: 1.2em;
    line-height: 1;
    color: currentColor;
}

.fav-card-heart:hover {
    transform: scale(1.06);
    background: #fff;
    color: #f6bb26;
}

.item-like {
    margin: 12px;
    background-color: rgba(0, 0, 0, .5);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 7px;
    border-radius: 999px;
}


.hbtn svg {
    width: 1.1em;
    height: 1.1em;
    stroke: #fff;
    transition: 0.3s ease;
}
.hbtn svg:hover{
    width: 1.1em;
    height: 1.1em;
    stroke: var(--yellow);
}

/* =========================================================
   CARD BODY & INFO
   ========================================================= */
.c-body {
    padding: 1em;
}

.c-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5em;
    margin-bottom: 0.1em;
}

.c-title {
    font-size: 1.2em;
    font-weight: 700;
    line-height: 1.4;
    color: var(--js-text-main);
}

.c-price {
    font-size: 1.1em;
    font-weight: 800;
    color: var(--js-primary);
    white-space: nowrap;
}

.c-oldprice {
    font-size: 1em;
    color: var(--js-text-muted);
    text-decoration: line-through;
}

.c-loc {
    display: flex;
    align-items: center;
    gap: 0.3em;
    font-size: 1;
    color: #555;
    font-weight: 600;
    margin-top: 0.5em;
}

.c-loc svg {
    width: 0.9em;
    height: 0.9em;
    stroke: currentColor;
    fill: none;
    stroke-width: 2.5;
}

.c-foot {
    padding: 0.7em 1em;
    border-top: 0.08em solid var(--js-border-soft);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--js-header-bg);
}

.ad-list-card .c-foot {
    padding: 0.7em 1em;
    border-top: 0.08em solid var(--js-border-soft);
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: absolute;
    width: 100%;
    bottom: 0;
    background-color: var(--js-header-bg);
    color: #fff;
}

.c-date {
    font-size: 1em;
    color: var(--js-text-muted);
    color: #fff;
    font-weight: 600;
}

.c-cat {
    font-size: 1em;
    font-weight: 800;
    color: var(--js-primary);
    background: var(--js-chip-bg);
    padding: 0.25em 0.7em;
    border-radius: 1.25em;
}

.ad-list-card .c-date {
    color: #fff;
}

.ad-list-card .c-cat {
    color: #fff;
}

.card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1em;
    margin-bottom: 1em;
}

.card-head h3 {
    font-size: 1.25em;
    font-weight: 700;
}

.card-head .btn {
    padding: .6em 2em;
}

/* ACTIVITY */
.activity {
    display: flex;
    flex-direction: column;
    gap: .75em;
}

.act-item {
    border-radius: var(--radius-md);
    border: .0625em solid var(--js-border-soft);
    background: #f9fafb;
    padding: .9em 1em;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1em;
}

.act-left {
    display: flex;
    gap: .8em;
}

.act-ico {
    width: 2.5em;
    /* 40px */
    height: 2.5em;
    border-radius: .875em;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e6f7f5;
    color: var(--js-primary-dark);
    font-size: 1.2em;
}

.act-title {
    font-weight: 700;
    font-size: 1.3em;
}

.act-meta {
    font-size: 1em;
    color: var(--js-text-muted);
    margin-top: .1em;
    font-weight: 400;
}

.act-time {
    font-size: 1em;
    font-weight: 600;
    color: var(--js-text-muted);
    white-space: nowrap;
}

/* =========================================================
   PAGINATION & TOAST
   ========================================================= */
.pag {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5em;
    margin-top: 2em;
    margin-bottom: 2em;
}

.pg-btn {
    width: 2.3em;
    height: 2.3em;
    border-radius: 0.6em;
    border: 0.08em solid var(--js-border);
    background: var(--js-card-bg);
    cursor: pointer;
    font-size: 0.85em;
    font-weight: 700;
    color: var(--js-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}

.pg-btn.active {
    background: var(--js-primary);
    border-color: var(--js-primary);
    color: #fff;
}

.pg-btn:hover:not(.active) {
    border-color: var(--js-primary);
    color: var(--js-primary);
}

.toast {
    position: fixed;
    bottom: 1.5em;
    right: 1.5em;
    z-index: 999;
    background: var(--js-header-bg);
    color: #fff;
    padding: 0.8em 1.2em;
    border-radius: 0.8em;
    font-size: 0.85em;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.7em;
    box-shadow: 0 0.5em 2em rgba(0, 0, 0, 0.3);
    transform: translateY(5em);
    opacity: 0;
    transition: all 0.4s cubic-bezier(.34, 1.56, .64, 1);
}

.toast.show {
    transform: translateY(0);
    opacity: 1;
}

/* =========================================================
   TOAST ELEMENTS & CATEGORY BAR (Fluid Scaling)
   ========================================================= */

/* Toast Dot */
.t-dot {
    width: 0.5em;
    height: 0.5em;
    border-radius: 50%;
    background: #dc3545;
    /* Alert color */
    flex-shrink: 0;
}

/* Category Bar Container */
.cat-bar {
    display: flex;
    align-items: center;
    gap: 0.5em;
    margin-bottom: 1.2em;
    flex-wrap: wrap;
}

/* Category Button */
.cat-btn {
    display: flex;
    align-items: center;
    gap: 0.4em;
    padding: 0.5em 1em;
    border-radius: var(--radius-pill);
    /* Scalable 999px equivalent */
    border: 0.1em solid var(--js-border);
    background: var(--js-card-bg);
    font-size: 1em;
    font-weight: 700;
    color: var(--js-text-muted);
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: var(--font-main);
    box-shadow: var(--shadow-soft);
    user-select: none;
}

/* Hover State */
.cat-btn:hover {
    border-color: var(--js-primary);
    color: var(--js-primary);
    background: var(--js-chip-bg);
    transform: translateY(-0.05em);
}

/* Active State */
.cat-btn.active {
    border-color: var(--js-primary);
    color: #fff;
    background: var(--js-primary);
    box-shadow: 0 0.3em 0.8em rgba(0, 131, 116, 0.2);
}

/* Count Badge inside Category Button */
.cat-n {
    background: var(--js-primary);
    color: #fff;
    font-size: 0.75em;
    font-weight: 800;
    min-width: 1.5em;
    height: 1.5em;
    border-radius: 1.25em;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.3em;
    transition: all 0.2s;
}

/* Logic: Jab button active na ho to badge muted dikhe */
.cat-btn:not(.active) .cat-n {
    background: var(--js-border-soft);
    color: var(--js-text-muted);
}

/* Logic: Jab button active ho to badge light dikhe */
.cat-btn.active .cat-n {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

.c-line {
    height: 0.3em;
    background-color: var(--teal-light);
    margin-bottom: 0.6em;
}

.sidebar {
    transition: .3s;
    width: 18em;
}

.sb-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sb-left {
    display: flex;
    align-items: center;
    gap: 0.5em;
}

.mc-tags {
    flex-wrap: wrap;
    gap: 0.5em;
    color: #555;
    margin-top: 0.8em;

}

.mc-tag,
.mc-tags {
    display: flex;
    align-items: center
}

.mc-tag {
    justify-content: center;
    gap: 0.3em;
    font-size: 1em;
    font-weight: 700;
    border: 0.1em solid var(--js-header-bg);
    min-width: 4.5em;
    padding: 0.25em 0.6em;
    border-radius: 100em;
}

.c-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mc-tag svg {
    height: 1.2em;
    width: auto
}

.ads-grid .mc-tags {
    display: none;
}
.mc-price {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3em;
    font-size: 1.1em;
        color: #fff;
}
.mc-cat, .mc-post-date {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.3em;
    color: #555;
    font-size: 1em;
    font-weight: 700;
    margin-bottom: 0.2em;
}
.mc-cat svg{
    font-size: 1em;
    width: 1em;
    height: 1em;
}
.c-content svg{
    font-size: 1em;
    width: 1em;
    height: 1em;;
}
.mc-price img{
    width: 1.4em;
    height: 1.4em;
}
.star-rating {
    scale: 1.2;
    margin-right: 1em;
    font-size: 1.1em;
}
.star-rating{
    color: #fff;
}
.star-rating .filled {
    color: var(--yellow);
}
.section-header .sb-icon{
    margin-right: 0.3em;
}
.c-img{
    position: relative;
}

.img-loader{
    position:absolute;
    inset:0;
    background:#f5f5f5;
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:2;
}

/* spinner */
.img-loader::after{
    content:"";
    width:28px;
    height:28px;
    border:3px solid #ddd;
    border-top-color: var(--js-primary);
    border-radius:50%;
    animation:spin 0.8s linear infinite;
}
.mobilesidebar{
    display: none;
}
.menu_mobile-btn{
    display: none;
}
@keyframes spin{
    to{transform:rotate(360deg);}
}
/* 1025px se neeche */

@media (min-width:1026px) {
    .ad-list-card .mc-cat,.ad-list-card .mc-post-date {
    gap: 0.3em;
    color: #555;
    font-size: 1.2em;
    font-weight: 700;
    margin-bottom: 0.5em;
}
.ad-list-card .c-row {
    gap: 0.5em;
    margin-bottom: 0.3em;
}
.ad-list-card .c-line {
    margin-bottom: 1em;
}
.ad-list-card .mc-tags {
    display: flex;
    align-items: center;
    font-size: 1.1em;
}
}
@media (max-width:1025px) {
.sidebar{
    display: none;
}
     .mobilesidebar{
        position: relative;
        width: 0;
    }
    .mobilesidebar.active{
        display: block;
        width: 30em;
    }
    .mobilesidebar .sidebar{
        display: block;
    }

/* Button */
.menu-btn {
  font-size: 24px;
  padding: 10px 15px;
  cursor: pointer;
}

/* Sidebar */
.mobilesidebar {
    position: fixed;
    top: 0;
    left: -250px;
    width: 18em;
    height: 100%;
    background: #222;
    color: white;
    padding-top: 2em;
    transition: 0.3s;
    overflow: auto;
    height: 100vh;
    z-index: 40;
}
/* Active States */
    .mobilesidebar.active {
        left: 0;
        z-index: 11111;
        padding-top: 0;
    }

/* Overlay */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  opacity: 0;
  visibility: hidden;
  transition: 0.3s;
  z-index: 1000;
}

/* Active overlay */
.overlay.active {
  opacity: 1;
  visibility: visible;
}

/* Close button */
.mobilesidebar .close-btn {
    font-size: 1.1em;
    cursor: pointer;
    color: #fff;
    background-color: var(--teal-light);
    width: 2em;
    min-width: 2em;
    height: 2em;
    display: flex;
    z-index: 1111;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    right: 1em;
    position: absolute;
    top: 0.7em;
    line-height: 1.1em;
    border-color: transparent;
}
    .mobilesidebar .sidebar {
        display: block;
        width: 100%;
        color: var(--js-header-bg);
        position: static;
        max-width: 21em;
        margin: auto;
    }
.sidebar_header{
    background-color: var(--js-header-bg);
    padding: 2em;
    position: relative;
}
.sidebar_body{
    background-color: #ededed;
    padding: 2em;
    position: relative;
    min-height: 93vh;
}
    .sb-icon {
        font-size: 1em;
    }
.menu_mobile-btn{
    border: 0.1em solid var(--yellow);
    background-color: #313131;
    color: #fff;
    width: 2.2em;
    height: 2.2em;
    min-width: 2.2em;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    left: 0em;
    position: sticky;
    top: 5.2em;
}
.sb-item {
    display: flex;
    align-items: center;
    gap: 0.6em;
    line-height: 1.4em;
    padding: 0.4em 0.6em;
    font-size: 1em;
}
.ads-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1em;
}

.fav-overview-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr 1fr;
    gap: 1em;
    padding: 1em;
    background: #f8fafc;
}

.fav-overview-panel {
    background: #fff;
    border: 0.1em solid #dfe6ee;
    border-radius: 0.95em;
    overflow: hidden;
    box-shadow: 0 0.6em 1.6em rgba(15, 23, 42, 0.08);
    min-height: 20em;
}

.fav-category-panel {
    grid-column: span 2;
}

.fav-overview-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1em;
    padding: 1.2em 1.4em;
    color: #fff;
    background: #313131;
}

.fav-overview-title {
    font-size: 1.15em;
    font-weight: 900;
}

.fav-overview-icon {
    width: 2.4em;
    height: 2.4em;
    border-radius: 0.8em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--yellow);
    background: rgba(255, 255, 255, 0.08);
    flex: 0 0 auto;
}

.fav-overview-body {
    padding: 1.2em 1.4em 1.4em;
}

.fav-status-layout {
    display: grid;
    grid-template-columns: 11em 1fr;
    align-items: center;
    gap: 1.25em;
    min-height: 13.5em;
}

.fav-donut {
    width: 11em;
    aspect-ratio: 1;
    border-radius: 50%;
    display: grid;
    place-items: center;
    position: relative;
    box-shadow: inset 0 0 0 0.1em rgba(15, 23, 42, 0.05), 0 1em 2em rgba(15, 23, 42, 0.08);
}

.fav-donut::after {
    content: "";
    position: absolute;
    inset: 1.55em;
    border-radius: 50%;
    background: #fff;
    box-shadow: inset 0 0 0 0.1em #edf2f7;
}

.fav-donut > div {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    line-height: 1.1;
}

.fav-donut strong {
    font-size: 2.1em;
    font-weight: 900;
    color: #111827;
}

.fav-donut span {
    font-size: 0.85em;
    color: var(--js-text-muted);
    font-weight: 900;
}

.fav-overview-legend {
    display: grid;
    gap: 0.7em;
}

.fav-overview-legend-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.65em;
    padding: 0.55em 0.7em;
    border: 0.1em solid #edf2f7;
    border-radius: 0.75em;
    background: #fbfdff;
    color: var(--js-text-main);
    font-weight: 900;
}

.fav-dot {
    width: 0.75em;
    height: 0.75em;
    border-radius: 50%;
    background: var(--js-primary);
}

.fav-dot.is-urgent {
    background: var(--yellow);
}

.fav-dot.is-pro {
    background: #2563eb;
}

.fav-dot.is-other {
    background: #a855f7;
}

.fav-overview-row {
    display: grid;
    gap: 0.55em;
    padding: 0.85em;
    border: 0.1em solid #e4eaf2;
    border-radius: 0.85em;
    background: #fff;
}

.fav-overview-row + .fav-overview-row {
    margin-top: 0.8em;
}

.fav-category-panel .fav-overview-body {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9em;
}

.fav-category-panel .fav-overview-row {
    margin-top: 0;
}

.fav-overview-row-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1em;
    min-width: 0;
    font-weight: 900;
    color: var(--js-text-main);
}

.fav-overview-row-top span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fav-overview-track {
    height: 0.65em;
    border-radius: 999px;
    background: #eef2f7;
    overflow: hidden;
}

.fav-overview-fill {
    height: 100%;
    border-radius: inherit;
    background: var(--js-primary);
}

.fav-overview-fill.is-country {
    background: #2563eb;
}

.fav-price-hero {
    padding: 1.1em;
    border-radius: 1em;
    color: #fff;
    background: linear-gradient(135deg, #006b5f 0%, #008374 58%, #0aa790 100%);
    box-shadow: 0 0.8em 1.6em rgba(0, 131, 116, 0.22);
}

.fav-price-hero span,
.fav-price-grid span {
    display: block;
    font-size: 0.86em;
    font-weight: 900;
    opacity: 0.82;
}

.fav-price-hero strong {
    display: block;
    margin-top: 0.35em;
    font-size: 1.35em;
    line-height: 1.2;
    font-weight: 900;
}

.fav-price-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75em;
    margin-top: 0.9em;
}

.fav-price-grid > div {
    padding: 0.9em;
    border: 0.1em solid #e4eaf2;
    border-radius: 0.85em;
    background: #fff;
}

.fav-price-grid strong {
    display: block;
    margin-top: 0.3em;
    font-size: 1em;
    font-weight: 900;
    color: #111827;
}

.fav-overview-empty {
    padding: 1.4em;
    border: 0.1em dashed var(--js-border);
    border-radius: 0.85em;
    color: var(--js-text-muted);
    font-weight: 800;
    text-align: center;
}
.stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

}
@media (max-width:650px) {
    .ads-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1em;
}
.fav-overview-grid,
.fav-category-panel .fav-overview-body {
    grid-template-columns: 1fr;
}
.fav-category-panel {
    grid-column: auto;
}
.fav-status-layout {
    grid-template-columns: 1fr;
    justify-items: center;
}
.fav-overview-legend {
    width: 100%;
}
.stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width:500px) {
    .stats-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
}
    .ad-list-card .c-img {
    width: 42em;
    height: 20em;
    width: 100%;
}
.ad-list-card {
    flex-direction: column;
    position: relative;
    margin: auto;
}
.ad-list-card .c-content {
    font-size: 1.2em;
}
.ads-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1em;
}
.ads-grid .c-content{
        font-size: 1.2em;
}
.ad-list-card .c-foot{
    position: static;
}
.vtoggle {
    display: flex;
    gap: 0.25em;
    justify-content: end;
}
    .toolbar {
        flex-wrap: wrap;
    }
.c-img {
    height: 20em;
}
    .sidebar:hover{
      max-width: 14em;
    }
    .actions .btn{
        width: 100%;
    }
        .mobilesidebar{
        position: relative;
    }
    .mobilesidebar .sidebar{
        display: block;
    }

/* Button */
.menu-btn {
  font-size: 24px;
  padding: 10px 15px;
  cursor: pointer;
}

/* Sidebar */
.mobilesidebar {
    position: fixed;
    top: 0;
    left: -250px;
    width: 18em;
    height: 100%;
    background: #222;
    color: white;
    padding-top: 2em;
    transition: 0.3s;
    overflow: auto;
    height: 100vh;
    z-index: 40;
}
/* Active States */
    .mobilesidebar.active {
        left: 0;
        z-index: 11111;
        padding-top: 0;
    }

/* Overlay */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  opacity: 0;
  visibility: hidden;
  transition: 0.3s;
  z-index: 1000;
}

/* Active overlay */
.overlay.active {
  opacity: 1;
  visibility: visible;
}

/* Close button */
.mobilesidebar .close-btn {
    font-size: 1.1em;
    cursor: pointer;
    color: #fff;
    background-color: var(--teal-light);
    width: 2em;
    min-width: 2em;
    height: 2em;
    display: flex;
    z-index: 1111;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    right: 1em;
    position: absolute;
    top: 0.7em;
    line-height: 1.1em;
    border-color: transparent;
}
    .mobilesidebar .sidebar {
        display: block;
        width: 100%;
        color: var(--js-header-bg);
        position: static;
    }
.sidebar_header{
    background-color: var(--js-header-bg);
    padding: 2em;
    position: relative;
}
.sidebar_body{
    background-color: #ededed;
    padding: 2em;
    position: relative;
    min-height: 93vh;
}
    .sb-icon {
        font-size: 1em;
    }
.menu_mobile-btn{
    border: 0.1em solid var(--yellow);
    background-color: #313131;
    color: #fff;
    width: 2.2em;
    height: 2.2em;
    min-width: 2.2em;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    left: 0em;
    position: sticky;
    top: 5.2em;
}
.sb-item {
    display: flex;
    align-items: center;
    gap: 0.6em;
    line-height: 1.4em;
    padding: 0.4em 0.6em;
    font-size: 1em;
}
    .mobilesidebar.active {
        display: block;
        width: auto;
    }
}

/* Compact favourites cards aligned with Manage Ads */
.ads-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 1rem !important;
    align-items: start !important;
}

.ads-grid .ad-card {
    align-self: start !important;
    height: fit-content !important;
    border-radius: 0.75rem !important;
}

.ads-grid .c-img {
    height: 14rem !important;
    min-height: 14rem !important;
}

.ads-grid .c-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.ads-grid .c-badges,
.ads-grid .cb,
.ads-grid .cb-new,
.js-favourite-card .cb-new {
    display: none !important;
}

.ads-grid .ad-feature-icon-stack {
    top: 1rem !important;
    left: 0.55rem !important;
    gap: 0.25rem !important;
    z-index: 4 !important;
}

.ads-grid .ad-feature-icon {
    width: 2rem !important;
    height: 2rem !important;
    border-width: 0.12rem !important;
    background: rgba(22, 24, 28, 0.88) !important;
    color: #f7c818 !important;
    box-shadow: 0 0.25rem 0.65rem rgba(0, 0, 0, 0.26) !important;
}

.ads-grid .ad-feature-icon img {
    width: 1.18rem !important;
    height: 1.18rem !important;
}

.ads-grid .ad-feature-icon i {
    font-size: 1.08rem !important;
}

.ads-grid .c-content {
    font-size: 0.92rem !important;
}

.ads-grid .c-body {
    padding: 0.85rem 0.9rem !important;
}

.ads-grid .c-title {
    font-size: 1.05rem !important;
    line-height: 1.2 !important;
}

.ads-grid .c-line {
    margin: 0.55rem 0 0.65rem !important;
}

.ads-grid .mc-cat,
.ads-grid .mc-post-date,
.ads-grid .c-loc {
    font-size: 0.9rem !important;
    line-height: 1.25 !important;
}

.ads-grid .c-foot {
    padding: 0.65rem 0.9rem !important;
}

.ads-grid .mc-price {
    font-size: 0.9rem !important;
}

.ads-grid .hbtn {
    top: 0.65rem !important;
    right: 0.65rem !important;
    width: 2.05rem !important;
    height: 2.05rem !important;
}

.ads-grid .fav-card-heart,
.js-favourite-card .fav-card-heart {
    width: 2.35rem !important;
    height: 2.35rem !important;
    border: 0.12rem solid #f6bb26 !important;
    background: rgba(22, 24, 28, 0.9) !important;
    color: #f6bb26 !important;
    box-shadow: 0 0 0 0.08rem rgba(246, 187, 38, 0.25), 0 0.35rem 1rem rgba(246, 187, 38, 0.42), 0 0.5rem 1.2rem rgba(0, 0, 0, 0.35) !important;
}

.ads-grid .fav-card-heart i,
.js-favourite-card .fav-card-heart i {
    font-size: 1.2rem !important;
    color: #f6bb26 !important;
}

.ads-grid .fav-card-heart:hover,
.js-favourite-card .fav-card-heart:hover {
    transform: scale(1.06) !important;
    background: rgba(10, 12, 18, 0.96) !important;
    color: #ffd85a !important;
    border-color: #ffd85a !important;
}

@media (max-width: 1279px) {
    .ads-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 899px) {
    .ads-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .ads-grid .c-img {
        height: 13rem !important;
        min-height: 13rem !important;
    }
}

@media (max-width: 560px) {
    .ads-grid {
        grid-template-columns: 1fr !important;
    }

    .ads-grid .c-img {
        height: 15rem !important;
        min-height: 15rem !important;
    }
}

body:not(.fav-data-ready) .sidebar .sb-section,
body:not(.fav-data-ready) .sidebar .sb-item {
    display: none !important;
}

body:not(.fav-data-ready) .sidebar::after {
    content: "";
    display: block;
    min-height: 28rem;
    margin: 1rem;
    border-radius: 0.9rem;
    background:
        linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.68), transparent) 0 0 / 220% 100%,
        linear-gradient(#eef2f7 0 0) 0.5rem 1rem / 70% 1.4rem no-repeat,
        linear-gradient(#eef2f7 0 0) 0.5rem 4rem / 88% 2.5rem no-repeat,
        linear-gradient(#eef2f7 0 0) 0.5rem 8rem / 78% 2.5rem no-repeat,
        linear-gradient(#eef2f7 0 0) 0.5rem 12rem / 84% 2.5rem no-repeat,
        linear-gradient(#eef2f7 0 0) 0.5rem 17rem / 60% 1.4rem no-repeat,
        linear-gradient(#eef2f7 0 0) 0.5rem 20rem / 82% 2.5rem no-repeat,
        #fff;
    animation: favSkeletonShimmer 1.2s linear infinite;
}

body:not(.fav-data-ready) #ads > :not(.fav-initial-skeleton) {
    display: none !important;
}

.fav-initial-skeleton {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1.05rem;
    width: 100%;
}

body.fav-data-ready .fav-initial-skeleton {
    display: none !important;
}

.fav-skeleton-card {
    display: grid;
    gap: 0.75rem;
    min-height: 24rem;
    padding: 0 0 1rem;
    overflow: hidden;
    border: 0.1rem solid #dfe6ee;
    border-radius: 0.95rem;
    background: #fff;
    box-shadow: 0 0.45rem 1.4rem rgba(15, 23, 42, 0.08);
}

.fav-skeleton-media,
.fav-skeleton-line,
.fav-skeleton-foot {
    display: block;
    border-radius: 999px;
    background: linear-gradient(90deg, #edf1f5 0%, #f8fafc 45%, #edf1f5 90%);
    background-size: 220% 100%;
    animation: favSkeletonShimmer 1.2s linear infinite;
}

.fav-skeleton-media {
    height: 14rem;
    border-radius: 0;
}

.fav-skeleton-line {
    height: 0.95rem;
    margin: 0 1rem;
}

.fav-skeleton-line.is-title {
    width: 58%;
    height: 1.2rem;
}

.fav-skeleton-line.is-short {
    width: 42%;
}

.fav-skeleton-foot {
    height: 2.45rem;
    margin: auto 0 0;
    border-radius: 0;
}

@keyframes favSkeletonShimmer {
    to { background-position: -220% 0; }
}

body:not(.fav-data-ready) .page {
    min-height: 52rem;
}

body:not(.fav-data-ready) .page > * {
    display: none !important;
}

body:not(.fav-data-ready) .page::before {
    content: "";
    display: block;
    width: min(86rem, calc(100vw - 4rem));
    min-height: 49rem;
    margin: 1.5rem auto 2.5rem;
    border-radius: 1rem;
    background:
        linear-gradient(90deg, transparent, rgba(255,255,255,0.72), transparent) 0 0 / 220% 100%,
        linear-gradient(#fff 0 0) 0 0 / 100% 4.9rem no-repeat,
        linear-gradient(#edf3f1 0 0) 1rem 1.05rem / 7rem 2.05rem no-repeat,
        linear-gradient(#edf3f1 0 0) 8.5rem 1.05rem / 7rem 2.05rem no-repeat,
        linear-gradient(#edf3f1 0 0) calc(100% - 18rem) 1.05rem / 16rem 2.05rem no-repeat,
        linear-gradient(#fff 0 0) 0 6.2rem / 17.5rem 40rem no-repeat,
        linear-gradient(#edf3f1 0 0) 1.2rem 7.2rem / 12rem 2.1rem no-repeat,
        linear-gradient(#edf3f1 0 0) 1.2rem 10.2rem / 10rem 2.1rem no-repeat,
        linear-gradient(#edf3f1 0 0) 1.2rem 13.2rem / 8rem 2.1rem no-repeat,
        linear-gradient(#edf3f1 0 0) 1.2rem 16.2rem / 12rem 2.1rem no-repeat,
        linear-gradient(#edf3f1 0 0) 1.2rem 19.2rem / 10rem 2.1rem no-repeat,
        linear-gradient(#edf3f1 0 0) 1.2rem 22.2rem / 8rem 2.1rem no-repeat,
        linear-gradient(#edf3f1 0 0) 1.2rem 25.2rem / 12rem 2.1rem no-repeat,
        linear-gradient(#edf3f1 0 0) 19.2rem 7rem / 14rem 15.8rem no-repeat,
        linear-gradient(#edf3f1 0 0) 19.2rem 22.8rem / 14rem 6.5rem no-repeat,
        linear-gradient(#edf3f1 0 0) 34.6rem 7rem / 14rem 15.8rem no-repeat,
        linear-gradient(#edf3f1 0 0) 34.6rem 22.8rem / 14rem 6.5rem no-repeat,
        linear-gradient(#edf3f1 0 0) 50rem 7rem / 14rem 15.8rem no-repeat,
        linear-gradient(#edf3f1 0 0) 50rem 22.8rem / 14rem 6.5rem no-repeat,
        linear-gradient(#edf3f1 0 0) 65.4rem 7rem / 14rem 15.8rem no-repeat,
        linear-gradient(#edf3f1 0 0) 65.4rem 22.8rem / 14rem 6.5rem no-repeat,
        #f8faf9;
    box-shadow: 0 0.7rem 2rem rgba(15, 23, 42, 0.08);
    animation: favSkeletonShimmer 1.2s linear infinite;
}

@media (max-width: 900px) {
    body:not(.fav-data-ready) .page::before {
        width: calc(100vw - 1.5rem);
        min-height: 58rem;
        margin: 1rem auto 2rem;
        background:
            linear-gradient(90deg, transparent, rgba(255,255,255,0.72), transparent) 0 0 / 220% 100%,
            linear-gradient(#fff 0 0) 0 0 / 100% 4.5rem no-repeat,
            linear-gradient(#edf3f1 0 0) 1rem 1rem / 7rem 2rem no-repeat,
            linear-gradient(#edf3f1 0 0) calc(100% - 10rem) 1rem / 9rem 2rem no-repeat,
            linear-gradient(#fff 0 0) 0 5.6rem / 100% 12rem no-repeat,
            linear-gradient(#edf3f1 0 0) 1rem 6.6rem / 70% 2rem no-repeat,
            linear-gradient(#edf3f1 0 0) 1rem 9.6rem / 58% 2rem no-repeat,
            linear-gradient(#edf3f1 0 0) 1rem 12.6rem / 82% 2rem no-repeat,
            linear-gradient(#edf3f1 0 0) 0 19rem / 100% 14rem no-repeat,
            linear-gradient(#fff 0 0) 0 33rem / 100% 12rem no-repeat,
            linear-gradient(#edf3f1 0 0) 1rem 34rem / 55% 1.2rem no-repeat,
            linear-gradient(#edf3f1 0 0) 1rem 36.5rem / 78% 1rem no-repeat,
            linear-gradient(#edf3f1 0 0) 1rem 38.7rem / 65% 1rem no-repeat,
            linear-gradient(#fff 0 0) 0 46rem / 100% 12rem no-repeat,
            linear-gradient(#edf3f1 0 0) 1rem 47rem / 55% 1.2rem no-repeat,
            linear-gradient(#edf3f1 0 0) 1rem 49.5rem / 78% 1rem no-repeat,
            linear-gradient(#edf3f1 0 0) 1rem 51.7rem / 65% 1rem no-repeat,
            #f8faf9;
    }
}

body:not(.fav-data-ready) .page::before {
    content: none !important;
    display: none !important;
}

body:not(.fav-data-ready) .page > :not(.js-page-skeleton) {
    display: none !important;
}

body:not(.fav-data-ready) .js-page-skeleton {
    display: block !important;
    visibility: visible !important;
}

body.fav-data-ready .js-page-skeleton {
    display: none !important;
}

.js-page-skeleton {
    width: 100%;
    margin: 0;
    padding: 0;
    gap: 0;
    background: transparent;
    box-sizing: border-box;
}

.js-page-skeleton * {
    box-sizing: border-box;
    opacity: 1;
    visibility: visible;
}

.fav-skel-shimmer,
.fav-skel-line,
.fav-skel-pill,
.fav-skel-circle {
    display: block;
    border-radius: 999px;
    background: #dbe6e3;
    background-image: linear-gradient(90deg, #dbe6e3 0%, #f4f8f7 45%, #dbe6e3 90%);
    background-size: 220% 100%;
    animation: favSkeletonShimmer 1.2s linear infinite;
}

.fav-skel-welcome,
.fav-skel-stat,
.fav-skel-sidebar,
.fav-skel-toolbar,
.fav-skel-stage,
.fav-skel-activity {
    border: 0.1rem solid #ccd9d6;
    border-radius: 1rem;
    background: #fff;
    box-shadow: 0 0.18em 0.5em rgba(0, 0, 0, 0.14);
}

.fav-skel-welcome {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.4em;
    min-height: 8.35em;
    padding: 1.4em 1.45em;
    margin-bottom: 1.6em;
    background: linear-gradient(135deg, #007165, #00a28f);
    border-color: transparent;
    overflow: hidden;
}

.fav-skel-welcome-left {
    display: flex;
    align-items: center;
    gap: 1em;
    min-width: 0;
}

.fav-skel-welcome-icon {
    width: 4.7em;
    height: 4.7em;
    border-radius: 1.1em;
    background: rgba(255, 255, 255, 0.16);
}

.fav-skel-welcome-copy {
    display: grid;
    gap: 0.55em;
}

.fav-skel-welcome-copy .fav-skel-line:nth-child(1) {
    width: 22em;
    height: 1.2em;
}

.fav-skel-welcome-copy .fav-skel-line:nth-child(2) {
    width: 32em;
    height: 0.82em;
}

.fav-skel-welcome-actions {
    display: flex;
    gap: 0.7em;
    margin-left: auto;
}

.fav-skel-welcome-actions .fav-skel-pill {
    width: 11em;
    height: 3.2em;
}

.fav-skel-welcome-actions .fav-skel-pill:nth-child(2) {
    width: 13em;
    background: #fff;
}

.fav-skel-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.1em;
    margin-bottom: 1.6em;
}

.fav-skel-stat {
    min-height: 10.1em;
    padding: 1.4em 1.45em;
    position: relative;
}

.fav-skel-stat .top {
    display: flex;
    justify-content: space-between;
    gap: 0.8em;
}

.fav-skel-stat .fav-skel-line.label {
    width: 7.5em;
    height: 0.9em;
}

.fav-skel-stat .fav-skel-line.value {
    width: 2.3em;
    height: 2.2em;
    margin-top: 0.55em;
}

.fav-skel-stat .fav-skel-circle {
    width: 3.8em;
    height: 3.8em;
}

.fav-skel-stat .foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1.2em;
}

.fav-skel-stat .fav-skel-pill {
    width: 6.2em;
    height: 1.9em;
}

.fav-skel-stat .fav-skel-line.short {
    width: 6.8em;
    height: 0.8em;
}

.fav-skel-body {
    display: flex;
    gap: 1.1em;
    align-items: flex-start;
    margin-top: 2em;
}

.fav-skel-sidebar {
    width: 18em;
    flex: 0 0 18em;
    overflow: hidden;
}

.fav-skel-sidebar-head {
    height: 3.6em;
    background: #313131;
}

.fav-skel-sidebar-body {
    padding: 0.8em 1em 1em;
    display: grid;
    gap: 0.7em;
}

.fav-skel-sidebar .fav-skel-line {
    height: 1em;
    width: 7em;
}

.fav-skel-sidebar .fav-skel-pill {
    height: 2.7em;
    width: 100%;
}

.fav-skel-main {
    flex: 1;
    min-width: 0;
    display: grid;
    gap: 1.25em;
}

.fav-skel-toolbar {
    display: flex;
    align-items: center;
    gap: 0.8em;
    min-height: 4.25em;
    padding: 0.6em 1em;
}

.fav-skel-toolbar .fav-skel-pill {
    height: 2.4em;
    width: 7em;
}

.fav-skel-toolbar .fav-skel-pill:nth-child(3) {
    width: 15em;
    margin-left: auto;
}

.fav-skel-stage {
    min-height: 24em;
    padding: 1.35em;
    display: grid;
    place-items: center;
}

.fav-skel-empty-card {
    width: min(38em, 80%);
    min-height: 15em;
    border: 0.1rem solid #ccd9d6;
    border-radius: 1rem;
    background: #fff;
    display: grid;
    place-items: center;
    gap: 0.8em;
    padding: 2em;
}

.fav-skel-empty-card .fav-skel-circle {
    width: 4.7em;
    height: 4.7em;
}

.fav-skel-empty-card .fav-skel-line:nth-child(2) {
    width: 13em;
    height: 1em;
}

.fav-skel-empty-card .fav-skel-line:nth-child(3) {
    width: 21em;
    height: 0.8em;
}

.fav-skel-empty-card .fav-skel-pill {
    width: 16em;
    height: 3.4em;
    background: #008374;
}

.fav-skel-activity {
    padding: 1.4em;
}

.fav-skel-activity-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1em;
}

.fav-skel-activity-head .fav-skel-line {
    width: 10em;
    height: 1em;
}

.fav-skel-activity-head .fav-skel-pill {
    width: 6em;
    height: 2.4em;
    background: #008374;
}

.fav-skel-activity-row {
    display: grid;
    grid-template-columns: 2.6em 1fr 5em;
    gap: 0.9em;
    align-items: center;
    min-height: 4.8em;
    border: 0.1rem solid #d8e3e0;
    border-radius: 0.7em;
    padding: 0.8em 1em;
    margin-top: 0.7em;
}

.fav-skel-activity-row .fav-skel-circle {
    width: 2.6em;
    height: 2.6em;
}

.fav-skel-activity-row .stack {
    display: grid;
    gap: 0.45em;
}

.fav-skel-activity-row .stack .fav-skel-line:nth-child(1) {
    width: 13em;
    height: 1em;
}

.fav-skel-activity-row .stack .fav-skel-line:nth-child(2) {
    width: 18em;
    height: 0.75em;
}

.fav-skel-activity-row > .fav-skel-line {
    width: 4em;
    height: 0.75em;
}

@media (max-width: 1100px) {
    .fav-skel-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
    .fav-skel-welcome {
        align-items: flex-start;
        flex-direction: column;
    }

    .fav-skel-welcome-actions { margin-left: 0; }
    .fav-skel-body { flex-direction: column; }
    .fav-skel-sidebar {
        width: 100%;
        flex-basis: auto;
    }
    .fav-skel-stats { grid-template-columns: 1fr; }
    .fav-skel-empty-card { width: 100%; }
}

@media (max-width: 560px) {
    .fav-skel-welcome-copy .fav-skel-line:nth-child(1),
    .fav-skel-welcome-copy .fav-skel-line:nth-child(2),
    .fav-skel-activity-row .stack .fav-skel-line:nth-child(2) {
        width: 100%;
    }

    .fav-skel-toolbar { flex-wrap: wrap; }
    .fav-skel-toolbar .fav-skel-pill:nth-child(3) { margin-left: 0; }
    .fav-skel-activity-row { grid-template-columns: 2.6em 1fr; }
    .fav-skel-activity-row > .fav-skel-line { display: none; }
}