.wplf-map { width:100%; height:520px; min-height:500px; border-radius:.5rem; border:1px solid #e5e7eb; }

#wplf-home-form {
    .input-group {
        position: relative;
        margin-bottom:0;
    }
    input {
        &[type=text] {
            margin-bottom:0;
            height: 70px;
            border: 1px solid var(--color-light-blue);
            font-size: 21px;
            color: var(--color-black);
            font-family: var(--font-family-raleway);
            font-weight: var(--font-weight-light);
            padding-left: 8px;
            &::placeholder {
                color: black;
                @media only screen and (max-width:640px) {
                    font-size: 16px;
                }
            }
        }
    }
    button {
        background: var(--color-primary);
        width: 70px;
        height: 70px;
        position: absolute;
        right: -50px;
        top: 0px;
        color: white;
        font-size: 24px;
        &:hover {
            background: #0a1726;
        }
    }
}

#wplf-loc-form {
    padding: 32px;
    border: 1px solid #ccc;
    .input-group {
        position: relative;
        margin-bottom:0;
    }
    input {
        &[type=text] {
            margin-bottom:0;
            height: 55px;
            border: 1px solid #ccc;
            font-size: 21px;
            color: var(--color-black);
            font-family: var(--font-family-raleway);
            font-weight: var(--font-weight-light);
            padding-left: 32px;
            background: #f2f2f2;
            border-radius: 0;
            &::placeholder {
                font-size : 16px;
                letter-spacing : 0.4px;
                color : #808080;
            }
        }
    }
    button {
        font-size: 18px;
        font-weight: var(--font-weight-bold);
        background: var(--color-secondary);
        color: var(--color-white);
        position: relative;
        transition: all linear 0.1s;
        margin-bottom: 0;
        border-radius: 0;
        text-transform: uppercase;
        letter-spacing: 0.63px;
        width: 300px;
        height: 55px;
        &:hover {
            background: var(--color-terciary-hover);
        }
    }
}

a {
    &.set-my-store {
        color: var(--color-red);
        &.is-my-store {
            color: var(--color-black);
        }
    }
}

.loc-favs {
    a {
        color: var(--color-secondary);
        font-weight: var(--font-weight-semibold);
        letter-spacing: .4px;
        font-size: 15px;
        &.set-my-store {
            color: var(--color-red);
        }
    }
}

.wplf-status {
    font-weight: var(--font-weight-semibold);
    font-size: 18px;
    font-style: italic;
    margin: 12px auto 8px;
    color: white;
}

/* Map overlay loader */
.wplf-map-wrap { position: relative; }

.wplf-map-loader {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.65);
    backdrop-filter: blur(1px);
    z-index: 500;               /* above tiles layer */
}
.wplf-map-loader[hidden] { display: none; }

.wplf-map-loader .spinner {
    width: 56px; height: 56px;
    border: 4px solid #e5e7eb;  /* light ring */
    border-top-color: #111;      /* active segment */
    border-radius: 50%;
    animation: wplf-spin .8s linear infinite;
}

.wplf-map-loader .wplf-loading-text {
    margin-left: .75rem;
    color:#444; font-size:.95rem;
}
@keyframes wplf-spin { to { transform: rotate(360deg); } }

.close-loc {
    a.button {
        width: 100%;
        &:hover {
            background-color: var(--color-terciary-hover) !important;
        }
    }
}

#wplf-list,
#wplf-home-results {
    h3 {
        line-height: 1;
        &.smaller {
            small {
                color: #585858;
                display:block;
                clear:both;
                line-height: 1;
                font-size: 14px;
                font-style: italic;
            }
        }
    }
    @media only screen and (min-width: 641px) and (max-width: 1023px) {
        > .row {
            max-width: 100%;
        }
    }
    .close-loc {
        .wrapper {
            background: white;
            padding: 12px;
            border: 2px solid var(--color-mid-gray);
            height: 100%;
            display:flex;
            flex-direction: column;
            .phone-number {
                margin-bottom: 0;
                color: var(--color-secondary);
                font-weight: var(--font-weight-semibold);
            }
            h3 {
                flex-grow:1;
                margin-top: 12px;
                font-size: 26px;
                margin-bottom: 8px;
                color: var(--color-primary);
                font-style: normal;
                font-weight: var(--font-weight-normal);
            }
            img {
                border-radius: 8px;
            }
        }
        figure {
            flex-grow: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            background: var(--color-light-blue);
            border-radius: 8px;
            justify-content: center;
            margin-bottom: 2rem;
            padding: 8px;
            img {
                max-width: 275px;
                height: auto;
                width: 100%;
            }
        }
        p,
        address {
            color: var(--color-black);
        }
    }
}

#locations-grid {
    padding-top: 18px;
    .close-loc {
        height: 100%;
    }
    figure {
        img {
            max-width: 150px;
        }
    }
}

/* Category badges */
.wplf-badges { margin-top:.4rem; display:flex; flex-wrap:wrap; gap:.35rem; }
.wplf-badge {
    display:inline-block;
    font-size:.75rem;
    line-height:1;
    padding:.35rem .5rem;
    border-radius:999px;
    background:#f1f5f9;
    color:#0f172a;
    border:1px solid #e2e8f0;
    margin-bottom:8px;
}

.wplf-filters { margin-bottom: 1rem; display:flex; gap:.5rem; }
.wplf-filters button { padding:.4rem .75rem; text-transform: uppercase; border:1px solid #ccc; background:white; cursor:pointer;border-radius: 0; font-weight: var(--font-weight-bold)}
.wplf-filters button.is-active { background:var(--color-primary); color:#fff; }