/* SELECTOR LAYOUT (side by side + spacing) */
.sscs-selector .sscs-row {
    display: flex;
    flex-wrap: wrap;
    gap: 24px; /* spacing between the two selects */
    align-items: flex-end;
}

.sscs-selector .sscs-col {
    flex: 1 1 240px;
    min-width: 240px;
}

.sscs-selector .sscs-label {
    display: block;
    margin-bottom: 6px;
}

/* IMPORTANT: do NOT heavily style selects.
 *   Only ensure they take full column width so theme/WPBakery styling still applies. */
.sscs-selector .sscs-select {
    width: 100%;
    max-width: 100%;
}


/* PANEL LAYOUT (background image + frosted overlay positioning) */
.sscs-panel {
    position: relative;
    width: 100%;
    min-height: var(--sscs-panel-min-height, 420px);
    overflow: hidden;
}

.sscs-panel__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Overlay: rounded rectangle, centered horizontally, slight top bias */
.sscs-panel__overlay {
    position: absolute;
    left: 50%;
    top: 45%;              /* slight top bias */
    transform: translate(-50%, -50%);
    width: 80%;
    max-width: 980px;
    min-height: 55%;
    border-radius: 18px;

    /* frosted / semi-transparent white; minimal & broadly compatible */
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    padding: 28px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

/* Text block approx 55–60% overlay width */
.sscs-panel__text {
    width: 60%;
}

/* Title: largest element, top-left */
.sscs-panel__title {
    margin: 0 0 12px 0;
}

/* Description: consistent spacing, left aligned (inherits theme typography) */
.sscs-panel__desc {
    margin: 0;
    line-height: inherit;
}

/* Button bottom-right, pill */
.sscs-panel__btn {
    margin-top: auto;
    align-self: flex-end;

    display: inline-flex;
    align-items: center;
    gap: 10px;

    padding: 10px 18px;
    border-radius: 999px;
    text-decoration: none;

    /* No forced colors; inherits theme */
}

/* Arrow icon aligned right of text */
.sscs-panel__btnicon {
    display: inline-block;
    line-height: 1;
}


/* 1) Dropdown styling (background/text + rounded borders) */
.sscs-selector .sscs-select--region {
    background: #ffffff;
    color: #000000;
    border-radius: 999px; /* rounded */
}

.sscs-selector .sscs-select--service {
    background: #a61443;
    color: #ffffff;
    font-weight: 700;     /* bold */
    border-radius: 999px; /* rounded */
}

/* Optional: keep option text readable in dropdown lists */
.sscs-selector .sscs-select--service option {
    background: #ffffff;
    color: #000000;
    font-weight: 400;
}
.sscs-selector .sscs-select--region option {
    background: #ffffff;
    color: #000000;
}

/* 2) Hide SS Content Panel until a Service is selected
 *  - This relies on both blocks being in the same DOM flow so :has() can match.
 *  - Works in modern browsers (Chrome/Edge/Safari/Firefox 121+).
 */
body:not(:has(.sscs-selector .sscs-select--service option:checked:not([value=""])))
.sscs-panel {
    display: none;
}

/* 3) Panel button styling (pill, #a61443 bg, white bold text) */
.sscs-panel__btn {
    border-radius: 999px;
    background: #a61443;
    color: #ffffff;
    font-weight: 700;
}

/* Ensure inner text/icon inherit white */
.sscs-panel__btn .sscs-panel__btntext,
.sscs-panel__btn .sscs-panel__btnicon {
    color: inherit;
}
.sscs-selector .sscs-select--service,
.sscs-selector .sscs-select--region {
    padding-left: calc(1em + 5px);
    padding-right: calc(1em + 5px);
    border-radius: 999px;
    box-sizing: border-box;
}

/*
 * 2) Service dropdown: burgundy background, white bold text
 */
.sscs-selector .sscs-select--service {
    background-color: #a61443;
    color: #ffffff;
    font-weight: 700;
}

/*
 * 3) Region dropdown: white background, black text
 */
.sscs-selector .sscs-select--region {
    background-color: #ffffff;
    color: #000000;
    font-weight: 400;
}

/*
 * 4) Dropdown LIST (opened options) must remain neutral and readable
 *   and NOT inherit the closed-select background colors
 */
.sscs-selector .sscs-select--service option,
.sscs-selector .sscs-select--region option {
    background-color: #ffffff;
    color: #000000;
    font-weight: 400;
}