/**
 * BulCommerce — city/state autocomplete field styles.
 *
 * Styles the AJAX-driven city autocomplete widget that city-state-field.js
 * hydrates into the .flowcheckout--city-state mount point rendered by
 * CityStateField::pro_checkout() after each flowchkout_* shipping rate.
 *
 * DOM inventory (from city-state-field.js + CityStateField.php):
 *
 *   Server-rendered mount point:
 *     .flowcheckout--city-state[data-courier][data-cache]
 *
 *   JS-hydrated structure (built inside initContainer()):
 *     div.fc-citystate.multiselect[data-fc-state]
 *       span.multiselect__single.fc-citystate__single   — selected city text
 *       span.multiselect__placeholder.fc-citystate__placeholder — prompt text
 *       input.multiselect__input.fc-citystate__input    — search input
 *       ul.fc-citystate__results[role="listbox"]        — dropdown list
 *         li.fc-citystate__row[role="option"]           — selectable result row
 *         li.fc-citystate__msg[aria-disabled="true"]    — hint / empty message row
 *
 *   State modifiers:
 *     .fc-citystate__row.is-active   — keyboard/hover-highlighted row
 *     body.flowcheckout--enabled-city-state-field  — guards native field hiding
 *
 * Clean-room: written solely from PHP DOM output and JS source. No dist/ read.
 * House style: plain CSS, fc-* namespace, --fc-* custom properties, mobile-first.
 */

/* ===========================================================================
   Design tokens
   =========================================================================== */

:root {
    --fc-blue:       #3b5ef5;
    --fc-blue-dark:  #2545d4;
    --fc-green:      #16a34a;
    --fc-red:        #dc2626;
    --fc-orange:     #d97706;
    --fc-gray-50:    #f8fafc;
    --fc-gray-100:   #f1f5f9;
    --fc-gray-200:   #e2e8f0;
    --fc-gray-500:   #64748b;
    --fc-gray-700:   #334155;
    --fc-gray-900:   #0f172a;
    --fc-radius:     6px;
    --fc-shadow:     0 1px 3px rgba(0, 0, 0, .08);
}

/* ===========================================================================
   Mount-point reset
   =========================================================================== */

/* The PHP-rendered container; invisible until JS hydrates it. The JS appends
   content immediately on DOM-ready, so there is no flash — just ensure it
   participates in normal block flow with consistent spacing. */
.flowcheckout--city-state {
    display: block;
    margin: 10px 0 4px;
    position: relative;
    box-sizing: border-box;
    width: 100%;
    /* When the courier buttons render as a grid, this field lands inside it and
       otherwise shrinks to one column — span every column so it's full-width. */
    grid-column: 1 / -1;
}

/* ===========================================================================
   Hide the native WooCommerce city/state inputs when our widget is active.
   The body class is set by Assets::add_body_class() only when the option is
   enabled, so on sites without the feature these rules never fire.
   =========================================================================== */

/* wc-override: WooCommerce and themes set display:block on these rows. */
.flowcheckout--enabled-city-state-field #billing_city_field,
.flowcheckout--enabled-city-state-field #billing_state_field,
.flowcheckout--enabled-city-state-field #shipping_city_field,
.flowcheckout--enabled-city-state-field #shipping_state_field {
    display: none !important;
}

/* ===========================================================================
   Layout — inner wrapper
   =========================================================================== */

.fc-citystate {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 0 16px 0 44px;
    /* Magnifier icon on the left — turns the field into a clear search box. */
    background: #fbfcfe url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") no-repeat 16px center;
    background-size: 18px 18px;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
    box-sizing: border-box;
    cursor: text;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.fc-citystate:hover {
    border-color: #cbd5e1;
    background-color: #fff;
}

.fc-citystate:focus-within {
    border-color: var(--fc-blue);
    background-color: #fff;
    box-shadow: 0 0 0 4px rgba(59, 94, 245, .12);
}

/* ===========================================================================
   Components — placeholder and selected-value spans
   =========================================================================== */

/* Shown when nothing is selected and the input is empty. */
.fc-citystate__placeholder {
    position: absolute;
    left: 44px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    color: var(--fc-gray-400, #94a3b8);
    pointer-events: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: calc(100% - 60px);
    line-height: 1;
}

/* Shown (via JS .show()) when a city has been selected; covers the input. */
.fc-citystate__single {
    font-size: 14px;
    font-weight: 600;
    color: var(--fc-gray-900);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    flex: 1 1 auto;
    cursor: pointer;
    line-height: 1;
}

/* ===========================================================================
   Components — search input
   =========================================================================== */

/* wc-override: themes and WooCommerce apply border/background/box-shadow to
   every input; strip them all so our wrapper border is the visual boundary. */
input.fc-citystate__input {
    flex: 1 1 auto;
    min-width: 0;
    width: 100% !important;
    height: 44px;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    font-size: 14px;
    color: var(--fc-gray-900);
    line-height: 44px;
    outline: none;
    caret-color: var(--fc-blue);
}

input.fc-citystate__input::placeholder {
    color: transparent; /* placeholder handled by .fc-citystate__placeholder span */
}

/* ===========================================================================
   Components — dropdown results list
   =========================================================================== */

.fc-citystate__results {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    z-index: 9999;
    list-style: none;
    margin: 0;
    padding: 4px;
    background: #ffffff;
    border: 1px solid var(--fc-gray-200);
    border-radius: 12px;
    box-shadow: 0 12px 28px rgba(16, 24, 40, .14);
    max-height: 280px;
    overflow-y: auto;
    box-sizing: border-box;
    scroll-behavior: smooth;
}

/* Subtle scrollbar on webkit */
.fc-citystate__results::-webkit-scrollbar {
    width: 5px;
}

.fc-citystate__results::-webkit-scrollbar-track {
    background: var(--fc-gray-100);
}

.fc-citystate__results::-webkit-scrollbar-thumb {
    background: var(--fc-gray-200);
    border-radius: 99px;
}

/* ===========================================================================
   Components — result rows
   =========================================================================== */

/* Flex row with a real SVG icon child — same DOM/CSS shape as the Econt/Speedy
   office pickers' rows (.fc-econt-select__row-ic / .fc-speedy__opt-ic), so all
   three read as one design. A flex child can't be squeezed out by a theme's
   generic `li` padding reset the way an absolutely-positioned ::before icon
   (reserved via padding-left) could — no !important tug-of-war needed. */
.fc-citystate__row {
    display: flex !important; /* wc/theme-override */
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    font-size: 13.5px;
    color: var(--fc-gray-900);
    line-height: 1.4;
    cursor: pointer;
    border-radius: 8px;
    transition: background .08s ease, color .08s ease;
    list-style: none !important; /* wc/theme-override */
    margin: 0 !important;        /* wc/theme-override */
}

.fc-citystate__row-ic {
    flex-shrink: 0;
    color: var(--fc-blue);
}

.fc-citystate__row:hover .fc-citystate__row-ic,
.fc-citystate__row.is-active .fc-citystate__row-ic {
    color: var(--fc-blue-dark);
}

.fc-citystate__row-label {
    min-width: 0;
    flex: 1 1 auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ===========================================================================
   States — hover and keyboard-active row
   =========================================================================== */

.fc-citystate__row:hover,
.fc-citystate__row.is-active {
    background: #eef2ff;
    color: var(--fc-blue-dark);
}

/* ===========================================================================
   States — hint / empty / no-results message row
   =========================================================================== */

.fc-citystate__msg {
    display: block;
    padding: 10px 14px;
    font-size: 13px;
    color: var(--fc-gray-500);
    font-style: italic;
    text-align: center;
    cursor: default;
    list-style: none;
}

/* ===========================================================================
   States — loading (pulse animation on the wrapper border)
   The JS uses renderMessage() during the AJAX call (same result list), so we
   indicate loading via the data-fc-state attribute that initContainer sets.
   =========================================================================== */

/* When the hint/empty message is the only row (no results yet), give it room so
   it reads as vertically centered in the dropdown instead of stuck at the top. */
.fc-citystate__results .fc-citystate__msg:only-child {
    padding: 22px 14px;
}

.fc-citystate[data-fc-state] .fc-citystate__results .fc-citystate__msg:only-child {
    animation: fcCsfPulse 1.2s ease-in-out infinite;
}

@keyframes fcCsfPulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: .45; }
}

/* ===========================================================================
   Accessibility — focus-visible ring for keyboard-only navigation
   =========================================================================== */

.fc-citystate__row:focus-visible {
    outline: 2px solid var(--fc-blue);
    outline-offset: -2px;
}

.flowcheckout--city-state:focus-within .fc-citystate {
    /* Already handled by .fc-citystate:focus-within above */
}

/* ===========================================================================
   Responsive — mobile-first adjustments
   =========================================================================== */

@media (max-width: 600px) {
    .fc-citystate {
        min-height: 48px;
    }

    input.fc-citystate__input {
        height: 48px;
        line-height: 48px;
        font-size: 15px; /* prevent iOS auto-zoom (>= 16px or close) */
    }

    .fc-citystate__results {
        max-height: 220px;
    }

    .fc-citystate__row {
        padding: 10px 12px;
        font-size: 14px;
    }

    .fc-citystate__placeholder {
        font-size: 15px;
    }

    .fc-citystate__single {
        font-size: 15px;
    }
}

/* ===========================================================================
   Cart-drawer context — slightly more compact inside the inline checkout
   =========================================================================== */

.fc-cart-drawer__checkout .flowcheckout--city-state {
    margin: 6px 0 2px;
}

.fc-cart-drawer__checkout .fc-citystate__results {
    max-height: 200px;
}

/* ===========================================================================
   Print — hide the interactive widget entirely
   =========================================================================== */

@media print {
    .flowcheckout--city-state {
        display: none !important;
    }
}

/* Larger, more readable city text (rows, selected value, search input). */
.flowcheckout--city-state .fc-citystate__row,
.flowcheckout--city-state .fc-citystate__single,
.flowcheckout--city-state input.fc-citystate__input,
.flowcheckout--city-state .fc-citystate__placeholder {
    font-size: 18px;
}