/* Strona główna: wybór okolicy w jednym oknie. */
.hero { grid-template-columns: 1.2fr .8fr; gap: 24px; min-height: 475px; padding: 42px 0 52px; }
.hero-copy h1 { max-width: 740px; font-size: clamp(40px, 4.55vw, 63px); line-height: 1.02; letter-spacing: -.065em; margin: 0 0 22px; }
.hero-copy h1 > em { display: inline; font-size: 1.07em; white-space: normal; letter-spacing: -.065em; }
.hero .intro { max-width: none; margin-bottom: 25px; font-size: 15px; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: stretch; gap: 12px; }
#nearbyButton, #manualLocationButton { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: auto; min-width: 0; min-height: 54px; height: auto; padding: 14px 18px; border-radius: 5px; font: 800 13px/1.4 Manrope, Arial, sans-serif; letter-spacing: -.2px; white-space: normal; cursor: pointer; transition: background .18s ease; }
#nearbyButton { background: var(--acid); color: var(--ink); }
#nearbyButton::after { content: none; }
#nearbyButton span { font-size: inherit; }
#nearbyButton:hover { background: #dcff76; transform: none; }
#manualLocationButton { border: 1px solid var(--ink); background: transparent; color: var(--ink); }
#manualLocationButton:hover { background: #e6eadf; }
.hero-manual svg, .step-icon svg, .people-card svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.location-status { margin: 12px 0 0; color: #46534b; font-size: 13px; line-height: 1.5; }
.location-status:empty { display: none; }
.search-caption { font-size: 11px; color: #5b6661; margin: 18px 0 6px; }
.hero .search { height: 49px; max-width: 520px; padding: 4px 4px 4px 15px; box-shadow: 0 8px 24px #17202108; border-radius: 4px; }
.hero .search input { font-size: 12px; background: transparent; }
.hero .search button { height: 39px; padding: 8px 17px; border-radius: 3px; }
.hero .search button span { display: none; }
.hero .search-icon { font-size: 24px; }
.hero .search:focus-within { outline: 2px solid #8ca92f; outline-offset: 3px; }
.hero-art { height: 340px; }
.people-card { position: absolute; left: 0; bottom: 10px; width: 146px; padding: 20px 12px; background: #fff; transform: rotate(-5deg); box-shadow: 0 13px 28px #17202120; z-index: 3; text-align: center; }
.people-card svg { display: block; margin: 0 auto 10px; }
.people-card b { display: block; font: 800 13px/1.2 Manrope, Arial, sans-serif; letter-spacing: .4px; }
.trust-inner { gap: 20px; }
.trust p { font: 400 13px/1.5 Manrope, Arial, sans-serif; letter-spacing: 0; }
.trust-inner div { flex: none; }
.local-intro { padding: 40px 0 30px; }
.local-intro h2 { font: 800 clamp(31px, 4vw, 48px)/1.1 Manrope, Arial, sans-serif; letter-spacing: -2.5px; margin: 0 0 8px; }
.local-intro h2 em { font-family: Georgia, serif; font-weight: 400; letter-spacing: -2.5px; }
.local-intro > p { font-size: 14px; color: #596963; margin: 0 0 24px; }
.location-steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.location-steps li { display: flex; align-items: center; gap: 18px; min-width: 0; }
.step-icon { display: grid; place-items: center; flex: none; width: 66px; height: 66px; border-radius: 50%; background: #e8fbb8; }
.step-icon svg { width: 29px; height: 29px; }
.location-steps small { display: block; color: #5c7912; font-size: 12px; font-weight: 800; margin-bottom: 4px; }
.location-steps b { font-size: 14px; }
.location-steps p { font-size: 12px; line-height: 1.45; color: #626f6a; margin: 3px 0 0; }
.step-arrow { margin-left: auto; font-size: 24px; color: #78877f; }
.explore { padding-top: 14px; padding-bottom: 70px; }
.category-heading h2 { font-size: clamp(36px, 4vw, 48px); letter-spacing: -2.5px; }
.category-heading h2 em { letter-spacing: -2.5px; }
.directory-results .text-link { background: transparent; cursor: pointer; border: 0; border-bottom: 1px solid; }

.location-dialog { width: min(980px, calc(100% - 40px)); max-height: calc(100dvh - 40px); margin: auto; padding: 28px; border: 1px solid #dce1d8; border-radius: 10px; background: #fdfefb; color: var(--ink); box-shadow: 0 24px 80px #17202138; overscroll-behavior: contain; }
.location-dialog::backdrop { background: #17202180; backdrop-filter: blur(3px); }
.location-dialog [hidden] { display: none !important; }
.location-dialog button { cursor: pointer; font-family: Manrope, Arial, sans-serif; }
.location-toolbar { display: grid; grid-template-columns: 1fr auto 1fr 28px; align-items: center; gap: 14px; }
.location-toolbar > button { background: transparent; border: 0; color: var(--ink); padding: 8px 0; font-size: 12px; font-weight: 600; min-height: 42px; }
#locationBack { text-align: left; }
#dialogNearbyButton { justify-self: end; }
#dialogNearbyButton:disabled { opacity: .65; cursor: wait; }
.location-toolbar .location-close { font-size: 26px; line-height: 1; }
.location-progress { display: flex; list-style: none; margin: 0; padding: 0; gap: 20px; }
.location-progress li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px; font-size: 10px; color: #6d7972; }
.location-progress li:not(:last-child)::after { content: ''; position: absolute; top: 10px; left: calc(50% + 14px); width: calc(100% - 8px); height: 1px; background: #d7ded1; }
.location-progress span { display: grid; place-items: center; width: 21px; height: 21px; border-radius: 50%; background: #e8ece4; font-size: 10px; }
.location-progress .is-reached span { background: var(--acid); color: #172021; }
.location-progress [aria-current] { font-weight: 800; color: #172021; }
.location-heading { text-align: center; margin: 28px 0 25px; }
.location-heading h2 { font: 800 clamp(31px, 4.4vw, 52px)/1.1 Manrope, Arial, sans-serif; letter-spacing: -2.7px; margin: 0 0 12px; outline: none; }
.location-heading h2 em { font-family: Georgia, serif; font-weight: 400; letter-spacing: -2.7px; }
.location-heading p { margin: 5px 0; font-size: 14px; line-height: 1.5; color: #64716b; }
.location-heading .location-selection { display: inline-block; background: #edf6db; padding: 5px 10px; border-radius: 4px; color: #42552d; font-size: 12px; }
.location-regions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.location-regions button { display: flex; align-items: center; gap: 12px; min-width: 0; min-height: 53px; padding: 12px 15px; border: 1px solid #dfe4dc; border-radius: 5px; background: #fff; text-align: left; color: #172021; }
.location-regions button b { font-size: 13px; overflow-wrap: normal; word-break: normal; hyphens: manual; }
.location-regions button > span { font-size: 18px; flex: none; }
.location-regions button i { margin-left: auto; font-size: 19px; font-style: normal; }
.location-regions button:hover, .location-city-list button:hover { border-color: #9dbe45; background: #f3fadf; }
.location-search-label { display: block; font-size: 12px; font-weight: 700; margin-bottom: 7px; }
.location-city-search { display: block; width: 100%; height: 48px; padding: 12px 15px; border: 1px solid #cbd4c5; border-radius: 5px; font: 500 16px Manrope, Arial, sans-serif; color: var(--ink); background: #fff; }
.location-popular { margin: 20px 0; }
.location-popular h3, .location-all-cities h3 { margin: 0 0 10px; font-size: 13px; font-weight: 700; }
.location-popular > div { display: flex; flex-wrap: wrap; gap: 8px; }
.location-popular button { background: #eaf6cc; border: 1px solid #d4e6ac; border-radius: 5px; padding: 10px 14px; min-height: 42px; font-weight: 700; font-size: 13px; color: var(--ink); }
.location-popular button:hover { background: var(--acid); }
.location-all-cities { margin-top: 20px; }
.location-all-cities h3 span { font-weight: 400; color: #63705c; }
.location-city-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-content: start; gap: 8px; max-height: 225px; overflow-y: auto; overscroll-behavior: contain; padding: 4px; margin: -4px; }
.location-city-list button { min-width: 0; border: 1px solid #e0e5dc; border-radius: 4px; padding: 11px 12px; min-height: 44px; text-align: left; background: #f5f7f1; color: var(--ink); font-size: 13px; overflow-wrap: anywhere; }
#cityNoMatches { color: #5b6655; font-size: 13px; }
.location-whole-region { display: flex; align-items: center; gap: 20px; width: fit-content; max-width: 100%; margin-top: 20px; padding: 13px 16px; border: 1px solid #b4d45d; border-radius: 5px; background: #e1f58a; color: var(--ink); font-size: 11px; font-weight: 800; text-align: left; }
.location-whole-region:hover { background: var(--acid); }
.location-categories { gap: 12px; }
.location-categories .category { border: 0; text-align: left; aspect-ratio: 2.1; }
.location-categories .category > b { position: static; margin: 0 0 6px; font-size: 17px; line-height: 1.15; letter-spacing: -.6px; }
.location-categories .category > small { font-size: 11px; }
.location-note { margin: 24px 0 0; padding-top: 18px; border-top: 1px solid #e1e6dc; text-align: center; font-size: 11px; line-height: 1.5; color: #657261; }
:is(#nearbyButton, #manualLocationButton, .directory-results .text-link):focus-visible,
.location-dialog :is(button, input):focus-visible { outline: 3px solid #67851e; outline-offset: 3px; }
#locationContent { animation: location-step-in .18s ease-out; }
@keyframes location-step-in { from { opacity: .5; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (max-width: 1000px) and (min-width: 761px) {
  .hero { grid-template-columns: 1.3fr .7fr; }
  .hero-art { transform: scale(.84); transform-origin: center; }
  .location-steps { gap: 18px; }
  .location-steps li { gap: 12px; }
  .step-icon { width: 50px; height: 50px; }
}
@media (max-width: 760px) {
  .hero { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 32px 0 30px; }
  .hero-copy h1 { font-size: clamp(35px, 9.5vw, 53px); letter-spacing: -.055em; }
  .hero-copy h1 > em { white-space: normal; }
  .hero .eyebrow { font-size: 9px; }
  .hero .intro { font-size: 14px; line-height: 1.55; }
  .hero-actions { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 9px; }
  #nearbyButton, #manualLocationButton { padding: 12px 10px; font-size: 12px; gap: 6px; }
  #nearbyButton span:last-child { display: none; }
  .hero-manual svg { width: 19px; height: 19px; }
  .hero-art { height: 250px; width: min(390px, 100%); margin: 30px auto 0; }
  .hero-art .orbit-one { width: 225px; height: 225px; }
  .hero-art .orbit-two { width: 290px; height: 175px; }
  .hero-art .seal { width: 150px; height: 150px; }
  .hero-art .quote-card { width: 142px; padding: 12px; top: 0; }
  .hero-art .quote-card p { font-size: 11px; }
  .hero-art .quote-card small { font-size: 8px; }
  .hero-art .people-card { width: 119px; padding: 15px 9px; bottom: 0; }
  .people-card b { font-size: 11px; }
  .hero-art .dot { left: 25px; top: 16px; }
  .hero-art .square { right: 15px; bottom: 14px; width: 29px; height: 29px; border-width: 6px; }
  .trust p { font-size: 12px; }
  .local-intro { padding: 30px 0 25px; }
  .local-intro h2 { font-size: 31px; letter-spacing: -1.7px; }
  .local-intro h2 em { letter-spacing: -1.7px; }
  .local-intro > p { font-size: 13px; }
  .location-steps { gap: 8px; }
  .location-steps li { flex-direction: column; align-items: flex-start; gap: 8px; position: relative; }
  .step-icon { width: 43px; height: 43px; }
  .step-icon svg { width: 23px; height: 23px; }
  .location-steps small { font-size: 10px; }
  .location-steps b { font-size: 11px; }
  .location-steps p { display: none; }
  .step-arrow { position: absolute; top: 8px; right: 9px; font-size: 20px; }
  .explore { padding-top: 10px; padding-bottom: 45px; }
  .directory-results .section-heading { flex-wrap: wrap; }
  .directory-results .text-link { display: inline-block; }
  .location-dialog { width: calc(100% - 20px); max-height: calc(100dvh - 20px); padding: 18px 14px; border-radius: 9px; }
  .location-toolbar { grid-template-columns: 1fr auto 28px; gap: 8px; }
  .location-toolbar > button { font-size: 11px; }
  .location-progress { grid-column: 1 / -1; grid-row: 2; justify-content: center; gap: 25px; padding: 8px 0 0; }
  .location-heading { margin: 23px 0 20px; }
  .location-heading h2 { font-size: clamp(29px, 8vw, 40px); letter-spacing: -1.6px; overflow-wrap: anywhere; }
  .location-heading h2 em { letter-spacing: -1.6px; }
  .location-heading p { font-size: 13px; }
  .location-regions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .location-regions button { padding: 11px 8px; gap: 6px; min-height: 60px; }
  .location-regions button b { font-size: 11px; }
  .location-regions button > span { font-size: 14px; }
  .location-regions button i { display: none; }
  .location-city-list { grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: 220px; }
  .location-city-list button { font-size: 12px; padding: 10px; }
  .location-popular button { font-size: 12px; padding: 9px 11px; }
  .location-categories { gap: 10px; }
  .location-categories .category { aspect-ratio: auto; height: 140px; min-height: 140px; padding: 13px 31px 76px 10px; }
  .location-categories .category > b { font-size: clamp(14px, 4vw, 18px); margin: 0; }
  .location-categories .category > small { display: none; }
  .location-note { margin-top: 20px; font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  #locationContent { animation: none; }
}

/* Toolbar stays outside the scrollable steps, including on short screens. */
.location-dialog[open] { display: flex; flex-direction: column; overflow: hidden; max-height: calc(100vh - 20px); max-height: calc(100dvh - 20px); }
.location-toolbar { flex: none; grid-template-columns: 1fr auto 1fr 44px; }
.location-toolbar > button { min-height: 44px; min-width: 44px; }
.location-scroll { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 4px 12px; margin: 0 -4px -4px; scrollbar-gutter: stable; }
html:has(#locationDialog[open]) { overflow: hidden; }
@media (max-width: 760px) {
  .location-dialog { padding: 10px 12px; }
  .location-toolbar { grid-template-columns: minmax(0, 1fr) auto 44px; column-gap: 5px; row-gap: 2px; padding-bottom: 6px; }
  .location-progress { padding-top: 0; gap: 23px; }
  .location-progress li { gap: 2px; }
  .location-heading { margin: 10px 0 12px; }
  .location-heading h2 { font-size: clamp(27px, 7.3vw, 37px); line-height: 1.12; margin-bottom: 7px; overflow-wrap: normal; word-break: normal; }
  .location-heading p { margin: 4px 0; }
  /* A column needs room for the longest unbroken name plus 24px padding. */
  .location-regions { grid-template-columns: repeat(auto-fit, minmax(min(100%, 174px), 1fr)); gap: 8px; }
  .location-regions button { padding: 10px 12px; min-height: 50px; gap: 0; }
  .location-regions button b { font-size: 14px; line-height: 1.4; overflow-wrap: normal; word-break: normal; }
  .location-note { margin-top: 14px; padding: 12px 0 max(4px, env(safe-area-inset-bottom)); }
}