/* USTA — real map surfaces (Phase C4A)
 *
 * SCOPE: the CUSTOMER app only, and only the parts Google Maps draws into.
 * Everything else in the address sheet is authored inline like the rest of the
 * prototype, so the approved design is untouched.
 *
 * The colour literals here follow the same convention as index.html:
 * var(--cXXXXXX, #XXXXXX), where the fallback IS the light value. Dark mode
 * therefore needs no rules of its own except where Google's own surface has to
 * be compensated for — see the [data-usta-theme="dark"] block at the bottom.
 */

/* ── the map viewport ──────────────────────────────────────────────────── */
.usta-map {
  position: relative;
  width: 100%;
  height: 210px;
  border-radius: 18px;
  overflow: hidden;
  background: var(--cE9EEF4, #E9EEF4);
  border: 1px solid var(--cE2E8F0, #E2E8F0);

  /* THE GESTURE CONTRACT (§5: map gestures must not break page scrolling).
   * `touch-action: none` inside the map lets Maps JS own every touch here, so
   * a one-finger drag pans the map instead of scrolling the sheet behind it.
   * It is scoped to this box: the sheet scrolls normally everywhere else, and
   * because the box is only 210px tall there is always somewhere to grab.
   *
   * `overscroll-behavior: contain` stops a pan that reaches the map's edge
   * from chaining outward and scrolling the sheet or bouncing the page. */
  touch-action: none;
  overscroll-behavior: contain;
}

.usta-map__canvas {
  position: absolute;
  inset: 0;
}

/* Google injects its own anchors and controls; none of them should inherit the
 * app's text selection rules or show a focus ring inside a decorative map. */
.usta-map__canvas * {
  -webkit-user-select: none;
  user-select: none;
}

/* ── the centre-fixed pin ──────────────────────────────────────────────────
 * The pin does NOT move. The map moves under it, so whatever sits beneath the
 * pin's tip is the selected point. `pointer-events: none` is essential: the pin
 * covers the exact spot the user is trying to drag, and without it every pan
 * that started on the pin would be swallowed.
 *
 * The tip is at the BOTTOM of the glyph, so the element is translated up by its
 * full height rather than centred — a pin centred on its box selects a point
 * about 20px north of where it appears to point, which at zoom 17 is a
 * different building. */
.usta-map-pin {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -100%);
  pointer-events: none;
  z-index: 2;
  transition: transform 0.18s ease-out;
}

/* Lifted while the map is moving, which reads as "this is what you are
 * choosing" and reveals the shadow underneath as a ground reference. */
.usta-map-pin--lifted {
  transform: translate(-50%, -100%) translateY(-6px);
}

.usta-map-pin__body {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c0078F8, #0078F8);
  filter: drop-shadow(0 3px 5px rgba(16, 24, 40, 0.28));
}

.usta-map-pin__body .material-symbols-rounded {
  font-size: 40px;
  line-height: 1;
}

/* The ground shadow sits at the pin's tip — the actual selected coordinate —
 * so there is a visible mark on the map even while the pin is lifted. */
.usta-map-pin__shadow {
  position: absolute;
  left: 50%;
  bottom: -3px;
  width: 12px;
  height: 5px;
  border-radius: 50%;
  transform: translateX(-50%);
  background: rgba(16, 24, 40, 0.28);
}

/* ── the map's own controls ────────────────────────────────────────────────
 * Default Google UI is off (disableDefaultUI), so these are the app's buttons.
 * Positioned with logical properties so they mirror correctly under dir="rtl"
 * without a second rule. */
.usta-map__controls {
  position: absolute;
  inset-inline-end: 10px;
  bottom: 10px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.usta-map__control {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--cFFFFFF, #FFFFFF);
  border: 1px solid var(--cE4E9F0, #E4E9F0);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(16, 24, 40, 0.14);
  color: var(--c0078F8, #0078F8);
}

.usta-map__control:active {
  transform: scale(0.9);
}

/* ── states that replace the map rather than decorate it ───────────────────
 * §11: no fake map fallback. When Maps cannot load, the box shows why — it
 * never draws a stand-in map. */
.usta-map--state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 20px;
  box-sizing: border-box;
  text-align: center;
  /* No touch-action override needed: there is nothing here to pan, so the
     sheet should scroll normally through this box. */
  touch-action: auto;
}

.usta-map--state .usta-map__state-icon {
  font-size: 28px;
  color: var(--cB3BAC6, #B3BAC6);
}

.usta-map--state .usta-map__state-title {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--c5D6673, #5D6673);
  line-height: 1.5;
}

.usta-map--error .usta-map__state-icon { color: var(--cA32222, #A32222); }
.usta-map--error .usta-map__state-title { color: var(--cA32222, #A32222); }

/* ── Places suggestion list ────────────────────────────────────────────────
 * dir is inherited from the app root, so RTL mirrors without extra rules; the
 * text-align below is logical for the same reason. */
.usta-place-list {
  margin-top: 8px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--cE6EAF0, #E6EAF0);
  background: var(--cFFFFFF, #FFFFFF);
}

.usta-place-row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 14px;
  cursor: pointer;
  text-align: start;
  border-bottom: 1px solid var(--cF0F3F7, #F0F3F7);
}

.usta-place-row:last-child { border-bottom: none; }
.usta-place-row:active { background: var(--cF5F7FA, #F5F7FA); }

.usta-place-row__primary {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--c0B1220, #0B1220);
}

.usta-place-row__secondary {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--c5D6673, #5D6673);
  margin-top: 2px;
}

/* ── dark mode ─────────────────────────────────────────────────────────────
 * The tokens above already flip with the theme. These three rules exist for
 * things a token cannot reach:
 *   1. the placeholder surface behind a map that has not painted yet, which
 *      would otherwise flash light grey inside a dark sheet;
 *   2. Google's own attribution/watermark, which sits on the DARK map tiles
 *      supplied by colorScheme: 'DARK' and needs no help — but the container
 *      border does, or the map edge disappears into the sheet;
 *   3. the pin shadow, which is invisible against a dark map at full opacity.
 */
[data-usta-theme="dark"] .usta-map {
  background: #1B212B;
  border-color: rgba(255, 255, 255, 0.10);
}

[data-usta-theme="dark"] .usta-map-pin__shadow {
  background: rgba(0, 0, 0, 0.55);
}

[data-usta-theme="dark"] .usta-place-list {
  background: #171C24;
  border-color: rgba(255, 255, 255, 0.10);
}

[data-usta-theme="dark"] .usta-place-row {
  border-bottom-color: rgba(255, 255, 255, 0.07);
}

[data-usta-theme="dark"] .usta-place-row:active {
  background: #1B212B;
}

[data-usta-theme="dark"] .usta-map__control {
  background: #1B212B;
  border-color: rgba(255, 255, 255, 0.12);
  color: var(--c4DA3FF, #4DA3FF);
}