/* ============================================================
   کیف چرمی کارت به کارت — c2c.css
   ============================================================ */

.c2c-wallet-section{
  margin:28px 0;
  animation:walletIn .5s cubic-bezier(.16,1,.3,1) both;
}
.c2c-wallet-label{
  font-size:13px;font-weight:700;
  margin-bottom:14px;display:flex;align-items:center;gap:8px;
}

/* ---- کیف چرمی ---- */
.c2c-wallet{
  position:relative;width:100%;max-width:360px;margin:0 auto;
  height:200px;perspective:900px;cursor:pointer;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
}
.c2c-wallet-body{
  position:absolute;inset:0;border-radius:18px;
  background:linear-gradient(135deg,rgba(255,255,255,.08) 0%,rgba(255,255,255,0) 40%,rgba(255,255,255,.04) 100%),
             linear-gradient(160deg,#2C1810 0%,#1A0F09 35%,#3A2318 65%,#1A0F09 100%);
  box-shadow:0 2px 4px rgba(0,0,0,.4),0 8px 20px rgba(0,0,0,.45),0 20px 50px rgba(0,0,0,.35),
             inset 0 1px 0 rgba(255,255,255,.08),inset 0 -1px 0 rgba(0,0,0,.3);
  overflow:hidden;
}
.c2c-wallet-body::before{
  content:'';position:absolute;inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;pointer-events:none;
}
.c2c-wallet-body::after{
  content:'';position:absolute;left:50%;top:10%;bottom:10%;width:1px;
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.1) 30%,rgba(255,255,255,.12) 70%,transparent);
  transform:translateX(-50%);pointer-events:none;
}
.c2c-wallet-hint {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 12px;
    color: rgb(255 255 255);
    letter-spacing: .03em;
    white-space: nowrap;
    pointer-events: none;
    transition: opacity .3s;
    z-index: 25;
    font: ultra-condensed;
    font-weight: bold;
}
.c2c-wallet.selected .c2c-wallet-hint{opacity:0}

/* ---- استک کارت‌ها ---- */
.c2c-card-stack {
    position: absolute;
    inset: 18px 20px 38px;
    pointer-events: none;
    border: 2px;
    border-style: dashed;
    color: #fff;
    border-radius: 10px;
}
.c2c-card{
  position:absolute;width:100%;height:100%;border-radius:12px;
  transform-origin:center bottom;
  transition:transform .5s cubic-bezier(.34,1.4,.64,1),box-shadow .5s cubic-bezier(.16,1,.3,1),opacity .35s;
  pointer-events:auto;cursor:pointer;will-change:transform;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
}
.c2c-card::before{
  content:'';position:absolute;inset:0;border-radius:12px;
  background:linear-gradient(135deg,rgba(255,255,255,.12) 0%,rgba(255,255,255,0) 50%,rgba(255,255,255,.04) 100%);
  pointer-events:none;
}
/* رنگ‌های گرادیانی سرمه‌ای برای هر کارت */
.c2c-card:nth-child(1){background:linear-gradient(135deg,#0B1B33 0%,#1B3A66 60%,#0B1B33 100%)}
.c2c-card:nth-child(2){background:linear-gradient(135deg,#122040 0%,#223A6A 60%,#122040 100%)}
.c2c-card:nth-child(3){background:linear-gradient(135deg,#0D1E3A 0%,#1D3860 60%,#0D1E3A 100%)}
.c2c-card:nth-child(4){background:linear-gradient(135deg,#152445 0%,#25406F 60%,#152445 100%)}
.c2c-card:nth-child(5){background:linear-gradient(135deg,#0E1C36 0%,#1E3460 60%,#0E1C36 100%)}
.c2c-card:nth-child(6){background:linear-gradient(135deg,#13223E 0%,#233C68 60%,#13223E 100%)}
.c2c-card:nth-child(7){background:linear-gradient(135deg,#0B1A32 0%,#1B3258 60%,#0B1A32 100%)}
.c2c-card:nth-child(8){background:linear-gradient(135deg,#101F3A 0%,#203964 60%,#101F3A 100%)}

/* چیدمان fan داخل کیف */
.c2c-card:nth-child(1){transform:translateY(0) rotate(0deg);z-index:8}
.c2c-card:nth-child(2){transform:translateY(4px) rotate(-2deg);z-index:7}
.c2c-card:nth-child(3){transform:translateY(8px) rotate(-4deg);z-index:6}
.c2c-card:nth-child(4){transform:translateY(12px) rotate(-6deg);z-index:5}
.c2c-card:nth-child(5){transform:translateY(16px) rotate(-8deg);z-index:4}
.c2c-card:nth-child(6){transform:translateY(20px) rotate(-10deg);z-index:3}
.c2c-card:nth-child(7){transform:translateY(24px) rotate(-12deg);z-index:2}
.c2c-card:nth-child(8){transform:translateY(28px) rotate(-14deg);z-index:1}

/* fan-out موقع کلیک */
.c2c-wallet.open .c2c-card:nth-child(1){transform:translateY(-18px) rotate(0deg) scale(1.01)}
.c2c-wallet.open .c2c-card:nth-child(2){transform:translateY(-8px) rotate(-9deg)}
.c2c-wallet.open .c2c-card:nth-child(3){transform:translateY(4px) rotate(-18deg)}
.c2c-wallet.open .c2c-card:nth-child(4){transform:translateY(12px) rotate(-27deg)}
.c2c-wallet.open .c2c-card:nth-child(5){transform:translateY(18px) rotate(-34deg)}
.c2c-wallet.open .c2c-card:nth-child(6){transform:translateY(22px) rotate(-40deg)}
.c2c-wallet.open .c2c-card:nth-child(7){transform:translateY(24px) rotate(-45deg)}
.c2c-wallet.open .c2c-card:nth-child(8){transform:translateY(25px) rotate(-48deg)}

/* کارت انتخاب‌شده — از کیف بیرون می‌آید */
.c2c-card.selected{
  transform:translateY(-92px) rotate(0deg) scale(1.05) !important;
  z-index:30 !important;
  box-shadow:0 24px 64px rgba(0,0,0,.55),0 6px 18px rgba(0,0,0,.4),0 0 0 1px rgba(184,134,46,.3) !important;
}

/* ---- محتوای رو کارت ---- */
.c2c-card-face{
  position:absolute;inset:0;padding:14px 16px;
  display:flex;flex-direction:column;justify-content:space-between;
  color:#fff;pointer-events:none;border-radius:12px;
  opacity:0;transition:opacity .25s .1s;
}
.c2c-card.selected .c2c-card-face{opacity:1;transition-delay:.2s}

.c2c-card-top{display:flex;justify-content:space-between;align-items:flex-start}
.c2c-card-bank{font-size:11px;font-weight:700;opacity:.65;letter-spacing:.04em;text-transform:uppercase}
.c2c-card-chip{
  width:32px;height:24px;border-radius:4px;
  background:linear-gradient(135deg,#D4A64B 0%,#F0C878 50%,#B8862E 100%);
  box-shadow:inset 0 1px rgba(255,255,255,.4),0 2px 4px rgba(0,0,0,.35);
}
.c2c-card-number{
  font-family:monospace;font-size:15px;letter-spacing:.2em;
  direction:ltr;text-align:center;
  text-shadow:0 1px 4px rgba(0,0,0,.6);font-weight:600;
}
.c2c-card-bottom{display:flex;justify-content:space-between;align-items:flex-end}
.c2c-card-holder{font-size:11px;font-weight:700;opacity:.8;letter-spacing:.05em}
.c2c-mastercard{display:flex}
.c2c-mastercard span{
  width:22px;height:22px;border-radius:50%;
  box-shadow:0 0 0 1px rgba(255,255,255,.2);
}
.c2c-mastercard span:first-child{background:rgba(235,0,27,.7);margin-inline-end:-8px}
.c2c-mastercard span:last-child{background:rgba(255,163,0,.7)}

/* ---- اطلاعات کارت انتخاب‌شده ---- */
.c2c-selected-info{
  background:rgba(11,27,51,.05);border:1px solid rgba(11,27,51,.1);
  border-radius:12px;padding:14px 16px;margin-top:14px;display:none;
}
.c2c-selected-info.show{display:block;animation:fadeSlideIn .3s cubic-bezier(.16,1,.3,1)}
.c2c-info-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:8px 0;border-bottom:1px solid rgba(0,0,0,.06);font-size:13.5px;
}
.c2c-info-row:last-child{border-bottom:0}
.c2c-info-label{color:#6b7280;font-size:12px;font-weight:700;flex-shrink:0}
.c2c-info-val{font-weight:700;font-family:monospace;letter-spacing:.06em;direction:ltr;font-size:14px}
.c2c-copy-btn{
  background:none;border:1.5px solid #B8862E;cursor:pointer;padding:3px 9px;
  color:#B8862E;border-radius:6px;font-size:11px;font-weight:700;
  transition:background .2s,color .2s;margin-inline-start:8px;flex-shrink:0;
}
.c2c-copy-btn:hover,.c2c-copy-btn.copied{background:#B8862E;color:#fff}
.c2c-change-btn{
  display:block;text-align:center;margin-top:10px;font-size:12.5px;font-weight:700;
  color:#B8862E;cursor:pointer;padding:6px;border-radius:6px;
  transition:background .2s;
}
.c2c-change-btn:hover{background:rgba(184,134,46,.08)}

/* ---- فرم تراکنش ---- */
.c2c-tx-form{margin-top:22px;display:none}
.c2c-tx-form.show{display:block;animation:fadeSlideIn .4s cubic-bezier(.16,1,.3,1)}
.c2c-tx-form .c2c-tx-title{
  font-size:13px;font-weight:700;margin-bottom:14px;padding-bottom:10px;
  border-bottom:1px solid rgba(0,0,0,.08);
  display:flex;align-items:center;gap:8px;
}
.c2c-tx-form .c2c-tx-title svg{width:16px;height:16px;color:#B8862E;flex-shrink:0}
.c2c-field{margin-bottom:14px}
.c2c-field label{display:block;font-size:12.5px;font-weight:700;margin-bottom:6px}
.c2c-field input,.c2c-field textarea{
  width:100%;padding:13px 14px;border:1.5px solid rgba(0,0,0,.14);border-radius:10px;
  font-family:inherit;font-size:14.5px;min-height:46px;background:#fff;
  transition:border-color .2s,box-shadow .2s;
}
.c2c-field input:focus,.c2c-field textarea:focus{
  outline:none;border-color:#B8862E;box-shadow:0 0 0 3px rgba(184,134,46,.12);
}
.c2c-field textarea{min-height:68px;resize:vertical}
.c2c-field .c2c-hint{font-size:11.5px;color:#9ca3af;margin-top:5px}
input[name="transaction_ref"]{direction:ltr;letter-spacing:.06em}
input[name="transaction_last4"]{direction:ltr;letter-spacing:.22em;font-family:monospace;max-width:100%}

/* ---- ریسپانسیو ---- */
@media(max-width:480px){
  .c2c-wallet{height:175px}
  .c2c-card-number{font-size:13px;letter-spacing:.14em}
  .c2c-card.selected{transform:translateY(-78px) rotate(0deg) scale(1.04) !important}
}
@media(max-width:360px){
  .c2c-wallet{height:158px}
  .c2c-card.selected{transform:translateY(-68px) rotate(0deg) scale(1.03) !important}
}

@keyframes walletIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeSlideIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
}