/* Shared marketplace UI - used by both the Growth (SMM panel) catalog and
   the curated Services/Package catalog (Views/Growth/Index.cshtml and
   Views/Services/Index.cshtml). Scoped entirely under .hds-mkt so it can't
   collide with the shared .hds-price-card/.hds-filter-pill styles in
   Site.css (still used by both catalogs' own Detail pages). Mobile-first:
   base rules are the small-screen layout, min-width media queries layer on
   the desktop sidebar+grid. RTL handled the same way the rest of the site
   already does it (margin/padding ternaries in the Razor view), not CSS
   logical properties. */

.hds-mkt-header {
    position: sticky;
    top: 60px; /* below the fixed navbar */
    z-index: 50;
    background: #fff;
    padding: 14px 0;
    border-bottom: 1px solid #eee;
    margin-bottom: 16px;
}

.hds-mkt-header-row {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

/* --- Search --- */
.hds-mkt-search {
    position: relative;
    flex: 1 1 260px;
    min-width: 0;
}

.hds-mkt-search-input {
    width: 100%;
    padding: 11px 40px;
    border-radius: 24px;
    border: 1px solid #ddd;
    font-size: 15px;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}

    .hds-mkt-search-input:focus {
        border-color: #07b7ff;
        box-shadow: 0 0 0 3px rgba(7, 183, 255, .15);
    }

.hds-mkt-search-icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: #999;
    pointer-events: none;
}
[dir="ltr"] .hds-mkt-search-icon { left: 14px; }
[dir="rtl"] .hds-mkt-search-icon { right: 14px; }

.hds-mkt-search-clear {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: #aaa;
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
    display: none;
}
[dir="ltr"] .hds-mkt-search-clear { right: 12px; }
[dir="rtl"] .hds-mkt-search-clear { left: 12px; }

.hds-mkt-suggest {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,.15);
    border: 1px solid #eee;
    max-height: 420px;
    overflow-y: auto;
    z-index: 60;
    display: none;
}

    .hds-mkt-suggest.open { display: block; }

.hds-mkt-suggest-section-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #999;
    padding: 10px 16px 4px;
}

.hds-mkt-suggest-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    cursor: pointer;
    font-size: 14px;
    color: #333;
}

    .hds-mkt-suggest-item:hover,
    .hds-mkt-suggest-item.active {
        background: #eaf8ff;
    }

.hds-mkt-suggest-item mark {
    background: #d6f3ff;
    color: #025f85;
    padding: 0;
    font-weight: 600;
}

.hds-mkt-suggest-chip {
    display: inline-block;
    padding: 6px 14px;
    margin: 4px;
    border-radius: 20px;
    background: #f2f2f2;
    color: #333;
    font-size: 13px;
    cursor: pointer;
    border: none;
}

    .hds-mkt-suggest-chip:hover { background: #eaf8ff; color: #025f85; }

/* --- Currency switcher --- */
.hds-mkt-currency {
    display: flex;
    border: 1px solid #ddd;
    border-radius: 20px;
    overflow: hidden;
    flex: 0 0 auto;
}

    .hds-mkt-currency button {
        border: none;
        background: #fff;
        padding: 9px 16px;
        font-size: 13px;
        font-weight: 600;
        color: #666;
        cursor: pointer;
    }

    .hds-mkt-currency button.active {
        background: #025f85;
        color: #fff;
    }

/* --- Platform tabs (colored) --- */
.hds-mkt-tabs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 14px 0 4px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.hds-mkt-tab {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    border: none;
    opacity: .55;
    transition: opacity .15s, transform .15s;
    white-space: nowrap;
}

    .hds-mkt-tab:hover { opacity: .8; }
    .hds-mkt-tab.active { opacity: 1; transform: translateY(-1px); box-shadow: 0 4px 10px rgba(0,0,0,.15); }
    .hds-mkt-tab .count { opacity: .85; font-weight: 400; }

.hds-mkt-tab[data-tab-value="all"] { background: #333; }
.hds-mkt-tab[data-tab-value="instagram"] { background: linear-gradient(135deg,#405de6,#5851db,#833ab4,#c13584,#e1306c,#fd1d1d,#f56040,#fcaf45); }
.hds-mkt-tab[data-tab-value="facebook"] { background: #1877f2; }
.hds-mkt-tab[data-tab-value="tiktok"] { background: linear-gradient(135deg,#25f4ee,#000,#fe2c55); }
.hds-mkt-tab[data-tab-value="youtube"] { background: #ff0000; }
.hds-mkt-tab[data-tab-value="twitter"] { background: #111; }
.hds-mkt-tab[data-tab-value="traffic"] { background: #0d9488; }
.hds-mkt-tab[data-tab-value="music"] { background: #1db954; }
.hds-mkt-tab[data-tab-value="snapchat"] { background: #ffc700; color: #111; }
.hds-mkt-tab[data-tab-value="telegram"] { background: #26a5e4; }
.hds-mkt-tab[data-tab-value="google"] { background: linear-gradient(135deg,#4285f4,#ea4335,#fbbc05,#34a853); }
.hds-mkt-tab[data-tab-value="website-design"] { background: #025f85; }

/* --- Layout: sidebar + grid --- */
.hds-mkt-layout {
    display: flex;
    align-items: flex-start;
    gap: 24px;
}

.hds-mkt-filters-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 14px;
}

.hds-mkt-sidebar {
    flex: 0 0 260px;
    position: sticky;
    top: 150px;
    max-height: calc(100vh - 170px);
    overflow-y: auto;
}

.hds-mkt-facet {
    margin-bottom: 22px;
}

    .hds-mkt-facet h4 {
        font-size: 13px;
        text-transform: uppercase;
        letter-spacing: .5px;
        color: #999;
        margin: 0 0 10px;
        display: flex;
        align-items: center;
        gap: 6px;
    }

.hds-mkt-facet-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 4px;
    font-size: 14px;
    color: #444;
    cursor: pointer;
    border-radius: 6px;
}

    .hds-mkt-facet-option:hover { background: #f7fbfd; }
    .hds-mkt-facet-option.active { color: #025f85; font-weight: 700; }
    .hds-mkt-facet-option .cnt { color: #aaa; font-size: 12px; }

.hds-mkt-content { flex: 1; min-width: 0; }

.hds-mkt-results-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 14px;
}

.hds-mkt-results-count { color: #777; font-size: 14px; }

.hds-mkt-sort {
    border-radius: 8px;
    border: 1px solid #ddd;
    padding: 7px 10px;
    font-size: 13px;
}

/* --- Tags/hashtag chips --- */
.hds-mkt-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin: 8px 0;
}

.hds-mkt-tag {
    font-size: 11px;
    color: #07b7ff;
    background: #eaf8ff;
    border-radius: 10px;
    padding: 2px 8px;
}

/* --- Quality/execution signals (Instant/Gradual/Refill/Drop-risk...) ---
   Tone-coded rather than platform-colored like the badges above: "good"
   (stable/guaranteed - green), "neutral" (informational, e.g. gradual
   delivery isn't a defect - blue-gray), "warning" (something the buyer
   should know before ordering, e.g. no refill/may drop - amber). */
.hds-mkt-quality-row {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 8px;
}

.hds-mkt-quality {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    border: 1px solid transparent;
}

.hds-mkt-quality-good { color: #0d9488; background: #e6f7f5; border-color: #b8e8e2; }
.hds-mkt-quality-neutral { color: #2563eb; background: #eaf2ff; border-color: #c6dbff; }
.hds-mkt-quality-warning { color: #b45309; background: #fef3e0; border-color: #f5d99b; }

.hds-mkt-card-minmax {
    font-size: 12px;
    color: #888;
    margin-bottom: 8px;
}

/* --- Badges --- */
.hds-mkt-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .3px;
    padding: 3px 9px;
    border-radius: 6px;
    color: #fff;
    margin-inline-end: 4px;
    margin-bottom: 4px;
}

.hds-mkt-badge-new { background: #0d9488; }
.hds-mkt-badge-trending { background: #ea580c; }
.hds-mkt-badge-bestseller { background: #b45309; }
.hds-mkt-badge-verified { background: #2563eb; }
.hds-mkt-badge-premium { background: #7c3aed; }

.hds-mkt-badges-row {
    position: absolute;
    top: 10px;
    inset-inline-start: 10px;
    z-index: 2;
}

/* --- Cards --- */
.hds-mkt-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
}

.hds-mkt-card {
    position: relative;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 4px 16px rgba(0,0,0,.08);
    border: 1px solid #f0f0f0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform .2s, box-shadow .2s;
}

    .hds-mkt-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 10px 28px rgba(0,0,0,.14);
    }

.hds-mkt-card-media {
    position: relative;
    height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg,#025f85 0%,#07b7ff 100%);
}

    .hds-mkt-card-media img { max-height: 80px; max-width: 75%; object-fit: contain; }
    .hds-mkt-card-media i { color: #fff; font-size: 38px; opacity: .85; }

.hds-mkt-card-body { padding: 16px; display: flex; flex-direction: column; flex: 1; }

.hds-mkt-card-top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}

.hds-mkt-country-badge {
    font-size: 12px;
    color: #555;
    white-space: nowrap;
}

.hds-mkt-card h3 {
    font-size: 16px;
    margin: 0 0 6px;
    line-height: 1.3;
}

.hds-mkt-card-desc {
    color: #777;
    font-size: 13px;
    margin-bottom: 8px;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.hds-mkt-card-delivery {
    font-size: 12px;
    color: #0d9488;
    margin-bottom: 8px;
}

.hds-mkt-price {
    font-size: 22px;
    font-weight: 700;
    color: #025f85;
    margin-bottom: 12px;
}

    .hds-mkt-price small { font-size: 12px; font-weight: 400; color: #999; }

.hds-mkt-card-cta {
    border-radius: 8px;
    font-weight: 600;
}

/* --- Skeleton loading state --- */
.hds-mkt-skeleton {
    background: #fff;
    border-radius: 14px;
    border: 1px solid #f0f0f0;
    overflow: hidden;
    height: 300px;
}

    .hds-mkt-skeleton .sk-media { height: 110px; background: #eee; }
    .hds-mkt-skeleton .sk-line { height: 12px; background: #eee; margin: 14px 16px; border-radius: 6px; }
    .hds-mkt-skeleton .sk-line.short { width: 50%; }

@keyframes hdsMktPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .5; }
}

.hds-mkt-skeleton .sk-media,
.hds-mkt-skeleton .sk-line {
    animation: hdsMktPulse 1.3s ease-in-out infinite;
}

.hds-mkt-empty {
    text-align: center;
    padding: 50px 20px;
    color: #888;
}

.hds-mkt-loadmore {
    display: block;
    margin: 24px auto 10px;
}

/* --- Numbered page jump (separate from "Show more") --- */
.hds-mkt-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    margin: 18px 0 6px;
}

.hds-mkt-pager-btn {
    min-width: 34px;
    padding: 7px 10px;
    border-radius: 8px;
    border: 1px solid #ddd;
    background: #fff;
    color: #444;
    font-size: 13px;
    cursor: pointer;
}

    .hds-mkt-pager-btn:hover { border-color: #07b7ff; color: #025f85; }
    .hds-mkt-pager-btn.active { background: #025f85; border-color: #025f85; color: #fff; font-weight: 700; }
    .hds-mkt-pager-btn.disabled { color: #ccc; border-color: #eee; cursor: default; }

.hds-mkt-pager-ellipsis {
    color: #aaa;
    padding: 0 4px;
}

/* --- Off-canvas filter drawer (mobile/tablet) --- */
@media (max-width: 991px) {
    .hds-mkt-sidebar {
        position: fixed;
        top: 0;
        bottom: 0;
        inset-inline-start: -320px;
        width: 300px;
        max-height: 100vh;
        background: #fff;
        z-index: 1100;
        padding: 20px;
        box-shadow: 4px 0 24px rgba(0,0,0,.2);
        transition: inset-inline-start .25s ease;
    }

        .hds-mkt-sidebar.open { inset-inline-start: 0; }

    .hds-mkt-sidebar-backdrop {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,.4);
        z-index: 1090;
    }

        .hds-mkt-sidebar-backdrop.open { display: block; }

    .hds-mkt-sidebar-close {
        display: block;
        margin-bottom: 10px;
        background: none;
        border: none;
        font-size: 22px;
        color: #666;
    }

    .hds-mkt-header { top: 50px; }
}

@media (min-width: 992px) {
    .hds-mkt-sidebar-close, .hds-mkt-filters-toggle, .hds-mkt-sidebar-backdrop { display: none; }
}

/* --- Grid breakpoints (mobile-first: 1 col base, defined above) --- */
@media (min-width: 576px) {
    .hds-mkt-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 992px) {
    .hds-mkt-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1200px) {
    .hds-mkt-grid { grid-template-columns: repeat(3, 1fr); }
}