/* TCE Stadkiezer — follows DESIGN.md */
.tce-cp {
    --tce-cp-accent: var(--e-global-color-secondary, #007EF5);
    --tce-cp-heading-font: var(--e-global-typography-primary-font-family, "Parkinsans"), sans-serif;
    --tce-cp-field-bg: #fff;
    --tce-cp-field-text: #1a1a1a;
    --tce-cp-field-border: rgba(0, 0, 0, .08);
    --tce-cp-field-border-width: 1px;
    --tce-cp-field-radius: 10px;
    --tce-cp-height: 48px;
    --tce-cp-btn-bg: var(--tce-cp-accent);
    --tce-cp-btn-text: #fff;
    --tce-cp-btn-hover-bg: var(--tce-cp-btn-bg);
    --tce-cp-btn-hover-text: var(--tce-cp-btn-text);
    --tce-cp-btn-hover-filter: brightness(.92);
    --tce-cp-btn-radius: 10px;
    --tce-cp-error: #c62828;

    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: var(--tce-cp-gap, 12px);
    width: var(--tce-cp-width, auto);
    min-width: var(--tce-cp-form-min, 0);
    max-width: var(--tce-cp-max, 100%);
    margin: var(--tce-cp-margin, 0);
    box-sizing: border-box;
}
/* Shrink-wrap unless "Volle breedte" */
.elementor-widget-tce_city_picker .elementor-widget-container { display: flex; flex-direction: column; }

.tce-cp .tce-cp__field {
    position: relative;
    /* A real width (not only flex-basis), so the shrink-wrapped form counts it
       and the button fits next to it instead of wrapping. */
    flex: var(--tce-cp-grow, 0) 1 auto;
    width: var(--tce-cp-field-w, var(--tce-cp-select-width, 240px));
    min-width: 0;
}

.tce-cp .tce-cp__select {
    -webkit-appearance: none;
    appearance: none;
    display: block;
    width: 100%;
    height: var(--tce-cp-height);
    min-height: 44px;
    margin: 0;
    padding: 0 44px 0 16px;
    font-size: 16px; /* no iOS zoom on focus */
    line-height: 1.2;
    color: var(--tce-cp-field-text);
    background: var(--tce-cp-field-bg);
    border: var(--tce-cp-field-border-width) solid var(--tce-cp-field-border);
    border-radius: var(--tce-cp-field-radius);
    box-shadow: none;
    cursor: pointer;
    box-sizing: border-box;
}
.tce-cp .tce-cp__chevron {
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
    color: var(--tce-cp-field-text);
    pointer-events: none;
}

.tce-cp .tce-cp__btn {
    flex: 0 0 auto;
    width: var(--tce-cp-btn-width, auto);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    height: var(--tce-cp-height);
    margin: 0;
    padding: 10px 22px;
    font-family: var(--tce-cp-heading-font);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    color: var(--tce-cp-btn-text);
    background: var(--tce-cp-btn-bg);
    border: 0;
    border-radius: var(--tce-cp-btn-radius);
    box-shadow: none;
    cursor: pointer;
    box-sizing: border-box;
}
/* Extra class beats theme button resets (Hello: pink on hover/focus) */
.tce-cp .tce-cp__btn:hover,
.tce-cp .tce-cp__btn:focus {
    color: var(--tce-cp-btn-hover-text);
    background: var(--tce-cp-btn-hover-bg);
    filter: var(--tce-cp-btn-hover-filter);
}

.tce-cp .tce-cp__select:focus { outline: none; }
.tce-cp .tce-cp__select:focus-visible,
.tce-cp .tce-cp__btn:focus-visible {
    outline: 2px solid var(--tce-cp-accent);
    outline-offset: 2px;
}

.tce-cp.is-invalid .tce-cp__select { border-color: var(--tce-cp-error); }
.tce-cp .tce-cp__error {
    flex: 1 0 100%;
    order: 3;
    margin: 0;
    font-size: 14px;
    font-weight: 500;
    color: var(--tce-cp-error);
}
.tce-cp .tce-cp__error[hidden] { display: none; }

.tce-cp .screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.tce-cp__editor-note {
    margin: 0;
    padding: 12px 16px;
    font-size: 14px;
    color: #5f6368;
    background: var(--e-global-color-primary, #FDF6EC);
    border-radius: 10px;
}

@media (prefers-reduced-motion: no-preference) {
    .tce-cp .tce-cp__btn { transition: background-color .15s ease, color .15s ease, filter .15s ease; }
    .tce-cp .tce-cp__select { transition: border-color .15s ease; }
}