/* EXPO - Property & Lifestyle Exhibition - Additional Styles */

/* Color Variables for Expo Theming */
:root {
    --expo-primary: #132B4D; /* Dark navy blue */
    --expo-secondary: #2a5080; /* Lighter navy */
    --expo-accent: #c2185b; /* Magenta/pink accent */
    --expo-hero-start: #1F7A8C; /* Teal for hero gradient start */
    --expo-hero-end: #0D3B4C; /* Dark blue for hero gradient end */
    --expo-footer-bg: #0F172A; /* Navy for footer sections */
}

/* Utility Classes for Expo Colors */
.text-expo-primary { color: var(--expo-primary) !important; }
.text-expo-secondary { color: var(--expo-secondary) !important; }
.text-expo-accent { color: var(--expo-accent) !important; }

.bg-expo-primary { background-color: var(--expo-primary) !important; }
.bg-expo-secondary { background-color: var(--expo-secondary) !important; }
.bg-expo-accent { background-color: var(--expo-accent) !important; }
.bg-expo-footer { background-color: var(--expo-footer-bg) !important; }

.border-expo-primary { border-color: var(--expo-primary) !important; }
.border-expo-accent { border-color: var(--expo-accent) !important; }


/* Hero gradient background */
.expo-hero-gradient {
    background: linear-gradient(135deg, var(--expo-hero-start) 0%, var(--expo-hero-end) 100%);
}

/* Video thumbnail play button */
.expo-video-thumbnail {
    position: relative;
    cursor: pointer;
}

.expo-video-thumbnail::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230F172A'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E");
    background-size: 40px 40px;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform 0.3s ease;
}

.expo-video-thumbnail:hover::after {
    transform: translate(-50%, -50%) scale(1.1);
}

/* SVG Icon Filters for Expo Colors */
.filter-expo-accent {
    filter: brightness(0) saturate(100%) invert(17%) sepia(89%) saturate(3291%) hue-rotate(324deg) brightness(91%) contrast(90%);
}

/* Hide default featherlight close button (scoped to awards/expo modals only) */
.featherlight-no-padding button.featherlight-close {
    display: none;
}

.featherlight .featherlight-no-padding {
    padding: 0;
    border-bottom: 0;
}

.container {
    width: 100% !important;
    padding: 0 0.75rem;
}

@media(min-width: 1200px){
    .container {
        width: 1050px !important;
        margin: 0 auto;
    }
}

.header-search-result {
    margin-bottom: 0 !important;
}

.expo-header {
    min-height: auto;
    padding: 1.5rem 0 3rem;
}

@media(min-width: 1024px){
    .expo-header {
        padding: 2rem 0 4rem;
    }
}

#toast-container {
    z-index: 1900000005 !important;
}

.filepond--panel-root {
    background-color: #f0f9ff;
}

.filepond--drop-label {
    color: #888;
}

html {
    scroll-behavior: smooth;
}

.parsley-errors-list {
    display: none;
}

input.parsley-error, select.parsley-error, textarea.parsley-error {
    border: none;
}

/* ============================================
   EXPO TICKET STYLES
   ============================================ */

/* Ticket Container */
.ticket-container {
    background: white;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.ticket-header {
    background: var(--expo-accent);
}

.qr-code-container {
    border: 2px solid #e0e0e0;
    padding: 15px;
    border-radius: 8px;
    display: inline-block;
}

/* Print Styles for Ticket */
@media print {
    /* Hide all non-ticket elements */
    .no-print,
    .header-search-result,
    header,
    footer,
    .footer,
    nav,
    .navbar,
    .breadcrumb,
    .alert {
        display: none !important;
    }

    /* Optimize for single page print */
    @page {
        margin: 0.5cm;
    }

    .ticket-container {
        box-shadow: none !important;
        max-width: 100% !important;
        page-break-inside: avoid !important;
        page-break-before: avoid !important;
        page-break-after: avoid !important;
    }

    body {
        margin: 0 !important;
        padding: 0 !important;
    }

    .container {
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    .ticket-header {
        padding: 0.75rem !important;
    }

    .ticket-header h1 {
        font-size: 2rem !important;
    }

    .ticket-header p {
        font-size: 1rem !important;
    }

    .ticket-content {
        padding: 0.75rem !important;
    }

    .ticket-content h2 {
        font-size: 1.25rem !important;
        margin-bottom: 0.5rem !important;
    }

    .ticket-content .mb-8 {
        margin-bottom: 1rem !important;
    }

    .qr-code-container {
        padding: 0.5rem !important;
    }

    .qr-code-container img {
        width: 200px !important;
        height: 200px !important;
    }
    
    .ticket-content .grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1rem !important;
    }

    .event-details-box {
        padding: 0.75rem !important;
    }

    .space-y-4 > * + * {
        margin-top: 0.5rem !important;
    }
}