/**
 * MetForm — Select & Telephone = text input (50px / #E0E0E0 / 5px)
 *
 * .mf-input.mf-input-select = react-select CONTAINER (div), not the field.
 * MetForm style.css:
 *   - .mf_select__control { padding: 12px } → grows past 50px
 *   - .mf_select__indicator = CSS border-triangle caret + svg { display:none }
 *     → our padding !important was crushing that into a dark bar
 */

body .mf-form-wrapper,
body .metform-form-content,
body .elementor-widget-metform,
body .elementor-widget-mf-select,
body .elementor-widget-mf-telephone,
body .elementor-widget-mf-mobile {
    --mf-h: 50px;
    --mf-pad: 12px;
    --mf-radius: 5px;
    --mf-border: #e0e0e0;
    --mf-bg: #fff;
    --mf-color: #0d0d12;
    /* Formdaki text/email ile aynı Elementor placeholder rengi */
    --mf-ph: #818898;
    --mf-focus: var(--e-global-color-uicore_primary, #153d25);
}

/* Container: no chrome — only the inner control is the field */
body .mf-input.mf-input-select,
body .mf-input.mf-input-multiselect,
body .mf-form-wrapper .mf-input.mf-input-select,
body .metform-form-content .mf-input.mf-input-select {
    display: block !important;
    width: 100% !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    line-height: normal !important;
    color: inherit !important;
}

/* Visible field — match input.mf-input box */
body .mf_select__control,
body .mf-input-select .mf_select__control,
body .mf-input.mf-input-select .mf_select__control,
body .mf-form-wrapper .mf_select__control,
body .metform-form-content .mf_select__control,
body .elementor-widget-mf-select .mf_select__control,
body .mf_multiselect__control,
body .mf-input-multiselect .mf_multiselect__control {
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    height: var(--mf-h) !important;
    min-height: var(--mf-h) !important;
    max-height: var(--mf-h) !important;
    padding: 0 !important;
    margin: 0 !important;
    background-color: var(--mf-bg) !important;
    border: 1px solid var(--mf-border) !important;
    border-radius: var(--mf-radius) !important;
    box-shadow: none !important;
    cursor: pointer;
    color: var(--mf-color) !important;
    font-size: 16px !important;
    line-height: 24px !important;
    transition: border-color .15s ease;
}

body .mf_select__control:hover,
body .mf_select__control--is-focused,
body .mf_select__control--menu-is-open,
body .mf-input-select .mf_select__control:hover,
body .mf-input-select .mf_select__control--is-focused,
body .mf-form-wrapper .mf_select__control:hover,
body .mf-form-wrapper .mf_select__control--is-focused,
body .mf_multiselect__control:hover,
body .mf_multiselect__control--is-focused {
    border-color: var(--mf-focus) !important;
    box-shadow: none !important;
}

body .mf_select__value-container,
body .mf_multiselect__value-container {
    display: flex !important;
    align-items: center !important;
    align-self: stretch !important;
    flex-wrap: nowrap !important;
    flex: 1 1 auto !important;
    padding: 0 var(--mf-pad) !important;
    margin: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    overflow: hidden;
}

body .mf_select__placeholder,
body .mf_multiselect__placeholder,
body .mf_select__single-value,
body .mf_multiselect__single-value {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 24px !important;
    font-size: 16px !important;
    position: static !important;
    top: auto !important;
    transform: none !important;
    max-width: 100%;
    grid-area: unset !important;
}

body .mf_select__placeholder,
body .mf_multiselect__placeholder,
body .mf-input-select .mf_select__placeholder,
body .mf-form-wrapper .mf_select__placeholder,
body .elementor-widget-mf-select .mf_select__placeholder {
    color: var(--mf-ph) !important;
    opacity: 1 !important;
}

body .mf_select__single-value {
    color: var(--mf-color) !important;
}

/* Tüm MetForm input placeholder → sistem #818898 */
body .mf-form-wrapper .mf-input::placeholder,
body .mf-form-wrapper .mf-input::-webkit-input-placeholder,
body .metform-form-content .mf-input::placeholder,
body .metform-form-content .mf-input::-webkit-input-placeholder,
body .elementor-widget-mf-telephone .mf-input::placeholder,
body .elementor-widget-mf-telephone .mf-input::-webkit-input-placeholder,
body .elementor-widget-mf-mobile .mf-input::placeholder,
body .elementor-widget-mf-mobile .mf-input::-webkit-input-placeholder,
body .mf-input-wrapper .iti input::placeholder,
body .mf-input-wrapper .iti input::-webkit-input-placeholder {
    color: var(--mf-ph) !important;
    opacity: 1 !important;
}

body .mf_select__input-container,
body .mf_select__input,
body .mf_select__input input {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 24px !important;
    font-size: 16px !important;
    color: var(--mf-color) !important;
}

/* Hide react-select dummy input from layout */
body .mf_select__input-container {
    position: absolute !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

body .mf_select__indicators,
body .mf_multiselect__indicators {
    display: flex !important;
    align-items: center !important;
    align-self: stretch !important;
    flex-shrink: 0 !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
}

body .mf_select__indicator-separator,
body .mf_multiselect__indicator-separator {
    display: none !important;
}

/*
 * MetForm draws the caret with CSS borders + hides the SVG.
 * Reset that and show a proper chevron (same idea as native select).
 */
body .mf_select__dropdown-indicator,
body .mf_multiselect__dropdown-indicator,
body .mf_select__indicator,
body .mf-input-select .mf_select__indicator,
body .mf-input-select .mf_select__dropdown-indicator {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: stretch !important;
    box-sizing: border-box !important;
    padding: 0 14px 0 4px !important;
    margin: 0 !important;
    border: 0 !important;
    border-width: 0 !important;
    border-style: none !important;
    border-color: transparent !important;
    background: transparent !important;
    color: #6b6b6b !important;
    height: auto !important;
    min-height: 0 !important;
    width: auto !important;
}

body .mf_select__dropdown-indicator > svg,
body .mf_select__indicator > svg,
body .mf-input-select .mf_select__indicator > svg,
body .mf-input-select .mf_select__dropdown-indicator > svg,
body .mf-input-multiselect .mf_multiselect__dropdown-indicator > svg {
    display: block !important;
    width: 12px !important;
    height: 12px !important;
    fill: #6b6b6b !important;
    flex-shrink: 0;
}

body .mf_select__menu,
body .mf_multiselect__menu {
    background: #fff !important;
    border: 1px solid var(--mf-border) !important;
    border-radius: var(--mf-radius) !important;
    box-shadow: 0 8px 24px rgba(15, 31, 22, .1) !important;
    z-index: 40;
    margin-top: 4px !important;
}

body .mf_select__option,
body .mf_multiselect__option {
    padding: 10px 12px !important;
    font-size: 16px !important;
    line-height: 1.4 !important;
    color: var(--mf-color) !important;
    cursor: pointer;
}

body .mf_select__option--is-focused,
body .mf_multiselect__option--is-focused {
    background: #f1f5f0 !important;
}

body .mf_select__option--is-selected,
body .mf_multiselect__option--is-selected {
    background: var(--mf-focus) !important;
    color: #fff !important;
}

/* Native select */
body .mf-form-wrapper select.mf-input,
body .metform-form-content select.mf-input {
    box-sizing: border-box !important;
    width: 100% !important;
    height: var(--mf-h) !important;
    min-height: var(--mf-h) !important;
    padding: var(--mf-pad) 36px var(--mf-pad) var(--mf-pad) !important;
    background-color: var(--mf-bg) !important;
    border: 1px solid var(--mf-border) !important;
    border-radius: var(--mf-radius) !important;
    color: var(--mf-color) !important;
    font-size: 16px !important;
    line-height: 24px !important;
    box-shadow: none !important;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236b6b6b' d='M1.4.6 6 5.2 10.6.6 12 2 6 8 0 2z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
}

/*
 * Telephone + Mobile (intl-tel-input)
 * MetForm mobile: .iti wrapper + dial-code flag; default MetForm paints flag bg #f7f6f6
 */
body .elementor-widget-mf-telephone input.mf-input[type="tel"],
body .elementor-widget-mf-mobile input.mf-input[type="tel"],
body .elementor-widget-mf-mobile input.mf-input,
body .mf-form-wrapper input.mf-input[type="tel"],
body .metform-form-content input.mf-input[type="tel"],
body .mf-input-wrapper .iti input.mf-input,
body .mf-input-wrapper .iti input[type="tel"],
body .mf-input-wrapper .iti > input {
    box-sizing: border-box !important;
    width: 100% !important;
    height: var(--mf-h) !important;
    min-height: var(--mf-h) !important;
    max-height: var(--mf-h) !important;
    padding: var(--mf-pad) !important;
    background-color: var(--mf-bg) !important;
    border: 1px solid var(--mf-border) !important;
    border-radius: var(--mf-radius) !important;
    color: var(--mf-color) !important;
    font-size: 16px !important;
    font-family: "DM Sans", Arial, sans-serif !important;
    line-height: 24px !important;
    box-shadow: none !important;
    outline: none !important;
}

body .mf-input-wrapper .iti,
body .elementor-widget-mf-mobile .iti,
body .mf-form-wrapper .iti {
    width: 100% !important;
    display: block !important;
    position: relative;
}

/* Bayrak / ülke kodu alanı — text input ile aynı kutu içinde */
body .mf-input-wrapper .iti .iti__flag-container,
body .mf-input-wrapper .iti > .iti__flag-container {
    display: block !important;
    height: var(--mf-h) !important;
}

body .mf-input-wrapper .iti__selected-flag,
body .mf-input-wrapper .iti--separate-dial-code .iti__selected-flag,
body .mf-input-wrapper .iti--allow-dropdown .iti__selected-flag {
    height: var(--mf-h) !important;
    min-height: var(--mf-h) !important;
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    border-radius: var(--mf-radius) 0 0 var(--mf-radius) !important;
    padding: 0 8px 0 12px !important;
    box-sizing: border-box !important;
}

body .mf-input-wrapper .iti__selected-dial-code {
    color: var(--mf-color) !important;
    font-size: 16px !important;
    line-height: 24px !important;
    margin-left: 6px !important;
}

body .mf-input-wrapper .iti__arrow {
    border-top-color: #6b6b6b !important;
}

body .mf-input-wrapper .iti--allow-dropdown input.mf-input,
body .mf-input-wrapper .iti--allow-dropdown > input,
body .mf-input-wrapper .iti--separate-dial-code input.mf-input,
body .mf-input-wrapper .iti--separate-dial-code > input {
    padding-left: 96px !important;
}

body .mf-input-wrapper .iti--separate-dial-code.iti--allow-dropdown input.mf-input,
body .mf-input-wrapper .iti--separate-dial-code.iti--allow-dropdown > input {
    padding-left: 110px !important;
}

body .mf-input-wrapper .iti__country-list {
    border: 1px solid var(--mf-border) !important;
    border-radius: var(--mf-radius) !important;
    box-shadow: 0 8px 24px rgba(15, 31, 22, .1) !important;
    z-index: 50;
}

body .elementor-widget-mf-telephone input.mf-input[type="tel"]:hover,
body .elementor-widget-mf-mobile input.mf-input:hover,
body .mf-input-wrapper .iti input:hover {
    border-color: var(--mf-border) !important;
}

body .mf-input-wrapper .iti input:focus,
body .elementor-widget-mf-telephone input.mf-input[type="tel"]:focus,
body .elementor-widget-mf-mobile input.mf-input:focus,
body select.mf-input:focus {
    border-color: var(--mf-focus) !important;
    outline: none !important;
    box-shadow: none !important;
}

@media (max-width: 767px) {
    body .mf-form-wrapper,
    body .metform-form-content,
    body .elementor-widget-mf-select,
    body .elementor-widget-mf-telephone,
    body .elementor-widget-mf-mobile {
        --mf-h: 48px;
    }
}