/* ==========================================================================
   MacBlash Marketplace (Buy & Sell) — Isolated Stylesheet
   Categories hub (/service_cats)
   Listings index (/all-services-unfree  +  /all-services-need)
   Item detail   (/show-service/{id}  type = unfree | need)
   rusty create | 2026-09-09 21:40
   Action: dark-glass buy/sell ecosystem. Namespaced .mac-mk- and scoped under
           .mac-mk-page so the shared .game-item / .page-single-* rules in style.css
           keep serving the training listings untouched.
   ========================================================================== */

:root {
    --mk-bg: #0a0a0f;
    --mk-surface: rgba(18, 18, 26, 0.75);
    --mk-surface-solid: #12121a;
    --mk-glass-border: rgba(6, 182, 212, 0.12);
    --mk-glass-border-hover: rgba(6, 182, 212, 0.45);
    --mk-gold: #e4c59e;
    --mk-cyan: #06b6d4;
    --mk-purple: #8b5cf6;
    --mk-sale: #22c55e;      /* عرض بيع  */
    --mk-wanted: #f59e0b;    /* طلب شراء */
    --mk-text: #e2e8f0;
    --mk-text-muted: #94a3b8;
    --mk-text-dim: #64748b;
    --mk-radius: 16px;
    --mk-radius-sm: 10px;
    --mk-radius-xs: 6px;
}

/* Page shells sit above the fixed FX canvas, transparent so the site ground shows */
.mac-mk-page {
    background: transparent !important;
    position: relative;
    z-index: 2;
}

/* ==========================================================================
   0. SHARED PRIMITIVES
   ========================================================================== */

.mac-mk-glass {
    background: var(--mk-surface);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: var(--mk-radius);
}

@supports not ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))) {
    .mac-mk-glass,
    .mac-mk-div-card,
    .mac-mk-sidebar-body,
    .mac-mk-card,
    .mac-mk-side-card,
    .mac-mk-gallery-main { background: var(--mk-surface-solid); }
}

.mac-mk-riyal { font-family: 'icomoon' !important; font-style: normal; }
.mac-mk-riyal:before { content: "\e900"; }

/* Status badges — one shape, colour is the only variable (shape-consistency lock) */
.mac-mk-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    padding: 6px 11px;
    border-radius: 999px;
    border: 1px solid transparent;
    white-space: nowrap;
}
.mac-mk-status i { font-size: 11px; }
.mac-mk-status.is-sale {
    color: #bbf7d0;
    background: rgba(34, 197, 94, 0.14);
    border-color: rgba(34, 197, 94, 0.4);
}
.mac-mk-status.is-wanted {
    color: #fde68a;
    background: rgba(245, 158, 11, 0.14);
    border-color: rgba(245, 158, 11, 0.4);
}

.mac-mk-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--mk-text-muted);
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    white-space: nowrap;
}
.mac-mk-chip i { font-size: 11px; color: var(--mk-cyan); }
.mac-mk-chip.is-used i { color: var(--mk-gold); }

.mac-mk-price {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    font-weight: 900;
    color: #f8fafc;
    letter-spacing: -0.01em;
    direction: ltr;
}
.mac-mk-price .mac-mk-riyal,
.mac-mk-price .cur { color: var(--mk-cyan); font-weight: 700; }
.mac-mk-price .sep { color: var(--mk-text-dim); font-weight: 600; margin: 0 2px; }

/* ==========================================================================
   1. CATEGORIES HUB  (/service_cats)
   ========================================================================== */

.mac-mk-hero {
    text-align: center;
    padding: 40px 0 30px;
}
.mac-mk-hero-title {
    font-size: clamp(1.9rem, 4vw, 2.8rem);
    font-weight: 900;
    color: #fff;
    margin: 0 0 12px;
    letter-spacing: -0.02em;
}
.mac-mk-hero-title .accent {
    background: linear-gradient(120deg, var(--mk-cyan), var(--mk-purple));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.mac-mk-hero-desc {
    font-size: clamp(0.95rem, 1.6vw, 1.1rem);
    color: var(--mk-text-muted);
    max-width: 60ch;
    margin: 0 auto;
    line-height: 1.7;
}

.mac-mk-div-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    max-width: 940px;
    margin: 8px auto 0;
}
@media (max-width: 768px) { .mac-mk-div-grid { grid-template-columns: 1fr; gap: 18px; } }

.mac-mk-div-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 30px 28px;
    background: var(--mk-surface);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--mk-radius);
    text-decoration: none;
    position: relative;
    overflow: hidden;
    transition: transform 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease;
}
.mac-mk-div-card::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 0;
    width: 100%;
    height: 3px;
    background: var(--_glow, var(--mk-cyan));
    opacity: 0.85;
}
.mac-mk-div-card.is-sale { --_glow: var(--mk-sale); }
.mac-mk-div-card.is-wanted { --_glow: var(--mk-wanted); }
.mac-mk-div-card:hover {
    transform: translateY(-6px);
    border-color: color-mix(in srgb, var(--_glow) 45%, transparent);
    box-shadow: 0 24px 48px -20px color-mix(in srgb, var(--_glow) 40%, transparent);
}

.mac-mk-div-icon {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    font-size: 22px;
    color: var(--_glow, var(--mk-cyan));
    background: color-mix(in srgb, var(--_glow) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--_glow) 30%, transparent);
}
.mac-mk-div-name {
    font-size: 1.3rem;
    font-weight: 900;
    color: #fff;
    margin: 0;
}
.mac-mk-div-count {
    font-size: 2rem;
    font-weight: 900;
    color: var(--_glow, var(--mk-cyan));
    line-height: 1;
    display: flex;
    align-items: baseline;
    gap: 8px;
}
.mac-mk-div-count small {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--mk-text-dim);
}
.mac-mk-div-desc {
    font-size: 0.9rem;
    color: var(--mk-text-muted);
    line-height: 1.65;
    margin: 0;
    flex: 1;
}
.mac-mk-div-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    font-size: 0.9rem;
    font-weight: 800;
    color: var(--_glow, var(--mk-cyan));
    margin-top: 4px;
}
.mac-mk-div-cta i { transition: transform 0.2s ease; }
[dir="rtl"] .mac-mk-div-cta i { transform: scaleX(-1); }
.mac-mk-div-card:hover .mac-mk-div-cta i { transform: translateX(-4px); }
[dir="rtl"] .mac-mk-div-card:hover .mac-mk-div-cta i { transform: scaleX(-1) translateX(-4px); }

/* mini category tiles */
.mac-mk-tiles {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    max-width: 940px;
    margin: 32px auto 0;
}
.mac-mk-tile {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 11px 16px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--mk-text);
    font-size: 0.85rem;
    font-weight: 700;
    text-decoration: none;
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}
.mac-mk-tile i { color: var(--mk-purple); font-size: 14px; }
.mac-mk-tile:hover {
    transform: translateY(-2px);
    border-color: var(--mk-glass-border-hover);
    background: rgba(6, 182, 212, 0.06);
    color: #fff;
}
.mac-mk-tile .n {
    font-size: 0.72rem;
    color: var(--mk-text-dim);
    font-weight: 800;
}

/* ==========================================================================
   2. SAFETY NOTICE  (shared: hub, index, detail)
   ========================================================================== */

.mac-mk-safety {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    max-width: 940px;
    margin: 34px auto 0;
    padding: 14px 18px;
    border-radius: var(--mk-radius-sm);
    background: rgba(245, 158, 11, 0.07);
    border: 1px solid rgba(245, 158, 11, 0.28);
    color: #fcd9a0;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.6;
}
.mac-mk-safety i { font-size: 16px; color: var(--mk-wanted); margin-top: 2px; flex-shrink: 0; }
.mac-mk-safety.is-block { max-width: none; margin-inline: 0; }

/* ==========================================================================
   3. LISTINGS INDEX  (/all-services-unfree | /all-services-need)
   ========================================================================== */

.mac-mk-index-head {
    text-align: center;
    padding: 30px 0 18px;
}
.mac-mk-index-head h1 {
    font-size: clamp(1.6rem, 3.4vw, 2.3rem);
    font-weight: 900;
    color: #fff;
    margin: 0 0 8px;
    letter-spacing: -0.02em;
}
.mac-mk-index-head p {
    color: var(--mk-text-muted);
    font-size: 0.95rem;
    margin: 0 auto;
    max-width: 60ch;
    line-height: 1.65;
}

.mac-mk-layout {
    display: grid;
    grid-template-columns: 290px 1fr;
    gap: 26px;
    align-items: start;
    margin-top: 22px;
}
@media (max-width: 991px) { .mac-mk-layout { grid-template-columns: 1fr; } }

/* --- Faceted sidebar --- */
.mac-mk-sidebar-body {
    display: flex;
    flex-direction: column;
    padding: 24px 22px;
    background: var(--mk-surface);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(139, 92, 246, 0.22);
    border-radius: var(--mk-radius);
    box-shadow: 0 4px 22px rgba(0, 0, 0, 0.35);
}

/* At >=992px the aside renders inline, and compiled Bootstrap ships
   `.offcanvas-lg .offcanvas-body { padding: 0; background-color: transparent !important; }`
   (specificity 0,0,2,0) which silently strips the panel's padding AND glass fill.
   Re-assert both — padding via a 3-class selector + the px-4 py-4 utilities in the
   markup (a spacing utility is !important and always wins); background with !important
   to beat theirs. Same fix the /games directory sidebar uses. */
@media (min-width: 992px) {
    .mac-mk-sidebar { align-self: stretch; }
    .mac-mk-page .mac-mk-sidebar .mac-mk-sidebar-body {
        position: sticky;
        top: 110px;
        padding: 24px 22px;
        background: var(--mk-surface) !important;
    }
}

/* Below lg the aside is a real offcanvas drawer: give the panel its own solid
   ground + a sane width, and let the body fill it edge to edge. */
@media (max-width: 991.98px) {
    .mac-mk-sidebar.offcanvas-lg {
        --bs-offcanvas-width: 340px;
        max-width: 88vw;
        background: rgba(10, 10, 15, 0.98);
        -webkit-backdrop-filter: blur(16px);
        backdrop-filter: blur(16px);
        border-inline-start: 1px solid rgba(139, 92, 246, 0.28);
    }
    .mac-mk-sidebar-body {
        border: 0;
        border-radius: 0;
        box-shadow: none;
        background: transparent;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        overflow-y: auto;
    }
}

/* sidebar header */
.mac-mk-sidebar-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-bottom: 16px;
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.mac-mk-sidebar-head .t {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 0.95rem;
    font-weight: 900;
    color: #f1f5f9;
    letter-spacing: -0.01em;
}
.mac-mk-sidebar-head .t i { color: var(--mk-cyan); font-size: 14px; }
.mac-mk-sidebar-close {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
    color: var(--mk-text-muted);
    cursor: pointer;
}
.mac-mk-sidebar-close:hover { color: #fff; border-color: var(--mk-glass-border-hover); }

.mac-mk-facet { margin: 0 0 22px; }
.mac-mk-facet-title {
    font-size: 0.82rem;
    font-weight: 800;
    color: var(--mk-text);
    letter-spacing: 0.01em;
    margin-bottom: 11px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.mac-mk-facet-title i {
    color: var(--mk-cyan);
    font-size: 12px;
    width: 16px;
    text-align: center;
    flex-shrink: 0;
}

.mac-mk-input,
.mac-mk-select {
    display: block;
    width: 100%;
    height: 46px;
    padding: 0 14px;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--mk-text);
    background: rgba(10, 10, 15, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: var(--mk-radius-sm);
    outline: none;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
    -webkit-appearance: none;
    appearance: none;
}
.mac-mk-input::placeholder { color: var(--mk-text-dim); font-weight: 500; }
.mac-mk-input:hover,
.mac-mk-select:hover { border-color: rgba(255, 255, 255, 0.2); }
.mac-mk-input:focus,
.mac-mk-select:focus {
    border-color: var(--mk-glass-border-hover);
    box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.15);
    background: rgba(10, 10, 15, 0.75);
}
/* kill the native number spinners — the price facet is a single-bound filter */
.mac-mk-input[type="number"] { -moz-appearance: textfield; }
.mac-mk-input[type="number"]::-webkit-outer-spin-button,
.mac-mk-input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* drop the native search "x" — the reset link handles clearing */
.mac-mk-input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }

.mac-mk-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2394a3b8' d='M6 8 0 2l1.4-1.4L6 5.2 10.6.6 12 2z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 14px center;
    padding-inline-end: 36px;
    cursor: pointer;
}
[dir="ltr"] .mac-mk-select {
    background-position: right 14px center;
    padding-inline-end: 14px;
    padding-inline-start: 36px;
}
.mac-mk-select option { background: #12121a; color: var(--mk-text); }

/* segmented condition control */
.mac-mk-seg {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
    background: rgba(10, 10, 15, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--mk-radius-sm);
    padding: 5px;
}
.mac-mk-seg label {
    text-align: center;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--mk-text-muted);
    padding: 9px 4px;
    border-radius: 7px;
    cursor: pointer;
    transition: background 0.16s ease, color 0.16s ease;
    margin: 0;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
}
.mac-mk-seg label:hover { color: #e2e8f0; }
.mac-mk-seg input { position: absolute; opacity: 0; pointer-events: none; }
.mac-mk-seg label:has(input:checked) {
    background: linear-gradient(135deg, var(--mk-cyan), var(--mk-purple));
    color: #fff;
    box-shadow: 0 4px 12px -4px rgba(6, 182, 212, 0.5);
}

/* apply / reset block */
.mac-mk-facet-actions {
    margin-top: 26px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.mac-mk-facet-actions .mac-mk-add-btn {
    width: 100%;
    justify-content: center;
    height: 46px;
    font-size: 0.88rem;
}
.mac-mk-reset {
    width: 100%;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 0.82rem;
    font-weight: 800;
    color: var(--mk-text-muted);
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--mk-radius-sm);
    cursor: pointer;
    text-decoration: none;
    transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}
.mac-mk-reset:hover { color: #fff; border-color: var(--mk-glass-border-hover); background: rgba(255, 255, 255, 0.03); }

/* --- Main column --- */
.mac-mk-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 18px;
}
.mac-mk-count {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--mk-text-muted);
}
.mac-mk-count b { color: #fff; font-size: 1.05rem; font-weight: 900; }
.mac-mk-sort-wrap { display: flex; align-items: center; gap: 9px; }
.mac-mk-sort-wrap label { font-size: 0.8rem; font-weight: 700; color: var(--mk-text-dim); margin: 0; white-space: nowrap; }
.mac-mk-sort-wrap .mac-mk-select { width: auto; min-width: 168px; height: 38px; }

.mac-mk-filters-toggle {
    display: none;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    font-weight: 800;
    color: var(--mk-text);
    background: var(--mk-surface);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--mk-radius-xs);
    padding: 9px 15px;
    cursor: pointer;
}
.mac-mk-filters-toggle i { color: var(--mk-cyan); }
@media (max-width: 991px) { .mac-mk-filters-toggle { display: inline-flex; } }

.mac-mk-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
@media (max-width: 1200px) { .mac-mk-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .mac-mk-grid { grid-template-columns: 1fr; } }

.mac-mk-card {
    display: flex;
    flex-direction: column;
    background: var(--mk-surface);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: var(--mk-radius);
    overflow: hidden;
    text-decoration: none;
    transition: transform 0.26s ease, border-color 0.26s ease, box-shadow 0.26s ease;
    will-change: auto;
}
.mac-mk-card:hover {
    transform: translateY(-5px);
    border-color: var(--mk-glass-border-hover);
    box-shadow: 0 22px 44px -22px rgba(6, 182, 212, 0.4);
}

.mac-mk-card-media {
    position: relative;
    aspect-ratio: 16 / 10;
    background: #0d0d14;
    overflow: hidden;
}
.mac-mk-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}
.mac-mk-card:hover .mac-mk-card-img { transform: scale(1.045); }
.mac-mk-card-media .mac-mk-status {
    position: absolute;
    inset-block-start: 10px;
    inset-inline-start: 10px;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
.mac-mk-card-media .mac-mk-cond {
    position: absolute;
    inset-block-start: 10px;
    inset-inline-end: 10px;
    font-size: 10.5px;
    font-weight: 800;
    padding: 4px 9px;
    border-radius: 999px;
    color: #e2e8f0;
    background: rgba(10, 10, 15, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.14);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.mac-mk-card-body {
    padding: 15px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 9px;
    flex: 1;
}
.mac-mk-card-title {
    font-size: 1rem;
    font-weight: 800;
    color: #f1f5f9;
    margin: 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.mac-mk-card-loc {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.78rem;
    color: var(--mk-text-dim);
    font-weight: 600;
}
.mac-mk-card-loc i { color: var(--mk-cyan); font-size: 11px; }
.mac-mk-card-desc {
    font-size: 0.8rem;
    color: var(--mk-text-muted);
    line-height: 1.55;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.mac-mk-card-foot {
    margin-top: auto;
    padding-top: 11px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.mac-mk-card-foot .mac-mk-price { font-size: 0.98rem; }
.mac-mk-card-rate {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.78rem;
    font-weight: 800;
    color: var(--mk-gold);
}

.mac-mk-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px 20px;
    color: var(--mk-text-dim);
    font-size: 0.95rem;
    font-weight: 600;
}
.mac-mk-empty i { display: block; font-size: 40px; margin-bottom: 14px; color: rgba(255, 255, 255, 0.14); }

.mac-mk-add-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(135deg, var(--mk-cyan), var(--mk-purple));
    border: none;
    border-radius: var(--mk-radius-xs);
    padding: 10px 18px;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.mac-mk-add-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 28px -14px rgba(139, 92, 246, 0.6); color: #fff; }

.mac-mk-pagination { margin-top: 30px; }
.mac-mk-pagination .pagination { justify-content: center; }

/* ==========================================================================
   4. ITEM DETAIL  (/show-service/{id}  type = unfree | need)
   ========================================================================== */

.mac-mk-detail-layout {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 30px;
    align-items: start;
    margin-top: 10px;
}
@media (max-width: 991px) { .mac-mk-detail-layout { grid-template-columns: 1fr; } }

.mac-mk-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--mk-text-muted);
    text-decoration: none;
    margin-bottom: 16px;
    transition: color 0.18s ease, gap 0.18s ease;
}
.mac-mk-back i { color: var(--mk-cyan); font-size: 12px; }
[dir="ltr"] .mac-mk-back i { transform: scaleX(-1); }
.mac-mk-back:hover { color: #fff; gap: 12px; }

/* --- Gallery --- */
.mac-mk-gallery-main {
    position: relative;
    aspect-ratio: 16 / 10;
    border-radius: var(--mk-radius);
    overflow: hidden;
    background: #0d0d14;
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.mac-mk-gallery-main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.mac-mk-gallery-main .mac-mk-status {
    position: absolute;
    inset-block-start: 14px;
    inset-inline-start: 14px;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
.mac-mk-thumbs {
    display: flex;
    gap: 10px;
    margin-top: 12px;
    flex-wrap: wrap;
}
.mac-mk-thumb {
    width: 92px;
    height: 62px;
    border-radius: var(--mk-radius-xs);
    overflow: hidden;
    border: 2px solid transparent;
    cursor: pointer;
    background: #0d0d14;
    padding: 0;
    transition: border-color 0.18s ease, opacity 0.18s ease;
    opacity: 0.6;
}
.mac-mk-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mac-mk-thumb.is-active { border-color: var(--mk-cyan); opacity: 1; }
.mac-mk-thumb:hover { opacity: 1; }

.mac-mk-detail-headline {
    margin-top: 22px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.mac-mk-detail-title {
    font-size: clamp(1.4rem, 3vw, 2rem);
    font-weight: 900;
    color: #fff;
    margin: 0;
    line-height: 1.35;
    letter-spacing: -0.01em;
}
.mac-mk-detail-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.mac-mk-section {
    margin-top: 34px;
}
.mac-mk-section-title {
    font-size: 1.05rem;
    font-weight: 800;
    color: #f1f5f9;
    margin: 0 0 16px;
    display: flex;
    align-items: center;
    gap: 9px;
}
.mac-mk-section-title i { color: var(--mk-purple); font-size: 14px; }
.mac-mk-section-title .count {
    font-size: 0.75rem;
    font-weight: 800;
    color: var(--mk-text-dim);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 2px 9px;
    border-radius: 999px;
}

/* rich body */
.mac-mk-prose {
    background: var(--mk-surface);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: var(--mk-radius);
    padding: 22px 24px;
    color: var(--mk-text-muted);
    font-size: 0.95rem;
    line-height: 1.85;
}
.mac-mk-prose > *:first-child { margin-top: 0; }
.mac-mk-prose > *:last-child { margin-bottom: 0; }
.mac-mk-prose h1, .mac-mk-prose h2, .mac-mk-prose h3, .mac-mk-prose h4 {
    color: #f1f5f9;
    font-weight: 800;
    margin: 1.4em 0 0.6em;
    line-height: 1.4;
}
.mac-mk-prose a { color: var(--mk-cyan); text-decoration: none; }
.mac-mk-prose a:hover { text-decoration: underline; }
.mac-mk-prose img { border-radius: var(--mk-radius-sm); margin: 1em 0; }
.mac-mk-prose ul, .mac-mk-prose ol { padding-inline-start: 1.4em; }

/* related */
.mac-mk-related-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
@media (max-width: 767px) { .mac-mk-related-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 440px) { .mac-mk-related-grid { grid-template-columns: 1fr; } }

/* --- Sticky action sidebar --- */
.mac-mk-side {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
@media (min-width: 992px) { .mac-mk-side { position: sticky; top: 110px; } }

.mac-mk-side-card {
    background: var(--mk-surface);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--mk-radius);
    padding: 20px;
}
.mac-mk-side-card.glow-cyan { border-color: rgba(6, 182, 212, 0.28); }
.mac-mk-side-card.glow-purple { border-color: rgba(139, 92, 246, 0.24); }

.mac-mk-price-big {
    font-size: 1.7rem;
    font-weight: 900;
    color: #f8fafc;
    display: flex;
    align-items: baseline;
    gap: 8px;
    direction: ltr;
    justify-content: flex-end;
}
[dir="ltr"] .mac-mk-price-big { justify-content: flex-start; }
.mac-mk-price-big .mac-mk-riyal,
.mac-mk-price-big .cur { color: var(--mk-cyan); font-size: 1.05rem; font-weight: 700; }
.mac-mk-price-big .sep { color: var(--mk-text-dim); font-weight: 600; }
.mac-mk-price-label {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--mk-text-dim);
    margin-bottom: 6px;
}

.mac-mk-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    padding: 12px 16px;
    border-radius: var(--mk-radius-xs);
    font-size: 0.9rem;
    font-weight: 800;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.mac-mk-cta.is-primary {
    color: #fff;
    background: linear-gradient(135deg, var(--mk-cyan), var(--mk-purple));
}
.mac-mk-cta.is-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 32px -16px rgba(139, 92, 246, 0.6); }
.mac-mk-cta.is-ghost {
    color: var(--mk-text);
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.12);
}
.mac-mk-cta.is-ghost:hover { color: #fff; border-color: var(--mk-glass-border-hover); background: rgba(6, 182, 212, 0.07); }
.mac-mk-cta + .mac-mk-cta { margin-top: 10px; }
.mac-mk-cta:active { transform: scale(0.985); }

.mac-mk-seller {
    display: flex;
    align-items: center;
    gap: 12px;
}
.mac-mk-seller-avatar {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(6, 182, 212, 0.3);
    flex-shrink: 0;
}
.mac-mk-seller-name { font-size: 0.9rem; font-weight: 800; color: #f1f5f9; display: flex; align-items: center; gap: 6px; }
.mac-mk-seller-name .verified { color: var(--mk-purple); font-size: 12px; }
.mac-mk-seller-role { font-size: 0.75rem; color: var(--mk-text-dim); font-weight: 600; margin-top: 2px; }

.mac-mk-specs { display: flex; flex-direction: column; }
.mac-mk-spec-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    font-size: 0.83rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.mac-mk-spec-row:last-child { border-bottom: none; }
.mac-mk-spec-row .k { color: var(--mk-text-dim); font-weight: 700; }
.mac-mk-spec-row .v { color: var(--mk-text); font-weight: 700; text-align: end; }

.mac-mk-side-card-title {
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--mk-text);
    margin: 0 0 12px;
    display: flex;
    align-items: center;
    gap: 7px;
}
.mac-mk-side-card-title i { color: var(--mk-cyan); font-size: 12px; }

/* owner / edit controls */
.mac-mk-owner-bar {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 12px;
}
.mac-mk-owner-btn {
    flex: 1;
    min-width: 110px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 0.8rem;
    font-weight: 700;
    padding: 9px 12px;
    border-radius: var(--mk-radius-xs);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--mk-text-muted);
    cursor: pointer;
    transition: color 0.18s ease, border-color 0.18s ease;
}
.mac-mk-owner-btn:hover { color: #fff; border-color: var(--mk-glass-border-hover); }
.mac-mk-owner-btn.is-danger:hover { color: #fca5a5; border-color: rgba(239, 68, 68, 0.5); }

/* guest rating notice — matches .mac-fg-guest visual */
.mac-mk-guest {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 18px;
    border-radius: var(--mk-radius-sm);
    background: rgba(255, 255, 255, 0.03);
    border: 1px dashed rgba(255, 255, 255, 0.14);
    color: var(--mk-text-muted);
    font-size: 0.85rem;
    font-weight: 600;
}
.mac-mk-guest i { color: var(--mk-gold); }
.mac-mk-guest a { color: var(--mk-cyan); font-weight: 800; text-decoration: none; margin-inline-start: auto; }
.mac-mk-guest a:hover { text-decoration: underline; }

/* ==========================================================================
   5. SHARE TOAST  (shared with free-games visual language)
   ========================================================================== */

.mac-mk-toast {
    position: fixed;
    inset-block-start: 22px;
    inset-inline: 0;
    margin-inline: auto;
    width: max-content;
    max-width: calc(100vw - 32px);
    z-index: 100050;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    border-radius: 999px;
    background: rgba(18, 18, 26, 0.95);
    border: 1px solid rgba(34, 197, 94, 0.4);
    color: #dcfce7;
    font-size: 0.88rem;
    font-weight: 700;
    box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.6);
    opacity: 0;
    transform: translateY(-18px);
    transition: opacity 0.28s ease, transform 0.28s ease;
    pointer-events: none;
}
.mac-mk-toast.is-show { opacity: 1; transform: translateY(0); }
.mac-mk-toast i { color: var(--mk-sale); font-size: 15px; }

/* ==========================================================================
   6. MOTION SAFETY
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .mac-mk-div-card,
    .mac-mk-card,
    .mac-mk-card-img,
    .mac-mk-tile,
    .mac-mk-cta,
    .mac-mk-add-btn,
    .mac-mk-toast { transition: none !important; animation: none !important; }
}