/* Investment Platform Search CSS - Adapted from Bank Search */

/* ==========================================================================
   VARIABLES AND BASE STYLES
   ========================================================================== */

:root {
    --invest-primary: #007cba;
    --invest-primary-dark: #005a87;
    --invest-success: #27ae60;
    --invest-success-dark: #229954;
    --invest-excellent: #10b981;
    --invest-good: #3498db;
    --invest-warning: #f59e0b;
    --invest-text-dark: #2c3e50;
    --invest-text-muted: #666;
    --invest-text-light: #999;
    --invest-border: #ddd;
    --invest-bg-light: #f8f9fa;
    --invest-table-header: #34495e;
}

/* Screen reader only text - hidden visually but available to assistive technology */
.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ==========================================================================
   CONTAINER
   ========================================================================== */

.invest-container {
    max-width: 100%;
    margin: 0 auto;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ==========================================================================
   CONTROLS / FILTERS
   ========================================================================== */

.invest-controls {
    background: var(--invest-bg-light);
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
    border: 1px solid var(--invest-border);
}

.invest-controls .filter-grid-container {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr auto auto;
    gap: 15px;
    align-items: end;
}

.invest-controls .updated-cell .last-update {
    font-size: 14px;
    color: var(--invest-text-muted);
    display: inline-block;
    padding: 8px 0;
    line-height: 22px;
}

.invest-controls .grid-cell h4 {
    margin: 0 0 8px 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--invest-text-muted);
    text-transform: uppercase;
}

.invest-controls .filter-options input,
.invest-controls .filter-options select {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--invest-border);
    border-radius: 6px;
    font-size: 14px;
    background: white;
    box-sizing: border-box;
    height: 38px;
}

.invest-controls .filter-options input:focus,
.invest-controls .filter-options select:focus {
    outline: none;
    border-color: var(--invest-primary);
    box-shadow: 0 0 0 3px rgba(0, 124, 186, 0.1);
}

#invest-reset-filters {
    width: 100%;
    padding: 8px 16px;
    background: var(--invest-primary);
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    height: 38px;
    transition: background 0.2s;
}

#invest-reset-filters:hover {
    background: var(--invest-primary-dark);
}

/* ==========================================================================
   TABLE
   ========================================================================== */

/* ==========================================================================
   TABLE TOGGLE (mobile only)
   ========================================================================== */

.invest-table-toggle {
    display: none;
    margin-bottom: 10px;
}

#toggle-full-table {
    padding: 8px 16px;
    background: var(--invest-bg-light);
    border: 1px solid var(--invest-border);
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
    color: var(--invest-text-muted);
}

#toggle-full-table:hover {
    background: var(--invest-border);
}

.invest-table {
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    width: 100%;
}

.invest-table table {
    width: 100%;
    min-width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    counter-reset: rank;
}

.invest-table thead {
    background: #34495e !important;
    color: white !important;
    border: none !important;
}

.invest-table thead th {
    background: #34495e !important;
    color: white !important;
    border: none !important;
    padding: 14px 12px;
    text-align: left;
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

/* Column widths for fixed table layout (5 columns) */
.invest-table thead th:nth-child(1),
.invest-table tbody tr.platform-row td:nth-child(1) {
    width: 35%;
}

.invest-table thead th:nth-child(2),
.invest-table tbody tr.platform-row td:nth-child(2) {
    width: 15%;
}

.invest-table thead th:nth-child(3),
.invest-table tbody tr.platform-row td:nth-child(3) {
    width: 15%;
}

.invest-table thead th:nth-child(4),
.invest-table tbody tr.platform-row td:nth-child(4) {
    width: 20%;
}

.invest-table thead th:nth-child(5),
.invest-table tbody tr.platform-row td:nth-child(5) {
    width: 15%;
}


.invest-table tbody tr {
    border-bottom: 1px solid #eee;
    transition: background 0.2s;
}

.invest-table tbody tr:last-child {
    border-bottom: none;
}

.invest-table tbody tr:hover {
    background: var(--invest-bg-light);
}

.invest-table tbody td {
    padding: 16px 12px;
    vertical-align: middle;
    border-bottom: 1px solid #eee;
}

/* ==========================================================================
   PLATFORM CELL (matches account-cell)
   ========================================================================== */

.platform-cell {
    overflow: hidden;
}

.platform-content {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.platform-image-wrapper {
    width: 60px;
    height: 60px;
    min-width: 60px;
    min-height: 60px;
    flex-shrink: 0;
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.08);
    background: white;
}

.platform-image {
    width: 60px !important;
    height: 60px !important;
    object-fit: contain !important;
    border-radius: 8px !important;
    display: block;
}

.platform-image-placeholder {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--invest-primary), var(--invest-success));
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15), 0 1px 3px rgba(0, 0, 0, 0.1);
}

.platform-text {
    flex: 1;
    min-width: 0;
}

.platform-name {
    font-weight: 600;
    color: var(--invest-text-dark);
    font-size: 15px;
    margin-bottom: 2px;
}

.platform-provider {
    color: var(--invest-text-muted);
    font-size: 13px;
    line-height: 1.4;
}

.platform-fca {
    font-size: 11px;
    margin-top: 3px;
}

.platform-fca a {
    color: var(--invest-text-light);
    text-decoration: none;
    transition: color 0.2s;
}

.platform-fca a:hover {
    color: var(--invest-primary);
    text-decoration: underline;
}

.platform-best-for {
    font-size: 12px;
    color: var(--invest-text-muted);
    margin-top: 4px;
    font-style: italic;
}

/* ==========================================================================
   INVESTMENTS COLUMN
   ========================================================================== */

.investments-cell {
    vertical-align: middle;
}

.invest-checks {
    font-size: 12px;
    line-height: 1.6;
}

.invest-check {
    display: block;
}

.invest-check.check-no {
    color: var(--invest-text-light);
}

/* ==========================================================================
   TRADING FEES BREAKDOWN
   ========================================================================== */

/* ==========================================================================
   FEE TYPE DETAIL
   ========================================================================== */

.fee-type-detail {
    font-size: 11px;
    color: var(--invest-text-muted);
    margin-top: 4px;
    line-height: 1.3;
}

.cost-disclaimer {
    color: var(--invest-warning);
    font-style: italic;
}

/* ==========================================================================
   PLATFORM COSTS BREAKDOWN
   ========================================================================== */

.platform-costs-breakdown {
    font-size: 12px;
    line-height: 1.6;
}

.platform-cost-item {
    display: block;
}

.platform-cost-header {
    margin: 0;
    padding: 0;
    line-height: 1.4;
}

/* ==========================================================================
   FEE STRUCTURE BREAKDOWN
   ========================================================================== */

.fee-structure-breakdown {
    font-size: 12px;
    line-height: 1.6;
}

.fee-structure-item {
    display: block;
}

/* ==========================================================================
   TRADING FEES BREAKDOWN
   ========================================================================== */

.trading-fees-breakdown {
    font-size: 12px;
    line-height: 1.6;
}

.trade-fee-item {
    display: block;
}

.trading-note {
    font-size: 11px;
    color: var(--invest-text-light);
    margin-top: 4px;
}

/* SIPP Drawdown info */
.drawdown-info {
    font-size: 11px;
    color: var(--invest-text-muted);
    margin-top: 6px;
}

.drawdown-label {
    font-weight: 600;
}

/* ==========================================================================
   CENTERED CELLS
   ========================================================================== */

.centered-cell {
    text-align: center;
    vertical-align: middle;
}

.centered-th {
    text-align: center;
}

/* ==========================================================================
   COST DISPLAY (matches aer-display)
   ========================================================================== */

.cost-display {
    display: inline-block;
    padding: 8px 16px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 16px;
    min-width: 60px;
    background: rgba(39, 174, 96, 0.15);
    color: #27ae60;
}

.cost-display.cost-free {
    background: rgba(16, 185, 129, 0.2);
    color: #059669;
}

.cost-display.cost-low {
    background: rgba(16, 185, 129, 0.15);
    color: #059669;
}

.cost-display.cost-medium {
    background: rgba(245, 158, 11, 0.15);
    color: #d97706;
}

.cost-display.cost-high {
    background: rgba(239, 68, 68, 0.15);
    color: #dc2626;
}

.cost-note {
    font-size: 11px;
    color: var(--invest-text-light);
    margin-top: 4px;
    white-space: nowrap;
}

/* ==========================================================================
   FEE BADGES (matches type-badge / rate-type-badge)
   ========================================================================== */

.fee-badge,
.trading-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}

.fee-badge {
    background: var(--invest-bg-light);
    color: var(--invest-text-muted);
    border: 1px solid var(--invest-border);
}

.fee-badge.fee-zero {
    background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
    color: #166534;
    border: 1px solid #86efac;
}

.fee-badge.fee-fixed {
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    color: #1e40af;
    border: 1px solid #93c5fd;
}

.fee-badge.fee-percentage {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    color: #92400e;
    border: 1px solid #fbbf24;
}

.fee-badge.fee-hybrid {
    background: linear-gradient(135deg, #f3e8ff 0%, #e9d5ff 100%);
    color: #6b21a8;
    border: 1px solid #c4b5fd;
}

.trading-badge {
    background: var(--invest-bg-light);
    color: var(--invest-text-muted);
    border: 1px solid var(--invest-border);
}

.trading-badge.trading-free {
    background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
    color: #166534;
    border: 1px solid #86efac;
}

.trading-badge.trading-low {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    color: #065f46;
    border: 1px solid #6ee7b7;
}

.trading-badge.trading-standard {
    background: linear-gradient(135deg, #fed7aa 0%, #fdba74 100%);
    color: #9a3412;
    border: 1px solid #fb923c;
}

.trading-badge.trading-premium {
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
    color: #991b1b;
    border: 1px solid #fca5a5;
}

.trading-note {
    font-size: 11px;
    color: var(--invest-text-light);
    margin-top: 4px;
    white-space: nowrap;
}

/* ==========================================================================
   APPLY BUTTON (matches bank apply-btn exactly)
   ========================================================================== */

.apply-cell {
    text-align: center;
}

.apply-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    background: linear-gradient(135deg, #27ae60, #2ecc71) !important;
    color: white !important;
    padding: 6px 12px !important;
    border-radius: 4px !important;
    text-decoration: none !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    border: 1px solid #27ae60 !important;
    transition: all 0.2s ease !important;
    white-space: nowrap !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
}

.apply-btn:hover {
    background: linear-gradient(135deg, #229954, #27ae60) !important;
    color: white !important;
    text-decoration: none !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 3px 6px rgba(0,0,0,0.15) !important;
}

.apply-btn:active {
    transform: translateY(0) !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1) !important;
}

.apply-btn:visited {
    color: white !important;
    text-decoration: none !important;
}

.apply-btn-text {
    font-weight: 600;
}

.apply-btn-arrow {
    font-size: 14px;
    transition: transform 0.2s ease;
}

.apply-btn:hover .apply-btn-arrow {
    transform: translateX(2px);
}

.apply-btn-disabled {
    background: #e0e0e0 !important;
    border-color: #ccc !important;
    color: #999 !important;
    cursor: default;
    box-shadow: none !important;
}

.apply-btn-disabled:hover {
    transform: none !important;
    box-shadow: none !important;
    background: #e0e0e0 !important;
    color: #999 !important;
}

.apply-disclaimer {
    font-size: 10px;
    color: var(--invest-text-light);
    margin-top: 4px;
    line-height: 1.3;
}

/* ==========================================================================
   EXPAND TOGGLE / CLICKABLE ROW
   ========================================================================== */

.platform-row {
    cursor: pointer;
    counter-increment: rank;
    height: auto;
}

.platform-row td {
    vertical-align: middle;
    padding: 12px 8px !important;
}

.platform-row .platform-cell {
    padding: 12px !important;
}

.platform-row:hover {
    background: var(--invest-bg-light);
}

/* Rank number circle */
.rank-circle {
    width: 24px;
    height: 24px;
    min-width: 24px;
    border-radius: 50%;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 500;
    color: var(--invest-text-muted);
    margin-right: 12px;
}

.rank-circle::before {
    content: counter(rank);
}

/* More info link */
.more-info-link {
    margin-top: 8px;
    font-size: 12px;
    color: var(--invest-primary);
    cursor: pointer;
}

.more-info-link:hover {
    text-decoration: underline;
}

.more-info-icon {
    display: inline-block;
    transition: transform 0.2s;
}

.platform-row.expanded .more-info-icon {
    transform: rotate(180deg);
}

.platform-row.expanded,
.platform-row.expanded td {
    border-bottom: none !important;
}

.platform-row.expanded {
    background: var(--invest-bg-light);
}

/* ==========================================================================
   EXPANDABLE DETAILS ROW
   ========================================================================== */

.platform-details-row {
    background: var(--invest-bg-light);
}

.platform-details-row td {
    padding: 0 !important;
    border-bottom: 1px solid var(--invest-border);
}

.expanded-details {
    padding: 16px 20px 20px 90px;
}

.details-header {
    margin-bottom: 4px;
}

.details-platform-name {
    font-size: 16px;
    font-weight: 700;
    color: var(--invest-text-dark);
}

.details-provider-name {
    font-size: 14px;
    color: var(--invest-text-light);
    margin-left: 8px;
}

.details-provider-name::before {
    content: "–";
    margin-right: 8px;
}

.details-subtitle {
    font-size: 11px;
    font-weight: 600;
    color: var(--invest-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
}

.details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}

.detail-card {
    background: white;
    border-radius: 8px;
    padding: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.detail-card-title {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--invest-text-muted);
    margin-bottom: 6px;
    letter-spacing: 0.5px;
}

.detail-card-value {
    font-size: 14px;
    color: var(--invest-text-dark);
    line-height: 1.5;
}

/* Good for list */
.good-for-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.good-for-list li {
    position: relative;
    padding-left: 16px;
    margin-bottom: 4px;
    font-size: 13px;
}

.good-for-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--invest-success);
    font-weight: 700;
}

/* Fee/trading lines */
.fee-line,
.trading-line,
.type-line {
    padding: 3px 0;
    border-bottom: 1px dashed var(--invest-border);
    font-size: 13px;
}

.fee-line:last-child,
.trading-line:last-child,
.type-line:last-child {
    border-bottom: none;
}

/* Costs card - special styling */
.costs-card {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border: 1px solid #86efac;
}

.costs-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.cost-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: white;
    padding: 8px 10px;
    border-radius: 6px;
}

.cost-item .cost-label {
    font-size: 12px;
    color: var(--invest-text-muted);
}

.cost-item .cost-value {
    font-size: 14px;
    font-weight: 700;
    color: #16a34a;
}

/* Warning card */
.warning-card {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border: 1px solid #fbbf24;
}

.warning-card .detail-card-title {
    color: #92400e;
}

.warning-card .detail-card-value {
    color: #78350f;
}

/* Info items */
.info-item {
    margin-bottom: 6px;
    font-size: 13px;
}

.info-item strong {
    color: var(--invest-text-muted);
}

/* Details footer */
.details-footer {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--invest-border);
    font-size: 11px;
    color: var(--invest-text-light);
}

/* ==========================================================================
   PAGINATION
   ========================================================================== */

.invest-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px;
    background: var(--invest-bg-light);
    border-radius: 8px;
    margin-top: 15px;
}

.pagination-info {
    color: var(--invest-text-muted);
    font-size: 14px;
}

#showing-count {
    font-weight: 700;
    color: var(--invest-primary);
}

/* ==========================================================================
   DISCLAIMER
   ========================================================================== */

.invest-disclaimer {
    margin-top: 20px;
    padding: 12px 16px;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border: 1px solid #fbbf24;
    border-radius: 8px;
    font-size: 13px;
    color: #78350f;
}

.invest-disclaimer strong {
    color: #92400e;
}

/* ==========================================================================
   NO RESULTS
   ========================================================================== */

.invest-no-results {
    text-align: center;
    padding: 40px !important;
    color: var(--invest-text-muted);
    font-size: 15px;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 768px) {
    .invest-controls .filter-grid-container {
        grid-template-columns: 1fr 1fr;
    }

    /* Show toggle button on tablet */
    .invest-table-toggle {
        display: block;
    }

    /* Hide investments and trading columns on tablet */
    .invest-table:not(.show-full-table) thead th:nth-child(3),
    .invest-table:not(.show-full-table) thead th:nth-child(4),
    .invest-table:not(.show-full-table) tbody tr.platform-row td:nth-child(3),
    .invest-table:not(.show-full-table) tbody tr.platform-row td:nth-child(4) {
        display: none !important;
        width: 0 !important;
        padding: 0 !important;
    }

    /* Tablet column widths - 3 visible columns */
    .invest-table:not(.show-full-table) thead th:nth-child(1),
    .invest-table:not(.show-full-table) tbody tr.platform-row td:nth-child(1) {
        width: 50% !important;
    }

    .invest-table:not(.show-full-table) thead th:nth-child(2),
    .invest-table:not(.show-full-table) tbody tr.platform-row td:nth-child(2) {
        width: 25% !important;
    }

    .invest-table:not(.show-full-table) thead th:nth-child(5),
    .invest-table:not(.show-full-table) tbody tr.platform-row td:nth-child(5) {
        width: 25% !important;
    }

    /* Table wrapper is ALWAYS a scroll container on mobile - this is key */
    .invest-table {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Full table mode - inner table expands */
    .invest-table.show-full-table table {
        min-width: 800px;
        width: 800px;
        table-layout: fixed;
    }

    .platform-provider {
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .invest-pagination {
        flex-direction: column;
        gap: 10px;
    }

    .expanded-details {
        padding: 16px;
    }

    .details-grid {
        grid-template-columns: 1fr;
    }

    .costs-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .invest-controls .filter-grid-container {
        grid-template-columns: 1fr;
    }

    /* Hide columns 2, 3, 4 on mobile - only show Platform and Apply */
    .invest-table:not(.show-full-table) thead th:nth-child(2),
    .invest-table:not(.show-full-table) thead th:nth-child(3),
    .invest-table:not(.show-full-table) thead th:nth-child(4),
    .invest-table:not(.show-full-table) tbody tr.platform-row td:nth-child(2),
    .invest-table:not(.show-full-table) tbody tr.platform-row td:nth-child(3),
    .invest-table:not(.show-full-table) tbody tr.platform-row td:nth-child(4) {
        display: none !important;
        width: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Mobile column widths - just 2 visible columns */
    .invest-table:not(.show-full-table) thead th:nth-child(1),
    .invest-table:not(.show-full-table) tbody tr.platform-row td:nth-child(1) {
        width: 70% !important;
    }

    .invest-table:not(.show-full-table) thead th:nth-child(5),
    .invest-table:not(.show-full-table) tbody tr.platform-row td:nth-child(5) {
        width: 30% !important;
    }

    /* Details row */
    .invest-table:not(.show-full-table) .expanded-details {
        width: 100%;
        overflow-x: hidden;
        word-wrap: break-word;
    }

    .platform-content {
        gap: 6px;
    }

    /* Reduce rank circle padding on mobile */
    .rank-circle {
        width: 20px;
        height: 20px;
        min-width: 20px;
        font-size: 12px;
        margin-right: 6px;
    }

    .platform-image-wrapper {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
    }

    .platform-image {
        width: 40px !important;
        height: 40px !important;
    }

    .platform-image-placeholder {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
        font-size: 16px;
    }

    .platform-name {
        font-size: 14px;
    }

    .platform-provider {
        font-size: 12px;
    }

    .detail-card {
        padding: 12px;
    }
}

/* ==========================================================================
   SPOTLIGHT / FEATURED PLATFORMS
   ========================================================================== */

.spotlight-header-row,
.spotlight-header-row:hover {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
}

.spotlight-header-row td {
    padding: 8px 16px !important;
    font-size: 12px;
    font-weight: 700;
    color: white;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom: none !important;
}

.spotlight-row,
.spotlight-row:hover,
.invest-table tbody tr.spotlight-row:hover {
    background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%) !important;
    border-left: 3px solid #10b981;
}

.spotlight-row .platform-name {
    color: #065f46;
}

.spotlight-row .rank-circle {
    background: #10b981;
    color: white;
}

.spotlight-disclaimer {
    background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%);
    border: 1px solid #10b981;
    color: #065f46;
}

.spotlight-disclaimer strong {
    color: #047857;
}

/* ==========================================================================
   MOBILE-ONLY CARDS (hidden columns info)
   ========================================================================== */

.mobile-only-card {
    display: none;
}

@media (max-width: 768px) {
    .mobile-only-card {
        display: block;
    }
}

.mobile-only-card .info-item {
    padding: 4px 0;
    border-bottom: 1px dashed var(--invest-border);
}

.mobile-only-card .info-item:last-child {
    border-bottom: none;
}