/* ============================================================================
   branch-map.css — «فروعنا» على خريطة واحدة  (.lp-bm-*)
   ----------------------------------------------------------------------------
   The branches map that sits above the branch cards — in the landing page's
   "Our branches" section and on /branch, where «استلام من الفرع» sends the
   guest. Leaflet is vendored under /user/vendor/leaflet; only the tiles need
   the network, and when they do not arrive the map hides itself and the cards
   (with their own directions links) carry the section.

   Tokens come from the landing layer (--lp-*) with hard fallbacks. Logical
   properties throughout, so RTL needs nothing extra; only the map box itself
   is forced LTR because Leaflet positions its panes with left/top.
   ========================================================================== */

.lp-bm {
    --bm-brand:      var(--lp-brand, #B8541A);
    --bm-brand-dark: var(--lp-brand-dark, #8B3F12);
    --bm-brand-rgb:  var(--lp-brand-rgb, 184, 84, 26);
    --bm-ink:        var(--lp-ink, #241A13);
    --bm-ink-soft:   var(--lp-ink-soft, #5C4938);
    --bm-mute:       var(--lp-ink-mute, #8C7A66);
    --bm-line:       var(--lp-line, rgba(36, 26, 19, .09));
    --bm-line-2:     var(--lp-line-2, rgba(36, 26, 19, .16));
    --bm-surface:    var(--lp-surface, #FFFFFF);
    --bm-surface-2:  var(--lp-surface-2, #F6F0E6);
    --bm-r:          var(--lp-r-lg, 26px);
    --bm-pill:       var(--lp-pill, 999px);
    --bm-sh:         var(--lp-sh-2, 0 2px 6px rgba(36, 26, 19, .05), 0 18px 38px -18px rgba(36, 26, 19, .28));
    --bm-ease:       var(--lp-ease, cubic-bezier(.22, .61, .36, 1));
    --bm-ok:         #16A34A;
    --bm-warn:       #D97706;
    --bm-me:         #2563EB;
    --bm-dir:        ltr;
    display: block;
}
html[dir="rtl"] .lp-bm { --bm-dir: rtl; }
.lp-bm [hidden] { display: none !important; }

/* ── The map card ─────────────────────────────────────────────────────── */
.lp-bm__card {
    position: relative;
    border-radius: var(--bm-r);
    background: var(--bm-surface);
    border: 1px solid var(--bm-line);
    box-shadow: var(--bm-sh);
    overflow: hidden;
    margin-bottom: clamp(20px, 3.5vw, 34px);
}

/* Header strip: the count, a status line, and the one button people press. */
.lp-bm__bar {
    display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap;
    padding: 14px 18px;
    border-bottom: 1px solid var(--bm-line);
    background: var(--bm-surface);
}
.lp-bm__count {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 7px 14px;
    border-radius: var(--bm-pill);
    background: rgba(var(--bm-brand-rgb), .10);
    color: var(--bm-brand);
    font-size: 12.5px; font-weight: 800;
    white-space: nowrap;
}
.lp-bm__count i { font-size: 12px; }
.lp-bm__hint {
    flex: 1 1 240px; min-width: 0;
    font-size: 12.5px; line-height: 1.6;
    color: var(--bm-mute);
}
.lp-bm__hint.is-ok   { color: var(--bm-ok);   font-weight: 700; }
.lp-bm__hint.is-warn { color: var(--bm-warn); font-weight: 700; }

.lp-bm__locate {
    margin-inline-start: auto;
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 18px;
    border: 0;
    border-radius: var(--bm-pill);
    background: linear-gradient(135deg, var(--bm-brand), var(--bm-brand-dark));
    color: #fff !important;
    font-family: inherit; font-size: 13px; font-weight: 800;
    cursor: pointer; white-space: nowrap;
    box-shadow: 0 10px 22px -12px rgba(var(--bm-brand-rgb), .7);
    transition: transform .2s var(--bm-ease), filter .2s, box-shadow .2s;
}
.lp-bm__locate:hover  { transform: translateY(-1px); filter: brightness(1.07); }
.lp-bm__locate:active { transform: translateY(0); }
.lp-bm__locate:focus-visible { outline: 2px solid var(--bm-brand); outline-offset: 3px; }
.lp-bm__locate[disabled] { opacity: .65; cursor: progress; transform: none; }
.lp-bm__locate i { font-size: 12.5px; }

/* The map itself. */
.lp-bm__map {
    position: relative;
    direction: ltr;
    height: clamp(340px, 52vw, 560px);
    background: var(--bm-surface-2);
}
.lp-bm__map.leaflet-container {
    font-family: inherit;
    background: var(--bm-surface-2);
}
/* Legacy storefront rules force every image to 100% and every element to
   RTL. Leaflet tiles use a fixed pixel grid and panes use LTR coordinates. */
.lp-bm__map .leaflet-pane,
.lp-bm__map .leaflet-tile-container {
    direction: ltr;
}
.lp-bm__map img.leaflet-tile {
    width: 256px !important;
    height: 256px !important;
    object-fit: fill !important;
}
/* WHY THE TILES WERE INVISIBLE
   Leaflet 1.9 gives every tile `mix-blend-mode: plus-lighter` (its fix for
   hairline seams between tiles in Chrome). Additive blending only works when
   the tiles composite against a transparent backdrop; here Chrome blended
   them straight into the cream page, and light map colours plus a light
   backdrop saturate to nothing — a loaded, opaque, correctly placed tile
   that painted as blank. Isolating the tile container makes it the blend
   group again, so the seam fix keeps working and the map shows. */
.lp-bm__map .leaflet-tile-container {
    isolation: isolate;
}
.lp-bm__map .leaflet-tooltip {
    left: 0;
    text-align: start;
}
.lp-bm__map .leaflet-control-attribution {
    font-size: 9.5px;
    background: rgba(255, 255, 255, .78);
}
.lp-bm__map .leaflet-control-zoom {
    margin: 14px;
    border: 0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 20px -10px rgba(36, 26, 19, .5);
}
.lp-bm__map .leaflet-control-zoom a {
    width: 36px; height: 36px; line-height: 36px;
    color: var(--bm-ink);
    background: var(--bm-surface);
    border-bottom: 1px solid var(--bm-line);
    font-size: 18px;
}
.lp-bm__map .leaflet-control-zoom a:hover { background: var(--bm-surface-2); color: var(--bm-brand); }
.lp-bm__map .leaflet-control-zoom a:last-child { border-bottom: 0; }

/* A veil while the first tiles arrive — never an empty grey box. */
.lp-bm__veil {
    position: absolute; inset: 0; z-index: 650;
    display: none;
    flex-direction: column; align-items: center; justify-content: center; gap: 12px;
    background: var(--bm-surface-2);
    color: var(--bm-mute);
    font-size: 12.5px; font-weight: 700;
    pointer-events: none;
}
.lp-bm__map.is-loading .lp-bm__veil { display: flex; }
.lp-bm__spinner {
    width: 34px; height: 34px;
    border-radius: 50%;
    border: 3px solid rgba(var(--bm-brand-rgb), .18);
    border-top-color: var(--bm-brand);
    animation: lp-bm-spin .9s linear infinite;
}
@keyframes lp-bm-spin { to { transform: rotate(360deg); } }

/* Shown instead of the map when Leaflet or every tile host is unreachable. */
.lp-bm__fallback {
    display: none;
    padding: 26px 18px;
    text-align: center;
    color: var(--bm-mute);
    font-size: 12.5px; line-height: 1.8;
}
.lp-bm__fallback i { display: block; font-size: 28px; margin-bottom: 8px; opacity: .5; }
.lp-bm.is-mapless .lp-bm__map      { display: none; }
.lp-bm.is-mapless .lp-bm__fallback { display: block; }
.lp-bm.is-mapless .lp-bm__locate   { display: none; }

/* ── Pins ─────────────────────────────────────────────────────────────── */
.lp-bpin {
    position: relative;
    display: block;
    width: 44px; height: 54px;
    cursor: pointer;
}
/* The teardrop: a rounded square with one square corner, turned so that
   corner points at the ground. Its tip lands on the icon anchor (22, 52). */
.lp-bpin__body {
    position: absolute; left: 50%; top: 2px;
    width: 40px; height: 40px;
    border-radius: 50% 50% 50% 0;
    transform: translateX(-50%) rotate(-45deg);
    background: linear-gradient(135deg, var(--bm-brand), var(--bm-brand-dark));
    border: 3px solid #fff;
    box-shadow: 0 10px 20px -8px rgba(0, 0, 0, .6);
    display: grid; place-items: center;
    transition: transform .25s var(--bm-ease), box-shadow .25s;
}
.lp-bpin__body i {
    transform: rotate(45deg);
    color: #fff;
    font-size: 15px;
}
.lp-bm .lp-bpin__body img.lp-bpin__icon {
    width: 25px !important;
    height: 25px !important;
    object-fit: contain !important;
    transform: rotate(45deg);
}
.lp-bm .lp-branch__pin img {
    width: 26px !important;
    height: 26px !important;
    object-fit: contain !important;
}
.lp-bm .lp-branch__pin { background: var(--bm-brand); }
.lp-bm .lp-branch__act--select {
    background: var(--bm-brand);
    color: #fff !important;
    border-color: var(--bm-brand);
    cursor: pointer;
}
.lp-bm__select-form { display: inline-flex; }

/* The directory stays visible beneath the map at every viewport size. */
.lp-bm__list-head {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 16px; margin-bottom: 22px;
}
.lp-bm__list-head h3 { font-size: clamp(20px, 2.5vw, 26px); font-weight: 800; color: var(--bm-ink); margin: 0 0 6px; }
.lp-bm__list-head p { color: var(--bm-mute); font-size: 13px; line-height: 1.7; margin: 0; }
.lp-bm__list-count {
    padding: 8px 14px; border: 1px solid var(--bm-line); border-radius: var(--bm-pill);
    color: var(--bm-brand); background: var(--bm-surface); font-size: 13px; font-weight: 700;
}
.lp-bm .lp-branches {
    display: grid;
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 40px) / 3);
    gap: 20px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--bm-brand-rgb), .3) transparent;
    padding: 6px 0 24px;
    align-items: stretch;
}
.lp-bm .lp-branch {
    position: relative; overflow: hidden; padding: 24px; gap: 20px;
    min-width: 0; scroll-snap-align: start;
    border: 1px solid var(--bm-line-2);
    border-radius: 24px;
    background: linear-gradient(155deg, rgba(var(--bm-brand-rgb), .06), transparent 45%), var(--bm-surface);
    box-shadow: 0 5px 14px -10px rgba(0, 0, 0, .22);
}
.lp-bm .lp-branch__top { gap: 16px; }
.lp-bm .lp-branch__pin { width: 52px; height: 52px; border-radius: 17px; }
.lp-bm .lp-branch__name { font-family: var(--lp-font, inherit) !important; font-size: 16px; font-weight: 800; line-height: 1.65; overflow-wrap: anywhere; }
.lp-bm .lp-branch__addr { margin-top: 8px; line-height: 1.8; font-size: 13px; }
.lp-bm .lp-branch__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding-top: 18px; border-top: 1px solid var(--bm-line); gap: 8px; }
.lp-bm .lp-branch__row > .lp-branch__act { justify-content: center; padding: 9px 6px; font-size: 12px; border-radius: 12px; }
.lp-bm .lp-branch__act--call span { font-size: 13px; font-weight: 700; }
.lp-bm .lp-bm__select-form { width: 100%; }
.lp-bm .lp-branch__row > .lp-bm__select-form { grid-column: 1 / -1; }
.lp-bm .lp-branch__act--select { width: 100%; justify-content: center; min-height: 46px; margin-bottom: 4px; }
.lp-bm .lp-branch__act--select { border-radius: 14px; font-size: 13px; font-weight: 800; }
.lp-bm .lp-branch__act--select:hover { background: var(--bm-brand-dark); }
.lp-bm .lp-branch__act:focus-visible { outline: 2px solid var(--bm-brand); outline-offset: 3px; }
.lp-bm__navigation { display: flex; align-items: center; gap: 12px; margin-inline-start: auto; }
.lp-bm__nav {
    display: inline-grid; place-items: center; width: 42px; height: 42px;
    border: 1px solid var(--bm-line-2); border-radius: 50%;
    background: var(--bm-surface); color: var(--bm-brand); cursor: pointer;
    transition: background .2s, color .2s;
}
.lp-bm__nav:hover:not(:disabled) { background: var(--bm-brand); color: #fff; }
.lp-bm__nav:disabled { opacity: .35; cursor: default; }
.lp-bm__nav:focus-visible, .lp-bm .lp-branches:focus-visible { outline: 2px solid var(--bm-brand); outline-offset: 3px; }
.lp-bm__position { direction: ltr; min-width: 64px; text-align: center; font-size: 12px; font-weight: 700; color: var(--bm-mute); font-variant-numeric: tabular-nums; }
@media (max-width: 1000px) {
    .lp-bm .lp-branches { grid-auto-columns: calc((100% - 20px) / 2); }
}
@media (max-width: 640px) {
    .lp-bm .lp-branches { grid-auto-columns: 88%; gap: 14px; }
    .lp-bm .lp-branch { padding: 20px; }
    .lp-bm__list-head > div:first-child { width: 100%; }
    .lp-bm .lp-branch__top { gap: 12px; }
    .lp-bm .lp-branch__pin { width: 42px; height: 42px; border-radius: 14px; }
}
.lp-bpin__shadow {
    position: absolute; left: 50%; top: 47px;
    width: 22px; height: 8px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: rgba(0, 0, 0, .3);
    filter: blur(2px);
}
.lp-bpin__pulse {
    position: absolute; left: 50%; top: 51px;
    width: 30px; height: 30px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: rgba(var(--bm-brand-rgb), .3);
    opacity: 0;
}
.lp-bpin.is-active .lp-bpin__pulse { animation: lp-bm-pulse 1.8s ease-out infinite; }
.lp-bpin.is-active .lp-bpin__body,
.lp-bpin:hover .lp-bpin__body {
    transform: translateX(-50%) rotate(-45deg) scale(1.16);
    box-shadow: 0 14px 26px -8px rgba(var(--bm-brand-rgb), .75);
}
@keyframes lp-bm-pulse {
    0%   { transform: translate(-50%, -50%) scale(.5); opacity: .9; }
    100% { transform: translate(-50%, -50%) scale(2.2); opacity: 0; }
}

/* The guest's own position, once they asked for the nearest branch. */
.lp-bpin--me { width: 30px; height: 30px; cursor: default; }
.lp-bpin--me .lp-bpin__dot {
    position: absolute; left: 50%; top: 50%;
    width: 18px; height: 18px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: var(--bm-me);
    border: 3px solid #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .45);
}
.lp-bpin--me .lp-bpin__pulse {
    left: 50%; top: 50%;
    background: rgba(37, 99, 235, .28);
    opacity: 1;
    animation: lp-bm-pulse 2s ease-out infinite;
}

/* Name labels under the pins. Hidden when zoomed far out, where they would
   only pile on top of one another. */
.lp-bm__map .lp-bm-label {
    direction: var(--bm-dir);
    padding: 3px 10px;
    border: 1px solid rgba(36, 26, 19, .14);
    border-radius: var(--bm-pill);
    background: rgba(255, 255, 255, .94);
    color: var(--bm-ink);
    font-size: 11.5px; font-weight: 800;
    white-space: nowrap;
    box-shadow: 0 4px 12px -6px rgba(0, 0, 0, .45);
    transition: opacity .2s;
}
.lp-bm__map .lp-bm-label::before { display: none; }
.lp-bm__map .lp-bm-label--me { color: var(--bm-me); border-color: rgba(37, 99, 235, .3); }
.lp-bm__map.is-far .lp-bm-label:not(.lp-bm-label--me) { opacity: 0; }

/* ── Popup: the branch's card, in miniature, on the map ───────────────── */
.lp-bm__map .lp-bm-popup .leaflet-popup-content-wrapper {
    padding: 0;
    border-radius: 18px;
    border: 1px solid var(--bm-line);
    box-shadow: 0 22px 44px -20px rgba(36, 26, 19, .5);
    background: var(--bm-surface);
    color: var(--bm-ink);
}
.lp-bm__map .lp-bm-popup .leaflet-popup-content {
    margin: 0;
    width: auto !important;
    min-width: 230px; max-width: 290px;
    font-family: inherit; font-size: 13px; line-height: 1.5;
}
.lp-bm__map .lp-bm-popup .leaflet-popup-tip { box-shadow: 0 3px 6px -3px rgba(0, 0, 0, .25); }
.lp-bm__map .lp-bm-popup .leaflet-popup-close-button {
    top: 8px; right: 8px;
    width: 26px; height: 26px;
    padding: 0;
    border-radius: 50%;
    background: rgba(36, 26, 19, .06);
    color: var(--bm-mute);
    font: 700 15px/26px system-ui, sans-serif;
    text-align: center;
}
.lp-bm__map .lp-bm-popup .leaflet-popup-close-button:hover {
    background: rgba(var(--bm-brand-rgb), .12);
    color: var(--bm-brand);
}
.lp-bm-pop {
    direction: var(--bm-dir);
    text-align: start;
    padding: 16px 18px 14px;
}
.lp-bm-pop__name {
    display: flex; align-items: center; gap: 8px;
    margin: 0 0 4px;
    padding-right: 28px; /* the close button sits physically top-right */
    font-size: 14.5px; font-weight: 800;
    color: var(--bm-ink);
}
.lp-bm-pop__name i { color: var(--bm-brand); font-size: 13px; }
.lp-bm-pop__addr {
    margin: 0 0 10px;
    font-size: 12px; line-height: 1.6;
    color: var(--bm-mute);
}
.lp-bm-pop__dist {
    display: inline-flex; align-items: center; gap: 6px;
    margin-bottom: 10px;
    padding: 3px 10px;
    border-radius: var(--bm-pill);
    background: rgba(22, 163, 74, .10);
    color: var(--bm-ok);
    font-size: 11.5px; font-weight: 800;
}
.lp-bm-pop__row { display: flex; flex-wrap: wrap; gap: 6px; }
.lp-bm__map .lp-bm-pop__act {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 13px;
    border: 1px solid var(--bm-line-2);
    border-radius: var(--bm-pill);
    background: var(--bm-surface);
    color: var(--bm-ink-soft) !important;
    font-family: inherit; font-size: 12px; font-weight: 800;
    text-decoration: none !important;
    cursor: pointer;
    transition: border-color .2s, color .2s, background .2s, filter .2s;
}
.lp-bm__map .lp-bm-pop__act:hover {
    border-color: var(--bm-brand);
    color: var(--bm-brand) !important;
    background: rgba(var(--bm-brand-rgb), .05);
}
.lp-bm__map .lp-bm-pop__act i { font-size: 11px; color: var(--bm-brand); }
.lp-bm__map .lp-bm-pop__act--primary,
.lp-bm__map .lp-bm-pop__act--primary:hover {
    background: linear-gradient(135deg, var(--bm-brand), var(--bm-brand-dark));
    border-color: transparent;
    color: #fff !important;
}
.lp-bm__map .lp-bm-pop__act--primary:hover { filter: brightness(1.07); }
.lp-bm__map .lp-bm-pop__act--primary i { color: #fff; }

/* ── Cards: what the map adds to .lp-branch ───────────────────────────── */
.lp-bm .lp-branch {
    scroll-margin-top: 96px;
    transition: border-color .25s var(--bm-ease), box-shadow .25s var(--bm-ease), transform .25s var(--bm-ease);
}
.lp-bm .lp-branch:hover { transform: translateY(-2px); box-shadow: var(--bm-sh); }
.lp-bm .lp-branch.is-active {
    border-color: var(--bm-brand);
    box-shadow: 0 0 0 3px rgba(var(--bm-brand-rgb), .16), var(--bm-sh);
}
.lp-bm .lp-branch.is-nearest .lp-branch__pin {
    background: linear-gradient(135deg, var(--bm-brand), var(--bm-brand-dark));
    color: #fff;
}
.lp-branch__text { flex: 1 1 auto; min-width: 0; }
.lp-branch__badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.lp-branch__badges:not(:has(:not([hidden]))) { display: none; }
.lp-branch__badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 10px;
    border-radius: var(--bm-pill);
    background: rgba(var(--bm-brand-rgb), .08);
    color: var(--bm-brand);
    font-size: 11.5px; font-weight: 800;
}
.lp-branch__badge i { font-size: 10.5px; }
.lp-branch__badge--nearest { background: rgba(22, 163, 74, .10); color: var(--bm-ok); }

.lp-bm .lp-branch__act--map { font-family: inherit; line-height: normal; cursor: pointer; }
.lp-bm .lp-branch__act--map:focus-visible { outline: 2px solid var(--bm-brand); outline-offset: 2px; }

/* ── Small screens ────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .lp-bm__bar { padding: 12px 14px; }
    .lp-bm__hint { flex-basis: 100%; order: 3; }
    .lp-bm__locate { padding: 9px 14px; font-size: 12.5px; }
    .lp-bm__map { height: clamp(300px, 80vw, 420px); }
    .lp-bm__map .leaflet-control-zoom { margin: 10px; }
}

@media (prefers-reduced-motion: reduce) {
    .lp-bpin__pulse, .lp-bpin--me .lp-bpin__pulse { animation: none !important; opacity: .35; }
    .lp-bpin__body, .lp-bm .lp-branch, .lp-bm__locate { transition: none; }
}