/* ==========================================================================
   سبد — Storefront Builder | Shared stylesheet
   Brand: #155eef · RTL · Light (default) + Dark themes
   ========================================================================== */

/* ---- فونت دانا — محلی (همان فایل‌های /fonts/dana سایت اصلی). ۶۰۰ از فایل ۷۰۰ و ۹۰۰ از فایل ۸۰۰ استفاده می‌کند تا دانلود کمتر شود ---- */
@font-face{font-family:'Dana';src:url('/fonts/dana/dana-400.woff2') format('woff2');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:'Dana';src:url('/fonts/dana/dana-500.woff2') format('woff2');font-style:normal;font-weight:500;font-display:swap}
@font-face{font-family:'Dana';src:url('/fonts/dana/dana-700.woff2') format('woff2');font-style:normal;font-weight:600 700;font-display:swap}
@font-face{font-family:'Dana';src:url('/fonts/dana/dana-800.woff2') format('woff2');font-style:normal;font-weight:800 900;font-display:swap}

/* ---- Design tokens ---- */
:root{
  --bg:#ffffff;--bg-soft:#f4f7fc;--bg-card:#ffffff;--border:#e4e9f2;
  --text:#0c1524;--text-soft:#455168;--text-mute:#68738a;
  --brand:#155eef;--brand-strong:#0f47c4;--brand-soft:#eaf1ff;--on-brand:#ffffff;
  --shadow:0 18px 50px -22px rgba(21,94,239,.28);
  --shadow-sm:0 6px 20px -12px rgba(12,21,36,.25);
  --radius:16px;
}
[data-theme="dark"]{
  --bg:#0a0e17;--bg-soft:#0f1522;--bg-card:#141b2a;--border:#25304380;
  --text:#f3f6fb;--text-soft:#b8c2d4;--text-mute:#8b95a9;
  --brand:#5b93ff;--brand-strong:#7aa8ff;--brand-soft:#16233f;--on-brand:#0a0e17;
  --shadow:0 20px 60px -25px rgba(0,0,0,.7);
  --shadow-sm:0 8px 24px -14px rgba(0,0,0,.6);
}

/* ---- Base ---- */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:'Dana',Tahoma,'Segoe UI',system-ui,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;line-height:1.7;background:var(--bg);color:var(--text)}
a{color:var(--brand);text-decoration:none}
a:hover{color:var(--brand-strong)}
img{max-width:100%;display:block}
::selection{background:var(--brand);color:#fff}
h1,h2,h3{margin:0}
.container{max-width:1200px;margin:0 auto;padding:0 clamp(16px,5vw,40px)}
.container-narrow{max-width:760px;margin:0 auto;padding:0 clamp(16px,5vw,40px)}

/* ---- Animations ---- */
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes floaty2{0%,100%{transform:translateY(0)}50%{transform:translateY(12px)}}
@keyframes marqueeRtl{from{transform:translateX(0)}to{transform:translateX(50%)}}
@keyframes growbar{from{transform:scaleY(.35)}to{transform:scaleY(1)}}
@keyframes pulse{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes gradShift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes popIn{0%{opacity:0;transform:scale(.7)}60%{transform:scale(1.05)}100%{opacity:1;transform:scale(1)}}
@keyframes ring{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes wave{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---- Buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:13px;font-weight:800;font-size:15px;cursor:pointer;border:1px solid transparent;white-space:nowrap;padding:14px 24px;font-family:inherit;line-height:1}
.btn-primary{background:linear-gradient(135deg,var(--brand),var(--brand-strong));color:var(--on-brand);box-shadow:var(--shadow)}
.btn-primary:hover{filter:brightness(1.06);color:var(--on-brand)}
.btn-ghost{background:var(--bg-card);color:var(--text);border-color:var(--border);font-weight:700}
.btn-ghost:hover{border-color:var(--brand);color:var(--brand)}
.btn .rtl-arrow{transform:scaleX(-1)}

/* ---- Header ---- */
.header{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--border)}
.header-inner{height:66px;display:flex;align-items:center;gap:22px}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:18px;color:var(--text);cursor:pointer}
.logo:hover{color:var(--text)}
.logo-badge{width:38px;height:38px;border-radius:11px;background:linear-gradient(135deg,var(--brand),var(--brand-strong));display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-sm);flex-shrink:0}
.nav{display:flex;align-items:center;gap:4px;margin-inline-start:8px}
.nav a{padding:9px 14px;border-radius:10px;font-size:14px;font-weight:600;color:var(--text-soft)}
.nav a:hover{background:var(--bg-soft);color:var(--text)}
.nav a.active{color:var(--brand);background:var(--brand-soft)}
.header-actions{margin-inline-start:auto;display:flex;align-items:center;gap:10px}
.icon-btn{width:42px;height:42px;border-radius:11px;border:1px solid var(--border);background:var(--bg-card);color:var(--text);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.icon-btn:hover{border-color:var(--brand);color:var(--brand)}
.hamburger{display:none}
/* theme icon swap */
.theme-dark-only{display:none}
[data-theme="dark"] .theme-dark-only{display:block}
[data-theme="dark"] .theme-light-only{display:none}

/* ---- Mobile drawer ---- */
.drawer{display:none;position:fixed;inset:66px 0 0;z-index:49;background:var(--bg);padding:14px clamp(16px,5vw,32px);flex-direction:column;gap:6px;animation:fadeIn .18s ease}
.drawer.open{display:flex}
.drawer a{padding:16px;border-radius:12px;font-weight:700;font-size:16px;border:1px solid var(--border);color:var(--text)}
.drawer a.cta{background:linear-gradient(135deg,var(--brand),var(--brand-strong));color:#fff;border:none;text-align:center;margin-top:10px}

/* ---- Section scaffold ---- */
.section{padding:clamp(48px,7vw,90px) 0}
.section.soft{background:var(--bg-soft)}
.section-head{text-align:center;margin-bottom:clamp(32px,5vw,52px)}
.eyebrow{color:var(--brand);font-weight:800;font-size:14px;margin-bottom:10px}
.section-title{font-size:clamp(20px,2.8vw,28px);font-weight:900;letter-spacing:-.4px;margin-bottom:12px}
.section-lead{color:var(--text-soft);font-size:clamp(14px,1.5vw,16px);max-width:600px;margin:0 auto}

/* ---- Hero ---- */
.hero{position:relative;overflow:hidden;padding:clamp(48px,7vw,96px) 0}
.hero .blob{position:absolute;border-radius:50%;filter:blur(20px);pointer-events:none;background:radial-gradient(circle,var(--brand-soft),transparent 68%)}
.hero .blob-1{top:-120px;inset-inline-start:-80px;width:420px;height:420px;opacity:.9;animation:floaty 9s ease-in-out infinite}
.hero .blob-2{bottom:-140px;inset-inline-end:-60px;width:360px;height:360px;opacity:.7;animation:floaty2 11s ease-in-out infinite}
.hero-grid{display:flex;align-items:center;gap:clamp(32px,5vw,64px);position:relative}
.hero-copy{flex:1;min-width:280px;animation:fadeUp .6s ease both}
.hero-visual{flex:1;min-width:280px;display:flex;justify-content:center;animation:fadeUp .7s .1s ease both;position:relative}
.badge{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;background:var(--brand-soft);color:var(--brand);font-weight:700;font-size:13px;margin-bottom:22px}
.badge .dot{width:8px;height:8px;border-radius:50%;background:var(--brand);animation:pulse 2s infinite}
.hero-title{font-size:clamp(28px,3.4vw,38px);line-height:1.35;font-weight:900;letter-spacing:-.5px;margin-bottom:16px;text-wrap:balance}
.hero-title .grad{background:linear-gradient(90deg,var(--brand),var(--brand-strong),var(--brand));background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:gradShift 5s ease-in-out infinite}
.hero-sub{font-size:clamp(15px,1.5vw,17px);color:var(--text-soft);margin:0 0 30px;max-width:520px}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.stats{display:flex;gap:26px;margin-top:34px;flex-wrap:wrap}
.stat .num{font-weight:900;font-size:20px}
.stat .lbl{color:var(--text-mute);font-size:13px}

/* ---- Hero storefront mock ---- */
.mock{width:100%;max-width:440px;position:relative;animation:floaty 7s ease-in-out infinite}
.mock-card{background:var(--bg-card);border:1px solid var(--border);border-radius:22px;box-shadow:var(--shadow);overflow:hidden}
.mock-bar{height:44px;display:flex;align-items:center;gap:7px;padding:0 16px;border-bottom:1px solid var(--border)}
.mock-dot{width:11px;height:11px;border-radius:50%}
.mock-url{margin-inline-start:auto;font-size:11px;color:var(--text-mute);font-family:monospace}
.mock-body{padding:18px}
.mock-shop{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.mock-thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px}
.mock-thumbs div{aspect-ratio:1;border-radius:12px;background:linear-gradient(135deg,var(--bg-soft),var(--border))}
.mock-thumbs div:nth-child(1){animation:popIn .5s .3s ease both}
.mock-thumbs div:nth-child(2){animation:popIn .5s .45s ease both}
.mock-thumbs div:nth-child(3){background:linear-gradient(135deg,var(--brand-soft),var(--border));animation:popIn .5s .6s ease both}
.mock-chart{background:var(--bg-soft);border-radius:14px;padding:14px;display:flex;align-items:flex-end;gap:8px;height:100px}
.mock-chart span{flex:1;background:var(--brand);border-radius:6px;transform-origin:bottom}
.mock-float{position:absolute;background:var(--bg-card);border:1px solid var(--border);border-radius:14px;padding:11px 15px;box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:9px}
.mock-float.a{inset-inline-start:-18px;bottom:34px;animation:floaty2 6s ease-in-out infinite}
.mock-float.b{inset-inline-end:-14px;top:36px;animation:wave 5s ease-in-out infinite}
.mock-float .fi{width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center}
.mock-float .ft{font-weight:800;font-size:12px}
.mock-float .fm{font-size:11px;color:var(--text-mute)}

/* ---- Features ---- */
.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(16px,2vw,22px)}
.feature-card{background:var(--bg-card);border:1px solid var(--border);border-radius:20px;padding:28px;transition:transform .2s,box-shadow .2s}
.feature-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.feature-icon{width:52px;height:52px;border-radius:14px;background:var(--brand-soft);color:var(--brand);display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.feature-card h3{font-size:17px;font-weight:800;margin-bottom:10px}
.feature-card p{color:var(--text-soft);margin:0;font-size:14px}

/* ---- Pricing ---- */
.pricing-card{max-width:520px;margin:0 auto;position:relative;background:var(--bg-card);border:2px solid var(--brand);border-radius:26px;padding:clamp(28px,4vw,44px);box-shadow:var(--shadow);overflow:hidden}
.ribbon{position:absolute;top:0;inset-inline-start:0;background:linear-gradient(135deg,var(--brand),var(--brand-strong));color:#fff;font-weight:800;font-size:13px;padding:9px 20px;border-end-end-radius:16px}
.pricing-top{text-align:center;padding-top:14px}
.free-badge{display:inline-block;background:var(--brand-soft);color:var(--brand);font-weight:900;font-size:clamp(24px,3vw,32px);line-height:1.25;padding:14px 28px;border-radius:18px;letter-spacing:-.5px;margin-bottom:8px}
.free-note{color:var(--text-mute);font-size:14px;margin-bottom:22px}
.price-row{display:flex;align-items:baseline;justify-content:center;gap:8px;margin-bottom:6px}
.price{font-size:clamp(24px,4vw,32px);font-weight:900}
.price-unit{color:var(--text-soft);font-weight:700;font-size:16px}
.price-after{color:var(--text-mute);font-size:13px;margin-bottom:26px}
.plan-list{display:grid;gap:14px;margin-bottom:30px}
.plan-list li{display:flex;gap:11px;align-items:center;font-size:14px;list-style:none}
.plan-list{padding:0;margin-top:0}
.plan-list svg{flex-shrink:0;color:var(--brand)}
.pricing-card .btn{width:100%}

/* ---- Media marquee ---- */
.marquee{position:relative;overflow:hidden}
.marquee-track{display:flex;width:max-content;animation:marqueeRtl 70s linear infinite}
.marquee-track:hover{animation-play-state:paused}
.media-card{width:360px;margin-inline-start:22px;background:var(--bg-card);border:1px solid var(--border);border-radius:20px;padding:26px;flex-shrink:0}
.media-head{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.media-logo{width:44px;height:44px;border-radius:12px;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:17px;flex-shrink:0}
.media-name{font-weight:800;font-size:15px}
.media-card p{color:var(--text-soft);margin:0 0 16px;font-size:14px}
.media-author{color:var(--text-mute);font-size:12px;font-weight:600}

/* ---- FAQ (native details/summary) ---- */
.faq-list{display:grid;gap:12px;max-width:760px;margin:0 auto}
.faq-item{background:var(--bg-card);border:1px solid var(--border);border-radius:16px;overflow:hidden}
.faq-item summary{padding:20px 22px;display:flex;align-items:center;gap:14px;cursor:pointer;font-weight:700;font-size:clamp(14px,1.6vw,15px);list-style:none}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary .q{flex:1}
.faq-item summary .chev{width:28px;height:28px;flex-shrink:0;border-radius:8px;background:var(--brand-soft);color:var(--brand);display:flex;align-items:center;justify-content:center;transition:transform .2s}
.faq-item[open] summary .chev{transform:rotate(180deg)}
.faq-item .faq-a{padding:0 22px 22px;color:var(--text-soft);font-size:14px}

/* ---- Final CTA ---- */
.cta-final{max-width:1100px;margin:0 auto;background:linear-gradient(135deg,var(--brand),var(--brand-strong));border-radius:28px;padding:clamp(36px,6vw,64px);text-align:center;position:relative;overflow:hidden}
.cta-final .c1{position:absolute;top:-60px;inset-inline-end:-40px;width:240px;height:240px;border-radius:50%;background:rgba(255,255,255,.12)}
.cta-final .c2{position:absolute;bottom:-70px;inset-inline-start:-30px;width:200px;height:200px;border-radius:50%;background:rgba(255,255,255,.1)}
.cta-final h2{color:#fff;font-size:clamp(20px,2.8vw,28px);font-weight:900;margin-bottom:14px;position:relative}
.cta-final p{color:rgba(255,255,255,.9);font-size:clamp(14px,1.5vw,16px);margin:0 0 28px;position:relative}
.cta-final .btn{background:#fff;color:var(--brand);position:relative;box-shadow:0 14px 40px -14px rgba(0,0,0,.4);padding:16px 40px;font-size:16px;font-weight:900}
.cta-final .btn:hover{color:var(--brand);transform:translateY(-2px)}

/* ---- Simple pages (about/contact/terms/help/article) ---- */
.page-hero{background:var(--bg-soft);padding:clamp(44px,6vw,72px) 0;text-align:center;border-bottom:1px solid var(--border)}
.page-hero h1{font-size:clamp(22px,3vw,30px);font-weight:900;margin-bottom:12px}
.page-hero p{color:var(--text-soft);font-size:clamp(14px,1.5vw,16px);margin:0}
.prose{padding:clamp(36px,5vw,64px) 0;font-size:clamp(14px,1.6vw,16px);color:var(--text-soft)}
.prose p{margin:0 0 20px}
.prose h2{color:var(--text);font-size:18px;font-weight:800;margin:0 0 12px}
.prose h2+p{margin-bottom:26px}
.contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.contact-card{background:var(--bg-card);border:1px solid var(--border);border-radius:16px;padding:24px}
.contact-card .k{color:var(--brand);font-weight:800;margin-bottom:8px;font-size:14px}
.contact-card .v{color:var(--text-soft);font-size:14px}
.mono{font-family:monospace}

/* ---- Help center ---- */
.help-search{max-width:520px;margin:0 auto;display:flex;align-items:center;gap:10px;background:var(--bg-card);border:1px solid var(--border);border-radius:14px;padding:6px 16px;box-shadow:var(--shadow-sm)}
.help-search input{border:none;outline:none;background:transparent;color:var(--text);font-family:inherit;font-size:15px;padding:12px 0;flex:1}
.help-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px}
.help-card{background:var(--bg-card);border:1px solid var(--border);border-radius:18px;padding:26px;cursor:pointer;transition:transform .2s,box-shadow .2s;color:inherit;display:block}
.help-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--brand);color:inherit}
.help-card .hi{width:48px;height:48px;border-radius:13px;background:var(--brand-soft);color:var(--brand);display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.help-card h3{font-size:16px;font-weight:800;margin-bottom:12px}
.help-card .links{color:var(--text-soft);font-size:13px;line-height:2.2}

/* ---- Article (single help) ---- */
.article{padding:clamp(28px,4vw,48px) 0}
.back-link{display:inline-flex;align-items:center;gap:7px;color:var(--brand);font-weight:700;font-size:14px;margin-bottom:24px}
.article .kicker{color:var(--brand);font-weight:800;font-size:13px;margin-bottom:10px}
.article h1{font-size:clamp(21px,2.8vw,29px);font-weight:900;line-height:1.4;margin-bottom:14px}
.article .meta{color:var(--text-mute);font-size:13px;margin-bottom:26px}
.article-hero-img{width:100%;aspect-ratio:16/9;border-radius:20px;background:repeating-linear-gradient(45deg,var(--bg-soft),var(--bg-soft) 14px,var(--border) 14px,var(--border) 28px);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;margin-bottom:30px;color:var(--text-mute);font-family:monospace;font-size:13px}
.callout{background:var(--brand-soft);border-radius:14px;padding:18px 20px;color:var(--text);font-size:14px;border-inline-start:4px solid var(--brand)}

/* ---- Footer ---- */
.footer{background:var(--bg-soft);border-top:1px solid var(--border);padding:clamp(40px,5vw,64px) 0 28px}
.footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:32px;margin-bottom:36px}
.footer-brand{min-width:220px}
.footer-brand .logo{margin-bottom:14px}
.footer-brand p{color:var(--text-soft);font-size:14px;margin:0;max-width:280px}
.footer-col .ftitle{font-weight:800;font-size:14px;margin-bottom:16px}
.footer-col .flinks{display:flex;flex-direction:column;gap:12px}
.footer-col .flinks a,.footer-col .flinks span{color:var(--text-soft);font-size:14px;cursor:pointer}
.footer-col .flinks a:hover,.footer-col .flinks span:hover{color:var(--brand)}
.footer-bottom{padding-top:24px;border-top:1px solid var(--border);display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between}
.footer-bottom span{color:var(--text-mute);font-size:13px}

/* ==========================================================================
   Responsive — mobile (<= 860px)
   ========================================================================== */
@media (max-width:860px){
  body{line-height:1.55}
  .nav,.header-cta{display:none}
  .hamburger{display:flex}
  .hero-grid{flex-direction:column}
  .hero-title{font-size:24px;line-height:1.3}
  .hero-sub{font-size:15px}
  .hero-actions .btn{flex:1}
  .hero-actions{gap:10px;flex-wrap:nowrap}
  .section-title{font-size:22px}
  .free-badge{font-size:22px;line-height:1.3}
  .price{font-size:24px}
}

/* ==========================================================================
   سبد — صفحه اصلی جستجو + پروفایل فروشگاه (گوشه‌های خمیده و شیشه‌ای)
   ========================================================================== */
body{direction:rtl}
.page{min-height:100vh;display:flex;flex-direction:column}

/* header: minimal + back */
.header-min .header-inner{justify-content:space-between}
.back-btn{display:inline-flex;align-items:center;gap:7px;padding:10px 16px;border-radius:12px;border:1px solid var(--border);background:var(--bg-card);color:var(--text-soft);font-weight:700;font-size:14px;cursor:pointer;font-family:inherit}
.back-btn:hover{border-color:var(--brand);color:var(--brand)}
.back-btn svg{transform:scaleX(-1)}

/* ---- home hero ---- */
.home-main{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:clamp(56px,10vw,120px) 0;position:relative;overflow:hidden}
.home-main .blob{position:absolute;border-radius:50%;filter:blur(24px);pointer-events:none;background:radial-gradient(circle,var(--brand-soft),transparent 68%);z-index:0}
.home-main .blob-1{top:-80px;inset-inline-start:-60px;width:420px;height:420px;opacity:.85;animation:floaty 9s ease-in-out infinite}
.home-main .blob-2{bottom:-120px;inset-inline-end:-70px;width:360px;height:360px;opacity:.7;animation:floaty2 11s ease-in-out infinite}
.home-inner{position:relative;z-index:1;width:100%;max-width:720px;margin:0 auto;padding:0 clamp(16px,5vw,40px);display:flex;flex-direction:column;align-items:center}
.home-badge{display:inline-flex;align-items:center;gap:8px;padding:7px 16px;border-radius:999px;background:var(--brand-soft);color:var(--brand);font-weight:800;font-size:13px;margin-bottom:22px;animation:fadeUp .5s ease both}
.home-badge .dot{width:8px;height:8px;border-radius:50%;background:var(--brand);animation:pulse 2s infinite}
.home-title{font-size:clamp(28px,5vw,50px);font-weight:900;letter-spacing:-.6px;line-height:1.3;margin-bottom:18px;max-width:17ch;text-wrap:balance;animation:fadeUp .6s ease both}
.home-title .grad{background:linear-gradient(90deg,var(--brand),var(--brand-strong),var(--brand));background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:gradShift 5s ease-in-out infinite}
.home-sub{color:var(--text-soft);font-size:clamp(15px,2vw,18px);max-width:52ch;margin:0 auto 34px;line-height:1.95;animation:fadeUp .7s .05s ease both}
.search-hero{width:min(600px,100%);display:flex;align-items:center;gap:8px;background:color-mix(in srgb,var(--bg-card) 72%,transparent);backdrop-filter:blur(18px) saturate(1.5);-webkit-backdrop-filter:blur(18px) saturate(1.5);border:1px solid var(--border);border-radius:20px;padding:8px 8px 8px 18px;box-shadow:var(--shadow);animation:fadeUp .7s .12s ease both}
.search-hero .si{color:var(--text-mute);display:flex;flex-shrink:0}
.search-hero input{flex:1;min-width:0;border:0;background:transparent;font:inherit;font-size:16px;color:var(--text);outline:none;padding:14px 0}
.search-hero input::placeholder{color:var(--text-mute)}
.search-hero .btn{border-radius:14px;padding:14px 26px;flex-shrink:0}
.trust-note{display:inline-flex;align-items:center;gap:7px;color:var(--text-mute);font-size:13.5px;margin-top:20px;animation:fadeUp .7s .18s ease both}

/* ---- store profile ---- */
.profile-main{flex:1;width:100%;max-width:840px;margin:0 auto;padding:clamp(26px,5vw,52px) clamp(16px,5vw,32px)}
.crumb{color:var(--text-mute);font-size:13px;margin:0 0 16px}
.crumb a{color:var(--text-mute)}
.crumb a:hover{color:var(--brand)}
.pcard{background:var(--bg-card);border:1px solid var(--border);border-radius:26px;box-shadow:var(--shadow);overflow:hidden;animation:fadeUp .5s ease both}
.pcard-head{display:flex;flex-wrap:wrap;align-items:center;gap:22px;padding:clamp(22px,4vw,34px)}
.shop-logo{width:80px;height:80px;flex-shrink:0;border-radius:22px;object-fit:cover;box-shadow:var(--shadow-sm)}
.shop-meta{flex:1;min-width:220px}
.shop-name-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.shop-name{font-size:clamp(21px,4vw,27px);font-weight:900;letter-spacing:-.4px}
.verified-pill{display:inline-flex;align-items:center;gap:5px;background:linear-gradient(135deg,var(--brand),var(--brand-strong));color:#fff;font-size:12.5px;font-weight:800;padding:5px 12px;border-radius:999px;box-shadow:var(--shadow-sm)}
.shop-link{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:700;margin-top:9px}
.shop-owner{font-size:14px;color:var(--text-soft);margin:11px 0 0}
.shop-owner strong{color:var(--text);font-weight:800}
.verify-banner{display:flex;align-items:flex-start;gap:15px;padding:clamp(18px,3.5vw,26px) clamp(22px,4vw,34px);background:var(--brand-soft);border-top:1px solid var(--border)}
.verify-ic{flex-shrink:0;width:46px;height:46px;border-radius:14px;background:linear-gradient(135deg,var(--brand),var(--brand-strong));color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-sm)}
.verify-t{font-weight:900;font-size:16px;color:var(--brand-strong);margin:0}
.verify-d{font-size:13.5px;line-height:1.85;color:var(--text-soft);margin:6px 0 0;text-wrap:pretty}
.pcard-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;padding:clamp(20px,4vw,28px) clamp(22px,4vw,34px);border-top:1px solid var(--border)}
.pcard-actions .t{font-weight:800;font-size:15px;margin:0}
.pcard-actions .d{font-size:13.5px;color:var(--text-soft);margin:5px 0 0;line-height:1.8;max-width:46ch}

/* ---- modal (glass) + fields ---- */
.modal-backdrop{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:16px;background:color-mix(in srgb,#0a0e17 42%,transparent);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);animation:fadeIn .18s ease}
.modal{width:min(500px,100%);max-height:92vh;overflow:auto;background:var(--bg-card);border:1px solid var(--border);border-radius:26px;box-shadow:0 30px 80px -30px rgba(12,21,36,.5);animation:popIn .28s ease}
.modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:24px clamp(22px,5vw,30px) 0}
.step-badge{font-size:12px;font-weight:800;color:var(--brand)}
.modal-head h2{font-size:22px;font-weight:900;letter-spacing:-.3px;margin:7px 0 0}
.modal-x{flex-shrink:0;width:36px;height:36px;border-radius:11px;border:1px solid var(--border);background:var(--bg-soft);color:var(--text-soft);cursor:pointer;display:flex;align-items:center;justify-content:center}
.modal-x:hover{border-color:var(--brand);color:var(--brand)}
.modal-body{padding:18px clamp(22px,5vw,30px);display:flex;flex-direction:column;gap:15px}
.modal-foot{display:flex;justify-content:flex-end;gap:10px;padding:0 clamp(22px,5vw,30px) 24px}
.f-row{display:flex;gap:14px;flex-wrap:wrap}
.f-field{flex:1;min-width:150px}
.f-label{display:block;font-size:13px;font-weight:700;color:var(--text-soft);margin-bottom:7px}
.f-input{width:100%;border:1px solid var(--border);background:var(--bg-soft);border-radius:14px;padding:13px 15px;font:inherit;font-size:15px;color:var(--text);outline:none;transition:border-color .15s,box-shadow .15s}
.f-input::placeholder{color:var(--text-mute)}
.f-input:focus{border-color:var(--brand);box-shadow:0 0 0 4px var(--brand-soft)}
textarea.f-input{min-height:100px;resize:vertical}
.otp-input{text-align:center;letter-spacing:.55em;font-size:24px;font-weight:900;padding:15px;direction:ltr}
.err{display:flex;align-items:center;gap:8px;font-size:13.5px;color:#dc2626;background:#fef2f2;border:1px solid #fecaca;border-radius:12px;padding:11px 14px;margin:0}
[data-theme="dark"] .err{background:#3a1414;border-color:#5c1d1d;color:#fca5a5}
.link-btn{background:none;border:0;color:var(--brand);font-weight:700;font-size:13px;cursor:pointer;font-family:inherit;padding:0}
.link-btn:hover{color:var(--brand-strong)}
.success-wrap{padding:38px clamp(24px,5vw,34px);text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px}
.success-ic{width:76px;height:76px;border-radius:50%;background:var(--brand-soft);color:var(--brand);display:flex;align-items:center;justify-content:center;animation:popIn .4s ease both}
.success-wrap h2{font-size:23px;font-weight:900}
.success-wrap p{color:var(--text-soft);font-size:14.5px;line-height:1.95;margin:0;max-width:40ch}
.ticket{display:flex;align-items:center;gap:8px;background:var(--bg-soft);border:1px solid var(--border);border-radius:12px;padding:10px 18px;font-size:13.5px}
.ticket strong{font-weight:900;color:var(--brand-strong);letter-spacing:.03em}


/* ==========================================================================
   مهر ۱۴۰۵: متن جاستیفای، فهرست فروشگاه‌های احرازشده، واکنش‌گرایی پروفایل
   ========================================================================== */
.home-sub{text-align:justify;text-justify:inter-word;text-align-last:center}
.verify-d,.pcard-actions .d,.success-wrap p{text-align:justify;text-justify:inter-word}
.home-main.has-list{flex:0 0 auto;padding-bottom:clamp(36px,6vw,64px)}

/* ---- فهرست آنلاین‌شاپ‌های احرازشده ---- */
.vs-section{padding:0 0 clamp(48px,7vw,88px)}
.vs-inner{max-width:1200px;margin:0 auto;padding:0 clamp(16px,5vw,40px)}
.vs-head{text-align:center;max-width:680px;margin:0 auto clamp(20px,3vw,28px)}
.vs-title{font-size:clamp(19px,2.6vw,26px);font-weight:900;letter-spacing:-.3px;line-height:1.5;margin:0 0 10px}
.vs-sub{color:var(--text-soft);font-size:clamp(13.5px,1.5vw,15px);line-height:2;margin:0;text-align:justify;text-justify:inter-word;text-align-last:center}

.vs-filter{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:0 auto clamp(18px,2.6vw,26px)}
.vs-chip{display:inline-flex;align-items:center;gap:7px;padding:9px 15px;border-radius:999px;border:1px solid var(--border);background:var(--bg-card);color:var(--text-soft);font-family:inherit;font-size:13.5px;font-weight:700;line-height:1.4;cursor:pointer;white-space:nowrap;transition:border-color .18s,color .18s,background .18s}
.vs-chip:hover{border-color:var(--brand);color:var(--brand)}
.vs-chip.active{background:linear-gradient(135deg,var(--brand),var(--brand-strong));border-color:transparent;color:#fff;box-shadow:var(--shadow-sm)}
.vs-count{min-width:22px;padding:1px 7px;border-radius:999px;background:var(--bg-soft);color:var(--text-mute);font-size:11.5px;font-weight:800;text-align:center}
.vs-chip.active .vs-count{background:rgba(255,255,255,.22);color:#fff}

.vs-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.6vw,16px)}
.vs-card{display:flex;align-items:center;gap:14px;min-width:0;padding:14px 16px;border-radius:18px;background:var(--bg-card);border:1px solid var(--border);color:var(--text);text-decoration:none;transition:border-color .2s,box-shadow .2s,transform .2s}
.vs-card:hover{border-color:var(--brand);box-shadow:var(--shadow-sm);transform:translateY(-2px);color:var(--text)}
.vs-card[hidden],.vs-empty[hidden],.vs-more[hidden]{display:none!important}
.vs-logo{position:relative;flex-shrink:0;width:56px;height:56px;border-radius:16px;background:var(--brand-soft);color:var(--brand);display:grid;place-items:center}
.vs-logo img{width:56px;height:56px;border-radius:16px;object-fit:cover;display:block}
.vs-initial{font-weight:900;font-size:22px;line-height:1}
.vs-badge{position:absolute;bottom:-4px;inset-inline-start:-4px;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,var(--brand),var(--brand-strong));border:2px solid var(--bg-card)}
.vs-meta{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.vs-name{font-size:15px;font-weight:800;line-height:1.7;color:var(--text);text-align:justify;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow-wrap:anywhere}
.vs-name.is-clamped{text-align:start}
.vs-cat{font-size:12.5px;font-weight:600;line-height:1.7;color:var(--text-mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vs-go{flex-shrink:0;width:30px;height:30px;border-radius:10px;display:grid;place-items:center;background:var(--bg-soft);color:var(--text-mute);transition:background .2s,color .2s}
.vs-card:hover .vs-go{background:var(--brand-soft);color:var(--brand)}
.vs-empty{text-align:center;color:var(--text-mute);font-size:14px;margin:26px 0 0}
.vs-more-wrap{text-align:center;margin-top:22px}

@media (max-width:980px){.vs-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){
  .vs-grid{grid-template-columns:minmax(0,1fr)}
  /* چیپ‌ها در موبایل افقی اسکرول می‌شوند تا چند خط نشوند */
  .vs-filter{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:2px 2px 6px;margin-inline:calc(-1 * clamp(16px,5vw,40px));padding-inline:clamp(16px,5vw,40px);scroll-padding-inline:clamp(16px,5vw,40px)}
  .vs-filter::-webkit-scrollbar{display:none}
  .vs-chip{padding:8px 13px;font-size:13px}
  .vs-card{padding:12px 14px;gap:12px;border-radius:16px}
  .vs-logo,.vs-logo img{width:50px;height:50px;border-radius:14px}
  .vs-name{font-size:14.5px}
}

/* ---- پروفایل فروشگاه: لوگو و متن همیشه کنار هم ---- */
.pcard-head{flex-wrap:nowrap;align-items:center}
.shop-meta{min-width:0}
.shop-name{overflow-wrap:anywhere;line-height:1.5}
.shop-name-row{row-gap:8px}
.shop-link{max-width:100%;min-width:0}
.shop-link-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.shop-link svg{flex-shrink:0}
.verify-banner > div{min-width:0}
@media (max-width:600px){
  .pcard{border-radius:22px}
  .pcard-head{gap:14px;padding:20px 18px;align-items:flex-start}
  .shop-logo{width:62px;height:62px;border-radius:18px}
  div.shop-logo{font-size:22px!important}
  .shop-name{font-size:19px}
  .verified-pill{font-size:11.5px;padding:4px 10px}
  .verified-pill svg{width:13px;height:13px}
  .shop-link{font-size:13px;margin-top:6px}
  .shop-owner{font-size:13px;margin-top:8px}
  .verify-banner{gap:12px;padding:18px}
  .verify-ic{width:40px;height:40px;border-radius:12px}
  .verify-ic svg{width:22px;height:22px}
  .verify-t{font-size:14.5px;line-height:1.75}
  .verify-d{font-size:13px}
  .pcard-actions{padding:18px;gap:14px}
  .pcard-actions > div{flex:1 1 100%}
  .pcard-actions .btn{width:100%}
}