/* Base styles for the widget - widget.css */
@font-face {
    font-family: "Aktiv Grotesk Cd XBold";
    src: url("https://savvy.com.au/comparison/AktivGroteskCdXBold.otf") format("opentype");
}

/* General widget container styles (apply to each unique instance) */
[id^="my-dynamic-widget-"] {
    font-family: 'Aktiv Grotesk Cd XBold', sans-serif;
    border: 1px solid #dcdcdc;
    padding: 20px;
    border-radius: 10px;
    background-color: #ffffff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    /* Calculated max-width to precisely fit 3 items (170px each) + 2 column gaps (16px each)
       + 2 category-grid-page inner paddings (5px each) + 2 slider-container paddings (40px each)
       = (3*170) + (2*16) + (2*5) + (2*40) = 510 + 32 + 10 + 80 = 632px
    */
    max-width: 632px;
    margin: 20px auto;
    text-align: left;
    position: relative; /* Needed for absolute positioning of slider controls */
}

/* Base header font size */
[id^="my-dynamic-widget-"] h3 {
    color: #333333;
    margin: 0;
    font-size: 1.6em; /* Desktop font size */
    font-weight: 500;
}

/* ------------------------------------- */
/* Slider/Carousel Specific Styles */
/* ------------------------------------- */

[id^="my-dynamic-widget-"] .slider-container {
    position: relative;
    width: 100%; /* Take full width of parent widget */
    overflow: hidden; /* Hide items that are off-screen */
    padding: 0 20px; /* Space for arrows. This reduces inner width by 80px. */
    box-sizing: border-box; /* Include padding in width calculation */
    min-height: 220px; /* Ensure enough height for 2 rows of items (90px height * 2 + row-gap + vertical padding) */
}

.my-widget-container [id^="my-dynamic-widget-"] .widget-header-with-arrows {
    display: flex; /* Enables Flexbox */
    justify-content: space-between; /* Puts space between title and arrows */
    align-items: center; /* Vertically centers them */
    margin-bottom: 15px; /* Adds some space below the header */
    margin-left: 35px;
    padding-right: 35px; /* Add right padding to prevent arrows from touching the edge */
}

.my-widget-container [id^="my-dynamic-widget-"] .slider-arrows-group {
    display: flex; /* Enables Flexbox for the arrows themselves */
    gap: 18px; /* Adds space between the prev and next arrows */
    /* Removed margin-right as it's now handled by parent padding */
}

.my-widget-container [id^="my-dynamic-widget-"] .hide-arrows.slider-arrows-group {
    display: none;
}


[id^="my-dynamic-widget-"] .category-grid-track {
    display: flex;
    flex-wrap: nowrap; /* Ensures pages themselves don't wrap */
    transition: transform 0.3s ease-in-out;
    will-change: transform;
    height: auto; /* Allow track to determine its height based on content */
}

[id^="my-dynamic-widget-"] .category-grid-page {
    display: flex;
    flex-wrap: wrap; /* Allow items to wrap within a single page */
    justify-content: center; /* Align items to the start for consistent wrapping */
    align-content: baseline;
    flex-shrink: 0; /* Important: Pages themselves should not shrink */
    /* Ensure this width is precisely what's available for items + gaps */
    width: calc(100% + 18px); /* 100% of slider-container's inner width, minus its own 5px padding left/right */
    column-gap: 1rem; /* 16px gap between columns */
    row-gap: 0.5rem; /* 8px gap between rows */
    box-sizing: border-box;
    padding: 5px; /* Small internal padding for pages */
    margin-left: -5px;
}

[id^="my-dynamic-widget-"] .slider-arrow {
    background-color: #018475;
    color: white;
    border: none;
    padding: 0px 7px;
    cursor: pointer;
    border-radius: 50%;
    z-index: 1000000;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    opacity: .7;
    transition: background-color 0.2s ease, transform 0.2s ease opacity 0.4 ease;
    position: relative; /* Ensure they are part of the normal document flow */
}

[id^="my-dynamic-widget-"] .slider-arrow:hover {
    background-color: #018475;
    opacity: 1;
}

[id^="my-dynamic-widget-"] .slider-arrow:disabled,
[id^="my-dynamic-widget-"].dark-theme .slider-arrow:disabled,
[id^="my-dynamic-widget-"] .slider-arrow:disabled:hover,
[id^="my-dynamic-widget-"].dark-theme .slider-arrow:disabled:hover {
    background-color: #cccccc !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
    opacity: .7 !important;
}

/* ------------------------------------- */
/* Category Item Styles (Desktop: 3 columns 2 rows) */
/* ------------------------------------- */

[id^="my-dynamic-widget-"] .category-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 1rem 0; /* 16px top/bottom padding */
    border-radius: 10px !important;
    border: 1px solid #1D1D1F !important;
    background: #F5F5F7 !important;
    color: #1D1D1F !important;
    cursor: pointer;
    transition: background 0.2s, box-shadow 0.2s, color 0.2s, transform 0.2s;
    font-weight: 500;
    font-family: 'Aktiv Grotesk Cd XBold', sans-serif;
    font-size: 16px;
    letter-spacing: .5px;
    font-style: normal;
    line-height: 100%;
    text-transform: capitalize;
    text-decoration: none !important;

    height: 90px; /* Fixed height for items */
    box-sizing: border-box; /* Ensure padding/border is included in width/height */

    /* Desktop Calculation for 3 columns: */
    flex-basis: 170px;
    flex-grow: 0;
    flex-shrink: 0;
    max-width: 170px;
}

/* Default hover state for category items (can be overridden by JS) */
[id^="my-dynamic-widget-"] .category-item:hover {
    background: #E9F9F5 !important;
    transform: translateY(-5px);
    box-shadow: 6px 6px 0px 0px #018475;
    color: #018475 !important;
}

/* Styles for the icon within the item */
[id^="my-dynamic-widget-"] .category-item .icon {
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
}

[id^="my-dynamic-widget-"] .category-item .icon svg {
    height: 24px;
    width: 24px;
}

/* Utility classes for hiding elements */
[id^="my-dynamic-widget-"] .hidden {
    display: none !important;
}

/* Example of a 'dark' theme for customization */
[id^="my-dynamic-widget-"].dark-theme {
    background-color: #333333;
    border-color: #555555;
    color: #f0f0f0;
}

[id^="my-dynamic-widget-"].dark-theme h3 {
    color: #ffffff;
}

[id^="my-dynamic-widget-"].dark-theme .category-item {
    border: 1px solid #888888 !important;
    background: #555555 !important;
    color: #f0f0f0 !important;
}

[id^="my-dynamic-widget-"].dark-theme .category-item:hover {
    background: #707070 !important;
    box-shadow: 6px 6px 0px 0px #212121;
    color: #ffffff !important;
}

[id^="my-dynamic-widget-"].dark-theme .slider-arrow {
    background-color: rgba(76, 175, 80, 0.7);
}

[id^="my-dynamic-widget-"].dark-theme .slider-arrow:hover {
    background-color: rgba(56, 142, 60, 0.9);
}

[id^="my-dynamic-widget-"] .category-item:hover svg path {
    stroke: #018475;
}


/* --- Mobile-specific styles --- */
/* Media query for screens up to 768px wide (e.g., tablets and phones) */
@media (max-width: 768px) {
    [id^="my-dynamic-widget-"] {
        padding: 15px; /* Slightly less padding on mobile */
        max-width: 360px; /* Adjust max-width for mobile layout (2 items per row) */
        margin-left: auto; /* Center on mobile */
        margin-right: auto; /* Center on mobile */
    }

    .my-widget-container [id^="my-dynamic-widget-"] .widget-header-with-arrows {
        flex-direction: column; /* Stack header and arrows vertically */
        align-items: flex-start; /* Align title to the left */
        margin-left: 0; /* Reset margin from desktop */
        padding-right: 0; /* Reset padding from desktop */
        margin-bottom: 10px; /* Reduce space below header */
    }

    [id^="my-dynamic-widget-"] h3 {
        font-size: 1.2em; /* Smaller font size for header on mobile */
        margin-bottom: 10px; /* Add space below the title before arrows */
        width: 100%; /* Ensure title takes full width */
        text-align: center; /* Keep title aligned left */
    }

    .my-widget-container [id^="my-dynamic-widget-"] .slider-arrows-group {
        width: 100%; /* Make arrows group take full width */
        justify-content: center; /* Align arrows to the left */
        margin-right: 0; /* Reset margin from desktop */
        gap: 15px; /* Adjust gap between arrows for mobile */
    }

    [id^="my-dynamic-widget-"] .slider-container {
        padding: 0 10px; /* Adjust padding for mobile */
        min-height: auto; /* Let content define height more naturally */
    }

    [id^="my-dynamic-widget-"] .category-grid-page {
        /* Mobile Calculation for 2 columns (4 items total in 2 rows): */
        column-gap: 0.8rem; /* Slightly smaller gap for mobile */
        row-gap: 0.4rem; /* Slightly smaller row gap for mobile */
        justify-content: center; /* Center items within the page */
        margin-left: 0px;
        width: 100%; /* Take full width of slider-container */
    }

    [id^="my-dynamic-widget-"] .category-item {
        /* New calculation for 2 columns on mobile */
        /* Each item should be (100% of page width - gap) / 2 */
        /* Assuming slider-container padding is 10px each side:
           Available width for items inside .category-grid-page is roughly:
           (max-width - (2 * widget padding) - (2 * slider-container padding))
           = 360px - (2 * 15px) - (2 * 10px) = 360 - 30 - 20 = 310px

           Then, for 2 columns with a 0.8rem (12.8px) gap:
           (310px - 12.8px) / 2 = 297.2px / 2 = 148.6px
           So, set flex-basis and max-width to around 148px-150px.
        */
        flex-basis: calc(50% - 0.4rem); /* 50% minus half the column-gap */
        max-width: calc(50% - 0.4rem); /* Ensure it truly takes 2 columns */
        padding: 0.8rem 0; /* Adjust padding for mobile items */
        height: 80px; /* Slightly smaller height for mobile items */
        font-size: 14px; /* Smaller font for item text */
    }
}