/* =============================================================
   BASE — reset, RTL foundation, typography, shared primitives
   Depends on tokens.css. All selectors namespaced with bk-.
   ============================================================= */

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--bk-font);
  font-size: var(--bk-fs-body);
  line-height: var(--bk-lh-normal);
  color: var(--bk-text);
  background: var(--bk-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  direction: rtl;
}
h1, h2, h3, h4, h5, h6, p, figure, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
img, svg, video { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, textarea, select, button { font-family: inherit; font-size: inherit; }
:focus-visible { outline: none; box-shadow: var(--bk-ring-strong); border-radius: var(--bk-radius-sm); }
::selection { background: var(--bk-primary-200); }

/* ---- Headings ---- */
.bk-h1 { font-size: var(--bk-fs-display); line-height: var(--bk-lh-tight); font-weight: var(--bk-fw-extrabold); letter-spacing: -0.01em; }
.bk-h2 { font-size: var(--bk-fs-h2); line-height: var(--bk-lh-snug); font-weight: var(--bk-fw-bold); letter-spacing: -0.01em; }
.bk-h3 { font-size: var(--bk-fs-h3); line-height: var(--bk-lh-snug); font-weight: var(--bk-fw-bold); }
.bk-h4 { font-size: var(--bk-fs-h4); line-height: var(--bk-lh-snug); font-weight: var(--bk-fw-semibold); }
.bk-muted { color: var(--bk-text-muted); }
.bk-faint { color: var(--bk-text-faint); }

/* ---- Layout ---- */
.bk-body { min-height: 100vh; }
.bk-main { display: block; }
.bk-container {
  width: 100%;
  max-width: var(--bk-container);
  margin-inline: auto;
  padding-inline: var(--bk-container-pad);
}
.bk-container--wide {
  width: 100%;
  max-width: var(--bk-container-wide);
  margin-inline: auto;
  padding-inline: var(--bk-container-pad);
}

.bk-section { padding-block: var(--bk-space-10); }
.bk-section--tight { padding-block: var(--bk-space-8); }
.bk-section__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--bk-space-4); margin-bottom: var(--bk-space-6);
}
.bk-section__title { font-size: var(--bk-fs-h2); font-weight: var(--bk-fw-bold); letter-spacing: -0.01em; }
.bk-section__link { color: var(--bk-primary); font-weight: var(--bk-fw-semibold); font-size: var(--bk-fs-sm); }
.bk-section__link:hover { text-decoration: underline; }

@media (max-width: 768px) {
  /* --bk-space-7 is not a defined token (scale skips 7); using it left mobile
     sections with ~0 vertical padding (item 2). Use the real 32px step. */
  .bk-section { padding-block: var(--bk-space-8); }
  .bk-section__title { font-size: var(--bk-fs-h3); }
}

/* ---- Buttons ---- */
.bk-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--bk-space-2);
  font-weight: var(--bk-fw-semibold); font-size: var(--bk-fs-sm);
  padding: 12px 22px; min-height: 44px;
  border-radius: var(--bk-radius-btn);
  transition: background var(--bk-dur-fast) var(--bk-ease),
              color var(--bk-dur-fast) var(--bk-ease),
              box-shadow var(--bk-dur-fast) var(--bk-ease),
              transform var(--bk-dur-fast) var(--bk-ease);
  white-space: nowrap; user-select: none;
}
.bk-btn:active { transform: translateY(1px); }
.bk-btn[disabled], .bk-btn.is-disabled { opacity: 0.45; pointer-events: none; }

.bk-btn--dark { background: var(--bk-ink); color: var(--bk-on-ink); }
.bk-btn--dark:hover { background: var(--bk-ink-hover); }
.bk-btn--primary { background: var(--bk-primary); color: var(--bk-on-primary); }
.bk-btn--primary:hover { background: var(--bk-primary-hover); box-shadow: var(--bk-shadow-md); }
.bk-btn--bordered { background: var(--bk-bg); color: var(--bk-text); box-shadow: inset 0 0 0 1px var(--bk-border-strong); }
.bk-btn--bordered:hover { box-shadow: inset 0 0 0 1px var(--bk-ink); background: var(--bk-hover); }
.bk-btn--ghost { background: transparent; color: var(--bk-text); }
.bk-btn--ghost:hover { background: var(--bk-hover); }
.bk-btn--soft { background: var(--bk-primary-tint); color: var(--bk-primary-700); }
.bk-btn--soft:hover { background: var(--bk-primary-soft); }
.bk-btn--block { width: 100%; }
.bk-btn--lg { min-height: 52px; padding: 14px 28px; font-size: var(--bk-fs-body); }
.bk-btn--sm { min-height: 36px; padding: 8px 16px; font-size: var(--bk-fs-sm); }
.bk-btn--icon { padding: 0; width: 44px; min-height: 44px; border-radius: var(--bk-radius-circle); }

/* ---- Icon button (round, e.g. carousel arrows, share/heart) ---- */
.bk-iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: var(--bk-radius-circle);
  background: var(--bk-bg); color: var(--bk-text);
  box-shadow: inset 0 0 0 1px var(--bk-border), var(--bk-shadow-xs);
  transition: box-shadow var(--bk-dur-fast) var(--bk-ease), background var(--bk-dur-fast) var(--bk-ease), transform var(--bk-dur-fast) var(--bk-ease);
}
.bk-iconbtn:hover { box-shadow: inset 0 0 0 1px var(--bk-ink); transform: scale(1.05); }
.bk-iconbtn[disabled] { opacity: 0.4; pointer-events: none; }

/* ---- Badge / pill ---- */
.bk-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--bk-fs-xs); font-weight: var(--bk-fw-semibold);
  padding: 4px 10px; border-radius: var(--bk-radius-pill);
  background: var(--bk-surface-2); color: var(--bk-text);
}
.bk-badge--brand { background: var(--bk-primary-tint); color: var(--bk-primary-700); }
.bk-badge--success { background: var(--bk-success-tint); color: var(--bk-success); }
.bk-badge--warning { background: var(--bk-warning-tint); color: #9a6a00; }
.bk-badge--solid { background: var(--bk-ink); color: var(--bk-on-ink); }

/* ---- Rating stars (inline) ---- */
.bk-stars { display: inline-flex; align-items: center; gap: 2px; color: var(--bk-star); font-size: var(--bk-fs-sm); }
.bk-rating { display: inline-flex; align-items: center; gap: 6px; font-size: var(--bk-fs-sm); }
.bk-rating__score { font-weight: var(--bk-fw-bold); }
.bk-rating__count { color: var(--bk-text-muted); }

/* ---- Chip / category pill ---- */
.bk-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 16px; border-radius: var(--bk-radius-pill);
  font-size: var(--bk-fs-sm); font-weight: var(--bk-fw-medium);
  background: var(--bk-bg); color: var(--bk-text);
  box-shadow: inset 0 0 0 1px var(--bk-border);
  transition: all var(--bk-dur-fast) var(--bk-ease);
  white-space: nowrap;
}
.bk-chip:hover { box-shadow: inset 0 0 0 1px var(--bk-ink); }
.bk-chip.is-active, .bk-chip[aria-selected="true"] {
  background: var(--bk-ink); color: var(--bk-on-ink); box-shadow: none;
}

/* ---- Card ---- */
.bk-card {
  background: var(--bk-bg); border-radius: var(--bk-radius-card);
  box-shadow: var(--bk-shadow-sm); overflow: hidden;
}

/* ---- Form controls ---- */
.bk-field { display: flex; flex-direction: column; gap: 6px; }
.bk-label { font-size: var(--bk-fs-sm); font-weight: var(--bk-fw-medium); color: var(--bk-text); }
.bk-input, .bk-textarea, .bk-select {
  width: 100%; padding: 12px 14px; min-height: 48px;
  border-radius: var(--bk-radius-input);
  background: var(--bk-bg); color: var(--bk-text);
  box-shadow: inset 0 0 0 1px var(--bk-border);
  transition: box-shadow var(--bk-dur-fast) var(--bk-ease);
}
.bk-input::placeholder, .bk-textarea::placeholder { color: var(--bk-text-faint); }
.bk-input:focus, .bk-textarea:focus, .bk-select:focus {
  outline: none; box-shadow: inset 0 0 0 1.5px var(--bk-primary), var(--bk-ring);
}
.bk-textarea { min-height: 110px; resize: vertical; line-height: var(--bk-lh-normal); }

/* ---- Divider ---- */
.bk-divider { height: 1px; background: var(--bk-border); border: 0; margin: 0; }

/* ---- Skeleton / shimmer ---- */
.bk-skeleton {
  background: linear-gradient(90deg, var(--bk-surface-2) 25%, var(--bk-hover) 37%, var(--bk-surface-2) 63%);
  background-size: 400% 100%; animation: bk-shimmer 1.4s ease infinite; border-radius: var(--bk-radius-sm);
}
@keyframes bk-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

/* ---- Utilities ---- */
.bk-visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.bk-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bk-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.bk-no-scrollbar { scrollbar-width: none; -ms-overflow-style: none; }
.bk-no-scrollbar::-webkit-scrollbar { display: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ---- Ad slots (admin → بنرها و تبلیغات) ---- */
.bk-adslot { margin-block: var(--bk-space-6); }
.bk-adslot--global_footer { margin-block: 0 var(--bk-space-6); }
.bk-ad { position: relative; display: block; border-radius: var(--bk-radius-card); overflow: hidden; box-shadow: var(--bk-shadow-sm); }
.bk-ad + .bk-ad { margin-top: var(--bk-space-4); }
.bk-ad__img { width: 100%; height: auto; display: block; object-fit: cover; }
.bk-ad__badge { position: absolute; top: 10px; inset-inline-start: 10px; background: var(--bk-primary); color: #fff; font-size: var(--bk-fs-xs); font-weight: var(--bk-fw-bold); padding: 3px 10px; border-radius: var(--bk-radius-pill); }
.bk-ad__img--mobile { display: none; }
@media (max-width: 600px) {
  .bk-ad__img--desktop { display: none; }
  .bk-ad__img--mobile { display: block; }
}

/* ---- Map routing buttons ----
   Used by the salon page and the contact page. They used to live in
   salon.css, which the contact page never loads, so the buttons rendered
   there as bare unstyled links. */
/* Two routing buttons under the map: نشان on the right, گوگل on the left.
   The row needs its own `direction: rtl`. It sits inside .bk-map, which rtl.css
   deliberately flips to LTR so the Leaflet embed behaves — but that leaked into
   this grid too, so the columns flowed left-to-right and the two buttons came
   out in the reverse of the order documented here. */
.bk-map-actions { direction: rtl; display: grid; gap: var(--bk-space-2); margin-top: var(--bk-space-3); }
.bk-map-actions--split { grid-template-columns: 1fr 1fr; }
.bk-map-btn {
    /* The page is RTL, so `row` puts the first child - the icon - on the right
       and the label follows to its left, both reading right-to-left. The button
       was inheriting a left-aligned flow, which pushed icon and text to the
       left edge of their own box. */
    display: flex; flex-direction: row; align-items: center; gap: 10px;
    padding: var(--bk-space-3) var(--bk-space-4);
    border-radius: var(--bk-radius-card); background: var(--bk-bg);
    box-shadow: inset 0 0 0 1px var(--bk-border);
    transition: box-shadow var(--bk-dur-fast) var(--bk-ease);
    direction: rtl; text-align: right;
}
.bk-map-btn:hover { box-shadow: inset 0 0 0 1px var(--bk-ink), var(--bk-shadow-sm); }
.bk-map-btn__icon {
    width: 38px; height: 38px; flex: 0 0 38px; border-radius: var(--bk-radius-circle);
    background: var(--bk-primary-tint); color: var(--bk-primary-600);
    display: flex; align-items: center; justify-content: center;
}
.bk-map-btn--google .bk-map-btn__icon { background: rgba(66,133,244,.12); color: #1a73e8; }
.bk-map-btn__body { flex: 1; display: flex; flex-direction: column; align-items: flex-start; text-align: right; min-width: 0; }
.bk-map-btn__body strong { font-size: var(--bk-fs-sm); }
.bk-map-btn__body small { color: var(--bk-text-muted); font-size: var(--bk-fs-xs); }
/* The two direction buttons used to stack on a phone, which pushed the rest of
   the page down for no good reason — they are short labels and fit side by side
   once the icon and padding are trimmed. */
@media (max-width: 420px) {
    .bk-map-actions { gap: 8px; }
    .bk-map-actions--split { grid-template-columns: 1fr 1fr; }
    .bk-map-btn { padding: 10px; gap: 8px; }
    .bk-map-btn__icon { width: 32px; height: 32px; flex: 0 0 32px; font-size: 13px; }
    .bk-map-btn__body strong { font-size: 13px; line-height: 1.35; }
    .bk-map-btn__body small { font-size: 11px; line-height: 1.35; }
    /* Never let a label wrap the button into two heights. */
    .bk-map-btn__body strong,
    .bk-map-btn__body small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
}

/* Very narrow phones can't fit the icon as well; drop it and keep both
   buttons on the row rather than stacking them. */
@media (max-width: 340px) {
    .bk-map-btn__icon { display: none; }
    .bk-map-btn { justify-content: center; text-align: center; }
    .bk-map-btn__body { align-items: center; text-align: center; }
}

/* ---- Simple captcha ----
   Shared by the auth screens, the contact form and blog comments. It
   lived in auth.css, which only the auth and contact pages load, so the
   widget rendered unstyled anywhere else. */
.mp-captcha { display: flex; flex-direction: column; gap: var(--bk-space-3); padding: var(--bk-space-4); margin: var(--bk-space-4) 0; border-radius: var(--bk-radius-card); background: var(--bk-surface); border: 1px solid var(--bk-border); }
.mp-captcha__hp { position: absolute !important; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.mp-captcha__head { display: flex; align-items: center; gap: 10px; }
.mp-captcha__badge { width: 36px; height: 36px; border-radius: var(--bk-radius-input); background: var(--bk-primary-tint); color: var(--bk-primary-600); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.mp-captcha__badge svg { width: 20px; height: 20px; }
.mp-captcha__titles { display: flex; flex-direction: column; gap: 1px; }
.mp-captcha__label { font-size: var(--bk-fs-sm); font-weight: var(--bk-fw-semibold); }
.mp-captcha__hint { font-size: var(--bk-fs-xs); color: var(--bk-text-muted); }
.mp-captcha, .mp-captcha *, .mp-captcha *::before, .mp-captcha *::after { box-sizing: border-box; }
.mp-captcha__row { display: flex; flex-wrap: wrap; gap: var(--bk-space-3); align-items: stretch; }
.mp-captcha__challenge { flex: 1 1 150px; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 14px; border-radius: var(--bk-radius-input); background: var(--bk-bg); box-shadow: inset 0 0 0 1px var(--bk-border); }
.mp-captcha__equation { font-family: 'Inter', var(--bk-font); font-weight: var(--bk-fw-bold); font-size: var(--bk-fs-lg); letter-spacing: 0.05em; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-captcha__refresh { flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; color: var(--bk-text-muted); display: inline-flex; align-items: center; justify-content: center; transition: all var(--bk-dur-fast) var(--bk-ease); }
.mp-captcha__refresh:hover { background: var(--bk-hover); color: var(--bk-primary); transform: rotate(180deg); }
.mp-captcha__field { flex: 1 1 120px; min-width: 96px; }
.mp-captcha__input { width: 100%; max-width: 100%; min-height: 52px; text-align: center; border: none; border-radius: var(--bk-radius-input); background: var(--bk-bg); box-shadow: inset 0 0 0 1px var(--bk-border); font-size: var(--bk-fs-lg); font-weight: var(--bk-fw-bold); }
.mp-captcha__input:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--bk-primary), var(--bk-ring); }
.mp-captcha.is-invalid { border-color: var(--bk-error); }
.mp-captcha__error { color: var(--bk-error); font-size: var(--bk-fs-xs); }