/* ==========================================================================
   AFAQ INVESTOR - OPPORTUNITIES.CSS
   Emergency visual fix after master extraction
   Path: assets/css/investor/opportunities.css
   Version: opportunities-clean-royal-v3
   Scope: .afaq-investor-market-app / .afaq-investor-opportunities-page
   ========================================================================== */

/* ==========================================================================
   01) PAGE BASE
   ========================================================================== */
html body .afaq-app.afaq-investor-market-app,
html body .afaq-app.afaq-investor-opportunities-page {
    --op-bg: #fbf7f0;
    --op-page: #fffaf3;
    --op-card: #ffffff;
    --op-card-2: #fff7eb;
    --op-dark: #18212f;
    --op-dark-2: #223046;
    --op-text: #233041;
    --op-muted: #657287;
    --op-gold: #c59a52;
    --op-gold-2: #b9853e;
    --op-border: rgba(197,154,82,.24);
    --op-border-dark: rgba(24,33,47,.12);
    --op-shadow: 0 18px 42px rgba(17,40,58,.08);
    --op-sidebar: var(--afaq-sidebar, 270px);
    --op-font: "Tajawal", "IBM Plex Sans Arabic", "Segoe UI", Arial, sans-serif;

    width: 100% !important;
    min-height: 100svh !important;
    direction: rtl !important;
    overflow-x: hidden !important;
    color: var(--op-text) !important;
    font-family: var(--op-font) !important;
    background:
        radial-gradient(circle at 12% -8%, rgba(197,154,82,.09), transparent 28%),
        radial-gradient(circle at 88% -8%, rgba(197,154,82,.07), transparent 30%),
        linear-gradient(135deg, #fbf7f0 0%, #ffffff 48%, #fffaf3 100%) !important;
}

html body .afaq-app.afaq-investor-market-app *,
html body .afaq-app.afaq-investor-market-app *::before,
html body .afaq-app.afaq-investor-market-app *::after,
html body .afaq-app.afaq-investor-opportunities-page *,
html body .afaq-app.afaq-investor-opportunities-page *::before,
html body .afaq-app.afaq-investor-opportunities-page *::after {
    box-sizing: border-box !important;
}

html body .afaq-app.afaq-investor-market-app :where(a,button,input,select,textarea,label,p,h1,h2,h3,h4,h5,h6,div,span,strong,small),
html body .afaq-app.afaq-investor-opportunities-page :where(a,button,input,select,textarea,label,p,h1,h2,h3,h4,h5,h6,div,span,strong,small) {
    font-family: var(--op-font) !important;
}

html body .afaq-app.afaq-investor-market-app a,
html body .afaq-app.afaq-investor-opportunities-page a {
    text-decoration: none !important;
    box-shadow: none !important;
}

html body .afaq-app.afaq-investor-market-app .dashicons,
html body .afaq-app.afaq-investor-opportunities-page .dashicons {
    font-family: dashicons !important;
    line-height: 1 !important;
}

/* ==========================================================================
   02) FIX THE GIANT INSTALL BUTTON
   ========================================================================== */
html body .afaq-app.afaq-investor-market-app [data-afaq-pwa-install],
html body .afaq-app.afaq-investor-market-app .afaq-pwa-install,
html body .afaq-app.afaq-investor-market-app .afaq-install-pwa,
html body .afaq-app.afaq-investor-market-app .afaq-install-button,
html body .afaq-app.afaq-investor-opportunities-page [data-afaq-pwa-install],
html body .afaq-app.afaq-investor-opportunities-page .afaq-pwa-install,
html body .afaq-app.afaq-investor-opportunities-page .afaq-install-pwa,
html body .afaq-app.afaq-investor-opportunities-page .afaq-install-button {
    position: fixed !important;
    left: 18px !important;
    bottom: 18px !important;
    z-index: 40 !important;
    width: auto !important;
    max-width: 132px !important;
    min-width: 0 !important;
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    padding: 0 11px !important;
    margin: 0 !important;
    border-radius: 999px !important;
    border: 1px solid rgba(197,154,82,.32) !important;
    background: linear-gradient(135deg, #c59a52, #b9853e) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size: 10px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    box-shadow: 0 10px 24px rgba(185,133,62,.22) !important;
    overflow: hidden !important;
    writing-mode: horizontal-tb !important;
    transform: none !important;
}

html body .afaq-app.afaq-investor-market-app [data-afaq-pwa-install] *,
html body .afaq-app.afaq-investor-market-app .afaq-pwa-install *,
html body .afaq-app.afaq-investor-market-app .afaq-install-pwa *,
html body .afaq-app.afaq-investor-market-app .afaq-install-button *,
html body .afaq-app.afaq-investor-opportunities-page [data-afaq-pwa-install] *,
html body .afaq-app.afaq-investor-opportunities-page .afaq-pwa-install *,
html body .afaq-app.afaq-investor-opportunities-page .afaq-install-pwa *,
html body .afaq-app.afaq-investor-opportunities-page .afaq-install-button * {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size: 10px !important;
    line-height: 1 !important;
}

/* ==========================================================================
   03) MAIN + SIDEBAR SAFE LAYOUT
   ========================================================================== */
html body .afaq-app.afaq-investor-market-app .afaq-main,
html body .afaq-app.afaq-investor-opportunities-page .afaq-main {
    width: calc(100% - var(--op-sidebar)) !important;
    max-width: calc(100% - var(--op-sidebar)) !important;
    margin-right: var(--op-sidebar) !important;
    margin-left: 0 !important;
    min-width: 0 !important;
    background: transparent !important;
    overflow-x: hidden !important;
}

html body .afaq-app.afaq-investor-market-app .afaq-content,
html body .afaq-app.afaq-investor-market-app .afaq-content--dashboard,
html body .afaq-app.afaq-investor-opportunities-page .afaq-content,
html body .afaq-app.afaq-investor-opportunities-page .afaq-content--dashboard {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 14px 18px 46px !important;
    background: transparent !important;
    overflow-x: hidden !important;
}

/* ==========================================================================
   04) TOPBAR CLEAN WHITE
   ========================================================================== */
html body .afaq-app.afaq-investor-market-app .afaq-topbar,
html body .afaq-app.afaq-investor-opportunities-page .afaq-topbar {
    width: 100% !important;
    padding: 14px 18px 7px !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 80 !important;
    background: linear-gradient(180deg, rgba(251,247,240,.98), rgba(251,247,240,.86), transparent) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
}

html body .afaq-app.afaq-investor-market-app .afaq-topbar__content,
html body .afaq-app.afaq-investor-opportunities-page .afaq-topbar__content {
    min-height: 78px !important;
    padding: 14px 18px !important;
    border-radius: 22px !important;
    border: 1px solid rgba(24,33,47,.10) !important;
    background:
        radial-gradient(circle at 12% 0%, rgba(197,154,82,.10), transparent 28%),
        linear-gradient(135deg, #ffffff 0%, #fffaf3 100%) !important;
    box-shadow: 0 18px 42px rgba(17,40,58,.072) !important;
    display: grid !important;
    grid-template-columns: minmax(0,1fr) auto auto !important;
    gap: 14px !important;
    align-items: center !important;
}

html body .afaq-app.afaq-investor-market-app .afaq-kicker,
html body .afaq-app.afaq-investor-opportunities-page .afaq-kicker {
    color: var(--op-gold-2) !important;
    -webkit-text-fill-color: var(--op-gold-2) !important;
    font-size: 10.5px !important;
    font-weight: 900 !important;
    margin: 0 0 4px !important;
}

html body .afaq-app.afaq-investor-market-app .afaq-page-title h1,
html body .afaq-app.afaq-investor-opportunities-page .afaq-page-title h1 {
    margin: 0 !important;
    color: var(--op-dark) !important;
    -webkit-text-fill-color: var(--op-dark) !important;
    font-size: 22px !important;
    line-height: 1.35 !important;
    font-weight: 900 !important;
}

html body .afaq-app.afaq-investor-market-app .afaq-page-title p,
html body .afaq-app.afaq-investor-opportunities-page .afaq-page-title p {
    margin: 5px 0 0 !important;
    color: rgba(24,33,47,.64) !important;
    -webkit-text-fill-color: rgba(24,33,47,.64) !important;
    font-size: 12.5px !important;
    line-height: 1.7 !important;
    font-weight: 700 !important;
}

/* ==========================================================================
   05) BUTTONS
   ========================================================================== */
html body .afaq-app.afaq-investor-market-app .afaq-btn,
html body .afaq-app.afaq-investor-opportunities-page .afaq-btn {
    min-height: 38px !important;
    padding: 8px 14px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(24,33,47,.10) !important;
    background: #ffffff !important;
    color: var(--op-dark) !important;
    -webkit-text-fill-color: var(--op-dark) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
    box-shadow: 0 8px 18px rgba(17,40,58,.055) !important;
}

html body .afaq-app.afaq-investor-market-app .afaq-btn--ghost,
html body .afaq-app.afaq-investor-opportunities-page .afaq-btn--ghost {
    background: #ffffff !important;
    border-color: rgba(24,33,47,.10) !important;
}

/* ==========================================================================
   06) MARKET WRAP
   ========================================================================== */
html body .afaq-app.afaq-investor-market-app .afaq-market-wrap,
html body .afaq-app.afaq-investor-opportunities-page .afaq-market-wrap {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    display: grid !important;
    gap: 12px !important;
}

/* ==========================================================================
   07) TOOLBAR - NO BLUE
   ========================================================================== */
html body .afaq-app.afaq-investor-market-app .afaq-market-toolbar,
html body .afaq-app.afaq-investor-opportunities-page .afaq-market-toolbar {
    width: 100% !important;
    border-radius: 22px !important;
    border: 1px solid rgba(24,33,47,.10) !important;
    background:
        radial-gradient(circle at 10% 0%, rgba(197,154,82,.08), transparent 24%),
        linear-gradient(135deg, #ffffff 0%, #fffaf3 100%) !important;
    padding: 14px !important;
    display: grid !important;
    grid-template-columns: minmax(0,1fr) 360px !important;
    gap: 10px !important;
    align-items: center !important;
    box-shadow: 0 12px 30px rgba(17,40,58,.059) !important;
}

html body .afaq-app.afaq-investor-market-app .afaq-market-filters,
html body .afaq-app.afaq-investor-opportunities-page .afaq-market-filters {
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(120px,1fr)) !important;
    gap: 9px !important;
    align-items: center !important;
}

html body .afaq-app.afaq-investor-market-app .afaq-market-search-row,
html body .afaq-app.afaq-investor-opportunities-page .afaq-market-search-row {
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0,1fr) 104px !important;
    gap: 9px !important;
    align-items: center !important;
}

html body .afaq-app.afaq-investor-market-app .afaq-market-select,
html body .afaq-app.afaq-investor-market-app .afaq-market-search,
html body .afaq-app.afaq-investor-opportunities-page .afaq-market-select,
html body .afaq-app.afaq-investor-opportunities-page .afaq-market-search {
    width: 100% !important;
    min-width: 0 !important;
    height: 44px !important;
    min-height: 44px !important;
    border-radius: 13px !important;
    border: 1px solid rgba(24,33,47,.12) !important;
    background: var(--op-dark) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size: 12.5px !important;
    line-height: 1.5 !important;
    font-weight: 850 !important;
    padding: 9px 12px !important;
    box-shadow: none !important;
    outline: none !important;
}

html body .afaq-app.afaq-investor-market-app .afaq-market-search::placeholder,
html body .afaq-app.afaq-investor-opportunities-page .afaq-market-search::placeholder {
    color: rgba(255,255,255,.62) !important;
    -webkit-text-fill-color: rgba(255,255,255,.62) !important;
}

html body .afaq-app.afaq-investor-market-app .afaq-market-select option,
html body .afaq-app.afaq-investor-opportunities-page .afaq-market-select option {
    background: #ffffff !important;
    color: var(--op-dark) !important;
}

html body .afaq-app.afaq-investor-market-app .afaq-market-filter-btn,
html body .afaq-app.afaq-investor-opportunities-page .afaq-market-filter-btn {
    min-height: 44px !important;
    height: 44px !important;
    padding: 0 18px !important;
    border-radius: 13px !important;
    border: 1px solid rgba(197,154,82,.35) !important;
    background: linear-gradient(135deg, var(--op-gold), var(--op-gold-2)) !important;
    color: #18212f !important;
    -webkit-text-fill-color: #18212f !important;
    font-size: 12.5px !important;
    font-weight: 900 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    box-shadow: 0 10px 22px rgba(197,154,82,.20) !important;
}

/* ==========================================================================
   08) META
   ========================================================================== */
html body .afaq-app.afaq-investor-market-app .afaq-market-meta,
html body .afaq-app.afaq-investor-opportunities-page .afaq-market-meta {
    padding: 0 4px !important;
    color: rgba(24,33,47,.62) !important;
    -webkit-text-fill-color: rgba(24,33,47,.62) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    font-size: 12px !important;
    font-weight: 800 !important;
}

html body .afaq-app.afaq-investor-market-app .afaq-market-meta b,
html body .afaq-app.afaq-investor-opportunities-page .afaq-market-meta b {
    color: var(--op-gold-2) !important;
    -webkit-text-fill-color: var(--op-gold-2) !important;
}

/* ==========================================================================
   09) OPPORTUNITY LIST + CARDS
   ========================================================================== */
html body .afaq-app.afaq-investor-market-app .afaq-market-list,
html body .afaq-app.afaq-investor-opportunities-page .afaq-market-list {
    width: 100% !important;
    display: grid !important;
    gap: 12px !important;
}

html body .afaq-app.afaq-investor-market-app .afaq-market-card,
html body .afaq-app.afaq-investor-opportunities-page .afaq-market-card {
    position: relative !important;
    min-height: 162px !important;
    width: 100% !important;
    border-radius: 18px !important;
    border: 1px solid rgba(24,33,47,.10) !important;
    background:
        radial-gradient(circle at 5% 0%, rgba(197,154,82,.08), transparent 28%),
        linear-gradient(135deg, #ffffff 0%, #fffaf3 100%) !important;
    box-shadow: 0 14px 34px rgba(17,40,58,.08) !important;
    padding: 16px !important;
    display: grid !important;
    grid-template-columns: 28px minmax(0,1fr) auto !important;
    grid-template-areas:
        "save body status"
        "stats stats stats"
        "foot foot foot" !important;
    gap: 12px 14px !important;
    overflow: hidden !important;
}

html body .afaq-app.afaq-investor-market-app .afaq-market-card__top,
html body .afaq-app.afaq-investor-opportunities-page .afaq-market-card__top {
    display: contents !important;
}

html body .afaq-app.afaq-investor-market-app .afaq-market-save,
html body .afaq-app.afaq-investor-opportunities-page .afaq-market-save {
    grid-area: save !important;
    width: 20px !important;
    height: 24px !important;
    margin-top: 2px !important;
    display: block !important;
    position: relative !important;
    color: var(--op-gold-2) !important;
    -webkit-text-fill-color: var(--op-gold-2) !important;
}

html body .afaq-app.afaq-investor-market-app .afaq-market-save::before,
html body .afaq-app.afaq-investor-opportunities-page .afaq-market-save::before {
    content: "\f330" !important;
    font-family: dashicons !important;
    color: var(--op-gold-2) !important;
    -webkit-text-fill-color: var(--op-gold-2) !important;
    font-size: 21px !important;
    line-height: 1 !important;
}

html body .afaq-app.afaq-investor-market-app .afaq-market-status,
html body .afaq-app.afaq-investor-opportunities-page .afaq-market-status {
    grid-area: status !important;
    justify-self: end !important;
    min-height: 27px !important;
    padding: 5px 13px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(22,131,77,.18) !important;
    background: rgba(22,131,77,.10) !important;
    color: #0f6b3d !important;
    -webkit-text-fill-color: #0f6b3d !important;
    font-size: 10.5px !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
}

html body .afaq-app.afaq-investor-market-app .afaq-market-card__body,
html body .afaq-app.afaq-investor-opportunities-page .afaq-market-card__body {
    grid-area: body !important;
    min-width: 0 !important;
}

html body .afaq-app.afaq-investor-market-app .afaq-market-card__body h2,
html body .afaq-app.afaq-investor-opportunities-page .afaq-market-card__body h2 {
    margin: 0 !important;
    color: var(--op-dark) !important;
    -webkit-text-fill-color: var(--op-dark) !important;
    font-size: 18px !important;
    line-height: 1.32 !important;
    font-weight: 900 !important;
}

html body .afaq-app.afaq-investor-market-app .afaq-market-card__sub,
html body .afaq-app.afaq-investor-opportunities-page .afaq-market-card__sub {
    margin-top: 6px !important;
    display: inline-flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 5px !important;
    color: rgba(24,33,47,.58) !important;
    -webkit-text-fill-color: rgba(24,33,47,.58) !important;
    font-size: 11px !important;
    font-weight: 800 !important;
}

html body .afaq-app.afaq-investor-market-app .afaq-market-card__sub .dashicons,
html body .afaq-app.afaq-investor-opportunities-page .afaq-market-card__sub .dashicons {
    color: var(--op-gold-2) !important;
    -webkit-text-fill-color: var(--op-gold-2) !important;
    font-size: 12px !important;
    width: 12px !important;
    height: 12px !important;
}

/* stats inside card */
html body .afaq-app.afaq-investor-market-app .afaq-market-stats,
html body .afaq-app.afaq-investor-opportunities-page .afaq-market-stats {
    grid-area: stats !important;
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0,1fr)) !important;
    border-top: 1px solid rgba(24,33,47,.08) !important;
    border-bottom: 1px solid rgba(24,33,47,.08) !important;
}

html body .afaq-app.afaq-investor-market-app .afaq-market-stat,
html body .afaq-app.afaq-investor-opportunities-page .afaq-market-stat {
    min-width: 0 !important;
    padding: 11px 8px 10px !important;
    border-inline-end: 1px solid rgba(24,33,47,.08) !important;
    text-align: center !important;
    display: grid !important;
    gap: 4px !important;
}

html body .afaq-app.afaq-investor-market-app .afaq-market-stat:last-child,
html body .afaq-app.afaq-investor-opportunities-page .afaq-market-stat:last-child {
    border-inline-end: 0 !important;
}

html body .afaq-app.afaq-investor-market-app .afaq-market-stat span,
html body .afaq-app.afaq-investor-opportunities-page .afaq-market-stat span {
    color: rgba(24,33,47,.50) !important;
    -webkit-text-fill-color: rgba(24,33,47,.50) !important;
    font-size: 9.5px !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

html body .afaq-app.afaq-investor-market-app .afaq-market-stat strong,
html body .afaq-app.afaq-investor-opportunities-page .afaq-market-stat strong {
    color: var(--op-dark) !important;
    -webkit-text-fill-color: var(--op-dark) !important;
    font-size: 12px !important;
    line-height: 1.25 !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

html body .afaq-app.afaq-investor-market-app .afaq-market-stat strong.is-gold,
html body .afaq-app.afaq-investor-opportunities-page .afaq-market-stat strong.is-gold {
    color: var(--op-gold-2) !important;
    -webkit-text-fill-color: var(--op-gold-2) !important;
}

/* foot */
html body .afaq-app.afaq-investor-market-app .afaq-market-card__foot,
html body .afaq-app.afaq-investor-opportunities-page .afaq-market-card__foot {
    grid-area: foot !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
}

html body .afaq-app.afaq-investor-market-app .afaq-market-detail-btn,
html body .afaq-app.afaq-investor-opportunities-page .afaq-market-detail-btn {
    min-height: 32px !important;
    padding: 0 14px !important;
    border-radius: 9px !important;
    border: 1px solid rgba(197,154,82,.42) !important;
    background: rgba(197,154,82,.09) !important;
    color: var(--op-gold-2) !important;
    -webkit-text-fill-color: var(--op-gold-2) !important;
    font-size: 10.5px !important;
    font-weight: 900 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

html body .afaq-app.afaq-investor-market-app .afaq-market-date,
html body .afaq-app.afaq-investor-opportunities-page .afaq-market-date {
    color: rgba(24,33,47,.54) !important;
    -webkit-text-fill-color: rgba(24,33,47,.54) !important;
    font-size: 10.5px !important;
    font-weight: 800 !important;
}

/* empty */
html body .afaq-app.afaq-investor-market-app .afaq-market-empty,
html body .afaq-app.afaq-investor-opportunities-page .afaq-market-empty {
    min-height: 150px !important;
    padding: 28px !important;
    border-radius: 18px !important;
    border: 1px dashed rgba(197,154,82,.32) !important;
    background: rgba(197,154,82,.045) !important;
    color: #657287 !important;
    -webkit-text-fill-color: #657287 !important;
    display: grid !important;
    place-items: center !important;
    text-align: center !important;
    font-size: 13px !important;
    font-weight: 900 !important;
}

/* pagination */
html body .afaq-app.afaq-investor-market-app .afaq-market-pagination,
html body .afaq-app.afaq-investor-opportunities-page .afaq-market-pagination {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
}

html body .afaq-app.afaq-investor-market-app .afaq-market-pagination a,
html body .afaq-app.afaq-investor-opportunities-page .afaq-market-pagination a {
    min-width: 28px !important;
    height: 28px !important;
    border-radius: 8px !important;
    color: #657287 !important;
    -webkit-text-fill-color: #657287 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 11px !important;
    font-weight: 900 !important;
}

html body .afaq-app.afaq-investor-market-app .afaq-market-pagination a.is-current,
html body .afaq-app.afaq-investor-opportunities-page .afaq-market-pagination a.is-current {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background: linear-gradient(135deg, var(--op-gold), var(--op-gold-2)) !important;
}

/* ==========================================================================
   10) MOBILE
   ========================================================================== */
@media screen and (max-width: 1024px) {
    html,
    html body {
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }

    html body .afaq-app.afaq-investor-market-app .afaq-main,
    html body .afaq-app.afaq-investor-opportunities-page .afaq-main {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }

    html body .afaq-app.afaq-investor-market-app .afaq-sidebar,
    html body .afaq-app.afaq-investor-opportunities-page .afaq-sidebar {
        transform: translateX(100%) !important;
    }

    html body .afaq-app.afaq-investor-market-app.is-sidebar-open .afaq-sidebar,
    body.afaq-sidebar-open .afaq-app.afaq-investor-market-app .afaq-sidebar,
    html body .afaq-app.afaq-investor-opportunities-page.is-sidebar-open .afaq-sidebar,
    body.afaq-sidebar-open .afaq-app.afaq-investor-opportunities-page .afaq-sidebar {
        transform: translateX(0) !important;
    }

    html body .afaq-app.afaq-investor-market-app [data-afaq-pwa-install],
    html body .afaq-app.afaq-investor-market-app .afaq-pwa-install,
    html body .afaq-app.afaq-investor-market-app .afaq-install-pwa,
    html body .afaq-app.afaq-investor-market-app .afaq-install-button,
    html body .afaq-app.afaq-investor-opportunities-page [data-afaq-pwa-install],
    html body .afaq-app.afaq-investor-opportunities-page .afaq-pwa-install,
    html body .afaq-app.afaq-investor-opportunities-page .afaq-install-pwa,
    html body .afaq-app.afaq-investor-opportunities-page .afaq-install-button {
        display: none !important;
    }
}

@media screen and (max-width: 760px) {
    html body .afaq-app.afaq-investor-market-app,
    html body .afaq-app.afaq-investor-opportunities-page {
        background: linear-gradient(180deg, #fbf7f0 0%, #ffffff 52%, #fffaf3 100%) !important;
    }

    html body .afaq-app.afaq-investor-market-app .afaq-topbar,
    html body .afaq-app.afaq-investor-opportunities-page .afaq-topbar {
        padding: 4px 5px 3px !important;
    }

    html body .afaq-app.afaq-investor-market-app .afaq-topbar__content,
    html body .afaq-app.afaq-investor-opportunities-page .afaq-topbar__content {
        min-height: 54px !important;
        padding: 7px 8px !important;
        border-radius: 14px !important;
        grid-template-columns: minmax(0,1fr) 40px !important;
        grid-template-areas: "title toggle" !important;
        gap: 8px !important;
    }

    html body .afaq-app.afaq-investor-market-app .afaq-mobile-menu-toggle,
    html body .afaq-app.afaq-investor-opportunities-page .afaq-mobile-menu-toggle {
        grid-area: toggle !important;
        justify-self: end !important;
        display: block !important;
        width: 40px !important;
        min-width: 40px !important;
        height: 40px !important;
        border: 1px solid rgba(197,154,82,.35) !important;
        border-radius: 13px !important;
        background-color: var(--op-gold) !important;
        background-image:
            linear-gradient(#ffffff,#ffffff),
            linear-gradient(#ffffff,#ffffff),
            linear-gradient(#ffffff,#ffffff),
            linear-gradient(135deg,#c59a52,#b9853e) !important;
        background-size: 18px 2px, 13px 2px, 18px 2px, 100% 100% !important;
        background-position: center calc(50% - 7px), center center, center calc(50% + 7px), center center !important;
        background-repeat: no-repeat !important;
        font-size: 0 !important;
        color: transparent !important;
        text-indent: -9999px !important;
        overflow: hidden !important;
    }

    html body .afaq-app.afaq-investor-market-app .afaq-page-title,
    html body .afaq-app.afaq-investor-opportunities-page .afaq-page-title {
        grid-area: title !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }

    html body .afaq-app.afaq-investor-market-app .afaq-page-title h1,
    html body .afaq-app.afaq-investor-opportunities-page .afaq-page-title h1 {
        font-size: 16px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    html body .afaq-app.afaq-investor-market-app .afaq-page-title p,
    html body .afaq-app.afaq-investor-market-app .afaq-topbar__actions,
    html body .afaq-app.afaq-investor-market-app .afaq-header-actions,
    html body .afaq-app.afaq-investor-market-app .afaq-user-card,
    html body .afaq-app.afaq-investor-opportunities-page .afaq-page-title p,
    html body .afaq-app.afaq-investor-opportunities-page .afaq-topbar__actions,
    html body .afaq-app.afaq-investor-opportunities-page .afaq-header-actions,
    html body .afaq-app.afaq-investor-opportunities-page .afaq-user-card {
        display: none !important;
    }

    html body .afaq-app.afaq-investor-market-app .afaq-content,
    html body .afaq-app.afaq-investor-market-app .afaq-content--dashboard,
    html body .afaq-app.afaq-investor-opportunities-page .afaq-content,
    html body .afaq-app.afaq-investor-opportunities-page .afaq-content--dashboard {
        padding: 6px 5px 18px !important;
    }

    html body .afaq-app.afaq-investor-market-app .afaq-market-wrap,
    html body .afaq-app.afaq-investor-opportunities-page .afaq-market-wrap {
        gap: 7px !important;
    }

    html body .afaq-app.afaq-investor-market-app .afaq-market-toolbar,
    html body .afaq-app.afaq-investor-opportunities-page .afaq-market-toolbar {
        padding: 8px !important;
        border-radius: 13px !important;
        grid-template-columns: 1fr !important;
        gap: 6px !important;
    }

    html body .afaq-app.afaq-investor-market-app .afaq-market-search-row,
    html body .afaq-app.afaq-investor-opportunities-page .afaq-market-search-row {
        grid-template-columns: minmax(0,1fr) 72px !important;
        gap: 5px !important;
    }

    html body .afaq-app.afaq-investor-market-app .afaq-market-filters,
    html body .afaq-app.afaq-investor-opportunities-page .afaq-market-filters {
        grid-template-columns: repeat(2, minmax(0,1fr)) !important;
        gap: 5px !important;
    }

    html body .afaq-app.afaq-investor-market-app .afaq-market-select,
    html body .afaq-app.afaq-investor-market-app .afaq-market-search,
    html body .afaq-app.afaq-investor-market-app .afaq-market-filter-btn,
    html body .afaq-app.afaq-investor-opportunities-page .afaq-market-select,
    html body .afaq-app.afaq-investor-opportunities-page .afaq-market-search,
    html body .afaq-app.afaq-investor-opportunities-page .afaq-market-filter-btn {
        height: 34px !important;
        min-height: 34px !important;
        border-radius: 9px !important;
        font-size: 8px !important;
        padding: 6px 8px !important;
    }

    html body .afaq-app.afaq-investor-market-app .afaq-market-meta,
    html body .afaq-app.afaq-investor-opportunities-page .afaq-market-meta {
        font-size: 7.5px !important;
        padding-inline: 2px !important;
    }

    html body .afaq-app.afaq-investor-market-app .afaq-market-list,
    html body .afaq-app.afaq-investor-opportunities-page .afaq-market-list {
        gap: 6px !important;
    }

    html body .afaq-app.afaq-investor-market-app .afaq-market-card,
    html body .afaq-app.afaq-investor-opportunities-page .afaq-market-card {
        min-height: 128px !important;
        padding: 8px !important;
        border-radius: 11px !important;
        grid-template-columns: 18px minmax(0,1fr) auto !important;
        gap: 6px !important;
    }

    html body .afaq-app.afaq-investor-market-app .afaq-market-status,
    html body .afaq-app.afaq-investor-opportunities-page .afaq-market-status {
        min-height: 19px !important;
        padding: 3px 7px !important;
        font-size: 6.7px !important;
    }

    html body .afaq-app.afaq-investor-market-app .afaq-market-card__body h2,
    html body .afaq-app.afaq-investor-opportunities-page .afaq-market-card__body h2 {
        font-size: 11px !important;
        line-height: 1.17 !important;
    }

    html body .afaq-app.afaq-investor-market-app .afaq-market-card__sub,
    html body .afaq-app.afaq-investor-opportunities-page .afaq-market-card__sub {
        margin-top: 3px !important;
        font-size: 6.8px !important;
        gap: 3px !important;
    }

    html body .afaq-app.afaq-investor-market-app .afaq-market-stats,
    html body .afaq-app.afaq-investor-opportunities-page .afaq-market-stats {
        grid-template-columns: repeat(5, minmax(0,1fr)) !important;
    }

    html body .afaq-app.afaq-investor-market-app .afaq-market-stat,
    html body .afaq-app.afaq-investor-opportunities-page .afaq-market-stat {
        padding: 5px 2px !important;
        gap: 2px !important;
    }

    html body .afaq-app.afaq-investor-market-app .afaq-market-stat span,
    html body .afaq-app.afaq-investor-opportunities-page .afaq-market-stat span {
        font-size: 4.8px !important;
    }

    html body .afaq-app.afaq-investor-market-app .afaq-market-stat strong,
    html body .afaq-app.afaq-investor-opportunities-page .afaq-market-stat strong {
        font-size: 5.8px !important;
    }

    html body .afaq-app.afaq-investor-market-app .afaq-market-detail-btn,
    html body .afaq-app.afaq-investor-opportunities-page .afaq-market-detail-btn {
        min-height: 21px !important;
        padding: 0 7px !important;
        border-radius: 6px !important;
        font-size: 6.8px !important;
    }

    html body .afaq-app.afaq-investor-market-app .afaq-market-date,
    html body .afaq-app.afaq-investor-opportunities-page .afaq-market-date {
        font-size: 5.9px !important;
        white-space: nowrap !important;
    }
}

@media screen and (max-width: 430px) {
    html body .afaq-app.afaq-investor-market-app .afaq-market-stat span,
    html body .afaq-app.afaq-investor-opportunities-page .afaq-market-stat span {
        font-size: 4.4px !important;
    }

    html body .afaq-app.afaq-investor-market-app .afaq-market-stat strong,
    html body .afaq-app.afaq-investor-opportunities-page .afaq-market-stat strong {
        font-size: 5.3px !important;
    }
}

/* ==========================================================================
   HARD COLOR LOCK
   ========================================================================== */
html body .afaq-app.afaq-investor-market-app .afaq-market-wrap,
html body .afaq-app.afaq-investor-market-app .afaq-market-wrap *,
html body .afaq-app.afaq-investor-opportunities-page .afaq-market-wrap,
html body .afaq-app.afaq-investor-opportunities-page .afaq-market-wrap * {
    text-shadow: none !important;
}


/* ==========================================================================
   V4 WORLD-CLASS POLISH - OPPORTUNITIES PAGE
   ========================================================================== */

html body .afaq-app.afaq-investor-market-app,
html body .afaq-app.afaq-investor-opportunities-page {
    --op-v4-card: rgba(255,255,255,.94);
    --op-v4-line: rgba(24,33,47,.08);
    --op-v4-gold-soft: rgba(197,154,82,.12);
    --op-v4-green-soft: rgba(22,131,77,.10);
    background:
        radial-gradient(circle at 10% -10%, rgba(197,154,82,.13), transparent 320px),
        radial-gradient(circle at 88% -14%, rgba(17,90,75,.06), transparent 280px),
        linear-gradient(135deg, #fbf7f0 0%, #ffffff 46%, #fffaf3 100%) !important;
}

/* Header */
html body .afaq-app.afaq-investor-market-app .afaq-topbar__content,
html body .afaq-app.afaq-investor-opportunities-page .afaq-topbar__content {
    min-height: 72px !important;
    border-radius: 24px !important;
    border: 1px solid rgba(197,154,82,.16) !important;
    background:
        radial-gradient(circle at 10% 0%, rgba(197,154,82,.11), transparent 34%),
        linear-gradient(135deg, rgba(255,255,255,.96), rgba(255,250,243,.93)) !important;
    box-shadow: 0 18px 46px rgba(17,40,58,.07), inset 0 1px 0 rgba(255,255,255,.90) !important;
}

html body .afaq-app.afaq-investor-market-app .afaq-page-title h1,
html body .afaq-app.afaq-investor-opportunities-page .afaq-page-title h1 {
    font-size: clamp(22px, 1.3vw, 30px) !important;
    letter-spacing: -.01em !important;
}

/* Toolbar */
html body .afaq-app.afaq-investor-market-app .afaq-market-toolbar,
html body .afaq-app.afaq-investor-opportunities-page .afaq-market-toolbar {
    border-radius: 24px !important;
    padding: 12px !important;
    gap: 9px !important;
    background:
        radial-gradient(circle at 12% 0%, rgba(197,154,82,.10), transparent 34%),
        linear-gradient(135deg, rgba(255,255,255,.94), rgba(255,250,243,.91)) !important;
    border: 1px solid rgba(197,154,82,.16) !important;
    box-shadow: 0 14px 34px rgba(17,40,58,.06), inset 0 1px 0 rgba(255,255,255,.88) !important;
}

html body .afaq-app.afaq-investor-market-app .afaq-market-select,
html body .afaq-app.afaq-investor-market-app .afaq-market-search,
html body .afaq-app.afaq-investor-opportunities-page .afaq-market-select,
html body .afaq-app.afaq-investor-opportunities-page .afaq-market-search {
    height: 42px !important;
    min-height: 42px !important;
    border-radius: 13px !important;
    background: linear-gradient(135deg, #18212f, #101827) !important;
    border: 1px solid rgba(24,33,47,.16) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 6px 16px rgba(17,40,58,.05) !important;
    font-size: 12px !important;
    font-weight: 900 !important;
}

html body .afaq-app.afaq-investor-market-app .afaq-market-filter-btn,
html body .afaq-app.afaq-investor-opportunities-page .afaq-market-filter-btn {
    height: 42px !important;
    min-height: 42px !important;
    border-radius: 14px !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background:
        radial-gradient(circle at 25% 15%, rgba(255,255,255,.22), transparent 34%),
        linear-gradient(135deg, #c59a52, #b9853e) !important;
    box-shadow: 0 12px 24px rgba(197,154,82,.25) !important;
}

/* Cards */
html body .afaq-app.afaq-investor-market-app .afaq-market-card,
html body .afaq-app.afaq-investor-opportunities-page .afaq-market-card {
    min-height: 154px !important;
    border-radius: 24px !important;
    padding: 16px 16px 14px !important;
    border: 1px solid rgba(197,154,82,.18) !important;
    background:
        radial-gradient(circle at 4% 0%, rgba(197,154,82,.11), transparent 34%),
        radial-gradient(circle at 100% 0%, rgba(17,90,75,.055), transparent 28%),
        linear-gradient(135deg, rgba(255,255,255,.96), rgba(255,250,243,.92)) !important;
    box-shadow: 0 18px 42px rgba(17,40,58,.07), inset 0 1px 0 rgba(255,255,255,.94) !important;
    grid-template-columns: 26px minmax(0,1fr) auto !important;
    gap: 12px 12px !important;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease !important;
}

html body .afaq-app.afaq-investor-market-app .afaq-market-card:hover,
html body .afaq-app.afaq-investor-opportunities-page .afaq-market-card:hover {
    transform: translateY(-2px) !important;
    border-color: rgba(197,154,82,.34) !important;
    box-shadow: 0 24px 54px rgba(17,40,58,.10), inset 0 1px 0 rgba(255,255,255,.94) !important;
}

html body .afaq-app.afaq-investor-market-app .afaq-market-card::before,
html body .afaq-app.afaq-investor-opportunities-page .afaq-market-card::before {
    content: "" !important;
    position: absolute !important;
    inset-inline-start: 0 !important;
    top: 18px !important;
    bottom: 18px !important;
    width: 4px !important;
    border-radius: 999px !important;
    background: linear-gradient(180deg, #c59a52, rgba(197,154,82,0)) !important;
    opacity: .95 !important;
}

/* Card title + status */
html body .afaq-app.afaq-investor-market-app .afaq-market-card__body h2,
html body .afaq-app.afaq-investor-opportunities-page .afaq-market-card__body h2 {
    font-size: 20px !important;
    line-height: 1.25 !important;
    font-weight: 950 !important;
    color: #121a26 !important;
    -webkit-text-fill-color: #121a26 !important;
}

html body .afaq-app.afaq-investor-market-app .afaq-market-card__sub,
html body .afaq-app.afaq-investor-opportunities-page .afaq-market-card__sub {
    margin-top: 5px !important;
    font-size: 11px !important;
    color: rgba(24,33,47,.60) !important;
    -webkit-text-fill-color: rgba(24,33,47,.60) !important;
}

html body .afaq-app.afaq-investor-market-app .afaq-market-status,
html body .afaq-app.afaq-investor-opportunities-page .afaq-market-status {
    min-height: 34px !important;
    padding: 7px 15px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(22,131,77,.18) !important;
    background: radial-gradient(circle at 22% 15%, rgba(255,255,255,.55), transparent 35%), rgba(22,131,77,.105) !important;
    color: #0f6b3d !important;
    -webkit-text-fill-color: #0f6b3d !important;
    font-size: 11px !important;
    font-weight: 950 !important;
}

/* Stats */
html body .afaq-app.afaq-investor-market-app .afaq-market-stats,
html body .afaq-app.afaq-investor-opportunities-page .afaq-market-stats {
    border-top: 1px solid rgba(24,33,47,.075) !important;
    border-bottom: 1px solid rgba(24,33,47,.075) !important;
    background: rgba(255,255,255,.42) !important;
    border-radius: 16px !important;
    overflow: hidden !important;
}

html body .afaq-app.afaq-investor-market-app .afaq-market-stat,
html body .afaq-app.afaq-investor-opportunities-page .afaq-market-stat {
    padding: 11px 8px !important;
    border-inline-end: 1px solid rgba(24,33,47,.07) !important;
    background: rgba(255,255,255,.20) !important;
}

html body .afaq-app.afaq-investor-market-app .afaq-market-stat span,
html body .afaq-app.afaq-investor-opportunities-page .afaq-market-stat span {
    font-size: 10px !important;
    font-weight: 850 !important;
    color: rgba(24,33,47,.54) !important;
    -webkit-text-fill-color: rgba(24,33,47,.54) !important;
}

html body .afaq-app.afaq-investor-market-app .afaq-market-stat strong,
html body .afaq-app.afaq-investor-opportunities-page .afaq-market-stat strong {
    font-size: 13px !important;
    font-weight: 950 !important;
    color: #121a26 !important;
    -webkit-text-fill-color: #121a26 !important;
}

html body .afaq-app.afaq-investor-market-app .afaq-market-stat strong.is-gold,
html body .afaq-app.afaq-investor-opportunities-page .afaq-market-stat strong.is-gold {
    color: #b9853e !important;
    -webkit-text-fill-color: #b9853e !important;
}

/* Detail button */
html body .afaq-app.afaq-investor-market-app .afaq-market-detail-btn,
html body .afaq-app.afaq-investor-opportunities-page .afaq-market-detail-btn {
    min-height: 36px !important;
    padding: 0 16px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(197,154,82,.42) !important;
    background: radial-gradient(circle at 25% 15%, rgba(255,255,255,.35), transparent 34%), rgba(197,154,82,.10) !important;
    color: #b9853e !important;
    -webkit-text-fill-color: #b9853e !important;
    font-size: 11px !important;
    font-weight: 950 !important;
}

html body .afaq-app.afaq-investor-market-app .afaq-market-date,
html body .afaq-app.afaq-investor-opportunities-page .afaq-market-date {
    color: rgba(24,33,47,.52) !important;
    -webkit-text-fill-color: rgba(24,33,47,.52) !important;
    font-size: 11px !important;
    font-weight: 850 !important;
}

/* Empty */
html body .afaq-app.afaq-investor-market-app .afaq-market-empty,
html body .afaq-app.afaq-investor-opportunities-page .afaq-market-empty {
    min-height: 180px !important;
    border-radius: 24px !important;
    border: 1px dashed rgba(197,154,82,.34) !important;
    background: radial-gradient(circle at 50% 0%, rgba(197,154,82,.10), transparent 38%), rgba(255,255,255,.56) !important;
    color: #657287 !important;
    -webkit-text-fill-color: #657287 !important;
    font-size: 14px !important;
    font-weight: 950 !important;
}

/* ==========================================================================
   V4 MOBILE
   ========================================================================== */
@media screen and (max-width: 760px) {
    html body .afaq-app.afaq-investor-market-app .afaq-topbar__content,
    html body .afaq-app.afaq-investor-opportunities-page .afaq-topbar__content {
        min-height: 54px !important;
        padding: 7px 8px !important;
        border-radius: 15px !important;
    }

    html body .afaq-app.afaq-investor-market-app .afaq-page-title h1,
    html body .afaq-app.afaq-investor-opportunities-page .afaq-page-title h1 {
        font-size: 16px !important;
    }

    html body .afaq-app.afaq-investor-market-app .afaq-content,
    html body .afaq-app.afaq-investor-market-app .afaq-content--dashboard,
    html body .afaq-app.afaq-investor-opportunities-page .afaq-content,
    html body .afaq-app.afaq-investor-opportunities-page .afaq-content--dashboard {
        padding: 6px 5px 18px !important;
    }

    html body .afaq-app.afaq-investor-market-app .afaq-market-toolbar,
    html body .afaq-app.afaq-investor-opportunities-page .afaq-market-toolbar {
        padding: 8px !important;
        border-radius: 15px !important;
        grid-template-columns: 1fr !important;
        gap: 6px !important;
    }

    html body .afaq-app.afaq-investor-market-app .afaq-market-search-row,
    html body .afaq-app.afaq-investor-opportunities-page .afaq-market-search-row {
        grid-template-columns: minmax(0,1fr) 74px !important;
        gap: 6px !important;
    }

    html body .afaq-app.afaq-investor-market-app .afaq-market-filters,
    html body .afaq-app.afaq-investor-opportunities-page .afaq-market-filters {
        grid-template-columns: repeat(2, minmax(0,1fr)) !important;
        gap: 6px !important;
    }

    html body .afaq-app.afaq-investor-market-app .afaq-market-select,
    html body .afaq-app.afaq-investor-market-app .afaq-market-search,
    html body .afaq-app.afaq-investor-market-app .afaq-market-filter-btn,
    html body .afaq-app.afaq-investor-opportunities-page .afaq-market-select,
    html body .afaq-app.afaq-investor-opportunities-page .afaq-market-search,
    html body .afaq-app.afaq-investor-opportunities-page .afaq-market-filter-btn {
        height: 35px !important;
        min-height: 35px !important;
        border-radius: 10px !important;
        font-size: 8.4px !important;
        padding: 6px 8px !important;
    }

    html body .afaq-app.afaq-investor-market-app .afaq-market-meta,
    html body .afaq-app.afaq-investor-opportunities-page .afaq-market-meta {
        font-size: 7.8px !important;
    }

    html body .afaq-app.afaq-investor-market-app .afaq-market-card,
    html body .afaq-app.afaq-investor-opportunities-page .afaq-market-card {
        min-height: 136px !important;
        padding: 9px !important;
        border-radius: 14px !important;
        grid-template-columns: 18px minmax(0,1fr) auto !important;
        gap: 6px !important;
    }

    html body .afaq-app.afaq-investor-market-app .afaq-market-card::before,
    html body .afaq-app.afaq-investor-opportunities-page .afaq-market-card::before {
        top: 12px !important;
        bottom: 12px !important;
        width: 3px !important;
    }

    html body .afaq-app.afaq-investor-market-app .afaq-market-save::before,
    html body .afaq-app.afaq-investor-opportunities-page .afaq-market-save::before {
        font-size: 17px !important;
    }

    html body .afaq-app.afaq-investor-market-app .afaq-market-status,
    html body .afaq-app.afaq-investor-opportunities-page .afaq-market-status {
        min-height: 23px !important;
        padding: 4px 8px !important;
        font-size: 7px !important;
    }

    html body .afaq-app.afaq-investor-market-app .afaq-market-card__body h2,
    html body .afaq-app.afaq-investor-opportunities-page .afaq-market-card__body h2 {
        font-size: 12px !important;
        line-height: 1.18 !important;
    }

    html body .afaq-app.afaq-investor-market-app .afaq-market-card__sub,
    html body .afaq-app.afaq-investor-opportunities-page .afaq-market-card__sub {
        margin-top: 3px !important;
        font-size: 7px !important;
        gap: 3px !important;
    }

    html body .afaq-app.afaq-investor-market-app .afaq-market-stats,
    html body .afaq-app.afaq-investor-opportunities-page .afaq-market-stats {
        border-radius: 10px !important;
        grid-template-columns: repeat(5, minmax(0,1fr)) !important;
    }

    html body .afaq-app.afaq-investor-market-app .afaq-market-stat,
    html body .afaq-app.afaq-investor-opportunities-page .afaq-market-stat {
        padding: 5px 2px !important;
        gap: 2px !important;
    }

    html body .afaq-app.afaq-investor-market-app .afaq-market-stat span,
    html body .afaq-app.afaq-investor-opportunities-page .afaq-market-stat span {
        font-size: 4.9px !important;
    }

    html body .afaq-app.afaq-investor-market-app .afaq-market-stat strong,
    html body .afaq-app.afaq-investor-opportunities-page .afaq-market-stat strong {
        font-size: 5.8px !important;
    }

    html body .afaq-app.afaq-investor-market-app .afaq-market-detail-btn,
    html body .afaq-app.afaq-investor-opportunities-page .afaq-market-detail-btn {
        min-height: 23px !important;
        padding: 0 8px !important;
        border-radius: 8px !important;
        font-size: 6.8px !important;
    }

    html body .afaq-app.afaq-investor-market-app .afaq-market-date,
    html body .afaq-app.afaq-investor-opportunities-page .afaq-market-date {
        font-size: 6px !important;
        white-space: nowrap !important;
    }
}

@media screen and (max-width: 430px) {
    html body .afaq-app.afaq-investor-market-app .afaq-market-stat span,
    html body .afaq-app.afaq-investor-opportunities-page .afaq-market-stat span {
        font-size: 4.4px !important;
    }

    html body .afaq-app.afaq-investor-market-app .afaq-market-stat strong,
    html body .afaq-app.afaq-investor-opportunities-page .afaq-market-stat strong {
        font-size: 5.2px !important;
    }
}



/* ==========================================================================
   V5 FINAL FIX - OPPORTUNITIES CARD RESPONSIVE + STATUS + DETAILS STYLE
   ========================================================================== */

/* ===== Desktop card cleanup ===== */
html body .afaq-app.afaq-investor-market-app .afaq-market-card,
html body .afaq-app.afaq-investor-opportunities-page .afaq-market-card {
    min-height: auto !important;
    padding: 18px 18px 15px !important;
    border-radius: 24px !important;
    border: 1px solid rgba(197,154,82,.20) !important;
    background:
        radial-gradient(circle at 0% 0%, rgba(197,154,82,.11), transparent 32%),
        radial-gradient(circle at 100% 0%, rgba(17,90,75,.055), transparent 28%),
        linear-gradient(135deg, rgba(255,255,255,.98), rgba(255,250,243,.94)) !important;
    box-shadow: 0 18px 46px rgba(17,40,58,.075), inset 0 1px 0 rgba(255,255,255,.96) !important;
    grid-template-columns: 30px minmax(0, 1fr) auto !important;
    grid-template-areas:
        "save body status"
        "stats stats stats"
        "foot foot foot" !important;
    gap: 14px 14px !important;
    overflow: hidden !important;
}

html body .afaq-app.afaq-investor-market-app .afaq-market-card::before,
html body .afaq-app.afaq-investor-opportunities-page .afaq-market-card::before {
    content: "" !important;
    position: absolute !important;
    inset-inline-start: 0 !important;
    top: 20px !important;
    bottom: 20px !important;
    width: 4px !important;
    border-radius: 999px !important;
    background: linear-gradient(180deg, #c59a52, rgba(197,154,82,0)) !important;
    opacity: .95 !important;
}

/* ===== Title/subtitle ===== */
html body .afaq-app.afaq-investor-market-app .afaq-market-card__body h2,
html body .afaq-app.afaq-investor-opportunities-page .afaq-market-card__body h2 {
    margin: 0 !important;
    color: #121a26 !important;
    -webkit-text-fill-color: #121a26 !important;
    font-size: 21px !important;
    line-height: 1.25 !important;
    font-weight: 950 !important;
    letter-spacing: -.01em !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
}

html body .afaq-app.afaq-investor-market-app .afaq-market-card__sub,
html body .afaq-app.afaq-investor-opportunities-page .afaq-market-card__sub {
    margin-top: 7px !important;
    color: rgba(24,33,47,.60) !important;
    -webkit-text-fill-color: rgba(24,33,47,.60) !important;
    font-size: 11.5px !important;
    line-height: 1.45 !important;
    font-weight: 850 !important;
    gap: 5px !important;
}

/* ===== Status pill fix ===== */
html body .afaq-app.afaq-investor-market-app .afaq-market-status,
html body .afaq-app.afaq-investor-opportunities-page .afaq-market-status {
    grid-area: status !important;
    justify-self: end !important;
    align-self: start !important;
    width: auto !important;
    min-width: 118px !important;
    max-width: 180px !important;
    min-height: 40px !important;
    padding: 8px 16px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(22,131,77,.20) !important;
    background:
        radial-gradient(circle at 25% 14%, rgba(255,255,255,.58), transparent 36%),
        linear-gradient(135deg, rgba(22,131,77,.13), rgba(22,131,77,.055)) !important;
    color: #0f6b3d !important;
    -webkit-text-fill-color: #0f6b3d !important;
    font-size: 11.5px !important;
    line-height: 1.2 !important;
    font-weight: 950 !important;
    white-space: nowrap !important;
    text-align: center !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 10px 22px rgba(22,131,77,.08), inset 0 1px 0 rgba(255,255,255,.82) !important;
}

/* ===== Stats grid fix ===== */
html body .afaq-app.afaq-investor-market-app .afaq-market-stats,
html body .afaq-app.afaq-investor-opportunities-page .afaq-market-stats {
    grid-area: stats !important;
    width: 100% !important;
    margin-top: 2px !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    border: 1px solid rgba(24,33,47,.075) !important;
    border-radius: 18px !important;
    background: rgba(255,255,255,.52) !important;
    overflow: hidden !important;
}

html body .afaq-app.afaq-investor-market-app .afaq-market-stat,
html body .afaq-app.afaq-investor-opportunities-page .afaq-market-stat {
    min-width: 0 !important;
    min-height: 58px !important;
    padding: 10px 7px !important;
    border-inline-end: 1px solid rgba(24,33,47,.07) !important;
    display: grid !important;
    align-content: center !important;
    justify-items: center !important;
    gap: 4px !important;
    text-align: center !important;
    background: rgba(255,255,255,.20) !important;
}

html body .afaq-app.afaq-investor-market-app .afaq-market-stat span,
html body .afaq-app.afaq-investor-opportunities-page .afaq-market-stat span {
    width: 100% !important;
    color: rgba(24,33,47,.54) !important;
    -webkit-text-fill-color: rgba(24,33,47,.54) !important;
    font-size: 9.8px !important;
    line-height: 1.25 !important;
    font-weight: 850 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
}

html body .afaq-app.afaq-investor-market-app .afaq-market-stat strong,
html body .afaq-app.afaq-investor-opportunities-page .afaq-market-stat strong {
    width: 100% !important;
    color: #121a26 !important;
    -webkit-text-fill-color: #121a26 !important;
    font-size: 12.5px !important;
    line-height: 1.2 !important;
    font-weight: 950 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
}

html body .afaq-app.afaq-investor-market-app .afaq-market-stat strong.is-gold,
html body .afaq-app.afaq-investor-opportunities-page .afaq-market-stat strong.is-gold {
    color: #b9853e !important;
    -webkit-text-fill-color: #b9853e !important;
}

/* ===== Bottom row ===== */
html body .afaq-app.afaq-investor-market-app .afaq-market-card__foot,
html body .afaq-app.afaq-investor-opportunities-page .afaq-market-card__foot {
    grid-area: foot !important;
    padding-top: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
}

html body .afaq-app.afaq-investor-market-app .afaq-market-detail-btn,
html body .afaq-app.afaq-investor-opportunities-page .afaq-market-detail-btn {
    min-width: 112px !important;
    min-height: 38px !important;
    padding: 0 17px !important;
    border-radius: 13px !important;
    border: 1px solid rgba(197,154,82,.42) !important;
    background: radial-gradient(circle at 25% 14%, rgba(255,255,255,.38), transparent 35%), rgba(197,154,82,.10) !important;
    color: #b9853e !important;
    -webkit-text-fill-color: #b9853e !important;
    font-size: 11.5px !important;
    line-height: 1.2 !important;
    font-weight: 950 !important;
}

html body .afaq-app.afaq-investor-market-app .afaq-market-date,
html body .afaq-app.afaq-investor-opportunities-page .afaq-market-date {
    color: rgba(24,33,47,.54) !important;
    -webkit-text-fill-color: rgba(24,33,47,.54) !important;
    font-size: 11px !important;
    line-height: 1.35 !important;
    font-weight: 850 !important;
    text-align: left !important;
}

/* ===== Details page status if same pill is used there ===== */
html body .afaq-app.afaq-sultan-details-page .afaq-market-status,
html body .afaq-app.afaq-sultan-details-page .afaq-sultan-status,
html body .afaq-app.afaq-sultan-details-page .afaq-status {
    width: auto !important;
    min-width: 112px !important;
    min-height: 34px !important;
    padding: 7px 14px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(22,131,77,.20) !important;
    background:
        radial-gradient(circle at 25% 14%, rgba(255,255,255,.58), transparent 36%),
        linear-gradient(135deg, rgba(22,131,77,.13), rgba(22,131,77,.055)) !important;
    color: #0f6b3d !important;
    -webkit-text-fill-color: #0f6b3d !important;
    font-size: 10.5px !important;
    font-weight: 950 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* ===== Mobile: vertical card to avoid compression ===== */
@media screen and (max-width: 760px) {
    html body .afaq-app.afaq-investor-market-app .afaq-market-card,
    html body .afaq-app.afaq-investor-opportunities-page .afaq-market-card {
        min-height: auto !important;
        padding: 12px !important;
        border-radius: 18px !important;
        grid-template-columns: 22px minmax(0, 1fr) !important;
        grid-template-areas:
            "save body"
            "status status"
            "stats stats"
            "foot foot" !important;
        gap: 9px 9px !important;
    }

    html body .afaq-app.afaq-investor-market-app .afaq-market-card::before,
    html body .afaq-app.afaq-investor-opportunities-page .afaq-market-card::before {
        top: 14px !important;
        bottom: 14px !important;
        width: 3px !important;
    }

    html body .afaq-app.afaq-investor-market-app .afaq-market-card__body h2,
    html body .afaq-app.afaq-investor-opportunities-page .afaq-market-card__body h2 {
        font-size: 14px !important;
        line-height: 1.25 !important;
        white-space: normal !important;
        overflow: visible !important;
    }

    html body .afaq-app.afaq-investor-market-app .afaq-market-card__sub,
    html body .afaq-app.afaq-investor-opportunities-page .afaq-market-card__sub {
        margin-top: 4px !important;
        font-size: 8.4px !important;
        line-height: 1.35 !important;
    }

    html body .afaq-app.afaq-investor-market-app .afaq-market-status,
    html body .afaq-app.afaq-investor-opportunities-page .afaq-market-status {
        justify-self: start !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
        min-height: 30px !important;
        padding: 6px 13px !important;
        font-size: 8.5px !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
    }

    html body .afaq-app.afaq-investor-market-app .afaq-market-stats,
    html body .afaq-app.afaq-investor-opportunities-page .afaq-market-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        border-radius: 13px !important;
    }

    html body .afaq-app.afaq-investor-market-app .afaq-market-stat,
    html body .afaq-app.afaq-investor-opportunities-page .afaq-market-stat {
        min-height: 46px !important;
        padding: 7px 6px !important;
        border-inline-end: 1px solid rgba(24,33,47,.07) !important;
        border-bottom: 1px solid rgba(24,33,47,.07) !important;
    }

    html body .afaq-app.afaq-investor-market-app .afaq-market-stat:nth-child(2n),
    html body .afaq-app.afaq-investor-opportunities-page .afaq-market-stat:nth-child(2n) {
        border-inline-end: 0 !important;
    }

    html body .afaq-app.afaq-investor-market-app .afaq-market-stat:last-child,
    html body .afaq-app.afaq-investor-opportunities-page .afaq-market-stat:last-child {
        grid-column: 1 / -1 !important;
        border-bottom: 0 !important;
    }

    html body .afaq-app.afaq-investor-market-app .afaq-market-stat span,
    html body .afaq-app.afaq-investor-opportunities-page .afaq-market-stat span {
        font-size: 7.7px !important;
        line-height: 1.2 !important;
        white-space: normal !important;
    }

    html body .afaq-app.afaq-investor-market-app .afaq-market-stat strong,
    html body .afaq-app.afaq-investor-opportunities-page .afaq-market-stat strong {
        font-size: 9px !important;
        line-height: 1.18 !important;
        white-space: normal !important;
    }

    html body .afaq-app.afaq-investor-market-app .afaq-market-detail-btn,
    html body .afaq-app.afaq-investor-opportunities-page .afaq-market-detail-btn {
        min-width: 96px !important;
        min-height: 31px !important;
        padding: 0 11px !important;
        border-radius: 10px !important;
        font-size: 8.5px !important;
        flex-shrink: 0 !important;
    }

    html body .afaq-app.afaq-investor-market-app .afaq-market-date,
    html body .afaq-app.afaq-investor-opportunities-page .afaq-market-date {
        font-size: 7.4px !important;
        line-height: 1.3 !important;
        white-space: normal !important;
        text-align: left !important;
    }
}

@media screen and (max-width: 390px) {
    html body .afaq-app.afaq-investor-market-app .afaq-market-card,
    html body .afaq-app.afaq-investor-opportunities-page .afaq-market-card {
        padding: 10px !important;
        border-radius: 16px !important;
    }

    html body .afaq-app.afaq-investor-market-app .afaq-market-card__body h2,
    html body .afaq-app.afaq-investor-opportunities-page .afaq-market-card__body h2 {
        font-size: 13px !important;
    }

    html body .afaq-app.afaq-investor-market-app .afaq-market-stat span,
    html body .afaq-app.afaq-investor-opportunities-page .afaq-market-stat span {
        font-size: 7px !important;
    }

    html body .afaq-app.afaq-investor-market-app .afaq-market-stat strong,
    html body .afaq-app.afaq-investor-opportunities-page .afaq-market-stat strong {
        font-size: 8.2px !important;
    }
}