/* Event Monster Premium - Tailwind CSS Source */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* CSS Custom Properties - Complete Design System */
:root {
    /* Primary Colors - Indigo Palette */
    --em-primary-50: #eef2ff;
    --em-primary-100: #e0e7ff;
    --em-primary-200: #c7d2fe;
    --em-primary-300: #a5b4fc;
    --em-primary-400: #818cf8;
    --em-primary-500: #6366f1;
    --em-primary-600: #4f46e5;
    --em-primary-700: #4338ca;
    --em-primary-800: #3730a3;
    --em-primary-900: #312e81;
    --em-primary-950: #1e1b4b;

    /* Gray Palette - Tailwind Gray */
    --em-gray-50: #f9fafb;
    --em-gray-100: #f3f4f6;
    --em-gray-200: #e5e7eb;
    --em-gray-300: #d1d5db;
    --em-gray-400: #9ca3af;
    --em-gray-500: #6b7280;
    --em-gray-600: #4b5563;
    --em-gray-700: #374151;
    --em-gray-800: #1f2937;
    --em-gray-900: #111827;
    --em-gray-950: #030712;

    /* Slate Palette */
    --em-slate-50: #f8fafc;
    --em-slate-100: #f1f5f9;
    --em-slate-200: #e2e8f0;
    --em-slate-300: #cbd5e1;
    --em-slate-400: #94a3b8;
    --em-slate-500: #64748b;
    --em-slate-600: #475569;
    --em-slate-700: #334155;
    --em-slate-800: #1e293b;
    --em-slate-900: #0f172a;

    /* Additional Colors */
    --em-white: #ffffff;
    --em-blue-100: #dbeafe;
    --em-blue-600: #2563eb;
    --em-green-100: #dcfce7;
    --em-green-600: #16a34a;
    --em-red-100: #fee2e2;
    --em-red-600: #dc2626;
    --em-yellow-100: #fef3c7;
    --em-yellow-600: #d97706;

    /* Success Colors */
    --em-success-50: #f0fdf4;
    --em-success-100: #dcfce7;
    --em-success-500: #22c55e;
    --em-success-600: #16a34a;

    /* Error Colors */
    --em-error-50: #fef2f2;
    --em-error-100: #fee2e2;
    --em-error-500: #ef4444;
    --em-error-600: #dc2626;

    /* Warning Colors */
    --em-warning-50: #fffbeb;
    --em-warning-100: #fef3c7;
    --em-warning-500: #f59e0b;
    --em-warning-600: #d97706;

    /* Typography - Inter Font */
    --em-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --em-font-size-xs: 0.75rem;    /* 12px */
    --em-font-size-sm: 0.875rem;   /* 14px */
    --em-font-size-base: 1rem;     /* 16px */
    --em-font-size-lg: 1.125rem;   /* 18px */
    --em-font-size-xl: 1.25rem;    /* 20px */
    --em-font-size-2xl: 1.5rem;    /* 24px */
    --em-font-size-3xl: 1.875rem;  /* 30px */
    --em-font-size-4xl: 2.25rem;   /* 36px */
    --em-font-size-5xl: 3rem;      /* 48px */

    /* Spacing System - Tailwind 4px Grid */
    --em-space-1: 0.25rem;   /* 4px */
    --em-space-2: 0.5rem;    /* 8px */
    --em-space-3: 0.75rem;   /* 12px */
    --em-space-4: 1rem;      /* 16px */
    --em-space-5: 1.25rem;   /* 20px */
    --em-space-6: 1.5rem;    /* 24px */
    --em-space-8: 2rem;      /* 32px */
    --em-space-10: 2.5rem;   /* 40px */
    --em-space-12: 3rem;     /* 48px */
    --em-space-16: 4rem;     /* 64px */
    --em-space-20: 5rem;     /* 80px */

    /* Border Radius - Tailwind Style */
    --em-radius-none: 0;
    --em-radius-sm: 0.125rem;   /* 2px */
    --em-radius-md: 0.375rem;   /* 6px */
    --em-radius-lg: 0.5rem;     /* 8px */
    --em-radius-xl: 0.75rem;    /* 12px */
    --em-radius-2xl: 1rem;      /* 16px */
    --em-radius-3xl: 1.5rem;    /* 24px */
    --em-radius-full: 9999px;

    /* Shadows - Tailwind Style */
    --em-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --em-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --em-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --em-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --em-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    --em-shadow-indigo: 0 25px 50px -12px rgba(79, 70, 229, 0.25);

    /* Transitions - Tailwind Style */
    --em-transition-all: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --em-transition-colors: color 150ms ease-in-out, background-color 150ms ease-in-out, border-color 150ms ease-in-out;
    --em-transition-transform: transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Base Styles */
@layer base {
    body {
        font-family: var(--em-font-family);
    }

    .em-font-inter {
        font-family: var(--em-font-family);
    }

    .em-event-container {
        font-family: var(--em-font-family);
        line-height: 1.5;
    }

    .em-prose {
        color: var(--em-gray-600);
    }

    .em-prose p {
        margin-bottom: 1em;
    }
}

/* Component Styles */
@layer components {
    /* Event Card Components */
    .em-event-card {
        @apply em-bg-white em-rounded-xl em-shadow-sm em-border em-border-gray-200 em-overflow-hidden em-transition-all em-duration-300 hover:em-shadow-lg hover:em-border-indigo-200;
    }

    .em-event-image {
        @apply em-w-full em-h-48 em-object-cover;
    }

    .em-event-content {
        @apply em-p-6;
    }

    .em-event-title {
        @apply em-text-xl em-font-semibold em-text-gray-900 em-mb-3 line-clamp-2;
    }

    .em-event-meta {
        @apply em-flex em-flex-col em-gap-2 em-mb-4;
    }

    .em-event-meta-item {
        @apply em-flex em-items-center em-gap-2 em-text-sm em-text-gray-600;
    }

    .em-event-meta-icon {
        @apply em-w-4 em-h-4 em-text-indigo-500 em-flex-shrink-0;
    }

    .em-event-description {
        @apply em-text-gray-600 em-text-sm em-mb-4 line-clamp-3;
    }

    .em-event-button {
        @apply em-inline-flex em-items-center em-justify-center em-px-4 em-py-2 em-bg-indigo-600 em-text-white em-text-sm em-font-medium em-rounded-lg hover:em-bg-indigo-700 em-transition-colors em-duration-200 em-no-underline;
        text-decoration: none !important;
    }

    .em-event-button:hover {
        @apply em-text-white em-no-underline;
        text-decoration: none !important;
    }

    /* Grid Layouts */
    .em-events-grid {
        @apply em-grid em-gap-6;
    }

    .em-cols-1 {
        @apply em-grid-cols-1;
    }

    .em-cols-2 {
        @apply em-grid-cols-1 md:em-grid-cols-2;
    }

    .em-cols-3 {
        @apply em-grid-cols-1 md:em-grid-cols-2 lg:em-grid-cols-3;
    }

    .em-cols-4 {
        @apply em-grid-cols-1 md:em-grid-cols-2 lg:em-grid-cols-3 xl:em-grid-cols-4;
    }

    /* Modal Components - Original Event Monster Modals */
    .em-modal-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.8);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 999999;
        padding: 1rem;
        opacity: 1;
        transition: opacity 0.3s ease-in-out;
    }

    /* Main event modal container */
    #em-event-modal {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.8);
        display: none;
        align-items: center;
        justify-content: center;
        z-index: 999999;
        padding: 1rem;
        opacity: 1;
        transition: opacity 0.3s ease-in-out;
        backdrop-filter: none !important; /* Disable blur on main modal */
    }

    .em-event-modal-content {
        background: white;
        border-radius: 1rem;
        max-width: 800px;
        width: 100%;
        height: 100%;
        overflow-y: auto;
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
        position: relative;
    }

    .em-modal-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1rem;
        border-bottom: 1px solid #e5e7eb;
        background: #f8fafc;
        border-radius: 1rem 1rem 0 0;
    }

    .em-modal-title {
        font-size: 1.5rem;
        font-weight: 700;
        color: #111827;
        margin: 0;
    }

    .em-modal-close {
        background: none;
        border: none;
        font-size: 1.5rem;
        color: #6b7280;
        cursor: pointer;
        padding: 0.5rem;
        border-radius: 0.5rem;
        transition: all 0.2s;
        line-height: 1;
        width: 2rem;
        height: 2rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .em-modal-close:hover {
        background: #e5e7eb;
        color: #374151;
    }

    .em-modal-body {
        padding: 0;
        max-height: calc(90vh - 80px);
        overflow-y: auto;
    }

    /* Ensure modal content displays properly */
    .em-modal-body .em-single-event-container,
    .em-modal-body .em-single-event-content,
    .em-modal-body .em-container {
        max-width: none !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .em-modal-event-content {
        font-family: var(--em-font-family);
        padding: 0 !important;
    }

    /* Override any container constraints in modal */
    .em-modal-body .em-max-w-3xl,
    .em-modal-body .em-max-w-4xl,
    .em-modal-body .em-max-w-5xl,
    .em-modal-body .em-max-w-6xl,
    .em-modal-body .em-max-w-7xl {
        max-width: none !important;
    }

    /* Ensure proper spacing in modal */
    .em-modal-body .em-single-event-template {
        padding: 1.5rem !important;
    }

    /* Registration Modal */
    .em-registration-modal-content {
        background: white;
        border-radius: 1rem;
        max-width: 28rem;
        width: 100%;
        max-height: 90vh;
        overflow-y: auto;
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    }

    /* Buttons */
    .em-btn {
        @apply em-inline-flex em-items-center em-justify-center em-px-4 em-py-2 em-text-sm em-font-medium em-rounded-lg em-transition-colors em-duration-200 em-no-underline;
    }

    .em-btn-primary {
        @apply em-bg-indigo-600 em-text-white hover:em-bg-indigo-700;
    }

    .em-btn-secondary {
        @apply em-bg-gray-200 em-text-gray-900 hover:em-bg-gray-300;
    }

    .em-btn-success {
        @apply em-bg-green-600 em-text-white hover:em-bg-green-700;
    }

    .em-btn-danger {
        @apply em-bg-red-600 em-text-white hover:em-bg-red-700;
    }

    /* Form Elements */
    .em-form-input {
        @apply em-w-full em-px-3 em-py-2 em-border em-border-gray-300 em-rounded-lg focus:em-ring-2 focus:em-ring-indigo-500 focus:em-border-indigo-500;
    }

    .em-form-label {
        @apply em-block em-text-sm em-font-medium em-text-gray-700 em-mb-1;
    }

    /* Loading States */
    .em-loading-spinner {
        @apply em-flex em-items-center em-justify-center em-p-8;
    }

    .em-spinner {
        @apply em-animate-spin em-rounded-full em-h-8 em-w-8 em-border-b-2 em-border-indigo-600;
    }

    /* Filters */
    .em-filters-container {
        @apply em-bg-gray-50 em-rounded-lg em-p-4 em-mb-6;
    }

    .em-filter-group {
        @apply em-flex em-flex-wrap em-gap-4 em-items-center;
    }

    .em-filter-select {
        @apply em-px-3 em-py-2 em-border em-border-gray-300 em-rounded-lg focus:em-ring-2 focus:em-ring-indigo-500 focus:em-border-indigo-500 em-bg-white;
    }

    /* Load More Button */
    .em-load-more-container {
        @apply em-text-center em-mt-8;
    }

    .em-load-more-btn {
        @apply em-inline-flex em-items-center em-gap-2 em-px-6 em-py-3 em-bg-indigo-600 em-text-white em-font-semibold em-rounded-lg hover:em-bg-indigo-700 em-transition-colors em-shadow-lg;
    }

    .em-load-more-spinner {
        @apply em-animate-spin em-h-4 em-w-4;
    }

    /* Utility Classes */
    .em-hidden {
        display: none !important;
    }

    .em-modal-open {
        overflow: hidden !important;
    }

    /* Responsive modal adjustments */
    @media (max-width: 768px) {
        .em-event-modal-content {
            max-width: 95vw;
            max-height: 95vh;
            margin: 1rem;
        }

        .em-modal-header {
            padding: 1rem;
        }

        .em-modal-title {
            font-size: 1.25rem;
        }
    }

    /* Single Event Page Components */
    .em-single-event-container {
        min-height: 100vh;
        background-color: var(--em-slate-50);
    }

    .em-single-event-header {
        background: linear-gradient(135deg, var(--em-primary-600) 0%, var(--em-primary-700) 100%);
        color: white;
        padding: var(--em-space-16) 0;
    }

    .em-single-event-title {
        font-size: var(--em-font-size-4xl);
        font-weight: 800;
        line-height: 1.1;
        margin-bottom: var(--em-space-4);
        letter-spacing: -0.025em;
    }

    .em-single-event-meta {
        display: flex;
        flex-wrap: wrap;
        gap: var(--em-space-6);
        margin-bottom: var(--em-space-6);
    }

    .em-single-event-meta-item {
        display: flex;
        align-items: center;
        gap: var(--em-space-2);
        color: rgba(255, 255, 255, 0.9);
        font-size: var(--em-font-size-lg);
    }

    .em-single-event-meta-icon {
        width: 1.25rem;
        height: 1.25rem;
        flex-shrink: 0;
    }

    .em-single-event-content {
        max-width: 80rem;
        margin: 0 auto;
        padding: var(--em-space-8) var(--em-space-4);
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--em-space-8);
    }

    @media (min-width: 1024px) {
        .em-single-event-content {
            grid-template-columns: 2fr 1fr;
        }
    }

    .em-single-event-main {
        background: white;
        border-radius: var(--em-radius-2xl);
        box-shadow: var(--em-shadow-lg);
        overflow: hidden;
    }

    .em-single-event-sidebar {
        display: flex;
        flex-direction: column;
        gap: var(--em-space-6);
    }

    .em-single-event-image {
        width: 100%;
        height: 24rem;
        object-fit: cover;
    }

    .em-single-event-body {
        padding: var(--em-space-8);
    }

    .em-section-title {
        font-size: var(--em-font-size-2xl);
        font-weight: 700;
        color: var(--em-slate-900);
        margin-bottom: var(--em-space-4);
        padding-bottom: var(--em-space-2);
        border-bottom: 2px solid var(--em-primary-100);
    }

    .em-card {
        background: white;
        border-radius: var(--em-radius-xl);
        box-shadow: var(--em-shadow-md);
        padding: var(--em-space-6);
        border: 1px solid var(--em-slate-200);
        transition: var(--em-transition-all);
    }

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

    .em-card-title {
        font-size: var(--em-font-size-xl);
        font-weight: 600;
        color: var(--em-slate-900);
        margin-bottom: var(--em-space-3);
    }

    .em-registration-form {
        display: flex;
        flex-direction: column;
        gap: var(--em-space-4);
    }

    .em-form-group {
        display: flex;
        flex-direction: column;
        gap: var(--em-space-1);
    }

    .em-form-label {
        font-size: var(--em-font-size-sm);
        font-weight: 500;
        color: var(--em-slate-700);
    }

    .em-form-input {
        padding: var(--em-space-3);
        border: 1px solid var(--em-slate-300);
        border-radius: var(--em-radius-lg);
        font-size: var(--em-font-size-base);
        transition: var(--em-transition-colors);
    }

    .em-form-input:focus {
        outline: none;
        border-color: var(--em-primary-500);
        box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
    }

    .em-btn-primary {
        background-color: var(--em-primary-600);
        color: white;
        padding: var(--em-space-3) var(--em-space-6);
        border-radius: var(--em-radius-lg);
        font-weight: 600;
        border: none;
        cursor: pointer;
        transition: var(--em-transition-colors);
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: var(--em-space-2);
    }

    .em-btn-primary:hover {
        background-color: var(--em-primary-700);
        color: white;
        text-decoration: none;
    }

    .em-btn-secondary {
        background-color: var(--em-slate-100);
        color: var(--em-slate-700);
        padding: var(--em-space-3) var(--em-space-6);
        border-radius: var(--em-radius-lg);
        font-weight: 500;
        border: 1px solid var(--em-slate-300);
        cursor: pointer;
        transition: var(--em-transition-colors);
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: var(--em-space-2);
    }

    .em-btn-secondary:hover {
        background-color: var(--em-slate-200);
        color: var(--em-slate-800);
        text-decoration: none;
    }

    /* Schedule Components */
    .em-schedule-item {
        display: flex;
        gap: var(--em-space-4);
        padding: var(--em-space-4);
        border-left: 3px solid var(--em-primary-200);
        background: var(--em-slate-50);
        border-radius: var(--em-radius-lg);
        margin-bottom: var(--em-space-3);
        transition: var(--em-transition-all);
    }

    .em-schedule-item:hover {
        border-left-color: var(--em-primary-500);
        background: white;
        box-shadow: var(--em-shadow-md);
    }

    .em-schedule-time {
        font-weight: 600;
        color: var(--em-primary-600);
        min-width: 5rem;
        font-size: var(--em-font-size-sm);
    }

    .em-schedule-content {
        flex: 1;
    }

    .em-schedule-title {
        font-weight: 600;
        color: var(--em-slate-900);
        margin-bottom: var(--em-space-1);
    }

    .em-schedule-description {
        color: var(--em-slate-600);
        font-size: var(--em-font-size-sm);
        line-height: 1.5;
    }

    .em-schedule-speaker {
        color: var(--em-primary-600);
        font-size: var(--em-font-size-sm);
        font-weight: 500;
        margin-top: var(--em-space-1);
    }

    /* Speaker Components */
    .em-speakers-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: var(--em-space-4);
    }

    .em-speaker-card {
        background: white;
        border-radius: var(--em-radius-xl);
        padding: var(--em-space-6);
        text-align: center;
        box-shadow: var(--em-shadow-sm);
        border: 1px solid var(--em-slate-200);
        transition: var(--em-transition-all);
    }

    .em-speaker-card:hover {
        box-shadow: var(--em-shadow-lg);
        transform: translateY(-4px);
    }

    .em-speaker-avatar {
        width: 5rem;
        height: 5rem;
        border-radius: 50%;
        object-fit: cover;
        margin: 0 auto var(--em-space-4);
        border: 3px solid var(--em-primary-100);
    }

    .em-speaker-name {
        font-size: var(--em-font-size-lg);
        font-weight: 600;
        color: var(--em-slate-900);
        margin-bottom: var(--em-space-1);
    }

    .em-speaker-role {
        color: var(--em-primary-600);
        font-size: var(--em-font-size-sm);
        font-weight: 500;
    }

    /* Ticket Components */
    .em-tickets-grid {
        display: grid;
        gap: var(--em-space-4);
    }

    .em-ticket-card {
        background: white;
        border: 2px solid var(--em-slate-200);
        border-radius: var(--em-radius-xl);
        padding: var(--em-space-6);
        transition: var(--em-transition-all);
        position: relative;
        overflow: hidden;
    }

    .em-ticket-card:hover {
        border-color: var(--em-primary-300);
        box-shadow: var(--em-shadow-lg);
    }

    .em-ticket-card.em-featured {
        border-color: var(--em-primary-500);
        background: linear-gradient(135deg, var(--em-primary-50) 0%, white 100%);
    }

    .em-ticket-card.em-featured::before {
        content: 'Popular';
        position: absolute;
        top: 1rem;
        right: -2rem;
        background: var(--em-primary-600);
        color: white;
        padding: 0.25rem 3rem;
        font-size: var(--em-font-size-xs);
        font-weight: 600;
        transform: rotate(45deg);
    }

    .em-ticket-name {
        font-size: var(--em-font-size-xl);
        font-weight: 700;
        color: var(--em-slate-900);
        margin-bottom: var(--em-space-2);
    }

    .em-ticket-price {
        font-size: var(--em-font-size-3xl);
        font-weight: 800;
        color: var(--em-primary-600);
        margin-bottom: var(--em-space-4);
    }

    .em-ticket-features {
        list-style: none;
        padding: 0;
        margin: 0 0 var(--em-space-6) 0;
    }

    .em-ticket-features li {
        display: flex;
        align-items: center;
        gap: var(--em-space-2);
        padding: var(--em-space-2) 0;
        color: var(--em-slate-600);
        font-size: var(--em-font-size-sm);
    }

    .em-ticket-features li::before {
        content: '✓';
        color: var(--em-success-600);
        font-weight: bold;
        width: 1rem;
        text-align: center;
    }

    /* Countdown Components */
    .em-countdown-container {
        background: linear-gradient(135deg, var(--em-primary-600) 0%, var(--em-primary-700) 100%);
        color: white;
        padding: var(--em-space-8);
        border-radius: var(--em-radius-2xl);
        text-align: center;
        margin-bottom: var(--em-space-6);
    }

    .em-countdown-title {
        font-size: var(--em-font-size-xl);
        font-weight: 600;
        margin-bottom: var(--em-space-4);
        opacity: 0.9;
    }

    .em-countdown-timer {
        display: flex;
        justify-content: center;
        gap: var(--em-space-4);
        flex-wrap: wrap;
    }

    .em-countdown-item {
        background: rgba(255, 255, 255, 0.1);
        border-radius: var(--em-radius-lg);
        padding: var(--em-space-4);
        min-width: 4rem;
        backdrop-filter: blur(10px);
    }

    .em-countdown-number {
        display: block;
        font-size: var(--em-font-size-2xl);
        font-weight: 800;
        line-height: 1;
    }

    .em-countdown-label {
        display: block;
        font-size: var(--em-font-size-xs);
        opacity: 0.8;
        margin-top: var(--em-space-1);
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }
}

/* Animations */
@keyframes emFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes emSlideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes emPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

@keyframes emSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Utility Layer */
@layer utilities {
    /* Animation Utilities */
    .em-animate-fade-in {
        animation: emFadeIn 0.7s ease-out forwards;
        opacity: 0;
    }

    .em-animate-slide-up {
        animation: emSlideUp 0.5s ease-out forwards;
    }

    .em-animate-pulse {
        animation: emPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    }

    .em-animate-spin {
        animation: emSpin 1s linear infinite;
    }

    /* Layout Utilities */
    .em-min-h-screen {
        min-height: 100vh;
    }

    .em-container {
        width: 100%;
        max-width: 80rem;
        margin: 0 auto;
        padding: 0 var(--em-space-4);
    }

    .em-mx-auto {
        margin-left: auto;
        margin-right: auto;
    }

    .em-w-full {
        width: 100%;
    }

    .em-max-w-3xl {
        max-width: 48rem;
    }

    .em-max-w-7xl {
        max-width: 80rem;
    }

    /* Background Utilities */
    .em-bg-slate-50 { background-color: var(--em-slate-50); }
    .em-bg-slate-100 { background-color: var(--em-slate-100); }
    .em-bg-white { background-color: var(--em-white); }
    .em-bg-primary-600 { background-color: var(--em-primary-600); }
    .em-bg-indigo-600 { background-color: var(--em-primary-600); }
    .em-bg-indigo-700 { background-color: var(--em-primary-700); }

    /* Text Color Utilities */
    .em-text-white { color: var(--em-white); }
    .em-text-slate-500 { color: var(--em-slate-500); }
    .em-text-slate-600 { color: var(--em-slate-600); }
    .em-text-slate-700 { color: var(--em-slate-700); }
    .em-text-slate-800 { color: var(--em-slate-800); }
    .em-text-slate-900 { color: var(--em-slate-900); }
    .em-text-primary-600 { color: var(--em-primary-600); }
    .em-text-indigo-500 { color: var(--em-primary-500); }
    .em-text-blue-600 { color: var(--em-blue-600); }
    .em-text-green-600 { color: var(--em-green-600); }

    /* Border Utilities */
    .em-border-slate-200 { border-color: var(--em-slate-200); }

    /* Shadow Utilities */
    .em-shadow-indigo-500\/20 {
        box-shadow: 0 25px 50px -12px rgba(79, 70, 229, 0.2);
    }

    /* Line Clamp Utilities */
    .line-clamp-2 {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .line-clamp-3 {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* Custom Scrollbar */
    .em-scrollbar::-webkit-scrollbar {
        width: 6px;
    }

    .em-scrollbar::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 3px;
    }

    .em-scrollbar::-webkit-scrollbar-thumb {
        background: #c1c1c1;
        border-radius: 3px;
    }

    .em-scrollbar::-webkit-scrollbar-thumb:hover {
        background: #a8a8a8;
    }

    /* Visibility Utilities */
    .em-hidden {
        display: none !important;
    }

    .em-visible {
        display: block !important;
    }

    .em-invisible {
        visibility: hidden !important;
    }

    /* Spinner Component */
    .em-spinner {
        width: 1.5rem;
        height: 1.5rem;
        border: 2px solid var(--em-slate-200);
        border-top: 2px solid var(--em-primary-600);
        border-radius: 50%;
        animation: emSpin 1s linear infinite;
    }

    /* Flex Utilities */
    .em-flex {
        display: flex;
    }

    .em-items-center {
        align-items: center;
    }

    .em-justify-center {
        justify-content: center;
    }

    .em-h-full {
        height: 100%;
    }

    .em-mr-3 {
        margin-right: var(--em-space-3);
    }

    .em-p-8 {
        padding: var(--em-space-8);
    }

    .em-relative {
        position: relative;
    }

    /* Print Utilities */
    @media print {
        .em-no-print {
            display: none !important;
        }

        .em-card {
            box-shadow: none !important;
            border: 1px solid var(--em-gray-300) !important;
        }
    }
}

/* Custom border-radius utilities */
.em-rounded-top-2xl {
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
}

/* Override theme styles that interfere with Event Monster layouts */
/* Target event container directly - works for both single posts and shortcode embeds */

/* Remove margin-bottom from all paragraph tags within Event Monster containers */
.em-event-container p,
.em-event-container .em-layout-content p,
.em-event-container .em-component-single p,
.em-event-container .em-component-row p,
.em-event-container .em-bg-white p,
.em-event-container section p,
.em-event-container article p,
.em-event-container div[class*="em-"] p {
    margin-bottom: 0 !important;
}

/* Override Astra theme's .entry-content p styles within event containers */
.entry-content .em-event-container p,
.entry-content .em-event-container .em-layout-content p,
.entry-content .em-event-container .em-component-single p,
.entry-content .em-event-container .em-component-row p,
.entry-content .em-event-container .em-bg-white p,
.entry-content .em-event-container section p,
.entry-content .em-event-container article p,
.entry-content .em-event-container div[class*="em-"] p {
    margin-bottom: 0 !important;
}

/* Ultra-specific override for when event is inside entry-content (shortcode on page) */
article.entry-content .em-event-container p,
div.entry-content .em-event-container p,
.ast-single-post .entry-content .em-event-container p,
main .entry-content .em-event-container p {
    margin-bottom: 0 !important;
}