/* ================================
   Store Locator - Complete CSS
   (Desktop + Mobile same layout, just smaller)
   + FIXES:
     1) Open badge beside store name (not at end/right)
     2) View Maps button at bottom-right of card (not vertically centered)
     3) Hide View Maps on mobile
   ================================ */

.storeLocator {
    background: linear-gradient(180deg, #09A5F7 0%, #ECF3F9 100%);
    min-height: 100vh;

    /* animation tokens */
    --easing: cubic-bezier(.22, .61, .36, 1);
    --dur: 800ms;
}

/* Optional: tighter overall content width (desktop) */
.storeWrap {
    max-width: 860px;
    /* a little less width than before */
    padding-left: 14px;
    padding-right: 14px;
}

/* If you're using the new HTML wrapper (.storeList) */
.storeList {
    display: grid;
    gap: 18px;
    margin-top: 18px;
}

/* ================================
   Card Layout (Desktop baseline)
   ================================ */
.storeCardX {
    background: #fff;
    border-radius: 18px;
    padding: 14px;

    display: grid;
    grid-template-columns: 150px 1fr auto;
    /* reduced thumb width */
    gap: 16px;

    /* IMPORTANT: allow action to be bottom aligned */
    align-items: stretch;

    color: #0E4961;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08);

    transition: box-shadow 280ms var(--easing), transform 280ms var(--easing);
}

.storeCardX:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 34px rgba(0, 0, 0, .10);
}

/* Thumbnail */
.storeThumb {
    width: 150px;
    height: 98px;
    border-radius: 14px;
    overflow: hidden;
    background: #f2f4f7;
}

.storeThumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;

    transition: transform 500ms var(--easing);
    transform-origin: 50% 60%;
}

.storeCardX:hover .storeThumb img {
    transform: scale(1.02) rotate(.2deg);
}

/* ================================
   Info section
   ================================ */
.storeInfo {
    min-width: 0;
    /* prevents overflow */
}

/* FIX: "Open" beside name (not pushed to far right) */
.storeTop {
    display: flex;
    align-items: center;
    justify-content: flex-start; /* was space-between */
    gap: 10px;
    flex-wrap: wrap; /* allows badge to wrap on small widths */
    margin-bottom: 8px;
}

.storeTitle {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    color: #0E4961;
    line-height: 1.15;
}

.storeTitle span {
    font-weight: 500;
    font-size: 18px;
}

/* Status Badge */
.storeStatus {
    padding: 4px 14px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 13px;
    border: 1.5px solid;
    white-space: nowrap;

    /* small spacing beside the title */
    margin-left: 6px;
}

.storeStatus.is-open {
    color: #088B0C;
    border-color: #088B0C;
}

.storeStatus.is-closed {
    color: #8B080A;
    border-color: #8B080A;
}

.storeStatus.is-temp {
    color: #EC5D25;
    border-color: #EC5D25;
}

/* Meta rows */
.storeMeta {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.metaRow {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    color: #0E4961;
}

.metaRow i {
    margin-top: 3px;
    flex: 0 0 auto;
}

.metaRow p {
    margin: 0;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.35;
    min-width: 0;

    /* clamp to 2 lines */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ================================
   Action (View Maps)
   ================================ */
/* FIX: bottom-right positioning like reference */
.storeAction {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;

    /* align in grid cell */
    align-self: end;
    justify-self: end;
}

.mapBtn {
    background: #00A4E2;
    color: #fff !important;
    text-decoration: none;
    padding: 8px 18px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;

    white-space: nowrap;

    box-shadow: 0 8px 22px rgba(13, 110, 253, 0.20);
    transition: transform 240ms var(--easing), box-shadow 240ms var(--easing);
}

.mapBtn:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 26px rgba(13, 110, 253, 0.26);
    color: #fff !important;
}

/* ================================
   Reveal on scroll (IntersectionObserver)
   ================================ */
.storeLocator [data-reveal] {
    opacity: 0;
    transform: translateY(22px) scale(.985);
    filter: blur(3px);
    transition:
        opacity var(--dur) var(--easing),
        transform var(--dur) var(--easing),
        filter var(--dur) var(--easing);
    will-change: opacity, transform, filter;
}

.storeLocator [data-reveal].is-visible {
    opacity: 1;
    transform: none;
    filter: none;
}

/* ================================
   Breathe animation (if you still use outletOpen class)
   ================================ */
@keyframes breathe {

    0%,
    100% {
        box-shadow: 0 0 0 rgba(22, 163, 74, 0);
    }

    50% {
        box-shadow: 0 0 14px rgba(22, 163, 74, .35);
    }
}

/* Legacy classes support (optional) */
.outletOpen {
    color: #088B0C;
    border: 1.5px solid #088B0C;
    margin-left: 12px;
    font-size: 16px;
    padding: 0px 14px;
    border-radius: 4px;
    font-weight: bold;
    animation: breathe 2.6s ease-in-out infinite;
}

.outletClosed {
    color: #8B080A;
    border: 1.5px solid #8B080A;
    margin-left: 12px;
    font-size: 12px;
    padding: 0px 14px;
    border-radius: 4px;
    font-weight: bold;
    animation: breathe 2.6s ease-in-out infinite;
}

.outletTemporarily {
    color: #EC5D25;
    border: 1.5px solid #EC5D25;
    margin-left: 4px;
    font-size: 11px;
    padding: 0px 6px;
    border-radius: 4px;
    font-weight: bold;
    animation: breathe 2.6s ease-in-out infinite;
}

/* ================================
   Tablet: keep same look, slightly tighter
   ================================ */
@media (max-width: 991px) {
    .storeCardX {
        grid-template-columns: 130px 1fr auto;
        gap: 12px;
        padding: 12px;
    }

    .storeThumb {
        width: 130px;
        height: 95px;
    }

    .storeTitle {
        font-size: 20px;
    }

    .storeTitle span {
        font-size: 16px;
    }

    .metaRow p {
        font-size: 14px;
    }

    .mapBtn {
        padding: 7px 16px;
        font-size: 12px;
    }
}

/* ================================
   Mobile: SAME layout as desktop, just smaller
   (No stacking image on top)
   NOTE: View Maps is hidden on mobile by rule below (max-width: 767px)
   ================================ */
@media (max-width: 576px) {
    .storeCardX {
        /* keep image left, content right */
        grid-template-columns: 110px 1fr;
        /* allow action to sit below content in right column (if not hidden) */
        grid-template-rows: auto auto;
        gap: 10px;
        padding: 12px;
        border-radius: 16px;

        align-items: stretch;
    }

    .storeThumb {
        width: 110px;
        height: 92px;
        border-radius: 12px;
    }

    .storeInfo {
        grid-column: 2 / 3;
        grid-row: 1 / 2;
    }

    /* Keep action button at bottom-right (if you decide to show it) */
    .storeAction {
        grid-column: 2 / 3;
        grid-row: 2 / 3;
        justify-content: flex-end;
        align-self: end;
        justify-self: end;
        margin-top: 6px;
    }

    .storeTop {
        flex-direction: row;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 8px;
        margin-bottom: 6px;
    }

    .storeTitle {
        font-size: 16px;
        line-height: 1.15;
    }

    .storeTitle span {
        font-size: 14px;
    }

    .storeStatus {
        font-size: 11px;
        padding: 3px 10px;
        border-radius: 6px;
        margin-left: 4px;
    }

    .metaRow p {
        font-size: 13px;
        -webkit-line-clamp: 2;
    }

    .mapBtn {
        width: auto;
        /* not full width */
        padding: 7px 14px;
        font-size: 12px;
    }
}

/* ================================
   Reduced motion support
   ================================ */
@media (prefers-reduced-motion: reduce) {

    .storeLocator [data-reveal],
    .storeCardX,
    .storeThumb img,
    .mapBtn,
    .outletOpen,
    .outletClosed,
    .outletTemporarily {
        transition: none !important;
        animation: none !important;
        transform: none !important;
        filter: none !important;
    }
}

/* ================================
   Hide View Maps on mobile (your requirement)
   ================================ */
@media (max-width: 767px) {
    .storeAction {
        display: none;
    }
}