/* Geo map picker — styles for the in-house address map (geo-map-picker.js).
 * Self-contained, class-based (CSP-safe: no inline styles). Neutral palette so
 * it sits inside any module's form. */

/* Bind the whole component to the ACTIVE MODULE colour scheme. Every module's
 * scheme.css sets --m-master / --m-master-soft / --m-master-strong (via
 * .scheme-<module>), but only some remap --primary — so the component keys off
 * --m-master* here and the existing var(--primary*) usages below inherit it.
 * Falls back to a neutral gold off-module. One place, whole component + modal. */
.address-block,
.addr-field,
.geo-pick,
.addr-modal-wrap {
    --primary:       var(--m-master, #b8860b);
    --primary-soft:  var(--m-master-soft, #f3f5f7);
    --primary-hover: var(--m-master-strong, #4a3b1e);
}

/* ---- full-width single-column address layout (tighter spacing) ---------- */
.address-block { display: flex; flex-direction: column; gap: .45rem; width: 100%; }
.address-block > * { width: 100%; margin: 0; box-sizing: border-box; }
.address-block label { display: block; margin: 0 0 2px; font-size: 13px; }
.address-block input:not([type="hidden"]) {
    width: 100%;
    box-sizing: border-box;
    padding: 6px 10px;            /* ~3/4 of the usual 8px 12px */
}

.geo-pick { display: block; margin: .1rem 0 .55rem; width: 100%; }
/* The `.geo-pick { display:block }` class rule outranks the UA `[hidden]` rule,
   so the toggle's hidden attribute would not collapse the map. Re-assert it with
   matching specificity so the WHOLE map component hides/shows on toggle. */
.geo-pick[hidden] { display: none; }
.geo-pick__searchwrap { position: relative; }

/* Top row: full-width search, then a full-width toggle beneath it. */
.addr-toprow {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    margin-bottom: .35rem;
}
.addr-searchwrap { position: relative; width: 100%; }
/* Match the search box to the label-in-box field rows: same border, radius,
   height and fill, so the whole block looks like one consistent set of inputs. */
.address-block .addr-search {
    width: 100%; min-height: 36px; margin: 0;
    padding: 6px 10px;
    border: 1px solid var(--primary, #d5d8dd);
    border-radius: 8px;
    background: #fff;
    color: var(--text, #222);
    font-size: 14px; line-height: 1.2;
    outline: none;
}
.address-block .addr-search:focus {
    border-color: var(--primary, #999);
    box-shadow: 0 0 0 3px var(--primary-soft, rgba(0,0,0,.06));
}
/* Reserve room at the right for the map toggle. Higher specificity than the
   generic `.address-block input:not([type=hidden])` padding shorthand. */
.address-block .addr-searchwrap .addr-search { padding-right: 54px; }
/* Map show/hide toggle — an inset tinted cell inside the search box's right
   edge, mirroring the label-in-box cell used by the City / State fields.
   Caret points UP when the map is hidden (default) and DOWN when it is shown. */
.addr-map-toggle {
    position: absolute; top: 4px; right: 4px; bottom: 4px;
    z-index: 5;
    display: inline-flex; align-items: center; gap: 4px;
    padding: 0 9px;
    border: 0;
    border-left: 1px dashed var(--primary, #cfd3d8);
    border-radius: 0 6px 6px 0;
    background: var(--primary-soft, #f3f5f7);
    cursor: pointer;
}
.addr-map-toggle:hover { filter: brightness(0.96); }
.addr-map-toggle__icon { width: 18px; height: 18px; max-width: none; display: block; pointer-events: none; }
/* CSS triangle; direction swapped by border side (no transform — reliable on a
   zero-area box). Up = map hidden (default); down = map visible. */
.addr-map-toggle__caret {
    width: 0; height: 0; pointer-events: none;
    border-left: 4px solid transparent; border-right: 4px solid transparent;
    border-top: 5px solid var(--primary, #555);   /* ▲ up = map hidden */
}
.addr-map-toggle.is-open .addr-map-toggle__caret {
    border-top: 0;
    border-bottom: 5px solid var(--primary, #555);       /* ▼ down = map visible */
}

/* ---- "bar" variant: the search input IS the header, and the [fields] / [map]
   toggle buttons sit INSIDE the same box, each preceded by a dotted divider.
   The barhead itself is the single bordered field; the outer wrapper draws no
   box of its own so the whole thing reads as one control. --------------------- */
.address-block--bar {
    border: 0;
    border-radius: 0;
    background: transparent;
    padding: 0;
}
.addr-barhead {
    display: flex;
    align-items: stretch;
    gap: 0;
    border: 1px solid var(--border, rgba(17, 24, 39, .16));
    border-radius: 10px;
    background: var(--surface, #fff);
    overflow: hidden;
}
.addr-barhead:focus-within {
    border-color: var(--primary, #d97706);
    box-shadow: 0 0 0 3px var(--focus-ring, rgba(217, 119, 6, .16));
}
.addr-barhead .addr-searchwrap { flex: 1 1 auto; min-width: 0; display: flex; }
/* The search input is borderless/transparent so the barhead border is the only
   box; no reserved right padding (the buttons are real flex cells now). */
.address-block--bar .addr-searchwrap .addr-search,
.addr-barhead .addr-search {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    width: 100%; min-height: 42px;
    padding: 6px 12px !important;
}
/* Toggles become inset cells; a DOTTED divider precedes each, separating the
   input from the buttons and the two buttons from each other. */
.addr-barhead .addr-headbtn {
    position: static; inset: auto;
    flex: 0 0 auto;
    display: inline-flex; align-items: center; gap: 4px;
    min-height: auto; padding: 0 13px;
    border: 0 !important;
    border-left: 1px dotted var(--border-strong, rgba(17, 24, 39, .32)) !important;
    border-radius: 0;
    background: transparent;
    color: var(--text, #1F2937);
    cursor: pointer;
}
.addr-barhead .addr-headbtn:hover { background: var(--primary-soft, #FFF1DF); }
/* Panels stack full-width below the header when their button opens them. Both
   start hidden (the markup carries `hidden`); the :not([hidden]) guard means the
   display rule never overrides the hidden attribute, so the toggle can actually
   hide them again. */
.address-block--bar .geo-pick,
.address-block--bar .addr-fields { margin-top: 8px; }
.address-block--bar [data-addr-fields][hidden],
.address-block--bar [data-geo-map][hidden] { display: none; }
.address-block--bar .addr-fields:not([hidden]) {
    display: flex; flex-direction: column; gap: .45rem;
}
.address-block--bar .addr-fields > * { width: 100%; margin: 0; box-sizing: border-box; }

/* Full-width Building field */
.addr-field--full { width: 100%; }

/* Search autocomplete dropdown (shared by top search + Building).
   geo-map-picker.js wraps the search input in `.addr-ac` at runtime. That
   wrapper becomes a flex ITEM inside `.addr-barhead .addr-searchwrap`, so it
   must be told to grow — without this the bar variant's search box collapses to
   its intrinsic ~194px instead of filling the bar. flex/min-width are inert in
   the block-layout variants, so one rule covers every variant. */
.addr-ac { position: relative; display: block; width: 100%; flex: 1 1 auto; min-width: 0; }
/* The list is position:FIXED and placed by geo-map-picker.js from the input's
   viewport rect. Absolute positioning made it a clipped descendant of whichever
   ancestor sets `overflow: hidden` — `.addr-barhead`, `.addr-collapse`,
   `.addr-modal__panel` — so the results were built but never painted, which is
   why picking a place was impossible on the bar variant. Fixed elements are not
   clipped by ancestor overflow, so the menu now escapes every container.
   z-index clears `.addr-modal__overlay` (1000) so it works inside the modal. */
.addr-ac__list {
    position: fixed; z-index: 1200;
    margin: 0; padding: 0; list-style: none;
    background: #fff; border: 1px solid var(--border, #d5d8dd);
    border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,.12);
    max-height: 260px; overflow-y: auto;
}
.addr-ac__item {
    display: flex; flex-direction: column;
    padding: 8px 10px; cursor: pointer; border-bottom: 1px solid #f0f1f3;
}
.addr-ac__item:last-child { border-bottom: 0; }
.addr-ac__item:hover { background: #f5f7fa; }
.addr-ac__name { font-weight: 600; font-size: 14px; }
.addr-ac__addr { font-size: 12px; color: var(--muted, #6b7280); }

@media (prefers-color-scheme: dark) {
    /* The map toggle inherits the module's --primary-soft tint (same as the
       City / State label cells), so no dark-specific background here. */
    .addr-ac__list { background: #1c2128; border-color: #333a44; }
    .addr-ac__item { border-bottom-color: #262d36; }
    .addr-ac__item:hover { background: #262d36; }
}

.geo-pick__map {
    position: relative;
    width: 100%;
    height: 300px;
    border: 1px solid var(--border, #d5d8dd);
    border-radius: 10px;
    overflow: hidden;
    background: #e9edf1;
    touch-action: none;            /* let the picker own pan/zoom gestures */
    cursor: grab;
    user-select: none;
}
.geo-pick__map.is-dragging { cursor: grabbing; }

.geo-pick__tiles { position: absolute; inset: 0; }
.geo-pick__tile {
    position: absolute;
    width: 256px; height: 256px;
    max-width: none;               /* defeat global img{max-width:100%} */
    pointer-events: none;
    user-select: none;
}
.geo-pick__tile.is-blank { visibility: hidden; }

/* Location marker — anchored to its geo point (bottom tip = the coordinate). */
.geo-pick__marker {
    position: absolute;
    width: 32px; height: 32px;
    max-width: none;
    transform: translate(-50%, -100%);   /* tip sits on the point */
    pointer-events: none;                 /* look-around by default */
    z-index: 3;
    user-select: none;
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .35));
    transition: transform .08s ease;
}
/* In edit mode the marker is grabbable. */
.geo-pick__map.is-editing .geo-pick__marker { pointer-events: auto; cursor: grab; }
.geo-pick__map.is-editing .geo-pick__marker:active { cursor: grabbing; transform: translate(-50%, -105%) scale(1.08); }

/* Lock/unlock pin-movement toggle (icon button, top-left). */
.geo-pick__lock {
    position: absolute;
    left: 8px; top: 8px;
    z-index: 4;
    width: 34px; height: 34px;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0;
    border: 1px solid var(--border, #cfd3d8);
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
}
.geo-pick__lock:hover { background: #f3f5f7; }
.geo-pick__lock img { width: 18px; height: 18px; max-width: none; pointer-events: none; }
/* Unlocked = actionable: tint it so it's obvious the pin can be moved. */
.geo-pick__lock.is-unlocked { background: #fff3f3; border-color: #e7a3a3; }
.geo-pick__map.is-editing { cursor: crosshair; }

/* "Show places" toggle — reveals tappable nearby POIs on the map (bottom-left). */
.geo-pick__places {
    position: absolute;
    left: 8px; bottom: 8px;
    z-index: 4;
    padding: 5px 10px;
    border: 1px solid var(--border, #cfd3d8);
    border-radius: 8px;
    background: #fff;
    color: var(--text, #222);
    font: inherit; font-size: 12px; line-height: 1;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
}
.geo-pick__places:hover { background: #f3f5f7; }
.geo-pick__places.is-on {
    background: var(--primary, #b8860b);
    border-color: var(--primary, #b8860b);
    color: #fff;
}

/* Nearby-place markers layer — tappable dots the user can select. */
.geo-pick__pois {
    position: absolute; inset: 0;
    z-index: 3;
    pointer-events: none;
    overflow: hidden;
}
/* The marker box is JUST the dot, centred on the geo point. The dot never moves;
   the label is positioned off it and can't shift the anchor. Hover target is the
   dot alone, so passing between nearby markers stays stable. */
.geo-pick__poi {
    position: absolute;
    width: 14px; height: 14px;
    transform: translate(-50%, -50%);
    padding: 0; border: 0; background: none;
    cursor: pointer;
    pointer-events: auto;
}
.geo-pick__poi-dot {
    display: block;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: var(--primary, #b8860b);
    border: 2px solid #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
    /* Only shadow + colour animate on hover — never size or position. */
    transition: box-shadow .12s ease, background-color .12s ease;
}
/* Label sits to the right of the dot, absolutely positioned so it never moves
   the dot. It doesn't take pointer events, so it can't steal/flicker hover. */
.geo-pick__poi-label {
    position: absolute;
    left: 18px; top: 50%;
    transform: translateY(-50%);
    max-width: 170px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    padding: 2px 7px;
    border-radius: 6px;
    background: rgba(255, 255, 255, .95);
    color: var(--text, #222);
    font-size: 11px; line-height: 1.5;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
    opacity: 0; pointer-events: none;
    transition: opacity .12s ease;
}
/* Hover / focus / selected = shadow ring + darker fill. No movement. */
.geo-pick__poi:hover, .geo-pick__poi:focus, .geo-pick__poi.is-selected { z-index: 6; }
.geo-pick__poi:hover .geo-pick__poi-dot,
.geo-pick__poi:focus .geo-pick__poi-dot,
.geo-pick__poi.is-selected .geo-pick__poi-dot {
    background: var(--primary-hover, var(--primary, #8a5a1e));
    box-shadow: 0 0 0 4px rgba(0, 0, 0, .12), 0 2px 7px rgba(0, 0, 0, .5);
}
.geo-pick__poi:hover .geo-pick__poi-label,
.geo-pick__poi:focus .geo-pick__poi-label,
.geo-pick__poi.is-selected .geo-pick__poi-label { opacity: 1; }

.geo-pick__ctrls {
    position: absolute;
    right: 8px; top: 8px;
    z-index: 4;
    display: flex; flex-direction: column; gap: 4px;
}
.geo-pick__ctrl {
    width: 30px; height: 30px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--border, #cfd3d8);
    border-radius: 6px;
    background: #fff;
    color: var(--primary, #444);
    font-size: 18px; line-height: 1;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
}
.geo-pick__ctrl:hover { background: #f3f5f7; }
/* Zoom icons: magnifier + / − drawn as stroked shapes. Stroke is set DIRECTLY to
   the module accent (not currentColor) so an ancestor `button { color: … }` rule
   on the host page can't hijack the colour and render them invisible. */
.geo-pick__ctrl svg { display: block; pointer-events: none; }
.geo-pick__ctrl svg circle,
.geo-pick__ctrl svg line {
    fill: none;
    stroke: var(--primary, #444);
    stroke-width: 2.2;
    stroke-linecap: round;
}
.geo-pick__recenter-ic { width: 22px; height: 22px; max-width: none; pointer-events: none; }

/* ---- collapsible address section (module-bar coloured heading) ---------- */
.addr-collapse {
    border: 1px solid var(--border, #e2e5e9);
    border-radius: 10px;
    overflow: hidden;
    margin: .4rem 0 .6rem;
}
/* Light module-tint header (matches the Sangh "Address" section look). */
.addr-collapse__head {
    background: var(--primary-soft, #FFF7EC);
    color: var(--primary, #4a3b1e);
    padding: 10px 14px;
    font-weight: 700;
    cursor: pointer;
    list-style: none;
    display: flex; align-items: center; gap: 8px;
    border-bottom: 1px solid transparent;
}
details.addr-collapse[open] > .addr-collapse__head { border-bottom-color: var(--border, #e2e5e9); }
.addr-collapse__head:hover { filter: brightness(0.98); }
.addr-collapse__head::-webkit-details-marker { display: none; }
.addr-collapse__head::after { content: "\25BE"; margin-left: auto; font-size: 12px; transition: transform .15s ease; }
details.addr-collapse:not([open]) > .addr-collapse__head::after { transform: rotate(-90deg); }
.addr-collapse__hint { font-weight: 400; font-size: 12px; opacity: .7; }
.addr-collapse__body { padding: 12px 14px; }

.geo-pick__hint {
    margin-top: .4rem;
    font-size: 12px;
    color: var(--muted, #6b7280);
}

/* Search results dropdown */
.geo-pick__results {
    position: absolute;
    z-index: 20;
    left: 0; right: 0;
    margin: 2px 0 0;
    padding: 0;
    list-style: none;
    background: #fff;
    border: 1px solid var(--border, #d5d8dd);
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .12);
    max-height: 260px;
    overflow-y: auto;
}
.geo-pick__result {
    display: flex; flex-direction: column;
    padding: 8px 10px;
    cursor: pointer;
    border-bottom: 1px solid #f0f1f3;
}
.geo-pick__result:last-child { border-bottom: 0; }
.geo-pick__result:hover { background: #f5f7fa; }
.geo-pick__result-name { font-weight: 600; font-size: 14px; }
.geo-pick__result-addr { font-size: 12px; color: var(--muted, #6b7280); }

@media (prefers-color-scheme: dark) {
    .geo-pick__map { border-color: #333a44; background: #1c2128; }
    .geo-pick__ctrl { background: #232a33; border-color: #333a44; color: #e6e6e6; }
    .geo-pick__ctrl:hover { background: #2b333d; }
    .geo-pick__edit { background: #232a33; border-color: #333a44; color: #e6e6e6; }
    .geo-pick__edit:hover { background: #2b333d; }
    .geo-pick__edit.is-on { background: #e23b3b; border-color: #e23b3b; color: #fff; }
    .geo-pick__results { background: #1c2128; border-color: #333a44; }
    .geo-pick__result { border-bottom-color: #262d36; }
    .geo-pick__result:hover { background: #262d36; }
}

/* ---- label-in-box fields: [~30% module-tinted label | input] ------------ */
.addr-field {
    display: flex; align-items: stretch; width: 100%;
    border: 1px solid var(--primary, #d5d8dd); border-radius: 8px;
    overflow: hidden; background: #fff; min-height: 36px;
}
.addr-field .addr-field__label {
    flex: 0 0 30%; min-width: 82px; max-width: 44%;
    display: flex; align-items: center; margin: 0; padding: 4px 10px;
    background: var(--primary-soft, #f3f5f7); color: var(--primary-hover, #333);
    font-size: 13px; font-weight: 600; line-height: 1.2;
    border-right: 1px dashed var(--primary, #cfd3d8);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.addr-field .addr-field__input {
    flex: 1 1 auto; width: auto; min-width: 0; margin: 0; padding: 6px 10px;
    border: 0; outline: none; background: transparent; font-size: 14px;
}
.addr-field:focus-within {
    border-color: var(--primary, #999);
    box-shadow: 0 0 0 3px var(--primary-soft, rgba(0,0,0,.06));
}
.addr-field .geo-autofill__status {
    align-self: center; margin: 0 8px 0 0; padding: 0;
    font-size: 11px; white-space: nowrap; color: var(--muted, #6b7280);
    max-width: 45%; overflow: hidden; text-overflow: ellipsis;
}
.addr-field__req { color: #d33; margin-left: 2px; }
@media (prefers-color-scheme: dark) {
    .addr-field { background: #1c2128; border-color: #333a44; }
    .addr-field .addr-field__input { color: #e6e6e6; }
    .address-block .addr-search { background: #1c2128; border-color: #333a44; color: #e6e6e6; }
}
/* ============================ address modal ============================== */
/* Field-as-button that opens the address block in a centered overlay. */
.addr-modal-wrap { display: block; width: 100%; }
.addr-modal-trigger {
    display: inline-flex; align-items: center; gap: 8px; width: 100%;
    min-height: 36px; padding: 6px 12px;
    border: 1px solid var(--primary, #cfd3d8); border-radius: 8px;
    background: #fff; color: var(--text, #222);
    font: inherit; font-size: 14px; line-height: 1.2; text-align: left; cursor: pointer;
}
.addr-modal-trigger:hover { background: var(--primary-soft, #f3f5f7); }
.addr-modal-trigger__ico { width: 9px; height: 9px; border-radius: 50%; background: var(--primary, #b8860b); flex: 0 0 auto; }
.addr-modal-trigger__label { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.addr-modal-trigger__chev { flex: 0 0 auto; color: var(--primary, #888); }
.addr-modal-trigger__chev::after { content: "\25B8"; } /* ▸ */

.addr-modal__overlay {
    position: fixed; inset: 0; z-index: 1000;
    display: flex; align-items: center; justify-content: center; padding: 16px;
}
.addr-modal__overlay[hidden] { display: none; }
.addr-modal__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .45); }
.addr-modal__panel {
    position: relative; z-index: 1; width: 100%; max-width: 560px; max-height: 90vh;
    display: flex; flex-direction: column;
    background: #fff; border-radius: 12px; overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .3);
}
.addr-modal__head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 16px; background: var(--primary-soft, #FFF7EC);
    border-bottom: 1px solid var(--border, #e2e5e9);
}
.addr-modal__title { font-weight: 700; color: var(--primary, #4a3b1e); }
.addr-modal__x { border: 0; background: none; font-size: 22px; line-height: 1; cursor: pointer; color: var(--primary, #666); padding: 0 4px; }
.addr-modal__body { padding: 14px 16px; overflow-y: auto; }
.addr-modal__foot { padding: 12px 16px; border-top: 1px solid var(--border, #e2e5e9); text-align: right; }
.addr-modal__done {
    padding: 8px 18px; border: 0; border-radius: 8px;
    background: var(--primary, #b8860b); color: #fff; font: inherit; font-weight: 600; cursor: pointer;
}
.addr-modal__done:hover { filter: brightness(1.05); }
@media (prefers-color-scheme: dark) {
    .addr-modal-trigger { background: #1c2128; color: #e6e6e6; }
    .addr-modal__panel { background: #1c2128; }
}