/* Sezioni Aggiuntive per Biglietteria Eventi - Coerenti con clubr.css */

/* FontAwesome Icons Fix */
.fas, .fa {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
}

/* Marquee Section */
.marquee-section {
    background: var(--color--backgroung);
    padding: 2rem 0;
    overflow: hidden;
    border-top: 1px solid rgba(21, 21, 21, 0.1);
    border-bottom: 1px solid rgba(21, 21, 21, 0.1);
}

.marquee-container {
    width: 100%;
}

.marquee-content {
    display: flex;
    animation: marquee 30s linear infinite;
    white-space: nowrap;
}

.marquee-item {
    padding: 0 2rem;
    font-size: var(--text-size--medium);
    font-weight: 500;
    color: rgba(21, 21, 21, 0.6);
    flex-shrink: 0;
}

.marquee-highlight {
    color: var(--color--font);
    font-weight: 600;
}

@keyframes marquee {
    0% { transform: translateX(100%); }
    100% { transform: translateX(-100%); }
}

/* Features Section */
.features {
    /* spacing aligned with .section in clubr.css via wrapper */
    background: var(--color--card);
}

/* Horizontal scroller: show 3 cards, scroll for the rest */
.features-grid {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 4rem) / 3); /* 3 columns visible with 2 gaps (2rem each) */
    gap: 2rem;
    margin-top: 3rem;
    overflow-x: auto;
    overflow-y: hidden; /* avoid vertical scrollbar */
    padding-block: 0; /* no extra space needed */
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}

.feature-card { scroll-snap-align: start; }

.feature-card, .features-grid a.feature-card {
    background: var(--color--card);
    border: 1px solid rgba(21, 21, 21, 0.1);
    border-radius: var(--border--radius);
    padding: 2rem;
    text-align: center;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    display: block;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

.feature-card:hover, .features-grid a.feature-card:hover {
    transform: translateY(-5px);
    border-color: var(--color--font);
}

.feature-icon {
    width: 60px;
    height: 60px;
    background: var(--color--button);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    color: var(--color--card);
    font-size: 1.5rem;
}

.feature-card h3 {
    font-size: var(--heading--h4);
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--color--font);
}

.feature-card p {
    color: rgba(21, 21, 21, 0.7);
    line-height: 1.6;
    font-size: var(--text-size--regular);
}

/* Customization Section */
.customization {
    /* spacing aligned with .section in clubr.css via wrapper */
    background: var(--color--backgroung);
}

.customization-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    margin-top: 3rem;
}

.custom-feature {
    display: flex;
    gap: 1rem;
    margin-bottom: 2rem;
}

.custom-icon {
    width: 50px;
    height: 50px;
    background: var(--color--button);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color--card);
    flex-shrink: 0;
}

.custom-info h4 {
    font-size: var(--heading--h5);
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--color--font);
}

.custom-info p {
    color: rgba(21, 21, 21, 0.7);
    line-height: 1.6;
    margin: 0;
    font-size: var(--text-size--regular);
}

.customization-visual {
    position: relative;
}

.customization-animation {
    background: var(--color--card);
    border: 1px solid rgba(21, 21, 21, 0.1);
    border-radius: var(--border--radius);
    padding: 2rem;
    position: relative;
    overflow: hidden;
}

/* Customization theme preview card */
.theme-controls {
    display: flex;
    gap: .5rem;
    margin-bottom: 1rem;
}
.color-option {
    width: 22px; height: 22px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform .2s ease, border-color .2s ease;
}
.color-option:hover { transform: scale(1.08); }
.color-option.active { border-color: var(--color--font); }
.color-option[data-theme="1"] { background: #612695; }
.color-option[data-theme="2"] { background: #0ea5e9; }
.color-option[data-theme="3"] { background: #10b981; }

.theme-preview {
    background: #f8f9fa;
    border: 1px solid rgba(21,21,21,.08);
    border-radius: .75rem;
    padding: 1rem;
}
.theme-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .75rem;
}
.brand-left { display: flex; align-items: center; gap: .5rem; }
.brand-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--color--primary); }
.brand-name { font-weight: 600; color: var(--color--font); }
.status-pill {
    font-size: .75rem;
    background: rgba(16,185,129,.12);
    color: #059669;
    padding: .25rem .5rem;
    border-radius: 999px;
}
.ticket {
    background: white;
    border: 1px dashed rgba(21,21,21,.2);
    border-radius: .75rem;
    padding: 1rem;
}
.ticket-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .75rem; }
.event-title { font-weight: 600; }
.event-date { font-size: .875rem; opacity: .7; }
.ticket-body { display: grid; gap: .5rem; margin-bottom: .75rem; }
.ticket-row { display: flex; justify-content: space-between; font-size: .95rem; }
.ticket-row .label { opacity: .7; }
.ticket-footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.qr { width: 48px; height: 48px; background: repeating-linear-gradient(45deg,#000 0,#000 4px,#fff 4px,#fff 8px); border-radius: .25rem; }
.cta { background: var(--color--primary); color: white; padding: .5rem .75rem; border-radius: .5rem; font-weight: 600; }

/* Themes */
.theme-preview.theme-1 { --color--primary: #612695; }
.theme-preview.theme-2 { --color--primary: #0ea5e9; }
.theme-preview.theme-3 { --color--primary: #10b981; }

/* AI Section */
.ai-section {
    background: linear-gradient(135deg, var(--color--primary) 0%, #4a1969 100%);
    color: var(--color--card);
}

.ai-section .section-header h2,
.ai-section .section-header p,
.ai-section .section-header .text-size-medium {
    color: var(--color--card);
}

.ai-section .header h2,
.ai-section .header p {
    color: var(--color--card);
}

.ai-features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
    position: relative;
}

.ai-feature-card {
    background: rgba(255,255,255,0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: var(--border--radius);
    padding: 2rem;
    transition: all 0.3s ease;
}

.ai-feature-card:hover {
    transform: translateY(-5px);
    background: rgba(255,255,255,0.15);
}

.ai-feature-card.primary-card {
    background: rgba(255,255,255,0.95);
    color: var(--color--font);
}

.ai-feature-icon {
    width: 60px;
    height: 60px;
    background: var(--color--card);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    color: var(--color--primary);
    font-size: 1.5rem;
}

.ai-feature-card.primary-card .ai-feature-icon {
    background: var(--color--primary);
    color: var(--color--card);
}

.ai-feature-card h3 {
    font-size: var(--heading--h4);
    font-weight: 600;
    margin-bottom: 1rem;
}

.ai-features-list {
    margin-top: 1.5rem;
}

.ai-feature-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.ai-feature-item i {
    color: #4ade80;
    font-size: 0.875rem;
}

.ai-feature-item span {
    font-size: var(--text-size--small);
}

/* Section header alignment to match site */
.section-header {
    text-align: center;
    max-width: 900px;
    margin: 0 auto 2rem;
}
.section-header .header-inline {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    flex-wrap: wrap;
}
.section-header .logo-group { display: inline-flex; align-items: center; gap: .5rem; }
.section-header .heading-2 { margin: 0; }
.section-header .header-logo {
    height: 32px;
    width: auto;
    display: inline-block;
}
.section-header .v-sep {
    width: 1px;
    height: 28px;
    background: #151515;
    display: inline-block;
    opacity: .9;
}

@media (min-width: 768px) {
    .section-header .header-inline { justify-content: center; }
}
.section-header .heading-2 {
    margin-bottom: 0.75rem;
}
.section-header .text-size-medium {
    color: rgba(21, 21, 21, 0.7);
}

/* Responsive Adjustments */
@media screen and (max-width: 991px) {
    .features-grid {
        gap: 1.5rem;
        grid-auto-columns: calc((100% - 1.5rem) / 2); /* 2 cards visible */
    }
    
    .customization-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .ai-features-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    /* section spacing */
    .features.section,
    .ai-section.section { padding: 4rem 0; }
}

@media screen and (max-width: 767px) {
    .features-grid {
        grid-auto-columns: 85%; /* 1 card per view, slight peek of next */
        gap: 1rem;
    }

    .feature-card,
    .ai-feature-card {
        padding: 1.5rem;
    }
    
    .marquee-item {
        padding: 0 1rem;
        font-size: var(--text-size--regular);
    }
    
    .ai-features-grid {
        gap: 1rem;
    }
    
    /* section spacing */
    .features.section,
    .ai-section.section { padding: 3rem 0; }
    .section-header .header-logo { height: 26px; }
    .section-header .v-sep { height: 22px; }
}

/* Desktop section spacing for new blocks */
.features.section,
.ai-section.section { padding: 5rem 0; }

@media screen and (max-width: 479px) {
    .feature-card,
    .ai-feature-card {
        padding: 1rem;
    }
    
    .marquee-section {
        padding: 1rem 0;
    }
    
    .customization-content {
        gap: 1.5rem;
    }
}