/* Native selects, styled consistently with the approved C components. */
.pk-site select {
    color-scheme: light;
    color: #292B2C;
    background-color: #fff;
    border: 1px solid #A8B8AD;
    border-radius: 6px;
    min-height: 50px;
    font: 400 16px/1.5 var(--pk-font);
    box-shadow: none;
}

.pk-site select:not(:disabled):hover {
    border-color: #147D42;
}

.pk-site select:focus {
    border-color: #147D42;
    box-shadow: none;
}

.pk-site select:focus-visible {
    outline: 2px solid #147D42;
    outline-offset: 2px;
}

.pk-site select:disabled {
    color: #626D66;
    background-color: #F1F4F2;
    border-color: #CFD8D2;
    cursor: not-allowed;
    opacity: 1;
}

.pk-site select[aria-invalid="true"],
.pk-site select.wpcf7-not-valid {
    border-color: #B42318;
}

/* Unsupported browsers keep their native picker and the existing SVG arrow. */
@supports (appearance: base-select) and selector(select::picker(select)) {
    .pk-site select:not([multiple]):not([size]),
    .pk-site select[size="1"]:not([multiple]),
    .pk-site select:not([multiple]):not([size])::picker(select),
    .pk-site select[size="1"]:not([multiple])::picker(select) {
        appearance: base-select;
    }

    .pk-site select:not([multiple]):not([size]),
    .pk-site select[size="1"]:not([multiple]) {
        display: flex;
        background-image: none;
        padding: 12px 14px;
        align-items: center;
        gap: 12px;
    }

    .pk-site select::picker-icon {
        content: '';
        width: 9px;
        height: 9px;
        flex: 0 0 9px;
        margin-left: auto;
        margin-right: 3px;
        border-right: 2px solid #147D42;
        border-bottom: 2px solid #147D42;
        transform: translateY(-2px) rotate(45deg);
    }

    .pk-site select:open::picker-icon {
        transform: translateY(2px) rotate(225deg);
    }

    .pk-site select::picker(select) {
        color-scheme: light;
        color: #292B2C;
        background: #fff;
        border: 1px solid #A8B8AD;
        border-radius: 6px;
        padding: 4px;
        margin-block: 6px;
        box-shadow: 0 8px 24px #172B1E1F;
        max-block-size: min(360px, 60dvh);
        inline-size: anchor-size(width);
        max-inline-size: calc(100vw - 24px);
        inset-block-start: anchor(bottom);
        inset-block-end: auto;
        inset-inline-start: anchor(left);
        inset-inline-end: auto;
        position-try-fallbacks: flip-block;
        position-try-order: normal;
        overflow-y: auto;
        overscroll-behavior: contain;
        font: 400 16px/1.5 var(--pk-font);
    }

    .pk-site select option {
        display: flex;
        align-items: center;
        gap: 10px;
        min-height: 44px;
        padding: 9px 12px;
        border: 0;
        border-radius: 3px;
        color: #292B2C;
        background: #fff;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .pk-site select option:checked {
        color: #106434;
        background: #EAF6EE;
        font-weight: 600;
    }

    .pk-site select option:not(:disabled):is(:hover, :focus) {
        color: #fff;
        background: #147D42;
        outline: none;
    }

    .pk-site select option::checkmark {
        color: currentColor;
        order: 1;
        margin-left: auto;
        flex: 0 0 auto;
    }

    .pk-site select option:disabled {
        color: #626D66;
        background: #F1F4F2;
        cursor: not-allowed;
    }
}

@media (forced-colors: active) {
    .pk-site select:not([multiple]):not([size]),
    .pk-site select[size="1"]:not([multiple]),
    .pk-site select::picker(select) {
        appearance: auto;
        background-image: none;
    }

    .pk-site select:focus-visible {
        outline: 2px solid Highlight;
    }
}