/* =========================================================
   هویت بصری فروشگاه «نورسان سولار»
   پالت: سرمه‌ای شب + طلایی خورشیدی + فیروزه‌ای انرژی پاک
   فونت: ایران‌یکان مدیوم (متن) / ایران‌یکان بلک (تیتر) / پینار (برند، کم‌مصرف)
========================================================= */

@font-face{
  font-family: 'IranYekan';
  src: url('../fonts/IranYekan-Medium.ttf') format('truetype');
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: 'IranYekan';
  src: url('../fonts/IranYekan-Black.ttf') format('truetype');
  font-weight: 700 900;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: 'Pinar';
  src: url('../fonts/Pinar.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face{
  /* فقط برای یک تایتل بزرگ و خاص استفاده می‌شود (مثلا هدر صفحه اصلی)، نه به‌عنوان فونت عمومی متن یا تیترها */
  font-family: 'Hasti';
  src: url('../fonts/Hasti-Heavy.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

:root{
  --bg: #F1F5F8;
  --paper: #FFFFFF;
  --paper-soft: #F8FAFB;
  --ink: #0E2A47;
  --ink-soft: #52697D;
  --line: #DCE6EC;
  --gold: #F2A93B;
  --gold-deep: #D98A1F;
  --brick: #B23A3A;
  --sky: #2FB6A8;
  --radius: 14px;
  --shadow: 0 6px 24px rgba(14,42,71,0.10);
  --header-bg: #0E2A47;
  --header-ink: #F3D9A4;
  color-scheme: light;
}

[data-theme="dark"]{
  --bg: #0B1622;
  --paper: #10202F;
  --paper-soft: #15283A;
  --ink: #EAF1F6;
  --ink-soft: #93AAC0;
  --line: #223546;
  --gold: #F2A93B;
  --gold-deep: #F7BE63;
  --brick: #E07272;
  --sky: #3FD0BE;
  --shadow: 0 10px 30px rgba(0,0,0,0.35);
  --header-bg: #081420;
  --header-ink: #F3D9A4;
  color-scheme: dark;
}

*{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }

body{
  margin:0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'IranYekan', sans-serif;
  font-size: 16px;
  line-height: 1.8;
  direction: rtl;
  transition: background-color .25s ease, color .25s ease;
}

h1, h2, h3, .brand-mark, .logo{ font-weight: 700; }

.brand-word{ font-family: 'Pinar', 'IranYekan', sans-serif; }

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; cursor:pointer; }

.container{
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ---------- نوار تماس بالای سایت ---------- */
.topbar{
  background: var(--header-bg);
  color: rgba(255,255,255,.82);
  font-size: .82rem;
  position: relative;
  overflow: hidden;
}
.topbar::before{
  content:'';
  position:absolute; inset:0;
  background: radial-gradient(600px 60px at 15% 0%, rgba(242,169,59,.16), transparent 70%);
  pointer-events:none;
}
.topbar .container{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding: 9px 20px;
  flex-wrap: wrap;
  gap: 10px;
  position:relative;
}
.topbar .group{ display:flex; gap:20px; align-items:center; flex-wrap:wrap; }
.topbar .item{ display:flex; align-items:center; gap:6px; }
.topbar .item svg{ width:14px; height:14px; opacity:.9; flex-shrink:0; }
.topbar a{ color: inherit; }
.topbar a:hover{ color: var(--gold); }
.ic-pulse{ animation: iconPulse 3.2s ease-in-out infinite; }
@keyframes iconPulse{ 0%,100%{ opacity:.9; transform:scale(1);} 50%{ opacity:1; transform:scale(1.12);} }

.status-icon-btn{
  position:relative;
  width:32px; height:32px;
  border-radius:9px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(242,169,59,.14);
  color: var(--gold);
  border: 1px solid rgba(242,169,59,.35);
}
.status-icon-btn svg{ width:16px; height:16px; }
.status-icon-btn .ping{
  position:absolute; top:-3px; left:-3px; width:9px; height:9px; border-radius:50%;
  background: var(--sky); box-shadow: 0 0 0 rgba(47,182,168,.6);
  animation: pingDot 2s infinite;
}
@keyframes pingDot{
  0%{ box-shadow: 0 0 0 0 rgba(47,182,168,.55); }
  70%{ box-shadow: 0 0 0 7px rgba(47,182,168,0); }
  100%{ box-shadow: 0 0 0 0 rgba(47,182,168,0); }
}

.theme-toggle{
  width:32px; height:32px; border-radius:9px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16);
  color: #F3D9A4;
  display:flex; align-items:center; justify-content:center;
  position: relative; overflow:hidden;
}
.theme-toggle svg{ width:16px; height:16px; position:absolute; transition: transform .35s ease, opacity .35s ease; }
.theme-toggle .ic-moon{ opacity:0; transform: translateY(10px) rotate(-40deg); }
.theme-toggle .ic-sun{ opacity:1; transform: translateY(0) rotate(0); }
[data-theme="dark"] .theme-toggle .ic-sun{ opacity:0; transform: translateY(-10px) rotate(40deg); }
[data-theme="dark"] .theme-toggle .ic-moon{ opacity:1; transform: translateY(0) rotate(0); }

/* ---------- هدر ---------- */
.site-header{
  background: var(--header-bg);
  border-bottom: 1px solid rgba(255,255,255,.08);
  position: sticky;
  top: 0;
  z-index: 50;
}
.brand-row{ display:flex; align-items:center; gap:12px; }
.brand-logo{ display:flex; align-items:center; flex-shrink:0; }
.logo-img{ height:42px; width:auto; display:block; }
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 14px 0;
  gap: 20px;
  flex-wrap: wrap;
}
.logo{
  font-weight: 400;
  font-size: 1.4rem;
  color: var(--header-ink);
  letter-spacing: 0;
}

.main-nav ul{ display:flex; gap: 26px; }
.main-nav a{
  font-weight: 600;
  font-size: .95rem;
  color: rgba(255,255,255,.72);
  padding: 6px 2px;
  border-bottom: 2px solid transparent;
  transition: border-color .2s, color .2s;
}
.main-nav a:hover{ color: #fff; border-color: var(--gold); }

.nav-search-box{ display:none; }
.search-icon-btn{
  display:flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:50%;
  color: var(--header-ink); background: rgba(255,255,255,.08);
  transition: background .15s;
}
.search-icon-btn:hover{ background: rgba(255,255,255,.16); }

.nav-toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:40px; height:40px;
  border:1px solid rgba(255,255,255,.2);
  border-radius:10px;
  background: rgba(255,255,255,.08);
  padding: 0 9px;
  flex-shrink:0;
}
.nav-toggle span{ display:block; width:100%; height:2px; background: #fff; border-radius:2px; transition: transform .2s, opacity .2s; }
.nav-toggle.active span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav-toggle.active span:nth-child(2){ opacity:0; }
.nav-toggle.active span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 860px){
  .nav-toggle{ display:flex; }
  .main-nav{
    display:none;
    width:100%;
    order: 5;
  }
  .main-nav.open{ display:block; }
  .main-nav ul{ flex-direction:column; gap:2px; padding: 6px 0 14px; }
  .main-nav a{
    display:block;
    padding: 12px 6px;
    border-bottom: 1px solid rgba(255,255,255,.1);
    border-left: none;
  }
  .header-inner{ position:relative; }
  .search-icon-btn{ display:none; }
  .nav-search-box{
    display:flex; align-items:center; gap:8px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 12px;
    padding: 4px 4px 4px 12px;
    margin: 14px 0 6px;
  }
  .nav-search-box input{
    flex:1; background:none; border:none; color:#fff; font-family:inherit;
    font-size:.92rem; padding: 8px 0;
  }
  .nav-search-box input::placeholder{ color: rgba(255,255,255,.5); }
  .nav-search-box button{
    background: var(--gold); color: var(--ink); border:none; border-radius: 9px;
    width:34px; height:34px; display:flex; align-items:center; justify-content:center; flex-shrink:0;
  }
}

.header-actions{ display:flex; align-items:center; gap:16px; }
.cart-link{
  display:flex;
  align-items:center;
  gap:8px;
  background: linear-gradient(135deg, var(--gold), var(--gold-deep));
  color:#2c1c00;
  padding: 9px 16px;
  border-radius: 999px;
  font-weight:700;
  font-size:.9rem;
  box-shadow: 0 4px 14px rgba(242,169,59,.28);
}
.cart-badge{
  background: var(--brick);
  color:#fff;
  border-radius:999px;
  min-width:20px;
  height:20px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:.72rem;
  padding: 0 5px;
}

/* ---------- هیرو ---------- */
.hero{
  background: linear-gradient(135deg, var(--ink) 0%, #274b43 100%);
  color:#fff;
  border-radius: 0 0 28px 28px;
  margin-bottom: 42px;
}
.hero-inner{
  padding: 56px 0 64px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 30px;
  flex-wrap: wrap;
}
.hero-eyebrow{
  display:inline-block;
  border:1px dashed rgba(255,255,255,.5);
  border-radius:999px;
  padding: 5px 14px;
  font-size:.78rem;
  letter-spacing:.5px;
  color: #F3D9A4;
  margin-bottom:16px;
}
.hero h1{
  font-family: 'Hasti', 'IranYekan', sans-serif;
  font-size: clamp(1.8rem, 3.4vw, 2.7rem);
  font-weight: 900;
  margin: 0 0 14px;
  max-width: 640px;
}
.hero p{
  color: rgba(255,255,255,.82);
  max-width: 520px;
  margin: 0 0 22px;
}
.btn{
  display:inline-block;
  background: var(--gold);
  color: var(--ink);
  font-weight: 700;
  padding: 12px 28px;
  border-radius: 999px;
  border: none;
  font-size: .95rem;
  transition: transform .15s, background .2s;
}
.btn:hover{ background: var(--gold-deep); color:#fff; transform: translateY(-1px); }
.btn-outline{
  background: transparent;
  border: 1.5px solid var(--ink);
  color: var(--ink);
}
.btn-outline:hover{ background: var(--ink); color:#fff; }
.btn-block{ width:100%; text-align:center; }
.btn-danger{ background: var(--brick); color:#fff; }

/* مهر دستچین - عنصر امضادار طراحی */
.seal{
  position: relative;
  width: 108px; height: 108px;
  border-radius: 50%;
  border: 2px dashed rgba(255,255,255,.55);
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  font-weight:800;
  font-size:.8rem;
  color:#F3D9A4;
  transform: rotate(-8deg);
  flex-shrink:0;
}

/* نمودار خورشید-پنل-باتری - موشن گرافیک امضادار صفحه اصلی */
.energy-flow{ width:320px; flex-shrink:0; text-align:center; }
.energy-flow-svg{ width:100%; height:auto; }
.energy-flow-caption{
  margin: 6px 0 0; font-size:.76rem; color:rgba(255,255,255,.55); white-space:nowrap;
}
.ef-rays{ transform-origin: 230px 46px; animation: efRotate 22s linear infinite; }
.ef-sun circle:first-child{ animation: efGlow 3.4s ease-in-out infinite; }
@keyframes efRotate{ from{ transform:rotate(0);} to{ transform:rotate(360deg);} }
@keyframes efGlow{ 0%,100%{ opacity:.55; } 50%{ opacity:.9; } }
.ef-beams path{ animation: efBeam 1.6s linear infinite; }
@keyframes efBeam{ to{ stroke-dashoffset: -20; } }
.ef-battery-fill{ animation: efBattery 3.2s ease-in-out infinite; }
@keyframes efBattery{ 0%,100%{ opacity:.5; } 50%{ opacity:1; } }
@media (prefers-reduced-motion: reduce){
  .ef-rays, .ef-sun circle:first-child, .ef-beams path, .ef-battery-fill{ animation: none !important; }
}
@media (max-width:800px){ .energy-flow{ display:none; } }

/* ---------- بخش ارتباط با ما (صفحه اصلی) ---------- */
.contact-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:20px; }
@media (max-width:850px){ .contact-grid{ grid-template-columns: 1fr; } }
.contact-card{
  background: var(--paper); border:1px solid var(--line); border-radius: var(--radius);
  padding: 24px; display:flex; flex-direction:column; gap:10px;
}
.contact-card .icon{
  width:44px; height:44px; border-radius:12px; background:#EAF7F5; color:var(--sky);
  display:flex; align-items:center; justify-content:center;
}
.contact-card .icon svg{ width:22px; height:22px; }
.contact-card h3{ margin:0; font-size:1rem; }
.contact-card a, .contact-card p{ color:var(--ink-soft); font-size:.92rem; margin:0; }
.contact-card a.value{ color:var(--ink); font-weight:700; font-size:1.02rem; direction:ltr; text-align:right; display:block; }
.contact-card a.value:hover{ color:var(--sky); }

/* ---------- ویژگی‌ها ---------- */
.feat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
@media(max-width:850px){ .feat-grid{ grid-template-columns:1fr; } }
.feat-card{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:26px; }
.feat-card .icon{
  width:46px; height:46px; border-radius:12px; background:#FDF1DE; color:var(--gold-deep);
  display:flex; align-items:center; justify-content:center; margin-bottom:16px;
}
.feat-card .icon svg{ width:22px; height:22px; }
.feat-card h3{ font-size:1.02rem; margin:0 0 8px; }
.feat-card p{ color:var(--ink-soft); font-size:.88rem; margin:0; }

/* ---------- درباره ما ---------- */
.about-hero{ display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; }
@media(max-width:850px){ .about-hero{ grid-template-columns:1fr; } }
.about-visual{ background:var(--header-bg); border-radius:24px; aspect-ratio:5/4; position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.about-logo{ width:100%; height:100%; object-fit:cover; position:relative; z-index:2; }
.about-visual .glow-sun{
  position:absolute; top:14px; left:20px; width:70px; height:70px; border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#FEE4AE,var(--gold) 55%, var(--gold-deep));
  box-shadow:0 0 60px rgba(242,169,59,.5);
  animation: aboutGlowPulse 4s ease-in-out infinite;
}
@keyframes aboutGlowPulse{ 0%,100%{ opacity:.85; transform:scale(1);} 50%{ opacity:1; transform:scale(1.08);} }
@media (prefers-reduced-motion: reduce){ .about-visual .glow-sun{ animation:none; } }
.timeline{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:14px; }
@media(max-width:850px){ .timeline{ grid-template-columns:1fr 1fr; } }
.tl-item{ border-inline-start:3px solid var(--gold); padding-inline-start:14px; }
.tl-item .yr{ font-weight:800; color:var(--sky); font-size:.85rem; }
.tl-item p{ margin:6px 0 0; font-size:.86rem; color:var(--ink-soft); }
.badges-row{ display:flex; gap:14px; flex-wrap:wrap; margin-top:26px; }
.badge-item{
  display:flex; align-items:center; gap:10px; background:var(--paper); border:1px solid var(--line);
  border-radius:14px; padding:12px 18px; font-size:.85rem; font-weight:700; color:var(--ink);
}
.badge-item .ic{ color:var(--sky); }

/* ---------- بخش‌ها ---------- */
.section{ margin: 46px 0; }
.section-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  margin-bottom: 22px;
}
.section-head h2{
  font-size: 1.4rem;
  font-weight: 800;
  margin:0;
  position: relative;
  padding-right: 16px;
}
.section-head h2::before{
  content:'';
  position:absolute;
  right:0; top:4px; bottom:4px;
  width:5px;
  background: var(--gold);
  border-radius:4px;
}
.section-head a{ font-size:.88rem; color: var(--gold-deep); font-weight:700; }

/* چیپ دسته‌بندی */
.chips{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom: 30px; }
.chip{
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 8px 18px;
  border-radius: 999px;
  font-size: .88rem;
  font-weight:600;
  color: var(--ink-soft);
}
.chip.active, .chip:hover{ background: var(--ink); border-color: var(--ink); color:#fff; }

/* مسیر صفحه (breadcrumb) */
.breadcrumb{
  display:flex; align-items:center; gap:8px;
  font-size:.82rem; color: var(--ink-soft); margin-bottom: 18px;
}
.breadcrumb a{ color: var(--ink-soft); transition: color .15s; }
.breadcrumb a:hover{ color: var(--gold-deep); }
.breadcrumb-sep{ opacity:.6; }
.breadcrumb [aria-current="page"]{ color: var(--ink); font-weight:600; }

/* تعداد نتایج کنار عنوان بخش */
.result-count{ font-size:.82rem; color: var(--ink-soft); font-weight:600; }

/* نوار فیلتر و مرتب‌سازی */
.filter-bar{
  display:flex; align-items:flex-end; gap:16px; flex-wrap:wrap;
  background: var(--paper); border:1px solid var(--line); border-radius: var(--radius);
  padding: 16px 18px; margin-bottom: 26px;
}
.filter-field{ display:flex; flex-direction:column; gap:5px; min-width:130px; }
.filter-field label{ font-size:.74rem; color: var(--ink-soft); font-weight:600; }
.filter-field select, .filter-field input{
  border:1px solid var(--line); border-radius:9px; padding:8px 10px;
  background: var(--bg); color: var(--ink); font-family:inherit; font-size:.86rem;
}
.filter-apply-btn{ padding: 9px 20px; font-size:.86rem; }
.filter-reset-link{ font-size:.8rem; color: var(--brick); font-weight:600; align-self:center; }
@media (max-width: 600px){ .filter-bar{ flex-direction:column; align-items:stretch; } .filter-field{ min-width:0; } }

/* صفحه‌بندی */
.pagination{
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap;
  gap:6px; margin-top: 32px;
}
.page-link{
  display:flex; align-items:center; gap:4px;
  min-width:36px; height:36px; padding:0 10px;
  border-radius:9px; border:1px solid var(--line);
  font-size:.85rem; font-weight:600; color: var(--ink-soft);
  justify-content:center;
}
.page-link:hover{ border-color: var(--gold); color: var(--ink); }
.page-link.active{ background: var(--ink); border-color: var(--ink); color:#fff; }
.page-dots{ color: var(--ink-soft); padding: 0 4px; }

/* جعبه جستجو در صفحه /search */
.search-page-box{
  display:flex; gap:10px; max-width:520px; margin: 0 0 30px;
}
.search-page-box input{
  flex:1; border:1px solid var(--line); border-radius:12px;
  padding: 12px 16px; font-family:inherit; font-size:.95rem;
  background: var(--paper); color: var(--ink);
}
.search-page-box button{
  display:flex; align-items:center; gap:6px;
  background: var(--gold); color: var(--ink); border:none;
  border-radius:12px; padding: 0 20px; font-weight:700; font-size:.9rem;
}

/* گرید محصولات */
.product-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
@media (max-width: 980px){ .product-grid{ grid-template-columns: repeat(3,1fr); } }
@media (max-width: 700px){ .product-grid{ grid-template-columns: repeat(2,1fr); gap:14px; } }

.card{
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: box-shadow .2s, transform .2s;
  position: relative;
}
.card:hover{ box-shadow: var(--shadow); transform: translateY(-3px); }
.card-img{
  aspect-ratio: 1/1;
  background: #F1ECE0;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.card-img img{ width:100%; height:100%; object-fit:cover; }
.card-body{ padding: 14px 16px 18px; }
.card-title{
  font-weight:700;
  font-size: .96rem;
  margin: 0 0 8px;
  min-height: 2.6em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow:hidden;
}
.price-row{ display:flex; align-items:center; gap:8px; margin-bottom:12px; flex-wrap:wrap;}
.price-now{ font-weight:800; color: var(--ink); font-size:1.02rem; }
.price-old{ text-decoration:line-through; color:#9a9284; font-size:.82rem; }
.badge-discount{
  background: var(--brick); color:#fff; font-size:.72rem; font-weight:700;
  padding: 2px 8px; border-radius: 6px;
}
.badge-stock{
  position:absolute; top:10px; left:10px;
  background: rgba(31,58,52,.9); color:#fff;
  font-size:.7rem; padding:3px 9px; border-radius:6px; font-weight:700;
}

/* ---------- صفحه محصول ---------- */
.product-view{ display:grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items:flex-start; }
@media (max-width: 800px){ .product-view{ grid-template-columns: 1fr; } }
.product-gallery-main{
  background:#F1ECE0; border-radius: var(--radius); overflow:hidden; aspect-ratio: 1/1;
}
.product-gallery-main img{ width:100%; height:100%; object-fit:cover; }
.product-info h1{ font-size:1.6rem; font-weight:800; margin: 0 0 10px; }
.product-desc{ color: var(--ink-soft); margin: 18px 0; line-height:2; }
.qty-box{ display:flex; align-items:center; gap:10px; margin: 20px 0; }
.qty-box input{
  width:64px; text-align:center; padding:10px; border-radius:8px; border:1px solid var(--line);
  font-family:inherit; font-size:1rem;
}

/* ---------- فرم‌ها ---------- */
.form-row{ margin-bottom:18px; }
.form-row label{ display:block; font-weight:700; margin-bottom:7px; font-size:.9rem; }
.form-row input, .form-row textarea, .form-row select{
  width:100%; padding: 12px 14px; border:1px solid var(--line); border-radius:10px;
  font-family:inherit; font-size:.95rem; background: var(--paper); color: var(--ink);
}
.form-row textarea{ min-height:110px; resize:vertical; }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:0 18px; }
@media (max-width:600px){ .form-grid{ grid-template-columns:1fr; } }

.card-box{
  background: var(--paper); border:1px solid var(--line); border-radius: var(--radius);
  padding: 26px; box-shadow: var(--shadow);
}

/* ---------- جدول سبد خرید ---------- */
.cart-table{ width:100%; border-collapse: collapse; }
.cart-table th{
  text-align:right; font-size:.82rem; color: var(--ink-soft); font-weight:700;
  padding: 10px 8px; border-bottom: 2px solid var(--line);
}
.cart-table td{ padding: 14px 8px; border-bottom: 1px solid var(--line); vertical-align:middle; }
.cart-prod{ display:flex; align-items:center; gap:12px; }
.cart-prod img{ width:64px; height:64px; object-fit:cover; border-radius:8px; background:#F1ECE0; }
.remove-link{ color: var(--brick); font-size:.85rem; font-weight:700; }

.cart-summary{
  background: var(--paper); border:1px solid var(--line); border-radius: var(--radius);
  padding:22px; max-width:340px; margin-inline-start:auto; box-shadow: var(--shadow);
}
.cart-summary .row{ display:flex; justify-content:space-between; margin-bottom:12px; font-size:.92rem; }
.cart-summary .total{ font-size:1.1rem; font-weight:800; border-top:1px dashed var(--line); padding-top:12px; }

/* ---------- پیام‌ها ---------- */
.flash{
  padding: 13px 18px; border-radius:10px; margin-bottom:20px; font-weight:600; font-size:.9rem;
}
.flash-success{ background:#E4F1E9; color:#1F5C3A; border:1px solid #BEE0CB; }
.flash-error{ background:#FBE7E7; color:var(--brick); border:1px solid #F1C4C4; }

/* ---------- فوتر ---------- */
.site-footer{
  margin-top: 80px;
  background: var(--header-bg);
  color: rgba(255,255,255,.75);
  padding: 54px 0 0;
  position: relative;
  overflow: hidden;
}
.footer-glow{ position:absolute; top:-60px; left:-60px; color: rgba(242,169,59,.14); pointer-events:none; }
.footer-sun{ width:220px; height:220px; animation: footerSpin 60s linear infinite; }
@keyframes footerSpin{ from{ transform:rotate(0deg);} to{ transform:rotate(360deg);} }

.site-footer h4{ color:#fff; font-size:1rem; margin-bottom:16px; font-weight:700; }
.footer-grid{
  display:grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 30px;
  padding-bottom: 34px; position:relative;
}
.footer-brand p{ font-size:.86rem; line-height:1.85; color: rgba(255,255,255,.62); max-width: 320px; }
.footer-col nav{ display:flex; flex-direction:column; gap:9px; }
.footer-col nav a{ font-size:.87rem; color: rgba(255,255,255,.68); transition:color .15s; }
.footer-col nav a:hover{ color: var(--gold); }
.footer-contact-item{
  display:flex; align-items:flex-start; gap:8px; font-size:.85rem;
  color: rgba(255,255,255,.68); margin-bottom:11px; line-height:1.6;
}
.footer-contact-item svg{ width:15px; height:15px; flex-shrink:0; margin-top:3px; color: var(--gold); }
.footer-contact-item:hover{ color:#fff; }

.footer-chat-cta{
  display:inline-flex; align-items:center; gap:8px;
  background: linear-gradient(135deg, var(--sky), #21847a);
  color:#fff; font-weight:700; font-size:.85rem;
  padding:10px 18px; border-radius:999px;
}
.footer-chat-cta svg{ width:16px; height:16px; }

.footer-bottom{
  border-top: 1px solid rgba(255,255,255,.1); padding: 16px 0; font-size:.8rem;
  position: relative;
}
.footer-bottom-inner{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px; color: rgba(255,255,255,.55); }
.footer-made{ font-size:.76rem; }

@media (max-width:900px){ .footer-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width:560px){
  .footer-grid{ grid-template-columns: 1fr; gap:24px; }
  .footer-bottom-inner{ flex-direction:column; text-align:center; }
}

/* ---------- ادمین ---------- */
.admin-body{ background:#F3F0E8; }
.admin-wrap{ display:flex; min-height:100vh; }
.admin-sidebar{
  width: 230px; background: var(--ink); color:#fff; flex-shrink:0; padding: 24px 18px;
}
.admin-sidebar .logo{ color:#fff; margin-bottom: 30px; display:block; }
.admin-sidebar a{
  display:block; padding: 10px 12px; border-radius:8px; margin-bottom:4px; font-size:.9rem; font-weight:600;
  color: rgba(255,255,255,.8);
}
.admin-sidebar a:hover, .admin-sidebar a.active{ background: rgba(255,255,255,.1); color:#fff; }
.admin-main{ flex:1; padding: 30px 34px; }
.admin-topbar{ display:flex; justify-content:space-between; align-items:center; margin-bottom:26px; }
.admin-topbar h1{ font-size:1.3rem; margin:0; }

.stat-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap:18px; margin-bottom: 30px; }
@media (max-width:900px){ .stat-grid{ grid-template-columns: repeat(2,1fr); } }
.stat-card{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:20px; }
.stat-card .num{ font-size:1.6rem; font-weight:800; }
.stat-card .label{ font-size:.82rem; color:var(--ink-soft); }

table.admin-table{ width:100%; border-collapse:collapse; background:var(--paper); border-radius:var(--radius); overflow:hidden; }
table.admin-table th{ background:#F1ECE0; text-align:right; padding:12px; font-size:.83rem; }
table.admin-table td{ padding:12px; border-top:1px solid var(--line); font-size:.9rem; }
.status-tag{ padding:3px 10px; border-radius:6px; font-size:.75rem; font-weight:700; }
.status-pending_payment{ background:#FDECC8; color:#8a5a00; }
.status-paid{ background:#DCEFE1; color:#1F5C3A; }
.status-processing{ background:#DCE7FD; color:#1F3E8A; }
.status-shipped{ background:#E5DCFD; color:#4B1F8A; }
.status-delivered{ background:#1F3A34; color:#fff; }
.status-canceled{ background:#FBE0E0; color:var(--brick); }

.empty-state{ text-align:center; padding: 60px 20px; color: var(--ink-soft); }
.empty-state .seal{ margin: 0 auto 20px; border-color: var(--line); color:var(--gold-deep); }

/* =========================================================
   ویجت گفتگوی پشتیبانی / پرداخت (چت تیکت)
========================================================= */
.add-to-cart-msg{ display:inline-block; margin-right:10px; font-size:.85rem; font-weight:600; }
.add-to-cart-msg.ok{ color:#1F5C3A; }
.add-to-cart-msg.err{ color:var(--brick); }

.chat-wrap{
  max-width: 760px;
  margin: 0 auto;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.chat-head{
  display:flex; align-items:center; justify-content:space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
  background: var(--ink);
  color: #fff;
}
.chat-head h2{ color:#fff; font-size:1.05rem; }
.chat-online-dot{
  font-size:.75rem; background: rgba(47,182,168,.18); color:#8fe9de;
  padding:4px 10px; border-radius:20px; display:flex; align-items:center; gap:6px;
}
.chat-online-dot::before{ content:''; width:7px; height:7px; border-radius:50%; background:#2FB6A8; display:inline-block; }

.chat-messages{
  height: 460px;
  overflow-y: auto;
  padding: 18px;
  display:flex; flex-direction:column; gap:10px;
  background: var(--bg);
}
.chat-bubble-row{ display:flex; }
.chat-bubble-row.me{ justify-content:flex-start; }
.chat-bubble-row.them{ justify-content:flex-end; }
.chat-bubble{
  max-width: 78%;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: .92rem;
  line-height: 1.7;
  word-break: break-word;
}
.chat-bubble-row.me .chat-bubble{
  background: var(--gold);
  color: #3a2a05;
  border-bottom-left-radius: 4px;
}
.chat-bubble-row.them .chat-bubble{
  background: #fff;
  border: 1px solid var(--line);
  color: var(--ink);
  border-bottom-right-radius: 4px;
}
.chat-text{ white-space: pre-line; }
.chat-img{ max-width: 220px; border-radius: 10px; margin-bottom: 6px; display:block; }
.chat-audio{ width: 220px; margin-bottom: 6px; }
.chat-meta{
  display:flex; align-items:center; gap:4px; justify-content:flex-end;
  font-size:.68rem; opacity:.7; margin-top:4px;
}
.chat-tick{ color: rgba(58,42,5,.55); display:inline-flex; }
.chat-tick.seen{ color:#2FB6A8; }

.chat-typing{ padding: 0 18px 6px; font-size:.78rem; color: var(--ink-soft); background: var(--bg); }

.chat-input-row{
  display:flex; align-items:center; gap:8px;
  padding: 12px 14px;
  border-top: 1px solid var(--line);
  background: var(--paper);
}
.chat-input-row input[type="text"]{
  flex:1; border:1px solid var(--line); border-radius: 22px; padding: 10px 16px;
  font-family: inherit; font-size:.9rem; background: var(--bg);
}
.chat-input-row input[type="text"]:focus{ outline:none; border-color: var(--sky); }
.chat-icon-btn{
  width:38px; height:38px; border-radius:50%; border:1px solid var(--line);
  background: var(--paper); display:flex; align-items:center; justify-content:center;
  color: var(--ink-soft); flex-shrink:0; transition: .15s;
}
.chat-icon-btn:hover{ background: var(--bg); color: var(--ink); }
.chat-icon-btn svg{ width:18px; height:18px; }
.chat-send-btn{ background: var(--gold); border-color: var(--gold); color:#3a2a05; }
.chat-send-btn:hover{ background: var(--gold-deep); }

.recording-bar{
  display:flex; align-items:center; gap:10px;
  padding: 10px 16px; background:#FBE0E0; font-size:.82rem; color: var(--brick);
}
.rec-dot{ width:9px; height:9px; border-radius:50%; background:var(--brick); animation: pulseRec 1.1s infinite; }
@keyframes pulseRec{ 0%,100%{ opacity:1; } 50%{ opacity:.3; } }

/* ---------- کارت بانکی (نمایش شماره کارت پرداخت در چت) ---------- */
.chat-bubble-card{ padding: 0; overflow: hidden; background: transparent; border: none; }
.chat-bubble-row.them .chat-bubble-card{ border: none; }
.bank-card{
  width: 260px;
  border-radius: 16px;
  padding: 16px 18px;
  background: linear-gradient(135deg, #0E2A47 0%, #16375C 55%, #0B2038 100%);
  color: #F3D9A4;
  position: relative;
  overflow: hidden;
  font-family: inherit;
  box-shadow: 0 8px 20px rgba(14,42,71,.25);
}
.bank-card::before{
  content:'';
  position:absolute; inset:0;
  background: radial-gradient(140px 90px at 85% -10%, rgba(242,169,59,.35), transparent 70%);
  pointer-events:none;
}
.bank-card-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:22px; position:relative; z-index:1; }
.bank-card-brand{ font-size:.78rem; font-weight:700; color:#F2A93B; letter-spacing:.3px; }
.bank-card-top svg{ color:#F2A93B; opacity:.85; }
.bank-card-number{
  font-size:1.12rem; font-weight:800; letter-spacing:2px; direction:ltr; text-align:right;
  margin-bottom:18px; position:relative; z-index:1;
}
.bank-card-bottom{ display:flex; align-items:flex-end; justify-content:space-between; gap:10px; position:relative; z-index:1; }
.bank-card-label{ font-size:.66rem; color: rgba(243,217,164,.65); margin-bottom:2px; }
.bank-card-holder{ font-size:.85rem; font-weight:700; }
.bank-card-copy-btn{
  display:flex; align-items:center; gap:5px;
  background: rgba(242,169,59,.16); border: 1px solid rgba(242,169,59,.4);
  color:#F2A93B; border-radius: 20px; padding: 6px 10px; font-size:.7rem; font-weight:700;
  cursor:pointer; transition:.15s; white-space:nowrap;
}
.bank-card-copy-btn:hover{ background: rgba(242,169,59,.28); }
.bank-card-copy-btn.copied{ background:#2FB6A8; border-color:#2FB6A8; color:#06231f; }

/* ---------- پیام حذف‌شده (soft delete) ---------- */
.chat-bubble-deleted{ background: transparent !important; border: 1px dashed var(--line) !important; }
.chat-deleted-text{
  display:flex; align-items:center; gap:6px;
  color: var(--ink-soft); font-size:.82rem; font-style: italic;
}

/* ---------- دکمه حذف پیام ---------- */
.chat-delete-btn{
  background:none; border:none; padding:0; margin-left:4px; cursor:pointer;
  color: inherit; opacity:.55; display:inline-flex; transition:.15s;
}
.chat-delete-btn:hover{ opacity:1; color: var(--brick); }

/* ---------- نوار پیشرفت آپلود ---------- */
.upload-progress-wrap{
  display:flex; align-items:center; gap:8px;
  padding: 6px 14px; background: var(--paper); border-top: 1px solid var(--line);
  font-size:.72rem; color: var(--ink-soft);
}
.upload-progress-bar{ flex:1; height:6px; border-radius:4px; background: var(--bg); overflow:hidden; }
.upload-progress-fill{ height:100%; background: var(--gold); width:0%; transition: width .12s linear; border-radius:4px; }

/* ---------- یادداشت قفل‌بودن وضعیت سفارش نهایی ---------- */
.order-locked-note{
  display:flex; align-items:center; gap:8px;
  background: var(--paper-soft); border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 12px; font-size:.8rem; color: var(--ink-soft); margin-top: 6px;
}

@media (max-width: 600px){
  .chat-messages{ height: 60vh; }
  .chat-bubble{ max-width: 88%; }
  .bank-card{ width: 100%; max-width: 260px; }
}

/* ---------- بهینه‌سازی موبایل ---------- */
@media (max-width: 560px){
  .item-secondary{ display:none; }
  .topbar .container{ justify-content:center; }
}

@media (max-width: 720px){
  .cart-table thead{ display:none; }
  .cart-table, .cart-table tbody, .cart-table tr, .cart-table td{ display:block; width:100%; }
  .cart-table tr{
    border:1px solid var(--line); border-radius:12px; margin-bottom:12px; padding:10px 12px; background:var(--paper);
  }
  .cart-table td{ border-bottom:none; padding:6px 2px; display:flex; justify-content:space-between; align-items:center; gap:10px; }
  .cart-table td:before{ content: attr(data-label); font-weight:600; color:var(--ink-soft); font-size:.8rem; }
}

@media (max-width: 640px){
  .chat-wrap{ border-radius:0; border-left:none; border-right:none; margin: 0 -20px; max-width: none; }
  .chat-messages{ height: calc(100vh - 260px); min-height:320px; }
  .chat-icon-btn{ width:42px; height:42px; }
  .chat-input-row{ padding: 10px 8px; }
}

button, .btn, input[type="submit"], .chat-icon-btn, a.cart-link{ min-height: 40px; }
input, select, textarea{ font-size: 16px; } /* جلوگیری از زوم خودکار سافاری روی فوکوس */

/* --- بج تیکت‌های ادمین --- */
.sidebar-badge{
  background: var(--brick); color:#fff; font-size:.68rem; border-radius:10px;
  padding: 1px 7px; margin-right: 6px;
}

/* ---------- ورود / حساب کاربری (هدر) ---------- */
.login-link{
  font-size:.85rem; font-weight:600; color: rgba(255,255,255,.85);
  border:1px solid rgba(255,255,255,.25); padding:8px 14px; border-radius:999px;
  transition: border-color .15s, color .15s;
}
.login-link:hover{ color: var(--gold); border-color: var(--gold); }

.account-menu{ position:relative; }
.account-btn{
  display:flex; align-items:center; gap:7px;
  background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18);
  color:#fff; padding:7px 14px; border-radius:999px; font-size:.85rem; font-weight:600;
  max-width: 160px;
}
.account-btn svg{ width:16px; height:16px; flex-shrink:0; }
.account-btn span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.account-dropdown{
  display:none; position:absolute; top:calc(100% + 8px); left:0; min-width:190px;
  background: var(--paper); border:1px solid var(--line); border-radius:12px; box-shadow: var(--shadow);
  overflow:hidden; z-index:60;
}
.account-dropdown.open{ display:block; }
.account-dropdown a{ display:block; padding:11px 16px; font-size:.85rem; color: var(--ink); }
.account-dropdown a:hover{ background: var(--bg); }
.account-dropdown a:first-child{ border-bottom:1px solid var(--line); }

/* ---------- صفحات ورود / ثبت‌نام ---------- */
.auth-page{ display:flex; justify-content:center; padding: 60px 20px 80px; }
.auth-card{
  width:100%; max-width:440px; background: var(--paper); border:1px solid var(--line);
  border-radius: 20px; box-shadow: var(--shadow); padding: 34px 30px;
}
.auth-head{ text-align:center; margin-bottom: 22px; }
.auth-logo{ height:52px; margin-bottom:14px; }
.auth-head h1{ font-size:1.3rem; margin:0 0 6px; }
.auth-head p{ font-size:.85rem; color: var(--ink-soft); margin:0; }
.auth-switch{ text-align:center; margin-top:18px; font-size:.85rem; color: var(--ink-soft); }
.auth-switch a{ color: var(--gold-deep); font-weight:700; }

@media (max-width:600px){
  .auth-card{ padding: 26px 20px; }
  .account-btn span{ display:none; }
}