/* Food For Life — checkout address search + delivery-range notice */

.ffl-ac {
    --ffl-green: #1f6b3b;
    --ffl-green-dark: #17512d;
    --ffl-ring: rgba(31, 107, 59, 0.18);
    --ffl-line: #e4e7e4;
    --ffl-ink: #1c231d;
    --ffl-muted: #6b746c;
    box-sizing: border-box;
    margin: 0 0 20px;
    padding: 16px 16px 14px;
    background: #fff;
    border: 1px solid var(--ffl-line);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(20, 40, 25, 0.04), 0 8px 24px rgba(20, 40, 25, 0.06);
    font-family: inherit;
}
.ffl-ac *, .ffl-ac *::before, .ffl-ac *::after { box-sizing: border-box; }

.ffl-ac-label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ffl-green);
    margin: 0 0 10px 2px;
}

.ffl-ac-row { display: flex; gap: 8px; align-items: stretch; }

.ffl-ac-field {
    position: relative;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
}
.ffl-ac-pin {
    position: absolute;
    left: 12px;
    display: inline-flex;
    color: var(--ffl-green);
    pointer-events: none;
}
.ffl-ac-input {
    width: 100%;
    height: 46px;
    padding: 0 14px 0 40px;
    font-size: 15px;
    color: var(--ffl-ink);
    background: #f8faf8;
    border: 1.5px solid var(--ffl-line);
    border-radius: 10px;
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.ffl-ac-input::placeholder { color: #9aa39c; }
.ffl-ac-input:focus {
    background: #fff;
    border-color: var(--ffl-green);
    box-shadow: 0 0 0 4px var(--ffl-ring);
}

.ffl-ac-geo {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 46px;
    padding: 0 15px;
    font-size: 13.5px;
    font-weight: 600;
    white-space: nowrap;
    color: var(--ffl-green);
    background: #eef6f0;
    border: 1.5px solid transparent;
    border-radius: 10px;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, transform .05s ease;
}
.ffl-ac-geo:hover { background: var(--ffl-green); color: #fff; }
.ffl-ac-geo:active { transform: translateY(1px); }
.ffl-ac-geo.loading { pointer-events: none; opacity: .7; }
.ffl-ac-geo.loading svg { animation: ffl-spin 0.9s linear infinite; }

/* Dropdown */
.ffl-ac-dd {
    display: none;
    margin-top: 8px;
    border: 1px solid var(--ffl-line);
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 12px 30px rgba(20, 40, 25, 0.12);
}
.ffl-ac-dd.open { display: block; }
.ffl-ac-item {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 14px;
    cursor: pointer;
    border-bottom: 1px solid #f1f3f1;
    transition: background .12s ease;
}
.ffl-ac-item:last-child { border-bottom: 0; }
.ffl-ac-item.active, .ffl-ac-item:hover { background: #f2f8f4; }
.ffl-ac-item-pin { color: #9aa39c; display: inline-flex; flex: 0 0 auto; }
.ffl-ac-item.active .ffl-ac-item-pin { color: var(--ffl-green); }
.ffl-ac-item-txt { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.ffl-ac-item-txt b { font-weight: 600; font-size: 14px; color: var(--ffl-ink); }
.ffl-ac-item-txt em { font-style: normal; font-size: 12.5px; color: var(--ffl-muted); }
.ffl-ac-empty { padding: 14px; text-align: center; color: var(--ffl-muted); font-size: 13.5px; }

/* Range notice */
.ffl-ac-notice {
    display: none;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    padding: 11px 14px;
    border-radius: 10px;
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.35;
}
.ffl-ac-notice.ffl-ac-show { display: flex; }
.ffl-ac-notice svg { flex: 0 0 auto; }
.ffl-ac-checking { background: #f4f6f4; color: var(--ffl-muted); }
.ffl-ac-in { background: #e9f6ee; color: #17512d; }
.ffl-ac-in svg { color: var(--ffl-green); }
.ffl-ac-out { background: #fdf3e7; color: #8a5a12; }
.ffl-ac-out svg { color: #d08a1e; }

.ffl-ac-spin {
    width: 15px; height: 15px;
    border: 2px solid #d4dad5;
    border-top-color: var(--ffl-green);
    border-radius: 50%;
    display: inline-block;
    animation: ffl-spin 0.8s linear infinite;
}
@keyframes ffl-spin { to { transform: rotate(360deg); } }

@media (max-width: 480px) {
    .ffl-ac-row { flex-direction: column; }
    .ffl-ac-geo { justify-content: center; }
}

/* Google unavailable — box stays visible, search disabled */
.ffl-ac-disabled .ffl-ac-input { background: #f4f5f4; color: #8a918b; cursor: not-allowed; }
.ffl-ac-disabled .ffl-ac-label { color: #8a918b; }

/* ── Layout safety ──────────────────────────────────────────────
   Flex items default to min-width:auto, so the search row could refuse to
   shrink below its content width. Inside a narrow checkout column that
   inflates the column's minimum width and forces WooCommerce's two-column
   layout to wrap (looking like the mobile layout). These keep the widget
   fully shrinkable and never wider than its container. */
.ffl-ac { max-width: 100%; min-width: 0; }
.ffl-ac-row { flex-wrap: wrap; min-width: 0; }
.ffl-ac-field { flex: 1 1 180px; min-width: 0; }
.ffl-ac-input { min-width: 0; }
.ffl-ac-geo { flex: 0 1 auto; min-width: 0; }
.ffl-ac-dd { max-width: 100%; }
.ffl-ac-item-txt { min-width: 0; }
.ffl-ac-item-txt b, .ffl-ac-item-txt em { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ffl-ac-notice { min-width: 0; }
.ffl-ac-notice span { min-width: 0; }

/* ── Theme override defence ─────────────────────────────────────
   Razzi (like most WooCommerce themes) styles every <button> globally,
   which repainted this button dark-green while leaving our dark-green
   text — an unreadable dark-on-dark label. These rules out-specify the
   theme and guarantee a legible pairing in both states. */
.ffl-ac button.ffl-ac-geo {
    background: #eef6f0 !important;
    color: #1f6b3b !important;
    border: 1.5px solid #d7e7dd !important;
    box-shadow: none !important;
    text-shadow: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    font-weight: 600 !important;
    font-size: 13.5px !important;
    height: 46px !important;
    min-height: 0 !important;
    width: auto !important;
    padding: 0 16px !important;
    margin: 0 !important;
    border-radius: 10px !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    cursor: pointer !important;
}
.ffl-ac button.ffl-ac-geo:hover,
.ffl-ac button.ffl-ac-geo:focus {
    background: #1f6b3b !important;
    color: #ffffff !important;
    border-color: #1f6b3b !important;
}
.ffl-ac button.ffl-ac-geo svg { stroke: currentColor !important; fill: none !important; }
.ffl-ac button.ffl-ac-geo span { color: inherit !important; font: inherit !important; }

/* ── Input: defend against theme field styles ───────────────────
   Razzi's global input rules overrode our left padding, so the pin icon
   sat on top of the placeholder text. Pin the geometry explicitly and
   centre the icon vertically. */
.ffl-ac input.ffl-ac-input {
    width: 100% !important;
    height: 46px !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 14px 0 44px !important;   /* 44px clears the pin */
    font-size: 15px !important;
    line-height: normal !important;
    color: #1c231d !important;
    background: #f8faf8 !important;
    border: 1.5px solid #e4e7e4 !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    outline: none !important;
}
.ffl-ac input.ffl-ac-input:focus {
    background: #ffffff !important;
    border-color: #1f6b3b !important;
    box-shadow: 0 0 0 4px rgba(31, 107, 59, 0.18) !important;
}
.ffl-ac .ffl-ac-pin {
    position: absolute !important;
    left: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 2 !important;
    line-height: 0 !important;
    pointer-events: none !important;
}
.ffl-ac-disabled input.ffl-ac-input {
    background: #f4f5f4 !important;
    color: #8a918b !important;
    cursor: not-allowed !important;
}

/* ── Mobile: stack cleanly ──────────────────────────────────────
   When the row becomes `flex-direction: column`, the `flex-basis: 180px`
   from the layout-safety block above is applied to the field's HEIGHT,
   not its width — which is what produced the large empty bands around
   the input on narrow screens. Reset the basis and let both controls
   size to their content, full width. */
@media (max-width: 600px) {
    .ffl-ac { padding: 14px !important; }
    .ffl-ac-row {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }
    .ffl-ac-field {
        flex: 0 0 auto !important;
        width: 100% !important;
        height: auto !important;
    }
    .ffl-ac button.ffl-ac-geo {
        width: 100% !important;
        justify-content: center !important;
    }
}