/* assets/css/jf-site.css — استایل اجزای مشترک همه‌ی صفحه‌ها (هدر، جستجو، پنجره‌ی ورود)
 * ۱۴۰۵/۰۸/۰۹: از <style>های داخل صفحه جدا شد تا در مرورگر کش شود (ترتیب همان ترتیب قبلی در صفحه است).
 * هر بخش با نام فایل منبعش مشخص شده؛ تغییر استایل همان بخش را اینجا انجام دهید.
 */

/* ==== components/header.php ==== */
    [x-cloak] { display: none !important; }
    /* منوهای کشویی دسکتاپ با کیبورد (Tab) هم باز شوند، نه فقط با hover */
    .nav-dd:focus-within > .nav-panel { visibility: visible; opacity: 1; transform: translateY(0); }
    .nav-dd > .nav-trigger:focus-visible { outline: 2px solid #334155; outline-offset: 4px; border-radius: 6px; }

/* ==== components/search-panel.php ==== */
.jf-sp{font-size:13px;color:#334155;text-align:right}
.jf-sp-desk{position:absolute;top:calc(100% + 8px);right:0;left:0;z-index:60;background:#fff;border:1px solid #e2e8f0;border-radius:16px;box-shadow:0 16px 40px -12px rgba(15,23,42,.25);max-height:min(560px,calc(100vh - 140px));overflow-y:auto;padding:6px 0}
.jf-sp-mob{margin-top:8px;position:relative}
.jf-sp-sec{padding:6px 8px}
.jf-sp-sec+.jf-sp-sec{border-top:1px solid #f1f5f9}
.jf-sp-h{display:flex;justify-content:space-between;padding:6px 8px 4px;font-size:11px;font-weight:800;color:#94a3b8}
.jf-sp-row,.jf-sp-prod{display:flex;align-items:center;gap:10px;padding:8px;border-radius:10px;color:#1e293b;text-decoration:none}
.jf-sp-row.is-active,.jf-sp-prod.is-active,.jf-sp-row:hover,.jf-sp-prod:hover{background:#f1f5f9}
.jf-sp-ico{flex:none;display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:8px;background:#f8fafc;color:#64748b}
.jf-sp-ico svg{width:16px;height:16px}
.jf-sp-name{flex:1;min-width:0;font-weight:700;line-height:1.6;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.jf-sp-name mark{background:none;color:#0f172a;font-weight:900;text-decoration:underline;text-decoration-color:#cbd5e1;text-underline-offset:3px}
.jf-sp-type{flex:none;font-size:10px;font-weight:800;color:#486581;background:#f0f4f8;border-radius:6px;padding:2px 7px}
.jf-sp-thumb{flex:none;width:52px;height:52px;border-radius:10px;background:#f1f5f9;overflow:hidden}
.jf-sp-thumb img{width:100%;height:100%;object-fit:cover}
.jf-sp-pinfo{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.jf-sp-price{font-size:12px;color:#64748b}
.jf-sp-price b{color:#0f172a;font-weight:900}
.jf-sp-price del{color:#94a3b8;margin-left:4px;font-size:11px}
.jf-sp-na{font-size:11px;font-weight:700;color:#94a3b8;background:#f1f5f9;border-radius:6px;padding:1px 6px}
.jf-sp-prod.is-out .jf-sp-thumb img{opacity:.55;filter:grayscale(.4)}
.jf-sp-all{display:flex;align-items:center;justify-content:center;gap:6px;margin:6px 8px 4px;padding:11px;border-radius:12px;background:#0f172a;color:#fff;font-weight:700;text-decoration:none}
.jf-sp-all.is-active,.jf-sp-all:hover{background:#1e293b}
.jf-sp-all svg{width:16px;height:16px}
.jf-sp-chips{display:flex;flex-wrap:wrap;gap:8px;padding:4px 8px 6px}
.jf-sp-chip{display:inline-flex;align-items:center;height:32px;padding:0 12px;border:1px solid #e2e8f0;border-radius:999px;background:#fff;color:#334155;font-size:12px;font-weight:700;text-decoration:none}
.jf-sp-chip:hover{border-color:#0f172a;color:#0f172a}
.jf-sp-empty{padding:14px 16px;font-weight:600;color:#475569}
.jf-sp-hint{margin:6px 0 10px;font-size:12px;font-weight:500;color:#94a3b8;line-height:1.8}
.jf-sp-empty .jf-sp-chips{padding:0}
.jf-sp-loading{position:absolute;top:0;right:0;left:0;height:2px;overflow:hidden;border-radius:16px 16px 0 0}
.jf-sp-loading span{display:block;width:40%;height:100%;background:#486581;animation:jfspl 1s ease-in-out infinite}
@keyframes jfspl{0%{transform:translateX(160%)}100%{transform:translateX(-260%)}}

/* ==== components/login-modal.php ==== */
.jf-lgm{position:fixed;inset:0;z-index:130;display:flex;align-items:flex-end;justify-content:center}
.jf-lgm__bg{position:absolute;inset:0;background:rgba(15,23,42,.45);backdrop-filter:blur(2px)}
.jf-lgm__box{position:relative;width:100%;background:#fff;border-radius:20px 20px 0 0;padding:10px 20px calc(22px + env(safe-area-inset-bottom));box-shadow:0 -10px 40px rgba(15,23,42,.18);text-align:center}
.jf-lgm--inline{position:static;display:block;padding:32px 16px 56px}
.jf-lgm--inline .jf-lgm__box{max-width:420px;margin:0 auto;border-radius:20px;border:1px solid #e5e7eb;box-shadow:0 10px 30px rgba(15,23,42,.06);padding:26px 24px 26px}
.jf-lgm__grab{width:40px;height:4px;border-radius:4px;background:#e2e8f0;margin:0 auto 6px}
.jf-lgm__x,.jf-lgm__back{position:absolute;top:14px;width:36px;height:36px;border-radius:10px;border:0;background:#f1f5f9;color:#334155;display:grid;place-items:center;cursor:pointer}
.jf-lgm__x{left:14px}.jf-lgm__back{right:14px}
.jf-lgm__x svg,.jf-lgm__back svg{width:18px;height:18px}
.jf-lgm__ic{width:56px;height:56px;border-radius:16px;background:#f0f4f8;color:#102a43;display:grid;place-items:center;margin:14px auto 12px}
.jf-lgm__ic svg{width:28px;height:28px}
.jf-lgm__title{font-size:18px;font-weight:900;color:#102a43;margin:0 0 6px}
.jf-lgm__sub{font-size:13px;color:#64748b;line-height:1.9;margin:0}
.jf-lgm__sub b{direction:ltr;unicode-bidi:isolate;color:#1e293b}
.jf-lgm__edit{background:none;border:0;padding:0 4px;font:inherit;font-size:12.5px;font-weight:700;color:#1d4ed8;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.jf-lgm__field{display:block;width:100%;max-width:300px;margin:20px auto 6px;height:54px;border:1.5px solid #e2e8f0;border-radius:14px;background:#f8fafc;text-align:center;direction:ltr;font:inherit;color:#102a43;outline:none}
.jf-lgm__field:focus{border-color:#102a43;background:#fff;box-shadow:0 0 0 4px rgba(16,42,67,.08)}
.jf-lgm__field.is-err{border-color:#ef4444;box-shadow:0 0 0 4px rgba(239,68,68,.1)}
.jf-lgm__phone{font-size:20px;font-weight:800;letter-spacing:2px}
.jf-lgm__code{font-size:26px;font-weight:900;letter-spacing:14px;padding-left:14px}
.jf-lgm__err{min-height:22px;font-size:12.5px;font-weight:700;color:#dc2626;margin:2px 0 6px}
.jf-lgm__btn{width:100%;max-width:300px;height:50px;border:0;border-radius:12px;background:#102a43;color:#fff;font:inherit;font-size:15px;font-weight:800;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;box-shadow:0 8px 20px rgba(16,42,67,.18)}
.jf-lgm__btn:hover{background:#243b53}
.jf-lgm__btn:disabled{opacity:.55;cursor:not-allowed;box-shadow:none}
.jf-lgm__spin{width:18px;height:18px;border:2.5px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:jflgspin .7s linear infinite}
@keyframes jflgspin{to{transform:rotate(360deg)}}
.jf-lgm__resend{margin-top:14px;font-size:12.5px;color:#64748b}
.jf-lgm__resend button{background:none;border:0;padding:0;font:inherit;font-weight:800;color:#1d4ed8;cursor:pointer}
.jf-lgm__resend button:disabled{color:#94a3b8;cursor:default}
.jf-lgm__note{margin-top:14px;font-size:11.5px;color:#94a3b8;line-height:1.9}
.jf-lgm__ok{width:56px;height:56px;border-radius:50%;background:#ecfdf5;color:#059669;display:grid;place-items:center;margin:24px auto 12px}
.jf-lgm__ok svg{width:30px;height:30px}
.jf-lgm-t{transition:opacity .2s ease}.jf-lgm-from{opacity:0}.jf-lgm-to{opacity:1}
.jf-lgm .jf-lgm__box{transition:transform .25s cubic-bezier(.16,1,.3,1)}
.jf-lgm.jf-lgm-from .jf-lgm__box{transform:translateY(40px)}
@media (min-width:640px){
  .jf-lgm:not(.jf-lgm--inline){align-items:center;padding:24px}
  .jf-lgm:not(.jf-lgm--inline) .jf-lgm__box{max-width:400px;border-radius:20px;padding:22px 26px 26px;box-shadow:0 20px 60px rgba(15,23,42,.25)}
  .jf-lgm__grab{display:none}
  .jf-lgm.jf-lgm-from .jf-lgm__box{transform:translateY(12px) scale(.98)}
}
@media (prefers-reduced-motion:reduce){.jf-lgm-t,.jf-lgm .jf-lgm__box,.jf-lgm__spin{transition:none;animation:none}}

/* ==== components/header.php ==== */
/* هدر چسبان: همیشه بالای صفحه ثابت است (بدون پنهان/ظاهر شدن با اسکرول).
   دسکتاپ: هر دو ردیف (لوگو/سرچ/سبد و منو) همیشه دیده می‌شوند.
   موبایل: بالای صفحه همان هدر معمولی است؛ بعد از کمی اسکرول نازک‌تر می‌شود (همان آیتم‌ها، اندازه کوچک‌تر).
     جای هدر در صفحه ثابت (۶۴px) می‌ماند تا با نازک شدن، محتوا جابه‌جا نشود. */
#jf-site-header{position:sticky;top:0;z-index:50}
@media (max-width:1023px){
  #jf-site-header{min-height:64px;pointer-events:none}
  #jf-site-header>*{pointer-events:auto}
  .jf-hdr-mob{transition:height .15s ease}
  .jf-hdr-mob img{transition:height .15s ease}
  html.jf-hdr-thin .jf-hdr-mob{height:48px}
  html.jf-hdr-thin .jf-hdr-mob img{height:34px}
}
/* گوشی‌های خیلی باریک: کنار آیکون حساب، سبد و جستجو جا کم است؛ فقط لوگو بماند و متن کنارش پنهان شود */
@media (max-width:379px){ .jf-hdr-mob a[href="/"] .flex-col{display:none} }
/* المان‌های چسبان دیگر صفحه‌ها (گالری محصول، خلاصه سبد/تسویه، سایدبار مجله، پروفایل) زیر هدر قرار بگیرند، نه پشت آن */
@media (min-width:1024px){
  .sticky.top-24,.sticky.top-8,.lg\:sticky.lg\:top-4{top:calc(var(--jf-hdr-h,0px) + 16px) !important}
}