/**
 * Faya Egypt Cities - frontend.
 *
 * In WC Blocks (the common case) we inject the same DOM that WC uses
 * for its own native <select> fields like Country and State / County
 * (`wc-blocks-components-select`). The theme's existing CSS targets
 * those classes, so our City dropdown automatically inherits its
 * border, focus state, label position, label colour, font sizes and
 * dropdown chevron - making it visually identical to neighbouring
 * fields.
 *
 * The rules below cover the non-WC-Blocks fallback (classic checkout
 * / unknown wrapper) and a couple of small adjustments for the WC
 * Blocks case.
 */

/* Layout container - applies in both contexts. */
.faya-ec-city-wrap {
    position: relative;
    margin: 0 0 16px;
    padding: 0;
}

/* ------------------------------------------------------------------
 * Standalone styling (non-WC-Blocks contexts only).
 * Skipped automatically when our wrap also has `.wc-blocks-components-select`.
 * ------------------------------------------------------------------ */
.faya-ec-city-wrap:not(.wc-blocks-components-select) > .faya-ec-city-label {
    display: block;
    font-size: 12px;
    line-height: 1;
    color: #6b7177;
    padding: 8px 12px 0;
    pointer-events: none;
}

.faya-ec-city-wrap:not(.wc-blocks-components-select) > .faya-ec-city-select {
    width: 100%;
    border: 1px solid var(--wc-form-border-color, #50575e);
    border-radius: 4px;
    outline: none;
    background: transparent;
    padding: 4px 12px 10px;
    padding-right: 32px;
    font-size: 14px;
    line-height: 1.4;
    color: inherit;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3e%3cpath fill='%2350575e' d='M6 8 0 0h12z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 12px center;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.faya-ec-city-wrap:not(.wc-blocks-components-select) > .faya-ec-city-select:focus {
    border-color: var(--wc-form-color-link, #2b3036);
    box-shadow: 0 0 0 1px var(--wc-form-color-link, #2b3036);
}

.faya-ec-city-select:disabled,
.faya-ec-city-select[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ------------------------------------------------------------------
 * Path A (WC Blocks renders the city as a real <select> server-side
 * via our locale override - rare, but possible). Force WC's floating
 * label into its raised position so it doesn't cover the placeholder
 * option.
 *
 * `:not(.faya-ec-city-label)` is defensive: in path B we mirror WC's
 * `wc-blocks-components-select` markup (different class entirely),
 * but if a future WC version puts our injected label inside a
 * `.wc-block-components-text-input` wrapper somehow, don't double-
 * transform it.
 * ------------------------------------------------------------------ */
.wc-block-components-text-input.faya-ec-has-select > label:not(.faya-ec-city-label) {
    transform: translateY(-12px) scale(0.75);
    transform-origin: top left;
}

.rtl .wc-block-components-text-input.faya-ec-has-select > label:not(.faya-ec-city-label),
[dir="rtl"] .wc-block-components-text-input.faya-ec-has-select > label:not(.faya-ec-city-label) {
    transform-origin: top right;
}