/* Custom styles for ListeningPlatforms */

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Focus styles for accessibility */
*:focus {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

/* Matrix table styles */
.matrix-table {
    border-collapse: separate;
    border-spacing: 0;
}

.matrix-table th,
.matrix-table td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #e5e7eb;
}

.matrix-table th {
    background-color: #f9fafb;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
}

/* Sticky first column for matrix */
.sticky-col {
    position: sticky;
    left: 0;
    background-color: white;
    z-index: 10;
}

[dir="rtl"] .sticky-col {
    left: auto;
    right: 0;
}

.sticky-col-header {
    position: sticky;
    left: 0;
    background-color: #f9fafb;
    z-index: 20;
}

[dir="rtl"] .sticky-col-header {
    left: auto;
    right: 0;
}

/* Category row styling */
.category-row {
    background-color: #f3f4f6;
}

.category-row td {
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.05em;
    color: #374151;
    padding: 0.5rem 1rem;
}

/* Highlight row */
.highlight-row {
    background-color: #eff6ff;
}

/* Status colors */
.status-green {
    color: #059669;
}

.status-orange {
    color: #d97706;
}

.status-red {
    color: #dc2626;
}

/* Card hover effects */
.platform-card {
    transition: transform 0.2s, box-shadow 0.2s;
}

.platform-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
}

/* FAQ accordion animation */
.faq-content {
    transition: max-height 0.3s ease-out;
}

/* Loading spinner */
.spinner {
    border: 3px solid #f3f4f6;
    border-top: 3px solid #3b82f6;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}