/* ============================================================
   payment.css — بوابة الدفع + WeNet Integration
   منصة مشروعي v4.3 | RTL Arabic
   ============================================================ */

:root {
  --pay-primary:   #0f2d5e;
  --pay-secondary: #0ea5a0;
  --pay-wenet:     #1b3a6b;       /* WeNet brand blue  */
  --pay-wenet-g:   linear-gradient(135deg,#1b3a6b 0%,#2563eb 60%,#0ea5a0 100%);
  --pay-success:   #059669;
  --pay-warn:      #f59e0b;
  --pay-danger:    #ef4444;
  --pay-radius:    1rem;
  --pay-card-shadow: 0 4px 24px rgba(0,0,0,.08);
  --pay-transition: .3s cubic-bezier(.4,0,.2,1);
}

/* =====================================================
   PAYMENT GATEWAY PAGE WRAPPER
   ===================================================== */
.pay-wrapper {
  min-height: 100vh;
  background: var(--gray-50);
  font-family: var(--font-primary);
  direction: rtl;
}

/* ---- Top Bar ---- */
.pay-topbar {
  background: #fff;
  border-bottom: 1px solid var(--gray-100);
  padding: .9rem 2rem;
  display: flex; align-items: center; justify-content: space-between;
  position: sticky; top: 0; z-index: 100;
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
}
.pay-topbar-logo { display:flex; align-items:center; gap:.75rem; text-decoration:none; }
.pay-topbar-logo .logo-mark {
  width:38px; height:38px; border-radius:10px;
  background: linear-gradient(135deg,var(--primary),var(--secondary));
  display:flex; align-items:center; justify-content:center;
  font-size:1.1rem; font-weight:800; color:#fff;
}
.pay-topbar-logo .logo-name   { font-size:1.1rem; font-weight:800; color:var(--primary); }
.pay-topbar-logo .logo-tagline{ font-size:.72rem; color:var(--gray-400); display:block; }
.pay-topbar-secure {
  display:flex; align-items:center; gap:.4rem;
  font-size:.82rem; font-weight:600; color:var(--pay-success);
}

/* ---- Hero Banner ---- */
.pay-hero {
  background: var(--pay-wenet-g);
  padding: 3rem 1.5rem 2.5rem; text-align:center; color:#fff; position:relative; overflow:hidden;
}
.pay-hero::before {
  content:''; position:absolute; inset:0; background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.pay-hero-content { position:relative; z-index:1; max-width:720px; margin:0 auto; }
.pay-hero h1 { font-size:clamp(1.6rem,3.5vw,2.4rem); font-weight:800; margin-bottom:.5rem; }
.pay-hero p  { font-size:1rem; opacity:.9; margin-bottom:0; }

/* ---- Main Container ---- */
.pay-container {
  max-width:1200px; margin:0 auto; padding:2rem 1.5rem 4rem;
  display:grid; grid-template-columns:2fr 1fr; gap:2rem; align-items:start;
}
@media(max-width:900px){ .pay-container{ grid-template-columns:1fr; } }

/* =====================================================
   CARDS
   ===================================================== */
.pay-card {
  background:#fff; border-radius:var(--pay-radius);
  box-shadow:var(--pay-card-shadow); border:1.5px solid var(--gray-100);
  overflow:hidden; margin-bottom:1.5rem;
}
.pay-card-header {
  padding:1.2rem 1.5rem .8rem;
  display:flex; align-items:center; gap:.75rem;
  border-bottom:1.5px solid var(--gray-100);
}
.pay-card-header .header-icon {
  width:40px; height:40px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  font-size:1.1rem; flex-shrink:0;
}
.pay-card-header h2 { font-size:1.05rem; font-weight:700; color:var(--gray-800); margin:0; }
.pay-card-header p  { font-size:.78rem; color:var(--gray-500); margin:0; }
.pay-card-body { padding:1.5rem; }

/* =====================================================
   PAYMENT METHODS TABS
   ===================================================== */
.pay-method-tabs {
  display:grid; grid-template-columns:repeat(3,1fr); gap:.6rem; margin-bottom:1.5rem;
}
.pay-method-tab {
  border:2px solid var(--gray-200); border-radius:.75rem; padding:.9rem .5rem;
  text-align:center; cursor:pointer; transition:var(--pay-transition);
  background:#fff; display:flex; flex-direction:column; align-items:center; gap:.35rem;
}
.pay-method-tab:hover  { border-color:var(--pay-secondary); }
.pay-method-tab.active {
  border-color:var(--pay-secondary);
  background:rgba(14,165,160,.07);
  box-shadow:0 0 0 3px rgba(14,165,160,.12);
}
.pay-method-tab .tab-icon { font-size:1.6rem; }
.pay-method-tab .tab-label{ font-size:.78rem; font-weight:700; color:var(--gray-700); }
.pay-method-tab.active .tab-label { color:var(--pay-secondary); }

/* Method panels */
.pay-method-panel { display:none; animation:fadeInUp .3s ease; }
.pay-method-panel.active { display:block; }

/* =====================================================
   BANK / WALLET / EXCHANGE CARDS
   ===================================================== */
.partner-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:.9rem;
}
.partner-card {
  border:2px solid var(--gray-200); border-radius:.9rem; padding:1rem .9rem;
  cursor:pointer; transition:var(--pay-transition); background:#fff;
  display:flex; flex-direction:column; align-items:center; gap:.5rem; text-align:center;
  position:relative;
}
.partner-card:hover   { border-color:var(--pay-secondary); transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,0,0,.08); }
.partner-card.selected{
  border-color:var(--pay-secondary);
  background:rgba(14,165,160,.06);
  box-shadow:0 0 0 3px rgba(14,165,160,.15);
}
.partner-card .partner-logo {
  width:56px; height:56px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  font-size:1.5rem; font-weight:800; flex-shrink:0;
}
.partner-card .partner-name { font-size:.85rem; font-weight:700; color:var(--gray-800); line-height:1.3; }
.partner-card .partner-type { font-size:.72rem; color:var(--gray-500); font-weight:600; }
.partner-card .partner-fee  { font-size:.72rem; font-weight:700; }
.partner-card .check-badge  {
  position:absolute; top:.5rem; left:.5rem;
  width:22px; height:22px; border-radius:50%;
  background:var(--pay-secondary); color:#fff;
  display:none; align-items:center; justify-content:center; font-size:.7rem;
}
.partner-card.selected .check-badge { display:flex; }

/* Status indicator */
.partner-status {
  display:inline-flex; align-items:center; gap:.25rem;
  font-size:.7rem; font-weight:700; padding:.2rem .5rem;
  border-radius:99px;
}
.partner-status.online  { background:rgba(16,185,129,.1); color:#059669; }
.partner-status.offline { background:rgba(239,68,68,.1);  color:#dc2626; }
.partner-status.partial { background:rgba(245,158,11,.1); color:#d97706; }

/* =====================================================
   AMOUNT INPUT
   ===================================================== */
.amount-input-wrap {
  position:relative;
}
.amount-input-wrap .currency-label {
  position:absolute; right:1rem; top:50%; transform:translateY(-50%);
  font-size:.875rem; font-weight:700; color:var(--gray-500);
}
.amount-input {
  width:100%; padding:.9rem 4.5rem .9rem 1rem;
  border:2px solid var(--gray-200); border-radius:.75rem;
  font-family:var(--font-primary); font-size:1.4rem; font-weight:800;
  color:var(--gray-800); background:var(--gray-50); outline:none;
  transition:var(--pay-transition); direction:ltr; text-align:center;
}
.amount-input:focus { border-color:var(--pay-secondary); background:#fff; box-shadow:0 0 0 3px rgba(14,165,160,.12); }
.quick-amounts {
  display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.75rem;
}
.quick-amt-btn {
  padding:.35rem .9rem; border:1.5px solid var(--gray-200); border-radius:99px;
  background:#fff; font-family:var(--font-primary); font-size:.8rem; font-weight:700;
  color:var(--gray-600); cursor:pointer; transition:var(--pay-transition);
}
.quick-amt-btn:hover { border-color:var(--pay-secondary); color:var(--pay-secondary); }

/* =====================================================
   WENET INTEGRATION PANEL
   ===================================================== */
.wenet-badge {
  display:inline-flex; align-items:center; gap:.4rem;
  background:var(--pay-wenet-g); color:#fff;
  padding:.3rem .8rem; border-radius:99px;
  font-size:.78rem; font-weight:800; letter-spacing:.5px;
}
.wenet-header {
  background:var(--pay-wenet-g); padding:1.5rem;
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:1rem;
}
.wenet-header h2 { color:#fff; font-size:1.2rem; font-weight:800; margin:0; }
.wenet-header p  { color:rgba(255,255,255,.85); font-size:.85rem; margin:0; }
.wenet-stats {
  display:grid; grid-template-columns:repeat(4,1fr); gap:.75rem; margin-bottom:1.5rem;
}
@media(max-width:700px){ .wenet-stats{ grid-template-columns:repeat(2,1fr); } }
.wenet-stat {
  background:#fff; border-radius:.75rem; padding:.9rem;
  border:1.5px solid var(--gray-100); text-align:center;
}
.wenet-stat .w-val { font-size:1.4rem; font-weight:800; color:var(--pay-wenet); margin-bottom:.2rem; }
.wenet-stat .w-lbl { font-size:.72rem; color:var(--gray-500); font-weight:600; }

/* Partner category tabs */
.partner-cat-tabs {
  display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:1.2rem;
}
.pcat-tab {
  padding:.4rem 1rem; border:1.5px solid var(--gray-200); border-radius:99px;
  background:#fff; font-family:var(--font-primary); font-size:.82rem; font-weight:600;
  color:var(--gray-600); cursor:pointer; transition:var(--pay-transition);
  display:flex; align-items:center; gap:.3rem;
}
.pcat-tab.active, .pcat-tab:hover {
  border-color:var(--pay-wenet); background:rgba(27,58,107,.08); color:var(--pay-wenet);
}

/* Partner list table */
.wenet-table { width:100%; border-collapse:collapse; }
.wenet-table th {
  background:var(--gray-50); padding:.7rem 1rem; font-size:.78rem; font-weight:700;
  color:var(--gray-600); text-align:right; border-bottom:1.5px solid var(--gray-200);
}
.wenet-table td {
  padding:.85rem 1rem; font-size:.85rem; color:var(--gray-700);
  border-bottom:1px solid var(--gray-100); vertical-align:middle;
}
.wenet-table tr:last-child td { border-bottom:none; }
.wenet-table tr:hover td { background:var(--gray-50); }

.partner-logo-cell {
  display:flex; align-items:center; gap:.75rem;
}
.partner-logo-mini {
  width:36px; height:36px; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  font-size:1rem; font-weight:800; flex-shrink:0;
}
.partner-info-cell .pn { font-weight:700; color:var(--gray-800); font-size:.88rem; }
.partner-info-cell .ps { font-size:.72rem; color:var(--gray-500); }

/* =====================================================
   PAYMENT SUMMARY SIDEBAR
   ===================================================== */
.pay-summary-card {
  background:#fff; border-radius:var(--pay-radius);
  box-shadow:var(--pay-card-shadow); border:1.5px solid var(--gray-100);
  position:sticky; top:80px;
}
.pay-summary-header {
  background:var(--pay-wenet-g); padding:1.2rem 1.5rem; border-radius:var(--pay-radius) var(--pay-radius) 0 0;
}
.pay-summary-header h3 { color:#fff; font-size:1rem; font-weight:700; margin:0; }
.pay-summary-body { padding:1.5rem; }
.summary-row {
  display:flex; justify-content:space-between; align-items:center;
  padding:.5rem 0; border-bottom:1px solid var(--gray-100); font-size:.875rem;
}
.summary-row:last-child { border-bottom:none; }
.summary-row .s-label { color:var(--gray-600); }
.summary-row .s-val   { font-weight:700; color:var(--gray-800); }
.summary-total {
  background:var(--gray-50); border-radius:.75rem; padding:1rem;
  margin:1rem 0; display:flex; justify-content:space-between; align-items:center;
}
.summary-total .t-label { font-weight:700; color:var(--gray-700); }
.summary-total .t-val   { font-size:1.4rem; font-weight:800; color:var(--pay-wenet); }

/* Pay now button */
.pay-now-btn {
  width:100%; padding:1rem; border:none; border-radius:.75rem;
  background:var(--pay-wenet-g); color:#fff;
  font-family:var(--font-primary); font-size:1rem; font-weight:700;
  cursor:pointer; transition:var(--pay-transition);
  display:flex; align-items:center; justify-content:center; gap:.5rem;
  margin-bottom:.75rem; position:relative; overflow:hidden;
}
.pay-now-btn::after { content:''; position:absolute; inset:0; background:rgba(255,255,255,0); transition:.2s; }
.pay-now-btn:hover::after { background:rgba(255,255,255,.08); }
.pay-now-btn:active { transform:scale(.99); }
.pay-now-btn:disabled { opacity:.6; cursor:not-allowed; }
.pay-now-btn .btn-spinner {
  width:18px; height:18px; border:2px solid rgba(255,255,255,.4);
  border-top-color:#fff; border-radius:50%; animation:spin .7s linear infinite; display:none;
}
.pay-now-btn.loading .btn-spinner { display:block; }
.pay-now-btn.loading .btn-lbl { opacity:.7; }

.pay-secure-note {
  display:flex; align-items:center; justify-content:center; gap:.4rem;
  font-size:.75rem; color:var(--gray-500); margin-top:.5rem;
}

/* =====================================================
   DASHBOARD PAYMENT PAGE (inside supplier/admin dash)
   ===================================================== */
.dash-pay-page {}

/* Payment method selector inside dashboard */
.dash-pay-methods {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:.75rem;
  margin-bottom:1.5rem;
}
.dash-pay-method {
  border:2px solid var(--gray-200); border-radius:.75rem; padding:.85rem .7rem;
  text-align:center; cursor:pointer; transition:var(--pay-transition);
  background:#fff;
}
.dash-pay-method:hover   { border-color:var(--pay-secondary); }
.dash-pay-method.selected{
  border-color:var(--pay-secondary);
  background:rgba(14,165,160,.07);
}
.dash-pay-method .method-icon { font-size:1.7rem; margin-bottom:.3rem; display:block; }
.dash-pay-method .method-name { font-size:.78rem; font-weight:700; color:var(--gray-700); }

/* Transaction table */
.tx-table { width:100%; border-collapse:collapse; }
.tx-table th { padding:.6rem 1rem; font-size:.78rem; font-weight:700; color:var(--gray-600); background:var(--gray-50); text-align:right; border-bottom:1.5px solid var(--gray-200); }
.tx-table td { padding:.8rem 1rem; font-size:.83rem; border-bottom:1px solid var(--gray-100); }
.tx-table tr:last-child td { border-bottom:none; }
.tx-table tr:hover td { background:rgba(14,165,160,.03); }
.tx-id   { font-weight:700; color:var(--primary); font-family:monospace; }
.tx-amt  { font-weight:700; }
.tx-plus { color:var(--pay-success); }
.tx-minus{ color:var(--pay-danger); }

/* Balance card */
.balance-card {
  background:var(--pay-wenet-g); border-radius:1rem; padding:1.5rem;
  color:#fff; margin-bottom:1.5rem; position:relative; overflow:hidden;
}
.balance-card::before {
  content:''; position:absolute;
  width:200px; height:200px; border-radius:50%;
  background:rgba(255,255,255,.05); top:-80px; left:-60px;
}
.balance-card .bc-label { font-size:.875rem; opacity:.85; margin-bottom:.3rem; }
.balance-card .bc-amount { font-size:2.2rem; font-weight:800; margin-bottom:.25rem; }
.balance-card .bc-sub    { font-size:.82rem; opacity:.75; }
.balance-card .bc-actions{ display:flex; gap:.75rem; margin-top:1.2rem; flex-wrap:wrap; }
.bc-action-btn {
  padding:.5rem 1.2rem; border-radius:99px;
  border:1.5px solid rgba(255,255,255,.4);
  background:rgba(255,255,255,.12); color:#fff;
  font-family:var(--font-primary); font-size:.82rem; font-weight:700;
  cursor:pointer; transition:var(--pay-transition);
  display:flex; align-items:center; gap:.3rem;
}
.bc-action-btn:hover { background:rgba(255,255,255,.22); }

/* =====================================================
   WENET INTEGRATION SECTION
   ===================================================== */
.wenet-integration-card {
  border:2px solid var(--pay-wenet);
  border-radius:1rem; overflow:hidden; margin-bottom:1.5rem;
}
.wenet-integration-header {
  background:var(--pay-wenet-g); padding:1.2rem 1.5rem;
  display:flex; align-items:center; justify-content:space-between;
}
.wenet-integration-header h3 { color:#fff; font-size:1rem; font-weight:700; margin:0; display:flex; align-items:center; gap:.5rem; }
.wenet-integration-header .wenet-logo-text {
  font-size:1.1rem; font-weight:900; color:#fff; letter-spacing:1px;
}
.wenet-integration-body { padding:1.5rem; background:#fff; }

/* Institution card */
.institution-card {
  border:1.5px solid var(--gray-200); border-radius:.75rem; padding:1rem;
  display:flex; align-items:center; gap:.9rem; margin-bottom:.75rem;
  transition:var(--pay-transition); cursor:pointer;
  background:#fff;
}
.institution-card:hover { border-color:var(--pay-wenet); box-shadow:0 4px 12px rgba(27,58,107,.1); }
.institution-card.connected { border-color:var(--pay-success); background:rgba(5,150,105,.03); }
.institution-logo {
  width:48px; height:48px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  font-size:1.3rem; font-weight:800; flex-shrink:0;
}
.institution-info { flex:1; min-width:0; }
.institution-info .inst-name { font-size:.9rem; font-weight:700; color:var(--gray-800); margin-bottom:.15rem; }
.institution-info .inst-type { font-size:.75rem; color:var(--gray-500); }
.institution-action {
  display:flex; flex-direction:column; align-items:flex-end; gap:.3rem;
}
.connect-btn {
  padding:.35rem .85rem; border-radius:99px;
  border:1.5px solid var(--pay-wenet); background:transparent;
  color:var(--pay-wenet); font-family:var(--font-primary);
  font-size:.78rem; font-weight:700; cursor:pointer; transition:var(--pay-transition);
}
.connect-btn:hover { background:var(--pay-wenet); color:#fff; }
.connect-btn.connected-btn {
  border-color:var(--pay-success); background:rgba(5,150,105,.08); color:var(--pay-success);
}
.connect-btn.connected-btn:hover { background:var(--pay-success); color:#fff; }

/* =====================================================
   SUCCESS / RECEIPT
   ===================================================== */
.pay-receipt {
  display:none; text-align:center; padding:2rem 1.5rem; animation:fadeInUp .4s ease;
}
.receipt-icon {
  width:72px; height:72px; border-radius:50%;
  background:rgba(5,150,105,.1); border:3px solid var(--pay-success);
  display:flex; align-items:center; justify-content:center;
  font-size:1.8rem; color:var(--pay-success); margin:0 auto 1.2rem;
  animation:scaleIn .4s cubic-bezier(.34,1.56,.64,1);
}
.receipt-ref {
  background:var(--gray-50); border-radius:.75rem; padding:.75rem 1.5rem;
  font-size:.9rem; font-weight:700; color:var(--primary);
  letter-spacing:1px; display:inline-block; margin-bottom:1.5rem;
}

/* =====================================================
   RESPONSIVE
   ===================================================== */
@media(max-width:768px){
  .pay-hero { padding:2rem 1rem 1.5rem; }
  .pay-method-tabs { grid-template-columns:1fr 1fr; }
  .partner-grid { grid-template-columns:1fr 1fr; }
  .wenet-stats  { grid-template-columns:repeat(2,1fr); }
  .wenet-table  { font-size:.78rem; }
  .balance-card .bc-amount { font-size:1.7rem; }
  .pay-topbar { padding:.75rem 1rem; }
}

/* =====================================================
   ANIMATIONS (reuse)
   ===================================================== */
@keyframes fadeInUp { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} }
@keyframes scaleIn  { from{transform:scale(0)} to{transform:scale(1)} }
@keyframes spin     { to{transform:rotate(360deg)} }

/* =====================================================
   ADD PARTNER FORM — نموذج إضافة شريك جديد
   ===================================================== */
#add-partner-panel-supplier,
#add-partner-panel-admin,
#add-partner-panel-gateway {
  animation: fadeSlideDown .3s ease;
}

@keyframes fadeSlideDown {
  from { opacity:0; transform:translateY(-12px); }
  to   { opacity:1; transform:translateY(0); }
}

/* تحسين label radio الخاصة بنوع الشريك */
[name^="ptype_"] + * ~ label:has(input[type="radio"]:checked),
label:has(input[name^="ptype_"]:checked) {
  border-color: #1b3a6b !important;
  background: #eff6ff !important;
}

/* input focus styles */
#add-partner-panel-supplier input:focus,
#add-partner-panel-supplier select:focus,
#add-partner-panel-supplier textarea:focus,
#add-partner-panel-admin input:focus,
#add-partner-panel-admin select:focus,
#add-partner-panel-admin textarea:focus,
#add-partner-panel-gateway input:focus,
#add-partner-panel-gateway select:focus,
#add-partner-panel-gateway textarea:focus {
  border-color: #1b3a6b !important;
  box-shadow: 0 0 0 3px rgba(27,58,107,.12) !important;
}

/* قائمة الشركاء المضافين */
.custom-partner-item {
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: .65rem;
  padding: .7rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: .2s;
}
.custom-partner-item:hover {
  border-color: #1b3a6b;
  background: #f0f7ff;
}