/* ═══════════════════════════════════════════════
   components.css — کامپوننت‌های گلس ابزار هداوند
   انیمیشن‌ها: فقط ترنزیشن‌های کوتاه و هاور لیفت
   ═══════════════════════════════════════════════ */

/* ── دکمه‌ها ── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:1px solid var(--glass-border);background:var(--glass-bg-strong);color:var(--text);
  font-size:12.5px;font-weight:700;padding:7px 15px;border-radius:11px;
  box-shadow:var(--neu-sm);transition:box-shadow .18s,color .15s,transform .18s,background .18s;
  text-decoration:none;user-select:none;line-height:1.7;
}
.btn:hover{color:var(--accent-dark);transform:translateY(-1px);box-shadow:0 10px 24px rgba(22,48,95,.13)}
.btn:active,.btn.pressed{box-shadow:var(--neu-in);transform:translateY(1px)}
.btn:disabled,.btn.disabled{opacity:.55;pointer-events:none}

.btn-primary{
  background:var(--navy-grad);color:#fff;border:none;
  box-shadow:0 8px 22px rgba(22,48,95,.38),0 2px 6px rgba(22,48,95,.25);
}
.btn-primary:hover{color:#fff;transform:translateY(-1px);box-shadow:0 12px 28px rgba(22,48,95,.46)}
.btn-primary:active,.btn-primary.pressed{box-shadow:inset 3px 3px 8px rgba(6,16,40,.5),0 2px 6px rgba(22,48,95,.3);transform:translateY(1px)}

.btn-navy{
  background:linear-gradient(135deg,var(--navy),var(--blue-dark));color:#fff;border:none;
  box-shadow:0 8px 22px rgba(22,48,95,.38),0 2px 6px rgba(22,48,95,.25);
}
.btn-navy:hover{color:#fff;transform:translateY(-1px);box-shadow:0 12px 28px rgba(22,48,95,.46)}
.btn-navy:active,.btn-navy.pressed{box-shadow:inset 3px 3px 8px rgba(6,16,40,.5),0 2px 6px rgba(22,48,95,.3);transform:translateY(1px)}

.btn-danger{color:var(--red)}
.btn-danger:hover{color:#c22037}

.btn-lg{padding:9px 24px;font-size:13px;border-radius:12px}
.btn-sm{padding:5px 11px;font-size:11.5px;border-radius:9px}
.btn-block{width:100%}

.btn-icon{
  width:37px;height:37px;padding:0;border-radius:11px;font-size:15px;
  display:inline-flex;align-items:center;justify-content:center;position:relative;
}
.btn-icon.round{border-radius:50%}

/* شمارنده سبد */
.cart-count{
  position:absolute;top:-5px;left:-5px;min-width:17px;height:17px;border-radius:9px;
  background:linear-gradient(135deg,var(--accent),#ff6a81);color:#fff;font-size:9.5px;font-weight:800;
  display:flex;align-items:center;justify-content:center;padding:0 5px;
  box-shadow:0 3px 9px rgba(239,64,86,.45);
}
.cart-count.hidden{display:none}

/* ── چیپ و نشان ── */
.chip{
  display:inline-flex;align-items:center;gap:5px;padding:3px 11px;border-radius:999px;
  background:var(--glass-bg-strong);border:1px solid var(--glass-border-soft);
  box-shadow:var(--neu-sm);font-size:11.5px;font-weight:700;transition:box-shadow .15s,color .15s,background .15s;
}
.chip:hover{transform:translateY(-1px)}
.chip.active{background:var(--accent-soft);border-color:rgba(239,64,86,.3);color:var(--accent-dark)}
.chip.dismissible:hover{color:var(--red)}

.badge{display:inline-flex;align-items:center;gap:3px;font-size:10.5px;font-weight:700;border-radius:8px;padding:1px 8px}
.badge.success{background:rgba(22,163,74,.14);color:var(--green)}
.badge.warn{background:rgba(234,179,8,.16);color:#a16207}
.badge.info{background:var(--blue-soft);color:var(--blue-dark)}
.badge.danger{background:var(--accent-soft);color:var(--accent-dark)}
.badge.muted{background:rgba(100,116,143,.14);color:var(--muted)}

/* ── فرم‌ها ── */
.field{margin-bottom:12px}
.field label{display:block;font-size:12px;font-weight:700;margin-bottom:5px;color:#3d4a68}
.field label .req{color:var(--red)}
.input,.select,.textarea{
  width:100%;border:1px solid var(--glass-border-soft);outline:none;
  background:var(--glass-bg-inset);color:var(--text);
  padding:8px 13px;border-radius:11px;font-size:12.5px;
  box-shadow:var(--neu-in);transition:box-shadow .15s,border-color .15s;
}
.input::placeholder,.textarea::placeholder{color:#93a1bd}
.input:focus,.select:focus,.textarea:focus{box-shadow:var(--neu-in),0 0 0 2px rgba(47,111,237,.45);border-color:rgba(47,111,237,.4)}
.input.error,.select.error,.textarea.error{box-shadow:var(--neu-in),0 0 0 2px rgba(239,64,86,.5)}
.field .hint{font-size:11.5px;color:var(--muted);margin-top:5px}
.field .err-msg{font-size:11.5px;color:var(--red);margin-top:5px;display:none}
.field.has-error .err-msg{display:block}
.select{appearance:none;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2364758f' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:left 16px center;padding-left:40px}
.textarea{resize:vertical;min-height:110px}

.input-group{display:flex;gap:10px}
.input-group .input{flex:1}

/* چک‌باکس */
.check{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:13px;user-select:none;padding:3px 0}
.check input{position:absolute;opacity:0;width:0;height:0}
.check .box{
  width:19px;height:19px;flex:none;border-radius:6px;
  background:var(--glass-bg-inset);border:1px solid var(--glass-border-soft);box-shadow:var(--neu-in);
  display:flex;align-items:center;justify-content:center;font-size:12px;color:transparent;
  transition:color .15s,background .15s;
}
.check input:checked + .box{color:var(--blue-dark);background:var(--blue-soft)}
.check:hover{color:var(--blue-dark)}

/* سوییچ */
.switch{position:relative;display:inline-block;width:52px;height:28px;flex:none}
.switch input{opacity:0;width:0;height:0}
.switch .track{position:absolute;inset:0;border-radius:999px;background:var(--glass-bg-inset);border:1px solid var(--glass-border-soft);box-shadow:var(--neu-in);transition:.15s;cursor:pointer}
.switch .track::before{content:'';position:absolute;top:4px;right:4px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(22,48,95,.25);transition:.15s}
.switch input:checked + .track::before{transform:translateX(-24px);background:var(--blue-dark)}

/* رادیوکارت */
.radio-card{display:flex;gap:12px;align-items:flex-start;padding:10px 12px;border-radius:12px;
  background:var(--glass-bg);border:1px solid var(--glass-border-soft);
  box-shadow:var(--neu-sm);cursor:pointer;transition:box-shadow .18s,transform .18s;margin-bottom:9px}
.radio-card:hover{transform:translateY(-1px)}
.radio-card.selected{box-shadow:var(--neu-in),0 0 0 2px rgba(47,111,237,.4);border-color:rgba(47,111,237,.35)}
.radio-card input{position:absolute;opacity:0}
.radio-card .dot{width:20px;height:20px;border-radius:50%;background:var(--glass-bg-inset);border:1px solid var(--glass-border-soft);box-shadow:var(--neu-in);flex:none;margin-top:3px;display:flex;align-items:center;justify-content:center}
.radio-card.selected .dot::after{content:'';width:10px;height:10px;border-radius:50%;background:var(--blue-dark)}
.radio-card b{font-size:13.5px;display:block}
.radio-card .desc{font-size:12px;color:var(--muted)}

/* ── شمارنده تعداد ── */
.qty{display:inline-flex;align-items:center;gap:4px;padding:4px;border-radius:13px;
  background:var(--glass-bg-inset);border:1px solid var(--glass-border-soft);box-shadow:var(--neu-in)}
.qty button{width:30px;height:30px;border:none;border-radius:10px;background:var(--glass-bg-strong);box-shadow:var(--neu-sm);font-size:16px;font-weight:800;color:var(--accent-dark);display:flex;align-items:center;justify-content:center;transition:box-shadow .15s}
.qty button:active{box-shadow:var(--neu-in)}
.qty input{width:36px;text-align:center;border:none;background:transparent;font-size:13.5px;font-weight:800;color:var(--text);outline:none}
.qty.sm button{width:28px;height:28px;font-size:14px}
.qty.sm input{width:34px;font-size:13px}

/* ── توست ── */
.toast-wrap{position:fixed;bottom:22px;right:50%;transform:translateX(50%);z-index:9999;display:flex;flex-direction:column;gap:10px;align-items:center;pointer-events:none}
.toast{
  background:linear-gradient(135deg,var(--navy),var(--navy-deep));color:#fff;font-size:12.5px;font-weight:600;
  padding:9px 20px;border-radius:12px;border:1px solid rgba(255,255,255,.14);
  box-shadow:0 14px 34px rgba(15,35,71,.45);max-width:min(430px,90vw);text-align:center;
  animation:toastIn .2s ease-out;
}
.toast.success{background:linear-gradient(135deg,#14532d,#166534)}
.toast.error{background:linear-gradient(135deg,#7f1d1d,#991b1b)}
@keyframes toastIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* ── مودال ── */
.modal-overlay.open{display:flex}
.modal h3{font-size:16px;margin-bottom:16px}

/* ── اسکلتون ── */
.skeleton{
  background:var(--glass-bg-inset);border:1px solid var(--glass-border-soft);border-radius:var(--radius);
  box-shadow:var(--neu-in);position:relative;overflow:hidden;min-height:120px;
}
.skeleton::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(100deg,transparent 40%,rgba(255,255,255,.5) 50%,transparent 60%);
  animation:skShine 1.3s infinite;
}
@keyframes skShine{from{transform:translateX(100%)}to{transform:translateX(-100%)}}

/* ── تب‌ها ── */
.tabs{display:flex;gap:8px;flex-wrap:wrap;padding:7px;border-radius:16px;
  background:var(--glass-bg-inset);border:1px solid var(--glass-border-soft);box-shadow:var(--neu-in)}
.tabs .tab{
  border:none;background:transparent;font-size:13px;font-weight:700;color:var(--muted);
  padding:5px 14px;border-radius:10px;transition:color .15s,background .15s,box-shadow .15s;
}
.tabs .tab:hover{color:var(--accent-dark)}
.tabs .tab.active{
  background:var(--navy-grad);color:#fff;
  box-shadow:0 5px 14px rgba(22,48,95,.38);
}

/* ── صفحه‌بندی ── */
.pagination{display:flex;gap:9px;justify-content:center;flex-wrap:wrap;margin-top:28px}
.pagination button{
  min-width:34px;height:34px;border:1px solid var(--glass-border-soft);border-radius:10px;
  box-shadow:var(--neu-sm);font-size:12.5px;font-weight:700;color:var(--text);
  transition:box-shadow .15s,color .15s,transform .15s;
}
.pagination button:hover{color:var(--accent-dark);transform:translateY(-1px)}
.pagination button.active{background:var(--navy-grad);color:#fff;border-color:transparent;box-shadow:0 5px 14px rgba(22,48,95,.35)}
.pagination button:disabled{opacity:.4;pointer-events:none}

/* ── جدول ── */
.table{width:100%;border-collapse:separate;border-spacing:0;font-size:13px}
.table th{background:rgba(255,255,255,.55);padding:8px 11px;text-align:right;font-weight:700;font-size:12px;color:#41506b;white-space:nowrap}
.table td{padding:8px 11px;border-top:1px solid rgba(150,165,195,.22);vertical-align:middle}
.table tr:first-child td{border-top:none}

/* ── بردکرامب ── */
.breadcrumb{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12px;color:var(--muted);padding:10px 0 2px}
.breadcrumb a:hover{color:var(--accent-dark)}
.breadcrumb .sep{opacity:.5}
.breadcrumb .current{color:var(--text);font-weight:700}

/* ── آلرت ── */
.alert{padding:9px 13px;border-radius:11px;font-size:12.5px;margin-bottom:11px;box-shadow:var(--neu-in);border:1px solid var(--glass-border-soft)}
.alert.info{background:var(--blue-soft);color:var(--blue-dark)}
.alert.warn{background:rgba(234,179,8,.13);color:#946705}
.alert.success{background:rgba(22,163,74,.11);color:#15803d}
.alert.danger{background:var(--accent-soft);color:#b91c3c}

/* ── کارت محصول ── */
.pcard{
  background:var(--glass-bg);border:1px solid var(--glass-border);
  border-radius:var(--radius);box-shadow:var(--glass-shadow);
  padding:11px;position:relative;display:flex;flex-direction:column;
  transition:box-shadow .2s,transform .2s;
}
.pcard:hover{box-shadow:var(--glass-shadow-lg);transform:translateY(-4px)}
.pcard .img-wrap{position:relative;border-radius:11px;overflow:hidden;background:var(--glass-bg-inset);border:1px solid var(--glass-border-soft);box-shadow:var(--neu-in);padding:6px}
.pcard .img-wrap img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:10px}
.pcard .flags{position:absolute;top:7px;right:7px;display:flex;flex-direction:column;gap:6px;z-index:2}
.pcard .fav-btn{
  position:absolute;top:7px;left:7px;z-index:2;width:30px;height:30px;border-radius:9px;
  border:1px solid var(--glass-border);background:var(--glass-bg-strong);
  box-shadow:var(--neu-sm);font-size:13px;color:var(--muted);
  display:flex;align-items:center;justify-content:center;transition:box-shadow .15s,color .15s,transform .15s;
}
.pcard .fav-btn:hover{transform:scale(1.08)}
.pcard .fav-btn:active{box-shadow:var(--neu-in)}
.pcard .fav-btn.active{color:var(--accent)}
.pcard h3{font-size:12px;font-weight:700;line-height:1.75;margin:9px 1px 3px;min-height:42px}
.pcard h3 a:hover{color:var(--accent-dark)}
.pcard .meta{display:flex;align-items:center;justify-content:space-between;font-size:11px;color:var(--muted);margin:0 2px}
.pcard .rating-row{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--muted)}
.pcard .foot{margin-top:9px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.pcard .stock-out{font-size:12px;color:var(--red);font-weight:700}
.pcard .add-btn{
  width:38px;height:33px;border-radius:10px;border:none;color:#fff;font-size:15px;
  background:var(--navy-grad);
  box-shadow:0 5px 14px rgba(22,48,95,.38);transition:box-shadow .15s,transform .15s;
  display:flex;align-items:center;justify-content:center;
}
.pcard .add-btn:hover{transform:translateY(-1px)}
.pcard .add-btn:active{box-shadow:inset 3px 3px 7px rgba(122,12,34,.4);transform:translateY(1px)}
.pcard .add-btn:disabled{background:#b6bfd0;box-shadow:var(--neu-in);pointer-events:none}

.grid-products{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media(min-width:640px){.grid-products{grid-template-columns:repeat(3,1fr);gap:13px}}
@media(min-width:1024px){.grid-products{grid-template-columns:repeat(5,1fr);gap:13px}}

/* اسلایدر افقی */
.hscroll{display:flex;gap:12px;overflow-x:auto;padding:4px 2px 12px;scroll-snap-type:x mandatory}
.hscroll > *{min-width:206px;max-width:206px;scroll-snap-align:start;flex:none}
@media(max-width:576px){.hscroll > *{min-width:162px;max-width:162px}}

/* نوار پیشرفت */
.progress{height:12px;border-radius:8px;box-shadow:var(--neu-in);overflow:hidden;border:1px solid var(--glass-border-soft)}
.progress .bar{height:100%;border-radius:8px;background:linear-gradient(to left,var(--accent),#ff6a81);min-width:6%;box-shadow:0 2px 8px rgba(239,64,86,.4)}
/* نسبت تصویر کارت: ۱:۱ استاندارد فروشگاهی — پولیش نهایی در redesign.css */
.pcard .img-wrap img{aspect-ratio:1}