/**
 * pop-select.css
 * Styling for the pop-select custom select box
 */

/* Popup container - position is always absolute, set by JavaScript */
.pop-select-popup {
    position: absolute; /* Default to absolute, can be overridden by JS */
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    max-height: 90%;
    overflow-y: auto;
}

/* Overlay behind the popup - position is always absolute, set by JavaScript */
.pop-select-overlay {
    position: absolute; /* Default to absolute, can be overridden by JS */
    background: #7a7a7a00;
    backdrop-filter: blur(5px);
    /* backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px); /* Safari support */
} */

/* Overlay is now always absolute positioned, so this is just for additional styling */
div:not(body) > .pop-select-overlay {
    height: 100%;
    width: 100%;
}

/* Styles for parent container */
[id].demo-parent {
    position: relative !important;
    min-height: 100px;
    overflow: visible;
}

/* Custom styling for popup inside parent */
[id].demo-parent .pop-select-popup {
    z-index: 10;
}

[id].demo-parent .pop-select-overlay {
    z-index: 9;
}

/* Content container */
.pop-select-content {
    display: flex;
}

/* Column layout for options */
.pop-select-column {
    flex-direction: column;
    width: 100%;
}

/* Row layout for options */
.pop-select-row {
    flex-direction: row;
    flex-wrap: wrap;
}

/* Individual option */
.pop-select-option {
    padding: 20px 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
}

/* For row layout */
.pop-select-row .pop-select-option {
    border: 1px solid #eee;
    /* border-radius: 4px; */
    width: 50%;
    flex-grow: 1;
    padding: 10px 5px;
}

/* For column layout */
.pop-select-column .pop-select-option {
    border-bottom: 1px solid #ccc;
}

.pop-select-column .pop-select-option:last-child {
    border-bottom: none;
}

/* Hover state */
.pop-select-option:hover {
    background-color: #f5f5f5;
}

/* Selected state */
.pop-select-option.selected {
    /* Light version of #233682 */
    /* background-color: rgba(35, 54, 130, 0.1);  */
    /* border-color: #233682; */
}

/* Option content */
.pop-select-option-content {
    /* margin-left: 10px; */
    width: 100%;
    height: 100%;
}

/* Styling for the trigger element */
.pop-select {
    cursor: pointer;
}

/* Radio button styling with custom appearance */
.pop-select-option input[type="radio"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin-inline-end: 12px;
    width: 18px;
    height: 18px;
    border: 2px solid #ccc;
    border-radius: 50%;
    outline: none;
    cursor: pointer;
    position: relative;
}

.pop-select-option input[type="radio"]:checked {
    border-color: #233682;
}

.pop-select-option input[type="radio"]:checked:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    background-color: #233682;
    border-radius: 50%;
}

/* Hover and focus states */
.pop-select-option input[type="radio"]:hover {
    border-color: #233682;
    box-shadow: 0 0 2px #2336824d;
}

.pop-select-option input[type="radio"]:focus {
    border-color: #233682;
    box-shadow: 0 0 3px #2336824d;
}