/* =============================================================
   LAYOUT — brand logo, header, mobile drawer, footer
   ============================================================= */

.bk-noscroll { overflow: hidden; }

/* ---- Brand logo ---- */
.bk-logo { display: inline-flex; align-items: center; gap: 8px; color: var(--bk-primary); }
.bk-logo__mark { display: inline-flex; }
.bk-logo__word { font-size: 20px; font-weight: var(--bk-fw-extrabold); color: var(--bk-ink); letter-spacing: -0.02em; }
.bk-header.is-solid .bk-logo__word { color: var(--bk-ink); }

/* ---- Header ---- */
.bk-header {
  position: sticky; top: 0; z-index: var(--bk-z-header);
  height: var(--bk-header-h);
  display: flex; align-items: center;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background var(--bk-dur) var(--bk-ease), box-shadow var(--bk-dur) var(--bk-ease), border-color var(--bk-dur) var(--bk-ease);
}
/* When scrolled, the bar becomes a translucent frosted pane so page content
   shows faintly behind it (item 8). */
.bk-header.is-solid {
  box-shadow: var(--bk-shadow-sm);
  border-bottom-color: var(--bk-border);
  background: color-mix(in srgb, var(--bk-bg) 72%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
}
/* Graceful fallback for engines without backdrop-filter — stay mostly opaque. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .bk-header.is-solid { background: color-mix(in srgb, var(--bk-bg) 92%, transparent); }
}
.bk-header__inner { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--bk-space-6); }
.bk-header__logo { flex: 0 0 auto; }
.bk-logo-img { height: 40px; width: auto; max-width: 170px; display: block; object-fit: contain; }
@media (max-width: 768px) { .bk-logo-img { height: 34px; max-width: 140px; } }
/* If the logo has no dark variant, invert it for dark mode so it stays visible. */
html[data-mp-theme="dark"] .bk-logo-img.mp-theme-logo--auto-invert { filter: brightness(0) invert(1); }
.bk-header__nav { display: flex; align-items: center; gap: var(--bk-space-2); margin-inline-start: var(--bk-space-4); flex: 1; }
.bk-header__navlink {
  padding: 8px 14px; border-radius: var(--bk-radius-pill);
  font-size: var(--bk-fs-sm); font-weight: var(--bk-fw-medium); color: var(--bk-text);
  transition: background var(--bk-dur-fast) var(--bk-ease), color var(--bk-dur-fast) var(--bk-ease);
}
.bk-header__navlink:hover { background: var(--bk-hover); color: var(--bk-primary-700); }
.bk-header__actions { display: flex; align-items: center; gap: var(--bk-space-2); flex: 0 0 auto; }

/* Authenticated identity chip (avatar + name), shown for every guard. */
.bk-header__user { display: inline-flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: var(--bk-radius-pill); transition: background var(--bk-dur-fast) var(--bk-ease); }
.bk-header__user:hover { background: var(--bk-hover); }
.bk-header__user-avatar { width: 34px; height: 34px; border-radius: var(--bk-radius-circle); overflow: hidden; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; background: var(--bk-primary-tint); color: var(--bk-primary-700); font-weight: var(--bk-fw-bold); }
.bk-header__user-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bk-header__user-name { font-size: var(--bk-fs-sm); font-weight: var(--bk-fw-semibold); color: var(--bk-text); max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.bk-header__burger {
  display: inline-flex; align-items: center; justify-content: center;
}
.bk-header__burger-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: var(--bk-radius-pill);
  font-size: var(--bk-fs-sm); font-weight: var(--bk-fw-semibold);
  box-shadow: inset 0 0 0 1px var(--bk-border-strong);
  transition: box-shadow var(--bk-dur-fast) var(--bk-ease), background var(--bk-dur-fast) var(--bk-ease);
}
.bk-header__burger:hover .bk-header__burger-pill { box-shadow: inset 0 0 0 1px var(--bk-ink); background: var(--bk-hover); }
.bk-header__burger-icon { font-size: 22px; }
.bk-header__show-sm { display: none; }

@media (max-width: 900px) {
  .bk-header__nav { display: none; }
}
@media (max-width: 768px) {
  .bk-header__hide-sm { display: none !important; }
  .bk-header__show-sm { display: inline-flex !important; }
  /* Mobile layout: burger at inline-start (right in RTL), logo TRUE-centered to
     the viewport, login/avatar at inline-end. A 3-col grid with equal 1fr side
     columns keeps the logo centered regardless of the side buttons' widths. */
  .bk-header__inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--bk-space-3); }
  .bk-header__burger { order: 1; justify-self: start; }
  .bk-header__logo { order: 2; justify-self: center; display: flex; justify-content: center; margin: 0; }
  .bk-header__actions { order: 3; justify-self: end; margin: 0; gap: var(--bk-space-1); }
}

/* ---- Mobile drawer ---- */
.bk-drawer { position: fixed; inset: 0; z-index: var(--bk-z-drawer); visibility: hidden; }
.bk-drawer.is-open { visibility: visible; }
.bk-drawer__backdrop {
  position: absolute; inset: 0; background: var(--bk-overlay);
  opacity: 0; transition: opacity var(--bk-dur) var(--bk-ease);
}
.bk-drawer.is-open .bk-drawer__backdrop { opacity: 1; }
.bk-drawer__panel {
  position: absolute; inset-inline-start: 0; top: 0; height: 100%;
  width: min(360px, 86vw); background: var(--bk-bg);
  display: flex; flex-direction: column;
  transform: translateX(-100%);
  transition: transform var(--bk-dur) var(--bk-ease-out);
  box-shadow: var(--bk-shadow-xl);
}
/* Drawer opens on the RIGHT and slides in from off-screen-right into view. */
[dir="rtl"] .bk-drawer__panel { inset-inline-start: auto; inset-inline-end: auto; right: 0; left: auto; transform: translateX(100%); }
.bk-drawer.is-open .bk-drawer__panel { transform: translateX(0); }
.bk-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: var(--bk-space-4) var(--bk-space-5); border-bottom: 1px solid var(--bk-border); }
.bk-drawer__nav { display: flex; flex-direction: column; padding: var(--bk-space-3); gap: 2px; flex: 1; }
.bk-drawer__item {
  padding: 14px 16px; border-radius: var(--bk-radius-input);
  font-size: var(--bk-fs-body); font-weight: var(--bk-fw-medium); color: var(--bk-text);
}
.bk-drawer__item:hover { background: var(--bk-hover); }
.bk-drawer__item.is-active { background: var(--bk-primary-tint); color: var(--bk-primary-700); }
.bk-drawer__foot { padding: var(--bk-space-5); border-top: 1px solid var(--bk-border); }
.bk-drawer__themerow { display: flex; align-items: center; justify-content: space-between; gap: var(--bk-space-3); margin-bottom: var(--bk-space-4); font-size: var(--bk-fs-sm); font-weight: var(--bk-fw-medium); color: var(--bk-text); }

/* ---- Footer ---- */
.bk-footer { background: var(--bk-footer-bg, var(--bk-surface)); border-top: 1px solid var(--bk-border); padding-block: var(--bk-space-16) var(--bk-space-8); margin-top: var(--bk-space-16); }
.bk-footer__cities { padding-bottom: var(--bk-space-10); border-bottom: 1px solid var(--bk-border); margin-bottom: var(--bk-space-10); }
.bk-footer__cities-title { font-weight: var(--bk-fw-bold); font-size: var(--bk-fs-lg); margin-bottom: var(--bk-space-5); }
.bk-footer__cities-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--bk-space-6); align-items: start; }
.bk-footer__province-name { display: block; font-weight: var(--bk-fw-bold); font-size: var(--bk-fs-sm); color: var(--bk-text); margin-bottom: var(--bk-space-2); }
.bk-footer__province-name:hover { color: var(--bk-primary); }
.bk-footer__province-cities { display: flex; flex-direction: column; gap: 6px; padding-inline-start: var(--bk-space-2); border-inline-start: 2px solid var(--bk-border); }
.bk-footer__province-cities a { color: var(--bk-text-muted); font-size: var(--bk-fs-sm); }
.bk-footer__province-cities a:hover { color: var(--bk-primary); }

.bk-footer__main { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.4fr; gap: var(--bk-space-8); }
/* Newsletter off with no badges (item 12): 3 equal full-width columns stuck to
   both edges (uniform), instead of centering a narrow group. */
.bk-footer__main--no-news { grid-template-columns: 1.3fr 1fr 1fr; }
/* Badges occupying the newsletter column slot (item 13). */
/* Three badges in a footer column: a flex row sized them from their own
   images, so at 100px tall the third one wrapped onto a second line. A
   three-track grid gives each an equal share of whatever width the column has
   and lets the image scale down to fit. */
.bk-footer__badges--col {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px; padding: 0; border: 0; margin: 0; align-items: center;
}
.bk-footer__col--badges .bk-footer__badge { height: auto; padding: 5px 6px; }
.bk-footer__col--badges .bk-footer__badge img {
    /* In the narrow column the track width decides the size; the admin's
       height is honoured only as far as three still fit on one line. */
    width: 100%; height: auto; max-width: 100%;
    max-height: min(var(--badge-size, 46px), 62px);
}
.bk-footer__desc { color: var(--bk-text-muted); font-size: var(--bk-fs-sm); margin-top: var(--bk-space-3); max-width: 32ch; }
.bk-footer__social { display: flex; gap: var(--bk-space-2); margin-top: var(--bk-space-4); }
.bk-footer__social a {
  width: 40px; height: 40px; border-radius: var(--bk-radius-circle);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bk-bg); box-shadow: inset 0 0 0 1px var(--bk-border); color: var(--bk-text);
  transition: all var(--bk-dur-fast) var(--bk-ease);
}
.bk-footer__social a:hover { background: var(--bk-ink); color: var(--bk-on-ink); box-shadow: none; }
.bk-footer__heading { font-weight: var(--bk-fw-bold); margin-bottom: var(--bk-space-4); }
.bk-footer__col ul { display: flex; flex-direction: column; gap: var(--bk-space-3); }
.bk-footer__col a { color: var(--bk-text-muted); font-size: var(--bk-fs-sm); }
.bk-footer__col a:hover { color: var(--bk-primary); }
.bk-footer__sub {
  display: flex; align-items: center; gap: 6px; margin-top: var(--bk-space-3);
  padding: 5px 16px 5px 5px;
  background: var(--bk-surface);
  border-radius: var(--bk-radius-pill);
  box-shadow: inset 0 0 0 1px var(--bk-border);
  transition: box-shadow var(--bk-dur-fast) var(--bk-ease);
}
.bk-footer__sub:focus-within { box-shadow: inset 0 0 0 1.5px var(--bk-primary), var(--bk-ring); }
.bk-footer__sub input {
  flex: 1; min-width: 0; border: 0; background: transparent; min-height: 40px; padding: 0;
  color: var(--bk-text); font-size: var(--bk-fs-sm);
}
.bk-footer__sub input:focus { outline: none; box-shadow: none; }
.bk-footer__sub input::placeholder { color: var(--bk-text-faint); }
.bk-footer__sub-btn {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px;
  height: 42px; padding: 0 18px; border-radius: var(--bk-radius-pill);
  background: var(--bk-gradient-brand); color: #fff; font-weight: var(--bk-fw-bold); font-size: var(--bk-fs-sm);
  box-shadow: 0 4px 14px rgba(91, 61, 245, 0.35);
  transition: transform var(--bk-dur-fast) var(--bk-ease), box-shadow var(--bk-dur-fast) var(--bk-ease);
}
.bk-footer__sub-btn:hover { transform: translateY(-1px); box-shadow: 0 7px 20px rgba(91, 61, 245, 0.48); }
.bk-footer__sub-btn:active { transform: translateY(0); }
.bk-footer__bottom { display: flex; justify-content: space-between; align-items: center; gap: var(--bk-space-4); flex-wrap: wrap; margin-top: var(--bk-space-10); padding-top: var(--bk-space-6); border-top: 1px solid var(--bk-border); color: var(--bk-text-muted); font-size: var(--bk-fs-sm); }
.bk-footer__bottom-links { display: flex; gap: var(--bk-space-5); }
.bk-footer__bottom-links a:hover { color: var(--bk-primary); }

@media (max-width: 900px) {
  .bk-footer__main { grid-template-columns: 1fr 1fr; }
  /* Brand box (logo + social) moves to the END on mobile (item 11). */
  .bk-footer__brand { grid-column: 1 / -1; order: 10; }
}
@media (max-width: 560px) {
  /* Keep the two link columns ("کشف کنید" / "برای کسب‌وکارها") side by side as a
     2-col grid so the mobile footer isn't a long single stack (item 7). Brand and
     newsletter span the full width. */
  .bk-footer__main { grid-template-columns: 1fr 1fr; gap: var(--bk-space-6) var(--bk-space-5); }
  .bk-footer__brand { grid-column: 1 / -1; order: 10; }
  .bk-footer__col--news { grid-column: 1 / -1; }
  .bk-footer { margin-top: var(--bk-space-10); }
  .bk-footer__col--badges { grid-column: 1 / -1; }
}

/* ===== Header account dropdown (Fresha-style, opens downward) ===== */
.bk-header__usermenu { position: relative; }
.bk-header__usermenu .bk-header__user { background: none; border: 0; cursor: pointer; font: inherit; }
.bk-header__user-caret { font-size: 11px; color: var(--bk-text-muted); transition: transform .15s var(--bk-ease); }
.bk-header__usermenu.is-open .bk-header__user-caret { transform: rotate(180deg); }
.bk-header__user-menu {
  position: absolute; top: calc(100% + 8px); inset-inline-end: 0;
  min-width: 248px; background: var(--bk-bg);
  border: 1px solid var(--bk-border); border-radius: 16px;
  box-shadow: var(--bk-shadow-xl); padding: 8px; z-index: var(--bk-z-overlay);
  display: none;
}
.bk-header__usermenu.is-open .bk-header__user-menu { display: block; }
.bk-header__user-menu-head { display: flex; align-items: center; gap: 10px; padding: 8px 10px 12px; border-bottom: 1px solid var(--bk-border); margin-bottom: 6px; }
.bk-header__user-menu-head strong { font-size: 14px; font-weight: var(--bk-fw-bold); color: var(--bk-text); }
.bk-header__user-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border-radius: 10px; font-size: 14px; font-weight: var(--bk-fw-semibold); color: var(--bk-text); text-decoration: none; background: none; border: 0; cursor: pointer; text-align: start; }
.bk-header__user-item i { width: 18px; text-align: center; color: var(--bk-text-muted); }
.bk-header__user-item:hover { background: var(--bk-hover); color: var(--bk-primary-700); }
.bk-header__user-item:hover i { color: var(--bk-primary-700); }
.bk-header__user-item--danger { color: #dc2626; }
.bk-header__user-item--danger i { color: #dc2626; }
.bk-header__user-item--danger:hover { background: #fef2f2; color: #dc2626; }
.bk-header__user-sep { height: 1px; background: var(--bk-border); margin: 6px 4px; }
.bk-header__user-menu form { margin: 0; }

/* Merge: when signed in, drop the desktop hamburger (its only desktop-unique
   item — the dark-mode toggle — now lives in the profile dropdown). Mobile keeps
   the hamburger for navigation. */
@media (min-width: 992px) {
  .bk-header.is-authed .bk-header__burger { display: none; }
}
.bk-header__user-themerow {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 12px; font-size: 14px; font-weight: var(--bk-fw-semibold); color: var(--bk-text);
}
.bk-header__user-themerow > span { display: inline-flex; align-items: center; gap: 10px; }
.bk-header__user-themerow > span i { width: 18px; text-align: center; color: var(--bk-text-muted); }

/* Footer trust/permit badges (item 12) */
.bk-footer__badges { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; align-items: center; padding: 18px 0; border-top: 1px solid var(--bk-border); margin-top: var(--bk-space-6); }
.bk-footer__badge { display: inline-flex; align-items: center; justify-content: center; background: #fff; border: 1px solid var(--bk-border); border-radius: 10px; padding: 6px 10px; height: 60px; }
.bk-footer__badge img {
    max-height: var(--badge-size, 46px); max-width: 110px;
    object-fit: contain; display: block;
}

@media (max-width: 560px) {
  .bk-footer__badges,
  .bk-footer__badges--col { display: grid; grid-template-columns: 1fr 1fr; justify-items: center; align-items: center; gap: 10px; }
  .bk-footer__badge { width: 100%; }
}

/* ============================================================
   Reusable page hero (x-bk-pagehero) — brand gradient that runs
   UP behind the transparent header, like the home/businesses pages.
   Drop <x-bk-pagehero> at the top of any page. Header turns solid
   on scroll via data-bk-header JS. Colour follows --bk-primary.
   ============================================================ */
.bk-pagehero {
    margin-top: calc(-1 * var(--bk-header-h));
    padding-block: calc(var(--bk-header-h) + var(--bk-space-12, 48px)) var(--bk-space-10, 40px);
    position: relative;
    overflow: hidden;
    text-align: center;
    background:
        radial-gradient(90% 110% at 85% -10%, color-mix(in srgb, var(--bk-primary, #5b3df5) 32%, transparent), transparent 60%),
        radial-gradient(80% 100% at 10% 0%, color-mix(in srgb, var(--bk-primary-300, var(--bk-primary, #5b3df5)) 26%, transparent), transparent 55%),
        linear-gradient(180deg, color-mix(in srgb, var(--bk-primary, #5b3df5) 8%, var(--bk-bg)) 0%, color-mix(in srgb, var(--bk-primary, #5b3df5) 4%, var(--bk-bg)) 55%, var(--bk-bg) 100%);
}
.bk-pagehero::after {
    content: '';
    position: absolute; bottom: 0; left: 0; right: 0;
    height: var(--bk-space-16, 64px);
    background: linear-gradient(to bottom, transparent, var(--bk-bg));
    pointer-events: none;
}
.bk-pagehero__inner { position: relative; z-index: 1; max-width: 760px; margin-inline: auto; }
.bk-pagehero__title {
    font-size: clamp(1.7rem, 3.4vw, 2.6rem);
    font-weight: var(--bk-fw-extrabold, 800);
    letter-spacing: -0.02em; line-height: 1.25; margin: var(--bk-space-3, 12px) 0 0;
    color: var(--bk-ink, #15131f);
}
.bk-pagehero__sub {
    font-size: var(--bk-fs-lg, 1.125rem); color: var(--bk-text-muted, #6b6776);
    line-height: var(--bk-lh-normal, 1.7); margin: var(--bk-space-3, 12px) auto 0; max-width: 640px;
}
@media (max-width: 560px) {
    .bk-pagehero { padding-block: calc(var(--bk-header-h) + var(--bk-space-8, 32px)) var(--bk-space-8, 32px); }
    .bk-pagehero__sub { font-size: var(--bk-fs-md, 1rem); }
}