/**
 * WWPosts Design System — Phase 4 form controls
 * ==============================================
 * Date/time, location, pills, switches, Places dropdown, connected wells.
 * Additive visual polish — layout/height stay in cp-forms.css.
 *
 * Load after cp-form-chrome.css.
 */

/* -------------------------------------------------------------------------- */
/* Shared control surface — soft-tray · ns-field--soft (standalone inputs)     */
/* Connected multi-segment groups: outer radius on parent only — see below.     */
/* -------------------------------------------------------------------------- */
.cp-user-group--market .form-control,
.cp-user-group--danger .form-control,
.cp-user-group--primary .form-control,
.cp-section-collapsible .form-control,
.cp-form-card .form-control,
.cp-create-form-card .form-control,
.cp-form-page .form-control,
.cp-form-max-1080 .form-control,
#register-form .form-control,
#edit-profile-form .form-control {
    min-height: var(--cp-control-height, 42px);
    border-radius: var(--cp-radius-md, 0.75rem) !important;
    border: 1px solid var(--cp-field-border-soft) !important;
    background-color: var(--cp-void) !important;
    background-image: none !important;
    color: var(--cp-ink) !important;
    box-shadow: var(--cp-elev-soft-tray) !important;
    transition:
        border-color var(--cp-duration-fast) ease,
        box-shadow var(--cp-duration-fast) ease,
        background-color var(--cp-duration-fast) ease !important;
}

.cp-user-group--market textarea.form-control,
.cp-section-collapsible textarea.form-control,
.cp-form-max-1080 textarea.form-control,
#register-form textarea.form-control,
#edit-profile-form textarea.form-control {
    min-height: calc(var(--cp-control-height, 42px) * 2.4);
    height: auto;
}

.cp-user-group--market .form-control:focus,
.cp-user-group--danger .form-control:focus,
.cp-user-group--primary .form-control:focus,
.cp-section-collapsible .form-control:focus,
.cp-form-card .form-control:focus,
.cp-create-form-card .form-control:focus,
.cp-form-page .form-control:focus,
.cp-form-max-1080 .form-control:focus,
#register-form .form-control:focus,
#edit-profile-form .form-control:focus {
    border-color: var(--cp-success, #3ddc84) !important;
    background-color: var(--cp-void) !important;
    color: var(--cp-ink) !important;
    box-shadow: var(--cp-elev-soft-tray-focus) !important;
    outline: none !important;
}

.cp-user-group--market .form-control::placeholder,
.cp-section-collapsible .form-control::placeholder,
.cp-form-max-1080 .form-control::placeholder,
#register-form .form-control::placeholder,
#edit-profile-form .form-control::placeholder {
    color: var(--cp-ink-faint) !important;
    opacity: 1;
}

.cp-user-group--market .form-control[readonly],
.cp-section-collapsible .form-control[readonly],
.cp-form-max-1080 .form-control[readonly],
#register-form .form-control[readonly],
#edit-profile-form .form-control[readonly] {
    opacity: 0.85;
    color: var(--cp-ink-muted) !important;
    box-shadow: none !important;
}

/* -------------------------------------------------------------------------- */
/* Connected trays — 2+ adjacent segments = ONE control                       */
/* Proper style: rounded corners ONLY on the outermost edges.                 */
/* Parent owns radius + border + shadow; every segment is square (radius 0).  */
/* Examples: label|input, currency|amount, amount|unit, icon|field|btn.        */
/* -------------------------------------------------------------------------- */
.cp-datetime-control,
.cp-currency-control,
.cp-unit-control,
.cp-loc-address-line.input-group,
.cp-loc-coords-line.input-group,
.cp-event-days-control.input-group,
.cp-phone-input .input-group,
.cp-user-group--market .input-group,
.cp-user-group--market .cp-input-group.input-group,
.cp-section-collapsible .input-group,
.cp-section-collapsible .cp-input-group.input-group,
.cp-form-card .input-group,
.cp-form-card .cp-input-group.input-group,
.cp-create-form-card .input-group,
.cp-create-form-card .cp-input-group.input-group,
.cp-form-page .input-group,
.cp-form-page .cp-input-group.input-group,
.cp-form-max-1080 .input-group,
.cp-form-max-1080 .cp-input-group.input-group,
#register-form .input-group,
#register-form .cp-input-group.input-group,
#edit-profile-form .input-group,
#edit-profile-form .cp-input-group.input-group {
    border-radius: var(--cp-radius-md, 0.75rem);
    overflow: hidden;
    border: 1px solid var(--cp-field-border-soft);
    background: var(--cp-void);
    box-shadow: var(--cp-elev-soft-tray);
}

.cp-phone-input .input-group {
    flex-wrap: nowrap;
    align-items: stretch;
}

.cp-social-links .cp-social-link-input-group.input-group {
    /* Must override generic profile/register .input-group overflow clipping for popovers. */
    overflow: visible !important;
}

.cp-phone-input .input-group > .cp-phone-input__dial {
    flex: 0 0 auto;
    min-width: 5.25rem;
    max-width: 6.5rem;
    border-inline-end: 1px solid var(--cp-hairline) !important;
}

.cp-phone-input .input-group > .cp-custom-select.cp-custom-select--phone-dial {
    flex: 0 0 auto;
    width: 5.25rem;
    min-width: 5.25rem;
    max-width: 6.5rem;
    border-inline-end: 1px solid var(--cp-hairline) !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.cp-phone-input .cp-custom-select--phone-dial .cp-custom-select__trigger {
    min-height: var(--cp-control-height, 42px) !important;
    height: var(--cp-control-height, 42px) !important;
    position: relative;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background-color: transparent !important;
    background-image: none !important;
    color: inherit !important;
    padding: 0 2.85rem 0 0.75rem !important;
    font-variant-numeric: tabular-nums;
    --bs-form-select-bg-img: none !important;
    --bs-form-select-bg-icon: none !important;
}

.cp-phone-input .cp-custom-select.cp-custom-select--phone-dial .cp-custom-select__trigger:focus,
.cp-phone-input .cp-custom-select.cp-custom-select--phone-dial .cp-custom-select__trigger:focus-visible,
.cp-phone-input .cp-custom-select.cp-custom-select--phone-dial.is-open .cp-custom-select__trigger {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background-color: transparent !important;
}

.cp-phone-input .cp-custom-select.cp-custom-select--phone-dial .cp-select__chev,
.cp-phone-input .cp-custom-select.cp-custom-select--phone-dial:focus-within .cp-select__chev,
.cp-phone-input .cp-custom-select.cp-custom-select--phone-dial.is-open .cp-select__chev {
    display: inline-flex !important;
}

/* Fallbacks for already-initialized wrappers without the phone-dial marker class. */
.cp-phone-input .cp-custom-select {
    border-inline-end: 1px solid var(--cp-hairline) !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.cp-phone-input .cp-custom-select .cp-select__chev {
    display: inline-flex !important;
}

.cp-phone-input .cp-custom-select .cp-custom-select__trigger {
    background-image: none !important;
    --bs-form-select-bg-img: none !important;
    --bs-form-select-bg-icon: none !important;
    padding-right: 2.85rem !important;
}

.cp-phone-input .cp-custom-select > .cp-select__chev {
    width: 1.5rem;
    height: 1.5rem;
    margin-top: -0.75rem;
    box-shadow: none !important;
}

.cp-phone-input .cp-custom-select:focus-within > .cp-select__chev,
.cp-phone-input .cp-custom-select.is-open > .cp-select__chev,
.cp-phone-input .cp-custom-select:has([aria-expanded="true"]) > .cp-select__chev {
    box-shadow: none !important;
    background: linear-gradient(180deg, rgba(154, 215, 255, 0.28), rgba(61, 124, 255, 0.22)) !important;
    border-color: rgba(154, 215, 255, 0.45) !important;
}

.cp-phone-input .cp-custom-select > .cp-select__chev + .cp-select__chev {
    display: none !important;
}

/* Guard: never show two circular chevron badges in one wrap */
.cp-select > .cp-select__chev ~ .cp-select__chev,
.cp-custom-select > .cp-select__chev ~ .cp-select__chev {
    display: none !important;
}

.cp-phone-input .cp-custom-select--phone-dial .cp-custom-select__trigger::before,
.cp-phone-input .cp-custom-select--phone-dial .cp-custom-select__trigger::after,
.cp-phone-input .cp-custom-select .cp-custom-select__trigger::before,
.cp-phone-input .cp-custom-select .cp-custom-select__trigger::after {
    content: none !important;
}

/*
 * Segment reset — must beat soft-tray form-control radius (!important).
 * Specificity matches `.ctx .form-control` so connected children stay square.
 */
.cp-datetime-control > .form-control,
.cp-datetime-control > .form-select,
.cp-currency-control > .form-control,
.cp-currency-control > .form-select,
.cp-unit-control > .form-control,
.cp-unit-control > .form-select,
.cp-loc-address-line > .form-control,
.cp-loc-address-line > .input-group-text,
.cp-loc-address-line > .btn,
.cp-loc-coords-line > .form-control,
.cp-loc-coords-line > .input-group-text,
.cp-loc-coords-line > .btn,
.cp-event-days-control > .form-control,
.cp-event-days-control > .input-group-text,
.cp-phone-input .input-group > .form-control,
.cp-phone-input .input-group > .input-group-text,
.cp-phone-input .input-group > .form-select,
.cp-phone-input .input-group > .btn,
.cp-user-group--market .input-group > .form-control,
.cp-user-group--market .input-group > .form-select,
.cp-user-group--market .input-group > .input-group-text,
.cp-user-group--market .input-group > .btn,
.cp-user-group--market .cp-input-group > .form-control,
.cp-user-group--market .cp-input-group > .form-select,
.cp-user-group--market .cp-input-group > .input-group-text,
.cp-user-group--market .cp-currency-control > .form-control,
.cp-user-group--market .cp-currency-control > .form-select,
.cp-user-group--market .cp-unit-control > .form-control,
.cp-user-group--market .cp-unit-control > .form-select,
.cp-user-group--market .cp-datetime-control > .form-control,
.cp-user-group--market .cp-datetime-control > .form-select,
.cp-section-collapsible .input-group > .form-control,
.cp-section-collapsible .input-group > .form-select,
.cp-section-collapsible .input-group > .input-group-text,
.cp-section-collapsible .input-group > .btn,
.cp-section-collapsible .cp-input-group > .form-control,
.cp-section-collapsible .cp-input-group > .form-select,
.cp-section-collapsible .cp-input-group > .input-group-text,
.cp-section-collapsible .cp-currency-control > .form-control,
.cp-section-collapsible .cp-currency-control > .form-select,
.cp-section-collapsible .cp-unit-control > .form-control,
.cp-section-collapsible .cp-unit-control > .form-select,
.cp-section-collapsible .cp-datetime-control > .form-control,
.cp-section-collapsible .cp-datetime-control > .form-select,
.cp-form-card .input-group > .form-control,
.cp-form-card .input-group > .form-select,
.cp-form-card .input-group > .input-group-text,
.cp-form-card .input-group > .btn,
.cp-form-card .cp-currency-control > .form-control,
.cp-form-card .cp-currency-control > .form-select,
.cp-form-card .cp-unit-control > .form-control,
.cp-form-card .cp-unit-control > .form-select,
.cp-form-card .cp-datetime-control > .form-control,
.cp-form-card .cp-datetime-control > .form-select,
.cp-create-form-card .input-group > .form-control,
.cp-create-form-card .input-group > .form-select,
.cp-create-form-card .input-group > .input-group-text,
.cp-create-form-card .input-group > .btn,
.cp-create-form-card .cp-currency-control > .form-control,
.cp-create-form-card .cp-currency-control > .form-select,
.cp-create-form-card .cp-unit-control > .form-control,
.cp-create-form-card .cp-unit-control > .form-select,
.cp-create-form-card .cp-datetime-control > .form-control,
.cp-create-form-card .cp-datetime-control > .form-select,
.cp-form-page .input-group > .form-control,
.cp-form-page .input-group > .form-select,
.cp-form-page .input-group > .input-group-text,
.cp-form-page .input-group > .btn,
.cp-form-page .cp-currency-control > .form-control,
.cp-form-page .cp-currency-control > .form-select,
.cp-form-page .cp-unit-control > .form-control,
.cp-form-page .cp-unit-control > .form-select,
.cp-form-page .cp-datetime-control > .form-control,
.cp-form-page .cp-datetime-control > .form-select,
.cp-form-max-1080 .input-group > .form-control,
.cp-form-max-1080 .input-group > .form-select,
.cp-form-max-1080 .input-group > .input-group-text,
.cp-form-max-1080 .input-group > .btn,
.cp-form-max-1080 .cp-currency-control > .form-control,
.cp-form-max-1080 .cp-currency-control > .form-select,
.cp-form-max-1080 .cp-unit-control > .form-control,
.cp-form-max-1080 .cp-unit-control > .form-select,
.cp-form-max-1080 .cp-datetime-control > .form-control,
.cp-form-max-1080 .cp-datetime-control > .form-select,
#register-form .input-group > .form-control,
#register-form .input-group > .form-select,
#register-form .input-group > .input-group-text,
#register-form .input-group > .btn,
#register-form .cp-input-group > .form-control,
#register-form .cp-input-group > .form-select,
#register-form .cp-input-group > .input-group-text,
#register-form .cp-currency-control > .form-control,
#register-form .cp-currency-control > .form-select,
#register-form .cp-unit-control > .form-control,
#register-form .cp-unit-control > .form-select,
#edit-profile-form .input-group > .form-control,
#edit-profile-form .input-group > .form-select,
#edit-profile-form .input-group > .input-group-text,
#edit-profile-form .input-group > .btn,
#edit-profile-form .cp-input-group > .form-control,
#edit-profile-form .cp-input-group > .form-select,
#edit-profile-form .cp-input-group > .input-group-text,
#edit-profile-form .cp-currency-control > .form-control,
#edit-profile-form .cp-currency-control > .form-select,
#edit-profile-form .cp-unit-control > .form-control,
#edit-profile-form .cp-unit-control > .form-select {
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    background-color: transparent !important;
    min-height: var(--cp-control-height, 42px);
    height: var(--cp-control-height, 42px);
}

.cp-datetime-control:focus-within,
.cp-currency-control:focus-within,
.cp-unit-control:focus-within,
.cp-loc-address-line.input-group:focus-within,
.cp-loc-coords-line.input-group:focus-within,
.cp-event-days-control.input-group:focus-within,
.cp-phone-input .input-group:focus-within,
.cp-user-group--market .input-group:focus-within,
.cp-section-collapsible .input-group:focus-within,
.cp-form-card .input-group:focus-within,
.cp-create-form-card .input-group:focus-within,
.cp-form-page .input-group:focus-within,
.cp-form-max-1080 .input-group:focus-within,
#register-form .input-group:focus-within,
#edit-profile-form .input-group:focus-within {
    border-color: var(--cp-success, #3ddc84);
    box-shadow: var(--cp-elev-soft-tray-focus);
}

.cp-loc-address-line > .input-group-text,
.cp-loc-coords-line > .input-group-text,
.cp-event-days-control > .input-group-text,
.cp-user-group--market .input-group > .input-group-text,
.cp-section-collapsible .input-group > .input-group-text,
.cp-form-card .input-group > .input-group-text,
.cp-create-form-card .input-group > .input-group-text,
.cp-form-page .input-group > .input-group-text,
.cp-form-max-1080 .input-group > .input-group-text,
#register-form .input-group-text,
#edit-profile-form .input-group-text {
    background: color-mix(in srgb, var(--cp-sunken) 55%, var(--cp-raised)) !important;
    color: var(--cp-ink-muted) !important;
    border: 0 !important;
}

.cp-loc-coords-line .fa-map-pin {
    color: var(--cp-danger) !important;
}

.cp-loc-address-line .fa-search-location {
    color: var(--cp-accent) !important;
}

.cp-phone-input .input-group > .input-group-text {
    border-inline-end: 1px solid var(--cp-hairline) !important;
}

/* Coordinates meta row — typography only (grid lives in site.css) */
.cp-loc-coords-meta-line .form-control {
    font-size: var(--cp-text-sm);
}

.cp-loc-map-zoom-level {
    width: 3.25rem !important;
    max-width: 3.25rem !important;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.cp-loc-field-lookup-btn {
    /* Height/padding locked via cp-buttons.css compact trigger rules */
    border-radius: var(--cp-radius-sm) !important;
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

/* -------------------------------------------------------------------------- */
/* Calendar / date & time pickers                                               */
/* -------------------------------------------------------------------------- */
.cp-datetime-control > input[type="date"] {
    flex: 1 1 11rem;
    min-width: 10rem;
    font-variant-numeric: tabular-nums;
    color-scheme: dark light;
}

.cp-datetime-control > select {
    flex: 0 1 9rem;
    min-width: 7.5rem;
    font-variant-numeric: tabular-nums;
}

html[data-cp-theme="dark"] .cp-datetime-control > input[type="date"],
html[data-cp-theme="dark"] .cp-form-max-1080 input[type="date"],
html[data-cp-theme="dark"] .cp-user-group--market input[type="date"] {
    color-scheme: dark;
}

html[data-cp-theme="light"] .cp-datetime-control > input[type="date"] {
    color-scheme: light;
}

/* Accent-tinted native calendar glyph (visible when not fully overlay-hidden) */
.cp-form-max-1080 input[type="date"].form-control,
.cp-user-group--market input[type="date"].form-control,
.cp-section-collapsible input[type="date"].form-control,
#register-form input[type="date"].form-control,
#edit-profile-form input[type="date"].form-control {
    padding-inline-end: 0.75rem;
}

.cp-datetime-control > input[type="date"]::-webkit-calendar-picker-indicator,
.cp-form-max-1080 input[type="date"]::-webkit-calendar-picker-indicator,
.cp-user-group--market input[type="date"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 0;
}

/* Soft seam between date and time segments */
.cp-datetime-control > select {
    border-left: 1px solid var(--cp-hairline) !important;
    margin-left: 0;
}

.cp-datetime-control--all-day > input[type="date"] {
    border-radius: 0 !important;
}

/* -------------------------------------------------------------------------- */
/* Soft-tray field — production twin of ns-field--soft                          */
/* -------------------------------------------------------------------------- */
.cp-field--soft,
input.cp-field--soft,
textarea.cp-field--soft,
select.cp-field--soft {
    color: var(--cp-ink);
    background-color: var(--cp-void);
    background-image: none;
    border: 1px solid var(--cp-field-border-soft);
    border-radius: var(--cp-radius-md, 0.75rem);
    box-shadow: var(--cp-elev-soft-tray);
    transition:
        border-color var(--cp-duration-fast) ease,
        box-shadow var(--cp-duration-fast) ease;
}

.cp-field--soft:focus,
input.cp-field--soft:focus,
textarea.cp-field--soft:focus,
select.cp-field--soft:focus {
    outline: none;
    border-color: var(--cp-success, #3ddc84);
    box-shadow: var(--cp-elev-soft-tray-focus);
}

/* -------------------------------------------------------------------------- */
/* Deep-well field / select — production twin of ns-field--well                 */
/* -------------------------------------------------------------------------- */
.cp-field--well,
select.cp-field--well {
    -webkit-appearance: none;
    appearance: none;
    color: var(--cp-ink);
    color-scheme: dark;
    border: 1px solid color-mix(in srgb, var(--cp-cobalt, #3d7cff) 40%, transparent);
    border-radius: var(--cp-radius-md);
    background-color: #07101c;
    background-image: linear-gradient(180deg, rgba(61, 124, 255, 0.16), rgba(61, 124, 255, 0.04));
    box-shadow:
        inset 0 3px 10px rgba(0, 20, 55, 0.75),
        inset 0 1px 0 rgba(154, 215, 255, 0.08),
        0 0 0 1px color-mix(in srgb, var(--cp-cobalt, #3d7cff) 12%, transparent),
        var(--cp-field-glow);
    transition:
        border-color var(--cp-duration-fast) ease,
        box-shadow var(--cp-duration-fast) ease;
}

select.cp-field--well,
button.cp-field--well {
    /* Chevron lives in .cp-select__chev circle — keep room on the right */
    background-image: linear-gradient(180deg, rgba(61, 124, 255, 0.16), rgba(61, 124, 255, 0.04));
    background-repeat: no-repeat;
    padding-right: 2.85rem;
    cursor: pointer;
    font-weight: 600;
}

.cp-field--well:focus,
select.cp-field--well:focus,
.cp-select:focus-within .cp-field--well {
    outline: none;
    border-color: var(--cp-accent);
    box-shadow:
        inset 0 3px 10px rgba(0, 20, 55, 0.75),
        var(--cp-field-glow-focus);
}

html[data-cp-theme="light"] .cp-field--well,
html[data-cp-theme="light"] select.cp-field--well,
html[data-cp-theme="light"] button.cp-field--well {
    color-scheme: light;
    background-color: var(--cp-well-deep, #c8d6ec);
    background-image: linear-gradient(180deg, rgba(61, 124, 255, 0.14), rgba(61, 124, 255, 0.05));
    box-shadow:
        inset 0 2px 8px rgba(30, 60, 110, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.65),
        var(--cp-field-glow);
}

/* -------------------------------------------------------------------------- */
/* Select wrap — circular soft-bevel chevron (ns-select · ns-select__chev)      */
/* -------------------------------------------------------------------------- */
.cp-select {
    position: relative;
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.cp-select > select,
.cp-select > .form-select,
.cp-select > button.cp-ql-filter-control,
.cp-select > .cp-trail-filter-open {
    width: 100%;
    max-width: 100%;
    padding-right: 2.85rem;
}

.cp-select__chev {
    position: absolute;
    top: 50%;
    right: 0.55rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.55rem;
    height: 1.55rem;
    margin-top: -0.775rem;
    border-radius: 999px;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(154, 215, 255, 0.28), rgba(61, 124, 255, 0.22));
    border: 1px solid rgba(154, 215, 255, 0.45);
    color: #eaf6ff;
    font-size: 0.68rem;
    line-height: 1;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.35),
        0 2px 6px rgba(0, 0, 0, 0.35);
    transition:
        transform 0.18s ease,
        background 0.15s ease,
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}

/* Open / expanded — chevron flips 180° (ns-dd__chev twin) */
.cp-select:focus-within .cp-select__chev,
.cp-select:has([aria-expanded="true"]) .cp-select__chev,
.cp-select:has(.show) .cp-select__chev,
.cp-select.is-open .cp-select__chev,
.dropdown-toggle[aria-expanded="true"] .cp-select__chev,
.cp-ql-interests-btn[aria-expanded="true"] .cp-select__chev {
    transform: rotate(180deg);
    background: linear-gradient(180deg, rgba(154, 215, 255, 0.4), rgba(0, 212, 255, 0.28));
    border-color: color-mix(in srgb, var(--cp-accent) 70%, #9ad7ff);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.45),
        0 0 0 2px color-mix(in srgb, var(--cp-accent) 28%, transparent);
}

html[data-cp-theme="light"] .cp-select__chev {
    background: linear-gradient(180deg, rgba(154, 215, 255, 0.55), rgba(61, 124, 255, 0.28));
    border-color: color-mix(in srgb, var(--cp-accent) 45%, #6a9fd4);
    color: #0a2a4a;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.7),
        0 1px 4px rgba(30, 60, 110, 0.2);
}

html[data-cp-theme="light"] .cp-select:focus-within .cp-select__chev,
html[data-cp-theme="light"] .cp-select:has([aria-expanded="true"]) .cp-select__chev {
    background: linear-gradient(180deg, rgba(154, 215, 255, 0.65), rgba(0, 212, 255, 0.35));
    border-color: color-mix(in srgb, var(--cp-accent) 55%, #6a9fd4);
    color: #061828;
}

/* Inline chevrons on filter / interests triggers */
.cp-ql-interests-btn__chevron,
.cp-ql-interests-btn .fa-chevron-down,
.dropdown-toggle .fa-chevron-down:not(.cp-user-group__chevron) {
    display: inline-block;
    transition: transform 0.18s ease;
}

.cp-ql-interests-btn[aria-expanded="true"] .cp-ql-interests-btn__chevron,
.cp-ql-interests-btn[aria-expanded="true"] .fa-chevron-down,
.dropdown-toggle[aria-expanded="true"] .fa-chevron-down:not(.cp-user-group__chevron),
.cp-trail-filter-open[aria-expanded="true"] ~ .cp-select__chev,
.cp-select:has(.cp-trail-filter-open[aria-expanded="true"]) .cp-select__chev {
    transform: rotate(180deg);
}

/* -------------------------------------------------------------------------- */
/* Form mode pills — segments-cobalt tray · electric cyan active chip           */
/* Site-wide: outer pill radius only; never soft-bevel individual segments.     */
/* -------------------------------------------------------------------------- */
.cp-radio-pill.btn-group {
    --cp-pill-seg-height: 2rem;
    --cp-pill-seg-pad-x: 0.625rem;
    --cp-pill-seg-font: 0.8125rem;
    display: inline-flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    width: auto !important;
    max-width: 100% !important;
    border: 1.5px solid var(--cp-accent) !important;
    border-radius: var(--cp-radius-pill) !important;
    background: transparent !important;
    box-shadow: var(--cp-field-glow);
    min-height: var(--cp-pill-seg-height);
    padding: 0 !important;
    gap: 0 !important;
    overflow: hidden !important;
}

/* Avatar / multi-option filters still wrap */
.cp-radio-pill.btn-group.flex-wrap,
.cp-radio-pill.btn-group.cp-avatar-style-filters,
.cp-radio-pill.btn-group.cp-avatar-mode-tabs {
    flex-wrap: wrap !important;
    overflow: visible !important;
}

.cp-radio-pill.btn-group > .btn-check + .btn,
.cp-radio-pill.btn-group > .btn-check + label.btn,
.cp-radio-pill.btn-group > .btn,
.cp-radio-pill.btn-group > label.btn {
    color: rgba(255, 255, 255, 0.78) !important;
    font-weight: 600;
    font-size: var(--cp-pill-seg-font) !important;
    letter-spacing: 0.045em !important;
    text-transform: uppercase !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
    width: auto !important;
    min-height: var(--cp-pill-seg-height) !important;
    height: var(--cp-pill-seg-height) !important;
    max-height: var(--cp-pill-seg-height) !important;
    margin: 0 !important;
    border-radius: 0 !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border: 0 !important;
    border-right: 1px solid rgba(255, 255, 255, 0.2) !important;
    /* Default = OFF. Never inherit Bootstrap btn-primary / :active fill. */
    background: var(--cp-void, #070d16) !important;
    background-color: var(--cp-void, #070d16) !important;
    box-shadow: none !important;
    transform: none !important;
    filter: none !important;
    text-shadow: none !important;
}

.cp-radio-pill.btn-group.flex-wrap > .btn-check + .btn,
.cp-radio-pill.btn-group.flex-wrap > .btn-check + label.btn,
.cp-radio-pill.btn-group.cp-avatar-style-filters > .btn-check + .btn,
.cp-radio-pill.btn-group.cp-avatar-style-filters > .btn-check + label.btn,
.cp-radio-pill.btn-group.cp-avatar-mode-tabs > .btn-check + .btn,
.cp-radio-pill.btn-group.cp-avatar-mode-tabs > .btn-check + label.btn {
    flex: 0 1 auto !important;
}

.cp-radio-pill.btn-group > .btn-check + .btn:last-of-type,
.cp-radio-pill.btn-group > .btn-check + label.btn:last-of-type,
.cp-radio-pill.btn-group > label.btn:last-child,
.cp-radio-pill.btn-group > .btn:last-child {
    border-right: 0 !important;
}

/* OFF — explicit, beats Bootstrap :active / .active leftovers */
.cp-radio-pill.btn-group > .btn-check:not(:checked) + .btn,
.cp-radio-pill.btn-group > .btn-check:not(:checked) + label.btn {
    background: var(--cp-void, #070d16) !important;
    background-color: var(--cp-void, #070d16) !important;
    color: rgba(255, 255, 255, 0.72) !important;
    box-shadow: none !important;
    filter: none !important;
}

.cp-radio-pill.btn-group > .btn-check:not(:checked) + .btn:hover,
.cp-radio-pill.btn-group > .btn-check:not(:checked) + label.btn:hover,
.cp-radio-pill.btn-group > .btn-check:not(:checked) + .btn:focus,
.cp-radio-pill.btn-group > .btn-check:not(:checked) + label.btn:focus {
    background: color-mix(in srgb, var(--cp-void, #070d16) 70%, #1a2a40) !important;
    background-color: color-mix(in srgb, var(--cp-void, #070d16) 70%, #1a2a40) !important;
    color: #fff !important;
}

/* ON — :checked only (do not use :active — it sticks the “on” paint) */
.cp-radio-pill.btn-group > .btn-check:checked + .btn,
.cp-radio-pill.btn-group > .btn-check:checked + label.btn {
    color: var(--cp-accent-ink, #041018) !important;
    background: var(--cp-accent, #00d4ff) !important;
    background-color: var(--cp-accent, #00d4ff) !important;
    border-radius: 0 !important;
    /* Raised chip: highlight on top, dark lip on BOTTOM (not Bootstrap press-in). */
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.42),
        inset 0 -2px 0 rgba(0, 0, 0, 0.28) !important;
    transform: none !important;
    filter: none !important;
    text-shadow: none !important;
}

.cp-radio-pill.btn-group > .btn-check:checked + .btn:hover,
.cp-radio-pill.btn-group > .btn-check:checked + label.btn:hover,
.cp-radio-pill.btn-group > .btn-check:checked + .btn:focus,
.cp-radio-pill.btn-group > .btn-check:checked + label.btn:focus {
    color: var(--cp-accent-ink, #041018) !important;
    background: var(--cp-accent, #00d4ff) !important;
    background-color: var(--cp-accent, #00d4ff) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.42),
        inset 0 -2px 0 rgba(0, 0, 0, 0.28) !important;
}

.cp-radio-pill.btn-group > .btn-check:checked + .btn *,
.cp-radio-pill.btn-group > .btn-check:checked + label.btn * {
    color: inherit !important;
}

/*
 * Button-driven Theme / Units segments (no .btn-check) — same ON paint as :checked.
 * Must beat .cp-radio-pill > .btn void fill and .cp-section-collapsible overrides.
 */
.cp-radio-pill.btn-group > .btn.cp-theme-active,
.cp-radio-pill.btn-group > .btn.cp-units-active,
.cp-radio-pill.btn-group > .btn.active,
.cp-theme-toggle.btn-group > .btn.cp-theme-active,
.cp-theme-toggle.btn-group > .btn.active,
.cp-units-toggle.btn-group > .btn.cp-units-active,
.cp-units-toggle.btn-group > .btn.active,
.cp-section-collapsible .cp-radio-pill .btn.cp-theme-active,
.cp-section-collapsible .cp-radio-pill .btn.cp-units-active,
.cp-section-collapsible .cp-radio-pill .btn.active,
.cp-section-collapsible .cp-theme-toggle .btn.cp-theme-active,
.cp-section-collapsible .cp-units-toggle .btn.cp-units-active,
.cp-form-max-1080 .cp-radio-pill .btn.cp-theme-active,
.cp-form-max-1080 .cp-radio-pill .btn.cp-units-active,
.cp-form-max-1080 .cp-radio-pill .btn.active,
.cp-user-group--market .cp-radio-pill .btn.cp-theme-active,
.cp-user-group--market .cp-radio-pill .btn.cp-units-active,
.cp-user-group--market .cp-radio-pill .btn.active,
.cp-page-shell .cp-radio-pill .btn.cp-theme-active,
.cp-page-shell .cp-radio-pill .btn.cp-units-active,
.cp-page-shell .cp-radio-pill .btn.active,
.cp-page-shell .cp-theme-toggle .btn.cp-theme-active,
.cp-page-shell .cp-units-toggle .btn.cp-units-active,
.cp-page-shell .cp-profile-theme-btn.cp-theme-active,
.cp-page-shell .cp-profile-units-btn.cp-units-active,
.cp-page-shell .cp-profile-store-btn.cp-units-active,
.cp-page-shell .cp-profile-upgrade-btn.cp-units-active {
    color: var(--cp-accent-ink, #041018) !important;
    background: var(--cp-accent, #00d4ff) !important;
    background-color: var(--cp-accent, #00d4ff) !important;
    border-radius: 0 !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.42),
        inset 0 -2px 0 rgba(0, 0, 0, 0.28) !important;
    transform: none !important;
    filter: none !important;
    text-shadow: none !important;
}

.cp-radio-pill.btn-group > .btn.cp-theme-active *,
.cp-radio-pill.btn-group > .btn.cp-units-active *,
.cp-radio-pill.btn-group > .btn.active *,
.cp-theme-toggle.btn-group > .btn.cp-theme-active *,
.cp-theme-toggle.btn-group > .btn.active *,
.cp-units-toggle.btn-group > .btn.cp-units-active *,
.cp-units-toggle.btn-group > .btn.active *,
.cp-section-collapsible .cp-radio-pill .btn.cp-theme-active *,
.cp-section-collapsible .cp-radio-pill .btn.cp-units-active *,
.cp-section-collapsible .cp-radio-pill .btn.active *,
.cp-page-shell .cp-profile-theme-btn.cp-theme-active *,
.cp-page-shell .cp-profile-units-btn.cp-units-active *,
.cp-page-shell .cp-profile-store-btn.cp-units-active *,
.cp-page-shell .cp-profile-upgrade-btn.cp-units-active * {
    color: var(--cp-accent-ink, #041018) !important;
}

.cp-radio-pill.btn-group > .btn.cp-theme-active:hover,
.cp-radio-pill.btn-group > .btn.cp-units-active:hover,
.cp-radio-pill.btn-group > .btn.active:hover,
.cp-theme-toggle.btn-group > .btn.cp-theme-active:hover,
.cp-units-toggle.btn-group > .btn.cp-units-active:hover,
.cp-page-shell .cp-profile-theme-btn.cp-theme-active:hover,
.cp-page-shell .cp-profile-units-btn.cp-units-active:hover,
.cp-radio-pill.btn-group > .btn.cp-theme-active:active,
.cp-radio-pill.btn-group > .btn.cp-units-active:active,
.cp-radio-pill.btn-group > .btn.active:active,
.cp-theme-toggle.btn-group > .btn.cp-theme-active:active,
.cp-theme-toggle.btn-group > .btn.active:active,
.cp-units-toggle.btn-group > .btn.cp-units-active:active,
.cp-units-toggle.btn-group > .btn.active:active,
.cp-page-shell .cp-profile-theme-btn.cp-theme-active:active,
.cp-page-shell .cp-profile-units-btn.cp-units-active:active {
    color: var(--cp-accent-ink, #041018) !important;
    background: var(--cp-accent, #00d4ff) !important;
    background-color: var(--cp-accent, #00d4ff) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.42),
        inset 0 -2px 0 rgba(0, 0, 0, 0.28) !important;
    transform: none !important;
}

.cp-user-group--market .cp-radio-pill.btn-group,
.cp-section-collapsible .cp-radio-pill.btn-group,
.cp-form-max-1080 .cp-radio-pill.btn-group {
    --cp-pill-seg-height: 2rem;
    --cp-pill-seg-pad-x: 0.625rem;
    --cp-pill-seg-font: 0.8125rem;
}

/* Location mode — full-width pill; compact type for long labels */
.cp-radio-pill.cp-location-mode-group.btn-group {
    --cp-pill-seg-font: 0.6875rem;
    --cp-pill-seg-pad-x: 0.5rem;
    --cp-pill-seg-height: 1.875rem;
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    inline-size: 100% !important;
    flex-wrap: nowrap !important;
    overflow: hidden !important;
}

.cp-radio-pill.cp-location-mode-group.btn-group > .btn-check + .btn,
.cp-radio-pill.cp-location-mode-group.btn-group > .btn-check + label.btn,
.cp-radio-pill.cp-location-mode-group.btn-group > label.btn {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    font-size: 0.6875rem !important;
    letter-spacing: 0.02em !important;
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
    white-space: nowrap !important;
}

.cp-user-group--market .cp-radio-pill .btn,
.cp-user-group--market .cp-radio-pill label.btn,
.cp-form-max-1080 .cp-radio-pill .btn,
.cp-form-max-1080 .cp-radio-pill label.btn,
.cp-section-collapsible .cp-radio-pill .btn,
.cp-section-collapsible .cp-radio-pill label.btn {
    color: rgba(255, 255, 255, 0.78) !important;
    font-weight: 600;
    font-size: var(--cp-pill-seg-font) !important;
    letter-spacing: 0.045em !important;
    text-transform: uppercase !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--cp-pill-seg-height) !important;
    height: var(--cp-pill-seg-height) !important;
    border-radius: 0 !important;
    border-right: 1px solid rgba(255, 255, 255, 0.2) !important;
    background: var(--cp-void, #070d16) !important;
    box-shadow: none !important;
}

.cp-user-group--market .cp-radio-pill .btn-check:checked + .btn,
.cp-user-group--market .cp-radio-pill .btn-check:checked + label.btn,
.cp-form-max-1080 .cp-radio-pill .btn-check:checked + .btn,
.cp-form-max-1080 .cp-radio-pill .btn-check:checked + label.btn,
.cp-section-collapsible .cp-radio-pill .btn-check:checked + .btn,
.cp-section-collapsible .cp-radio-pill .btn-check:checked + label.btn {
    color: var(--cp-accent-ink) !important;
    background: var(--cp-accent) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.42),
        inset 0 -2px 0 rgba(0, 0, 0, 0.28) !important;
    border-radius: 0 !important;
}

/* -------------------------------------------------------------------------- */
/* Location mode — segments-cobalt · electric cyan accent                       */
/* Deep recessed cobalt tray; selected chip = soft-bevel cyan (like .cp-btn).  */
/* -------------------------------------------------------------------------- */
.cp-loc-mode-switch,
.cp-loc-mode-switch--soft {
    display: inline-grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
    padding: 4px;
    max-width: 100%;
    width: min(100%, 26rem);
    border-radius: var(--cp-radius-pill);
    border: 1px solid color-mix(in srgb, var(--cp-cobalt) 40%, var(--cp-border));
    background: var(--cp-well-deep, var(--cp-sunken));
    box-shadow:
        inset 0 3px 10px rgba(0, 0, 0, 0.55),
        0 1px 0 rgba(255, 255, 255, 0.04),
        var(--cp-field-glow);
}

.cp-loc-mode-switch > .btn-check {
    position: absolute;
    clip: rect(0, 0, 0);
    pointer-events: none;
}

.cp-loc-mode-switch__seg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    margin: 0;
    padding: 0.5rem 0.65rem;
    border-radius: var(--cp-radius-pill);
    text-align: center;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1.25;
    color: var(--cp-ink-muted);
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    transition:
        background var(--cp-duration-fast) ease,
        color var(--cp-duration-fast) ease,
        box-shadow var(--cp-duration-fast) ease;
}

.cp-loc-mode-switch__icon {
    flex: 0 0 auto;
    font-size: 0.78em;
    line-height: 1;
    opacity: 0.85;
}

.cp-loc-mode-switch > .btn-check:checked + .cp-loc-mode-switch__seg .cp-loc-mode-switch__icon {
    opacity: 1;
}

.cp-loc-mode-switch__seg:hover {
    color: var(--cp-ink);
}

.cp-loc-mode-switch > .btn-check:checked + .cp-loc-mode-switch__seg {
    color: var(--cp-accent-ink);
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--cp-accent) 92%, #ffffff) 0%,
        var(--cp-accent) 45%,
        var(--cp-accent-strong) 100%
    );
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.35) inset,
        0 -1px 0 rgba(0, 0, 0, 0.12) inset,
        0 4px 14px color-mix(in srgb, var(--cp-accent-glow) 55%, transparent);
}

.cp-loc-mode-switch > .btn-check:focus-visible + .cp-loc-mode-switch__seg {
    outline: 2px solid var(--cp-accent);
    outline-offset: 2px;
}

@media (max-width: 420px) {
    .cp-loc-mode-switch,
    .cp-loc-mode-switch--soft {
        width: 100%;
    }

    .cp-loc-mode-switch__seg {
        padding: 0.45rem 0.5rem;
        font-size: 0.75rem;
    }
}

/* -------------------------------------------------------------------------- */
/* On/off — rocker · .ns-rocker visual on Bootstrap form-switch                 */
/* Thumb MUST be an SVG circle (radial-gradient paints a rectangle).           */
/* -------------------------------------------------------------------------- */
.form-switch {
    --cp-rocker-w: 3.25rem;
    --cp-rocker-h: 1.75rem;
    --cp-rocker-pad: 0.2rem;
    /* Hard circular thumbs — viewBox sized so the circle fills the tile */
    --cp-rocker-thumb-off: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0%25' stop-color='%23dfe7f5'/%3E%3Cstop offset='100%25' stop-color='%238a96aa'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='11' cy='11' r='11' fill='url(%23g)'/%3E%3C/svg%3E");
    --cp-rocker-thumb-on: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0%25' stop-color='%23ffffff'/%3E%3Cstop offset='100%25' stop-color='%23e8fff5'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='11' cy='11' r='11' fill='url(%23g)'/%3E%3C/svg%3E");
    padding-left: calc(var(--cp-rocker-w) + 0.75rem);
    min-height: var(--cp-rocker-h);
}

.form-switch .form-check-input {
    --bs-form-switch-bg: var(--cp-rocker-thumb-off);
    width: var(--cp-rocker-w) !important;
    height: var(--cp-rocker-h) !important;
    margin-top: 0.1em;
    margin-left: calc(-1 * (var(--cp-rocker-w) + 0.75rem));
    border: 0 !important;
    border-radius: var(--cp-radius-pill) !important;
    background-color: var(--cp-well-deep, #0a1018) !important;
    background-image: var(--cp-rocker-thumb-off) !important;
    background-repeat: no-repeat !important;
    background-position: left var(--cp-rocker-pad) center !important;
    background-size: 1.35rem 1.35rem !important;
    box-shadow:
        inset 0 2px 6px rgba(0, 0, 0, 0.65),
        0 1px 0 rgba(255, 255, 255, 0.04) !important;
    filter: none !important;
    transition:
        background-position var(--cp-duration-fast) var(--cp-ease-out),
        background-color var(--cp-duration-fast) ease,
        box-shadow var(--cp-duration-fast) ease !important;
    appearance: none;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

.form-switch .form-check-input:focus {
    border-color: transparent !important;
    outline: 0;
    box-shadow:
        inset 0 2px 6px rgba(0, 0, 0, 0.55),
        0 0 0 0.2rem var(--cp-accent-soft) !important;
}

.form-switch .form-check-input:checked {
    --bs-form-switch-bg: var(--cp-rocker-thumb-on);
    background-color: transparent !important;
    border-color: transparent !important;
    background-image:
        var(--cp-rocker-thumb-on),
        linear-gradient(90deg, #1a5a40, var(--cp-success, #3ddc84)) !important;
    background-size: 1.35rem 1.35rem, 100% 100% !important;
    background-position: right var(--cp-rocker-pad) center, 0 0 !important;
    background-repeat: no-repeat, no-repeat !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        0 0 14px color-mix(in srgb, var(--cp-success, #3ddc84) 35%, transparent) !important;
}

.form-switch .form-check-input:checked:focus {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        0 0 14px color-mix(in srgb, var(--cp-success, #3ddc84) 35%, transparent),
        0 0 0 0.2rem var(--cp-accent-soft) !important;
}

/* Non-switch checkboxes keep cyan when checked */
.form-check:not(.form-switch) .form-check-input:checked {
    background-color: var(--cp-accent-strong) !important;
    border-color: var(--cp-accent-strong) !important;
}

.cp-user-group--market .form-check-label,
.cp-section-collapsible .form-check-label,
.cp-form-max-1080 .form-check-label {
    color: var(--cp-ink);
}

/* -------------------------------------------------------------------------- */
/* Selects — deep-well · Trail Type (collapsed) · circular chevron badge        */
/* Unit/currency segments stay inside connected soft-trays.                     */
/* -------------------------------------------------------------------------- */
.cp-user-group--market .form-select:not(.cp-unit-select):not(.cp-currency-select):not(.cp-phone-input__dial):not(.cp-social-link-platform-select):not(.cp-custom-select__trigger),
.cp-section-collapsible .form-select:not(.cp-unit-select):not(.cp-currency-select):not(.cp-phone-input__dial):not(.cp-social-link-platform-select):not(.cp-custom-select__trigger),
.cp-form-card .form-select:not(.cp-unit-select):not(.cp-currency-select):not(.cp-phone-input__dial):not(.cp-social-link-platform-select):not(.cp-custom-select__trigger),
.cp-form-max-1080 .form-select:not(.cp-unit-select):not(.cp-currency-select):not(.cp-phone-input__dial):not(.cp-social-link-platform-select):not(.cp-custom-select__trigger),
.cp-create-form-card .form-select:not(.cp-unit-select):not(.cp-currency-select):not(.cp-phone-input__dial):not(.cp-social-link-platform-select):not(.cp-custom-select__trigger),
#register-form .form-select:not(.cp-unit-select):not(.cp-currency-select):not(.cp-phone-input__dial):not(.cp-social-link-platform-select):not(.cp-custom-select__trigger),
#edit-profile-form .form-select:not(.cp-unit-select):not(.cp-currency-select):not(.cp-phone-input__dial):not(.cp-social-link-platform-select):not(.cp-custom-select__trigger),
select.form-select.cp-field--well {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    --bs-form-select-bg-img: none !important;
    --bs-form-select-bg-icon: none !important;
    min-height: var(--cp-control-height, 42px);
    color: var(--cp-ink) !important;
    color-scheme: dark;
    font-weight: 600 !important;
    cursor: pointer;
    border: 1px solid color-mix(in srgb, var(--cp-cobalt, #3d7cff) 40%, transparent) !important;
    border-radius: var(--cp-radius-md, 0.75rem) !important;
    background-color: #07101c !important;
    /* Circular soft-bevel chevron (matches .cp-select__chev) + deep-well wash */
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%233d7cff' fill-opacity='0.28' stroke='%239ad7ff' stroke-opacity='0.55' stroke-width='1'/%3E%3Cpath fill='none' stroke='%23eaf6ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M8 10.5l4 4 4-4'/%3E%3C/svg%3E"),
        linear-gradient(180deg, rgba(61, 124, 255, 0.16), rgba(61, 124, 255, 0.04)) !important;
    background-repeat: no-repeat !important;
    background-position: right 0.5rem center, 0 0 !important;
    background-size: 1.45rem 1.45rem, auto !important;
    box-shadow:
        inset 0 3px 10px rgba(0, 20, 55, 0.75),
        inset 0 1px 0 rgba(154, 215, 255, 0.08),
        0 0 0 1px color-mix(in srgb, var(--cp-cobalt, #3d7cff) 12%, transparent),
        var(--cp-field-glow) !important;
    padding-right: 2.85rem !important;
}

.cp-user-group--market .form-select:not(.cp-unit-select):not(.cp-currency-select):not(.cp-phone-input__dial):not(.cp-social-link-platform-select):not(.cp-custom-select__trigger):focus,
.cp-section-collapsible .form-select:not(.cp-unit-select):not(.cp-currency-select):not(.cp-phone-input__dial):not(.cp-social-link-platform-select):not(.cp-custom-select__trigger):focus,
.cp-form-card .form-select:not(.cp-unit-select):not(.cp-currency-select):not(.cp-phone-input__dial):not(.cp-social-link-platform-select):not(.cp-custom-select__trigger):focus,
.cp-form-max-1080 .form-select:not(.cp-unit-select):not(.cp-currency-select):not(.cp-phone-input__dial):not(.cp-social-link-platform-select):not(.cp-custom-select__trigger):focus,
.cp-create-form-card .form-select:not(.cp-unit-select):not(.cp-currency-select):not(.cp-phone-input__dial):not(.cp-social-link-platform-select):not(.cp-custom-select__trigger):focus,
#register-form .form-select:not(.cp-unit-select):not(.cp-currency-select):not(.cp-phone-input__dial):not(.cp-social-link-platform-select):not(.cp-custom-select__trigger):focus,
#edit-profile-form .form-select:not(.cp-unit-select):not(.cp-currency-select):not(.cp-phone-input__dial):not(.cp-social-link-platform-select):not(.cp-custom-select__trigger):focus {
    border-color: var(--cp-accent) !important;
    box-shadow:
        inset 0 3px 10px rgba(0, 20, 55, 0.75),
        var(--cp-field-glow-focus) !important;
    /* Flipped circular chevron (180°) while open/focused */
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%2300d4ff' fill-opacity='0.32' stroke='%239ad7ff' stroke-opacity='0.7' stroke-width='1'/%3E%3Cpath fill='none' stroke='%23eaf6ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M8 13.5l4-4 4 4'/%3E%3C/svg%3E"),
        linear-gradient(180deg, rgba(61, 124, 255, 0.22), rgba(61, 124, 255, 0.06)) !important;
    background-repeat: no-repeat !important;
    background-position: right 0.5rem center, 0 0 !important;
    background-size: 1.45rem 1.45rem, auto !important;
}

html[data-cp-theme="light"] .cp-user-group--market .form-select:not(.cp-unit-select):not(.cp-currency-select):not(.cp-phone-input__dial):not(.cp-social-link-platform-select):not(.cp-custom-select__trigger),
html[data-cp-theme="light"] .cp-section-collapsible .form-select:not(.cp-unit-select):not(.cp-currency-select):not(.cp-phone-input__dial):not(.cp-social-link-platform-select):not(.cp-custom-select__trigger),
html[data-cp-theme="light"] .cp-form-card .form-select:not(.cp-unit-select):not(.cp-currency-select):not(.cp-phone-input__dial):not(.cp-social-link-platform-select):not(.cp-custom-select__trigger),
html[data-cp-theme="light"] .cp-form-max-1080 .form-select:not(.cp-unit-select):not(.cp-currency-select):not(.cp-phone-input__dial):not(.cp-social-link-platform-select):not(.cp-custom-select__trigger),
html[data-cp-theme="light"] .cp-create-form-card .form-select:not(.cp-unit-select):not(.cp-currency-select):not(.cp-phone-input__dial):not(.cp-social-link-platform-select):not(.cp-custom-select__trigger),
html[data-cp-theme="light"] #register-form .form-select:not(.cp-unit-select):not(.cp-currency-select):not(.cp-phone-input__dial):not(.cp-social-link-platform-select):not(.cp-custom-select__trigger),
html[data-cp-theme="light"] #edit-profile-form .form-select:not(.cp-unit-select):not(.cp-currency-select):not(.cp-phone-input__dial):not(.cp-social-link-platform-select):not(.cp-custom-select__trigger) {
    color-scheme: light;
    background-color: var(--cp-well-deep, #c8d6ec) !important;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%233d7cff' fill-opacity='0.35' stroke='%236a9fd4' stroke-opacity='0.7' stroke-width='1'/%3E%3Cpath fill='none' stroke='%230a2a4a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M8 10.5l4 4 4-4'/%3E%3C/svg%3E"),
        linear-gradient(180deg, rgba(61, 124, 255, 0.14), rgba(61, 124, 255, 0.05)) !important;
    background-repeat: no-repeat !important;
    background-position: right 0.5rem center, 0 0 !important;
    background-size: 1.45rem 1.45rem, auto !important;
    border-color: color-mix(in srgb, var(--cp-cobalt, #3d7cff) 35%, var(--cp-border-strong)) !important;
    box-shadow:
        inset 0 2px 8px rgba(30, 60, 110, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.65),
        var(--cp-field-glow) !important;
}

.cp-phone-input .cp-phone-input__dial.form-select {
    width: auto;
    min-width: 5.25rem;
    max-width: 6.5rem;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background-color: transparent !important;
    color: inherit !important;
    padding: 0 1.9rem 0 0.75rem !important;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    --bs-form-select-bg-position: right 0.55rem center;
    --bs-form-select-bg-size: 16px 12px;
}

.cp-phone-input .cp-phone-input__national.form-control {
    flex: 1 1 auto;
    min-width: 0;
}

/* Compact phone — dial + ~20 visible national chars (not full-row width) */
.cp-phone-input.cp-phone-input--compact {
    display: inline-block;
    width: fit-content;
    max-width: 100%;
}

.cp-phone-input.cp-phone-input--compact .input-group {
    width: fit-content !important;
    max-width: 100%;
}

.cp-phone-input.cp-phone-input--compact .cp-phone-input__national,
.cp-phone-input.cp-phone-input--compact .cp-phone-input__national.form-control {
    flex: 0 0 20ch !important;
    width: 20ch !important;
    max-width: 20ch !important;
    min-width: 0 !important;
}

/* Search Radius — ~15 visible chars (+ chevron gutter); skip custom-select stretch */
#edit-profile-form .cp-search-radius-select,
#register-form .cp-search-radius-select,
.cp-search-radius-select.form-select {
    display: inline-block !important;
    width: calc(15ch + 2.85rem) !important;
    max-width: calc(15ch + 2.85rem) !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
    align-self: flex-start !important;
    box-sizing: border-box !important;
}

.cp-custom-select:has(> .cp-search-radius-select),
.cp-select:has(> .cp-search-radius-select) {
    display: inline-block !important;
    width: calc(15ch + 2.85rem) !important;
    max-width: calc(15ch + 2.85rem) !important;
    flex: 0 0 auto !important;
    align-self: flex-start !important;
}

.cp-custom-select:has(> .cp-search-radius-select) > .cp-custom-select__trigger {
    width: 100% !important;
    max-width: 100% !important;
}

/* When wrapped in .cp-select / custom-select, hide duplicate SVG — .cp-select__chev owns it */
[data-cp-theme="dark"] .cp-page-shell .cp-custom-select__trigger.form-select,
[data-cp-theme="dark"] .cp-recent-shell .cp-custom-select__trigger.form-select,
[data-cp-theme="light"] .cp-page-shell .cp-custom-select__trigger.form-select,
[data-cp-theme="light"] .cp-recent-shell .cp-custom-select__trigger.form-select,
[data-cp-theme="dark"] .cp-page-shell .cp-select > .form-select:not(.cp-unit-select),
[data-cp-theme="dark"] .cp-recent-shell .cp-select > .form-select:not(.cp-unit-select),
[data-cp-theme="light"] .cp-page-shell .cp-select > .form-select:not(.cp-unit-select),
[data-cp-theme="light"] .cp-recent-shell .cp-select > .form-select:not(.cp-unit-select),
.cp-select > .form-select:not(.cp-unit-select),
.cp-select > select.cp-field--well,
.cp-select > .form-select:not(.cp-unit-select):focus,
.cp-select > select.cp-field--well:focus,
.cp-custom-select__trigger.form-select,
.cp-custom-select__trigger.form-select:focus,
.cp-custom-select__trigger.form-select:focus-visible,
.cp-custom-select.is-open .cp-custom-select__trigger.form-select,
.cp-user-group .cp-custom-select__trigger.form-select,
.cp-user-group .cp-custom-select__trigger.form-select:focus,
.cp-section-collapsible .cp-custom-select__trigger.form-select,
.cp-section-collapsible .cp-custom-select__trigger.form-select:focus {
    background-image: linear-gradient(180deg, rgba(61, 124, 255, 0.16), rgba(61, 124, 255, 0.04)) !important;
    background-size: auto !important;
    background-position: 0 0 !important;
    background-repeat: no-repeat !important;
}

html[data-cp-theme="light"] .cp-page-shell .cp-custom-select__trigger.form-select,
html[data-cp-theme="light"] .cp-recent-shell .cp-custom-select__trigger.form-select,
html[data-cp-theme="light"] .cp-page-shell .cp-select > .form-select:not(.cp-unit-select),
html[data-cp-theme="light"] .cp-recent-shell .cp-select > .form-select:not(.cp-unit-select),
html[data-cp-theme="light"] .cp-select > .form-select:not(.cp-unit-select),
html[data-cp-theme="light"] .cp-select > select.cp-field--well,
html[data-cp-theme="light"] .cp-select > .form-select:not(.cp-unit-select):focus,
html[data-cp-theme="light"] .cp-select > select.cp-field--well:focus,
html[data-cp-theme="light"] .cp-custom-select__trigger.form-select,
html[data-cp-theme="light"] .cp-custom-select__trigger.form-select:focus,
html[data-cp-theme="light"] .cp-custom-select.is-open .cp-custom-select__trigger.form-select,
html[data-cp-theme="light"] .cp-user-group .cp-custom-select__trigger.form-select {
    background-image: linear-gradient(180deg, rgba(61, 124, 255, 0.14), rgba(61, 124, 255, 0.05)) !important;
}

/* -------------------------------------------------------------------------- */
/* Dropdown menus — soft-bevel · ns-dd (open panel matches design playground) */
/* -------------------------------------------------------------------------- */
.dropdown-menu,
.cp-more-dropdown.dropdown-menu {
    --bs-dropdown-bg: #121a28;
    --bs-dropdown-color: var(--cp-ink, #eaf6ff);
    --bs-dropdown-border-color: rgba(0, 212, 255, 0.38);
    --bs-dropdown-link-color: var(--cp-ink, #eaf6ff);
    --bs-dropdown-link-hover-bg: rgba(0, 212, 255, 0.18);
    --bs-dropdown-link-hover-color: #eaf6ff;
    --bs-dropdown-link-active-bg: rgba(0, 212, 255, 0.22);
    --bs-dropdown-link-active-color: #eaf6ff;
    --bs-dropdown-divider-bg: transparent;
    border: 1px solid rgba(0, 212, 255, 0.38) !important;
    border-radius: 14px !important;
    padding: 0.4rem !important;
    margin-top: 0.45rem !important;
    overflow: visible !important;
    background:
        linear-gradient(165deg, rgba(0, 212, 255, 0.14), transparent 42%),
        linear-gradient(180deg, #1a2436, #0e1520) !important;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.08) inset,
        0 0 0 1px rgba(0, 0, 0, 0.35),
        0 18px 42px rgba(0, 0, 0, 0.55),
        0 0 28px rgba(0, 212, 255, 0.18) !important;
}

/* Diamond caret — ns-dd__menu::before */
.dropdown-menu:not(.dropdown-menu-end)::before,
.cp-more-dropdown.dropdown-menu:not(.dropdown-menu-end)::before {
    content: "";
    position: absolute;
    top: -6px;
    left: 1.15rem;
    width: 12px;
    height: 12px;
    background: #1a2436;
    border-left: 1px solid rgba(0, 212, 255, 0.38);
    border-top: 1px solid rgba(0, 212, 255, 0.38);
    transform: rotate(45deg);
    box-shadow: -2px -2px 8px rgba(0, 0, 0, 0.2);
    z-index: 1;
}

.dropdown-menu.dropdown-menu-end::before,
.cp-more-dropdown.dropdown-menu.dropdown-menu-end::before {
    content: "";
    position: absolute;
    top: -6px;
    right: 1.15rem;
    left: auto;
    width: 12px;
    height: 12px;
    background: #1a2436;
    border-left: 1px solid rgba(0, 212, 255, 0.38);
    border-top: 1px solid rgba(0, 212, 255, 0.38);
    transform: rotate(45deg);
    box-shadow: -2px -2px 8px rgba(0, 0, 0, 0.2);
    z-index: 1;
}

.dropdown-item {
    display: flex !important;
    align-items: center;
    gap: 0.65rem;
    border-radius: 10px !important;
    font-weight: 600 !important;
    font-size: 0.88rem !important;
    padding: 0.6rem 0.75rem !important;
    color: var(--cp-ink, #eaf6ff) !important;
    background: transparent !important;
}

/* Icon tile — ns-dd__item-ico */
.dropdown-item > i:first-child,
.dropdown-item > .fa:first-child,
.dropdown-item > .fas:first-child,
.dropdown-item > .far:first-child,
.dropdown-item > .fab:first-child,
.dropdown-item > .cp-dd-ico {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 1.55rem;
    height: 1.55rem;
    flex-shrink: 0;
    margin: 0 !important;
    border-radius: 8px;
    background: rgba(0, 212, 255, 0.14);
    color: var(--cp-accent, #00d4ff) !important;
    font-size: 0.72rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.dropdown-item:hover,
.dropdown-item:focus,
.dropdown-item:focus-visible {
    background: rgba(0, 212, 255, 0.18) !important;
    color: #eaf6ff !important;
}

.dropdown-item:hover > i:first-child,
.dropdown-item:hover > .fas:first-child,
.dropdown-item:focus > i:first-child,
.dropdown-item:focus > .fas:first-child {
    background: rgba(0, 212, 255, 0.28);
    color: #fff !important;
}

.dropdown-item.text-danger > i:first-child,
.dropdown-item.text-danger > .fas:first-child,
.dropdown-item[data-cp-dd-warn] > i:first-child {
    background: rgba(255, 107, 74, 0.16);
    color: #ff6b4a !important;
}

.dropdown-item.text-danger:hover,
.dropdown-item[data-cp-dd-warn]:hover {
    background: rgba(255, 107, 74, 0.2) !important;
    color: #ffc4b5 !important;
}

.dropdown-divider {
    border: 0 !important;
    height: 1px !important;
    margin: 0.35rem 0.45rem !important;
    opacity: 1 !important;
    background: linear-gradient(90deg, transparent, rgba(0, 212, 255, 0.4), transparent) !important;
}

html[data-cp-theme="light"] .dropdown-menu,
html[data-cp-theme="light"] .cp-more-dropdown.dropdown-menu {
    --bs-dropdown-bg: #f4f8ff;
    --bs-dropdown-color: #0a2a4a;
    --bs-dropdown-link-color: #0a2a4a;
    --bs-dropdown-link-hover-color: #061828;
    border-color: color-mix(in srgb, var(--cp-accent, #00d4ff) 45%, #6a9fd4) !important;
    background:
        linear-gradient(165deg, rgba(0, 212, 255, 0.1), transparent 42%),
        linear-gradient(180deg, #f7fbff, #e8f0fa) !important;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.9) inset,
        0 0 0 1px rgba(30, 60, 110, 0.08),
        0 18px 36px rgba(18, 45, 73, 0.18),
        0 0 20px rgba(0, 212, 255, 0.1) !important;
}

html[data-cp-theme="light"] .dropdown-menu::before,
html[data-cp-theme="light"] .cp-more-dropdown.dropdown-menu::before {
    background: #f7fbff;
    border-left-color: color-mix(in srgb, var(--cp-accent, #00d4ff) 45%, #6a9fd4);
    border-top-color: color-mix(in srgb, var(--cp-accent, #00d4ff) 45%, #6a9fd4);
}

html[data-cp-theme="light"] .dropdown-item {
    color: #0a2a4a !important;
}

/* -------------------------------------------------------------------------- */
/* Custom select — replaces native OS popup (white box) with ns-dd soft-bevel  */
/* -------------------------------------------------------------------------- */
.cp-custom-select {
    position: relative;
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.cp-custom-select__native {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.cp-custom-select__trigger {
    display: flex !important;
    align-items: center;
    width: 100%;
    text-align: left;
    cursor: pointer;
    -webkit-appearance: none !important;
    appearance: none !important;
    min-height: var(--cp-control-height, 42px);
    padding-right: 2.85rem !important;
    color: var(--cp-ink) !important;
    color-scheme: dark;
    font-weight: 600 !important;
    border: 1px solid color-mix(in srgb, var(--cp-cobalt, #3d7cff) 40%, transparent) !important;
    border-radius: var(--cp-radius-md, 0.75rem) !important;
    background-color: #07101c !important;
    /* Gradient only — never Bootstrap / SVG chevron (badge is .cp-select__chev) */
    --bs-form-select-bg-img: none !important;
    --bs-form-select-bg-icon: none !important;
    background-image: linear-gradient(180deg, rgba(61, 124, 255, 0.16), rgba(61, 124, 255, 0.04)) !important;
    background-repeat: no-repeat !important;
    background-position: 0 0 !important;
    background-size: auto !important;
    box-shadow:
        inset 0 3px 10px rgba(0, 20, 55, 0.75),
        inset 0 1px 0 rgba(154, 215, 255, 0.08),
        0 0 0 1px color-mix(in srgb, var(--cp-cobalt, #3d7cff) 12%, transparent),
        var(--cp-field-glow) !important;
}

.cp-custom-select__trigger:focus,
.cp-custom-select__trigger:focus-visible,
.cp-custom-select.is-open .cp-custom-select__trigger {
    outline: none !important;
    border-color: var(--cp-accent, #00d4ff) !important;
    box-shadow:
        inset 0 3px 10px rgba(0, 20, 55, 0.75),
        var(--cp-field-glow-focus) !important;
}

.cp-custom-select__label {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cp-custom-select__label.is-placeholder {
    color: var(--cp-ink-faint, rgba(200, 215, 240, 0.55));
    font-weight: 500;
}

.cp-custom-select.is-disabled .cp-custom-select__trigger {
    opacity: 0.65;
    cursor: not-allowed;
}

/* Open menu — soft-bevel · ns-dd (in-flow fallback; portaled menus use --portal) */
.cp-custom-select__menu {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 0.45rem);
    z-index: 1080;
    min-width: 100%;
    max-height: min(18rem, 60vh);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0.4rem;
    border-radius: 14px;
    border: 1px solid rgba(0, 212, 255, 0.38);
    background:
        linear-gradient(165deg, rgba(0, 212, 255, 0.14), transparent 42%),
        linear-gradient(180deg, #1a2436, #0e1520);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.08) inset,
        0 0 0 1px rgba(0, 0, 0, 0.35),
        0 18px 42px rgba(0, 0, 0, 0.55),
        0 0 28px rgba(0, 212, 255, 0.18);
    transform-origin: top center;
    animation: cp-custom-select-in 0.16s ease-out;
}

/* Portaled to <body> so .cp-user-group overflow:hidden cannot clip long lists */
.cp-custom-select__menu--portal {
    position: fixed !important;
    right: auto !important;
    margin: 0 !important;
    min-width: 0;
    z-index: 2000 !important;
}

.cp-custom-select__menu.is-dropup {
    transform-origin: bottom center;
}

.cp-custom-select__menu.is-dropup::before {
    top: auto;
    bottom: -6px;
    border-left: 0;
    border-top: 0;
    border-right: 1px solid rgba(0, 212, 255, 0.38);
    border-bottom: 1px solid rgba(0, 212, 255, 0.38);
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.2);
}

.cp-custom-select__menu::before {
    content: "";
    position: absolute;
    top: -6px;
    left: 1.15rem;
    width: 12px;
    height: 12px;
    background: #1a2436;
    border-left: 1px solid rgba(0, 212, 255, 0.38);
    border-top: 1px solid rgba(0, 212, 255, 0.38);
    transform: rotate(45deg);
    box-shadow: -2px -2px 8px rgba(0, 0, 0, 0.2);
    z-index: 1;
}

@keyframes cp-custom-select-in {
    from { opacity: 0; transform: translateY(-6px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.cp-custom-select__option {
    display: flex;
    align-items: center;
    width: 100%;
    text-align: left;
    border: 0;
    background: transparent;
    color: var(--cp-ink, #eaf6ff);
    font: inherit;
    font-size: 0.88rem;
    font-weight: 600;
    padding: 0.6rem 0.75rem;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
}

.cp-custom-select__option.is-placeholder-option {
    font-weight: 500;
    color: var(--cp-ink-faint, rgba(200, 215, 240, 0.55));
}

.cp-custom-select__option:hover,
.cp-custom-select__option:focus-visible {
    background: rgba(0, 212, 255, 0.18);
    color: #eaf6ff;
    outline: none;
}

.cp-custom-select__option.is-selected {
    background: rgba(0, 212, 255, 0.22);
    color: #fff;
}

.cp-custom-select__trigger.is-invalid {
    border-color: var(--cp-invalid-color, #dc3545) !important;
}

.cp-custom-select__option.is-disabled,
.cp-custom-select__option:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

html[data-cp-theme="light"] .cp-custom-select__trigger {
    color-scheme: light;
    background-color: var(--cp-well-deep, #c8d6ec) !important;
    background-image: linear-gradient(180deg, rgba(61, 124, 255, 0.14), rgba(61, 124, 255, 0.05)) !important;
    border-color: color-mix(in srgb, var(--cp-cobalt, #3d7cff) 35%, var(--cp-border-strong)) !important;
    box-shadow:
        inset 0 2px 8px rgba(30, 60, 110, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.65),
        var(--cp-field-glow) !important;
}

html[data-cp-theme="light"] .cp-custom-select__menu {
    border-color: color-mix(in srgb, var(--cp-accent, #00d4ff) 45%, #6a9fd4);
    background:
        linear-gradient(165deg, rgba(0, 212, 255, 0.1), transparent 42%),
        linear-gradient(180deg, #f7fbff, #e8f0fa);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.9) inset,
        0 0 0 1px rgba(30, 60, 110, 0.08),
        0 18px 36px rgba(18, 45, 73, 0.18),
        0 0 20px rgba(0, 212, 255, 0.1);
}

html[data-cp-theme="light"] .cp-custom-select__menu::before {
    background: #f7fbff;
    border-left-color: color-mix(in srgb, var(--cp-accent, #00d4ff) 45%, #6a9fd4);
    border-top-color: color-mix(in srgb, var(--cp-accent, #00d4ff) 45%, #6a9fd4);
}

html[data-cp-theme="light"] .cp-custom-select__option {
    color: #0a2a4a;
}

html[data-cp-theme="light"] .cp-custom-select__option:hover,
html[data-cp-theme="light"] .cp-custom-select__option:focus-visible,
html[data-cp-theme="light"] .cp-custom-select__option.is-selected {
    background: rgba(0, 212, 255, 0.16);
    color: #061828;
}

@media (prefers-reduced-motion: reduce) {
    .cp-custom-select__menu {
        animation: none;
    }
}

/* Soft-bevel cyan trigger when .btn-primary opens a dropdown */
.btn.btn-primary.dropdown-toggle:not(.cp-btn-cat)::after {
    margin-left: 0.45rem;
    opacity: 0.85;
}

.btn.btn-primary.dropdown-toggle:not(.cp-btn-cat)[aria-expanded="true"] {
    filter: brightness(1.05);
}

/* -------------------------------------------------------------------------- */
/* Invalid state — keep accent system readable                                  */
/* -------------------------------------------------------------------------- */
.cp-user-group--market .form-control.is-invalid,
.cp-user-group--market .form-select.is-invalid,
.cp-section-collapsible .form-control.is-invalid,
.cp-form-max-1080 .form-control.is-invalid,
#register-form .form-control.is-invalid,
#edit-profile-form .form-control.is-invalid {
    border-color: var(--cp-invalid-color) !important;
    box-shadow:
        var(--cp-elev-well),
        0 0 0 0.15rem color-mix(in srgb, var(--cp-danger) 28%, transparent) !important;
}

.cp-datetime-control:has(.is-invalid),
.cp-loc-address-line.input-group:has(.is-invalid) {
    border-color: var(--cp-invalid-color) !important;
}

/* -------------------------------------------------------------------------- */
/* Event Schedule — compact summary + Open-ended / Ends at                      */
/* -------------------------------------------------------------------------- */
.cp-event-schedule__summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 0.75rem;
    padding: 0.65rem 0.85rem;
    border-radius: var(--cp-radius-sm);
    border: 1px solid color-mix(in srgb, var(--cp-accent) 28%, var(--cp-border-strong));
    background: var(--cp-well, var(--cp-sunken));
    box-shadow:
        var(--cp-elev-well),
        var(--cp-field-glow);
}

.cp-event-schedule__summary-text {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--cp-ink);
    line-height: 1.35;
}

.cp-event-schedule__edit-btn {
    appearance: none;
    border: 1px solid var(--cp-border);
    background: var(--cp-raised);
    color: var(--cp-accent);
    border-radius: var(--cp-radius-pill);
    padding: 0.3rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
}

.cp-event-schedule__edit-btn:hover {
    border-color: color-mix(in srgb, var(--cp-accent) 40%, var(--cp-border));
}

.cp-event-schedule__panel {
    margin-top: 0.75rem;
}

.cp-event-schedule__row {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0.5rem 0.65rem;
}

.cp-event-schedule__solo {
    flex: 0 1 auto;
    min-height: var(--cp-control-height, 42px);
    height: var(--cp-control-height, 42px);
    width: auto;
    min-width: 9.5rem;
    max-width: 12rem;
    border-radius: var(--cp-radius-sm) !important;
    border: 1px solid color-mix(in srgb, var(--cp-accent) 28%, var(--cp-border-strong)) !important;
    background: var(--cp-well-deep, var(--cp-sunken)) !important;
    box-shadow:
        var(--cp-elev-well),
        var(--cp-field-glow);
    color: var(--cp-ink) !important;
    font-variant-numeric: tabular-nums;
}

.cp-event-schedule__solo.form-select {
    min-width: 7.5rem;
    max-width: 9.5rem;
}

.cp-event-schedule__solo:focus {
    outline: none;
    border-color: color-mix(in srgb, var(--cp-accent) 70%, var(--cp-border-strong)) !important;
    box-shadow:
        var(--cp-elev-well),
        var(--cp-field-glow-focus) !important;
}

.cp-event-schedule__end-mode,
.cp-event-schedule__mode-pill {
    display: inline-grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
    padding: 4px;
    min-height: var(--cp-control-height, 42px);
    width: min(100%, 16rem);
    border-radius: var(--cp-radius-pill);
    border: 1px solid color-mix(in srgb, var(--cp-cobalt) 40%, var(--cp-border));
    background: var(--cp-well-deep, var(--cp-sunken));
    box-shadow:
        inset 0 3px 10px rgba(0, 0, 0, 0.45),
        var(--cp-field-glow);
    align-self: center;
}

.cp-event-schedule__end-mode > .btn-check,
.cp-event-schedule__mode-pill > .btn-check {
    position: absolute;
    clip: rect(0, 0, 0);
    pointer-events: none;
}

.cp-event-schedule__end-seg,
.cp-event-schedule__mode-seg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0.35rem 0.55rem;
    border-radius: var(--cp-radius-pill);
    text-align: center;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--cp-ink-muted);
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    transition:
        background var(--cp-duration-fast) ease,
        color var(--cp-duration-fast) ease,
        box-shadow var(--cp-duration-fast) ease;
}

.cp-event-schedule__end-seg:hover,
.cp-event-schedule__mode-seg:hover {
    color: var(--cp-ink);
}

.cp-event-schedule__end-mode > .btn-check:checked + .cp-event-schedule__end-seg,
.cp-event-schedule__mode-pill > .btn-check:checked + .cp-event-schedule__mode-seg {
    color: var(--cp-accent-ink);
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--cp-accent) 92%, #ffffff) 0%,
        var(--cp-accent) 45%,
        var(--cp-accent-strong) 100%
    );
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.35) inset,
        0 4px 12px color-mix(in srgb, var(--cp-accent-glow) 50%, transparent);
}

.cp-event-schedule__hint {
    margin: 0.5rem 0 0;
    font-size: 0.75rem;
    color: var(--cp-accent);
    line-height: 1.35;
}

.cp-event-schedule__hint[hidden] {
    display: none !important;
}

/*
 * Pill selected lip — last-loaded override.
 * Selected segment: light edge on top, dark lip on BOTTOM (never press-in top).
 * Theme/Units use the same :checked path as Personal/Business.
 */
.cp-radio-pill .btn-check:checked + .btn,
.cp-radio-pill .btn-check:checked + label.btn,
.cp-theme-toggle .btn-check:checked + .btn,
.cp-theme-toggle .btn-check:checked + label.btn,
.cp-units-toggle .btn-check:checked + .btn,
.cp-units-toggle .btn-check:checked + label.btn {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.42),
        inset 0 -2px 0 rgba(0, 0, 0, 0.28) !important;
    transform: none !important;
    filter: none !important;
    text-shadow: none !important;
}