.branch-card {
  display: flex;
  flex-direction: column;
  gap: 0;
  height: 100%;
  padding: 0;
  overflow: hidden;
  background: var(--branch-card-bg, #fff);
  color: var(--branch-card-text, #27364b);
  border: 1px solid color-mix(in srgb, var(--brand) 30%, #e5ebf4);
  border-radius: 22px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .8),
              0 8px 26px color-mix(in srgb, var(--brand) 10%, transparent);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.branch-card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--brand) 52%, #dbe6f3);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand) 8%, transparent),
              0 14px 36px color-mix(in srgb, var(--brand) 16%, transparent);
}

.branch-card-body { padding: 1.35rem 1.35rem 1rem; }
.branch-identity { display: flex; align-items: center; gap: 1rem; margin-bottom: .9rem; }

.branch-card img,
.branch-logo-placeholder {
  width: 64px;
  height: 64px;
  flex: 0 0 64px;
  object-fit: contain;
  border-radius: 16px;
  background: #f5f8fc;
  padding: .35rem;
}

.branch-logo-placeholder {
  display: grid;
  place-items: center;
  color: var(--brand);
  font-size: 1.55rem;
}

.branch-card h3 { font-size: 1.1rem; font-weight: 800; margin: 0; color: var(--branch-card-text, #27364b); }
.branch-card small { color: var(--brand); font-weight: 700; }
.branch-card p { display: flex; gap: .55rem; align-items: flex-start; font-size: .88rem; color: var(--branch-card-text, #65748a); margin: .5rem 0; }
.branch-card p i { color: var(--brand); margin-top: .08rem; }
.branch-card p a { color: inherit; text-decoration: none; }
.branch-card p a:hover { color: var(--brand); }
.branch-card p:has(.bi-telephone-fill) {
  align-items: center;
  margin-top: .75rem;
  padding: .72rem .85rem;
  color: var(--branch-card-text, #27364b);
  font-size: .94rem;
  font-weight: 750;
  background: color-mix(in srgb, var(--branch-card-bg, #fff) 88%, var(--brand));
  border: 1px solid color-mix(in srgb, var(--brand) 18%, #e6edf6);
  border-radius: 13px;
}
.branch-card p:has(.bi-telephone-fill)::before {
  content: "Branch Contact";
  margin-right: auto;
  color: var(--branch-card-text, #718096);
  font-size: .73rem;
  font-weight: 700;
  letter-spacing: .02em;
}
.branch-card p:has(.bi-telephone-fill) a {
  color: var(--brand);
  font-weight: 800;
  white-space: nowrap;
}
.branch-card p:has(.bi-telephone-fill) a:hover { text-decoration: underline; }

.branch-map {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #eef3f8;
  border-top: 1px solid #e7edf5;
  border-bottom: 1px solid #e7edf5;
}

.branch-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.branch-actions { display: flex; gap: .65rem; padding: 1rem 1.25rem 1.2rem; margin-top: auto; }
.branch-actions .btn { border-radius: 12px; font-size: .84rem; font-weight: 700; }
.branch-direction-btn { flex: 1; background: var(--brand); color: #fff; border: 1px solid var(--brand); }
.branch-direction-btn:hover { background: #073f9e; color: #fff; }
.branch-map-btn { width: 43px; color: var(--brand); border: 1px solid color-mix(in srgb, var(--brand) 35%, #dce6f1); }
.branch-map-btn:hover { background: var(--brand); color: #fff; }

.branch-map-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  min-height: 120px;
  margin-top: auto;
  background: color-mix(in srgb, var(--branch-card-bg, #fff) 90%, #64748b);
  color: var(--branch-card-text, #8491a4);
  font-size: .83rem;
  border-top: 1px dashed #dbe3ed;
}

@media (max-width: 420px) {
  .branch-card p:has(.bi-telephone-fill) {
    flex-wrap: wrap;
  }
  .branch-card p:has(.bi-telephone-fill)::before {
    flex: 1 0 calc(100% - 2rem);
  }
}