@font-face{font-family:Vazirmatn;src:url('fonts/Vazirmatn-Variable.woff2') format('woff2-variations');font-weight:100 900;font-style:normal;font-display:swap}

.szp{
  --szp-navy:#0c1c2d;--szp-navy-2:#132b43;--szp-navy-3:#1b3853;--szp-orange:#e47a2c;--szp-orange-2:#f39a4c;
  --szp-ink:#172334;--szp-muted:#657286;--szp-faint:#8b96a5;--szp-bg:#fbfaf7;--szp-soft:#fff3e6;
  --szp-white:#fff;--szp-border:#e4e7eb;--szp-green:#147b65;--szp-danger:#ba3b32;--szp-shadow:0 14px 34px rgba(18,34,51,.1);--szp-shadow-lg:0 24px 70px rgba(6,18,32,.24);
  --szp-radius:14px;--szp-radius-lg:24px;--szp-ease:cubic-bezier(.2,.75,.28,1);--szp-fast:.2s;--szp-med:.3s;
  position:relative;width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);overflow-x:clip;background:var(--szp-bg);color:var(--szp-ink);font:400 16px/1.75 Vazirmatn,IRANSans,IRANYekan,Tahoma,sans-serif;-webkit-font-smoothing:antialiased
}
.szp,.szp *,.szp *::before,.szp *::after{box-sizing:border-box}.szp-main{position:relative}.szp-wrap{width:min(1200px,100%);margin-inline:auto;padding-inline:clamp(18px,4vw,48px)}
.szp h1,.szp h2,.szp h3,.szp h4,.szp p{margin:0}.szp h1,.szp h2,.szp h3,.szp h4{line-height:1.3;font-weight:800;text-wrap:balance}.szp a{color:inherit;text-decoration:none}.szp button{font:inherit}.szp img{display:block;max-width:100%}.szp-num{font-variant-numeric:tabular-nums}.szp-rv{opacity:0;translate:0 12px;transition:opacity .35s var(--szp-ease),translate .35s var(--szp-ease)}.szp-rv.in{opacity:1;translate:none}.szp-d1{transition-delay:.05s}.szp-d2{transition-delay:.1s}.szp-d3{transition-delay:.15s}
:where(.szp) :focus-visible{outline:3px solid var(--szp-orange-2);outline-offset:3px;border-radius:7px}.szp-sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* First viewport: compact, high contrast, service and province first. */
.szp-hero{background:linear-gradient(122deg,var(--szp-navy) 0%,#102b44 65%,#183b55 100%);color:#fff;padding:clamp(28px,5vw,58px) 0 clamp(20px,3vw,34px);border-radius:0 0 30px 30px;overflow:visible}.szp-hero-inner{max-width:980px;text-align:center}.szp-eyebrow{display:inline-flex;align-items:center;gap:9px;color:var(--szp-orange-2);font-size:.78rem;font-weight:800;letter-spacing:.05em}.szp-eyebrow::before{content:'';width:22px;height:2px;background:currentColor;border-radius:2px}.szp-hero .szp-eyebrow{color:#ffb36f}.szp-h1{font-size:clamp(2rem,4.7vw,4rem);letter-spacing:-.035em}.szp-hero .szp-h1{max-width:760px;margin:10px auto 10px}.szp-hero .szp-lede{max-width:680px;margin:0 auto 22px;color:#d3deea;font-size:clamp(.94rem,1.7vw,1.1rem);line-height:1.9}
.szp-market-search{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) auto;gap:8px;align-items:center;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);padding:8px;border-radius:18px;max-width:900px;margin-inline:auto;box-shadow:0 14px 30px rgba(0,0,0,.14);text-align:start}.szp-search-field{display:flex;align-items:center;gap:9px;min-width:0;background:#fff;color:var(--szp-ink);border-radius:12px;padding-inline:13px}.szp-search-icon{width:20px;height:20px;color:var(--szp-orange);flex:none}.szp-search-icon svg{width:100%;height:100%}.szp-search-field .szp-lb{flex:1;min-width:0}.szp-search-field .szp-lb-btn{padding:12px 2px;border:0;background:transparent;color:var(--szp-ink);font-size:.94rem}.szp-search-submit{white-space:nowrap;border-radius:12px;min-height:48px;padding-inline:24px}
.szp-catrail-wrap{margin-top:16px;overflow:hidden}.szp-catrail{display:flex;justify-content:center;gap:7px;overflow-x:auto;padding:2px 1px 5px;scrollbar-width:none}.szp-catrail::-webkit-scrollbar{display:none}.szp-cat-pill{display:flex;align-items:center;gap:7px;flex:none;cursor:pointer;border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.06);color:#e8eff5;border-radius:999px;padding:8px 13px;font-size:.84rem;transition:background var(--szp-fast),border-color var(--szp-fast),transform var(--szp-fast)}.szp-cat-pill svg{width:18px;height:18px;color:#ffb36f}.szp-cat-pill:hover,.szp-cat-pill[aria-pressed=true]{background:rgba(228,122,44,.22);border-color:#f2a35d;transform:translateY(-1px)}
.szp-hero-phone{display:inline-flex;align-items:center;gap:6px;color:#ffd29d;text-decoration:underline;text-underline-offset:3px;font-weight:800}.szp-hero-phone::before{content:'☎';color:#8de0c3;text-decoration:none}

.szp-sec{padding-block:clamp(42px,6vw,78px)}.szp-soft{background:var(--szp-soft)}.szp-sec-head{margin-bottom:26px}.szp-sec-head-row{display:flex;justify-content:space-between;gap:28px;align-items:end}.szp-sec-head-row>p{max-width:48ch;color:var(--szp-muted);font-size:.88rem;line-height:1.9}.szp-h2{font-size:clamp(1.55rem,3vw,2.35rem);margin-top:8px}.szp-providers{background:var(--szp-bg)}
.szp-people{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.1vw,26px)}.szp-pcard{min-width:0}.szp-pcard-media{position:relative;display:block;aspect-ratio:3/4;border-radius:var(--szp-radius-lg);overflow:hidden;background:#dfe6e8;border:1px solid var(--szp-border);transition:transform var(--szp-med) var(--szp-ease),box-shadow var(--szp-med),border-color var(--szp-fast)}.szp-pcard:hover .szp-pcard-media{transform:translateY(-4px);border-color:#df9557;box-shadow:var(--szp-shadow)}.szp-pcard-media>img{width:100%;height:100%;object-fit:cover}.szp-pcard-media::after{content:'';position:absolute;inset:35% 0 0;background:linear-gradient(180deg,transparent,rgba(6,16,26,.88));pointer-events:none}.szp-pcard-cap{position:absolute;z-index:2;inset-inline:0;bottom:0;padding:16px;color:#fff}.szp-pcard-name{display:block;font-size:1.12rem;line-height:1.45}.szp-pcard-city{display:block;color:#d9e2e9;font-size:.84rem;margin-top:3px}.szp-pcard-demo,.szp-pcard-badge{position:absolute;z-index:3;top:12px;inset-inline-start:12px;border-radius:999px;padding:5px 10px;font-size:.74rem;font-weight:800;background:rgba(11,28,44,.8);color:#ffd29d;border:1px solid rgba(255,194,126,.35)}.szp-pcard-badge{color:#a0e4d0;border-color:rgba(145,223,200,.35)}.szp-photo-fallback{height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:8px;color:#6f8394;background:radial-gradient(circle at 50% 30%,#e7edf0,#c9d4da)}.szp-photo-fallback svg{width:45%;max-height:55%;color:#698092}.szp-photo-fallback span{font-size:.78rem}.szp-pcard-info{padding:12px 2px 0;display:grid;gap:6px}.szp-pcard-line{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:22px}.szp-pcard-rate{display:inline-flex;align-items:center;gap:5px;font-size:.88rem}.szp-pcard-rate svg{width:16px;height:16px;fill:#e59a21}.szp-pcard-rate small{color:var(--szp-muted);font-size:.78rem}.szp-available{font-size:.74rem;color:var(--szp-green);font-weight:800;white-space:nowrap}.szp-pcard-role{color:var(--szp-navy-2);font-size:.88rem;font-weight:800}.szp-pcard-meta{color:var(--szp-muted);font-size:.78rem;line-height:1.7}.szp-pcard-tags,.szp-profile-tags{display:flex;flex-wrap:wrap;gap:5px}.szp-pcard-tags span,.szp-profile-tags span{color:var(--szp-navy-2);background:#eef2f3;border-radius:999px;padding:4px 8px;font-size:.74rem}.szp-pcard-price{color:var(--szp-muted);font-size:.78rem}.szp-pcard-price b{color:var(--szp-ink);font-size:.88rem}.szp-pcard-actions{display:flex;gap:7px;align-items:center;margin-top:5px}.szp-link-btn{color:var(--szp-navy-2);font-size:.78rem;font-weight:800;padding:9px 3px}.szp-pcard-actions .szp-btn{flex:1}.szp-people-more{text-align:center;margin-top:24px}.szp-empty{grid-column:1/-1;border:1px dashed #cfd7dc;border-radius:var(--szp-radius-lg);padding:28px;text-align:center;color:var(--szp-muted);display:grid;gap:16px;justify-items:center}

.szp-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:12px 23px;border:0;border-radius:12px;cursor:pointer;background:var(--szp-orange);color:#fff;font-weight:800;box-shadow:0 10px 20px rgba(228,122,44,.22);transition:transform var(--szp-fast) var(--szp-ease),background var(--szp-fast),box-shadow var(--szp-fast)}.szp-btn:hover{background:#cf6820;transform:translateY(-2px);box-shadow:0 15px 25px rgba(228,122,44,.28)}.szp-btn:active{transform:none}.szp-btn.ghost{background:transparent;color:var(--szp-navy-2);border:1px solid #b9c5ce;box-shadow:none}.szp-btn.ghost:hover{background:#eef2f3;border-color:var(--szp-navy-2)}.szp-btn.sm{min-height:38px;padding:8px 13px;font-size:.78rem;border-radius:9px}.szp-btn:disabled{opacity:.55;cursor:not-allowed;transform:none}

.szp-how-list{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding:0;margin:26px 0 0;list-style:none}.szp-how-list li{display:flex;gap:13px;padding:18px;border:1px solid var(--szp-border);border-radius:var(--szp-radius);background:#fff}.szp-how-list li>span{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;flex:none;background:var(--szp-orange);color:#fff;font-weight:800;font-size:.84rem}.szp-how-list b{font-size:.94rem}.szp-how-list p{font-size:.78rem;color:var(--szp-muted);line-height:1.8;margin-top:4px}

.szp-cats{border-top:1px solid var(--szp-border)}.szp-cat{border-bottom:1px solid var(--szp-border)}.szp-cat summary{display:flex;align-items:center;gap:13px;cursor:pointer;list-style:none;padding:17px 3px}.szp-cat summary::-webkit-details-marker{display:none}.szp-cat-ic{width:34px;height:34px;display:grid;place-items:center;flex:none;color:var(--szp-orange);border:1px solid #f0d2b7;border-radius:10px}.szp-cat-ic svg{width:21px;height:21px}.szp-cat-name{font-weight:800;flex:1}.szp-cat-cnt{color:var(--szp-muted);font-size:.78rem}.szp-cat-chev{width:8px;height:8px;border-inline-end:2px solid var(--szp-muted);border-block-end:2px solid var(--szp-muted);transform:rotate(45deg);transition:transform var(--szp-med)}.szp-cat[open] .szp-cat-chev{transform:rotate(-135deg)}.szp-cat-body{padding:0 3px 22px;animation:szpRise .25s var(--szp-ease) both}.szp-cat-desc{max-width:70ch;color:var(--szp-muted);font-size:.84rem;line-height:1.9;margin-bottom:13px}.szp-service-links{display:flex;flex-wrap:wrap;gap:7px}.szp-service-links a{display:inline-flex;align-items:center;gap:9px;padding:8px 12px;border-radius:9px;background:#f4f6f7;color:var(--szp-navy-2);font-size:.78rem;font-weight:700;border:1px solid var(--szp-border);transition:border-color var(--szp-fast),background var(--szp-fast)}.szp-service-links a span{color:var(--szp-orange)}.szp-service-links a:hover{border-color:#e1a16b;background:#fff3e6}

.szp-est{display:grid;grid-template-columns:1fr .9fr;gap:20px;align-items:start}.szp-card,.szp-readout{background:#fff;border:1px solid var(--szp-border);border-radius:var(--szp-radius-lg);padding:24px;box-shadow:0 8px 22px rgba(28,51,71,.05)}.szp-field{display:block;margin-bottom:17px}.szp-field>span{display:block;font-size:.84rem;font-weight:800;color:var(--szp-muted);margin-bottom:7px}.szp input[type=text],.szp input[type=tel],.szp input[type=email],.szp textarea,.szp select{width:100%;font:inherit;font-size:.94rem;padding:11px 13px;border:1px solid var(--szp-border);border-radius:11px;background:#fff;color:var(--szp-ink)}.szp input:focus,.szp textarea:focus,.szp select:focus{outline:0;border-color:var(--szp-orange);box-shadow:0 0 0 3px rgba(228,122,44,.12)}.szp textarea{min-height:102px;resize:vertical;line-height:1.8}.szp-lb{position:relative}.szp-lb:has(.szp-lb-list:not([hidden])){z-index:90}.szp-lb-btn{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;border:0;background:transparent;color:inherit;cursor:pointer;padding:11px 2px;text-align:start;font-size:.94rem}.szp-lb-val{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.szp-chev{width:8px;height:8px;border-inline-end:2px solid currentColor;border-block-end:2px solid currentColor;transform:rotate(45deg);flex:none}.szp-lb-list{position:absolute;z-index:100;inset-inline:0;top:calc(100% + 6px);max-height:280px;overflow:auto;margin:0;padding:6px;list-style:none;background:#fff;border:1px solid var(--szp-border);border-radius:12px;box-shadow:var(--szp-shadow-lg);color:var(--szp-ink)}.szp-lb-list li{padding:9px 10px;border-radius:8px;cursor:pointer;font-size:.84rem}.szp-lb-list li:hover,.szp-lb-list li[aria-selected=true]{background:var(--szp-soft);color:#bd5c19}.szp-lb-group{padding:8px 10px 4px!important;color:var(--szp-faint)!important;font-size:.74rem!important;font-weight:800;cursor:default!important}.szp-opts,.szp-methods{display:flex;flex-wrap:wrap;gap:7px}.szp-opt,.szp-method{cursor:pointer;padding:9px 13px;border-radius:9px;border:1px solid var(--szp-border);background:#fff;color:var(--szp-muted);font-size:.84rem;font-weight:700;transition:all var(--szp-fast)}.szp-opt:hover,.szp-method:hover{border-color:#e3a067}.szp-opt[aria-pressed=true],.szp-method[aria-pressed=true]{background:var(--szp-orange);border-color:var(--szp-orange);color:#fff}.szp-readout{background:var(--szp-navy);color:#fff}.szp-readout .szp-eyebrow{color:#ffb36f}.szp-big{font-size:clamp(1.45rem,3vw,2rem);font-weight:800;color:#ffc084;margin:7px 0 3px}.szp-unit{color:#b9c9d8;font-size:.78rem}.szp-bars{display:grid;gap:13px;margin-top:20px}.szp-bar-row{display:flex;justify-content:space-between;font-size:.78rem;color:#dce7ee}.szp-bar{height:6px;border-radius:99px;background:#28445d;overflow:hidden;margin-top:5px}.szp-bar i{display:block;height:100%;width:0;background:var(--szp-orange-2);transition:width .45s var(--szp-ease)}.szp-caveat{margin-top:19px;padding:11px 13px;border:1px solid rgba(255,194,126,.28);border-radius:10px;color:#ffd29d;font-size:.74rem;line-height:1.8}

.szp-media{max-width:820px;margin-bottom:25px}.szp-media-frame{overflow:hidden;border-radius:var(--szp-radius-lg);background:#000}.szp-media-frame iframe,.szp-media-frame video{display:block;width:100%;aspect-ratio:16/9;border:0}.szp-media-img{width:100%;border-radius:var(--szp-radius-lg)}.szp-trust-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.szp-trust-grid>div{padding:18px;border:1px solid var(--szp-border);border-radius:var(--szp-radius);background:#fff}.szp-trust-grid b{font-size:.94rem}.szp-trust-grid p{margin-top:5px;color:var(--szp-muted);font-size:.78rem;line-height:1.85}

/* Request sheet: modal on desktop, full-height sheet on phones. */
.szp-modal{--szp-ink:#172334;--szp-muted:#657286;--szp-faint:#8b96a5;--szp-border:#dfe5e9;--szp-orange:#e47a2c;direction:rtl;position:fixed;inset:0;z-index:2147483000;display:grid;place-items:center;padding:clamp(0px,4vw,32px);background:rgba(7,18,30,.66);backdrop-filter:blur(7px);font:400 16px/1.75 Vazirmatn,IRANSans,Tahoma,sans-serif;color:var(--szp-ink);animation:szpFade .18s ease both}.szp-modal[hidden]{display:none}.szp-modal-box{position:relative;width:min(700px,100%);max-height:min(760px,100%);display:flex;flex-direction:column;overflow:hidden;border-radius:22px;background:#fff;box-shadow:var(--szp-shadow-lg);animation:szpSheet .28s var(--szp-ease) both}.szp-modal-bar{display:flex;justify-content:space-between;gap:12px;padding:17px 20px;border-bottom:1px solid #edf0f2;flex:none}.szp-modal-bar b{display:block;font-size:.94rem}.szp-modal-bar small{display:block;color:var(--szp-muted);font-size:.74rem;margin-top:2px}.szp-modal-x{width:36px;height:36px;flex:none;display:grid;place-items:center;border:1px solid var(--szp-border);border-radius:50%;background:#fff;color:var(--szp-muted);cursor:pointer;font-size:1.5rem;line-height:1}.szp-modal-x:hover{border-color:var(--szp-orange);color:var(--szp-orange)}.szp-modal-scroll{min-height:0;overflow:auto}.szp-flow-head{padding:20px 24px 0}.szp-track{display:flex;gap:4px;margin:3px 0 8px}.szp-track i{height:4px;flex:1;border-radius:99px;background:#edf0f2;overflow:hidden}.szp-track i::after{content:'';display:block;height:100%;width:0;background:var(--szp-orange);transition:width var(--szp-med) var(--szp-ease)}.szp-track i.on::after{width:100%}.szp-flow-count{font-size:.74rem;color:var(--szp-muted);font-weight:700}.szp-flow-body{padding:20px 24px 28px}.szp-q{font-size:1.12rem;font-weight:800;margin-bottom:16px}.szp-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.szp-tile{width:100%;cursor:pointer;text-align:start;display:flex;align-items:center;gap:10px;padding:13px;border:1px solid var(--szp-border);border-radius:12px;background:#fff;color:var(--szp-ink);transition:border-color var(--szp-fast),background var(--szp-fast)}.szp-tile:hover{border-color:#e5a067}.szp-tile[aria-pressed=true]{border-color:var(--szp-orange);background:var(--szp-soft)}.szp-tile-ic{width:26px;height:26px;display:grid;place-items:center;color:var(--szp-orange);flex:none}.szp-tile-ic svg{width:100%;height:100%}.szp-tile-name{display:block;font-size:.84rem;font-weight:800}.szp-tile-cnt{display:block;color:var(--szp-muted);font-size:.74rem}.szp-flow-nav{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}.szp-flow-nav .szp-btn{flex:1}.szp-hint{color:var(--szp-muted);font-size:.78rem;line-height:1.8}.szp-status{min-height:1.25em;color:#a86a23;font-size:.78rem;margin-top:10px}.szp-status.err{color:var(--szp-danger)}.szp-field-error{display:block;color:var(--szp-danger);font-size:.74rem;line-height:1.6;margin-top:5px}.szp-field.has-error input,.szp-field.has-error textarea,.szp-field.has-error select{border-color:var(--szp-danger);box-shadow:0 0 0 3px rgba(186,59,50,.09)}.szp-pro-pick{display:grid;gap:8px}.szp-pro-row{display:flex;align-items:center;gap:10px;padding:11px 12px;border:1px solid var(--szp-border);border-radius:11px;background:#fff;cursor:pointer}.szp-pro-row:hover,.szp-pro-row[aria-pressed=true]{border-color:var(--szp-orange);background:var(--szp-soft)}.szp-pro-row img,.szp-pro-fallback{width:42px;height:42px;border-radius:9px;object-fit:cover;flex:none;background:#e7edef;color:var(--szp-navy-2);display:grid;place-items:center;font-weight:800}.szp-pro-row-name{font-size:.84rem;font-weight:800}.szp-pro-row-role{font-size:.74rem;color:var(--szp-muted)}.szp-upload{display:block;border:1px dashed #b9c5ce;border-radius:12px;padding:22px;text-align:center;cursor:pointer}.szp-upload:hover{border-color:var(--szp-orange)}.szp-upload input{display:none}.szp-upload p{font-size:.84rem;font-weight:700}.szp-upload small{display:block;color:var(--szp-muted);font-size:.74rem;margin-top:3px}.szp-files{display:flex;flex-wrap:wrap;gap:6px;margin-top:11px}.szp-file-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 9px;border-radius:8px;background:#f4f6f7;color:var(--szp-muted);font-size:.74rem}.szp-file-chip button{border:0;background:none;color:var(--szp-danger);cursor:pointer}.szp-summary{display:grid;gap:6px}.szp-sum-row{display:flex;justify-content:space-between;gap:15px;padding:9px 11px;border-radius:9px;background:#f6f8f8;font-size:.78rem}.szp-sum-row span{color:var(--szp-muted)}.szp-hp{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.szp-done{text-align:center}.szp-done .szp-anno{justify-content:center}.szp-done p{font-size:.84rem;color:var(--szp-muted)}

/* Provider profile: photo and decision-making information share the first viewport. */
.szp-profile{background:var(--szp-bg)}.szp-profile-wrap{padding-block:24px 74px}.szp-breadcrumb{display:flex;align-items:center;gap:8px;color:var(--szp-muted);font-size:.78rem;margin-bottom:22px}.szp-breadcrumb span{color:var(--szp-faint)}.szp-profile-hero{display:grid;grid-template-columns:minmax(260px,420px) minmax(0,1fr);gap:clamp(26px,5vw,70px);align-items:start;padding-bottom:38px;border-bottom:1px solid var(--szp-border)}.szp-profile-photo{position:relative;overflow:hidden;aspect-ratio:4/5;border-radius:var(--szp-radius-lg);background:#e1e8ea;box-shadow:var(--szp-shadow)}.szp-profile-photo img{width:100%;height:100%;object-fit:cover}.szp-profile-demo{position:absolute;inset-inline-start:14px;top:14px;border-radius:999px;padding:6px 11px;background:rgba(12,28,45,.82);color:#ffd29d;font-size:.78rem;font-weight:800}.szp-profile-summary{padding-top:10px}.szp-profile-kicker{display:flex;align-items:center;gap:12px;color:var(--szp-orange);font-size:.78rem;font-weight:800}.szp-verified{display:inline-flex;align-items:center;gap:4px;color:var(--szp-green);font-size:.78rem}.szp-verified svg{width:17px;height:17px}.szp-profile-summary .szp-h1{font-size:clamp(2rem,4vw,3.7rem);margin:9px 0 3px}.szp-profile-role{font-size:1.05rem;font-weight:700;color:var(--szp-navy-2)}.szp-profile-meta{display:flex;align-items:center;flex-wrap:wrap;gap:11px 18px;margin-top:16px;color:var(--szp-muted);font-size:.84rem}.szp-profile-meta>span{display:inline-flex;align-items:center;gap:5px}.szp-profile-meta svg{width:17px;height:17px}.szp-profile-rating{color:var(--szp-ink)}.szp-profile-rating svg{fill:#e59a21}.szp-profile-rating span{color:var(--szp-muted);font-size:.74rem}.szp-profile-about{color:var(--szp-muted);font-size:.94rem;line-height:2;margin-top:20px;max-width:62ch}.szp-profile-facts{display:flex;flex-wrap:wrap;gap:9px;margin-top:21px}.szp-profile-facts>div{min-width:120px;padding:12px 14px;border:1px solid var(--szp-border);border-radius:11px;background:#fff}.szp-profile-facts b{display:block;font-size:.94rem}.szp-profile-facts span{display:block;color:var(--szp-muted);font-size:.74rem;margin-top:3px}.szp-profile-price{display:grid;gap:1px;margin-top:17px;padding:13px 15px;border-radius:11px;background:var(--szp-soft);border:1px solid #f0d3b9}.szp-profile-price span{color:var(--szp-muted);font-size:.74rem}.szp-profile-price>b{font-size:.94rem}.szp-profile-price small{color:var(--szp-muted);font-size:.74rem}.szp-profile-cta{margin-top:20px}.szp-profile-content{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:clamp(28px,6vw,80px);padding-top:38px}.szp-profile-section{margin-bottom:36px}.szp-profile-section-head{margin-bottom:18px}.szp-portfolio-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.szp-portfolio-grid a{display:block;overflow:hidden;border-radius:13px;background:#e3e9eb}.szp-portfolio-grid a:first-child{grid-column:span 2}.szp-portfolio-grid img{width:100%;height:100%;aspect-ratio:4/3;object-fit:cover;transition:transform var(--szp-med)}.szp-portfolio-grid a:first-child img{aspect-ratio:16/9}.szp-portfolio-grid a:hover img{transform:scale(1.03)}.szp-profile-copy{color:var(--szp-muted);font-size:.94rem;line-height:2.1}.szp-profile-aside{display:grid;align-content:start;gap:22px}.szp-profile-aside section{padding-bottom:20px;border-bottom:1px solid var(--szp-border)}.szp-profile-aside h2{font-size:.94rem;margin-bottom:10px}.szp-profile-link{color:#bd5c19;font-size:.84rem;font-weight:800}.szp-profile-privacy{color:var(--szp-muted);font-size:.74rem;line-height:1.8}.szp-mobile-action{display:none}

@keyframes szpFade{from{opacity:0}to{opacity:1}}@keyframes szpSheet{from{opacity:0;translate:0 18px}to{opacity:1;translate:none}}@keyframes szpRise{from{opacity:0;translate:0 8px}to{opacity:1;translate:none}}

@media(max-width:860px){.szp-people{grid-template-columns:repeat(2,minmax(0,1fr))}.szp-market-search{grid-template-columns:1fr 1fr}.szp-search-submit{grid-column:1/-1}.szp-profile-hero{grid-template-columns:minmax(220px,330px) minmax(0,1fr);gap:24px}.szp-profile-content{grid-template-columns:minmax(0,1fr) 230px}.szp-how-list,.szp-trust-grid{grid-template-columns:1fr}.szp-how-list li{min-height:92px}}
@media(max-width:640px){.szp-wrap{padding-inline:18px}.szp-hero{padding-top:24px;border-radius:0 0 22px 22px}.szp-hero .szp-h1{font-size:clamp(1.9rem,9vw,2.55rem);line-height:1.35}.szp-hero .szp-lede{font-size:.88rem;line-height:1.85;margin-bottom:16px}.szp-market-search{display:flex;flex-direction:column;align-items:stretch;border-radius:15px;padding:7px}.szp-search-field{min-height:49px}.szp-search-submit{width:100%;min-height:46px}.szp-catrail{justify-content:flex-start}.szp-cat-pill{font-size:.74rem;padding:7px 11px}.szp-sec{padding-block:34px}.szp-sec-head-row{display:block}.szp-sec-head-row>p{margin-top:7px;font-size:.78rem}.szp-h2{font-size:1.55rem}.szp-people{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:1px 0 8px;margin-inline:-2px;scrollbar-width:none}.szp-people::-webkit-scrollbar{display:none}.szp-pcard{flex:0 0 min(82vw,315px);scroll-snap-align:start}.szp-pcard-media{aspect-ratio:3/4}.szp-people-more{margin-top:12px}.szp-how-list{gap:9px}.szp-how-list li{padding:14px}.szp-cat summary{padding-block:14px}.szp-cat-cnt{font-size:.74rem}.szp-service-links a{font-size:.74rem}.szp-est{grid-template-columns:1fr}.szp-trust-grid{gap:9px}.szp-modal{padding:0;place-items:stretch}.szp-modal-box{height:100%;max-height:none;width:100%;border-radius:0}.szp-modal-bar{padding:14px 17px}.szp-flow-head{padding:16px 18px 0}.szp-flow-body{padding:17px 18px 26px}.szp-tiles{grid-template-columns:1fr 1fr}.szp-profile-wrap{padding-block:17px 100px}.szp-breadcrumb{margin-bottom:16px}.szp-profile-hero{display:flex;flex-direction:column;gap:20px}.szp-profile-photo{width:min(100%,370px);margin-inline:auto;aspect-ratio:4/5}.szp-profile-summary{padding-top:0}.szp-profile-summary .szp-h1{font-size:2rem}.szp-profile-about{font-size:.84rem}.szp-profile-content{display:block;padding-top:30px}.szp-profile-aside{margin-top:28px}.szp-mobile-action{display:block;position:fixed;z-index:50;inset-inline:0;bottom:0;padding:9px 16px;background:rgba(255,255,255,.94);border-top:1px solid var(--szp-border);backdrop-filter:blur(10px)}.szp-mobile-action .szp-btn{width:100%}.szp-profile-cta{display:none}.szp-portfolio-grid{grid-template-columns:1fr 1fr}.szp-portfolio-grid a:first-child{grid-column:span 2}}
@media(max-width:360px){.szp-hero .szp-h1{font-size:1.75rem}.szp-tiles{grid-template-columns:1fr}.szp-pcard{flex-basis:86vw}}
@media(prefers-reduced-motion:reduce){.szp-rv{opacity:1;translate:none}.szp *,.szp *::before,.szp *::after{animation-duration:.001ms!important;transition-duration:.001ms!important}.szp-modal{backdrop-filter:none}}

/* The request sheet is moved to <body>, so it needs the action tokens that normally
 * live on .szp; keep its button and inline project fields self-contained. */
.szp-modal{--szp-navy-2:#132b43;--szp-soft:#fff3e6;--szp-shadow-lg:0 24px 70px rgba(6,18,32,.24);--szp-danger:#ba3b32;--szp-fast:.2s;--szp-med:.3s;--szp-ease:cubic-bezier(.2,.75,.28,1)}
.szp-modal .szp-btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:11px 21px;border:0;border-radius:11px;cursor:pointer;background:var(--szp-orange);color:#fff;font-weight:800;box-shadow:0 10px 20px rgba(228,122,44,.22);transition:transform var(--szp-fast),background var(--szp-fast)}
.szp-modal .szp-btn:hover{background:#cf6820;transform:translateY(-2px)}.szp-modal .szp-btn.ghost{background:#fff;color:var(--szp-navy-2);border:1px solid #b9c5ce;box-shadow:none}.szp-modal .szp-btn.sm{min-height:38px;padding:8px 13px;font-size:.78rem}.szp-modal .szp-inline-fields{display:grid;grid-template-columns:1.35fr .65fr;gap:9px}.szp-modal .szp-field small{font-size:.74rem;color:var(--szp-muted);font-weight:400}
@media(max-width:360px){.szp-modal .szp-inline-fields{grid-template-columns:1fr}}
.szp-pcard-info>.szp-btn{width:100%;margin-top:5px}
.szp-anno{display:inline-flex;align-items:center;gap:6px;color:var(--szp-orange);font-size:.78rem;font-weight:800;letter-spacing:.02em}

/* v2 marketplace surface. Scoped to szp-v17 so legacy v1 markup remains reversible. */
.szp-v17{--szp-v17-navy:#0b1d31;--szp-v17-orange:#e47a2c;--szp-v17-ink:#172334;--szp-v17-muted:#647286;--szp-v17-border:#e1e6ea;--szp-v17-surface:#fff;--szp-v17-bg:#f7f8f7;background:var(--szp-v17-bg);color:var(--szp-v17-ink);font-family:Vazirmatn,IRANSans,IRANYekan,Tahoma,sans-serif;min-height:60vh;overflow:clip}.szp-v17 *{box-sizing:border-box}.szp-v17-wrap{width:min(1200px,100%);margin-inline:auto;padding-inline:clamp(18px,4vw,48px)}.szp-v17 a{color:inherit}.szp-v17 h1,.szp-v17 h2,.szp-v17 h3,.szp-v17 p{margin:0}.szp-v17 h1,.szp-v17 h2,.szp-v17 h3{line-height:1.35;text-wrap:balance}.szp-v17 button,.szp-v17 input,.szp-v17 select,.szp-v17 textarea{font:inherit}.szp-v17 :focus-visible{outline:3px solid #f4a25f;outline-offset:3px}.szp-eyebrow{letter-spacing:0;color:var(--szp-v17-orange)}.szp-btn-primary{background:var(--szp-v17-orange)!important;color:#fff!important}.szp-btn-secondary{background:#fff!important;color:var(--szp-v17-navy)!important;border:1px solid #cbd4da!important;box-shadow:none!important}.szp-btn-small{min-height:38px;padding:8px 13px;font-size:.78rem;border-radius:9px}.szp-text-btn{border:0;background:none;color:var(--szp-v17-muted);cursor:pointer;font-size:.84rem;font-weight:700}.szp-v17-section{padding-block:clamp(48px,7vw,86px)}.szp-provider-section,.szp-guide-section,.szp-faq-section{background:var(--szp-v17-bg)}.szp-workflow-section{background:#fff}.szp-section-head-v17{display:flex;justify-content:space-between;align-items:end;gap:28px;margin-bottom:28px}.szp-section-head-v17 h2{font-size:clamp(1.65rem,3vw,2.7rem);margin-top:8px}.szp-section-head-v17 p{color:var(--szp-v17-muted);max-width:58ch;line-height:1.9;font-size:.94rem;margin-top:8px}.szp-search-panel-v17{position:relative;background:#fff;border:1px solid var(--szp-v17-border);border-radius:22px;padding:18px;box-shadow:0 14px 36px rgba(13,35,55,.07)}.szp-search-input{display:flex;align-items:center;gap:10px;border:2px solid #ced8de;border-radius:14px;min-height:60px;padding-inline:15px;color:var(--szp-v17-orange)}.szp-search-input>span{font-size:1.6rem}.szp-search-input input{border:0!important;outline:0!important;box-shadow:none!important;padding:8px 0!important;background:transparent!important;flex:1;min-width:0;color:var(--szp-v17-ink)!important}.szp-search-input input::placeholder{color:#86919b;opacity:1}.szp-search-input button{border:0;background:none;color:#86919b;font-size:1.3rem;cursor:pointer}.szp-search-suggestions{position:absolute;z-index:20;inset-inline:18px;top:84px;background:#fff;border:1px solid var(--szp-v17-border);border-radius:14px;padding:8px;box-shadow:0 22px 45px rgba(13,35,55,.16)}.szp-search-suggestions button{display:flex;align-items:center;justify-content:space-between;width:100%;padding:10px 12px;border:0;border-radius:9px;background:none;text-align:right;cursor:pointer}.szp-search-suggestions button:hover{background:#fff3e6}.szp-search-suggestions small{color:var(--szp-v17-muted);font-size:.78rem}.szp-search-filters{display:flex;align-items:end;gap:10px;flex-wrap:wrap;margin-top:13px}.szp-search-filters label{display:grid;gap:5px;min-width:190px;flex:1}.szp-search-filters label span{font-size:.78rem;color:var(--szp-v17-muted);font-weight:700}.szp-v17 select,.szp-v17 input:not([type=checkbox]):not([type=radio]),.szp-v17 textarea{border:1px solid #cbd5db;border-radius:11px;background:#fff;color:var(--szp-v17-ink);padding:11px 13px;min-height:46px}.szp-v17 textarea{min-height:112px;line-height:1.9;resize:vertical}.szp-v17 input::placeholder,.szp-v17 textarea::placeholder{color:#87929b;opacity:1}.szp-common-searches{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:15px;color:var(--szp-v17-muted);font-size:.78rem}.szp-common-searches button{border:1px solid #d6dfe4;background:#f8fafb;color:var(--szp-v17-navy);border-radius:999px;padding:6px 10px;cursor:pointer;font-size:.78rem}.szp-category-rail-v17{display:flex;gap:10px;overflow-x:auto;padding:3px 2px 8px;scrollbar-width:none}.szp-category-rail-v17::-webkit-scrollbar{display:none}.szp-category-chip{flex:0 0 148px;display:grid;gap:5px;text-align:right;min-height:112px;padding:15px;border:1px solid var(--szp-v17-border);border-radius:15px;background:#fff;color:var(--szp-v17-navy);cursor:pointer;box-shadow:0 7px 18px rgba(13,35,55,.04);transition:border-color .2s,transform .2s,background .2s}.szp-category-chip:hover,.szp-category-chip[aria-pressed=true]{border-color:#e8a065;background:#fff3e6;transform:translateY(-2px)}.szp-category-chip span:not(.szp-category-icon){font-size:.84rem;font-weight:800}.szp-category-chip small{color:var(--szp-v17-muted);font-size:.74rem}.szp-category-icon{width:30px;height:30px;display:grid;place-items:center;color:var(--szp-v17-orange)}.szp-category-icon svg{width:100%;height:100%}.szp-people-v17{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.szp-provider-card-v17{min-width:0;background:#fff;border:1px solid var(--szp-v17-border);border-radius:18px;overflow:hidden;box-shadow:0 10px 26px rgba(13,35,55,.06);transition:transform .22s,box-shadow .22s}.szp-provider-card-v17:hover{transform:translateY(-4px);box-shadow:0 18px 38px rgba(13,35,55,.12)}.szp-provider-card-media{position:relative;background:#e9eef0}.szp-provider-card-media>a{display:block;aspect-ratio:1.45;overflow:hidden}.szp-provider-card-media img{width:100%;height:100%;object-fit:cover}.szp-provider-card-media .szp-photo-fallback{min-height:210px}.szp-provider-card-body{padding:15px}.szp-provider-card-heading{display:flex;justify-content:space-between;gap:10px;align-items:start}.szp-provider-card-heading h3{font-size:1.05rem}.szp-provider-card-heading p{color:var(--szp-v17-muted);font-size:.78rem;margin-top:3px}.szp-availability{white-space:nowrap;color:#137c64;background:#e7f5ef;border-radius:999px;padding:4px 8px;font-size:.74rem;font-weight:800}.szp-badge-row{display:flex;flex-wrap:wrap;gap:5px;min-height:24px;margin-top:8px}.szp-badge{display:inline-flex;align-items:center;border-radius:999px;padding:4px 8px;background:#eef2f4;color:#556675;font-size:.74rem;font-weight:800}.szp-badge-verified{background:#e7f5ef;color:#137c64}.szp-badge-fast{background:#fff1df;color:#ad5a1e}.szp-badge-featured{background:#edeaff;color:#5c4fc3}.szp-badge-experienced{background:#edf2ff;color:#3762a6}.szp-badge-available{background:#e7f5ef;color:#137c64}.szp-provider-card-meta{display:flex;flex-wrap:wrap;gap:6px 12px;color:var(--szp-v17-muted);font-size:.74rem;margin-top:9px}.szp-provider-rating{display:flex;align-items:center;gap:5px;margin-top:9px;font-size:.84rem}.szp-provider-rating span{color:#dd921d}.szp-provider-rating small{color:var(--szp-v17-muted);font-size:.74rem}.szp-match-reasons{color:#ad5a1e;font-size:.74rem;margin-top:8px}.szp-card-price{font-size:.74rem;color:var(--szp-v17-muted);margin-top:8px}.szp-card-price strong{color:var(--szp-v17-ink)}.szp-provider-card-tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:11px}.szp-provider-card-tags span{padding:4px 7px;border-radius:6px;background:#f5f7f8;color:#566574;font-size:.74rem}.szp-provider-card-actions{display:flex;align-items:center;gap:7px;margin-top:12px}.szp-provider-card-actions .szp-link-btn{flex:1}.szp-demo-ribbon{position:absolute;top:12px;inset-inline-start:12px;border-radius:999px;padding:5px 9px;background:rgba(11,29,49,.88);color:#ffd49f;font-size:.74rem;font-weight:800}.szp-heart{position:absolute;top:12px;inset-inline-end:12px;width:32px;height:32px;border:1px solid rgba(255,255,255,.5);border-radius:50%;background:rgba(11,29,49,.75);color:#fff;cursor:pointer;font-size:1.1rem}.szp-people-more-v17{text-align:center;margin-top:24px}.szp-empty-v17{grid-column:1/-1;text-align:center;padding:38px 20px;border:1px dashed #cdd7dd;border-radius:18px;background:#fff;color:var(--szp-v17-muted)}.szp-empty-v17 h3{color:var(--szp-v17-ink);font-size:1.05rem}.szp-empty-v17 p{font-size:.84rem;margin:6px 0 16px}.szp-workflow-v17{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:0;padding:0;list-style:none}.szp-workflow-v17 li{position:relative;padding:20px;border:1px solid var(--szp-v17-border);border-radius:15px;background:#fff}.szp-workflow-v17 li>span{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--szp-v17-orange);color:#fff;font-weight:800;margin-bottom:13px}.szp-workflow-v17 b{font-size:.94rem}.szp-workflow-v17 p{color:var(--szp-v17-muted);font-size:.78rem;line-height:1.9;margin-top:6px}.szp-guide-grid-v17{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;align-items:start}.szp-guide-grid-v17 details{border:1px solid var(--szp-v17-border);border-radius:14px;background:#fff;transition:border-color .15s,box-shadow .15s}.szp-guide-grid-v17 details[open]{border-color:var(--szp-v17-orange);box-shadow:0 8px 20px rgba(228,122,44,.1)}.szp-guide-grid-v17 summary{display:flex;align-items:center;gap:10px;padding:15px;cursor:pointer;list-style:none}.szp-guide-grid-v17 summary::-webkit-details-marker{display:none}.szp-guide-grid-v17 summary b{flex:1;font-size:.88rem}.szp-guide-grid-v17 summary small{font-size:.74rem;color:var(--szp-v17-muted)}.szp-guide-grid-v17 summary::after{content:'';width:8px;height:8px;flex:none;border-inline-end:2px solid var(--szp-v17-muted);border-block-end:2px solid var(--szp-v17-muted);transform:rotate(45deg);transition:transform .2s}.szp-guide-grid-v17 details[open] summary::after{transform:rotate(-135deg);border-color:var(--szp-v17-orange)}.szp-guide-grid-v17 details>div{padding:0 15px 16px}.szp-guide-grid-v17 details p{color:var(--szp-v17-muted);font-size:.78rem;line-height:1.9}.szp-guide-links{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}.szp-guide-links button{border:1px solid #d9e0e4;background:#f8fafb;border-radius:8px;padding:7px 9px;font-size:.74rem;cursor:pointer;color:var(--szp-v17-navy)}.szp-faq-list{display:grid;gap:8px}.szp-faq-list details{border:1px solid var(--szp-v17-border);border-radius:12px;background:#fff}.szp-faq-list summary{padding:14px 16px;cursor:pointer;font-weight:800;font-size:.84rem;list-style:none}.szp-faq-list summary::-webkit-details-marker{display:none}.szp-faq-list summary:after{content:'+';float:left;color:var(--szp-v17-orange);font-size:1.15rem}.szp-faq-list details[open] summary:after{content:'−'}.szp-faq-list p{padding:0 16px 15px;color:var(--szp-v17-muted);font-size:.78rem;line-height:1.95}.szp-contact-section{background:#0b1d31;color:#fff}.szp-contact-section .szp-eyebrow{color:#ffc084}.szp-contact-section p{color:#d3dee7;max-width:55ch;font-size:.88rem;margin-top:8px}.szp-contact-section .szp-v17-wrap{display:flex;align-items:center;justify-content:space-between;gap:25px}.szp-contact-actions{display:flex;gap:8px;flex-wrap:wrap}.szp-compare-bar{position:fixed;z-index:60;inset-inline:18px;bottom:18px;display:flex;align-items:center;justify-content:center;gap:14px;padding:11px 14px;border-radius:999px;background:#0b1d31;color:#fff;box-shadow:0 18px 40px rgba(4,15,26,.28)}.szp-compare-bar[hidden]{display:none}.szp-compare-bar span{font-size:.84rem}.szp-gallery-dialog,.szp-compare-dialog{border:0;border-radius:18px;padding:0;max-width:min(900px,calc(100vw - 28px));background:#fff;box-shadow:0 25px 70px rgba(4,15,26,.35)}.szp-gallery-dialog::backdrop,.szp-compare-dialog::backdrop{background:rgba(4,15,26,.72)}.szp-gallery-dialog img{display:block;max-width:calc(100vw - 28px);max-height:80vh;object-fit:contain}.szp-gallery-dialog button,.szp-compare-dialog-head button{position:absolute;top:8px;inset-inline-start:8px;border:0;border-radius:50%;width:34px;height:34px;background:rgba(11,29,49,.8);color:#fff;font-size:1.2rem;cursor:pointer}.szp-compare-dialog{width:min(1000px,calc(100vw - 28px));padding:20px}.szp-compare-dialog-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.szp-compare-dialog-head button{position:static;background:#eef2f4;color:var(--szp-v17-navy)}.szp-compare-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.szp-compare-grid article{border:1px solid var(--szp-v17-border);border-radius:13px;padding:14px}.szp-compare-grid h3{font-size:.94rem}.szp-compare-grid p{color:var(--szp-v17-muted);font-size:.78rem;margin-top:4px}.szp-compare-grid dl{display:grid;gap:8px;margin:18px 0}.szp-compare-grid dl div{display:flex;justify-content:space-between;gap:10px;border-bottom:1px solid #edf0f2;padding-bottom:7px}.szp-compare-grid dt{color:var(--szp-v17-muted);font-size:.74rem}.szp-compare-grid dd{margin:0;font-size:.78rem;text-align:left}.szp-modal-open{overflow:hidden}.szp-dialog{position:relative;z-index:1;width:min(760px,100%);max-height:min(820px,100%);display:flex;flex-direction:column;overflow:hidden;border-radius:22px;background:#fff;box-shadow:0 25px 80px rgba(4,15,26,.35);animation:szpV17In .26s ease both}.szp-modal-backdrop{position:absolute;inset:0}.szp-dialog-head{display:flex;justify-content:space-between;gap:15px;padding:20px 24px 15px;border-bottom:1px solid #edf0f2}.szp-dialog-head h2{font-size:1.15rem}.szp-dialog-head p{color:var(--szp-v17-muted);font-size:.78rem;margin-top:3px}.szp-dialog-kicker,.szp-step-kicker{display:block;color:var(--szp-v17-orange);font-size:.74rem;font-weight:800}.szp-dialog-close{width:38px;height:38px;flex:none;border:1px solid #d6dfe4;border-radius:50%;background:#fff;color:#697986;font-size:1.45rem;line-height:1;cursor:pointer}.szp-dialog-progress{padding:13px 24px 0}.szp-dialog-progress:before{content:'';display:block;height:5px;border-radius:99px;background:#e9eef0}.szp-dialog-progress span{display:block;height:5px;margin-top:-5px;border-radius:99px;background:var(--szp-v17-orange);transition:width .25s}.szp-dialog-progress b{display:block;color:var(--szp-v17-muted);font-size:.74rem;margin-top:6px}.szp-dialog-body{min-height:0;overflow:auto;padding:17px 24px 25px}.szp-dialog-actions{display:flex;justify-content:space-between;gap:8px;padding:12px 24px;border-top:1px solid #edf0f2;background:#fff}.szp-dialog-actions .szp-btn{min-width:130px}.szp-step-intro{margin-bottom:17px}.szp-step-intro h3{font-size:1.35rem;margin-top:5px}.szp-step-intro p{color:var(--szp-v17-muted);font-size:.84rem;line-height:1.9;margin-top:4px}.szp-flow-search{display:flex;align-items:center;gap:8px;border:2px solid #cfd9de;border-radius:13px;padding-inline:12px;color:var(--szp-v17-orange)}.szp-flow-search input{border:0!important;outline:0!important;box-shadow:none!important;flex:1;min-width:0}.szp-flow-search button{border:0;background:none;color:#87939b;cursor:pointer;font-size:1.2rem}.szp-flow-suggestion-list{display:grid;gap:6px;margin-top:10px}.szp-flow-suggestion-list button{display:flex;justify-content:space-between;align-items:center;padding:9px 11px;border:1px solid #e0e6e9;border-radius:9px;background:#fff;text-align:right;cursor:pointer}.szp-flow-suggestion-list button:hover{background:#fff3e6;border-color:#e8a065}.szp-flow-suggestion-list small{color:var(--szp-v17-muted);font-size:.74rem}.szp-selected-summary,.szp-inline-status{padding:10px 12px;margin-top:11px;border-radius:9px;background:#f5f7f8;color:var(--szp-v17-muted);font-size:.78rem}.szp-inline-status.is-error{background:#fff0ef;color:#a23c34}.szp-dialog-body>label,.szp-form-grid label{display:grid;gap:6px;margin-bottom:11px}.szp-dialog-body label>span,.szp-choice-field legend{font-size:.78rem;color:#536473;font-weight:800}.szp-dialog-body label small,.szp-choice-field small{color:#89959e;font-weight:400;font-size:.74rem}.szp-adaptive-grid,.szp-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 10px}.szp-form-wide{grid-column:1/-1}.szp-coherent-field{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) 180px;gap:10px}.szp-coherent-field label{display:grid;gap:6px}.szp-choice-field{border:0;padding:0;margin:4px 0 13px}.szp-choice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-top:7px}.szp-choice-grid label{display:block;position:relative}.szp-choice-grid input{position:absolute;opacity:0}.szp-choice-grid label span{display:block;border:1px solid #d7e0e4;border-radius:9px;padding:10px 11px;cursor:pointer;color:#536473;font-size:.78rem}.szp-choice-grid input:checked+span{border-color:var(--szp-v17-orange);background:#fff3e6;color:#9f4e1a}.szp-checkbox-line{display:flex!important;align-items:center;gap:7px!important;color:#536473!important;font-size:.78rem;margin:8px 0 10px!important}.szp-checkbox-line input{width:17px;height:17px;accent-color:var(--szp-v17-orange)}.szp-upload-list{display:flex;gap:6px;flex-wrap:wrap;margin-top:7px}.szp-upload-list span{background:#e9f5f0;color:#137c64;border-radius:8px;padding:5px 8px;font-size:.74rem}.szp-provider-paths{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;margin-bottom:13px}.szp-provider-paths label{display:block;position:relative}.szp-provider-paths input{position:absolute;opacity:0}.szp-provider-paths label span{display:grid;gap:4px;padding:13px;border:1px solid #d7e0e4;border-radius:11px;cursor:pointer}.szp-provider-paths input:checked+span{border-color:var(--szp-v17-orange);background:#fff3e6}.szp-provider-paths b{font-size:.84rem}.szp-provider-paths small{color:var(--szp-v17-muted);font-size:.74rem}.szp-flow-provider-results{display:grid;gap:8px;max-height:260px;overflow:auto}.szp-flow-provider-results .szp-provider-card-v17{display:grid;grid-template-columns:110px 1fr}.szp-flow-provider-results .szp-provider-card-media>a{height:100%;aspect-ratio:auto}.szp-flow-provider-results .szp-provider-card-body{padding:11px}.szp-flow-provider-results .szp-provider-card-tags,.szp-flow-provider-results .szp-provider-card-actions .szp-link-btn{display:none}.szp-flow-provider-results .szp-provider-card-actions{margin-top:6px}.szp-review-card{display:grid;gap:6px}.szp-review-row{display:grid;grid-template-columns:90px 1fr auto;align-items:center;gap:10px;padding:10px 11px;background:#f6f8f8;border-radius:9px;font-size:.78rem}.szp-review-row span{color:var(--szp-v17-muted)}.szp-review-row b{font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.szp-review-row button{border:0;background:none;color:#ad5a1e;font-size:.74rem;cursor:pointer}.szp-review-files{color:var(--szp-v17-muted);font-size:.78rem;margin-top:11px}.szp-autosave-note{margin-top:11px;padding:9px 11px;border-radius:9px;background:#fff6ec;border:1px solid #f1d9bf;color:#8a5700;font-size:.78rem;line-height:1.8}.szp-success-state{text-align:center;padding:35px 10px}.szp-success-icon{display:grid;place-items:center;width:58px;height:58px;margin:0 auto 12px;border-radius:50%;background:#e4f4ef;color:#137c64;font-size:1.8rem;font-weight:900}.szp-success-state h3{font-size:1.25rem}.szp-success-state p{color:var(--szp-v17-muted);font-size:.84rem;line-height:1.9;margin:8px auto 20px;max-width:45ch}.szp-success-state .szp-success-account{display:block;max-width:45ch;margin:0 auto 20px;padding:10px 12px;border:1px solid #b6ded0;border-radius:10px;background:#e7f5ef;color:#0f6b52;font-size:.78rem;line-height:1.9;font-weight:700}.szp-profile-v17{padding-bottom:80px}.szp-profile-v17>.szp-v17-wrap{padding-top:25px}.szp-profile-hero-v17{display:grid;grid-template-columns:minmax(280px,460px) minmax(0,1fr);gap:clamp(28px,6vw,80px);align-items:start;padding-bottom:38px;border-bottom:1px solid var(--szp-v17-border)}.szp-profile-photo-v17{position:relative;overflow:hidden;aspect-ratio:4/4.7;border-radius:22px;background:#e7edef;box-shadow:0 18px 40px rgba(13,35,55,.14)}.szp-profile-photo-v17 img{width:100%;height:100%;object-fit:cover}.szp-profile-identity-v17{padding-top:10px}.szp-profile-kicker{display:flex;align-items:center;gap:7px;flex-wrap:wrap;color:var(--szp-v17-orange);font-size:.78rem;font-weight:800}.szp-profile-identity-v17 h1{font-size:clamp(2.2rem,4.8vw,4rem);margin:12px 0 3px}.szp-profile-role-v17{font-size:1.1rem;font-weight:800;color:var(--szp-v17-navy)}.szp-profile-facts-inline{display:flex;flex-wrap:wrap;gap:8px 15px;color:var(--szp-v17-muted);font-size:.78rem;margin-top:15px}.szp-profile-rating-v17{display:flex;align-items:center;gap:6px;margin-top:14px}.szp-profile-rating-v17 span{color:#d99218;font-size:1.25rem}.szp-profile-rating-v17 small{color:var(--szp-v17-muted);font-size:.74rem}.szp-profile-price-v17{display:grid;gap:3px;margin-top:16px;padding:13px 15px;border-radius:12px;background:#fff3e6;border:1px solid #f1d0b0}.szp-profile-price-v17 small{color:var(--szp-v17-muted);font-size:.74rem}.szp-profile-price-v17 strong{font-size:.98rem}.szp-profile-price-v17 span{color:var(--szp-v17-muted);font-size:.74rem}.szp-profile-about-v17{max-width:62ch;color:var(--szp-v17-muted);font-size:.94rem;line-height:2;margin-top:17px}.szp-profile-actions-v17{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px}.szp-profile-privacy{color:var(--szp-v17-muted);font-size:.74rem;line-height:1.8;margin-top:14px}.szp-qa-list{list-style:none;margin:0;padding:0;display:grid;gap:14px}.szp-qa-list>li{border:1px solid var(--szp-v17-border,#e1e6ea);border-radius:14px;padding:15px;background:#fff}.szp-qa-list>li>strong{display:block;font-size:.94rem;line-height:1.9;color:#172334}.szp-qa-meta{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:6px;color:#647286;font-size:.74rem}.szp-qa-answers{display:grid;gap:9px;margin-top:11px}.szp-qa-answers:empty{display:none}.szp-qa-answer{border-inline-start:3px solid #dfe5ea;padding:2px 12px 2px 0;padding-inline-start:12px;padding-inline-end:0}.szp-qa-answer p{margin:5px 0 0;color:#3b4a5a;font-size:.84rem;line-height:1.95}.szp-qa-answer time{display:block;margin-top:4px;color:#8a95a1;font-size:.74rem}.szp-qa-role{display:inline-block;border-radius:999px;padding:3px 9px;font-size:.74rem;font-weight:800;background:#edf2ff;color:#3762a6}.szp-qa-role-admin{background:#fff4e2;color:#8a5700}.szp-qa-role-provider{background:#e7f5ef;color:#0f6b52}.szp-qa-answer-admin{border-inline-start-color:#e8b774}.szp-qa-answer-provider{border-inline-start-color:#8fcbb6}.szp-qa-answer-user{border-inline-start-color:#b9c8e4}.szp-qa-answer-form{display:grid;gap:7px;margin-top:11px}.szp-qa-answer-form textarea{width:100%;min-height:64px;border:1px solid #cbd5db;border-radius:10px;padding:9px 11px;font:inherit;background:#fff;color:#172334;line-height:1.9}.szp-qa-answer-form button{justify-self:start}.szp-qa-answer-signin{margin-top:10px;font-size:.78rem}.szp-qa-answer-signin a{color:#ad5a1e;font-weight:700}.szp-qa-block{font-family:Vazirmatn,IRANSans,IRANYekan,Tahoma,sans-serif;direction:rtl;text-align:right;color:#172334}.szp-qa-block h2{font-size:1.25rem;margin:6px 0 14px}.szp-qa-block .szp-eyebrow{display:block;color:#e47a2c;font-size:.74rem;font-weight:800}.szp-demo-ribbon{position:absolute;top:14px;inset-inline-start:14px;z-index:2}.szp-profile-layout-v17{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:clamp(30px,7vw,90px);padding-top:38px}.szp-profile-section-v17{padding-bottom:30px;margin-bottom:30px;border-bottom:1px solid var(--szp-v17-border)}.szp-profile-section-v17 h2{font-size:1.45rem;margin:7px 0 13px}.szp-profile-section-v17>p{color:var(--szp-v17-muted);font-size:.88rem;line-height:2}.szp-tag-cloud,.szp-region-list-v17{display:flex;flex-wrap:wrap;gap:7px}.szp-tag-cloud span,.szp-region-list-v17 span{padding:7px 10px;border-radius:8px;background:#eaf4f1;color:#176d5b;font-size:.78rem;font-weight:700}.szp-tag-cloud .szp-tag-soft{background:#f0f3f4;color:#566574}.szp-gallery-v17{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.szp-gallery-v17 button{display:block;padding:0;border:0;border-radius:12px;overflow:hidden;background:#e7edef;cursor:pointer}.szp-gallery-v17 button:first-child{grid-column:span 2;grid-row:span 2}.szp-gallery-v17 img{width:100%;height:100%;aspect-ratio:1.35;object-fit:cover}.szp-side-card{display:grid;gap:9px;padding:18px;border:1px solid var(--szp-v17-border);border-radius:15px;background:#fff;box-shadow:0 8px 22px rgba(13,35,55,.05);margin-bottom:13px}.szp-side-card h2{font-size:1rem}.szp-side-card p{color:var(--szp-v17-muted);font-size:.78rem;line-height:1.9}.szp-related-v17{padding-top:48px}.szp-related-grid{margin-top:18px}.szp-mobile-action-v17{display:none}.szp-account-gate{padding:70px 22px;text-align:center}.szp-account-gate h1{font-size:2rem}.szp-account-gate p{color:var(--szp-v17-muted);margin:10px 0 18px}.szp-account-hero{padding:55px 0;background:#0b1d31;color:#fff}.szp-account-hero h1{font-size:clamp(2rem,4vw,3.5rem);margin-top:9px}.szp-account-hero p{max-width:62ch;color:#cedae4;margin-top:10px}.szp-application-card,.szp-dashboard-card{background:#fff;border:1px solid var(--szp-v17-border);border-radius:18px;padding:24px;box-shadow:0 10px 30px rgba(13,35,55,.06)}.szp-application-card{margin-block:28px 70px}.szp-application-intro{display:flex;gap:12px;align-items:start;margin-bottom:20px}.szp-step-number{display:grid;place-items:center;width:32px;height:32px;flex:none;border-radius:50%;background:var(--szp-v17-orange);color:#fff;font-weight:800}.szp-application-intro h2{font-size:1.3rem}.szp-application-intro p,.szp-muted{color:var(--szp-v17-muted);font-size:.84rem}.szp-application-tax{display:grid;grid-template-columns:1.4fr 1fr;gap:24px;border-block:1px solid var(--szp-v17-border);padding-block:20px;margin-block:16px}.szp-check-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:10px}.szp-check-grid fieldset{border:0;padding:0;margin:0}.szp-check-grid legend{font-size:.78rem;font-weight:800;color:var(--szp-v17-navy);margin-bottom:5px}.szp-check-grid label{display:flex;align-items:center;gap:6px;font-size:.78rem;color:var(--szp-v17-muted)}.szp-check-grid input{accent-color:var(--szp-v17-orange)}.szp-check-grid-compact{grid-template-columns:1fr}.szp-form-feedback{min-height:1.4em;color:#137c64;font-size:.84rem;margin:12px 0}.szp-form-feedback.is-error{color:#a23c34}.szp-honeypot{position:absolute!important;left:-9999px!important}.szp-provider-dashboard{padding-bottom:70px}.szp-dashboard-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:20px;padding-top:28px}.szp-dashboard-main{display:grid;gap:18px}.szp-card-head{display:flex;justify-content:space-between;gap:15px;align-items:start;margin-bottom:18px}.szp-card-head h2{font-size:1.3rem;margin-top:5px}.szp-dashboard-media{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;margin-bottom:18px}.szp-dashboard-media figure{margin:0;border-radius:10px;overflow:hidden;background:#eef2f4}.szp-dashboard-media img{width:100%;aspect-ratio:1;object-fit:cover}.szp-dashboard-media figcaption{padding:5px 7px;color:var(--szp-v17-muted);font-size:.74rem}.szp-dashboard-side{display:grid;align-content:start;gap:18px}.szp-provider-requests{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:8px}.szp-provider-requests li{display:grid;gap:2px;padding:9px;border-radius:9px;background:#f5f7f8}.szp-provider-requests b{font-size:.78rem}.szp-provider-requests span{font-size:.78rem}.szp-provider-requests small{font-size:.74rem;color:var(--szp-v17-muted)}.szp-pd-support-note{margin-top:12px;padding-top:11px;border-top:1px solid #e6eaee;font-size:.78rem;line-height:1.9}.szp-dash-inject{margin-bottom:18px}@media (max-width:640px){.szp-select-list.szp-select-portal .szp-select-option{min-height:46px}}.szp-compare-swipe{margin:0 0 9px;color:#8a5700;background:#fff6ec;border:1px solid #f1d9bf;border-radius:9px;padding:7px 10px;font-size:.74rem}.szp-compare-nav{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:11px}.szp-compare-position{color:#647286;font-size:.78rem;font-weight:700}.szp-compare-dots{display:flex;gap:6px}/* !important because the theme paints every <button> with its own orange - measured on the live page, all three dots came out the same colour and the current one was indistinguishable, which is the whole job of a dot. */.szp-compare-dot{width:10px;height:10px;padding:0!important;border:0!important;border-radius:50%!important;background:#cfd8e0!important;box-shadow:none!important;cursor:pointer;min-width:0;min-height:0}.szp-compare-dot.is-current{background:#e47a2c!important;transform:scale(1.3);box-shadow:0 0 0 3px rgba(228,122,44,.22)!important}.szp-dash-qa-answers{display:grid;gap:8px;margin-top:9px}.szp-pd-tab-input{position:absolute;opacity:0;pointer-events:none}.szp-pd-tablist{display:flex;gap:6px;flex-wrap:wrap;border-bottom:1px solid #e6eaee;margin-bottom:14px}.szp-pd-tab{padding:9px 13px;border-radius:11px 11px 0 0;cursor:pointer;font-size:.84rem;font-weight:800;color:#647286;display:inline-flex;align-items:center;gap:6px;border:1px solid transparent;border-bottom:0;margin-bottom:-1px}.szp-pd-tab span{min-width:22px;height:22px;display:inline-grid;place-items:center;border-radius:999px;background:#eef2f4;color:#536473;font-size:.74rem}.szp-pd-tab:hover{color:#172334}.szp-pd-panel{display:none}#szpPdTab-incoming:checked~.szp-pd-tablist label[for="szpPdTab-incoming"],#szpPdTab-working:checked~.szp-pd-tablist label[for="szpPdTab-working"],#szpPdTab-done:checked~.szp-pd-tablist label[for="szpPdTab-done"]{color:#172334;background:#fff;border-color:#e6eaee}#szpPdTab-incoming:checked~.szp-pd-tablist label[for="szpPdTab-incoming"] span,#szpPdTab-working:checked~.szp-pd-tablist label[for="szpPdTab-working"] span,#szpPdTab-done:checked~.szp-pd-tablist label[for="szpPdTab-done"] span{background:#fff3e6;color:#ad5a1e}#szpPdTab-incoming:checked~#szpPdIncoming,#szpPdTab-working:checked~#szpPdWorking,#szpPdTab-done:checked~#szpPdDone{display:block}#szpPdIncoming:target,#szpPdWorking:target,#szpPdDone:target{display:block}.szp-pd-tab-input:focus-visible~.szp-pd-tablist label{outline:2px solid #f4a25f;outline-offset:2px}.szp-pd-support-note .szp-text-btn{color:#ad5a1e;font-weight:800}.szp-profile-prompt{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;padding:16px;background:rgba(4,15,26,.62);font-family:Vazirmatn,IRANSans,IRANYekan,Tahoma,sans-serif}.szp-profile-prompt-card{width:min(430px,100%);max-height:90vh;overflow:auto;background:#fff;color:#172334;border-radius:18px;padding:22px;box-shadow:0 25px 70px rgba(4,15,26,.35);text-align:right;direction:rtl}.szp-profile-prompt-card .szp-step-kicker{display:block;color:#e47a2c;font-size:.74rem;font-weight:800}.szp-profile-prompt-card h3{font-size:1.08rem;margin:6px 0 0;line-height:1.6}.szp-profile-prompt-card>p{color:#647286;font-size:.84rem;line-height:1.9;margin:8px 0 14px}.szp-profile-prompt-card label{display:grid;gap:6px;margin-bottom:11px}.szp-profile-prompt-card label span{font-size:.78rem;color:#536473;font-weight:800}.szp-profile-prompt-card label small{color:#89959e;font-weight:400;font-size:.74rem}/* !important on purpose: this card is our markup rendered inside the theme's own dashboard, whose stylesheet paints every input dark navy on white and every button transparent - measured on the live page, the fields and the save button were unreadable. Scoped to this card only. */.szp-profile-prompt-card input{border:1px solid #cbd5db!important;border-radius:11px!important;background:#fff!important;color:#172334!important;padding:11px 13px!important;min-height:46px;font:inherit;width:100%;box-shadow:none!important}.szp-profile-prompt-card input::placeholder{color:#87929b!important;opacity:1}.szp-profile-prompt-card input:focus-visible{outline:3px solid #f4a25f;outline-offset:2px}.szp-profile-prompt-actions{display:flex;align-items:center;gap:10px;margin-top:4px}.szp-profile-prompt-actions .szp-btn{min-width:120px;min-height:44px;border:0!important;border-radius:11px!important;background:#e47a2c!important;color:#fff!important;font-weight:800;cursor:pointer;box-shadow:none!important;padding:10px 16px!important}.szp-profile-prompt-actions .szp-text-btn{border:0!important;background:none!important;color:#647286!important;font-size:.84rem;font-weight:700;cursor:pointer;padding:10px!important}.szp-profile-prompt-card [data-szp-profile-status]{min-height:1.4em;color:#0f6b52;font-size:.78rem;margin:6px 0 10px}.szp-profile-prompt-card [data-szp-profile-status].is-error{color:#a23c34}@media (max-width:480px){.szp-profile-prompt{align-items:end}.szp-profile-prompt-card{border-radius:18px 18px 0 0}}
@keyframes szpV17In{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media(max-width:900px){.szp-hero-grid{grid-template-columns:1fr}.szp-people-v17{grid-template-columns:repeat(2,minmax(0,1fr))}.szp-workflow-v17{grid-template-columns:repeat(2,1fr)}.szp-profile-hero-v17{grid-template-columns:minmax(240px,360px) minmax(0,1fr);gap:25px}.szp-profile-layout-v17{grid-template-columns:minmax(0,1fr) 240px}.szp-dashboard-grid{grid-template-columns:1fr 270px}}
@media(max-width:640px){.szp-v17-wrap{padding-inline:18px}.szp-section-head-v17,.szp-contact-section .szp-v17-wrap{display:block}.szp-section-head-v17>.szp-link-btn{display:inline-flex;margin-top:14px}.szp-search-filters{display:grid;grid-template-columns:1fr 1fr}.szp-search-filters label{min-width:0}.szp-search-filters .szp-btn{grid-column:1/-1;width:100%}.szp-category-rail-v17{margin-inline:-2px}.szp-people-v17{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;overflow:visible;padding:2px 0 8px}.szp-people-v17>.szp-provider-card-v17{flex:initial;width:auto;scroll-snap-align:none}.szp-workflow-v17,.szp-guide-grid-v17{grid-template-columns:1fr}.szp-contact-actions{margin-top:18px}.szp-contact-actions .szp-btn{flex:1}.szp-compare-bar{inset-inline:10px;bottom:10px;gap:8px;padding:9px 10px}.szp-compare-bar>span{white-space:normal!important;text-align:center;line-height:1.7;flex:1 1 100%}.szp-compare-bar span{font-size:.74rem}.szp-compare-grid{grid-template-columns:1fr}.szp-dialog{height:100%;max-height:none;border-radius:0}.szp-dialog-head{padding:15px 17px 11px}.szp-dialog-progress{padding-inline:17px}.szp-dialog-body{padding:16px 17px 24px}.szp-dialog-actions{padding:10px 17px}.szp-dialog-actions .szp-btn{min-width:0;flex:1}.szp-adaptive-grid,.szp-form-grid,.szp-application-tax{grid-template-columns:1fr}.szp-coherent-field{grid-template-columns:minmax(0,1fr) 130px}.szp-choice-grid,.szp-provider-paths{grid-template-columns:1fr}.szp-flow-provider-results .szp-provider-card-v17{grid-template-columns:88px 1fr}.szp-profile-v17>.szp-v17-wrap{padding-top:17px;padding-bottom:94px}.szp-profile-hero-v17{display:flex;flex-direction:column;gap:20px}.szp-profile-photo-v17{width:min(100%,390px);margin-inline:auto}.szp-profile-identity-v17{padding-top:0}.szp-profile-identity-v17 h1{font-size:2.1rem}.szp-profile-layout-v17{display:block;padding-top:28px}.szp-profile-aside-v17{margin-top:24px}.szp-gallery-v17{grid-template-columns:repeat(2,1fr)}.szp-gallery-v17 button:first-child{grid-column:span 2;grid-row:auto}.szp-mobile-action-v17{display:block;position:fixed;z-index:55;inset-inline:0;bottom:0;padding:9px 16px;background:rgba(255,255,255,.95);border-top:1px solid var(--szp-v17-border);backdrop-filter:blur(10px)}.szp-mobile-action-v17 .szp-btn{width:100%}.szp-application-card,.szp-dashboard-card{padding:17px}.szp-dashboard-grid{display:block;padding-top:18px}.szp-dashboard-side{margin-top:18px}.szp-dashboard-media{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:360px){.szp-hero-actions{grid-template-columns:1fr}.szp-coherent-field{grid-template-columns:1fr}.szp-profile-identity-v17 h1{font-size:1.85rem}}
@media(prefers-reduced-motion:reduce){.szp-v17 *,.szp-v17 *::before,.szp-v17 *::after{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}
.szp-guide-links a{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid #d9e0e4;border-radius:999px;background:#f8fafb;color:var(--szp-v17-navy);text-decoration:none;font-size:.78rem;font-weight:700}.szp-guide-links a:hover,.szp-guide-links a:focus-visible{background:#fff3e6;border-color:var(--szp-v17-orange);color:#a85c20}.szp-estimate-grid-v17{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,.8fr);gap:18px;align-items:stretch}.szp-estimate-field{display:grid;gap:8px;margin-bottom:16px;color:var(--szp-v17-muted);font-size:.84rem;font-weight:700}.szp-estimate-field input[type=range]{width:100%;accent-color:var(--szp-v17-orange);padding:0}.szp-estimate-options{display:flex;gap:8px;flex-wrap:wrap}.szp-estimate-options .szp-opt{border:1px solid #cbd5db;background:#fff;border-radius:999px;padding:8px 12px;font-size:.78rem;cursor:pointer}.szp-estimate-options .szp-opt[aria-pressed=true]{border-color:var(--szp-v17-orange);background:#fff3e6;color:#a85c20}.szp-estimate-readout{display:grid;align-content:center;gap:7px;border-radius:18px;padding:24px;background:linear-gradient(135deg,#0b1d31,#183853);color:#fff}.szp-estimate-readout strong{font-size:clamp(1.4rem,3vw,2.2rem);color:#ffd2a7}.szp-estimate-readout>span:not(.szp-eyebrow){font-size:.78rem;color:#d2dee8}.szp-estimate-readout p{color:#d2dee8;font-size:.74rem;line-height:1.8;margin-top:10px}.szp-estimate-bars{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:10px}.szp-estimate-bars div{display:grid;gap:3px;padding:9px;border:1px solid rgba(255,255,255,.18);border-radius:10px}.szp-estimate-bars span{font-size:.74rem;color:#b9c9d6}.szp-estimate-bars b{font-size:.84rem}.szp-trust-v17{background:#fff}.szp-trust-grid-v17{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:20px}.szp-trust-grid-v17>div{padding:18px;border:1px solid var(--szp-v17-border);border-radius:14px;background:#fbfcfc}.szp-trust-grid-v17 b{font-size:.94rem}.szp-trust-grid-v17 p{margin-top:7px;color:var(--szp-v17-muted);font-size:.78rem;line-height:1.9}.szp-media-v17{margin-top:18px;overflow:hidden;border-radius:16px}.szp-media-v17 img,.szp-media-v17 video{max-width:100%;height:auto;display:block}@media(max-width:640px){.szp-estimate-grid-v17,.szp-trust-grid-v17{grid-template-columns:1fr}.szp-estimate-readout{padding:19px}}
.szp-dashboard-tax{display:grid;grid-template-columns:1.4fr 1fr;gap:22px;border-block:1px solid var(--szp-v17-border);padding-block:18px;margin-block:16px}@media(max-width:640px){.szp-dashboard-tax{grid-template-columns:1fr}}

/* v2.1 targeted refinements: preserve the navy hero, tighten the rhythm, and keep
 * interactive layers above the following sections. */
.szp-v17{overflow:visible}
.szp-v17-section{padding-block:clamp(30px,4.6vw,58px)}
.szp-search-panel-v17{z-index:30}
.szp-search-suggestions{z-index:100;top:calc(100% - 91px);max-height:min(360px,60vh);overflow:auto;overscroll-behavior:contain}
.szp-search-suggestions button:focus-visible{background:#fff3e6}
.szp-category-rail-v17{gap:12px;padding-block:5px 10px}
.szp-category-chip{background:linear-gradient(145deg,#fff,#f7faf9);border-color:#d4dee0;box-shadow:0 10px 22px rgba(13,35,55,.06)}
.szp-category-chip:hover,.szp-category-chip[aria-pressed=true]{background:#fff8ef;border-color:#e28a45;box-shadow:0 12px 24px rgba(228,122,44,.12)}


.szp-dialog{height:min(820px,calc(100dvh - 24px));max-height:calc(100dvh - 24px)}
.szp-dialog-body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;scroll-padding-bottom:34px;scrollbar-gutter:stable;padding-bottom:42px}
.szp-dialog-actions{flex:none;align-items:center}
.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}
.szp-customer-dashboard-body{padding-block:30px 70px}.szp-customer-request-list{display:grid;gap:10px}.szp-customer-request-card{display:grid;gap:5px;padding:16px 18px;border:1px solid var(--szp-v17-border);border-radius:14px;background:#fff;box-shadow:0 8px 22px rgba(13,35,55,.05)}.szp-customer-request-card>div{display:flex;align-items:center;justify-content:space-between;gap:9px}.szp-customer-request-card h3{font-size:.98rem}.szp-customer-request-card p,.szp-customer-request-card small{color:var(--szp-v17-muted);font-size:.78rem}.szp-request-status{border-radius:999px;padding:4px 9px;background:#fff3e6;color:#a85c20;font-size:.74rem;font-weight:800}.szp-request-status-closed{background:#eef2f4;color:#687582}.szp-request-status-sent{background:#e7f5ef;color:#137c64}.szp-request-status-accepted{background:#e7f5ef;color:#137c64}.szp-request-status-completed{background:#e2f3ec;color:#0f6b56}.szp-request-status-active{background:#e8f0fb;color:#1f5fa8}.szp-request-status-cancelled,.szp-request-status-rejected{background:#fdecec;color:#a33a3a}.szp-customer-empty{display:grid;justify-items:center;gap:10px;padding:40px 20px;border:1px dashed #cbd7da;border-radius:16px;text-align:center;background:#fff}.szp-customer-empty h2{font-size:1.3rem}.szp-customer-empty p{color:var(--szp-v17-muted);font-size:.84rem}
@media(max-width:640px){.szp-v17-section{padding-block:26px 38px}.szp-search-suggestions{inset-inline:12px;top:calc(100% - 89px)}.szp-dialog{height:100dvh;max-height:100dvh;border-radius:0}.szp-dialog-body{padding-bottom:48px}.szp-dialog-actions{position:relative;z-index:2}.szp-auth-actions{display:grid;grid-template-columns:1fr;width:100%}.szp-auth-actions .szp-btn{width:100%}.szp-customer-dashboard-body .szp-card-head{display:grid;gap:12px}.szp-customer-dashboard-body .szp-card-head .szp-btn{width:100%}}

/* v4.0: one cohesive app workspace for search + categories + inline services;
 * providers show cards immediately, with the filter bar collapsed behind a toggle. */
.szp-v17-section{padding-block:clamp(24px,3.8vw,46px)}
.szp-discovery{padding-block:clamp(18px,2.8vw,28px) 10px}
.szp-discovery h1{font-size:clamp(1.5rem,2.4vw,2rem);max-width:26ch;margin-block:4px}
.szp-discovery-lede{color:var(--szp-v17-muted);font-size:.84rem;line-height:1.5;max-width:62ch;margin-top:2px}
.szp-workspace{margin-top:12px;background:#fff;border:1px solid var(--szp-v17-border);border-radius:16px;padding:12px;box-shadow:0 8px 22px rgba(13,35,55,.05)}
.szp-search-panel-v17{background:none;border:0;border-radius:0;padding:0;margin-top:0;box-shadow:none}
.szp-search-input{min-height:42px;border-width:1.5px}
.szp-search-suggestions{position:static;inset:auto;top:auto;margin-top:8px;max-height:310px;box-shadow:none;z-index:auto}
.szp-search-suggestions button:focus-visible{background:#fff3e6}
.szp-common-searches{margin-top:8px;font-size:.78rem}
.szp-category-rail-v17{margin-top:10px;padding-block:10px 0;border-top:1px solid var(--szp-v17-border);gap:6px}
.szp-category-chip{display:inline-flex;flex:0 0 auto;align-items:center;gap:6px;min-height:0;padding:6px 12px;border-radius:999px;background:#f4f6f7;border:1px solid transparent;box-shadow:none;color:var(--szp-v17-navy);transition:background .15s,border-color .15s}
.szp-category-chip .szp-category-icon{width:15px;height:15px;color:var(--szp-v17-muted)}
.szp-category-chip span:not(.szp-category-icon){font-size:.84rem;font-weight:700}
.szp-category-chip small{color:var(--szp-v17-muted);font-size:.74rem;font-weight:400}
.szp-category-chip:hover{background:#eceff0}
.szp-category-chip[aria-pressed=true]{background:var(--szp-v17-orange);border-color:var(--szp-v17-orange)}
.szp-category-chip[aria-pressed=true] span,.szp-category-chip[aria-pressed=true] small{color:#fff}
.szp-category-chip[aria-pressed=true] .szp-category-icon{color:#fff}
.szp-inline-services{margin-top:10px;padding-top:10px;border-top:1px solid var(--szp-v17-border);background:none;border-radius:0}
.szp-inline-services:empty{display:none;border:0;padding:0;margin:0}
.szp-inline-services h3{font-size:.78rem;font-weight:700;color:var(--szp-v17-muted);margin-bottom:7px}
.szp-inline-services>div{display:flex;flex-wrap:wrap;gap:6px}
.szp-inline-services button{border:1px solid #d7e0e4;border-radius:999px;background:#fff;padding:6px 12px;font-size:.84rem;color:var(--szp-v17-navy);cursor:pointer}
.szp-inline-services button:hover{border-color:var(--szp-v17-orange);background:#fff3e6}
.szp-provider-section{padding-block:16px clamp(24px,3.8vw,46px)}
.szp-provider-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px 16px;margin-bottom:14px}
.szp-provider-head h2{font-size:1.1rem}
.szp-people-note{color:var(--szp-v17-muted);font-size:.78rem;margin-top:2px;min-height:0}
.szp-people-note:empty{display:none}
.szp-provider-head-actions{display:flex;align-items:center;gap:10px}
.szp-filter-toggle{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--szp-v17-border);background:#fff;border-radius:999px;padding:7px 14px;font-size:.78rem;font-weight:700;color:var(--szp-v17-navy);cursor:pointer}
.szp-filter-toggle:hover,.szp-filter-toggle.is-active{border-color:var(--szp-v17-orange);color:#a85c20;background:#fff3e6}
.szp-provider-filter-bar[hidden]{display:none}
.szp-provider-filter-bar{display:flex;flex-wrap:wrap;align-items:end;gap:10px;margin-bottom:18px;padding:12px;background:#f7f8f7;border-radius:12px}
.szp-provider-filter-input{flex:1 1 220px;min-width:0}
.szp-provider-filter-bar label:not(.szp-provider-filter-input){display:grid;gap:5px;min-width:150px}
.szp-provider-filter-bar label:not(.szp-provider-filter-input) span{font-size:.78rem;color:var(--szp-v17-muted);font-weight:700}
.szp-selected-services{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:10px}.szp-multi-count{flex-basis:100%;font-size:.78rem;color:var(--szp-v17-navy)}.szp-service-chip{display:inline-flex;align-items:center;gap:5px;padding:6px 9px;border-radius:999px;background:#eef6f3;color:#176d5b;font-size:.78rem;font-weight:700}.szp-service-chip button{border:0;background:transparent;color:inherit;cursor:pointer;font-size:1rem;line-height:1}.szp-multi-toggle{margin-top:10px}.szp-flow-suggestion-list button[aria-pressed=true]{border-color:var(--szp-v17-orange);background:#fff3e6}
.szp-btn.is-loading{opacity:.8;cursor:wait;pointer-events:none}
.szp-inline-auth-form{display:grid;grid-template-columns:1fr 1fr;gap:10px;text-align:right;margin:16px auto 0;max-width:560px}.szp-inline-auth-form label{display:grid;gap:5px}.szp-inline-auth-form label span{font-size:.78rem;font-weight:700}.szp-inline-auth-form [hidden]{display:none}.szp-inline-auth-form .szp-inline-status,.szp-inline-auth-form button{grid-column:1/-1}.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)}.szp-auth-tabs{display:inline-flex;gap:3px;margin-top:12px;padding:3px;border:1px solid #d7dfe3;border-radius:999px;background:#f4f6f7}.szp-auth-tab{border:0!important;border-radius:999px!important;background:#fff!important;color:var(--szp-v17-navy)!important;padding:7px 20px!important;cursor:pointer;box-shadow:none!important}.szp-auth-tab.is-active{background:var(--szp-v17-orange)!important;color:#fff!important;box-shadow:0 3px 10px rgba(226,111,24,.18)!important}
.szp-application-progress{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:22px}.szp-application-progress>div{display:grid;gap:3px}.szp-application-progress span{font-size:.74rem;color:var(--szp-v17-muted)}.szp-application-progress b{font-size:1rem}.szp-application-progress progress{width:min(360px,50%);accent-color:var(--szp-v17-orange)}.szp-application fieldset[data-app-step]{border:0;padding:0;margin:0}.szp-application fieldset[data-app-step]>legend{font-size:1.25rem;font-weight:900;margin-bottom:5px}.szp-application fieldset[data-app-step]>p{color:var(--szp-v17-muted);font-size:.78rem;margin-bottom:18px}.szp-application-actions{display:flex;justify-content:space-between;gap:10px;margin-top:18px}.szp-application-review dl{display:grid;gap:7px}.szp-application-review dl>div{display:grid;grid-template-columns:110px 1fr;gap:10px;padding:10px;border-radius:9px;background:#f5f7f8}.szp-application-review dt{color:var(--szp-v17-muted);font-size:.78rem}.szp-application-review dd{margin:0;font-size:.78rem;font-weight:700}
@media(max-width:640px){.szp-search-suggestions{inset:auto;top:auto}.szp-inline-auth-form{grid-template-columns:1fr}.szp-inline-auth-form .szp-inline-status,.szp-inline-auth-form button{grid-column:auto}.szp-provider-filter-bar{display:grid}.szp-provider-filter-bar .szp-btn{width:100%}.szp-provider-head-actions{width:100%;justify-content:space-between}}
@media(max-width:640px){
.szp-discovery h1{font-size:1.4rem;line-height:1.3;margin-block:4px}
.szp-discovery-lede{font-size:.78rem;line-height:1.5}
.szp-workspace{padding:10px}
.szp-search-input{min-height:40px}
.szp-common-searches{margin-top:6px}
}

/* Phase 1 polish: provider-suggestion empty/loading states, secondary action buttons. */
.szp-flow-provider-results .szp-empty-v17{padding:20px 16px}
.szp-flow-provider-results .szp-empty-v17 h3{font-size:.94rem}
.szp-flow-provider-results .szp-empty-v17 p{font-size:.78rem;margin-top:4px}
.szp-no-provider-btn{display:flex;align-items:center;justify-content:center;width:100%;margin-top:12px;padding:12px 14px;border:1px dashed #cbd5db;border-radius:11px;font-size:.84rem;color:var(--szp-v17-muted);background:#fbfcfc}
.szp-no-provider-btn:hover{border-color:#a9b6bf;color:var(--szp-v17-navy);background:#f5f7f8}

/* Phase 1 polish: grouped adaptive questions read as one compact card each; a Persian
 * app-like upload control replaces the raw browser file input. */
.szp-adaptive-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.szp-adaptive-grid>fieldset,.szp-adaptive-grid>.szp-coherent-field,.szp-adaptive-grid>label{background:#f7f8f7;border-radius:12px;padding:13px 14px;margin:0}
.szp-adaptive-grid .szp-choice-grid label span{background:#fff}
@media(max-width:640px){.szp-adaptive-grid{grid-template-columns:1fr}}
.szp-visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.szp-upload-field{grid-column:1/-1}
.szp-upload-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.szp-upload-trigger{display:inline-flex;align-items:center;gap:7px;border:1px dashed #cbd5db;background:#fbfcfc;border-radius:11px;padding:10px 16px;font-size:.84rem;font-weight:700;color:var(--szp-v17-navy);cursor:pointer}
.szp-upload-trigger:hover{border-color:var(--szp-v17-orange);color:#a85c20;background:#fff3e6}
.szp-upload-hint{font-size:.74rem;color:var(--szp-v17-muted)}
.szp-upload-list:empty{display:none}
.szp-file-chip{display:inline-flex;align-items:center;gap:7px;background:#e9f5f0;color:#137c64;border-radius:999px;padding:6px 8px 6px 13px;font-size:.78rem;font-weight:700}
.szp-file-chip button{border:0;background:rgba(19,124,100,.14);color:#137c64;width:18px;height:18px;border-radius:50%;cursor:pointer;font-size:.88rem;line-height:1;display:inline-flex;align-items:center;justify-content:center;padding:0}
.szp-file-chip button:hover{background:rgba(19,124,100,.26)}

/* Phase 1 polish: provider-application breadcrumb, field hints, and the compact
 * searchable multiselect used for services/regions. */
.szp-app-breadcrumb{padding-top:18px}
.szp-app-breadcrumb a{display:inline-flex;align-items:center;gap:6px;color:var(--szp-v17-muted);font-size:.84rem;font-weight:700}
.szp-app-breadcrumb a:hover{color:var(--szp-v17-orange)}
.szp-field-hint{display:block;margin-top:4px;color:var(--szp-v17-muted);font-size:.74rem;line-height:1.6;font-weight:400}
.szp-field-group-title{display:block;font-size:.88rem;font-weight:800;margin-bottom:4px}
.szp-credentials-block{grid-column:1/-1;margin-top:4px;padding:16px;background:#f7f8f7;border-radius:14px}
.szp-multiselect{display:grid;gap:6px;position:relative}
.szp-multiselect-label{font-size:.78rem;font-weight:800;color:var(--szp-v17-navy)}
.szp-multiselect-toggle{display:flex;align-items:center;justify-content:space-between;width:100%;border:1px solid #cbd5db;border-radius:11px;background:#fff;padding:11px 13px;font-size:.88rem;color:var(--szp-v17-ink);cursor:pointer}
.szp-multiselect-toggle:hover{border-color:var(--szp-v17-orange)}
.szp-multiselect-chevron{width:8px;height:8px;border-inline-end:2px solid var(--szp-v17-muted);border-block-end:2px solid var(--szp-v17-muted);transform:rotate(45deg)}
.szp-multiselect-toggle[aria-expanded=true] .szp-multiselect-chevron{transform:rotate(-135deg)}
.szp-multiselect-panel{position:relative;z-index:5;margin-top:2px;padding:12px;border:1px solid var(--szp-v17-border);border-radius:14px;background:#fff;box-shadow:0 14px 34px rgba(13,35,55,.1);max-height:340px;overflow:auto}
.szp-multiselect-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px;position:sticky;top:-12px;background:#fff;padding-top:12px;margin-top:-12px;z-index:1}
.szp-multiselect-tools input[type=search]{flex:1 1 160px;min-width:0}
.szp-multiselect-actions{display:flex;gap:6px}
.szp-multiselect-actions button{border:1px solid #d9e0e4;background:#f8fafb;color:var(--szp-v17-navy);border-radius:8px;padding:7px 10px;font-size:.74rem;cursor:pointer;white-space:nowrap}
.szp-multiselect-actions button:hover{border-color:var(--szp-v17-orange);color:#a85c20}
.szp-multiselect .szp-check-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.szp-multiselect .szp-check-grid fieldset{grid-column:1/-1;border:0;padding:0;margin:0 0 6px}
.szp-multiselect .szp-check-grid legend{display:flex;align-items:center;justify-content:space-between;width:100%;font-size:.78rem;font-weight:800;color:var(--szp-v17-navy);margin-bottom:5px;padding:0}
.szp-multiselect .szp-check-grid legend [data-ms-select-group]{font-weight:700;font-size:.74rem}
@media(max-width:640px){.szp-multiselect .szp-check-grid{grid-template-columns:1fr}}

/* [hidden] must win over the unconditional display:flex on check-grid labels — otherwise
 * the multiselect search filter and any other hide-a-label logic silently no-ops. */
.szp-check-grid label[hidden]{display:none}
.szp-multiselect [data-ms-group][hidden]{display:none}

/* Phase 1 polish: per-service pricing, both the dashboard editor and the public profile
 * display it feeds — replaces the old single generic "starting price" as the primary UX. */
.szp-service-pricing-editor{grid-column:1/-1;padding:16px;background:#f7f8f7;border-radius:14px;display:grid;gap:10px}
.szp-service-pricing-row{display:grid;grid-template-columns:minmax(0,1fr) 150px auto;align-items:center;gap:8px;padding:10px;background:#fff;border:1px solid var(--szp-v17-border);border-radius:11px}
.szp-service-pricing-row b{font-size:.84rem}
.szp-sp-fixed-fields{display:flex;gap:6px}
.szp-sp-fixed-fields[hidden]{display:none}
.szp-sp-fixed-fields input,.szp-sp-fixed-fields select{min-height:38px;font-size:.78rem}
.szp-service-pricing-row [data-sp-note]{min-height:38px;font-size:.78rem}
@media(max-width:640px){.szp-service-pricing-row{grid-template-columns:1fr}}
.szp-service-price-list{display:grid;gap:8px}
.szp-service-price-row{display:grid;grid-template-columns:1fr auto;gap:4px 12px;padding:12px 14px;background:#fff;border:1px solid var(--szp-v17-border);border-radius:12px}
.szp-service-price-row b{font-size:.88rem}
.szp-service-price-row span{font-size:.84rem;font-weight:800;color:var(--szp-v17-navy);text-align:left}
.szp-service-price-row small{grid-column:1/-1;color:var(--szp-v17-muted);font-size:.74rem}

/* Neutral empty state for a profile's rating block — never a fabricated star/number. */
.szp-profile-rating-v17 .szp-rating-empty{color:var(--szp-v17-muted);font-size:.84rem;font-weight:400}

/* v2.2.6 — Phase 1 / Part 2: category explorer hardening.
 * Scope: discovery category chips + guide accordion only. */
.szp-category-rail-v17 .szp-category-chip{
  min-height:38px;
  padding:8px 13px;
  gap:8px;
  border-color:#dbe2e6;
  background:#f7f9fa;
  color:var(--szp-v17-navy);
}
.szp-category-rail-v17 .szp-category-chip .szp-category-icon{
  width:18px;
  height:18px;
  color:#607080;
  flex:none;
}
.szp-category-rail-v17 .szp-category-chip small{
  display:inline-grid;
  place-items:center;
  min-width:24px;
  height:22px;
  padding-inline:6px;
  border-radius:999px;
  background:#e9eef1;
  color:#526274;
  font-size:.74rem;
  font-weight:800;
  line-height:1;
}
.szp-category-rail-v17 .szp-category-chip:hover{
  background:#fff5ea;
  border-color:#efb17f;
}
.szp-category-rail-v17 .szp-category-chip[aria-pressed=true]{
  background:var(--szp-v17-orange);
  border-color:var(--szp-v17-orange);
  color:#fff;
  box-shadow:0 7px 18px rgba(228,122,44,.18);
}
.szp-category-rail-v17 .szp-category-chip[aria-pressed=true] .szp-category-icon{
  color:#fff;
}
.szp-category-rail-v17 .szp-category-chip[aria-pressed=true] small{
  background:rgba(255,255,255,.19);
  color:#fff;
}
.szp-inline-services{
  border-top-color:#e2e8eb;
}
.szp-inline-services h3{
  margin:0 0 9px;
  color:#59697a;
  font-size:.78rem;
}
.szp-inline-services button{
  min-height:36px;
  padding:7px 13px;
  border-radius:10px;
  border-color:#d8e0e4;
  background:#f8fafb;
  font-weight:700;
  transition:background .15s,border-color .15s,transform .15s;
}
.szp-inline-services button:hover,
.szp-inline-services button:focus-visible{
  border-color:var(--szp-v17-orange);
  background:#fff4e8;
  color:#9c541d;
  transform:translateY(-1px);
}

.szp-guide-grid-v17{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  align-items:start;
}
.szp-guide-grid-v17 details{
  align-self:start;
  min-width:0;
  overflow:hidden;
  border:1px solid #dce3e7;
  border-radius:16px;
  background:#fff;
  box-shadow:0 6px 18px rgba(13,35,55,.035);
}
.szp-guide-grid-v17 details[open]{
  grid-column:1/-1;
  border-color:#efb17f;
  box-shadow:0 12px 28px rgba(13,35,55,.07);
}
.szp-guide-grid-v17 summary{
  min-height:72px;
  padding:14px 16px;
  gap:11px;
  background:#fff;
  transition:background .15s,color .15s;
}
.szp-guide-grid-v17 summary:hover{
  background:#fafbfb;
}
.szp-guide-grid-v17 details[open] summary{
  background:#fff8f1;
  border-bottom:1px solid #f3dcc8;
}
.szp-guide-grid-v17 summary .szp-category-icon{
  width:38px;
  height:38px;
  padding:8px;
  border-radius:11px;
  background:#fff3e8;
  color:var(--szp-v17-orange);
  flex:none;
}
.szp-guide-grid-v17 summary b{
  font-size:.94rem;
  color:var(--szp-v17-navy);
}
.szp-guide-grid-v17 summary small{
  display:inline-flex;
  align-items:center;
  min-height:25px;
  padding:4px 8px;
  border-radius:999px;
  background:#f0f3f5;
  color:#617081;
  font-size:.74rem;
  font-weight:700;
  white-space:nowrap;
}
.szp-guide-grid-v17 details[open] summary small{
  background:#ffe9d5;
  color:#9b551f;
}
.szp-guide-grid-v17 summary::after{
  width:9px;
  height:9px;
  margin-inline-start:2px;
}
.szp-guide-grid-v17 details>div{
  padding:16px 18px 18px;
  background:#fff;
}
.szp-guide-grid-v17 details p{
  max-width:76ch;
  color:#667587;
  font-size:.84rem;
  line-height:1.95;
}
.szp-guide-links{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:13px;
}
.szp-guide-links a{
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:38px;
  padding:8px 12px;
  border:1px solid #d9e1e5;
  border-radius:10px;
  background:#f7f9fa;
  color:var(--szp-v17-navy);
  text-decoration:none;
  font-size:.78rem;
  font-weight:750;
  transition:background .15s,border-color .15s,color .15s,transform .15s;
}
.szp-guide-links a::before{
  content:'';
  width:6px;
  height:6px;
  flex:none;
  border-radius:50%;
  background:var(--szp-v17-orange);
  box-shadow:0 0 0 3px #fff0e3;
}
.szp-guide-links a>span[aria-hidden=true]{display:none}
.szp-guide-links a:hover,
.szp-guide-links a:focus-visible{
  background:#fff4e8;
  border-color:#e99b5e;
  color:#8f4c18;
  transform:translateY(-1px);
}
@media(max-width:640px){
  .szp-category-rail-v17 .szp-category-chip{padding:8px 11px;gap:7px}
  .szp-category-rail-v17 .szp-category-chip .szp-category-icon{width:17px;height:17px}
  .szp-guide-grid-v17{grid-template-columns:1fr;gap:9px}
  .szp-guide-grid-v17 details[open]{grid-column:auto}
  .szp-guide-grid-v17 summary{min-height:64px;padding:12px 13px;gap:9px}
  .szp-guide-grid-v17 summary .szp-category-icon{width:34px;height:34px;padding:7px}
  .szp-guide-grid-v17 summary b{font-size:.88rem}
  .szp-guide-grid-v17 summary small{font-size:.74rem;padding-inline:7px}
  .szp-guide-grid-v17 details>div{padding:13px 14px 15px}
  .szp-guide-links{gap:7px}
  .szp-guide-links a{min-height:36px;padding:7px 10px;font-size:.78rem}
}

/* v2.2.8 — Phase 1 provider UX: modal context, filters, cards and compare. */
/* The request modal is rendered outside .szp-v17 on single-provider pages, so expose
 * the same design tokens locally instead of depending on theme/container ancestry. */
.szp-modal{
  --szp-v17-navy:#0b1d31;
  --szp-v17-orange:#e47a2c;
  --szp-v17-ink:#172334;
  --szp-v17-muted:#647286;
  --szp-v17-border:#e1e6ea;
  --szp-v17-surface:#fff;
  --szp-v17-bg:#f7f8f7;
}

/* Provider filters: keep the full control set usable without turning the header into
 * a long horizontal strip. */
.szp-provider-filter-bar{
  display:grid;
  grid-template-columns:minmax(220px,1.45fr) repeat(3,minmax(145px,.8fr));
  align-items:end;
  gap:10px;
  padding:14px;
  border:1px solid #e2e7ea;
  background:#fff;
  box-shadow:0 7px 22px rgba(13,35,55,.035);
}
.szp-provider-filter-input{min-width:0;align-self:end}
.szp-provider-filter-bar label:not(.szp-provider-filter-input){min-width:0}
.szp-provider-filter-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  grid-column:span 2;
}
.szp-provider-filter-actions .szp-btn{min-width:112px}

/* Trust data belongs in one stable row so cards do not jump when a provider has no
 * review or only a non-numeric pricing model. */
.szp-provider-card-trust{
  display:grid;
  grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:8px;
  margin-top:11px;
}
.szp-provider-card-trust .szp-provider-rating,
.szp-provider-card-trust .szp-card-price{
  min-width:0;
  min-height:54px;
  margin:0;
  padding:8px 10px;
  border:1px solid #e5eaed;
  border-radius:10px;
  background:#f8fafb;
}
.szp-provider-card-trust .szp-provider-rating{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  align-content:center;
  gap:4px 6px;
}
.szp-provider-card-trust .szp-provider-rating span{font-size:.94rem}
.szp-provider-card-trust .szp-provider-rating.is-empty span{color:#a8b1ba}
.szp-provider-card-trust .szp-provider-rating.is-empty small{font-weight:700;color:#748190}
.szp-provider-card-trust .szp-card-price{
  display:grid;
  align-content:center;
  gap:2px;
}
.szp-provider-card-trust .szp-card-price>span{font-size:.74rem;color:#7a8793}
.szp-provider-card-trust .szp-card-price strong{
  display:block;
  overflow:hidden;
  color:var(--szp-v17-navy);
  font-size:.78rem;
  line-height:1.65;
  text-overflow:ellipsis;
}
.szp-card-price-review strong,.szp-card-price-negotiable strong{color:#9c551e}
.szp-provider-card-media img{object-position:center center}

/* Selected compare control must be unmistakable on photo cards. */
.szp-heart{
  display:grid;
  place-items:center;
  transition:background .15s,border-color .15s,transform .15s;
}
.szp-heart:hover{transform:scale(1.05)}
.szp-heart.is-selected{
  background:var(--szp-v17-orange);
  border-color:#fff;
  color:#fff;
  box-shadow:0 0 0 3px rgba(228,122,44,.22);
}

.szp-compare-dialog{color:var(--szp-v17-ink);font-family:Vazirmatn,IRANSans,IRANYekan,Tahoma,sans-serif}
.szp-compare-hint,
.szp-compare-empty{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
  padding:12px 14px;
  border:1px solid #f0d4bc;
  border-radius:12px;
  background:#fff7ef;
  color:#805020;
  font-size:.78rem;
}
.szp-compare-empty{justify-content:center;text-align:center;color:#657286;border-color:#dfe5e9;background:#f8fafb}
.szp-compare-grid article{background:#fff}
.szp-compare-grid .szp-link-btn{display:inline-flex;margin-top:2px}

@media(max-width:980px){
  .szp-provider-filter-bar{grid-template-columns:repeat(2,minmax(0,1fr))}
  .szp-provider-filter-input{grid-column:1/-1}
  .szp-provider-filter-actions{grid-column:1/-1}
}
@media(max-width:640px){
  .szp-provider-filter-bar{display:grid;grid-template-columns:1fr;padding:12px}
  .szp-provider-filter-input,.szp-provider-filter-actions{grid-column:auto}
  .szp-provider-filter-actions{display:grid;grid-template-columns:1fr 1fr}
  .szp-provider-filter-actions .szp-btn{width:100%;min-width:0}
  .szp-provider-card-trust{grid-template-columns:1fr 1fr}
  .szp-compare-hint{align-items:stretch;flex-direction:column}
}
@media(max-width:390px){
  .szp-provider-card-trust{grid-template-columns:1fr}
}


/* 2.2.9 provider correctness polish: make service-vs-skill semantics explicit. */
.szp-tag-group{display:grid;gap:8px;margin-top:14px}.szp-tag-group>small{font-size:.74rem;font-weight:800;color:var(--szp-v17-muted)}

/* v2.2.10 — provider repair pack: keep provider actions above the site's fixed mobile
 * navigation, make the request sheet self-contained on provider pages, and remove raw
 * theme button/input styling leaks without touching the global theme. */
.szp-modal input:not([type=checkbox]):not([type=radio]):not([type=file]),
.szp-modal select,
.szp-modal textarea{
  width:100%;
  box-sizing:border-box;
  min-height:46px;
  border:1px solid #cbd5db!important;
  border-radius:11px!important;
  background:#fff!important;
  color:#172334!important;
  box-shadow:none!important;
  font:inherit!important;
  padding:11px 13px!important;
}
.szp-modal textarea{min-height:104px;line-height:1.9;resize:vertical}
.szp-modal input::placeholder,.szp-modal textarea::placeholder{color:#87929b!important;opacity:1}
.szp-modal input:focus,.szp-modal select:focus,.szp-modal textarea:focus{
  outline:0!important;
  border-color:#e47a2c!important;
  box-shadow:0 0 0 3px rgba(228,122,44,.12)!important;
}
.szp-modal .szp-btn{
  display:inline-flex!important;
  align-items:center;
  justify-content:center;
  min-height:46px;
  padding:11px 20px!important;
  border-radius:11px!important;
  font:inherit!important;
  font-weight:900!important;
  text-decoration:none!important;
}
.szp-modal .szp-btn-primary{background:#e47a2c!important;color:#fff!important;border:1px solid #e47a2c!important}
.szp-modal .szp-btn-secondary{background:#fff!important;color:#0b1d31!important;border:1px solid #cbd4da!important;box-shadow:none!important}
.szp-modal .szp-text-btn,
.szp-v17 .szp-text-btn{
  min-height:38px;
  padding:8px 11px!important;
  border:1px solid transparent!important;
  border-radius:9px!important;
  background:transparent!important;
  color:#536476!important;
  box-shadow:none!important;
  font:inherit!important;
  font-size:.78rem!important;
  font-weight:850!important;
  text-decoration:none!important;
}
.szp-modal .szp-text-btn:hover,.szp-v17 .szp-text-btn:hover{background:#f3f6f7!important;color:#172334!important}
.szp-modal .szp-no-provider-btn{width:100%;margin-top:12px;border:1px dashed #d4dde2!important;background:#f8fafb!important;color:#23405b!important}

.szp-btn-quick{
  background:#fff7ef!important;
  color:#9a521d!important;
  border:1px solid #efc69f!important;
  box-shadow:none!important;
}
.szp-btn-quick:hover{background:#ffeddb!important;border-color:#e47a2c!important}
.szp-quick-context{
  display:grid;
  gap:2px;
  margin-bottom:14px;
  padding:12px 14px;
  border:1px solid #efd1b5;
  border-radius:12px;
  background:#fff7ef;
}
.szp-quick-context span{font-size:.74rem;color:#7c8995;font-weight:700}
.szp-quick-context b{font-size:.94rem;color:#172334}
.szp-quick-context small{font-size:.78rem;color:#9a521d;font-weight:800}

.szp-v17 .szp-link-btn,
.szp-provider-card-actions .szp-link-btn,
.szp-compare-hint .szp-link-btn,
.szp-related-v17 .szp-link-btn{
  font-weight:900!important;
  font-size:.84rem!important;
  line-height:1.6;
  text-decoration:none!important;
}
.szp-provider-card-actions .szp-link-btn:hover,
.szp-compare-hint .szp-link-btn:hover,
.szp-related-v17 .szp-link-btn:hover{color:#a9561d!important}

.szp-compare-bar{z-index:2147483400}
.szp-compare-bar .szp-text-btn{
  color:#fff!important;
  border-color:rgba(255,255,255,.28)!important;
  background:rgba(255,255,255,.06)!important;
}
.szp-compare-bar .szp-text-btn:hover{background:rgba(255,255,255,.14)!important;color:#fff!important}
.szp-compare-dialog{max-height:min(820px,calc(100dvh - 28px));overflow:auto;overscroll-behavior:contain}

@media(max-width:640px){
  .szp-modal{
    --szp-mobile-nav-clearance:calc(88px + env(safe-area-inset-bottom,0px));
    z-index:2147483647;
    padding:0 0 var(--szp-mobile-nav-clearance)!important;
    align-items:stretch;
  }
  .szp-modal-box{
    height:calc(100dvh - var(--szp-mobile-nav-clearance))!important;
    max-height:calc(100dvh - var(--szp-mobile-nav-clearance))!important;
  }
  .szp-dialog-actions{padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px))!important;gap:7px}
  .szp-dialog-actions .szp-text-btn{flex:0 0 auto}
  .szp-compare-bar{
    inset-inline:10px!important;
    bottom:calc(98px + env(safe-area-inset-bottom,0px))!important;
    z-index:2147483400!important;
    border-radius:18px!important;
    flex-wrap:wrap;
  }
  .szp-compare-bar span{flex:1 1 100%;text-align:center}
  .szp-compare-dialog{
    width:calc(100vw - 20px)!important;
    max-width:calc(100vw - 20px)!important;
    max-height:calc(100dvh - 118px - env(safe-area-inset-bottom,0px))!important;
    margin-block:10px calc(98px + env(safe-area-inset-bottom,0px))!important;
    padding:15px!important;
  }
  .szp-mobile-action-v17{
    display:grid!important;
    grid-template-columns:minmax(0,1.35fr) minmax(0,.85fr);
    gap:8px;
    bottom:calc(88px + env(safe-area-inset-bottom,0px))!important;
    z-index:2147483300!important;
    padding:9px 12px!important;
  }
  .szp-mobile-action-v17 .szp-btn{min-width:0!important;padding-inline:9px!important;font-size:.78rem!important}
  .szp-profile-v17>.szp-v17-wrap{padding-bottom:calc(188px + env(safe-area-inset-bottom,0px))!important}
  .szp-profile-actions-v17{display:grid;grid-template-columns:1fr 1fr}
  .szp-profile-actions-v17 .szp-btn-primary{grid-column:1/-1}
}

@media(max-width:360px){
  .szp-mobile-action-v17{grid-template-columns:1fr}
  .szp-profile-actions-v17{grid-template-columns:1fr}
  .szp-profile-actions-v17 .szp-btn-primary{grid-column:auto}
}
\n\n/* 2.2.11 — mobile/provider repair pack. Scoped overrides only; no schema/data changes. */
.szp-discovery-quick{display:flex;align-items:center;gap:9px;margin-top:10px;padding-top:10px;border-top:1px solid #edf0f2;color:var(--szp-v17-muted);font-size:.78rem}
.szp-discovery-quick .szp-btn{min-height:36px;padding:7px 13px;border-radius:999px;font-size:.78rem}
.szp-filter-close{display:none!important}

/* A labelled compare pill is clearer than an unexplained plus icon. */
.szp-heart{width:auto!important;min-width:76px;height:32px!important;padding:0 10px!important;border-radius:999px!important;font-size:.74rem!important;font-weight:900!important;white-space:nowrap}
.szp-heart.is-selected{min-width:82px}
/* Centred without transform, and pinned on both edges.
   The previous version centred with left:50% + translateX(-50%). Something on this
   site sets left on this bar anyway - measured on the live provider page at 24px -
   and the translate then dragged the bar 175px off the left edge of a phone, with its
   text cut in half. Both edges are now pinned and the width is centred by auto
   margins, so a stray left value has nothing to move. */
.szp-compare-bar{left:14px!important;right:14px!important;inset-inline:14px!important;transform:none!important;width:auto!important;max-width:min(680px,calc(100vw - 28px));margin-inline:auto!important;padding:8px 10px!important;gap:8px!important;border-radius:14px!important;flex-wrap:wrap;justify-content:center}
/* nowrap on a phone is what cut the sentence in half; it may wrap, and the bar grows. */
.szp-compare-bar>span{white-space:normal;font-weight:800}
.szp-compare-bar .szp-btn,.szp-compare-bar .szp-text-btn{min-height:36px!important;padding:6px 11px!important;border-radius:9px!important;font-size:.74rem!important}
.szp-compare-grid .szp-link-btn,.szp-compare-hint .szp-link-btn,.szp-provider-card-actions .szp-link-btn{font-weight:950!important}

/* Consolidated correction screen after login/server validation. */
.szp-required-gate{max-width:590px;margin-inline:auto;padding:8px 0 4px}
.szp-required-gate h3{font-size:1.25rem;margin:5px 0}
.szp-required-gate>p{color:var(--szp-v17-muted);font-size:.84rem;line-height:1.9;margin-bottom:16px}
.szp-required-grid{display:grid;gap:11px}
.szp-required-grid label{display:grid;gap:6px}
.szp-required-grid label>span{font-size:.78rem;font-weight:800;color:var(--szp-v17-navy)}
.szp-quick-contact-extra{margin-top:4px}

@media(max-width:640px){
  /*
   * The filter is a bottom sheet on mobile, and the last field used to disappear
   * under the action row: the row is sticky inside the same scroller as the fields,
   * so with the container's own padding under it there was nowhere for the last
   * field to end. The row now bleeds to the sheet's edges and carries the bottom
   * padding itself, and the fields sit in two columns so the sheet is short enough
   * that the scroll rarely matters at all.
   */
  html.szp-filter-sheet-open{overflow:hidden!important}
  .szp-provider-filter-bar:not([hidden]){
    position:fixed!important;z-index:2147483500!important;inset-inline:10px!important;top:auto!important;
    bottom:calc(88px + env(safe-area-inset-bottom,0px))!important;max-height:min(72dvh,610px)!important;overflow-y:auto!important;
    display:grid!important;grid-template-columns:1fr 1fr!important;gap:9px!important;padding:14px 14px 0!important;margin:0!important;
    border:1px solid #dce3e7!important;border-radius:20px!important;background:#fff!important;box-shadow:0 24px 70px rgba(4,15,26,.28)!important;
    overscroll-behavior:contain;
  }
  .szp-provider-filter-bar:not([hidden])::before{content:'فیلتر مجریان';grid-column:1/-1;font-size:.94rem;font-weight:950;color:var(--szp-v17-navy);padding-bottom:3px}
  .szp-provider-filter-input{grid-column:1/-1!important;min-height:48px!important;padding-inline:11px!important}
  .szp-provider-filter-input>span{font-size:1.1rem!important}
  /* The theme paints its own border and background on every input; inside this pill
     that reads as a second box floating loose in the first one. */
  .szp-provider-filter-bar .szp-search-input input{border:0!important;background:transparent!important;box-shadow:none!important;font-size:.84rem!important;padding:6px 0!important;min-height:0!important;width:100%!important}
  .szp-provider-filter-bar label:not(.szp-provider-filter-input){min-width:0!important}
  .szp-provider-filter-bar select,.szp-provider-filter-bar .szp-select-button{width:100%;min-width:0;min-height:42px!important;padding-block:8px!important;font-size:.78rem}
  .szp-provider-filter-actions{
    grid-column:1/-1!important;display:grid!important;grid-template-columns:auto 1fr 1.25fr!important;gap:8px!important;
    position:sticky;bottom:0;z-index:2;background:#fff;
    margin:2px -14px 0!important;padding:10px 14px calc(12px + env(safe-area-inset-bottom,0px))!important;
    border-top:1px solid #eef1f3;
  }
  .szp-provider-filter-actions .szp-btn{min-height:40px!important;padding:7px 9px!important;font-size:.78rem!important}
  .szp-filter-close{display:inline-flex!important}

  .szp-compare-bar{
    width:calc(100vw - 24px)!important;max-width:430px!important;bottom:calc(96px + env(safe-area-inset-bottom,0px))!important;
    display:grid!important;grid-template-columns:1fr auto auto!important;flex-wrap:nowrap!important;padding:7px 8px!important;border-radius:14px!important;
  }
  .szp-compare-bar>span{font-size:.74rem!important;text-align:right!important;white-space:nowrap!important;overflow:hidden;text-overflow:ellipsis}
  .szp-compare-bar .szp-btn,.szp-compare-bar .szp-text-btn{min-height:34px!important;padding:5px 9px!important;font-size:.74rem!important}
  .szp-compare-dialog{max-height:calc(100dvh - 112px - env(safe-area-inset-bottom,0px))!important;margin-block:8px calc(96px + env(safe-area-inset-bottom,0px))!important}

  /* Compact request footer: only navigation + current primary action. */
  .szp-dialog-actions{display:grid!important;grid-template-columns:minmax(92px,.72fr) minmax(0,1.28fr)!important;padding:8px 12px calc(8px + env(safe-area-inset-bottom,0px))!important;gap:8px!important}
  .szp-dialog-actions .szp-btn{width:100%!important;min-height:44px!important;padding:8px 10px!important;font-size:.84rem!important;border-radius:11px!important}
  .szp-dialog-body{padding:14px 16px 22px!important}
  .szp-dialog-head{padding:12px 16px 9px!important}
  .szp-dialog-head h2{font-size:1.05rem!important}
  .szp-dialog-head p{font-size:.74rem!important}

  /* More information per mobile viewport without sacrificing readability. The row
     spacing is the body's own gap here, so nothing re-introduces per-row margins. */
  .szp-people-v17>.szp-provider-card-v17{flex-basis:auto!important;width:auto!important}
  .szp-provider-card-media>a{aspect-ratio:1.62!important}
  .szp-provider-card-body{padding:11px!important;gap:7px}
  .szp-provider-card-heading h3{font-size:.94rem!important}
  .szp-provider-card-heading p{font-size:.74rem!important}
  /* Two cards to a phone screen is about 160px of card. Rating and price beside each
     other at that width leaves 66px a side, which is not enough for "پس از بررسی
     پروژه" to be a sentence, so they stack here and sit side by side from 641px up. */
  .szp-provider-card-trust{grid-template-columns:1fr!important;gap:6px!important}
  .szp-provider-card-trust>*{min-height:42px!important;padding:6px 7px!important}
  .szp-card-price strong{-webkit-line-clamp:1!important;white-space:nowrap}
  /* A third badge, fact or tag at this width is a clipped stub, not information. */
  .szp-badge-row span:nth-child(n+3),
  .szp-provider-card-meta span:nth-child(n+3),
  .szp-provider-card-tags span:nth-child(n+3){display:none!important}
  .szp-provider-card-meta span,.szp-provider-card-tags span{min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .szp-provider-card-meta{gap:6px 9px!important}
  .szp-provider-card-actions{padding-top:8px}
  .szp-provider-card-actions .szp-btn,.szp-provider-card-actions .szp-link-btn{min-height:36px!important;padding:6px!important;font-size:.74rem!important}
  .szp-heart{top:9px!important;inset-inline-end:9px!important;min-width:72px!important;height:30px!important;padding-inline:8px!important;font-size:.74rem!important}

  .szp-mobile-action-v17{grid-template-columns:1fr 1fr!important;bottom:calc(88px + env(safe-area-inset-bottom,0px))!important;padding:7px 10px!important;gap:7px!important}
  .szp-mobile-action-v17 .szp-btn{min-height:42px!important;padding:7px 8px!important;font-size:.74rem!important}
  .szp-profile-v17>.szp-v17-wrap{padding-bottom:calc(178px + env(safe-area-inset-bottom,0px))!important}
  .szp-discovery-quick{justify-content:space-between}
}

/* Two columns hold down to about 340px; collapsing to one at 380px was what made the
   sheet tall enough to need scrolling on an ordinary phone in the first place. */
@media(max-width:340px){
  .szp-provider-filter-bar:not([hidden]){grid-template-columns:1fr!important;max-height:68dvh!important}
  .szp-provider-filter-input,.szp-provider-filter-actions,.szp-provider-filter-bar:not([hidden])::before{grid-column:1!important}
  .szp-provider-filter-actions{grid-template-columns:auto 1fr 1.25fr!important}
}

@media(max-width:380px){
  .szp-compare-bar{grid-template-columns:1fr auto!important}
  .szp-compare-bar .szp-text-btn{display:none!important}
  .szp-mobile-action-v17{grid-template-columns:1fr 1fr!important}
}

/*
 * One card, one shape.
 *
 * Cards sit in a grid, so a row is as tall as its tallest card: a provider carrying
 * badges and a long price used to add its extra height to every neighbour, which is
 * what the tall cards with a band of empty white underneath actually were. The
 * template now prints the same rows on every card (empty when there is no data) and
 * each row here is pinned to one line at a fixed height, so nothing has extra height
 * to donate and no card is stretched to absorb it.
 */
.szp-provider-card-v17{height:100%;display:flex;flex-direction:column}
.szp-provider-card-body{display:flex;flex:1;flex-direction:column;min-height:0;gap:8px}
.szp-provider-card-heading{display:block!important;min-width:0}
.szp-provider-card-heading a{text-decoration:none}
.szp-provider-card-heading h3,.szp-provider-card-heading p{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin:0!important}
.szp-provider-card-heading p{margin-top:2px!important}
.szp-badge-row{min-height:24px;margin-top:0!important;flex-wrap:nowrap;overflow:hidden}
.szp-badge{white-space:nowrap;flex:0 0 auto}
.szp-provider-card-meta{min-height:1.4em;margin-top:0!important;flex-wrap:nowrap;overflow:hidden;white-space:nowrap}
.szp-provider-card-meta span{flex:0 0 auto}
.szp-provider-card-trust{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:0!important}
.szp-provider-card-trust>*{min-width:0;min-height:54px;margin-top:0!important;padding:7px 8px;border:1px solid #e6ebee;border-radius:11px;background:#f8fafb;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;text-align:center;line-height:1.5}
.szp-card-price>span,.szp-provider-rating>span{font-size:.74rem}
.szp-card-price strong{font-size:.74rem;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;max-width:100%}
.szp-provider-card-tags{min-height:25px;margin-top:0!important;flex-wrap:nowrap;overflow:hidden}
.szp-provider-card-tags span{white-space:nowrap;flex:0 1 auto;overflow:hidden;text-overflow:ellipsis}
.szp-provider-card-actions{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;align-items:stretch;margin-top:auto!important;padding-top:10px}
.szp-provider-card-actions>*{min-width:0!important;width:100%;display:flex;align-items:center;justify-content:center;text-align:center;white-space:normal;line-height:1.45}
/* The provider profile's Q&A block is a full section like the ones around it. */
.szp-profile-section-v17[data-szp-qa-section]{display:block!important;scroll-margin-top:110px}
.szp-qa-form{display:grid;gap:10px;margin-top:14px}
.szp-qa-form textarea{min-height:84px!important}
.szp-qa-form>label,.szp-qa-identity label{display:grid;gap:5px}
.szp-qa-form label>span{font-size:.78rem;font-weight:800;color:var(--szp-v17-navy)}
.szp-qa-identity{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.szp-qa-form .szp-btn{justify-self:start}
@media(max-width:520px){.szp-qa-identity{grid-template-columns:1fr}.szp-qa-form .szp-btn{justify-self:stretch}}

/* 2.2.11 follow-up: request/compare surfaces must never share the mobile-nav layer. */
@media(max-width:640px){
  .szp-modal .szp-dialog{
    height:calc(100dvh - var(--szp-mobile-nav-clearance,88px))!important;
    max-height:calc(100dvh - var(--szp-mobile-nav-clearance,88px))!important;
  }
  .szp-profile-v17 .szp-compare-bar{bottom:calc(154px + env(safe-area-inset-bottom,0px))!important}
  .szp-profile-v17 .szp-compare-dialog{
    max-height:calc(100dvh - 172px - env(safe-area-inset-bottom,0px))!important;
    margin-block:8px calc(154px + env(safe-area-inset-bottom,0px))!important;
  }
}

/* ---------------------------------------------------------------------------
   Public tools: calculator, project builder, price + alert.
   These shortcodes shipped with no styling at all, so they inherited whatever
   the host theme did to an unrecognised block - under Kaveh a negative-margin
   full-bleed that pushed them to the viewport edge with no padding, collapsing
   the form to a single row with the submit button crushed against the edge.
   The section is made self-contained here rather than relying on a page
   wrapper, because a shortcode can be dropped onto any template.
--------------------------------------------------------------------------- */
/* The design tokens live on .szp-v17, which these sections do not carry - and must
   not, since it also forces min-height:60vh and overflow:clip on what is an
   embeddable block. Declaring them here keeps the shortcode self-contained and
   restores .szp-btn-primary, whose background is var(--szp-v17-orange): unresolved,
   it computed to transparent and left white label text on a white page. */
.szp-tools{
  --szp-v17-navy:#0b1d31;--szp-v17-orange:#e47a2c;--szp-v17-ink:#172334;
  --szp-v17-muted:#647286;--szp-v17-border:#e1e6ea;--szp-v17-surface:#fff;
  --szp-v17-bg:#f7f8f7;
  width:min(1104px,100%);
  margin-inline:auto!important;
  padding:clamp(22px,3.4vw,40px) clamp(16px,4vw,32px) clamp(30px,4.4vw,52px);
  color:var(--szp-v17-ink);
}
.szp-tools-head{margin-bottom:clamp(16px,2.4vw,26px)}
.szp-tools-head h2{font-size:clamp(1.35rem,2.5vw,2rem);line-height:1.35;margin:0}
.szp-tools-head .szp-muted,.szp-tools-head p{
  color:var(--szp-v17-muted);max-width:62ch;line-height:1.9;font-size:.88rem;margin:8px 0 0;
}

/* The base control rule never covered number inputs, which is every numeric
   field these tools use. */
.szp-tools input[type=number]{
  width:100%;font:inherit;font-size:.94rem;padding:11px 13px;
  border:1px solid var(--szp-v17-border);border-radius:11px;
  background:#fff;color:var(--szp-v17-ink);
}
.szp-tools input[type=number]:focus-visible,
.szp-tools select:focus-visible,
.szp-tools textarea:focus-visible{
  outline:2px solid var(--szp-v17-orange);outline-offset:1px;
}

.szp-tools-form{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:14px 16px;align-items:end;
  padding:clamp(16px,2.2vw,22px);
  border:1px solid var(--szp-v17-border);border-radius:16px;
  background:var(--szp-v17-surface);
  box-shadow:0 8px 22px rgba(13,35,55,.05);
}
.szp-tools-form>label{display:grid;gap:7px;min-width:0;margin:0}
.szp-tools-form>label>span{font-size:.84rem;font-weight:700;color:var(--szp-v17-ink)}
.szp-tools-form .szp-dash-check{
  display:flex;align-items:center;gap:9px;font-size:.84rem;color:var(--szp-v17-muted);
}
.szp-tools-form .szp-dash-check input{width:auto;min-height:0}
.szp-tools-form>button{justify-self:start;white-space:nowrap}
.szp-tools-form .szp-form-feedback{
  grid-column:1/-1;min-height:0;font-size:.84rem;color:var(--szp-v17-muted);
}

.szp-tools-result:not([hidden]){
  display:block;margin-top:18px;padding:clamp(16px,2.2vw,22px);
  border:1px solid var(--szp-v17-border);border-radius:16px;background:var(--szp-v17-surface);
}

/* Price history + alert */
.szp-price-current{
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  margin:0 0 16px;font-size:.88rem;color:var(--szp-v17-muted);
}
.szp-price-current strong{font-size:clamp(1.15rem,2vw,1.5rem);color:var(--szp-v17-ink)}
.szp-price-summary{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));
  gap:10px;margin:0 0 16px;padding:0;list-style:none;
}
.szp-price-summary li{
  display:grid;gap:4px;padding:12px 14px;
  border:1px solid var(--szp-v17-border);border-radius:13px;background:var(--szp-v17-surface);
}
.szp-price-summary li span{font-size:.78rem;color:var(--szp-v17-muted)}
.szp-price-summary li b{font-size:.94rem}
.szp-price-series{
  display:grid;gap:6px;margin:0 0 18px;padding:0;list-style:none;
  max-height:280px;overflow-y:auto;
}
.szp-price-series li{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:9px 13px;border:1px solid var(--szp-v17-border);border-radius:11px;
  background:var(--szp-v17-surface);font-size:.84rem;
}
.szp-price-series time{color:var(--szp-v17-muted);font-size:.78rem}

@media (max-width:640px){
  .szp-tools-form{grid-template-columns:1fr}
  .szp-tools-form>button{justify-self:stretch;width:100%}
}

/* Calculator / project-builder result body. Also unstyled: the provider rows are
   <b>name</b><span>city</span><span>price</span>, which without spacing rendered as
   one run-on word ("کاظم تهرانیکرج۳۰۰,۰۰۰"), and the breakdown table had no cell
   padding at all. */
.szp-tools-result h3{font-size:clamp(1.1rem,1.9vw,1.4rem);margin:0 0 4px}
.szp-tools-result h4{
  font-size:.94rem;margin:20px 0 8px;padding-bottom:7px;
  border-bottom:1px solid var(--szp-v17-border);
}
.szp-bundle-mode{color:var(--szp-v17-muted);font-size:.84rem;margin:0 0 4px}

.szp-bundle-table{width:100%;border-collapse:collapse;font-size:.88rem}
.szp-bundle-table td{
  padding:9px 12px;border-bottom:1px solid var(--szp-v17-border);vertical-align:middle;
}
.szp-bundle-table tr:last-child td{border-bottom:0}
.szp-bundle-table td:first-child{font-weight:700}
.szp-bundle-table td:last-child{text-align:end;white-space:nowrap}

.szp-bundle-providers{display:grid;gap:8px;margin:10px 0 0;padding:0;list-style:none}
.szp-bundle-providers li{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:10px 13px;border:1px solid var(--szp-v17-border);border-radius:11px;
  background:var(--szp-v17-bg);font-size:.84rem;
}
.szp-bundle-providers li b{font-weight:700}
.szp-bundle-providers li span{color:var(--szp-v17-muted)}
.szp-bundle-providers li span[data-state]{margin-inline-start:auto;color:var(--szp-v17-ink);font-weight:700;white-space:nowrap}

.szp-bundle-total{
  margin:16px 0 0;padding-top:13px;border-top:2px solid var(--szp-v17-border);
  font-size:.94rem;
}
.szp-bundle-total b{font-size:1.1rem}

.szp-calc-assumptions{
  margin:16px 0 0;padding:14px 16px;list-style:none;display:grid;gap:7px;
  border-radius:12px;background:var(--szp-v17-bg);
  color:var(--szp-v17-muted);font-size:.84rem;line-height:1.85;
}
.szp-calc-assumptions li{position:relative;padding-inline-start:14px}
.szp-calc-assumptions li::before{
  content:"";position:absolute;inset-inline-start:0;top:.62em;
  width:5px;height:5px;border-radius:50%;background:var(--szp-v17-orange);
}
.szp-tools-result>.szp-btn{margin-top:18px}

/* ---------------------------------------------------------------------------
   Provider dashboard usability.
   .szp-v17 sets overflow:clip, which makes it the sticky containing block; since
   it never scrolls, a sticky child never engages. Clipping only the inline axis
   keeps the original horizontal-overflow guard while letting the block axis flow,
   which is what position:sticky needs.
--------------------------------------------------------------------------- */
.szp-provider-dashboard{overflow-x:clip;overflow-y:visible}

/* ---------------------------------------------------------------------------
   Provider dashboard usability.
   The profile form runs to several thousand pixels, so the save action sticks to
   the bottom of the viewport instead of living only at the very end of the form.
--------------------------------------------------------------------------- */
.szp-provider-dashboard .szp-form-actions{
  display:flex;align-items:center;justify-content:flex-end;gap:14px;flex-wrap:wrap;
  margin-top:24px;padding:12px 16px;
  background:rgba(255,255,255,.96);
  border:1px solid var(--szp-v17-border);border-radius:14px;
  box-shadow:0 10px 28px rgba(13,35,55,.14);
}
.szp-provider-dashboard .szp-form-actions.is-floating{
  position:fixed;bottom:16px;right:auto;z-index:60;margin-top:0;
}
.szp-form-actions-spacer{margin-top:24px}
.szp-provider-dashboard .szp-form-actions .szp-form-feedback{margin:0;flex:1;min-width:0;font-size:.84rem}
.szp-provider-dashboard .szp-form-actions button[type=submit]{flex:0 0 auto;min-height:46px}
@supports (backdrop-filter:blur(8px)){
  .szp-provider-dashboard .szp-form-actions{backdrop-filter:blur(8px)}
}

/* Work queue: open pool, incoming, current and completed. None of szp-pd-list,
   szp-pd-status, szp-pd-meta, szp-pd-customer or szp-pd-actions had any rules, so
   every field ran together into one unbroken string. */
.szp-pd-list{display:grid;gap:12px;margin:14px 0 0;padding:0;list-style:none}
.szp-pd-list>li{
  display:grid;gap:10px;padding:16px 18px;
  border:1px solid var(--szp-v17-border);border-radius:14px;background:#fff;
}
.szp-pd-item-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
}
.szp-pd-item-head b{font-size:1rem;font-weight:800}
.szp-pd-meta{
  display:flex;align-items:center;gap:8px 14px;flex-wrap:wrap;
  color:var(--szp-v17-muted);font-size:.78rem;
}
.szp-pd-ref{font-weight:700;color:var(--szp-v17-ink)}
.szp-pd-list>li>small{
  color:var(--szp-v17-muted);font-size:.84rem;line-height:1.85;
  padding-inline-start:11px;border-inline-start:2px solid var(--szp-v17-border);
}

/* Status pill, one modifier per lifecycle state. */
.szp-pd-status{
  border-radius:999px;padding:5px 11px;font-size:.74rem;font-weight:800;
  background:#fff3e6;color:#a85c20;white-space:nowrap;
}
.szp-pd-status-sent,.szp-pd-status-accepted{background:#e7f5ef;color:#137c64}
.szp-pd-status-completed{background:#e2f3ec;color:#0f6b56}
.szp-pd-status-active{background:#e8f0fb;color:#1f5fa8}
.szp-pd-status-cancelled,.szp-pd-status-rejected{background:#fdecec;color:#a33a3a}
.szp-pd-status-closed{background:#eef2f4;color:#687582}

/* Customer contact block - rendered only for work already assigned to this provider. */
.szp-pd-customer{
  display:flex;align-items:center;gap:8px 16px;flex-wrap:wrap;
  padding:11px 14px;border-radius:11px;background:var(--szp-v17-bg);
  font-size:.84rem;
}
.szp-pd-customer b{font-weight:800}
.szp-pd-customer a{color:var(--szp-v17-orange);font-weight:700;text-decoration:none}
.szp-pd-customer a:hover{text-decoration:underline}
.szp-pd-customer span{color:var(--szp-v17-muted)}

.szp-pd-actions{display:flex;gap:9px;flex-wrap:wrap;align-items:center}
.szp-pd-actions .szp-btn{min-height:40px;font-size:.84rem}
.szp-pd-list>li .szp-btn-primary{justify-self:start}

/* Overview counters */
.szp-pd-stats{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
  gap:10px;margin:14px 0 0;padding:0;list-style:none;
}
.szp-pd-stats li{
  display:grid;gap:4px;justify-items:center;text-align:center;
  padding:14px 10px;border:1px solid var(--szp-v17-border);border-radius:13px;
  background:var(--szp-v17-bg);
}
.szp-pd-stats li b{font-size:1.45rem;line-height:1}
.szp-pd-stats li span{font-size:.78rem;color:var(--szp-v17-muted)}

/* Control sizing and rhythm. The profile grid had no row gap at all, the wide
   textareas ended up at three different widths, and the 58 checkboxes rendered at
   the browser default 13-17px - well under a usable target, worst on touch. */
.szp-provider-dashboard .szp-form-grid{gap:16px 14px}
.szp-provider-dashboard .szp-form-grid>label,
.szp-provider-dashboard .szp-form-wide{display:grid;gap:7px;align-content:start;margin:0}
.szp-provider-dashboard .szp-form-grid>label>span,
.szp-provider-dashboard .szp-form-wide>span{font-size:.84rem;font-weight:700;color:var(--szp-v17-ink)}
.szp-provider-dashboard .szp-form-wide{margin-top:16px}
.szp-provider-dashboard .szp-form-wide textarea{width:100%;min-height:112px}

.szp-provider-dashboard input[type=text],
.szp-provider-dashboard input[type=url],
.szp-provider-dashboard input[type=number],
.szp-provider-dashboard select,
.szp-provider-dashboard textarea{min-height:46px}
.szp-provider-dashboard textarea{min-height:112px}

.szp-provider-dashboard .szp-check-grid input[type=checkbox],
.szp-provider-dashboard .szp-checkbox-line input[type=checkbox]{
  inline-size:18px;block-size:18px;flex:0 0 18px;margin:0;
  accent-color:var(--szp-v17-orange);cursor:pointer;
}
.szp-provider-dashboard .szp-check-grid label{
  gap:9px;padding:7px 9px;border-radius:9px;font-size:.84rem;
  color:var(--szp-v17-ink);cursor:pointer;min-block-size:36px;
}
.szp-provider-dashboard .szp-check-grid label:hover{background:var(--szp-v17-bg)}
.szp-provider-dashboard .szp-checkbox-line{
  display:flex;align-items:center;gap:10px;margin-top:18px;
  padding:12px 14px;border:1px solid var(--szp-v17-border);border-radius:12px;
  font-size:.88rem;font-weight:700;cursor:pointer;
}

/* Per-service pricing rows: label, mode, optional fixed fields, note. */
.szp-provider-dashboard .szp-service-pricing-row{
  gap:10px;padding:13px 14px;border:1px solid var(--szp-v17-border);
  border-radius:12px;background:#fff;margin-bottom:10px;align-items:center;
}
.szp-provider-dashboard .szp-sp-fixed-fields{display:flex;gap:8px;flex-wrap:wrap}
.szp-provider-dashboard .szp-sp-fixed-fields input,
.szp-provider-dashboard .szp-sp-fixed-fields select{min-height:44px;font-size:.84rem}

/* Coverage picker: filter, live count and a bounded, multi-column list. */
.szp-provider-dashboard .szp-region-tools{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:10px 0 8px;
}
.szp-provider-dashboard .szp-region-search{
  flex:1 1 170px;min-height:42px;min-width:0;font:inherit;font-size:.84rem;
  padding:9px 12px;border:1px solid var(--szp-v17-border);border-radius:10px;background:#fff;
}
.szp-provider-dashboard .szp-region-count{font-size:.78rem;font-weight:700;color:var(--szp-v17-orange)}
.szp-provider-dashboard .szp-region-count.is-empty{color:var(--szp-v17-muted);font-weight:400}
.szp-provider-dashboard .szp-region-clear{
  font:inherit;font-size:.78rem;font-weight:700;padding:9px 12px;cursor:pointer;
  border:1px solid var(--szp-v17-border);border-radius:10px;background:#fff;color:var(--szp-v17-ink);
}
.szp-provider-dashboard .szp-region-clear:disabled{opacity:.45;cursor:default}
.szp-provider-dashboard .szp-check-grid-compact{
  grid-template-columns:repeat(auto-fill,minmax(148px,1fr));
  gap:2px 8px;max-height:296px;overflow-y:auto;overscroll-behavior:contain;
  padding:6px;border:1px solid var(--szp-v17-border);border-radius:12px;
  background:var(--szp-v17-bg);
}
.szp-provider-dashboard .szp-check-grid-compact label[hidden]{display:none}

/* Location cascade: province -> county -> city -> district, kept as one full-width
   group so the four levels read in order instead of being split across grid rows. */
.szp-provider-dashboard .szp-location-cascade{
  grid-column:1/-1;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:12px;
  padding:14px;border:1px solid var(--szp-v17-border);border-radius:12px;
  background:var(--szp-v17-bg);
}
.szp-provider-dashboard .szp-location-cascade>label{display:grid;gap:7px;margin:0;min-width:0}
.szp-provider-dashboard .szp-location-cascade>label>span{font-size:.78rem;font-weight:700;color:var(--szp-v17-ink)}
.szp-provider-dashboard .szp-location-cascade select:disabled{opacity:.55;cursor:not-allowed}

/* ---------------------------------------------------------------------------
   Public provider profile.
   The video embed had no rules at all, so the iframe fell back to the browser
   default 300x150 regardless of the column it sat in.
--------------------------------------------------------------------------- */
/* Same rule as the promo row: a ceiling, and start-aligned. One video used to fill
   the entire width like a hero banner nobody asked for. */
.szp-video-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,340px));gap:14px;justify-content:start}
.szp-video-frame{
  position:relative;aspect-ratio:16/9;width:100%;
  border-radius:14px;overflow:hidden;background:#0b1d31;
  border:1px solid var(--szp-v17-border);
}
.szp-video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
@supports not (aspect-ratio:16/9){
  .szp-video-frame{height:0;padding-bottom:56.25%}
}

/* Without this the aside is a stretched grid item, so its measured height is the whole
   column - roughly 1,980px against an 800px viewport - and the follower always bailed. */
.szp-profile-aside-v17{align-self:start}
.szp-profile-aside-v17.is-following{z-index:20}

/* ---------------------------------------------------------------------------
   Provider discovery grid.
   The grid was three hard tracks, so it neither adapted to width nor to the number
   of results: two providers sat in a three-track row with a large void beside them.
   auto-fit collapses the empty tracks; the cards keep a premium width rather than
   stretching to fill, and align to the RTL start edge.
--------------------------------------------------------------------------- */
@media(min-width:641px){
  /* auto-fill with 1fr, not auto-fit with a pixel ceiling.
     The ceiling was added to stop two cards stretching across a whole row, and it did —
     but it also meant a 997px grid fitted exactly two 336px tracks and left 325px of
     white beside them, which is the "empty and scattered" report. auto-fill makes as
     many tracks as fit (three, here) and keeps the empty ones when there are fewer
     cards, so a short list still sits at normal width. Both problems, one property. */
  .szp-people-v17{
    grid-template-columns:repeat(auto-fill,minmax(258px,1fr));
  }
  /* Cards in a row must share a height. They carry different amounts of content - and
     since a provider with no photograph gets a shorter placeholder, the media differs
     too - so leaving them to size themselves left the row ragged and put every card's
     request button at a different height. The body grows instead and the actions sit
     on the bottom edge, so the CTAs line up across the row. */
  .szp-people-v17>.szp-provider-card-v17{height:100%;display:flex;flex-direction:column}
  .szp-people-v17>.szp-provider-card-v17>.szp-provider-card-body{
    display:flex;flex-direction:column;flex:1 1 auto;
  }
  .szp-people-v17>.szp-provider-card-v17 .szp-provider-card-actions{margin-top:auto}
}

/* No-photo cards reserved the same 244px as a real photograph and filled it with a
   bare gradient - on a card that is mostly photograph, that is most of its height.
   The placeholder is shorter and carries the provider's initial instead of nothing. */
/* Both of these have to out-specify existing rules: the media aspect-ratio is set
   with !important further up, and .szp-photo-fallback span already sizes the label. */
.szp-provider-card-media>a:has(.szp-photo-fallback){aspect-ratio:2.5!important}
.szp-provider-card-media .szp-photo-fallback{min-height:0;gap:4px}
.szp-photo-fallback .szp-photo-initial{
  font-size:1.9rem;font-weight:800;line-height:1;color:#8ea0ad;
}
.szp-photo-fallback span:not(.szp-photo-initial){font-size:.74rem;opacity:.85}

/* Quick request is the shortcut for someone who does not want to browse. It read as
   the weakest control on the row - lighter than the neutral search chips beside it. */
.szp-discovery-quick .szp-btn-quick{
  min-height:40px;padding:9px 16px;font-size:.84rem;font-weight:800;
  color:var(--szp-v17-orange);background:#fff6ee;
  border:1.5px solid var(--szp-v17-orange);
}

/* ---------------------------------------------------------------------------
   Custom select. The native option list is drawn by the OS, so it could not be
   kept inside the viewport - it overlapped the category rail when there was no
   room below. The real <select> stays in the DOM and stays authoritative; this
   only draws over it and flips the list upward when it would not fit.
--------------------------------------------------------------------------- */
.szp-select{position:relative;display:block;width:100%}
.szp-select-native{
  position:absolute!important;opacity:0!important;pointer-events:none!important;
  width:100%!important;height:100%!important;inset:0!important;margin:0!important;
}
.szp-select-button{
  display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;
  min-height:44px;padding:10px 13px;font:inherit;font-size:.88rem;text-align:start;
  border:1px solid var(--szp-v17-border,#e1e6ea);border-radius:11px;
  background:#fff;color:var(--szp-v17-ink,#172334);cursor:pointer;
}
.szp-select-button:focus-visible{outline:2px solid var(--szp-v17-orange,#e47a2c);outline-offset:1px}
.szp-select-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
/* Physical edges on purpose: with logical ones the arrow points sideways in RTL,
   because border-inline-end becomes the left edge and the 45° turn lands it there. */
.szp-select-caret{flex:0 0 auto;width:9px;height:9px;border-right:2px solid #7d8b99;border-bottom:2px solid #7d8b99;border-top:0;border-left:0;transform:rotate(45deg);margin-block-end:3px}
.szp-select-button[aria-expanded=true] .szp-select-caret{transform:rotate(-135deg);margin-block:3px 0}
.szp-select-list{
  position:absolute;inset-inline:0;top:calc(100% + 6px);z-index:80;
  max-height:min(280px,50vh);overflow-y:auto;padding:6px;
  background:#fff;border:1px solid var(--szp-v17-border,#e1e6ea);border-radius:13px;
  box-shadow:0 16px 40px rgba(13,35,55,.16);
}
.szp-select-list.is-above{box-shadow:0 -10px 30px rgba(4,15,26,.16)}
/* Portalled listbox. `left` and `top` are written by place() as inline styles, so
   nothing here may set inset with !important - a stylesheet !important outranks a
   plain inline style, and an earlier `inset-inline:auto!important` here silently threw
   away every position the script computed, which is why the menu landed in the same
   spot no matter which field opened it. */
.szp-select-list.szp-select-portal{position:fixed!important;z-index:2147483600!important;max-height:min(260px,42dvh)!important;overflow:auto!important;overscroll-behavior:contain!important;margin:0!important}
.szp-select-option{
  display:block;width:100%;padding:10px 12px;border:0;border-radius:9px;
  background:none;font:inherit;font-size:.84rem;text-align:start;color:var(--szp-v17-ink,#172334);cursor:pointer;
}
.szp-select-option:hover,.szp-select-option:focus-visible{background:#f2f5f7;outline:none}
.szp-select-option.is-selected{background:#fff3e6;color:#a85c20;font-weight:800}

/* ---------------------------------------------------------------------------
   Search panel: popular terms and quick request are separate blocks.
   They previously shared a cramped row, so once the terms wrapped they collided
   with the quick-request button.
--------------------------------------------------------------------------- */
.szp-common-searches{
  display:block;margin-top:16px;color:var(--szp-v17-muted,#647286);font-size:.78rem;
}
.szp-common-searches-label{display:block;margin-bottom:8px;font-weight:700}
.szp-common-searches-items{display:flex;flex-wrap:wrap;gap:8px}
.szp-common-searches-items button{
  border:1px solid #d6dfe4;background:#f8fafb;color:var(--szp-v17-navy,#0b1d31);
  border-radius:999px;padding:8px 13px;cursor:pointer;font-size:.78rem;line-height:1.2;
}
.szp-common-searches-items button:hover{border-color:var(--szp-v17-orange,#e47a2c);background:#fff6ee}

.szp-discovery-quick{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  margin-top:18px;padding-top:16px;border-top:1px solid #edf0f2;
  color:var(--szp-v17-muted,#647286);font-size:.84rem;
}
.szp-discovery-quick .szp-btn-quick{flex:0 0 auto}
@media(max-width:560px){
  .szp-discovery-quick{align-items:stretch}
  .szp-discovery-quick .szp-btn-quick{width:100%}
}

/* Provider card tag rows must wrap, never push into the actions below. */
.szp-provider-card-tags{display:flex;flex-wrap:wrap;gap:6px;min-width:0}
.szp-provider-card-tags>*{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.szp-provider-card-body>*{min-width:0}

/* Mobile provider listing is a two-column grid, not a carousel: a horizontal
   scroller hid most results and could not be scanned. Ten rows load at a time and
   the existing server-paginated "show more" fetches the next batch. */
@media(max-width:640px){
  .szp-people-v17{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;overflow:visible!important;scroll-snap-type:none!important}
  .szp-people-v17>.szp-provider-card-v17{grid-template-columns:1fr;height:100%}
  .szp-people-v17 .szp-provider-card-media>a{aspect-ratio:1.35}
  .szp-people-v17 .szp-provider-card-body{padding:11px 12px 13px}
  .szp-people-v17 .szp-provider-card-heading h3{font-size:.88rem;line-height:1.5}
  /* Two full-width rows here - the profile link stacked above the request button -
     was the single largest contributor to the card reading as too tall on a 2-column
     phone grid. Side by side, wrapping their own short labels to two lines rather
     than stretching the row, gives back close to fifty pixels per card. */
  .szp-people-v17 .szp-provider-card-actions{flex-wrap:nowrap;gap:6px;align-items:stretch}
  .szp-people-v17 .szp-provider-card-actions>*{
    flex:1 1 0;min-width:0;display:flex;align-items:center;justify-content:center;
    text-align:center;line-height:1.4;white-space:normal;
  }
  .szp-people-v17 .szp-provider-card-actions .szp-btn-small{font-size:.74rem;padding:6px 4px}
  .szp-people-v17 .szp-provider-card-actions .szp-link-btn{font-size:.74rem;padding:6px 4px}
  .szp-people-more-v17{margin-top:16px}
  .szp-people-more-v17 .szp-btn{width:100%}
}

/* ---------------------------------------------------------------------------
   Media viewer. The old lightbox showed one image at its natural size with a
   single close button and no way to reach the rest of the set.
--------------------------------------------------------------------------- */
.szp-gallery-dialog{
  width:min(1100px,calc(100vw - 24px));max-width:none!important;
  background:transparent!important;box-shadow:none!important;overflow:visible!important;
}
.szp-gallery-stage{
  display:flex;align-items:center;justify-content:center;
  width:100%;min-height:min(76vh,620px);
  background:#0b1d31;border-radius:16px;overflow:hidden;
}
.szp-gallery-stage img{
  display:block;width:auto;height:auto;
  max-width:100%;max-height:min(76vh,620px);object-fit:contain;
}
.szp-gallery-stage iframe{width:100%;aspect-ratio:16/9;border:0;display:block}
.szp-gallery-dialog .szp-gallery-nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:46px;height:46px;border:0;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.94);color:#0b1d31;font-size:1.2rem;line-height:1;
  box-shadow:0 6px 18px rgba(0,0,0,.28);inset-inline-start:auto;
}
.szp-gallery-dialog .szp-gallery-prev{inset-inline-end:-6px}
.szp-gallery-dialog .szp-gallery-next{inset-inline-start:-6px}
.szp-gallery-dialog .szp-gallery-prev::before{content:"›"}
.szp-gallery-dialog .szp-gallery-next::before{content:"‹"}
.szp-gallery-dialog .szp-gallery-nav:hover{background:#fff}
.szp-gallery-counter{
  position:absolute;bottom:-34px;inset-inline-start:50%;transform:translateX(50%);
  color:#fff;font-size:.84rem;font-weight:700;letter-spacing:.02em;
}
.szp-gallery-dialog [data-szp-gallery-close]{z-index:3}
@media(max-width:640px){
  .szp-gallery-dialog{width:calc(100vw - 16px)}
  .szp-gallery-stage{min-height:58vh;border-radius:14px}
  .szp-gallery-stage img{max-height:58vh}
  .szp-gallery-dialog .szp-gallery-nav{width:40px;height:40px}
  .szp-gallery-dialog .szp-gallery-prev{inset-inline-end:6px}
  .szp-gallery-dialog .szp-gallery-next{inset-inline-start:6px}
}

/* Free tools, surfaced in the discovery funnel rather than living on orphan pages. */
.szp-tools-grid-v17{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.szp-tool-card-v17{
  display:flex;flex-direction:column;gap:8px;padding:22px 20px;text-decoration:none;
  border:1px solid var(--szp-v17-border);border-radius:16px;background:#fff;
  box-shadow:0 8px 22px rgba(13,35,55,.05);transition:transform .2s,box-shadow .2s,border-color .2s;
}
.szp-tool-card-v17:hover{transform:translateY(-3px);border-color:var(--szp-v17-orange);box-shadow:0 14px 30px rgba(13,35,55,.1)}
.szp-tool-card-v17 h3{font-size:1.02rem;color:var(--szp-v17-ink);margin:0}
.szp-tool-card-v17 p{font-size:.84rem;color:var(--szp-v17-muted);line-height:1.9;margin:0;flex:1}
.szp-tool-card-go{margin-top:4px;font-size:.84rem;font-weight:800;color:var(--szp-v17-orange)}

/* Chat chooser. Two conversations that must never read as one thread. */
.szp-chat-dialog{border:0;border-radius:18px;padding:0;background:transparent;max-width:min(440px,calc(100vw - 24px))}
.szp-chat-dialog::backdrop{background:rgba(4,15,26,.72)}
.szp-chat-sheet{display:grid;gap:12px;padding:24px;background:#fff;border-radius:18px;text-align:start}
.szp-chat-sheet h2{font-size:1.15rem;margin:0}
.szp-chat-sheet .szp-muted{font-size:.84rem;margin:0 0 4px}
.szp-chat-choice{
  display:grid;gap:4px;width:100%;padding:15px 16px;cursor:pointer;text-align:start;
  border:1px solid var(--szp-v17-border);border-radius:14px;background:#fff;font:inherit;
}
.szp-chat-choice:hover{border-color:var(--szp-v17-orange);background:#fff6ee}
.szp-chat-choice b{font-size:.94rem;color:var(--szp-v17-ink)}
.szp-chat-choice span{font-size:.78rem;color:var(--szp-v17-muted);line-height:1.7}
.szp-chat-choice[disabled]{opacity:.6;cursor:progress}
.szp-chat-cancel{width:100%;margin-top:2px}

/* A submitted question must not look like it vanished: pending questions are not
   public yet, so the asker needs its state and a way to track it. */
.szp-qa-submitted{
  display:grid;gap:9px;justify-items:start;padding:18px 20px;margin-top:12px;
  border:1px solid #cfe6dc;border-radius:14px;background:#f2faf6;
}
.szp-qa-submitted-badge{
  padding:4px 10px;border-radius:999px;background:#fff3e6;color:#a85c20;
  font-size:.74rem;font-weight:800;
}
.szp-qa-submitted h4{margin:0;font-size:1rem;color:var(--szp-v17-ink)}
.szp-qa-submitted p{margin:0;font-size:.84rem;line-height:1.9;color:var(--szp-v17-muted)}
.szp-qa-ask-again{
  border:0;background:none;padding:0;font:inherit;font-size:.84rem;font-weight:700;
  color:var(--szp-v17-orange);cursor:pointer;text-decoration:underline;
}

/* Comparison journey: state, next action, and a way out - on both breakpoints. */
.szp-compare-mode{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  margin-bottom:18px;padding:14px 18px;border-radius:14px;
  background:#fff6ee;border:1px solid var(--szp-v17-orange);
}
.szp-compare-mode-kicker{display:block;font-size:.74rem;font-weight:800;color:var(--szp-v17-orange);margin-bottom:3px}
.szp-compare-mode p{margin:0;font-size:.84rem;color:var(--szp-v17-ink);line-height:1.8}
.szp-compare-bar{flex-wrap:wrap}
.szp-compare-bar #szpCompareMessage{flex:1 1 100%;min-width:0}
@media(min-width:641px){.szp-compare-bar #szpCompareMessage{flex:1 1 auto}}
@media(max-width:640px){
  .szp-compare-bar{gap:8px;padding:11px 12px}
  .szp-compare-bar .szp-btn{flex:1 1 auto;min-height:40px}
  .szp-compare-bar .szp-text-btn{flex:1 1 100%;text-align:center;padding-top:2px}
  .szp-compare-mode{flex-direction:column;align-items:stretch;gap:8px}
}


/* == SZP card trust alignment v1 == */
/* The rating and price sit in one row and must read as a pair. On mobile the price
   wrapped to three lines while the rating stayed on one, so the two boxes had
   different heights and the card looked broken. */
.szp-provider-card-trust{display:grid;grid-template-columns:1fr 1fr;gap:8px;align-items:stretch}
.szp-provider-card-trust>*{
  display:flex;flex-direction:column;justify-content:center;gap:3px;
  margin:0;min-width:0;height:100%;
  padding:9px 11px;border:1px solid var(--szp-v17-border);border-radius:11px;background:#fff;
}
.szp-provider-card-trust .szp-card-price span,
.szp-provider-card-trust .szp-provider-rating small{font-size:.74rem;color:var(--szp-v17-muted);line-height:1.5}
.szp-provider-card-trust .szp-card-price strong{font-size:.84rem;line-height:1.65;font-weight:800;overflow-wrap:anywhere}
.szp-provider-card-trust .szp-provider-rating{flex-direction:row;align-items:center;gap:6px;justify-content:flex-start}

@media(max-width:640px){
  /* Two columns of ~171px cannot hold two boxes side by side legibly. */
  .szp-people-v17 .szp-provider-card-trust{grid-template-columns:1fr;gap:6px}
  .szp-people-v17 .szp-provider-card-trust>*{padding:8px 10px}
  .szp-people-v17 .szp-provider-card-trust .szp-card-price strong{font-size:.78rem}
  .szp-people-v17 .szp-provider-card-tags{gap:5px}
  .szp-people-v17 .szp-provider-card-tags>*{font-size:.74rem;padding:3px 7px;line-height:1.6}
  .szp-people-v17 .szp-provider-card-meta{font-size:.74rem;line-height:1.7}
  .szp-people-v17 .szp-provider-card-heading h3{font-size:.88rem}
  .szp-people-v17 .szp-provider-card-body{gap:9px}
}


/* == SZP chat drawer v1 == */
/* A panel beside the page, not a trip to the dashboard. */
.szp-chat-drawer{
  position:fixed;top:0;bottom:0;inset-inline-end:0;z-index:100000;
  width:min(400px,100vw);display:flex;flex-direction:column;
  background:#fff;box-shadow:-18px 0 46px rgba(11,29,49,.22);
  border-inline-start:1px solid var(--szp-v17-border,#e1e6ea);
  font-family:inherit;direction:rtl;
}
.szp-chat-drawer[hidden]{display:none}
.szp-chat-drawer-head{
  display:flex;align-items:center;gap:12px;padding:16px 18px;
  background:#0b1d31;color:#fff;
}
.szp-chat-drawer-head>div{display:grid;gap:2px;min-width:0;flex:1}
.szp-chat-drawer-head b{font-size:.94rem}
.szp-chat-drawer-head span{font-size:.78rem;opacity:.8;line-height:1.6}
.szp-chat-drawer-close{
  flex:0 0 auto;width:34px;height:34px;border:0;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.14);color:#fff;font-size:1.3rem;line-height:1;
}
.szp-chat-drawer-close:hover{background:rgba(255,255,255,.26)}
.szp-chat-drawer-body{
  flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px;
  background:var(--szp-v17-bg,#f7f8f7);
}
.szp-chat-drawer .szp-chat-choice{
  display:grid;gap:4px;width:100%;padding:15px 16px;cursor:pointer;text-align:start;
  border:1px solid var(--szp-v17-border,#e1e6ea);border-radius:14px;background:#fff;font:inherit;
}
.szp-chat-drawer .szp-chat-choice:hover{border-color:var(--szp-v17-orange,#e47a2c);background:#fff6ee}
.szp-chat-drawer .szp-chat-choice b{font-size:.94rem;color:var(--szp-v17-ink,#172334)}
.szp-chat-drawer .szp-chat-choice span{font-size:.78rem;color:var(--szp-v17-muted,#647286);line-height:1.7}
.szp-chat-note{margin:auto;text-align:center;font-size:.84rem;color:var(--szp-v17-muted,#647286);line-height:1.9}
.szp-chat-msg{
  max-width:86%;align-self:flex-start;padding:10px 13px;border-radius:14px;
  background:#fff;border:1px solid var(--szp-v17-border,#e1e6ea);
}
.szp-chat-msg.is-mine{align-self:flex-end;background:#fff3e6;border-color:#f0d4b6}
.szp-chat-msg p{margin:0;font-size:.84rem;line-height:1.9;color:var(--szp-v17-ink,#172334);overflow-wrap:anywhere}
.szp-chat-msg time{display:block;margin-top:4px;font-size:.74rem;color:var(--szp-v17-muted,#647286)}
.szp-chat-drawer-form{
  display:flex;gap:8px;align-items:flex-end;padding:12px 14px;
  border-top:1px solid var(--szp-v17-border,#e1e6ea);background:#fff;
}
.szp-chat-drawer-form[hidden]{display:none}
.szp-chat-drawer-form textarea{
  flex:1;min-width:0;resize:none;font:inherit;font-size:.84rem;line-height:1.8;
  padding:9px 12px;border:1px solid var(--szp-v17-border,#e1e6ea);border-radius:11px;
}
.szp-chat-drawer-form .szp-btn{flex:0 0 auto;min-height:42px}
@media(max-width:640px){
  .szp-chat-drawer{width:100vw;inset-inline:0}
  .szp-chat-drawer-body{padding:13px}
}


/* == SZP contrast + dashboard polish v1 == */
/* The theme paints its own background on inputs, textareas, selects and buttons inside
   our panels, which turned the chat composer into an orange block with unreadable text
   and hid the send button entirely. Every control the platform owns states its own
   colours explicitly so no host theme can make text disappear into its background. */
.szp-chat-drawer textarea,
.szp-chat-drawer input,
.szp-chat-drawer select{
  background:#fff!important;color:#172334!important;
  border:1px solid #e1e6ea!important;border-radius:11px!important;
  -webkit-text-fill-color:#172334!important;opacity:1!important;
  box-shadow:none!important;background-image:none!important;
}
.szp-chat-drawer textarea::placeholder,
.szp-chat-drawer input::placeholder{color:#8a97a5!important;opacity:1!important;-webkit-text-fill-color:#8a97a5!important}
.szp-chat-drawer .szp-btn,
.szp-chat-drawer button[type=submit]{
  background:#e47a2c!important;color:#fff!important;-webkit-text-fill-color:#fff!important;
  border:1px solid #e47a2c!important;border-radius:11px!important;
  min-height:42px!important;padding:0 18px!important;font-weight:800!important;
  background-image:none!important;text-shadow:none!important;opacity:1!important;
}
.szp-chat-drawer .szp-btn:hover,
.szp-chat-drawer button[type=submit]:hover{background:#cf6a1f!important;border-color:#cf6a1f!important}
.szp-chat-drawer .szp-chat-drawer-close{background:rgba(255,255,255,.16)!important;color:#fff!important;-webkit-text-fill-color:#fff!important}
.szp-chat-drawer .szp-chat-choice{background:#fff!important;color:#172334!important;-webkit-text-fill-color:#172334!important;background-image:none!important}
.szp-chat-drawer .szp-chat-choice b{color:#172334!important;-webkit-text-fill-color:#172334!important}
.szp-chat-drawer .szp-chat-choice span{color:#647286!important;-webkit-text-fill-color:#647286!important}
.szp-chat-drawer .szp-chat-choice:hover{background:#fff6ee!important;border-color:#e47a2c!important}

/* Same guarantee for every platform form control, so this class of problem cannot
   reappear on another screen. */
.szp input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]),
.szp textarea,
.szp select{
  background:#fff!important;color:#172334!important;-webkit-text-fill-color:#172334!important;
  background-image:none!important;opacity:1!important;
}
.szp input::placeholder,.szp textarea::placeholder{color:#8a97a5!important;-webkit-text-fill-color:#8a97a5!important;opacity:1!important}

/* Provider dashboard: the floating save sat on top of the fields it was meant to
   protect. It keeps clear of the form and the form reserves room for it. */
.szp-provider-dashboard .szp-form-actions.is-floating{
  inset-inline:auto;box-shadow:0 10px 30px rgba(13,35,55,.18)!important;
}
.szp-provider-dashboard #szpProviderDashboardForm{padding-bottom:8px}
.szp-form-actions-spacer{min-height:0}


/* == SZP provider workspace v2 == */
/* Order on the screen now matches order of need: counters, then work, then profile.
   These rules give that order a shape - the strip has to read as a summary, not as
   another card in a stack of eleven. */
.szp-pd-top{padding-top:26px}
.szp-pd-top+.szp-pd{padding-top:18px}
.szp-pd-overview{background:linear-gradient(180deg,#fff 0%,#fbfcfd 100%)}
.szp-pd-overview .szp-card-head{margin-bottom:6px}
.szp-pd-overview-note{margin-top:12px;font-size:.78rem}
.szp-pd-stats li{padding:0;background:#fff;transition:border-color .18s,transform .18s,box-shadow .18s}
.szp-pd-stats li>a{
  display:grid;gap:4px;justify-items:center;text-align:center;
  padding:15px 10px;text-decoration:none;color:inherit;border-radius:12px;
}
.szp-pd-stats li:hover{border-color:var(--szp-v17-orange);transform:translateY(-2px);box-shadow:0 8px 20px rgba(228,122,44,.13)}
/* A count that is not zero is the whole point of the strip, so it is the one thing
   allowed to shout. */
.szp-pd-stats li.is-hot{border-color:#e8a065;background:#fff6ee}
.szp-pd-stats li.is-hot b{color:#a85c20}

.szp-side-links{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:2px}
.szp-side-links a{
  display:block;padding:9px 11px;border-radius:9px;text-decoration:none;
  color:var(--szp-v17-navy);font-size:.84rem;font-weight:700;
}
.szp-side-links a:hover{background:#fff3e6;color:#a85c20}

/* The floating save used to span the whole form column at 96% opacity, so it read as
   a button lying across the fields rather than as a control of its own - it covered a
   full row of inputs wherever you stopped scrolling. Floating, it now collapses to a
   pill in the corner of the column: same button, a fraction of the footprint, and
   opaque enough to be unmistakably above the page. Focused controls scroll clear of it. */
.szp-provider-dashboard .szp-form-actions.is-floating{
  width:auto!important;max-width:min(92vw,520px);
  background:#fff!important;border:1px solid #cfd9e0!important;border-radius:999px!important;
  padding:8px 10px!important;gap:10px!important;margin-top:0;
  box-shadow:0 14px 34px rgba(13,35,55,.28)!important;
}
.szp-provider-dashboard .szp-form-actions.is-floating .szp-form-feedback{font-size:.78rem!important;line-height:1.7;margin-inline-start:6px!important}
.szp-provider-dashboard .szp-form-actions.is-floating .szp-form-feedback:empty{display:none}
.szp-provider-dashboard .szp-form-actions.is-floating button[type=submit]{min-height:42px!important;padding-inline:22px;border-radius:999px}
/* Nothing at the end of the form may sit permanently under the pill. */
.szp-provider-dashboard .szp-dashboard-grid{padding-bottom:86px}
.szp-provider-dashboard #szpProviderDashboardForm label,
.szp-provider-dashboard #szpProviderDashboardForm fieldset,
.szp-provider-dashboard #szpProviderDashboardForm .szp-location-cascade,
.szp-provider-dashboard #szpProviderDashboardForm .szp-service-pricing-row{scroll-margin-bottom:118px}

/* Location cascade: same select2 shell the marketplace filters use, so the four
   levels are searchable and look like every other select on the site. */
/* Two fixed columns, not auto-fit: inside the form column auto-fit resolved to three
   tracks and left the fourth level orphaned on a row of its own. Two by two also keeps
   "ابتدا شهرستان را انتخاب کنید" from being clipped. */
.szp-provider-dashboard .szp-location-cascade{grid-template-columns:repeat(2,minmax(0,1fr))}
.szp-provider-dashboard .szp-location-cascade .select2-container{width:100%!important}
.szp-provider-dashboard .szp-location-cascade .select2-container--default .select2-selection--single{
  height:46px;border:1px solid #cbd5db;border-radius:11px;background:#fff;
}
.szp-provider-dashboard .szp-location-cascade .select2-container--default .select2-selection--single .select2-selection__rendered{
  line-height:44px;color:var(--szp-v17-ink);padding-inline:12px;
}
.szp-provider-dashboard .szp-location-cascade .select2-container--default .select2-selection--single .select2-selection__arrow{height:44px}
/* Disabled levels must still be readable - at .55 opacity the hint text explaining
   why they are disabled was the least legible thing in the group. */
.szp-provider-dashboard .szp-location-cascade select:disabled,
.szp-provider-dashboard .szp-location-cascade .select2-container--disabled .select2-selection--single{
  opacity:1;background:#eef2f4;border-color:#dbe3e8;cursor:not-allowed;
}
.szp-provider-dashboard .szp-location-cascade .select2-container--disabled .select2-selection__rendered{color:#7b8895}
@media(max-width:640px){
  .szp-provider-dashboard .szp-location-cascade{grid-template-columns:1fr}
  .szp-pd-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
}


/* == SZP customer request workspace v1 == */
/* Every szp-dash-* class the customer dashboard prints had no rule anywhere in this
   file, so the request cards - timeline, payment state, actions and all - rendered as
   a run of unstyled block elements on both the account page and the dashboard page.
   These are the platform's own tokens, so the workspace matches every other screen. */
.szp-customer-dashboard-body{padding-block:28px 70px}
/*
 * These screens render inside whatever shell the host theme provides, and Kaveh's is
 * dark. Everything here was written for a light page and set no background of its own,
 * so it inherited the shell: our ink (#172334) on the theme's near-black panel, which
 * is why the dashboard looked empty rather than broken - the text was there and simply
 * could not be read.
 *
 * The fix is to own the surface rather than to fight the theme. This block declares the
 * platform's own tokens and a light card on our markup only; it overrides no theme
 * selector, so a theme update cannot collide with it, and the same rules are correct on
 * a light shell too.
 */
.szp-dash{
  /*
   * The tokens are declared on .szp-v17, and these screens are printed into the theme's
   * page without that wrapper - so every `var(--szp-v17-*)` in the rules below resolved
   * to nothing at all. A background of `var(--undefined)` is not a fallback to the
   * previous value, it is invalid, which is why the primary button came out transparent
   * with no fill. Declaring the set here makes this subtree self-sufficient in any shell.
   */
  --szp-v17-navy:#0b1d31;--szp-v17-orange:#e47a2c;--szp-v17-ink:#172334;
  --szp-v17-muted:#647286;--szp-v17-border:#e1e6ea;--szp-v17-surface:#fff;--szp-v17-bg:#f7f8f7;
  display:grid;gap:16px;
  color:var(--szp-v17-ink,#172334);
  background:var(--szp-v17-surface,#fff);
  border:1px solid var(--szp-v17-border,#e1e6ea);
  border-radius:18px;padding:clamp(14px,2.4vw,22px);
  box-shadow:0 10px 30px rgba(13,35,55,.06);
}
/* Inherited colour is the whole problem, so the text elements state theirs. */
.szp-dash h2,.szp-dash h3,.szp-dash h4,.szp-dash strong,.szp-dash b,.szp-dash td,.szp-dash th{color:var(--szp-v17-ink,#172334)}
.szp-dash p,.szp-dash li,.szp-dash span,.szp-dash time,.szp-dash label{color:inherit}
.szp-dash small,.szp-dash em{color:var(--szp-v17-muted,#647286)}
/* Links are orange, but a button is not a link even when it is an <a>: this rule is
   more specific than .szp-dash-btn-primary and was repainting the primary button's
   label orange on its orange fill, which is how it came out as a blank block. */
.szp-dash a:not([class*="btn"]){color:var(--szp-v17-orange,#e47a2c)}
.szp-dash a.szp-dash-btn{color:var(--szp-v17-navy,#0b1d31)}
.szp-dash a.szp-dash-btn-primary{color:#fff}
.szp-dash input,.szp-dash select,.szp-dash textarea{background:#fff;color:var(--szp-v17-ink,#172334);border:1px solid #cbd5db}
@media(max-width:640px){.szp-dash{padding:13px;border-radius:15px}}
.szp-dash-head{
  display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;
  padding-bottom:12px;border-bottom:1px solid var(--szp-v17-border,#e1e6ea);
}
.szp-dash-head h2{font-size:1.3rem;margin:0}

/* In-page navigation between our screens.
   On a desktop the theme's sidebar already lists them and this is hidden. On a phone
   that sidebar is behind a menu button, which is where these screens went to be
   forgotten: from "پروژه‌های من" there was no way to reach "تیکت" without opening a
   drawer first. The chips scroll horizontally rather than wrapping into four rows. */
.szp-dash-nav{margin:-4px -4px 2px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.szp-dash-nav::-webkit-scrollbar{display:none}
.szp-dash-nav ul{display:flex;gap:7px;list-style:none;margin:0;padding:4px}
.szp-dash-nav a{
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
  padding:7px 13px;border-radius:999px;font-size:.78rem;font-weight:600;text-decoration:none;
  border:1px solid var(--szp-v17-border,#e1e6ea);background:#f8fafb;color:var(--szp-v17-muted,#647286);
}
/* `.szp-dash a:not([class*="btn"])` above paints every link orange and outranks a bare
   `.szp-dash-nav a`, so these match its weight and come after it. */
.szp-dash .szp-dash-nav a{color:var(--szp-v17-muted,#647286)}
.szp-dash .szp-dash-nav a:hover{border-color:var(--szp-v17-orange,#e47a2c);background:#fff6ee;color:#a85c20}
.szp-dash .szp-dash-nav a.is-current{
  background:var(--szp-v17-navy,#0b1d31);border-color:var(--szp-v17-navy,#0b1d31);color:#fff;
}
@media(min-width:900px){.szp-dash-nav{display:none}}

/* Overview. The counters are the screen: each one is a link to the place it counts,
   and the ones that need a decision today carry the warm border. */
.szp-dash-stats{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(122px,1fr));gap:10px;
  list-style:none;margin:0;padding:0;
}
.szp-dash-stats li{
  border:1px solid var(--szp-v17-border,#e1e6ea);border-radius:13px;background:#fff;
  transition:border-color .18s,transform .18s,box-shadow .18s;
}
.szp-dash-stats li:hover{border-color:var(--szp-v17-orange,#e47a2c);transform:translateY(-2px);box-shadow:0 8px 20px rgba(228,122,44,.13)}
.szp-dash-stats li.is-hot{border-color:#e8a065;background:#fff6ee}
.szp-dash-stats li>a,.szp-dash-stats li>b{display:grid;gap:4px;padding:13px 14px;text-decoration:none;color:inherit}
.szp-dash-stats b{font-size:1.45rem;line-height:1;color:var(--szp-v17-ink,#172334)}
.szp-dash-stats span{font-size:.78rem;color:var(--szp-v17-muted,#647286)}
.szp-dash-block{display:grid;gap:9px}
.szp-dash-block h3{font-size:1rem;margin:0}
.szp-dash-list{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.szp-dash-list a{
  display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;
  padding:11px 13px;border:1px solid var(--szp-v17-border,#e1e6ea);border-radius:11px;
  background:#f8fafb;text-decoration:none;color:inherit;
}
.szp-dash-list a:hover{border-color:var(--szp-v17-orange,#e47a2c);background:#fff6ee}
.szp-dash-list strong{font-size:.88rem;color:var(--szp-v17-ink,#172334)}
.szp-dash-list small{font-size:.74rem;color:var(--szp-v17-muted,#647286)}
@media(max-width:640px){.szp-dash-stats{grid-template-columns:repeat(auto-fit,minmax(104px,1fr));gap:8px}.szp-dash-stats b{font-size:1.2rem}}

/* Notification centre. One row per event, and the only visual weight in the list is
   whether it is unread — a stripe on the leading edge, which reads the same in RTL as
   the border does everywhere else on this dashboard. Kind chips are muted on purpose:
   the sentence is the message, the chip only says where to look. */
.szp-feed{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.szp-feed-item{border:1px solid var(--szp-v17-border,#e1e6ea);border-radius:11px;background:#fff;overflow:hidden}
.szp-feed-item.is-unread{border-color:#e8a065;background:#fff8f2}
.szp-feed-link{
  display:grid;gap:5px;padding:11px 13px;text-decoration:none;color:inherit;
  border-inline-start:3px solid transparent;
}
.szp-feed-item.is-unread .szp-feed-link{border-inline-start-color:var(--szp-v17-orange,#e47a2c)}
a.szp-feed-link:hover{background:#fff6ee}
.szp-feed-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.szp-feed-head strong{font-size:.88rem;color:var(--szp-v17-ink,#172334);font-weight:600}
.szp-feed-kind{
  font-size:.74rem;line-height:1;padding:4px 8px;border-radius:999px;white-space:nowrap;
  background:#eef2f6;color:var(--szp-v17-muted,#647286);
}
.szp-feed-kind-message{background:#e8f2ff;color:#2b5f9e}
.szp-feed-kind-alert{background:#fdefe3;color:#b4611f}
.szp-feed-kind-announcement{background:#eaf6ee;color:#2f7a4a}
.szp-feed-text{font-size:.84rem;color:var(--szp-v17-muted,#647286)}
.szp-feed-time{font-size:.74rem;color:#8a95a4}
.szp-feed-count{
  display:inline-block;min-width:20px;padding:2px 7px;border-radius:999px;
  background:var(--szp-v17-orange,#e47a2c);color:#fff;font-size:.74rem;text-align:center;vertical-align:middle;
}
/* The theme prints its own "اعلان‌ها" item straight into the dashboard sidebar template —
   not through the menu filter — so PHP cannot reach it. It links to a page that says
   "شما ۰ اعلان دارید": the theme's notification feature is unused on this site, and the
   announcements it would show are already one of the sources in our centre. Two items with
   the same label, one of them always empty, is the duplication this dashboard keeps being
   cleaned of. Selector is deliberately narrow: our own item ends in `-notifications/`, not
   `/notifications/`. Delete this rule the day the theme's own notifications are used. */
/* `!important` because the theme puts Bootstrap's `.d-flex` on that anchor, and
   `.d-flex{display:flex!important}` beats an ordinary rule — the same trap this
   project has hit before. The `:has()` rule removes the empty row too; browsers
   without it still lose the link. */
.dashboard-kaveh-sidebar-content-menu a[href$="/notifications/"]{display:none!important}
.dashboard-kaveh-sidebar-content-menu li:has(> a[href$="/notifications/"]){display:none!important}
/* Support desk. A ticket row is one line of subject and one line of facts, because a
   queue is read by scanning the left edge — anything that pushes the subject down a
   line makes ten tickets unscannable. */
.szp-ticket-form{
  display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 14px;padding:14px;
  border:1px solid var(--szp-v17-border,#e1e6ea);border-radius:13px;background:#f8fafb;
}
.szp-ticket-form label{display:grid;gap:5px;font-size:.78rem;color:var(--szp-v17-muted,#647286)}
.szp-ticket-form .szp-ticket-wide{grid-column:1/-1}
.szp-ticket-form input,.szp-ticket-form textarea,.szp-ticket-form select{
  width:100%;padding:9px 11px;border:1px solid var(--szp-v17-border,#e1e6ea);border-radius:9px;
  background:#fff;color:var(--szp-v17-ink,#172334);font:inherit;font-size:.84rem;
}
.szp-ticket-form textarea{resize:vertical}
.szp-ticket-actions{grid-column:1/-1;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.szp-ticket-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.szp-ticket-item{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  border:1px solid var(--szp-v17-border,#e1e6ea);border-radius:11px;background:#fff;padding:10px 12px;
}
.szp-ticket-open{
  flex:1 1 260px;display:grid;gap:6px;text-align:start;background:none;border:0;padding:0;
  cursor:pointer;color:inherit;font:inherit;
}
.szp-ticket-open:hover strong{color:var(--szp-v17-orange,#e47a2c)}
.szp-ticket-line strong{font-size:.88rem;color:var(--szp-v17-ink,#172334)}
.szp-ticket-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:.74rem;color:var(--szp-v17-muted,#647286)}
.szp-ticket-code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.02em;color:#4a5768}
.szp-ticket-req{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.74rem;
  padding:2px 7px;border-radius:999px;background:#eef3f8;color:#3f5c7a;
}
.szp-pd-support{margin-top:12px;font-size:.84rem}
.szp-ticket-urgent{padding:2px 7px;border-radius:999px;background:#fdeaea;color:#b3403f;font-weight:600}
.szp-ticket-status{padding:3px 9px;border-radius:999px;background:#eef2f6;color:#4a5768}
.szp-ticket-status.is-open{background:#fdefe3;color:#b4611f}
.szp-ticket-status.is-answered{background:#eaf6ee;color:#2f7a4a}
.szp-ticket-status.is-closed{background:#eef2f6;color:#7b8698}
@media(max-width:640px){
  .szp-ticket-form{grid-template-columns:1fr}
  .szp-ticket-item{align-items:flex-start}
}
.szp-dash-new{gap:10px}
.szp-pd-feed .szp-feed{margin-top:6px}
@media(max-width:640px){.szp-feed-link{padding:10px 11px}.szp-feed-head strong{font-size:.84rem}}
.szp-dash-reputation{
  display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;
  padding:12px 15px;border:1px solid var(--szp-v17-border);border-radius:13px;background:#fff;
}
.szp-dash-reputation span{font-size:.84rem;font-weight:700}
.szp-dash-reputation strong{font-size:1.05rem;color:var(--szp-v17-orange)}
.szp-dash-reputation small{font-size:.74rem;color:var(--szp-v17-muted)}

.szp-dash-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  min-height:42px;padding:9px 16px;border:1px solid #cbd5db;border-radius:11px;
  background:#fff;color:var(--szp-v17-navy);font:inherit;font-size:.84rem;font-weight:700;
  cursor:pointer;text-decoration:none;
}
.szp-dash-btn:hover{border-color:var(--szp-v17-orange);color:#a85c20;background:#fff6ee}
.szp-dash-btn-primary{background:var(--szp-v17-orange);border-color:var(--szp-v17-orange);color:#fff}
.szp-dash-btn-primary:hover{background:#cf6a1f;border-color:#cf6a1f;color:#fff}
.szp-dash-btn-small{min-height:34px;padding:6px 11px;font-size:.78rem;border-radius:9px}

.szp-dash-card{
  background:#fff;border:1px solid var(--szp-v17-border);border-radius:16px;
  padding:18px;box-shadow:0 8px 24px rgba(13,35,55,.05);
}
.szp-dash-card-head{display:flex;justify-content:space-between;align-items:start;gap:12px;flex-wrap:wrap}
.szp-dash-card-head strong{font-size:1rem}
.szp-dash-card-head small{color:var(--szp-v17-muted);font-size:.78rem}
.szp-dash-status{
  flex:0 0 auto;border-radius:999px;padding:5px 11px;font-size:.74rem;font-weight:800;
  background:#eef2f4;color:#54626f;
}
.szp-status-sent,.szp-status-accepted{background:#e7f5ef;color:#137c64}
.szp-status-active{background:#e8f0fb;color:#1f5fa8}
.szp-status-completed{background:#e2f3ec;color:#0f6b56}
.szp-status-cancelled,.szp-status-rejected{background:#fdecec;color:#a33a3a}
.szp-status-open,.szp-status-new{background:#fff1df;color:#ad5a1e}
.szp-dash-meta{color:var(--szp-v17-muted);font-size:.78rem;margin-top:9px}
.szp-dash-notes{font-size:.84rem;line-height:1.9;margin-top:8px}
.szp-dash-provider{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:11px;font-size:.84rem}
.szp-dash-provider a{color:var(--szp-v17-orange);font-weight:700;text-decoration:none}
.szp-dash-note,.szp-dash-files{color:var(--szp-v17-muted);font-size:.78rem;margin-top:9px}
.szp-dash-links{margin-top:9px;font-size:.78rem;color:var(--szp-v17-muted)}
.szp-dash-links a{color:var(--szp-v17-navy);font-weight:700;text-decoration:none}
.szp-dash-links a:hover{color:#a85c20}

/* The timeline is the answer to "what has actually happened", so it reads as a line
   of events rather than a bare list. */
.szp-dash-timeline{
  list-style:none;margin:14px 0 0;padding:0 14px 0 0;display:grid;gap:11px;
  border-inline-start:0;border-inline-end:2px solid #e6ebee;
}
.szp-dash-timeline li{position:relative;display:grid;gap:2px;font-size:.78rem}
.szp-dash-timeline li::before{
  content:'';position:absolute;inset-inline-end:-20px;top:5px;
  width:9px;height:9px;border-radius:50%;background:var(--szp-v17-orange);
}
.szp-dash-timeline span{font-weight:700}
.szp-dash-timeline time{color:var(--szp-v17-muted);font-size:.74rem}
.szp-dash-timeline em{color:var(--szp-v17-muted);font-style:normal;font-size:.74rem}

.szp-dash-card-actions{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:15px;padding-top:14px;border-top:1px solid #edf0f2}
.szp-dash-pay-state{font-size:.78rem;font-weight:700}
.szp-dash-pay-state[data-szp-pay-state=paid]{color:#137c64}
.szp-dash-pay-state[data-szp-pay-state=pending],.szp-dash-pay-state[data-szp-pay-state=unpaid]{color:#ad5a1e}
.szp-dash-pay-state[data-szp-pay-state=failed],.szp-dash-pay-state[data-szp-pay-state=cancelled]{color:#a33a3a}
.szp-dash-empty{
  text-align:center;padding:34px 20px;border:1px dashed #cdd7dd;border-radius:16px;
  background:#fff;color:var(--szp-v17-muted);
}
.szp-dash-empty p{margin:0 0 14px;font-size:.88rem}
@media(max-width:640px){
  .szp-dash-card{padding:14px}
  .szp-dash-card-actions .szp-dash-btn{flex:1 1 auto}
}

/* The host theme paints every button with its accent colour, so the five lifecycle
   actions on a request all rendered as identical orange calls to action and the one
   real CTA lost its meaning. Stated at guard strength, like szp-contrast-guard. */
html body .szp .szp-dash-btn{
  background:#fff!important;background-image:none!important;
  color:var(--szp-v17-navy)!important;-webkit-text-fill-color:var(--szp-v17-navy)!important;
  border:1px solid #cbd5db!important;box-shadow:none!important;text-shadow:none!important;
}
html body .szp .szp-dash-btn:hover{
  background:#fff6ee!important;border-color:var(--szp-v17-orange)!important;
  color:#a85c20!important;-webkit-text-fill-color:#a85c20!important;
}
html body .szp .szp-dash-btn-primary,
html body .szp .szp-dash-btn-primary:hover{
  background:var(--szp-v17-orange)!important;border-color:var(--szp-v17-orange)!important;
  color:#fff!important;-webkit-text-fill-color:#fff!important;
}


/* == SZP provider card alignment v2 == */
/* Cards were sized by whatever text each provider happened to have, so a grid row
   took the height of its richest card and the sparse ones ended in a block of empty
   white with their button floating in the middle of it. Two rules fix that at the
   source rather than by padding things out: the body is a column whose actions are
   pushed to the bottom, so every call to action lines up across a row; and each text
   block is capped to a fixed number of lines, so no single provider can make its row
   twice as tall as the next. Nothing is stretched and nothing is reserved empty. */
.szp-provider-card-v17{display:flex;flex-direction:column}
.szp-provider-card-media{flex:0 0 auto}
.szp-provider-card-body{flex:1 1 auto;display:flex;flex-direction:column;min-height:0}
.szp-provider-card-actions{
  margin-top:auto;padding-top:13px;border-top:1px solid #eef1f3;
}

/* One line each. A long professional title used to wrap to three lines and set the
   height of every card beside it. */
.szp-provider-card-heading{align-items:center}
.szp-provider-card-heading h3,
.szp-provider-card-heading p{
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;
}
.szp-provider-card-heading>div{min-width:0}

/* The badge row already reserves its own height; the meta line and the tag row are
   capped to one row so an eleven-service provider cannot outgrow a two-service one. */
.szp-provider-card-meta{max-height:1.7em;overflow:hidden}
.szp-provider-card-tags{max-height:26px;overflow:hidden}
.szp-match-reasons{
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;
  overflow:hidden;min-height:1.5em;
}
/* And the rows themselves. With the actions pinned and the text capped, the spread
   between the tallest and shortest card is bounded, so making every row the same
   height costs a little breathing room above one button rather than a ragged grid. */
@media(min-width:641px){
  /* Only where a row is wide enough to absorb it. On a 2-column phone layout this
     made every card as tall as the tallest one on the page - the "too long" cards. */
  .szp-people-v17,.szp-related-grid{grid-auto-rows:1fr}
}


/* == SZP typography rhythm v1 == */
/* Section headings ran to 2.7rem above a 0.9rem muted line that stretched the full
   width of the page, so the pair read as a shout followed by a whisper. The heading
   comes down, the supporting line comes up and is held to a readable measure, and the
   space between them is the same everywhere. */
.szp-v17 .szp-eyebrow{font-size:.78rem;font-weight:800;letter-spacing:.02em}
.szp-section-head-v17{margin-bottom:24px}
.szp-section-head-v17 h2{font-size:clamp(1.5rem,2.2vw,2.15rem);margin-top:6px}
.szp-section-head-v17 p{font-size:.88rem;line-height:1.95;max-width:52ch;margin-top:9px}
.szp-v17-section{padding-block:clamp(40px,5.5vw,68px)}
.szp-profile-section-v17 h2{font-size:clamp(1.25rem,1.8vw,1.6rem);margin:6px 0 12px}
.szp-profile-section-v17>p{font-size:.88rem;line-height:1.95;max-width:56ch}

/* == SZP media viewer v2 == */
/* The dialog was a fixed 1100px box around whatever image it held, so a 300px
   thumbnail sat in the middle of eight hundred pixels of empty navy. The box hugs
   the picture now and the controls keep their own room around it. */
.szp-gallery-dialog{width:max-content;max-width:min(94vw,1080px)}
.szp-gallery-stage{
  display:grid;place-items:center;padding:54px 64px 44px;
  min-width:min(72vw,340px);
  /* The stage carried a 70vh floor, which is what kept the box tall no matter how
     small the picture was. */
  min-height:0;
}
.szp-gallery-stage img{
  max-width:min(84vw,940px);max-height:78vh;width:auto;height:auto;border-radius:12px;
}
@media(max-width:640px){
  .szp-gallery-stage{padding:48px 46px 40px;min-width:0}
  .szp-gallery-stage img{max-width:78vw}
}

/* == SZP profile action bar v2 == */
/* It hung at the bottom of every screen from the moment the page opened, over the
   content, for the whole scroll. Now the buttons are read in place first; the bar
   only appears once they have scrolled off the top, arrives as a header, and goes
   away again the moment you scroll back up to them. */
@media(max-width:640px){
  /* An earlier pass pins this bar to the bottom with !important. Setting top without
     matching that weight left both edges anchored, so the bar stretched the whole
     viewport and the two buttons filled the screen. It keeps the size it already had -
     the grid, padding and type from those rules are untouched - and only changes which
     edge it is attached to. */
  .szp-mobile-action-v17{
    top:0!important;bottom:auto!important;height:auto!important;
    transform:translateY(-100%);transition:transform .22s ease;
    border-top:0;border-bottom:1px solid var(--szp-v17-border);
  }
  .szp-mobile-action-v17.is-stuck{transform:translateY(0)}
}

/* == SZP question acknowledgement v2 == */
/* "پرسش دیگری دارم" rendered as a raw orange block with an underline through it,
   a treatment that appears nowhere else on the site. It is a quiet text action. */
.szp-qa-ask-again,
html body .szp .szp-qa-ask-again{
  display:inline-flex;align-items:center;min-height:36px;padding:6px 2px;
  border:0!important;background:none!important;background-image:none!important;
  color:var(--szp-v17-muted)!important;-webkit-text-fill-color:var(--szp-v17-muted)!important;
  font:inherit;font-size:.84rem;font-weight:700;text-decoration:underline;
  text-underline-offset:4px;cursor:pointer;box-shadow:none!important;
}
.szp-qa-ask-again:hover,
html body .szp .szp-qa-ask-again:hover{
  color:#a85c20!important;-webkit-text-fill-color:#a85c20!important;background:none!important;
}


/* == SZP chat drawer v2 == */
/* It filled the screen from top to bottom like a page, with a header block deep
   enough to push the first message out of sight, and choosing the wrong
   conversation meant closing it and starting again. It is a panel now - the size of
   the thing it holds - with the two conversations as a switch across the top. */
.szp-chat-drawer{
  top:auto;bottom:18px;inset-inline-end:18px;
  height:min(70vh,560px);width:min(374px,calc(100vw - 24px));
  border-radius:16px;overflow:hidden;
  border:1px solid var(--szp-v17-border,#e1e6ea);
  box-shadow:0 24px 60px rgba(11,29,49,.26);
}
.szp-chat-drawer-head{padding:12px 14px;gap:8px;align-items:center}
.szp-chat-drawer-head b{font-size:.88rem;flex:1;min-width:0}
.szp-chat-drawer-close{width:28px;height:28px;font-size:1.1rem}
.szp-chat-tabs{
  display:grid;grid-template-columns:1fr 1fr;gap:0;
  background:#0b1d31;padding:0 10px 10px;
}
.szp-chat-tabs button{
  border:0;cursor:pointer;font:inherit;font-size:.78rem;font-weight:700;
  padding:8px 6px;border-radius:9px;
  background:rgba(255,255,255,.1);color:#cfd9e2;
}
.szp-chat-tabs button:first-child{border-start-end-radius:0;border-end-end-radius:0}
.szp-chat-tabs button:last-child{border-start-start-radius:0;border-end-start-radius:0}
.szp-chat-tabs button[aria-selected=true]{background:#fff;color:#0b1d31}
.szp-chat-drawer-body{padding:13px}
.szp-chat-drawer-form{padding:10px 12px}
.szp-chat-drawer-form textarea{max-height:96px}

/* The send button becomes three working dots rather than an empty disabled box, so a
   slow round trip does not read as a dead button. */
.szp-chat-drawer-form.is-sending button[data-chat-send]{min-width:74px;position:relative}
.szp-chat-drawer-form.is-sending button[data-chat-send]::after{
  content:'';position:absolute;inset:0;display:grid;place-items:center;
  background-image:radial-gradient(circle,#fff 42%,transparent 44%);
  background-size:7px 7px;background-repeat:repeat-x;background-position:center;
  width:26px;margin:auto;animation:szpChatDots .9s linear infinite;
}
@keyframes szpChatDots{0%{opacity:.35}50%{opacity:1}100%{opacity:.35}}
@media(max-width:640px){
  .szp-chat-drawer{
    /* Clear of the theme's fixed bottom navigation, which otherwise sits on top of
       the composer - the one control the panel exists for. */
    inset-inline:0;bottom:calc(84px + env(safe-area-inset-bottom,0px));width:100vw;
    height:min(70dvh,540px);border-radius:16px 16px 0 0;
  }
}

/* == SZP guest conversation v1 == */
/* Name and number, in the panel, and the conversation opens underneath them. There is
   no account step and no navigation away: the form, the sign-up and the messages are
   the same box, which is the whole point of it. */
.szp-guest-form{display:grid;gap:11px;align-content:start;padding:2px}
.szp-guest-lead{margin:0;font-size:.84rem;line-height:1.9;color:var(--szp-v17-muted,#647286)}
.szp-guest-form label{display:grid;gap:5px}
.szp-guest-form label>span{font-size:.78rem;font-weight:800;color:var(--szp-v17-navy,#0b1d31)}
.szp-guest-form input{width:100%;min-height:44px}
.szp-guest-form .szp-inline-status:empty{display:none}
.szp-guest-form .szp-inline-status{margin-top:0}

/*
 * == Dashboard components ==
 *
 * Eighteen classes the dashboard renderers emit had no rule anywhere in this file, so
 * conversation lists, saved places, questions, alerts and the provider queues rendered
 * as raw run-on markup: a name, an unread count and a date with nothing between them.
 * The markup was right the whole time; the styling was simply never written. Everything
 * below is scoped to our own containers and uses the platform's own tokens.
 */

/* -- lists of things you click into (conversations, places, alerts, projects) -- */
.szp-dash-threads,.szp-dash-places,.szp-dash-alerts,.szp-dash-projects,.szp-dash-qa,
.szp-pd-threads,.szp-pd-portfolio,.szp-pd-reviews{
  list-style:none;margin:0;padding:0;display:grid;gap:8px;
}
.szp-dash-thread,.szp-pd-thread{
  display:flex;align-items:center;gap:10px;width:100%;
  padding:12px 14px;border:1px solid var(--szp-v17-border,#e1e6ea);border-radius:12px;
  background:#fff;color:var(--szp-v17-ink,#172334);text-align:start;cursor:pointer;font:inherit;
  transition:border-color .16s,background .16s,transform .16s;
}
.szp-dash-thread:hover,.szp-pd-thread:hover{border-color:var(--szp-v17-orange,#e47a2c);background:#fff8f2;transform:translateY(-1px)}
.szp-dash-thread strong,.szp-pd-thread strong{flex:1;min-width:0;font-size:.88rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* The date was jammed against the name and the unread count with no separation. */
.szp-dash-thread time,.szp-pd-thread time,.szp-pd-date{
  flex:0 0 auto;font-size:.74rem;color:var(--szp-v17-muted,#647286);white-space:nowrap;
}
.szp-dash-badge{
  flex:0 0 auto;display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 7px;
  border-radius:999px;background:var(--szp-v17-orange,#e47a2c);color:#fff;
  font-size:.74rem;font-weight:800;line-height:1;
}
.szp-dash-thread-view{
  display:grid;gap:10px;margin-top:12px;padding:14px;
  border:1px solid var(--szp-v17-border,#e1e6ea);border-radius:14px;background:#f8fafb;
}
.szp-dash-thread-view[hidden]{display:none}

/* -- the ticket strip: a different system, so it reads as a different thing -- */
.szp-dash-tickets{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:11px 14px;border:1px dashed #cdd7dd;border-radius:12px;background:#f8fafb;
  font-size:.84rem;color:var(--szp-v17-muted,#647286);
}

/* -- forms inside the dashboard (add a place, ask a question, set an alert) -- */
.szp-dash-form{display:grid;gap:10px;margin-top:12px}
.szp-dash-form label{display:grid;gap:5px}
.szp-dash-form label>span{font-size:.78rem;font-weight:800;color:var(--szp-v17-navy,#0b1d31)}
.szp-dash-form input,.szp-dash-form select,.szp-dash-form textarea{width:100%;min-height:44px}
.szp-dash-form textarea{min-height:84px}
.szp-dash-form .szp-dash-btn{justify-self:start}
.szp-dash-form-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.szp-dash-status-msg{font-size:.78rem;color:#137c64;min-height:1.3em}
.szp-dash-status-msg.is-error{color:#a23c34}

/* -- rows that are records rather than links -- */
.szp-dash-places>li,.szp-dash-alerts>li,.szp-dash-projects>li,.szp-dash-qa>li,
.szp-pd-portfolio>li,.szp-pd-reviews>li{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:11px 13px;border:1px solid var(--szp-v17-border,#e1e6ea);border-radius:11px;background:#fff;
  font-size:.84rem;
}
.szp-dash-places small,.szp-dash-alerts small,.szp-dash-projects small,.szp-dash-qa small,
.szp-pd-portfolio small,.szp-pd-reviews small{color:var(--szp-v17-muted,#647286);font-size:.74rem}

/* -- provider queue chips -- */
.szp-pd-status-open{
  display:inline-flex;align-items:center;padding:3px 9px;border-radius:999px;
  background:#fff4e2;color:#8a5700;border:1px solid #f0cf9e;font-size:.74rem;font-weight:800;
}
.szp-pd-media-actions{display:flex;gap:6px;flex-wrap:wrap;margin-top:7px}
.szp-pd-media-actions .szp-dash-btn,.szp-pd-media-actions button{min-height:32px;padding:5px 10px;font-size:.74rem}

@media(max-width:640px){
  .szp-dash-thread,.szp-pd-thread{padding:10px 12px;gap:8px}
  .szp-dash-thread strong,.szp-pd-thread strong{font-size:.84rem}
  .szp-dash-tickets{flex-direction:column;align-items:stretch;text-align:center}
}

/* == Part-one repairs == */

/* Two clear buttons in one field: ours, plus the one WebKit/Blink draws for
   input[type=search]. Only ours is wired to close the suggestion list, so the native
   one looked broken. It is hidden everywhere our own button exists. */
.szp-search-input input[type=search]::-webkit-search-cancel-button,
.szp-flow-search input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;display:none}

/*
 * Comparison on a phone.
 *
 * Three providers stacked full-height means you can never see two values at once,
 * which is the entire point of comparing. The cards become a snapping horizontal
 * track instead: rows line up across cards, and the next card peeks at the edge so it
 * is obvious there is more to swipe to.
 */
@media(max-width:640px){
  .szp-compare-grid{
    display:flex!important;gap:10px;
    overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    padding-bottom:6px;
  }
  .szp-compare-grid>article{flex:0 0 82%;scroll-snap-align:start;min-width:0}
  .szp-compare-grid dt,.szp-compare-grid dd{font-size:.78rem}
  .szp-compare-dialog h2{font-size:1.1rem}
}

/*
 * The provider cards inside the request flow.
 *
 * They share the marketplace card's markup, and the marketplace rules turn that into a
 * tall photo-led card - which inside the flow's short scroll box showed a picture and
 * essentially nothing else. Here the photo is a thumbnail and the facts lead, because
 * this is a list you choose from, not a shop window.
 */
.szp-flow-provider-results{display:grid;gap:8px}
.szp-flow-provider-results .szp-provider-card-v17{
  display:grid!important;grid-template-columns:96px minmax(0,1fr);height:auto!important;
  align-items:stretch;border-radius:13px;
}
.szp-flow-provider-results .szp-provider-card-media{height:100%}
.szp-flow-provider-results .szp-provider-card-media>a{height:100%;aspect-ratio:auto!important;min-height:96px}
.szp-flow-provider-results .szp-heart,.szp-flow-provider-results .szp-demo-ribbon{display:none!important}
.szp-flow-provider-results .szp-provider-card-body{padding:10px!important;gap:5px}
.szp-flow-provider-results .szp-provider-card-heading h3{font-size:.88rem!important}
.szp-flow-provider-results .szp-provider-card-heading p{font-size:.74rem!important}
.szp-flow-provider-results .szp-badge-row{min-height:0;margin:0!important}
.szp-flow-provider-results .szp-provider-card-meta{min-height:0;margin:0!important;font-size:.74rem}
/* Rating and price side by side even on a phone: the box is wide here, not a card column. */
.szp-flow-provider-results .szp-provider-card-trust{grid-template-columns:1fr 1fr!important;gap:6px!important}
.szp-flow-provider-results .szp-provider-card-trust>*{min-height:38px!important;flex-direction:row!important;gap:5px!important;padding:5px 7px!important}
/* An older rule hid the services here. They are exactly what someone picks a provider
   on, so they stay - one line, clipped rather than wrapped. */
.szp-flow-provider-results .szp-provider-card-tags{display:flex!important;min-height:0;margin:0!important;flex-wrap:nowrap;overflow:hidden}
.szp-flow-provider-results .szp-provider-card-tags span{white-space:nowrap;font-size:.74rem}
.szp-flow-provider-results .szp-provider-card-actions{grid-template-columns:1fr!important;padding-top:6px!important;margin-top:4px!important}
.szp-flow-provider-results .szp-provider-card-actions .szp-link-btn{display:none}

/* Breadcrumbs for the three tools. They are linked to from products, articles and
   search results as much as from the menu, so each one has to say where it sits. */
.szp-tools-crumbs{
  display:flex;align-items:center;gap:7px;flex-wrap:wrap;
  font-size:.78rem;color:var(--szp-v17-muted,#647286);margin-bottom:14px;
}
.szp-tools-crumbs a{color:inherit;text-decoration:none}
.szp-tools-crumbs a:hover{color:#a85c20;text-decoration:underline;text-underline-offset:3px}
.szp-tools-crumbs b{color:var(--szp-v17-ink,#172334);font-weight:700}
.szp-tools-crumbs span{opacity:.55}

/* The signed-out chat no longer frames a sign-in screen at all - see the guest
   conversation block above - so the iframe that used to live here is gone. */

/* ---------------------------------------------------------------------------
   The material workbench.

   One panel serves both tool pages: the calculator picks a system from the list,
   the project basket resolves a sentence to the same list. Everything below the
   picker is identical because it is the same calculation either way.

   Colours are stated with the platform tokens and a literal fallback, because
   these surfaces render inside the theme's page where the tokens on .szp-v17 are
   not in scope.
--------------------------------------------------------------------------- */
.szp-workbench{display:grid;gap:clamp(14px,2vw,22px)}
.szp-wb-door{display:flex;gap:10px;align-items:end;flex-wrap:wrap}
.szp-wb-textfield{display:grid;gap:7px;flex:1 1 260px;min-width:0}
.szp-wb-textfield>span{font-size:.84rem;font-weight:700;color:var(--szp-v17-ink,#172334)}
.szp-wb-textfield input{width:100%;min-height:48px;border:1px solid var(--szp-v17-border,#e1e6ea);border-radius:12px;padding-inline:14px;background:#fff;color:#172334}
.szp-wb-search{display:flex;align-items:center;gap:9px;flex:1 1 260px;min-width:0;border:1px solid var(--szp-v17-border,#e1e6ea);border-radius:12px;background:#fff;padding-inline:14px;min-height:48px}
.szp-wb-search>span{color:#8a97a5;font-size:1.05rem}
.szp-wb-search input{flex:1;border:0;background:transparent;min-height:46px;color:#172334;min-width:0}
.szp-wb-hint{margin:0;font-size:.78rem;color:var(--szp-v17-muted,#647286)}

.szp-wb-systems{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.szp-wb-system{display:grid;gap:4px;text-align:start;background:#fff;border:1px solid var(--szp-v17-border,#e1e6ea);border-radius:14px;padding:13px 15px;cursor:pointer;min-height:0}
.szp-wb-system b{font-size:.88rem;color:var(--szp-v17-ink,#172334);font-weight:700}
.szp-wb-system small{font-size:.78rem;color:var(--szp-v17-muted,#647286);line-height:1.7}
.szp-wb-system[aria-pressed="true"]{border-color:var(--szp-v17-orange,#e47a2c);box-shadow:0 0 0 2px rgba(228,122,44,.16)}
.szp-wb-empty{margin:0;font-size:.84rem;color:var(--szp-v17-muted,#647286)}

/* One column. The shared .szp-tools-form is an auto-fit grid, which is right for a row
   of small fields and wrong here: it dealt the option groups out sideways and left the
   submit button stranded in the empty column beside them. */
.szp-wb-form{display:grid;grid-template-columns:1fr;align-items:stretch;gap:clamp(12px,1.8vw,18px)}
.szp-wb-form>button{justify-self:start}
.szp-wb-choices{display:grid;gap:12px}
.szp-wb-option,.szp-wb-extras,.szp-wb-dims{border:1px solid var(--szp-v17-border,#e1e6ea);border-radius:14px;padding:12px 14px;margin:0;background:#fff}
.szp-wb-option legend,.szp-wb-extras legend,.szp-wb-dims legend{font-size:.84rem;font-weight:700;color:var(--szp-v17-ink,#172334);padding-inline:4px}
.szp-wb-radios,.szp-wb-checks,.szp-wb-modes{display:flex;flex-wrap:wrap;gap:8px}
.szp-wb-radios label,.szp-wb-checks label,.szp-wb-modes label{display:flex;align-items:center;gap:7px;font-size:.84rem;color:var(--szp-v17-ink,#172334);border:1px solid var(--szp-v17-border,#e1e6ea);border-radius:10px;padding:8px 11px;cursor:pointer;background:#fff}
.szp-wb-radios label:has(input:checked),.szp-wb-checks label:has(input:checked),.szp-wb-modes label:has(input:checked){border-color:var(--szp-v17-orange,#e47a2c);background:#fff6ef}
.szp-wb-radios input,.szp-wb-checks input,.szp-wb-modes input{width:auto;min-height:0;margin:0}
.szp-wb-checks small{color:var(--szp-v17-muted,#647286);font-size:.78rem}
.szp-wb-dim-fields{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin-top:10px}
.szp-wb-dim-fields label{display:grid;gap:6px;min-width:0}
.szp-wb-dim-fields span{font-size:.78rem;font-weight:700;color:var(--szp-v17-ink,#172334)}
.szp-wb-dim-fields input{width:100%;min-height:46px;border:1px solid var(--szp-v17-border,#e1e6ea);border-radius:11px;padding-inline:12px;background:#fff;color:#172334}
.szp-wb-area-note{margin:10px 0 0;font-size:.84rem;font-weight:700;color:var(--szp-v17-orange,#e47a2c)}

/* The stack. Reading order is outside-in, which is how the layers are named. */
.szp-stack{list-style:none;margin:16px 0;padding:0;display:grid;gap:4px;border-radius:14px;overflow:hidden;border:1px solid var(--szp-v17-border,#e1e6ea)}
.szp-stack-layer{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:4px 12px;padding:11px 14px;background:#fff;border-bottom:1px solid #f0f3f5}
.szp-stack-layer:last-child{border-bottom:0}
.szp-stack-role{grid-column:1;font-size:.74rem;color:var(--szp-v17-muted,#647286)}
.szp-stack-name{grid-column:1;grid-row:2;font-size:.88rem;color:var(--szp-v17-ink,#172334)}
.szp-stack-qty{grid-column:2;grid-row:1/3;font-size:.84rem;font-weight:700;color:var(--szp-v17-navy,#0b1d31);white-space:nowrap}

.szp-table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.szp-bundle-table{width:100%;border-collapse:collapse;font-size:.84rem;min-width:420px}
.szp-bundle-table th,.szp-bundle-table td{padding:9px 10px;border-bottom:1px solid #eef1f4;text-align:start;vertical-align:top}
.szp-bundle-table th{font-size:.78rem;color:var(--szp-v17-muted,#647286);font-weight:700}
.szp-line-products{display:flex;flex-wrap:wrap;gap:6px;margin-top:5px}
.szp-line-products a{font-size:.74rem;color:#a85c20;text-decoration:none;border:1px solid #f0dcc9;border-radius:999px;padding:2px 8px}

/* Three totals, three real products. The middle one is the default the rest of
   the page already priced, so it is the one marked. */
.szp-tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:9px;margin:12px 0}
.szp-tier{display:grid;gap:3px;border:1px solid var(--szp-v17-border,#e1e6ea);border-radius:13px;padding:11px 13px;background:#fff}
.szp-tier span{font-size:.78rem;color:var(--szp-v17-muted,#647286)}
.szp-tier b{font-size:.88rem;color:var(--szp-v17-navy,#0b1d31)}
.szp-tier.is-mid{border-color:var(--szp-v17-orange,#e47a2c);background:#fff8f2}

.szp-tools-switch,.szp-product-tools-links{display:grid;gap:9px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin-top:clamp(18px,3vw,30px)}
.szp-tools-switch-item{display:grid;gap:3px;background:#fff;border:1px solid var(--szp-v17-border,#e1e6ea);border-radius:13px;padding:12px 14px;text-decoration:none}
.szp-tools-switch-item b{font-size:.84rem;color:var(--szp-v17-ink,#172334)}
.szp-tools-switch-item small{font-size:.78rem;color:var(--szp-v17-muted,#647286);line-height:1.7}
.szp-tools-switch-item.is-current{border-color:var(--szp-v17-orange,#e47a2c);background:#fff8f2}

/* Price and trend. */
.szp-price-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:12px}
.szp-price-head b{font-size:.94rem;color:var(--szp-v17-ink,#172334)}
.szp-price-head strong{font-size:1.05rem;color:var(--szp-v17-navy,#0b1d31)}
.szp-price-head em{font-size:.84rem;color:var(--szp-v17-muted,#647286);font-style:normal}
.szp-spark{display:block;width:100%;height:clamp(96px,18vw,150px);margin:6px 0 14px;overflow:visible}
.szp-spark-line{fill:none;stroke-width:3;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round}
.szp-spark-line.is-up{stroke:#c0392b}
.szp-spark-line.is-down{stroke:#1f8a5f}
.szp-spark-area{stroke:none;opacity:.12}
.szp-spark-area.is-up{fill:#c0392b}
.szp-spark-area.is-down{fill:#1f8a5f}
.szp-spark-dot{fill:var(--szp-v17-orange,#e47a2c)}
.szp-price-summary{list-style:none;margin:0 0 14px;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px}
.szp-price-summary li{display:grid;gap:3px;border:1px solid var(--szp-v17-border,#e1e6ea);border-radius:12px;padding:9px 11px;background:#fff}
.szp-price-summary span{font-size:.78rem;color:var(--szp-v17-muted,#647286)}
.szp-price-summary b{font-size:.84rem;color:var(--szp-v17-ink,#172334)}
.szp-price-hit{display:flex;justify-content:space-between;align-items:center;gap:10px;width:100%;text-align:start;background:#fff;border:1px solid var(--szp-v17-border,#e1e6ea);border-radius:11px;padding:10px 13px;margin-bottom:6px;cursor:pointer}
.szp-price-hit b{font-size:.84rem;color:var(--szp-v17-ink,#172334);font-weight:700}
.szp-price-hit span{font-size:.78rem;color:var(--szp-v17-muted,#647286);white-space:nowrap}
.szp-cheaper{margin-top:16px;border:1px solid #f0dcc9;background:#fff8f2;border-radius:14px;padding:13px 15px}
.szp-cheaper h4{margin:0 0 9px;font-size:.84rem;color:var(--szp-v17-ink,#172334)}
.szp-cheaper ul{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.szp-cheaper li{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px}
.szp-cheaper a{text-decoration:none;color:var(--szp-v17-ink,#172334);font-size:.84rem}
.szp-cheaper span{font-size:.84rem;font-weight:700;color:var(--szp-v17-navy,#0b1d31)}
.szp-cheaper small{font-size:.78rem;color:#1f8a5f;font-weight:700}
.szp-product-tools{margin-top:clamp(22px,4vw,40px)}

@media (max-width:640px){
  .szp-wb-systems{grid-template-columns:1fr}
  .szp-wb-door{flex-direction:column;align-items:stretch}
  /*
   * `flex:1 1 260px` on the search box is a *width* while the door is a row. The
   * moment this media query turns the door into a column, that 260px becomes the
   * box's height — measured on a 390px phone: a 260px-tall panel wrapped around a
   * 46px field, which is the big empty box on the calculator. The basis has to be
   * released wherever the direction changes.
   */
  .szp-wb-search,
  .szp-wb-textfield{flex:0 0 auto}
  .szp-wb-door .szp-btn{width:100%}
  .szp-tiers{grid-template-columns:1fr}
}

/* Elementor's global kit paints every <button> on the site with the accent colour and
   its selector sits on <body>, so it reaches inside our panels: the system cards came
   out orange-on-orange and unreadable. The same treatment platform.js already gives the
   select control, stated here because these surfaces load without platform.js. */
html body .szp .szp-wb-system,
html body .szp .szp-price-hit{
  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 var(--szp-v17-border,#e1e6ea)!important;box-shadow:none!important;text-shadow:none!important;
}
html body .szp .szp-wb-system b,
html body .szp .szp-price-hit b{color:var(--szp-v17-ink,#172334)!important;-webkit-text-fill-color:var(--szp-v17-ink,#172334)!important}
html body .szp .szp-wb-system small,
html body .szp .szp-price-hit span{color:var(--szp-v17-muted,#647286)!important;-webkit-text-fill-color:var(--szp-v17-muted,#647286)!important}
html body .szp .szp-wb-system[aria-pressed="true"]{
  border-color:var(--szp-v17-orange,#e47a2c)!important;background:#fff8f2!important;
  box-shadow:0 0 0 2px rgba(228,122,44,.16)!important;
}
/* The kit reaches the option chips through their <label>, and the inputs through the
   same rule that turned every field orange. */
html body .szp .szp-wb-radios label,
html body .szp .szp-wb-checks label,
html body .szp .szp-wb-modes label{
  background:#fff!important;color:var(--szp-v17-ink,#172334)!important;
  -webkit-text-fill-color:var(--szp-v17-ink,#172334)!important;border:1px solid var(--szp-v17-border,#e1e6ea)!important;
}
html body .szp .szp-wb-radios label:has(input:checked),
html body .szp .szp-wb-checks label:has(input:checked),
html body .szp .szp-wb-modes label:has(input:checked){
  border-color:var(--szp-v17-orange,#e47a2c)!important;background:#fff6ef!important;
}
html body .szp .szp-wb-radios input,
html body .szp .szp-wb-checks input,
html body .szp .szp-wb-modes input{
  background:#fff!important;border:1px solid #b9c4cd!important;border-radius:4px!important;
  min-height:0!important;width:auto!important;accent-color:var(--szp-v17-orange,#e47a2c);
}
.szp-tiers-note{margin:-4px 0 12px;font-size:.78rem;color:var(--szp-v17-muted,#647286);line-height:1.8}

/* The theme's dashboard ships a four-slide carousel of its own demo artwork - a cube
   playing a guitar on a purple planet - and it is the first thing a customer sees in
   their own workspace. The theme itself is not touched: the container is hidden only
   while it still holds the stock file, so the day somebody puts real slides in, they
   appear. */
.dashboard-kaveh-carousel:has(img[src*="/assets/images/dashboard/carousel.png"]){display:none!important}

/* The location step while its data is in flight. Same shape as the real step, so the
   card is never empty and nothing moves when the options arrive. */
.szp-flow-skeleton{display:contents}
.szp-flow-skeleton select[disabled],
.szp-flow-skeleton textarea[disabled]{
  background:linear-gradient(90deg,#f4f6f8 25%,#eceff2 37%,#f4f6f8 63%)!important;
  background-size:400% 100%!important;animation:szpShimmer 1.4s ease-in-out infinite;
  color:#8a97a5!important;-webkit-text-fill-color:#8a97a5!important;cursor:progress;
}
@keyframes szpShimmer{0%{background-position:100% 0}100%{background-position:0 0}}
@media (prefers-reduced-motion:reduce){
  .szp-flow-skeleton select[disabled],.szp-flow-skeleton textarea[disabled]{animation:none}
}

/* ---------------------------------------------------------------------------
   Q&A — denser, role-aware, and readable on a phone.

   The block used to be a stack of tall cards with an open reply box under every
   question and the ask form buried at the very bottom. Ten questions made a very
   long page in which nothing was scannable and the one action a visitor might take
   was the furthest from where they were reading.
--------------------------------------------------------------------------- */
.szp-qa-head{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:clamp(12px,2vw,18px)}
.szp-qa-head h2{margin:6px 0 0;display:flex;align-items:center;gap:8px}
.szp-qa-count{font-size:.84rem;font-weight:700;color:var(--szp-v17-muted,#647286);background:#eef2f5;border-radius:999px;padding:2px 9px}
.szp-qa-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.szp-qa-item{border:1px solid var(--szp-v17-border,#e1e6ea);border-radius:14px;padding:13px 15px;background:#fff}
.szp-qa-question{margin:0;font-size:.88rem;font-weight:700;line-height:1.85;color:var(--szp-v17-ink,#172334);overflow-wrap:anywhere}
.szp-qa-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-top:6px;font-size:.78rem;color:var(--szp-v17-muted,#647286)}
.szp-qa-answer-count{font-weight:700;color:var(--szp-v17-navy,#0b1d31)}
.szp-qa-answer-count.is-none{font-weight:400;opacity:.75}
.szp-qa-answers{display:grid;gap:8px;margin-top:10px}
.szp-qa-answer{border-inline-start:3px solid #e1e6ea;padding:2px 11px;background:transparent}
.szp-qa-answer p{margin:4px 0 3px;font-size:.84rem;line-height:1.95;color:var(--szp-v17-ink,#172334);overflow-wrap:anywhere}
.szp-qa-answer time{font-size:.74rem;color:var(--szp-v17-muted,#647286)}
.szp-qa-role{display:inline-block;font-size:.74rem;font-weight:700;border-radius:999px;padding:2px 9px;line-height:1.9}
/* The badge is the point: three kinds of answer carry very different weight. */
.szp-qa-role-admin{background:#eaf4ff;color:#12507f}
.szp-qa-answer-admin{border-inline-start-color:#12507f}
.szp-qa-role-provider{background:#fff2e6;color:#a85c20}
.szp-qa-answer-provider{border-inline-start-color:#e47a2c}
.szp-qa-role-user,.szp-qa-role-customer{background:#eef5ee;color:#2c6b3f}
.szp-qa-answer-user,.szp-qa-answer-customer{border-inline-start-color:#4a9163}
.szp-qa-more-toggle,.szp-qa-reply-toggle{margin-top:8px;font-size:.78rem}
.szp-qa-more{display:grid;gap:8px}
.szp-qa-answer-signin{margin:9px 0 0;font-size:.78rem}
.szp-qa-answer-form{margin-top:9px;display:grid;gap:8px}
.szp-qa-answer-form textarea{width:100%;border:1px solid var(--szp-v17-border,#e1e6ea);border-radius:11px;padding:10px 12px;font:inherit;background:#fff;color:#172334}
.szp-qa-answer-form button{justify-self:start}

@media (max-width:640px){
  .szp-qa-head{align-items:stretch}
  .szp-qa-head .szp-btn{width:100%}
  .szp-qa-item{padding:12px 13px;border-radius:12px}
  .szp-qa-question{font-size:.88rem}
}

/* Provider results while the query is in flight. A cold provider query on this host is
   measured in seconds, so the wait is real and has to look like a wait. */
.szp-provider-skeleton{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.szp-skel-card{height:104px;border-radius:14px;border:1px solid var(--szp-v17-border,#e1e6ea);
  background:linear-gradient(90deg,#f4f6f8 25%,#eceff2 37%,#f4f6f8 63%);background-size:400% 100%;
  animation:szpShimmer 1.4s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.szp-skel-card{animation:none}}

/* The verification step inside the request flow. */
.szp-otp-box{display:grid;gap:12px;margin-top:6px}
.szp-otp-target{margin:0;font-size:.84rem;color:var(--szp-v17-muted,#647286);line-height:2}
.szp-otp-field{display:grid;gap:7px;max-width:260px}
.szp-otp-field>span{font-size:.84rem;font-weight:700;color:var(--szp-v17-ink,#172334)}
.szp-otp-field input{width:100%;min-height:52px;border:1px solid var(--szp-v17-border,#e1e6ea);border-radius:12px;
  background:#fff;color:#172334;text-align:center;font-size:1.3rem;letter-spacing:.5em;font-weight:700;padding-inline:12px}
.szp-otp-field input:focus-visible{outline:2px solid var(--szp-v17-orange,#e47a2c);outline-offset:1px}
#szpOtpResend{justify-self:start;font-size:.84rem}
@media (max-width:430px){.szp-otp-field{max-width:none}}

/* ---------------------------------------------------------------------------
   The verification widget. One appearance, wherever identity is asked for:
   the request modal, the question form, the chat panel.
--------------------------------------------------------------------------- */
.szp-otp{display:grid;gap:11px}
.szp-otp-intro{margin:0;font-size:.84rem;line-height:2;color:var(--szp-v17-muted,#647286)}
.szp-otp-row{display:grid;gap:6px}
.szp-otp-row>span{font-size:.84rem;font-weight:700;color:var(--szp-v17-ink,#172334)}
.szp-otp-row input{width:100%;min-height:48px;border:1px solid var(--szp-v17-border,#e1e6ea);border-radius:12px;
  padding-inline:14px;background:#fff;color:#172334;font:inherit}
.szp-otp-row input:focus-visible{outline:2px solid var(--szp-v17-orange,#e47a2c);outline-offset:1px}
.szp-otp-code input{text-align:center;font-size:1.25rem;letter-spacing:.45em;font-weight:700;min-height:54px}
.szp-otp-sent{margin:0;font-size:.84rem;line-height:2;color:var(--szp-v17-muted,#647286)}
.szp-otp-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.szp-otp-go{min-height:48px}
.szp-otp-status{min-height:1.2em;font-size:.84rem;color:var(--szp-v17-muted,#647286)}
.szp-otp-status.is-error{color:#b32d2e}
.szp-qa-otp{margin:10px 0;padding:13px;border:1px solid #f0dcc9;border-radius:14px;background:#fff8f2}
.szp-chat-otp{padding:14px}
@media (max-width:430px){
  .szp-otp-go{width:100%}
  .szp-otp-actions{align-items:stretch}
}

/* ---------------------------------------------------------------------------
   The map point picker. One component, used by the saved-address form and the
   request flow. No third-party SDK and no API key, so a missing key can never
   stop somebody saving an address.
--------------------------------------------------------------------------- */
.szp-map{position:relative;height:clamp(200px,42vw,300px);border:1px solid var(--szp-v17-border,#e1e6ea);
  border-radius:14px;overflow:hidden;background:#eef2f5;touch-action:none;user-select:none}
.szp-map-canvas{position:absolute;inset:0;cursor:grab}
.szp-map-canvas:active{cursor:grabbing}
.szp-map-canvas img{position:absolute;width:256px;height:256px;pointer-events:none;max-width:none}
/* The centre is the chosen point - a fixed crosshair works with a thumb, a draggable
   marker does not. */
.szp-map-pin{position:absolute;left:50%;top:50%;width:26px;height:26px;margin:-26px 0 0 -13px;pointer-events:none}
.szp-map-pin::before{content:"";position:absolute;inset:0 0 8px 0;border-radius:50% 50% 50% 0;
  transform:rotate(-45deg);background:var(--szp-v17-orange,#e47a2c);box-shadow:0 2px 6px rgba(0,0,0,.3)}
.szp-map-pin::after{content:"";position:absolute;left:50%;bottom:0;width:5px;height:5px;margin-left:-2.5px;
  border-radius:50%;background:rgba(0,0,0,.35)}
.szp-map-zoom{position:absolute;inset-inline-end:10px;top:10px;display:grid;gap:4px}
.szp-map-zoom button{width:34px;height:34px;border-radius:9px;border:1px solid var(--szp-v17-border,#e1e6ea);
  background:#fff;color:#172334;font-size:1.05rem;line-height:1;cursor:pointer}
.szp-map-locate{position:absolute;inset-inline-end:10px;bottom:34px;min-height:34px;padding:0 12px;
  border-radius:9px;border:1px solid var(--szp-v17-border,#e1e6ea);background:#fff;color:#172334;
  font:inherit;font-size:.78rem;cursor:pointer}
.szp-map-hint{position:absolute;inset-inline:0;bottom:0;margin:0;padding:5px 10px;font-size:.74rem;
  text-align:center;color:#41505f;background:rgba(255,255,255,.88)}
.szp-dash-map-field{display:grid;gap:7px;margin:4px 0}
.szp-dash-map-label{font-size:.84rem;font-weight:700;color:var(--szp-v17-ink,#172334)}
.szp-dash-map-point{margin:0;font-size:.78rem;color:var(--szp-v17-muted,#647286)}
.szp-dash-place-pin{display:inline-block;margin-top:4px;font-size:.78rem;color:#a85c20;text-decoration:none}
@media (max-width:430px){
  .szp-map{height:230px}
  .szp-map-locate{inset-inline-end:8px;font-size:.74rem}
}

/* Provider sign-in. Same widget as every other identity prompt, in a small dialog. */
.szp-provider-login{position:fixed;inset:0;z-index:2147483000;display:grid;place-items:center;
  padding:18px;background:rgba(11,29,49,.45)}
.szp-provider-login-card{position:relative;width:min(420px,100%);background:#fff;border-radius:18px;
  padding:22px 20px;box-shadow:0 24px 60px rgba(13,35,55,.28)}
.szp-provider-login-card h3{margin:0 0 14px;font-size:1.05rem;color:var(--szp-v17-ink,#172334)}
.szp-provider-login-close{position:absolute;inset-inline-start:14px;top:12px;width:32px;height:32px;
  border:0;border-radius:50%;background:#f2f4f6;color:#41505f;font-size:1.1rem;cursor:pointer}

/* ---------------------------------------------------------------------------
   Projects. A project is the work container - planning, address, request,
   provider, status, completion - not a second copy of the request list.
--------------------------------------------------------------------------- */
.szp-projects{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.szp-project-card{border:1px solid var(--szp-v17-border,#e1e6ea);border-radius:16px;padding:15px 17px;
  background:#fff;display:grid;gap:11px}
.szp-project-top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.szp-project-title{font-size:.94rem;color:var(--szp-v17-ink,#172334)}
.szp-project-status{font-size:.78rem;font-weight:700;border-radius:999px;padding:4px 11px;
  background:#eef2f5;color:#41505f;white-space:nowrap}
.szp-project-status.is-completed{background:#e8f4ec;color:#2c6b3f}
.szp-project-status.is-provider_done{background:#fff3e0;color:#a85c20}
.szp-project-status.is-active{background:#e7f0fb;color:#1d4f80}
.szp-project-status.is-cancelled{background:#fbeaea;color:#a12d2d}
.szp-project-status.is-planning{background:#f2f0fa;color:#4b3f86}
.szp-project-facts{margin:0;display:grid;gap:7px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.szp-project-facts div{display:grid;gap:2px}
.szp-project-facts dt{font-size:.78rem;color:var(--szp-v17-muted,#647286)}
.szp-project-facts dd{margin:0;font-size:.84rem;font-weight:700;color:var(--szp-v17-ink,#172334)}
.szp-project-next{justify-self:start}
.szp-project-locked{margin:0;font-size:.78rem;color:var(--szp-v17-muted,#647286);
  background:#f7f8f9;border-radius:10px;padding:8px 11px}
@media (max-width:430px){
  .szp-project-card{padding:13px 14px;border-radius:14px}
  .szp-project-facts{grid-template-columns:1fr 1fr}
  .szp-project-next{justify-self:stretch;width:100%}
}

/* Profile. Account type first, because it decides which fields below apply. */
.szp-profile-form fieldset.szp-profile-type{border:1px solid var(--szp-v17-border,#e1e6ea);border-radius:14px;
  padding:12px 14px;margin:0}
.szp-profile-form fieldset.szp-profile-type legend{font-size:.84rem;font-weight:700;padding-inline:4px}
.szp-profile-form input[disabled]{opacity:.75;cursor:not-allowed}

/* ===========================================================================
   Liquid glass — one authoritative layer, last in the file on purpose.
   ===========================================================================

   Two problems this solves at once.

   1. The Elementor kit paints every <button> inside our markup with
      `.elementor-kit-98 button { background: var(--e-global-color-secondary) }`.
      That is one class plus one element, which outranks a bare `.szp-select-button`,
      so the province/county/city fields rendered as solid orange blocks with navy
      text — three primary-looking buttons where the person expected three empty
      fields, on the step that asks where the project is. Measured on the live modal
      at 390px. Patching one component at a time is how that got missed for months,
      so every control we own is answered here, once, with the weight to win.

   2. The surfaces were flat white cards. The system this platform is supposed to
      look like builds depth out of translucency: a tinted, blurred material with a
      bright hairline on top and a soft shadow under it. That is what the tokens
      below describe, and every panel, sheet, menu and control reads from them.

   Rules of the layer:
   - a control is never without a state: rest, hover, active, focus-visible, disabled
   - a field never looks like a button, and a button never looks like a field
   - blur is capped and never applied to a full-page element, because a phone pays
     for every blurred pixel on every frame
   - anything translucent has a solid fallback for browsers without backdrop-filter
     and for people who asked the OS for less transparency
--------------------------------------------------------------------------- */

.szp, .szp-dash, .szp-modal, .szp-v17, .szp-pd, [data-szp-workbench], .szp-chat-drawer {
  --szp-glass-tint: rgba(255,255,255,.72);
  --szp-glass-tint-strong: rgba(255,255,255,.86);
  --szp-glass-tint-soft: rgba(255,255,255,.55);
  --szp-glass-hairline: rgba(13,35,55,.12);
  /* Specular is directional: a bright rim where the light lands on the top edge and a
     weaker bounce off the bottom one. A single inset reads as a drawn line, not as a
     lit surface, which is why the old layer looked like frosted plastic. */
  --szp-glass-spec-top: inset 0 1px 0 rgba(255,255,255,.92);
  --szp-glass-spec-bottom: inset 0 -1px 0 rgba(255,255,255,.34);
  --szp-glass-top: var(--szp-glass-spec-top), var(--szp-glass-spec-bottom);
  /* Depth is two shadows doing different jobs: a wide soft one for the distance the
     panel floats at, and a tight dark one for where it touches. One flat shadow can
     only ever say "there is a shadow here". */
  --szp-glass-shadow: 0 18px 40px -12px rgba(13,35,55,.20), 0 2px 4px -1px rgba(13,35,55,.14);
  --szp-glass-shadow-lifted: 0 40px 80px -20px rgba(13,35,55,.30), 0 4px 8px -2px rgba(13,35,55,.18);
  --szp-glass-shadow-press: 0 6px 14px -6px rgba(13,35,55,.22), 0 1px 2px 0 rgba(13,35,55,.16);
  /* The lens ring. Thick glass bends what is behind its edge, so the rim is brighter at
     the top, near-invisible at the sides and picks the light back up underneath. */
  --szp-glass-lens: linear-gradient(160deg,
      rgba(255,255,255,.95) 0%, rgba(255,255,255,.35) 22%,
      rgba(255,255,255,.06) 48%, rgba(255,255,255,.30) 78%, rgba(255,255,255,.75) 100%);
  --szp-glass-lens-width: 1.5px;
  --szp-glass-blur: saturate(165%) blur(20px);
  --szp-glass-blur-soft: saturate(150%) blur(12px);
  --szp-accent: var(--szp-v17-orange,#e47a2c);
  --szp-accent-ink: #a85c20;
  --szp-ring: 0 0 0 3px rgba(228,122,44,.30);
}

/* ---- surfaces ---------------------------------------------------------- */

.szp-dash,
.szp-dashboard-card,
.szp-search-panel-v17,
.szp-modal-box,
.szp-chat-sheet,
.szp-chat-drawer-body,
.szp-select-list,
.szp-ticket-form {
  background: var(--szp-glass-tint) !important;
  -webkit-backdrop-filter: var(--szp-glass-blur);
  backdrop-filter: var(--szp-glass-blur);
  border: 1px solid var(--szp-glass-hairline) !important;
  box-shadow: var(--szp-glass-top), var(--szp-glass-shadow) !important;
}

.szp-modal-box, .szp-select-list, .szp-chat-sheet {
  box-shadow: var(--szp-glass-top), var(--szp-glass-shadow-lifted) !important;
}

/* Rows inside a glass panel are quieter than the panel itself: stacking two
   materials of the same weight is what makes a screen look like a pile of cards. */
.szp-feed-item,
.szp-ticket-item,
.szp-dash-list a,
.szp-dash-stats li,
.szp-dash-threads > li,
.szp-dash-places > li,
.szp-dash-alerts > li,
.szp-dash-projects > li,
.szp-dash-qa > li {
  background: var(--szp-glass-tint-soft) !important;
  border: 1px solid var(--szp-glass-hairline) !important;
  box-shadow: var(--szp-glass-top) !important;
}

.szp-feed-item.is-unread { background: rgba(255,244,234,.78) !important; border-color: rgba(228,122,44,.38) !important; }
.szp-dash-stats li.is-hot { background: rgba(255,244,234,.78) !important; border-color: rgba(228,122,44,.38) !important; }

/* ---- controls: the armour ---------------------------------------------- */

/*
   Scoped to our own containers so nothing outside the platform is touched, and
   written with the weight the kit forces. `!important` sits only on the four
   properties the kit actually sets — geometry and type stay in the component rules
   above, where they belong.
*/
html body .szp .szp-btn,
html body .szp-dash .szp-dash-btn,
html body .szp-modal .szp-btn,
html body .szp-pd .szp-btn,
html body .szp-chat-drawer .szp-btn,
html body .szp-dash .szp-btn {
  background: var(--szp-glass-tint-strong) !important;
  color: var(--szp-v17-navy,#0b1d31) !important;
  border: 1px solid var(--szp-glass-hairline) !important;
  box-shadow: var(--szp-glass-top), 0 1px 2px rgba(13,35,55,.06) !important;
  -webkit-backdrop-filter: var(--szp-glass-blur-soft);
  backdrop-filter: var(--szp-glass-blur-soft);
  transition: transform .14s ease, box-shadow .18s ease, background-color .18s ease;
}

html body .szp .szp-btn-primary,
html body .szp-dash .szp-dash-btn-primary,
html body .szp-modal .szp-btn-primary,
html body .szp-pd .szp-btn-primary,
html body .szp-chat-drawer .szp-btn-primary,
html body .szp-dash .szp-btn-primary {
  background: linear-gradient(180deg, #ef8c3f 0%, var(--szp-accent) 100%) !important;
  color: #fff !important;
  border-color: rgba(168,92,32,.55) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 6px 18px rgba(228,122,44,.32) !important;
}

/* Every control answers the pointer and the keyboard. */
/* The white fill is the *secondary* hover, and it must say so.
   Measured on the live provider-application form: this rule used to read
   `.szp-btn:hover`, which every primary button also matches — and at one class more
   than `.szp-btn-primary`, so it won the tie between two !important declarations and
   painted the primary button solid white. The contrast guard pins that same button to
   `color:#fff !important`, so the result was white text on white: the button
   disappeared. On a touch screen :hover sticks after the first tap, which is why the
   applicant saw "ثبت/بعدی" render blank and why it looked intermittent.
   Primary buttons are excluded here and get their own hover below. */
html body .szp .szp-btn:not(.szp-btn-primary):hover,
html body .szp-dash .szp-dash-btn:not(.szp-dash-btn-primary):not(.szp-btn-primary):hover,
html body .szp-modal .szp-btn:not(.szp-btn-primary):hover,
html body .szp-pd .szp-btn:not(.szp-btn-primary):hover { background: #fff !important; border-color: rgba(228,122,44,.45) !important; }

/* A primary button stays a primary button under the pointer - it only lifts. */
html body .szp .szp-btn-primary:hover,
html body .szp-dash .szp-dash-btn-primary:hover,
html body .szp-modal .szp-btn-primary:hover,
html body .szp-pd .szp-btn-primary:hover,
html body .szp-chat-drawer .szp-btn-primary:hover,
html body .szp-dash .szp-btn-primary:hover {
  background: linear-gradient(180deg, #f2954a 0%, #e07f31 100%) !important;
  color: #fff !important;
  border-color: rgba(168,92,32,.7) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 8px 22px rgba(228,122,44,.38) !important;
}

html body .szp .szp-btn:active,
html body .szp-dash .szp-dash-btn:active,
html body .szp-modal .szp-btn:active,
html body .szp-pd .szp-btn:active { transform: scale(.97); }

html body .szp .szp-btn:focus-visible,
html body .szp-dash .szp-dash-btn:focus-visible,
html body .szp-modal .szp-btn:focus-visible,
html body .szp-pd .szp-btn:focus-visible,
html body .szp .szp-select-button:focus-visible,
html body .szp-dash .szp-select-button:focus-visible,
html body .szp-modal .szp-select-button:focus-visible {
  outline: none !important;
  box-shadow: var(--szp-glass-top), var(--szp-ring) !important;
}

html body .szp .szp-btn:disabled,
html body .szp-dash .szp-dash-btn:disabled,
html body .szp-modal .szp-btn:disabled,
html body .szp-pd .szp-btn:disabled,
html body .szp .szp-btn[aria-disabled="true"] {
  opacity: .45 !important;
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow: none !important;
}

/* ---- the lens edge, the squircle, and the response to touch -------------

   The five things that separate liquid glass from a translucent card, each stated
   once here and inherited by every surface that opts in with .szp-glass:

   1. edge lensing   - the ::before ring below, a real 1.5px band of bent light rather
                       than a 1px hairline drawn on top of the fill
   2. specular       - two separate insets, top bright and bottom faint (tokens above)
   3. layered depth  - a wide soft shadow plus a tight contact shadow (tokens above)
   4. squircle       - continuous curvature via corner-shape where the browser has it,
                       falling back to the same border-radius everywhere else
   5. response       - hover lifts and clears, press sinks and dims; not a bare scale()

   The ring is painted by a masked pseudo-element rather than a border, because a
   border cannot hold a gradient that follows the corner. `padding` sets its thickness
   and the xor mask punches out the middle, leaving only the band.
--------------------------------------------------------------------------- */

.szp-glass { position: relative; isolation: isolate; }
.szp-glass::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: var(--szp-glass-lens-width);
  background: var(--szp-glass-lens);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
  transition: opacity .18s ease;
}

/* Continuous curvature. Chrome ships corner-shape; everywhere else keeps the plain
   radius, which is a smaller difference than any of the other four. */
@supports (corner-shape: squircle) {
  .szp-glass,
  html body .szp .szp-btn,
  html body .szp .szp-select-button,
  html body .szp-dash .szp-dash-btn,
  html body .szp-modal .szp-btn,
  .szp-modal-box, .szp-select-list, .szp-chat-sheet,
  .szp-dashboard-card, .szp-search-panel-v17, .szp-provider-card-v17 { corner-shape: squircle; }
}

/* Interaction. Hover raises the panel and brightens its rim; press sinks it, pulls the
   shadow in tight and lets the tint go milkier - the way a physical pane of glass
   behaves when you push it toward what is behind it. */
.szp-glass-interactive { transition: transform .16s ease, box-shadow .2s ease, background-color .2s ease; }
.szp-glass-interactive:hover { transform: translateY(-1px); box-shadow: var(--szp-glass-top), var(--szp-glass-shadow-lifted) !important; }
.szp-glass-interactive:hover::before { opacity: 1; }
.szp-glass-interactive:active {
  transform: translateY(1px) scale(.995);
  box-shadow: var(--szp-glass-spec-bottom), var(--szp-glass-shadow-press) !important;
  background-color: var(--szp-glass-tint-strong) !important;
}
.szp-glass-interactive:active::before { opacity: .55; }
.szp-glass-interactive:focus-visible { outline: none; box-shadow: var(--szp-glass-top), var(--szp-ring) !important; }

/* The blur cap, restated where it can be checked: 20px, and only on surfaces that
   actually float over content. A phone pays for every blurred pixel every frame. */
@media (max-width: 640px) {
  .szp-dash, .szp-dashboard-card, .szp-provider-card-v17 {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background: var(--szp-glass-tint-strong) !important;
  }
}

/* No backdrop-filter, or the OS asked for less transparency: the material goes opaque
   and keeps every other cue - the rim, the specular, both shadows, the squircle. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .szp-dash, .szp-dashboard-card, .szp-search-panel-v17, .szp-modal-box,
  .szp-chat-sheet, .szp-chat-drawer-body, .szp-select-list, .szp-ticket-form {
    background: #fff !important;
  }
}
@media (prefers-reduced-transparency: reduce) {
  .szp-dash, .szp-dashboard-card, .szp-search-panel-v17, .szp-modal-box,
  .szp-chat-sheet, .szp-chat-drawer-body, .szp-select-list, .szp-ticket-form {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background: #fff !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .szp-glass-interactive, .szp-glass-interactive:hover, .szp-glass-interactive:active { transform: none; }
}

/* ---- fields: a field is not a button ------------------------------------ */

/*
   This is the rule the whole layer exists for. A closed select is a field: pale
   material, hairline, ink-coloured text, a quiet caret. Never the accent fill.
*/
html body .szp .szp-select-button,
html body .szp-dash .szp-select-button,
html body .szp-modal .szp-select-button,
html body .szp-pd .szp-select-button,
html body .szp-chat-drawer .szp-select-button,
html body [data-szp-workbench] .szp-select-button {
  background: var(--szp-glass-tint-strong) !important;
  color: var(--szp-v17-ink,#172334) !important;
  border: 1px solid var(--szp-glass-hairline) !important;
  box-shadow: var(--szp-glass-top) !important;
  font-weight: 500 !important;
  transition: box-shadow .18s ease, border-color .18s ease;
}
html body .szp .szp-select-button:hover,
html body .szp-dash .szp-select-button:hover,
html body .szp-modal .szp-select-button:hover { border-color: rgba(228,122,44,.45) !important; }

html body .szp .szp-select-button[aria-expanded="true"],
html body .szp-dash .szp-select-button[aria-expanded="true"],
html body .szp-modal .szp-select-button[aria-expanded="true"] {
  border-color: rgba(228,122,44,.55) !important;
  box-shadow: var(--szp-glass-top), var(--szp-ring) !important;
}

/* A select waiting on the field above it says so by looking spent, not by looking
   like the primary action of the step. */
html body .szp .szp-select-button:disabled,
html body .szp-dash .szp-select-button:disabled,
html body .szp-modal .szp-select-button:disabled {
  background: rgba(240,243,246,.72) !important;
  color: #8b96a4 !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
}

html body .szp input, html body .szp textarea,
html body .szp-dash input, html body .szp-dash textarea,
html body .szp-modal input, html body .szp-modal textarea,
html body .szp-pd input, html body .szp-pd textarea {
  background: var(--szp-glass-tint-strong) !important;
  color: var(--szp-v17-ink,#172334) !important;
  border: 1px solid var(--szp-glass-hairline) !important;
  border-radius: 12px;
  box-shadow: var(--szp-glass-top) !important;
}
html body .szp input:focus, html body .szp textarea:focus,
html body .szp-dash input:focus, html body .szp-dash textarea:focus,
html body .szp-modal input:focus, html body .szp-modal textarea:focus {
  outline: none !important;
  border-color: rgba(228,122,44,.55) !important;
  box-shadow: var(--szp-glass-top), var(--szp-ring) !important;
}

/* ---- menus ------------------------------------------------------------- */

html body .szp-select-list {
  border-radius: 16px !important;
  padding: 7px !important;
}
html body .szp-select-option {
  border-radius: 11px !important;
  background: transparent !important;
  color: var(--szp-v17-ink,#172334) !important;
  transition: background-color .14s ease;
}
html body .szp-select-option:hover,
html body .szp-select-option:focus-visible { background: rgba(13,35,55,.06) !important; }
html body .szp-select-option.is-selected {
  background: rgba(228,122,44,.14) !important;
  color: var(--szp-accent-ink) !important;
}

/* ---- pills, chips and text buttons -------------------------------------- */

html body .szp-dash-nav a,
html body .szp-common-searches-items button,
html body .szp-pd-tab {
  background: var(--szp-glass-tint-soft) !important;
  border: 1px solid var(--szp-glass-hairline) !important;
  box-shadow: var(--szp-glass-top) !important;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}
html body .szp-dash-nav a.is-current {
  background: linear-gradient(180deg, rgba(23,45,70,.94), rgba(11,29,49,.98)) !important;
  border-color: rgba(11,29,49,.9) !important;
  color: #fff !important;
}
html body .szp .szp-link-btn,
html body .szp-dash .szp-link-btn,
html body .szp-pd .szp-link-btn,
html body .szp .szp-text-btn {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--szp-accent-ink) !important;
  text-decoration: none;
  cursor: pointer;
}
html body .szp .szp-link-btn:hover,
html body .szp-dash .szp-link-btn:hover { text-decoration: underline; }

/* ---- honest fallbacks --------------------------------------------------- */

@supports not ((-webkit-backdrop-filter: blur(2px)) or (backdrop-filter: blur(2px))) {
  .szp-dash, .szp-dashboard-card, .szp-search-panel-v17, .szp-modal-box,
  .szp-chat-sheet, .szp-chat-drawer-body, .szp-select-list, .szp-ticket-form {
    background: #fff !important;
  }
  html body .szp .szp-btn, html body .szp-dash .szp-dash-btn,
  html body .szp .szp-select-button, html body .szp-dash .szp-select-button,
  html body .szp-modal .szp-select-button { background: #fff !important; }
}

@media (prefers-reduced-transparency: reduce) {
  .szp-dash, .szp-dashboard-card, .szp-search-panel-v17, .szp-modal-box,
  .szp-chat-sheet, .szp-chat-drawer-body, .szp-select-list, .szp-ticket-form {
    background: #fff !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body .szp .szp-btn, html body .szp-dash .szp-dash-btn,
  html body .szp-modal .szp-btn { transition: none !important; }
  html body .szp .szp-btn:active { transform: none !important; }
}

/* ---- the floor: no button without a designed state ----------------------
   Inventory taken on the live marketplace at 390px: eight buttons with no class
   at all, plus `szp-filter-toggle`, `szp-category-chip`, `szp-heart`,
   `szp-dialog-close` and the gallery arrows — none of them named in any rule we
   own, so the Elementor kit painted each one solid orange. "فیلتر" and the
   "+ مقایسه" toggle on every card were the loudest things on a screen whose
   actual subject is the provider cards.

   So the floor is stated once, for every button inside our own containers: it is
   a glass control unless something more specific says otherwise. A new button
   added next year inherits a real design instead of the kit's accent slab.
------------------------------------------------------------------------- */
html body .szp button,
html body .szp-v17 button,
html body .szp-dash button,
html body .szp-modal button,
html body .szp-pd button,
html body .szp-chat-drawer button,
html body [data-szp-workbench] button {
  background: var(--szp-glass-tint-strong, rgba(255,255,255,.86)) !important;
  background-image: none !important;
  color: var(--szp-v17-navy,#0b1d31) !important;
  border: 1px solid var(--szp-glass-hairline, rgba(13,35,55,.12)) !important;
  box-shadow: var(--szp-glass-top, inset 0 1px 0 rgba(255,255,255,.85)) !important;
  cursor: pointer;
  transition: transform .14s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease;
}
html body .szp button:hover,
html body .szp-v17 button:hover,
html body .szp-dash button:hover,
html body .szp-modal button:hover,
html body .szp-pd button:hover { border-color: rgba(228,122,44,.45) !important; }
html body .szp button:active,
html body .szp-v17 button:active,
html body .szp-dash button:active,
html body .szp-modal button:active { transform: scale(.97); }
html body .szp button:focus-visible,
html body .szp-v17 button:focus-visible,
html body .szp-dash button:focus-visible,
html body .szp-modal button:focus-visible,
html body .szp-pd button:focus-visible {
  outline: none !important;
  box-shadow: var(--szp-glass-top), var(--szp-ring, 0 0 0 3px rgba(228,122,44,.30)) !important;
}
html body .szp button:disabled,
html body .szp-v17 button:disabled,
html body .szp-dash button:disabled,
html body .szp-modal button:disabled {
  opacity: .45 !important; cursor: not-allowed !important; transform: none !important;
}

/* A toggle that is on says so, everywhere, without each feature inventing its own. */
html body .szp button[aria-pressed="true"],
html body .szp-v17 button[aria-pressed="true"],
html body .szp-dash button[aria-pressed="true"] {
  background: rgba(228,122,44,.16) !important;
  border-color: rgba(228,122,44,.55) !important;
  color: var(--szp-accent-ink,#a85c20) !important;
}

/* Icon-only controls are circles of the same material, never text buttons. */
html body .szp .szp-heart,
html body .szp .szp-dialog-close,
html body .szp .szp-gallery-nav,
html body .szp-v17 .szp-heart,
html body .szp-v17 .szp-gallery-nav {
  border-radius: 999px !important;
  background: var(--szp-glass-tint, rgba(255,255,255,.72)) !important;
  -webkit-backdrop-filter: var(--szp-glass-blur-soft, saturate(150%) blur(12px));
  backdrop-filter: var(--szp-glass-blur-soft, saturate(150%) blur(12px));
  box-shadow: var(--szp-glass-top), 0 2px 8px rgba(13,35,55,.12) !important;
}
html body .szp .szp-heart[aria-pressed="true"] { color: #d3455a !important; }

/* Chips read as one family: the category filter, the popular search and the
   dashboard sections were three different pills before. */
html body .szp .szp-category-chip,
html body .szp .szp-filter-toggle,
html body .szp-v17 .szp-category-chip {
  border-radius: 999px !important;
}
html body .szp .szp-filter-toggle[aria-expanded="true"] {
  background: rgba(228,122,44,.16) !important;
  border-color: rgba(228,122,44,.55) !important;
  color: var(--szp-accent-ink,#a85c20) !important;
}

/* ---- icon buttons that live inside a field ------------------------------
   The floor rule above gave the search field's clear button a box of its own, so
   a rectangle appeared inside the search pill. An affordance that sits inside
   another control is a glyph, not a control with a body: no fill, no border, and
   a circular hover so it still answers the finger. */
/* The workbench search is the same shape: the pill *is* the field, so the input
   inside it must not draw a second one. Two nested rounded rectangles around one
   placeholder is what the calculator's search looked like. */
html body .szp .szp-wb-search input,
html body .szp .szp-search-input input,
html body .szp .szp-flow-search input {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
html body .szp .szp-wb-search:focus-within,
html body .szp .szp-search-input:focus-within {
  border-color: rgba(228,122,44,.55) !important;
  box-shadow: var(--szp-glass-top), var(--szp-ring, 0 0 0 3px rgba(228,122,44,.30)) !important;
}

html body .szp .szp-search-input button,
html body .szp .szp-wb-search button,
html body .szp .szp-flow-search button,
html body .szp-v17 .szp-search-input button {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 999px !important;
  color: var(--szp-v17-muted,#647286) !important;
  padding: 6px !important;
  min-height: 0 !important;
}
html body .szp .szp-search-input button:hover,
html body .szp .szp-flow-search button:hover {
  background: rgba(13,35,55,.07) !important;
  color: var(--szp-v17-ink,#172334) !important;
}

/* ---- content cards join the same system --------------------------------
   The provider card was solid white with its own shadow recipe while the panel
   above it had become glass — two materials on one screen, which is what makes a
   page look assembled rather than designed. */
html body .szp .szp-provider-card-v17,
html body .szp-v17 .szp-provider-card-v17,
html body .szp .szp-tool-card,
html body .szp .szp-card {
  background: var(--szp-glass-tint, rgba(255,255,255,.72)) !important;
  -webkit-backdrop-filter: var(--szp-glass-blur-soft, saturate(150%) blur(12px));
  backdrop-filter: var(--szp-glass-blur-soft, saturate(150%) blur(12px));
  border: 1px solid var(--szp-glass-hairline, rgba(13,35,55,.12)) !important;
  box-shadow: var(--szp-glass-top), var(--szp-glass-shadow) !important;
}

/* ---- segmented controls -------------------------------------------------
   Two tabs sharing one job are a segment, not two buttons. The chat header had
   both halves painted the same solid white with `aria-selected` telling the truth
   only to a screen reader — measured on the live drawer. The track is the darker
   material, the selected half is the light pill riding on it, and the unselected
   half is transparent so the switch reads at a glance. */
/*
 * The track sits on the drawer's white body, not on the navy header — a light-on-light
 * segment made the unselected half invisible the moment I shipped it. Measured on the
 * live drawer, and this is the corrected version: a faint ink track, ink text, and the
 * selected half as the raised light pill.
 */
html body .szp .szp-chat-tabs,
html body .szp-chat-drawer .szp-chat-tabs {
  background: rgba(13,35,55,.06) !important;
  border: 1px solid rgba(13,35,55,.10) !important;
  border-radius: 999px !important;
  padding: 4px !important;
  gap: 4px;
}
html body .szp-chat-drawer .szp-chat-tabs button {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 999px !important;
  color: var(--szp-v17-muted,#647286) !important;
  -webkit-text-fill-color: var(--szp-v17-muted,#647286) !important;
  transition: background-color .18s ease, color .18s ease;
}
html body .szp-chat-drawer .szp-chat-tabs button[aria-selected="true"] {
  background: #fff !important;
  color: var(--szp-v17-navy,#0b1d31) !important;
  -webkit-text-fill-color: var(--szp-v17-navy,#0b1d31) !important;
  box-shadow: 0 2px 8px rgba(13,35,55,.16) !important;
}
html body .szp-chat-drawer .szp-chat-tabs button:hover[aria-selected="false"] {
  background: rgba(13,35,55,.05) !important;
  color: var(--szp-v17-ink,#172334) !important;
  -webkit-text-fill-color: var(--szp-v17-ink,#172334) !important;
}

/* ---- type: one ladder, five rungs ---------------------------------------
   Measured on the live marketplace before this pass: twenty-nine distinct font
   sizes across our own components, of which 165 declarations sat under 12px —
   ten- and eleven-pixel Persian text on a phone. Persian needs more air than
   Latin at the same size, not less, so the small end was the least readable
   part of the platform and the reason nothing looked like one product.

   Every size now snaps to one of five rungs; nothing moved more than about
   1.6px, so no layout is redrawn — the ladder is the point, not the growth.
   New code should use these tokens rather than inventing a twenty-first size. */
.szp, .szp-dash, .szp-modal, .szp-v17, .szp-pd, .szp-chat-drawer, [data-szp-workbench] {
  --szp-fs-micro: .74rem;
  --szp-fs-small: .78rem;
  --szp-fs-body:  .84rem;
  --szp-fs-lead:  .88rem;
  --szp-fs-large: .94rem;
}

/* Paragraph text gets the line-height Persian actually needs. Only paragraphs and
   captions: a chip is one line and its height is its padding, so touching it here
   would resize controls that are already correct. */
html body .szp p, html body .szp small,
html body .szp-dash p, html body .szp-dash small,
html body .szp-modal p, html body .szp-modal small,
html body .szp-pd p, html body .szp-chat-drawer p {
  line-height: 1.85;
}
html body .szp h1, html body .szp h2, html body .szp h3, html body .szp h4,
html body .szp-dash h2, html body .szp-dash h3,
html body .szp-modal h2, html body .szp-modal h3 {
  line-height: 1.45;
}

/* Attachment states. A file that is still climbing a mobile uplink has to look
   different from one that has landed - the applicant reads this while deciding
   whether the form is working. */
.szp-file-chip small{font-weight:600;opacity:.85;font-size:.72rem}
.szp-file-chip[data-state="sending"]{background:#fff4e6;color:#9f4e1a}
.szp-file-chip[data-state="sending"] button{background:rgba(159,78,26,.14);color:#9f4e1a}
.szp-file-chip[data-state="error"]{background:#fdecea;color:#a23c34}
.szp-file-chip[data-state="error"] button{background:rgba(162,60,52,.14);color:#a23c34}

/* The send button says it is working instead of only going flat. */
html body .szp .szp-btn[aria-busy="true"]{opacity:.8!important;cursor:progress!important}
html body .szp .szp-btn[aria-busy="true"]::after{
  content:"";width:14px;height:14px;margin-inline-start:8px;border-radius:50%;
  border:2px solid rgba(255,255,255,.45);border-top-color:#fff;display:inline-block;
  animation:szp-app-spin .8s linear infinite;vertical-align:-2px;
}
@keyframes szp-app-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){html body .szp .szp-btn[aria-busy="true"]::after{animation:none}}

/* The menu is anchored to its field on every width now, so the bottom-sheet rules are
   gone; a phone only keeps the bigger touch target. `is-above` no longer carries any
   position of its own, because place() writes exact fixed offsets and a stylesheet
   `bottom:calc(100% + 6px)` on a fixed element resolves against the viewport, not the
   field.

   Select2 never gets to draw a second control inside ours. The JS removes it as it
   appears; this makes the outcome independent of which script wins the race. */
html body .szp-select > .select2-container,
html body .szp-select > .select2{display:none!important}

/* ===========================================================================
   The glass layer, applied - and the spacing scale under it
   =========================================================================== */

/* Every floating surface gets the lens ring and the squircle. Listed rather than
   applied with a wildcard so nothing outside the platform is caught. */
.szp-modal-box, .szp-select-list.szp-select-portal, .szp-chat-sheet, .szp-chat-drawer-body,
.szp-dashboard-card, .szp-search-panel-v17, .szp-provider-card-v17, .szp-ticket-form,
.szp-workspace, .szp-profile-section-v17 { position: relative; isolation: isolate; }

.szp-modal-box::before, .szp-select-list.szp-select-portal::before, .szp-chat-sheet::before,
.szp-dashboard-card::before, .szp-search-panel-v17::before, .szp-provider-card-v17::before,
.szp-workspace::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  padding: var(--szp-glass-lens-width); background: var(--szp-glass-lens);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none; z-index: 1; transition: opacity .18s ease;
}
/* The ring must not sit over the card's own content. */
.szp-provider-card-v17 > *, .szp-search-panel-v17 > *, .szp-workspace > * { position: relative; z-index: 2; }

/* Buttons are glass too: same rim, same two shadows, same press. */
html body .szp .szp-btn,
html body .szp-modal .szp-btn,
html body .szp-dash .szp-dash-btn,
html body .szp-pd .szp-btn {
  transition: transform .16s ease, box-shadow .2s ease, background-color .2s ease, border-color .18s ease;
}
html body .szp .szp-btn:active,
html body .szp-modal .szp-btn:active,
html body .szp-dash .szp-dash-btn:active,
html body .szp-pd .szp-btn:active {
  transform: translateY(1px) scale(.99);
  box-shadow: var(--szp-glass-spec-bottom), var(--szp-glass-shadow-press) !important;
}
html body .szp .szp-btn-primary:hover,
html body .szp-modal .szp-btn-primary:hover,
html body .szp-pd .szp-btn-primary:hover { transform: translateY(-1px); }

/* ---- گ۱: one spacing scale, not per-case patches ------------------------

   The rule the owner set: at 390px nothing interactive sits closer than 16px to the
   wall of the box it is in, or closer than 8px to its neighbour. Measured before this
   block, on the services marketplace at 390px: the "مجری ترموود" chip touched the
   right wall of the popular-searches panel at 0px, .szp-workspace had 10px of side
   padding, .szp-search-input 15px, the provider card 0px, and four rows ran at 6-7px
   gaps. These are the containers those numbers came from. */
.szp {
  --szp-gap-edge: 16px;   /* box wall -> interactive element */
  --szp-gap-item: 10px;   /* element -> neighbouring element */
}
@media (max-width: 640px) {
  .szp-common-searches-items { padding-inline: var(--szp-gap-edge) !important; gap: var(--szp-gap-item) !important; }
  .szp-common-searches { padding-inline: 0 !important; }
  .szp-workspace { padding-inline: var(--szp-gap-edge) !important; }
  .szp-search-input { padding-inline: var(--szp-gap-edge) !important; }
  .szp-provider-card-v17 .szp-provider-card-body,
  .szp-provider-card-v17 .szp-provider-card-actions { padding-inline: var(--szp-gap-edge) !important; }
  .szp-category-rail-v17 { gap: var(--szp-gap-item) !important; padding-inline: var(--szp-gap-edge) !important; }
  .szp-provider-card-actions { gap: var(--szp-gap-item) !important; }
  .szp-guide-links { gap: var(--szp-gap-item) !important; }
  .szp-compare-dialog-head { gap: var(--szp-gap-item) !important; }
  /* A rail that scrolls sideways needs the same breathing room at the end of the
     scroll as at the start, or the last chip is flush against the bezel. */
  .szp-category-rail-v17::after, .szp-common-searches-items::after {
    content: ""; flex: 0 0 calc(var(--szp-gap-edge) - var(--szp-gap-item));
  }
}

/* ---- گ۸: the send control is an icon, not the word "ارسال" -------------- */
html body .szp-chat-send, html body .szp-chat-drawer .szp-chat-send,
html body .szp-dash .szp-chat-send {
  width: 42px !important; height: 42px !important; min-height: 42px !important;
  padding: 0 !important; border-radius: 50% !important; flex: 0 0 42px !important;
  display: inline-flex !important; align-items: center; justify-content: center;
  font-size: 0 !important; line-height: 0 !important;
}
html body .szp-chat-send .szp-send-icon { display: block; width: 20px; height: 20px; }
html body .szp-chat-send .szp-send-label {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---- گ۲: the shortcut is a link, the action is a button ----------------- */
.szp-discovery-quick{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.szp-discovery-quick > span{color:var(--szp-v17-muted,#647286);font-size:.86rem}
html body .szp .szp-discovery-cta{min-width:min(320px,100%);justify-content:center}
html body .szp .szp-quick-link{
  background:transparent!important;background-image:none!important;border:0!important;
  padding:4px 2px!important;min-height:0!important;box-shadow:none!important;
  color:var(--szp-v17-muted,#647286)!important;-webkit-text-fill-color:var(--szp-v17-muted,#647286)!important;
  font-size:.82rem!important;font-weight:600!important;cursor:pointer;
  text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;
}
html body .szp .szp-quick-link:hover{color:var(--szp-accent-ink,#a85c20)!important;-webkit-text-fill-color:var(--szp-accent-ink,#a85c20)!important}
html body .szp .szp-quick-link:focus-visible{outline:3px solid #f4a25f;outline-offset:3px;border-radius:6px}

/* ---- گ۳: a bar of its own, after the list it does not belong inside ----- */
.szp-provider-join-bar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin-top:24px;padding:16px var(--szp-gap-edge,16px);
  border:1px solid var(--szp-glass-hairline);border-radius:16px;
  background:var(--szp-glass-tint-soft);box-shadow:var(--szp-glass-top),var(--szp-glass-shadow)
}
.szp-provider-join-bar b{display:block;font-size:.95rem;color:var(--szp-v17-ink,#172334)}
.szp-provider-join-bar span{display:block;margin-top:3px;font-size:.82rem;color:var(--szp-v17-muted,#647286)}
.szp-provider-join-actions{display:flex;align-items:center;gap:var(--szp-gap-item,10px);flex-wrap:wrap}
@media (max-width:640px){
  .szp-provider-join-bar{flex-direction:column;align-items:stretch;text-align:center}
  .szp-provider-join-actions{justify-content:center}
  html body .szp .szp-provider-join-actions .szp-btn{flex:1 1 auto;justify-content:center}
}

/* ---- گ۹: the three tool pages get a shape ------------------------------

   Measured before, on the calculator at 390px: our block ran 1189px, the workbench was
   a single 334px column with all seven systems stacked one under the other, and the
   "other tools" strip sat at the very bottom as 268px of unrelated cards. On a desktop
   the same single column left most of the width empty.

   Two changes. The system chooser becomes a real grid again, so seven cards take two
   or three rows instead of seven. And "ابزارهای دیگر" stops being a pile of cards at
   the end of the page: it is a compact row of links, which is what a "you are here,
   here are the neighbours" control should have been.                            */
.szp-wb-systems{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))!important;gap:var(--szp-gap-item,10px)!important}
@media (min-width:900px){
  /* Desktop: the chooser and the form sit side by side rather than end to end. */
  .szp-workbench{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:start;column-gap:24px}
  .szp-wb-door{grid-column:1/-1}
  .szp-wb-systems{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))!important}
  .szp-tools-result{grid-column:1/-1}
}
/* The system card carries its own name and one line; it does not need to be a slab. */
.szp-wb-systems > *{padding:10px 12px!important}
.szp-wb-systems > * small{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* "Other tools" as a link row, not a card stack. */
.szp-tools-switch{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))!important;gap:var(--szp-gap-item,10px)!important;margin-top:18px!important}
.szp-tools-switch-item{padding:9px 12px!important;border-radius:11px!important}
.szp-tools-switch-item small{display:none}
@media (max-width:640px){
  .szp-tools-switch{grid-auto-flow:column;grid-auto-columns:minmax(132px,1fr);grid-template-columns:none!important;
    overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;
    padding-inline:var(--szp-gap-edge,16px);margin-inline:calc(var(--szp-gap-edge,16px) * -1)}
  .szp-tools-switch-item{scroll-snap-align:start}
  .szp-tools-head{padding-block:10px!important}
}

/* ---- گ۷: the bottom of the provider page ------------------------------

   The "related providers" block ran 467px at 390px for 236 characters, most of it an
   empty-state card floating in its own section with a full section header above it.
   An empty state does not need the same furniture as a populated one.            */
.szp-related-v17{margin-top:18px!important}
.szp-related-v17 .szp-section-head-v17{margin-bottom:12px!important}
.szp-related-v17 .szp-section-head-v17 h2{font-size:clamp(1.15rem,3.4vw,1.5rem)!important;margin-top:4px!important}
.szp-related-v17 .szp-section-head-v17 p{margin-top:4px!important;line-height:1.7!important}
.szp-related-v17 .szp-empty-v17{padding:16px var(--szp-gap-edge,16px)!important;border-radius:14px}
.szp-related-v17 .szp-empty-v17 h3{font-size:1rem!important}
.szp-related-v17 .szp-empty-v17 p{font-size:.84rem!important;line-height:1.8!important;margin-top:4px!important}
@media (max-width:640px){
  .szp-profile-section-v17{padding:16px var(--szp-gap-edge,16px)!important}
  .szp-profile-section-v17 + .szp-profile-section-v17{margin-top:12px!important}
  .szp-profile-hero-v17{padding-bottom:18px!important}
  .szp-v17-section{padding-block:clamp(24px,5vw,48px)!important}
}

/* گ۱, last two: the compare badge floated 10px off the card edge, and the discovery
   CTA was a 38px target on a phone. 16px and 48px respectively. */
@media (max-width:640px){
  .szp-heart{top:var(--szp-gap-edge,16px)!important;inset-inline-end:var(--szp-gap-edge,16px)!important}
  html body .szp .szp-discovery-cta{min-height:48px!important}
}

/* ---- گ۷: the bottom of the provider page, rearranged --------------------

   Measured at 390px: .szp-related-v17 carried 48px of top padding and a 140px section
   header - the same furniture a populated section gets - above a 190px empty-state
   card, and the tools strip below it arrived as a third separately-spaced block. Three
   different rhythms in the last screenful is what "اجزا با هم تناسب ندارند" describes.
   The three now share one rhythm, and an empty state is allowed to be small.       */
@media (max-width:640px){
  .szp-related-v17{padding-top:24px!important}
  .szp-related-v17 .szp-section-head-v17{display:block;margin-bottom:10px!important}
  .szp-related-v17 .szp-section-head-v17 .szp-eyebrow{font-size:.74rem}
  .szp-related-v17 .szp-section-head-v17 h2{font-size:1.12rem!important;line-height:1.45!important}
  .szp-related-v17 .szp-section-head-v17 p{font-size:.82rem!important;max-width:none}
  /* An empty state is a note, not a section. */
  .szp-related-v17 .szp-empty-v17{padding:14px var(--szp-gap-edge,16px)!important;text-align:start}
  .szp-related-v17 .szp-empty-v17 h3{font-size:.94rem!important;margin-bottom:2px}
  .szp-related-v17 .szp-empty-v17 p{font-size:.8rem!important;line-height:1.75!important}
  html body .szp-related-v17 .szp-empty-v17 .szp-btn{min-height:44px!important;margin-top:10px}
  /* The tools strip is the neighbour of the block above it, not a new chapter. */
  .szp-product-tools{padding-block:0!important;margin-top:0!important}
  .szp-product-tools-links{margin-top:12px!important;gap:var(--szp-gap-item,10px)!important}
  .szp-product-tools-links .szp-tools-switch-item{padding:10px 12px!important}
  /* The hero is the other half of the same complaint: 945px before anything is read. */
  .szp-profile-hero-v17{padding-top:14px!important}
  .szp-profile-hero-v17 .szp-profile-about-v17{
    display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;
    font-size:.86rem!important;line-height:1.85!important}
  .szp-profile-facts-inline{gap:var(--szp-gap-item,10px)!important;row-gap:6px!important}
}

/* Surfaces that were listed for the tint but never got the rim: the provider page's
   own sections, the join bar and the tool links. Verified on the live pages - the
   provider card had all five characteristics and .szp-profile-section-v17 had none,
   which is exactly the "اجزا با هم تناسب ندارند" the owner was pointing at. */
.szp-provider-join-bar, .szp-profile-section-v17, .szp-tools-switch-item, .szp-empty-v17 {
  position: relative; isolation: isolate;
}
.szp-provider-join-bar::before, .szp-profile-section-v17::before,
.szp-tools-switch-item::before, .szp-empty-v17::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  padding: var(--szp-glass-lens-width); background: var(--szp-glass-lens);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none; z-index: 1; transition: opacity .18s ease;
}
.szp-provider-join-bar > *, .szp-profile-section-v17 > *,
.szp-tools-switch-item > *, .szp-empty-v17 > * { position: relative; z-index: 2; }

.szp-profile-section-v17, .szp-empty-v17 {
  border-radius: 16px;
  background: var(--szp-glass-tint-strong);
  border: 1px solid var(--szp-glass-hairline);
  box-shadow: var(--szp-glass-top), var(--szp-glass-shadow);
}
@supports (corner-shape: squircle) {
  .szp-provider-join-bar, .szp-profile-section-v17, .szp-tools-switch-item,
  .szp-empty-v17, .szp-search-panel-v17 { corner-shape: squircle; }
}
/* A squircle on a 0px radius is a square. The search panel lost its radius at 390px. */
@media (max-width:640px){ .szp-search-panel-v17{ border-radius:18px !important; } }

/* Press and hover on the tool links and the join bar, so every one of these has the
   full set of states the platform requires. */
.szp-tools-switch-item{transition:transform .16s ease,box-shadow .2s ease,border-color .18s ease}
.szp-tools-switch-item:hover{transform:translateY(-1px);box-shadow:var(--szp-glass-top),var(--szp-glass-shadow-lifted)}
.szp-tools-switch-item:active{transform:translateY(1px);box-shadow:var(--szp-glass-spec-bottom),var(--szp-glass-shadow-press)}
.szp-tools-switch-item:focus-visible{outline:3px solid #f4a25f;outline-offset:3px}

/* ===========================================================================
   کار ۴ — the address book: map first
   =========================================================================== */

/* The way in is the map, so it gets the primary weight and the top of the form.
   Typing it by hand still works underneath, for anyone who prefers it or whose map
   will not load. */
.szp-address-lead{display:flex;flex-direction:column;gap:8px;margin-bottom:6px}
html body .szp-dash .szp-address-map-open{
  justify-content:center;min-height:50px;font-size:.95rem;font-weight:800;width:100%
}
.szp-address-lead-note{color:var(--szp-v17-muted,#647286);font-size:.82rem;line-height:1.8}
.szp-address-map{height:300px;border-radius:16px;overflow:hidden;position:relative;
  border:1px solid var(--szp-glass-hairline);box-shadow:var(--szp-glass-top),var(--szp-glass-shadow)}
.szp-address-map[hidden]{display:none}
.szp-address-map-actions{display:flex;gap:var(--szp-gap-item,10px);margin-top:10px}
.szp-address-map-actions[hidden]{display:none}
html body .szp-dash .szp-address-map-actions .szp-dash-btn{flex:1 1 auto;justify-content:center;min-height:46px}

.szp-dash-map-point{margin:8px 0 2px;font-size:.84rem;line-height:1.9;color:#137c64}
.szp-dash-map-point:empty{display:none}
.szp-dash-map-point.is-busy{color:var(--szp-accent-ink,#a85c20)}
.szp-dash-map-point.is-error{color:#a23c34}

/* The one thing a map can never supply is called out rather than left to be guessed. */
.szp-address-extra small{display:block;margin-top:4px;color:var(--szp-v17-muted,#647286);font-size:.76rem;line-height:1.7}

/* The save button was a plain row control at the bottom of a long form. It is the
   action this screen exists for, so it reads like one and stays reachable. */
.szp-address-actions{display:flex;align-items:center;gap:var(--szp-gap-item,10px);flex-wrap:wrap;margin-top:6px}
html body .szp-dash .szp-address-save{min-height:50px;padding-inline:26px;font-weight:800;flex:1 1 200px;justify-content:center}
html body .szp-dash .szp-address-reset{min-height:50px}
html body .szp-dash .szp-address-reset[hidden]{display:none}

/* The saved list is a menu of addresses, each with its own two actions. */
.szp-address-list-title{margin:22px 0 10px;font-size:1rem;color:var(--szp-v17-ink,#172334)}
.szp-address-list > li{display:grid;gap:4px;padding:14px var(--szp-gap-edge,16px);border-radius:14px;position:relative}
.szp-address-list > li strong{font-size:.95rem}
.szp-address-list > li span{font-size:.82rem;color:var(--szp-v17-muted,#647286)}
.szp-address-list > li em{font-style:normal;font-size:.84rem;line-height:1.85}
.szp-place-pin{color:#137c64!important;font-size:.76rem!important;font-weight:700}
.szp-place-row-actions{display:flex;gap:8px;margin-top:8px}
html body .szp-dash .szp-place-row-actions .szp-dash-btn{min-height:38px;padding:6px 14px;font-size:.8rem}
html body .szp-dash .szp-place-delete{color:#a23c34!important;-webkit-text-fill-color:#a23c34!important}
@media (min-width:700px){
  .szp-address-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:var(--szp-gap-item,10px)}
  .szp-address-lead{flex-direction:row;align-items:center}
  html body .szp-dash .szp-address-map-open{width:auto;flex:0 0 auto;padding-inline:22px}
  .szp-address-lead-note{flex:1 1 auto}
}

/* A saved address offered in the location step. */
.szp-saved-places{margin-bottom:14px}
.szp-saved-places-list{display:grid;gap:var(--szp-gap-item,10px);grid-template-columns:repeat(auto-fill,minmax(190px,1fr));margin-top:8px}
html body .szp-modal .szp-saved-place{
  display:grid;gap:2px;text-align:start;padding:11px 13px;border-radius:13px;
  background:var(--szp-glass-tint-strong)!important;background-image:none!important;
  border:1px solid var(--szp-glass-hairline)!important;box-shadow:var(--szp-glass-top)!important;
  color:var(--szp-v17-ink,#172334)!important;-webkit-text-fill-color:var(--szp-v17-ink,#172334)!important;
  cursor:pointer;min-height:auto!important;font-weight:500!important
}
html body .szp-modal .szp-saved-place b{font-size:.88rem;font-weight:800}
html body .szp-modal .szp-saved-place small{font-size:.76rem;color:var(--szp-v17-muted,#647286)}
html body .szp-modal .szp-saved-place em{font-style:normal;font-size:.78rem;color:var(--szp-v17-muted,#647286);
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
html body .szp-modal .szp-saved-place[aria-pressed="true"]{
  border-color:var(--szp-accent,#e47a2c)!important;background:#fff6ee!important;
  box-shadow:var(--szp-glass-top),var(--szp-ring)!important
}
.szp-saved-places-note{margin:8px 0 0;font-size:.78rem;color:var(--szp-v17-muted,#647286)}

/* ===========================================================================
   کار ۵ — the composer, the three channels, and the ticket desk
   =========================================================================== */

/* ---- composer: attach, quote, emoji ------------------------------------- */
.szp-composer-tools{display:flex;align-items:center;gap:6px;position:relative}
html body .szp-composer-btn,
html body .szp-dash .szp-composer-btn{
  width:38px!important;height:38px!important;min-height:38px!important;flex:0 0 38px!important;
  padding:0!important;border-radius:50%!important;display:inline-flex!important;
  align-items:center;justify-content:center;font-size:1.05rem!important;line-height:1!important;
  background:var(--szp-glass-tint-strong)!important;background-image:none!important;
  border:1px solid var(--szp-glass-hairline)!important;box-shadow:var(--szp-glass-top)!important;
  color:var(--szp-v17-ink,#172334)!important;-webkit-text-fill-color:initial!important;cursor:pointer;
  transition:transform .16s ease,box-shadow .2s ease,border-color .18s ease
}
html body .szp-composer-btn:hover{transform:translateY(-1px);border-color:rgba(228,122,44,.45)!important}
html body .szp-composer-btn:active{transform:translateY(1px);box-shadow:var(--szp-glass-spec-bottom),var(--szp-glass-shadow-press)!important}
html body .szp-composer-btn:focus-visible{outline:3px solid #f4a25f;outline-offset:2px}

.szp-composer-picker{
  position:absolute;bottom:calc(100% + 8px);inset-inline-start:0;z-index:30;
  display:grid;grid-template-columns:repeat(8,1fr);gap:2px;padding:8px;
  width:min(280px,78vw);border-radius:14px;
  background:var(--szp-glass-tint-strong);border:1px solid var(--szp-glass-hairline);
  box-shadow:var(--szp-glass-top),var(--szp-glass-shadow-lifted)
}
html body .szp-composer-picker button{
  background:transparent!important;background-image:none!important;border:0!important;
  padding:4px!important;min-height:32px!important;font-size:1.15rem!important;line-height:1!important;
  cursor:pointer;border-radius:8px!important;box-shadow:none!important
}
html body .szp-composer-picker button:hover{background:rgba(228,122,44,.14)!important}

.szp-composer-reply,.szp-composer-file{
  display:flex;align-items:center;gap:8px;width:100%;order:-1;
  padding:7px 11px;margin-bottom:6px;border-radius:11px;font-size:.8rem;line-height:1.7;
  background:rgba(228,122,44,.10);border:1px solid rgba(228,122,44,.30);color:#8a5010
}
.szp-composer-file{background:rgba(19,124,100,.10);border-color:rgba(19,124,100,.28);color:#0f6b57}
.szp-composer-reply[hidden],.szp-composer-file[hidden]{display:none}
.szp-composer-reply-text,.szp-composer-file-name{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html body .szp-composer-reply-drop,html body .szp-composer-file-drop{
  background:transparent!important;border:0!important;padding:0 4px!important;min-height:0!important;
  color:inherit!important;-webkit-text-fill-color:currentColor!important;cursor:pointer;
  font-size:1.05rem!important;box-shadow:none!important
}
.szp-composer-note{width:100%;order:99;font-size:.76rem;color:var(--szp-v17-muted,#647286);margin-top:4px}
.szp-composer-note.is-error{color:#a23c34}
.szp-composer-note:empty{display:none}

/* A quote inside a message, and a file pill under it. */
.szp-chat-quote{
  display:block;margin-bottom:5px;padding:5px 9px;border-inline-start:3px solid rgba(228,122,44,.55);
  border-radius:0 8px 8px 0;background:rgba(13,35,55,.05);
  font-size:.76rem;line-height:1.7;color:var(--szp-v17-muted,#647286);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
.szp-chat-file{
  display:inline-flex;align-items:center;gap:6px;margin-top:5px;padding:5px 10px;border-radius:999px;
  background:rgba(19,124,100,.12);color:#0f6b57!important;font-size:.78rem;font-weight:700;text-decoration:none
}
.szp-chat-msg-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:4px}
html body .szp-chat-reply{
  background:transparent!important;background-image:none!important;border:0!important;
  padding:0!important;min-height:0!important;box-shadow:none!important;cursor:pointer;
  font-size:.72rem!important;font-weight:700!important;
  color:var(--szp-accent-ink,#a85c20)!important;-webkit-text-fill-color:var(--szp-accent-ink,#a85c20)!important
}
html body .szp-chat-reply:hover{text-decoration:underline}

/* ---- ف۵: three channels, biggest first ---------------------------------- */
.szp-chan{margin-bottom:16px;padding:16px var(--szp-gap-edge,16px);border-radius:16px;position:relative;isolation:isolate;
  background:var(--szp-glass-tint-soft);border:1px solid var(--szp-glass-hairline);
  box-shadow:var(--szp-glass-top),var(--szp-glass-shadow)}
.szp-chan-head h3{margin:0;font-size:1rem;color:var(--szp-v17-ink,#172334)}
.szp-chan-provider .szp-chan-head h3{font-size:1.2rem}
.szp-chan-head span{display:block;margin-top:3px;font-size:.82rem;line-height:1.8;color:var(--szp-v17-muted,#647286)}
.szp-chan-list{margin-top:12px}
.szp-chan-empty{margin:12px 0;font-size:.84rem;line-height:1.9;color:var(--szp-v17-muted,#647286)}
.szp-chan-provider{background:var(--szp-glass-tint-strong);border-color:rgba(228,122,44,.28)}
html body .szp-dash .szp-chan .szp-dash-btn{margin-top:12px;min-height:44px}
@supports (corner-shape: squircle){.szp-chan{corner-shape:squircle}}

/* ---- ف۶: the ticket desk ------------------------------------------------ */
/* The background was the theme's dark shell showing through our ink, the fields ran
   edge to edge, and the type had no scale. Same material as every other panel now. */
.szp-ticket-form{padding:16px var(--szp-gap-edge,16px);border-radius:16px;display:grid;gap:12px}
.szp-ticket-form label{display:grid;gap:5px;font-size:.84rem;color:var(--szp-v17-ink,#172334)}
.szp-ticket-form label > span{font-weight:700}
html body .szp-dash .szp-ticket-form textarea,
html body .szp-dash .szp-ticket-form input[type=text]{
  background:#fff!important;color:var(--szp-v17-ink,#172334)!important;
  border:1px solid var(--szp-glass-hairline)!important;border-radius:12px!important;
  min-height:46px!important;padding:10px 13px!important;font-size:.92rem!important
}
html body .szp-dash .szp-ticket-form textarea{min-height:110px!important;line-height:1.9!important}
html body .szp-dash .szp-ticket-form button[type=submit]{min-height:48px;font-weight:800}
.szp-ticket-item{padding:13px var(--szp-gap-edge,16px);border-radius:14px}
.szp-ticket-item .szp-ticket-code{font-size:.76rem;color:var(--szp-v17-muted,#647286);letter-spacing:0}
.szp-ticket-item h4{margin:3px 0;font-size:.94rem;line-height:1.6}

/* ---- گ۷, second pass: the provider hero -------------------------------

   The first pass tidied the bottom of the page and moved the total almost not at all,
   because the weight is at the top: measured at 390px the hero was 954px, of which the
   photograph alone was 416px - more than a screenful before the person's name - and the
   action block 178px, four same-weight buttons stacked in a column.

   The photograph is capped, and the actions get the same treatment گ۲ got: one coloured
   primary, the rest quiet and side by side. */
@media (max-width:640px){
  .szp-profile-photo-v17{max-height:240px!important;overflow:hidden;border-radius:16px}
  .szp-profile-photo-v17 img{width:100%;height:240px;object-fit:cover;object-position:center 22%}

  .szp-profile-actions-v17{display:grid!important;gap:var(--szp-gap-item,10px)!important;
    grid-template-columns:1fr 1fr;margin-top:12px!important}
  /* The one thing this page is for spans the row; the alternatives share the next. */
  html body .szp .szp-profile-actions-v17 .szp-btn-primary{grid-column:1/-1;min-height:48px!important}
  html body .szp .szp-profile-actions-v17 .szp-btn{min-height:42px!important;justify-content:center;
    padding-inline:10px!important;font-size:.84rem!important}
  /* Four actions in two columns leaves one orphan; it takes the row rather than sitting
     half-width next to nothing. */
  html body .szp .szp-profile-actions-v17 .szp-btn:last-child{grid-column:1/-1}
  .szp-profile-privacy{font-size:.74rem!important;line-height:1.7!important;margin-top:8px!important}
  .szp-profile-about-v17{margin-top:8px!important}
  .szp-profile-identity-v17 h1{font-size:1.5rem!important;line-height:1.35!important}
  .szp-profile-role-v17{font-size:.9rem!important;margin-top:2px!important}
}

/* ===========================================================================
   کار ۷ — the slider, the banner, what you were looking at, and the header address
   =========================================================================== */

.szp-promo{margin-block:clamp(18px,3vw,28px)}
.szp-promo-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.szp-promo-head h2{margin:0;font-size:clamp(1.05rem,2.6vw,1.4rem);color:var(--szp-v17-ink,#172334)}
.szp-promo-nav{display:flex;gap:6px}
html body .szp .szp-promo-arrow{
  width:36px!important;height:36px!important;min-height:36px!important;padding:0!important;
  border-radius:50%!important;display:inline-flex!important;align-items:center;justify-content:center;
  background:var(--szp-glass-tint-strong)!important;background-image:none!important;
  border:1px solid var(--szp-glass-hairline)!important;box-shadow:var(--szp-glass-top)!important;
  color:var(--szp-v17-ink,#172334)!important;-webkit-text-fill-color:initial!important;
  font-size:1.2rem!important;line-height:1!important;cursor:pointer
}
html body .szp .szp-promo-arrow:disabled{opacity:.35!important;cursor:default}

/* Scroll-snap does the moving; there is no autoplay, on purpose. */
/* A card is a card, whether there are two of them or twenty.
   `1fr` as the maximum meant the row divided the whole width between however many cards
   existed, so «آنچه قبلاً دیده بودید» with two items drew two enormous tiles and the
   same block with nine drew normal ones. The ceiling is now a real width and the row
   starts at the RTL edge instead of spreading, which is what the provider grid on the
   services page already does and what the owner pointed at as correct. */
.szp-promo-track{
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(150px,190px);gap:12px;
  justify-content:start;
  overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
  padding-block:4px;scrollbar-width:none
}
.szp-promo-track::-webkit-scrollbar{display:none}
@media (min-width:700px){.szp-promo-track{grid-auto-columns:minmax(200px,236px)}}

.szp-promo-card{
  position:relative;display:grid;gap:5px;align-content:start;scroll-snap-align:start;
  padding:10px;border-radius:14px;text-decoration:none;
  background:var(--szp-glass-tint-strong);border:1px solid var(--szp-glass-hairline);
  box-shadow:var(--szp-glass-top),var(--szp-glass-shadow);
  transition:transform .16s ease,box-shadow .2s ease
}
.szp-promo-card:hover{transform:translateY(-2px);box-shadow:var(--szp-glass-top),var(--szp-glass-shadow-lifted)}
.szp-promo-card:active{transform:translateY(1px);box-shadow:var(--szp-glass-spec-bottom),var(--szp-glass-shadow-press)}
.szp-promo-card:focus-visible{outline:3px solid #f4a25f;outline-offset:3px}
.szp-promo-card img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:10px;display:block}
.szp-promo-noimg{display:grid;place-items:center;aspect-ratio:4/3;border-radius:10px;background:#f1f4f6;color:#9aa6b2;font-size:1.6rem}
.szp-promo-card b{font-size:.82rem;line-height:1.6;color:var(--szp-v17-ink,#172334);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.szp-promo-price{font-size:.8rem;font-weight:800;color:var(--szp-accent-ink,#a85c20)}
.szp-promo-price del{margin-inline-start:6px;font-weight:500;color:var(--szp-v17-muted,#647286);font-size:.74rem}
.szp-promo-off{position:absolute;top:16px;inset-inline-end:16px;z-index:2;
  background:#c8321e;color:#fff;border-radius:999px;padding:2px 8px;font-size:.7rem;font-weight:800}
.szp-promo-dots{display:flex;justify-content:center;gap:5px;margin-top:8px}
.szp-promo-dot{width:6px;height:6px;border-radius:50%;background:rgba(13,35,55,.2)}
.szp-promo-dot.is-on{background:var(--szp-accent,#e47a2c);width:16px;border-radius:999px}

/* One product, compact, on a tool page. */
.szp-promo-banner a{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:14px;text-decoration:none;
  background:linear-gradient(90deg,rgba(228,122,44,.10),rgba(228,122,44,.02));
  border:1px solid rgba(228,122,44,.28)}
.szp-promo-banner img{width:74px;height:56px;object-fit:cover;border-radius:10px;flex:0 0 74px}
.szp-promo-banner-text{display:grid;gap:2px;min-width:0}
.szp-promo-banner-text small{font-size:.7rem;font-weight:800;color:var(--szp-accent-ink,#a85c20)}
.szp-promo-banner-text b{font-size:.85rem;color:var(--szp-v17-ink,#172334);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.szp-promo-banner em{font-style:normal;margin-inline-start:6px;font-size:.72rem;color:#c8321e;font-weight:800}
.szp-promo-recent[hidden]{display:none}

/* ف۷ — a category with a picture instead of a drawn glyph. */
.szp-category-thumb{display:block;width:40px;height:40px;border-radius:11px;overflow:hidden;flex:0 0 40px}
.szp-category-thumb img{width:100%;height:100%;object-fit:cover;display:block}

/* ---- ف۸: the address in the header ------------------------------------- */
.szp-addressbar{position:relative;display:inline-block;z-index:60}
.szp-addressbar.is-floating{position:fixed;top:calc(env(safe-area-inset-top,0px) + 10px);inset-inline-start:10px}
html body .szp-addressbar-btn{
  display:inline-flex!important;align-items:center;gap:8px;max-width:min(74vw,320px);
  padding:7px 12px!important;min-height:42px!important;border-radius:999px!important;
  background:var(--szp-glass-tint-strong,rgba(255,255,255,.86))!important;background-image:none!important;
  border:1px solid var(--szp-glass-hairline,rgba(13,35,55,.12))!important;
  box-shadow:var(--szp-glass-top),var(--szp-glass-shadow)!important;
  color:#172334!important;-webkit-text-fill-color:#172334!important;cursor:pointer;
  -webkit-backdrop-filter:saturate(150%) blur(12px);backdrop-filter:saturate(150%) blur(12px)
}
.szp-addressbar-pin{color:var(--szp-accent,#e47a2c);font-size:1rem}
.szp-addressbar-text{display:grid;text-align:start;min-width:0}
.szp-addressbar-text small{font-size:.66rem;color:#647286;line-height:1.3}
.szp-addressbar-text b{font-size:.8rem;line-height:1.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.szp-addressbar-caret{color:#647286;font-size:.7rem}
.szp-addressbar-menu{
  position:absolute;top:calc(100% + 8px);inset-inline-start:0;width:min(320px,86vw);z-index:70;
  display:grid;gap:6px;padding:10px;border-radius:16px;
  background:var(--szp-glass-tint-strong,rgba(255,255,255,.92));border:1px solid var(--szp-glass-hairline);
  box-shadow:var(--szp-glass-top),var(--szp-glass-shadow-lifted);
  -webkit-backdrop-filter:saturate(150%) blur(18px);backdrop-filter:saturate(150%) blur(18px)
}
.szp-addressbar-menu[hidden]{display:none}
html body .szp-addressbar-option{
  display:grid!important;gap:2px;text-align:start;padding:9px 11px!important;border-radius:11px!important;
  background:#fff!important;background-image:none!important;border:1px solid var(--szp-glass-hairline)!important;
  color:#172334!important;-webkit-text-fill-color:#172334!important;cursor:pointer;min-height:auto!important
}
html body .szp-addressbar-option.is-on{border-color:var(--szp-accent,#e47a2c)!important;background:#fff6ee!important}
.szp-addressbar-option b{font-size:.82rem;font-weight:800}
.szp-addressbar-option small{font-size:.72rem;color:#647286}
.szp-addressbar-option em{font-style:normal;font-size:.74rem;color:#647286;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.szp-addressbar-empty{margin:4px 2px;font-size:.8rem;color:#647286}
.szp-addressbar-add{display:block;padding:9px 11px;border-radius:11px;text-decoration:none;
  font-size:.8rem;font-weight:700;color:var(--szp-accent-ink,#a85c20)!important;background:rgba(228,122,44,.10)}
@supports (corner-shape: squircle){.szp-promo-card,.szp-addressbar-menu{corner-shape:squircle}}

/* ---- ف۱۱: suggested services, offered and never applied ----------------- */
.szp-tag-suggest{margin-top:10px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.szp-tag-suggest[hidden]{display:none}
.szp-tag-suggest-lead{flex:1 1 100%;font-size:.78rem;line-height:1.8;color:var(--szp-v17-muted,#647286)}
html body .szp .szp-tag-chip{
  background:rgba(228,122,44,.10)!important;background-image:none!important;
  border:1px solid rgba(228,122,44,.34)!important;border-radius:999px!important;
  padding:6px 12px!important;min-height:36px!important;box-shadow:none!important;
  color:var(--szp-accent-ink,#a85c20)!important;-webkit-text-fill-color:var(--szp-accent-ink,#a85c20)!important;
  font-size:.8rem!important;font-weight:700!important;cursor:pointer
}
html body .szp .szp-tag-chip:hover{background:rgba(228,122,44,.18)!important}
html body .szp .szp-tag-chip:focus-visible{outline:3px solid #f4a25f;outline-offset:2px}

/* ---- ف۳: the acceptance line ------------------------------------------- */
.szp-consent{margin-top:12px;align-items:flex-start;gap:9px;font-size:.84rem;line-height:1.9}
.szp-consent input{margin-top:4px;flex:0 0 auto}
.szp-consent a{color:var(--szp-accent-ink,#a85c20)!important;text-decoration:underline;text-underline-offset:3px;font-weight:700}
.szp-inline-status.is-error{color:#a23c34}

/* ---- the sign-in page --------------------------------------------------- */
.szp-login-page{padding-block:clamp(28px,6vw,64px)}
.szp-login-card{
  max-width:520px;margin-inline:auto;padding:clamp(20px,4vw,32px);
  border-radius:20px;position:relative;isolation:isolate;
  background:var(--szp-glass-tint-strong);border:1px solid var(--szp-glass-hairline);
  box-shadow:var(--szp-glass-top),var(--szp-glass-shadow-lifted)
}
.szp-login-card::before{
  content:"";position:absolute;inset:0;border-radius:inherit;
  padding:var(--szp-glass-lens-width);background:var(--szp-glass-lens);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;z-index:1
}
.szp-login-card > *{position:relative;z-index:2}
@supports (corner-shape: squircle){.szp-login-card{corner-shape:squircle}}
.szp-login-card h1{font-size:clamp(1.3rem,4vw,1.75rem);margin:6px 0 10px}
.szp-login-lede{color:var(--szp-v17-muted,#647286);font-size:.9rem;line-height:2;margin-bottom:18px}
.szp-login-slot{margin-block:14px}
.szp-login-notes{margin:18px 0 0;padding:0;list-style:none;display:grid;gap:8px}
.szp-login-notes li{
  position:relative;padding-inline-start:18px;font-size:.8rem;line-height:1.9;
  color:var(--szp-v17-muted,#647286)
}
.szp-login-notes li::before{content:"·";position:absolute;inset-inline-start:4px;color:var(--szp-accent,#e47a2c);font-weight:900}
.szp-login-alt{margin-top:16px;padding-top:14px;border-top:1px solid var(--szp-glass-hairline);
  font-size:.82rem;color:var(--szp-v17-muted,#647286)}
.szp-login-alt a{color:var(--szp-accent-ink,#a85c20)!important;font-weight:700;text-decoration:underline;text-underline-offset:3px}
.szp-login-actions{display:flex;gap:var(--szp-gap-item,10px);flex-wrap:wrap;margin-top:16px}
html body .szp .szp-login-actions .szp-btn{flex:1 1 180px;justify-content:center;min-height:48px}

/* ف۱۱ — the answer to "I clicked it and nothing happened": the chip now says what it did. */
.szp-tag-suggest-note{flex:1 1 100%;margin:8px 0 0;font-size:.8rem;line-height:1.7;color:#1f8a5f;font-weight:700}
.szp-tag-suggest-note.is-error{color:#b32d2e}

/* گ۵ — the compare picker. Opens over the page so choosing a second provider
   never costs the profile the visitor was reading. */
.szp-compare-picker{position:fixed;inset:0;z-index:2147483646;display:flex;align-items:flex-end;justify-content:center}
.szp-compare-picker-backdrop{position:absolute;inset:0;background:rgba(8,18,30,.55);backdrop-filter:blur(3px)}
.szp-compare-picker-panel{position:relative;z-index:1;width:min(560px,100%);max-height:82vh;display:flex;flex-direction:column;
  background:#fff;border-radius:18px 18px 0 0;padding:16px;box-shadow:0 -12px 40px rgba(8,18,30,.28)}
@media (min-width:700px){.szp-compare-picker{align-items:center}.szp-compare-picker-panel{border-radius:18px}}
.szp-compare-picker-panel>header{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.szp-compare-picker-panel>header b{font-size:.95rem;color:var(--szp-v17-ink,#172334)}
.szp-compare-picker-x{border:0;background:transparent;font-size:1.5rem;line-height:1;cursor:pointer;color:var(--szp-v17-muted,#647286);padding:0 4px}
/* The Elementor kit paints every bare input orange with white text — measured
   here as rgb(211,84,0) on white, which turned the search box into a solid
   orange bar. Specificity plus !important is the only layer it cannot reach. */
html body .szp-compare-picker-search input,
html body .szp-compare-picker input[type="search"]{
  width:100%;box-sizing:border-box;padding:10px 12px;
  border:1px solid var(--szp-v17-border,#e1e6ea)!important;border-radius:12px!important;
  background:#fff!important;background-image:none!important;color:var(--szp-v17-ink,#172334)!important;
  font:inherit!important;min-height:44px;box-shadow:none!important}
html body .szp-compare-picker-search input::placeholder{color:var(--szp-v17-muted,#647286)!important;opacity:1}
/* Two to a row, each one a small version of the marketplace card: face, name, trade. */
.szp-compare-picker-list{margin-top:12px;overflow:auto;display:grid;gap:10px;
  grid-template-columns:repeat(2,minmax(0,1fr));align-content:start}
.szp-compare-picker-list>p{grid-column:1/-1}
html body .szp-compare-picker-item{display:grid;gap:3px;justify-items:center;text-align:center;width:100%;
  padding:14px 12px;cursor:pointer;background:#fff;border:1px solid var(--szp-v17-border,#e1e6ea);border-radius:14px;
  transition:border-color .16s ease,box-shadow .2s ease,transform .16s ease}
html body .szp-compare-picker-item:hover{border-color:var(--szp-v17-orange,#e47a2c);background:#fff8f2;
  transform:translateY(-1px);box-shadow:0 6px 18px rgba(13,35,55,.08)}
.szp-compare-picker-media{width:72px;height:72px;border-radius:50%;overflow:hidden;margin-bottom:6px;
  display:grid;place-items:center;background:#eef2f4;flex:none}
.szp-compare-picker-media img{width:100%;height:100%;object-fit:cover;display:block}
.szp-compare-picker-initial{font-size:1.5rem;font-weight:800;color:var(--szp-v17-muted,#647286)}
.szp-compare-picker-item b{font-size:.88rem;line-height:1.5;color:var(--szp-v17-ink,#172334)}
.szp-compare-picker-item small{font-size:.76rem;line-height:1.6;color:var(--szp-v17-muted,#647286)}
.szp-compare-picker-city{opacity:.8}

/* ---------------------------------------------------------------------------
   Liquid Glass — closing the half that was never glass.

   The layer was written surface by surface: each rule repeated the tint, the
   hairline and the specular pair by hand, and whether it also carried a
   backdrop-filter depended on whether whoever wrote that rule remembered one.
   Audited on the live marketplace at 1440px: of fourteen translucent platform
   surfaces, seven had no backdrop-filter at all — a see-through box with
   nothing blurred behind it, which reads as washed-out plastic and is exactly
   the reported "the glass is completely failing". Among them were the select
   field and the «ورود مجری» bar, two of the most-looked-at controls on the site.

   One declaration for all of them, last in the file so source order settles any
   argument, and `html body` in front so the theme's own specificity cannot win.
   The blur is the soft 12px token, not the 20px one: these are small controls,
   and a phone pays for every blurred pixel on every frame.
--------------------------------------------------------------------------- */
@supports ((backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px))) {
  html body .szp-promo-card,
  html body .szp-promo-arrow,
  html body .szp-category-chip,
  html body .szp-filter-toggle,
  html body .szp-select-button,
  html body .szp-provider-join-bar,
  html body .szp-select-list {
    -webkit-backdrop-filter: var(--szp-glass-blur-soft, saturate(150%) blur(12px));
    backdrop-filter: var(--szp-glass-blur-soft, saturate(150%) blur(12px));
  }
}

/* The portaled menu lives on <body>, outside every .szp scope, so the tokens it
   needs have to exist at the root as well or it falls back to bare defaults. */
:root {
  --szp-glass-blur-soft: saturate(150%) blur(12px);
  --szp-glass-tint: rgba(255,255,255,.72);
  --szp-glass-tint-strong: rgba(255,255,255,.86);
  --szp-glass-hairline: rgba(13,35,55,.12);
}

/* Asked for less transparency, or no support: solid surfaces, never a smear. */
@media (prefers-reduced-transparency: reduce) {
  html body .szp-promo-card,
  html body .szp-promo-arrow,
  html body .szp-category-chip,
  html body .szp-filter-toggle,
  html body .szp-select-button,
  html body .szp-provider-join-bar,
  html body .szp-select-list {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background-color: #fff;
  }
}

/* ---------------------------------------------------------------------------
   Padding that only existed on phones.

   `.szp-profile-section-v17{padding:16px var(--szp-gap-edge)}` was written
   inside `@media (max-width:640px)`, so every viewport wider than a phone got
   the base rule — which sets padding-bottom and nothing else. Measured on the
   live profile at 1440px: computed padding `0px 0px 30px`, with the FAQ list
   and the service chips sitting 1px from the card's own border. That is the
   reported "text boxes are completely glued to the edges of their containers",
   and it was never a specificity fight: the declaration simply was not in
   scope above 640px.

   Given at every width and allowed to grow with the viewport, because a
   1200px-wide card needs more breathing room than a 360px one, not the same.
--------------------------------------------------------------------------- */
html body .szp-profile-section-v17 {
  padding: clamp(16px, 2vw, 26px) clamp(16px, 2.2vw, 30px);
}
html body .szp-profile-section-v17 > :first-child { margin-top: 0; }

/* The same shape of mistake on the panels that hold a search and its
   suggestions: the row of frequent searches ran to the panel's edge. */
html body .szp-search-panel-v17 { padding: clamp(16px, 1.8vw, 24px); }
html body .szp-search-suggest-row,
html body .szp-search-panel-v17 > * { min-width: 0; }

/* ---------------------------------------------------------------------------
   The dashboard shell.

   The previous pass put white cards on a white page and called the result
   glass. Glass needs something behind it to bend: over flat white a
   backdrop-filter is mathematically a no-op, which is exactly why the layer was
   invisible. So the ground comes first — a deep navy with three soft colour
   blooms — and every surface above it is genuinely translucent over that.

   Contrast is deliberate in both directions: the navigation is dark glass with
   near-white type on it, the content cards are light glass because the sections
   inside them render dark ink and must stay legible. Nothing here asks a light
   tint to carry text.
--------------------------------------------------------------------------- */
html.szp-shell-boot .dashboard-kaveh-sidebar,
html.szp-shell-boot .dashboard-kaveh-header,
html.szp-shell-boot .dashboard-kaveh-info-user-sm,
html.szp-shell-boot .dashboard-kaveh-header-text,
html.szp-shell-boot .dashboard-kaveh-menu-mobile,
html.szp-shell-boot .dashboard-kaveh-overlay,
html.szp-shell-boot .nav-bottom { display: none !important; }

html.szp-shell-boot body,
body.szp-own-shell {
  background:
    radial-gradient(90rem 50rem at 12% -10%, rgba(228,122,44,.22), transparent 60%),
    radial-gradient(70rem 45rem at 105% 8%, rgba(56,132,255,.20), transparent 62%),
    radial-gradient(60rem 40rem at 50% 115%, rgba(120,74,220,.18), transparent 60%),
    linear-gradient(180deg, #0d1b2a 0%, #101f31 45%, #0b1725 100%) !important;
  background-attachment: fixed !important;
}
body.szp-own-shell .dashboard-kaveh,
body.szp-own-shell .dashboard-kaveh-main {
  margin: 0 !important; padding: 0 !important; width: 100% !important; max-width: none !important;
  background: transparent !important;
}

.szp-shell {
  --shell-line: rgba(255,255,255,.12);
  --shell-ink: #eaf1f8;
  --shell-dim: #9fb2c6;
  --shell-accent: #f0913f;
  --shell-gap: clamp(14px, 1.6vw, 22px);
  display: grid; gap: var(--shell-gap);
  grid-template-columns: minmax(0, 1fr);
  width: min(1360px, 100%); margin-inline: auto;
  padding: var(--shell-gap) clamp(12px, 2vw, 28px) 40px;
  font-family: Vazirmatn, IRANSans, IRANYekan, Tahoma, sans-serif;
}
@media (min-width: 1000px) {
  .szp-shell { grid-template-columns: 268px minmax(0, 1fr); align-items: start; }
  .szp-shell-aside { position: sticky; top: 16px; }
}
.szp-shell-main { min-width: 0; display: grid; gap: var(--shell-gap); align-content: start; }

/* ---- navigation: dark glass ---------------------------------------------- */
.szp-shell-nav {
  display: grid; gap: 14px; padding: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.05));
  -webkit-backdrop-filter: saturate(160%) blur(22px);
  backdrop-filter: saturate(160%) blur(22px);
  border: 1px solid var(--shell-line); border-radius: 20px; corner-shape: squircle;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -1px 0 rgba(255,255,255,.06),
    0 18px 44px rgba(3,10,20,.45),
    0 2px 8px rgba(3,10,20,.30);
  color: var(--shell-ink);
}
.szp-shell-top { padding-bottom: 12px; border-bottom: 1px solid var(--shell-line); }
.szp-shell-brand { display: inline-flex; align-items: center; text-decoration: none; }
.szp-shell-brand img { height: 34px; width: auto; display: block; filter: brightness(0) invert(1); opacity: .95; }
.szp-shell-brand-text { font-weight: 800; font-size: 1rem; color: #fff; }

.szp-shell-me { display: flex; align-items: center; gap: 10px; }
.szp-shell-avatar {
  width: 42px; height: 42px; flex: none; display: grid; place-items: center; border-radius: 13px;
  background: linear-gradient(180deg, #f6a256, #e07521); color: #fff; font-weight: 800; font-size: 1.05rem;
  box-shadow: 0 6px 16px rgba(224,117,33,.36), inset 0 1px 0 rgba(255,255,255,.4);
}
.szp-shell-me-text { min-width: 0; }
.szp-shell-me-text b { display: block; font-size: .9rem; font-weight: 700; line-height: 1.5; color: #fff;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.szp-shell-me-text small { display: block; font-size: .74rem; color: var(--shell-dim); }

.szp-shell-scroll { display: grid; gap: 14px; }
.szp-shell-group { display: grid; gap: 4px; }
.szp-shell-group-title {
  font-size: .66rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: #7f93a9; padding-inline: 10px;
}
.szp-shell-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
html body .szp-shell-link {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  min-height: 40px; padding: 8px 11px; border-radius: 11px;
  text-decoration: none; font-size: .86rem; font-weight: 600;
  color: #cfdcea; background: transparent; border: 1px solid transparent;
  transition: background .16s ease, color .16s ease, border-color .16s ease;
}
html body .szp-shell-link:hover { background: rgba(255,255,255,.09); color: #fff; }
html body .szp-shell-link.is-current {
  background: linear-gradient(180deg, rgba(255,255,255,.20), rgba(255,255,255,.10));
  border-color: rgba(255,255,255,.24); color: #fff; font-weight: 800;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.30), 0 6px 16px rgba(3,10,20,.30);
}
.szp-shell-count {
  flex: none; min-width: 21px; padding: 1px 7px; border-radius: 999px;
  background: var(--shell-accent); color: #21120a; font-size: .68rem; font-weight: 800; text-align: center;
}

/* A sibling of the nav now, not a child — see the note in shell_nav(). */
.szp-shell-foot { display: grid; gap: 6px; margin-top: 10px; padding: 12px; border-radius: 16px;
  background: rgba(255,255,255,.06); border: 1px solid var(--shell-line, rgba(255,255,255,.12)); }
html body .szp-shell-home,
html body .szp-shell-exit {
  display: block; text-align: center; padding: 10px; border-radius: 11px;
  font-size: .8rem; font-weight: 700; text-decoration: none; border: 1px solid transparent;
}
html body .szp-shell-home { color: #fff; background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.18); }
html body .szp-shell-home:hover { background: rgba(255,255,255,.18); }
html body .szp-shell-exit { color: #ffb3ae; background: rgba(255,90,80,.12); border-color: rgba(255,120,110,.22); }
html body .szp-shell-exit:hover { background: rgba(255,90,80,.20); }

/* ---- content: light glass, so the dark ink inside stays legible ---------- */
body.szp-own-shell .szp-dash,
body.szp-own-shell .szp-dashboard-card,
body.szp-own-shell .szp-application-card {
  background: rgba(255,255,255,.86) !important;
  -webkit-backdrop-filter: saturate(150%) blur(20px);
  backdrop-filter: saturate(150%) blur(20px);
  border: 1px solid rgba(255,255,255,.55) !important;
  border-radius: 20px !important; corner-shape: squircle;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 16px 40px rgba(3,10,20,.28) !important;
  padding: clamp(18px, 2.1vw, 26px) !important;
  color: #0f2036;
}
body.szp-own-shell .szp-dash h2,
body.szp-own-shell .szp-dashboard-card h2 {
  font-size: clamp(1.1rem, 1.5vw, 1.35rem); font-weight: 800; color: #0d1b2a; letter-spacing: -.01em;
}
body.szp-own-shell .szp-muted,
body.szp-own-shell .szp-dash small { color: #4a5c72 !important; }

/* ---- phone: one swipeable rail, not four stacked lists ------------------ */
@media (max-width: 999px) {
  .szp-shell { padding-bottom: 88px; }
  .szp-shell-nav { padding: 12px; gap: 11px; border-radius: 18px; }
  .szp-shell-top { display: flex; align-items: center; justify-content: space-between; }
  .szp-shell-group-title { display: none; }
  /* display:contents dissolves the four wrappers so every link becomes a direct
     item of one scroller — the four separate lists are what stacked before. */
  .szp-shell-scroll {
    display: flex; gap: 7px; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x proximity; padding-bottom: 2px; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 14px), transparent);
            mask-image: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 14px), transparent);
  }
  .szp-shell-scroll::-webkit-scrollbar { display: none; }
  .szp-shell-group, .szp-shell-links { display: contents; }
  html body .szp-shell-link {
    flex: 0 0 auto; scroll-snap-align: start; white-space: nowrap;
    min-height: 38px; padding: 8px 15px; border-radius: 999px;
    background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.14);
  }
  html body .szp-shell-link.is-current { border-radius: 999px; }
  .szp-shell-foot {
    position: fixed; inset-inline: 0; bottom: 0; z-index: 60;
    grid-auto-flow: column; grid-template-columns: 1fr 1fr; gap: 8px;
    margin: 0; padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    background: rgba(13,27,42,.72); border-top: 1px solid rgba(255,255,255,.12);
    -webkit-backdrop-filter: saturate(160%) blur(20px); backdrop-filter: saturate(160%) blur(20px);
  }
}

@media (prefers-reduced-transparency: reduce) {
  .szp-shell-nav { -webkit-backdrop-filter: none; backdrop-filter: none; background: #14263a; }
  body.szp-own-shell .szp-dash,
  body.szp-own-shell .szp-dashboard-card { -webkit-backdrop-filter: none; backdrop-filter: none; background: #fff !important; }
  .szp-shell-foot { -webkit-backdrop-filter: none; backdrop-filter: none; background: #0d1b2a; }
}

/* ---------------------------------------------------------------------------
   Integration: one app, not two themes in a trenchcoat.
--------------------------------------------------------------------------- */

/* The home screen is a summary. The theme still renders its own orders and
   personal-details panels underneath ours, which is what stacked two dashboards
   on top of each other. They stay on every section screen, where that same
   container holds the section itself. */
html.szp-shell-overview .dashboard-kaveh-content { display: none !important; }

/* The expanded menu was touching the panel edges. The list is portaled to the
   dialog or the body and positioned in script, so the breathing room belongs to
   the panel it sits over. */
body.szp-own-shell .szp-ticket-form { padding-inline: 4px; }
body.szp-own-shell .szp-select-list { margin-inline: 4px; }

/* ---- WooCommerce and the theme's dashboard widgets, wearing our system ---- */
body.szp-own-shell .woocommerce,
body.szp-own-shell .woocommerce-MyAccount-content,
body.szp-own-shell .dashboard-kaveh-content {
  background: transparent !important; color: #0f2036;
  font-family: Vazirmatn, IRANSans, IRANYekan, Tahoma, sans-serif !important;
}
body.szp-own-shell .woocommerce table.shop_table,
body.szp-own-shell .woocommerce-MyAccount-content > div,
body.szp-own-shell .woocommerce-Address,
body.szp-own-shell .woocommerce-order,
body.szp-own-shell .dashboard-kaveh-content > div,
body.szp-own-shell .dashboard-kaveh-box {
  background: rgba(255,255,255,.86) !important;
  -webkit-backdrop-filter: saturate(150%) blur(20px);
  backdrop-filter: saturate(150%) blur(20px);
  border: 1px solid rgba(255,255,255,.55) !important;
  border-radius: 20px !important; corner-shape: squircle;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 16px 40px rgba(3,10,20,.28) !important;
  color: #0f2036 !important;
}
body.szp-own-shell .woocommerce table.shop_table th,
body.szp-own-shell .woocommerce table.shop_table td,
body.szp-own-shell .dashboard-kaveh-content h1,
body.szp-own-shell .dashboard-kaveh-content h2,
body.szp-own-shell .dashboard-kaveh-content h3,
body.szp-own-shell .dashboard-kaveh-content p,
body.szp-own-shell .dashboard-kaveh-content span,
body.szp-own-shell .dashboard-kaveh-content a { color: #0f2036 !important; }
body.szp-own-shell .dashboard-kaveh-content small,
body.szp-own-shell .woocommerce .woocommerce-Price-amount { color: #4a5c72 !important; }

/* Fields: one shape everywhere, and never the kit's orange-on-orange. */
body.szp-own-shell .woocommerce input[type="text"],
body.szp-own-shell .woocommerce input[type="email"],
body.szp-own-shell .woocommerce input[type="tel"],
body.szp-own-shell .woocommerce input[type="password"],
body.szp-own-shell .woocommerce textarea,
body.szp-own-shell .woocommerce select,
body.szp-own-shell .dashboard-kaveh-content input,
body.szp-own-shell .dashboard-kaveh-content textarea,
body.szp-own-shell .dashboard-kaveh-content select {
  background: #fff !important; background-image: none !important; color: #0f2036 !important;
  border: 1px solid #d5dee7 !important; border-radius: 12px !important;
  min-height: 46px; padding: 10px 13px !important; box-shadow: none !important;
  font: inherit !important;
}
body.szp-own-shell .woocommerce label,
body.szp-own-shell .dashboard-kaveh-content label { color: #26384f !important; font-weight: 600; }

body.szp-own-shell .woocommerce .button,
body.szp-own-shell .dashboard-kaveh-content .btn {
  background: linear-gradient(180deg, #ef8c3f, #e07521) !important; color: #fff !important;
  border: 1px solid rgba(168,92,32,.55) !important; border-radius: 999px !important;
  min-height: 46px; padding: 11px 20px !important; font-weight: 700 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 6px 18px rgba(224,117,33,.30) !important;
}

/* ---------------------------------------------------------------------------
   Batch 4 — placement fixes.
--------------------------------------------------------------------------- */

/* The quick path reads as its own offer, not as a caption on the search box
   above it. A rule and a little air separate the two; the primary action and
   the "few seconds" link stay together underneath their own sentence. */
html body .szp-discovery-quick {
  margin-top: clamp(14px, 2vw, 20px);
  padding-top: clamp(14px, 2vw, 20px);
  border-top: 1px solid var(--szp-v17-border, #e1e6ea);
  display: grid; justify-items: center; gap: 9px; text-align: center;
}
html body .szp-discovery-quick > span { font-size: .86rem; color: var(--szp-v17-muted, #647286); }
html body .szp-discovery-cta { min-width: min(260px, 100%); }
html body .szp-quick-link { font-size: .8rem; }

/* The provider's own doors, in the corner they belong in. Compact so they never
   outweigh the filter a customer actually came for. */
.szp-provider-head-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
html body .szp-provider-door { white-space: nowrap; }
@media (max-width: 640px) {
  .szp-provider-head-actions { width: 100%; }
  html body .szp-provider-door { flex: 1 1 auto; justify-content: center; }
}

/* The empty band between «مجریان مشابه» and the tools rail.

   Measured on a phone: 270px of nothing. `.szp-v17-wrap` carries 178px of
   bottom padding to clear the fixed action bar — but the tools section renders
   after that wrapper, so the clearance was not at the end of the page, it was a
   hole in the middle of it. The clearance belongs on whatever is actually last. */
@media (max-width: 900px) {
  /* Two earlier passes each left an !important clearance here (188px, then
     178px), so specificity alone lost — this one has to carry it too. And it
     only applies when the tools rail actually follows: on a profile that ends
     at the wrapper, the clearance is still the only thing keeping the fixed
     action bar off the content. */
  html body .szp-profile-v17:has(~ .szp-product-tools) > .szp-v17-wrap {
    padding-bottom: clamp(18px, 3vw, 28px) !important;
  }
  html body .szp-product-tools { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
}
@supports not selector(:has(*)) {
  /* Without :has() the old clearance stands; a gap is better than a bar over
     the last card. */
  @media (max-width: 900px) { html body .szp-product-tools { padding-bottom: 0; } }
}

/* ===========================================================================
   2.77.0 — Batch 5a: the screens the owner sent screenshots of.

   Everything below is additive and scoped. Nothing above this line is edited,
   because four earlier passes have left `!important` declarations in this file
   that a later, more specific selector loses to on its own; the rules here that
   have to win say so, and say why.
=========================================================================== */

/* ---------------------------------------------------------------------------
   1. The discovery panel — glass, and a quick path that is not a caption.

   Measured on the screenshots: `.szp-search-panel-v17` sits on `--szp-v17-bg`
   (#f7f8f7), and a backdrop-filter over a flat near-white surface has nothing
   to blur — which is exactly the "cheap and flat" the owner is describing. The
   glass is real once there is something behind it, so the workspace gets a
   ground of its own first and the panel is put on top of it.
--------------------------------------------------------------------------- */
html body .szp-services-v17 .szp-workspace {
  background:
    radial-gradient(38rem 22rem at 88% -12%, rgba(228,122,44,.16), transparent 62%),
    radial-gradient(34rem 20rem at 4% 108%, rgba(56,132,255,.14), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #f2f5f8 100%) !important;
  border: 1px solid rgba(13,35,55,.08) !important;
  border-radius: 24px !important;
  padding: clamp(16px, 2.4vw, 26px) !important;
  box-shadow: 0 22px 54px rgba(13,35,55,.10), inset 0 1px 0 rgba(255,255,255,.9) !important;
}

html body .szp-services-v17 .szp-search-panel-v17 {
  background: rgba(255,255,255,.62) !important;
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid rgba(255,255,255,.85) !important;
  border-radius: 20px !important;
  padding: clamp(14px, 2vw, 20px) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -1px 0 rgba(13,35,55,.05),
    0 14px 34px rgba(13,35,55,.10) !important;
}

/* The search box is the subject of this panel, so it is the tallest and the
   most contrasted thing in it. It was the same weight as the chips below it. */
html body .szp-services-v17 .szp-search-panel-v17 > .szp-search-input {
  min-height: 58px;
  background: #fff !important;
  border: 2px solid rgba(13,35,55,.14) !important;
  border-radius: 15px !important;
  box-shadow: 0 2px 10px rgba(13,35,55,.06) !important;
}
html body .szp-services-v17 .szp-search-panel-v17 > .szp-search-input:focus-within {
  border-color: var(--szp-v17-orange, #e47a2c) !important;
  box-shadow: 0 0 0 4px rgba(228,122,44,.16) !important;
}

/* «وقت ندارید؟…» reads as its own offer, strictly underneath the box, on its
   own surface — not as a floating caption centred in the panel's white space. */
html body .szp-services-v17 .szp-discovery-quick {
  display: grid !important;
  grid-template-columns: 1fr;
  justify-items: stretch !important;
  gap: 10px;
  text-align: center;
  margin-top: clamp(14px, 2vw, 18px) !important;
  padding: clamp(13px, 1.8vw, 17px) !important;
  border: 1px dashed rgba(228,122,44,.42) !important;
  border-radius: 15px !important;
  background: linear-gradient(180deg, rgba(255,246,238,.92), rgba(255,255,255,.72)) !important;
}
html body .szp-services-v17 .szp-discovery-quick > span {
  font-size: .9rem; font-weight: 700; color: var(--szp-v17-ink, #172334);
}
html body .szp-services-v17 .szp-discovery-cta {
  min-width: 0 !important; width: 100%; justify-self: center; max-width: 340px;
}
@media (min-width: 720px) {
  /* Wide enough for the sentence and the button to share a line without either
     of them looking stranded. */
  html body .szp-services-v17 .szp-discovery-quick {
    grid-template-columns: 1fr auto;
    align-items: center;
    text-align: start;
    row-gap: 6px;
  }
  html body .szp-services-v17 .szp-discovery-quick > span { grid-column: 1; }
  html body .szp-services-v17 .szp-discovery-cta { grid-column: 2; grid-row: 1 / span 2; width: auto; min-width: 200px !important; }
  html body .szp-services-v17 .szp-quick-link { grid-column: 1; justify-self: start; }
}

/* ---------------------------------------------------------------------------
   2. The provider's two doors, under the registration panel.

   They were compact chips in the provider list's header, on the same line as
   the customer's filter — three controls for two different audiences. Here they
   are one labelled pair with a rule above them, so a customer reads past them
   and a provider finds them without hunting.
--------------------------------------------------------------------------- */
html body .szp-provider-doors {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 10px 14px;
  margin-top: clamp(12px, 1.8vw, 16px);
  padding-top: clamp(12px, 1.8vw, 16px);
  border-top: 1px solid rgba(13,35,55,.10);
}
html body .szp-provider-doors-label {
  font-size: .88rem; font-weight: 800; color: var(--szp-v17-navy, #0b1d31);
}
html body .szp-provider-doors-actions { display: flex; gap: 9px; flex: 1 1 auto; justify-content: flex-end; }
html body .szp-provider-doors .szp-provider-door {
  min-height: 44px; padding: 10px 18px; border-radius: 12px;
  font-size: .85rem; font-weight: 700; white-space: nowrap;
}
@media (max-width: 560px) {
  html body .szp-provider-doors { flex-direction: column; align-items: stretch; text-align: center; }
  html body .szp-provider-doors-actions { justify-content: stretch; }
  html body .szp-provider-doors .szp-provider-door { flex: 1 1 0; justify-content: center; }
}

/* ---------------------------------------------------------------------------
   3. Six rows, then a door.

   `display:none` rather than `visibility` or a height: a grid item that is only
   invisible still occupies its cell and still counts as a row, so the cap would
   do nothing to the page's height — which is the entire point of it.
--------------------------------------------------------------------------- */
html body .szp-people-v17 > .szp-provider-card-v17.is-past-fold { display: none !important; }
html body .szp-people-more-v17 .szp-people-more-btn {
  min-height: 50px; padding-inline: 26px; border-radius: 999px;
  font-weight: 800; font-size: .9rem;
  background: rgba(255,255,255,.72) !important;
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
  border: 1px solid rgba(13,35,55,.14) !important;
  box-shadow: 0 8px 22px rgba(13,35,55,.10) !important;
}
html body .szp-people-more-v17 .szp-people-more-btn:hover {
  border-color: var(--szp-v17-orange, #e47a2c) !important;
  color: var(--szp-accent-ink, #a85c20) !important;
}

/* ---------------------------------------------------------------------------
   4. The ticket form's conditional fields.

   `field.hidden = true` was doing nothing at all: `.szp-ticket-form label` sets
   `display:grid`, and an author rule beats the user-agent's `[hidden]{display:none}`
   whatever the attribute says. That is the whole of "the conditional fields do
   not update" — the script was right and the stylesheet was overruling it.
--------------------------------------------------------------------------- */
html body .szp-ticket-form label[hidden],
html body .szp-ticket-form [hidden] { display: none !important; }

/* ---------------------------------------------------------------------------
   5. The provider sign-in dialog.

   It is appended to <body>, outside `.szp`, so the theme's Elementor kit was the
   only thing styling it — the number field and the close button came out as
   solid orange slabs and the "×" sat on top of the heading. The dialog now
   carries the `.szp` scope itself (see platform.js) and these rules give it the
   same material as every other panel.
--------------------------------------------------------------------------- */
html body .szp-provider-login {
  position: fixed; inset: 0; z-index: 2147483000;
  display: grid; place-items: center; padding: 18px;
  background: rgba(11,29,49,.52);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
html body .szp-provider-login .szp-provider-login-card {
  position: relative; width: min(420px, 100%);
  background: rgba(255,255,255,.94) !important;
  -webkit-backdrop-filter: blur(22px) saturate(160%); backdrop-filter: blur(22px) saturate(160%);
  border: 1px solid rgba(255,255,255,.9) !important;
  border-radius: 20px; padding: 20px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 26px 64px rgba(13,35,55,.32) !important;
}
/* A header row, not an absolutely positioned overlay: at 390px the old "×" was
   on top of the title and could not be pressed without hitting the heading. */
html body .szp-provider-login .szp-provider-login-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 14px;
  padding-bottom: 12px; border-bottom: 1px solid rgba(13,35,55,.10);
}
html body .szp-provider-login .szp-provider-login-head h3 {
  margin: 0; font-size: 1.06rem; font-weight: 800;
  color: var(--szp-v17-ink, #172334) !important;
}
html body .szp-provider-login .szp-provider-login-close {
  position: static !important;
  flex: 0 0 auto; width: 36px; height: 36px; display: grid; place-items: center;
  border: 1px solid rgba(13,35,55,.12) !important; border-radius: 50%;
  background: #f2f4f6 !important; background-image: none !important;
  color: #41505f !important; -webkit-text-fill-color: #41505f !important;
  font-size: 1.2rem; line-height: 1; cursor: pointer; box-shadow: none !important;
}
html body .szp-provider-login .szp-provider-login-close:hover {
  background: #e6eaee !important; color: #0b1d31 !important; -webkit-text-fill-color: #0b1d31 !important;
}
/* The kit painted this field orange with white text on it — unreadable, and the
   reason the dialog looked broken in the screenshot. */
html body .szp-provider-login input,
html body .szp-provider-login .szp-otp-row input {
  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: 12px !important;
  min-height: 48px !important; padding: 10px 13px !important;
  box-shadow: none !important; font-size: .95rem !important;
}
html body .szp-provider-login input:focus {
  border-color: var(--szp-v17-orange, #e47a2c) !important;
  box-shadow: 0 0 0 3px rgba(228,122,44,.18) !important;
}
html body .szp-provider-login .szp-otp-row > span {
  display: block; margin-bottom: 5px; font-size: .82rem; font-weight: 700;
  color: var(--szp-v17-muted, #647286) !important;
}
html body .szp-provider-login .szp-otp-go { width: 100%; min-height: 48px; justify-content: center; }
html body .szp-provider-login .szp-otp-status { margin-top: 10px; font-size: .84rem; }
html body .szp-provider-login .szp-otp-status.is-error { color: #b4342a !important; }

/* ---------------------------------------------------------------------------
   6. The sign-in screen's three doors.
--------------------------------------------------------------------------- */
html body .szp-login-tabs {
  display: flex; gap: 6px; margin: 18px 0 16px; padding: 5px;
  border-radius: 999px; background: rgba(13,35,55,.06);
  border: 1px solid rgba(13,35,55,.08);
}
html body .szp-login-tab {
  flex: 1 1 0; min-height: 42px; border: 0; border-radius: 999px;
  background: transparent; cursor: pointer;
  font-size: .88rem; font-weight: 700; color: var(--szp-v17-muted, #647286);
}
html body .szp-login-tab.is-current {
  background: #fff; color: var(--szp-v17-navy, #0b1d31);
  box-shadow: 0 2px 8px rgba(13,35,55,.12);
}
html body .szp-login-panel[hidden] { display: none !important; }
html body .szp-login-pw { display: grid; gap: 12px; }
html body .szp-login-pw label { display: grid; gap: 5px; font-size: .84rem; font-weight: 700; color: var(--szp-v17-ink, #172334); }
html body .szp-login-pw input[type="text"],
html body .szp-login-pw input[type="password"],
html body .szp-login-pw input:not([type="checkbox"]) {
  background: #fff !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: 12px !important;
  min-height: 48px; padding: 10px 13px; font-size: .95rem;
}
html body .szp-login-pw .szp-checkbox-line { display: flex; align-items: center; gap: 8px; font-weight: 600; }
html body .szp-login-pw button[type="submit"] { min-height: 50px; font-weight: 800; }

/* ---------------------------------------------------------------------------
   7. The screen at the end of a form.

   A tracking code is the one thing the person has to keep, so it is the largest
   thing on the page and it can be copied. What was here was a line of body text
   with the code in bold inside it.
--------------------------------------------------------------------------- */
html body .szp-done {
  display: grid; justify-items: center; text-align: center;
  gap: 14px; padding: clamp(22px, 4vw, 40px) clamp(16px, 3vw, 32px);
  border-radius: 22px;
  background:
    radial-gradient(30rem 18rem at 50% -20%, rgba(228,122,44,.14), transparent 64%),
    linear-gradient(180deg, #ffffff 0%, #f5f8fb 100%);
  border: 1px solid rgba(13,35,55,.09);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 18px 44px rgba(13,35,55,.10);
}
html body .szp-done-mark {
  width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(180deg, #34b46a, #1f8f4f);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 10px 26px rgba(31,143,79,.34);
}
html body .szp-done-mark span { color: #fff; font-size: 1.9rem; line-height: 1; font-weight: 900; }
html body .szp-done h2 { font-size: clamp(1.25rem, 2.6vw, 1.75rem); font-weight: 900; color: var(--szp-v17-navy, #0b1d31); }
html body .szp-done-lede { max-width: 54ch; color: var(--szp-v17-muted, #647286); line-height: 1.95; font-size: .92rem; }

html body .szp-done-code {
  display: grid; justify-items: center; gap: 9px;
  width: min(430px, 100%); padding: 18px 16px;
  border-radius: 18px; border: 1.5px dashed rgba(228,122,44,.5);
  background: rgba(255,246,238,.75);
}
html body .szp-done-code-label { font-size: .8rem; font-weight: 700; color: var(--szp-v17-muted, #647286); }
html body .szp-done-code-value {
  font-size: clamp(1.5rem, 5vw, 2.1rem); font-weight: 900; letter-spacing: .06em;
  color: var(--szp-v17-navy, #0b1d31); word-break: break-all; line-height: 1.3;
  user-select: all; -webkit-user-select: all;
}
html body .szp-done-steps {
  display: grid; gap: 10px; width: min(560px, 100%);
  margin: 4px 0 0; padding: 0; list-style: none; text-align: start; counter-reset: szpdone;
}
html body .szp-done-steps li {
  display: grid; gap: 2px;
  padding: 12px 46px 12px 14px; position: relative;
  border-radius: 14px; background: rgba(255,255,255,.7); border: 1px solid rgba(13,35,55,.08);
}
html body .szp-done-steps li::before {
  counter-increment: szpdone; content: counter(szpdone);
  position: absolute; inset-inline-start: 12px; top: 12px;
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: var(--szp-v17-navy, #0b1d31); color: #fff; font-size: .78rem; font-weight: 800;
}
html body .szp-done-steps li b { font-size: .9rem; color: var(--szp-v17-ink, #172334); }
html body .szp-done-steps li span { font-size: .82rem; color: var(--szp-v17-muted, #647286); line-height: 1.8; }
html body .szp-done-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 4px; }
html body .szp-done-actions .szp-btn { min-height: 48px; padding-inline: 22px; }
html body .szp-done-compact { padding: clamp(18px, 3vw, 26px) clamp(14px, 2.5vw, 22px); box-shadow: none; border: 0; background: none; }
@media (max-width: 480px) {
  html body .szp-done-actions { flex-direction: column; align-items: stretch; }
  html body .szp-done-actions .szp-btn { width: 100%; justify-content: center; }
}
/* The submit that is waiting on two ticks says so rather than looking broken. */
html body .szp-application-actions button[type="submit"]:disabled,
html body .szp-btn.is-waiting-consent {
  opacity: .55; cursor: not-allowed; filter: saturate(.6);
}

/* ---------------------------------------------------------------------------
   8. The dashboard shell.
--------------------------------------------------------------------------- */

/* The logo was stretched because a hand-written width/height gave the browser a
   ratio the file does not have. The attributes are read from the attachment now
   (see shell_logo); this keeps any future logo letterboxed rather than squashed. */
html body .szp-shell-brand img {
  display: block; width: auto !important; height: 34px !important;
  max-width: 160px; object-fit: contain; object-position: center;
}
html body .szp-shell-login {
  font-weight: 600; font-size: .82em; opacity: .72; direction: ltr; unicode-bidi: isolate;
}
html body .szp-shell-avatar-img { padding: 0 !important; overflow: hidden; }
html body .szp-shell-avatar-img img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }

/*
 * The theme's footer, off the dashboard.
 *
 * "All rights reserved 2024 ©" and the address block were rendering below our
 * own bottom bar — a second, older-looking footer under the one we print, on a
 * screen that is a private workspace and not a marketing page.
 */
body.szp-own-shell footer,
body.szp-own-shell .footer,
body.szp-own-shell .site-footer,
body.szp-own-shell .footer-kaveh,
body.szp-own-shell .footer-widgets,
body.szp-own-shell .copyright,
body.szp-own-shell .copy-right,
body.szp-own-shell .footer-copyright,
body.szp-own-shell .elementor-location-footer {
  display: none !important;
}
/* Our own bottom bar is not a footer and must survive the rule above it. */
body.szp-own-shell .szp-shell-foot { display: flex !important; }

/*
 * The phone rail: the current chip is legible as the current chip.
 *
 * It was carrying the same treatment as every other link, so on a strip of ten
 * the only signal of where you are was a slightly different weight.
 */
html body .szp-shell-scroll { scroll-behavior: smooth; }
html body .szp-shell-link.is-current,
html body .szp-shell-link[aria-current="page"] {
  background: linear-gradient(180deg, #ef8c3f, #e07521) !important;
  color: #fff !important; -webkit-text-fill-color: #fff !important;
  border-color: rgba(168,92,32,.6) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 6px 16px rgba(224,117,33,.32) !important;
}
html body .szp-shell-link.is-current .szp-shell-count { background: rgba(255,255,255,.28) !important; color: #fff !important; }
/* Pressed, before the page it asked for has arrived. */
html body .szp-shell-link.is-going,
html body .szp-dash-nav a.is-going { opacity: .78; }

html body .szp-dash-nav ul { scroll-behavior: smooth; }
html body .szp-dash-nav a.is-current,
html body .szp-dash-nav a[aria-current="page"] {
  background: var(--szp-v17-navy, #0b1d31) !important;
  color: #fff !important; -webkit-text-fill-color: #fff !important;
  border-color: transparent !important;
}

/* ---------------------------------------------------------------------------
   9. The profile screen: a picture, and two field sets that swap instantly.
--------------------------------------------------------------------------- */
html body .szp-profile-identity {
  display: flex; align-items: flex-start; gap: clamp(14px, 2.4vw, 22px); flex-wrap: wrap;
}
html body .szp-profile-identity .szp-profile-view { flex: 1 1 260px; min-width: 0; }
html body .szp-profile-avatar {
  flex: 0 0 auto; width: 96px; height: 96px; border-radius: 24px;
  display: grid; place-items: center; overflow: hidden;
  background: linear-gradient(180deg, #ef8c3f, #e07521);
  color: #fff; font-size: 2.2rem; font-weight: 900;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 10px 26px rgba(13,35,55,.16);
}
html body .szp-profile-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
html body .szp-profile-avatar-field {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 14px; margin-bottom: 4px;
  border: 1px solid rgba(13,35,55,.10); border-radius: 16px; background: rgba(255,255,255,.6);
}
html body .szp-profile-avatar-controls { display: grid; gap: 6px; flex: 1 1 200px; min-width: 0; }
html body .szp-profile-avatar-controls label { cursor: pointer; justify-self: start; }
html body .szp-profile-avatar-controls small { font-size: .78rem; color: var(--szp-v17-muted, #647286); }
html body .szp-profile-fieldset { display: grid; gap: 12px; }
html body .szp-profile-fieldset[hidden] { display: none !important; }

/* ---------------------------------------------------------------------------
   10. The map, styled cleanly.

   A note on Leaflet, because the owner asked for it by name: the requirement
   behind the request — a free OpenStreetMap map with no API key — is already
   met, and has been since 2.55. `szp-map.js` draws OSM raster tiles directly:
   no library, no key, no account, ~7KB, and it degrades to "pin unset" if the
   tiles never arrive. Adding Leaflet would put a third-party script in the
   critical path of the address form to gain nothing this does not already do.
   The two things Leaflet gives that were genuinely missing are its default
   attribution — an OSM licence requirement this was breaching, now drawn — and
   a map that looks finished, which is the rest of this block.
--------------------------------------------------------------------------- */
html body .szp-map {
  position: relative; overflow: hidden;
  border-radius: 18px; border: 1px solid rgba(13,35,55,.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 10px 28px rgba(13,35,55,.12);
  background: #e8eef2;
  touch-action: none; /* the component handles pan and pinch itself */
}
html body .szp-map-canvas { filter: saturate(.92) contrast(1.02); }
/* A pin with a point, and a shadow so it reads against a busy tile. */
html body .szp-map-pin {
  position: absolute; inset-inline-start: 50%; top: 50%;
  width: 26px; height: 26px; margin-inline-start: -13px; margin-top: -26px;
  pointer-events: none; z-index: 4;
  background: var(--szp-v17-orange, #e47a2c);
  border: 3px solid #fff; border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  box-shadow: 0 6px 14px rgba(13,35,55,.36);
}
html body .szp-map-pin::after {
  content: ""; position: absolute; inset-inline-start: 50%; top: 50%;
  width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: #fff;
}
html body .szp-map-zoom {
  position: absolute; inset-inline-end: 10px; top: 10px; z-index: 5;
  display: grid; gap: 1px; border-radius: 12px; overflow: hidden;
  box-shadow: 0 6px 18px rgba(13,35,55,.24);
}
html body .szp-map-zoom button {
  width: 38px; height: 38px; border: 0; cursor: pointer;
  background: rgba(255,255,255,.94) !important; color: #0b1d31 !important;
  -webkit-text-fill-color: #0b1d31 !important;
  font-size: 1.25rem; font-weight: 800; line-height: 1;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
html body .szp-map-zoom button:hover { background: #fff !important; }
html body .szp-map-locate {
  position: absolute; inset-inline-end: 10px; bottom: 34px; z-index: 5;
  min-height: 38px; padding: 8px 14px; border-radius: 999px; cursor: pointer;
  background: rgba(255,255,255,.94) !important; color: #0b1d31 !important;
  -webkit-text-fill-color: #0b1d31 !important;
  border: 1px solid rgba(13,35,55,.12) !important;
  font-size: .8rem; font-weight: 700;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 6px 18px rgba(13,35,55,.2) !important;
}
html body .szp-map-credit {
  position: absolute; inset-inline-start: 0; bottom: 0; z-index: 5;
  padding: 3px 9px; border-start-end-radius: 8px;
  background: rgba(255,255,255,.82); color: #41505f !important;
  font-size: .68rem; text-decoration: none; line-height: 1.6;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
html body .szp-map-credit:hover { text-decoration: underline; }
html body .szp-map-hint {
  position: absolute; inset-inline: 10px; bottom: 26px; z-index: 3;
  margin: 0; text-align: center; pointer-events: none;
  font-size: .76rem; color: #0b1d31;
  text-shadow: 0 1px 0 rgba(255,255,255,.85), 0 0 8px rgba(255,255,255,.9);
}

/* ---------------------------------------------------------------------------
   11. The legal documents.

   A long document that nobody can navigate is a document nobody reads, and the
   tick-box beside it is then meaningless. A contents rail that sticks, numbered
   clauses that can be linked to one at a time, and a measure that stays inside
   the range prose is actually legible at.
--------------------------------------------------------------------------- */
html body .szp-legal { background: var(--szp-v17-bg, #f7f8f7); }
html body .szp-legal-hero {
  padding-block: clamp(34px, 6vw, 66px);
  background:
    radial-gradient(46rem 26rem at 88% -20%, rgba(228,122,44,.20), transparent 62%),
    radial-gradient(40rem 24rem at 2% 110%, rgba(56,132,255,.16), transparent 60%),
    linear-gradient(180deg, #0d1b2a 0%, #12233a 100%);
  color: #fff;
}
html body .szp-legal-hero h1 { font-size: clamp(1.6rem, 4vw, 2.6rem); font-weight: 900; color: #fff; margin-top: 8px; }
html body .szp-legal-hero .szp-eyebrow { color: #f4a25f !important; font-weight: 700; letter-spacing: .04em; }
html body .szp-legal-lede { max-width: 62ch; margin-top: 12px; line-height: 2; font-size: .96rem; color: rgba(255,255,255,.82); }
html body .szp-legal-updated { margin-top: 14px; font-size: .84rem; color: rgba(255,255,255,.7); }
html body .szp-legal-updated b { color: #fff; }

html body .szp-legal-body {
  display: grid; gap: clamp(18px, 3vw, 34px);
  padding-block: clamp(26px, 4vw, 52px);
  grid-template-columns: 1fr;
}
@media (min-width: 960px) {
  html body .szp-legal-body { grid-template-columns: 260px minmax(0, 1fr); align-items: start; }
  html body .szp-legal-notice { grid-column: 1 / -1; }
  html body .szp-legal-toc { position: sticky; top: 24px; }
}

html body .szp-legal-notice {
  display: grid; gap: 4px;
  padding: 14px 16px; border-radius: 14px;
  border: 1px solid rgba(212,140,32,.4);
  background: linear-gradient(180deg, rgba(255,247,232,.95), rgba(255,255,255,.8));
  font-size: .87rem; line-height: 1.9; color: #6a4a12;
}
html body .szp-legal-notice b { color: #8a5a10; }

html body .szp-legal-toc {
  padding: 16px; border-radius: 18px;
  background: rgba(255,255,255,.72);
  -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%);
  border: 1px solid rgba(13,35,55,.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 10px 26px rgba(13,35,55,.08);
  max-height: calc(100dvh - 48px); overflow: auto;
}
html body .szp-legal-toc-title {
  display: block; font-size: .78rem; font-weight: 800; letter-spacing: .06em;
  color: var(--szp-v17-muted, #647286); margin-bottom: 10px;
}
html body .szp-legal-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
html body .szp-legal-toc a {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 10px; border-radius: 10px; text-decoration: none;
  font-size: .85rem; line-height: 1.6; color: var(--szp-v17-ink, #172334);
}
html body .szp-legal-toc a:hover { background: rgba(228,122,44,.10); color: var(--szp-accent-ink, #a85c20); }
html body .szp-legal-toc-num {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center;
  background: rgba(13,35,55,.07); font-size: .72rem; font-weight: 800; color: var(--szp-v17-muted, #647286);
}

html body .szp-legal-doc {
  display: grid; gap: clamp(18px, 2.6vw, 28px);
  padding: clamp(18px, 3vw, 34px);
  border-radius: 20px; background: #fff;
  border: 1px solid rgba(13,35,55,.09);
  box-shadow: 0 14px 36px rgba(13,35,55,.07);
}
html body .szp-legal-section { scroll-margin-top: 90px; }
html body .szp-legal-section h2 {
  display: flex; align-items: center; gap: 10px;
  font-size: clamp(1.05rem, 2.2vw, 1.3rem); font-weight: 800;
  color: var(--szp-v17-navy, #0b1d31); margin-bottom: 12px;
  padding-bottom: 10px; border-bottom: 1px solid rgba(13,35,55,.08);
}
html body .szp-legal-num {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center;
  background: linear-gradient(180deg, #ef8c3f, #e07521); color: #fff;
  font-size: .84rem; font-weight: 900;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3);
}
html body .szp-legal-clauses { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
html body .szp-legal-clauses li {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: start;
  scroll-margin-top: 90px;
}
html body .szp-legal-clause-no {
  font-size: .74rem; font-weight: 800; color: var(--szp-v17-muted, #647286);
  padding-top: 4px; direction: ltr; unicode-bidi: isolate; min-width: 32px;
}
html body .szp-legal-clause-text { font-size: .92rem; line-height: 2.05; color: var(--szp-v17-ink, #172334); }
html body .szp-legal-clause-text b, html body .szp-legal-clause-text strong { color: var(--szp-v17-navy, #0b1d31); }
html body .szp-legal-clause-text a { color: var(--szp-accent-ink, #a85c20); }
html body .szp-legal-crosslink {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  margin-top: 6px; padding-top: 18px; border-top: 1px solid rgba(13,35,55,.09);
  font-size: .9rem; color: var(--szp-v17-muted, #647286);
}

/* ---------------------------------------------------------------------------
   12. The provider profile's tabs.
--------------------------------------------------------------------------- */
html body .szp-profile-tabs {
  position: sticky; top: 0; z-index: 20;
  display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none;
  margin: 0 0 18px; padding: 8px;
  border-radius: 16px;
  background: rgba(255,255,255,.78);
  -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(13,35,55,.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 8px 22px rgba(13,35,55,.10);
  scroll-behavior: smooth;
}
html body .szp-profile-tabs::-webkit-scrollbar { display: none; }
html body .szp-profile-tab {
  flex: 1 0 auto; min-height: 44px; padding: 10px 18px; white-space: nowrap;
  border: 0; border-radius: 11px; cursor: pointer;
  background: transparent !important; background-image: none !important;
  color: var(--szp-v17-muted, #647286) !important;
  -webkit-text-fill-color: var(--szp-v17-muted, #647286) !important;
  font-size: .88rem; font-weight: 700; box-shadow: none !important;
}
html body .szp-profile-tab b {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px;
  margin-inline-start: 5px; border-radius: 999px;
  background: rgba(13,35,55,.09); font-size: .7rem; font-weight: 800;
}
html body .szp-profile-tab.is-current {
  background: linear-gradient(180deg, #ef8c3f, #e07521) !important;
  color: #fff !important; -webkit-text-fill-color: #fff !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 6px 16px rgba(224,117,33,.3) !important;
}
html body .szp-profile-tab.is-current b { background: rgba(255,255,255,.28); color: #fff; }
/* A closed tab's sections stay in the DOM so in-page links still resolve. */
html body .szp-profile-main-v17 .szp-profile-section-v17.szp-tab-off { display: none !important; }
@media (max-width: 640px) {
  html body .szp-profile-tab { flex: 0 0 auto; padding: 10px 15px; font-size: .84rem; }
}

/* ---------------------------------------------------------------------------
   13. Making a price alert from the dashboard.
--------------------------------------------------------------------------- */
html body .szp-alert-form { display: grid; gap: 12px; margin-bottom: 16px; }
html body .szp-alert-form[hidden] { display: none !important; }
html body .szp-alert-form label { display: grid; gap: 5px; font-size: .84rem; font-weight: 700; color: var(--szp-v17-ink, #172334); position: relative; }
html body .szp-alert-form input[type="search"],
html body .szp-alert-form input[type="text"] {
  background: #fff !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: 12px !important;
  min-height: 46px; padding: 10px 13px; font-size: .92rem; width: 100%;
}
html body .szp-alert-results {
  position: absolute; inset-inline: 0; top: calc(100% + 4px); z-index: 40;
  display: grid; max-height: 260px; overflow: auto;
  border-radius: 13px; background: #fff;
  border: 1px solid rgba(13,35,55,.14);
  box-shadow: 0 16px 38px rgba(13,35,55,.18);
}
html body .szp-alert-results[hidden] { display: none !important; }
html body .szp-alert-results button {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 11px 13px; border: 0; border-bottom: 1px solid rgba(13,35,55,.06);
  background: #fff !important; color: var(--szp-v17-ink, #172334) !important;
  -webkit-text-fill-color: var(--szp-v17-ink, #172334) !important;
  font-size: .86rem; font-weight: 600; text-align: start; cursor: pointer;
}
html body .szp-alert-results button:last-child { border-bottom: 0; }
html body .szp-alert-results button:hover { background: rgba(228,122,44,.08) !important; }
html body .szp-alert-results button span { font-size: .78rem; color: var(--szp-v17-muted, #647286); font-weight: 700; direction: ltr; }
html body .szp-alert-result-empty { margin: 0; padding: 12px 13px; font-size: .84rem; color: var(--szp-v17-muted, #647286); }
html body .szp-alert-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }

/* ===========================================================================
   2.78.0 — Batch 5b: the core journey.
=========================================================================== */

/* ---------------------------------------------------------------------------
   14. The one sign-in card.

   Appended to <body>, so it carries `.szp .szp-v17` itself and every control
   inside it is repainted explicitly — the theme's Elementor kit reaches
   anything outside our scope and paints inputs solid orange with white text,
   which is exactly what the old popup looked like in the screenshots.
--------------------------------------------------------------------------- */
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;
  background: rgba(255,255,255,.93) !important;
  -webkit-backdrop-filter: blur(26px) saturate(165%); backdrop-filter: blur(26px) saturate(165%);
  border: 1px solid rgba(255,255,255,.92) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.96), 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; }

/* Two doors, named, on one segmented control — the pattern the reference uses. */
html body .szp-auth-tabs {
  display: flex; gap: 4px; padding: 4px; margin-bottom: 14px;
  border-radius: 999px; background: rgba(13,35,55,.07);
}
html body .szp-auth-tab {
  flex: 1 1 0; min-height: 42px; border: 0 !important; border-radius: 999px;
  background: transparent !important; background-image: none !important;
  box-shadow: none !important; cursor: pointer;
  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;
}
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; }

/* ---------------------------------------------------------------------------
   15. Consent checkboxes.

   Measured on the screenshot: the box floated on its own line and the label
   wrapped underneath it, so the tick and the sentence it applies to were not
   visibly connected, and the links inside the sentence broke onto lines of
   their own. A two-column grid pins the box to the first line of the text and
   the text stays one flowing paragraph.
--------------------------------------------------------------------------- */
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;
}
/* The label text is one paragraph; links inside it must not become blocks. */
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);
}

/* ---------------------------------------------------------------------------
   16. Glass on the multi-step request flow.

   The dialog was the one major surface still on flat white — and flat white is
   also why a blur on it would have done nothing. Ground first, then glass.
--------------------------------------------------------------------------- */
/* The dialog is `.szp-dialog`; `.szp-modal` is the full-screen layer around it. */
html body .szp-modal .szp-dialog {
  background: rgba(255,255,255,.9) !important;
  -webkit-backdrop-filter: blur(26px) saturate(165%); backdrop-filter: blur(26px) saturate(165%);
  border: 1px solid rgba(255,255,255,.9) !important;
  border-radius: 22px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 30px 70px rgba(13,35,55,.3) !important;
}
/* Something for the blur to work on: the backdrop was a flat wash, and a
   backdrop-filter over a flat colour produces nothing at all. */
html body .szp-modal .szp-modal-backdrop {
  background:
    radial-gradient(40rem 22rem at 85% -10%, rgba(228,122,44,.26), transparent 62%),
    radial-gradient(36rem 20rem at 5% 105%, rgba(56,132,255,.22), transparent 60%),
    rgba(11,29,49,.55) !important;
}
html body .szp-modal .szp-dialog-head,
html body .szp-modal .szp-dialog-actions {
  background: rgba(255,255,255,.55) !important;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-color: rgba(13,35,55,.09) !important;
}
html body .szp-modal .szp-step-intro {
  padding: 14px 15px; margin-bottom: 12px; border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.85), rgba(243,247,250,.7));
  border: 1px solid rgba(13,35,55,.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}
html body .szp-modal .szp-dialog-body label > span,
html body .szp-modal .szp-flow-field > span {
  font-size: .82rem; font-weight: 700; color: var(--szp-v17-ink, #172334);
}
html body .szp-modal .szp-dialog-body input:not([type="checkbox"]):not([type="radio"]),
html body .szp-modal .szp-dialog-body textarea,
html body .szp-modal .szp-dialog-body select {
  background: rgba(255,255,255,.92) !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,.16) !important; border-radius: 13px !important;
  min-height: 48px; padding: 10px 13px; box-shadow: none !important;
}
html body .szp-modal .szp-dialog-body textarea { min-height: 96px; line-height: 1.9; }
html body .szp-modal .szp-review-card {
  border-radius: 16px; border: 1px solid rgba(13,35,55,.09);
  background: rgba(255,255,255,.72);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}

/* The map inside that flow. */
html body .szp-flow-map-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 10px; padding: 11px 13px; border-radius: 14px;
  border: 1px dashed rgba(228,122,44,.42);
  background: linear-gradient(180deg, rgba(255,246,238,.9), rgba(255,255,255,.65));
}
html body .szp-flow-map-row small { font-size: .78rem; color: var(--szp-v17-muted, #647286); flex: 1 1 180px; }
html body .szp-flow-map { height: 260px; margin-bottom: 10px; }
html body .szp-flow-map[hidden] { display: none !important; }
html body .szp-flow-map-actions { display: flex; gap: 8px; margin-bottom: 12px; }
html body .szp-flow-map-actions[hidden] { display: none !important; }

/* ---------------------------------------------------------------------------
   17. The theme's chrome, off the platform.
--------------------------------------------------------------------------- */

/* The delivery-address pill is withdrawn in script (szp-address-bar.js); this
   is the belt to that braces, so a cached copy of the old bundle cannot put it
   back on a sticky header that then rides down the page over the content. */
html body .szp-addressbar,
html body [data-szp-addressbar],
html body .szp-address-slot { display: none !important; }

/*
 * The theme's fixed bottom bar — hidden inside our panels, kept everywhere else.
 *
 * This rule used to hide `.nav-bottom` site-wide. That was a deliberate earlier
 * decision ("the owner asked for it gone everywhere") and it has now been
 * reversed: the bar is the site's mobile navigation on the storefront, the shop,
 * the marketplace and provider profiles, and only the two private dashboards
 * have a navigation of their own to replace it. So the blanket selector is
 * scoped to our own shell, which is the case the original note describes as the
 * starting point — the bar sitting on top of the last row of provider cards is
 * a dashboard-layout problem, not a reason to remove the site's navigation.
 *
 * The other three selectors stay global: they are duplicate bars the theme
 * prints for layouts we replace, and none of them is the bar in question.
 */
body.szp-own-shell .nav-bottom,
html.szp-shell-boot .nav-bottom,
html body .dashboard-kaveh-menu-mobile,
html body .mobile-bottom-nav,
html body .bottom-navigation { display: none !important; }
/* The foot padding the theme reserves for the bar is only wrong where the bar
   is gone; where it renders, the last row of content needs that space. */
body.szp-own-shell, html.szp-shell-boot body { padding-bottom: 0 !important; }
/* Our own dashboard bar is not the theme's and must survive the rule above. */
body.szp-own-shell .szp-shell-foot { display: flex !important; }

/* ---------------------------------------------------------------------------
   18. Ticket priority, as a badge per level.
--------------------------------------------------------------------------- */
html body .szp-ticket-priority {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 999px;
  font-size: .74rem; font-weight: 800; line-height: 1.7; white-space: nowrap;
  border: 1px solid transparent;
}
html body .szp-ticket-priority::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor;
}
html body .szp-ticket-priority.is-high,
html body .szp-ticket-priority.is-urgent {
  background: #fdeceb; color: #b4342a; border-color: rgba(180,52,42,.28);
}
html body .szp-ticket-priority.is-normal {
  background: rgba(13,35,55,.06); color: #55636f; border-color: rgba(13,35,55,.12);
}
html body .szp-ticket-priority.is-low {
  background: rgba(13,35,55,.03); color: #8a95a0; border-color: rgba(13,35,55,.08);
}

/* ---------------------------------------------------------------------------
   19. The completion prompt, as a strip instead of a wall.
--------------------------------------------------------------------------- */
html body .szp-profile-prompt { display: none !important; } /* the old overlay */
html body .szp-profile-nudge {
  display: grid; gap: 10px; margin: 0 0 16px;
  padding: 14px clamp(14px, 2vw, 18px); border-radius: 16px;
  border: 1px solid rgba(228,122,44,.34);
  background: linear-gradient(180deg, rgba(255,247,238,.96), rgba(255,255,255,.86));
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 8px 22px rgba(13,35,55,.08);
}
html body .szp-profile-nudge-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
html body .szp-profile-nudge-head b { font-size: .95rem; color: #8a5a10; }
html body .szp-profile-nudge-close {
  width: 30px; height: 30px; border: 0 !important; border-radius: 50%; cursor: pointer;
  background: rgba(13,35,55,.06) !important; color: #55636f !important;
  -webkit-text-fill-color: #55636f !important; font-size: 1.05rem; line-height: 1; box-shadow: none !important;
}
html body .szp-profile-nudge p { margin: 0; font-size: .85rem; line-height: 1.9; color: #6a5330; }
html body .szp-profile-nudge-form { display: grid; gap: 9px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); align-items: end; }
html body .szp-profile-nudge-form label { display: grid; gap: 4px; font-size: .8rem; font-weight: 700; color: var(--szp-v17-ink, #172334); }
html body .szp-profile-nudge-form input {
  background: #fff !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: 11px !important;
  min-height: 44px; padding: 9px 12px; font: inherit; font-size: .9rem;
}
/* The quiet, permanent version: a dot on the profile link. */
html body .szp-shell-dot {
  display: inline-block; width: 7px; height: 7px; margin-inline-start: 6px;
  border-radius: 50%; background: #e47a2c; vertical-align: middle;
  box-shadow: 0 0 0 3px rgba(228,122,44,.22);
}

/* The pending-application page reuses the finished-form screen. */
html body .szp-pending-page { padding-block: clamp(28px, 5vw, 60px); background: var(--szp-v17-bg, #f7f8f7); }
html body .szp-pending-note {
  width: min(560px, 100%); padding: 12px 14px; border-radius: 14px; text-align: start;
  border: 1px solid rgba(13,35,55,.10); background: rgba(255,255,255,.75);
}
html body .szp-pending-note b { font-size: .84rem; color: var(--szp-v17-navy, #0b1d31); }
html body .szp-pending-note p { margin: 4px 0 0; font-size: .86rem; line-height: 1.9; color: var(--szp-v17-muted, #647286); }

/* ===========================================================================
   2.79.0 — Batch 5c: the master list.

   Three of the entries below are regressions this stylesheet itself caused in
   5b. They are named as such, because a fix that does not say what it broke
   gets re-broken by the next pass.
=========================================================================== */

/*
 * 1. «All rights reserved 2024 ©», for real this time.
 *
 * The 5b rule aimed at `footer`, `.site-footer`, `.copyright` and friends, and
 * missed — because this theme does not put its copyright in a footer at all.
 * Read off the live DOM, it lives in the SIDEBAR, on
 * `.dashboard-kaveh-sidebar-content-copyright`, printed twice (a `d-none
 * d-xl-block` copy and a `d-xl-none` copy). That is why it survived a rule that
 * looked like it should have caught it. Guessing a selector is what cost the
 * last two rounds; this one was measured.
 */
html body .dashboard-kaveh-sidebar-content-copyright,
html body [class*="sidebar-content-copyright"] { display: none !important; }

/*
 * 2. The shell's bottom bar — undoing a regression from 5b.
 *
 * `.szp-shell-foot` is laid out as a grid, and on a phone it becomes
 * `grid-template-columns: 1fr 1fr`. 5b added `display: flex !important` twice
 * (to survive a footer-hiding rule that, per the note above, was not even
 * matching anything) and flex silently discards every grid property — which is
 * the whole of "the logout buttons look terrible now". Grid, and only once.
 */
body.szp-own-shell .szp-shell-foot,
html body .szp-shell-foot { display: grid !important; }
html body .szp-shell-foot .szp-shell-home,
html body .szp-shell-foot .szp-shell-exit {
  display: flex !important; align-items: center; justify-content: center;
  min-height: 46px; padding: 11px 16px; border-radius: 13px;
  font-size: .86rem; font-weight: 800; letter-spacing: 0; white-space: nowrap;
  -webkit-backdrop-filter: blur(12px) saturate(140%); backdrop-filter: blur(12px) saturate(140%);
  transition: transform .12s ease, background .16s ease, box-shadow .16s ease;
}
html body .szp-shell-foot .szp-shell-home {
  color: #fff !important; -webkit-text-fill-color: #fff !important;
  background: rgba(255,255,255,.14) !important;
  border: 1px solid rgba(255,255,255,.26) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 6px 16px rgba(0,0,0,.28) !important;
}
html body .szp-shell-foot .szp-shell-home:hover { background: rgba(255,255,255,.22) !important; }
html body .szp-shell-foot .szp-shell-exit {
  color: #ffc4bf !important; -webkit-text-fill-color: #ffc4bf !important;
  background: rgba(214,64,52,.22) !important;
  border: 1px solid rgba(255,120,110,.36) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 6px 16px rgba(0,0,0,.28) !important;
}
html body .szp-shell-foot .szp-shell-exit:hover { background: rgba(214,64,52,.34) !important; color: #fff !important; -webkit-text-fill-color: #fff !important; }
html body .szp-shell-foot .szp-shell-home:active,
html body .szp-shell-foot .szp-shell-exit:active { transform: translateY(1px); }

/*
 * 3. The duplicate chip row is gone from the markup (see open_section). These
 * rules cover a page cached from before that change.
 */
body.szp-own-shell .szp-dash-nav { display: none !important; }

/*
 * 4. Consent checkboxes — undoing the second 5b regression.
 *
 * 5b made these a two-column grid, and a grid item establishes a block
 * formatting context: the `<a>` elements inside the sentence stopped being
 * inline runs and each took its own line, which is the wrapping in the
 * screenshot. Flex with the box as a fixed-width item and the text as one
 * growing item keeps the sentence a sentence.
 */
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;
}
/* One growing run of text. `display:inline` on the links is the actual fix. */
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);
}

/*
 * 5. The invisible «ذخیره» — the third 5b regression.
 *
 * The completion strip inherits `.szp-dash-btn`, whose text is white; on the
 * strip's pale ground that is white on near-white. The primary button paints
 * itself explicitly rather than inheriting a colour that depends on where it
 * happens to be rendered.
 */
html body .szp-profile-nudge .szp-dash-btn,
html body .szp-profile-nudge button[type="submit"] {
  background: linear-gradient(180deg, #ef8c3f, #e07521) !important;
  color: #fff !important; -webkit-text-fill-color: #fff !important;
  border: 1px solid rgba(168,92,32,.55) !important; border-radius: 12px !important;
  min-height: 46px; padding: 11px 22px; font-weight: 800; font-size: .9rem;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 6px 16px rgba(224,117,33,.3) !important;
  cursor: pointer;
}
html body .szp-profile-nudge .szp-dash-btn:hover { filter: brightness(1.05); }

/*
 * 6. The mandatory password screen.
 */
html body .szp-password-gate {
  display: grid; gap: 10px; margin: 0 0 18px;
  padding: clamp(16px, 2.4vw, 22px); border-radius: 18px;
  border: 1.5px solid rgba(228,122,44,.5);
  background: linear-gradient(180deg, rgba(255,247,238,.96), rgba(255,255,255,.88));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 10px 26px rgba(13,35,55,.1);
}
html body .szp-password-gate h3 { margin: 0; font-size: 1.02rem; font-weight: 800; color: #8a5a10; }
html body .szp-password-gate p { margin: 0; font-size: .86rem; line-height: 1.95; color: #6a5330; }
html body .szp-password-gate form { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); align-items: end; }
html body .szp-password-gate label { display: grid; gap: 4px; font-size: .8rem; font-weight: 700; color: var(--szp-v17-ink, #172334); }
html body .szp-password-gate input {
  background: #fff !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: 11px !important;
  min-height: 46px; padding: 10px 13px; font: inherit; font-size: .92rem;
}
html body .szp-password-gate button[type="submit"] {
  background: linear-gradient(180deg, #ef8c3f, #e07521) !important;
  color: #fff !important; -webkit-text-fill-color: #fff !important;
  border: 0 !important; border-radius: 12px !important;
  min-height: 46px; font-weight: 800; cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 6px 16px rgba(224,117,33,.3) !important;
}

/*
 * 7. Liquid glass on the provider cards.
 *
 * They carry the lens ring already (the 5a `::before`), but sat on flat #fff,
 * and a backdrop-filter over flat white has nothing to blur. The section gets a
 * ground; the cards become glass over it.
 */
html body .szp-provider-section {
  background:
    radial-gradient(52rem 30rem at 92% -12%, rgba(228,122,44,.13), transparent 62%),
    radial-gradient(46rem 26rem at 2% 106%, rgba(56,132,255,.12), transparent 60%),
    linear-gradient(180deg, #f7f9fb 0%, #eef2f6 100%) !important;
}
html body .szp-people-v17 > .szp-provider-card-v17,
html body .szp-related-grid > .szp-provider-card-v17 {
  background: rgba(255,255,255,.72) !important;
  -webkit-backdrop-filter: blur(20px) saturate(155%); backdrop-filter: blur(20px) saturate(155%);
  border: 1px solid rgba(255,255,255,.86) !important;
  border-radius: 20px !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -1px 0 rgba(13,35,55,.05),
    0 12px 30px rgba(13,35,55,.09) !important;
  transition: transform .16s ease, box-shadow .2s ease;
}
html body .szp-people-v17 > .szp-provider-card-v17:hover {
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 18px 40px rgba(13,35,55,.14) !important;
}
html body .szp-provider-card-v17 .szp-provider-card-trust > * {
  background: rgba(255,255,255,.62) !important;
  border: 1px solid rgba(13,35,55,.08) !important; border-radius: 12px !important;
}

@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;
  }
}

/* ===========================================================================
   2.80.0 — Batch 5d: the dashboard, item by item, from the owner's screenshots.
=========================================================================== */

/*
 * 1. The active rail pill bled outside its own box.
 *
 * `.szp-shell-link.is-current` carried a glow built from a large blurred
 * box-shadow, and the rail is a horizontal scroller with no padding to hold
 * that glow — so the orange spilled past the pill and over the tile beside it.
 * The state is now carried by the fill and a tight ring, which stays inside.
 */
html body .szp-shell-link.is-current,
html body .szp-shell-link[aria-current="page"] {
  background: linear-gradient(180deg, #ef8c3f, #e07521) !important;
  color: #fff !important; -webkit-text-fill-color: #fff !important;
  border: 1px solid rgba(255,255,255,.30) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.34) !important;
}
html body .szp-shell-scroll { padding: 2px; }

/*
 * 2. The hints above each box were set in a grey that only works on white, and
 * the dashboard ground is deep navy — so on the one surface they appear on,
 * they were invisible. Reported as «اصلا دیده نمیشه».
 */
body.szp-own-shell .szp-dash-note,
body.szp-own-shell .szp-field-hint,
body.szp-own-shell .szp-dash-empty p,
body.szp-own-shell .szp-form-hint {
  color: #55636f !important; -webkit-text-fill-color: #55636f !important;
  font-size: .88rem; line-height: 1.95;
}
/* On the dark panels the same text needs the opposite treatment. */
body.szp-own-shell .szp-shell-nav .szp-dash-note,
body.szp-own-shell .szp-shell-group-title {
  color: rgba(255,255,255,.72) !important; -webkit-text-fill-color: rgba(255,255,255,.72) !important;
}

/*
 * 3. A placeholder that reads as a filled-in value.
 *
 * `name@example.com` was rendering at full body colour, so the email box looked
 * answered when it was empty — and somebody scanning the strip would skip it.
 * A placeholder is a hint, not content.
 */
html body .szp-profile-nudge input::placeholder,
html body .szp-password-gate input::placeholder,
html body .szp-dash-form input::placeholder,
html body .szp-dash-form textarea::placeholder,
html body .szp-ticket-form input::placeholder,
html body .szp-ticket-form textarea::placeholder {
  color: #9aa5b0 !important; -webkit-text-fill-color: #9aa5b0 !important;
  opacity: 1; font-weight: 400;
}

/*
 * 4. Three doors at the foot, not two.
 */
html body .szp-shell-foot-3 { grid-template-columns: repeat(3, 1fr) !important; gap: 7px; }
@media (max-width: 380px) {
  html body .szp-shell-foot-3 .szp-shell-home,
  html body .szp-shell-foot-3 .szp-shell-exit { font-size: .78rem; padding-inline: 8px; }
}

/*
 * 5. The logo, undistorted.
 *
 * The brand image was being stretched to the width and height attributes on the
 * tag regardless of the file's own proportions, which is the squashed logo in
 * the screenshot. Constrain the box and let the image keep its ratio.
 */
html body .szp-shell-brand { display: flex; align-items: center; min-height: 40px; }
html body .szp-shell-brand img {
  width: auto !important; height: auto !important;
  max-width: 132px; max-height: 38px;
  object-fit: contain; display: block;
}

/*
 * 6. The identity block under the logo.
 *
 * Name and username ran together on one line and overflowed the rail, which is
 * the «نوشته جلو اسم» in the screenshot. The username is secondary information
 * and belongs under the name, at a smaller size, clipped rather than pushing.
 */
html body .szp-shell-me { display: flex; align-items: center; gap: 10px; min-width: 0; }
html body .szp-shell-me-text { min-width: 0; display: flex; flex-direction: column; }
html body .szp-shell-me-text b {
  font-size: .92rem; font-weight: 800; line-height: 1.5;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
html body .szp-shell-me-text small {
  font-size: .74rem; opacity: .72; line-height: 1.6;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
html body .szp-shell-login {
  display: block; font-family: ui-monospace, "IBM Plex Mono", monospace;
  font-size: .68rem; opacity: .55; direction: ltr; text-align: start;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/*
 * 7. The account-details list. It was a bare <dl> with no rhythm — label and
 * value on separate lines at the same weight, nothing separating one row from
 * the next. Reported simply as «اینقدر زشته».
 */
html body .szp-profile-view {
  display: grid; gap: 0; margin: 0 0 18px;
  border: 1px solid rgba(13,35,55,.10); border-radius: 14px; overflow: hidden;
  background: rgba(255,255,255,.6);
}
html body .szp-profile-view > div {
  display: grid; grid-template-columns: minmax(9rem, 14rem) 1fr; gap: 1rem;
  padding: .8rem 1.1rem; align-items: baseline;
  border-bottom: 1px solid rgba(13,35,55,.07);
}
html body .szp-profile-view > div:last-child { border-bottom: 0; }
html body .szp-profile-view > div:nth-child(odd) { background: rgba(13,35,55,.025); }
html body .szp-profile-view dt {
  margin: 0; font-size: .82rem; font-weight: 700;
  color: var(--szp-v17-muted, #647286);
}
html body .szp-profile-view dd {
  margin: 0; font-size: .92rem; font-weight: 600;
  color: var(--szp-v17-ink, #172334); word-break: break-word;
}
html body .szp-profile-view .szp-profile-blank {
  font-weight: 500; font-size: .85rem; color: #9aa5b0;
}
@media (max-width: 560px) {
  html body .szp-profile-view > div { grid-template-columns: 1fr; gap: .2rem; }
}

/* ===========================================================================
   2.81.0 — Batch 5e: two doors, and the workspace as real screens.
=========================================================================== */

/*
 * 1. The provider workspace was invisible — the regression the owner reported as
 *    «بالای پنل مجری اصلا مشخص نیست چی به چی هست».
 *
 * Measured on the live page: the shell nav computed to a transparent
 * background, because its dark glass is a faint white gradient meant to sit on
 * the deep navy ground — and the provider template wraps everything in
 * `main.szp-v17`, which paints itself #f7f8f7. So the nav was white-on-white
 * while the customer dashboard, whose shell is not inside that wrapper, was
 * fine. The ground has to reach the shell.
 */
body.szp-own-shell main.szp-v17.szp-provider-dashboard,
body.szp-own-shell main.szp-v17.szp-customer-dashboard {
  background: transparent !important;
}
/* The hero band inside it keeps its own dark plate; the cards keep theirs. */
body.szp-own-shell .szp-provider-dashboard .szp-account-hero {
  border-radius: 18px; overflow: hidden; margin-bottom: 18px;
}

/*
 * 2. The per-screen guide.
 */
html body .szp-pd-help {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 0 0 14px; padding: 12px 15px;
  border-radius: 14px; border: 1px solid rgba(228,122,44,.30);
  background: linear-gradient(180deg, rgba(255,247,238,.95), rgba(255,255,255,.85));
  font-size: .86rem; line-height: 1.95; color: #6a5330;
}
html body .szp-pd-help > span {
  flex: none; width: 22px; height: 22px; margin-top: 2px;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--szp-v17-orange, #e47a2c); color: #fff;
  font-size: .78rem; font-weight: 800;
}

/*
 * 3. The two doors — on the sign-in page and inside the card.
 */
html body .szp-login-doors {
  display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin: 18px 0 22px;
}
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;
}
/* On the sign-in page these sit on the page's own light ground. */
html body .szp-login-page .szp-auth-role { background: #fff !important; }

/* Which door you are behind, and the way back to the choice. */
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;
}

/* Numbers stay legible whichever script they were typed in. */
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; }

/* ===========================================================================
   2.82.0 — Batch 5f: the header, the review queue, the composer.
=========================================================================== */

/*
 * 1. The site header inside the dashboard.
 *
 * Read off the live page: `header.ag-theme-builder-header` paints no background
 * of its own and its links are #212341. On an ordinary page the ground behind
 * it is white, so that reads. On a dashboard screen the ground is our deep navy
 * gradient — dark text on a dark ground, which is the "اصلا مشخص نیست" in the
 * screenshot. It gets its own surface here rather than being hidden, because it
 * is still the way back into the shop.
 */
body.szp-own-shell header.ag-theme-builder-header,
body.szp-own-shell > header,
body.szp-own-shell .ag-theme-builder-header {
  background: #fff !important;
  box-shadow: 0 2px 18px rgba(6,14,24,.28);
  position: relative; z-index: 5;
}
body.szp-own-shell header.ag-theme-builder-header a,
body.szp-own-shell header.ag-theme-builder-header span,
body.szp-own-shell header.ag-theme-builder-header p,
body.szp-own-shell header.ag-theme-builder-header li {
  color: #212341 !important; -webkit-text-fill-color: #212341 !important;
}
/* The header's own orange call to action keeps its own colours. */
body.szp-own-shell header.ag-theme-builder-header .btn,
body.szp-own-shell header.ag-theme-builder-header [class*="btn-primary"],
body.szp-own-shell header.ag-theme-builder-header [class*="account"] {
  color: #fff !important; -webkit-text-fill-color: #fff !important;
}

/*
 * 2. "This is waiting for approval" — said on the provider's own screen.
 */
html body .szp-pd-pending {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 0 0 14px; padding: 13px 16px; border-radius: 14px;
  border: 1px solid rgba(56,132,255,.38);
  background: linear-gradient(180deg, rgba(238,245,255,.96), rgba(255,255,255,.88));
  font-size: .87rem; line-height: 1.95; color: #24425f;
}
html body .szp-pd-pending b { color: #143050; }
html body .szp-pd-pending > span:first-child {
  flex: none; width: 22px; height: 22px; margin-top: 2px;
  display: grid; place-items: center; border-radius: 50%;
  background: #2f6fd0; color: #fff; font-size: .75rem; font-weight: 800;
}

/*
 * 3. The emoji strip is a grid now, not a four-by-four square.
 */
/* `[hidden]` first, and with the same weight.

   The rule below sets `display:grid !important` on the picker, and the browser's own
   `[hidden]{display:none}` is a plain declaration — so it lost, and the emoji panel was
   open the moment the page loaded and could not be closed. Exactly the mistake the
   ticket form's conditional field made with `label{display:grid}`; written down in
   HANDOFF.md and repeated anyway. Any rule that forces `display` has to exempt
   `[hidden]` in the same breath. */
html body .szp-composer-picker[hidden] { display: none !important; }
html body .szp-composer-picker:not([hidden]) {
  display: grid !important;
  grid-template-columns: repeat(8, 1fr);
  gap: 2px; max-width: 320px;
  max-height: 190px; overflow-y: auto;
}
@media (max-width: 420px) {
  html body .szp-composer-picker { grid-template-columns: repeat(6, 1fr); max-width: 260px; }
}
html body .szp-composer-picker button {
  font-size: 1.15rem; line-height: 1; padding: 6px; border: 0 !important;
  background: transparent !important; border-radius: 8px; cursor: pointer;
}
html body .szp-composer-picker button:hover { background: rgba(13,35,55,.07) !important; }

/* ===========================================================================
   2.83.0 — Batch 5g: the theme header, out of the dashboard.
=========================================================================== */

/*
 * The site header is removed from dashboard screens rather than repainted.
 *
 * 5f gave it a white surface so its dark text would read on our navy ground.
 * That fixed the contrast and left the real problem: it is the *shop's* header
 * — a mega-menu of product categories, a product search, a cart bubble — inside
 * a workspace that has none of those things. It is also where every one of
 * these header bugs has come from, including the cart icon rendering as a bare
 * dot, because the theme styles it for its own light ground.
 *
 * My answer to "keep it, remove it, or make a special one": remove it, because
 * the shell already carries a brand, a full navigation and a bar with سازه‌بار,
 * خدمات and پروفایل من in it. Nothing the header offered is lost; there is
 * simply one navigation on the screen instead of two competing ones.
 */
body.szp-own-shell header.ag-theme-builder-header,
body.szp-own-shell > header,
body.szp-own-shell .ag-theme-builder-header,
body.szp-own-shell .nav-mobile-seven,
body.szp-own-shell .top-header-four-search { display: none !important; }

/* With the header gone the shell starts at the top of the page. */
body.szp-own-shell .szp-shell { padding-top: clamp(12px, 2vw, 20px); }

/* Four doors now, when the account has a public page to look at. */
html body .szp-shell-foot-4 { grid-template-columns: repeat(4, 1fr) !important; gap: 6px; }
@media (max-width: 520px) {
  html body .szp-shell-foot-4 { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 380px) {
  html body .szp-shell-foot-4 .szp-shell-home,
  html body .szp-shell-foot-4 .szp-shell-exit { font-size: .76rem; padding-inline: 6px; }
}

/* ===========================================================================
   2.84.0 — Batch 5h: identity, media review, voice.
=========================================================================== */

/* ---- the identity screen -------------------------------------------------
   Private paperwork. It looks different from the market page on purpose: the
   two were one form, and a national id sitting next to a price list is how
   people end up unsure which of the two a customer can see. */
html body .szp-private-note {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 14px; padding: 10px 14px; border-radius: 12px;
  background: rgba(13,35,55,.05); border: 1px solid rgba(13,35,55,.10);
  font-size: .84rem; font-weight: 600; color: #4a5763;
}
html body .szp-identity-form {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
html body .szp-identity-form label { display: grid; gap: 5px; align-content: start; }
html body .szp-identity-form label > span {
  font-size: .82rem; font-weight: 700; color: var(--szp-v17-ink, #172334);
}
html body .szp-identity-form input,
html body .szp-identity-form textarea,
html body .szp-identity-form select {
  background: #fff !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: 12px !important;
  min-height: 46px; padding: 10px 13px; font: inherit; font-size: .92rem;
}
html body .szp-identity-form textarea { min-height: 84px; line-height: 1.9; }
html body .szp-identity-form input:disabled {
  background: rgba(13,35,55,.05) !important; color: #6b7885 !important;
  -webkit-text-fill-color: #6b7885 !important;
}
/* A bank field looks like a bank field, so nobody types one into the other. */
/* The badge shares a line with the label rather than pushing off the end of it.
   On a narrow field it was wrapping down and landing on top of the input, which is
   where the owner found it sitting over a card number. A flex row cannot wrap onto
   the field below it. */
html body .szp-field-sensitive > span {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
}
html body .szp-field-sensitive > span::after {
  content: "خصوصی"; margin-inline-start: 0;
  font-size: .66rem; font-weight: 800; letter-spacing: .02em;
  padding: 1px 7px; border-radius: 999px; line-height: 1.7;
  background: rgba(13,35,55,.08); color: #5b6875;
  flex: 0 0 auto;
}
html body .szp-field-sensitive input { font-variant-numeric: tabular-nums; letter-spacing: .04em; }
html body .szp-identity-form .szp-form-actions { grid-column: 1 / -1; }
html body .szp-identity-form .szp-field-hint {
  font-size: .76rem; color: var(--szp-v17-muted, #647286); font-weight: 500;
}

/* ---- voice messages ------------------------------------------------------ */
html body .szp-composer-mic {
  position: relative;
  transition: background .16s ease, transform .12s ease;
}
html body .szp-composer-mic.is-recording {
  background: #d64034 !important; color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  animation: szp-rec 1.1s ease-in-out infinite;
}
@keyframes szp-rec {
  0%, 100% { box-shadow: 0 0 0 0 rgba(214,64,52,.55); }
  50%      { box-shadow: 0 0 0 7px rgba(214,64,52,0); }
}
@media (prefers-reduced-motion: reduce) {
  html body .szp-composer-mic.is-recording { animation: none; }
}
html body .szp-chat-audio {
  display: block; width: min(280px, 100%); height: 40px; margin-top: 6px;
}
html body .szp-chat-file-img img {
  display: block; max-width: min(240px, 100%); height: auto;
  border-radius: 12px; border: 1px solid rgba(13,35,55,.10);
}

/* ===========================================================================
   2.85.0 — Batch 5i: the save bar that was off-screen, and the part menu.
=========================================================================== */

/*
 * 1. The save button, measured: `position:fixed; bottom:16px` — and its actual
 *    rect was top 2798 / bottom 2870 on a 780px viewport. It was anchored to
 *    the card, not the window, because an ancestor carries `backdrop-filter`
 *    and a filtered element becomes the containing block for `position:fixed`
 *    descendants. That trap is written down in SESSION.md from the bottom-bar
 *    work; the same mistake, in a different place.
 *
 *    `sticky` does not care about containing blocks — it sticks within its own
 *    scroll flow — so it survives the filter that broke `fixed`.
 */
html body .szp-provider-dashboard .szp-form-actions {
  /* In flow, at the top of the form. See the note in provider-dashboard.php:
     both `fixed` and `sticky` were defeated by ancestors here. */
  position: static !important;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 16px; padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255,255,255,.96) !important;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(13,35,55,.12);
  box-shadow: 0 -2px 14px rgba(13,35,55,.10);
  z-index: 5;
}
/* Clear of the fixed bar of doors on a phone. */
html body .szp-provider-dashboard .szp-form-actions button[type="submit"] {
  min-height: 46px; padding: 11px 26px; font-weight: 800; border-radius: 12px;
}

/*
 * 2. The market form was a 598px column beside a 300px aside on a 1470px
 *    screen — the cramped card in the screenshot. On this screen the form is
 *    the whole job, so it gets the whole width.
 */
html body .szp-provider-dashboard .szp-dashboard-grid { grid-template-columns: 1fr !important; }
html body .szp-provider-dashboard .szp-dashboard-side { display: none !important; }
html body .szp-provider-dashboard .szp-dashboard-card { max-width: none; }

/*
 * 3. The part menu: one button per part of the market page.
 */
html body .szp-part-menu {
  display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px;
  padding: 6px; border-radius: 999px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.16);
}
html body .szp-part-link {
  flex: 1 1 auto; text-align: center; text-decoration: none;
  padding: 10px 18px; border-radius: 999px; white-space: nowrap;
  font-size: .88rem; font-weight: 700;
  color: rgba(255,255,255,.82) !important;
  -webkit-text-fill-color: rgba(255,255,255,.82) !important;
  border: 1px solid transparent; transition: background .16s ease;
}
html body .szp-part-link:hover { background: rgba(255,255,255,.10); }
html body .szp-part-link.is-current {
  background: linear-gradient(180deg, #ef8c3f, #e07521) !important;
  color: #fff !important; -webkit-text-fill-color: #fff !important;
  border-color: rgba(255,255,255,.30) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.34);
}
html body .szp-part-block[hidden] { display: none !important; }

/* 4. The recording line sat on top of the toolbar. */
html body .szp-composer-status,
html body .szp-composer-say {
  display: block; width: 100%; order: 99;
  margin-top: 6px; font-size: .8rem; line-height: 1.8;
  color: var(--szp-v17-muted, #647286);
}
html body .szp-composer-mic svg { display: block; }

/*
 * 2.85.1 — why the sticky save bar still was not sticking.
 *
 * Measured on the live page after 2.85.0: `.szp-form-actions` computed to
 * `position: sticky` and still sat at top 1148 on a 780px viewport. The cause
 * is one ancestor — `main.szp-v17` carries `overflow: clip`, and any ancestor
 * with an overflow other than `visible` becomes the sticky element's scroll
 * container, so it sticks to *that* box rather than the window and never
 * reaches the screen. `fixed` failed on this form for the backdrop-filter
 * reason; `sticky` then failed for the overflow reason. Both are the same
 * lesson: this form sits under two ancestors that quietly redefine
 * positioning, and the fix is to stop clipping on the one screen that needs
 * to scroll.
 *
 * Scoped to our own shell so the marketplace, which uses `overflow: clip` to
 * stop a wide provider rail bleeding sideways, is untouched.
 */
body.szp-own-shell main.szp-v17.szp-provider-dashboard,
body.szp-own-shell main.szp-v17.szp-customer-dashboard { overflow: visible !important; }

/* The slim title that replaces the hero on inner provider screens. */
html body .szp-pd-crumb { padding: 14px 0 4px; }
html body .szp-pd-crumb b {
  font-size: 1.1rem; font-weight: 900; letter-spacing: -.01em;
  color: #fff; -webkit-text-fill-color: #fff;
}

/* ===========================================================================
   2.86.0 — Batch 5j: the workspace filled in.
=========================================================================== */

/*
 * The sidebar group labels — «کار», «ارتباط», «پروفایل», «حساب من» — were
 * 10px, low-contrast and jammed against the links under them, so the grouping
 * they were meant to communicate read as noise. They are the only structure in
 * a ten-item list; they need to be legible and to own the space above a group.
 */
html body .szp-shell-group-title {
  display: block; margin: 18px 4px 8px;
  font-size: .74rem; font-weight: 800; letter-spacing: .08em;
  color: rgba(255,255,255,.55) !important;
  -webkit-text-fill-color: rgba(255,255,255,.55) !important;
  text-transform: none;
}
html body .szp-shell-group:first-child .szp-shell-group-title { margin-top: 4px; }
html body .szp-shell-group + .szp-shell-group { border-top: 1px solid rgba(255,255,255,.08); }
html body .szp-shell-links { display: grid; gap: 3px; margin: 0; padding: 0; list-style: none; }
html body .szp-shell-link {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 11px 14px; border-radius: 11px; text-decoration: none;
  font-size: .9rem; font-weight: 700; line-height: 1.6;
  color: rgba(255,255,255,.88) !important;
  -webkit-text-fill-color: rgba(255,255,255,.88) !important;
  transition: background .15s ease;
}
html body .szp-shell-link:hover { background: rgba(255,255,255,.09); }

/* The material-request screen. */
html body .szp-supply-form { display: grid; gap: 12px; }
html body .szp-supply-form label { display: grid; gap: 5px; }
html body .szp-supply-form label > span { font-size: .84rem; font-weight: 700; color: var(--szp-v17-ink, #172334); }
html body .szp-supply-form input,
html body .szp-supply-form textarea {
  background: #fff !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: 12px !important;
  min-height: 46px; padding: 10px 13px; font: inherit; font-size: .92rem;
}
html body .szp-supply-form textarea { min-height: 92px; line-height: 1.9; }
html body .szp-supply-heading { margin: 22px 0 10px; font-size: 1rem; font-weight: 800; color: var(--szp-v17-ink, #172334); }
html body .szp-supply-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
html body .szp-supply-list li {
  padding: 12px 14px; border-radius: 12px;
  border: 1px solid rgba(13,35,55,.10); background: rgba(255,255,255,.7);
  display: grid; gap: 4px;
}
html body .szp-supply-list b { font-size: .92rem; color: var(--szp-v17-ink, #172334); }
html body .szp-supply-meta { font-size: .78rem; color: var(--szp-v17-muted, #647286); }

/* ===========================================================================
   2.87.0 — Batch 5k: one sign-in, and the customer panel.
=========================================================================== */

/*
 * The theme's own login modal, in case anything still opens it.
 *
 * Its inputs render as solid orange blocks with white placeholder text on
 * them — unreadable, and the screenshot the owner sent twice. The header's
 * account link now opens our card instead (szp-auth.js), but a theme update,
 * a cached page or a route we have not found could still surface this one, and
 * an unreadable login is worse than an ugly one.
 */
html body .elementor-widget input[type="text"].input-text,
html body .elementor-widget input[type="tel"],
html body .elementor-widget input[type="password"],
html body .kaveh-login input,
html body .login-modal input,
html body [class*="login"] form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]) {
  background: #fff !important; background-image: none !important;
  color: #172334 !important; -webkit-text-fill-color: #172334 !important;
  border: 1px solid rgba(13,35,55,.20) !important;
  border-radius: 12px !important;
}
html body [class*="login"] form input::placeholder {
  color: #9aa5b0 !important; -webkit-text-fill-color: #9aa5b0 !important; opacity: 1;
}

/* ===========================================================================
   2.88.0 — Batch 5l: the provider workspace, looked at rather than described.

   Everything below was written against the owner's own screenshots of the live
   2.87.0 dashboard. It sits at the end of the file on purpose: platform.css is
   a five-thousand-line accumulation in which four earlier passes have already
   spent `!important`, so a later rule with equal weight is the only thing that
   reliably wins. Where `!important` appears here the rule it has to beat is
   named.
=========================================================================== */

/* ---------------------------------------------------------------------------
   1. The header: one block, not three stacked ones.

   It was a logo row, a hairline, and an identity row, each with its own
   padding — on a phone that is ~150px of chrome before the first link. The
   markup is now a single <header>, and the same markup collapses to one bar on
   a phone instead of a second layout to keep in sync.
--------------------------------------------------------------------------- */
html body .szp-shell-head {
  display: grid; gap: 12px;
  padding-bottom: 13px; margin-bottom: 2px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
html body .szp-shell-head .szp-shell-top { padding-bottom: 0; border-bottom: 0; }
html body .szp-shell-me {
  display: flex; align-items: center; gap: 11px; min-width: 0;
  padding: 9px 10px; border-radius: 15px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.09);
}
html body .szp-shell-avatar {
  width: 40px; height: 40px; flex: 0 0 40px; border-radius: 13px;
  box-shadow: 0 0 0 2px rgba(255,255,255,.14), 0 6px 16px rgba(3,10,20,.35);
}
html body .szp-shell-me-text { min-width: 0; display: grid; gap: 1px; }
html body .szp-shell-me-text b {
  font-size: .92rem; font-weight: 800; line-height: 1.5;
  color: #fff !important; -webkit-text-fill-color: #fff !important;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
html body .szp-shell-login {
  font-size: .7rem; line-height: 1.5; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: rgba(255,255,255,.42) !important; -webkit-text-fill-color: rgba(255,255,255,.42) !important;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; direction: ltr; text-align: start;
}
/* The role is a chip, not a third line of grey text — it is a fact about the
   account, and it reads as one when it has an edge. */
html body .szp-shell-role {
  display: inline-flex; align-items: center; justify-self: start; margin-top: 3px;
  padding: 2px 9px; border-radius: 999px;
  font-size: .68rem; font-weight: 700; line-height: 1.7;
  background: rgba(240,145,63,.16); border: 1px solid rgba(240,145,63,.30);
  color: #f7b877 !important; -webkit-text-fill-color: #f7b877 !important;
  white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}

/* ---------------------------------------------------------------------------
   2. The menu: groups that look like groups, links that look like destinations.

   «کار», «ارتباط», «حساب من» were 10px grey text jammed against the links they
   label, so the only structure in a nine-item list read as noise. Each group is
   now a titled block with its own surface; the title sits on the block rather
   than floating above it, and every link carries its own mark.
--------------------------------------------------------------------------- */
html body .szp-shell-scroll { display: grid; gap: 10px; padding: 0; }
html body .szp-shell-group {
  display: grid; gap: 3px;
  padding: 9px 8px 8px; border-radius: 16px;
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.07);
  border-top-width: 1px;            /* beats the 2.86.0 group separator */
  margin: 0;
}
html body .szp-shell-group + .szp-shell-group { border-top: 1px solid rgba(255,255,255,.07); }
html body .szp-shell-group-title {
  display: flex; align-items: center; gap: 7px;
  margin: 1px 6px 6px; padding: 0;
  font-size: .7rem; font-weight: 800; letter-spacing: .04em; text-transform: none;
  color: rgba(255,255,255,.46) !important; -webkit-text-fill-color: rgba(255,255,255,.46) !important;
}
html body .szp-shell-group-title::after {
  content: ""; flex: 1; height: 1px; background: rgba(255,255,255,.10);
}
html body .szp-shell-group:first-child .szp-shell-group-title { margin-top: 1px; }

html body .szp-shell-link {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 11px; border-radius: 12px; min-height: 40px;
  font-size: .875rem; font-weight: 700; line-height: 1.6;
  color: rgba(255,255,255,.82) !important; -webkit-text-fill-color: rgba(255,255,255,.82) !important;
  border: 1px solid transparent;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
html body .szp-shell-ico {
  flex: 0 0 26px; width: 26px; height: 26px; display: grid; place-items: center;
  border-radius: 8px; background: rgba(255,255,255,.07);
  color: rgba(255,255,255,.62); transition: background .15s ease, color .15s ease;
}
html body .szp-shell-ico svg { display: block; }
html body .szp-shell-label {
  flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
html body .szp-shell-link:hover { background: rgba(255,255,255,.08); }
html body .szp-shell-link:hover .szp-shell-ico { background: rgba(255,255,255,.13); color: #fff; }
html body .szp-shell-link.is-current,
html body .szp-shell-link[aria-current="page"] {
  background: linear-gradient(180deg, #f0913f, #e07521) !important;
  border-color: rgba(255,255,255,.24) !important;
  color: #20130a !important; -webkit-text-fill-color: #20130a !important;
  font-weight: 800;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.36), 0 8px 18px rgba(224,117,33,.28) !important;
}
html body .szp-shell-link.is-current .szp-shell-ico {
  background: rgba(32,19,10,.16); color: #20130a;
}
html body .szp-shell-link.is-current .szp-shell-count {
  background: rgba(32,19,10,.20) !important; color: #20130a !important;
}

/* ---------------------------------------------------------------------------
   3. The bottom bar, and why «خروج» was hanging off the edge of it.

   `repeat(4, 1fr)` — and `1fr` is `minmax(auto, 1fr)`, a track that will not
   shrink below its own content. Four Persian labels wider than a quarter of a
   268px rail therefore pushed the grid wider than the box that contains it.
   `minmax(0, 1fr)` lets the tracks shrink, and every label is a span that can
   ellipsise inside one.
--------------------------------------------------------------------------- */
html body .szp-shell-foot,
body.szp-own-shell .szp-shell-foot {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px; margin-top: 10px; padding: 10px;
  border-radius: 18px; overflow: hidden;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
}
/* Measured on the live phone after the first pass: the bar still rendered
   `111.8 111.8 66.3 52` — two even tracks and two ragged ones. The reason is
   specificity, not the template: `body.szp-own-shell .szp-shell-foot` above is
   (0,2,1) and beat `html body .szp-shell-foot-4` at (0,1,2), so the two-column
   template applied and `grid-auto-flow: column` (from the 2.74 phone block)
   invented two `auto` tracks for the leftovers. Matching that weight, and
   pinning the flow to `row` so implicit columns cannot appear at all. */
body.szp-own-shell .szp-shell-foot.szp-shell-foot-3,
body.szp-own-shell .szp-shell-foot.szp-shell-foot-4 {
  grid-auto-flow: row !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
/* «پروفایل من» is the odd one out in a four-door bar — on two columns it sat alone
   with a hole beside it. It takes the row. */
body.szp-own-shell .szp-shell-foot.szp-shell-foot-4 .szp-shell-home:nth-of-type(3) {
  grid-column: 1 / -1;
}
html body .szp-shell-foot .szp-shell-home,
html body .szp-shell-foot .szp-shell-exit {
  display: flex !important; align-items: center; justify-content: center; gap: 6px;
  min-width: 0; padding: 10px 8px !important; border-radius: 12px !important;
  font-size: .8rem !important; font-weight: 700; text-decoration: none;
}
html body .szp-shell-foot .szp-shell-home > span,
html body .szp-shell-foot .szp-shell-exit > span {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
html body .szp-shell-foot .szp-shell-home {
  background: rgba(255,255,255,.10) !important; border: 1px solid rgba(255,255,255,.16) !important;
  color: #fff !important; -webkit-text-fill-color: #fff !important;
}
html body .szp-shell-foot .szp-shell-home:hover { background: rgba(255,255,255,.18) !important; }
/* Signing out is the one destructive control here, so it owns its own row
   rather than being one of four equal buttons somebody taps by accident. */
html body .szp-shell-foot .szp-shell-exit {
  grid-column: 1 / -1;
  background: rgba(214,64,52,.16) !important; border: 1px solid rgba(214,64,52,.34) !important;
  color: #ffb3ae !important; -webkit-text-fill-color: #ffb3ae !important;
}
html body .szp-shell-foot .szp-shell-exit:hover {
  background: rgba(214,64,52,.30) !important;
  color: #fff !important; -webkit-text-fill-color: #fff !important;
}
html body .szp-shell-foot .szp-shell-exit svg { flex: 0 0 auto; }

/* ---------------------------------------------------------------------------
   4. The phone, rebuilt.

   What the owner photographed: the group titles back on, the links back in a
   grid, and the whole thing spilling into two ragged columns inside a card that
   was supposed to be one swipeable strip. The cause is in this file — the
   2.86.0 block sets `.szp-shell-group-title{display:block}` and
   `.szp-shell-links{display:grid}` with `html body` weight and no media query,
   so it overrides the phone rules written 2000 lines above it. Restated here,
   after it, with `!important`, because that is the only thing that beats an
   equally-specific later rule.
--------------------------------------------------------------------------- */
@media (max-width: 999px) {
  html body .szp-shell { padding-bottom: 92px; }
  html body .szp-shell-aside { position: sticky; top: 0; z-index: 40; }
  html body .szp-shell-nav {
    padding: 10px 11px 9px !important; gap: 9px !important; border-radius: 0 0 20px 20px;
  }
  /* Header on one line: mark on one side, person on the other. */
  html body .szp-shell-head {
    display: flex !important; align-items: center; justify-content: space-between; gap: 10px;
    padding-bottom: 9px; margin-bottom: 0;
  }
  html body .szp-shell-top { flex: 0 0 auto; }
  html body .szp-shell-brand img { height: 26px !important; }
  html body .szp-shell-me {
    flex: 1 1 auto; justify-content: flex-end; padding: 5px 8px; gap: 8px;
    background: transparent; border-color: transparent;
  }
  html body .szp-shell-avatar { width: 34px; height: 34px; flex-basis: 34px; border-radius: 11px; }
  html body .szp-shell-me-text { text-align: start; }
  html body .szp-shell-me-text b { font-size: .82rem; }
  /* Two lines of metadata under a name is a sidebar's job, not a 56px bar's. */
  html body .szp-shell-login { display: none !important; }
  html body .szp-shell-role { margin-top: 1px; font-size: .64rem; padding: 1px 7px; }

  /* One rail. `display:contents` dissolves the group wrappers so every link is a
     direct flex item of the scroller; without it each group is its own grid and
     they stack — which is the screenshot. */
  html body .szp-shell-scroll {
    display: flex !important; gap: 6px !important; padding: 1px 0 3px !important;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12px, #000 calc(100% - 12px), transparent);
            mask-image: linear-gradient(90deg, transparent, #000 12px, #000 calc(100% - 12px), transparent);
  }
  html body .szp-shell-scroll::-webkit-scrollbar { display: none; }
  html body .szp-shell-group,
  html body .szp-shell-links {
    display: contents !important;
    padding: 0 !important; margin: 0 !important; background: none !important; border: 0 !important;
  }
  /* The group name stays — as a divider inside the rail rather than a heading
     above it, so «کار … ارتباط … پروفایل» still reads as three sets. */
  html body .szp-shell-group-title {
    display: inline-flex !important; align-items: center; flex: 0 0 auto;
    margin: 0 2px !important; padding: 0 2px;
    font-size: .64rem; font-weight: 700; letter-spacing: 0;
    color: rgba(255,255,255,.34) !important; -webkit-text-fill-color: rgba(255,255,255,.34) !important;
    white-space: nowrap; scroll-snap-align: none;
  }
  html body .szp-shell-group-title::after { display: none; }
  html body .szp-shell-group:first-child .szp-shell-group-title { display: none !important; }

  html body .szp-shell-link {
    flex: 0 0 auto; scroll-snap-align: start; white-space: nowrap;
    min-height: 36px; padding: 7px 13px !important; border-radius: 999px !important;
    gap: 7px; font-size: .82rem;
    background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.12);
  }
  html body .szp-shell-ico {
    flex-basis: 18px; width: 18px; height: 18px; background: none !important; border-radius: 0;
  }
  html body .szp-shell-ico svg { width: 15px; height: 15px; }

  /* The bottom bar: four doors in one row that cannot outgrow the screen. */
  html body .szp-shell-foot,
  body.szp-own-shell .szp-shell-foot {
    position: fixed; inset-inline: 0; bottom: 0; z-index: 60;
    margin: 0; padding: 8px 10px calc(8px + env(safe-area-inset-bottom)) !important;
    border-radius: 0; border: 0; border-top: 1px solid rgba(255,255,255,.12);
    background: rgba(11,23,37,.86);
    -webkit-backdrop-filter: saturate(160%) blur(18px); backdrop-filter: saturate(160%) blur(18px);
  }
  body.szp-own-shell .szp-shell-foot.szp-shell-foot-3 {
    grid-auto-flow: row !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  body.szp-own-shell .szp-shell-foot.szp-shell-foot-4 {
    grid-auto-flow: row !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
  /* One row on a phone. The desktop rule that gives «پروفایل من» its own line has to
     be undone here too, or the bar is three rows tall and eats a third of the screen —
     measured at 171px against an 844px viewport. */
  body.szp-own-shell .szp-shell-foot .szp-shell-home,
  body.szp-own-shell .szp-shell-foot .szp-shell-exit { grid-column: auto !important; }
  html body .szp-shell-foot .szp-shell-home,
  html body .szp-shell-foot .szp-shell-exit {
    font-size: .74rem !important; padding: 9px 4px !important; gap: 4px;
  }
  html body .szp-shell-foot .szp-shell-exit svg { width: 13px; height: 13px; }
}
@media (max-width: 360px) {
  html body .szp-shell-foot .szp-shell-home,
  html body .szp-shell-foot .szp-shell-exit { font-size: .68rem !important; }
}

/* ---------------------------------------------------------------------------
   5. The portfolio, in a grid.

   `.szp-pd-portfolio > li` inherited the record-row rule — a flex row with no
   cap on the image — so every sample rendered at its natural width, one under
   another, and reviewing four pictures was a page of scrolling. They are
   thumbnails in a form: a fixed frame, uniform, with their controls attached.
--------------------------------------------------------------------------- */
html body .szp-pd-portfolio {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px; margin: 10px 0 0; padding: 0; list-style: none;
}
html body .szp-pd-portfolio > li {
  display: grid !important; grid-template-rows: auto auto; gap: 0;
  padding: 0 !important; overflow: hidden;
  border: 1px solid var(--szp-v17-border, #e1e6ea); border-radius: 14px; background: #fff;
  box-shadow: 0 3px 10px rgba(13,35,55,.06);
}
html body .szp-pd-portfolio > li img {
  display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  background: #eef1f4; border-bottom: 1px solid var(--szp-v17-border, #e1e6ea);
}
html body .szp-pd-portfolio .szp-pd-media-actions {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px; margin: 0; padding: 7px;
}
html body .szp-pd-portfolio .szp-pd-media-actions button {
  min-height: 30px !important; padding: 4px 2px !important; font-size: .72rem !important;
  border-radius: 9px !important; min-width: 0;
}
html body .szp-pd-portfolio .szp-pd-media-actions button[disabled] { opacity: .4; cursor: default; }
html body .szp-pd-portfolio .szp-pd-media-actions [data-szp-media-delete] {
  color: #a23c34 !important; -webkit-text-fill-color: #a23c34 !important;
  border-color: rgba(162,60,52,.3) !important;
}
/* The two file pickers were two full-width rows of native chrome at the top of
   the card. They are a pair of dropzone-shaped boxes now, side by side. */
html body #szpPdMedia .szp-form-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
html body #szpPdMedia .szp-form-grid > label {
  display: grid; gap: 7px; padding: 12px 13px;
  border: 1px dashed rgba(13,35,55,.22); border-radius: 14px; background: rgba(255,255,255,.6);
}
html body #szpPdMedia .szp-form-grid > label > span { font-size: .82rem; font-weight: 800; }
html body #szpPdMedia input[type="file"] { font-size: .78rem; max-width: 100%; }

/* ---------------------------------------------------------------------------
   6. Material: an estimate and an order are two errands at one desk.
--------------------------------------------------------------------------- */
html body .szp-supply-modes {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px;
  margin-bottom: 4px;
}
html body .szp-supply-mode {
  display: grid !important; gap: 3px; cursor: pointer;
  padding: 12px 14px; border-radius: 14px;
  border: 1px solid rgba(13,35,55,.14); background: #fff;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
html body .szp-supply-mode input { position: absolute; opacity: 0; pointer-events: none; }
html body .szp-supply-mode b { font-size: .9rem; font-weight: 800; color: var(--szp-v17-ink, #172334); }
html body .szp-supply-mode small { font-size: .76rem; line-height: 1.8; color: var(--szp-v17-muted, #647286); }
html body .szp-supply-mode.is-current {
  border-color: var(--szp-v17-orange, #e47a2c); background: #fff7f0;
  box-shadow: 0 0 0 3px rgba(228,122,44,.14);
}
html body .szp-supply-mode:focus-within { outline: 3px solid #f4a25f; outline-offset: 2px; }
/* Any rule that forces `display` has to exempt `[hidden]` in the same breath —
   the ticket form's conditional field and the emoji panel were both this bug. */
html body .szp-supply-form label[hidden],
html body .szp-supply-mode[hidden] { display: none !important; }
html body .szp-supply-form select {
  background: #fff !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: 12px !important;
  min-height: 46px; padding: 10px 13px; font: inherit; font-size: .92rem;
}
html body .szp-supply-list li { grid-template-columns: minmax(0, 1fr); }
html body .szp-supply-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 2px; }
html body .szp-supply-kind,
html body .szp-supply-prio {
  display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px;
  font-size: .7rem; font-weight: 800; line-height: 1.8; white-space: nowrap;
}
html body .szp-supply-kind.is-quote { background: #e8f2fb; color: #175a8c; border: 1px solid #c3ddf2; }
html body .szp-supply-kind.is-order { background: #eaf6ef; color: #1c6b45; border: 1px solid #c4e5d3; }
html body .szp-supply-prio.is-hot  { background: #fdecea; color: #a4342a; border: 1px solid #f3c9c4; }
html body .szp-supply-prio.is-warm { background: #fff4e2; color: #8a5700; border: 1px solid #f0cf9e; }
html body .szp-supply-prio.is-calm { background: #eef1f4; color: #4a5c72; border: 1px solid #dde3e9; }

/* ---------------------------------------------------------------------------
   7. The composer: an emoji panel that fits, and a status line that stops
      eating the text box.

   The panel was anchored to `.szp-composer-tools`, a 120px box at one end of a
   400px drawer, and it is 280px wide — so half of it rendered past the panel
   edge and could not be reached. It is anchored to the form now and spans it.

   The status line is `width:100%` in a `nowrap` flex row, which does not wrap:
   it took its 100% out of the textarea's share instead, which is the composer
   collapsed to a single letter in the recording screenshot.
--------------------------------------------------------------------------- */
html body .szp-chat-drawer-form,
html body .szp-thread-form { position: relative; flex-wrap: wrap; }
html body .szp-composer-tools { position: static; }
html body .szp-composer-note,
html body .szp-composer-status,
html body .szp-composer-say { flex: 1 0 100%; width: 100%; order: 99; }

html body .szp-composer-picker:not([hidden]) {
  display: block !important;
  position: absolute; z-index: 40;
  inset-inline: 10px; bottom: calc(100% - 4px); width: auto; max-width: none;
  padding: 9px 10px 10px; border-radius: 16px;
  max-height: min(46vh, 300px); overflow-y: auto; overscroll-behavior: contain;
  background: #fff; border: 1px solid rgba(13,35,55,.14);
  box-shadow: 0 18px 44px rgba(3,10,20,.22), 0 2px 8px rgba(3,10,20,.10);
}
html body .szp-composer-picker[hidden] { display: none !important; }
html body .szp-composer-picker-title {
  margin: 8px 2px 4px; font-size: .7rem; font-weight: 800;
  color: var(--szp-v17-muted, #647286);
}
html body .szp-composer-picker-title:first-child { margin-top: 2px; }
html body .szp-composer-picker-row {
  display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 2px;
}
html body .szp-composer-picker button {
  min-height: 34px !important; padding: 4px !important; font-size: 1.2rem !important;
  border-radius: 9px !important; border: 0 !important; background: transparent !important;
  box-shadow: none !important; cursor: pointer;
}
html body .szp-composer-picker button:hover { background: rgba(228,122,44,.14) !important; }
@media (max-width: 380px) {
  html body .szp-composer-picker-row { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* ---- hold to record ------------------------------------------------------ */
html body .szp-composer-rec {
  flex: 1 0 100%; order: -2;
  display: flex; align-items: center; gap: 9px;
  margin-bottom: 7px; padding: 9px 12px; border-radius: 12px;
  background: rgba(214,64,52,.08); border: 1px solid rgba(214,64,52,.26);
  font-size: .8rem; line-height: 1.7; color: #a4342a;
}
html body .szp-composer-rec[hidden] { display: none !important; }
html body .szp-composer-rec-dot {
  flex: 0 0 10px; width: 10px; height: 10px; border-radius: 50%; background: #d64034;
  animation: szp-rec-dot 1s ease-in-out infinite;
}
html body .szp-composer-rec-time {
  flex: 0 0 auto; font-weight: 800; font-variant-numeric: tabular-nums; min-width: 34px;
}
html body .szp-composer-rec-hint { flex: 1 1 auto; min-width: 0; font-size: .76rem; opacity: .85; }
html body .szp-composer-rec.is-cancelling {
  background: rgba(214,64,52,.16); border-color: rgba(214,64,52,.45);
}
html body .szp-composer-rec.is-cancelling .szp-composer-rec-hint { font-weight: 800; opacity: 1; }
@keyframes szp-rec-dot { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

/* While the finger is down there is one thing to do. Everything else fades
   rather than disappearing, so the composer does not change shape under the
   hand that is holding it. */
/* Measured on the live drawer: the textarea stayed at opacity 1 while recording.
   The contrast block at the top of this file sets `opacity:1!important` on every
   input inside `.szp-chat-drawer` — written to stop the theme fading our controls
   out, and it faded this one back in. Same weight, stated later. */
html body form.is-recording textarea,
html body .szp-chat-drawer form.is-recording textarea,
html body form.is-recording .szp-composer-emoji,
html body form.is-recording .szp-composer-attach,
html body form.is-recording [type="submit"] {
  /* No transition on this. A pending transition is what defeated both earlier
     attempts: the declaration was applied and the computed value was still the
     start of an animation that had not advanced — measured twice, once on
     `opacity` and once on `filter`. A state that says "you are recording" should
     be true the instant it is set, not a sixth of a second later. */
  filter: opacity(0.22); pointer-events: none !important;
}
html body .szp-composer-mic {
  touch-action: none;              /* the hold gesture must not scroll the page */
  -webkit-user-select: none; user-select: none;
}
html body .szp-composer-mic.is-recording {
  background: #d64034 !important; color: #fff !important;
  -webkit-text-fill-color: #fff !important; transform: scale(1.12);
  animation: szp-rec 1.1s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  html body .szp-composer-rec-dot,
  html body .szp-composer-mic.is-recording { animation: none; }
}
/* The attachment chip is a receipt for something not yet sent, so it says so. */
html body .szp-composer-file { font-weight: 700; }

/* Pending uploads: the same frame, a badge instead of controls. */
html body .szp-pd-portfolio-pending > li { border-style: dashed; border-color: rgba(228,122,44,.45); }
html body .szp-pd-media-wait {
  display: block; padding: 8px 10px; font-size: .72rem; font-weight: 700; line-height: 1.7;
  color: #8a5700; background: #fff4e2; border-top: 1px solid #f0cf9e;
}

/* ===========================================================================
   2.89.0 — one sign-in, one switch, and the customer panel caught up.
=========================================================================== */

/*
 * The close button was landing on the title.
 *
 * `.szp-auth-close` is `position:absolute; inset-inline-start:12px` — in RTL that is
 * the right edge — and `.szp-auth-role-bar` puts «ورود مجری» at the same right edge,
 * so the × sat on the word. Measured on the card the owner photographed. Reserving the
 * corner is the fix rather than moving the button: the close control belongs in the
 * corner people reach for, and a title can start 44px in.
 */
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 panel switch, above the four doors. */
html body .szp-shell-switch {
  display: flex !important; align-items: center; justify-content: center; gap: 7px;
  margin-top: 10px; padding: 11px 12px; border-radius: 14px;
  font-size: .82rem; font-weight: 800; text-decoration: none;
  background: rgba(240,145,63,.14) !important;
  border: 1px solid rgba(240,145,63,.32) !important;
  color: #f7b877 !important; -webkit-text-fill-color: #f7b877 !important;
  transition: background .15s ease;
}
html body .szp-shell-switch:hover { background: rgba(240,145,63,.24) !important; }
html body .szp-shell-switch svg { flex: 0 0 auto; }
html body .szp-shell-switch > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 999px) {
  /* On a phone the four doors are already pinned to the bottom; the switch rides
     just above them rather than adding a fifth thing to that bar. */
  html body .szp-shell-switch {
    position: fixed; inset-inline: 10px; bottom: calc(62px + env(safe-area-inset-bottom));
    z-index: 59; margin: 0; padding: 8px 12px; font-size: .78rem;
    background: rgba(20,38,58,.92) !important;
    border-color: rgba(240,145,63,.38) !important;
    -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  }
  html body .szp-shell { padding-bottom: 138px; }
}

/* ---------------------------------------------------------------------------
   The chat launcher: a conversation you open beside your work.

   Both panels treated «گفت‌وگو» as a destination, which makes it a ticket with a
   different name. This is the corner every site puts it in. It is a stack rather
   than a single button because the assistant that is coming next belongs in the
   same corner, above this one, without a re-layout.
--------------------------------------------------------------------------- */
html body .szp-fab-stack {
  position: fixed; z-index: 90;
  /* Physical, and `left` explicitly released.
     Measured: with `inset-inline-start` alone the box computed `left:1066px` *and*
     `right:18px` — both edges pinned — and an over-constrained fixed box takes its
     width from the gap between them, which was zero. Naming one edge and freeing the
     other is the only way to get shrink-to-fit here. This site is RTL-only, so the
     physical property is not a portability loss. */
  /* The free side. In RTL the navigation rail is on the right, and the launcher was
     landing on top of it — measured sitting over «هشدار قیمت». */
  left: 18px !important; right: auto !important;
  bottom: 22px;
  display: flex; flex-direction: column-reverse; gap: 10px; align-items: flex-start;
  /* Measured: the stack shrink-wrapped to 0 and the button inside it rendered 1084px
     wide — this theme puts `width:100%` on buttons, and against a zero-width flex
     container that resolves to something else entirely. Both boxes state their own
     width so neither depends on the other guessing right. */
  /* `width: max-content` alone computed to 0 here — measured — while the button
     inside it measured 120 and overflowed off the right edge of an RTL viewport.
     `min-width` cannot be talked down below the content, so it is the one that
     actually holds the box open. */
  width: max-content; min-width: max-content; max-width: calc(100vw - 24px);
}
html body .szp-fab {
  position: relative;
  display: inline-flex !important; align-items: center; gap: 9px;
  /* `max-width: 100%` here was the whole bug, and it was circular: the wrapper is
     shrink-to-fit, so its width comes from this button; this button's max-width was
     100% *of that wrapper*; the pair resolved at zero, leaving a 36px stub of pure
     padding sitting off the right edge of an RTL viewport. The button sizes to its
     content and the wrapper follows; the viewport guard lives on the wrapper, which
     is the box that knows how much room there is. */
  width: auto !important; max-width: none !important; flex: 0 0 auto; align-self: flex-start;
  white-space: nowrap;
  /* And the answer to the whole puzzle: this theme puts `margin: 0 -542px` — half a
     viewport, negative, on both sides — on its buttons. Measured on the element. The
     wrapper's content width came out 113 - 1084 = negative, clamped to zero, and the
     button was shoved 542px past the right edge of the screen. Every intrinsic-sizing
     rule above was arguing with a negative margin. */
  margin: 0 !important;
  min-height: 52px; padding: 0 18px 0 16px; border-radius: 999px;
  font: inherit; font-size: .88rem; font-weight: 800; line-height: 1; cursor: pointer;
  font-family: Vazirmatn, IRANSans, IRANYekan, Tahoma, sans-serif;
  background: linear-gradient(180deg, #f0913f, #e07521) !important;
  background-image: linear-gradient(180deg, #f0913f, #e07521) !important;
  border: 1px solid rgba(255,255,255,.28) !important;
  color: #fff !important; -webkit-text-fill-color: #fff !important;
  box-shadow: 0 14px 30px rgba(224,117,33,.34), 0 3px 8px rgba(3,10,20,.24) !important;
  transition: transform .15s ease, box-shadow .2s ease;
}
html body .szp-fab:hover { transform: translateY(-2px); }
html body .szp-fab:active { transform: translateY(1px); }
html body .szp-fab svg { flex: 0 0 auto; }
html body .szp-fab-dot {
  position: absolute; top: -4px; inset-inline-end: -4px;
  min-width: 21px; height: 21px; padding: 0 6px; border-radius: 999px;
  display: grid; place-items: center;
  background: #d64034; color: #fff; font-size: .7rem; font-weight: 800;
  border: 2px solid #fff;
}
html body .szp-fab-dot[hidden] { display: none !important; }
/* While the drawer is open the launcher would sit on top of it. */
html body.szp-chat-open .szp-fab-stack { opacity: 0; pointer-events: none; }
@media (max-width: 999px) {
  /* Above the fixed bottom bar and the panel switch, not on them. */
  html body .szp-fab-stack {
    left: 12px !important; right: auto !important;
    bottom: calc(112px + env(safe-area-inset-bottom));
  }
  html body .szp-fab { min-height: 46px; padding: 0 15px 0 13px; font-size: .82rem; }
  html body .szp-fab-label { display: none; }
  html body .szp-fab { padding: 0; width: 46px; justify-content: center; }
}

/* ---------------------------------------------------------------------------
   The customer panel, brought up to the provider one.

   The owner's example: the section chips at the top of a screen go orange in the
   workspace and stayed navy here. They are the same control doing the same job in
   the same shell, so they get the same answer — and the point behind the example
   is that the two panels are one product, which is what the rest of this block is
   about.
--------------------------------------------------------------------------- */
html body .szp-dash .szp-dash-nav a,
html body .szp-dash-nav a {
  padding: 8px 14px; border-radius: 999px;
  font-size: .82rem; font-weight: 700;
  border: 1px solid rgba(255,255,255,.14) !important;
  background: rgba(255,255,255,.06) !important;
  color: rgba(255,255,255,.80) !important; -webkit-text-fill-color: rgba(255,255,255,.80) !important;
}
html body .szp-dash .szp-dash-nav a:hover,
html body .szp-dash-nav a:hover {
  background: rgba(255,255,255,.12) !important;
  color: #fff !important; -webkit-text-fill-color: #fff !important;
  border-color: rgba(255,255,255,.22) !important;
}
html body .szp-dash .szp-dash-nav a.is-current,
html body .szp-dash-nav a.is-current,
html body .szp-dash-nav a[aria-current="page"] {
  background: linear-gradient(180deg, #ef8c3f, #e07521) !important;
  border-color: rgba(255,255,255,.30) !important;
  color: #fff !important; -webkit-text-fill-color: #fff !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.34), 0 8px 18px rgba(224,117,33,.26) !important;
}

/* The heading strip of every customer card, matching the workspace's. */
html body .szp-dash-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 12px;
}
html body .szp-dash-head h2 {
  font-size: clamp(1.05rem, 1.5vw, 1.3rem); font-weight: 800; margin: 0;
  color: var(--szp-v17-navy, #0b1d31);
}
/* The counter tiles were a plain white grid here and a bordered strip in the
   workspace; one of the two had to go, and the workspace's is the one people
   have already been using. */
html body .szp-dash-stats > li,
html body .szp-dash .szp-stat-strip > li {
  border-radius: 14px; border: 1px solid rgba(13,35,55,.10);
  background: #fff; box-shadow: 0 3px 10px rgba(13,35,55,.05);
}
html body .szp-dash-stats > li.is-hot,
html body .szp-dash .szp-stat-strip > li.is-hot {
  border-color: #f0cf9e; background: #fff7ee;
}

/* ===========================================================================
   2.90.0 — conversations as boxes, and the shop half of the account.
=========================================================================== */

/* ---- the drawer's own conversation list --------------------------------- */
html body .szp-chat-list { display: grid; gap: 9px; padding: 2px; }
html body .szp-chat-listnote {
  margin: 0 2px 4px; font-size: .8rem; line-height: 1.9;
  color: var(--szp-v17-muted, #647286);
}
html body .szp-chat-listitem {
  display: grid !important; grid-template-columns: 1fr auto; align-items: center;
  gap: 4px 10px; width: 100%; margin: 0 !important;
  padding: 12px 14px; border-radius: 14px; cursor: pointer; text-align: start;
  background: #fff !important; background-image: none !important;
  border: 1px solid var(--szp-v17-border, #e1e6ea) !important;
  box-shadow: 0 2px 8px rgba(13,35,55,.05) !important;
  font: inherit; color: var(--szp-v17-ink, #172334) !important;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
html body .szp-chat-listitem:hover {
  border-color: var(--szp-v17-orange, #e47a2c) !important;
  background: #fff8f2 !important; transform: translateY(-1px);
}
html body .szp-chat-listitem b {
  grid-column: 1; font-size: .9rem; font-weight: 800; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
html body .szp-chat-listitem time {
  grid-column: 1 / -1; font-size: .74rem; color: var(--szp-v17-muted, #647286);
}
html body .szp-chat-listbadge {
  grid-column: 2; grid-row: 1; justify-self: end;
  min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px;
  display: inline-grid; place-items: center;
  background: var(--szp-v17-orange, #e47a2c); color: #fff;
  font-size: .74rem; font-weight: 800;
}
html body .szp-chat-newthread { width: 100%; margin-top: 4px !important; }

/* ---- the same idea on the dashboard's conversations screen -------------- */
html body .szp-chan-list { display: grid; gap: 9px; margin: 10px 0 0; padding: 0; list-style: none; }
html body .szp-chan-list > li { margin: 0; }
html body .szp-chan-list .szp-dash-thread {
  display: grid !important; grid-template-columns: 1fr auto; align-items: center;
  gap: 4px 10px; width: 100%;
  padding: 13px 15px; border-radius: 14px;
  border: 1px solid var(--szp-v17-border, #e1e6ea) !important;
  background: #fff !important; box-shadow: 0 2px 8px rgba(13,35,55,.05);
}
html body .szp-chan-list .szp-dash-thread:hover {
  border-color: var(--szp-v17-orange, #e47a2c) !important; background: #fff8f2 !important;
}
html body .szp-chan-list .szp-dash-thread strong {
  grid-column: 1; font-size: .92rem; font-weight: 800;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
html body .szp-chan-list .szp-dash-thread .szp-dash-badge { grid-column: 2; grid-row: 1; justify-self: end; }
html body .szp-chan-list .szp-dash-thread time { grid-column: 1 / -1; font-size: .74rem; }
html body .szp-chan-empty {
  margin: 8px 0 10px; padding: 14px; border-radius: 14px;
  border: 1px dashed rgba(13,35,55,.18); background: rgba(255,255,255,.6);
  font-size: .86rem; line-height: 1.9; color: var(--szp-v17-muted, #647286);
}
@media (min-width: 720px) {
  html body .szp-chan-list { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
}

/* ---- the shop screen ---------------------------------------------------- */
/*
 * The part menu, on a light card.
 *
 * `.szp-part-link` was written for the workspace, where this menu sits on the dark
 * navy panel and its inactive links are near-white. The customer's screens put the
 * same control on a white card, so every link except the current one was white on
 * white — measured on the live shop screen: five links, one visible.
 */
html body .szp-dash .szp-part-menu,
html body .szp-shop-menu {
  display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 4px; padding: 6px;
  border-radius: 999px; background: #f2f5f8; border: 1px solid rgba(13,35,55,.08);
}
html body .szp-dash .szp-part-menu .szp-part-link,
html body .szp-shop-menu .szp-part-link {
  flex: 1 1 auto; text-align: center; min-width: 0;
  padding: 9px 14px; border-radius: 999px;
  font-size: .84rem; font-weight: 700; text-decoration: none;
  color: var(--szp-v17-muted, #647286) !important;
  -webkit-text-fill-color: var(--szp-v17-muted, #647286) !important;
  background: transparent !important; border: 1px solid transparent !important;
}
html body .szp-dash .szp-part-menu .szp-part-link:hover,
html body .szp-shop-menu .szp-part-link:hover {
  background: #fff !important; color: var(--szp-accent-ink, #a85c20) !important;
  -webkit-text-fill-color: var(--szp-accent-ink, #a85c20) !important;
}
html body .szp-dash .szp-part-menu .szp-part-link.is-current,
html body .szp-shop-menu .szp-part-link.is-current {
  background: linear-gradient(180deg, #ef8c3f, #e07521) !important;
  color: #fff !important; -webkit-text-fill-color: #fff !important;
  border-color: rgba(255,255,255,.3) !important;
  box-shadow: 0 6px 14px rgba(224,117,33,.26);
}
html body .szp-shop-panel { margin-top: 12px; }
html body .szp-shop-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
/* WooCommerce's own markup, wearing this shell rather than the shop's. */
html body .szp-shop-woo { color: var(--szp-v17-ink, #172334); font-size: .9rem; }
html body .szp-shop-woo table {
  width: 100%; border-collapse: collapse; background: #fff;
  border: 1px solid var(--szp-v17-border, #e1e6ea); border-radius: 14px; overflow: hidden;
}
html body .szp-shop-woo th,
html body .szp-shop-woo td {
  padding: 11px 13px; text-align: start; font-size: .85rem;
  border-bottom: 1px solid var(--szp-v17-border, #e1e6ea);
}
html body .szp-shop-woo th { background: #f6f8fa; font-weight: 800; }
html body .szp-shop-woo tr:last-child td { border-bottom: 0; }
html body .szp-shop-woo a.button,
html body .szp-shop-woo .button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 36px; padding: 7px 14px; border-radius: 11px;
  background: linear-gradient(180deg, #f0913f, #e07521) !important;
  color: #fff !important; -webkit-text-fill-color: #fff !important;
  border: 0 !important; font-size: .82rem; font-weight: 800; text-decoration: none;
}
/* Wide tables scroll inside their own box rather than widening the page. */
html body .szp-shop-woo { overflow-x: auto; }

/* ==========================================================================
   2.97.0 — the provider is told what happens to an edit
   ========================================================================== */
.szp-note-review { background:#fff6e9 !important; border-color:#f0d9b8 !important; color:#8a5a12 !important; }
.szp-pending-banner {
  margin: 0 0 14px; padding: 10px 14px; border-radius: 12px;
  background:#fff6e9; border:1px solid #f0d9b8; color:#8a5a12;
  font-size:.86rem; line-height:1.9; font-weight:600;
}
.szp-identity-form.is-pending .szp-form-feedback { color:#8a5a12; font-weight:700; }

/* ==========================================================================
   2.98.0 — the rating dialog
   ========================================================================== */
.szp-rate-back {
  position: fixed; inset: 0; z-index: 100000;
  display: grid; place-items: center; padding: 20px;
  background: rgba(10, 22, 36, .55);
  opacity: 0; transition: opacity .2s ease;
}
.szp-rate-back.is-open { opacity: 1; }
.szp-rate {
  width: min(460px, 100%); max-height: 90vh; overflow-y: auto;
  background: #fff; border-radius: 20px; padding: 22px 24px;
  box-shadow: 0 30px 70px rgba(10, 22, 36, .35);
  transform: translateY(12px) scale(.98);
  transition: transform .22s cubic-bezier(.2, .9, .3, 1.2);
  text-align: start;
}
.szp-rate-back.is-open .szp-rate { transform: none; }
.szp-rate-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.szp-rate-head h3 { margin: 0; font-size: 1.05rem; font-weight: 800; }
.szp-rate-x {
  background: none; border: 0; font-size: 1.5rem; line-height: 1; cursor: pointer;
  color: #7b8794; padding: 0 4px;
}
.szp-rate-lead { margin: 8px 0 16px; font-size: .86rem; line-height: 2; color: #5b6774; }

/* The stars. Big enough for a thumb, and they fill from the start edge in RTL
   because that is the direction the sentence they answer is read in. */
.szp-rate-stars { display: flex; gap: 6px; justify-content: center; }
.szp-rate-star {
  background: none; border: 0; cursor: pointer; padding: 2px 4px;
  font-size: 2.3rem; line-height: 1; color: #dfe4ea;
  transition: transform .12s ease, color .12s ease;
}
.szp-rate-star.is-on { color: #f2a93b; }
.szp-rate-star:hover { transform: scale(1.14); }
.szp-rate-stars.is-asking { animation: szp-rate-nudge .5s ease; }
@keyframes szp-rate-nudge {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}
.szp-rate-word {
  display: block; text-align: center; min-height: 22px; margin: 4px 0 12px;
  font-size: .84rem; font-weight: 700; color: #b57a18;
}

.szp-rate-taghint { margin: 6px 0; font-size: .8rem; color: #5b6774; }
.szp-rate-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.szp-rate-tag {
  background: #f2f5f8; border: 1px solid #e2e8ef; border-radius: 999px;
  padding: 6px 14px; font-size: .82rem; font-weight: 600; cursor: pointer;
  color: #3d4a58; transition: background .14s ease, color .14s ease, transform .14s ease;
}
.szp-rate-tag:hover { transform: translateY(-1px); }
.szp-rate-tag.is-on { background: #ffefdc; border-color: #f0c288; color: #93540a; }

.szp-rate-note {
  width: 100%; border: 1px solid #e2e8ef; border-radius: 12px;
  padding: 10px 12px; font: inherit; font-size: .86rem; line-height: 1.9; resize: vertical;
}
.szp-rate-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; }
.szp-rate-err { font-size: .8rem; color: #b3352b; font-weight: 600; }

/* The thank-you. The check draws itself; `prefers-reduced-motion` gets it whole. */
.szp-rate.is-done { text-align: center; padding: 36px 24px; }
.szp-rate-thanks p { margin: 14px 0 0; font-size: .92rem; font-weight: 700; line-height: 2; }
.szp-rate-check { width: 92px; height: 92px; }
.szp-rate-check circle, .szp-rate-check path {
  fill: none; stroke: #34a05f; stroke-width: 4;
  stroke-linecap: round; stroke-linejoin: round;
}
.szp-rate-check circle { stroke-dasharray: 202; stroke-dashoffset: 202; animation: szp-draw .5s ease forwards; }
.szp-rate-check path   { stroke-dasharray: 60;  stroke-dashoffset: 60;  animation: szp-draw .35s .4s ease forwards; }
@keyframes szp-draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .szp-rate-check circle, .szp-rate-check path { stroke-dashoffset: 0; animation: none; }
  .szp-rate, .szp-rate-back { transition: none; }
}

/* The customer's own standing — labels only, never the score. */
.szp-standing-tags { list-style:none; margin:10px 0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.szp-standing-tags li {
  background:#eef6f0; border:1px solid #cfe6d8; border-radius:999px;
  padding:6px 14px; font-size:.84rem; font-weight:600; color:#1c6b40;
}
.szp-standing-tags b { color:#0f4d2c; font-weight:800; }

/* --------------------------------------------------------------------------
   The rating dialog, defended against the dashboard it opens on top of.

   Measured on the provider dashboard: the card came out half transparent, the
   textarea navy and the submit button an empty white box. The dashboard's own
   shell styles `textarea`, `button` and card backgrounds at a weight a bare
   class cannot beat, and this dialog is a guest on both the light customer
   screen and the dark provider one. So it states every colour it depends on
   rather than inheriting any, at a weight that wins in both houses.
   -------------------------------------------------------------------------- */
html body .szp-rate-back {
  position: fixed !important; inset: 0 !important; z-index: 2147483000 !important;
  display: grid !important; place-items: center !important;
  background: rgba(10, 22, 36, .6) !important;
  backdrop-filter: none !important;
}
html body .szp-rate {
  background: #fff !important;
  color: #16283d !important;
  border: 0 !important;
  border-radius: 20px !important;
  padding: 22px 24px !important;
  width: min(460px, calc(100vw - 32px)) !important;
  max-height: min(88vh, 760px) !important;
  overflow-y: auto !important;
  box-shadow: 0 30px 70px rgba(10, 22, 36, .38) !important;
}
html body .szp-rate * { color: inherit; }
html body .szp-rate h3 { color: #16283d !important; font-size: 1.05rem !important; margin: 0 !important; }
html body .szp-rate-lead,
html body .szp-rate-taghint { color: #5b6774 !important; }

html body .szp-rate-stars { justify-content: center !important; }
html body .szp-rate-star {
  background: none !important; border: 0 !important; box-shadow: none !important;
  color: #d9dee5 !important; font-size: 2.4rem !important; line-height: 1 !important;
  padding: 2px 5px !important; min-height: 0 !important; width: auto !important;
}
html body .szp-rate-star.is-on { color: #f2a93b !important; }
html body .szp-rate-word { color: #b57a18 !important; }

html body .szp-rate-tag {
  background: #f2f5f8 !important; color: #3d4a58 !important;
  border: 1px solid #e2e8ef !important; border-radius: 999px !important;
  padding: 6px 14px !important; font-size: .82rem !important;
  min-height: 0 !important; width: auto !important; margin: 0 !important;
}
html body .szp-rate-tag.is-on {
  background: #ffefdc !important; border-color: #f0c288 !important; color: #93540a !important;
}

/* The textarea is the one the dashboard themes hardest. */
html body .szp-rate-note {
  background: #fff !important; color: #16283d !important;
  border: 1px solid #e2e8ef !important; border-radius: 12px !important;
  width: 100% !important; padding: 10px 12px !important;
  font: inherit !important; font-size: .86rem !important; line-height: 1.9 !important;
}
html body .szp-rate-note::placeholder { color: #97a2ae !important; }

html body .szp-rate-foot .szp-btn {
  background: #e8862a !important; color: #fff !important; border: 0 !important;
  border-radius: 12px !important; padding: 10px 26px !important;
  font-weight: 700 !important; width: auto !important; min-height: 0 !important;
}
html body .szp-rate-foot .szp-btn[disabled] { opacity: .7 !important; }
html body .szp-rate-x { color: #7b8794 !important; background: none !important; border: 0 !important; }
html body .szp-rate-thanks p { color: #16283d !important; }

/* ---- the wallet ---------------------------------------------------------- */
.szp-wallet-balance { font-size: 1.9rem; font-weight: 800; margin: 6px 0 4px; color: #e8862a; }
.szp-wallet-table { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: .84rem; }
.szp-wallet-table td { padding: 8px 6px; border-bottom: 1px solid rgba(128,128,128,.18); vertical-align: top; }
.szp-wallet-table td.is-in  { color: #34a05f; font-weight: 700; white-space: nowrap; }
.szp-wallet-table td.is-out { color: #b3352b; font-weight: 700; white-space: nowrap; }
.szp-wallet-table small { opacity: .7; }

/* ==========================================================================
   3.1.0 — the phone menu: a bottom bar and a sheet
   ==========================================================================
   The rail put three destinations on screen and the other eight past the edge.
   A thumb reaches the bottom of a phone, so the four that carry the traffic
   live there permanently and everything else is one tap away.
   -------------------------------------------------------------------------- */
/* Both of these are phone-only and are built into <body> by script. Everything that
   styles them lives inside the media query below — so on a desktop they had no rules at
   all and rendered as ordinary blocks at the end of the page: the whole navigation a
   second time, under the dashboard. Hidden by default, shown only where they belong. */
.szp-mbar,
.szp-msheet { display: none; }

@media (max-width: 860px) {
  html body .szp-mbar {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    position: fixed; inset-inline: 0; bottom: 0; z-index: 9990;
    background: rgba(11, 24, 40, .97);
    -webkit-backdrop-filter: saturate(140%) blur(10px);
            backdrop-filter: saturate(140%) blur(10px);
    border-top: 1px solid rgba(255,255,255,.10);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -8px 26px rgba(0,0,0,.30);
  }
  html body .szp-mbar-tab {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    position: relative; min-width: 0; padding: 5px 2px; border: 0; background: none;
    color: rgba(255,255,255,.66); text-decoration: none; cursor: pointer;
    font: inherit; font-size: .64rem; font-weight: 600; line-height: 1.2;
    border-radius: 12px; transition: color .14s ease, background .14s ease;
  }
  /* No ellipsis. A clipped label is worse than a wrapped one — the script hands these
     names in already shortened, and anything it does not recognise wraps to two lines
     rather than losing its ending. */
  html body .szp-mbar-tab > span:last-child {
    max-width: 100%; overflow: visible; text-overflow: clip;
    white-space: normal; word-break: keep-all; text-align: center;
  }
  html body .szp-mbar-tab.is-current { color: #fff; background: rgba(232,134,42,.20); }
  html body .szp-mbar-tab.is-current::before {
    content: ""; position: absolute; top: 0; inset-inline: 28%; height: 2px;
    border-radius: 2px; background: var(--szp-v17-accent, #e8862a);
  }
  html body .szp-mbar-tab svg { width: 19px; height: 19px; }
  html body .szp-mbar .szp-shell-ico { background: none !important; width: auto; height: auto; }
  html body .szp-mbar-dot {
    position: absolute; top: 2px; inset-inline-end: 18%;
    min-width: 16px; padding: 0 4px; border-radius: 999px;
    background: #e8862a; color: #fff; font-size: .58rem; font-style: normal;
    font-weight: 800; line-height: 16px; text-align: center;
  }

  /* Room for the bar, and the old rail steps aside. */
  html body.szp-own-shell { padding-bottom: 74px; }
  html body.szp-own-shell .szp-shell-aside { display: none !important; }
  html body .szp-fab-stack { bottom: 84px !important; }

  /* The sheet: the whole navigation, groups intact. */
  html body .szp-msheet {
    display: block; position: fixed; inset: 0; z-index: 9995;
    visibility: hidden; opacity: 0; transition: opacity .2s ease, visibility .2s;
  }
  html body .szp-msheet.is-open { visibility: visible; opacity: 1; }
  html body .szp-msheet-back { position: absolute; inset: 0; background: rgba(6,14,24,.6); }
  html body .szp-msheet-card {
    position: absolute; inset-inline: 0; bottom: 0; max-height: 78vh; overflow-y: auto;
    background: #101f33; border-radius: 22px 22px 0 0;
    padding: 8px 14px calc(20px + env(safe-area-inset-bottom, 0px));
    transform: translateY(14px); transition: transform .22s cubic-bezier(.2,.9,.3,1.1);
    box-shadow: 0 -18px 44px rgba(0,0,0,.42);
  }
  html body .szp-msheet.is-open .szp-msheet-card { transform: none; }
  html body .szp-msheet-grip {
    width: 42px; height: 4px; border-radius: 999px; margin: 4px auto 12px;
    background: rgba(255,255,255,.24);
  }
  /* Inside the sheet the rail becomes a list again — it has the room. */
  html body .szp-msheet .szp-shell-aside { display: block !important; padding: 0; background: none; border: 0; }
  html body .szp-msheet .szp-shell-scroll {
    display: grid !important; gap: 8px !important; overflow: visible !important;
    -webkit-mask-image: none !important; mask-image: none !important;
  }
  html body .szp-msheet .szp-shell-group { display: block !important; margin-bottom: 10px; }
  html body .szp-msheet .szp-shell-links { display: grid !important; gap: 6px; }
  html body .szp-msheet .szp-shell-group-title {
    display: block !important; margin: 6px 2px !important;
    font-size: .7rem; color: rgba(255,255,255,.42) !important;
    -webkit-text-fill-color: rgba(255,255,255,.42) !important;
  }
  html body .szp-msheet .szp-shell-link {
    width: 100%; justify-content: flex-start; border-radius: 12px !important;
    padding: 11px 14px !important; font-size: .88rem;
  }
  html body.szp-msheet-open { overflow: hidden; }
}

/* The market form, which now exists. */
.szp-market-form .szp-field-wide { grid-column: 1 / -1; }
.szp-market-form fieldset {
  border: 1px solid rgba(255,255,255,.12); border-radius: 14px; padding: 12px 14px; margin: 0;
}
.szp-market-form legend { padding: 0 6px; font-size: .82rem; font-weight: 700; }
.szp-market-form .szp-checkgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px 14px; }
.szp-market-form .szp-checkgrid legend { grid-column: 1 / -1; }
.szp-market-form .szp-checkgrid label { display: flex; align-items: center; gap: 7px; font-size: .84rem; }
.szp-market-form .szp-priceset { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 12px; }
.szp-market-form.is-pending .szp-form-feedback { color: #f0b45f; font-weight: 700; }

/* Sazehbar's answer, sitting under the request it answers. */
.szp-dash-reply {
  margin: 10px 0 0; padding: 11px 14px; border-radius: 12px;
  background: rgba(232,134,42,.10); border: 1px solid rgba(232,134,42,.28);
}
.szp-dash-reply-tag {
  display: inline-block; margin-bottom: 5px; padding: 2px 10px; border-radius: 999px;
  background: rgba(232,134,42,.22); font-size: .68rem; font-weight: 800;
}
.szp-dash-reply p { margin: 0; font-size: .86rem; line-height: 2; }
.szp-dash-reply time { display: block; margin-top: 5px; font-size: .7rem; opacity: .7; }
.szp-pd-empty { padding: 22px 16px; text-align: center; }
.szp-pd-empty p { margin: 0 0 6px; }
.szp-pd-empty .szp-btn { margin-top: 10px; }

/* A tick is not a field: the label belongs beside the box, on one line, at normal weight. */
.szp-pd-form label.szp-field-check,
label.szp-field-check {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: .55rem;
  padding: .7rem .9rem;
  cursor: pointer;
}
label.szp-field-check > input[type="checkbox"] {
  width: 1.15rem; height: 1.15rem; flex: 0 0 auto; margin: 0; accent-color: var(--szp-accent, #e8720c);
}
label.szp-field-check > span {
  display: inline !important;
  margin: 0 !important;
  font-weight: 500;
  font-size: .95rem;
}

/* ---------------------------------------------------------------------------
   The services page joins the glass layer.

   The tokens have always been in scope here — `.szp-v17` is one of the selectors that
   defines them — but nothing on this page read them. The cards were painted with a flat
   `#fff` and a drawn 1px border from the older v17 palette, so the one page the owner
   sends people to looked a generation behind the dashboards. Same tokens, same rules:
   a tinted surface over a hairline, a directional specular on the top edge, a shadow
   that lifts on hover, and a solid fallback for anybody who asked for less transparency.

   Applied as its own block at the end rather than by editing the v17 rules, because
   those rules are also what the theme's own cards inherit from and rewriting them in
   place is how you break three pages to fix one.
--------------------------------------------------------------------------- */
/*
 * Glass with depth, not just transparency.
 *
 * The previous version was technically translucent and read as dead, and the reason is
 * that a flat 86% white with one soft shadow has no *edges*. What makes a pane look like
 * a pane is the rim: a bright line where light lands on the top edge, a fainter bounce
 * off the bottom, a hairline that is darker at the sides than at the top, and a shadow
 * with two parts — a wide soft one for the lift and a tight dark one for contact.
 * All of that is below, and none of it is subtle enough to be missed.
 *
 * The surface is also warm rather than neutral: a hint of the ground's own colour mixed
 * into the tint, which is what stops a white card on a warm page looking like a hole cut
 * in it.
 */
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,
html body .szp-v17 .szp-tool-card-v17 {
  background:
    linear-gradient(180deg, rgba(255,255,255,.94) 0%, rgba(255,253,251,.82) 100%) !important;
  border: 1px solid rgba(13,35,55,.10) !important;
  border-top-color: rgba(255,255,255,.9) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -1px 0 rgba(255,255,255,.45),
    inset 0 0 0 1px rgba(255,255,255,.28),
    0 1px 2px rgba(13,35,55,.06),
    0 12px 28px rgba(13,35,55,.10) !important;
  -webkit-backdrop-filter: saturate(165%) blur(14px);
  backdrop-filter: saturate(165%) blur(14px);
  transition: transform .18s ease, box-shadow .24s ease !important;
}
html body .szp-v17 .szp-provider-card-v17:hover,
html body .szp-v17 .szp-tool-card-v17:hover,
html body .szp-v17 .szp-guide-card:hover {
  transform: translateY(-3px);
  border-color: rgba(232,122,44,.28) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -1px 0 rgba(255,255,255,.5),
    0 2px 4px rgba(13,35,55,.07),
    0 22px 44px rgba(13,35,55,.16) !important;
}

/* The inner chips on a provider card were the deadest part: flat grey on flat white.
   They get the same treatment at a smaller scale so the card reads as layered glass
   rather than as one pane with printing on it. */
html body .szp-v17 .szp-provider-card-v17 .szp-pcard-stat,
html body .szp-v17 .szp-provider-card-v17 .szp-pcard-tag,
html body .szp-v17 .szp-provider-card-v17 .szp-pcard-price,
html body .szp-v17 .szp-provider-card-v17 [class*="szp-pcard-"] > span {
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(246,248,250,.7)) !important;
  border: 1px solid rgba(13,35,55,.09) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 1px 2px rgba(13,35,55,.04) !important;
}

/* And the photograph gets a defined edge, so the card does not fade into its own image. */
html body .szp-v17 .szp-provider-card-v17 img {
  box-shadow: inset 0 -1px 0 rgba(13,35,55,.10);
}
/* The media panel keeps a solid ground: a photograph behind glass is a smudged
   photograph, and this is the one element on the card that must stay literal. */
html body .szp-v17 .szp-provider-card-v17 img { -webkit-backdrop-filter: none; backdrop-filter: none; }

@media (prefers-reduced-transparency: reduce) {
  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,
  html body .szp-v17 .szp-tool-card-v17 {
    background: #fff !important;
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  }
}

/* ---------------------------------------------------------------------------
   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.
--------------------------------------------------------------------------- */
.szp-assist-launch{
  position:fixed;bottom:18px;z-index:9990;
  display:inline-flex;align-items:center;gap:8px;
  min-height:48px;padding:0 18px 0 14px;border:0;border-radius:999px;cursor:pointer;
  font:inherit;font-size:.86rem;font-weight:800;color:#fff;
  background:linear-gradient(135deg,#12314f,#0b1d31);
  box-shadow:0 10px 26px rgba(11,29,49,.34),inset 0 1px 0 rgba(255,255,255,.22);
  transition:transform .16s ease,box-shadow .2s ease
}
.szp-assist-bottom-start{inset-inline-start:18px}
.szp-assist-bottom-end{inset-inline-end:18px}
.szp-assist-launch:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(11,29,49,.44)}
.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}

/* مسیر خرید زیر جواب سازک: همان شعاع، همان مرز و همان نارنجیِ بقیهٔ ویجت.
   جهت از خود سند می‌آید (ویجت RTL است)، پس inline-start/end و نه left/right. */
.szp-assist-buy{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:10px 0 0;padding:9px 10px;
  border:1px solid rgba(13,35,55,.12);border-radius:12px;background:rgba(255,255,255,.72)
}
.szp-assist-buy:hover{background:#fff;border-color:#f0b478}
.szp-assist-buy-link{
  flex:1 1 auto;min-width:0;font-size:.84rem;font-weight:700;color:#172334;text-decoration:none;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
.szp-assist-buy-link:hover{color:#b8590c;text-decoration:underline}
.szp-assist-buy-cart,
.szp-assist-buy .szp-assist-buy-cart{
  flex:0 0 auto;border:0;cursor:pointer;font:inherit;font-size:.78rem;font-weight:700;
  padding:7px 13px;border-radius:999px;text-decoration:none;
  background:linear-gradient(135deg,#f39a4c,#e47a2c);color:#fff;
  box-shadow:0 6px 14px rgba(228,122,44,.28);transition:transform .2s cubic-bezier(.2,.75,.28,1),box-shadow .2s
}
.szp-assist-buy-cart:hover{transform:translateY(-1px);box-shadow:0 10px 20px rgba(228,122,44,.36);color:#fff}
.szp-assist-buy-cart:active{transform:translateY(1px)}
@media (max-width:380px){
  .szp-assist-buy{gap:6px;padding:8px}
  .szp-assist-buy-link{flex:1 1 100%;white-space:normal}
}
.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}
}

/* ---------------------------------------------------------------------------
   Results under the services-page search field.

   The panel this replaced was liked, and what made it work was not the list — it was
   the frame: a real surface with a rim, generous padding, a picture beside every row,
   and the price given weight. The first rewrite kept the rows and threw the frame away,
   which is why it read as worse while doing more. The frame is back, on the same glass
   tokens as everything else on this page.
--------------------------------------------------------------------------- */
.szp-search-suggestions{
  margin-top:10px;padding:6px;border-radius:16px;
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(252,250,248,.9));
  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 1px 2px rgba(13,35,55,.06),0 14px 30px rgba(13,35,55,.11);
  -webkit-backdrop-filter:saturate(165%) blur(14px);backdrop-filter:saturate(165%) blur(14px);
  max-height:min(56vh,420px);overflow-y:auto;overscroll-behavior:contain
}
.szp-suggest-note{
  margin:0;padding:9px 12px 10px;font-size:.79rem;line-height:1.9;
  color:var(--szp-v17-muted,#5a6875);
  border-bottom:1px solid rgba(13,35,55,.08)
}
.szp-suggest-hit{
  display:flex;align-items:center;gap:11px;padding:9px 10px;margin:4px 0;
  border-radius:12px;text-decoration:none;color:var(--szp-v17-ink,#172334);
  border:1px solid transparent;transition:background .14s ease,border-color .14s ease
}
.szp-suggest-hit:hover{
  background:linear-gradient(180deg,rgba(255,255,255,1),rgba(255,247,240,.9));
  border-color:rgba(232,122,44,.26)
}
.szp-suggest-hit img,.szp-suggest-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-suggest-noimg{display:grid;place-items:center;color:#9aa6b2;font-size:1.1rem}
.szp-suggest-hit b{flex:1;min-width:0;font-size:.87rem;font-weight:600;line-height:1.7}
.szp-suggest-hit small{
  font-size:.82rem;font-weight:800;white-space:nowrap;
  color:var(--szp-accent-ink,#a85c20)
}

/* 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;
  /* Not `fixed`: four fixed layers force a full repaint of every gradient on every
     scroll frame, which on a phone is the most expensive thing on the page and buys
     nothing — these washes are soft enough that scrolling with them looks the same. */
  background-attachment: scroll !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{
  position:absolute;inset-inline:0;top:calc(100% + 6px);z-index:99990;
  max-height:min(62vh,460px);overflow-y:auto;overscroll-behavior:contain;
  border-radius:14px;background:#fff;color:#172334;
  border:1px solid rgba(13,35,55,.12);
  box-shadow:0 18px 44px rgba(13,35,55,.18);
  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}
.szp-smart-chip{
  border:1px solid rgba(13,35,55,.14);background:#f7f9fa;color:#172334;cursor:pointer;
  font:inherit;font-size:.78rem;font-weight:700;padding:6px 11px;border-radius:999px
}
.szp-smart-chip:hover{border-color:#e8720c;background:#fff}
.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:10px;padding:9px 12px;text-decoration:none;color:inherit}
.szp-smart-hit:hover{background:rgba(232,122,44,.08)}
.szp-smart-hit img,.szp-smart-noimg{
  width:40px;height:40px;flex:0 0 auto;border-radius:8px;object-fit:cover;background:#eef2f5
}
.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}

/* Admin-only notice where the banner strip would be. Quiet, and clearly not content. */
.szp-banner-empty{padding-block:10px!important}
.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}

/* ---------------------------------------------------------------------------
   The building advisor.
   A conversation that ends in a document, so it changes shape halfway: bubbles while
   it is asking, a numbered plan once it has enough to say something useful.
--------------------------------------------------------------------------- */
.szp-adv-card{padding:16px}
.szp-adv-thread{display:grid;gap:10px;margin-bottom:14px;max-height:52vh;overflow-y:auto;overscroll-behavior:contain}
.szp-adv-bubble{
  max-width:88%;padding:11px 14px;border-radius:16px;font-size:.88rem;line-height:1.95;
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(248,250,252,.86));
  border:1px solid rgba(13,35,55,.10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 1px 2px rgba(13,35,55,.05)
}
.szp-adv-bubble b{display:block;font-size:.95rem;margin-bottom:3px}
.szp-adv-bubble small{display:block;font-size:.78rem;color:var(--szp-v17-muted,#647286);line-height:1.85}
.szp-adv-bubble.is-you{
  margin-inline-start:auto;color:#fff;border-color:transparent;
  background:linear-gradient(135deg,#12314f,#0b1d31);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 4px 12px rgba(11,29,49,.22)
}
.szp-adv-bubble.is-wait{color:var(--szp-v17-muted,#647286)}
.szp-adv-form{display:flex;gap:9px}
.szp-adv-form input{
  flex:1;min-height:48px;padding:0 14px;border-radius:13px;font:inherit;font-size:.92rem;
  background:#fff;color:var(--szp-v17-ink,#172334);
  border:1px solid rgba(13,35,55,.16);
  box-shadow:inset 0 1px 2px rgba(13,35,55,.05)
}
.szp-adv-form input:focus{outline:0;border-color:var(--szp-accent,#e8720c);box-shadow:0 0 0 3px rgba(232,114,12,.16)}
.szp-adv-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:11px}
.szp-adv-chip{
  border:1px solid rgba(13,35,55,.14)!important;
  background:linear-gradient(180deg,#fff,#f5f8fa)!important;
  color:var(--szp-v17-ink,#172334)!important;-webkit-text-fill-color:var(--szp-v17-ink,#172334)!important;
  cursor:pointer;font:inherit!important;font-size:.82rem!important;font-weight:700!important;
  padding:8px 14px!important;border-radius:999px!important;min-height:0!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 1px 2px rgba(13,35,55,.05)!important
}
.szp-adv-chip:hover{border-color:rgba(232,122,44,.5)!important;background:linear-gradient(180deg,#fff,#fff3e9)!important}

.szp-adv-plan{margin-top:16px;padding:18px}
.szp-adv-h3{margin:22px 0 10px;font-size:1.05rem}
.szp-adv-stages{list-style:none;margin:0;padding:0;display:grid;gap:12px;counter-reset:none}
.szp-adv-stages li{
  display:flex;gap:12px;padding:13px 14px;border-radius:14px;
  background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(249,251,252,.84));
  border:1px solid rgba(13,35,55,.09);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9)
}
.szp-adv-num{
  flex:0 0 auto;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  font-weight:800;font-size:.85rem;color:#fff;
  background:linear-gradient(135deg,#f08a2c,#d9660a)
}
.szp-adv-stages b{display:block;font-size:.95rem}
.szp-adv-weeks{
  display:inline-block;margin:4px 0 7px;padding:3px 10px;border-radius:999px;
  font-size:.76rem;font-weight:800;color:#8a5216;background:rgba(232,122,44,.12)
}
.szp-adv-stages p{margin:0 0 6px;font-size:.85rem;line-height:1.95;color:var(--szp-v17-ink,#172334)}
/* سازَک's own note on a stage — something he tells you, not a question to carry to
   somebody else. Marked as his voice with the accent rule rather than a label. */
.szp-adv-ask{
  margin-top:8px!important;padding:8px 11px!important;border-radius:10px!important;
  background:rgba(232,122,44,.07)!important;
  border-inline-start:3px solid rgba(232,122,44,.5)!important;
  font-size:.83rem!important;line-height:1.95!important
}
.szp-adv-ask em{font-style:normal;font-weight:600;color:var(--szp-v17-ink,#172334)}
.szp-adv-lean{
  margin:0 0 12px;padding:11px 13px;border-radius:12px;font-size:.85rem;line-height:1.9;
  background:rgba(232,122,44,.09);border:1px solid rgba(232,122,44,.28);color:#8a5216
}
.szp-adv-table{width:100%;border-collapse:collapse;font-size:.84rem}
.szp-adv-table th,.szp-adv-table td{padding:9px 8px;text-align:right;border-bottom:1px solid rgba(13,35,55,.09);line-height:1.8}
.szp-adv-table thead th{font-size:.78rem;color:var(--szp-v17-muted,#647286);font-weight:800}
.szp-adv-table tbody th{font-weight:700;width:32%}
.szp-adv-money{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,260px));gap:10px;justify-content:start;margin-bottom:8px}
.szp-adv-money>div{
  padding:12px 14px;border-radius:13px;display:grid;gap:3px;
  background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(249,251,252,.84));
  border:1px solid rgba(13,35,55,.09)
}
.szp-adv-money span{font-size:.78rem;color:var(--szp-v17-muted,#647286)}
.szp-adv-money b{font-size:1.02rem;font-weight:800}
.szp-adv-nomoney{
  margin:0;padding:12px 14px;border-radius:12px;font-size:.85rem;line-height:1.95;
  background:#f6f8fa;border:1px dashed rgba(13,35,55,.2);color:var(--szp-v17-muted,#5a6875)
}
.szp-adv-actions{margin-top:18px}
@media (max-width:560px){
  .szp-adv-table thead{display:none}
  .szp-adv-table tbody th{display:block;width:auto;border:0;padding-bottom:2px}
  .szp-adv-table td{display:block;padding:4px 8px 4px 20px;position:relative}
  .szp-adv-table td:nth-of-type(1)::before{content:'پیش‌ساخته: ';font-weight:800;color:#647286}
  .szp-adv-table td:nth-of-type(2)::before{content:'سنتی: ';font-weight:800;color:#647286}
  .szp-adv-table tbody tr{display:block;padding:8px 0;border-bottom:1px solid rgba(13,35,55,.09)}
}

/* The narrow/widen offer under a calculator result. Quiet — it is a suggestion, not a
   correction, and the answer above it is already the one that was asked for. */
.szp-wb-widen{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:14px;
  padding:12px 14px;border-radius:13px;font-size:.85rem;line-height:1.9;
  background:rgba(232,122,44,.07);border:1px dashed rgba(232,122,44,.35);
  color:#8a5216
}
.szp-wb-widen span{flex:1;min-width:200px}

/* ---------------------------------------------------------------------------
   سازَک.

   He blinks on a timer and squeezes his eyes shut while thinking, which is the whole
   difference between a picture next to a chat and a character in one. Both stop for
   anybody who asked their system for less motion — an animated face beside text is
   exactly the kind of movement that setting exists for.
--------------------------------------------------------------------------- */
.szp-mascot{display:inline-grid;place-items:center;flex:0 0 auto;line-height:0}
.szp-mascot svg{display:block;filter:drop-shadow(0 6px 14px rgba(180,90,20,.22))}
.szp-mascot-eyes{transform-origin:32px 38px;animation:szpBlink 5.5s infinite}
@keyframes szpBlink{
  0%,92%,100%{transform:scaleY(1)}
  95%{transform:scaleY(.12)}
}
.szp-mascot.is-thinking .szp-mascot-eyes{animation:szpThink 1.1s ease-in-out infinite}
@keyframes szpThink{
  0%,100%{transform:scaleY(1) translateY(0)}
  50%{transform:scaleY(.55) translateY(1px)}
}
.szp-mascot.is-thinking svg{animation:szpNod 1.6s ease-in-out infinite}
@keyframes szpNod{0%,100%{transform:rotate(0)}35%{transform:rotate(-3deg)}70%{transform:rotate(2deg)}}
@media (prefers-reduced-motion: reduce){
  .szp-mascot-eyes,.szp-mascot.is-thinking .szp-mascot-eyes,.szp-mascot.is-thinking svg{animation:none}
}

.szp-adv-intro{display:flex;align-items:flex-start;gap:16px}
.szp-adv-intro h2{margin-bottom:6px}
@media (max-width:560px){ .szp-adv-intro{gap:11px} .szp-adv-intro .szp-mascot svg{width:54px;height:54px} }

/* ---------------------------------------------------------------------------
   The conversation.

   سازَک on the left with his face beside the bubble, the person on the right — the
   arrangement everybody already knows from a messaging app, so nobody has to learn it.
   Sides are set with auto margins rather than `justify-content`, because in RTL the
   flex keywords swap and reading `flex-start` as "the right" is the kind of cleverness
   that breaks the first time somebody views the page in the other direction.

   The bubble has a tail pointing back at his mouth. That is the difference between a
   picture next to some text and a character saying something.
--------------------------------------------------------------------------- */
.szp-adv-row{display:flex;align-items:flex-end;gap:9px;margin-bottom:10px}
.szp-adv-row.is-you{margin-inline-end:auto;flex-direction:row-reverse}
.szp-adv-row.is-bot{margin-inline-start:auto}
.szp-adv-row.is-you .szp-adv-bubble{max-width:min(78%,420px)}
.szp-adv-row.is-bot .szp-adv-bubble{max-width:min(84%,560px)}

.szp-adv-face{flex:0 0 auto;width:52px;display:grid;place-items:end center}
.szp-adv-face svg{width:52px;height:52px}
.szp-adv-face.is-quiet{width:52px}

/* The tail. Drawn as a rotated square rather than a border triangle so it inherits the
   bubble's own background and border and stays right when either changes. */
.szp-adv-bubble.is-bot{position:relative;border-start-end-radius:6px}
.szp-adv-bubble.is-bot::before{
  content:'';position:absolute;inset-inline-end:-5px;bottom:13px;
  width:11px;height:11px;transform:rotate(45deg);
  background:inherit;border:inherit;border-width:1px;
  clip-path:polygon(100% 0,100% 100%,0 100%)
}
.szp-adv-bubble.is-bot.is-runon::before{display:none}
.szp-adv-bubble.is-you{position:relative;border-start-start-radius:6px}

@media (max-width:560px){
  .szp-adv-face,.szp-adv-face svg{width:40px}
  .szp-adv-face svg{height:40px}
  .szp-adv-row.is-bot .szp-adv-bubble{max-width:82%}
}

/* «typing» — three dots, because a spinner beside a face reads as an error. */
.szp-adv-dots{display:inline-flex;gap:4px;align-items:center;height:1.2em}
.szp-adv-dots i{
  width:6px;height:6px;border-radius:50%;background:var(--szp-v17-muted,#8b97a5);
  animation:szpDot 1.2s infinite ease-in-out
}
.szp-adv-dots i:nth-child(2){animation-delay:.16s}
.szp-adv-dots i:nth-child(3){animation-delay:.32s}
@keyframes szpDot{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
@media (prefers-reduced-motion: reduce){ .szp-adv-dots i{animation:none;opacity:.6} }

/* The written consultation: the thing the owner asked for — سازَک answering, not
   deferring. Headings are his own section breaks, so they get real weight. */
.szp-adv-consult-card{padding:18px;margin-bottom:16px}
.szp-adv-consult-head{display:flex;align-items:center;gap:12px;margin-bottom:14px;
  padding-bottom:13px;border-bottom:1px solid rgba(13,35,55,.1)}
.szp-adv-consult-head .szp-mascot svg{width:46px;height:46px}
.szp-adv-consult-head b{display:block;font-size:1rem}
.szp-adv-consult-head small{font-size:.79rem;color:var(--szp-v17-muted,#647286)}
.szp-adv-writing{display:flex;align-items:center;gap:9px;font-size:.86rem;color:var(--szp-v17-muted,#647286);padding:8px 0}
.szp-adv-consult p{margin:0 0 10px;font-size:.89rem;line-height:2.05}
.szp-adv-ch{
  margin:20px 0 9px;font-size:.94rem;font-weight:800;color:var(--szp-v17-ink,#172334);
  padding-inline-start:11px;border-inline-start:3px solid var(--szp-accent,#e8720c)
}
.szp-adv-ch:first-child{margin-top:0}
.szp-adv-cli{
  margin:0 0 8px;padding-inline-start:16px;position:relative;font-size:.88rem;line-height:2
}
.szp-adv-cli::before{
  content:'';position:absolute;inset-inline-start:0;top:.85em;
  width:6px;height:6px;border-radius:50%;background:var(--szp-accent,#e8720c)
}

/* The sign-in panel that stands in for a tool. Not a wall — an invitation with a
   reason, which is why the mascot is on it and the copy says what is kept and why. */
.szp-toolwall{padding-block:clamp(24px,5vw,56px)}
.szp-toolwall-card{
  max-width:520px;margin-inline:auto;text-align:center;padding:clamp(22px,4vw,34px);
  display:grid;justify-items:center;gap:10px
}
.szp-toolwall-card h2{margin:6px 0 0;font-size:clamp(1.15rem,2.4vw,1.5rem)}
.szp-toolwall-card p{margin:0;max-width:42ch;line-height:2}
.szp-toolwall-how{font-size:.82rem!important}
.szp-toolwall-card .szp-btn{margin-top:8px;min-width:220px}

/* The consultant handover. Distinct from the advice above it — that was سازَک talking,
   this is an offer — so it gets the accent ground rather than another white card. */
.szp-adv-cta{
  margin-top:16px;padding:18px;text-align:center;display:grid;justify-items:center;gap:8px;
  background:linear-gradient(180deg,rgba(232,122,44,.09),rgba(232,122,44,.04))!important;
  border:1px solid rgba(232,122,44,.28)!important
}
.szp-adv-cta b{font-size:1rem}
.szp-adv-cta p{margin:0;max-width:46ch;font-size:.85rem;line-height:1.95;color:var(--szp-v17-muted,#647286)}
.szp-adv-cta-row{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin-top:6px}

/* ---------------------------------------------------------------------------
 * 3.11 — the request flow's stepper.
 *
 * Six stations over a filled rail, on a pane of real glass. The `:before` rail the old
 * bar drew is switched off here rather than deleted, because the same element still
 * carries the width the JS sets — one source of truth for "how far along am I".
 *
 * The glass has something to bend: the pane sits on its own tinted gradient, so
 * `backdrop-filter` produces frost rather than the flat grey it gives over plain white
 * (HANDOFF §8). Where the filter is unsupported the gradient alone still reads as a
 * panel, so nothing depends on it.
 * ------------------------------------------------------------------------- */
.szp-dialog-progress{padding:14px 20px 4px}
.szp-dialog-progress:before{display:none}
/*
 * The old bar's rule was `.szp-dialog-progress span`, which is every span in here — so
 * it caught each station's dot as well and flattened it to a 5px orange dash with the
 * icon spilling out underneath. Measured on the live dialog. The rail is addressed by
 * its id now, and the dot restates its own box at a weight that rule cannot reach.
 */
.szp-dialog-progress span{height:auto;margin-top:0;background:none;border-radius:0}
.szp-dialog-progress .szp-steps-rail>span#szpFlowProgress{display:block;height:100%;margin:0;
	border-radius:99px;background:linear-gradient(90deg,#f2a24a,#e47a2c)}
.szp-dialog-progress .szp-steps .szp-step>span.szp-step-dot{
	display:grid;place-items:center;width:30px;height:30px;min-height:30px;border-radius:50%;
	margin:0;background:rgba(255,255,255,.92)}
.szp-dialog-progress .szp-steps .szp-step.is-done>span.szp-step-dot{background:#0b1d31}
.szp-dialog-progress .szp-steps .szp-step.is-current>span.szp-step-dot{
	background:linear-gradient(140deg,#f2a24a,#e47a2c)}
.szp-steps-glass{position:relative;border-radius:18px;padding:14px 16px 12px;
	background:linear-gradient(135deg,rgba(228,122,44,.13),rgba(11,29,49,.09) 55%,rgba(228,122,44,.08));
	border:1px solid rgba(255,255,255,.55);
	box-shadow:0 10px 26px rgba(11,29,49,.10),inset 0 1px 0 rgba(255,255,255,.75);
	-webkit-backdrop-filter:blur(14px) saturate(1.5);backdrop-filter:blur(14px) saturate(1.5);overflow:hidden}
.szp-steps-glass:after{content:'';position:absolute;inset:0;pointer-events:none;border-radius:inherit;
	background:linear-gradient(115deg,rgba(255,255,255,.55),rgba(255,255,255,0) 42%)}
.szp-steps-rail{position:absolute;inset-inline:34px;top:27px;height:4px;border-radius:99px;
	background:rgba(11,29,49,.13);overflow:hidden}
.szp-steps-rail span{display:block;height:100%;width:0;border-radius:99px;
	background:linear-gradient(90deg,#f2a24a,#e47a2c);transition:width .32s cubic-bezier(.4,0,.2,1)}
.szp-steps{position:relative;z-index:1;display:flex;justify-content:space-between;gap:4px;
	margin:0;padding:0;list-style:none}
.szp-step{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.szp-step-dot{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
	background:rgba(255,255,255,.92);border:1px solid rgba(11,29,49,.16);color:#8494a5;
	box-shadow:0 2px 8px rgba(11,29,49,.10);transition:transform .25s,background .25s,color .25s,border-color .25s}
.szp-step-dot svg{width:16px;height:16px}
.szp-step b{font-size:.68rem;font-weight:700;color:var(--szp-v17-muted,#647286);
	white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.szp-step.is-done .szp-step-dot{background:#0b1d31;border-color:#0b1d31;color:#fff}
.szp-step.is-done b{color:var(--szp-v17-ink,#172334)}
.szp-step.is-current .szp-step-dot{background:linear-gradient(140deg,#f2a24a,#e47a2c);
	border-color:rgba(228,122,44,.55);color:#fff;transform:scale(1.16);
	box-shadow:0 0 0 5px rgba(228,122,44,.16),0 6px 16px rgba(228,122,44,.35)}
.szp-step.is-current b{color:var(--szp-v17-orange,#e47a2c);font-weight:800}
.szp-dialog-progress b#szpFlowCount{margin-top:8px;text-align:center}
@media (max-width:520px){
	.szp-steps-rail{inset-inline:26px;top:24px}
	.szp-step-dot{width:26px;height:26px}
	.szp-step-dot svg{width:14px;height:14px}
	.szp-step b{font-size:.6rem}
}
@media (prefers-reduced-motion:reduce){
	.szp-steps-rail span,.szp-step-dot{transition:none}
}

/* ---------------------------------------------------------------------------
 * 3.11 — controls that stay controls.
 *
 * `.szp-dash-form input{width:100%;min-height:44px}` was written for text fields and
 * caught every checkbox and radio in the platform with it: a tick became a 44px-tall
 * box as wide as the form. That is the report about «خدمات و مناطق» looking scattered,
 * and it was never only that screen — the same rule reaches the ticket form, the price
 * alert form, the consent lines and every choice grid.
 *
 * Fixed once, here, by type rather than by screen, so a form added next month inherits
 * the right answer instead of the bug.
 * ------------------------------------------------------------------------- */
.szp input[type=checkbox],.szp input[type=radio],
.szp-dash input[type=checkbox],.szp-dash input[type=radio],
[data-szp-dash] input[type=checkbox],[data-szp-dash] input[type=radio],
.szp-dash-form input[type=checkbox],.szp-dash-form input[type=radio],
.szp-ticket-form input[type=checkbox],.szp-ticket-form input[type=radio],
.szp-market-form input[type=checkbox],.szp-market-form input[type=radio],
.szp-modal input[type=checkbox],.szp-modal input[type=radio]{
	width:18px!important;min-width:18px;max-width:18px;height:18px!important;min-height:18px!important;
	flex:0 0 18px;margin:0;padding:0;accent-color:var(--szp-v17-orange,#e47a2c);cursor:pointer;
	-webkit-appearance:auto;appearance:auto;box-shadow:none;border-radius:4px;vertical-align:middle}
.szp input[type=radio],.szp-dash input[type=radio],[data-szp-dash] input[type=radio],
.szp-dash-form input[type=radio],.szp-ticket-form input[type=radio],
.szp-market-form input[type=radio],.szp-modal input[type=radio]{border-radius:50%}

/* A label that holds a tick is a row, not a stacked field. `.szp-dash-form label{display:grid}`
   is right for «عنوان + ورودی» and wrong the moment the control is a checkbox. */
.szp-dash-form label:has(> input[type=checkbox]),
.szp-dash-form label:has(> input[type=radio]),
.szp-checkgrid label,.szp-check-grid label,.szp-choice-grid label,
.szp-checkbox-line,.szp-field-check{
	display:flex!important;align-items:center;gap:8px;line-height:1.8}
.szp-checkgrid label>span,.szp-check-grid label>span,.szp-choice-grid label>span{
	font-weight:600;font-size:.82rem}

/* ---------------------------------------------------------------------------
 * Backgrounds that are actually painted.
 *
 * Half the panels in this platform declared a radius, a border and a padding and left
 * the background to whatever was behind them. On the white marketplace pages that looks
 * deliberate; on the dashboards — which the theme paints navy — it is an invisible box
 * with text floating in it, which is the "بگراند مشکل داره" report and it is not one
 * screen, it is every screen that inherited the omission.
 * ------------------------------------------------------------------------- */
.szp-ticket-form,.szp-alert-form,.szp-dash-form.szp-alert-form,
.szp-dash .szp-dash-form,[data-szp-dash] .szp-dash-form{
	background:var(--szp-v17-surface,#fff);
	border:1px solid var(--szp-v17-border,#e1e6ea);
	color:var(--szp-v17-ink,#172334)}
.szp-ticket-form label,.szp-ticket-form legend,
.szp-dash-form label>span,.szp-dash-form legend{color:var(--szp-v17-ink,#172334)}
.szp-provider-dashboard .szp-dashboard-card,
.szp-provider-dashboard .szp-ticket-form,
.szp-provider-dashboard .szp-dash-form{background:var(--szp-v17-surface,#fff);color:var(--szp-v17-ink,#172334)}
.szp-provider-dashboard .szp-dashboard-card h2,
.szp-provider-dashboard .szp-dashboard-card h3,
.szp-provider-dashboard .szp-dashboard-card b,
.szp-provider-dashboard .szp-dashboard-card p,
.szp-provider-dashboard .szp-dashboard-card li,
.szp-provider-dashboard .szp-dashboard-card label{color:var(--szp-v17-ink,#172334)}
.szp-provider-dashboard .szp-dashboard-card .szp-muted,
.szp-provider-dashboard .szp-dashboard-card small{color:var(--szp-v17-muted,#647286)}
.szp-provider-dashboard .szp-ticket-list li{background:#fbfcfd;border:1px solid var(--szp-v17-border,#e1e6ea);
	border-radius:12px;padding:12px;margin-bottom:8px}

/* Every text control on our screens gets a surface and an ink colour of its own, so the
   theme's kit cannot leave one white-on-white. Kaveh paints with background-clip on some
   text, so `-webkit-text-fill-color` is required alongside `color` (HANDOFF §8). */
.szp input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]),
.szp select,.szp textarea,
.szp-dash input:not([type=checkbox]):not([type=radio]),.szp-dash select,.szp-dash textarea,
[data-szp-dash] input:not([type=checkbox]):not([type=radio]),[data-szp-dash] select,[data-szp-dash] textarea{
	background:#fff!important;color:var(--szp-v17-ink,#172334)!important;
	-webkit-text-fill-color:var(--szp-v17-ink,#172334)!important;
	border:1px solid #cbd4da;border-radius:12px;padding:10px 12px}
.szp input::placeholder,.szp textarea::placeholder,
.szp-dash input::placeholder,.szp-dash textarea::placeholder,
[data-szp-dash] input::placeholder,[data-szp-dash] textarea::placeholder{
	color:#8b97a6!important;-webkit-text-fill-color:#8b97a6!important;opacity:1}

/* ---------------------------------------------------------------------------
 * Buttons, once and for all.
 *
 * The theme makes every <button> orange and paints some of its text with
 * `background-clip`, which is why `color` alone has repeatedly failed to hold and why
 * this keeps coming back. Both properties, both `!important`, stated per variant.
 * ------------------------------------------------------------------------- */
.szp .szp-btn,.szp-dash .szp-btn,[data-szp-dash] .szp-btn,.szp-modal .szp-btn,
.szp .szp-dash-btn,.szp-dash .szp-dash-btn,[data-szp-dash] .szp-dash-btn{
	display:inline-flex;align-items:center;justify-content:center;gap:7px;
	min-height:44px;padding:10px 18px;border-radius:12px;border:1px solid transparent;
	font-weight:800;font-size:.86rem;cursor:pointer;line-height:1;
	transition:transform .15s,box-shadow .18s,background .18s}
.szp .szp-btn-primary,.szp-dash .szp-btn-primary,[data-szp-dash] .szp-btn-primary,
.szp .szp-dash-btn-primary,.szp-dash .szp-dash-btn-primary,[data-szp-dash] .szp-dash-btn-primary,
.szp-modal .szp-btn-primary{
	background:linear-gradient(135deg,#f0913c,#e47a2c)!important;border-color:#d9660a!important;
	color:#fff!important;-webkit-text-fill-color:#fff!important;
	box-shadow:0 6px 16px rgba(228,122,44,.28)}
.szp .szp-btn-secondary,.szp-dash .szp-btn-secondary,[data-szp-dash] .szp-btn-secondary,
.szp-modal .szp-btn-secondary,
.szp .szp-dash-btn:not(.szp-dash-btn-primary),.szp-dash .szp-dash-btn:not(.szp-dash-btn-primary),
[data-szp-dash] .szp-dash-btn:not(.szp-dash-btn-primary){
	background:#fff!important;border-color:#cbd4da!important;
	color:var(--szp-v17-navy,#0b1d31)!important;-webkit-text-fill-color:var(--szp-v17-navy,#0b1d31)!important;
	box-shadow:none!important}
.szp .szp-btn:disabled,.szp-dash .szp-btn:disabled,[data-szp-dash] .szp-btn:disabled,
.szp .szp-dash-btn:disabled,.szp-dash .szp-dash-btn:disabled{opacity:.55;cursor:not-allowed;transform:none}

/* ---------------------------------------------------------------------------
 * 3.11 — سازَک talks.
 *
 * The mouth was a printed rectangle: he had a face and it never moved, so every reply
 * arrived from something that looked like a diagram. `is-talking` is set for as long as
 * a reply is being written and cleared when it lands, and the two ellipses that make the
 * mouth open on a loop while it is on. Animated on `ry` rather than a transform, so the
 * doorstep stays put and he speaks rather than chews.
 *
 * The eyes are round now (see SZP_Advisor::mascot), so the blink squashes a circle
 * rather than a window — same animation, better shape.
 * ------------------------------------------------------------------------- */
@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}
}
/* Browsers that cannot animate the `ry` presentation attribute still get a mouth that
   moves: the fallback scales the group about its own top edge, which reads as a jaw. */
@keyframes szpMascotJaw{
	0%,100%{transform:scaleY(1)}
	25%{transform:scaleY(1.7)}
	50%{transform:scaleY(.6)}
	75%{transform:scaleY(1.5)}
}
.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}
/* Thinking is a different state from talking: eyes shut, mouth still. */
.szp-mascot.is-thinking .szp-mascot-mouth,
.szp-mascot.is-thinking .szp-mascot-lip,
.szp-mascot.is-thinking .szp-mascot-gap{animation:none}
@media (prefers-reduced-motion:reduce){
	.szp-mascot.is-talking .szp-mascot-mouth,
	.szp-mascot.is-talking .szp-mascot-lip,
	.szp-mascot.is-talking .szp-mascot-gap{animation:none}
}

/* The export control: quiet, because it is never the main action on a screen. */
.szp-dash-btn-ghost{background:transparent!important;border:1px dashed #b9c4cd!important;
	color:var(--szp-v17-muted,#647286)!important;-webkit-text-fill-color:var(--szp-v17-muted,#647286)!important;
	font-weight:700!important;text-decoration:none}
.szp-dash-btn-ghost:hover{border-color:var(--szp-v17-orange,#e47a2c)!important;
	color:var(--szp-v17-orange,#e47a2c)!important;-webkit-text-fill-color:var(--szp-v17-orange,#e47a2c)!important}
.szp-dash-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.szp-dash-head h2{margin-inline-end:auto}
/* The picked-product hint and the cheaper shelf on the alerts screen. */
.szp-alert-results button{display:flex;align-items:center;justify-content:space-between;gap:10px;
	width:100%;text-align:start;padding:9px 11px;background:#fff;border:0;border-bottom:1px solid #eef1f4;cursor:pointer}
.szp-alert-results button:hover{background:#fff7ef}
.szp-alert-results button span{font-size:.78rem;color:var(--szp-v17-muted,#647286);white-space:nowrap}
.szp-alert-results button span.is-quiet{font-style:italic;opacity:.75}
.szp-cheaper{margin-top:14px;padding:14px;border-radius:14px;background:#f4f9f6;border:1px solid #cfe6da}
.szp-cheaper h4{margin:0 0 8px;font-size:.88rem;color:#0f6b52}
.szp-cheaper ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.szp-cheaper li{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:.82rem}
.szp-cheaper li a{font-weight:700;color:var(--szp-v17-navy,#0b1d31);margin-inline-end:auto}
.szp-cheaper li small{color:#0f6b52;font-weight:800}

/* ---------------------------------------------------------------------------
 * 3.11 — the transcript, in the shape everybody already knows.
 *
 * `.szp-chat-msg.is-mine{align-self:flex-end}` was the whole of the old layout, and its
 * container was not a flex column — so it did nothing and both sides of the conversation
 * printed as identical full-width blocks. Sender is position, time sits on the bubble,
 * and the day is a separator rather than a repetition on every line.
 *
 * RTL note (HANDOFF §8): `flex-start` and `flex-end` swap sides under `dir="rtl"`, which
 * is exactly the behaviour wanted here — "mine" is the reading-start edge either way —
 * so the logical keywords are correct and must not be replaced with left/right.
 * ------------------------------------------------------------------------- */
.szp-chat-drawer-body{display:flex;flex-direction:column;gap:2px;overflow-y:auto}
.szp-chat-row{display:flex;width:100%;margin-block:1px}
.szp-chat-row.is-mine{justify-content:flex-start}
.szp-chat-row.is-them{justify-content:flex-end}
.szp-chat-msg{max-width:min(78%,420px);padding:9px 12px 6px;border-radius:16px;
	background:#fff;border:1px solid #e4e9ee;box-shadow:0 1px 2px rgba(13,35,55,.06);
	position:relative;word-break:break-word}
.szp-chat-row.is-mine .szp-chat-msg{border-start-start-radius:6px;
	background:#fff3e6;border-color:#f0d4b6}
.szp-chat-row.is-them .szp-chat-msg{border-start-end-radius:6px}
.szp-chat-msg-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:3px}
.szp-chat-msg time{display:inline-block;margin:0;font-size:.66rem;font-variant-numeric:tabular-nums;
	color:#8a97a5;white-space:nowrap}
.szp-chat-reply{border:0;background:none;padding:0;font-size:.68rem;font-weight:700;
	color:#a85c20;cursor:pointer;opacity:0;transition:opacity .15s}
.szp-chat-msg:hover .szp-chat-reply,.szp-chat-msg:focus-within .szp-chat-reply{opacity:1}
@media (hover:none){ .szp-chat-reply{opacity:.75} }

/* The day marker: one line, centred, sticky so you always know where you are. */
.szp-chat-day{position:sticky;top:0;z-index:2;display:flex;justify-content:center;
	margin:12px 0 6px;pointer-events:none}
.szp-chat-day span{padding:3px 12px;border-radius:999px;font-size:.68rem;font-weight:800;
	color:#5a6675;background:rgba(240,243,246,.94);border:1px solid rgba(13,35,55,.07);
	-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}

/* The fork between carrying on and starting again. */
.szp-chat-landing{display:grid;gap:10px;padding:6px 2px}
.szp-chat-choice{display:grid;gap:3px;text-align:start;width:100%;padding:14px 16px;
	border-radius:14px;border:1px solid #e1e6ea;background:#fff!important;cursor:pointer}
.szp-chat-choice:hover{border-color:var(--szp-v17-orange,#e47a2c);box-shadow:0 6px 18px rgba(13,35,55,.08)}
.szp-chat-choice b{font-size:.9rem;font-weight:800}
.szp-chat-choice span{font-size:.76rem;color:var(--szp-v17-muted,#647286)}
.szp-chat-listitem{display:grid;grid-template-columns:1fr auto;gap:2px 8px;width:100%;
	text-align:start;padding:11px 13px;border:0;border-bottom:1px solid #eef1f4;
	background:#fff!important;cursor:pointer}
.szp-chat-listitem:hover{background:#fff8f2!important}
.szp-chat-listitem b{font-size:.86rem;font-weight:800}
.szp-chat-listitem time{font-size:.7rem;color:var(--szp-v17-muted,#647286);white-space:nowrap;
	font-variant-numeric:tabular-nums}
.szp-chat-listitem small{grid-column:1/-1;font-size:.74rem;color:var(--szp-v17-muted,#647286);
	overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.szp-chat-listbadge{align-self:center;min-width:20px;padding:1px 6px;border-radius:999px;
	background:var(--szp-v17-orange,#e47a2c);color:#fff;font-size:.68rem;font-weight:800;text-align:center}

/* The hall, and the consent it asks for. Deliberately not styled like a normal row: an
   out-of-résumé job carries a condition, and the row should look like it does. */
.szp-hall-list li.is-outside{border-color:#f0d4b6;background:#fffaf4}
.szp-hall-flag{background:#fff0dc!important;color:#a85c20!important;border:1px solid #f0d4b6}
.szp-hall-consent{display:flex!important;align-items:flex-start;gap:9px;margin:10px 0;
	font-size:.78rem;line-height:1.85;color:#5a4634}
.szp-hall-consent input{margin-top:4px}
.szp-hall-note{margin:8px 0 0;font-size:.78rem;font-weight:700;color:#a85c20}
.szp-dash-offer{margin:12px 0;padding:14px;border-radius:14px;background:#fffaf4;border:1px solid #f0d4b6}
.szp-dash-offer-tag{display:inline-block;margin-bottom:6px;padding:2px 10px;border-radius:999px;
	background:#fff0dc;color:#a85c20;font-size:.7rem;font-weight:800}
.szp-dash-offer p{margin:0;font-size:.82rem;line-height:1.95;color:var(--szp-v17-ink,#172334)}
.szp-dash-offer-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:11px}

/* ---------------------------------------------------------------------------
 * 3.11.3 — the invisible button, and why it was invisible.
 *
 * The chat launcher carries `szp szp-v17` so it inherits the platform's font and
 * tokens. `szp-v17` is also the *page shell* class, and the shell paints itself with
 * `html body .szp-v17{background:radial-gradient(...)!important}` — same specificity as
 * `html body .szp-fab`, declared later, so the page's own wash won on a button. Measured
 * on the live dashboard: computed background `rgba(0,0,0,0)`, white text, contrast ratio
 * **1.00**. Not "hard to read": literally not there.
 *
 * Two halves, because either alone would leave the trap set for the next control:
 *   1. a shell background must never paint a control — stated on the shell rule;
 *   2. the launcher restates its own paint through a tag selector, which no
 *      class-only rule can outrank.
 * ------------------------------------------------------------------------- */
html body .szp-v17:is(button, a, input, select, textarea, label),
html body .szp:is(button, a, input, select, textarea, label){
	background:none;background-image:none}
html body button.szp-fab,
html body button.szp-fab.szp-fab-chat{
	background:linear-gradient(180deg,#f0913f,#e07521)!important;
	background-image:linear-gradient(180deg,#f0913f,#e07521)!important;
	color:#fff!important;-webkit-text-fill-color:#fff!important;
	border:1px solid rgba(255,255,255,.28)!important}
html body button.szp-fab svg{fill:#fff!important}
html body button.szp-fab .szp-fab-label{color:#fff!important;-webkit-text-fill-color:#fff!important}

/* ---------------------------------------------------------------------------
 * 3.11.3 — room to breathe.
 *
 * The complaint is one thing said about many screens: «همه چیز بهم چسبیده — نوشته به
 * قالب، قالب به دکمه، دکمه به نوشته». It is true, and it is not a hundred separate
 * mistakes; it is the absence of a rhythm. Everything below is one scale applied at the
 * places where two elements meet, rather than a nudge on whichever box was complained
 * about — a nudge is how the next screen ends up different from this one.
 *
 * The scale: 8 / 12 / 18 / 26. Cards get the largest, groups the middle, controls the
 * smallest. Nothing sits closer than 8px to anything else.
 * ------------------------------------------------------------------------- */
.szp-dash,[data-szp-dash]{--szp-x1:8px;--szp-x2:12px;--szp-x3:18px;--szp-x4:26px}

/* The card: real padding, and space between it and the next card. */
.szp-dash .szp-dashboard-card,[data-szp-dash] .szp-dashboard-card,
.szp-dash .szp-dash-card,[data-szp-dash] .szp-dash-card{
	padding:clamp(18px,2.4vw,26px);margin-bottom:var(--szp-x3)}
.szp-dash .szp-dashboard-card > * + *,[data-szp-dash] .szp-dashboard-card > * + *{margin-top:var(--szp-x3)}

/* The heading and its controls: a real gap under the rule, not a hairline. */
.szp-dash .szp-dash-head,[data-szp-dash] .szp-dash-head{
	padding-bottom:var(--szp-x2);margin-bottom:var(--szp-x3);gap:var(--szp-x2);
	border-bottom:1px solid var(--szp-v17-border,#e1e6ea)}
.szp-dash .szp-dash-head h2,[data-szp-dash] .szp-dash-head h2{line-height:1.5}
.szp-dash .szp-card-head,[data-szp-dash] .szp-card-head{
	gap:var(--szp-x2);margin-bottom:var(--szp-x3);align-items:center;flex-wrap:wrap}

/* The counters. 13px inside a tile holding a number and a caption is why the row reads
   as a strip rather than as six things. */
.szp-dash .szp-dash-stats,[data-szp-dash] .szp-dash-stats,
.szp-dash .szp-pd-stats,[data-szp-dash] .szp-pd-stats{gap:var(--szp-x2);margin-bottom:var(--szp-x3)}
.szp-dash .szp-dash-stats a,.szp-dash .szp-dash-stats li > *,
[data-szp-dash] .szp-dash-stats a,[data-szp-dash] .szp-dash-stats li > *,
.szp-dash .szp-pd-stats a,[data-szp-dash] .szp-pd-stats a{
	padding:var(--szp-x3) var(--szp-x2)!important;gap:var(--szp-x1)!important;
	display:grid;place-items:center;text-align:center;min-height:88px}
.szp-dash .szp-dash-stats b,[data-szp-dash] .szp-dash-stats b,
.szp-dash .szp-pd-stats b,[data-szp-dash] .szp-pd-stats b{line-height:1.2}
.szp-dash .szp-dash-stats span,[data-szp-dash] .szp-dash-stats span,
.szp-dash .szp-pd-stats span,[data-szp-dash] .szp-pd-stats span{line-height:1.7}

/* A note is a sentence, not a caption glued to the thing above it. */
.szp-dash .szp-dash-note,[data-szp-dash] .szp-dash-note,
.szp-dash .szp-pd-help,[data-szp-dash] .szp-pd-help,
.szp-dash .szp-muted,[data-szp-dash] .szp-muted{line-height:2;margin-block:var(--szp-x2)}

/* Forms: label to field, field to field, field to button. */
.szp-dash .szp-dash-form,[data-szp-dash] .szp-dash-form,
.szp-dash .szp-ticket-form,[data-szp-dash] .szp-ticket-form{
	gap:var(--szp-x3);padding:clamp(16px,2vw,22px);border-radius:16px;margin-top:var(--szp-x2)}
.szp-dash .szp-dash-form label,[data-szp-dash] .szp-dash-form label,
.szp-dash .szp-ticket-form label,[data-szp-dash] .szp-ticket-form label{gap:var(--szp-x1)}
.szp-dash .szp-form-actions,[data-szp-dash] .szp-form-actions,
.szp-dash .szp-alert-actions,[data-szp-dash] .szp-alert-actions,
.szp-dash .szp-ticket-actions,[data-szp-dash] .szp-ticket-actions{
	display:flex;flex-wrap:wrap;align-items:center;gap:var(--szp-x2);margin-top:var(--szp-x2)}

/* Rows in every list: the same box, the same breathing room.
 *
 * The padding goes on whatever actually holds the words, not on the `li`. A ticket row
 * is a big button plus a small one; padding the `li` pushed the pair inwards and left a
 * band of empty card between them, which looks like a rendering fault rather than a
 * layout. The row is the track; the button inside it grows to fill the track and carries
 * the padding itself. */
.szp-dash .szp-dash-alerts li,[data-szp-dash] .szp-dash-alerts li,
.szp-dash .szp-ticket-list li,[data-szp-dash] .szp-ticket-list li,
.szp-dash .szp-dash-places li,[data-szp-dash] .szp-dash-places li,
.szp-dash .szp-pd-list li,[data-szp-dash] .szp-pd-list li{
	display:flex;flex-wrap:wrap;align-items:stretch;gap:var(--szp-x2);
	padding:0;margin-bottom:var(--szp-x2)}
.szp-dash .szp-ticket-list li > .szp-ticket-open,
[data-szp-dash] .szp-ticket-list li > .szp-ticket-open{
	flex:1 1 260px;min-width:0;text-align:start;
	display:grid;gap:var(--szp-x1);padding:var(--szp-x3)!important}
.szp-dash .szp-ticket-meta,[data-szp-dash] .szp-ticket-meta{
	display:flex;flex-wrap:wrap;align-items:center;gap:var(--szp-x1);line-height:1.9}
.szp-dash .szp-ticket-list li > .szp-dash-btn,
[data-szp-dash] .szp-ticket-list li > .szp-dash-btn{align-self:center;flex:0 0 auto}
/* Rows that are plain content rather than a button pair still need their own padding. */
.szp-dash .szp-dash-alerts li,[data-szp-dash] .szp-dash-alerts li,
.szp-dash .szp-dash-places li,[data-szp-dash] .szp-dash-places li,
.szp-dash .szp-pd-list li,[data-szp-dash] .szp-pd-list li{
	padding:var(--szp-x3);align-items:center;flex-wrap:wrap}

/* Two controls side by side never touch. */
.szp-dash .szp-btn + .szp-btn,[data-szp-dash] .szp-btn + .szp-btn,
.szp-dash .szp-dash-btn + .szp-dash-btn,[data-szp-dash] .szp-dash-btn + .szp-dash-btn{
	margin-inline-start:var(--szp-x1)}

/* Nothing may push the page sideways. A wide table or chip row scrolls inside its own
   box instead — the rule from HANDOFF §8, stated once for every dashboard list. */
.szp-dash table,[data-szp-dash] table{display:block;overflow-x:auto;max-width:100%}

/* ---------------------------------------------------------------------------
 * 3.12 — the chat drawer's back arrow, and a microphone you can actually hold.
 *
 * The record button is press-and-hold, and on Android Chrome a long press on anything
 * selectable raises the text-selection UI instead — the grey handles in the screenshot.
 * `preventDefault()` on pointerdown does not stop it; the selection and callout gestures
 * have to be turned off on the element itself, and `touch-action:none` is what keeps the
 * browser from claiming the gesture for scrolling half a second in.
 * ------------------------------------------------------------------------- */
.szp-composer-btn,.szp-composer-mic,.szp-chat-drawer-form button,
.szp-composer-mic *{
	-webkit-user-select:none;user-select:none;
	-webkit-touch-callout:none;touch-action:none;
	-webkit-tap-highlight-color:transparent}
.szp-composer-mic.is-recording{transform:scale(1.12)}
/* While a finger is down, nothing else on the row may start a selection either. */
form.is-recording,form.is-recording *{
	-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}

.szp-chat-back{border:0;background:rgba(255,255,255,.16);color:#fff!important;
	-webkit-text-fill-color:#fff!important;cursor:pointer;
	width:32px;height:32px;border-radius:10px;display:grid;place-items:center;flex:0 0 auto}
.szp-chat-back:hover{background:rgba(255,255,255,.3)}
.szp-chat-back[hidden]{display:none!important}
.szp-chat-drawer-head{display:flex;align-items:center;gap:10px}
.szp-chat-drawer-head b{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------------------------------------------------------------------------
 * 3.13 — the voice note, and the reply control that was falling out of the bubble.
 *
 * The native `<audio controls>` is ~300px wide and overflowed a bubble capped at 78%;
 * its overflow menu on Android is a floating panel offering "Download" and "Playback
 * speed", which is the white box sitting over the conversation in the report. Replaced
 * by our own player: one button, a bar, a clock. Nothing to open, nothing to overflow.
 * ------------------------------------------------------------------------- */
.szp-voice{display:flex;align-items:center;gap:9px;min-width:170px;max-width:100%;
	padding:2px 0;direction:rtl}
.szp-voice audio{display:none!important}
.szp-voice-play{flex:0 0 auto;width:34px;height:34px;border-radius:50%;border:0;cursor:pointer;
	display:grid;place-items:center;
	background:linear-gradient(140deg,#f0913f,#e07521)!important;
	color:#fff!important;-webkit-text-fill-color:#fff!important;
	box-shadow:0 2px 8px rgba(224,117,33,.34)}
.szp-voice-play svg{fill:#fff!important}
.szp-voice-play:active{transform:scale(.94)}
.szp-voice-bar{flex:1 1 auto;min-width:52px;height:5px;border-radius:99px;
	background:rgba(11,29,49,.14);overflow:hidden;cursor:pointer;position:relative}
.szp-voice-bar i{display:block;height:100%;width:0;border-radius:99px;
	background:linear-gradient(90deg,#f0913f,#e07521);transition:width .12s linear}
.szp-voice-time{flex:0 0 auto;font-size:.7rem;font-variant-numeric:tabular-nums;
	color:var(--szp-v17-muted,#647286);white-space:nowrap}
.szp-voice.is-playing .szp-voice-bar{background:rgba(224,117,33,.22)}

/* The reply control sat on the clock and spilled past the bubble's edge. It is a quiet
   affordance, so it gets the end of the row and never grows the bubble. */
.szp-chat-msg-foot{display:flex;align-items:center;justify-content:space-between;
	gap:14px;margin-top:5px;min-width:0}
.szp-chat-msg-foot time{flex:0 0 auto}
.szp-chat-reply{flex:0 0 auto;padding:2px 6px;border-radius:7px;white-space:nowrap;
	background:transparent!important;border:0!important;
	color:#a85c20!important;-webkit-text-fill-color:#a85c20!important;
	font-size:.68rem!important;font-weight:700;min-height:0!important;line-height:1.6}
.szp-chat-reply:hover{background:rgba(224,117,33,.12)!important}

/* == 3.15 — the conversation panel, tidied ==================================
 *
 * Three small things the markup started emitting and nothing painted.
 *
 * The stamp is two elements now rather than one string with a «·» in it: in a
 * right-to-left line that separator lands after the digits and reads as a stray zero
 * glued to the clock, which is the wrong time somebody reported seeing. Day above,
 * clock under it, isolated so its own digits keep their own direction.
 */
.szp-chat-listitem time{display:grid;justify-items:end;gap:1px;line-height:1.5}
.szp-chat-listitem .szp-stamp-day{font-weight:700;color:var(--szp-v17-ink,#172334)}
.szp-chat-listitem .szp-stamp-clock{font-size:.66rem;opacity:.85;direction:ltr;unicode-bidi:isolate}

/* «گفت‌وگوی تازه» is the action of the two, so it reads as one. */
.szp-chat-choice-go{border-color:#f0d4b6!important;background:#fffaf4!important}
.szp-chat-choice-go b{color:#a85c20!important;-webkit-text-fill-color:#a85c20!important}

/* "The other side is writing." Sits between the transcript and the composer, where the
   person waiting for it is already looking, and takes no height when it is not true —
   [hidden] has to be stated at this weight because the kit forces `display` elsewhere
   in this stylesheet, which is the documented way this element would otherwise stay on
   screen for ever. */
.szp-chat-typing{display:flex;align-items:center;gap:4px;margin:0;
	padding:2px 14px 8px;font-size:.74rem;color:var(--szp-v17-muted,#647286)}
.szp-chat-typing[hidden]{display:none!important}
.szp-chat-typing span{width:5px;height:5px;border-radius:50%;
	background:var(--szp-v17-orange,#e47a2c);animation:szpTypingDot 1.1s infinite ease-in-out}
.szp-chat-typing span:nth-child(2){animation-delay:.15s}
.szp-chat-typing span:nth-child(3){animation-delay:.3s;margin-inline-end:4px}
@keyframes szpTypingDot{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-2px)}}

/* == 3.15 — conversation rows that can be read down a column =================
 *
 * The row was a flex line: name, count, date. With the same customer or the same
 * provider on several rows that is a column of identical lines, which is the list the
 * owner called «بهم ریخته». It is a grid now, so the last thing said can sit under the
 * name without pushing the date out of alignment.
 */
.szp-dash-thread,.szp-pd-thread{
	display:grid!important;grid-template-columns:1fr auto auto;align-items:center;
	column-gap:10px;row-gap:3px;
}
.szp-dash-thread strong,.szp-pd-thread strong{flex:none}
.szp-dash-thread small,.szp-pd-thread small{
	grid-column:1/-1;font-size:.76rem;line-height:1.7;color:var(--szp-v17-muted,#647286);
	overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/*
 * A badge that is in the markup while it has nothing to say.
 *
 * Both of these are rendered empty and hidden so the pulse has somewhere to write when
 * the first message of the day arrives. `display` is stated on both of them elsewhere in
 * this file, and this project has been bitten twice by exactly that: any rule setting
 * `display` beats a bare `[hidden]`, so the attribute has to be answered at this weight
 * or the empty badge stays on screen.
 */
.szp-dash-badge[hidden],.szp-shell-count[hidden]{display:none!important}

/* == 3.17 — «اتصال به تلگرام», in both dashboards ==========================
 * Same partial on the customer's profile and the provider's identity screen, so it is
 * styled once. Deliberately quiet: an optional third channel should read as an offer,
 * not as something the panel is nagging about.
 */
.szp-tg-box{display:grid;gap:10px;justify-items:start;margin-top:16px;padding:16px;
	border:1px solid var(--szp-v17-border,#e1e6ea);border-radius:14px;background:#fbfcfd}
.szp-tg-head{display:grid;gap:3px}
.szp-tg-head b{font-size:.9rem;font-weight:800;color:var(--szp-v17-ink,#172334)}
.szp-tg-head span{font-size:.78rem;line-height:1.9;color:var(--szp-v17-muted,#647286)}
.szp-tg-state{margin:0;font-size:.8rem;font-weight:700;color:var(--szp-v17-muted,#647286)}
.szp-tg-state.is-on{color:#1f7a4d}
.szp-tg-state.is-on:before{content:'';display:inline-block;width:8px;height:8px;border-radius:50%;
	background:#1f7a4d;margin-inline-end:7px;vertical-align:1px}
.szp-tg-note{margin:0;font-size:.74rem;line-height:1.9;color:var(--szp-v17-muted,#647286)}
.szp-tg-manual{margin-top:2px;font-size:.78rem}
.szp-tg-manual summary{cursor:pointer;color:#a85c20;font-weight:700}
.szp-tg-manual .szp-input{min-height:38px;padding:0 10px;border:1px solid #e1e6ea;border-radius:10px;max-width:180px}

/* == 3.18 — the toast ======================================================
 * Says why a button did not do what was asked before the sign-in panel covers the
 * screen. Above the modal's own backdrop, because it has to be readable while the thing
 * it is explaining is opening on top of it.
 */
.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-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}}