/* ── Exchange Landing Page — Gulf Stock Markets ── */
/* Used by: site-new/stocks/exchange-landing.blade.php */

/* ── Hero ── */
.exchange-hero {
    background: linear-gradient(135deg, var(--navy-deep, #071428) 0%, var(--navy, #152D50) 55%, var(--navy-light, #1A3456) 100%);
    color: var(--text-on-navy);
    padding: 56px 24px 0;
    position: relative;
    overflow: hidden;
}
.exchange-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.02'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.exchange-hero .hero-inner {
    max-width: 1280px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

/* Breadcrumb inside hero */
.exchange-hero-breadcrumb {
    font-size: 12px;
    color: rgba(255,255,255,0.55);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.exchange-hero-breadcrumb a { color: rgba(255,255,255,0.55); text-decoration: none; }
.exchange-hero-breadcrumb a:hover { color: rgba(255,255,255,0.85); }
.exchange-hero-breadcrumb span { color: rgba(255,255,255,0.3); }
.exchange-hero-breadcrumb .current { color: rgba(255,255,255,0.75); }

/* Hero top row — left (title) + right (index cards) */
.exchange-hero-top {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 32px;
    align-items: start;
    margin-bottom: 32px;
}

/* Flag + exchange badges row */
.hero-flag-row {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 10px;
}
.hero-flag {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    background: rgba(255,255,255,0.1);
    border: 2px solid rgba(255,255,255,0.15);
    flex-shrink: 0;
}
.exchange-badges-inline {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.exbadge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.3px;
    border: 1px solid rgba(255,255,255,0.2);
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.9);
}
.exbadge .dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    display: inline-block;
    background: rgba(255,255,255,0.6);
}
/* Per-exchange dot colors — avoids inline style="background:..." on blade */
.exbadge.adx .dot  { background: #5B9BD5; }
.exbadge.dfm .dot  { background: #4CAF82; }
.exbadge.qse .dot  { background: #8B1A1A; }
.exbadge.bk .dot   { background: #1A6B3C; }
.exbadge.bhb .dot  { background: #C41E3A; }
.exbadge.msx .dot  { background: #6B4226; }

.exchange-hero-title {
    font-size: clamp(26px, 4vw, 42px);
    font-weight: 900;
    line-height: 1.25;
    color: var(--text-on-navy);
    margin-bottom: 10px;
}
.exchange-hero-subtitle {
    font-size: 15px;
    color: rgba(255,255,255,0.65);
    max-width: 600px;
    line-height: 1.7;
}

/* Live index cards (sidebar of hero) */
.hero-indices {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 240px;
}
.index-card {
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    padding: 14px 16px;
    backdrop-filter: blur(4px);
}
.index-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}
.index-name {
    font-size: 11px;
    color: rgba(255,255,255,0.55);
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}
.index-exchange-tag {
    font-size: 10px;
    padding: 2px 7px;
    border-radius: 10px;
    font-weight: 700;
}
.index-value {
    font-size: 22px;
    font-weight: 800;
    color: var(--text-on-navy);
    letter-spacing: -0.5px;
}
.index-change {
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 4px;
}
.index-change.up { color: var(--success, #34D399); }
.index-change.down { color: var(--danger, #F87171); }
.index-value--soon { font-size: 14px; color: rgba(255,255,255,0.35); font-weight: 500; letter-spacing: 0; }
.index-change-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.live-label {
    font-size: 10px;
    color: rgba(255,255,255,0.4);
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 6px;
}
.live-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--success, #34D399);
    animation: ldPulse 2s infinite;
    display: inline-block;
}
@keyframes ldPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.8); }
}

/* Stats bar at bottom of hero */
.hero-stats-bar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: rgba(255,255,255,0.08);
    border-radius: 12px 12px 0 0;
    overflow: hidden;
    margin-top: 28px;
}
.hero-stat {
    background: rgba(255,255,255,0.04);
    padding: 16px 20px;
    text-align: center;
    transition: background 0.2s;
}
.hero-stat:hover { background: rgba(255,255,255,0.08); }
.hero-stat-label {
    font-size: 11px;
    color: rgba(255,255,255,0.45);
    margin-bottom: 4px;
    display: block;
}
.hero-stat-value {
    font-size: 18px;
    font-weight: 800;
    color: var(--text-on-navy);
    display: block;
}
.hero-stat-value.up { color: var(--success, #34D399); }

/* ── Page Layout ── */
.exl-wrap {
    max-width: 1280px;
    margin: 0 auto;
    padding: 32px 24px;
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 28px;
    align-items: start;
}

/* ── Section Headers ── */
.exl-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--border, #DDE5EF);
}
.exl-section-title {
    font-size: 17px;
    font-weight: 800;
    color: var(--navy, #152D50);
    display: flex;
    align-items: center;
    gap: 8px;
}
.exl-title-icon {
    width: 28px;
    height: 28px;
    background: var(--teal-bg, #EBF7F7);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}
.exl-section-title--sectors::before {
    content: '';
    display: inline-block;
    width: 28px;
    height: 28px;
    background: var(--teal-bg, #EBF7F7) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%230E7C7B'%3E%3Crect x='2' y='10' width='4' height='8' rx='1'/%3E%3Crect x='8' y='6' width='4' height='12' rx='1'/%3E%3Crect x='14' y='2' width='4' height='16' rx='1'/%3E%3C/svg%3E") center/18px no-repeat;
    border-radius: 8px;
    flex-shrink: 0;
}
.exl-section-link {
    font-size: 13px;
    color: var(--teal, #0E7C7B);
    text-decoration: none;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 4px;
}
.exl-section-link:hover { color: var(--teal-light, #12A09E); }

/* ── Top Movers ── */
.movers-block { margin-bottom: 28px; }

.movers-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 16px;
    background: var(--bg, #F5F8FC);
    border: 1px solid var(--border, #DDE5EF);
    border-radius: 10px;
    padding: 4px;
}
.movers-tab {
    flex: 1;
    padding: 8px 12px;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    text-align: center;
    border: none;
    background: transparent;
    color: var(--text-muted, #5E7A95);
    transition: all 0.15s;
    font-family: 'Almarai', sans-serif;
}
.movers-tab.active {
    background: var(--bg-card, #fff);
    color: var(--navy, #152D50);
    box-shadow: 0 1px 4px rgba(21,45,80,0.1);
}

.movers-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.mover-card {
    background: var(--bg-card, #fff);
    border: 1px solid var(--border, #DDE5EF);
    border-radius: 12px;
    padding: 14px;
    cursor: pointer;
    transition: all 0.15s;
    text-decoration: none;
    display: block;
}
.mover-card:hover {
    border-color: var(--teal-border, #B8E0DF);
    box-shadow: 0 4px 16px rgba(14,124,123,0.1);
    transform: translateY(-2px);
}
.mover-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 10px;
}
.mover-ticker-wrap {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.mover-ticker {
    font-size: 12px;
    font-weight: 800;
    color: var(--navy, #152D50);
    letter-spacing: 0.3px;
}
.mover-change {
    font-size: 13px;
    font-weight: 800;
    padding: 4px 9px;
    border-radius: 8px;
}
.mover-change.up { background: #ECFDF5; color: var(--success, #10B981); }
.mover-change.down { background: #FEF2F2; color: var(--danger, #EF4444); }

.mover-name {
    font-size: 12px;
    color: var(--text-mid, #3D5A7A);
    margin-bottom: 8px;
    line-height: 1.4;
    font-weight: 700;
}
.mover-price {
    font-size: 16px;
    font-weight: 800;
    color: var(--navy, #152D50);
    display: flex;
    align-items: baseline;
    gap: 4px;
}
.mover-currency {
    font-size: 11px;
    color: var(--text-muted, #5E7A95);
    font-weight: 400;
}
/* .mover-sparkline removed — DI-160 YMYL: hardcoded SVG re-enabled when real intraday data available */

/* Exchange badge on stock card */
.stock-exchange-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 7px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.2px;
}
.stock-exchange-badge.adx { background: #EEF3FB; color: #1B4789; border: 1px solid #C5D8F0; }
.stock-exchange-badge.dfm { background: #E6F4EF; color: #006C4E; border: 1px solid #B8DFD0; }
.stock-exchange-badge.qse { background: #FBF0F0; color: #8B1A1A; border: 1px solid #F0C0C0; }
.stock-exchange-badge.bk  { background: #E8F5EE; color: #1A6B3C; border: 1px solid #B8DFD0; }
.stock-exchange-badge.bhb { background: #FAEAED; color: #C41E3A; border: 1px solid #F0C0C0; }
.stock-exchange-badge.msm { background: #F5EDE7; color: #6B4226; border: 1px solid #E0CEC4; }

/* ── Sectors Block ── */
.sectors-block { margin-bottom: 24px; }
.exl-sectors-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}
.exl-sector-card {
    background: var(--bg-card, #fff);
    border: 1px solid var(--border, #DDE5EF);
    border-radius: 10px;
    padding: 12px 14px;
    cursor: pointer;
    transition: all 0.15s;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.exl-sector-card:hover { border-color: var(--teal-border, #B8E0DF); background: var(--teal-bg, #EBF7F7); }
.exl-sector-card.active { border-color: var(--teal, #0E7C7B); background: var(--teal-bg, #EBF7F7); }
.exl-sector-name { font-size: 12px; font-weight: 700; color: var(--navy, #152D50); line-height: 1.3; }
.exl-sector-count { font-size: 11px; color: var(--text-muted, #5E7A95); white-space: nowrap; }
.exl-sector-icon { font-size: 18px; }

/* ── Stocks Table ── */
.exl-table-wrap {
    background: var(--bg-card, #fff);
    border: 1px solid var(--border, #DDE5EF);
    border-radius: 14px;
    overflow: hidden;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 28px;
}
.exl-table-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border, #DDE5EF);
    gap: 12px;
    flex-wrap: wrap;
}
.exl-filter-row {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}
.exl-filter-select {
    padding: 7px 12px;
    border: 1px solid var(--border, #DDE5EF);
    border-radius: 8px;
    font-size: 12px;
    color: var(--text, #1A2B45);
    background: var(--bg, #F5F8FC);
    font-family: 'Almarai', sans-serif;
    cursor: pointer;
}
.exl-search-input {
    padding: 7px 14px;
    border: 1px solid var(--border, #DDE5EF);
    border-radius: 8px;
    font-size: 12px;
    width: 200px;
    font-family: 'Almarai', sans-serif;
    background: var(--bg, #F5F8FC);
    color: var(--text, #1A2B45);
}
.exl-search-input:focus { outline: none; border-color: var(--teal, #0E7C7B); }

.exl-table { width: 100%; border-collapse: collapse; }
.exl-table thead th {
    padding: 11px 16px;
    font-size: 11px;
    font-weight: 800;
    color: var(--text-muted, #5E7A95);
    text-align: right;
    background: var(--bg-subtle, #F8FAFC);
    border-bottom: 1px solid var(--border, #DDE5EF);
    letter-spacing: 0.3px;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}
.exl-table thead th:hover { color: var(--navy, #152D50); }
.exl-table thead th.sort-active { color: var(--teal, #0E7C7B); }
.exl-table thead th .sort-arrow { margin-inline-start: 4px; opacity: 0.4; }
.exl-table thead th.sort-active .sort-arrow { opacity: 1; }

.exl-table tbody tr {
    border-bottom: 1px solid var(--border-light, #EBF0F7);
    transition: background 0.1s;
}
.exl-table tbody tr.exl-tr-link {
    cursor: pointer;
    touch-action: manipulation;
}
.exl-table tbody tr:hover { background: var(--bg-subtle, #F8FAFC); }
.exl-table tbody tr:last-child { border-bottom: none; }
.exl-table td {
    padding: 12px 16px;
    font-size: 13px;
    vertical-align: middle;
}

.td-stock {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}
.stock-logo-circle {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--navy-light, #1A3456), var(--teal, #0E7C7B));
    color: var(--text-on-navy);
    font-size: 11px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    letter-spacing: 0.5px;
}
.stock-name-ar {
    font-size: 13px;
    font-weight: 700;
    color: var(--navy, #152D50);
    margin-bottom: 3px;
    line-height: 1.3;
}
.stock-name-en {
    font-size: 11px;
    color: var(--text-muted, #5E7A95);
    font-weight: 400;
    margin-bottom: 2px;
    line-height: 1.3;
    direction: ltr;
    text-align: right;
}
.stock-ticker-small {
    font-size: 10px;
    color: var(--text-muted, #5E7A95);
    font-weight: 700;
    letter-spacing: 0.5px;
}
.td-price { font-weight: 700; color: var(--navy, #152D50); }
.td-price.empty { font-weight: 400; color: var(--text-muted, #5E7A95); }
.td-currency { font-size: 11px; color: var(--text-muted, #5E7A95); font-weight: 400; margin-inline-start: 2px; }
.td-change {
    font-weight: 800;
    font-size: 12px;
    padding: 3px 8px;
    border-radius: 6px;
    display: inline-block;
}
.td-change.up { background: #ECFDF5; color: var(--success, #10B981); }
.td-change.down { background: #FEF2F2; color: var(--danger, #EF4444); }
.td-change.flat { background: #F5F8FC; color: var(--text-muted, #5E7A95); }
.td-market-cap { color: var(--text-mid, #3D5A7A); }
.td-sector {
    display: inline-block;
    background: var(--bg, #F5F8FC);
    border: 1px solid var(--border, #DDE5EF);
    border-radius: 6px;
    padding: 2px 8px;
    font-size: 11px;
    color: var(--text-mid, #3D5A7A);
}

/* Halal badge */
.halal-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}
.halal-badge.halal { background: var(--success-bg, #ECFDF5); color: var(--success, #059669); border: 1px solid color-mix(in srgb, var(--success) 30%, transparent); }
.halal-badge.haram { background: var(--danger-bg, #FEF2F2); color: var(--danger, #DC2626); border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent); }
.halal-badge.mixed { background: var(--warning-bg, #FFFBEB); color: var(--warning, #D97706); border: 1px solid color-mix(in srgb, var(--warning) 30%, transparent); }
.halal-badge.pending { background: var(--bg, #F5F8FC); color: var(--text-muted, #5E7A95); border: 1px solid var(--border, #DDE5EF); }

/* Pagination */
.exl-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-top: 1px solid var(--border, #DDE5EF);
    flex-wrap: wrap;
    gap: 10px;
}
.exl-pagination-info { font-size: 12px; color: var(--text-muted, #5E7A95); }
.exl-pagination-btns { display: flex; gap: 4px; }
.exl-pagination-btn {
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    border: 1px solid var(--border, #DDE5EF);
    border-radius: 8px;
    background: var(--bg-card, #fff);
    color: var(--text-mid, #3D5A7A);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    font-family: 'Almarai', sans-serif;
    transition: all 0.1s;
}
.exl-pagination-btn:hover { border-color: var(--teal, #0E7C7B); color: var(--teal, #0E7C7B); }
.exl-pagination-btn.active { background: var(--teal, #0E7C7B); border-color: var(--teal, #0E7C7B); color: var(--text-on-navy, #fff); }

/* ── About Section (SEO text) ── */
.exl-about {
    background: var(--bg-card, #fff);
    border: 1px solid var(--border, #DDE5EF);
    border-radius: 14px;
    padding: 28px;
    margin-bottom: 28px;
}
.exl-about-title {
    font-size: 20px;
    font-weight: 900;
    color: var(--navy, #152D50);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.exl-about-body {
    font-size: 14px;
    line-height: 1.85;
    color: var(--text-mid, #3D5A7A);
    margin-bottom: 20px;
}
.exchange-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 20px;
}
.exchange-card {
    border-radius: 12px;
    padding: 16px;
}
.exchange-card.adx { background: #EEF3FB; border: 1px solid #C5D8F0; }
.exchange-card.dfm { background: #E6F4EF; border: 1px solid #B8DFD0; }
.exchange-card-name { font-size: 13px; font-weight: 900; margin-bottom: 4px; }
.exchange-card.adx .exchange-card-name { color: #1B4789; }
.exchange-card.dfm .exchange-card-name { color: #006C4E; }
.exchange-card-full { font-size: 11px; color: var(--text-muted, #5E7A95); margin-bottom: 10px; line-height: 1.4; }
.exchange-card-stat { font-size: 11px; color: var(--text-mid, #3D5A7A); margin-top: 4px; }
.exchange-card-stat strong { color: var(--navy, #152D50); }
.about-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 20px;
}
.about-stat {
    background: var(--bg, #F5F8FC);
    border: 1px solid var(--border, #DDE5EF);
    border-radius: 10px;
    padding: 14px;
    text-align: center;
}
.about-stat-value {
    font-size: 22px;
    font-weight: 900;
    color: var(--navy, #152D50);
    display: block;
    margin-bottom: 4px;
}
.about-stat-label {
    font-size: 11px;
    color: var(--text-muted, #5E7A95);
    font-weight: 700;
}

/* ── FAQ ── */
.exl-faq-wrap {
    background: var(--bg-card, #fff);
    border: 1px solid var(--border, #DDE5EF);
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 28px;
}
.exl-faq-header {
    padding: 20px 24px;
    border-bottom: 1px solid var(--border, #DDE5EF);
    background: linear-gradient(135deg, var(--bg-subtle, #F8FAFC), var(--bg, #F5F8FC));
}
.exl-faq-title { font-size: 17px; font-weight: 900; color: var(--navy, #152D50); margin-bottom: 4px; }
.exl-faq-subtitle { font-size: 13px; color: var(--text-muted, #5E7A95); }
.exl-faq-item { border-bottom: 1px solid var(--border-light, #EBF0F7); overflow: hidden; }
.exl-faq-item:last-child { border-bottom: none; }
.exl-faq-q {
    width: 100%;
    padding: 16px 24px;
    background: none;
    border: none;
    text-align: right;
    cursor: pointer;
    font-family: 'Almarai', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: var(--navy, #152D50);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    transition: background 0.1s;
}
.exl-faq-q:hover { background: var(--bg-subtle, #F8FAFC); }
.exl-faq-chevron {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--bg, #F5F8FC);
    border: 1px solid var(--border, #DDE5EF);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    flex-shrink: 0;
    color: var(--text-muted, #5E7A95);
    transition: transform 0.2s;
}
.exl-faq-item.open .exl-faq-chevron {
    transform: rotate(180deg);
    background: var(--teal-bg, #EBF7F7);
    border-color: var(--teal-border, #B8E0DF);
    color: var(--teal, #0E7C7B);
}
.exl-faq-a {
    display: none;
    padding: 0 24px 16px;
    font-size: 13px;
    line-height: 1.8;
    color: var(--text-mid, #3D5A7A);
}
.exl-faq-item.open .exl-faq-a { display: block; }

/* ── GCC Markets Grid ── */
.exl-gcc-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 28px;
}
.gcc-market-card {
    background: var(--bg-card, #fff);
    border: 1px solid var(--border, #DDE5EF);
    border-radius: 12px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    transition: all 0.15s;
}
.gcc-market-card:hover {
    border-color: var(--teal-border, #B8E0DF);
    box-shadow: 0 4px 12px rgba(14,124,123,0.08);
    transform: translateY(-1px);
}
.gcc-flag { font-size: 24px; }
.gcc-market-info { flex: 1; }
.gcc-market-name { font-size: 13px; font-weight: 800; color: var(--navy, #152D50); }
.gcc-market-sub { font-size: 11px; color: var(--text-muted, #5E7A95); margin-top: 2px; }
.gcc-arrow { color: var(--teal, #0E7C7B); font-size: 12px; }

/* ── Sidebar ── */
.exl-sidebar { display: flex; flex-direction: column; gap: 16px; }
.sidebar-card {
    background: var(--bg-card, #fff);
    border: 1px solid var(--border, #DDE5EF);
    border-radius: 14px;
    overflow: hidden;
}
.sidebar-card-header {
    padding: 14px 16px;
    border-bottom: 1px solid var(--border, #DDE5EF);
    font-size: 14px;
    font-weight: 800;
    color: var(--navy, #152D50);
    display: flex;
    align-items: center;
    gap: 8px;
}
.sidebar-card-body { padding: 16px; }

.market-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 9px 0;
    border-bottom: 1px solid var(--border-light, #EBF0F7);
    font-size: 13px;
}
.market-info-row:last-child { border-bottom: none; }
.market-info-label { color: var(--text-muted, #5E7A95); font-size: 12px; }
.market-info-value { font-weight: 700; color: var(--navy, #152D50); font-size: 13px; }
.market-status-open {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--success-bg, #ECFDF5);
    color: var(--success, #059669);
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
}
.market-status-closed {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--danger-bg, #FEF2F2);
    color: var(--danger, #DC2626);
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
}
.market-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    display: inline-block;
}

.exchange-compare-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-light, #EBF0F7);
    text-decoration: none;
    transition: all 0.1s;
}
.exchange-compare-row:last-child { border-bottom: none; }
.exchange-compare-row:hover { transform: translateX(-2px); }
.exchange-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}
.exchange-info { flex: 1; }
.exchange-abbr {
    font-size: 12px;
    font-weight: 800;
    color: var(--navy, #152D50);
    display: flex;
    align-items: center;
    gap: 6px;
}
.exchange-full-name { font-size: 11px; color: var(--text-muted, #5E7A95); margin-top: 1px; }
.exchange-count-pill {
    font-size: 10px;
    padding: 2px 7px;
    border-radius: 10px;
    font-weight: 700;
    background: var(--bg, #F5F8FC);
    border: 1px solid var(--border, #DDE5EF);
    color: var(--text-muted, #5E7A95);
}
.exchange-badge-tag {
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 10px;
}

/* Broker CTA */
.broker-cta-card {
    background: linear-gradient(135deg, var(--navy, #152D50) 0%, var(--navy-light, #1A3456) 100%);
    border-radius: 14px;
    padding: 20px;
    color: var(--text-on-navy);
    text-align: center;
}
.broker-cta-title { font-size: 15px; font-weight: 800; margin-bottom: 6px; }
.broker-cta-subtitle {
    font-size: 12px;
    color: var(--text-on-navy-soft);
    margin-bottom: 16px;
    line-height: 1.6;
}
.broker-logos-row {
    display: flex;
    justify-content: center;
    margin-bottom: 14px;
}
.broker-logo-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.3);
    background: rgba(255,255,255,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
    color: var(--text-on-navy);
    margin-inline-start: -8px;
}
.broker-logo-avatar:first-child { margin-inline-start: 0; }
.btn-exl-gold {
    display: block;
    background: linear-gradient(135deg, var(--gold, #C08A2E), var(--gold-light, #E5A83A));
    color: var(--text-on-navy);
    padding: 10px 20px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
    transition: all 0.15s;
}
.btn-exl-gold:hover { opacity: 0.9; transform: translateY(-1px); color: var(--text-on-navy); }

/* Halal CTA in sidebar */
.halal-sidebar-cta {
    text-align: center;
    padding: 20px;
}
.halal-sidebar-cta .halal-emoji { font-size: 32px; margin-bottom: 10px; display: block; }
.halal-sidebar-cta p { font-size: 13px; color: var(--text-mid, #3D5A7A); margin-bottom: 14px; line-height: 1.7; }
.btn-halal-filter {
    display: block;
    background: var(--teal, #0E7C7B);
    color: var(--text-on-navy);
    padding: 10px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
    transition: all 0.15s;
}
.btn-halal-filter:hover { background: var(--teal-light, #12A09E); color: var(--text-on-navy); }

/* ── Responsive ── */

/* ≤1024px: sidebar drops below, hero stacks */
@media (max-width: 1024px) {
    .exl-wrap { grid-template-columns: 1fr; }
    .exchange-hero-top { grid-template-columns: 1fr; }
    .hero-indices { flex-direction: row; flex-wrap: wrap; }
    .index-card { flex: 1; min-width: 200px; }
    .exl-sidebar { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
}

/* ≤768px: 2-col grids, table header stacks, sidebar single col */
@media (max-width: 768px) {
    .exchange-hero { padding: 36px 16px 0; }
    .hero-stats-bar { grid-template-columns: repeat(2, 1fr); }
    .movers-grid { grid-template-columns: repeat(2, 1fr); }
    .exl-sectors-grid { grid-template-columns: repeat(2, 1fr); }
    .about-stats-grid { grid-template-columns: repeat(2, 1fr); }
    .exchange-split { grid-template-columns: 1fr; }
    .exl-gcc-grid { grid-template-columns: 1fr; }
    .exl-search-input { width: 100%; }
    .exl-sidebar { grid-template-columns: 1fr; }
    /* Table header: title + filters stack vertically */
    .exl-table-header { flex-direction: column; align-items: stretch; padding: 12px 16px; }
    .exl-filter-row { flex-wrap: wrap; }
    /* Wrap pagination */
    .exl-pagination { flex-direction: column; align-items: flex-start; gap: 8px; }
    /* Reduce about section padding */
    .exl-about { padding: 20px 16px; }
    .exl-faq-q { padding: 14px 16px; }
    .exl-faq-a { padding: 0 16px 14px; }
    .exl-faq-header { padding: 16px; }
    /* Market hours widget */
    .mhw-section { padding-block: 28px; }
}

/* ≤640px: single-col filters, hide less-critical table columns */
@media (max-width: 640px) {
    .mhw-cards { flex-direction: column; }
    .mhw-holiday-item { flex-wrap: wrap; }
    /* Hide القيمة السوقية + القطاع columns — too cramped on small phones */
    .exl-table .col-mcap,
    .exl-table .col-sector,
    .exl-table thead th:nth-child(5),
    .exl-table thead th:nth-child(6),
    .exl-table tbody td:nth-child(5),
    .exl-table tbody td:nth-child(6) { display: none; }
    /* Compact mover cards */
    .movers-grid { gap: 8px; }
    .mover-card { padding: 10px 12px; }
    /* Stock logo smaller */
    .stock-logo-circle { width: 30px; height: 30px; font-size: 9px; border-radius: 8px; }
    /* Reduce hero stats */
    .hero-stat { padding: 12px 10px; }
    .hero-stat-value { font-size: 15px; }
    .hero-stat-label { font-size: 10px; }
    /* Table padding */
    .exl-table td { padding: 10px 10px; font-size: 12px; }
    .exl-table thead th { padding: 9px 10px; font-size: 10px; }
    /* Sector cards: full width text, small icon */
    .exl-sector-icon { font-size: 16px; }
    /* GCC markets: single column already, tighten padding */
    .gcc-market-card { padding: 12px; }
    .gcc-flag { font-size: 20px; }
}

/* ≤480px: full-width filters, single-col movers */
@media (max-width: 480px) {
    .movers-grid { grid-template-columns: 1fr; }
    .hero-stats-bar { grid-template-columns: repeat(2, 1fr); }
    .exl-filter-row { flex-direction: column; align-items: stretch; gap: 6px; }
    .exl-filter-select { width: 100%; }
    .exl-search-input { width: 100%; }
    .index-card { min-width: 140px; }
    /* Exchange-landing wrap tighter */
    .exl-wrap { padding: 20px 14px; }
}

/* ≤375px — small phones */
@media (max-width: 375px) {
    .exchange-hero { padding: 28px 14px 0; }
    .exchange-hero-title { font-size: 22px; }
    .exchange-hero-subtitle { font-size: 13px; }
    .hero-flag-row { gap: 8px; }
    .hero-flag { width: 32px; height: 32px; font-size: 18px; }
    .hero-stats-bar { grid-template-columns: repeat(2, 1fr); }
    .hero-stat { padding: 10px 12px; }
    .hero-stat-value { font-size: 15px; }
    .exl-wrap { padding: 20px 14px; }
    .exl-section-title { font-size: 14px; }
    .movers-tab { padding: 7px 6px; font-size: 11px; }
    .movers-grid { grid-template-columns: 1fr; }
    .mover-card { padding: 10px; }
    .exl-sectors-grid { grid-template-columns: 1fr 1fr; }
    .about-stats-grid { grid-template-columns: repeat(2, 1fr); }
    .exl-gcc-grid { grid-template-columns: 1fr; }
    .exl-faq-q { padding: 12px 16px; font-size: 13px; }
    .exl-about { padding: 18px; }
    .index-card { min-width: unset; }
    .exl-filter-row { gap: 6px; }
    .exl-table td { padding: 8px 10px; font-size: 12px; }
    .exl-table thead th { padding: 8px 10px; }
    .mhw-cards { flex-direction: column; gap: 10px; }
    .mhw-card { padding: 12px; }
    .mhw-card__times { font-size: 1.1rem; }
    .mhw-holiday-item { font-size: 11px; gap: 4px; }
    /* Broker CTA compact */
    .broker-cta-card { padding: 16px; }
    .broker-cta-title { font-size: 14px; }
    .broker-cta-subtitle { font-size: 11px; }
}

/* ≤320px — very small phones (Galaxy S5, older iPhones) */
@media (max-width: 320px) {
    .exchange-hero { padding: 20px 10px 0; }
    .exchange-hero-title { font-size: 18px; }
    .exl-wrap { padding: 16px 10px; }
    .movers-tab { font-size: 10px; padding: 6px 4px; }
    .exl-sectors-grid { grid-template-columns: 1fr; }
    .hero-stats-bar { grid-template-columns: repeat(2, 1fr); }
    .about-stats-grid { grid-template-columns: 1fr; }
    /* Hide exchange badge on very small screens to save space */
    .stock-exchange-badge { display: none; }
    .exl-table td { padding: 7px 8px; font-size: 11px; }
}

/* ≥1440px — large desktops */
@media (min-width: 1440px) {
    .exl-wrap { max-width: 1400px; grid-template-columns: 1fr 320px; gap: 36px; }
    .exchange-hero .hero-inner { max-width: 1400px; }
    .hero-indices { min-width: 280px; }
    .exl-table td { padding: 14px 20px; font-size: 14px; }
    .movers-grid { grid-template-columns: repeat(4, 1fr); }
    .exl-sectors-grid { grid-template-columns: repeat(4, 1fr); }
    .exl-sidebar { display: flex; flex-direction: column; }
}

/* ── Market Hours Widget ─────────────────────────────────── */
.mhw-section {
    padding-block: 40px;
    background: var(--surface-light, #F8FAFC);
    border-block: 1px solid var(--border-light, #E5EAF0);
}
.mhw-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--navy);
    margin-block-end: 20px;
}
.mhw-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-block-end: 28px;
}
.mhw-card {
    flex: 1;
    min-width: 160px;
    background: var(--bg-card, #fff);
    border: 1px solid var(--border-light, #E5EAF0);
    border-radius: 12px;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.mhw-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.mhw-code {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--navy);
}
.badge-open {
    font-size: 0.72rem;
    padding: 2px 8px;
    border-radius: 20px;
    background: var(--halal-bg, #DCFCE7);
    color: var(--halal-text, #166534);
    font-weight: 600;
}
.badge-closed {
    font-size: 0.72rem;
    padding: 2px 8px;
    border-radius: 20px;
    background: var(--haram-bg, #FEE2E2);
    color: var(--haram-text, #991B1B);
    font-weight: 600;
}
.mhw-card__times {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--navy);
    direction: ltr;
}
.mhw-separator { color: var(--text-muted, #9CA3AF); font-weight: 400; }
.mhw-card__meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 0.78rem;
    color: var(--text-muted, #6B7280);
}
.mhw-tz { font-size: 0.72rem; opacity: 0.8; }

/* Holidays list */
.mhw-holidays { border-block-start: 1px solid var(--border-light, #E5EAF0); padding-block-start: 20px; }
.mhw-holidays__title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--navy);
    margin-block-end: 12px;
}
.mhw-holidays__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.mhw-holiday-item {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.875rem;
    padding: 8px 12px;
    background: var(--bg-card, #fff);
    border-radius: 8px;
    border: 1px solid var(--border-light, #E5EAF0);
}
.mhw-holiday-date { font-weight: 600; color: var(--navy); min-width: 100px; direction: ltr; }
.mhw-holiday-name { flex: 1; color: var(--text-body, #374151); }
.mhw-holiday-code {
    font-size: 0.72rem;
    background: var(--teal-light, #E6F4F1);
    color: var(--teal, #0D7A5F);
    border-radius: 4px;
    padding: 2px 6px;
    font-weight: 600;
}

@media (max-width: 640px) {
    .mhw-cards { flex-direction: column; }
    .mhw-holiday-item { flex-wrap: wrap; }
}

/* ── Rule 42 — Missing breakpoints: 320px / 375px / 1440px ── */
@media (max-width: 375px) {
    .exchange-hero { padding: 28px 14px 0; }
    .exchange-hero-title { font-size: 22px; }
    .exchange-hero-subtitle { font-size: 13px; }
    .hero-flag-row { gap: 8px; }
    .hero-flag { width: 32px; height: 32px; font-size: 18px; }
    .hero-stats-bar { grid-template-columns: repeat(2, 1fr); }
    .hero-stat { padding: 10px 12px; }
    .hero-stat-value { font-size: 15px; }
    .exl-wrap { padding: 20px 14px; }
    .exl-section-title { font-size: 14px; }
    .movers-tab { padding: 7px 6px; font-size: 11px; }
    .movers-grid { grid-template-columns: 1fr; }
    .mover-card { padding: 10px; }
    .exl-sectors-grid { grid-template-columns: 1fr 1fr; }
    .about-stats-grid { grid-template-columns: repeat(2, 1fr); }
    .exl-gcc-grid { grid-template-columns: 1fr; }
    .exl-faq-q { padding: 12px 16px; font-size: 13px; }
    .exl-about { padding: 18px; }
    .index-card { min-width: unset; }
    .exl-filter-row { gap: 6px; }
    .exl-table td { padding: 8px 10px; font-size: 12px; }
    .exl-table thead th { padding: 8px 10px; }
    .mhw-cards { flex-direction: column; gap: 10px; }
    .mhw-card { padding: 12px; }
    .mhw-card__times { font-size: 1.1rem; }
    .mhw-holiday-item { font-size: 11px; gap: 4px; }
}
@media (max-width: 320px) {
    .exchange-hero { padding: 20px 10px 0; }
    .exchange-hero-title { font-size: 18px; }
    .exl-wrap { padding: 16px 10px; }
    .movers-tab { font-size: 10px; padding: 6px 4px; }
    .exl-sectors-grid { grid-template-columns: 1fr; }
    .hero-stats-bar { grid-template-columns: repeat(2, 1fr); }
    .about-stats-grid { grid-template-columns: 1fr; }
}
@media (min-width: 1440px) {
    .exl-wrap { max-width: 1400px; grid-template-columns: 1fr 320px; gap: 36px; }
    .exchange-hero .hero-inner { max-width: 1400px; }
    .hero-indices { min-width: 280px; }
    .exl-table td { padding: 14px 20px; font-size: 14px; }
    .movers-grid { grid-template-columns: repeat(4, 1fr); }
    .exl-sectors-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ── CV-074 inline-style elimination ── */
.market-info-value--small { font-size: 11px; color: var(--text-muted, #5E7A95); }
.td-empty { color: var(--text-muted, #5E7A95); }
.exl-empty-row { text-align: center; padding: 32px; color: var(--text-muted, #5E7A95); }

/* Exchange icon + badge-tag — class-based per exchange (replaces inline bg/color) */
.exchange-icon { width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; background: var(--teal-light, #E6F4F1); }
.adx-icon  { background: #EEF3FB; }
.dfm-icon  { background: #E6F4EF; }
.qse-icon  { background: #FBF0F0; }
.bk-icon   { background: #E8F5EE; }
.bhb-icon  { background: #FAEAED; }
.msm-icon  { background: #F5EDE7; }
.tasi-icon { background: #FDF6E3; }

.exchange-badge-tag { font-size: 0.7rem; border-radius: 4px; padding: 1px 5px; background: var(--teal-light, #E6F4F1); color: var(--teal, #0D7A5F); }
.adx-tag  { background: #EEF3FB; color: #1B4789; }
.dfm-tag  { background: #E6F4EF; color: #006C4E; }
.qse-tag  { background: #FBF0F0; color: #8B1A1A; }
.bk-tag   { background: #E8F5EE; color: #1A6B3C; }
.bhb-tag  { background: #FAEAED; color: #C41E3A; }
.msm-tag  { background: #F5EDE7; color: #6B4226; }
.tasi-tag { background: #FDF6E3; color: #92400E; }

/* Badge open/closed colors using CSS tokens where possible */
.badge-open   { background: var(--halal-bg, #DCFCE7); color: var(--halal-text, #166534); }

/* ── exchanges-index.blade.php — CV-082 inline-style elimination ── */
.exidx-flag        { font-size: 2.5rem; line-height: 1; }
.exidx-desc        { line-height: 1.6; }
.exidx-meta-tag    { background: rgba(21,45,80,.08); border-radius: 6px; font-size: 11px; }
.exidx-hero-lead   { max-width: 600px; margin-inline: auto; }
.exidx-h2          { font-size: 1.4rem; color: var(--navy); }
.exidx-h2--sm      { font-size: 1.1rem; color: var(--navy); }
.exidx-quick-links { background: rgba(21,45,80,.04); }
.exidx-seo-list    { line-height: 2; }
.exidx-arrow       { color: var(--teal); font-size: 1.1rem; }
.text-gold         { color: var(--gold); }
.badge-closed { background: var(--haram-bg,  #FEE2E2); color: var(--haram-text, #991B1B); }

/* exchanges-index hero background */
.bg-navy-hero { background: var(--navy); }