/*
 * IntelQI LMS Theme - Custom Markdown Components
 * Callouts, Cards, Buttons, and more
 *
 * Design System:
 * - Uses IntelQI brand colors
 * - Full dark mode support
 * - Responsive design
 * - Lucide icons integration
 *
 * Copyright 2025-2026 Euclideum Solutions Private Limited
 */

/* ============================================
   CSS VARIABLES - Component Colors
   ============================================ */

:root {
    /* Callout Colors - Light Mode */
    --iq-blue-50: #eff6ff;
    --iq-blue-100: #dbeafe;
    --iq-blue-500: #3b82f6;
    --iq-blue-600: #2563eb;
    --iq-blue-700: #1d4ed8;

    --iq-amber-50: #fffbeb;
    --iq-amber-100: #fef3c7;
    --iq-amber-500: #f59e0b;
    --iq-amber-600: #d97706;
    --iq-amber-700: #b45309;

    --iq-green-50: #f0fdf4;
    --iq-green-100: #dcfce7;
    --iq-green-500: #22c55e;
    --iq-green-600: #16a34a;
    --iq-green-700: #15803d;

    --iq-red-50: #fef2f2;
    --iq-red-100: #fee2e2;
    --iq-red-500: #ef4444;
    --iq-red-600: #dc2626;
    --iq-red-700: #b91c1c;

    --iq-slate-50: #f8fafc;
    --iq-slate-100: #f1f5f9;
    --iq-slate-500: #64748b;
    --iq-slate-600: #475569;
    --iq-slate-700: #334155;

    --iq-yellow-50: #fefce8;
    --iq-yellow-100: #fef9c3;
    --iq-yellow-500: #eab308;
    --iq-yellow-600: #ca8a04;
    --iq-yellow-700: #a16207;

    --iq-purple-50: #faf5ff;
    --iq-purple-100: #f3e8ff;
    --iq-purple-500: #a855f7;
    --iq-purple-600: #9333ea;
    --iq-purple-700: #7c3aed;

    --iq-gray-50: #f9fafb;
    --iq-gray-100: #f3f4f6;
    --iq-gray-500: #6b7280;
    --iq-gray-600: #4b5563;
    --iq-gray-700: #374151;

    --iq-cyan-50: #ecfeff;
    --iq-cyan-100: #cffafe;
    --iq-cyan-500: #06b6d4;
    --iq-cyan-600: #0891b2;
    --iq-cyan-700: #0e7490;

    --iq-indigo-50: #eef2ff;
    --iq-indigo-100: #e0e7ff;
    --iq-indigo-500: #6366f1;
    --iq-indigo-600: #4f46e5;
    --iq-indigo-700: #4338ca;

    /* Brand Colors */
    --iq-primary: #154f95;
    --iq-primary-dark: #0d3d7a;
    --iq-primary-light: #3294E3;

    /* Component base */
    --iq-radius-sm: 6px;
    --iq-radius-md: 8px;
    --iq-radius-lg: 12px;
    --iq-radius-xl: 16px;

    --iq-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --iq-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --iq-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

/* Dark Mode Variables */
.dark,
[data-theme="dark"] {
    --iq-blue-50: #1e3a5f;
    --iq-blue-100: #1e3a5f;
    --iq-blue-500: #60a5fa;
    --iq-blue-600: #3b82f6;

    --iq-amber-50: #422006;
    --iq-amber-100: #451a03;
    --iq-amber-500: #fbbf24;
    --iq-amber-600: #f59e0b;

    --iq-green-50: #052e16;
    --iq-green-100: #064e3b;
    --iq-green-500: #34d399;
    --iq-green-600: #22c55e;

    --iq-red-50: #450a0a;
    --iq-red-100: #7f1d1d;
    --iq-red-500: #f87171;
    --iq-red-600: #ef4444;

    --iq-slate-50: #1e293b;
    --iq-slate-100: #334155;
    --iq-slate-500: #94a3b8;
    --iq-slate-600: #cbd5e1;

    --iq-yellow-50: #422006;
    --iq-yellow-100: #713f12;
    --iq-yellow-500: #facc15;
    --iq-yellow-600: #eab308;

    --iq-purple-50: #2e1065;
    --iq-purple-100: #3b0764;
    --iq-purple-500: #c084fc;
    --iq-purple-600: #a855f7;

    --iq-gray-50: #1f2937;
    --iq-gray-100: #374151;
    --iq-gray-500: #9ca3af;
    --iq-gray-600: #d1d5db;

    --iq-cyan-50: #083344;
    --iq-cyan-100: #164e63;
    --iq-cyan-500: #22d3ee;
    --iq-cyan-600: #06b6d4;

    --iq-indigo-50: #1e1b4b;
    --iq-indigo-100: #312e81;
    --iq-indigo-500: #818cf8;
    --iq-indigo-600: #6366f1;

    --iq-primary: #3294E3;
    --iq-primary-dark: #2080d0;
    --iq-primary-light: #60a5fa;
}

/* ============================================
   CALLOUT COMPONENTS
   ============================================ */

.iq-callout {
    display: flex;
    gap: 12px;
    padding: 16px;
    border-radius: var(--iq-radius-lg);
    margin: 16px 0;
    border-left: 4px solid;
    transition: all 0.2s ease;
}

.iq-callout-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.iq-callout-icon svg,
.iq-callout-icon i {
    width: 20px;
    height: 20px;
    stroke-width: 2;
}

.iq-callout-content {
    flex: 1;
    min-width: 0;
}

.iq-callout-title {
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.iq-callout-body {
    font-size: 14px;
    line-height: 1.6;
}

.iq-callout-body p {
    margin: 0;
}

.iq-callout-body p + p {
    margin-top: 8px;
}

/* Callout Color Variants */

/* Info (Blue) */
.iq-callout-color-blue,
.iq-callout-info {
    background-color: var(--iq-blue-50);
    border-left-color: var(--iq-blue-500);
}

.iq-callout-color-blue .iq-callout-icon,
.iq-callout-info .iq-callout-icon {
    color: var(--iq-blue-600);
}

.iq-callout-color-blue .iq-callout-title,
.iq-callout-info .iq-callout-title {
    color: var(--iq-blue-700);
}

.dark .iq-callout-color-blue .iq-callout-title,
[data-theme="dark"] .iq-callout-color-blue .iq-callout-title,
.dark .iq-callout-info .iq-callout-title,
[data-theme="dark"] .iq-callout-info .iq-callout-title {
    color: var(--iq-blue-500);
}

.iq-callout-color-blue .iq-callout-body,
.iq-callout-info .iq-callout-body {
    color: var(--iq-blue-700);
}

.dark .iq-callout-color-blue .iq-callout-body,
[data-theme="dark"] .iq-callout-color-blue .iq-callout-body,
.dark .iq-callout-info .iq-callout-body,
[data-theme="dark"] .iq-callout-info .iq-callout-body {
    color: var(--iq-blue-100);
}

/* Warning (Amber) */
.iq-callout-color-amber,
.iq-callout-warning {
    background-color: var(--iq-amber-50);
    border-left-color: var(--iq-amber-500);
}

.iq-callout-color-amber .iq-callout-icon,
.iq-callout-warning .iq-callout-icon {
    color: var(--iq-amber-600);
}

.iq-callout-color-amber .iq-callout-title,
.iq-callout-warning .iq-callout-title {
    color: var(--iq-amber-700);
}

.dark .iq-callout-color-amber .iq-callout-title,
[data-theme="dark"] .iq-callout-color-amber .iq-callout-title,
.dark .iq-callout-warning .iq-callout-title,
[data-theme="dark"] .iq-callout-warning .iq-callout-title {
    color: var(--iq-amber-500);
}

.iq-callout-color-amber .iq-callout-body,
.iq-callout-warning .iq-callout-body {
    color: var(--iq-amber-700);
}

.dark .iq-callout-color-amber .iq-callout-body,
[data-theme="dark"] .iq-callout-color-amber .iq-callout-body,
.dark .iq-callout-warning .iq-callout-body,
[data-theme="dark"] .iq-callout-warning .iq-callout-body {
    color: #fef3c7;
}

/* Success (Green) */
.iq-callout-color-green,
.iq-callout-success {
    background-color: var(--iq-green-50);
    border-left-color: var(--iq-green-500);
}

.iq-callout-color-green .iq-callout-icon,
.iq-callout-success .iq-callout-icon {
    color: var(--iq-green-600);
}

.iq-callout-color-green .iq-callout-title,
.iq-callout-success .iq-callout-title {
    color: var(--iq-green-700);
}

.dark .iq-callout-color-green .iq-callout-title,
[data-theme="dark"] .iq-callout-color-green .iq-callout-title,
.dark .iq-callout-success .iq-callout-title,
[data-theme="dark"] .iq-callout-success .iq-callout-title {
    color: var(--iq-green-500);
}

.iq-callout-color-green .iq-callout-body,
.iq-callout-success .iq-callout-body {
    color: var(--iq-green-700);
}

.dark .iq-callout-color-green .iq-callout-body,
[data-theme="dark"] .iq-callout-color-green .iq-callout-body,
.dark .iq-callout-success .iq-callout-body,
[data-theme="dark"] .iq-callout-success .iq-callout-body {
    color: #dcfce7;
}

/* Danger (Red) */
.iq-callout-color-red,
.iq-callout-danger {
    background-color: var(--iq-red-50);
    border-left-color: var(--iq-red-500);
}

.iq-callout-color-red .iq-callout-icon,
.iq-callout-danger .iq-callout-icon {
    color: var(--iq-red-600);
}

.iq-callout-color-red .iq-callout-title,
.iq-callout-danger .iq-callout-title {
    color: var(--iq-red-700);
}

.dark .iq-callout-color-red .iq-callout-title,
[data-theme="dark"] .iq-callout-color-red .iq-callout-title,
.dark .iq-callout-danger .iq-callout-title,
[data-theme="dark"] .iq-callout-danger .iq-callout-title {
    color: var(--iq-red-500);
}

.iq-callout-color-red .iq-callout-body,
.iq-callout-danger .iq-callout-body {
    color: var(--iq-red-700);
}

.dark .iq-callout-color-red .iq-callout-body,
[data-theme="dark"] .iq-callout-color-red .iq-callout-body,
.dark .iq-callout-danger .iq-callout-body,
[data-theme="dark"] .iq-callout-danger .iq-callout-body {
    color: #fee2e2;
}

/* Note (Slate) */
.iq-callout-color-slate,
.iq-callout-note {
    background-color: var(--iq-slate-50);
    border-left-color: var(--iq-slate-500);
}

.iq-callout-color-slate .iq-callout-icon,
.iq-callout-note .iq-callout-icon {
    color: var(--iq-slate-600);
}

.iq-callout-color-slate .iq-callout-title,
.iq-callout-note .iq-callout-title {
    color: var(--iq-slate-700);
}

.dark .iq-callout-color-slate .iq-callout-title,
[data-theme="dark"] .iq-callout-color-slate .iq-callout-title,
.dark .iq-callout-note .iq-callout-title,
[data-theme="dark"] .iq-callout-note .iq-callout-title {
    color: var(--iq-slate-500);
}

.iq-callout-color-slate .iq-callout-body,
.iq-callout-note .iq-callout-body {
    color: var(--iq-slate-700);
}

.dark .iq-callout-color-slate .iq-callout-body,
[data-theme="dark"] .iq-callout-color-slate .iq-callout-body,
.dark .iq-callout-note .iq-callout-body,
[data-theme="dark"] .iq-callout-note .iq-callout-body {
    color: #e2e8f0;
}

/* Tip (Yellow) */
.iq-callout-color-yellow,
.iq-callout-tip {
    background-color: var(--iq-yellow-50);
    border-left-color: var(--iq-yellow-500);
}

.iq-callout-color-yellow .iq-callout-icon,
.iq-callout-tip .iq-callout-icon {
    color: var(--iq-yellow-600);
}

.iq-callout-color-yellow .iq-callout-title,
.iq-callout-tip .iq-callout-title {
    color: var(--iq-yellow-700);
}

.dark .iq-callout-color-yellow .iq-callout-title,
[data-theme="dark"] .iq-callout-color-yellow .iq-callout-title,
.dark .iq-callout-tip .iq-callout-title,
[data-theme="dark"] .iq-callout-tip .iq-callout-title {
    color: var(--iq-yellow-500);
}

.iq-callout-color-yellow .iq-callout-body,
.iq-callout-tip .iq-callout-body {
    color: var(--iq-yellow-700);
}

.dark .iq-callout-color-yellow .iq-callout-body,
[data-theme="dark"] .iq-callout-color-yellow .iq-callout-body,
.dark .iq-callout-tip .iq-callout-body,
[data-theme="dark"] .iq-callout-tip .iq-callout-body {
    color: #fef9c3;
}

/* Important (Purple) */
.iq-callout-color-purple,
.iq-callout-important {
    background-color: var(--iq-purple-50);
    border-left-color: var(--iq-purple-500);
}

.iq-callout-color-purple .iq-callout-icon,
.iq-callout-important .iq-callout-icon {
    color: var(--iq-purple-600);
}

.iq-callout-color-purple .iq-callout-title,
.iq-callout-important .iq-callout-title {
    color: var(--iq-purple-700);
}

.dark .iq-callout-color-purple .iq-callout-title,
[data-theme="dark"] .iq-callout-color-purple .iq-callout-title,
.dark .iq-callout-important .iq-callout-title,
[data-theme="dark"] .iq-callout-important .iq-callout-title {
    color: var(--iq-purple-500);
}

.iq-callout-color-purple .iq-callout-body,
.iq-callout-important .iq-callout-body {
    color: var(--iq-purple-700);
}

.dark .iq-callout-color-purple .iq-callout-body,
[data-theme="dark"] .iq-callout-color-purple .iq-callout-body,
.dark .iq-callout-important .iq-callout-body,
[data-theme="dark"] .iq-callout-important .iq-callout-body {
    color: #f3e8ff;
}

/* Quote (Gray) */
.iq-callout-color-gray,
.iq-callout-quote {
    background-color: var(--iq-gray-50);
    border-left-color: var(--iq-gray-500);
}

.iq-callout-color-gray .iq-callout-icon,
.iq-callout-quote .iq-callout-icon {
    color: var(--iq-gray-600);
}

.iq-callout-color-gray .iq-callout-title,
.iq-callout-quote .iq-callout-title {
    color: var(--iq-gray-700);
}

.dark .iq-callout-color-gray .iq-callout-title,
[data-theme="dark"] .iq-callout-color-gray .iq-callout-title,
.dark .iq-callout-quote .iq-callout-title,
[data-theme="dark"] .iq-callout-quote .iq-callout-title {
    color: var(--iq-gray-500);
}

.iq-callout-color-gray .iq-callout-body,
.iq-callout-quote .iq-callout-body {
    color: var(--iq-gray-700);
    font-style: italic;
}

.dark .iq-callout-color-gray .iq-callout-body,
[data-theme="dark"] .iq-callout-color-gray .iq-callout-body,
.dark .iq-callout-quote .iq-callout-body,
[data-theme="dark"] .iq-callout-quote .iq-callout-body {
    color: #e5e7eb;
}

/* Example (Cyan) */
.iq-callout-color-cyan,
.iq-callout-example {
    background-color: var(--iq-cyan-50);
    border-left-color: var(--iq-cyan-500);
}

.iq-callout-color-cyan .iq-callout-icon,
.iq-callout-example .iq-callout-icon {
    color: var(--iq-cyan-600);
}

.iq-callout-color-cyan .iq-callout-title,
.iq-callout-example .iq-callout-title {
    color: var(--iq-cyan-700);
}

.dark .iq-callout-color-cyan .iq-callout-title,
[data-theme="dark"] .iq-callout-color-cyan .iq-callout-title,
.dark .iq-callout-example .iq-callout-title,
[data-theme="dark"] .iq-callout-example .iq-callout-title {
    color: var(--iq-cyan-500);
}

.iq-callout-color-cyan .iq-callout-body,
.iq-callout-example .iq-callout-body {
    color: var(--iq-cyan-700);
}

.dark .iq-callout-color-cyan .iq-callout-body,
[data-theme="dark"] .iq-callout-color-cyan .iq-callout-body,
.dark .iq-callout-example .iq-callout-body,
[data-theme="dark"] .iq-callout-example .iq-callout-body {
    color: #cffafe;
}

/* Definition (Indigo) */
.iq-callout-color-indigo,
.iq-callout-definition {
    background-color: var(--iq-indigo-50);
    border-left-color: var(--iq-indigo-500);
}

.iq-callout-color-indigo .iq-callout-icon,
.iq-callout-definition .iq-callout-icon {
    color: var(--iq-indigo-600);
}

.iq-callout-color-indigo .iq-callout-title,
.iq-callout-definition .iq-callout-title {
    color: var(--iq-indigo-700);
}

.dark .iq-callout-color-indigo .iq-callout-title,
[data-theme="dark"] .iq-callout-color-indigo .iq-callout-title,
.dark .iq-callout-definition .iq-callout-title,
[data-theme="dark"] .iq-callout-definition .iq-callout-title {
    color: var(--iq-indigo-500);
}

.iq-callout-color-indigo .iq-callout-body,
.iq-callout-definition .iq-callout-body {
    color: var(--iq-indigo-700);
}

.dark .iq-callout-color-indigo .iq-callout-body,
[data-theme="dark"] .iq-callout-color-indigo .iq-callout-body,
.dark .iq-callout-definition .iq-callout-body,
[data-theme="dark"] .iq-callout-definition .iq-callout-body {
    color: #e0e7ff;
}

/* ============================================
   CARD COMPONENTS
   ============================================ */

.iq-card {
    display: block;
    background: #ffffff;
    border-radius: var(--iq-radius-lg);
    overflow: hidden;
    transition: all 0.2s ease;
    text-decoration: none !important;
    color: inherit;
    margin: 16px 0;
}

.iq-card:hover {
    text-decoration: none !important;
}

/* Remove underlines from all text inside cards */
.iq-card,
.iq-card *,
.iq-card a,
.iq-card a:hover,
.iq-card a:visited,
.iq-card .iq-card-title,
.iq-card .iq-card-content {
    text-decoration: none !important;
}

.dark .iq-card,
[data-theme="dark"] .iq-card {
    background: #111a2e;
}

/* Card Variants */
.iq-card-default {
    border: 1px solid #e2e8f0;
    box-shadow: var(--iq-shadow-sm);
}

.iq-card-default:hover {
    border-color: #cbd5e1;
    box-shadow: var(--iq-shadow-md);
}

.dark .iq-card-default,
[data-theme="dark"] .iq-card-default {
    border-color: #1e293b;
}

.dark .iq-card-default:hover,
[data-theme="dark"] .iq-card-default:hover {
    border-color: #334155;
}

.iq-card-outlined {
    border: 2px solid #e2e8f0;
    background: transparent;
}

.iq-card-outlined:hover {
    border-color: var(--iq-primary);
}

.dark .iq-card-outlined,
[data-theme="dark"] .iq-card-outlined {
    border-color: #334155;
}

.dark .iq-card-outlined:hover,
[data-theme="dark"] .iq-card-outlined:hover {
    border-color: var(--iq-primary);
}

.iq-card-elevated {
    border: none;
    box-shadow: var(--iq-shadow-md);
}

.iq-card-elevated:hover {
    box-shadow: var(--iq-shadow-lg);
    transform: translateY(-2px);
}

.iq-card-filled {
    background: #f1f5f9;
    border: none;
}

.iq-card-filled:hover {
    background: #e2e8f0;
}

.dark .iq-card-filled,
[data-theme="dark"] .iq-card-filled {
    background: #1e293b;
}

.dark .iq-card-filled:hover,
[data-theme="dark"] .iq-card-filled:hover {
    background: #334155;
}

.iq-card-gradient {
    background: linear-gradient(135deg, var(--iq-primary) 0%, var(--iq-primary-dark) 100%);
    border: none;
    color: #ffffff;
}

.iq-card-gradient .iq-card-title,
.iq-card-gradient .iq-card-content {
    color: #ffffff;
}

.iq-card-gradient .iq-card-icon {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

.iq-card-gradient .iq-card-icon svg {
    color: #ffffff;
}

/* Card Image */
.iq-card-image {
    width: 100%;
    height: 180px;
    overflow: hidden;
}

.iq-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.iq-card:hover .iq-card-image img {
    transform: scale(1.05);
}

/* Card Body - Improved Layout */
.iq-card-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: 100%;
}

/* Card Icon - Fixed for light mode visibility */
.iq-card-icon {
    width: 44px;
    height: 44px;
    min-width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e0f2fe;
    border-radius: var(--iq-radius-md);
    color: var(--iq-primary);
    flex-shrink: 0;
}

.iq-card-icon svg,
.iq-card-icon i {
    width: 22px;
    height: 22px;
    color: inherit;
}

/* Light mode - ensure icon is visible with good contrast */
.iq-card-icon svg {
    color: var(--iq-primary);
    stroke: var(--iq-primary);
}

.dark .iq-card-icon,
[data-theme="dark"] .iq-card-icon {
    background: rgba(50, 148, 227, 0.2);
    color: var(--iq-primary-light);
}

.dark .iq-card-icon svg,
[data-theme="dark"] .iq-card-icon svg {
    color: var(--iq-primary-light);
    stroke: var(--iq-primary-light);
}

/* Card Header - Horizontal layout for icon + title */
.iq-card-header {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

/* Card Title */
.iq-card-title {
    font-size: 17px;
    font-weight: 600;
    color: #0f172a;
    margin: 0;
    line-height: 1.4;
    flex: 1;
}

.dark .iq-card-title,
[data-theme="dark"] .iq-card-title {
    color: #ffffff;
}

/* Card Badge */
.iq-card-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    background: var(--iq-blue-50);
    color: var(--iq-primary);
    font-size: 12px;
    font-weight: 500;
    border-radius: 100px;
}

.dark .iq-card-badge,
[data-theme="dark"] .iq-card-badge {
    background: rgba(50, 148, 227, 0.15);
}

/* Card Content */
.iq-card-content {
    font-size: 14px;
    line-height: 1.6;
    color: #475569;
    flex: 1;
}

.dark .iq-card-content,
[data-theme="dark"] .iq-card-content {
    color: #9ca3af;
}

/* Card Link Indicator - Fixed position at bottom right */
.iq-card-link-indicator {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    color: var(--iq-primary);
    font-size: 14px;
    font-weight: 500;
    margin-top: auto;
    padding-top: 8px;
}

.iq-card-link-indicator svg,
.iq-card-link-indicator i {
    width: 18px;
    height: 18px;
    transition: transform 0.2s ease;
}

.iq-card:hover .iq-card-link-indicator svg,
.iq-card:hover .iq-card-link-indicator i {
    transform: translateX(4px);
}

/* Card Grid */
.iq-card-grid {
    display: grid;
    gap: 20px;
    margin: 20px 0;
}

.iq-card-grid-2 {
    grid-template-columns: repeat(2, 1fr);
}

.iq-card-grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

.iq-card-grid-4 {
    grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 1024px) {
    .iq-card-grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
    .iq-card-grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .iq-card-grid-2,
    .iq-card-grid-3,
    .iq-card-grid-4 {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   BUTTON COMPONENTS
   ============================================ */

.iq-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 500;
    text-decoration: none !important;
    border-radius: var(--iq-radius-md);
    transition: all 0.2s ease;
    cursor: pointer;
    border: none;
    white-space: nowrap;
    /* Add margin for spacing when buttons are adjacent */
    margin: 4px 8px 4px 0;
}

/* Remove margin for last button in a row */
.iq-btn:last-child {
    margin-right: 0;
}

.iq-btn:hover,
.iq-btn:visited,
.iq-btn:active,
.iq-btn:focus {
    text-decoration: none !important;
}

/* Remove underlines from button text */
.iq-btn,
.iq-btn *,
.iq-btn span {
    text-decoration: none !important;
}

.iq-btn-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* Button Sizes */
.iq-btn-sm {
    padding: 8px 14px;
    font-size: 13px;
}

.iq-btn-sm .iq-btn-icon {
    width: 14px;
    height: 14px;
}

.iq-btn-md {
    padding: 10px 20px;
    font-size: 14px;
}

.iq-btn-lg {
    padding: 14px 28px;
    font-size: 16px;
}

.iq-btn-lg .iq-btn-icon {
    width: 20px;
    height: 20px;
}

.iq-btn-full {
    width: 100%;
}

/* Button Variants */

/* Primary */
.iq-btn-primary {
    background: var(--iq-primary);
    color: #ffffff;
}

.iq-btn-primary:hover {
    background: var(--iq-primary-dark);
    color: #ffffff;
}

/* Secondary */
.iq-btn-secondary {
    background: #f1f5f9;
    color: #334155;
}

.iq-btn-secondary:hover {
    background: #e2e8f0;
    color: #1e293b;
}

.dark .iq-btn-secondary,
[data-theme="dark"] .iq-btn-secondary {
    background: #1e293b;
    color: #e2e8f0;
}

.dark .iq-btn-secondary:hover,
[data-theme="dark"] .iq-btn-secondary:hover {
    background: #334155;
    color: #ffffff;
}

/* Success */
.iq-btn-success {
    background: var(--iq-green-600);
    color: #ffffff;
}

.iq-btn-success:hover {
    background: var(--iq-green-700);
    color: #ffffff;
}

/* Danger */
.iq-btn-danger {
    background: var(--iq-red-600);
    color: #ffffff;
}

.iq-btn-danger:hover {
    background: var(--iq-red-700);
    color: #ffffff;
}

/* Warning */
.iq-btn-warning {
    background: var(--iq-amber-500);
    color: #1e293b;
}

.iq-btn-warning:hover {
    background: var(--iq-amber-600);
    color: #1e293b;
}

/* Info */
.iq-btn-info {
    background: var(--iq-blue-500);
    color: #ffffff;
}

.iq-btn-info:hover {
    background: var(--iq-blue-600);
    color: #ffffff;
}

/* Outline */
.iq-btn-outline {
    background: transparent;
    color: var(--iq-primary);
    border: 2px solid var(--iq-primary);
}

.iq-btn-outline:hover {
    background: var(--iq-primary);
    color: #ffffff;
}

/* Ghost */
.iq-btn-ghost {
    background: transparent;
    color: var(--iq-primary);
}

.iq-btn-ghost:hover {
    background: var(--iq-blue-50);
    color: var(--iq-primary);
}

.dark .iq-btn-ghost:hover,
[data-theme="dark"] .iq-btn-ghost:hover {
    background: rgba(50, 148, 227, 0.1);
}

/* Link */
.iq-btn-link {
    background: transparent;
    color: var(--iq-primary);
    padding-left: 0;
    padding-right: 0;
}

.iq-btn-link:hover {
    color: var(--iq-primary-dark);
    text-decoration: underline;
}

/* Button Group */
.iq-btn-group {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 16px 0;
}

/* Reset button margin inside groups since group handles gap */
.iq-btn-group .iq-btn {
    margin: 0;
}

.iq-btn-group-left {
    justify-content: flex-start;
}

.iq-btn-group-center {
    justify-content: center;
}

.iq-btn-group-right {
    justify-content: flex-end;
}

/* ============================================
   SECTION COMPONENT - Horizontal Layout
   ============================================ */

.iq-section {
    display: flex;
    flex-wrap: wrap;
    margin: 20px 0;
}

/* Section alignment options */
.iq-section-row {
    flex-direction: row;
}

.iq-section-column {
    flex-direction: column;
}

.iq-section-center {
    align-items: center;
    justify-content: center;
}

.iq-section-start {
    align-items: flex-start;
    justify-content: flex-start;
}

.iq-section-end {
    align-items: flex-end;
    justify-content: flex-end;
}

.iq-section-between {
    justify-content: space-between;
}

.iq-section-around {
    justify-content: space-around;
}

.iq-section-evenly {
    justify-content: space-evenly;
}

/* Gap sizes */
.iq-section-gap-xs {
    gap: 8px;
}

.iq-section-gap-sm {
    gap: 12px;
}

.iq-section-gap-md {
    gap: 16px;
}

.iq-section-gap-lg {
    gap: 24px;
}

.iq-section-gap-xl {
    gap: 32px;
}

/* Default gap if none specified */
.iq-section:not([class*="iq-section-gap"]) {
    gap: 16px;
}

/* Section items - equal width distribution */
.iq-section > * {
    flex: 1 1 0;
    min-width: 200px;
}

/* Cards and buttons inside sections */
.iq-section > .iq-card,
.iq-section > a.iq-card,
.iq-section > div.iq-card {
    flex: 1 1 0;
    min-width: 200px;
    margin: 0;
}

.iq-section > .iq-btn,
.iq-section > a.iq-btn {
    flex: 0 0 auto;
    margin: 0;
}

/* Allow items to maintain natural size with nowrap option */
.iq-section-nowrap {
    flex-wrap: nowrap;
}

.iq-section-nowrap > * {
    flex: 0 0 auto;
}

/* Cards inside sections should not have margin (section handles gap) */
.iq-section > .iq-card,
.iq-section > .iq-component-wrapper > .iq-card {
    margin: 0;
}

/* Buttons inside sections should not have margin */
.iq-section > .iq-btn,
.iq-section > a.iq-btn {
    margin: 0;
    flex: 0 0 auto;
}

/* Responsive: Stack on mobile */
@media (max-width: 640px) {
    .iq-section:not(.iq-section-nowrap) {
        flex-direction: column;
    }

    .iq-section:not(.iq-section-nowrap) > * {
        flex: none;
        width: 100%;
    }
}

/* ============================================
   STEPS / TIMELINE COMPONENT
   ============================================ */

.iq-steps {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 20px 0;
    padding-left: 0;
}

.iq-step {
    display: flex;
    gap: 16px;
    position: relative;
    padding-bottom: 24px;
}

.iq-step:last-child {
    padding-bottom: 0;
}

.iq-step::before {
    content: '';
    position: absolute;
    left: 15px;
    top: 32px;
    bottom: 0;
    width: 2px;
    background: #e2e8f0;
}

.iq-step:last-child::before {
    display: none;
}

.dark .iq-step::before,
[data-theme="dark"] .iq-step::before {
    background: #334155;
}

.iq-step-number {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--iq-primary);
    color: #ffffff;
    font-weight: 600;
    font-size: 14px;
    border-radius: 50%;
    position: relative;
    z-index: 1;
}

.iq-step-content {
    flex: 1;
    padding-top: 4px;
    font-size: 15px;
    line-height: 1.6;
    color: #334155;
}

.dark .iq-step-content,
[data-theme="dark"] .iq-step-content {
    color: #e2e8f0;
}

/* ============================================
   DETAILS / ACCORDION COMPONENT
   ============================================ */

.iq-details {
    margin: 16px 0;
    border: 1px solid #e2e8f0;
    border-radius: var(--iq-radius-md);
    overflow: hidden;
}

.dark .iq-details,
[data-theme="dark"] .iq-details {
    border-color: #334155;
}

.iq-details-summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 16px;
    background: #f8fafc;
    cursor: pointer;
    font-weight: 500;
    color: #334155;
    list-style: none;
    transition: background 0.2s ease;
}

.iq-details-summary::-webkit-details-marker {
    display: none;
}

.iq-details-summary:hover {
    background: #f1f5f9;
}

.dark .iq-details-summary,
[data-theme="dark"] .iq-details-summary {
    background: #1e293b;
    color: #e2e8f0;
}

.dark .iq-details-summary:hover,
[data-theme="dark"] .iq-details-summary:hover {
    background: #334155;
}

.iq-details-icon {
    width: 16px;
    height: 16px;
    transition: transform 0.2s ease;
    color: #64748b;
}

.iq-details[open] .iq-details-icon {
    transform: rotate(90deg);
}

.iq-details-content {
    padding: 16px;
    background: #ffffff;
    font-size: 14px;
    line-height: 1.6;
    color: #475569;
}

.dark .iq-details-content,
[data-theme="dark"] .iq-details-content {
    background: #0f172a;
    color: #9ca3af;
}

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

@media (max-width: 640px) {
    .iq-callout {
        padding: 12px;
        gap: 10px;
    }

    .iq-callout-icon {
        width: 20px;
        height: 20px;
    }

    .iq-callout-icon svg,
    .iq-callout-icon i {
        width: 16px;
        height: 16px;
    }

    .iq-callout-title {
        font-size: 13px;
    }

    .iq-callout-body {
        font-size: 13px;
    }

    .iq-card-body {
        padding: 16px;
    }

    .iq-card-title {
        font-size: 16px;
    }

    .iq-btn-group {
        flex-direction: column;
    }

    .iq-btn-group .iq-btn {
        width: 100%;
    }
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
    .iq-callout {
        border: 1px solid #000;
        break-inside: avoid;
    }

    .iq-card {
        border: 1px solid #000;
        break-inside: avoid;
    }

    .iq-btn {
        border: 1px solid #000;
    }
}

/* ============================================
   GLOBAL LINK STYLES FOR COMPONENTS
   Remove all underlines from component links
   ============================================ */

.iq-component-wrapper a,
.iq-component-wrapper a:hover,
.iq-component-wrapper a:visited,
.iq-component-wrapper a:active,
.iq-component-wrapper a:focus,
a.iq-card,
a.iq-card:hover,
a.iq-card:visited,
a.iq-btn,
a.iq-btn:hover,
a.iq-btn:visited {
    text-decoration: none !important;
}

/* Override prose/ProseMirror link styles within components */
.ProseMirror .iq-card,
.ProseMirror .iq-btn,
.prose .iq-card,
.prose .iq-btn,
.ProseMirror .iq-component-wrapper a,
.prose .iq-component-wrapper a {
    text-decoration: none !important;
}

/* ============================================
   DARK MODE TEXT COLOR FIXES
   Ensure readability in dark mode
   ============================================ */

.dark .iq-callout-body,
[data-theme="dark"] .iq-callout-body {
    color: inherit;
}

/* Ensure dark mode icon colors */
.dark .iq-card-icon svg,
[data-theme="dark"] .iq-card-icon svg {
    color: var(--iq-primary-light);
}

/* Dark mode details content */
.dark .iq-details-content,
[data-theme="dark"] .iq-details-content {
    background: #111827;
    color: #d1d5db;
}

/* Dark mode step content */
.dark .iq-step-content,
[data-theme="dark"] .iq-step-content {
    color: #d1d5db;
}

/* ============================================
   MARKDOWN ELEMENTS RENDERED BY JS
   Headings and horizontal rules
   ============================================ */

.iq-heading {
    margin: 24px 0 16px 0;
    font-weight: 600;
    line-height: 1.3;
    color: #0f172a;
}

.dark .iq-heading,
[data-theme="dark"] .iq-heading {
    color: #f1f5f9;
}

.iq-heading-1 {
    font-size: 2rem;
}

.iq-heading-2 {
    font-size: 1.5rem;
}

.iq-heading-3 {
    font-size: 1.25rem;
}

.iq-heading-4 {
    font-size: 1.125rem;
}

.iq-heading-5 {
    font-size: 1rem;
}

.iq-heading-6 {
    font-size: 0.875rem;
}

.iq-hr {
    border: none;
    height: 1px;
    background: #e2e8f0;
    margin: 24px 0;
}

.dark .iq-hr,
[data-theme="dark"] .iq-hr {
    background: #334155;
}