/* styles.css - Stili principali per la pagina eventi */



/* Reset e base */

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}



body {

    font-family: 'Open Sans', sans-serif;

    line-height: 1.6;

    color: #333;

    background-color: #f8f9fa;

}



.container {

    max-width: 1200px;

    margin: 0 auto;

    padding: 0 20px;

}



/* Header */

.site-header {

    background: linear-gradient(135deg, #8c1c13 0%, #bf4342 100%);

    color: white;

    padding: 3rem 0;

    text-align: center;

    position: relative;

    overflow: hidden;

}



.site-header::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 20"><path d="M0,10 Q25,0 50,10 T100,10 V20 H0 Z" fill="rgba(255,255,255,0.1)"/></svg>');

    background-size: 200px 40px;

    opacity: 0.3;

}



.header-inner {

    position: relative;

    z-index: 2;

}



.site-logo {

    width: 80px;

    height: 80px;

    border-radius: 50%;

    margin-bottom: 1rem;

    border: 3px solid rgba(255,255,255,0.3);

}



.site-title {

    font-family: 'Playfair Display', serif;

    font-size: 3rem;

    font-weight: 700;

    margin-bottom: 0.5rem;

    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);

}



.site-tagline {

    font-size: 1.2rem;

    opacity: 0.9;

    font-weight: 300;

}



/* Navigation */

.main-nav {

    background: rgba(255,255,255,0.95);

    backdrop-filter: blur(10px);

    box-shadow: 0 2px 20px rgba(0,0,0,0.1);

    position: sticky;

    top: 0;

    z-index: 1000;

}



.nav-container {

    display: flex;

    justify-content: center;

    padding: 1rem 0;

}



.nav-links {

    display: flex;

    gap: 2rem;

    flex-wrap: wrap;

    justify-content: center;

}



.nav-link {

    text-decoration: none;

    color: #333;

    font-weight: 500;

    padding: 0.5rem 1rem;

    border-radius: 25px;

    transition: all 0.3s ease;

    position: relative;

}



.nav-link:hover {

    background: #8c1c13;

    color: white;

    transform: translateY(-2px);

}



/* Main content */

.eventi-container {

    padding: 4rem 0;

}



.section-title {

    font-family: 'Playfair Display', serif;

    font-size: 2.5rem;

    color: #8c1c13;

    text-align: center;

    margin-bottom: 3rem;

    position: relative;

}



.section-title::after {

    content: '';

    position: absolute;

    bottom: -10px;

    left: 50%;

    transform: translateX(-50%);

    width: 80px;

    height: 3px;

    background: linear-gradient(90deg, #8c1c13, #bf4342);

    border-radius: 2px;

}



/* Eventi Grid */

.eventi-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));

    gap: 2rem;

    margin-bottom: 4rem;

}



.evento-card {

    background: white;

    border-radius: 15px;

    padding: 2rem;

    box-shadow: 0 5px 20px rgba(0,0,0,0.08);

    transition: all 0.3s ease;

    position: relative;

    overflow: hidden;

}



.evento-card::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    height: 4px;

    background: linear-gradient(90deg, #8c1c13, #bf4342);

}



.evento-card:hover {

    transform: translateY(-10px);

    box-shadow: 0 15px 40px rgba(0,0,0,0.15);

}



.card-title {

    font-family: 'Playfair Display', serif;

    font-size: 1.8rem;

    color: #8c1c13;

    margin-top: 1rem;

    font-weight: 600;

}



.evento-meta {

    display: flex;

    gap: 1.5rem;

    margin-bottom: 1.5rem;

    flex-wrap: wrap;

}



.evento-data, .evento-ora {

    display: flex;

    align-items: center;

    gap: 0.5rem;

    color: #666;

    font-weight: 500;

}



.evento-data i, .evento-ora i {

    color: #8c1c13;

    font-size: 1.1rem;

}



.evento-descrizione {

    margin-bottom: 1.5rem;

    line-height: 1.8;

    color: #555;

}



.evento-details {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 1.5rem;

    padding: 1rem;

    background: #f8f9fa;

    border-radius: 10px;

}



.evento-posti {

    display: flex;

    align-items: center;

    gap: 0.5rem;

    color: #2c5282;

    font-weight: 500;

}



.evento-posti.posti-limitati {

    color: #dc3545;

}



.evento-prezzo {

    display: flex;

    align-items: center;

    gap: 0.5rem;

    font-weight: 600;

    color: #2f855a;

    font-size: 1.1rem;

}



.prenota-btn {

    width: 100%;

    background: linear-gradient(135deg, #8c1c13 0%, #bf4342 100%);

    color: white;

    border: none;

    padding: 1rem 2rem;

    border-radius: 25px;

    font-size: 1.1rem;

    font-weight: 600;

    cursor: pointer;

    transition: all 0.3s ease;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 0.5rem;

}



.prenota-btn:hover {

    transform: translateY(-2px);

    box-shadow: 0 5px 15px rgba(140, 28, 19, 0.3);

}



.prenota-btn:active {

    transform: translateY(0);

}



/* Eventi Speciali */

.eventi-speciali {

    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);

    padding: 3rem;

    border-radius: 20px;

    margin: 4rem 0;

    box-shadow: 0 10px 30px rgba(0,0,0,0.05);

}



.eventi-speciali-title {

    font-family: 'Playfair Display', serif;

    font-size: 2.5rem;

    color: #8c1c13;

    text-align: center;

    margin-bottom: 2rem;

}



.eventi-speciali-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

    gap: 2rem;

}



.evento-speciale {

    background: linear-gradient(135deg, #8c1c13 0%, #bf4342 100%);

    color: white;

    padding: 2rem;

    border-radius: 15px;

    position: relative;

    overflow: hidden;

}



.evento-speciale::before {

    content: '';

    position: absolute;

    top: -50%;

    right: -50%;

    width: 100%;

    height: 100%;

    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);

}



.evento-speciale h3 {

    font-family: 'Playfair Display', serif;

    font-size: 1.8rem;

    margin-bottom: 1rem;

    position: relative;

    z-index: 2;

}



.evento-speciale-data {

    font-size: 1.1rem;

    margin-bottom: 1rem;

    opacity: 0.9;

    position: relative;

    z-index: 2;

}



.evento-speciale-descrizione {

    line-height: 1.6;

    margin-bottom: 1.5rem;

    position: relative;

    z-index: 2;

}



.evento-speciale-prezzo {

    background: rgba(255,255,255,0.2);

    padding: 0.5rem 1rem;

    border-radius: 20px;

    display: inline-block;

    font-weight: 600;

    font-size: 1.2rem;

    position: relative;

    z-index: 2;

}



/* Footer */

.site-footer {

    background: #2c3e50;

    color: white;

    padding: 3rem 0;

    text-align: center;

}



.footer-content {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 1.5rem;

}



.social-links {

    display: flex;

    gap: 1rem;

}



.social-link {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 45px;

    height: 45px;

    background: rgba(255,255,255,0.1);

    color: white;

    text-decoration: none;

    border-radius: 50%;

    transition: all 0.3s ease;

}



.social-link:hover {

    background: #8c1c13;

    transform: translateY(-3px);

}



.copyright {

    opacity: 0.7;

    font-size: 0.9rem;

}



/* Modal per prenotazioni */

.modal {

    display: none;

    position: fixed;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background: rgba(0,0,0,0.7);

    z-index: 10000;

    backdrop-filter: blur(5px);

}



.modal.active {

    display: flex;

    align-items: center;

    justify-content: center;

}



.modal-content {

    background: white;

    padding: 2rem;

    border-radius: 15px;

    max-width: 500px;

    width: 90%;

    max-height: 90vh;

    overflow-y: auto;

    position: relative;

    display: flex;          /* Aggiunto display flex */

    flex-direction: column; /* Organizza gli elementi in colonna */

    align-items: center;    /* Centra gli elementi orizzontalmente */

}





#qrInfo {

    display: block;

    margin-top: 10px;

    font-size: 0.9em;

    color: #666;

}



#codicePrenotazione {

    font-weight: bold;

    color: #8c1c13;

}



.modal-close {

    position: absolute;

    top: 1rem;

    right: 1rem;

    font-size: 1.5rem;   

}



.modal-close:hover {

    cursor: pointer;

    color: #8c1c13;

}



.modal-close i {

    color: #8c1c13;

}



.modal-close i:hover {

    color: #bf4342;

}



.download-btn {

    margin-top: 15px;

    background: #8c1c13;

    color: white;

    border: none;

    padding: 10px 20px;

    border-radius: 25px;

    font-size: 1rem;

    font-weight: 500;

    cursor: pointer;

    transition: all 0.3s ease;

    display: inline-flex;

    align-items: center;

    gap: 8px;

}



.download-btn:hover {

    background: #bf4342;

    transform: translateY(-2px);

}



.download-btn i {

    font-size: 1.1rem;

}





.qr-wrapper {

    position: relative;

    width: 256px;

    height: 300px;

    margin: 0 auto 200px;  /* Modificato il margin per dare spazio sotto */

    padding-top: 0;       /* Rimosso padding-top */

    order: -1;           /* Forza il QR code ad apparire prima */

}



.booking-details {

    text-align: left;

    line-height: 1.6;

    color: #333;

    margin-top: 0;      /* Rimosso il margin top */

    width: 100%;        /* Assicura che occupi tutta la larghezza */

}