/* splash-screen.css */
:root {
    --primary-splash: #001900;
    --primary-grad: #002d00;
    --gold: #E0CD00;
    --gold-hover: #f0dd40;
    --white: #ffffff;
    --overlay: rgba(0, 20, 0, 0.96);
}

.modal-overlay-splash {
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%;
    background: var(--overlay);
    backdrop-filter: blur(5px);
    display: none; /* Inizialmente nascosto */
    justify-content: center; 
    align-items: center;
    z-index: 10000; 
    padding: 15px;
	/* Transizione per la dissolvenza */
    transition: opacity 0.5s ease, visibility 0.5s ease;
    opacity: 1;
    visibility: visible;
}

/* Classe per attivare il fade-out */
.modal-overlay-splash.hidden {
    opacity: 0;
    visibility: hidden;
}

.modal-container-splash {
    background: linear-gradient(145deg, var(--primary-splash) 0%, var(--primary-grad) 100%);
    border: 1px solid rgba(224, 205, 0, 0.3);
    border-radius: 16px;
    width: 100%; 
    max-width: 600px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.6);
    overflow: hidden;
    display: flex; 
    flex-direction: column;
    position: relative;
}

/* HEADER */
.modal-header-splash {
    padding: 25px 0 20px 0;
    text-align: center;
    background: radial-gradient(circle at top, rgba(0,50,0,0.2), transparent 70%);
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.welcome-line {
    font-family: 'Cormorant Garamond', serif !important;
    font-style: italic; 
    font-weight: 600; 
    font-size: 1.8rem;
    color: rgba(255, 255, 255, 0.9); 
    margin-bottom: 8px;
}

.brand-row {
    display: flex; 
    align-items: center; 
    justify-content: center; 
    gap: 15px;
    width: 100%; 
    padding: 15px 0;
    background: linear-gradient(90deg, rgba(0, 25, 0, 0) 0%, rgba(0, 77, 0, 0.5) 50%, rgba(0, 25, 0, 0) 100%);
    border-top: 1px solid rgba(224, 205, 0, 0.15);
    border-bottom: 1px solid rgba(224, 205, 0, 0.15);
}

.logo-img-splash {
    height: 55px; 
    width: auto; 
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.6));
}

.brand-text-splash {
    display: flex; 
    flex-direction: column; 
    text-align: left;
    justify-content: center;
}

.row-text {
    font-family: 'Raleway', sans-serif !important;
    font-weight: 900;
    color: var(--white) !important;
    text-transform: uppercase;
    letter-spacing: 1px !important;
    line-height: 1 !important;
    white-space: nowrap;
}

.text-chiese { font-size: clamp(1rem, 4vw, 1.25rem); }

.italia-container {
    display: flex;
    align-items: baseline;
    margin-top: 4px;
}

.ghost-spacer {
    font-family: 'Raleway', sans-serif !important;
    font-weight: 900;
    font-size: clamp(1rem, 4vw, 1.25rem);
    visibility: hidden; 
    opacity: 0;
}

.text-italia { font-size: clamp(1.2rem, 5vw, 1.45rem); }

.close-btn-abs {
    position: absolute; 
    top: 15px; 
    right: 15px; 
    background: none; 
    border: none; 
    color: rgba(255,255,255,0.4); 
    font-size: 1.8rem; 
    cursor: pointer; 
    z-index: 10;
}

/* BODY & FOOTER */
.modal-body-splash { padding: 25px; }
.intro-text-splash { color: rgba(255,255,255,0.8); font-size: 0.95rem; margin-bottom: 20px; text-align: center; }
.promo-card { background: rgba(224, 205, 0, 0.05); border: 1px solid rgba(224, 205, 0, 0.3); border-radius: 12px; padding: 20px; }
.features-grid-splash { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 20px; }
.f-item { font-size: 0.85rem; color: #eee; display: flex; align-items: center; gap: 8px; }
.f-icon { color: var(--gold); }

.btn-gold-splash { 
    display: block; 
    width: 100%; 
    text-align: center; 
    background: var(--gold); 
    color: #001900; 
    padding: 14px; 
    border-radius: 8px; 
    font-weight: 700; 
    text-decoration: none; 
    text-transform: uppercase;
}

.modal-footer-splash { padding: 15px 25px; background: rgba(0,0,0,0.2); text-align: center; }

.btn-subtext {
    display: block;
    text-align: center;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 10px;
    font-style: italic;
}

@media (max-width: 480px) {
    .logo-img-splash { height: 45px; }
    .features-grid-splash { grid-template-columns: 1fr; }
}