/* Ticketing Platform - Main Stylesheet */

/* ── PLUS JAKARTA SANS (self-hosted, solo titoli evento) ── */
@font-face {
    font-family: 'Plus Jakarta Sans';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('../fonts/plus-jakarta-sans-800-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Plus Jakarta Sans';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('../fonts/plus-jakarta-sans-800-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Plus Jakarta Sans';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/plus-jakarta-sans-700-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── INTER FONT (self-hosted, GDPR-friendly: nessun trasferimento dati esterni) ── */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/inter-400.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/inter-500.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/inter-600.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/inter-700.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('../fonts/inter-800.woff2') format('woff2');
}

:root {
    --primary: #2563EB;
    --primary-hover: #1D4ED8;
    --primary-light: #EFF6FF;
    --primary-gradient: linear-gradient(135deg, #2563EB 0%, #3B82F6 100%);
    --success: #10B981;
    --success-light: #D1FAE5;
    --danger: #EF4444;
    --danger-light: #FEE2E2;
    --warning: #F59E0B;
    --warning-light: #FEF3C7;
    --dark: #111827;
    --gray-50: #F9FAFB;
    --gray-100: #F3F4F6;
    --gray-200: #E5E7EB;
    --gray-300: #D1D5DB;
    /* WCAG 2.1 AA compliance: gray-400 e gray-500 spostati a tonalita' piu scure
       per garantire contrasto >= 4.5:1 su sfondo bianco quando usati come testo.
       Vecchi valori: #9CA3AF (3.3:1, KO) e #6B7280 (4.83:1 borderline). */
    --gray-400: #6B7280; /* contrasto 4.83:1 OK AA */
    --gray-500: #4B5563; /* contrasto 6.77:1 OK AAA */
    --gray-600: #374151; /* contrasto 9.0:1 OK AAA */
    --gray-700: #374151;
    --gray-800: #1F2937;
    --gray-900: #111827;

    /* Shadow scale */
    --shadow-xs: 0 1px 2px rgba(0,0,0,0.05);
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px -1px rgba(0,0,0,0.04);
    --shadow-lg: 0 10px 25px -3px rgba(0,0,0,0.08), 0 4px 10px -2px rgba(0,0,0,0.04);
    --shadow-xl: 0 20px 40px -5px rgba(0,0,0,0.12);

    /* Radius scale */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-full: 9999px;

    /* Transitions */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Base */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--gray-900);
    background-color: var(--gray-50);
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin: 0;
    padding: 0;
    display: flex !important;
    flex-direction: column !important;
    /* 100svh = small viewport (barra browser visibile). STATICO: il body non cresce
       mai con la retrazione della barra, così html (gray-900) copre la parte inferiore
       durante overscroll/ritrazione barra e il margin-bottom:72px del footer sulla
       pagina evento non diventa una banda bianca gigante. NON sostituire con 100dvh/100vh:
       regressione documentata 2026-04-11 (spazio bianco infinito sotto barra acquista). */
    min-height: 100vh;          /* fallback browser senza svh */
    min-height: 100svh !important;
    line-height: 1.6;
}
main {
    flex: 1 1 auto !important;
}

a {
    color: var(--primary);
    text-decoration: none;
    transition: color var(--transition-fast);
}
a:hover {
    color: var(--primary-hover);
}

/* Global selection color */
::selection {
    background: var(--primary-light);
    color: var(--primary);
}

/* Buttons */
.btn {
    font-weight: 500;
    letter-spacing: 0.01em;
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
}
.btn-primary {
    background: var(--primary-gradient);
    border-color: transparent;
    box-shadow: 0 1px 3px rgba(37, 99, 235, 0.3), inset 0 1px 0 rgba(255,255,255,0.1);
}
.btn-primary:hover, .btn-primary:focus {
    background: linear-gradient(135deg, #1D4ED8 0%, #2563EB 100%);
    border-color: transparent;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.4), inset 0 1px 0 rgba(255,255,255,0.1);
    transform: translateY(-1px);
}
.btn-primary:active {
    transform: translateY(0);
    box-shadow: 0 1px 3px rgba(37, 99, 235, 0.3);
}
.btn-outline-primary {
    color: var(--primary);
    border-color: var(--gray-200);
    background: white;
}
.btn-outline-primary:hover {
    background-color: var(--primary-light);
    border-color: var(--primary);
    color: var(--primary);
    transform: translateY(-1px);
}
.btn-outline-secondary {
    border-color: var(--gray-200);
}
.btn-outline-secondary:hover {
    border-color: var(--gray-300);
    background: var(--gray-50);
    color: var(--gray-700);
}
.btn-lg {
    border-radius: var(--radius-md);
    padding: 0.75rem 1.5rem;
    font-weight: 600;
}
.btn-success {
    background: linear-gradient(135deg, #10B981 0%, #059669 100%);
    border-color: transparent;
    box-shadow: 0 1px 3px rgba(16, 185, 129, 0.3);
}
.btn-danger {
    background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%);
    border-color: transparent;
    box-shadow: 0 1px 3px rgba(239, 68, 68, 0.3);
}
.btn-warning {
    background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
    border-color: transparent;
    box-shadow: 0 1px 3px rgba(245, 158, 11, 0.3);
}

/* Cards */
.card {
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    background: white;
    transition: box-shadow var(--transition-base), transform var(--transition-base);
}
.card-header {
    background-color: var(--gray-50);
    border-bottom: 1px solid var(--gray-200);
    border-radius: var(--radius-md) var(--radius-md) 0 0 !important;
    font-weight: 600;
    font-size: 0.9rem;
    letter-spacing: 0.01em;
    padding: 0.875rem 1.25rem;
}
.card-body {
    padding: 1.25rem;
}

/* Stats Cards */
.stat-card {
    border: none;
    border-radius: var(--radius-md);
    background: white;
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;
}
.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--primary-gradient);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
}
.stat-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}
.stat-card .stat-value {
    font-size: 1.85rem;
    font-weight: 800;
    color: var(--gray-900);
    letter-spacing: -0.02em;
    line-height: 1.2;
}
.stat-card .stat-label {
    font-size: 0.75rem;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    margin-top: 0.25rem;
}
.stat-card .stat-icon {
    font-size: 2.5rem;
    opacity: 0.08;
    color: var(--primary);
}

.main-content {
    width: 100%;
    padding: 2.5rem 2rem 2rem;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
    flex: 1 1 auto;
    background: var(--gray-50);
}

/* Top bar */
.topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--gray-200);
}
.topbar h1 {
    font-size: 1.5rem;
    font-weight: 800;
    margin: 0;
    letter-spacing: -0.02em;
    color: var(--gray-900);
}

/* Tables */
.table {
    font-size: 0.9rem;
}
.table th {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--gray-400);
    border-bottom: 2px solid var(--gray-200);
    font-weight: 700;
    padding: 0.75rem 1rem;
    background: var(--gray-50);
}
.table td {
    padding: 0.75rem 1rem;
    vertical-align: middle;
}
.table-hover tbody tr:hover {
    background-color: rgba(37, 99, 235, 0.02);
}
.table-hover tbody tr {
    transition: background-color var(--transition-fast);
}

/* Status badges */
.badge {
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 0.35em 0.75em;
    border-radius: var(--radius-full);
    font-size: 0.8rem;
}
.badge-draft { background-color: var(--gray-100); color: var(--gray-600, #475569); }
.badge-published { background-color: var(--success-light); color: #065F46; }
.badge-cancelled { background-color: var(--danger-light); color: #991B1B; }
.badge-expired { background-color: var(--gray-100); color: var(--gray-700); }
.badge-pending { background-color: var(--warning-light); color: #92400E; }
.badge-completed { background-color: var(--success-light); color: #065F46; }
.badge-valid { background-color: var(--success-light); color: #065F46; }
.badge-used { background-color: var(--gray-100); color: var(--gray-700); }
.badge-to_collect { background-color: #FFF7ED; color: #C2410C; }
.badge-refund_requested { background-color: var(--warning-light); color: #92400E; }
.badge-refunded { background-color: var(--gray-100); color: var(--gray-700); }
.badge-approved { background-color: var(--success-light); color: #065F46; }
.badge-rejected { background-color: var(--danger-light); color: #991B1B; }

/* Order stats */
.order-stat-value { font-size: 1.4rem; font-weight: 700; line-height: 1.2; }
.order-stat-label { font-size: 0.78rem; }
@media (max-width: 576px) {
    .order-stat-value { font-size: 1.05rem; }
    .order-stat-label { font-size: 0.7rem; }
}

/* Public pages */
.public-header {
    background: white;
    box-shadow: none;
    padding: 0.875rem 0;
    margin-bottom: 0;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    position: sticky;
    top: 0;
    z-index: 1030;
}
.public-header .brand {
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--gray-900);
    letter-spacing: -0.03em;
    display: flex;
    align-items: center;
    gap: 0;
    transition: color var(--transition-fast);
    text-decoration: none;
    white-space: nowrap;
}
.public-header .brand strong {
    font-weight: 800;
}
.public-header .brand .brand-icon {
    background: var(--primary-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: 1.5rem;
}
.public-header .brand:hover {
    color: var(--primary);
}

/* Header links */
.header-link {
    color: var(--gray-500);
    font-size: 0.875rem;
    font-weight: 500;
    transition: color var(--transition-fast);
    text-decoration: none;
    white-space: nowrap;
    padding: 0.35rem 0.5rem;
    border-radius: var(--radius-sm);
}
.header-link:hover, .header-link.active {
    color: var(--primary);
    background: var(--primary-light);
}
.header-link.dropdown-toggle::after {
    font-size: 0.7em;
}
.header-lang {
    color: var(--gray-500);
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.3rem 0.6rem;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-full);
    text-decoration: none;
    transition: all var(--transition-fast);
    letter-spacing: 0.05em;
}
.header-lang:hover {
    color: var(--primary);
    border-color: var(--primary);
    background: var(--primary-light);
}

/* Animated hamburger button */
.hamburger {
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    min-width: 44px;
    min-height: 44px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    z-index: 1100;
    position: relative;
}
.hamburger-line {
    display: block;
    width: 22px;
    height: 2px;
    background-color: var(--gray-700);
    border-radius: 2px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: center;
}
.hamburger.active .hamburger-line:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.hamburger.active .hamburger-line:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}
.hamburger.active .hamburger-line:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* Mobile menu overlay */
.mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.4);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 1040;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}
.mobile-menu-overlay.show {
    opacity: 1;
    visibility: visible;
}

/* Mobile slide menu */
.mobile-menu {
    position: fixed;
    top: 0;
    right: 0;
    width: 300px;
    max-width: 85vw;
    height: 100%;
    background: white;
    z-index: 1050;
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: -8px 0 30px rgba(0,0,0,0.15);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.mobile-menu.show {
    transform: translateX(0);
}
.mobile-menu-header {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--gray-200);
}
.mobile-menu-header .brand {
    font-size: 1.1rem;
    color: var(--gray-900);
    letter-spacing: -0.03em;
    display: inline-flex;
    align-items: center;
    gap: 0;
    white-space: nowrap;
}
.mobile-menu-nav {
    list-style: none;
    padding: 0.75rem 0;
    margin: 0;
}
.mobile-menu-nav li a {
    display: flex;
    align-items: center;
    padding: 0.85rem 1.5rem;
    color: var(--gray-700);
    font-size: 0.95rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.15s ease;
}
.mobile-menu-nav li a i {
    font-size: 1.1rem;
    width: 28px;
    margin-right: 0.75rem;
    text-align: center;
    color: var(--gray-400);
    transition: color 0.15s;
}
.mobile-menu-nav li a:hover, .mobile-menu-nav li a:active {
    background: var(--primary-light);
    color: var(--primary);
}
.mobile-menu-nav li a:hover i, .mobile-menu-nav li a:active i {
    color: var(--primary);
}
.mobile-menu-nav li a.text-danger i {
    color: var(--danger);
}
.mobile-menu-nav .divider {
    height: 1px;
    background: var(--gray-200);
    margin: 0.5rem 1.5rem;
}

/* Event price badges - overlaid on image */
.event-card .price-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    padding: 0.45em 1em;
    font-size: 0.8rem;
    font-weight: 700;
    border-radius: 8px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
    box-shadow: 0 2px 12px rgba(0,0,0,0.35);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.badge-free {
    background-color: rgba(5, 150, 105, 0.92);
    color: white;
}
.badge-paid {
    background-color: rgba(37, 99, 235, 0.92);
    color: white;
}
.badge-mixed {
    background-color: rgba(217, 119, 6, 0.92);
    color: white;
}
.public-footer {
    padding: 2rem 0;
    color: var(--gray-400);
    font-size: 0.85rem;
    background: var(--gray-900);
    border-top: none;
    margin-top: 3rem;
}
.public-footer strong {
    color: white;
}
.public-footer .text-muted {
    color: #9CA3AF !important;
}
.public-footer .footer-link {
    color: var(--gray-400);
    transition: color var(--transition-fast);
}
.public-footer .footer-link:hover {
    color: white;
}
.footer-brand {
    color: rgba(255,255,255,0.8);
    font-size: 0.9rem;
    letter-spacing: -0.03em;
}
body:has(#stickyCta) .public-footer {
    margin-bottom: 72px;
}
.footer-brand:hover {
    color: white;
}

/* Event cards (public) */
.event-card {
    position: relative;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: white;
    transition: all var(--transition-base);
}
.event-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
    border-color: transparent;
}
.event-card .event-image {
    height: 200px;
    object-fit: cover;
    width: 100%;
    background-color: var(--gray-100);
    transition: transform var(--transition-slow);
}
.event-card:hover .event-image {
    transform: scale(1.03);
}
.event-card .event-image-placeholder {
    height: 200px;
    background: linear-gradient(135deg, var(--primary-light) 0%, #E0E7FF 50%, var(--gray-100) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    font-size: 3rem;
    opacity: 0.7;
}
.event-card .card-body {
    padding: 1.25rem;
}
.event-card .event-date-badge {
    font-size: 0.8rem;
    color: var(--primary);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: var(--primary-light);
    padding: 0.2rem 0.6rem;
    border-radius: var(--radius-full);
}
.event-card .event-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0.65rem 0 0.35rem;
    color: var(--gray-900);
    letter-spacing: -0.01em;
    line-height: 1.35;
}
.event-card .event-location {
    font-size: 0.82rem;
    color: var(--gray-500);
}

/* Payment method icons */
.event-info-payments {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.payment-icon-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.65rem;
    background: var(--gray-100);
    border: 1px solid var(--gray-200);
    border-radius: 6px;
    font-size: 0.8rem;
    color: var(--gray-600);
}
.payment-icon-badge i {
    font-size: 0.9rem;
}
.payment-icon-badge .payment-icon-label {
    font-weight: 500;
}

/* Event detail page title */
.event-page-content > h1 {
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    font-size: 2.75rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.15;
    color: var(--gray-900);
}
@media (max-width: 992px) {
    .event-page-content > h1 {
        font-size: 2.4rem;
    }
}
@media (max-width: 768px) {
    .event-page-content > h1 {
        font-size: 2rem;
    }
}

/* Event date card (detail page) */
.event-date-card {
    background: var(--primary-gradient);
    color: white;
    border-radius: var(--radius-md);
    min-width: 72px;
    text-align: center;
    padding: 0.6rem 0.85rem;
    flex-shrink: 0;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35);
}
.event-date-card-month {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    opacity: 0.85;
}
.event-date-card-day {
    font-size: 1.8rem;
    font-weight: 800;
    line-height: 1.1;
}
.event-date-card-range {
    font-size: 0.65rem;
    font-weight: 600;
    opacity: 0.8;
    margin-top: 2px;
}
.event-info-box {
    background: color-mix(in srgb, var(--cat-color, var(--primary)) 8%, white);
    border: 1px solid color-mix(in srgb, var(--cat-color, var(--primary)) 20%, transparent);
    border-radius: var(--radius-md);
    padding: 1.25rem;
    box-shadow: none;
}

/* Event description: narrative full text con line-clamp + expand.
   Desktop 4 righe, mobile 5 righe (riga piu' corta su mobile,
   quindi serve una in piu' per mantenere informazione utile).
   Fade gradient sull'ultima riga per indicare "c'e' altro testo". */
.event-description-body {
    font-size: 1rem;
    line-height: 1.65;
    color: var(--gray-800, #374151);
}
.event-description-clamped {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    overflow: hidden;
    position: relative;
    mask-image: linear-gradient(to bottom, #000 65%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, #000 65%, transparent 100%);
}
@media (max-width: 576px) {
    .event-description-clamped {
        -webkit-line-clamp: 5;
        line-clamp: 5;
    }
}
.event-info-date {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--gray-900);
    margin-bottom: 0.35rem;
}
.event-info-time {
    font-size: 0.9rem;
    color: var(--gray-500);
    font-weight: 400;
    margin-bottom: 0.4rem;
}
.event-info-location {
    font-size: 0.9rem;
    color: var(--gray-500);
}

/* Event detail: accent color from category */
.event-accent {
    color: var(--cat-color, var(--primary, #2563eb));
}

/* Event detail: category label — plain text, no badge */
.event-category-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--cat-color, var(--gray-500));
}

/* Event detail: price badge override */
.event-price-row .badge-paid {
    background: #fff;
    color: var(--primary, #2563eb);
    border: 1px solid var(--primary, #2563eb);
    text-shadow: none;
    box-shadow: none;
    position: static;
}
.event-price-row .badge-free {
    background: #fff;
    color: #059669;
    border: 1px solid #059669;
    text-shadow: none;
    box-shadow: none;
    position: static;
}

/* Share button & popover */
.share-wrapper {
    position: relative;
}
.share-btn {
    border-radius: 50px;
    transition: all 0.2s ease;
    font-size: 0.8rem;
    padding: 0.45em 0.9em;
    line-height: 1;
}
.share-btn i {
    font-size: 1rem;
    line-height: 1;
}
@media (max-width: 576px) {
    /* Mobile: solo icona, bottone circolare */
    .share-btn {
        width: 36px;
        height: 36px;
        padding: 0;
        border-radius: 50%;
    }
    .share-btn i {
        font-size: 1.05rem;
    }
}
.share-btn:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.share-popover {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    padding: 10px 14px;
    gap: 12px;
    z-index: 100;
    white-space: nowrap;
    animation: sharePopIn 0.2s ease;
}
.share-popover.show {
    display: flex;
}
@keyframes sharePopIn {
    from { opacity: 0; transform: translateY(-6px) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.share-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--gray-100, #f1f3f5);
    color: var(--gray-700);
    font-size: 1.1rem;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}
.share-icon:hover {
    transform: scale(1.15);
}
#shareWhatsapp:hover { background: #25d366; color: #fff; }
#shareTelegram:hover { background: #0088cc; color: #fff; }
#shareFacebook:hover { background: #1877f2; color: #fff; }
#shareX:hover { background: #000; color: #fff; }
#shareCopyLink:hover { background: var(--primary); color: #fff; }
.share-copied {
    position: absolute;
    bottom: calc(100% + 4px);
    right: 0;
    background: var(--gray-900);
    color: #fff;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.75rem;
    animation: sharePopIn 0.2s ease;
}

/* Event detail: section titles — accent dot + Plus Jakarta Sans heading */
.event-section-title {
    border-left: none;
    padding-left: 0;
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    text-transform: none;
    letter-spacing: -0.01em;
    color: var(--gray-900);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.event-section-title::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--cat-color, var(--primary, #2563eb));
    flex-shrink: 0;
}

/* Event detail page */
.event-hero {
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
}
.event-hero img,
.event-hero video.event-hero-video {
    width: 100%;
    height: 400px;
    object-fit: cover;
    display: block;
    background: #000;
}
/* Hero video decorativo: muto, loop, no controlli, no interazione.
   Il cursore resta quello del container. */
.event-hero video.event-hero-video {
    pointer-events: none;
}

/* Ticket selector */
.ticket-selector {
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    padding: 1rem 1.25rem;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: white;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.ticket-selector:hover {
    border-color: var(--gray-300);
    box-shadow: var(--shadow-xs);
}
.ticket-selector.sold-out {
    opacity: 0.5;
    pointer-events: none;
}
.ticket-selector .ticket-info .ticket-name {
    margin: 0 0 0.15rem;
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: -0.01em;
    color: var(--gray-900);
    text-transform: uppercase;
}
.ticket-selector.subevent-selector .ticket-info .ticket-name {
    text-transform: none !important;
    letter-spacing: 0;
}
.ticket-selector .ticket-info .ticket-price.ticket-price--free {
    display: inline-block;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1;
    color: #166534;
    background: #dcfce7;
    padding: 0.3rem 0.6rem;
    border-radius: 999px;
    margin-top: 0.25rem;
    width: auto;
    align-self: flex-start;
}
.ticket-selector .ticket-info .ticket-price {
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    font-weight: 800;
    font-size: 1.5rem;
    letter-spacing: -0.02em;
    line-height: 1.2;
    color: var(--cat-color, var(--primary));
}
.ticket-selector .ticket-info .ticket-avail {
    font-size: 0.8rem;
    color: var(--gray-500);
}
.ticket-selector .quantity-selector {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.ticket-selector .quantity-selector .btn {
    width: 36px;
    height: 36px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    border: 1px solid var(--gray-300);
    background: white;
    color: var(--gray-700);
    font-weight: 600;
    transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
.ticket-selector .quantity-selector .btn:hover {
    background: color-mix(in srgb, var(--cat-color, var(--primary)) 8%, white);
    border-color: var(--cat-color, var(--primary));
    color: var(--cat-color, var(--primary));
}
.ticket-selector .quantity-selector .qty-display {
    width: 40px;
    text-align: center;
    font-weight: 700;
    font-size: 2rem;
    color: var(--gray-900);
}

/* Order summary inline (single column layout) */
#summaryEmpty {
    text-align: center !important;
    width: 100%;
    margin-bottom: 0;
}
.order-summary-inline {
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    transition: all var(--transition-slow);
}
.order-summary-inline.has-tickets {
    background: color-mix(in srgb, var(--cat-color, var(--primary)) 4%, white);
    border: 1px solid var(--cat-color, var(--primary));
    box-shadow: none;
}
.order-summary-inline h5 {
    margin-bottom: 1rem;
    font-weight: 700;
}
.order-summary-inline .summary-line {
    display: flex;
    justify-content: space-between;
    padding: 0.4rem 0;
    font-size: 0.9rem;
}
.order-summary-inline .summary-total {
    border-top: 2px solid var(--gray-200);
    margin-top: 0.5rem;
    padding-top: 0.75rem;
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    font-weight: 800;
    font-size: 1.25rem;
    letter-spacing: -0.02em;
}

/* Checkout section */
.checkout-section {
    border-top: 1px solid var(--gray-200);
    padding-top: 1.5rem;
}

/* Contenitore neutro riusabile per box del form checkout (gift, metodi pagamento, ecc.) */
/* Unica famiglia visiva: niente accent bordo-sinistro, niente sfondi colorati. */
/* L'unico accent della pagina e' --cat-color sul summary attivo e sugli elementi interattivi. */
.form-box {
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    padding: 1rem 1.25rem;
}
.form-box + .form-box {
    margin-top: 0.75rem;
}

/* Order summary (legacy sidebar - keep for compatibility) */
.order-summary {
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    padding: 1.5rem;
    position: -webkit-sticky;
    position: sticky;
    top: 1.5rem;
    z-index: 10;
}
.order-summary h5 {
    margin-bottom: 1rem;
    font-weight: 700;
}
.order-summary .summary-line {
    display: flex;
    justify-content: space-between;
    padding: 0.4rem 0;
    font-size: 0.9rem;
}
.order-summary .summary-total {
    border-top: 2px solid var(--gray-200);
    margin-top: 0.5rem;
    padding-top: 0.75rem;
    font-weight: 700;
    font-size: 1.1rem;
}

/* Check-in overlay */
.checkin-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
}
.checkin-overlay.show {
    opacity: 1;
    pointer-events: auto;
}
.checkin-overlay.success {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.97), rgba(5, 150, 105, 0.97));
    color: white;
}
.checkin-overlay.error {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.97), rgba(220, 38, 38, 0.97));
    color: white;
}
.checkin-overlay .overlay-content {
    text-align: center;
}
.checkin-overlay .overlay-icon {
    font-size: 5rem;
    margin-bottom: 1rem;
}
.checkin-overlay .overlay-message {
    font-size: 1.5rem;
    font-weight: 700;
}
.checkin-overlay .overlay-details {
    font-size: 1rem;
    margin-top: 0.5rem;
    opacity: 0.9;
}

/* Ticket PDF-like display */
.ticket-display {
    background: white;
    border: 2px dashed var(--gray-300);
    border-radius: var(--radius-lg);
    padding: 2rem;
    text-align: center;
    max-width: 400px;
    margin: 0 auto;
    box-shadow: var(--shadow-md);
    position: relative;
}
.ticket-display h4 {
    font-weight: 700;
    letter-spacing: -0.01em;
}
.ticket-display .qr-code {
    margin: 1.5rem auto;
}
.ticket-display .qr-code img {
    width: 200px;
    height: 200px;
}

/* Language switcher */
.lang-switch {
    font-size: 0.85rem;
}
.lang-switch a {
    color: var(--gray-500);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
}
.lang-switch a:hover, .lang-switch a.active {
    color: var(--primary);
    background: var(--primary-light);
}

/* Smooth scroll: solo su device con puntatore preciso (desktop con mouse).
   Su touch (mobile/tablet) lasciato di default per evitare animazioni indesiderate
   su anchor jump, focus su input lontani, e micro-scatti durante lo scroll. */
@media (hover: hover) and (pointer: fine) {
    html {
        scroll-behavior: smooth;
    }
}

/* Prevent horizontal overflow (only on html, NOT body — body overflow breaks sticky)
   NB: usiamo "clip" invece di "hidden" perche' "hidden" obbliga il browser
   a calcolare overflow-y come "auto", trasformando l'elemento in container di
   scroll interno → su iOS Safari causa rubber-band a fine pagina e footer
   irraggiungibile. "clip" taglia ma NON crea contesto di scroll. */
html {
    overflow-x: clip;
    max-width: 100vw;
    background-color: var(--gray-900);
}

/* Safe area insets for notched phones */
@supports (padding: env(safe-area-inset-top)) {
    body {
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }
}

/* Touch-friendly scroll containers */
.table-responsive,
.overflow-auto {
    -webkit-overflow-scrolling: touch;
}

/* ===== Tablet breakpoint (max-width: 992px) ===== */
@media (max-width: 992px) {
    .main-content {
        padding: 1.5rem;
    }
    /* Stat cards: 2 per row on tablet */
    .stat-card .stat-value {
        font-size: 1.6rem;
    }
    /* Order summary: not sticky on tablet */
    .order-summary {
        position: relative;
        top: auto;
    }
    /* Topbar: stack on tablet if needed */
    .topbar {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
}

/* ===== Phone breakpoint (max-width: 768px) ===== */
@media (max-width: 768px) {
    .main-content {
        padding: 1rem;
    }

    /* Stat cards: stack vertically, smaller text */
    .stat-card .stat-value {
        font-size: 1.4rem;
    }
    .stat-card .stat-label {
        font-size: 0.75rem;
    }
    .stat-card .stat-icon {
        font-size: 2rem;
    }

    /* Tables: improve readability in scroll containers */
    .table-responsive {
        border: 0;
    }
    .table th, .table td {
        white-space: nowrap;
        font-size: 0.85rem;
        padding: 0.5rem 0.75rem;
    }

    /* Event cards: single column */
    .event-card .event-image,
    .event-card .event-image-placeholder {
        height: 180px;
    }
    .event-card .card-body {
        padding: 1rem;
    }
    .event-card .event-title {
        font-size: 1.05rem;
    }

    /* Event detail: hero image */
    .event-hero {
        margin-top: -0.75rem;
    }
    .event-hero img,
    .event-hero video.event-hero-video {
        height: 250px;
    }

    /* Event page: tighter spacing on mobile */
    .event-page-content .mb-4 {
        margin-bottom: 1.25rem !important;
    }
    .event-page-content .event-hero.mb-4 {
        margin-bottom: 1.25rem !important;
    }
    .event-info-box {
        padding: 1.15rem;
    }
    .event-section-title {
        font-size: 1rem;
    }

    /* Sticky CTA: safe area for notch phones */
    #stickyCta {
        padding-bottom: calc(12px + env(safe-area-inset-bottom)) !important;
    }
    #stickyCta .sticky-price-info div:first-child {
        font-size: 0.6rem;
    }
    #stickyCta .sticky-price-info div:last-child {
        font-size: 0.95rem;
    }

    /* Ticket selector: column layout */
    .ticket-selector {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
        padding: 1rem;
    }
    .ticket-selector .ticket-info .ticket-price {
        font-size: 1.35rem;
    }
    .ticket-selector .quantity-selector {
        align-self: flex-end;
    }
    /* Touch-friendly quantity buttons: min 44x44 */
    .ticket-selector .quantity-selector .btn {
        width: 44px;
        height: 44px;
        font-size: 1.1rem;
    }
    .ticket-selector .quantity-selector .qty-display {
        width: 44px;
        font-size: 2rem;
    }

    /* Order summary: not sticky on mobile, flows naturally */
    .order-summary {
        position: relative;
        top: auto;
        margin-top: 1.5rem;
    }

    /* Discount code input: full width */
    .discount-input-group,
    .input-group {
        max-width: 100% !important;
    }

    /* Submit sticky bottom bar on event page */
    .mobile-sticky-submit {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: white;
        padding: 0.75rem 1rem;
        padding-bottom: calc(0.75rem + env(safe-area-inset-bottom));
        box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
        z-index: 1050;
    }
    /* Add padding to body so sticky bar doesn't cover content */
    body:has(.mobile-sticky-submit) main {
        padding-bottom: 5rem;
    }

    /* Check-in page */
    .checkin-page {
        padding: 0.5rem !important;
        max-width: 100% !important;
    }
    .checkin-overlay .overlay-icon {
        font-size: 4rem;
    }
    .checkin-overlay .overlay-message {
        font-size: 1.3rem;
    }
    #scan-result {
        max-height: 200px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    #scan-result .alert {
        font-size: 0.8rem;
        padding: 0.4rem 0.6rem;
    }

    /* Login: tighter padding on mobile */
    .login-container {
        padding: 0 1rem;
    }
    .login-card {
        padding: 1.5rem;
    }

    /* Forms: larger inputs for touch */
    .form-control, .form-select {
        min-height: 44px;
        font-size: 16px; /* Prevents iOS zoom on focus */
    }
    textarea.form-control {
        min-height: auto;
    }

    /* Ticket display: responsive QR */
    .ticket-display {
        padding: 1.5rem 1rem;
        max-width: 100%;
    }
    .ticket-display .qr-code img {
        width: 180px;
        height: 180px;
        max-width: 60vw;
        max-height: 60vw;
    }

    /* Buttons: touch-friendly minimum size */
    .btn {
        min-height: 44px;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }
    .btn-sm {
        min-height: 36px;
    }
    .btn-group .btn, .btn-group-sm .btn {
        min-height: 36px;
        padding: 0.25rem 0.5rem;
    }

    /* Public header: sticky on mobile */
    .public-header {
        position: sticky;
        top: 0;
        z-index: 1030;
        margin-bottom: 1rem;
        padding: 0.75rem 0;
    }

    /* Compensate for sticky header on main content */
    .public-header + .mobile-menu-overlay + .mobile-menu + main {
        /* no extra padding needed — sticky doesn't take out of flow */
    }

    .public-header nav {
        flex-wrap: nowrap;
        gap: 0.5rem;
    }
    .public-header nav > .d-flex {
        gap: 0.5rem !important;
    }
    .public-header .brand {
        font-size: 1.05rem;
        white-space: nowrap;
        min-width: 0;
        flex-shrink: 0;
    }
    .header-link span, .header-link-text {
        display: none;
    }
    .header-link {
        font-size: 1.1rem;
    }
    .lang-switch {
        flex-shrink: 0;
    }
    .lang-switch a {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Footer: compact */
    .public-footer {
        padding: 1.25rem 0;
        font-size: 0.8rem;
    }

    /* Topbar: responsive */
    .topbar {
        flex-wrap: wrap;
        gap: 0.5rem;
        margin-bottom: 1.5rem;
        padding-bottom: 0.75rem;
    }

    /* Pagination: simplified */
    .pagination .page-item:not(.active):not(:first-child):not(:last-child) {
        display: none;
    }
    .pagination .page-item.active,
    .pagination .page-item:first-child,
    .pagination .page-item:last-child,
    .pagination .page-item.active + .page-item,
    .page-item:has(+ .page-item.active) {
        display: list-item;
    }
    .pagination .page-link {
        min-width: 44px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Organizer action buttons: wrap nicely */
    .btn-group.btn-group-sm {
        flex-wrap: wrap;
        gap: 2px;
    }

    /* Cancel ticket: full-width everything */
    .cancel-ticket-form .btn {
        width: 100%;
        margin-bottom: 0.5rem;
    }

    /* Success page: readable */
    .success-icon {
        font-size: 3rem !important;
    }

    /* Modals: full screen on mobile (except small confirm dialogs) */
    .modal-dialog:not(.modal-sm) {
        margin: 0;
        max-width: 100%;
        min-height: 100vh;
    }
    .modal-dialog:not(.modal-sm) .modal-content {
        border: 0;
        border-radius: 0;
        min-height: 100vh;
    }

    /* Admin cancellation cards */
    .cancellation-actions {
        margin-top: 1rem;
    }

    /* Topbar: truncate long titles, prevent overflow */
    .topbar h1 {
        font-size: 1.25rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        min-width: 0;
        flex: 1;
    }
    .topbar > div,
    .topbar > a {
        flex-shrink: 0;
    }

    /* Stat cards: prevent revenue overflow */
    .stat-card .stat-value {
        word-break: break-all;
        overflow-wrap: break-word;
    }

    /* Event info box: prevent cramped layout on small screens */
    .event-info-box .d-flex.align-items-start {
        gap: 0.75rem !important;
    }
    .event-date-card {
        min-width: 60px;
    }

    /* Payment icon badges: wrap properly */
    .event-info-payments {
        gap: 0.35rem;
    }
    .payment-icon-badge {
        font-size: 0.75rem;
        padding: 0.2rem 0.5rem;
    }

    /* Orders search form: stack on mobile */
    .card-body .row.g-2.align-items-end .col-md-8,
    .card-body .row.g-2.align-items-end .col-md-4 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* Ensure all images never overflow */
    img {
        max-width: 100%;
        height: auto;
    }

    .main-content {
        overflow-x: clip;
        max-width: 100vw;
    }
}

/* ===== Extra small phones (max-width: 576px) ===== */
@media (max-width: 576px) {
    .main-content {
        padding: 0.75rem;
    }
    .event-card .event-image,
    .event-card .event-image-placeholder {
        height: 160px;
    }
    .stat-card .stat-value {
        font-size: 1.2rem;
    }
    .ticket-display .qr-code img {
        width: 160px;
        height: 160px;
    }
    h1 { font-size: 1.35rem; }
    h2 { font-size: 1.2rem; }

    /* Evento pubblico: più aria laterale su schermi piccoli (12px BS gutter → 20px) */
    main.container:has(.event-page-content) {
        --bs-gutter-x: 2.5rem;
    }
    /* Hero: bordo a bordo schermo con angoli arrotondati */
    .event-page-content .event-hero {
        margin-left: calc(var(--bs-gutter-x) * -.5);
        margin-right: calc(var(--bs-gutter-x) * -.5);
        border-radius: 12px;
    }

    /* Topbar: allow title to wrap on very small screens */
    .topbar h1 {
        white-space: normal;
        font-size: 1.1rem;
        line-height: 1.3;
    }

    /* Event date card: slightly smaller */
    .event-date-card {
        min-width: 56px;
        padding: 0.4rem 0.6rem;
    }
    .event-date-card-day {
        font-size: 1.5rem;
    }

    /* Stat cards in dashboard: 2-per-row fix */
    .stat-card .stat-value {
        font-size: 1.05rem;
    }
    .stat-card .stat-icon {
        font-size: 1.5rem;
    }

    /* Card body padding tighter */
    .card-body {
        padding: 0.875rem;
    }

    /* Footer: stack items vertically */
    .public-footer .container {
        flex-direction: column;
        gap: 0.5rem;
        text-align: center;
    }

    /* Ticket selector: tighter padding */
    .ticket-selector {
        padding: 0.75rem;
    }

    /* Event page hero: smaller on tiny screens */
    .event-hero img,
    .event-hero video.event-hero-video {
        height: 200px;
    }

    /* Order summary inline: tighter */
    .order-summary-inline {
        padding: 1rem;
    }

    /* Public header brand: smaller */
    .public-header .brand {
        font-size: 1rem;
    }
    .public-header .brand .brand-icon {
        font-size: 1.15rem;
    }

    /* Login page: keep vertical centering */

    /* Payment method cards on event edit */
    .payment-method-card {
        padding: 0.6rem 0.75rem;
    }
    .payment-method-card .pm-name {
        font-size: 0.8rem;
    }
}

/* ===== Print styles for tickets ===== */
@media print {
    .public-header, .public-footer,
    .topbar, .btn, .nav, .pagination,
    .mobile-sticky-submit {
        display: none !important;
    }
    .main-content {
        margin-left: 0 !important;
        padding: 0 !important;
    }
    body {
        background: white !important;
        padding: 0 !important;
    }
    .ticket-display {
        border: 2px dashed #ccc;
        box-shadow: none;
        max-width: 100%;
        page-break-inside: avoid;
    }
    .ticket-display .qr-code img {
        width: 200px;
        height: 200px;
    }
    .card {
        border: 1px solid #ddd;
        box-shadow: none;
    }
}

/* Login page */
.login-container {
    width: 420px;
    max-width: 100%;
    margin: 0 auto;
    padding: 0 1rem;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.login-card {
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    padding: 2.5rem;
    background: white;
    border: 1px solid var(--gray-200);
}
.login-card .login-logo {
    text-align: center;
    margin-bottom: 2rem;
}
.login-card .login-logo h2 {
    font-weight: 500;
    background: var(--primary-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: 1.5rem;
    letter-spacing: -0.01em;
}
.login-card .login-logo h2 strong {
    font-weight: 800;
}
.login-card .login-logo p {
    color: var(--gray-400);
    font-size: 0.9rem;
}

/* Login form inputs */
.login-input {
    background: var(--gray-50, #f8f9fa) !important;
    border: 1px solid var(--gray-200, #e9ecef) !important;
    border-radius: 10px !important;
    padding: 0.75rem 1rem !important;
    font-size: 0.95rem !important;
}
textarea.login-input {
    padding: 0.75rem 1rem !important;
    font-size: 0.95rem !important;
}
.login-input:focus,
textarea.login-input:focus {
    background: #fff !important;
    border-color: var(--primary, #2563eb) !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1) !important;
}
.login-btn {
    border-radius: 10px !important;
    padding: 0.75rem !important;
    font-weight: 600;
    font-size: 1rem;
}
.login-divider {
    display: flex;
    align-items: center;
    gap: 1rem;
    color: var(--gray-400, #adb5bd);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.05em;
}
.login-divider::before,
.login-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--gray-200, #e9ecef);
}
.toggle-password {
    text-decoration: none !important;
    padding: 0 !important;
    font-size: 1.1rem;
}

/* Form styling */
.form-control::placeholder { color: var(--gray-300, #c4c8cc); }
.form-label {
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--gray-700);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.35rem;
}
.form-control, .form-select {
    border-radius: var(--radius-sm);
    border-color: var(--gray-200);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.form-control:hover, .form-select:hover {
    border-color: var(--gray-300);
}
.form-control:focus, .form-select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}
.form-check-input:checked {
    background-color: var(--primary);
    border-color: var(--primary);
}

/* Alerts */
.alert {
    border-radius: var(--radius-md);
    border: none;
    font-size: 0.9rem;
    font-weight: 500;
}
.alert-success {
    background: var(--success-light);
    color: #065F46;
}
.alert-danger {
    background: var(--danger-light);
    color: #991B1B;
}
.alert-warning {
    background: var(--warning-light);
    color: #92400E;
}
.alert-info {
    background: var(--primary-light);
    color: #3730A3;
}

/* Form section headings (organizer event edit) */
.card.border-0.bg-light > h6.fw-bold,
.card.border-0.bg-light h6.fw-bold {
    color: var(--primary);
}

/* Dropdown menus */
.dropdown-menu {
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--gray-200);
    padding: 0.5rem;
}
.dropdown-item {
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    padding: 0.5rem 0.75rem;
    transition: background var(--transition-fast), color var(--transition-fast);
}
.dropdown-item:hover, .dropdown-item:focus {
    background: var(--gray-100);
    color: var(--gray-900);
}
.dropdown-item.text-danger:hover, .dropdown-item.text-danger:focus {
    background: rgba(220,53,69,0.1);
    color: #dc3545;
}
.dropdown-item.text-warning:hover, .dropdown-item.text-warning:focus {
    background: rgba(255,193,7,0.1);
    color: #b45309;
}
.dropdown-item.text-success:hover, .dropdown-item.text-success:focus {
    background: rgba(25,135,84,0.1);
    color: #198754;
}
.dropdown-item.text-info:hover, .dropdown-item.text-info:focus {
    background: rgba(13,202,240,0.1);
    color: #0dcaf0;
}

/* Progress bars */
.progress {
    border-radius: var(--radius-full);
    background: var(--gray-100);
}
.progress-bar {
    border-radius: var(--radius-full);
}

/* List group */
.list-group-item {
    border-color: var(--gray-200);
    transition: background var(--transition-fast);
}
.list-group-item:first-child { border-radius: var(--radius-md) var(--radius-md) 0 0; }
.list-group-item:last-child { border-radius: 0 0 var(--radius-md) var(--radius-md); }

/* Modal */
.modal-content {
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    border: none;
}
.modal-header {
    border-bottom: 1px solid var(--gray-100);
    padding: 1.25rem 1.5rem;
}
.modal-header .modal-title {
    font-weight: 700;
    font-size: 1.1rem;
}
.modal-body {
    padding: 1.5rem;
}
.modal-footer {
    border-top: 1px solid var(--gray-100);
    padding: 1rem 1.5rem;
}

/* Landing page - full viewport, no scroll */
body:has(.landing-hero) {
    height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
}
body:has(.landing-hero) .public-header {
    flex-shrink: 0;
    position: relative;
}
body:has(.landing-hero) main.container {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 0;
    padding-bottom: 0;
    min-height: 0;
    overflow: visible;
}
body:has(.landing-hero) .public-footer {
    flex-shrink: 0;
    margin-top: 0;
}
.landing-hero {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    min-height: 0;
    padding: 3rem 1rem;
    width: 100%;
}
.landing-ai-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: linear-gradient(135deg, rgba(139,92,246,0.12), rgba(59,130,246,0.12));
    border: 1px solid rgba(139,92,246,0.4);
    color: #7c3aed;
    font-size: 0.8rem;
    font-weight: 700;
    padding: 0.35rem 1rem;
    border-radius: 999px;
    margin-bottom: 2rem;
    letter-spacing: 0.02em;
}
.landing-title {
    font-size: clamp(2rem, 5vw, 3.2rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.15;
    color: var(--gray-900);
    margin-bottom: 1.25rem;
}
.landing-subtitle {
    font-size: clamp(1rem, 2.5vw, 1.25rem);
    color: var(--gray-500);
    font-weight: 400;
    margin-bottom: 1.5rem;
    max-width: 500px;
}
.landing-features {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    justify-content: center;
    max-width: 520px;
    margin: 0 auto;
    margin-top: 0.75rem;
}
.landing-feature {
    display: inline-block;
    background: transparent;
    color: var(--primary);
    border: 1.5px solid rgba(37,99,235,0.4);
    font-size: 0.8rem;
    font-weight: 500;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    white-space: nowrap;
}
.landing-stripe-note {
    color: var(--gray-900, #111);
    font-size: 0.8rem;
    margin-top: 1.5rem;
    margin-bottom: 0;
}
.stripe-badge {
    display: inline-flex;
    align-items: center;
    background: #635BFF;
    border-radius: 4px;
    padding: 0.15em 0.4em;
    vertical-align: middle;
    line-height: 1;
}
.stripe-logo-inline {
    height: 0.75em;
    width: auto;
    display: block;
}
.landing-cta-btn {
    margin: 0 0 1.5rem 0 !important;
    padding: 0.85rem 2.5rem;
    font-size: 1.15rem;
    font-weight: 700;
    border-radius: 50px;
    box-shadow: var(--shadow-md);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.landing-cta-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}
@media (max-width: 576px) {
    .landing-hero { padding: 2rem 0.75rem; }
    .landing-features { gap: 0.3rem; max-width: 100%; }
    .landing-feature { font-size: 0.7rem; padding: 0.2rem 0.6rem; }
    .landing-title { margin-bottom: 0.5rem; }
    .landing-subtitle { margin-bottom: 1.5rem; }
    .landing-ai-badge { font-size: 0.7rem; padding: 0.25rem 0.8rem; margin-bottom: 1rem; }
}

/* Event Logo Sections (public page) */
.event-logos-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
}
.event-logo-item {
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: 10px;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 60px;
}
.event-logo-item img {
    max-height: 40px;
    max-width: 120px;
    object-fit: contain;
}
@media (max-width: 576px) {
    .event-logos-row { gap: 10px; }
    .event-logo-item { padding: 8px 12px; height: 50px; }
    .event-logo-item img { max-height: 34px; max-width: 90px; }
}

/* ─── Events Page: Hero, Search, Filters ─── */

.events-hero {
    padding: 1.5rem 0 0.5rem;
}

.events-search {
    max-width: 520px;
}
.events-search .form-control {
    border-radius: 8px 0 0 8px;
    font-size: 1rem;
}
.events-search .btn {
    border-radius: 0 8px 8px 0;
    padding-left: 1rem;
    padding-right: 1rem;
}

.date-filters {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    justify-content: center;
}

.filter-chips {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
    justify-content: center;
    flex-wrap: wrap;
}
.filter-chips::-webkit-scrollbar { display: none; }

.filter-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.85rem;
    border-radius: 50px;
    font-size: 0.82rem;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    border: 1px solid var(--gray-300);
    color: var(--gray-700);
    background: #fff;
    transition: all 0.15s ease;
}
.filter-chip:hover {
    border-color: var(--primary);
    color: var(--primary);
}
.filter-chip.active {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

/* Featured event card (first card) */
.event-card-featured .event-image,
.event-card-featured .event-image-placeholder {
    height: 280px;
}
.event-card-featured .event-title {
    font-size: 1.3rem;
}

@media (max-width: 576px) {
    .filter-chips {
        justify-content: flex-start;
        flex-wrap: nowrap;
        mask-image: linear-gradient(to right, black 85%, transparent 100%);
        -webkit-mask-image: linear-gradient(to right, black 85%, transparent 100%);
        padding-right: 2rem;
    }
    .events-hero h1 { font-size: 1.4rem; }
    .events-search .form-control { font-size: 1rem; }
    .event-card-featured .event-image,
    .event-card-featured .event-image-placeholder {
        height: 200px;
    }
    .event-price-share { flex-wrap: wrap; gap: 0.5rem; }
}

/* #7 Footer responsive 577-768px */
@media (max-width: 768px) {
    .public-footer .container {
        flex-direction: column;
        gap: 0.75rem;
        text-align: center;
    }
}

/* #9 Quantity buttons touch-friendly on tablet */
@media (max-width: 992px) {
    .ticket-selector .quantity-selector .btn,
    .ticket-qty-btn {
        min-width: 44px;
        min-height: 44px;
    }
}

/* #14 Wizard step labels overflow on 320px */
@media (max-width: 400px) {
    .wizard-step-indicator .step-label { display: none; }
    .wizard-step-indicator .step-circle { width: 30px; height: 30px; font-size: 0.8rem; }
    .wizard-line { width: 20px; }
}

/* #17 Mark styling in landing subtitle */
.landing-subtitle mark {
    background: linear-gradient(120deg, rgba(37,99,235,0.15) 0%, rgba(59,130,246,0.15) 100%);
    color: var(--primary);
    padding: 0.1em 0.3em;
    border-radius: 4px;
}

/* #19 Contact form label mobile */
@media (max-width: 768px) {
    #contactSection .form-label { font-size: 0.85rem; }
}

/* #34 Breakpoint 414px for landing */
@media (max-width: 414px) {
    .landing-feature { font-size: 0.75rem; padding: 0.25rem 0.7rem; }
    .landing-ai-badge { margin-bottom: 1rem; }
}

/* #39 Discount input group max-width */
.discount-input-group { max-width: 400px; }
/* Bottone "Applica" sconto: sostituisce l'outline-primary blu con cat-color */
.discount-input-group .btn-outline-primary {
    color: var(--cat-color, var(--primary));
    border-color: var(--cat-color, var(--primary));
}
.discount-input-group .btn-outline-primary:hover,
.discount-input-group .btn-outline-primary:focus {
    background: var(--cat-color, var(--primary));
    border-color: var(--cat-color, var(--primary));
    color: #fff;
}

/* #41 Footer link hover state */
.public-footer a.text-muted:hover { color: rgba(255,255,255,0.8) !important; }

/* Sticky CTA "Acquista" — feedback tattile al tap/click
   Il JS imposta background/shadow inline; qui aggiungiamo lo stato :active
   con transform per dare sensazione di pressione immediata (80ms vs 200ms
   della transition colore). touch-action:manipulation elimina il delay
   300ms del double-tap-zoom su iOS/Android. */
#stickyCtaBtn {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: background-color .18s ease, border-color .18s ease,
                box-shadow .18s ease, filter .18s ease,
                transform .08s ease-out;
}
#stickyCtaBtn:active {
    transform: translateY(2px) scale(0.98);
    filter: brightness(0.92);
}

/* Estensione sfondo sotto la barra: iOS Safari ha una bottom URL bar
   traslucida che sta SOPRA il layout viewport. #stickyCta (bottom:0) si
   posiziona dietro la bar, cosi' la pagina sottostante resta visibile
   attraverso la bar iOS creando l'effetto "barra sospesa" con contenuto
   che scorre sotto. Lo pseudo-element estende lo sfondo bianco di 140px
   sotto la barra: quei pixel sono fuori dal layout viewport ma dentro
   il visual viewport iOS, quindi coprono il contenuto che altrimenti si
   vedrebbe scorrere dietro la URL bar. Su altri browser sono clipped e
   invisibili (zero impatto). */
#stickyCta::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 140px;
    background: #fff;
    pointer-events: none;
}

/* Sticky CTA: blocco totale con vincoli responsive.
   min-width garantisce spazio al totale; max-width impedisce
   che cifre lunghe (es. 1.234,00) spingano via il bottone.
   flex-shrink:0 sul blocco + min-width:0 sul bottone permette
   al bottone di restringersi naturalmente se serve. */
.sticky-price-info {
    flex-shrink: 0;
    min-width: 95px;
    max-width: 145px;
}
@media (max-width: 576px) {
    .sticky-price-info {
        min-width: 85px;
        max-width: 115px;
    }
    #stickyTotal {
        font-size: 0.95rem !important;
        white-space: nowrap;
    }
}

/* ============================================================
   WhatsApp help bubble — solo pagina evento pubblica
   Posizionato sopra #stickyCta (bottom:0, z-index:1040)
   ============================================================ */
.wa-help-bubble {
    position: fixed;
    right: 16px;
    bottom: calc(88px + env(safe-area-inset-bottom, 0px));
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #25D366;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.35), 0 2px 6px rgba(0, 0, 0, 0.15);
    z-index: 1035;
    text-decoration: none;
    overflow: hidden;
    padding: 0;
    transition: transform 0.2s ease, box-shadow 0.2s ease, width 0.25s ease, border-radius 0.25s ease, padding 0.25s ease;
}
.wa-help-bubble:hover,
.wa-help-bubble:focus-visible {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(37, 211, 102, 0.45), 0 3px 8px rgba(0, 0, 0, 0.18);
    outline: none;
}
.wa-help-bubble .wa-help-icon {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    display: block;
}
.wa-help-bubble .wa-help-label {
    display: none;
    font-weight: 600;
    font-size: 0.9rem;
    margin-left: 8px;
    white-space: nowrap;
    line-height: 1;
}
/* Desktop con hover reale: si espande a pill */
@media (hover: hover) and (min-width: 768px) {
    .wa-help-bubble {
        bottom: calc(96px + env(safe-area-inset-bottom, 0px));
    }
    .wa-help-bubble:hover,
    .wa-help-bubble:focus-visible {
        width: 150px;
        border-radius: 28px;
        padding: 0 20px;
        justify-content: flex-start;
    }
    .wa-help-bubble:hover .wa-help-label,
    .wa-help-bubble:focus-visible .wa-help-label {
        display: inline;
    }
}
@media (prefers-reduced-motion: reduce) {
    .wa-help-bubble {
        transition: none;
    }
    .wa-help-bubble:hover,
    .wa-help-bubble:focus-visible {
        transform: none;
    }
}

/* Margine laterale contenuto su mobile/tablet: aumenta respiro dai bordi schermo */
@media (max-width: 767.98px) {
    main.container,
    main.container-fluid {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }
}

/* === Organizer Acquisition CTA Banner (pagina evento) === */
.organizer-cta-banner {
    margin: 56px 0 32px;
}
.organizer-cta-card {
    display: flex;
    align-items: center;
    gap: 20px;
    max-width: 760px;
    margin: 0 auto;
    padding: 22px 28px;
    background: linear-gradient(135deg, #ffffff 0%, #eff6ff 100%);
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.03);
    text-decoration: none;
    color: inherit;
    transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1),
                border-color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.organizer-cta-card:hover,
.organizer-cta-card:focus-visible {
    border-color: #93c5fd;
    box-shadow: 0 8px 24px -8px rgba(37, 99, 235, 0.18), 0 1px 2px rgba(0,0,0,0.04);
    transform: translateY(-1px);
    color: inherit;
    text-decoration: none;
    outline: none;
}
.organizer-cta-icon {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: #ffffff;
    color: #111827;
    display: grid;
    place-items: center;
    border: 1px solid #e5e7eb;
}
.organizer-cta-icon svg {
    width: 26px;
    height: 26px;
}
.organizer-cta-body {
    flex: 1;
    min-width: 0;
}
.organizer-cta-title {
    font-size: 1.0625rem;
    font-weight: 700;
    color: #111827;
    line-height: 1.3;
    margin-bottom: 2px;
}
.organizer-cta-sub {
    font-size: 0.9rem;
    color: #6b7280;
    line-height: 1.4;
}
.organizer-cta-action {
    flex-shrink: 0;
}
.organizer-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    background: #111827;
    color: #fff;
    border-radius: 9999px;
    font-size: 0.9rem;
    font-weight: 600;
    white-space: nowrap;
    transition: background-color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.organizer-cta-card:hover .organizer-cta-btn,
.organizer-cta-card:focus-visible .organizer-cta-btn {
    background: #000000;
}
@media (max-width: 640px) {
    .organizer-cta-banner {
        margin: 40px 0 24px;
    }
    .organizer-cta-card {
        flex-wrap: wrap;
        padding: 20px 22px;
        gap: 14px;
    }
    .organizer-cta-icon {
        width: 44px;
        height: 44px;
        border-radius: 12px;
    }
    .organizer-cta-icon svg {
        width: 22px;
        height: 22px;
    }
    .organizer-cta-body {
        flex: 1 1 calc(100% - 60px);
    }
    .organizer-cta-title {
        font-size: 1rem;
    }
    .organizer-cta-sub {
        font-size: 0.875rem;
    }
    .organizer-cta-action {
        width: 100%;
    }
    .organizer-cta-btn {
        width: 100%;
        justify-content: center;
        padding: 12px 18px;
    }
}