/* =========================================================
   Contact page — animated branch locator (Sampaloc / Pasay)
   Colours follow the CheckApps login palette (assets/css/login-palette.css).
   ========================================================= */
.branch-locator {
    --bm-teal: var(--lp-teal, #12D6C8);
    --bm-teal-deep: var(--lp-teal-deep, #0A9FB0);
    --bm-teal-ink: var(--lp-teal-ink, #08848F);
    --bm-purple: var(--lp-purple, #7C3AED);
    --bm-ink: var(--lp-ink, #16161E);
    --bm-muted: var(--lp-muted, #545768);
    --bm-line: var(--lp-line, #E3E5EE);
    --bm-ease: cubic-bezier(.22, 1, .36, 1);
    --bm-spring: cubic-bezier(.34, 1.56, .64, 1);
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(280px, 1fr);
    gap: 22px;
    align-items: stretch;
}

/* ---------- Map ---------- */
.branch-map-wrap {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid var(--bm-line);
    box-shadow: 0 24px 50px -28px rgba(11, 11, 14, .45);
    min-height: 460px;
    background: #E8EDF1;
    isolation: isolate;
}
.branch-map { position: absolute; inset: 0; z-index: 0; font-family: 'Plus Jakarta Sans', sans-serif; }
.branch-map .leaflet-control-zoom a { color: var(--bm-ink); }
.branch-map .leaflet-control-attribution { font-size: 10px; }

/* "Locating …" status with a radar sweep */
.branch-map-status {
    position: absolute; top: 14px; left: 50%; z-index: 500;
    display: inline-flex; align-items: center; gap: 10px;
    padding: 9px 16px 9px 12px; border-radius: 999px;
    background: rgba(11, 11, 14, .86); color: #fff; font-size: .82rem; font-weight: 700; letter-spacing: .02em;
    box-shadow: 0 12px 28px -12px rgba(0, 0, 0, .6);
    backdrop-filter: blur(8px);
    transform: translate(-50%, -140%); opacity: 0; pointer-events: none;
    transition: transform .45s var(--bm-spring), opacity .3s ease;
}
.branch-map-status.show { transform: translate(-50%, 0); opacity: 1; }
.branch-map-status .radar {
    position: relative; width: 18px; height: 18px; border-radius: 50%;
    border: 2px solid rgba(18, 214, 200, .5);
    background: conic-gradient(from 0deg, rgba(18, 214, 200, .9), transparent 70%);
    animation: bm-spin 1s linear infinite;
}
.branch-map-status.done .radar { animation: none; background: var(--bm-teal); border-color: var(--bm-teal); }
@keyframes bm-spin { to { transform: rotate(360deg); } }

.branch-map-reset {
    position: absolute; right: 12px; bottom: 26px; z-index: 500;
    display: inline-flex; align-items: center; gap: 8px;
    border: 0; border-radius: 999px; padding: 9px 14px;
    background: #fff; color: var(--bm-ink); font: 700 .8rem 'Plus Jakarta Sans', sans-serif;
    box-shadow: 0 10px 24px -12px rgba(11, 11, 14, .5); cursor: pointer;
    animation: bm-pop .45s var(--bm-spring) both;
}
.branch-map-reset:hover { color: var(--bm-teal-ink); transform: translateY(-1px); }
.branch-map-hint {
    position: absolute; left: 12px; bottom: 26px; z-index: 500;
    padding: 6px 10px; border-radius: 8px; font-size: .72rem; font-weight: 600;
    background: rgba(255, 255, 255, .9); color: var(--bm-muted);
    transition: opacity .4s ease;
}
.branch-map-wrap.zoom-on .branch-map-hint { opacity: 0; }

/* ---------- Pins ---------- */
.bm-pin { position: relative; width: 44px; height: 56px; }
.bm-pin .bm-drop {
    position: absolute; left: 50%; bottom: 10px; width: 36px; height: 36px; margin-left: -18px;
    border-radius: 50% 50% 50% 0; transform: rotate(-45deg);
    background: linear-gradient(135deg, var(--lp-teal, #12D6C8), var(--lp-teal-deep, #0A9FB0));
    border: 3px solid #fff;
    box-shadow: 0 10px 20px -8px rgba(10, 159, 176, .8);
    display: grid; place-items: center;
}
.bm-pin .bm-drop::after { content: ""; width: 12px; height: 12px; border-radius: 50%; background: #fff; }
.bm-pin .bm-shadow {
    position: absolute; left: 50%; bottom: 4px; width: 18px; height: 6px; margin-left: -9px;
    border-radius: 50%; background: rgba(0, 0, 0, .28); filter: blur(1px);
}
.bm-pin .bm-pulse {
    position: absolute; left: 50%; bottom: 4px; width: 16px; height: 8px; margin-left: -8px;
    border-radius: 50%; border: 2px solid var(--lp-teal, #12D6C8); opacity: 0;
}
.bm-pin.is-hq .bm-drop { background: linear-gradient(135deg, var(--lp-purple, #7C3AED), var(--lp-teal-deep, #0A9FB0)); box-shadow: 0 10px 20px -8px rgba(124, 58, 237, .8); }

/* Dropped in when its branch is located */
.bm-pin.drop .bm-drop { animation: bm-drop .8s var(--bm-spring) both; }
.bm-pin.drop .bm-shadow { animation: bm-shadow .8s var(--bm-ease) both; }
.bm-pin.active .bm-pulse { animation: bm-pulse 1.8s ease-out .5s infinite; }
@keyframes bm-drop {
    0%   { transform: translateY(-120px) rotate(-45deg); opacity: 0; }
    55%  { transform: translateY(6px) rotate(-45deg);   opacity: 1; }
    75%  { transform: translateY(-8px) rotate(-45deg); }
    100% { transform: translateY(0) rotate(-45deg); }
}
@keyframes bm-shadow { 0% { transform: scale(.2); opacity: 0; } 55% { transform: scale(1.1); opacity: 1; } 100% { transform: scale(1); } }
@keyframes bm-pulse  { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(5.5); opacity: 0; } }
@keyframes bm-pop    { from { transform: scale(.6); opacity: 0; } }

/* ---------- Pop-up ---------- */
.branch-map .leaflet-popup-content-wrapper {
    border-radius: 16px; padding: 0; overflow: hidden;
    box-shadow: 0 20px 40px -18px rgba(11, 11, 14, .55);
}
.branch-map .leaflet-popup-content { margin: 0; width: 260px !important; }
.bm-popup { padding: 14px 16px 16px; font-family: 'Plus Jakarta Sans', sans-serif; }
.bm-popup .bm-tag {
    display: inline-block; font-size: .64rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
    color: var(--lp-teal-ink, #08848F); margin-bottom: 4px;
}
.bm-popup h4 { font-family: 'Newsreader', serif; font-size: 1.2rem; font-weight: 600; margin: 0 0 4px; color: var(--lp-ink, #16161E); }
.bm-popup p { font-size: .8rem; line-height: 1.45; color: var(--lp-muted, #545768); margin: 0 0 12px; }
.bm-popup .bm-dir {
    display: inline-flex; align-items: center; gap: 7px; text-decoration: none;
    padding: 9px 14px; border-radius: 10px; font-size: .8rem; font-weight: 800;
    background: linear-gradient(120deg, #19E3D2 0%, #0FC2C4 45%, #0A9FB0 100%); color: #041A19;
    transition: transform .25s var(--bm-ease), box-shadow .25s;
}
.bm-popup .bm-dir:hover { transform: translateY(-1px); box-shadow: 0 10px 20px -10px rgba(10, 159, 176, .8); color: #041A19; }

/* ---------- Branch cards ---------- */
.branch-list { display: flex; flex-direction: column; gap: 14px; }
.branch-card {
    position: relative; display: flex; gap: 14px; align-items: flex-start; width: 100%; text-align: left;
    padding: 18px; border-radius: 18px; cursor: pointer;
    background: #fff; border: 1.5px solid var(--bm-line); color: var(--bm-ink);
    font-family: 'Plus Jakarta Sans', sans-serif;
    box-shadow: 0 10px 24px -18px rgba(11, 11, 14, .35);
    transition: border-color .3s, box-shadow .35s var(--bm-ease), transform .35s var(--bm-ease), background .3s;
    overflow: hidden;
}
.branch-card::before { /* sweep on the active card */
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(100deg, transparent 30%, rgba(18, 214, 200, .12), transparent 70%);
    transform: translateX(-100%);
}
.branch-card:hover { transform: translateY(-3px); border-color: rgba(18, 214, 200, .6); box-shadow: 0 18px 36px -20px rgba(10, 159, 176, .5); }
.branch-card:focus-visible { outline: 3px solid var(--bm-teal); outline-offset: 3px; }
.branch-card.active {
    border-color: var(--bm-teal);
    background: linear-gradient(135deg, rgba(18, 214, 200, .08), rgba(124, 58, 237, .06)), #fff;
    box-shadow: 0 0 0 4px rgba(18, 214, 200, .14), 0 18px 36px -20px rgba(10, 159, 176, .55);
}
.branch-card.active::before { animation: bm-sweep 1.2s var(--bm-ease); }
@keyframes bm-sweep { to { transform: translateX(100%); } }

.branch-pin {
    flex: 0 0 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; font-size: 1.15rem;
    background: rgba(18, 214, 200, .12); color: var(--bm-teal-ink);
    transition: transform .4s var(--bm-spring), background .3s, color .3s;
}
.branch-card:hover .branch-pin { transform: translateY(-3px) scale(1.06); }
.branch-card.active .branch-pin { background: linear-gradient(135deg, var(--bm-teal), var(--bm-teal-deep)); color: #fff; animation: bm-bounce .7s var(--bm-spring); }
.branch-card[data-branch="manila"].active .branch-pin { background: linear-gradient(135deg, var(--bm-purple), var(--bm-teal-deep)); }
@keyframes bm-bounce { 30% { transform: translateY(-8px) scale(1.1); } 60% { transform: translateY(2px); } }

.branch-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.branch-info .tag { font-size: .66rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--bm-teal-ink); }
.branch-name { font-family: 'Newsreader', serif; font-size: 1.3rem; font-weight: 600; line-height: 1.2; color: var(--bm-ink); }
.branch-addr { font-size: .84rem; line-height: 1.5; color: var(--bm-muted); }
.branch-cta {
    margin-top: 8px; display: inline-flex; align-items: center; gap: 6px; width: fit-content;
    font-size: .78rem; font-weight: 800; color: var(--bm-teal-ink);
}
.branch-cta i { transition: transform .5s var(--bm-ease); }
.branch-card:hover .branch-cta i, .branch-card.active .branch-cta i { transform: rotate(90deg); }

.branch-note { margin: 2px 4px 0; font-size: .8rem; line-height: 1.5; color: var(--bm-muted); }
.branch-note i { color: var(--bm-teal-ink); margin-right: 4px; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
    .branch-locator { grid-template-columns: 1fr; }
    .branch-map-wrap { min-height: 340px; }
    .branch-list { display: grid; grid-template-columns: 1fr 1fr; }
    .branch-note { grid-column: 1 / -1; }
}
@media (max-width: 575.98px) {
    .branch-list { grid-template-columns: 1fr; }
    .branch-map-wrap { min-height: 300px; border-radius: 16px; }
}

@media (prefers-reduced-motion: reduce) {
    .branch-locator *, .branch-locator *::before, .branch-locator *::after { animation: none !important; transition: none !important; }
}

/* =========================================================
   Drawn Philippines intro (in the CheckApps logo colours)
   ========================================================= */
.branch-map { transition: opacity .8s ease; }
.branch-map-wrap.is-ph .branch-map { opacity: 0; pointer-events: none; }
.branch-map-wrap.is-ph .branch-map-hint { opacity: 0; }

.ph-stage {
    position: absolute; inset: 0; z-index: 450; overflow: hidden;
    background:
        radial-gradient(ellipse 60% 55% at 45% 40%, rgba(18, 214, 200, .14), transparent 70%),
        radial-gradient(ellipse 55% 50% at 80% 85%, rgba(124, 58, 237, .22), transparent 70%),
        #0B0B0E;
    transition: opacity .8s ease, visibility 0s linear .8s;
}
.branch-map-wrap:not(.is-ph) .ph-stage { opacity: 0; visibility: hidden; pointer-events: none; }
.branch-map-wrap.is-ph .ph-stage { transition: opacity .8s ease, visibility 0s; }

.ph-map { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ph-graticule line { stroke: rgba(255, 255, 255, .06); stroke-width: 1; vector-effect: non-scaling-stroke; }
.ph-graticule { opacity: 0; transition: opacity 1.2s ease .2s; }
.ph-stage.is-drawing .ph-graticule { opacity: 1; }

.ph-island {
    fill: url(#phFill); fill-opacity: 0;
    stroke: url(#phStroke); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round;
    vector-effect: non-scaling-stroke;
    stroke-dasharray: 1; stroke-dashoffset: 1;
}
.ph-stage.is-drawing .ph-island {
    animation:
        ph-draw 1.5s cubic-bezier(.45, 0, .2, 1) forwards,
        ph-fill .9s ease forwards;
    animation-delay: calc(var(--i) * 45ms), calc(1.6s + var(--i) * 20ms);
}
@keyframes ph-draw { to { stroke-dashoffset: 0; } }
@keyframes ph-fill { to { fill-opacity: 1; } }

/* Branch markers — HTML overlays kept a constant size while the map zooms */
.ph-marker {
    position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 2;
    opacity: 0; transform: scale(.3); transition: opacity .4s ease, transform .6s cubic-bezier(.34, 1.56, .64, 1);
}
.ph-stage.is-drawn .ph-marker { opacity: 1; transform: scale(1); }
.ph-marker .dot {
    position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; border-radius: 50%;
    background: linear-gradient(135deg, #19E3D2, #0A9FB0); border: 2px solid #fff;
    box-shadow: 0 0 0 4px rgba(18, 214, 200, .25), 0 0 18px rgba(18, 214, 200, .9);
}
.ph-marker-hq .dot { background: linear-gradient(135deg, #7C3AED, #0A9FB0); box-shadow: 0 0 0 4px rgba(124, 58, 237, .28), 0 0 18px rgba(124, 58, 237, .9); }
.ph-marker .ping {
    position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; border-radius: 50%;
    border: 2px solid rgba(18, 214, 200, .9); opacity: 0;
}
.ph-marker-hq .ping { border-color: rgba(165, 123, 255, .9); }
.ph-stage.is-drawn .ph-marker .ping   { animation: ph-ping 2.2s ease-out infinite; }
.ph-stage.is-drawn .ph-marker .ping-2 { animation-delay: 1.1s; }
@keyframes ph-ping { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(6); opacity: 0; } }
/* While the two branches overlap (whole-country view) only the HQ marker shows */
.ph-stage.is-far .ph-marker:not(.ph-marker-hq) { opacity: 0; }

.ph-callout {
    position: absolute; left: 0; top: 0; z-index: 3;
    display: flex; flex-direction: column; gap: 2px;
    padding: 10px 14px; border-radius: 14px; min-width: 170px;
    background: rgba(22, 22, 28, .82); border: 1px solid rgba(255, 255, 255, .12);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 16px 34px -16px rgba(0, 0, 0, .8);
    color: #F3F3F6; font-family: 'Plus Jakarta Sans', sans-serif; pointer-events: none;
    opacity: 0; transform: translate(26px, -50%) translateX(-8px);
    transition: opacity .5s ease, transform .6s cubic-bezier(.22, 1, .36, 1);
}
.ph-callout::before { /* connector line to the marker */
    content: ""; position: absolute; left: -22px; top: 50%; width: 20px; height: 2px;
    background: linear-gradient(90deg, transparent, #12D6C8);
}
.ph-stage.is-drawn .ph-callout { opacity: 1; transform: translate(26px, -50%); transition-delay: .35s; }
.ph-stage.is-zooming .ph-callout, .ph-stage.is-zooming .ph-caption { opacity: 0; transition-delay: 0s; }
.ph-callout-tag { font-size: .62rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: #12D6C8; }
.ph-callout strong { font-family: 'Newsreader', serif; font-size: 1.15rem; font-weight: 600; line-height: 1.15; }
.ph-callout-sub { font-size: .74rem; color: #A3A3B0; }

.ph-caption {
    position: absolute; left: 18px; bottom: 18px; z-index: 3;
    display: flex; flex-direction: column; gap: 2px;
    color: #F3F3F6; font: 700 .9rem 'Plus Jakarta Sans', sans-serif;
    opacity: 0; transform: translateY(8px); transition: opacity .6s ease .6s, transform .6s ease .6s;
}
.ph-caption .eyebrow-mini { font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; color: #12D6C8; }
.ph-caption span:last-child { color: #A3A3B0; font-weight: 600; font-size: .8rem; }
.ph-stage.is-drawn .ph-caption { opacity: 1; transform: none; }

/* Leaflet controls only once the street map is showing */
.branch-map-wrap.is-ph .leaflet-control-container { opacity: 0; }
.branch-map .leaflet-control-container { transition: opacity .6s ease; }

@media (max-width: 575.98px) {
    .ph-callout { min-width: 0; padding: 8px 11px; }
    .ph-callout strong { font-size: 1rem; }
    .ph-callout-sub { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .ph-stage .ph-island { stroke-dashoffset: 0; fill-opacity: 1; animation: none !important; }
}
/* Callout on the left of the marker when there's no room on the right */
.ph-callout.is-flipped,
.ph-stage.is-drawn .ph-callout.is-flipped { transform: translate(calc(-100% - 26px), -50%); }
.ph-callout.is-flipped::before { left: auto; right: -22px; background: linear-gradient(90deg, #12D6C8, transparent); }
/* Soft glow on the drawn outline. (An SVG blur filter here blanked the whole page in Chrome — keep it a CSS drop-shadow on the element.) */
.ph-map { filter: drop-shadow(0 0 6px rgba(18, 214, 200, .35)); }

/* Pop-up in dark mode: login-style dark glass (its text uses the page's light text colours) */
html[data-theme="dark"] .branch-map .leaflet-popup-content-wrapper,
html[data-theme="dark"] .branch-map .leaflet-popup-tip { background: #16161C; color: #F3F3F6; box-shadow: 0 20px 40px -18px rgba(0, 0, 0, .9); }
html[data-theme="dark"] .branch-map .leaflet-popup-content-wrapper { border: 1px solid rgba(255, 255, 255, .1); }
html[data-theme="dark"] .branch-map a.leaflet-popup-close-button { color: #A3A3B0; }
html[data-theme="dark"] .branch-map .leaflet-bar a { background: #16161C; color: #F3F3F6; border-color: rgba(255, 255, 255, .1); }

/* =========================================================
   Philippines view without a frame: just the islands on the page.
   The frame (border, panel, shadow) fades in only for the street map.
   ========================================================= */
.branch-map-wrap { transition: border-color .6s ease, box-shadow .6s ease, background-color .6s ease; }
.branch-map-wrap.is-ph,
html[data-theme="dark"] .branch-map-wrap.is-ph {
    border-color: transparent;
    box-shadow: none;
    background: transparent;
}
.ph-stage { background: transparent; }
.ph-graticule { display: none; }

/* Caption now sits on the page itself: use the page's text colours (readable in light and dark mode) */
.ph-caption { color: var(--lp-ink, #16161E); }
.ph-caption .eyebrow-mini { color: var(--lp-teal-ink, #08848F); }
.ph-caption span:last-child { color: var(--lp-muted, #545768); }