/* =============================================================
   CONTENT — services & blog pages
   ============================================================= */

/* Hero — brand gradient that runs UP behind the transparent header (same look
   as the home/businesses pages). Colour follows --bk-primary. */
.bk-content-hero {
  margin-top: calc(-1 * var(--bk-header-h));
  padding-block: calc(var(--bk-header-h) + var(--bk-space-12)) var(--bk-space-12);
  text-align: center; position: relative;
  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-content-hero__title { font-size: var(--bk-fs-h1); font-weight: var(--bk-fw-extrabold); letter-spacing: -0.02em; margin-top: var(--bk-space-4); }
.bk-content-hero__sub { color: var(--bk-text-muted); font-size: var(--bk-fs-lg); margin-top: var(--bk-space-3); max-width: 620px; margin-inline: auto; }

/* Services grid */
.bk-services__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--bk-space-4); }
.bk-service-card { display: flex; flex-direction: column; gap: var(--bk-space-2); padding: var(--bk-space-6); border-radius: var(--bk-radius-card); box-shadow: inset 0 0 0 1px var(--bk-border); transition: all var(--bk-dur-fast) var(--bk-ease); }
.bk-service-card:hover { box-shadow: inset 0 0 0 1.5px var(--bk-primary), var(--bk-shadow-md); transform: translateY(-3px); }
.bk-service-card__icon { width: 56px; height: 56px; 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; font-size: 22px; margin-bottom: var(--bk-space-2); }
.bk-service-card__title { font-weight: var(--bk-fw-bold); font-size: var(--bk-fs-lg); }
.bk-service-card__desc { color: var(--bk-text-muted); font-size: var(--bk-fs-sm); }
.bk-service-card__cta { color: var(--bk-primary); font-weight: var(--bk-fw-semibold); font-size: var(--bk-fs-sm); margin-top: auto; display: inline-flex; align-items: center; gap: 6px; }

/* 3 steps */
.bk-steps3 { background: var(--bk-surface); }
.bk-steps3__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--bk-space-6); }
.bk-steps3__item { position: relative; background: var(--bk-bg); border-radius: var(--bk-radius-card); padding: var(--bk-space-6); box-shadow: var(--bk-shadow-sm); }
.bk-steps3__num { position: absolute; top: var(--bk-space-4); inset-inline-end: var(--bk-space-4); width: 30px; height: 30px; border-radius: 50%; background: var(--bk-surface-2); color: var(--bk-text-muted); display: inline-flex; align-items: center; justify-content: center; font-weight: var(--bk-fw-bold); font-size: var(--bk-fs-sm); }
.bk-steps3__icon { width: 52px; height: 52px; 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; font-size: 20px; margin-bottom: var(--bk-space-4); }
.bk-steps3__photo { width: 52px; height: 52px; border-radius: var(--bk-radius-input); overflow: hidden; margin-bottom: var(--bk-space-4); background: var(--bk-surface-2); }
.bk-steps3__photo img { width: 100%; height: 100%; object-fit: cover; }
/* No image/icon (item 13) — the number badge moves from its default corner
   (inset-inline-end, i.e. the left in RTL) to the opposite side, since
   there's no visual on that side to balance against anymore. */
.bk-steps3__item--no-visual .bk-steps3__num { inset-inline-end: auto; inset-inline-start: var(--bk-space-4); }
/* The number badge spans ~16px-46px from the box's top edge; push the title
   down clear of it since there's no icon/image row to separate them anymore. */
.bk-steps3__item--no-visual { padding-top: 54px; }
.bk-steps3__title { font-weight: var(--bk-fw-bold); margin-bottom: var(--bk-space-2); }
.bk-steps3__desc { color: var(--bk-text-muted); font-size: var(--bk-fs-sm); }
@media (max-width: 768px) { .bk-steps3__grid { grid-template-columns: 1fr; } }

/* CTA */
/* Polished Fresha-style CTA band — soft brand-tinted dark gradient, generous
   rounding and padding, prominent buttons (item 4). */
.bk-content-cta {
  position: relative; overflow: hidden; text-align: center;
  background:
    radial-gradient(120% 140% at 85% -20%, color-mix(in srgb, var(--cta-primary, var(--bk-primary, #5b3df5)) 80%, transparent), transparent 60%),
    radial-gradient(110% 130% at 5% 120%, color-mix(in srgb, var(--cta-primary, var(--bk-primary, #5b3df5)) 65%, transparent), transparent 60%),
    var(--cta-ink, var(--bk-ink, #15131f));
  color: var(--bk-on-ink, #fff);
  border-radius: clamp(20px, 3vw, 32px);
  padding: clamp(2.75rem, 6vw, 4.75rem) clamp(1.25rem, 5vw, 3rem);
}
.bk-content-cta__title { font-size: clamp(1.6rem, 3.2vw, 2.4rem); font-weight: var(--bk-fw-extrabold, 800); letter-spacing: -0.02em; line-height: 1.25; }
.bk-content-cta__sub { color: rgba(255,255,255,0.78); margin-top: var(--bk-space-4); max-width: 560px; margin-inline: auto; font-size: var(--bk-fs-lg); line-height: 1.7; }
.bk-content-cta__actions { display: flex; gap: var(--bk-space-3); justify-content: center; flex-wrap: wrap; margin-top: var(--bk-space-7, 28px); }
.bk-content-cta .bk-btn { min-height: 54px; padding-inline: 30px; border-radius: var(--bk-radius-pill, 999px); font-size: var(--bk-fs-md, 1rem); }
.bk-content-cta .bk-btn--dark { background: #fff; color: var(--bk-ink, #15131f); }
.bk-content-cta .bk-btn--dark:hover { background: rgba(255,255,255,0.88); }
.bk-content-cta .bk-btn--bordered { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.45); }
.bk-content-cta .bk-btn--bordered:hover { box-shadow: inset 0 0 0 1.5px #fff; background: rgba(255,255,255,0.1); }

/* Blog cats chips row */
.bk-blogcats { padding-block: var(--bk-space-5) 0; display: flex; gap: 8px; }
.bk-blogcats__count { background: var(--bk-surface-2); border-radius: var(--bk-radius-pill); font-size: var(--bk-fs-xs); padding: 1px 7px; }
.bk-chip.is-active .bk-blogcats__count { background: rgba(255,255,255,0.2); }

/* Blog grid + card */
.bk-bloggrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--bk-space-6); }
.bk-blogcard { border-radius: var(--bk-radius-card); overflow: hidden; box-shadow: inset 0 0 0 1px var(--bk-border); background: var(--bk-bg); display: flex; flex-direction: column; transition: box-shadow var(--bk-dur-fast) var(--bk-ease), transform var(--bk-dur-fast) var(--bk-ease); }
.bk-blogcard:hover { box-shadow: var(--bk-shadow-lg); transform: translateY(-3px); }
.bk-blogcard__media { position: relative; aspect-ratio: 16/9; background: var(--bk-surface-2); display: block; overflow: hidden; }
.bk-blogcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--bk-dur-slow) var(--bk-ease); }
.bk-blogcard:hover .bk-blogcard__media img { transform: scale(1.05); }
.bk-blogcard__cat { position: absolute; top: 10px; inset-inline-start: 10px; background: var(--bk-bg); border-radius: var(--bk-radius-pill); padding: 4px 12px; font-size: var(--bk-fs-xs); font-weight: var(--bk-fw-semibold); box-shadow: var(--bk-shadow-sm); }
.bk-blogcard__body { padding: var(--bk-space-5); display: flex; flex-direction: column; gap: var(--bk-space-2); flex: 1; }
.bk-blogcard__date { color: var(--bk-text-faint); font-size: var(--bk-fs-xs); }
.bk-blogcard__title { font-size: var(--bk-fs-h4); font-weight: var(--bk-fw-bold); line-height: var(--bk-lh-snug); }
.bk-blogcard__title a:hover { color: var(--bk-primary); }
.bk-blogcard__excerpt { color: var(--bk-text-muted); font-size: var(--bk-fs-sm); }
.bk-blogcard__more { color: var(--bk-primary); font-weight: var(--bk-fw-semibold); font-size: var(--bk-fs-sm); display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: var(--bk-space-2); }

/* Blog detail */
.bk-blogdetail { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--bk-space-8); align-items: start; padding-top: var(--bk-space-6); }
.bk-article { border-radius: var(--bk-radius-lg); overflow: hidden; box-shadow: inset 0 0 0 1px var(--bk-border); margin-top: var(--bk-space-4); }
.bk-article__media { aspect-ratio: 16/8; background: var(--bk-surface-2); }
.bk-article__media img { width: 100%; height: 100%; object-fit: cover; }
.bk-article__body { padding: var(--bk-space-8); }
.bk-article__meta { display: flex; gap: var(--bk-space-4); color: var(--bk-text-muted); font-size: var(--bk-fs-sm); margin-bottom: var(--bk-space-4); flex-wrap: wrap; }
.bk-article__meta a:hover { color: var(--bk-primary); }
/* Negative tracking pulls Persian letters into each other and breaks the way
   they join, which is what made long article titles look mangled. Persian also
   has no inter-word justification worth the ragged rivers it produces, so the
   body is set solid from the start edge. */
.bk-article__title {
    font-size: var(--bk-fs-h1); font-weight: var(--bk-fw-extrabold);
    letter-spacing: normal; line-height: 1.6; margin-bottom: var(--bk-space-5);
    overflow-wrap: anywhere;
}
.bk-article__content { color: var(--bk-text); line-height: 2; text-align: start; overflow-wrap: anywhere; }
.bk-article__content p { margin-bottom: var(--bk-space-4); }

/* ── Everything the editor can produce ─────────────────────────────────────
   These elements reached the page but had no styling, so they looked broken:
   <hr> was a hairline nobody could see, tables had no borders, <u> lost its
   underline to the CSS reset and images had no width limit.               */
.bk-article__content h1,
.bk-article__content h2,
.bk-article__content h3,
.bk-article__content h4,
.bk-article__content h5,
.bk-article__content h6 {
    font-weight: var(--bk-fw-bold); line-height: 1.7; letter-spacing: normal;
    margin-block: var(--bk-space-5) var(--bk-space-3);
}
.bk-article__content h1 { font-size: 1.75rem; }
.bk-article__content h2 { font-size: 1.5rem; }
.bk-article__content h3 { font-size: 1.28rem; }
.bk-article__content h4 { font-size: 1.12rem; }
.bk-article__content h5,
.bk-article__content h6 { font-size: 1rem; }

.bk-article__content u { text-decoration: underline; text-underline-offset: 4px; }
.bk-article__content s,
.bk-article__content del,
.bk-article__content strike { text-decoration: line-through; }
.bk-article__content mark { background: #fef9c3; padding: 0 3px; border-radius: 3px; }

.bk-article__content hr {
    border: 0; height: 1px; background: var(--bk-border);
    margin-block: var(--bk-space-6);
}

.bk-article__content ul,
.bk-article__content ol { margin: 0 0 var(--bk-space-4); padding-inline-start: 1.6em; }
.bk-article__content ul { list-style: disc; }
.bk-article__content ol { list-style: decimal; }
.bk-article__content li { margin-bottom: 6px; }

.bk-article__content blockquote {
    margin: var(--bk-space-4) 0; padding: var(--bk-space-3) var(--bk-space-4);
    border-inline-start: 3px solid var(--bk-primary); background: var(--bk-primary-tint);
    border-radius: 0 var(--bk-radius-card) var(--bk-radius-card) 0;
}
.bk-article__content pre {
    background: #15131f; color: #e8e6f3; padding: var(--bk-space-4);
    border-radius: var(--bk-radius-card); overflow-x: auto; direction: ltr; text-align: left;
}
.bk-article__content code { font-family: monospace; direction: ltr; unicode-bidi: embed; }

/* Tables: a border model, and horizontal scrolling instead of a burst layout
   when the article is read on a phone. */
.bk-article__content table {
    width: 100%; border-collapse: collapse; margin-block: var(--bk-space-4);
    display: block; overflow-x: auto; white-space: nowrap;
}
.bk-article__content table th,
.bk-article__content table td {
    border: 1px solid var(--bk-border); padding: 9px 12px; text-align: start; vertical-align: top;
}
.bk-article__content table th { background: var(--bk-primary-tint); font-weight: var(--bk-fw-bold); }
@media (min-width: 640px) {
    .bk-article__content table { display: table; white-space: normal; }
}

/* Images and their captions. */
.bk-article__content img {
    max-width: 100%; height: auto; border-radius: var(--bk-radius-card);
    margin-block: var(--bk-space-4);
}
.bk-article__content figure { margin: var(--bk-space-4) 0; max-width: 100%; }
.bk-article__content figure img { margin-block: 0; }
.bk-article__content figcaption {
    margin-top: 8px; font-size: var(--bk-fs-sm); color: var(--bk-text-muted); text-align: center;
}
.bk-article__content .image-style-side { float: inline-end; max-width: 50%; margin-inline-start: var(--bk-space-4); }
.bk-article__content .image-style-align-left { float: left; max-width: 50%; margin-inline-end: var(--bk-space-4); }
.bk-article__content .image-style-align-right { float: right; max-width: 50%; margin-inline-start: var(--bk-space-4); }
.bk-article__content .image-style-align-center { margin-inline: auto; }

/* CKEditor conventions (image sizing, alignment, lists, markers) come from
   ck-content.css, generated from the editor bundle itself — see
   scripts/build-ck-content-css.js. Only theme flavour lives here. */
.bk-article__content::after { content: ""; display: block; clear: both; }

/* Font sizes saved before the editor switched to inline values: CKEditor's
   named sizes are class names that only existed inside the editor's own
   stylesheet, so older posts kept their markup but showed no size change. */
.bk-article__content .text-tiny  { font-size: .7em; }
.bk-article__content .text-small { font-size: .85em; }
.bk-article__content .text-big   { font-size: 1.4em; }
.bk-article__content .text-huge  { font-size: 1.8em; }
.bk-article__tags { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: var(--bk-space-6); padding-top: var(--bk-space-5); border-top: 1px solid var(--bk-border); }
.bk-article__tags-label { color: var(--bk-text-muted); font-size: var(--bk-fs-sm); }

/* Blog sidebar */
.bk-blogside { position: sticky; top: calc(var(--bk-header-h) + var(--bk-space-4)); display: flex; flex-direction: column; gap: var(--bk-space-5); }
.bk-blogside__widget { border: 1px solid var(--bk-border); border-radius: var(--bk-radius-card); padding: var(--bk-space-5); }
.bk-blogside__title { font-weight: var(--bk-fw-bold); margin-bottom: var(--bk-space-4); }
.bk-blogside__cats { display: flex; flex-direction: column; }
.bk-blogside__cats a { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; border-radius: var(--bk-radius-input); color: var(--bk-text-muted); font-size: var(--bk-fs-sm); }
.bk-blogside__cats a:hover { background: var(--bk-hover); color: var(--bk-text); }
.bk-blogside__cats a.is-active { background: var(--bk-primary-tint); color: var(--bk-primary-700); font-weight: var(--bk-fw-semibold); }
.bk-blogside__cats a span { font-size: var(--bk-fs-xs); background: var(--bk-surface-2); border-radius: var(--bk-radius-pill); padding: 1px 8px; }
.bk-blogside__recent { display: flex; flex-direction: column; gap: var(--bk-space-4); }
.bk-blogside__item { display: flex; gap: 12px; }
.bk-blogside__thumb { width: 72px; height: 56px; border-radius: var(--bk-radius-sm); overflow: hidden; flex: 0 0 auto; background: var(--bk-surface-2); }
.bk-blogside__thumb img { width: 100%; height: 100%; object-fit: cover; }
.bk-blogside__date { color: var(--bk-text-faint); font-size: var(--bk-fs-xs); }
.bk-blogside__itemtitle { font-size: var(--bk-fs-sm); font-weight: var(--bk-fw-semibold); line-height: var(--bk-lh-snug); margin-top: 2px; }
.bk-blogside__itemtitle a:hover { color: var(--bk-primary); }

@media (max-width: 900px) {
  /* `1fr` resolves its min-width to `auto`, so a wide table or a long
     unbreakable string inside the article stretched the track and pushed the
     whole page sideways. minmax(0, 1fr) lets the column shrink and hands the
     scrolling to the offending element instead. */
  .bk-blogdetail { grid-template-columns: minmax(0, 1fr); }
  .bk-blogside { position: static; }
}

/* ---- Article content: keep editor HTML inside the page on small screens ----
   The body comes from CKEditor, so it can legitimately contain tables, code
   blocks, embeds and long URLs that are wider than a phone. Each of those
   scrolls within its own box; the page itself must never scroll sideways. */
.bk-blogdetail__main, .bk-article, .bk-article__body, .bk-article__content { min-width: 0; }

/* CKEditor ships `.table { display: table }`, and `overflow` has no effect on a
   display:table box — so the wide table was simply clipped rather than made
   scrollable. Turning the wrapper into a block is what lets it scroll. */
.bk-article__content figure.table,
.bk-article__content .table { display: block; max-width: 100%; overflow-x: auto;
  -webkit-overflow-scrolling: touch; }

.bk-article__content pre,
.bk-article__content .raw-html-embed { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* The inner table keeps its natural width so columns stay readable; the
   wrapper is what scrolls. */
.bk-article__content figure.table > table { min-width: max-content; }



/* Long Persian/Latin words, pasted URLs and inline code can't be broken by the
   normal wrapping rules, so allow a hard break rather than an overflow. */
.bk-article__content { overflow-wrap: anywhere; word-break: break-word; }

.bk-article__content img,
.bk-article__content video,
.bk-article__content iframe { max-width: 100%; height: auto; }

/* A resized image keeps its chosen width on desktop but is never allowed to
   exceed the column on a phone. */
.bk-article__content figure.image,
.bk-article__content figure.image_resized { max-width: 100%; }

@media (max-width: 640px) {
  .bk-article__content figure.image,
  .bk-article__content figure.image_resized { width: auto !important; }
  .bk-article__content iframe { width: 100%; }
}

/* ---- About stats ---- */
.bk-about-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--bk-space-4); }
.bk-about-stat { text-align: center; padding: var(--bk-space-6); border-radius: var(--bk-radius-lg); background: var(--bk-surface); }
.bk-about-stat strong { display: block; font-size: var(--bk-fs-h1); font-weight: var(--bk-fw-extrabold); background: var(--bk-gradient-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
.bk-about-stat span { color: var(--bk-text-muted); font-size: var(--bk-fs-sm); }
@media (max-width: 600px) { .bk-about-stats { grid-template-columns: 1fr; } }

/* ---- Contact ---- */
/* The page-top banner is the shared <x-bk-pagehero> component; the old
   .bk-ct-hero rules it replaced are gone. */

/* Shared card shell for every box on the page, so the form, the address, the
   map and the social row all read as one family instead of four. */
.bk-ct-card { background: var(--bk-bg); border: 1px solid var(--bk-border);
  border-radius: var(--bk-radius-card); box-shadow: var(--bk-shadow-sm); padding: var(--bk-space-6); }

/* contact channels — icon on the right, label + value beside it */
.bk-ct-channels { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--bk-space-4); margin-top: calc(-1 * var(--bk-space-10)); margin-bottom: var(--bk-space-8);
  position: relative; z-index: 2; }
.bk-ct-ch { display: flex; align-items: center; gap: var(--bk-space-4);
  background: var(--bk-bg); border: 1px solid var(--bk-border); border-radius: var(--bk-radius-card);
  padding: var(--bk-space-5); box-shadow: var(--bk-shadow-md); text-decoration: none; color: inherit;
  transition: transform var(--bk-dur-fast) var(--bk-ease), box-shadow var(--bk-dur-fast) var(--bk-ease),
              border-color var(--bk-dur-fast) var(--bk-ease); }
a.bk-ct-ch:hover { transform: translateY(-3px); box-shadow: var(--bk-shadow-lg); border-color: var(--bk-primary); }
.bk-ct-ch__icon { width: 48px; height: 48px; flex: 0 0 auto; border-radius: 14px; display: grid; place-items: center;
  font-size: 19px; background: var(--bk-primary-tint); color: var(--bk-primary); }
.bk-ct-ch__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.bk-ct-ch__label { font-size: var(--bk-fs-xs); color: var(--bk-text-muted); }
.bk-ct-ch__value { font-size: var(--bk-fs-body); font-weight: var(--bk-fw-bold); color: var(--bk-ink);
  overflow-wrap: anywhere; }
/* An address is long and case-sensitive; shrink it rather than wrap it. */
.bk-ct-ch__value--mail { font-size: var(--bk-fs-sm); font-weight: var(--bk-fw-semibold); }
.bk-ct-ch--static .bk-ct-ch__value { font-size: var(--bk-fs-sm); font-weight: var(--bk-fw-semibold); }
.bk-ct-ch__go { flex: 0 0 auto; color: var(--bk-text-faint); font-size: 13px;
  transition: transform var(--bk-dur-fast) var(--bk-ease), color var(--bk-dur-fast) var(--bk-ease); }
a.bk-ct-ch:hover .bk-ct-ch__go { color: var(--bk-primary); transform: translateX(-4px); }

/* form + location split */
.bk-ct-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: var(--bk-space-6); align-items: start; }

.bk-ct-card__head { display: flex; align-items: flex-start; gap: var(--bk-space-4); margin-bottom: var(--bk-space-6); }
.bk-ct-card__head-icon { width: 44px; height: 44px; flex: 0 0 auto; border-radius: 14px; display: grid; place-items: center;
  font-size: 17px; background: var(--bk-primary-tint); color: var(--bk-primary); }
.bk-ct-card__title { font-size: var(--bk-fs-h4); font-weight: var(--bk-fw-bold); margin: 0; }
.bk-ct-card__sub { font-size: var(--bk-fs-sm); color: var(--bk-text-muted); margin: 4px 0 0; line-height: var(--bk-lh-normal); }

.bk-ct-form__body { display: flex; flex-direction: column; gap: var(--bk-space-5); }
.bk-ct-form__row2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--bk-space-4); }
.bk-req { color: var(--bk-danger, #d92d20); font-weight: var(--bk-fw-bold); }

/* Icon parked inside the field; the input reserves room for it so the caret
   never lands under the glyph. */
.bk-ct-input { position: relative; display: block; }
.bk-ct-input > i { position: absolute; inset-inline-start: 14px; top: 50%; transform: translateY(-50%);
  color: var(--bk-text-faint); font-size: 14px; pointer-events: none; transition: color var(--bk-dur-fast) var(--bk-ease); }
.bk-ct-input > .bk-input { padding-inline-start: 40px; }
.bk-ct-input:focus-within > i { color: var(--bk-primary); }
.bk-ct-err { font-size: var(--bk-fs-xs); color: var(--bk-danger, #d92d20); }

.bk-ct-form__submit { align-self: flex-start; }
.bk-ct-form__note { display: flex; align-items: center; gap: 8px; margin: 0;
  font-size: var(--bk-fs-xs); color: var(--bk-text-muted); }

.bk-ct-flash { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: var(--bk-radius-md);
  font-size: var(--bk-fs-sm); line-height: var(--bk-lh-normal); margin-bottom: var(--bk-space-5); }
.bk-ct-flash.is-ok { background: rgba(16, 185, 129, 0.10); color: #087443; border: 1px solid rgba(16, 185, 129, 0.28); }
.bk-ct-flash.is-error { background: rgba(217, 45, 32, 0.08); color: #b42318; border: 1px solid rgba(217, 45, 32, 0.24); }

.bk-ct-aside { display: flex; flex-direction: column; gap: var(--bk-space-4); }
.bk-ct-addr { display: flex; align-items: flex-start; gap: var(--bk-space-4); }
.bk-ct-addr__icon { width: 44px; height: 44px; flex: 0 0 auto; border-radius: 14px; display: grid; place-items: center;
  background: var(--bk-primary-tint); color: var(--bk-primary); font-size: 17px; }
.bk-ct-addr__body { min-width: 0; }
.bk-ct-addr__title { font-size: var(--bk-fs-xs); color: var(--bk-text-muted); }
.bk-ct-addr__text { font-size: var(--bk-fs-sm); font-weight: var(--bk-fw-semibold); color: var(--bk-ink);
  margin: 4px 0 0; line-height: var(--bk-lh-normal); }

/* Hours card. It used to be a fourth tile in the channel strip, where three
   phones + an email already filled the row and it wrapped onto a line of its
   own. */
.bk-ct-hours { display: flex; align-items: flex-start; gap: var(--bk-space-4); }
.bk-ct-hours__icon { width: 44px; height: 44px; flex: 0 0 auto; border-radius: 14px; display: grid; place-items: center;
  background: var(--bk-primary-tint); color: var(--bk-primary); font-size: 17px; }
.bk-ct-hours__body { min-width: 0; }
.bk-ct-hours__title { font-size: var(--bk-fs-xs); color: var(--bk-text-muted); }
.bk-ct-hours__row { font-size: var(--bk-fs-sm); font-weight: var(--bk-fw-semibold); color: var(--bk-ink);
  margin: 4px 0 0; line-height: var(--bk-lh-normal); }

.bk-ct-mapcard { padding: var(--bk-space-3); }
.bk-ct-map { display: block; width: 100%; height: 300px; border: 0;
  border-radius: var(--bk-radius-lg); overflow: hidden; background: var(--bk-surface-2);
  /* Leaflet stacks its panes at z-index 400–700. Without a stacking context of
     its own the map painted straight over the sticky header (z-index 100) as
     soon as the page scrolled. `isolation` traps those panes inside the card. */
  position: relative; z-index: 0; isolation: isolate; }


@media (max-width: 920px) {
  .bk-ct-grid { grid-template-columns: 1fr; }
  .bk-ct-map { height: 260px; }
}
@media (max-width: 640px) {
  .bk-ct-channels { grid-template-columns: 1fr; margin-top: var(--bk-space-2); }
  .bk-ct-form__row2 { grid-template-columns: 1fr; }
  .bk-ct-card { padding: var(--bk-space-5); }
  .bk-ct-form__submit { align-self: stretch; justify-content: center; }
}

/* ---- Blog comments ---- */
.bk-comments { margin-top: var(--bk-space-10); padding-top: var(--bk-space-8); border-top: 1px solid var(--bk-border); }
.bk-comments__title { font-size: var(--bk-fs-h3); font-weight: var(--bk-fw-bold); display: flex; align-items: center; gap: var(--bk-space-3); }
.bk-comments__count { font-size: var(--bk-fs-sm); font-weight: var(--bk-fw-semibold); color: var(--bk-primary);
  background: var(--bk-primary-tint); border-radius: var(--bk-radius-pill); padding: 2px 12px; }
.bk-comments__empty { color: var(--bk-text-muted); margin-top: var(--bk-space-5); }

.bk-comments__flash { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; margin-top: var(--bk-space-5);
  border-radius: var(--bk-radius-md); font-size: var(--bk-fs-sm); line-height: var(--bk-lh-normal); }
.bk-comments__flash.is-ok { background: rgba(16,185,129,.10); color: #087443; border: 1px solid rgba(16,185,129,.28); }
.bk-comments__flash.is-error { background: rgba(217,45,32,.08); color: #b42318; border: 1px solid rgba(217,45,32,.24); }

.bk-comments__list { list-style: none; margin: var(--bk-space-6) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--bk-space-5); }
.bk-comment { display: flex; gap: var(--bk-space-4); }
.bk-comment__avatar { width: 42px; height: 42px; flex: 0 0 42px; border-radius: 50%; display: grid; place-items: center;
  background: var(--bk-primary-tint); color: var(--bk-primary); font-weight: var(--bk-fw-bold); font-size: var(--bk-fs-lg); }
.bk-comment__main { flex: 1; min-width: 0; }
.bk-comment__head { display: flex; align-items: center; flex-wrap: wrap; gap: var(--bk-space-2); }
.bk-comment__name { font-weight: var(--bk-fw-bold); }
.bk-comment__badge { font-size: var(--bk-fs-xs); font-weight: var(--bk-fw-semibold); color: var(--bk-primary);
  background: var(--bk-primary-tint); border-radius: var(--bk-radius-pill); padding: 1px 9px; }
.bk-comment__date { font-size: var(--bk-fs-xs); color: var(--bk-text-faint); }
.bk-comment__body { margin: 6px 0 0; line-height: var(--bk-lh-relaxed); white-space: pre-line; overflow-wrap: anywhere; }
.bk-comment__reply { margin-top: 6px; padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: var(--bk-fs-xs); color: var(--bk-text-muted); display: inline-flex; align-items: center; gap: 5px; }
.bk-comment__reply:hover { color: var(--bk-primary); }
.bk-comment__replies { list-style: none; margin: var(--bk-space-4) 0 0; padding: 0 var(--bk-space-5) 0 0;
  border-inline-start: 2px solid var(--bk-border); display: flex; flex-direction: column; gap: var(--bk-space-4); }
.bk-comment--reply .bk-comment__avatar { width: 34px; height: 34px; flex-basis: 34px; font-size: var(--bk-fs-body); }

.bk-comments__form { margin-top: var(--bk-space-8); padding: var(--bk-space-6); border-radius: var(--bk-radius-card);
  background: var(--bk-surface); border: 1px solid var(--bk-border); }
.bk-comments__form-title { font-size: var(--bk-fs-h4); font-weight: var(--bk-fw-bold); }
.bk-comments__note { display: flex; align-items: center; gap: 7px; margin: 6px 0 var(--bk-space-5);
  font-size: var(--bk-fs-xs); color: var(--bk-text-muted); }
.bk-comments__form form { display: flex; flex-direction: column; gap: var(--bk-space-4); }
.bk-comments__row2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--bk-space-4); }
/* `display` beats the hidden attribute's UA rule, so the banner has to opt out
   explicitly — otherwise it sits there reading «در پاسخ به   انصراف» with no
   name in it whenever nobody is replying. */
.bk-comments__replying[hidden] { display: none; }
.bk-comments__replying { display: flex; align-items: center; gap: 8px; font-size: var(--bk-fs-sm);
  padding: 9px 13px; border-radius: var(--bk-radius-md); background: var(--bk-primary-tint); color: var(--bk-primary-700, var(--bk-primary)); }
.bk-comments__replying button { border: 0; background: none; cursor: pointer; font: inherit;
  font-size: var(--bk-fs-xs); color: inherit; text-decoration: underline; margin-inline-start: auto; }

@media (max-width: 640px) {
  .bk-comments__row2 { grid-template-columns: 1fr; }
  .bk-comment__replies { padding-inline-end: var(--bk-space-4); }
}