.branches-page {
    font-size: 16px;
    --branch-primary: var(--app-primary, #46016b);
    --branch-accent: #be197f;
    --branch-muted: #777182;
    color: #302839;
}

.branches-eyebrow { display: block; color: var(--branch-primary); font-size: 12.8px; font-weight: 600; margin-bottom: 12px; }

.branches-content { padding-block: 60px 80px; }
.branches-directory { display: grid; grid-template-columns: 1fr 1.08fr; gap: clamp(28px, 5vw, 75px); align-items: start; }
.branches-results { min-width: 0; scroll-margin-top: 125px; }
.branches-results-heading { border-bottom: 1px solid #dfcbe9; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 22px; margin-bottom: 4px; }
.branches-results-heading .branches-eyebrow { font-size: 12.5px; margin-bottom: 8px; }
.branches-results-heading h2 { margin: 0; font-size: 25.6px; font-weight: 700; color: var(--branch-primary); }
.branches-count { background: #f3ebf8; border: 1px solid #eadbf2; border-radius: 30px; padding: 6px 13px; font-size: 12.5px; color: var(--branch-primary); white-space: nowrap; }
.branch-contact { padding-block: 27px; border-bottom: 1px solid #e5d6ed; }
.branch-contact-title { display: flex; align-items: baseline; gap: 12px; justify-content: space-between; margin-bottom: 20px; }
.branch-contact-title h3 { font-size: 16.5px; font-weight: 700; line-height: 1.8; margin: 0; }
.branch-city { color: var(--branch-muted); font-size: 12px; white-space: nowrap; }
.branch-contact-row { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; font-size: 14.4px; line-height: 2; color: var(--branch-muted); margin: 0 0 10px; }
.branch-contact-row > i { color: var(--branch-primary); width: 18px; flex: 0 0 18px; font-size: 15.2px; }
.branch-contact-row > a { text-decoration: none; color: #5d5068; unicode-bidi: isolate; overflow-wrap: anywhere; }
.branch-contact-row > a:hover { color: var(--branch-accent); }
.branch-contact-row.branch-address { flex-wrap: nowrap; }
.branch-map-link { display: inline-flex; align-items: center; gap: 9px; color: var(--branch-primary); text-decoration: none; font-size: 13.6px; margin-top: 6px; }
.branch-map-link:hover { color: var(--branch-accent); }
.branch-map-link > i:last-child { font-size: 10.4px; opacity: .7; }

.branches-map-panel { position: sticky; top: 112px; min-width: 0; }
.branches-map-heading { color: var(--branch-muted); text-align: center; font-size: 13.1px; margin-bottom: 16px; }
.branches-map-heading i { color: var(--branch-primary); margin-inline-end: 7px; }
.branches-iran-map { width: 100%; height: auto; max-height: 540px; display: block; overflow: visible; }
.branch-province { fill: #eee7f3; stroke: white; stroke-width: 2; stroke-linejoin: round; transition: fill .18s ease; }
.branch-province.has-branches { fill: var(--branch-primary); cursor: pointer; }
.branch-province.has-branches:hover, .branch-province.has-branches:focus-visible { fill: #8f4daf; outline: none; stroke: #cf96e5; stroke-width: 4; }
.branch-province.is-selected { fill: var(--branch-accent); }
.branch-province.is-unavailable { cursor: default; }
.branches-map-legend { display: flex; gap: 22px; justify-content: center; color: var(--branch-muted); font-size: 11.5px; margin: 15px 0 24px; }
.branches-map-legend > span { display: flex; align-items: center; gap: 6px; }
.branches-map-legend i { display: inline-block; height: 9px; width: 9px; border-radius: 50%; }
.legend-available { background: var(--branch-primary); }
.legend-selected { background: var(--branch-accent); }
.branches-region-label { display: block; margin-bottom: 9px; font-size: 13.6px; font-weight: 600; }
.branches-region-select { display: block; width: 100%; padding: 11px 14px; border: 1px solid #dfd1e8; border-radius: 10px; background: #fff; color: var(--branch-primary); font: inherit; font-size: 14.1px; }
.branches-region-select:focus-visible { outline: 3px solid #e9dcf4; outline-offset: 2px; }
.branches-province-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; margin-top: 22px; }
.branches-province-list > a { border: 1px solid #dcc6e7; border-radius: 30px; padding: 6px 14px; color: #6c5b79; text-decoration: none; font-size: 12.2px; line-height: 1.8; transition: background .18s ease, color .18s ease; }
.branches-province-list > a:hover { background: #f5eef9; color: var(--branch-primary); }
.branches-province-list > a.is-selected { background: var(--branch-primary); border-color: var(--branch-primary); color: #fff; }
.branches-province-list > a:focus-visible { outline: 3px solid #d8b9e6; outline-offset: 3px; }
.branches-empty { text-align: center; padding: 65px 20px; border: 1px dashed #dfd1e8; border-radius: 18px; background: #fcfafd; }
.branches-empty > i { color: #ba9bc9; font-size: 35.2px; margin-bottom: 22px; }
.branches-empty h2 { color: #786584; font-size: 16px; line-height: 2; }

@media (max-width: 991px) {
    .branches-directory { gap: 25px; }
}

@media (max-width: 767px) {
    .branches-content { padding-block: 30px 45px; }
    .branches-directory { display: flex; flex-direction: column; gap: 30px; }
    .branches-map-panel { position: static; width: 100%; order: -1; }
    .branches-iran-map { max-height: 340px; }
    .branches-province-list { gap: 7px; margin-top: 16px; }
    .branches-province-list > a { padding: 4px 12px; }
    .branches-results { width: 100%; }
    .branches-results-heading h2 { font-size: 21.6px; }
    .branch-contact { padding-block: 22px; }
}

@media (prefers-reduced-motion: reduce) {
    .branch-province, .branches-province-list > a { transition: none; }
}