/*
 * Retrogreen Lookup
 * Default styling is intentionally neutral. Host themes can override any
 * surface with the CSS custom properties below, or opt into a brand preset
 * with the [retrogreen_lookup style="ecology"] shortcode attribute.
 */

.retrogreen-lookup {
    --rgl-bg: #ffffff;
    --rgl-text: #1a1a1a;
    --rgl-muted: #5c6470;
    --rgl-border: #cfd4da;
    --rgl-accent: #0262b8;
    --rgl-accent-hover: #014e93;
    --rgl-accent-contrast: #ffffff;
    --rgl-radius: 8px;
    --rgl-input-radius: 5px;
    --rgl-font: inherit;
    --rgl-error: #b00020;
    --rgl-status-bg: #eef5fc;
    --rgl-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    --rgl-padding: 24px;
    --rgl-max-width: 640px;

    max-width: var(--rgl-max-width);
    margin: 0 auto;
    padding: var(--rgl-padding);
    background: var(--rgl-bg);
    border-radius: var(--rgl-radius);
    box-shadow: var(--rgl-shadow);
    font-family: var(--rgl-font);
    color: var(--rgl-text);
}

.retrogreen-lookup__heading {
    margin: 0 0 18px;
    font-size: 1.25rem;
    line-height: 1.35;
    font-weight: 600;
}

.retrogreen-lookup__field {
    margin-bottom: 14px;
}

.retrogreen-lookup__label {
    display: block;
    margin-bottom: 6px;
    font-size: 0.875rem;
    font-weight: 600;
}

.retrogreen-lookup__required {
    color: #cc0000;
    margin-left: 4px;
    font-weight: 700;
}

.retrogreen-lookup__row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: stretch;
}

.retrogreen-lookup__input,
.retrogreen-lookup__select {
    flex: 1 1 200px;
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid var(--rgl-border);
    border-radius: var(--rgl-input-radius);
    font-size: 1rem;
    background: #fff;
    color: inherit;
    box-sizing: border-box;
    font-family: inherit;
}

.retrogreen-lookup__input:focus,
.retrogreen-lookup__select:focus {
    outline: none;
    border-color: var(--rgl-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--rgl-accent) 18%, transparent);
}

.retrogreen-lookup__button {
    flex: 0 0 auto;
    padding: 10px 24px;
    background: var(--rgl-accent);
    color: var(--rgl-accent-contrast);
    border: 1px solid var(--rgl-accent);
    border-radius: var(--rgl-input-radius);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
    font-family: inherit;
}

.retrogreen-lookup__button:hover:not(:disabled),
.retrogreen-lookup__button:focus-visible:not(:disabled) {
    background: var(--rgl-accent-hover);
    border-color: var(--rgl-accent-hover);
}

.retrogreen-lookup__button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.retrogreen-lookup__error {
    margin: 8px 0 0;
    color: var(--rgl-error);
    font-size: 0.875rem;
}

.retrogreen-lookup__status {
    margin-top: 12px;
    padding: 10px 12px;
    background: var(--rgl-status-bg);
    border-radius: var(--rgl-input-radius);
    font-size: 0.95rem;
}

.retrogreen-lookup.is-loading .retrogreen-lookup__input,
.retrogreen-lookup.is-loading .retrogreen-lookup__button {
    opacity: 0.7;
}

/*
 * Manual entry container — revealed when the visitor picks "Add Manually"
 * at the top of the address dropdown. Each field uses the existing
 * .retrogreen-lookup__field / __label / __input styles, so the only thing
 * this surface needs is a bit of vertical breathing room from the rest.
 */
.retrogreen-lookup__manual {
    margin-top: 8px;
}

.retrogreen-lookup__manual .retrogreen-lookup__field {
    margin-bottom: 12px;
}

.retrogreen-lookup__manual [data-role="manual-submit"] {
    margin-top: 8px;
}

/*
 * Resume link. Lives at the top of the widget and only appears for
 * returning visitors (sessionStorage has a prior redirect URL). Styled as
 * a compact secondary affordance — not a primary CTA — so it never
 * competes with Find my home / Continue.
 */
.retrogreen-lookup__return {
    margin: 0 0 14px;
}

.retrogreen-lookup__return-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: transparent;
    color: var(--rgl-text);
    border: 1px solid var(--rgl-border);
    border-radius: 999px;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    line-height: 1.4;
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}

.retrogreen-lookup__return-link::after {
    content: " →";
    margin-left: 2px;
}

.retrogreen-lookup__return-link:hover,
.retrogreen-lookup__return-link:focus-visible {
    background: rgba(0, 0, 0, 0.04);
    border-color: var(--rgl-text);
    color: var(--rgl-text);
}

.retrogreen-lookup--unconfigured {
    padding: 12px 16px;
    border: 1px dashed var(--rgl-error);
    border-radius: 4px;
    color: var(--rgl-error);
    background: #fff5f5;
}

/*
 * Ecology preset.
 * Tracks the live ecology.co.uk brand: dark-teal text, lime-edged outline
 * button matching .btn-outline-lime, generous radii, host typography.
 * Designed to sit inside or beside a .vision-section / .build-section.
 */
.retrogreen-lookup--ecology {
    --rgl-bg: #ffffff;
    --rgl-text: #00312E;
    --rgl-muted: #4a5a58;
    --rgl-border: #d6dcd9;
    --rgl-accent: #a8e101;          /* lime CTA fill */
    --rgl-accent-hover: #94c800;    /* darker lime on hover */
    --rgl-accent-contrast: #00312E; /* dark-teal label sitting on lime */
    --rgl-radius: 18px;
    --rgl-input-radius: 999px;
    --rgl-button-radius: 999px;
    --rgl-button-height: 36px;
    --rgl-status-bg: #f4f7ee;
    --rgl-shadow: 0 8px 30px rgba(0, 49, 46, 0.08);
    --rgl-padding: 32px;
    --rgl-max-width: 720px;
}

.retrogreen-lookup--ecology .retrogreen-lookup__heading {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--rgl-text);
}

/*
 * Ecology preset stacks input above the action button (and the address
 * select above its trigger), mirroring the contact form on
 * ecology.co.uk/contact-us where each field sits on its own line and the
 * Submit button lives below. Button keeps its natural width and aligns
 * left so it visually matches that page's Submit.
 */
.retrogreen-lookup--ecology .retrogreen-lookup__row {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
}

.retrogreen-lookup--ecology .retrogreen-lookup__input,
.retrogreen-lookup--ecology .retrogreen-lookup__select {
    width: 100%;
    flex: 1 1 auto;
}

.retrogreen-lookup--ecology .retrogreen-lookup__button {
    align-self: flex-start;
    flex: 0 0 auto;
    width: auto;
}

.retrogreen-lookup--ecology .retrogreen-lookup__required {
    color: #cc0000;
    font-size: 1.1em;
}

/*
 * Shared form-control reset for the Ecology preset.
 * Tight vertical padding (4px) is what works visually against Ecology's
 * host CSS — anything larger lets the host's line-height rules push the
 * select's placeholder text out of the visible box.
 */
.retrogreen-lookup--ecology .retrogreen-lookup__input,
.retrogreen-lookup--ecology .retrogreen-lookup__select,
.retrogreen-lookup--ecology .retrogreen-lookup__button {
    box-sizing: border-box;
    line-height: 1.2;
    font-size: 1rem;
    font-family: inherit;
    margin: 0;
}

.retrogreen-lookup--ecology .retrogreen-lookup__input,
.retrogreen-lookup--ecology .retrogreen-lookup__select {
    padding: 4px 14px;
}

.retrogreen-lookup--ecology .retrogreen-lookup__button {
    height: var(--rgl-button-height);
    min-height: var(--rgl-button-height);
    border-radius: var(--rgl-button-radius);
    padding: 0 26px;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.retrogreen-lookup--ecology .retrogreen-lookup__button:hover:not(:disabled),
.retrogreen-lookup--ecology .retrogreen-lookup__button:focus-visible:not(:disabled) {
    background: var(--rgl-accent-hover);
    color: var(--rgl-text);
    border-color: var(--rgl-accent-hover);
}

/*
 * Resume link — secondary affordance only. Stays compact, dark-teal
 * outline, no fill. Sits at the top of the widget and gets out of the
 * way the moment the visitor starts a new lookup.
 */
.retrogreen-lookup--ecology .retrogreen-lookup__return-link {
    height: auto;
    min-height: 0;
    border-radius: 999px;
    padding: 6px 16px;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0;
    background: transparent;
    color: var(--rgl-text);
    border: 1px solid var(--rgl-text);
    box-sizing: border-box;
}

.retrogreen-lookup--ecology .retrogreen-lookup__return-link:hover,
.retrogreen-lookup--ecology .retrogreen-lookup__return-link:focus-visible {
    background: rgba(0, 49, 46, 0.06);
    color: var(--rgl-text);
    border-color: var(--rgl-text);
}

/*
 * Native <select> rendering varies across browsers and is sensitive to host
 * line-height rules — we've seen Ecology's CSS clip the placeholder text.
 * Take over rendering with appearance:none and a CSS-only chevron so the
 * select looks identical to the input and the placeholder always fits.
 */
.retrogreen-lookup--ecology .retrogreen-lookup__select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2300312E' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 12px 8px;
    padding-right: 40px;
    cursor: pointer;
}

/*
 * Section wrapper.
 * When wrap="section" is set, the shortcode emits a full-width <section>
 * that mirrors the host site's section pattern (Ecology uses
 * .build-section, .vision-section, etc.). The default padding lets the
 * lookup breathe between sibling sections.
 */
.retrogreen-lookup-section {
    padding: clamp(40px, 6vw, 96px) 0;
    background: transparent;
}

.retrogreen-lookup-section > .container,
.retrogreen-lookup-section > .retrogreen-lookup-section__inner {
    max-width: 1280px;
    margin: 0 auto;
    padding-left: clamp(16px, 4vw, 32px);
    padding-right: clamp(16px, 4vw, 32px);
}

.retrogreen-lookup-section--ecology {
    background: #FBF8F2;
}