/**
 * The sign-in card, on its own.
 *
 * 2.89.0 — the login used to look different on three pages of this site, and the reason
 * was that it *was* three different logins: our card on the pages that load the platform
 * bundle, and the theme's own modal everywhere else, because `platform.css` and
 * `szp-auth.js` are only enqueued on the screens the platform owns. Loading a 400KB
 * marketplace stylesheet on every page of the site to fix that would be the wrong trade,
 * so the card's own rules live here — extracted from platform.css, not rewritten — and
 * this file plus one script go out site-wide to signed-out visitors.
 *
 * The tokens are restated at the top rather than imported: this sheet has to stand up on
 * a page where nothing else of ours is present.
 */
.szp-auth, .szp-auth * { box-sizing: border-box; }
.szp-auth {
  --szp-v17-navy: #0b1d31;
  --szp-v17-orange: #e47a2c;
  --szp-v17-ink: #172334;
  --szp-v17-muted: #647286;
  --szp-v17-border: #e1e6ea;
  --szp-accent-ink: #a85c20;
  --szp-brand-orange: #f37023;
  font-family: Vazirmatn, IRANSans, IRANYekan, Tahoma, sans-serif;
}

/* The two controls the card borrows from the platform's button set. */
html body .szp-auth .szp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 11px 18px; border-radius: 14px; border: 1px solid transparent;
  font: inherit; font-size: .92rem; font-weight: 800; line-height: 1.6;
  cursor: pointer; text-decoration: none; background: #fff; color: var(--szp-v17-ink);
}
html body .szp-auth .szp-btn-primary {
  background: linear-gradient(180deg, #f0913f, #e07521) !important;
  background-image: linear-gradient(180deg, #f0913f, #e07521) !important;
  border-color: rgba(224,117,33,.5) !important;
  color: #fff !important; -webkit-text-fill-color: #fff !important;
  box-shadow: 0 8px 18px rgba(224,117,33,.28);
}
html body .szp-auth .szp-btn-primary:hover { filter: brightness(1.04); }
html body .szp-auth .szp-btn[disabled] { opacity: .5; cursor: not-allowed; }
html body .szp-auth .szp-link-btn {
  background: none !important; border: 0 !important; box-shadow: none !important;
  padding: 4px 2px; font: inherit; font-size: .84rem; font-weight: 700; cursor: pointer;
  color: var(--szp-accent-ink) !important; -webkit-text-fill-color: var(--szp-accent-ink) !important;
}
/* Every field states its own colours: on a theme page the Elementor kit paints inputs
   solid orange with white placeholder text, which is the unreadable box in the
   screenshots. */
html body .szp-auth input:not([type="checkbox"]) {
  width: 100%; min-height: 46px; padding: 11px 13px; font: inherit; font-size: .95rem;
  background: #fff !important; background-image: none !important;
  color: var(--szp-v17-ink) !important; -webkit-text-fill-color: var(--szp-v17-ink) !important;
  border: 1px solid rgba(13,35,55,.18) !important; border-radius: 12px !important;
  box-shadow: none !important; opacity: 1 !important;
}
html body .szp-auth input::placeholder {
  color: #9aa5b0 !important; -webkit-text-fill-color: #9aa5b0 !important; opacity: 1;
}
html body .szp-auth input:focus {
  outline: none; border-color: var(--szp-v17-orange) !important;
  box-shadow: 0 0 0 3px rgba(228,122,44,.18) !important;
}

/* The theme's own login modal, off the page for signed-out visitors. The script is
   dequeued in PHP; this is the second line, for a container printed into the markup. */
/*
 * The theme's modal is NOT hidden outright, and that is deliberate.
 *
 * An earlier pass hid it permanently and dequeued its script. Measured on the live
 * home page afterwards: the header's «ورود / ثبت نام» is an `<a>` with no href at
 * all — that script is its only behaviour — so the button opened nothing and the
 * site had no way in from its own header. Hiding the dialog while also being the
 * only thing that can open one is a single point of failure.
 *
 * So the theme's modal stays functional as the last resort, and szp-auth.js takes
 * the click before it (capture phase) and hides that instance if it ever does open.
 * If every interception in that file failed, a visitor still gets *a* login.
 */
html body .szp-auth-taken-over { display: none !important; }

.szp-modal-open{overflow:hidden}
.szp-auth-gate{text-align:center;padding:28px 10px 12px}
.szp-auth-icon{display:grid;place-items:center;width:58px;height:58px;margin:0 auto 12px;border-radius:50%;background:#fff3e6;color:var(--szp-v17-orange);font-size:1.8rem;font-weight:900}
.szp-auth-gate h3{font-size:1.35rem;margin-top:6px}
.szp-auth-gate>p{max-width:48ch;margin:8px auto;color:var(--szp-v17-muted);font-size:.84rem;line-height:2}
.szp-auth-actions{display:flex;justify-content:center;gap:9px;flex-wrap:wrap;margin-top:18px}
.szp-auth-actions .szp-btn{min-width:145px}
.szp-auth-note{font-size:.78rem!important}
.szp-auth-note a{color:var(--szp-v17-orange);font-weight:800}
@media(max-width:640px){
.szp-auth-actions{display:grid;grid-template-columns:1fr;width:100%}
.szp-auth-actions .szp-btn{width:100%}
}
.szp-auth-recovery{grid-column:1/-1;margin:-2px 0 2px;text-align:right;font-size:.78rem}
.szp-auth-recovery a{color:var(--szp-v17-navy);text-decoration:none;font-weight:700}
.szp-auth-recovery a:hover{text-decoration:underline;color:var(--szp-v17-orange)}
html body .szp-auth {
  position: fixed; inset: 0; z-index: 2147483000;
  display: grid; place-items: center; padding: 16px;
}
html body .szp-auth-backdrop {
  position: absolute; inset: 0;
  background: rgba(11,29,49,.55);
  -webkit-backdrop-filter: blur(8px) saturate(120%); backdrop-filter: blur(8px) saturate(120%);
}
html body .szp-auth-card {
  position: relative; z-index: 1;
  width: min(400px, 100%); max-height: 92dvh; overflow: auto;
  padding: 16px 16px 12px; border-radius: 22px;
  /*
   * Glass, but the body panel underneath stays opaque.
   *
   * The blur and the 1px white edge are on the shell; the `.szp-auth-body` below keeps
   * a solid white ground. That split is deliberate and it is a legibility decision, not
   * a stylistic one: this card opens over a busy Persian marketplace page, and a
   * translucent surface behind small Persian text at these weights is where contrast
   * goes. The frame reads as glass; the part with the words in it does not.
   */
  background: rgba(255,255,255,.82) !important;
  -webkit-backdrop-filter: blur(16px) saturate(180%); backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid rgba(255,255,255,.2) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 30px 70px rgba(13,35,55,.34) !important;
}
html body .szp-auth-close {
  position: absolute; inset-inline-start: 12px; top: 12px; z-index: 2;
  width: 32px; height: 32px; display: grid; place-items: center;
  border: 1px solid rgba(13,35,55,.12) !important; border-radius: 50%;
  background: rgba(13,35,55,.05) !important; background-image: none !important;
  color: #41505f !important; -webkit-text-fill-color: #41505f !important;
  font-size: 1.1rem; line-height: 1; cursor: pointer; box-shadow: none !important;
}
html body .szp-auth-close:hover { background: rgba(13,35,55,.11) !important; }
/* The tab strip that used to sit here is gone — see phoneStage() in szp-auth.js. What
   replaced it is a title and, under the primary button, one quiet line for the password
   route. */
html body .szp-auth-head {
  display: grid; gap: 4px; padding: 2px 34px 12px; text-align: center;
}
html body .szp-auth-title {
  margin: 0; font-size: 1.02rem; font-weight: 800; line-height: 1.7;
  color: var(--szp-v17-navy, #0b1d31) !important;
  -webkit-text-fill-color: var(--szp-v17-navy, #0b1d31) !important;
}
/* Discreet on purpose: it is the route almost nobody needs, and making it look like a
   second primary action is what made the old tab strip a fork in the road. */
html body .szp-auth .szp-auth-alt,
html body .szp-auth .szp-auth-back {
  justify-self: center; margin-top: 2px; padding: 6px 4px;
  font-size: .8rem; font-weight: 600;
  color: var(--szp-v17-muted, #647286) !important;
  -webkit-text-fill-color: var(--szp-v17-muted, #647286) !important;
  text-decoration: underline; text-underline-offset: 3px;
}
html body .szp-auth .szp-auth-alt:hover,
html body .szp-auth .szp-auth-back:hover {
  color: var(--szp-brand-orange, #f37023) !important;
  -webkit-text-fill-color: var(--szp-brand-orange, #f37023) !important;
}
/* The code box. Wide letter-spacing because it is read back digit by digit against a
   text message, and centred because it is the only thing on the step. */
html body .szp-auth .szp-auth-code {
  text-align: center; font-size: 1.35rem; font-weight: 800;
  letter-spacing: .42em; text-indent: .42em;
  font-variant-numeric: tabular-nums;
}
html body .szp-auth .szp-auth-code:focus {
  border-color: var(--szp-brand-orange, #f37023) !important;
  box-shadow: 0 0 0 3px rgba(243,112,35,.18) !important;
}
html body .szp-auth-body {
  display: grid; gap: 11px;
  padding: 18px 14px 14px; border-radius: 18px;
  background: #fff; border: 1px solid rgba(13,35,55,.07);
}
html body .szp-auth-avatar {
  justify-self: center; width: 72px; height: 72px; border-radius: 50%;
  display: grid; place-items: center; margin-bottom: 4px;
  background: rgba(13,35,55,.05); border: 1px solid rgba(13,35,55,.12);
  color: #b6c0ca;
}
html body .szp-auth-lede {
  margin: 0; text-align: center; font-size: .86rem; line-height: 1.9;
  color: var(--szp-v17-muted, #647286);
}
html body .szp-auth-field { display: grid; gap: 5px; }
html body .szp-auth-field > span {
  font-size: .8rem; font-weight: 700; color: var(--szp-v17-ink, #172334);
}
html body .szp-auth input:not([type="checkbox"]) {
  width: 100%; min-height: 50px; padding: 11px 14px;
  background: #fff !important; background-image: none !important;
  color: var(--szp-v17-ink, #172334) !important;
  -webkit-text-fill-color: var(--szp-v17-ink, #172334) !important;
  border: 1px solid rgba(13,35,55,.18) !important; border-radius: 13px !important;
  box-shadow: none !important; font: inherit; font-size: .95rem;
}
html body .szp-auth input:focus {
  border-color: var(--szp-v17-orange, #e47a2c) !important;
  box-shadow: 0 0 0 3px rgba(228,122,44,.18) !important; outline: none;
}
html body .szp-auth [data-auth-code] {
  text-align: center; letter-spacing: .5em; font-size: 1.25rem; font-weight: 800;
}
html body .szp-auth .szp-auth-go {
  width: 100%; min-height: 50px; justify-content: center;
  border-radius: 13px; font-weight: 800; font-size: .94rem;
}
html body .szp-auth .szp-auth-go:disabled { opacity: .5; cursor: not-allowed; }
html body .szp-auth-phone-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 13px; border-radius: 13px;
  background: rgba(13,35,55,.04); border: 1px solid rgba(13,35,55,.08);
  font-weight: 700; font-size: .9rem; color: var(--szp-v17-ink, #172334);
}
html body .szp-auth .szp-auth-resend,
html body .szp-auth .szp-auth-lost {
  justify-self: center; background: none !important; border: 0 !important;
  box-shadow: none !important; text-decoration: underline; text-underline-offset: 3px;
  font-size: .82rem; font-weight: 600; cursor: pointer;
  color: var(--szp-v17-muted, #647286) !important;
  -webkit-text-fill-color: var(--szp-v17-muted, #647286) !important;
}
html body .szp-auth .szp-auth-resend:disabled { opacity: .55; cursor: default; text-decoration: none; }
html body .szp-auth-status {
  min-height: 1.2em; text-align: center; font-size: .83rem; line-height: 1.8;
  color: var(--szp-v17-muted, #647286);
}
html body .szp-auth-status.is-error { color: #b4342a; font-weight: 700; }
html body .szp-auth-legal {
  margin: 12px 2px 2px; text-align: center;
  font-size: .76rem; line-height: 1.9; color: var(--szp-v17-muted, #647286);
}
html body .szp-auth-legal a { color: var(--szp-accent-ink, #a85c20); text-decoration: underline; text-underline-offset: 2px; }
html body .szp-checkbox-line,
html body .szp-auth-check {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start; gap: 10px;
  margin: 4px 0; padding: 12px 13px;
  border-radius: 13px; border: 1px solid rgba(13,35,55,.10);
  background: rgba(255,255,255,.6);
  font-size: .86rem; line-height: 1.95; font-weight: 500;
  color: var(--szp-v17-ink, #172334); cursor: pointer;
  text-align: start;
}
html body .szp-checkbox-line > input[type="checkbox"],
html body .szp-auth-check > input[type="checkbox"] {
  width: 20px !important; height: 20px !important; min-height: 0 !important;
  margin: 3px 0 0 !important; padding: 0 !important; flex: 0 0 auto;
  accent-color: var(--szp-v17-orange, #e47a2c);
  cursor: pointer; box-shadow: none !important;
}
html body .szp-checkbox-line > span,
html body .szp-auth-check > span { display: inline; min-width: 0; }
html body .szp-checkbox-line a,
html body .szp-auth-check a {
  display: inline !important;
  color: var(--szp-accent-ink, #a85c20) !important;
  -webkit-text-fill-color: var(--szp-accent-ink, #a85c20) !important;
  font-weight: 700; text-decoration: underline; text-underline-offset: 3px;
  white-space: nowrap;
}
html body .szp-checkbox-line:has(> input:checked),
html body .szp-auth-check:has(> input:checked) {
  border-color: rgba(228,122,44,.45); background: rgba(255,246,238,.75);
}
html body .szp-checkbox-line,
html body .szp-auth-check {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px;
  margin: 4px 0; padding: 12px 14px;
  border-radius: 13px; border: 1px solid rgba(13,35,55,.10);
  background: rgba(255,255,255,.6);
  font-size: .86rem; line-height: 1.9; font-weight: 500;
  color: var(--szp-v17-ink, #172334); cursor: pointer; text-align: start;
}
html body .szp-checkbox-line > input[type="checkbox"],
html body .szp-auth-check > input[type="checkbox"] {
  flex: 0 0 auto;
  width: 19px !important; height: 19px !important; min-height: 0 !important;
  margin: 3px 0 0 !important; padding: 0 !important;
  accent-color: var(--szp-v17-orange, #e47a2c);
  cursor: pointer; box-shadow: none !important;
}
html body .szp-checkbox-line > span,
html body .szp-auth-check > span {
  flex: 1 1 auto; min-width: 0; display: block;
}
html body .szp-checkbox-line a,
html body .szp-auth-check a {
  display: inline !important; white-space: normal !important;
  color: var(--szp-accent-ink, #a85c20) !important;
  -webkit-text-fill-color: var(--szp-accent-ink, #a85c20) !important;
  font-weight: 700; text-decoration: underline; text-underline-offset: 3px;
}
html body .szp-checkbox-line:has(> input:checked),
html body .szp-auth-check:has(> input:checked) {
  border-color: rgba(228,122,44,.45); background: rgba(255,246,238,.75);
}
@media (prefers-reduced-transparency: reduce) {
html body .szp-people-v17 > .szp-provider-card-v17,
  html body .szp-related-grid > .szp-provider-card-v17,
  html body .szp-auth-card {
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
    background: #fff !important;
  }
}
html body .szp-auth-roles { display: grid; gap: 10px; }
html body .szp-auth-role {
  display: grid; gap: 3px; text-align: start; cursor: pointer;
  padding: 15px 17px; border-radius: 16px;
  background: rgba(255,255,255,.94) !important; background-image: none !important;
  border: 1.5px solid rgba(13,35,55,.14) !important;
  box-shadow: 0 2px 10px rgba(13,35,55,.06) !important;
  transition: border-color .16s ease, transform .12s ease, box-shadow .18s ease;
}
html body .szp-auth-role:hover {
  border-color: var(--szp-v17-orange, #e47a2c) !important;
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(224,117,33,.18) !important;
}
html body .szp-auth-role b {
  font-size: 1rem; font-weight: 800;
  color: var(--szp-v17-navy, #0b1d31) !important;
  -webkit-text-fill-color: var(--szp-v17-navy, #0b1d31) !important;
}
html body .szp-auth-role small {
  font-size: .8rem; line-height: 1.8;
  color: var(--szp-v17-muted, #647286) !important;
  -webkit-text-fill-color: var(--szp-v17-muted, #647286) !important;
}
html body .szp-login-page .szp-auth-role { background: #fff !important; }
html body .szp-auth-role-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-bottom: 10px; padding: 0 2px;
}
html body .szp-auth-role-bar b {
  font-size: .95rem; font-weight: 800; color: var(--szp-v17-navy, #0b1d31);
}
html body .szp-auth-role-bar .szp-link-btn {
  background: none !important; border: 0 !important; box-shadow: none !important;
  font-size: .82rem; font-weight: 700; cursor: pointer;
  color: var(--szp-accent-ink, #a85c20) !important;
  -webkit-text-fill-color: var(--szp-accent-ink, #a85c20) !important;
  text-decoration: underline; text-underline-offset: 3px;
}
html body .szp-auth input[inputmode="tel"],
html body .szp-auth [data-auth-code],
html body .szp-auth [data-auth-login] { font-variant-numeric: tabular-nums; }
html body .szp-auth-role-bar { padding-inline-start: 44px; min-height: 32px; }
html body .szp-auth-close { inset-inline-start: 14px; top: 14px; }


/* -------------------------------------------------------------------------
 * The busy spinner and the toast, which this bundle was using without owning.
 *
 * `SZPBusy` prints `<span class="szp-busy-spin">` and `window.SZPToast` prints
 * `<div class="szp-toast">` — both live in szp-auth.js, which goes out on every page of
 * the site to a signed-out visitor. Their rules did not: the spinner is styled in
 * szp-widgets.css (enqueued by the help panel and the search box) and the toast in
 * platform.css (the 400KB marketplace bundle). So on the home page, the shop, an
 * article — anywhere the card actually is — the spinner rendered as a bare empty span
 * and the toast as unstyled black text against the page.
 *
 * Copied rather than shared, for the reason given at the top of this file: this sheet
 * has to stand up where nothing else of ours is present. The definitions are identical,
 * and duplicate rules for the same class are harmless when they agree.
 * ------------------------------------------------------------------------- */
.szp-auth .szp-busy-spin, .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); } }
html body .szp-auth button.is-busy, html body .szp-auth button.is-waiting {
  opacity: .72; cursor: progress;
}
html body .szp-auth button.is-waiting { cursor: not-allowed; }
html body .szp-auth button.is-busy > span { vertical-align: middle; }
@media (prefers-reduced-motion: reduce) { .szp-busy-spin { animation-duration: 2s; } }

.szp-toast {
  position: fixed; inset-inline: 0; bottom: 26px; margin-inline: auto; width: max-content;
  max-width: calc(100vw - 32px); z-index: 2147483000; padding: 12px 18px; border-radius: 14px;
  background: rgba(11,29,49,.95); color: #fff !important; -webkit-text-fill-color: #fff !important;
  font-family: Vazirmatn, IRANSans, IRANYekan, Tahoma, sans-serif;
  font-size: .84rem; font-weight: 700; line-height: 1.8; text-align: center;
  box-shadow: 0 14px 40px rgba(11,29,49,.34);
  opacity: 0; transform: translateY(10px);
  transition: opacity .22s ease, transform .26s cubic-bezier(.34,1.4,.5,1);
}
.szp-toast.is-in { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .szp-toast { transition: none; } }

/* -------------------------------------------------------------------------
 * One account icon on a phone, not two.
 *
 * The theme prints an account control in the top header and another in the fixed bottom
 * toolbar. On a phone that is the same destination twice, eight millimetres apart, and
 * the top one is the redundant copy — the bottom bar is where a thumb already is.
 *
 * Guarded by `:has()` rather than hidden outright, and that guard is the whole point of
 * writing it this way. If the bottom toolbar is not on the page — the theme option is
 * off, a template does not render it, a future update renames it — then hiding the
 * header icon would leave a phone with no sign-in control anywhere. So the rule only
 * applies when a toolbar is actually present to inherit the job. A browser too old for
 * `:has()` ignores the whole block and keeps both icons, which is the harmless failure;
 * the alternative fails by locking people out.
 * ------------------------------------------------------------------------- */
@media (max-width: 768px) {
  body:has(.woodmart-toolbar) .whb-header-bottom .top-header-auth,
  body:has(.woodmart-toolbar) .whb-mobile-header .top-header-auth,
  body:has(.woodmart-toolbar) .whb-header-bottom .whb-my-account,
  body:has([data-toolbar]) .whb-header-bottom .top-header-auth,
  body:has([data-toolbar]) .whb-mobile-header .top-header-auth {
    display: none !important;
  }
}

/* The two tabs on the general entrance (header / mobile bottom bar). A contextual
   trigger renders no strip at all — see `shortcut` in szp-auth.js. */
html body .szp-auth-tabs {
  display: flex; gap: 4px; padding: 4px; margin-top: 2px;
  border-radius: 999px; background: rgba(13,35,55,.07);
}
html body .szp-auth-tab {
  flex: 1 1 0; min-height: 40px; border: 0 !important; border-radius: 999px;
  background: transparent !important; background-image: none !important;
  box-shadow: none !important; cursor: pointer; font: inherit;
  font-size: .87rem; font-weight: 700;
  color: var(--szp-v17-muted, #647286) !important;
  -webkit-text-fill-color: var(--szp-v17-muted, #647286) !important;
}
html body .szp-auth-tab.is-current {
  background: #fff !important;
  color: var(--szp-v17-navy, #0b1d31) !important;
  -webkit-text-fill-color: var(--szp-v17-navy, #0b1d31) !important;
  box-shadow: 0 2px 10px rgba(13,35,55,.14) !important;
}

/* The provider door's route to becoming one. Quiet, at the foot, next to the legal line. */
html body .szp-auth-apply {
  margin: 10px 4px 0; text-align: center;
  font-size: .78rem; line-height: 1.9;
  color: var(--szp-v17-muted, #647286);
}
html body .szp-auth-apply a {
  color: var(--szp-brand-orange, #f37023); font-weight: 700; text-decoration: underline;
  text-underline-offset: 3px;
}