/* --- Stili per la Timeline del Viaggio --- */

.timeline {
    position: relative;
    max-width: 900px; /* Larghezza massima per la timeline */
    margin: 0 auto;
    padding: 20px 0;
}

/* La linea verticale centrale */
.timeline::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%; /* Centra la linea */
    width: 2px;
    background-color: #add8e6; /* Celeste chiaro per la linea */
    transform: translateX(-50%);
    z-index: 1; /* Sotto gli eventi, ma sopra il body */
}

/* Ogni singolo elemento della timeline */
.timeline-item {
    position: relative;
    margin-bottom: 40px; /* Spazio tra gli eventi */
    display: flex; /* Permette di controllare gli elementi figli */
    justify-content: center; /* Centra il dot sulla linea */
    align-items: center; /* Allinea verticalmente il contenuto rispetto al dot */
    min-height: 80px; /* Altezza minima per l'elemento per una migliore spaziatura */
    padding: 0; /* Rimuovi padding laterale dal timeline-item */
}

/* Il punto celeste sulla linea */
.timeline-dot {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 16px;
    height: 16px;
    background-color: #87ceeb; /* Celeste per il punto */
    border-radius: 50%;
    transform: translate(-50%, -50%);
    z-index: 3; /* Assicura che sia sopra la linea e il contenuto */
    border: 2px solid #fff; /* Bordo bianco per farlo risaltare */
}

/* Contenitore principale del contenuto di un evento */
/* Questo div si divide a metà e ospita le due colonne. */
.timeline-event-content {
    display: flex; /* Abilita Flexbox per le due colonne interne */
    justify-content: space-between; /* Spinge le due colonne ai lati opposti */
    align-items: center; /* Allinea verticalmente gli elementi */
    width: calc(100% - 100px); /* Larghezza ridotta per creare lo spazio ai lati per il punto e un po' di margine */
    background-color: #fff;
    padding: 15px 20px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    box-sizing: border-box; /* Include padding nel calcolo della larghezza */
    position: relative; /* Per le frecce */
}

/* Freccia che punta alla linea centrale dal lato sinistro del contenuto */
.timeline-event-content::before {
    content: '';
    position: absolute;
    top: 50%;
    /* Spostiamo la freccia in base al margine che lasciamo dal centro */
    left: calc(50% - (var(--timeline-gap) / 2) - 10px); /* Regola la posizione in base al gap */
    transform: translateY(-50%);
    border: solid transparent;
    border-right-color: #fff; /* Colore della freccia */
    border-width: 10px;
    pointer-events: none;
    z-index: 2; /* Sopra il background del content, sotto il dot */
}

/* Variabile CSS per controllare lo spazio tra il contenuto e la linea centrale */
:root {
  --timeline-gap: 50px; /* Spazio desiderato tra linea centrale e contenuto */
}

/* Stili per la sezione Icona e Nome (sinistra) */
.timeline-icon-name {
    display: flex;
    flex-direction: column; /* Icona sopra il nome */
    align-items: flex-start; /* Allinea a sinistra */
    flex-shrink: 0; /* Impedisce che si rimpicciolisca */
    width: calc(50% - var(--timeline-gap) - 20px); /* Occupa metà larghezza meno il gap e il padding */
    margin-right: var(--timeline-gap); /* Margine che crea lo spazio fino alla linea centrale */
    text-align: left; /* Allinea il testo all'interno a sinistra */
}

.timeline-icon-name .fas {
    font-size: 1.6em; /* Icone più piccole, come richiesto */
    color: #4682b4; /* Celeste scuro per le icone */
    margin-bottom: 5px;
}

.timeline-icon-name .event-title-name {
    margin: 0;
    font-size: 1em; /* Nome evento più piccolo */
    color: #0056b3; /* Blu scuro per il titolo */
    font-weight: 600;
    line-height: 1.3;
}

/* Stili per la sezione Dettagli e Azioni (destra) */
.timeline-details-actions {
    flex-grow: 1; /* Occupa lo spazio rimanente */
    width: calc(50% - var(--timeline-gap) - 20px); /* Occupa metà larghezza meno il gap e il padding */
    margin-left: var(--timeline-gap); /* Margine che crea lo spazio dalla linea centrale */
    text-align: right; /* Allinea il testo e i pulsanti a destra */
}

.timeline-details-actions p {
    margin: 0; /* Rimuovi margini predefiniti */
    font-size: 0.85em; /* Testo più piccolo */
    color: #555;
    line-height: 1.4;
}

.timeline-details-actions .event-detail-sub {
    font-style: italic;
    color: #777;
    margin-top: 3px;
}

.event-actions {
    margin-top: 10px;
}

.event-actions .btn {
    display: inline-block;
    padding: 5px 10px; /* Pulsanti ancora più piccoli */
    margin-left: 8px; /* Spazio tra i pulsanti */
    border-radius: 4px;
    text-decoration: none;
    font-size: 0.75em; /* Dimensione del testo dei pulsanti */
    transition: background-color 0.2s ease;
}

/* Stili per i pulsanti (Assumendo classi Bootstrap o simili) */
.event-actions .btn-warning {
    background-color: #ffc107; /* Giallo Bootstrap */
    color: #212529;
    border: 1px solid #ffc107;
}
.event-actions .btn-warning:hover {
    background-color: #e0a800;
    border-color: #d39e00;
}
.event-actions .btn-danger {
    background-color: #dc3545; /* Rosso Bootstrap */
    color: #fff;
    border: 1px solid #dc3545;
}
.event-actions .btn-danger:hover {
    background-color: #c82333;
    border-color: #bd2130;
}

/* --- Stili per i pulsanti Aggiungi Evento (fuori dalla timeline) --- */
.add-events {
    text-align: center;
    margin-top: 50px; /* Spazio dalla timeline */
    padding: 20px;
    background-color: #f8f9fa;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.add-events h3 {
    color: #333;
    margin-bottom: 20px;
}

.event-buttons {
    display: flex;
    flex-wrap: wrap; /* Permette ai pulsanti di andare a capo */
    justify-content: center; /* Centra i pulsanti */
    gap: 10px; /* Spazio tra i pulsanti */
}

.event-buttons .btn {
    padding: 8px 15px; /* Pulsanti più piccoli */
    font-size: 0.9em; /* Testo più piccolo */
    border-radius: 5px;
    /* Colore primario Bootstrap, ma potresti volerlo adattare */
    background-color: #007bff;
    color: #fff;
    border: 1px solid #007bff;
    transition: background-color 0.2s ease;
}

.event-buttons .btn:hover {
    background-color: #0056b3;
    border-color: #004085;
}


/* --- Media Queries per la Responsiveness --- */
@media (max-width: 768px) {
    .timeline::before {
        left: 20px; /* Sposta la linea più a sinistra */
        transform: translateX(0);
    }

    .timeline-dot {
        left: 20px; /* Sposta il punto sulla linea per mobile */
        transform: translate(-50%, -50%);
    }

    .timeline-item {
        padding-left: 0;
        padding-right: 0;
        margin-bottom: 30px;
    }

    .timeline-event-content {
        flex-direction: column; /* Impila gli elementi verticalmente */
        align-items: flex-start; /* Allinea tutto a sinistra */
        margin-left: 50px; /* Spazio dalla linea (solo a sinistra) */
        width: calc(100% - 65px); /* Larghezza per mobile */
        padding: 12px 15px;
    }

    /* Rimuove la freccia sul contenuto per mobile */
    .timeline-event-content::before {
        display: none;
    }

    .timeline-icon-name {
        width: 100%; /* Occupa tutta la larghezza disponibile */
        margin-right: 0;
        margin-bottom: 10px; /* Spazio tra icona/nome e dettagli/pulsanti */
        align-items: flex-start;
    }

    .timeline-details-actions {
        width: 100%; /* Occupa tutta la larghezza disponibile */
        margin-left: 0; /* Rimuovi margine sinistro */
        text-align: left; /* Allinea tutto a sinistra */
    }

    .event-actions {
        margin-top: 10px;
    }

    .event-actions .btn {
        margin-left: 0; /* Rimuovi margin-left */
        margin-right: 10px; /* Spazio tra i pulsanti */
        margin-bottom: 5px; /* Spazio se i pulsanti vanno a capo */
    }

    .event-buttons .btn {
        width: calc(50% - 15px); /* Due pulsanti per riga con spazio */
        box-sizing: border-box;
    }
}