/* ==========================================================================
   Danalyx Branch Picker – Frontend styles
   Tailwind-like design driven by CSS tokens so Elementor controls can map in.
   Default look matches the provided mock: dark search, dark primary buttons,
   segmented tabs, soft white cards with rounded corners and subtle shadows.
   ========================================================================== */

/* -------- Tokens (Elementor controls map to these) -------- */
.danalyx-branch-picker-container{
  /* Stable defaults */
  --dbp-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;

  /* Text + colors */
  --dbp-text: #0b1220;
  --dbp-muted: #64748b;
  --dbp-link: #0f172a;
  --dbp-link-hover: #0b1220;                 /* hover color for Directions/Call/Menu */

  /* Headings */
  --dbp-title-color: var(--dbp-text);
  --dbp-subtitle-color: var(--dbp-subtext, var(--dbp-muted));

  /* Surfaces */
  --dbp-bg: #f6f7fb;
  --dbp-surface: #f6f7fb;
  --dbp-card: #ffffff;
  --dbp-border: #e2e8f0;
  --dbp-primary: #0f172a;

  /* Radii & spacing */
  --dbp-radius: 16px;
  --dbp-pad: 16px;

  /* Layout gaps (desktop defaults) */
  --dbp-grid-gap: 16px;
  --dbp-emphasis-gap: 16px;
  --dbp-maplist-gap: 16px;

  /* Grid sizing */
  --dbp-grid-min: 320px;
  --dbp-emphasis-cols: 2fr 1fr;
  --dbp-maplist-cols: 1fr 1fr;

  /* Header layout */
  --dbp-header-justify: space-between;
  --dbp-header-align: center;

  /* Accent */
  --dbp-accent: #0ea5e9;

  /* Inputs (search) */
  --dbp-input-bg: #0b1220;
  --dbp-input-text: #ffffff;
  --dbp-input-placeholder: #94a3b8;
  --dbp-search-radius: 16px;
  --dbp-search-max: none;
  /* search sizing */
  --dbp-search-font: 16px;
  --dbp-search-pad-v: 12px;
  --dbp-search-pad-h: 14px;

  /* Segmented control (ribbon) */
  --dbp-seg-bg: #ffffff;
  --dbp-seg-border: transparent;             /* no outer border by default */
  --dbp-seg-size: 16px;
  --dbp-seg-hover-bg: rgba(15,23,42,.05);
  --dbp-seg-active-bg: var(--dbp-primary);
  --dbp-seg-active-color: #ffffff;

  /* Ribbon spacing tokens (container) — JS may override per breakpoint */
  --dbp-seg-gap: 6px;
  --dbp-seg-pad-v: 6px;
  --dbp-seg-pad-h: 6px;

  /* NEW: ribbon item padding tokens (individual option buttons) */
  --dbp-seg-item-pad-v: 8px;
  --dbp-seg-item-pad-h: 12px;

  /* Buttons (toolbar buttons) */
  --dbp-btn-bg: var(--dbp-primary);
  --dbp-btn-color: var(--dbp-btn-text, #ffffff);
  --dbp-btn-border: transparent;
  --dbp-btn-radius: 14px;
  --dbp-btn-pad-v: 10px;
  --dbp-btn-pad-h: 14px;
  --dbp-btn-size: 16px;
  --dbp-btn-hover-bg: var(--dbp-btn-hover, #0c142a);
  --dbp-btn-hover-color: #ffffff;
  --dbp-btn-hover-border: var(--dbp-btn-border);

  /* Clear selection button (separate tokens) */
  --dbp-clear-bg: #ffffff;
  --dbp-clear-color: var(--dbp-text);
  --dbp-clear-border: var(--dbp-border);
  --dbp-clear-hover-bg: #f8fafc;
  --dbp-clear-hover-color: var(--dbp-clear-color);
  --dbp-clear-hover-border: var(--dbp-clear-border);
  --dbp-clear-radius: var(--dbp-btn-radius);
  --dbp-clear-pad-v: var(--dbp-btn-pad-v);
  --dbp-clear-pad-h: var(--dbp-btn-pad-h);
  --dbp-clear-size: var(--dbp-btn-size);

  /* CTA (card action button) */
  --dbp-cta-bg: var(--dbp-primary);
  --dbp-cta-color: var(--dbp-cta-text, #ffffff);
  --dbp-cta-border: transparent;
  --dbp-cta-radius: 14px;
  --dbp-cta-pad-v: 10px;
  --dbp-cta-pad-h: 14px;
  --dbp-cta-size: 16px;
  --dbp-cta-hover-bg: #0c142a;
  --dbp-cta-hover-color: #ffffff;
  --dbp-cta-hover-border: var(--dbp-cta-border);

  /* Chips */
  --dbp-chip-bg: #ffffff;
  --dbp-chip-border: #e5e7eb;

  /* Cards */
  --dbp-card-shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(15,23,42,.06);
  --dbp-card-shadow-hover: 0 2px 4px rgba(0,0,0,.06), 0 12px 32px rgba(15,23,42,.10);
  --dbp-card-border-hover: var(--dbp-border);

  /* Map */
  --dbp-map-pin: #0ea5e9;
  --dbp-map-user-pin: var(--dbp-map-user, #10b981);
  --dbp-map-minh: 380px;
  --dbp-map-grid: #e5e7eb;

  /* Focus ring */
  --dbp-focus: 0 0 0 3px rgba(14,165,233,.25);

  /* Typography tokens (responsive via Elementor) */
  --dbp-title-size: ;                   /* optional override; else clamp below */
  --dbp-subtitle-size: 16px;
  --dbp-card-title-size: 18px;          /* branch name */
  --dbp-body-size: 14px;                /* address/phone/hours */
  --dbp-distance-size: 14px;
  --dbp-link-size: 14px;
  --dbp-chip-size: 12px;

  /* Color tokens for specific parts */
  --dbp-branch-title-color: var(--dbp-title-color);     /* Branch Name Color */
  --dbp-hours-color: var(--dbp-muted);                  /* Timing Color */
  --dbp-distance-color: var(--dbp-muted);               /* Distance Color (fallback) */

  /* Ribbon sizing (JS can override per-breakpoint) */
  --dbp-ribbon-width: ;                 /* e.g. 880px or 100% */
  --dbp-ribbon-height: ;                /* e.g. 64px */
}

/* -------- Container -------- */
.danalyx-branch-picker-container{
  box-sizing: border-box;
  font-family: var(--dbp-font);
  color: var(--dbp-text);
  background: var(--dbp-bg);
  border-radius: 24px;
  border: 1px solid var(--dbp-border);
  padding: clamp(16px, 2vw, 24px);
}
.danalyx-branch-picker-container *{ box-sizing: inherit; }

/* -------- Header / Segmented tabs -------- */
.dbp-header{
  display:flex;
  gap:16px;
  align-items: var(--dbp-header-align);
  justify-content: var(--dbp-header-justify);
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.dbp-head-text{ flex: 1 1 auto; min-width: 260px; }
.dbp-title{
  font-weight:800; letter-spacing:-.02em;
  font-size: var(--dbp-title-size, clamp(22px, 3.2vw, 28px));
  line-height:1.15;
  color: var(--dbp-title-color);
}
.dbp-subtitle{
  margin-top: 6px;
  font-size: var(--dbp-subtitle-size, 16px);
  color: var(--dbp-subtitle-color);
}
.dbp-segmented{
  display:flex;
  gap: var(--dbp-seg-gap, 6px);
  padding: var(--dbp-seg-pad-v, 6px) var(--dbp-seg-pad-h, 6px);
  background: var(--dbp-seg-bg); border:1px solid var(--dbp-seg-border);
  border-radius: 16px; box-shadow: 0 1px 2px rgba(0,0,0,.04);
  overflow-x:auto; -webkit-overflow-scrolling: touch;
  max-width: var(--dbp-ribbon-width, initial);
  min-height: var(--dbp-ribbon-height, initial);
}
.dbp-seg{
  appearance:none; border:0; cursor:pointer;
  min-width:110px;
  padding: var(--dbp-seg-item-pad-v, 8px) var(--dbp-seg-item-pad-h, 12px); /* NEW: per-item padding */
  border-radius:12px;
  font-weight:600; background: transparent;
  transition: background .15s ease, color .15s ease, transform .03s ease;
  white-space: nowrap;
  font-size: var(--dbp-seg-size);
  color: var(--dbp-muted);
}
.dbp-seg:hover{ background: var(--dbp-seg-hover-bg); }
.dbp-seg.is-active{ background: var(--dbp-seg-active-bg); color: var(--dbp-seg-active-color); }

/* -------- Toolbar (search + actions) -------- */
.dbp-toolbar{ display:flex; gap:12px; align-items:center; margin: 12px 0 16px; flex-wrap: wrap; }
.dbp-search-wrap{ flex:1; position:relative; max-width: var(--dbp-search-max); }
.dbp-search{
  width:100%;
  padding: var(--dbp-search-pad-v) var(--dbp-search-pad-h);
  border-radius: var(--dbp-search-radius);
  background: var(--dbp-input-bg);
  color: var(--dbp-input-text);
  border: 1px solid var(--dbp-border);
  outline: none;
  box-shadow: 0 1px 1px rgba(0,0,0,.06) inset;
  font-size: var(--dbp-search-font);
}
.dbp-search::placeholder{ color: var(--dbp-input-placeholder); }
.dbp-search:focus{ box-shadow: var(--dbp-focus), 0 1px 1px rgba(0,0,0,.06) inset; }

.dbp-actions{ display:flex; gap:10px; flex-wrap: wrap; }
.dbp-btn{
  appearance:none; border:1px solid var(--dbp-btn-border); cursor:pointer;
  background: var(--dbp-btn-bg); color: var(--dbp-btn-color); font-weight:600;
  padding: var(--dbp-btn-pad-v) var(--dbp-btn-pad-h); border-radius: var(--dbp-btn-radius); line-height:1;
  box-shadow: 0 1px 2px rgba(0,0,0,.08);
  transition: filter .15s ease, background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
  font-size: var(--dbp-btn-size);
}
.dbp-btn:hover{
  background: var(--dbp-btn-hover-bg);
  color: var(--dbp-btn-hover-color);
  border-color: var(--dbp-btn-hover-border);
}
.dbp-btn:focus{ box-shadow: var(--dbp-focus); }

/* Clear selection (customizable) */
.dbp-btn.dbp-clear{
  background: var(--dbp-clear-bg);
  color: var(--dbp-clear-color);
  border-color: var(--dbp-clear-border);
  border-radius: var(--dbp-clear-radius);
  padding: var(--dbp-clear-pad-v) var(--dbp-clear-pad-h);
  font-size: var(--dbp-clear-size);
}
.dbp-btn.dbp-clear:hover{
  background: var(--dbp-clear-hover-bg);
  color: var(--dbp-clear-hover-color);
  border-color: var(--dbp-clear-hover-border);
}

/* -------- Lists / layouts -------- */
.dbp-view{ display:block; }

/* Grid */
.dbp-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--dbp-grid-min), 1fr));
  gap: var(--dbp-grid-gap);
}

/* Emphasis */
.dbp-emphasis{
  display:grid;
  grid-template-columns: var(--dbp-emphasis-cols);
  gap: var(--dbp-emphasis-gap);
}
.dbp-emphasis-side{ display:grid; gap: var(--dbp-emphasis-gap); }
.dbp-emphasis-main{ display:block; }

/* Map/List */
.dbp-maplist{
  display:grid;
  gap: var(--dbp-maplist-gap);
  grid-template-columns: var(--dbp-maplist-cols);
}
.dbp-maplist-list{ display:grid; gap: var(--dbp-maplist-gap); }
.dbp-map{
  position:relative; background:#fff; border:1px solid var(--dbp-border);
  border-radius:16px; overflow:hidden;
}
.dbp-map-svg{ width:100%; height:100%; display:block; min-height: var(--dbp-map-minh); }
.dbp-map-legend{
  position:absolute; right:12px; bottom:12px; font-size:12px;
  color: var(--dbp-muted); background:#fff; border:1px solid var(--dbp-border);
  border-radius:10px; padding:6px 10px; box-shadow: 0 1px 2px rgba(0,0,0,.06);
}

/* -------- Cards (match mock) -------- */
.dbp-card{
  position:relative;
  background: var(--dbp-card);
  border:1px solid var(--dbp-border);
  border-radius: var(--dbp-radius);
  padding: var(--dbp-pad);
  box-shadow: var(--dbp-card-shadow);
  overflow:hidden;
  transition: box-shadow .15s ease, border-color .15s ease, transform .06s ease;
}
.dbp-card:hover{
  box-shadow: var(--dbp-card-shadow-hover);
  border-color: var(--dbp-card-border-hover);
}
.dbp-card-hd{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.dbp-card-hd h3{
  font-size: var(--dbp-card-title-size, 18px);
  font-weight:800; letter-spacing:-.01em; margin:0 0 4px;
  color: var(--dbp-branch-title-color);
}
.dbp-card-hd .dbp-area{ color:var(--dbp-muted); font-weight:600; }
.dbp-hours, .dbp-addr, .dbp-phone{
  margin:6px 0 0; color: var(--dbp-hours-color, var(--dbp-muted));
  font-size: var(--dbp-body-size, 14px);
}
.dbp-phone a{ color: inherit; text-decoration: none; border-bottom:1px dotted currentColor; }
.dbp-dist{
  margin:6px 0 0; font-weight:700;
  font-size: var(--dbp-distance-size, 14px);
  color: var(--dbp-distance-color, inherit);
}

/* Branch name as hyperlink */
.dbp-title-link{
  color: var(--dbp-branch-title-color);
  text-decoration: none;
  border-bottom: 1px dotted transparent;
}
.dbp-title-link:hover{
  text-decoration: underline;
  border-bottom-color: currentColor;
}

/* CTA button + selected state */
.dbp-cta{
  appearance:none; border:1px solid var(--dbp-cta-border); cursor:pointer;
  background: var(--dbp-cta-bg); color: var(--dbp-cta-color);
  padding: var(--dbp-cta-pad-v) var(--dbp-cta-pad-h); border-radius: var(--dbp-cta-radius);
  font-weight:700; line-height:1; font-size: var(--dbp-cta-size);
  box-shadow: 0 1px 2px rgba(0,0,0,.08);
  align-self:flex-start;
  transition: background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.dbp-cta:hover{
  background: var(--dbp-cta-hover-bg);
  color: var(--dbp-cta-hover-color);
  border-color: var(--dbp-cta-hover-border);
}
.dbp-cta:focus{ box-shadow: var(--dbp-focus); }
.dbp-cta--selected{ background:#ecfdf5; color:#047857; border:1px solid #a7f3d0; }
.dbp-card.is-selected{ border-color:#34d399; box-shadow: 0 0 0 3px rgba(16,185,129,.25); }
.dbp-saved{
  position:absolute; right:-6px; top:-6px;
  background:#ecfdf5; color:#047857; border:1px solid #a7f3d0;
  border-top-right-radius:16px; border-bottom-left-radius:12px;
  padding:4px 8px; font-size:12px; font-weight:700; pointer-events:none;
  z-index: 2;
}

/* Actions row */
.dbp-actions-row{ display:flex; align-items:center; gap:8px; margin-top:10px; }
.dbp-link{
  color: var(--dbp-link);
  text-decoration: none; border-bottom:1px dotted currentColor;
  font-size: var(--dbp-link-size, 14px);
}
.dbp-link:hover{ text-decoration: underline; color: var(--dbp-link-hover); }
.dbp-link--muted{ color:var(--dbp-muted); border-bottom-color: transparent; }
.dbp-dot{ color:#cbd5e1; }

/* Chips */
.dbp-services{ display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.dbp-chip{
  display:inline-block; padding:3px 8px; border-radius:999px;
  background: var(--dbp-chip-bg); border:1px solid var(--dbp-chip-border);
  font-size: var(--dbp-chip-size, 12px); color:#475569;
}

/* Dropdown */
.dbp-dropdown2{ max-width:640px; }
.dbp-dd-trigger{ position:relative; }
.dbp-dd-btn{
  width:100%; text-align:left; display:flex; justify-content:space-between; align-items:center;
  background:#fff; color:var(--dbp-text); border:1px solid var(--dbp-border);
  padding:12px 14px; border-radius:16px; font-weight:600;
}
.dbp-dd-btn:focus{ box-shadow: var(--dbp-focus); }
.dbp-dd-panel{
  position:absolute; z-index:30; top:calc(100% + 8px); left:0; right:0;
  background:#fff; border:1px solid var(--dbp-border); border-radius:16px;
  padding:10px; box-shadow: var(--dbp-card-shadow);
}
.dbp-dd-search{
  width:100%; padding:10px 12px; border-radius:12px; border:1px solid var(--dbp-border);
  outline:none; margin-bottom:8px; font-size:14px;
}
.dbp-dd-search:focus{ box-shadow: var(--dbp-focus); }
.dbp-dd-list{ max-height:260px; overflow:auto; border-radius:12px; }
.dbp-dd-item{
  display:flex; justify-content:space-between; align-items:center;
  padding:10px 12px; cursor:pointer; border-radius:10px;
}
.dbp-dd-item:hover{ background:#f8fafc; }
.dbp-dd-name{ font-weight:600; }
.dbp-dd-area{ color:var(--dbp-muted); }
.dbp-dd-distance{ font-size:12px; color:var(--dbp-muted); }
.dbp-dd-empty{ padding:10px 12px; color:var(--dbp-muted); }
.dbp-preview{ margin-top:12px; }

/* Bottom Sheet */
.dbp-bottomsheet .dbp-sheet-overlay{ position:fixed; inset:0; background:#0006; }
.dbp-bottomsheet .dbp-sheet{
  position:fixed; left:0; right:0; bottom:0; max-height:72vh;
  background:#fff; border-top-left-radius:24px; border-top-right-radius:24px;
  border:1px solid var(--dbp-border); box-shadow: 0 -12px 40px rgba(0,0,0,.18);
  padding:12px;
}
.dbp-sheet-handle{ width:48px; height:6px; background:#e2e8f0; border-radius:999px; margin:6px auto 12px; }
.dbp-sheet-content{ overflow:auto; max-height:calc(72vh - 60px); display:grid; gap:12px; }

/* Footnote */
.dbp-footnote{
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid var(--dbp-border);
  text-align: center;
  font-size: 12px;
  color: var(--dbp-muted);
}

/* Responsive */
@media (max-width: 1024px){
  .dbp-maplist{ grid-template-columns: 1fr; }
  .dbp-emphasis{ grid-template-columns: 1fr; }
}
@media (max-width: 640px){
  .dbp-grid{ grid-template-columns: 1fr; }
}

/* -------- Guard rails against theme overrides -------- */
.danalyx-branch-picker-container .dbp-search{
  background: var(--dbp-input-bg) !important;
  color: var(--dbp-input-text) !important;
}
.danalyx-branch-picker-container .dbp-seg{
  border: none !important;               /* no borders on ribbon items */
  background: transparent;               /* inactive state has no background color */
}
.danalyx-branch-picker-container .dbp-seg.is-active{
  background: var(--dbp-seg-active-bg) !important;
  color: var(--dbp-seg-active-color) !important;
  border: none !important;
}
.danalyx-branch-picker-container .dbp-card{
  border-radius: var(--dbp-radius) !important;
  box-shadow: var(--dbp-card-shadow) !important;
  border: 1px solid var(--dbp-border) !important;
}
.danalyx-branch-picker-container .dbp-grid{ gap: var(--dbp-grid-gap) !important; }
.danalyx-branch-picker-container .dbp-maplist-list{ gap: var(--dbp-maplist-gap) !important; display:grid !important; }

/* ===== Skeleton ===== */
.elementor-editor-active .danalyx-branch-picker-container{ min-height: 280px; }
.dbp-card--skeleton{
  background: var(--dbp-card);
  border:1px solid var(--dbp-border);
  border-radius: var(--dbp-radius);
  padding: var(--dbp-pad);
  box-shadow: var(--dbp-card-shadow);
}
.dbp-card--skeleton .dbp-skel{
  height:14px; border-radius:8px; margin-top:8px;
  background: linear-gradient(90deg, #f3f4f6 0%, #e5e7eb 40%, #f3f4f6 80%);
  background-size: 200% 100%;
  animation: dbpShimmer 1.2s linear infinite;
}
.dbp-card--skeleton .skel-title{ height:18px; width:60%; margin-bottom:6px; }
.dbp-card--skeleton .skel-line.short{ width:40%; }
@keyframes dbpShimmer { to { background-position: -200% 0; } }

/* Map iframe embed helper */
.dbp-map-iframe{ width:100%; height:100%; display:block; min-height:var(--dbp-map-minh); border:0; }

/* --- Fix: keep Leaflet below sticky site headers --- */
.danalyx-branch-picker-container .dbp-map { position: relative; z-index: 0; }
.danalyx-branch-picker-container .dbp-map .leaflet-pane,
.danalyx-branch-picker-container .dbp-map .leaflet-top,
.danalyx-branch-picker-container .dbp-map .leaflet-bottom,
.danalyx-branch-picker-container .dbp-map .leaflet-marker-pane,
.danalyx-branch-picker-container .dbp-map .leaflet-tile-pane,
.danalyx-branch-picker-container .dbp-map .leaflet-overlay-pane,
.danalyx-branch-picker-container .dbp-map .leaflet-shadow-pane{ z-index: 1 !important; }
.danalyx-branch-picker-container .dbp-map .leaflet-popup-pane{ z-index: 2 !important; }


/* Branch title as link should look like the branch title */
.dbp-card-hd h3 a.dbp-title-link {
  color: inherit;           /* inherit the h3 (Branch Name) color */
  text-decoration: none;    /* keep it looking like a title, not a body link */
  border: 0;                /* avoid underline styles from .dbp-link */
}
.dbp-card-hd h3 a.dbp-title-link:hover {
  color: var(--dbp-card-title-hover, currentColor); /* will use Elementor hover if set */
}



.bp-mode-ribbon.is-hidden{display:none !important;}




/* === Search inputs (toolbar + dropdown) === */
.danalyx-branch-picker-container .dbp-search,
.danalyx-branch-picker-container .dbp-dropdown2 .dbp-dd-search{
  /* existing base styles remain… */
  border: 1px solid var(--dbp-input-border, #1f2937);
  background: var(--dbp-input-bg, #fff);
  color: var(--dbp-input-text, #0b1220);
}

.danalyx-branch-picker-container .dbp-search::placeholder,
.danalyx-branch-picker-container .dbp-dropdown2 .dbp-dd-search::placeholder{
  color: var(--dbp-input-placeholder, #94a3b8);
}

.danalyx-branch-picker-container .dbp-search:hover,
.danalyx-branch-picker-container .dbp-search:focus,
.danalyx-branch-picker-container .dbp-dropdown2 .dbp-dd-search:hover,
.danalyx-branch-picker-container .dbp-dropdown2 .dbp-dd-search:focus{
  outline: 0;
  border-color: var(--dbp-input-focus, #ef4444);               /* ← Elementor setting */
  box-shadow: 0 0 0 2px var(--dbp-input-focus-ring, rgba(239,68,68,.25)); /* ← Elementor setting */
}

/* === Dropdown list item hover === */
.danalyx-branch-picker-container .dbp-dropdown2 .dbp-dd-item:hover{
  background: var(--dbp-dd-hover-bg, #f1f5f9);                 /* ← Elementor setting */
}

.danalyx-branch-picker-container .dbp-dropdown2 .dbp-dd-item:hover .dbp-dd-name,
.danalyx-branch-picker-container .dbp-dropdown2 .dbp-dd-item:hover .dbp-dd-area{
  color: var(--dbp-dd-hover-text, inherit);                    /* ← Elementor setting */
}








/* Branch picker – dropdown list reset */
.danalyx-branch-picker-container .dbp-dropdown2 .dbp-dd-list{
  list-style: none;      /* no bullets */
  margin: 0;             /* remove theme margins */
  padding: 0;            /* remove theme left padding */
}

.danalyx-branch-picker-container .dbp-dropdown2 .dbp-dd-item{
  margin: 0;             /* kill theme margins on li */
  padding: 14px 18px;    /* equal left/right padding */
  text-indent: 0;        /* safety against theme text-indent */
}

/* Optional: tidy the meta line and keep code/area aligned */
.danalyx-branch-picker-container .dbp-dropdown2 .dbp-dd-meta{
  display: flex;
  gap: .5rem;
  align-items: baseline;
}

.danalyx-branch-picker-container .dbp-dropdown2 .dbp-dd-name{
  font-weight: 700;
}

.danalyx-branch-picker-container .dbp-dropdown2 .dbp-dd-area{
  color: var(--dbp-muted, #64748b);
}










/* Dropdown trigger (Select a branch button) */
.dbp-dropdown2 .dbp-dd-btn{
  background: var(--dbp-dd-trigger-bg, var(--dbp-btn-bg, #e5e7eb));
  color:      var(--dbp-dd-trigger-text, var(--dbp-text, #0f172a));
  border: 1px solid var(--dbp-btn-border, transparent);
  border-radius: var(--dbp-dd-trigger-radius, var(--dbp-btn-radius, 14px));
  padding: var(--dbp-dd-trigger-pad-v, .75rem) var(--dbp-dd-trigger-pad-h, 1rem);
}

/* Hover + Open state */
.dbp-dropdown2.dbp-dd-open .dbp-dd-btn,
.dbp-dropdown2 .dbp-dd-btn:hover{
  background: var(--dbp-dd-trigger-hover, var(--dbp-btn-hover, #d1d5db));
  color:      var(--dbp-dd-trigger-hover-text, var(--dbp-text, #0f172a));
}