/* ICS Custom Slider - No Swiper Dependencies */
.ics-custom-slider-container {
    position: relative;
    width: 100%;
    margin: 0px 0;
    min-height: 650px; /* Consider making this more flexible if card heights vary */
    overflow: hidden;
    box-sizing: border-box;
}

.ics-custom-slider {
    position: relative;
    width: 100%;
    height: 650px; /* Fixed height for the visible slider area */
    overflow: hidden;
    padding: 0px 0px; /* Padding inside the slider, reducing wrapper width */
    box-sizing: border-box;
}

.ics-custom-slider-wrapper {
    display: flex;
    width: 100%; /* Important: This 100% is relative to the .ics-custom-slider's content area (after its padding) */
    height: 600px;
    transition: transform 0.3s ease;
    align-items: stretch; /* Ensures cards stretch to fill height */
}

.ics-custom-slide {
    flex: 0 0 auto; /* Do not grow, do not shrink, auto basis */
    height: 600px;
    display: flex;
    align-items: stretch;
    padding-right: 0px; /* This creates the gap between slides */
    box-sizing: border-box; /* Padding is included in the element's total width */
}

/* Slide widths based on slides per view */
/* These widths are crucial. Combined with box-sizing: border-box and padding-right,
   they define the `offsetWidth` that JS now uses for calculation. */
.ics-custom-slider[data-slides="1"] .ics-custom-slide {
    width: 100%;
}

.ics-custom-slider[data-slides="2"] .ics-custom-slide {
    width: 50%;
}

.ics-custom-slider[data-slides="3"] .ics-custom-slide {
    width: 33.333%;
}

.ics-custom-slider[data-slides="4"] .ics-custom-slide {
    width: 25%;
}

/* Remove padding from last slide to avoid extra space at the end of the wrapper */
.ics-custom-slide:last-child {
    padding-right: 0;
}

/* Event Card Styles */
.ics-custom-event-card {
    background: white;
    border-radius: 24px;
    overflow: hidden;
    border: #A9D6E5 1px solid;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%; /* Fills the slide's height */
    display: flex;
    flex-direction: column;
    width: 100%; /* Fills the slide's width (minus its own padding-right) */
}

.ics-custom-event-card:hover {
}

.ics-custom-event-image {
    height: 213px;
    background-size: contain;
    background-position: center;
    position: relative;
    flex-shrink: 0;
}

.ics-custom-event-placeholder {
    height: 280px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    flex-shrink: 0;
}

.ics-custom-event-placeholder-icon {
    color: white;
    font-size: 48px;
    opacity: 0.7;
}

.ics-custom-event-content {
    padding: 20px;
    flex-grow: 1; /* Allows content to fill remaining space */
    display: flex;
    flex-direction: column;
    height: 320px; /* Fixed height, allows scroll if content overflows */
    overflow: hidden;
}

.ics-custom-event-date-category {
    display: flex;
    align-items: flex-start;
    margin-bottom: 12px;
    flex-shrink: 0;
}

.ics-custom-event-date-badge {
    background: #4A90E2;
    color: white;
    border-radius: 12px;
    padding: 8px 12px;
    text-align: center;
    margin-right: 12px;
    min-width: 60px;
    flex-shrink: 0;
}

.ics-custom-event-day-name {
    font-size: 10px;
    font-weight: 600;
    opacity: 0.9;
    line-height: 1;
}

.ics-custom-event-day-num {
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    margin-top: 2px;
}

.ics-custom-event-category-container {
    flex-grow: 1;
}

.ics-custom-event-category {
    background: #4A90E2;
    color: white;
    padding: 4px 12px;
    border-radius: 24px;
    font-size: 10px;
    font-weight: 600;
    display: inline-block;
}

.ics-custom-event-title {
    margin: 0 0 8px 0;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    color: #2c3e50;
    flex-shrink: 0;
}

.ics-custom-event-time,
.ics-custom-event-location,
.ics-custom-event-organizer {
    color: #7f8c8d;
    margin-bottom: 6px;
    font-size: 15px;
    font-weight: 500;
    line-height: 1;
    flex-shrink: 0;
}

.ics-custom-event-description {
    color: #555;
    line-height: 1.2;
    font-size: 14px;
    flex-grow: 1; /* Allows description to grow and use available space */
    overflow: hidden; /* Important for fixed height event content */
    margin-bottom: 12px;
}

.ics-custom-event-buttons {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.ics-custom-event-button {
    flex: 1;
    background: transparent;
    border: 2px solid #ddd;
    color: #666;
    padding: 8px 12px;
    text-decoration: none;
    border-radius: 24px;
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: center;
    transition: all 0.3s ease;
}

.ics-custom-event-button:hover {
    border-color: #4A90E2;
    color: #4A90E2;
    text-decoration: none;
}

/* === UPDATED NAVIGATION BUTTONS === */
.ics-custom-slider-container .ics-custom-nav-button {
    position: absolute;
    /* Move top position to 140px (half of the 280px image height) */
    top: 140px; 
    transform: translateY(-50%); /* This perfectly centers it on the 140px line */
    width: 32px;
    height: 32px;
    
    /* Blue stylish look */
    background: #4A90E2; 
    color: white;

    border: none;
    border-radius: 10%;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: bold;
    z-index: 10;
    transition: all 0.3s ease;
}

.ics-custom-slider-container .ics-custom-nav-button:hover {
    background: #3a7ac2; /* Darker blue on hover */
    transform: translateY(-50%) scale(1.1); /* Keep the vertical centering */
    box-shadow: 0 6px 16px rgba(0,0,0,0.25);
}

.ics-custom-slider-container .ics-custom-nav-button:disabled {
    background: #e0e0e0; /* Use a light grey for disabled state */
    color: #9e9e9e;
    opacity: 0.7;
    cursor: not-allowed;
    transform: translateY(-50%) scale(1); /* Reset scale on disabled */
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.ics-custom-slider-container .ics-custom-nav-button:disabled:hover {
    background: #e0e0e0; /* Ensure it doesn't change color on hover when disabled */
    color: #9e9e9e;
}

/* Adjust horizontal position for better aesthetics */
.ics-custom-slider-container .ics-custom-nav-prev {
    left: 20px;
}

.ics-custom-slider-container .ics-custom-nav-next {
    right: 20px;
}

.ics-custom-slider-container .ics-custom-nav-prev::before {
    content: '‹';
    line-height: 1; /* Helps with vertical alignment of the icon */
}

.ics-custom-slider-container .ics-custom-nav-next::before {
    content: '›';
    line-height: 1; /* Helps with vertical alignment of the icon */
}


/* Pagination */
.ics-custom-pagination {
    position: absolute;
    bottom: 6px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 10;
}

.ics-custom-pagination-bullet {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(74, 144, 226, 0.3);
    cursor: pointer;
    transition: all 0.3s ease;
}

.ics-custom-pagination-bullet.active {
    background: #4A90E2;
    transform: scale(1.2);
}

/* Mobile Responsive */
/* Mobile Responsive */
@media (max-width: 768px) {
    .ics-custom-slider {
        padding: 0px 0px; /* Adjust padding for smaller screens */
    }

    /* Force single slide view on mobile regardless of data-slides attribute */
    .ics-custom-slider[data-slides="2"] .ics-custom-slide,
    .ics-custom-slider[data-slides="3"] .ics-custom-slide,
    .ics-custom-slider[data-slides="4"] .ics-custom-slide,
    .ics-custom-slide { /* This last rule ensures all slides become 100% on mobile */
        width: 100% !important; /* Use !important to override inline or higher specificity rules */
        padding-right: 0px !important; /* No padding-right on mobile when slides are 100% */
    }

    /* Adjust card sizing for mobile */
    .ics-custom-event-card {
        height: auto; /* Allow height to adjust based on content */
        max-height: 600px; /* Or keep a max-height if desired */
    }

    .ics-custom-event-content {
        height: auto; /* Allow content height to adjust */
        min-height: 220px; /* Ensure a minimum height if needed */
    }

    .ics-custom-event-image,
    .ics-custom-event-placeholder {
        height: 200px; /* Smaller image height on mobile */
    }

    /* Reposition arrows for mobile image height */
    .ics-custom-slider-container .ics-custom-nav-button {
        top: 100px; /* Half of new 200px image height */
    }

    .ics-custom-nav-prev {
        left: 5px;
    }

    .ics-custom-nav-next {
        right: 5px;
    }
    
    /* Stack the event card buttons on mobile */
    .ics-custom-event-buttons {
        flex-direction: column;
    }

    /* === NEW: Allow slider height to adapt to content on mobile === */
    .ics-custom-slider-container,
    .ics-custom-slider,
    .ics-custom-slider-wrapper,
    .ics-custom-slide {
        height: auto;
        min-height: initial; /* Reset the minimum height */
    }

    /* === NEW: Add padding to the bottom for the pagination dots === */
    .ics-custom-slider-container {
        padding-bottom: 40px; 
    }
}

/* --- Add Icons to Event Details --- */

/* Common styles for all icons */
.ics-custom-event-time::before,
.ics-custom-event-location::before,
.ics-custom-event-organizer::before,
.ics-custom-event-description::before {
    font-family: "Font Awesome 5 Free"; /* Use the Font Awesome library */
    font-weight: 900; /* Use solid style icons */
    display: inline-block;
    margin-right: 8px; /* Space between icon and text */
    color: #4A90E2; /* Use the same blue as other elements */
    width: 15px; /* Align text vertically */
    text-align: center;
}

/* Specific icon for each detail line */
.ics-custom-event-time::before {
    content: '\f017'; /* Clock icon */
}

.ics-custom-event-location::before {
    content: '\f3c5'; /* Map marker icon */
}

.ics-custom-event-organizer::before {
    content: '\f007'; /* User icon */
}