/*
 * Widget styles for ordinary theme pages.
 *
 * platform.css is 101KB and describes the dashboards, the workbench, the provider
 * grid and the services page. None of that exists on the shop's own pages — but the
 * help launcher and the search panel do, and enqueueing the whole sheet for them cost
 * every visitor 101KB and about a second of render-blocking CSS on a page that used
 * roughly six kilobytes of it.
 *
 * So the surfaces that appear on *any* page live here, and platform.css stays for the
 * platform's own screens. Both are still shipped; a page that needs both loads both,
 * and the shared tokens below are duplicated deliberately so this file stands alone.
 */
:root{
  --szp-glass-tint-strong: rgba(255,255,255,.86);
  --szp-glass-hairline: rgba(13,35,55,.12);
  --szp-glass-blur-soft: saturate(150%) blur(12px);
  --szp-glass-top: inset 0 1px 0 rgba(255,255,255,.92);
  --szp-glass-shadow: 0 10px 26px rgba(13,35,55,.08);
  --szp-glass-shadow-lifted: 0 18px 38px rgba(13,35,55,.14);
  --szp-accent: #e8720c;
  --szp-v17-ink: #172334;
  --szp-v17-muted: #647286;
}

/* ---------------------------------------------------------------------------
   The assistant: launcher and panel.

   A sheet on a phone and a card on a desktop, from the same markup — the panel is
   bottom-anchored either way, which is where the launcher is and where a thumb is. It
   never covers the whole screen: somebody using it is usually reading the page behind
   it, and a support widget that hides the thing you are asking about is a support
   widget that generates more questions.
--------------------------------------------------------------------------- */
/*
 * The launcher, visible against anything.
 *
 * It was navy on a page whose footer is navy, so it vanished — and the theme's own link
 * colour was winning over its text, which is why the words read as dark blue on dark
 * blue. Two separate failures with the same symptom.
 *
 * Fixed by not depending on the page at all: the surface is the brand's orange, which
 * appears nowhere else at this size, and the ink is white and forced past the theme with
 * `!important` on both `color` and `-webkit-text-fill-color` — the second one matters,
 * because the theme paints some button text with a background-clip gradient and plain
 * `color` does not beat that.
 *
 * The glass is real rather than a flat fill: a translucent tint over a blur, a bright
 * specular rim on the top edge where the light lands, a weaker bounce off the bottom,
 * and a warm shadow so it reads as floating rather than pasted on.
 */
.szp-assist-launch{
  position:fixed;bottom:18px;z-index:2147482000;
  display:inline-flex;align-items:center;gap:9px;
  min-height:50px;padding:0 20px 0 15px;border:0;border-radius:999px;cursor:pointer;
  font:inherit;font-size:.88rem;font-weight:800;
  color:#fff!important;-webkit-text-fill-color:#fff!important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,0) 46%),
    linear-gradient(135deg,#f08a2c 0%,#e2700f 55%,#c85c06 100%);
  border:1px solid rgba(255,255,255,.34);
  -webkit-backdrop-filter:saturate(160%) blur(10px);backdrop-filter:saturate(160%) blur(10px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.62),
    inset 0 -1px 0 rgba(255,255,255,.18),
    0 10px 26px rgba(180,80,10,.40),
    0 2px 6px rgba(0,0,0,.14);
  transition:transform .16s ease,box-shadow .2s ease,filter .16s ease
}
.szp-assist-launch *{color:#fff!important;-webkit-text-fill-color:#fff!important}
.szp-assist-launch svg{stroke:#fff!important}
.szp-assist-bottom-start{inset-inline-start:18px}
.szp-assist-bottom-end{inset-inline-end:18px}
.szp-assist-launch:hover{
  transform:translateY(-2px);filter:brightness(1.04);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 16px 36px rgba(180,80,10,.48),0 3px 8px rgba(0,0,0,.16)
}
.szp-assist-launch:active{transform:translateY(1px)}
.szp-assist-launch:focus-visible{outline:3px solid #f4a25f;outline-offset:3px}
.szp-assist-ico{display:grid;place-items:center}

.szp-assist-panel{
  position:fixed;bottom:78px;z-index:9991;
  width:min(380px,calc(100vw - 24px));max-height:min(74vh,620px);
  display:flex;flex-direction:column;overflow:hidden;
  border-radius:20px;background:var(--szp-glass-tint-strong,rgba(255,255,255,.94));
  border:1px solid var(--szp-glass-hairline,rgba(13,35,55,.12));
  box-shadow:0 26px 60px rgba(13,35,55,.26),inset 0 1px 0 rgba(255,255,255,.9);
  -webkit-backdrop-filter:saturate(150%) blur(14px);backdrop-filter:saturate(150%) blur(14px);
  font-family:Vazirmatn,IRANSans,IRANYekan,Tahoma,sans-serif;direction:rtl;text-align:right;
  color:#172334
}
.szp-assist-bottom-start ~ .szp-assist-panel,.szp-assist-panel{inset-inline-start:18px}

.szp-assist-head{
  display:flex;align-items:center;gap:8px;padding:13px 14px;
  background:linear-gradient(135deg,#12314f,#0b1d31);color:#fff;flex:0 0 auto
}
.szp-assist-head b{flex:1;font-size:.95rem;line-height:1.5;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.szp-assist-head button{
  border:0;background:rgba(255,255,255,.16);color:#fff;cursor:pointer;font:inherit;
  width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font-size:1.1rem;line-height:1
}
.szp-assist-head button:hover{background:rgba(255,255,255,.28)}
.szp-assist-body{padding:13px;overflow-y:auto;overscroll-behavior:contain;flex:1 1 auto}

.szp-assist-greet{margin:0 0 10px;font-size:.9rem;font-weight:700}
.szp-assist-sec{margin:14px 0 7px;font-size:.76rem;font-weight:800;color:#647286}
.szp-assist-group{margin:11px 0 5px;font-size:.72rem;font-weight:800;color:#8b97a5}
.szp-assist-wait{margin:8px 0;font-size:.82rem;color:#647286}

.szp-assist-mine{display:grid;gap:7px}
.szp-assist-item{
  display:flex;gap:9px;align-items:center;padding:8px;border-radius:12px;text-decoration:none;color:inherit;
  background:rgba(255,255,255,.7);border:1px solid rgba(13,35,55,.09)
}
.szp-assist-item:hover{background:#fff;border-color:rgba(13,35,55,.18)}
.szp-assist-item img,.szp-assist-noimg{
  width:44px;height:44px;flex:0 0 auto;border-radius:9px;object-fit:cover;background:#eef2f5
}
.szp-assist-noimg{display:grid;place-items:center;color:#9aa6b2;font-size:1.1rem}
.szp-assist-item-text{display:grid;gap:1px;min-width:0}
.szp-assist-item-text b{font-size:.82rem;line-height:1.5;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.szp-assist-item-text small{font-size:.72rem;color:#647286}
.szp-assist-when{color:#8b97a5!important}

.szp-assist-q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:11px 12px;margin-bottom:6px;border-radius:12px;cursor:pointer;font:inherit;
  font-size:.85rem;font-weight:600;text-align:right;color:#172334;
  background:rgba(255,255,255,.72);border:1px solid rgba(13,35,55,.09)
}
.szp-assist-q:hover{background:#fff;border-color:#f0b478}
.szp-assist-q i{color:#e8720c;font-style:normal;font-size:1.1rem;transform:scaleX(-1)}

.szp-assist-answer p{margin:0 0 9px;font-size:.86rem;line-height:2}
.szp-assist-helpful{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin-top:14px;
  padding-top:12px;border-top:1px solid rgba(13,35,55,.1);font-size:.8rem;color:#647286}
.szp-assist-chip{
  border:1px solid rgba(13,35,55,.14);background:#fff;color:#172334;cursor:pointer;font:inherit;
  font-size:.78rem;font-weight:700;padding:7px 12px;border-radius:999px
}
.szp-assist-chip.is-no{border-color:#e0c9c9;color:#a3403f}
.szp-assist-chip:hover{border-color:#e8720c}

.szp-assist-foot{display:grid;gap:7px;margin-top:14px;padding-top:12px;border-top:1px solid rgba(13,35,55,.1)}
.szp-assist-cta{
  border:0;border-radius:12px;cursor:pointer;font:inherit;font-size:.83rem;font-weight:800;
  min-height:42px;color:#fff;background:linear-gradient(135deg,#ef8a2b,#d9660a)
}
.szp-assist-cta.is-quiet{background:#fff;color:#12314f;border:1px solid rgba(18,49,79,.28)}
.szp-assist-cta:hover{filter:brightness(1.05)}

.szp-assist-thread{display:grid;gap:8px;min-height:120px;max-height:44vh;overflow-y:auto;padding-inline-end:2px}
.szp-assist-bubble{
  max-width:86%;padding:9px 12px;border-radius:14px;font-size:.85rem;line-height:1.9;
  background:#fff;border:1px solid rgba(13,35,55,.1)
}
.szp-assist-bubble.is-you{margin-inline-start:auto;background:linear-gradient(135deg,#12314f,#0b1d31);color:#fff;border-color:transparent}
.szp-assist-bubble.is-wait{color:#647286;font-style:normal}
.szp-assist-ask{display:flex;gap:7px;margin-top:10px}
.szp-assist-ask input{
  flex:1;min-height:42px;padding:0 12px;border-radius:12px;font:inherit;font-size:.85rem;
  border:1px solid rgba(13,35,55,.16);background:#fff;color:#172334
}
.szp-assist-ask input:focus{outline:0;border-color:#e8720c;box-shadow:0 0 0 3px rgba(232,114,12,.16)}
.szp-assist-ask button{
  width:42px;height:42px;flex:0 0 auto;border:0;border-radius:12px;cursor:pointer;
  color:#fff;background:linear-gradient(135deg,#ef8a2b,#d9660a);font-size:1.1rem
}

@media (max-width:560px){
  .szp-assist-launch .szp-assist-label{display:none}
  .szp-assist-launch{padding:0;width:52px;height:52px;justify-content:center;bottom:74px}
  .szp-assist-panel{
    inset-inline:8px!important;bottom:8px;width:auto;max-height:82vh;border-radius:18px
  }
}
/* The phone bar owns the bottom edge on a dashboard; the launcher is not rendered there
   at all, but a theme page that grows one still must not have them overlapping. */
@media (max-width:860px){ body:has(.szp-mbar) .szp-assist-launch{bottom:78px} }

@media (prefers-reduced-transparency: reduce){
  .szp-assist-panel{background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none}
}
@media (prefers-reduced-motion: reduce){
  .szp-assist-launch{transition:none}
}


/* ---------------------------------------------------------------------------
   The banner strip. A rail, not a hero.

   Fixed card width with a ceiling, exactly like the promo row and the provider grid, so
   one banner and six banners look like the same component. Sideways scroll with snap and
   no autoplay: a strip that moves on its own steals clicks.
--------------------------------------------------------------------------- */
.szp-banner-section{padding-block:clamp(14px,2vw,26px)!important}
.szp-banner-head{margin-bottom:12px}
.szp-banner-head h2{font-size:clamp(1.05rem,1.6vw,1.3rem)}
.szp-banner-rail{
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(220px,320px);gap:12px;
  justify-content:start;
  overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
  padding-block:2px;scrollbar-width:none
}
.szp-banner-rail::-webkit-scrollbar{display:none}
.szp-banner-item{
  scroll-snap-align:start;display:block;border-radius:14px;overflow:hidden;
  border:1px solid var(--szp-glass-hairline,rgba(13,35,55,.12));
  box-shadow:var(--szp-glass-shadow,0 8px 20px rgba(13,35,55,.07));
  transition:transform .16s ease,box-shadow .2s ease
}
a.szp-banner-item:hover{transform:translateY(-2px);box-shadow:var(--szp-glass-shadow-lifted,0 16px 32px rgba(13,35,55,.13))}
a.szp-banner-item:focus-visible{outline:3px solid #f4a25f;outline-offset:3px}
/* A single ratio for every banner, so an owner who uploads one tall image does not
   change the height of the whole strip. */
.szp-banner-item img{display:block;width:100%;aspect-ratio:16/7;object-fit:cover}
@media (max-width:640px){
  .szp-banner-rail{grid-auto-columns:minmax(200px,264px)}
}

/* The project basket: an area list, a merged table, and the number that justifies it. */
.szp-basket{margin-top:16px}
.szp-add-area{margin-top:12px;width:100%}
.szp-basket-areas{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:7px}
.szp-basket-areas li{
  display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:11px;
  background:var(--szp-glass-tint-soft,rgba(255,255,255,.55));
  border:1px solid var(--szp-glass-hairline,rgba(13,35,55,.12))
}
.szp-basket-areas b{flex:1;font-size:.86rem}
.szp-basket-areas span{font-size:.82rem;font-weight:700}
.szp-basket-bad{flex:1;font-style:normal;font-size:.8rem;color:#a3403f}
.szp-basket-table{width:100%;border-collapse:collapse;font-size:.84rem}
.szp-basket-table th,.szp-basket-table td{padding:8px 6px;text-align:right;border-bottom:1px solid var(--szp-glass-hairline,rgba(13,35,55,.1))}
.szp-basket-table th{font-size:.76rem;color:var(--szp-v17-muted,#647286);font-weight:800}
.szp-basket-where{font-size:.76rem;color:var(--szp-v17-muted,#647286)}
.szp-basket-sum{display:grid;gap:8px;margin-top:14px}
.szp-basket-sum>div{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.szp-basket-sum b{font-size:1.05rem;font-weight:800}
.szp-basket-saving{padding:10px 12px;border-radius:12px;background:rgba(46,140,94,.1);border:1px solid rgba(46,140,94,.25)}
.szp-basket-saving b{color:#2e8c5e}
@media (max-width:560px){
  .szp-basket-where{display:none}
  .szp-basket-table th:nth-child(3),.szp-basket-table td:nth-child(3){display:none}
}


/* Server-answered suggestions: a picture, a name and a price, so a corrected spelling
   or an interpreted sentence is obviously a product rather than another guess. */
.szp-suggest-note{
  margin:0;padding:9px 12px;font-size:.78rem;line-height:1.8;
  color:var(--szp-v17-muted,#647286);border-bottom:1px solid var(--szp-glass-hairline,rgba(13,35,55,.1))
}
.szp-suggest-hit{
  display:flex;align-items:center;gap:10px;padding:9px 12px;text-decoration:none;color:inherit
}
.szp-suggest-hit:hover{background:rgba(228,122,44,.08)}
.szp-suggest-hit img,.szp-suggest-noimg{
  width:38px;height:38px;flex:0 0 auto;border-radius:8px;object-fit:cover;background:#eef2f5
}
.szp-suggest-noimg{display:grid;place-items:center;color:#9aa6b2}
.szp-suggest-hit b{flex:1;font-size:.85rem;font-weight:600;line-height:1.6}
.szp-suggest-hit small{font-size:.78rem;font-weight:800;color:var(--szp-accent-ink,#a85c20);white-space:nowrap}


/* The gate inside the assistant: two fields, one at a time, nothing else on screen. */
.szp-assist-hint{margin:0 0 12px;font-size:.8rem;line-height:1.9;color:var(--szp-v17-muted,#647286)}
.szp-assist-gate{display:grid;gap:9px}
.szp-assist-gate input{
  min-height:46px;padding:0 13px;border-radius:12px;font:inherit;font-size:1rem;font-weight:700;
  letter-spacing:.05em;text-align:center;
  border:1px solid rgba(13,35,55,.16);background:#fff;color:#172334
}
.szp-assist-gate input:focus{outline:0;border-color:var(--szp-accent,#e8720c);box-shadow:0 0 0 3px rgba(232,114,12,.16)}
.szp-assist-say{margin:10px 0 0;font-size:.8rem;line-height:1.8;color:var(--szp-v17-muted,#647286)}
.szp-assist-say.is-bad{color:#a3403f;font-weight:700}
.szp-assist-link{
  border:0;background:none;padding:0;cursor:pointer;font:inherit;font-size:.8rem;font-weight:800;
  color:var(--szp-accent,#e8720c);text-decoration:underline
}

/* ---------------------------------------------------------------------------
   The services page gets a ground, so the glass has something to be glass over.

   The cards were already reading the glass tokens — measured on the live page:
   background rgba(255,255,255,.86) with a 12px backdrop blur and the specular rim. It
   simply did not look like anything, and the reason is that the page behind them was a
   flat #f7f8f7. Glass is a relationship between a surface and what is behind it; over
   an even near-white there is nothing to refract and 86% white is indistinguishable
   from 100% white.

   So: a very quiet ambient ground — three wide, low-opacity washes in the brand's own
   orange and navy, fixed so they do not slide under the content while scrolling. Low
   enough that text contrast is untouched (the washes peak at 7% alpha over a near-white
   base, which keeps body copy far above WCAG AA), strong enough that a translucent card
   now visibly sits *on* something.
--------------------------------------------------------------------------- */
html body .szp-v17{
  background:
    radial-gradient(58rem 34rem at 88% -6%, rgba(232,122,44,.10), transparent 62%),
    radial-gradient(52rem 30rem at 6% 12%, rgba(28,74,120,.09), transparent 60%),
    radial-gradient(46rem 28rem at 50% 108%, rgba(232,122,44,.07), transparent 60%),
    linear-gradient(180deg,#fbfbfa 0%,#f4f6f8 55%,#fbfaf8 100%) !important;
  background-attachment: fixed !important;
}
/* Sections that used to paint their own flat fill would cover the ground; they become
   transparent and let it through, keeping their spacing and their borders. */
html body .szp-v17 .szp-provider-section,
html body .szp-v17 .szp-guide-section,
html body .szp-v17 .szp-faq-section,
html body .szp-v17 .szp-workflow-section{ background: transparent !important; }

/* Readability, stated rather than hoped for: every card that now sits on the ground
   keeps an explicit ink colour, so no inherited theme colour can leave grey-on-grey. */
html body .szp-v17 .szp-provider-card-v17,
html body .szp-v17 .szp-search-panel-v17,
html body .szp-v17 .szp-guide-card,
html body .szp-v17 .szp-faq-item,
html body .szp-v17 .szp-workflow-step{ color: var(--szp-v17-ink,#172334); }
html body .szp-v17 .szp-provider-card-v17 .szp-pcard-city,
html body .szp-v17 .szp-provider-card-v17 small{ color: var(--szp-v17-muted,#5a6875); }

@media (prefers-reduced-transparency: reduce){
  html body .szp-v17{ background:#f7f8f7 !important; }
}


/* ---------------------------------------------------------------------------
   The panel under the theme's own search fields.
   Anchored to the field's container, above the header's stacking context, and given a
   ceiling so a long list scrolls inside itself rather than running off the page.
--------------------------------------------------------------------------- */
.szp-smart-panel{
  /* `top` and the inline offset are written by the script from the field's own measured
     rectangle — see the note beside place() in szp-smartsearch.js. The declarations here
     are the starting point only. */
  position:absolute;inset-inline-start:0;top:calc(100% + 6px);z-index:2147483000;
  max-height:min(62vh,460px);overflow-y:auto;overscroll-behavior:contain;
  padding:6px;border-radius:16px;color:#172334;
  background:linear-gradient(180deg,rgba(255,255,255,.97),rgba(252,250,248,.93));
  border:1px solid rgba(13,35,55,.10);border-top-color:rgba(255,255,255,.9);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 2px 4px rgba(13,35,55,.06),0 20px 46px rgba(13,35,55,.18);
  -webkit-backdrop-filter:saturate(165%) blur(14px);backdrop-filter:saturate(165%) blur(14px);
  font-family:Vazirmatn,IRANSans,IRANYekan,Tahoma,sans-serif;direction:rtl;text-align:right
}
.szp-smart-head{padding:10px 12px 4px;font-size:.74rem;font-weight:800;color:#647286}
.szp-smart-chips{display:flex;flex-wrap:wrap;gap:6px;padding:6px 12px 12px}
/* The theme paints every <button> orange with white text, which turned these into six
   solid orange slabs. Every property that decides how a chip looks is therefore stated
   and forced, including the text fill — the theme uses background-clip on some buttons
   and plain `color` does not beat that. */
.szp-smart-chip{
  border:1px solid rgba(13,35,55,.14)!important;
  background:linear-gradient(180deg,#fff,#f4f7f9)!important;
  color:#172334!important;-webkit-text-fill-color:#172334!important;
  cursor:pointer;font:inherit!important;font-size:.79rem!important;font-weight:700!important;
  padding:7px 12px!important;border-radius:999px!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 1px 2px rgba(13,35,55,.05)!important;
  min-height:0!important;line-height:1.7!important;text-transform:none!important
}
.szp-smart-chip:hover{
  border-color:rgba(232,122,44,.5)!important;
  background:linear-gradient(180deg,#fff,#fff3e9)!important
}
.szp-smart-note,.szp-smart-wait{
  padding:10px 12px;font-size:.79rem;line-height:1.9;color:#647286;
  border-bottom:1px solid rgba(13,35,55,.08)
}
.szp-smart-wait{border-bottom:0}
.szp-smart-note a,.szp-smart-wait a{color:#c2640f;font-weight:700}
.szp-smart-hit{
  display:flex;align-items:center;gap:11px;padding:9px 10px;margin:4px 0;
  border-radius:12px;text-decoration:none;color:#172334;
  border:1px solid transparent;transition:background .14s ease,border-color .14s ease
}
.szp-smart-hit:hover{
  background:linear-gradient(180deg,#fff,rgba(255,247,240,.92));
  border-color:rgba(232,122,44,.26)
}
.szp-smart-hit img,.szp-smart-noimg{
  width:46px;height:46px;flex:0 0 auto;border-radius:10px;object-fit:cover;background:#eef2f5;
  border:1px solid rgba(13,35,55,.08);box-shadow:inset 0 1px 0 rgba(255,255,255,.7)
}
.szp-smart-noimg{display:grid;place-items:center;color:#9aa6b2}
.szp-smart-text{display:grid;gap:1px;min-width:0;flex:1}
.szp-smart-text b{font-size:.84rem;font-weight:600;line-height:1.6;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.szp-smart-text small{font-size:.78rem;font-weight:800;color:#a85c20}


/* Inside the theme's overlay the panel is not a floating layer: it is the content of a
   box the theme already draws, so it drops the shadow, the border and the positioning
   and simply fills the space. */
.szp-smart-panel.is-inline{
  position:static;width:auto;max-height:none;
  border:0;border-radius:0;box-shadow:none;background:transparent
}
.szp-smart-panel.is-inline .szp-smart-hit{border-radius:10px}
.szp-smart-panel.is-inline .szp-smart-hit:hover{background:rgba(232,122,44,.10)}

/* ---------------------------------------------------------------------------
   Forced against the theme.

   Kaveh paints every <button> orange with white text and gives inputs its own fill, so
   the assistant's message field rendered as a solid orange slab with orange placeholder
   text on it — unreadable, and it looked like a broken element rather than a text box.
   Everything that decides how these controls look is therefore stated explicitly and
   marked important, including `-webkit-text-fill-color`, because the theme paints some
   text with a clipped gradient and plain `color` loses to that.
--------------------------------------------------------------------------- */
html body .szp-assist-panel input[type="text"],
html body .szp-assist-panel input[type="tel"],
html body .szp-assist-panel input:not([type="checkbox"]):not([type="radio"]){
  background:#fff!important;
  color:#172334!important;-webkit-text-fill-color:#172334!important;
  border:1px solid rgba(13,35,55,.18)!important;
  border-radius:12px!important;
  box-shadow:inset 0 1px 2px rgba(13,35,55,.05)!important;
  font:inherit!important;font-size:.9rem!important;font-weight:500!important;
  text-align:right!important;min-height:44px!important;padding:0 13px!important
}
html body .szp-assist-panel input::placeholder{
  color:#8b97a5!important;-webkit-text-fill-color:#8b97a5!important;opacity:1!important
}
html body .szp-assist-panel input:focus{
  outline:0!important;border-color:var(--szp-accent,#e8720c)!important;
  box-shadow:0 0 0 3px rgba(232,114,12,.16)!important
}
/* The gate's code field is centred and wide-tracked; that survives the rule above. */
html body .szp-assist-gate input{text-align:center!important;letter-spacing:.06em!important;font-weight:700!important}

/* Buttons inside the panel: the theme's orange fill is right for the primary action and
   wrong for the quiet one, so both are stated rather than inherited. */
html body .szp-assist-panel button{
  font:inherit!important;text-transform:none!important;letter-spacing:0!important
}
html body .szp-assist-panel .szp-assist-cta{
  color:#fff!important;-webkit-text-fill-color:#fff!important;
  background:linear-gradient(135deg,#f08a2c,#d9660a)!important;border:0!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 6px 16px rgba(180,80,10,.28)!important
}
html body .szp-assist-panel .szp-assist-cta.is-quiet{
  color:#12314f!important;-webkit-text-fill-color:#12314f!important;
  background:#fff!important;border:1px solid rgba(18,49,79,.24)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 1px 2px rgba(13,35,55,.05)!important
}
html body .szp-assist-panel .szp-assist-q,
html body .szp-assist-panel .szp-assist-chip{
  color:#172334!important;-webkit-text-fill-color:#172334!important;
  background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(246,248,250,.72))!important
}
html body .szp-assist-panel .szp-assist-q:hover{
  background:#fff!important;border-color:rgba(232,122,44,.42)!important
}
html body .szp-assist-panel .szp-assist-ask button{
  color:#fff!important;-webkit-text-fill-color:#fff!important;
  background:linear-gradient(135deg,#f08a2c,#d9660a)!important
}

/* ---------------------------------------------------------------------------
   The banner carousel: one slide at a time, in the gap between the search panel and
   the provider doors. Fixed aspect ratio so a slow image cannot move the page.
--------------------------------------------------------------------------- */
.szp-banner-carousel{
  position:relative;margin:14px 0 4px;border-radius:16px;overflow:hidden;
  border:1px solid rgba(13,35,55,.10);border-top-color:rgba(255,255,255,.9);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 1px 2px rgba(13,35,55,.06),0 12px 28px rgba(13,35,55,.10);
  background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(250,248,246,.8))
}
.szp-banner-stage{position:relative;aspect-ratio:16/5;min-height:120px}
@media (max-width:640px){ .szp-banner-stage{aspect-ratio:16/7;min-height:110px} }
.szp-banner-slide{
  position:absolute;inset:0;display:block;text-decoration:none;
  opacity:0;visibility:hidden;transition:opacity .5s ease
}
.szp-banner-slide.is-on{opacity:1;visibility:visible}
.szp-banner-slide img{width:100%;height:100%;object-fit:cover;display:block}
.szp-banner-cap{
  position:absolute;inset-inline-start:14px;bottom:12px;z-index:2;
  padding:6px 12px;border-radius:999px;font-size:.8rem;font-weight:800;
  color:#fff!important;-webkit-text-fill-color:#fff!important;
  background:rgba(11,29,49,.62);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)
}
.szp-banner-arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:34px;height:34px;border-radius:50%;cursor:pointer;
  border:1px solid rgba(255,255,255,.5)!important;
  background:rgba(11,29,49,.5)!important;
  color:#fff!important;-webkit-text-fill-color:#fff!important;
  font-size:1.2rem!important;line-height:1!important;font-weight:700;
  display:grid;place-items:center;padding:0!important;min-height:0!important;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  opacity:0;transition:opacity .18s ease,background .18s ease
}
.szp-banner-carousel:hover .szp-banner-arrow,
.szp-banner-arrow:focus-visible{opacity:1}
.szp-banner-arrow:hover{background:rgba(11,29,49,.76)!important}
.szp-banner-arrow.is-prev{inset-inline-end:10px}
.szp-banner-arrow.is-next{inset-inline-start:10px}
.szp-banner-dots{
  position:absolute;inset-inline:0;bottom:9px;z-index:3;
  display:flex;justify-content:center;gap:6px
}
.szp-banner-dot{
  width:7px;height:7px;padding:0!important;min-height:0!important;border-radius:50%;cursor:pointer;
  border:1px solid rgba(255,255,255,.7)!important;background:rgba(255,255,255,.35)!important;
  transition:width .2s ease,background .2s ease
}
.szp-banner-dot.is-on{width:20px;border-radius:999px;background:#fff!important}
@media (prefers-reduced-motion: reduce){
  .szp-banner-slide{transition:none}
}
.szp-banner-empty{margin:12px 0}
.szp-banner-empty p{
  margin:0;padding:10px 14px;border-radius:12px;font-size:.82rem;
  background:rgba(232,122,44,.08);border:1px dashed rgba(232,122,44,.4);color:#8a5216
}
.szp-banner-empty a{color:#c2640f;font-weight:800}

/* ---------------------------------------------------------------------------
 * 3.11 — سازَک is the help button.
 *
 * A speech bubble is what every shop on the Iranian web puts in this corner, and it
 * says nothing about who is behind it. His face does both jobs at once: it still reads
 * as "help" because of where it sits and what is written under it, and after two visits
 * it also reads as *him*. The label is two lines now — his name, and the errand — so the
 * mascot is introduced rather than merely decorative.
 * ------------------------------------------------------------------------- */
.szp-assist-has-face{padding:0 18px 0 8px;min-height:56px;align-items:center}
.szp-assist-has-face .szp-assist-ico{
	width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.92);
	box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 2px 8px rgba(120,52,4,.28);
	overflow:hidden;flex:0 0 auto}
.szp-assist-has-face .szp-assist-ico .szp-mascot{display:grid;place-items:center;line-height:0}
/* His body is navy and his roof orange; on the orange pill the strokes must not be
   forced white by the launcher's blanket rule, or he disappears into it. */
.szp-assist-has-face .szp-assist-ico svg *{-webkit-text-fill-color:initial!important}
.szp-assist-has-face .szp-assist-ico svg{stroke:none!important}
.szp-assist-has-face .szp-assist-label{display:flex;flex-direction:column;align-items:flex-start;gap:1px;line-height:1.25}
.szp-assist-has-face .szp-assist-label b{font-size:.94rem;font-weight:900;letter-spacing:.2px}
.szp-assist-has-face .szp-assist-label small{font-size:.7rem;font-weight:600;opacity:.92}
@media (max-width:560px){
	.szp-assist-has-face{padding:0;width:56px;height:56px;justify-content:center}
	.szp-assist-has-face .szp-assist-ico{width:44px;height:44px}
}

/* His face beside his own words in the panel, and the last step of signing up. */
.szp-assist-said{display:flex;align-items:flex-start;gap:8px;margin-bottom:8px}
.szp-assist-face{flex:0 0 auto;width:28px;height:28px;border-radius:50%;
	display:grid;place-items:center;background:#f2f5f7;overflow:hidden;line-height:0}
.szp-assist-face .szp-mascot{display:grid;place-items:center;line-height:0}
.szp-assist-said .szp-assist-bubble{margin:0}
.szp-assist-terms{display:flex;align-items:flex-start;gap:8px;margin:10px 2px 0;
	font-size:.8rem;line-height:1.8;color:#4a5765}
.szp-assist-terms input{width:17px;height:17px;min-height:0;flex:0 0 17px;margin-top:4px;accent-color:#e47a2c}
.szp-assist-terms a{color:#d9660a;font-weight:700}

/* ---------------------------------------------------------------------------
 * سازَک, on pages that only load the small sheet.
 *
 * The mascot's own rules live in platform.css, which is 471KB and is only served on the
 * platform's own screens. The help button is on every page of the site, so his drawing
 * needs its animations here too — copied deliberately rather than moved, because moving
 * them would put a 471KB sheet's worth of dependency on a 20KB one.
 * ------------------------------------------------------------------------- */
.szp-mascot{display:inline-grid;place-items:center;flex:0 0 auto;line-height:0}
.szp-mascot svg{display:block}
.szp-mascot-eyes{transform-origin:32px 38px;animation:szpBlink 5.5s infinite}
@keyframes szpBlink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.12)}}
@keyframes szpMascotJaw{0%,100%{transform:scaleY(1)}25%{transform:scaleY(1.7)}50%{transform:scaleY(.6)}75%{transform:scaleY(1.5)}}
@keyframes szpMascotTalk{0%,100%{ry:2.4px}25%{ry:4.6px}50%{ry:1.5px}75%{ry:4px}}
@keyframes szpMascotTalkGap{0%,100%{ry:.6px;opacity:.25}25%{ry:2.9px;opacity:.6}50%{ry:.3px;opacity:.15}75%{ry:2.4px;opacity:.55}}
.szp-mascot-mouth{transform-origin:32px 48.5px}
.szp-mascot.is-talking .szp-mascot-mouth{animation:szpMascotJaw .42s ease-in-out infinite}
.szp-mascot.is-talking .szp-mascot-lip{animation:szpMascotTalk .42s ease-in-out infinite}
.szp-mascot.is-talking .szp-mascot-gap{animation:szpMascotTalkGap .42s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){
	.szp-mascot-eyes,.szp-mascot.is-talking .szp-mascot-mouth,
	.szp-mascot.is-talking .szp-mascot-lip,.szp-mascot.is-talking .szp-mascot-gap{animation:none}
}

/* ---------------------------------------------------------------------------
 * 3.11.3 — سازَک on a phone.
 *
 * The launcher collapses to a circle under 560px, and the sheet already said
 * `.szp-assist-launch .szp-assist-label{display:none}` inside that media query. Then
 * `.szp-assist-has-face .szp-assist-label{display:flex}` was added at the end of the
 * file — same specificity, later in source order — so the label won, and the name and
 * the errand spilled out of a 56px circle onto the page behind it. A rule written for
 * the wide layout was quietly deciding the narrow one.
 *
 * Restated inside the query where it belongs, at a weight the general rule cannot
 * reach. The face is the whole control on a phone, which is the point of having one.
 * ------------------------------------------------------------------------- */
@media (max-width:560px){
	.szp-assist-launch.szp-assist-has-face .szp-assist-label{display:none!important}
	.szp-assist-launch.szp-assist-has-face{
		width:58px!important;height:58px!important;min-height:58px;padding:0!important;
		/* Never `hidden` here. The badge sits at -4px on two edges, so clipping the
		   button clips the one thing on it that carries information — measured on a
		   phone, the red count was sliced down its inner edge. The circle this rule was
		   actually written for is kept by clipping the face instead. */
		justify-content:center;gap:0;overflow:visible}
	.szp-assist-launch.szp-assist-has-face .szp-assist-ico{
		width:44px;height:44px;overflow:hidden;border-radius:50%}
}
/* Between 560 and 720 the pill stays, so it must not outgrow the screen either. */
@media (max-width:720px){
	.szp-assist-launch.szp-assist-has-face{max-width:calc(100vw - 36px)}
	.szp-assist-launch.szp-assist-has-face .szp-assist-label{min-width:0}
	.szp-assist-launch.szp-assist-has-face .szp-assist-label b,
	.szp-assist-launch.szp-assist-has-face .szp-assist-label small{
		overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
}
/* The panel itself: the same rhythm the dashboards got. Nothing touching anything. */
.szp-assist-panel{--szp-a1:8px;--szp-a2:12px;--szp-a3:18px}
.szp-assist-body{padding:var(--szp-a3)!important;display:grid;gap:var(--szp-a2)}
.szp-assist-greet{margin:0;line-height:1.9}
.szp-assist-hint{margin:0;line-height:2}
.szp-assist-sec,.szp-assist-group{margin-top:var(--szp-a1)}
.szp-assist-q{padding:var(--szp-a2) var(--szp-a3)!important;gap:var(--szp-a2)}
.szp-assist-gate{display:grid;gap:var(--szp-a2);margin-top:var(--szp-a1)}
.szp-assist-cta{min-height:48px;padding:0 var(--szp-a3)}
.szp-assist-foot{display:grid;gap:var(--szp-a1);margin-top:var(--szp-a2)}
.szp-assist-answer p{margin:0 0 var(--szp-a2);line-height:2}
.szp-assist-helpful{display:flex;flex-wrap:wrap;align-items:center;gap:var(--szp-a1);margin-top:var(--szp-a2)}

/* ---------------------------------------------------------------------------
 * 3.11.3 — the close button, and the launcher standing on the panel.
 *
 * `.szp-assist-head button{color:#fff}` was correct and lost: the theme paints button
 * text with `background-clip`, so plain `color` never reaches the glyph — the documented
 * trap in HANDOFF §8, and the reason the × measured at contrast **1.00** against its own
 * navy header. Both properties, both `!important`, as that note says.
 *
 * And on a phone the panel fills the screen, so the launcher — which is fixed to the
 * bottom corner — was sitting on top of «فرستادن کد». It is a toggle, and the panel has
 * its own ×, so while the panel is open the launcher gets out of the way. On a wide
 * screen it sits below the panel and stays, because there it is still the way back out.
 * ------------------------------------------------------------------------- */
.szp-assist-head button,.szp-assist-x{
	color:#fff!important;-webkit-text-fill-color:#fff!important;
	background:rgba(255,255,255,.2)!important;border:1px solid rgba(255,255,255,.28)!important}
.szp-assist-head button:hover,.szp-assist-x:hover{background:rgba(255,255,255,.34)!important}
.szp-assist-head button svg{stroke:#fff!important;fill:#fff!important}
@media (max-width:720px){
	.szp-assist-open .szp-assist-launch{opacity:0;pointer-events:none;transform:scale(.85)}
}

/* ---------------------------------------------------------------------------
 * 3.11.3 — the theme's newsletter button, which is navy text on navy.
 *
 * Not ours, and fixed anyway: measured at `rgb(12,36,97)` on `rgb(12,36,97)` — contrast
 * **1.00**, an invisible control in the footer of every page. The owner's brief covers
 * the theme where the theme breaks the site, and a subscribe button nobody can see is
 * that. Scoped to the one element it is: a `.btn-dark` inside a footer form, so no other
 * use of that class is touched.
 * ------------------------------------------------------------------------- */
footer form .btn.btn-dark,footer form button.btn-dark{
	color:#fff!important;-webkit-text-fill-color:#fff!important;
	/* The deeper orange, not the brand one: white on #e47a2c measures 2.95:1, which is
	   under the 3:1 floor for a control this size. #b8540a clears it. */
	background:#b8540a!important;border-color:#9c4708!important}
footer form .btn.btn-dark:hover,footer form button.btn-dark:hover{
	background:#d9660a!important}

/* ---------------------------------------------------------------------------
 * 3.12 — the busy state, سازَک's bubble, and getting him off the panel.
 * ------------------------------------------------------------------------- */
.szp-busy-spin{display:inline-block;width:14px;height:14px;border-radius:50%;
	border:2px solid currentColor;border-top-color:transparent;
	animation:szpSpin .7s linear infinite;vertical-align:-2px;margin-inline-end:7px}
@keyframes szpSpin{to{transform:rotate(360deg)}}
button.is-busy,button.is-waiting{opacity:.72;cursor:progress}
button.is-waiting{cursor:not-allowed}
button.is-busy>span{vertical-align:middle}
@media (prefers-reduced-motion:reduce){.szp-busy-spin{animation-duration:2s}}

/* He steps aside for anything that covers the screen, and walks back when it closes.
   Kept in the layout (not `display:none`) so returning is a movement rather than a pop. */
.szp-sazak-aside .szp-assist-launch{
	opacity:0!important;visibility:hidden!important;pointer-events:none!important;
	transform:translateY(14px) scale(.86)!important}
.szp-assist-launch{transition:opacity .2s ease,visibility 0s linear .2s,transform .26s cubic-bezier(.34,1.4,.5,1)}
.szp-sazak-aside .szp-assist-launch{transition:opacity .16s ease,visibility 0s linear .16s,transform .2s ease}

/* What he says when a reply lands. Anchored to the launcher, so it follows him. */
.szp-assist-shout{
	position:absolute;bottom:calc(100% + 12px);inset-inline-end:0;
	/*
	 * It sizes to its text, not to the button it hangs off.
	 *
	 * An absolutely positioned box with no width shrinks to fit, and "fit" is capped by
	 * its containing block — which here is the launcher. On a phone that launcher is a
	 * 58px circle, so the bubble was 58px wide: measured on the live page with a real
	 * notification in it, 77px across and 312 tall, a tower of one-word lines climbing off
	 * the top of the screen. That is the overflow in the screenshot, and it is vertical
	 * before it is horizontal. `max-content` frees it from the parent's width; the
	 * max-width below is then the only thing that decides how wide it gets, and 80px
	 * leaves the launcher's own inset on one side and a thumb's margin on the other.
	 */
	width:max-content;
	max-width:min(240px,60vw,calc(100vw - 80px));padding:9px 13px;border-radius:14px;
	background:#fff;color:#172334!important;-webkit-text-fill-color:#172334!important;
	font-size:.78rem;font-weight:700;line-height:1.8;text-align:start;
	box-shadow:0 10px 26px rgba(11,29,49,.22);border:1px solid #e6ebef;
	opacity:0;transform:translateY(6px) scale(.94);pointer-events:none;
	transition:opacity .2s ease,transform .24s cubic-bezier(.34,1.4,.5,1)}
.szp-assist-shout:after{content:'';position:absolute;top:100%;inset-inline-end:22px;
	border:7px solid transparent;border-top-color:#fff}
.is-shouting .szp-assist-shout{opacity:1;transform:translateY(0) scale(1)}
/*
 * The bubble grows towards the middle of the screen, not off the edge of it.
 *
 * It was anchored `inset-inline-end` unconditionally, which is right for a launcher on the
 * inline-end side and exactly wrong for one on the inline-start side: a 240px bubble
 * pinned to the far edge of a 58px button that is itself 18px from the screen edge has
 * nowhere to go but out, which is the overflow in the screenshot. Each placement now
 * anchors on its own near edge and grows inward, and the tail follows the anchor so it
 * still points at him.
 */
.szp-assist-bottom-start .szp-assist-shout{inset-inline-start:0;inset-inline-end:auto}
.szp-assist-bottom-start .szp-assist-shout:after{inset-inline-start:22px;inset-inline-end:auto}
.szp-assist-bottom-end .szp-assist-shout{inset-inline-end:0;inset-inline-start:auto}
.szp-assist-bottom-end .szp-assist-shout:after{inset-inline-end:22px;inset-inline-start:auto}
.is-shouting{animation:szpWave 1.1s ease-in-out 2}
@keyframes szpWave{
	0%,100%{transform:rotate(0) translateY(0)}
	20%{transform:rotate(-5deg) translateY(-4px)}
	45%{transform:rotate(4deg) translateY(-2px)}
	70%{transform:rotate(-3deg) translateY(-3px)}
}
@media (prefers-reduced-motion:reduce){.is-shouting{animation:none}}

/* The unread count on his shoulder. It outlives the bubble, so nothing may clip it. */
.szp-assist-badge{
	position:absolute;top:-4px;inset-inline-start:-4px;z-index:2;min-width:22px;height:22px;
	padding:0 6px;border-radius:999px;display:grid;place-items:center;
	background:#d64034!important;color:#fff!important;-webkit-text-fill-color:#fff!important;
	font-size:.68rem;font-weight:800;line-height:1;border:2px solid #fff;
	box-shadow:0 2px 6px rgba(0,0,0,.22)}
.szp-assist-launch{position:fixed;overflow:visible}
.szp-assist-shout{cursor:default}
.szp-assist-shout[style*="pointer-events: auto"]{cursor:pointer}
.szp-assist-shout[style*="pointer-events: auto"]:hover{background:#fff8f2}

/* ---------------------------------------------------------------------------
 * 3.16 — «اعلان‌ها», at the top of سازَک's panel.
 *
 * He has been the notification *bearer* since 3.13 — a badge and a spoken line — with
 * nowhere to put the thing he was announcing. Pressing him showed the FAQ, and the alert
 * that had just arrived was gone. This is the missing half: the same merged feed the
 * dashboard reads, grouped by what it is about, above everything else in the panel.
 *
 * Accent-coloured on purpose. The rest of the panel is help you went looking for; this is
 * news that came looking for you, and the two should not read as the same list.
 * ------------------------------------------------------------------------- */
.szp-assist-alerts{display:grid;gap:8px}
.szp-assist-alerts-head{
	display:flex;align-items:center;gap:8px;padding:9px 13px;border-radius:13px;
	background:linear-gradient(135deg,#f08a2c,#c85c06);
	color:#fff!important;-webkit-text-fill-color:#fff!important;
	font-size:.84rem;font-weight:800}
.szp-assist-alerts-head b{flex:1;min-width:0}
.szp-assist-alerts-count{
	min-width:22px;padding:1px 7px;border-radius:999px;background:rgba(255,255,255,.26);
	font-size:.72rem;font-weight:800;text-align:center}
.szp-assist-alerts-group{
	margin-top:4px;font-size:.72rem;font-weight:800;color:#7b8794;
	display:flex;align-items:center;gap:7px}
/* The count is its own box, so the gap does the separating a « · » used to do badly. */
.szp-assist-alerts-group bdi{color:#a85c20;unicode-bidi:isolate}
.szp-assist-alerts-group:before{content:'';flex:0 0 6px;height:6px;border-radius:50%;background:#d7dee5}
.szp-assist-alert{
	display:grid;grid-template-columns:1fr auto;gap:2px 9px;width:100%;text-align:start;
	padding:10px 13px;border:1px solid #e6ebef;border-radius:13px;background:#fff;
	color:#172334!important;-webkit-text-fill-color:#172334!important;
	font:inherit;cursor:pointer;transition:border-color .16s,background .16s}
.szp-assist-alert:hover{border-color:#e47a2c;background:#fff8f2}
.szp-assist-alert b{font-size:.8rem;font-weight:800;line-height:1.7;min-width:0;
	overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.szp-assist-alert small{grid-column:1/-1;font-size:.74rem;line-height:1.8;color:#647286;
	overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.szp-assist-alert time{font-size:.68rem;color:#8a97a5;white-space:nowrap;align-self:center}
/* Unread is a state you can see at a glance down a column, not a word you have to read. */
.szp-assist-alert.is-unread{border-color:#f0d4b6;background:#fffaf4}
.szp-assist-alert.is-unread b:before{
	content:'';display:inline-block;width:7px;height:7px;border-radius:50%;
	background:#d64034;margin-inline-end:6px;vertical-align:1px}
.szp-assist-alerts-empty{margin:0;padding:12px 4px;font-size:.78rem;color:#7b8794;line-height:1.9}
.szp-assist-alerts-more{
	background:transparent!important;border:0;padding:4px;font:inherit;font-size:.74rem;
	font-weight:800;color:#a85c20!important;-webkit-text-fill-color:#a85c20!important;
	cursor:pointer;text-decoration:underline;text-underline-offset:3px;justify-self:start}