/* Camargue Calendar Styles */
.camargue-calendar-container {
    font-family: 'Exo 2';
    color: white;
    border-radius: 10px;
    overflow: hidden;
    width: 100%;
    max-width: 320px; /* Adjust as needed */
}

.calendar-description {
    font-weight: 900;
    font-size: 0.9em;
    padding: 15px;
    text-align: center;
    background-color: #333; /* Optional description background */
}

.calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px;
}

.month-navigation {
    display: flex;
    align-items: center;
}

.month-navigation button {
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    padding: 8px;
}

.month-navigation button svg {
    width: 24px;
    height: 24px;
}

.current-month {
    text-transform: uppercase;
    font-weight: bold;
    margin: 0 15px;
}

.calendar-icon {
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    padding: 8px;
}

.calendar-icon svg {
    width: 20px;
    height: 20px;
}

.calendar-body {
    padding: 0 15px 15px;
}

.weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
    text-align: center;
    font-weight: bold;
    padding-bottom: 5px;
}

.weekdays div {
    padding: 8px 0;
}


.days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
   
}

.day {
    padding: 5px;
    text-align: center;
    border-radius: 5px;
    cursor: pointer;
    position: relative;
    color: var(--day-color, white); /* Default day color, fallback to white */
}

.day:hover {
    background-color: var(--day-hover-bg-color, #555); /* Default hover bg color, fallback to #555 */
    color: var(--day-hover-color); /* Use CSS variable for hover text color */
    /* Ensure hover color takes precedence over default day color */
    color: var(--day-hover-color) !important;
}
.day.has-events {
    color: var(--event-date-color); /* Color for dates with events */
}

.day.has-events:hover {
    color: var(--event-date-hover-color); /* Hover color for event dates - new */
    background-color: var(--event-date-hover-bg-color); /* Hover background color for event dates - new */
}

.day.weekend {
    background-color: #f0f0f0; /* Light gray for weekends */
    color: #333; /* Dark text for weekends */
}

.day.empty {
    background: none;
    cursor: default;
    pointer-events: none;
}

.day-number {
    display: block;
    font-weight: bold;
    color: white;
}


.event-indicator {
    display: block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    margin: 5px auto 0;
}

/* Modal styles */
.camargue-calendar-modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

.modal-content {
    background-color: #fefefe;
    margin: 15% auto; /* 15% from the top and centered */
    padding: 20px;
    border: 5px solid #D30814;
    width: 40%; /* Could be more or less, depending on screen size */
    color: #333;
    position: relative; /* For close button positioning */
    border-radius: 15px;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

.close-button {
    color: #aaa;
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.close-button:hover,
.close-button:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

.event-detail {
    margin-bottom: 15px;
    border-bottom: 1px solid #cfc9c9;
}



.event-detail:last-child {
    border-bottom: none;
}

.event-detail h4 {
    margin-top: 0;
    color: #ffffff; 
}

.event-detail p strong {
    font-weight: bold;
}

/* Responsive adjustments */
@media (max-width: 600px) {
    .calendar-container {
        max-width: 95%; /* Take more width on smaller screens */
    }
    .weekdays, .days {
        font-size: 0.9em;
    }
    .day {
        padding: 8px;
    }
}

.camargue-calendar-wrapper.calendar-loading {
    opacity: 0.7; /* Reduce opacity to indicate loading */
    pointer-events: none; /* Disable interactions while loading */
}


.camargue-calendar-wrapper.calendar-loading .calendar-body {
    /* Example of a simple CSS spinner - you can customize this */
    position: relative;
}

.camargue-calendar-wrapper.calendar-loading .calendar-body::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 30px;
    height: 30px;
    margin-top: -15px;
    margin-left: -15px;
    border: 3px solid #fff;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Page under calendar details styles */
#camargue-event-page-details {
    width: 260px;
    display: none; /* Hidden by default */
    background-color: #D30814; /* Red background from image */
    color: white;
    padding: 15px;
    border-radius: 0 0 10px 10px; /* Match calendar bottom corners */
    margin-top: -10px; /* Overlap calendar slightly */
    z-index: 0; /* Ensure below modal if both exist */
    position: relative; /* For z-index context */
}

.camargue-event-page-details .event-page-details-inner {
    padding: 15px; /* Inner padding for content */
}


.event-page-title {
    font-size: 1.5em;
    text-align: right;
    margin-bottom: 20px;
    font-weight: bold; /* Ensure it's bold */
}

.event-page-detail {
    margin-bottom: 0px;
    padding-bottom: 0px;
    
}

.event-page-detail:last-child {
    border-bottom: none;
}

.event-location-time {
    font-size: 1.1em; /* Adjust as needed */
}

.event-separator {
    border-top: 1px dotted white; /* Thicker dotted white line */
    margin-top: 5px;
    margin-bottom: 5px;
}

.event-separator-1 {
    border-top: 1px dotted rgb(0, 0, 0); /* Thicker dotted white line */
    margin-top: 5px;
    margin-bottom: 5px;
}


.event-separator-title {
    border-top: 2px dotted white; /* Thicker dotted white line of title */
    margin-bottom: 20px;
}
/* ... (Existing CSS for the first calendar) ... */

/* New Calendar Styles */
.camargue-calendar-new-container {
    background-color: #1e1e1e; /* Dark background as in image */
    color: white;
    border-radius: 8px;
    overflow: hidden;
    width: 100%;
    max-width: 350px; /* Adjust as needed */
    margin-bottom: 20px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.5);
}

.camargue-calendar-new-container .calendar-header {
    padding: 10px;
    text-align: center;
}

.camargue-calendar-new-container .month-navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.camargue-calendar-new-container .month-navigation button {
    background: none;
    border: none;
    color: white;
    font-size: 1.2em;
    cursor: pointer;
    padding: 5px 10px;
}

.camargue-calendar-new-container .current-month {
    font-weight: bold;
    font-size: 1.1em;
}

.camargue-calendar-new-container .calendar-body {
    padding: 10px 15px 15px;}

.camargue-calendar-new-container .weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    text-align: center;
    font-size: 0.9em;
    color: #aaa; /* Lighter weekday text */
    
}

.camargue-calendar-new-container .days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.camargue-calendar-new-container .day {
    padding: 8px;
    text-align: center;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.95em;
}

.camargue-calendar-new-container .day:hover {
    background-color: #333; /* Darker hover background */
}

.camargue-calendar-new-container .day.has-events {
    color: #fff; /* White text for days with events */
}

.camargue-calendar-new-container .day.has-events .event-dot {
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #ff4d4d; /* Red dot for events */
    margin: 4px auto 0;
}

.camargue-calendar-new-container .day.empty {
    background: none;
    cursor: default;
    pointer-events: none;
}

.camargue-calendar-new-container .day-number {
    display: block;
    font-weight: normal; /* Adjust as needed */
}


/* Event List Styles */
#camargue-event-list-container {
    padding: 0px;
    
}

.camargue-event-item {
    background-color: white;
    border-radius: 6px;
    margin-bottom: 15px;
    padding: 15px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    border: 2px solid #D30814;
}

.camargue-event-item .event-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    color: #D30814;
}

.camargue-event-item .event-location {
        line-height: 25px;
    font-weight: bold;
    font-size: 1.3em;
    color: #1D1D1B;
}

.camargue-event-item .event-date {
    font-size: 0.9em;
}

.camargue-event-item .event-details {
    /* Styles for event details content */
    display: grid;
    gap: 20px;
}

.camargue-event-item .event-meta {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    font-size: 0.9em;
    color: #777;
}

.camargue-event-item .event-time,
.camargue-event-item .event-type {
    margin-right: 5px;

   
}
.camargue-event-item .event-type {
    border-right: none;
}


.camargue-event-item h4.event-arena {
    margin-top: 0;
    margin-bottom: 10px;
    color: #333;
    font-size: 1.2em;
}

.camargue-event-item .event-bull-raseteurs p {
    margin: 5px 0;
    font-size: 0.95em;
    color: #666;
}

.camargue-event-item .event-price {
    margin-top: 10px;
   
}

.camargue-event-item .event-actions {
    margin-top: 0px;
   
}

.camargue-event-item .event-actions button {
    margin-left: 8px;
    font-size: 0.9em;
}

.no-events-message {
    padding: 15px;
    text-align: center;
    color: #777;
}


/* Event Filters Styles */
.camargue-event-filters-container {
    background-color: #ffffff; /* Light filter background */
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.event-filters .filter-group {
    margin-bottom: 15px;
}

.event-filters label {
    display: block;
    margin-bottom: 15px;
    font-weight: normal;
    color: #D30814;
}

.event-filters select,
.event-filters input[type="text"] {
    color: #666;
    width: 100%;
    padding: 10px;
    border: 2px solid #D30814;
    border-radius: 4px;
    font-size: 0.9em;
    box-sizing: border-box;
}

.event-filters .filter-button {
    background-color: #D30814; /* Primary button color */
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 4px;
    font-size: 1em;
    cursor: pointer;
}

.event-filters .filter-button:hover {
    background-color: #D30814; /* Darker hover color */
}


/* Responsive adjustments for new components */
@media (max-width: 768px) {
    .camargue-calendar-new-container {
        max-width: 100%; /* Full width on smaller screens */
    }
    #camargue-event-list-container {
        padding: 15px;
    }
    .camargue-event-item {
        padding: 10px;
    }
    .camargue-event-filters-container {
        padding: 15px;
    }
}





/* V1 Event Details Page Display Styles (Styled to match the image) */
.camargue-calendar-event-page {
    width: 260px;
    display: none; /* Hidden by default */
    background-color: #D30814; /* Red background from image */
    color: white;
    padding: 15px;
    border-radius: 0 0 10px 10px; /* Match calendar bottom corners */
    margin-top: -10px; /* Overlap calendar slightly */
    z-index: 0; /* Ensure below modal if both exist */
    position: relative; /* For z-index context */
}

.camargue-calendar-event-page .event-page-content {
    /* Container for content within the page section */
    padding-bottom: 10px; /* Add padding to the bottom */
}

.camargue-calendar-event-page .details-title {
    margin: 0 0 15px 0; /* Adjust margin below title */
    border-bottom: none; /* Remove default border */
    padding-bottom: 0; /* Remove default padding */
    font-size: 1.4em !important; /* Large font size for title */
    font-weight: bold; /* Bold text */
    text-transform: uppercase; /* Uppercase text */
    line-height: 1.2; /* Adjust line height */
    color: white; /* White text */
}

.camargue-calendar-event-page .details-title .details-date {
     font-size: 1em; /* Date size relative to title */
}
.details-title{
    color: #D30814; 
}
h3.details-title{
        font-size: 1.5rem !important;
}

/* Separator line after title */
.camargue-calendar-event-page .date-separator {
    border-bottom: 2px dashed rgba(255, 255, 255, 0.5); /* White dashed line with transparency */
    margin: 0 auto 20px auto; /* Space above and below */
    width: 80%; /* Adjust width */
}

/* Container for the list of events for the day */
.camargue-calendar-event-page .daily-events-list {
    /* flex-direction: column; */ /* Use flexbox if needed for complex layouts */
}


/* Style for each individual event item line */
.camargue-calendar-event-page .v1-page-event-item {
    margin: 10px 0; /* Space above/below each event line */
    font-size: 1.1em; /* Adjust font size */
    font-weight: bold; /* Bold text */
    text-transform: uppercase; /* Uppercase */
    color: white; /* White text */
    display: block; /* Make it a block element */
    text-align: center; /* Center the text */
}

.camargue-calendar-event-page .v1-page-event-item .bullet {
     margin-right: 5px; /* Space after the dash */
}

/* Separator line after each event item */
.camargue-calendar-event-page .event-item-separator {
    border-bottom: 1px dashed rgba(255, 255, 255, 0.3); /* Lighter dashed line */
    margin: 10px auto; /* Space above/below */
    width: 70%; /* Adjust width */
}

.camargue-calendar-event-page .daily-events-list .v1-page-event-item:last-of-type + .event-item-separator {
     display: none; /* Hide the last separator if needed */
}


/* Style for the "VOIR TOUTES LES COURSES" text */
.camargue-calendar-event-page .view-all-courses {
    margin-top: 20px; /* Space above */
    font-size: 1.2em; /* Adjust font size */
    font-weight: bold; /* Bold text */
    text-transform: uppercase; /* Uppercase */
    color: white; /* White text */
    cursor: pointer; /* Indicate it might be clickable */
    /* Add padding, border, etc. if it should look like a button */
}

.camargue-calendar-event-page .view-all-courses:hover {
    opacity: 0.8; /* Subtle hover effect */
}


/* Close button for the page display */
.camargue-calendar-event-page .close-page-button {
    position: absolute;
    top: 5px; /* Adjust position */
    right: 10px; /* Adjust position */
    font-size: 30px; /* Larger size */
    font-weight: bold;
    color: rgba(255, 255, 255, 0.8); /* White with transparency */
    background: none;
    border: none;
    cursor: pointer;
    line-height: 1; /* Adjust line height */
    padding: 5px; /* Add padding for easier clicking */
}

.camargue-calendar-event-page .close-page-button:hover,
.camargue-calendar-event-page .close-page-button:focus {
    color: white; /* Solid white on hover/focus */
}


/* ... (Other existing responsive adjustments) ... */

/* Adjustments for loading/no events messages within the V1 page view */
.camargue-calendar-event-page .loading-message,
.camargue-calendar-event-page .no-events-message {
    color: white; /* Ensure messages are visible on red background */
    text-align: center;
    padding: 15px;
}

/* ... (your existing CSS) ... */

/* Generic Popup Modal Styles for "Savoir Plus" */
.camargue-popup-modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1000; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto; /* Enable scroll if needed */
    background-color: rgba(0,0,0,0.6); /* Darker overlay */
}

.camargue-popup-modal-content {
    background-color: #fff;
    color: #333;
    margin: 10% auto; /* Centered */
    padding: 25px;
    border: 5px solid #D30814;
    width: 80%;
    max-width: 600px; /* Max width */
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    position: relative;
}

.camargue-popup-close-button {
    color: #aaa;
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 30px;
    font-weight: bold;
    line-height: 1;
    cursor: pointer;
}

.camargue-popup-close-button:hover,
.camargue-popup-close-button:focus {
    color: #333;
    text-decoration: none;
}

#camargue-details-popup-content h3 {
    margin-top: 0;
    text-align: center;
    font-weight: bold;
    color: #D30814; /* Theme red color */
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
    margin-bottom: 15px;
    font-size: 1.5em;
}




#camargue-details-popup-content p {
    display: flex !important;
    margin-bottom: 10px;
    column-gap: 5px;
    line-height: 1.6;
    flex-direction: row;
    flex-wrap: wrap;
}
#camargue-details-popup-content p strong {
    color: #1D1D1B;
    display: block; /* Makes the label take its own line for clarity */
    margin-bottom: 3px;
}

#camargue-details-popup-content h4 { /* For Commentaire title */
    margin-top: 20px;
    margin-bottom: 5px;
    color: #D30814;
    font-size: 1.2em;
}

/* Responsive adjustments for popup */
@media (max-width: 768px) {
    .camargue-popup-modal-content {
        width: 90%;
        margin: 20% auto;
        padding: 20px;
    }
    #camargue-details-popup-content h3 {
        font-size: 1.3em;
    }
}

/* -------------------------------------- */
/* Event List Grid Layout Styles          */
/* -------------------------------------- */

#camargue-event-list-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); 
    gap: 20px; /* Adjust the gap size as needed */
    padding: 0; 
    border-radius: 8px; /* Optional: keep border-radius */
    padding: 0px; /* Re-add padding *around* the grid if desired */
}

/* Ensure event items take up the grid cell */
.camargue-event-item {
    /* No specific grid properties needed here unless you want items to span multiple cells */
    /* Reset margin if previously set, as gap handles spacing */
    margin-bottom: 0; 
     /* Optional: Add height or min-height if you want uniform rows, 
        but often letting content dictate height is better for responsiveness. 
        You might need internal flexbox if content varies a lot and you want aligned buttons. */
    /* display: flex; 
    flex-direction: column; 
    justify-content: space-between; */ /* Example if you need internal alignment */
}

/* Styling for the "No Events" message when grid is empty */
#camargue-event-list-container:empty + .no-events-message,
#camargue-event-list-container .no-events-message { /* Target message inside or following empty container */
    display: block; /* Ensure it's visible */
    grid-column: 1 / -1; /* Make the message span all columns if it's inside the grid */
    text-align: center;
    padding: 30px 15px;
    color: #777;
    background-color: #ffffff; /* Match container bg */
    border-radius: 8px;
}

/* Responsive Adjustments for Grid */

/* Tablets - 2 columns */
@media (max-width: 991px) { /* Adjust breakpoint as needed */
    #camargue-event-list-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px; /* Slightly smaller gap */
    }
}

/* Mobile - 1 column */
@media (max-width: 600px) { /* Adjust breakpoint as needed */
    #camargue-event-list-container {
        grid-template-columns: 1fr; /* Switch to a single column */
        gap: 15px;
        padding: 15px; /* Adjust padding for smaller screens */
    }
    .camargue-event-item {
         padding: 15px; /* Adjust item padding if needed */
    }
}

.col-wrap p.submit {
    margin-top: 0px !important;
}

span.location-icon{
    vertical-align: middle !important;
}

.event-details-header{
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
}
.arene-image-shortcode {
    display: block; /* Pour que margin auto fonctionne si vous voulez centrer */
    max-width: 100%; /* Rendre l'image responsive */
    height: auto;    /* Maintenir le ratio de l'image */
    margin-bottom: 20px; /* Espace en dessous */
    border-radius: 25px !important; /* Coins arrondis si désiré */
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}


/* Titre du popup */
.camargue-popup-content-wrapper .details-title {
    text-align: center;
    font-size: 2.2em !important; /* Ajustez la taille selon vos besoins */
    font-weight: bold !important;
    margin: 0 0 20px 0;
    flex-shrink: 0; /* Empêche le titre de se réduire */
    color: #1D1D1B;
}

/* Conteneur de la grille pour les événements */
.events-grid-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Grille à 2 colonnes */
    gap: 25px 20px; /* Espace vertical et horizontal entre les éléments */
    overflow-y: auto; /* Ajoute une barre de défilement si le contenu dépasse */
    flex-grow: 1; /* Permet à cette zone de prendre tout l'espace vertical disponible */
    padding: 5px; /* Un peu d'espace intérieur */
}

/* Un seul élément (une course) dans la grille */
.event-grid-item {
    display: flex;
    flex-direction: column;
}

/* Ligne supérieure avec l'icône et le nom de l'arène */
.event-item-location {
    display: flex;
    align-items: center; /* Aligne l'icône et le texte verticalement */
    gap: 10px; /* Espace entre l'icône et le nom de l'arène */
    font-weight: bold;
    font-size: 1.1em;
    color: #333;
    margin-bottom: 8px; /* Espace avant les détails */
}

.event-item-location svg {
    width: 22px; /* Taille fixe pour l'icône */
    height: auto;
    flex-shrink: 0;
}

.event-item-location a {
    color: #1D1D1B !important;
    text-decoration: none !important;
}


/* Conteneur pour les détails (heure, libellé) */
.event-item-details {
    /* Indentation pour s'aligner après l'icône (largeur icône + gap) */
    padding-left: 32px; 
}

.event-item-time,
.event-item-name {
    margin: 0 0 4px 0;
    font-size: 1em;
    line-height: 1.4;
    color: #1D1D1B;
}
.event-item-time {
    font-weight: 500;
}

/* Pied de page du popup contenant le bouton */
.popup-footer {
    text-align: center;
    padding-top: 20px;
    padding-bottom: 10px;
    flex-shrink: 0; /* Empêche le pied de page de se réduire */
}

/* Style du bouton "Voir toutes les courses" pour correspondre à l'image */
.v1-popup-voir-plus-btn {
    background-color: #ffffff !important;
    color: #1D1D1B !important;
    border: 2px solid #D30814 !important;
    padding: 10px 25px !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    display: inline-block;
    font-weight: bold;
    transition: all 0.2s ease-in-out;
}
.v1-popup-voir-plus-btn:hover {
    background-color: #D30814 !important;
    color: #ffffff !important;
}

/* Pour les petits écrans, passer la grille en une seule colonne */
@media (max-width: 600px) {
    .events-grid-container {
        grid-template-columns: 1fr !important;
    }
}

.popup-logo{
     width: 32%;
    position: absolute;
    right: -60px;
    bottom: -60px;}

/* Couleurs dans les listes déroulantes */
option.status-green { color: #2ecc71 !important; font-weight: bold; }
option.status-orange { color: #f39c12 !important; }
option.status-blue { color: #3498db !important; }
option.status-red { color: #e74c3c !important; }
option.status-grey { color: #95a5a6 !important; font-style: italic; }

/* Correction pour certains navigateurs qui forcent le fond blanc */
select option { padding: 4px; }

#ffcc-main-licence-form select,
.form-field select {
    width: 100%;
    max-width: 450px; /* Ou la taille de vos autres champs */
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}