:where(#cro-branches-root, #cro-branches-root *) {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  #cro-branches-root {
    --cbr-primary: #4e738a;
    --cbr-primary-dk: #3a5668;
    --cbr-primary-lt: #e8f0f5;
    --cbr-accent: #ff8672;
    --cbr-accent-dk: #e06550;
    --cbr-bg: #f5f7f9;
    --cbr-surface: #ffffff;
    --cbr-border: #e4eaee;
    --cbr-ink: #1c2b35;
    --cbr-ink2: #4e738a;
    --cbr-ink3: #8fa8b8;
    --cbr-open: #2d7a4f;
    --cbr-r: 10px;
    --cbr-r-sm: 7px;
    --cbr-font: AvenirArabic, 'Segoe UI', Tahoma, Arial, sans-serif;

    
    --cbr-vh: 1vh;

    font-family: var(--cbr-font);
    color: var(--cbr-ink);
    background: var(--cbr-bg);
    direction: rtl;
    font-size: 15px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
  }

  .cbr-shell {
    max-width: 1360px;
    margin: 0 auto;
    
    padding: 18px 20px 48px;
  }

  
  .cbr-controls {
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--cbr-bg);
    padding: 14px 0 12px;
    border-bottom: 1px solid var(--cbr-border);
  }

  .cbr-searchrow {
    display: flex;
    gap: 10px;
    align-items: stretch;
  }

  
  .cbr-geonote {
    margin: 8px 0 0;
    padding: 8px 12px;
    border-inline-start: 3px solid var(--cbr-accent);
    background: #fff;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--cbr-ink);
  }

  .cbr-geonote[hidden] { display: none; }

  .cbr-field {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
  }

  .cbr-input {
    width: 100%;
    height: 48px;
    padding: 0 46px 0 40px;
    border: 1px solid var(--cbr-border);
    border-radius: var(--cbr-r-sm);
    background: var(--cbr-surface);
    font-family: var(--cbr-font);
    font-size: 15px;
    color: var(--cbr-ink);
    outline: none;
    transition: border-color .18s ease, box-shadow .18s ease;
  }

  .cbr-input::placeholder { color: var(--cbr-ink3); }

  .cbr-input:focus {
    border-color: var(--cbr-primary);
    box-shadow: 0 0 0 3px rgba(78, 115, 138, .14);
  }

  .cbr-searchicon {
    position: absolute;
    inset-inline-start: 15px;
    top: 50%;
    transform: translateY(-50%);
    width: 17px;
    height: 17px;
    color: var(--cbr-ink3);
    pointer-events: none;
  }

  .cbr-clear {
    position: absolute;
    inset-inline-end: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    display: none;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: var(--cbr-primary-lt);
    color: var(--cbr-primary);
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
  }

  .cbr-clear.is-on { display: flex; }
  .cbr-clear:hover { background: var(--cbr-border); }

  .cbr-near {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 48px;
    padding: 0 20px;
    border: 1px solid var(--cbr-primary);
    border-radius: var(--cbr-r-sm);
    background: transparent;
    color: var(--cbr-primary);
    font-family: var(--cbr-font);
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background .18s ease, color .18s ease;
  }

  .cbr-near:hover { background: var(--cbr-primary-lt); }

  .cbr-near.is-on {
    background: var(--cbr-primary);
    border-color: var(--cbr-primary);
    color: #fff;
  }

  .cbr-near[disabled] { opacity: .55; cursor: default; }
  .cbr-near svg { width: 16px; height: 16px; flex: none; }

  .cbr-chips {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    overflow-x: auto;
    padding-bottom: 3px;
    scrollbar-width: thin;
    scrollbar-color: var(--cbr-border) transparent;
  }

  .cbr-chips::-webkit-scrollbar { height: 5px; }
  .cbr-chips::-webkit-scrollbar-track { background: transparent; }

  .cbr-chips::-webkit-scrollbar-thumb {
    background: var(--cbr-border);
    border-radius: 999px;
  }

  .cbr-chip {
    flex: 0 0 auto;
    padding: 8px 15px;
    border: 1px solid var(--cbr-border);
    border-radius: 999px;
    background: var(--cbr-surface);
    color: var(--cbr-ink2);
    font-family: var(--cbr-font);
    font-size: 13.5px;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: background .16s ease, color .16s ease, border-color .16s ease;
  }

  .cbr-chip:hover { border-color: var(--cbr-primary); }

  .cbr-chip[aria-pressed="true"] {
    background: var(--cbr-primary);
    border-color: var(--cbr-primary);
    color: #fff;
  }

  .cbr-count {
    margin-top: 11px;
    font-size: 13px;
    color: var(--cbr-ink3);
  }

  
  .cbr-viewtabs {
    display: none;
    margin-top: 12px;
    border: 1px solid var(--cbr-border);
    border-radius: var(--cbr-r-sm);
    overflow: hidden;
    background: var(--cbr-surface);
  }

  .cbr-viewtab {
    flex: 1 1 50%;
    padding: 11px 0;
    border: none;
    background: transparent;
    font-family: var(--cbr-font);
    font-size: 14px;
    font-weight: 600;
    color: var(--cbr-ink2);
    cursor: pointer;
  }

  .cbr-viewtab[aria-selected="true"] {
    background: var(--cbr-primary);
    color: #fff;
  }

  
  .cbr-split {
    display: grid;
    grid-template-columns: minmax(360px, 42%) 1fr;
    gap: 26px;
    align-items: start;
    margin-top: 22px;
  }

  .cbr-list {
    max-height: calc(var(--cbr-vh) * 100 - 150px);
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--cbr-surface);
    border: 1px solid var(--cbr-border);
    border-radius: var(--cbr-r);
  }

  
  .cbr-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding-inline-end: 16px;
    border-bottom: 1px solid var(--cbr-border);
    
    border-inline-start: 3px solid transparent;
    transition: background .16s ease;
  }

  
  .cbr-card::after {
    content: '';
    position: absolute;
    inset-inline-start: -3px;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--cbr-accent);
    transform: scaleY(0);
    transition: transform .28s cubic-bezier(.22, .61, .36, 1);
    pointer-events: none;
  }

  .cbr-card:last-child { border-bottom: none; }
  .cbr-card[hidden] { display: none; }
  .cbr-card:hover { background: var(--cbr-bg); }
  .cbr-card:active { background: var(--cbr-primary-lt); }
  .cbr-card.is-on { background: var(--cbr-primary-lt); }
  .cbr-card.is-on::after { transform: scaleY(1); }

  
  .cbr-card.is-clipped { display: none; }

  
  .cbr-card-main {
    flex: 1 1 auto;
    min-width: 0;
    display: block;
    padding-block: 14px 13px;
    padding-inline: 18px 4px;
    border: none;
    background: transparent;
    font-family: var(--cbr-font);
    text-align: start;
    cursor: pointer;
  }

  .cbr-name {
    font-size: 16px;
    font-weight: 700;
    color: var(--cbr-primary);
    line-height: 1.35;
  }

  .cbr-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    font-size: 13px;
    color: var(--cbr-ink3);
  }

  .cbr-dot { color: var(--cbr-border); }

  .cbr-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-weight: 600;
  }

  .cbr-status::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
  }

  .cbr-status.is-open { color: var(--cbr-open); }
  .cbr-status.is-shut { color: var(--cbr-accent-dk); }

  .cbr-dist {
    font-weight: 600;
    color: var(--cbr-primary);
  }

  .cbr-area {
    display: block;
    margin-top: 5px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--cbr-ink);
    opacity: .72;
  }

  
  .cbr-actions {
    display: flex;
    flex: none;
    flex-direction: column;
    gap: 8px;
  }

  .cbr-act {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 15px;
    border-radius: var(--cbr-r-sm);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    font-family: var(--cbr-font);
    transition: background .16s ease, border-color .16s ease;
  }

  .cbr-act svg { width: 14px; height: 14px; flex: none; }

  .cbr-act-dir {
    background: var(--primary-color);
    color: #fff;
  }

  .cbr-act-dir:hover { background: color-mix(in srgb, var(--primary-color) 85%, #000); }

  .cbr-act-wa {
    background: transparent;
    border-color: var(--cbr-border);
    color: var(--cbr-ink2);
  }

  .cbr-act-wa:hover { border-color: var(--cbr-primary); }

  .cbr-more {
    display: block;
    width: 100%;
    padding: 16px 0;
    border: none;
    border-top: 1px solid var(--cbr-border);
    background: transparent;
    font-family: var(--cbr-font);
    font-size: 14px;
    font-weight: 700;
    color: var(--cbr-primary);
    cursor: pointer;
    transition: background .16s ease;
  }

  .cbr-more[hidden] { display: none; }
  .cbr-more:hover { background: var(--cbr-primary-lt); }
  .cbr-more:active { background: var(--cbr-border); }

  .cbr-empty {
    padding: 46px 24px;
    text-align: center;
    color: var(--cbr-ink3);
    font-size: 14.5px;
  }

  .cbr-empty[hidden] { display: none; }

  
  .cbr-mapwrap {
    position: sticky;
    top: 150px;
    height: calc(var(--cbr-vh) * 100 - 180px);
    min-height: 460px;
    border: 1px solid var(--cbr-border);
    border-radius: var(--cbr-r);
    overflow: hidden;
    background: var(--cbr-primary-lt);
  }

  .cbr-map {
    width: 100%;
    height: 100%;
    
    direction: ltr;
  }

  .cbr-mapfail {
    display: none;
    height: 100%;
    align-items: center;
    justify-content: center;
    padding: 28px;
    text-align: center;
    font-size: 14px;
    line-height: 1.7;
    color: var(--cbr-ink2);
  }

  .cbr-mapwrap.is-failed .cbr-map { display: none; }
  .cbr-mapwrap.is-failed .cbr-mapfail { display: flex; }

  
  .cbr-pin,
  .cbr-you {
    
    background: transparent;
    border: none;
  }

  
  .cbr-you i {
    display: block;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: var(--cbr-primary);
    border: 3px solid #fff;
    box-shadow: 0 0 0 2px rgba(78, 115, 138, .35), 0 2px 6px rgba(28, 43, 53, .35);
  }

  .cbr-pin i {
    display: block;
    width: 18px;
    height: 18px;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    background: var(--cbr-primary);
    border: 2px solid #fff;
    box-shadow: 0 2px 5px rgba(28, 43, 53, .3);
    transition: background .16s ease, transform .16s ease;
  }

  .cbr-pin.is-on i {
    background: var(--cbr-accent);
    transform: rotate(-45deg) scale(1.32);
    z-index: 5;
  }

  #cro-branches-root .leaflet-popup-content-wrapper {
    border-radius: var(--cbr-r-sm);
    direction: rtl;
    text-align: right;
  }

  #cro-branches-root .leaflet-popup-content {
    margin: 13px 15px;
    font-family: var(--cbr-font);
    font-size: 13.5px;
    line-height: 1.6;
  }

  .cbr-pop-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--cbr-primary);
    margin-bottom: 4px;
  }

  .cbr-pop-addr {
    color: var(--cbr-ink);
    opacity: .8;
    margin-bottom: 9px;
  }

  .cbr-pop-link {
    display: inline-block;
    color: var(--primary-color);
    font-weight: 700;
    text-decoration: none;
  }

  .cbr-pop-link:hover { text-decoration: underline; }

  
  #cro-branches-root :focus-visible {
    outline: 2px solid var(--cbr-accent);
    outline-offset: 2px;
  }

  .cbr-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  

  @keyframes cbr-rise {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
  }

  
  .cbr-shell.is-fresh .cbr-card {
    animation: cbr-rise .45s cubic-bezier(.22, .61, .36, 1) both;
    animation-delay: calc(var(--cbr-i, 0) * 45ms);
  }

  @keyframes cbr-bump {
    from { opacity: .3; transform: translateY(-3px); }
    to   { opacity: 1; transform: none; }
  }

  .cbr-count.is-bump { animation: cbr-bump .28s ease-out; }

  .cbr-chip { transition: background .16s ease, color .16s ease, border-color .16s ease, transform .12s ease; }
  .cbr-chip:active { transform: scale(.955); }

  .cbr-act { transition: background .16s ease, border-color .16s ease, transform .14s ease, box-shadow .16s ease; }
  .cbr-act-dir:hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(0, 0, 0, .18); }
  .cbr-act:active { transform: translateY(0); }

  @keyframes cbr-spin { to { transform: rotate(360deg); } }
  .cbr-near.is-busy svg { animation: cbr-spin 1s linear infinite; }

  
  @keyframes cbr-shimmer { to { background-position: -220% 0; } }

  .cbr-mapwrap::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(100deg,
      var(--cbr-primary-lt) 32%, rgba(255, 255, 255, .72) 50%, var(--cbr-primary-lt) 68%);
    background-size: 220% 100%;
    animation: cbr-shimmer 1.4s linear infinite;
  }

  .cbr-mapwrap.is-ready::before,
  .cbr-mapwrap.is-failed::before { display: none; }

  @keyframes cbr-drop {
    from { opacity: 0; transform: translateY(-16px) rotate(-45deg) scale(.55); }
    to   { opacity: 1; transform: rotate(-45deg) scale(1); }
  }

  .cbr-pin i { animation: cbr-drop .5s cubic-bezier(.3, 1.25, .5, 1) both; }

  @keyframes cbr-pop {
    0%   { transform: rotate(-45deg) scale(1); }
    45%  { transform: rotate(-45deg) scale(1.52); }
    100% { transform: rotate(-45deg) scale(1.32); }
  }

  .cbr-pin.is-on i { animation: cbr-pop .32s ease-out; }

  @keyframes cbr-ping {
    0%   { box-shadow: 0 0 0 0 rgba(78, 115, 138, .45), 0 2px 6px rgba(28, 43, 53, .35); }
    72%  { box-shadow: 0 0 0 15px rgba(78, 115, 138, 0), 0 2px 6px rgba(28, 43, 53, .35); }
    100% { box-shadow: 0 0 0 0 rgba(78, 115, 138, 0), 0 2px 6px rgba(28, 43, 53, .35); }
  }

  .cbr-you i { animation: cbr-ping 2.2s ease-out infinite; }

  
  @media (max-width: 980px) {
    .cbr-shell { padding: 14px 15px 36px; }
    .cbr-viewtabs { display: flex; }

    .cbr-split {
      grid-template-columns: 1fr;
      gap: 0;
    }

    .cbr-list { max-height: none; }
    .cbr-mapwrap { position: static; height: calc(var(--cbr-vh) * 68); min-height: 380px; }

    
    .cbr-split[data-view="list"] .cbr-mapwrap { display: none; }
    .cbr-split[data-view="map"] .cbr-list { display: none; }

    
    @keyframes cbr-swap {
      from { opacity: 0; transform: translateY(7px); }
      to   { opacity: 1; transform: none; }
    }

    .cbr-split .cbr-list,
    .cbr-split .cbr-mapwrap { animation: cbr-swap .3s ease both; }
  }

  @media (max-width: 560px) {
    
    .cbr-controls { padding-bottom: 10px; }
    .cbr-searchrow { gap: 8px; }
    .cbr-near { padding: 0 12px; gap: 6px; font-size: 13px; }
    .cbr-near svg { width: 15px; height: 15px; }

    
    .cbr-card { padding-inline-end: 12px; }
    .cbr-card-main { padding-inline: 14px 2px; }
    .cbr-act { padding: 9px 12px; }
  }

  @media (prefers-reduced-motion: reduce) {
    #cro-branches-root *,
    #cro-branches-root *::before,
    #cro-branches-root *::after {
      transition: none !important;
      animation: none !important;
    }
  }