.wp-block-ai-builder-aibui-table, .aibui-table{--tb-border:#e5e7eb;--tb-muted:#6b7280;--tb-bg:rgba(79,70,229,.06);--tb-primary:#4f46e5} .wp-block-ai-builder-aibui-table .aibui-table-wrap, .aibui-table .aibui-table-wrap{background:var(--tb-bg);border:1px solid var(--tb-border);border-radius:12px} .wp-block-ai-builder-aibui-table .aibui-table-toolbar, .aibui-table .aibui-table-toolbar{display:flex;justify-content:flex-end;padding:10px;border-bottom:1px solid var(--tb-border)} .wp-block-ai-builder-aibui-table .aibui-input, .aibui-table .aibui-input{width:240px;max-width:100%;border:1px solid var(--tb-border);border-radius:8px;padding:6px 8px} .wp-block-ai-builder-aibui-table .aibui-table-scroll, .aibui-table .aibui-table-scroll{overflow:auto;max-height:360px} .wp-block-ai-builder-aibui-table .aibui-table-el, .aibui-table .aibui-table-el{width:100%;border-collapse:separate;border-spacing:0} .wp-block-ai-builder-aibui-table thead th, .aibui-table thead th{position:sticky;top:0;background:#f9fafb;border-bottom:1px solid var(--tb-border);text-align:left;font-weight:600;color:#111827} .wp-block-ai-builder-aibui-table th, .wp-block-ai-builder-aibui-table td, .aibui-table th, .aibui-table td{padding:10px 12px;border-bottom:1px solid var(--tb-border);font-size:14px} .wp-block-ai-builder-aibui-table .aibui-th-btn, .aibui-table .aibui-th-btn{display:inline-flex;align-items:center;gap:6px;background:transparent;border:0;padding:0;color:inherit;cursor:pointer} .wp-block-ai-builder-aibui-table .aibui-sort-icon, .aibui-table .aibui-sort-icon{display:none} .wp-block-ai-builder-aibui-table th[data-sort], .aibui-table th[data-sort]{position:relative} .wp-block-ai-builder-aibui-table th[data-sort="asc"] .aibui-sort-icon--up, .aibui-table th[data-sort="asc"] .aibui-sort-icon--up{display:inline} .wp-block-ai-builder-aibui-table th[data-sort="desc"] .aibui-sort-icon--down, .aibui-table th[data-sort="desc"] .aibui-sort-icon--down{display:inline} .wp-block-ai-builder-aibui-table tbody tr:hover, .aibui-table tbody tr:hover{background:#fafafa} .wp-block-ai-builder-aibui-table .aibui-table-footer, .aibui-table .aibui-table-footer{display:flex;justify-content:flex-end;gap:8px;padding:10px;border-top:1px solid var(--tb-border)} .wp-block-ai-builder-aibui-table .aibui-btn, .aibui-table .aibui-btn{background:#fff;border:1px solid var(--tb-border);border-radius:8px;padding:6px 10px;color:#111827;cursor:pointer} .wp-block-ai-builder-aibui-table th[data-sort] .aibui-th-btn, .aibui-table th[data-sort] .aibui-th-btn{background:rgba(0,0,0,0.02);border-radius:6px} .wp-block-ai-builder-aibui-table th[data-sort="asc"] .aibui-th-btn, .wp-block-ai-builder-aibui-table th[data-sort="desc"] .aibui-th-btn, .aibui-table th[data-sort="asc"] .aibui-th-btn, .aibui-table th[data-sort="desc"] .aibui-th-btn{background:color-mix(in srgb, var(--tb-primary) 12%, #ffffff);} .wp-block-ai-builder-aibui-table .aibui-table-wrap, .aibui-table .aibui-table-wrap{--mix-bg: color-mix(in srgb, var(--tb-primary) 6%, #ffffff)} .wp-block-ai-builder-aibui-table .aibui-btn[disabled], .aibui-table .aibui-btn[disabled]{opacity:.5;cursor:default} .wp-block-ai-builder-aibui-table .aibui-page-indicator, .aibui-table .aibui-page-indicator{font-size:12px;color:var(--tb-muted);padding:0 6px} .table-container { padding: 60px 24px; margin: 0 auto; max-width: 1000px; } .table-title { font-size: 2rem; font-weight: 700; color: #1a1a1a; margin-bottom: 1rem; } .table-description { font-size: 1.1rem; color: #666; margin-bottom: 2.5rem; } .pricing-table { width: 100%; border-collapse: separate; border-spacing: 0; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05); } .pricing-table th, .pricing-table td { padding: 1.25rem; text-align: center; border: 1px solid #e5e7eb; } .pricing-table th { background-color: #2563eb; color: white; font-weight: 600; font-size: 1.1rem; text-transform: uppercase; letter-spacing: 0.5px; } .pricing-table td { font-size: 1rem; color: #444; background-color: white; transition: background-color 0.3s ease; } .pricing-table tr:hover td { background-color: #f8f9fa; } .pricing-table tr:first-child th:first-child { border-top-left-radius: 12px; } .pricing-table tr:first-child th:last-child { border-top-right-radius: 12px; } .pricing-table tr:last-child td:first-child { border-bottom-left-radius: 12px; } .pricing-table tr:last-child td:last-child { border-bottom-right-radius: 12px; } /* Highlight the Pro plan */ .pricing-table th:nth-child(3), .pricing-table td:nth-child(3) { background-color: #f0f7ff; position: relative; } .pricing-table th:nth-child(3)::after { content: "Popular"; position: absolute; top: 0; right: 0; background-color: #2563eb; color: white; font-size: 0.75rem; padding: 4px 8px; border-bottom-left-radius: 8px; } /* Responsive Styles */ @media (max-width: 768px) { .table-container { padding: 40px 16px; } .table-title { font-size: 1.75rem; } .table-description { font-size: 1rem; margin-bottom: 2rem; } .pricing-table { display: block; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; } .pricing-table th, .pricing-table td { padding: 1rem; font-size: 0.9rem; } .pricing-table th { font-size: 1rem; } } /* Animation */ @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .table-container { animation: fadeIn 0.6s ease-out; }