/* ==========================================================================
   PinkiFil – Payment Receipt (Minimal / Glassy / Print-Only Area)
   File: assets/css/pf-payment.css
   Version: 1.4.0
   ========================================================================== */

/* (اختیاری) اگر جهانی لود نکردی، مسیر فونت‌هاتو جایگزین کن
@font-face{
  font-family: 'YekanBakh FaNum';
  src: url('/assets/fonts/YekanBakhFaNum-Light.woff2') format('woff2');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face{
  font-family: 'YekanBakh FaNum';
  src: url('/assets/fonts/YekanBakhFaNum-SemiBold.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
*/

/* =============== Tokens =============== */
:root{
  --pf-brand: #f43a75;
  --pf-green: #22c55e;
  --pf-red:   #ef4444;

  --pf-ok:   color-mix(in srgb, var(--pf-green) 78%, var(--pf-brand));
  --pf-fail: color-mix(in srgb, var(--pf-red)   78%, var(--pf-brand));

  --pf-bg:        #0b0f14;
  --pf-surface:   #0e131a99;   /* glass */
  --pf-surface-2: #0b101699;   /* glass */
  --pf-border:    #1a2330cc;
  --pf-soft:      #9aa4b2;
  --pf-text:      #e9edf3;
  --pf-muted:     #c8d0da;

  --pf-radius: 14px;
  --pf-gap: 10px;
  --pf-pad: 14px;

  --pf-shadow-ok:   0 14px 36px #0b2c1a60;
  --pf-shadow-fail: 0 14px 36px #2c0b1a60;
  --pf-shadow-card: 0 10px 28px #00000030;
}

/* =============== Base =============== */
.pf-order, .pf-order *{
  font-family: 'YekanBakh FaNum', 'YekanBakh', 'Vazirmatn', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
.pf-order{
  color: var(--pf-text); line-height: 1.65;
}
.pf-min .pf-receipt{
  max-width: 560px;   /* کوچیک و مینیمال */
  margin: 18px auto;
  padding: 0 10px;
}

/* =============== Header =============== */
.pf-receipt-head{
  display:flex; align-items:center; justify-content:space-between;
  gap: 8px; margin-bottom: 10px;
}
.pf-receipt-title{
  display:flex; align-items:center; gap:8px;
  font-size: 18px; font-weight: 600;
}
.pf-receipt-title .ok{   color: var(--pf-ok); }
.pf-receipt-title .fail{ color: var(--pf-fail); }

.pf-status-icon{
  width: 32px; height: 32px; border-radius: 999px;
  display:inline-flex; align-items:center; justify-content:center;
  background: #0e141bcc; border: 1px solid #ffffff22;
}
.pf-status-icon.ok{   border-color: color-mix(in srgb, var(--pf-ok),   65% transparent); }
.pf-status-icon.fail{ border-color: color-mix(in srgb, var(--pf-fail), 65% transparent); }

.pf-badge{
  padding: 4px 8px; border-radius: 999px; font-size: 11px;
  border: 1px solid var(--pf-border); background: #0f151dcc; color: var(--pf-soft);
  user-select:none;
}
.pf-badge.ok{
  border-color: color-mix(in srgb, var(--pf-ok), 60% transparent);
  background: color-mix(in srgb, var(--pf-ok), 85% transparent);
  color: color-mix(in srgb, var(--pf-ok), white 15%);
}
.pf-badge.fail{
  border-color: color-mix(in srgb, var(--pf-fail), 60% transparent);
  background: color-mix(in srgb, var(--pf-fail), 85% transparent);
  color: color-mix(in srgb, var(--pf-fail), white 15%);
}

/* =============== Card (glassy minimal) =============== */
.pf-receipt-card{
  background: linear-gradient(180deg, var(--pf-surface), var(--pf-surface-2));
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-radius);
  padding: 12px;
  box-shadow: var(--pf-shadow-card), inset 0 0 0 1px #ffffff0a;
  backdrop-filter: blur(10px) saturate(120%);
  animation: pf-fade-in 220ms ease;
}
.pf-receipt-card.ok{
  border-color: color-mix(in srgb, var(--pf-ok), 40% transparent);
  box-shadow: inset 0 0 0 1px #ffffff10, var(--pf-shadow-ok);
}
.pf-receipt-card.fail{
  border-color: color-mix(in srgb, var(--pf-fail), 40% transparent);
  box-shadow: inset 0 0 0 1px #ffffff10, var(--pf-shadow-fail);
}

/* =============== Amount row =============== */
.pf-amount{
  display:flex; align-items:center; gap:8px;
  font-size: 18px; margin-bottom: 6px;
}
.pf-amount i{ opacity:.9; }
.pf-amount.ok{   color: color-mix(in srgb, var(--pf-ok),   20% transparent); }
.pf-amount.fail{ color: color-mix(in srgb, var(--pf-fail), 20% transparent); }

/* برچسب‌ها لایت؛ مقادیر سمی‌بولد */
.pf-row .k{ font-weight: 300; color: var(--pf-soft); }
.pf-row .v, .pf-value, .pf-amount .pf-value, .pf-inv-total div:last-child{ font-weight: 600; }

/* LTR برای مقادیر عددی/تاریخ/موبایل */
.pf-ltr{ direction: ltr; unicode-bidi: embed; text-align: left; }

/* =============== 1-Column =============== */
.pf-col{ display:flex; flex-direction: column; gap: 10px; }

.pf-row{
  display:flex; align-items:center; justify-content:space-between;
  gap: 10px; padding: 8px 10px;
  background: #0c1117cc; border: 1px solid #161d26cc;
  border-radius: 10px;
}
.pf-row.em{
  background: #0e141bcc; border-color: #1a2330cc;
}

/* =============== Divider & Total =============== */
.pf-divider{
  height:1px; background: linear-gradient(90deg, #ffffff10, #ffffff22, #ffffff10);
  margin: 10px 0; border-radius: 999px;
}
.pf-inv-total{
  display:flex; align-items:center; justify-content:space-between;
  gap: 10px; padding: 10px;
  border-radius: 10px;
  background: #0e141bcc; border: 1px dashed #223042cc;
}

/* =============== Actions =============== */
.pf-actions{
  display:flex; align-items:center; gap:8px;
  margin-top: 10px; flex-wrap: wrap; justify-content: center;
}
.pf-btn{
  appearance:none; border:none; cursor:pointer; user-select:none;
  display:inline-flex; align-items:center; gap:6px;
  padding: 8px 12px; border-radius: 10px;
  background: #121721cc; color: #d7deea;
  border: 1px solid #1d2631cc;
  transition: transform .12s ease, filter .18s ease, border-color .18s ease;
  text-decoration:none; font-weight: 600; font-size: 13px;
}
.pf-btn:hover{ filter: brightness(1.08); border-color: #2a3646; }
.pf-btn:active{ transform: translateY(1px); }

/* =============== Hint =============== */
.pf-hint{
  margin-top: 8px; color: var(--pf-muted); font-size: 11px; text-align: center;
}

/* =============== Copyable =============== */
.pf-copyable{ cursor: pointer; position: relative; transition: .18s ease; }
.pf-copyable:hover{ filter: brightness(1.08); }
.pf-copyable.copied::after{
  content: 'کپی شد';
  position: absolute; inset-inline-end: 0; inset-block-start: -20px;
  background: #0c1117; border: 1px solid #1b2532; color: #cfe0ff;
  padding: 2px 8px; border-radius: 999px; font-size: 10px; pointer-events: none;
}

/* =============== Animations =============== */
@keyframes pf-fade-in{
  from{ opacity:0; transform: translateY(4px); }
  to  { opacity:1; transform: translateY(0); }
}

/* =============== Print Only Receipt Area =============== */
@media print{
  @page{ size: A4; margin: 12mm; }

  /* همه‌جا مخفی، فقط رسید دیده شود */
  body *{ visibility: hidden !important; background: transparent !important; box-shadow: none !important; }
  #pf-print, #pf-print *{ visibility: visible !important; }

  /* فونت پرینت: YekanBakh */
  #pf-print{ 
    position: static !important;
    font-family: 'YekanBakh FaNum', 'YekanBakh', sans-serif !important;
    color: #000 !important;
  }

  /* کارت سفید و تمیز برای چاپ */
  #pf-print .pf-receipt-card{
    background: #fff !important;
    border: 1px solid #ccc !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }
  #pf-print .pf-row{
    background:#fff !important; border:1px solid #e5e5e5 !important;
  }
  #pf-print .pf-inv-total{
    background:#fff !important; border-color:#ccc !important;
  }
  #pf-print .pf-badge{
    background:#fff !important; border:1px solid #bbb !important; color:#000 !important;
  }
  /* رنگ آیکن وضعیت در چاپ ساده شود */
  #pf-print .pf-status-icon{ border-color:#aaa !important; background:#fff !important; }
  #pf-print .pf-amount, #pf-print .pf-receipt-title .ok, #pf-print .pf-receipt-title .fail{
    color:#000 !important;
  }
  /* پنهان‌کردن کنترل‌های غیرضروری */
  .pf-actions, .pf-hint{ display: none !important; }
}

/* (اختیاری) پس‌زمینه صفحه در حالت معمول
body{ background: radial-gradient(1200px 600px at 50% -10%, #151b28 0, transparent 60%),
                   linear-gradient(#0b0f14, #0b0f14); }
*/