/* /sucursales: branch list on a light background with the Salinas red and yellow accents.
   The site sets html { font-size: 62.5% }, so 1rem = 10px. */

.branches-page {
    --branches-red: var(--salinas-red, #c8272f);
    --branches-red-dark: var(--salinas-red-dark, #a91f27);
    --branches-yellow: var(--salinas-yellow, #f8ca48);
    --branches-black: var(--salinas-black, #171717);
    --branches-text-muted: #55575b;
    --branches-border: #e3e3e3;
    --branches-open: #1d7a35;
    --branches-closed: #5f6368;
    --branches-whatsapp: #25d366;
    --branches-whatsapp-text: #0e6b35;
    padding: 4rem 0 6rem;
    background: #ffffff;
    color: var(--branches-black);
    font-family: var(--open-sans-fonts, "Open Sans", sans-serif);
}

.branches-page__header {
    display: grid;
    grid-template-areas: "title" "hours" "divider" "locate";
    gap: 0.8rem;
    margin-bottom: 2.4rem;
}

.branches-page__header::after {
    content: "";
    grid-area: divider;
    height: 3px;
    background: var(--branches-yellow);
}

.branches-page__title {
    grid-area: title;
    margin: 0;
    color: var(--branches-black);
    font-size: 2.8rem;
    font-weight: 800;
    line-height: 1.2;
}

.branches-page__hours {
    grid-area: hours;
    margin: 0;
    color: var(--branches-text-muted);
    font-size: 1.5rem;
    line-height: 1.5;
}

.branch-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.6rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 768px) {
    .branch-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1200px) {
    .branch-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.branch-card {
    margin: 0;
    border: 1px solid var(--branches-border);
    border-radius: 12px;
    background: #ffffff;
}

.branch-card__body {
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
    height: 100%;
    padding: 1.6rem;
}

.branch-card__summary {
    display: grid;
    grid-template-columns: clamp(7.2rem, 28%, 12rem) minmax(0, 1fr);
    gap: 0.8rem;
    align-items: start;
    min-width: 0;
}

.branch-card__photo {
    display: block;
    overflow: hidden;
    border-radius: 8px;
}

.branch-card__photo img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}

.branch-card__details {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.2rem 0.6rem;
}

.branch-card__info p {
    margin: 0;
}

.branch-card__name {
    display: flex;
    gap: 0.8rem;
    align-items: center;
    margin: 0 0 0.4rem;
    color: var(--branches-black);
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1.3;
}

.branch-card__number {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    background: var(--branches-red);
    color: #ffffff;
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1;
}

.branch-card__reference,
.branch-card__phone {
    color: var(--branches-text-muted);
    font-size: 1.4rem;
    line-height: 1.5;
}

.branch-card__phone {
    color: var(--branches-black);
    font-weight: 600;
}

.branch-card__status {
    display: flex;
    gap: 0.6rem;
    align-items: center;
    font-size: 1.4rem;
    font-weight: 600;
    line-height: 1.5;
}

.branch-card__status::before {
    content: "";
    flex: 0 0 auto;
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 50%;
    background: currentColor;
}

.branch-card__status--open {
    color: var(--branches-open);
}

.branch-card__status--closed {
    color: var(--branches-closed);
}

.branch-card__actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.8rem;
    margin-top: auto;
}

.branch-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0.8rem 1rem;
    border: 2px solid transparent;
    border-radius: 11px;
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.branch-button--primary {
    border-color: var(--branches-red);
    background: var(--branches-red);
    color: #ffffff;
}

.branch-button--primary:hover {
    border-color: var(--branches-red-dark);
    background: var(--branches-red-dark);
    color: #ffffff;
}

.branch-button--call {
    border-color: var(--branches-black);
    background: #ffffff;
    color: var(--branches-black);
}

.branch-button--call:hover {
    background: var(--branches-black);
    color: #ffffff;
}

.branch-button--whatsapp {
    border-color: var(--branches-whatsapp);
    background: #ffffff;
    color: var(--branches-whatsapp-text);
}

.branch-button--whatsapp:hover {
    background: #e9fbf0;
    color: var(--branches-whatsapp-text);
}

.branches-page a:focus-visible {
    outline: 3px solid var(--branches-black);
    outline-offset: 2px;
}

/* Narrow cards: the route button takes its own row so labels never squeeze */
@media (max-width: 399px) {
    .branch-card__actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .branch-button--primary {
        grid-column: 1 / -1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .branch-button {
        transition: none;
    }
}

/* Map (only rendered when a Google Maps key and Map ID are configured) */

.branches-map {
    position: relative;
    height: 40vh;
    min-height: 240px;
    max-height: 360px;
    margin-top: 1.6rem;
    overflow: hidden;
    border: 1px solid var(--branches-border);
    border-radius: 12px;
    background: #f3f3f3;
}

.branches-map__canvas {
    width: 100%;
    height: 100%;
}

.branches-map__skip {
    position: absolute;
    top: 0.8rem;
    left: 0.8rem;
    z-index: 2;
    padding: 0.8rem 1.2rem;
    border-radius: 8px;
    background: #ffffff;
    color: var(--branches-black);
    font-size: 1.4rem;
    font-weight: 700;
    transform: translateY(-200%);
}

.branches-map__skip:focus {
    transform: none;
}

/* Below 992px the site's sticky header (about 165px) stays on top: when the page scrolls to
   the map ("Ver en el mapa", "Usar mi ubicación"), stop it just below the header */
@media (max-width: 991px) {
    .branches-map {
        scroll-margin-top: 18rem;
    }
}

.branches-map__message {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 2.4rem;
    background: #f7f7f7;
    color: var(--branches-black);
    font-size: 1.5rem;
    line-height: 1.5;
    text-align: center;
}

.branches-map__message[hidden] {
    display: none;
}

.branch-list:focus {
    outline: none;
}

@media (min-width: 992px) {
    /* Desktop: header on one row so the five cards and the map fit the first screen without scrolling */
    .branches-page {
        padding-top: 2.4rem;
    }

    .branches-page__header {
        grid-template-columns: max-content minmax(0, 1fr) auto;
        grid-template-areas: "title hours locate" "divider divider divider";
        column-gap: 1.6rem;
        align-items: center;
        margin-bottom: 1.6rem;
    }

    /* A little extra space below the heavy heading optically centers its lettering. */
    .branches-page__header .branches-page__title {
        padding-bottom: 0.4rem;
    }

    .branches-page__hours {
        text-align: right;
    }

    /* Center the button itself, rather than the button plus its feedback message. */
    .branches-page__header .branches-locate {
        display: contents;
    }

    .branches-page__header .branches-locate__button {
        grid-area: locate;
        justify-self: end;
    }

    .branches-page__header .branches-locate__status {
        grid-area: divider;
        justify-self: end;
        max-width: 22rem;
        text-align: right;
    }

    .branches-page__header:has(.branches-locate__status:not(:empty)) {
        grid-template-areas: "title hours locate" ". . status" "divider divider divider";
    }

    .branches-page__header .branches-locate__status:not(:empty) {
        grid-area: status;
    }

    /* Cards keep their own height (about 11rem each) and the map stretches to the list,
       so the five branches and the map fit the first screen together. */
    .branches-layout--with-map {
        --branches-panel-height: calc(100dvh - 28rem);
        display: grid;
        grid-template-columns: minmax(0, 46fr) minmax(0, 54fr);
        grid-template-areas: "list map";
        gap: 1.6rem;
        align-items: stretch;
    }

    .branches-layout--with-map .branches-map {
        grid-area: map;
        height: auto;
        min-height: 48rem;
        max-height: none;
        margin-top: 0;
    }

    .branches-layout--with-map .branch-list {
        grid-area: list;
        grid-template-columns: minmax(0, 1fr);
        align-content: start;
        gap: 0.6rem;
        overflow: visible;
    }

    .branches-layout--with-map .branch-card {
        min-width: 0;
    }
}

/* List cards: 4:3 photo on the left; name, one-line address, phone and three actions beside it. */
.branch-list .branch-card__body {
    display: grid;
    grid-template-columns: 10.4rem minmax(0, 1fr);
    align-items: start;
    gap: 1.2rem;
    padding: 0.8rem 1rem;
}

.branch-list .branch-card__select {
    display: block;
    min-width: 0;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
}

.branch-list .branch-card__select:disabled {
    cursor: default;
}

.branch-list .branch-card__photo,
.branch-list .branch-card__photo img {
    width: 100%;
    height: auto;
}

.branch-list .branch-card__photo img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: center;
}

.branch-list #sucursal-rio_bravo .branch-card__photo img {
    object-position: 75% center;
}

.branch-list .branch-card__info {
    display: grid;
    gap: 0.2rem;
    min-width: 0;
}

.branch-list .branch-card__name {
    align-items: flex-start;
    margin: 0;
    font-size: 1.6rem;
    line-height: 1.25;
}

.branch-list .branch-card__number {
    width: 2.2rem;
    height: 2.2rem;
    margin-top: 0.1rem;
    font-size: 1.2rem;
}

.branch-list .branch-card__title-text {
    min-width: 0;
}

/* The landmark ("(al lado de HEB)", "(frente a Waldo's)") always goes on its own line, so both align. */
.branch-list .branch-card__main-name {
    display: block;
}

.branch-list .branch-card__name-note {
    display: block;
    color: var(--branches-text-muted);
    font-weight: 600;
}

.branch-list .branch-card__info p {
    margin: 0;
}

.branch-card__address {
    color: var(--branches-text-muted);
    font-size: 1.35rem;
    line-height: 1.35;
}

.branch-list .branch-card__phone {
    color: var(--branches-black);
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.3;
    font-variant-numeric: tabular-nums;
}

.branch-list .branch-card__phone span {
    color: var(--branches-text-muted);
    font-weight: 500;
}

.branch-list .branch-card__actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
    margin: 0.3rem 0 0;
}

.branch-list .branch-card__actions .branch-button {
    min-height: 30px;
    padding: 0.4rem 0.6rem;
    border-width: 1.5px;
    border-radius: 9px;
    font-size: 1.3rem;
    white-space: nowrap;
}

/* With a map the whole card is a target: clicking it shows the branch on the map. */
.branches-layout--with-map .branch-card {
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.branches-layout--with-map .branch-card:hover {
    border-color: #b9bbc2;
    box-shadow: 0 4px 14px rgba(23, 23, 23, 0.08);
}

.branches-hint {
    margin: -0.8rem 0 0.8rem;
    color: var(--branches-text-muted);
    font-size: 1.35rem;
}

@media (prefers-reduced-motion: reduce) {
    .branches-layout--with-map .branch-card {
        transition: none;
    }
}

/* The shared opening status sits in the header line, next to the hours. */
.branches-page__hours .branch-card__status {
    display: inline-flex;
    font-size: inherit;
}

@media (min-width: 992px) {
    /* Short windows: smaller photo and tighter spacing so the five cards still fit beside the map. */
    .branches-layout--compact .branch-list .branch-card__body {
        grid-template-columns: 9.2rem minmax(0, 1fr);
        padding-block: 0.6rem;
    }

    .branches-layout--compact .branch-list {
        gap: 0.6rem;
    }

    .branches-layout--compact .branch-list .branch-card__actions .branch-button {
        min-height: 26px;
    }
}

/* Phones: smaller photo, buttons across the full card under the text. */
@media (max-width: 575px) {
    .branch-list .branch-card__body {
        grid-template-columns: 8.4rem minmax(0, 1fr);
        gap: 1rem;
        padding: 1rem;
    }

    .branch-list .branch-card__actions {
        grid-column: 1 / -1;
    }

    .branch-list .branch-card__info {
        display: contents;
    }

    .branch-list .branch-card__name,
    .branch-list .branch-card__address,
    .branch-list .branch-card__phone {
        grid-column: 2;
    }

    .branch-list .branch-card__select,
    .branch-list .branch-card__photo {
        grid-row: 1 / span 3;
    }
}

/* Selected card: a 2px red border drawn inside the card, so the list's edges never clip it
   and the card keeps its size (the border also thickens, so it does not rely on colour alone) */
.branch-card--active,
.branches-layout--with-map .branch-card.branch-card--active {
    border-color: var(--branches-red);
    box-shadow: inset 0 0 0 1px var(--branches-red);
}

/* "Ver en el mapa" is a button styled like the other card actions */
button.branch-button {
    font-family: inherit;
    cursor: pointer;
}

/* The map swaps "Cómo llegar" and "Ver en el mapa" through the hidden attribute */
.branch-button[hidden] {
    display: none;
}

.branches-page button:focus-visible {
    outline: 3px solid var(--branches-black);
    outline-offset: 2px;
}

/* Pins: red drop with the card number; the active one grows and gets a yellow ring */
.map-pin {
    position: relative;
    width: 32px;
    height: 40px;
    transform-origin: 50% 100%;
    transition: transform 0.15s ease;
    cursor: pointer;
}

.map-pin::before {
    content: "";
    position: absolute;
    top: 6px;
    left: 2px;
    box-sizing: border-box;
    width: 28px;
    height: 28px;
    border: 2px solid #ffffff;
    border-radius: 50% 50% 50% 0;
    background: var(--salinas-red, #c8272f);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.35);
    transform: rotate(-45deg);
}

.map-pin__number {
    position: absolute;
    top: 11px;
    right: 0;
    left: 0;
    color: #ffffff;
    font: 700 13px/18px "Open Sans", sans-serif;
    text-align: center;
}

.map-pin--hover {
    transform: scale(1.1);
}

.map-pin--active {
    transform: scale(1.25);
}

.map-pin--active::before {
    border: 3px solid var(--salinas-yellow, #f8ca48);
}

/* Popup-only styles: the native heading and close button share the top row. */
.branches-map .gm-style-iw-c {
    width: 34.4rem !important;
    max-width: calc(100vw - 5.6rem) !important;
    max-height: calc(clamp(240px, 40vh, 360px) - 1.6rem) !important;
    padding: 1.2rem !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 18px rgba(23, 23, 23, 0.18) !important;
}

.branches-map .gm-style-iw-chr {
    width: 100%;
    max-width: 100%;
    gap: 0.8rem;
    align-items: flex-start;
    margin-bottom: 0.6rem;
}

.branches-map .gm-style-iw-ch {
    min-width: 0;
    padding-top: 0 !important;
    overflow: visible;
}

.branches-map .gm-style-iw-d {
    min-height: 0;
    max-height: none !important;
    padding: 0 !important;
    overflow: auto !important;
}

.branches-map .gm-style-iw-chr .gm-ui-hover-effect {
    flex: 0 0 32px;
    width: 32px !important;
    height: 32px !important;
    margin: -0.4rem -0.4rem 0 0 !important;
    border-radius: 8px;
    opacity: 0.8;
}

.branches-map .gm-style-iw-chr .gm-ui-hover-effect span {
    width: 20px !important;
    height: 20px !important;
    margin: 6px !important;
}

.branches-map .gm-style-iw-chr .gm-ui-hover-effect:hover {
    background: #f3f3f3;
    opacity: 1;
}

.branches-map .gm-style-iw-chr .gm-ui-hover-effect:focus-visible {
    outline: 3px solid var(--branches-black);
    outline-offset: 1px;
    opacity: 1;
}

@media (min-width: 992px) {
    .branches-map .gm-style-iw-c {
        max-height: calc(var(--branches-panel-height) - 1.6rem) !important;
    }
}

.map-info {
    width: 100%;
    max-width: 100%;
    color: var(--branches-black);
    font-family: var(--open-sans-fonts, "Open Sans", sans-serif);
}

.map-info__name {
    display: flex;
    gap: 0.8rem;
    align-items: flex-start;
    margin: 0;
    color: var(--branches-black);
    font-family: var(--open-sans-fonts, "Open Sans", sans-serif);
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.map-info__name .branch-card__number {
    width: 2.4rem;
    height: 2.4rem;
    font-size: 1.3rem;
}

.map-info p {
    margin: 0 0 0.6rem;
}

.map-info__address {
    color: var(--branches-text-muted);
    font-size: 1.3rem;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.map-info .branch-card__status {
    font-size: 1.3rem;
    line-height: 1.4;
}

.map-info__actions {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1.15fr);
    gap: 0.6rem;
    margin-top: 0.8rem;
}

.map-info .branch-button {
    grid-column: auto;
    min-height: 44px;
    padding: 0.6rem 0.4rem;
    font-size: 1.25rem;
}

/* Action icons and the compact layout are exclusive to phone-sized popups. */
.map-info__action-icon {
    display: none;
}

@media (max-width: 767px) {
    .branches-map .gm-style-iw-c {
        padding: 0.8rem !important;
    }

    .branches-map .gm-style-iw-chr {
        gap: 0.6rem;
        margin-bottom: 0.4rem;
    }

    .branches-map .gm-style-iw-chr .gm-ui-hover-effect {
        flex-basis: 28px;
        width: 28px !important;
        height: 28px !important;
    }

    .branches-map .gm-style-iw-chr .gm-ui-hover-effect span {
        width: 18px !important;
        height: 18px !important;
        margin: 5px !important;
    }

    .branches-map .gm-style-iw-d {
        overflow: visible !important;
    }

    .map-info__name {
        gap: 0.6rem;
        font-size: 1.4rem;
        line-height: 1.25;
    }

    .map-info__name .branch-card__number {
        width: 2rem;
        height: 2rem;
        font-size: 1.2rem;
    }

    .map-info p {
        margin-bottom: 0.4rem;
    }

    .map-info__address {
        font-size: 1.2rem;
        line-height: 1.3;
    }

    .map-info .branch-card__status {
        font-size: 1.25rem;
        line-height: 1.25;
    }

    .map-info__actions {
        grid-template-columns: minmax(0, 1fr) 36px 36px;
        gap: 0.6rem;
        margin-top: 0.6rem;
    }

    .map-info .branch-button {
        gap: 0.6rem;
        min-height: 36px;
        padding: 0.4rem;
    }

    .map-info__action-icon {
        display: block;
        flex: 0 0 auto;
        width: 24px;
        height: 24px;
    }

    .map-info .branch-button--primary .map-info__action-icon {
        width: 16px;
        height: 16px;
    }

    .map-info .branch-button--primary .map-info__action-label {
        white-space: nowrap;
    }

    .map-info .branch-button--call .map-info__action-label,
    .map-info .branch-button--whatsapp .map-info__action-label {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .map-pin {
        transition: none;
    }
}

/* "Usar mi ubicación" and its spoken result; the empty status stays rendered so screen readers announce it */
.branches-locate {
    grid-area: locate;
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem 1.6rem;
    align-items: center;
    margin-top: 0;
}

.branches-locate__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0.8rem 1.6rem;
    border: 2px solid var(--branches-black);
    border-radius: 11px;
    background: #ffffff;
    color: var(--branches-black);
    font-family: inherit;
    font-size: 1.4rem;
    font-weight: 700;
    cursor: pointer;
}

.branches-locate__button:hover {
    background: var(--branches-black);
    color: #ffffff;
}

.branches-locate__button[aria-disabled="true"] {
    opacity: 0.6;
    cursor: progress;
}

.branches-locate__button[hidden] {
    display: none;
}

.branches-locate__status {
    margin: 0;
    color: var(--branches-black);
    font-size: 1.4rem;
    font-weight: 600;
    line-height: 1.5;
}