/* RM Solution Dropdown Styles - Updated */

/* Form Wrapper & Alignment */
.rm-sd-form-wrapper {
    display: block;
    width: 100%; /* Takes full width of its container */
    margin-left: auto;
    margin-right: auto;
    /* max-width: 100%; /* As requested, but usually a max-width is good for very wide screens. Consider if 75% from .field-group is enough */
}

#solutions-filter-form {
    display: flex;
    flex-direction: column;
    align-items: center; /* Horizontally center content of the form */
    justify-content: center;
    width: 100%; /* Form takes full width of its wrapper */
}

/* Field Group Styling */
.field-group {
    margin-top: 15px;
    margin-bottom: 15px;
    display: flex;
    flex-direction: row; /* Default to row for desktop */
    width: 75%; /* As per provided CSS */
    justify-content: center; /* Center items within the field group */
    align-items: center; /* Vertically align items in the row */
    text-align: left; /* Label text alignment */
}

.field-group label {
    font-family: "lato", sans-serif;
    text-align: right; /* Align label text to the right */
    font-size: 35px;
    line-height: 40px;
    width: 50%; /* As per provided CSS */
    color: #333; /* Fallback, can be overridden */
    margin-right: 15px; /* Space between label and select */
}

.field-group select {
    background-color: #E8DFF1 !important;
    border-radius: 10px;
    border: none;
    font-size: 20px;
    color: #532B87;
    font-family: 'lato', sans-serif !important;
    font-weight: bold;
    padding: 10px;
    flex-grow: 1;
    min-width: 200px;
    width: 100%; /* Ensure it takes the width of its container in flex row */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */

    /* For the displayed selected value if it's too long */
    text-overflow: ellipsis;
    white-space: nowrap; /* Keep selected value on one line */
    overflow: hidden; /* Hide overflow of selected value */
}

/* Attempt to style options - very limited support for wrapping */
.field-group select option {
    white-space: normal; /* Attempt to allow wrapping - may not work */
    overflow-wrap: break-word; /* Attempt to break long words - may not work */
    /* Browsers heavily control option rendering */
    padding: 5px; /* Some padding for options */
}

/* Buttons Styling */
.rm-sd-button { /* General button class */
    font-family: 'lato', sans-serif !important;
    font-size: 25px;
    border-radius: 30px !important;
    border: 2px solid #532B87 !important; /* Border color */
    cursor: pointer !important;
    background-color: #532B87 !important;
    margin-top: 50px; /* Applied to submit button via its field group or specific class */
    padding: 9px 35px !important;
    font-weight: 600 !important;
    color: #fff !important;
    display: inline-flex !important; /* For centering text inside */
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
}

.rm-sd-button:hover {
    border-color: #7CC023 !important;
    background-color: transparent !important;
    color: #542D87 !important;
}

.solutions-filter-form .field-group .rm-sd-button.rm-sd-button-submit { /* Submit button specific */
    margin-top: 20px; /* Adjusted from 50px for better spacing within form */
    /* Other styles inherited from .rm-sd-button */
}


/* Selected Filters Text */
.selected-solutions-combination {
    font-size: 24px;
    color: #7BC528;
    text-align: center;
    font-weight: bold;
    margin-top: 20px;
    margin-bottom: 20px;
}

/* Solutions Grid & Items */
.solutions-post-grid {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    gap: 20px;
    margin-bottom: 50px;
    justify-content: center; /* Center items in the grid */
    align-items: stretch; /* Make items of same height if they differ */
}

.solutions-post-item {
    width: 30%; /* Desktop default */
    box-shadow: 0 0px 10px 0 rgba(0, 0, 0, 0.05);
    background-color: #fff;
    border-radius: 10px;
    padding: 0px; /* Padding moved to content-area */
    transition: box-shadow .3s ease, top .3s ease;
    top: 0;
    display: flex;
    flex-direction: column; /* Ensure content stacks vertically */
    height: 100%; /* Part of align-items: stretch on parent */
}

.solutions-thumbnail img {
    width: 100%;
    height: 200px; /* Fixed height */
    display: block;
    border-radius: 10px 10px 0px 0px; /* Rounded top corners */
    object-fit: cover;
}

.solutions-post-content-area {
    padding: 30px;
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Takes available space */
}

.solutions-post-content-area h3 {
    margin-top: 0;
    margin-bottom: 10px; /* Space below title */
}

.solutions-post-content-area h3 a {
    color: #542D87;
    font-family: 'lato', sans-serif;
    text-decoration: none;
}
.solutions-post-content-area h3 a:visited {
    color: #542D87;
}
.solutions-post-content-area h3 a:hover {
    text-decoration: underline;
}

.solutions-excerpt {
    margin-top: 8px;
    margin-bottom: 20px; /* Increased space before button */
    font-family: 'Lato', sans-serif;
    font-size: 17px;
    line-height: 1.4; /* Added for readability */
    color: #3d3d3d; /* Fallback color */
    flex-grow: 1; /* Pushes button to bottom */
}

/* Learn More Button (inside post items) */
.solutions-post-item .rm-sd-button.rm-sd-button-link {
    font-family: 'Lato', sans-serif;
    font-weight: 600;
    font-size: 15px !important; /* Adjusted for consistency */
    color: #fff; /* Text color for learn more */
    background-color: #542D87; /* Button background */
    border: 2px solid #542D87;
    border-radius: 30px;
    padding: 10px 25px; /* Adjusted padding */
    margin-top: auto; /* Pushes to bottom of content area */
    align-self: flex-start; /* Align to start of its line */
}

.solutions-post-item .rm-sd-button.rm-sd-button-link:hover {
    background-color: transparent !important;
    color: #542D87;
    border-color: #542D87;
}

.solutions-post-item .rm-sd-button.rm-sd-button-disabled,
.solutions-post-item .rm-sd-button.rm-sd-button-disabled:hover {
    background-color: #ccc !important;
    color: #777 !important;
    border-color: #ccc !important;
    cursor: not-allowed;
}


/* Reset Button Area */
.reset-form-button-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 20px; /* Space above reset button */
}

/* Debug Info (if shown) */
.rm-sd-debug-info {
    margin-top: 20px;
    padding: 15px;
    border: 1px solid #ccc;
    background-color: #f9f9f9;
    font-family: monospace;
    font-size: 12px;
    white-space: pre-wrap;
    word-wrap: break-word;
    text-align: left;
}

/* Responsive Adjustments */

/* Tablet (max-width: 1024px) */
@media screen and (max-width: 1024px) {
    .solutions-post-item {
        width: 47% !important;
    }

    .field-group {
        flex-direction: row; /* Keep row for tablet */
        align-items: right; /* Center items when in column */
        width: 90%; /* Wider on tablet */
    }

    .field-group label {
        font-size: 32px; /* Slightly smaller */
        margin-bottom: 10px;
        width: 380px; /* Fixed width for label */
        width: auto; /* Allow label to size naturally */
        margin-right: 0; /* Remove right margin when in column */
        text-align: center;
    }

    .field-group select {
        font-size: 18px;
        width: 100%; /* Full width of its container (.field-group) */
        margin-left: 0;
    }

    .solutions-post-content-area {
        padding: 20px;
    }
    .rm-sd-button { /* Button font size for tablet */
        font-size: 22px;
        padding: 8px 30px;
    }
}

/* Mobile (max-width: 768px) */
@media screen and (max-width: 768px) {
    .solutions-post-item {
        width: 100% !important;
    }

    .field-group {
        /* flex-direction: column; already set for tablet */
        /* align-items: center; already set for tablet */
        width: 95%; /* Even wider on mobile */
        display: flex;
        flex-direction: column; /* Stack items vertically */
    }

    .field-group label {
        font-size: 24px;
        margin-bottom: 0px;
        margin-right: 0px !important; /* No right margin on mobile */
        width: auto; /* Allow label to size naturally */
        text-align: center; /* Center text on mobile */
        margin-left: 0px !important; /* No left margin on mobile */
    }

    .field-group select {
        font-size: 16px;
        width: 100%; /* Explicitly set for mobile, though inherited from tablet */
    }

    .solutions-post-grid {
        gap: 15px;
    }

    .solutions-thumbnail img {
        height: 180px;
    }

    .solutions-post-content-area {
        padding: 15px;
    }

    .selected-solutions-combination {
        font-size: 20px;
    }

    .rm-sd-button { /* Button font size for mobile */
        font-size: 20px !important; /* from provided CSS */
        line-height: 25px; /* from provided CSS */
        padding: 5px 30px !important; /* from provided CSS */
    }
     .solutions-post-item .rm-sd-button.rm-sd-button-link { /* Specific for learn more on mobile */
        font-size: 18px !important;
        padding: 8px 20px !important;
    }
}

/* Carousel Styles */
.rm-sd-carousel {
    position: relative;
    width: 100%;
    /* overflow: hidden; /* Important for carousel effect - keep this */
    margin-top: 20px; /* Space above carousel */
    /* Padding will be adjusted to allow buttons to be "outside" visually */
    padding: 0; /* Remove side padding, buttons will be positioned absolutely */
    box-sizing: border-box;
}
/* Add a wrapper for the track to handle overflow and padding for items */
.rm-sd-carousel-wrapper {
    width: 90%; /* Adjust to make space for external buttons */
    margin: 0 auto; /* Center the track wrapper */
    overflow: hidden; /* This will hide the parts of the track that are not visible */
    position: relative;
    padding: 15px 15px; /* Add padding for shadows to show within the overflow hidden */
    box-sizing: border-box;
}

.rm-sd-carousel-track {
    display: flex;
    transition: transform 0.5s ease-in-out;
    gap: 20px; /* Gap between slides */
}

.rm-sd-carousel .solutions-post-item {
    /* Desktop: 3 items */
    flex: 0 0 calc((100% / 3) - (40px / 3));
    flex-basis: calc(33.333% - 14px); /* Adjust 14px (approx 20px * 2/3) as needed for perfect fit with gap */
    min-width: calc(33.333% - 14px); /* Prevent shrinking too much */
    width: auto !important; /* Override previous width: 30% */
    margin-bottom: 0; /* Remove margin if any from original .solutions-post-item */
}

/* Tablet: 2 items */
@media screen and (max-width: 1024px) {
    .rm-sd-carousel .solutions-post-item {
        flex-basis: calc(50% - 10px); /* 2 items, 20px gap (1 gap for 2 items) = 20px total gap space / 2 items = 10px */
        min-width: calc(50% - 10px);
    }
}

/* Mobile: 1 item */
@media screen and (max-width: 768px) {
    .rm-sd-carousel .solutions-post-item {
        flex-basis: 100%; /* 1 item, no gap calculation needed for basis */
        min-width: 100%;
    }
    .rm-sd-carousel {
        padding: 0 10px; /* Reduce padding on mobile if buttons are inside */
    }
}


.rm-sd-carousel-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: #542D87; /* Updated to a theme color, adjust as needed */
    color: white;
    border: 2px solid #542D87;
    width: 48px; /* Increased size */
    height: 48px; /* Increased size */
    padding: 0;
    cursor: pointer;
    z-index: 10; /* Ensure buttons are on top */
    border-radius: 50%; /* Makes it circular */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease;
}

.rm-sd-carousel-button svg {
    width: 28px; /* Increased SVG size */
    height: 28px; /* Increased SVG size */
    fill: white !important; /* Ensure fill is applied, !important to override potential conflicts */
}

.rm-sd-carousel-button:hover {
    background-color: transparent; /* Darker shade on hover */
    color: #542D87;
    border-color: #542D87;
}

.rm-sd-carousel-button:hover svg {
    fill: #542D87 !important;
}

.rm-sd-carousel-button:disabled {
    background-color: rgba(0, 0, 0, 0.2);
    cursor: not-allowed;
    background-color: #cccccc; /* Disabled state color */
}
.rm-sd-carousel-button:disabled svg {
    fill: #888888;
}


.rm-sd-carousel-prev {
    left: -25px; /* Adjusted for potentially larger button and more space */
}

.rm-sd-carousel-next {
    right: -25px; /* Adjusted for potentially larger button and more space */
}

/* Responsive adjustments for arrow positions if needed */
@media screen and (max-width: 768px) {
    .rm-sd-carousel-prev {
        left: -10px; /* Closer on mobile */
    }
    .rm-sd-carousel-next {
        right: -10px; /* Closer on mobile */
    }
    .rm-sd-carousel-button {
        width: 36px; /* Adjusted for mobile */
        height: 36px; /* Adjusted for mobile */
    }
    .rm-sd-carousel-button svg {
        width: 20px; /* Adjusted for mobile */
        height: 20px; /* Adjusted for mobile */
    }
}

/* Ensure cards are on top if something is overlapping */
.rm-sd-results-wrapper,
.rm-sd-carousel,
.solutions-post-item {
    z-index: 1; /* Default z-index, can be increased if needed */
}
.solutions-post-grid {
}

.solutions-thumbnail img {
    height: 217px !important;
    border-radius: 10px 10px 0px 0px !important;
}