@import url("brc-rl-locator.css");


/* Find Regional Support — Figma "16a_FindRep-Initial" (2217:7145): 60/40 grey band, intro + 192px map icon (80px gap), 40px, 3-up controls (32px gap) */
.regional-section {background: var(--neutral-100); padding: 60px 0 40px 0;}
.regional-head {flex-wrap: nowrap; align-items: center; gap: 80px; margin-bottom: 40px;}
.regional-intro {flex: 1 0 0; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 24px;}
.regional-intro .h1 {margin: 0; color: var(--text-primary); line-height: 1.2; letter-spacing: -0.2px;}
.regional-intro p {font-family: "Plus Jakarta Sans", sans-serif; font-size: 1.5rem; font-weight: 600; line-height: 1.5; color: var(--text-primary); margin: 0;}
.regional-icon {flex-shrink: 0; width: 192px; height: 192px;}
.regional-icon figure {width: 100%; height: 100%; margin: 0;}
.regional-icon img {display: block; width: 100%; height: 100%; margin: 0;}

/* Controls */
.regional-controls {flex-wrap: nowrap; align-items: flex-start; gap: 32px; margin: 0;}
.regional-field {flex: 1 0 0; min-width: 0; display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; border: 0;}
.regional-field label, .regional-field legend {font-family: "Open Sans", sans-serif; font-size: 1rem; font-weight: 600; line-height: 1.375; color: var(--text-primary); margin: 0; padding: 0;}
.regional-field .selectBox-dropdown .selectBox-label {font-style: italic; color: var(--text-placeholder);}
.regional-field .selectBox-dropdown:focus, .regional-field .selectBox-dropdown.selectBox-active, .regional-field .selectBox-dropdown.selectBox-menuShowing {border: 2px solid var(--focus-ring); padding: 12px 43px 12px 11px;}
.regional-field .selectBox-dropdown:focus .selectBox-arrow, .regional-field .selectBox-dropdown.selectBox-active .selectBox-arrow, .regional-field .selectBox-dropdown.selectBox-menuShowing .selectBox-arrow {right: 11px;}
.regional-field .selectBox-dropdown.has-value .selectBox-label {font-style: normal; color: var(--text-primary);}

/* Text Input — 48px, 16px side padding, 14px location icon, 8px gap */
.regional-input {display: flex; align-items: center; gap: 8px; height: 48px; padding: 0 16px; background: var(--bg-surface); border: 1px solid var(--border-strong); transition: border-color 0.3s ease-in-out;}
.regional-input:focus-within {border: 2px solid var(--focus-ring); padding: 0 15px;}
.regional-input i {flex-shrink: 0; font-size: 0.875rem; color: var(--icon-default);}
.regional-input input {flex: 1 0 0; min-width: 0; height: 100%; padding: 0; margin: 0; border: 0; background: transparent; outline: none; box-shadow: none; font-family: "Open Sans", sans-serif; font-size: 0.875rem; line-height: 1.43; color: var(--text-primary);}
.regional-input input::placeholder {font-style: italic; color: var(--text-placeholder); opacity: 1;}

/* Radius Chips — segmented pill, 13px bold uppercase; checked = onyx fill */
.regional-radius {display: block;}
.regional-radius legend {display: block; float: none; width: auto; margin-bottom: 6px;}
.regional-chips {flex-wrap: nowrap; height: 48px; background: var(--bg-surface); border: 1px solid var(--border-strong); border-radius: 999px; overflow: hidden;}
.regional-chip {position: relative; flex: 1 0 0; min-width: 0; display: flex; margin: 0; cursor: pointer;}
.regional-chip + .regional-chip {border-left: 1px solid var(--border-strong);}
.regional-chip input {position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none;}
.regional-chip span {flex: 1 0 0; display: flex; align-items: center; justify-content: center; padding: 0 16px; font-family: "Open Sans", sans-serif; font-size: 0.8125rem; font-weight: 700; line-height: 1.538; letter-spacing: 0.52px; text-transform: uppercase; white-space: nowrap; color: var(--text-primary); transition: all 0.3s ease-in-out;}
.regional-chip:last-child span {padding: 0 20px 0 16px;}
.regional-chip:hover span {background: var(--neutral-100);}
.regional-chip input:checked + span {background: var(--brand-onyx); color: var(--text-on-accent);}
.regional-chip input:focus-visible + span {outline: 2px solid var(--focus-ring); outline-offset: -2px;}

/*-- media starts here --*/
@media only screen and (max-width: 1023px) and (min-width: 768px) {
    .regional-head {gap: 40px;}
    .regional-controls {flex-wrap: wrap;}
    .regional-field {flex: 1 0 calc(50% - 16px);}
    .regional-radius {flex-basis: 100%;}
}

/* Figma Mobile: 32px band, 28px H1 beside 64px icon, 18px intro, stacked controls */
@media only screen and (max-width: 767px) and (min-width: 200px) {
    .regional-section {padding: 32px 0;}
    .regional-head {position: relative; display: block; margin-bottom: 40px;}
    .regional-intro .h1 {display: flex; align-items: center; min-height: 64px; padding-right: 80px; font-size: 1.75rem; line-height: 1.286; letter-spacing: -0.14px;}
    .regional-intro p {font-size: 1.125rem; line-height: 1.444;}
    .regional-icon {position: absolute; top: 0; right: 0; width: 64px; height: 64px;}
    .regional-controls {flex-direction: column; align-items: stretch; gap: 20px;}
    .regional-field {flex: 0 0 auto; width: 100%;}
}