/* locations */
.locations {
      background: var(--bg);
    }

    .location-layout {
      display: grid;
      grid-template-columns: minmax(0, 1.4fr) minmax(320px, 0.6fr);
      gap: 18px;
      margin-top: 34px;
      align-items: stretch;
    }

    .map-panel,
    .branch-panel {
      overflow: hidden;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 24px;
      box-shadow: 0 20px 50px rgba(23, 56, 42, 0.08);
    }

    .map-toolbar {
      min-height: 64px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 14px 18px;
      border-bottom: 1px solid var(--border);
    }

    .map-toolbar strong {
      font-size: 15px;
      letter-spacing: 0.02em;
    }

    .map-status {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 7px 10px;
      border-radius: 999px;
      background: var(--surface-soft);
      color: var(--muted);
      font-size: 12px;
      font-weight: 800;
      letter-spacing: 0.02em;
    }

    .map-status::before {
      content: "";
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--accent-2);
    }

    .map-status.ready::before { background: var(--success); }

    .map-status.error::before { background: var(--accent); }

    .map-canvas {
      position: relative;
      min-height: 520px;
      background-color: #e8eee9;
      background-image:
        linear-gradient(rgba(23, 56, 42, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(23, 56, 42, 0.06) 1px, transparent 1px);
      background-size: 34px 34px;
    }

    .map-fallback {
      position: absolute;
      inset: 0;
      display: grid;
      place-content: center;
      justify-items: center;
      gap: 12px;
      padding: 32px;
      text-align: center;
    }

    .map-fallback[hidden] { display: none; }

    .map-fallback-icon {
      width: 58px;
      height: 58px;
      display: grid;
      place-items: center;
      border-radius: 18px;
      background: var(--dark);
      color: #f3f7f2;
    }

    .map-fallback-icon svg { width: 28px; height: 28px; }

    .map-fallback h3 { margin: 4px 0 0; font-size: 24px; }

    .map-fallback p {
      max-width: 42ch;
      margin: 0;
      color: var(--muted);
      line-height: 1.55;
    }

    .map-fallback .btn { margin-top: 4px; }

    .branch-panel {
      display: flex;
      flex-direction: column;
      padding: 20px;
    }

    .branch-panel-head {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 14px;
    }

    .branch-panel-head h3 { margin: 0; font-size: 22px; }

    .branch-count { color: var(--muted); font-size: 13px; font-weight: 800; }

    .branch-search {
      margin-bottom: 14px;
    }

    .branch-search input {
      min-height: 44px;
      background: #faf9f6;
    }

    .branch-list {
      display: grid;
      gap: 8px;
      max-height: 430px;
      overflow-y: auto;
      padding-right: 4px;
      overscroll-behavior: contain;
    }

    .branch-item {
      width: 100%;
      display: grid;
      gap: 5px;
      padding: 14px;
      text-align: left;
      color: var(--fg);
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 14px;
      cursor: pointer;
      transition: border-color 0.16s ease, background 0.16s ease, transform 0.16s ease;
    }

    .branch-item:hover {
      transform: translateY(-1px);
      border-color: color-mix(in srgb, var(--dark) 36%, var(--border));
    }

    .branch-item.active {
      border-color: var(--accent);
      background: color-mix(in srgb, var(--accent) 6%, var(--surface));
    }

    .branch-item strong { font-size: 15px; }

    .branch-item span { color: var(--muted); font-size: 12px; line-height: 1.45; }

    .branch-empty {
      padding: 28px 12px;
      color: var(--muted);
      text-align: center;
      line-height: 1.55;
    }

    .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }