/* Firoozeh · public finder surfaces: /stores (locator), /store-locator/{id} (detail), /account/profile.
   Colours come only from tokens.css, so light / dark / "match device" stay in lock-step. */

/* ------------------------------------------------------------------ locator layout
   Desktop: a side column (fixed search bar on top, scrolling filters + results under it) beside the map.
   Phones: finder-mobile.css floats the bar over the map and turns the results into a bottom sheet. */
.k-finder-page { --sl-bar: 3.75rem; }
.k-finder { height: calc(100dvh - var(--sl-bar) - 4px); min-height: 32rem; }
.sl { display: grid; grid-template-columns: minmax(22rem, 27rem) 1fr; grid-template-rows: auto 1fr; grid-template-areas: "bar map" "panel map"; height: 100%; }

/* bar: title, search, location chips */
.sl-bar { grid-area: bar; display: flex; flex-direction: column; gap: var(--k-4); padding: var(--k-5) var(--k-5) var(--k-4); background: var(--k-surface); border-inline-end: 1px solid var(--k-line); border-bottom: 1px solid var(--k-line); position: relative; z-index: 2; }
.sl-panel__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--k-3); }
.sl-head__copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sl-title { font-size: var(--k-text-xl); line-height: 1.4; }
.sl-head__sub { font-size: var(--k-text-sm); color: var(--k-muted); line-height: 1.7; }
.sl-head__ai { display: none; }
.sl-search { display: flex; gap: var(--k-2); }
.sl-search .k-input-wrap { width: 100%; }
.sl-search .k-input { height: 2.875rem; border-radius: var(--k-radius-md); background: var(--k-bg); font-size: var(--k-text-md); }
.sl-search .k-input:focus { background: var(--k-surface); }
.sl-search { align-items: center; }
/* the AI button is a glazed khatam: two squares, one turned 45° and slowly turning */
.sl-search__ai { position: relative; display: grid; place-items: center; flex: none; width: 3rem; height: 3rem; border: 0; padding: 0; background: none; color: var(--k-on-deep); cursor: pointer; isolation: isolate; -webkit-tap-highlight-color: transparent; }
.sl-search__ai::before, .sl-search__ai::after { content: ""; position: absolute; inset: 0.4rem; z-index: -1; border-radius: 3px; background: var(--k-deep); box-shadow: 0 8px 18px -8px rgb(0 64 66 / 0.7); transition: transform var(--k-dur-3) var(--k-ease-out); }
.sl-search__ai::after { transform: rotate(45deg); background: color-mix(in srgb, var(--k-accent) 70%, var(--k-deep)); animation: sl-turn 14s linear infinite; }
.sl-search__ai .k-icon { width: 1.25rem; height: 1.25rem; }
.sl-search__ai:hover::before { transform: rotate(-12deg); }
.sl-search__ai:active::before { transform: scale(0.9); }
.sl-search__ai:focus-visible { outline: none; }
.sl-search__ai:focus-visible::before { box-shadow: 0 0 0 3px var(--k-surface), 0 0 0 6px var(--k-focus); }

.sl-loc { display: flex; flex-direction: column; gap: var(--k-2); }
.sl-loc > .k-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sl-loc__row { display: flex; gap: var(--k-2); align-items: center; }
.sl-loc__state { font-size: var(--k-text-sm); color: var(--k-muted); line-height: 1.7; }
.sl-loc__state[data-tone="ok"] { color: var(--k-ok); }
.sl-loc__state[data-tone="warn"] { color: var(--k-warn); }
.sl-loc__state[data-tone="danger"] { color: var(--k-danger); }

/* chips: one shape for location, locate, open-now and filters */
.sl-chip, .sl-loc__pick {
  flex: none; position: relative; display: inline-flex; align-items: center; gap: 0.375rem; height: 2.5rem; padding: 0 0.875rem; white-space: nowrap;
  border: 1px solid var(--k-line); border-radius: var(--k-radius-pill); background: var(--k-surface); color: var(--k-ink-2);
  font: 700 var(--k-text-sm) / 1 var(--k-font-display); cursor: pointer; user-select: none;
  transition: background var(--k-dur-2), border-color var(--k-dur-2), color var(--k-dur-2), box-shadow var(--k-dur-2); }
.sl-chip:hover, .sl-loc__pick:hover { border-color: var(--k-line-strong); color: var(--k-ink); }
.sl-chip .k-icon, .sl-loc__pick > .k-icon { width: 1.05rem; height: 1.05rem; flex: none; }
.sl-chip:focus-visible { outline: none; box-shadow: var(--k-ring); }
.sl-chip--icon { width: 2.5rem; padding: 0; justify-content: center; }
.sl-chip--filters { display: none; }
.sl-loc__pick { min-width: 0; flex: 0 1 auto; background: var(--k-accent-soft); border-color: transparent; color: var(--k-accent-ink); }
.sl-loc__pick:hover { border-color: color-mix(in srgb, var(--k-accent) 40%, transparent); color: var(--k-accent-ink); }
.sl-loc__pick.is-set { background: var(--k-accent); color: var(--k-on-accent); }
.sl-loc__text { min-width: 0; overflow: hidden; text-overflow: ellipsis; max-width: 12rem; }
.sl-loc__chev { opacity: .75; }
.sl-loc__pick .k-select { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; opacity: 0; cursor: pointer; font-size: 16px; border: 0; padding: 0; appearance: none; }
.sl-loc__pick:has(.k-select:focus-visible) { box-shadow: var(--k-ring); }
.k-finder:has(#filterIsOpen:checked) .sl-chip--open { background: var(--k-ok-soft); border-color: color-mix(in srgb, var(--k-ok) 45%, transparent); color: var(--k-ok); }
.k-finder:has(#filterIsOpen:checked) .sl-chip--open::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: currentColor; animation: sl-beat 2.4s ease-in-out infinite; }
.k-finder:has(#filterIsOpen:checked) .sl-chip--open .k-icon { display: none; }
.sl-chip--filters[aria-expanded="true"] { border-color: var(--k-accent); color: var(--k-accent-ink); }
.sl-chip__n { display: inline-grid; place-items: center; min-width: 1.25rem; height: 1.25rem; padding: 0 0.25rem; border-radius: var(--k-radius-pill); background: var(--k-accent); color: var(--k-on-accent); font-size: 0.75rem; }
.sl-chip__n[hidden] { display: none; }

/* panel: filters + results */
.sl-panel { grid-area: panel; display: flex; flex-direction: column; gap: var(--k-3); padding: 0 var(--k-5); overflow-y: auto; background: var(--k-bg); border-inline-end: 1px solid var(--k-line); overscroll-behavior: contain; scrollbar-width: thin; }
.sl-grip, .sl-more { display: none; }
.sl-results__head { display: flex; align-items: center; gap: var(--k-2); position: sticky; top: 0; z-index: 2; background: var(--k-bg); padding-block: var(--k-4) var(--k-2); }
.sl-count { font-size: var(--k-text-md); flex: 1; min-width: 0; }
.sl-flag { flex: none; }
.sl-flag-x { border: 0; background: none; color: inherit; padding: 0; display: inline-grid; cursor: pointer; border-radius: var(--k-radius-xs); }
.sl-flag-x .k-icon { width: 0.9rem; height: 0.9rem; }
.sl-flag-x:focus-visible { outline: 2px solid var(--k-focus); }

.sl-filters { order: -1; margin-top: var(--k-4); border: 1px solid var(--k-line); border-radius: var(--k-radius-lg); background: var(--k-surface); flex: none; }
.sl-filters > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: var(--k-2); padding: var(--k-3) var(--k-4); font: 700 var(--k-text-sm) / 1.4 var(--k-font-display); border-radius: var(--k-radius-lg); }
.sl-filters > summary::-webkit-details-marker { display: none; }
.sl-filters > summary > span:first-child { display: inline-flex; align-items: center; gap: var(--k-2); flex: 1; }
.sl-filters > summary:focus-visible { outline: none; box-shadow: var(--k-ring); }
.sl-filters__chev { transition: transform var(--k-dur-2) var(--k-ease); color: var(--k-muted); }
.sl-filters[open] .sl-filters__chev { transform: rotate(180deg); }
.sl-filters__body { display: flex; flex-direction: column; gap: var(--k-4); padding: 0 var(--k-4) var(--k-4); }
.sl-filters__top { display: flex; align-items: center; justify-content: flex-end; gap: var(--k-2); }
.sl-filters__top b { display: none; font: 700 var(--k-text-lg) / 1.4 var(--k-font-display); flex: 1; }
.sl-filters__reset { display: inline-flex; align-items: center; gap: 0.375rem; height: 2.25rem; padding: 0 var(--k-3); border: 0; border-radius: var(--k-radius-pill); background: var(--k-surface-2); color: var(--k-ink-2); font: 700 var(--k-text-sm) / 1 var(--k-font-display); cursor: pointer; }
.sl-filters__reset .k-icon { width: 1rem; height: 1rem; }
.sl-filters__reset:hover { color: var(--k-ink); background: var(--k-surface-3); }
.sl-filters__reset:focus-visible { outline: none; box-shadow: var(--k-ring); }
.sl-filters__grid { grid-template-columns: 1fr 1fr; }
.sl-seg { display: flex; flex-wrap: wrap; gap: var(--k-2); }
.sl-seg > label { position: relative; cursor: pointer; }
.sl-seg input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.sl-seg span { display: inline-flex; align-items: center; height: 2.25rem; padding: 0 var(--k-3); border: 1px solid var(--k-line); border-radius: var(--k-radius-pill); background: var(--k-surface); color: var(--k-ink-2); font-size: var(--k-text-sm); font-weight: 700; transition: background var(--k-dur-2), color var(--k-dur-2), border-color var(--k-dur-2); }
.sl-seg label:hover span { border-color: var(--k-line-strong); }
.sl-seg input:checked + span { background: var(--k-deep); border-color: var(--k-deep); color: var(--k-on-deep); }
.sl-seg input:focus-visible + span { box-shadow: var(--k-ring); }

/* results */
.sl-list { list-style: none; margin: 0; padding: 0 0 var(--k-6); display: flex; flex-direction: column; gap: var(--k-3); }
.sl-card { position: relative; display: grid; grid-template-columns: 5rem minmax(0, 1fr); grid-template-areas: "media body" "addr addr" "actions actions"; gap: var(--k-3) var(--k-4);
  padding: 0.875rem; border: 1px solid var(--k-line); border-radius: var(--k-radius-lg); background: var(--k-surface); overflow: hidden;
  transition: border-color var(--k-dur-2), box-shadow var(--k-dur-2), transform var(--k-dur-2) var(--k-ease-out); animation: sl-in 360ms var(--k-ease-out) backwards; }
.sl-card:nth-child(2) { animation-delay: 40ms; } .sl-card:nth-child(3) { animation-delay: 80ms; } .sl-card:nth-child(4) { animation-delay: 120ms; } .sl-card:nth-child(n+5) { animation-delay: 160ms; }
.sl-card:hover { border-color: var(--k-line-strong); box-shadow: var(--k-shadow-2); }
/* the selected store wears the kashi stripe */
.sl-card::before { content: ""; position: absolute; inset-inline: 0; inset-block-start: 0; height: 4px; transform: scaleX(0); transform-origin: right; transition: transform var(--k-dur-3) var(--k-ease-out);
  background: linear-gradient(to left, var(--tile-firoozeh) 0 50%, var(--tile-khormalu) 50% 66%, var(--tile-khesht) 66% 83%, var(--tile-pesteh) 83%); }
.sl-card.is-active { border-color: color-mix(in srgb, var(--k-accent) 60%, var(--k-line)); box-shadow: 0 12px 28px -18px color-mix(in srgb, var(--k-accent) 80%, transparent); }
.sl-card.is-active::before { transform: scaleX(1); }
.sl-card__media { grid-area: media; width: 5rem; height: 5rem; border-radius: var(--k-radius-md); overflow: hidden; background: var(--k-accent-soft); color: var(--k-accent-ink); display: grid; place-items: center; }
.sl-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sl-card__media .k-icon { width: 1.75rem; height: 1.75rem; }
.sl-card__body { grid-area: body; min-width: 0; display: flex; flex-direction: column; gap: 0.375rem; justify-content: center; }
.sl-card__name { font-size: var(--k-text-md); line-height: 1.5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sl-card__name a { color: var(--k-ink); text-decoration: none; }
.sl-card__name a:hover { color: var(--k-accent-ink); }
.sl-card__name a:focus-visible { outline: none; box-shadow: var(--k-ring); border-radius: var(--k-radius-xs); }
.sl-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--k-2); font-size: var(--k-text-sm); color: var(--k-muted); line-height: 1.6; }
.sl-card__meta > span + span::before { content: "·"; margin-inline-end: var(--k-2); color: var(--k-faint); }
.sl-card__dist { display: inline-flex; align-items: center; gap: 0.25rem; color: var(--k-accent-ink); font-weight: 700; }
.sl-card__dist .k-icon { width: 0.875rem; height: 0.875rem; }
.sl-card__status { display: flex; }
.sl-card__status:empty { display: none; }
.sl-card .k-badge { border-radius: var(--k-radius-pill); padding: 0.1875rem 0.625rem; font-weight: 700; font-size: var(--k-text-sm); }
.sl-card .k-badge::before { border-radius: 50%; }
.sl-card.is-open .k-badge--ok::before { animation: sl-beat 2.4s ease-in-out infinite; }
.sl-card__addr { grid-area: addr; display: flex; gap: var(--k-2); margin: 0; padding-top: var(--k-3); border-top: 1px dashed var(--k-line); font-size: var(--k-text-sm); color: var(--k-ink-2); line-height: 1.8; }
.sl-card__addr .k-icon { flex: none; margin-top: 0.3rem; width: 0.95rem; height: 0.95rem; color: var(--k-muted); }
.sl-card__addr span { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.sl-card__actions { grid-area: actions; position: relative; z-index: 1; display: flex; gap: var(--k-2); align-items: center; }
.sl-card__enter { flex: 1; min-height: 2.5rem; justify-content: center; }
.sl-card__icon { flex: none; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border: 1px solid var(--k-line); border-radius: var(--k-radius-md); background: var(--k-surface); color: var(--k-ink-2); cursor: pointer; text-decoration: none; transition: border-color var(--k-dur-2), color var(--k-dur-2), background var(--k-dur-2); }
.sl-card__icon .k-icon { width: 1.1rem; height: 1.1rem; }
.sl-card__icon:hover { border-color: var(--k-accent); color: var(--k-accent-ink); background: var(--k-accent-soft); }
.sl-card__icon:focus-visible { outline: none; box-shadow: var(--k-ring); }

.sl-skel { display: grid; grid-template-columns: 5rem 1fr; gap: var(--k-4); padding: 0.875rem; border: 1px solid var(--k-line); border-radius: var(--k-radius-lg); background: var(--k-surface); }
.sl-skel__media { width: 5rem; height: 5rem; border-radius: var(--k-radius-md); }
.sl-skel__lines { display: flex; flex-direction: column; gap: var(--k-2); justify-content: center; }
.sl-empty { display: flex; flex-direction: column; align-items: center; gap: var(--k-2); text-align: center; padding: var(--k-6) var(--k-4); border: 1px dashed var(--k-line-strong); border-radius: var(--k-radius-lg); background: var(--k-surface); }
.sl-empty .k-empty__mark { width: 2.5rem; height: 2.5rem; color: var(--k-accent); }

.sl-map { grid-area: map; position: relative; min-width: 0; }
.sl-map__canvas { position: absolute; inset: 0; border-radius: 0; border: 0; }
.sl-map__canvas.kmap { position: absolute; inset: 0; min-height: 0; border-radius: 0; border: 0; }
.sl-map__badge { position: absolute; top: var(--k-3); inset-inline-start: 50%; transform: translateX(50%); z-index: 5; padding: var(--k-2) var(--k-4); border-radius: var(--k-radius-pill); background: var(--k-deep); color: var(--k-on-deep); font-size: var(--k-text-sm); box-shadow: var(--k-shadow-2); pointer-events: none; white-space: nowrap; }
.sl-map__badge:empty, .sl-map__badge[hidden] { display: none; }
.sl-switch { display: none; }
.sl-reveal { display: none; }

.sl-ai__form { display: flex; gap: var(--k-2); flex-wrap: wrap; }
.sl-ai__form .k-input { flex: 1 1 16rem; }
.sl-ai__chips { display: flex; flex-wrap: wrap; gap: var(--k-2); }
.sl-ai__chips .k-tag { cursor: pointer; border: 1px solid var(--k-line); background: var(--k-surface-2); color: var(--k-ink-2); font: inherit; font-size: var(--k-text-sm); }
.sl-ai__chips .k-tag:hover { border-color: var(--k-accent); color: var(--k-ink); }
.sl-ai__chips .k-tag:focus-visible { outline: none; box-shadow: var(--k-ring); }
.sl-ai__out { display: flex; flex-direction: column; gap: var(--k-3); }
.sl-ai__out:empty { display: none; }
.sl-ai__why, .sl-ai__thinking { display: flex; gap: var(--k-2); align-items: flex-start; padding: var(--k-3); border-radius: var(--k-radius-sm); background: var(--k-accent-soft); color: var(--k-ink); line-height: 1.8; }
.sl-ai__why .k-icon { color: var(--k-accent-ink); flex: none; margin-top: 0.3rem; }
.sl-ai__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--k-2); }
.sl-ai__list li { display: flex; justify-content: space-between; align-items: center; gap: var(--k-3); padding: var(--k-2) var(--k-3); border: 1px solid var(--k-line); border-radius: var(--k-radius-sm); }
.sl-ai__list a { display: flex; flex-direction: column; text-decoration: none; color: var(--k-ink); min-width: 0; }
.sl-ai__list a:hover b { color: var(--k-accent-ink); text-decoration: underline; }
.sl-ai__list span { font-size: var(--k-text-sm); }

@keyframes sl-in { from { opacity: 0; transform: translateY(6px); } }
@keyframes sl-turn { to { transform: rotate(405deg); } }
@keyframes sl-beat { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* store detail (/store-locator/{id}) lives in store-detail.css */

/* ------------------------------------------------------------------ customer profile */
.gp { padding-block: var(--k-5) var(--k-8); display: flex; flex-direction: column; gap: var(--k-5); }
.gp-head { display: flex; align-items: center; gap: var(--k-4); flex-wrap: wrap; padding: var(--k-5); background: var(--k-deep); color: var(--k-on-deep); border-radius: var(--k-radius-lg); position: relative; overflow: hidden; }
.gp-head::after { content: ""; position: absolute; inset-inline-end: -3rem; inset-block-start: -3rem; width: 12rem; height: 12rem; border: 18px solid color-mix(in srgb, var(--k-accent) 40%, transparent); transform: rotate(45deg); pointer-events: none; }
.gp-head h1 { color: inherit; font-size: var(--k-text-2xl); }
.gp-head__who { flex: 1; min-width: 12rem; display: flex; flex-direction: column; gap: var(--k-1); }
.gp-head__meta { display: flex; flex-wrap: wrap; gap: var(--k-1) var(--k-4); font-size: var(--k-text-sm); opacity: .9; }
.gp-head__meta span { display: inline-flex; align-items: center; gap: var(--k-1); direction: ltr; unicode-bidi: plaintext; }
.gp-head .k-avatar { width: 4rem; height: 4rem; font-size: var(--k-text-xl); background: var(--k-accent); color: var(--k-on-accent); }
.gp-head .k-btn { position: relative; z-index: 1; }
.gp-verified { background: color-mix(in srgb, var(--k-ok) 22%, transparent); color: var(--k-on-deep); }
.gp-tabs { position: sticky; top: 4rem; z-index: 2; background: var(--k-bg); }
.gp-form { display: flex; flex-direction: column; gap: var(--k-4); max-width: 36rem; }
.gp-form__foot { display: flex; align-items: center; gap: var(--k-3); flex-wrap: wrap; }
.gp-loc { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--k-5); align-items: start; }
.gp-loc__map { min-height: 22rem; }
.gp-loc__map.kmap { min-height: 22rem; }
.gp-loc__coords { font-size: var(--k-text-sm); color: var(--k-muted); direction: rtl; }
.gp-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(18rem, 100%), 1fr)); gap: var(--k-3); }
.gp-card { display: flex; flex-direction: column; gap: var(--k-2); padding: var(--k-4); border: 1px solid var(--k-line); border-radius: var(--k-radius-md); background: var(--k-surface); }
.gp-card.is-default { border-color: var(--k-accent); box-shadow: inset 0 4px 0 var(--k-accent); }
.gp-card h3 { font-size: var(--k-text-md); display: flex; align-items: center; gap: var(--k-2); }
.gp-card__meta { font-size: var(--k-text-sm); color: var(--k-muted); line-height: 1.7; }
.gp-card__coords { direction: ltr; text-align: end; font-family: var(--k-font-mono); font-size: var(--k-text-xs); color: var(--k-faint); }
.gp-card__actions { display: flex; gap: var(--k-2); flex-wrap: wrap; margin-top: auto; }
.gp-store { flex-direction: row; align-items: flex-start; gap: var(--k-3); }
.gp-store__img { flex: none; width: 3.5rem; height: 3.5rem; border-radius: var(--k-radius-sm); overflow: hidden; background: var(--k-accent-soft); color: var(--k-accent-ink); display: grid; place-items: center; }
.gp-store__img img { width: 100%; height: 100%; object-fit: cover; }
.gp-store__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--k-1); }
.gp-connect__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--k-2); max-height: 50vh; overflow-y: auto; }
.gp-connect__list li { display: flex; align-items: center; justify-content: space-between; gap: var(--k-3); padding: var(--k-2) var(--k-3); border: 1px solid var(--k-line); border-radius: var(--k-radius-sm); }
.gp-connect__list li > div { min-width: 0; display: flex; flex-direction: column; }
.gp-connect__list small { color: var(--k-muted); }
.gp-section-head { display: flex; align-items: center; justify-content: space-between; gap: var(--k-3); flex-wrap: wrap; margin-bottom: var(--k-4); }
.gp-section-head h2 { font-size: var(--k-text-xl); }
@media (max-width: 56rem) { .gp-loc { grid-template-columns: 1fr; } .gp-tabs { top: 3.75rem; } }
/* phone-only pieces of /account/profile (styled in finder-mobile.css); on desktop the page stays as it was */
.gp-stats, .gp-near, .gp-tab__s, .gp-tab__i, .gp-tab__n, .gp-place__map, .gp-add, .gp-store__seen, .gp-head__ok, .gp-empty__mark, .gp-card__meta--none,
.gp-head [data-logout] .k-icon, .gp-in .k-icon, .gp-card__actions [data-loc-default] .k-icon, .gp-card__actions [data-unlink] .k-icon { display: none; }
.gp-place__body, .gp-in { display: contents; }
@media (prefers-reduced-motion: reduce) { .sl-card, .sl-card::before, .sl-filters__chev { transition: none; } .sl-card, .sl-card .k-badge::before, .sl-chip--open::before, .sl-search__ai::after { animation: none !important; } }
.sl-map .kmap__card .k-badge { border-radius: var(--k-radius-pill); padding: 0.1875rem 0.625rem; }
.sl-map .kmap__card .k-badge::before { border-radius: 50%; }