/* ============================================================
   SPW Location — Front-end styles
   All colours use the Bricks Builder CSS variables defined in
   the site's colour palette. No hex values are hardcoded here
   so this plugin works across any Splendid Websites build.

   Variable reference (from Bricks colour palette):
     --primary        Main text / charcoal
     --primary-l-4    Mid-grey (muted text)
     --primary-l-6    Light grey (address text)
     --primary-l-9    Very light grey (borders, dividers)
     --primary-l-10   Near-white (hover backgrounds)
     --secondary      Bath Stone / accent (adapts per site)
     --secondary-l-10 Palest stone (map placeholder bg)
     --tertiary       Crescent Green / brand action colour
     --white          #ffffff
   ============================================================ */

/* ── Widget container ───────────────────────────────────────── */
.spw-location {
    font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
    font-size: 15px;
    color: var(--primary);
    background: var(--white);
    border: 1px solid var(--primary-l-9);
    border-radius: 4px;
    overflow: hidden;
}

/* ── Map ────────────────────────────────────────────────────── */
.spw-location__map {
    width: 100%;
    height: 380px;
    display: block;
    background: var(--secondary-l-10);
}

@media (max-width: 640px) {
    .spw-location__map {
        height: 260px;
    }
}

/* Google Maps info window */
.spw-map-info {
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 13px;
    line-height: 1.5;
    color: var(--primary);
    max-width: 200px;
}

/* ── Tab navigation ─────────────────────────────────────────── */
.spw-location__tabs-wrap {
    border-top: 1px solid var(--primary-l-9);
}

.spw-location__tab-nav {
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    border-bottom: 1px solid var(--primary-l-9);
    background: var(--primary-l-10);
}

.spw-location__tab-nav::-webkit-scrollbar {
    display: none;
}

.spw-location__tab-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 13px 18px;
    border: none;
    border-bottom: 2px solid transparent;
    background: none;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    color: var(--primary-l-4);
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.15s ease, border-color 0.15s ease;
    line-height: 1;
    letter-spacing: 0.01em;
}

.spw-location__tab-btn svg {
    flex-shrink: 0;
    opacity: 0.7;
    transition: opacity 0.15s ease;
}

.spw-location__tab-btn:hover {
    color: var(--tertiary);
}

.spw-location__tab-btn:hover svg {
    opacity: 1;
}

.spw-location__tab-btn.is-active {
    color: var(--tertiary);
    border-bottom-color: var(--tertiary);
    font-weight: 600;
}

.spw-location__tab-btn.is-active svg {
    opacity: 1;
}

/* ── Tab panels ─────────────────────────────────────────────── */
.spw-location__tab-panel {
    display: none;
    min-height: 220px;
}

.spw-location__tab-panel.is-active {
    display: block;
}

/* ── Loading state ──────────────────────────────────────────── */
.spw-location__loading {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 36px 24px;
    color: var(--primary-l-5);
    font-size: 13px;
}

.spw-location__spinner {
    width: 20px;
    height: 20px;
    border: 2px solid var(--primary-l-9);
    border-top-color: var(--tertiary);
    border-radius: 50%;
    animation: spw-spin 0.7s linear infinite;
    flex-shrink: 0;
}

@keyframes spw-spin {
    to { transform: rotate(360deg); }
}

/* ── Results list ───────────────────────────────────────────── */
.spw-location__results {
    list-style: none;
    margin: 0;
    padding: 0;
}

.spw-location__result-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--primary-l-9);
    transition: background 0.12s ease;
}

.spw-location__result-item:last-child {
    border-bottom: none;
}

.spw-location__result-item:hover {
    background: var(--primary-l-10);
}

/* Number badge */
.spw-location__result-num {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--tertiary);
    color: var(--white);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

/* Info block */
.spw-location__result-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.spw-location__result-name {
    font-weight: 600;
    font-size: 14px;
    color: var(--primary);
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.spw-location__result-address {
    font-size: 12px;
    color: var(--primary-l-6);
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Distance block */
.spw-location__result-dist {
    flex-shrink: 0;
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.spw-location__dist-badge {
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    color: var(--tertiary);
    letter-spacing: 0.01em;
}

.spw-location__walk-time {
    font-size: 11px;
    color: var(--primary-l-5);
    white-space: nowrap;
}

/* ── Empty / error states ────────────────────────────────────── */
.spw-location__empty,
.spw-location__error {
    padding: 36px 24px;
    font-size: 13px;
    color: var(--primary-l-5);
    margin: 0;
}

.spw-location__error {
    color: #B05040; /* Error red — intentionally not a brand variable */
}

/* ── Responsive tweaks ──────────────────────────────────────── */
@media (max-width: 480px) {
    .spw-location__tab-btn {
        padding: 11px 14px;
        font-size: 12px;
    }

    .spw-location__result-item {
        padding: 12px 14px;
        gap: 10px;
    }

    .spw-location__result-name {
        font-size: 13px;
    }

    .spw-location__walk-time {
        display: none;
    }
}

/* ── Respect reduced motion ─────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .spw-location__spinner {
        animation: none;
        border-top-color: var(--tertiary);
        opacity: 0.5;
    }
}