/* 
 *
 * ZFRICA Withdrawable Bonus - Frontend UI Styles
 *
 * PURPOSE
 * -------
 * Provides all visual styling for the Withdrawable Bonus frontend interface.
 *
 * This file controls:
 * - Withdrawable Bonus card layout
 * - Balance display styling
 * - Progress bar visualization
 * - Recent bonus list styling
 * - Withdraw button states
 * - Withdrawal request modal (overlay + dialog)
 * - Input fields and validation states
 * - Success and error message banners
 *
 * DESIGN GOALS
 * ------------
 * - Clean financial dashboard aesthetic
 * - Emerald-accent success color system
 * - Strong typography hierarchy
 * - Soft elevation shadows for modal depth
 * - Accessible contrast and readable spacing
 *
 * SCOPE
 * -----
 * - Loads only on pages where the shortcode is rendered
 * - Does not affect wp-admin
 * - Does not affect unrelated frontend components
 *
 * VERSION
 * -------
 * 2.0.0
 */
















/* =========================================================
   Withdrawable Bonus Card (CONCISE MERGED)
   IMPORTANT: paste this whole block in WP Additional CSS
   ========================================================= */

/* Card */
.zfrica-wb-card{
  border:1px solid rgba(15,23,42,.12);
  border-radius:14px;
  padding:16px;
  background:#f7fbff;
  margin:14px 0 0;
}

/* Header */
.zfrica-wb-head{display:flex;justify-content:space-between;align-items:center}
.zfrica-wb-card .zfrica-wb-title{
  font-size:16px!important;
  font-weight:800;
  color:#0f172a;
  margin:0 0 2px!important;
}
.zfrica-wb-rules-link{
  font-size:12px;
  font-weight:500;
  background:none;
  border:0;
  cursor:pointer;
  padding:0;
  color:#FF6F00;
  text-decoration:underline;
}
.zfrica-wb-rules-link:hover{color:#0f766e}

/* Sub + note (tightened) */
.zfrica-wb-card .zfrica-wb-sub{
  margin:0 0 6px!important;
  color:#334155;
  font-size:9px!important;
  line-height:1.35;
}
.zfrica-wb-card .zfrica-wb-sub span{
  font-weight:700;
  color:#0f766e;
  font-size:12px!important; /* green money stays bigger */
}
.zfrica-wb-card .zfrica-wb-note{
  font-size:9px!important;
  color:#FF6F00;
  line-height:1.35;
  margin:8px 0 14px!important;
}

/* Balance row (amount + Play Now beside it) */
.zfrica-wb-balance-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.zfrica-wb-balance-row .zfrica-wb-balance{
  flex:1 1 auto;
  min-width:0;
  font-size:42px;
  font-weight:900;
  margin:-15px 0 -18px 0!important;
  color:#0f766e;
  letter-spacing:-0.5px;
}





/* Play Now button aligned with card aesthetic */
.zfrica-wb-playtop{
	  flex:0 0 auto;
  white-space:nowrap;
  text-decoration:none;
  background: #13857c !important;
  color:#0f766e;
  border:1px solid rgba(15,118,110,.35);
  padding:5px 16px !important;
  border-radius:10px;
  font-weight:700;
  font-size:14px;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.zfrica-wb-playtop:hover{
  background:#d7efed;
  color:#0f766e;
}

/* Progress */
.zfrica-wb-progress{
  height:13px;
  background:rgba(15,23,42,.12);
  border-radius:999px;
  overflow:hidden;
  margin:6px 0 10px;
}
.zfrica-wb-progress>span{display:block;height:100%;background:#0f766e}

/* Info row (left text + right Withdraw) */
.zfrica-wb-row{
  display:flex;
  gap:12px;
  align-items:flex-start;
  justify-content:space-between;
  flex-wrap:wrap;
  margin-top:10px;
  padding:12px;
  background:#fff;
  border:1px solid rgba(15,23,42,.08);
  border-radius:12px;
}
.zfrica-wb-row-left{flex:1 1 auto;min-width:0}
.zfrica-wb-kv{margin:0;font-size:13px;line-height:1.6}

/* Withdraw button */
.zfrica-wb-btn{
  border:0;
  border-radius:10px;
  padding:10px 14px;
  font-weight:800;
  cursor:pointer;
  background:#0f766e;
  color:#fff;
  min-width:150px;
}
.zfrica-wb-btn[disabled]{opacity:.45;cursor:not-allowed;background:#64748b}

/* Bonus history */
.zfrica-wb-list{
  margin:14px 0 0;
  padding:12px;
  background:#fff;
  border:1px solid rgba(15,23,42,.08);
  border-radius:12px;
}
.zfrica-wb-list h4{
  margin:0 0 10px;
  font-size:16px!important;
  font-weight:900;
  color:#666!important;
}
.zfrica-wb-item{
  display:flex;
  gap:10px;
  padding:8px 0;
  border-bottom:1px solid rgba(15,23,42,.06);
  font-size:9px;
}
.zfrica-wb-item:last-child{border-bottom:0}
.zfrica-wb-meta{font-size:11px;line-height:1.25}
.zfrica-wb-plus{font-weight:900;color:#0f766e;min-width:52px;font-size:13px}
.zfrica-wb-item.is-credit .zfrica-wb-amount,
.zfrica-wb-item.is-debit .zfrica-wb-amount{font-weight:700}
.zfrica-wb-item.is-credit .zfrica-wb-amount{color:#0f766e}
.zfrica-wb-item.is-debit  .zfrica-wb-amount{color:#b91c1c}

/* Mobile: keep Play Now beside the balance */
@media (max-width:520px){
  .zfrica-wb-balance-row{
    flex-direction:row !important;
    align-items:center;
  }

  .zfrica-wb-playtop{
    flex:0 0 auto;
  }

  .zfrica-wb-balance{
    font-size:34px; /* slightly smaller to fit small screens */
  }
}

/* Customizes the bonus expiry notince on user Accouunt profile */
.zfrica-wb-expiry-notice {
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    background: #fff7ed;
    border: 1px solid #fdba74;
    color: #9a3412;
    font-size: 13px;
    line-height: 1.5;
    font-weight: 500;
}





















/**
withdrawal modal
 */
/* Withdraw Modal */

/* ============================
   ZFRICA Withdrawal Modal (Merged)
   ============================ */

/* Withdraw Modal */
.zfrica-wb-modal{
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none;
}

.zfrica-wb-modal.is-open{ display:block; }

.zfrica-wb-modal-overlay{
  position:absolute;
  inset:0;
  background: rgba(2,6,23,.55);
  backdrop-filter: blur(2px);
}




.zfrica-wb-modal-card{
  position:relative;
  width:min(520px, calc(100% - 24px));
  margin:5vh auto;
  background:#fff;
  border-radius:14px;
  box-shadow:0 20px 60px rgba(2,6,23,.25);
  border:1px solid rgba(15,23,42,.10);
	 max-height:90vh;
  display:flex;
  flex-direction:column;
}


@media (max-width:480px){
  .zfrica-wb-modal-card{
    width:calc(100% - 16px);
    margin:4vh auto;
  }
}
	
	

.zfrica-wb-modal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 16px;
  border-bottom:1px solid rgba(15,23,42,.08);
}

.zfrica-wb-modal-title{
  font-weight:900;
  font-size:16px;
  color:#0f172a;
}

.zfrica-wb-modal-x{
  width:34px;
  height:34px;
  border-radius:10px;
  border:1px solid rgba(15,23,42,.10);
  background:#fff;
  font-size:18px;
  line-height:1;
  cursor:pointer;
  color:#0f172a;
}


.zfrica-wb-modal-body{
  padding:14px 16px 10px;
  overflow-y:auto;
}

.zfrica-wb-modal-row{ margin-bottom:12px; }

/* Default label */
.zfrica-wb-modal-label{
  display:block;
  font-size:12px;
  color:#334155;
  font-weight:800;
  margin-bottom:6px;
}

.zfrica-wb-modal-value{
  font-size:18px;
  font-weight:900;
  color:#0f766e;
}

/* Center "Available Balance" block */
.zfrica-wb-modal-row:first-child{
  text-align:center;
  padding-bottom:10px;
  margin-bottom:14px;
  border-bottom:1px solid rgba(15,23,42,.08);
}
.zfrica-wb-modal-row:first-child .zfrica-wb-modal-label{
  margin-bottom:4px;
  font-size:12px;
  font-weight:700;
}
.zfrica-wb-modal-row:first-child .zfrica-wb-modal-value{
  font-size:22px;
  font-weight:900;
  letter-spacing:.2px;
}

/* Reduce withdrawal label size */
.zfrica-wb-modal-row:nth-child(2) .zfrica-wb-modal-label{
  font-size:11.5px;
  font-weight:700;
}

/* Input: currency chip + field */
.zfrica-wb-input-wrap{
  display:flex;
  align-items:center;
  gap:0;
  border:1px solid rgba(15,23,42,.14);
  border-radius:8px;
  padding:0;
  overflow:hidden;
}

.zfrica-wb-naira{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:44px;
  height:38px;
  background:#f8fafc;
  border-right:1px solid rgba(15,23,42,.12);
  font-weight:800;
  color:#0f172a;
}

.zfrica-wb-modal-input{
  border:0;
  outline:none;
  width:100%;
  height:38px;
  padding:0 12px;
  font-size:13px;
  color:#0f172a;
}

.zfrica-wb-modal-note{
  font-size:12px;
  color:#64748b;
  margin-top:6px;
}

.zfrica-wb-modal-msg{
  margin-top:10px;
  font-size:13px;
  font-weight:800;
  display:none;
  padding:10px 12px;
  border-radius:12px;
}

.zfrica-wb-modal-msg.ok{
  display:block;
  background:#ecfdf5;
  border:1px solid rgba(16,185,129,.25);
  color:#065f46;
}

.zfrica-wb-modal-msg.err{
  display:block;
  background:#fef2f2;
  border:1px solid rgba(239,68,68,.25);
  color:#7f1d1d;
}

/* Footer: Cancel left, Submit right */
.zfrica-wb-modal-foot{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:12px 16px 16px;
  border-top:1px solid rgba(15,23,42,.08);
}

.zfrica-wb-btn-ghost{
  height:34px;
  padding:0 14px;
  border-radius:8px;
  background:#fff;
  color:#0f172a;
  border:1px solid rgba(15,23,42,.14);
  font-size:12.5px;
  font-weight:700;
  cursor:pointer;
  margin-right:auto;
}

.zfrica-wb-btn-solid{
  height:34px;
  padding:0 16px;
  border-radius:8px;
  background:#0f766e;
  color:#fff;
  border:0;
  font-size:12.5px;
  font-weight:800;
  cursor:pointer;
}

.zfrica-wb-btn-solid[disabled],
.zfrica-wb-btn-ghost[disabled]{
  opacity:.6;
  cursor:not-allowed;
}

/* Minimum styling (best if you wrap minimum text in .zfrica-wb-min-wrap in HTML) */
.zfrica-wb-min-wrap{ font-weight:400; }  /* makes "Minimum ₦" light */
#zfrica-wb-min{ font-weight:800; }       /* makes only the value bold */








/* =======================
   ZFRICA Rules (Modal + Button)
   ======================= */

.zfrica-wb-card{
  position:relative;
}

.zfrica-wb-rules-btn{
  position:absolute;
  top:14px;
  right:14px;
  border:1px solid rgba(15,23,42,.10);
  background:#fff;
  color:#0f172a;
  border-radius:999px;
  height:30px;
  padding:0 12px;
  font-size:12px;
  font-weight:800;
  cursor:pointer;
}

.zfrica-wb-rules-btn:hover{
  background:#f8fafc;
}

.zfrica-wb-rules-block{
  border:1px solid rgba(15,23,42,.08);
  background:#f8fafc;
  border-radius:12px;
  padding:12px;
  margin:0 0 12px;
}

.zfrica-wb-rules-h{
  font-size:13px;
  font-weight:900;
 color: inherit;
  margin:0 0 8px;
  text-transform:uppercase;
  letter-spacing:.4px;
}

.zfrica-wb-rules-list{
  margin:0;
  padding-left:18px;
  color:#334155;
  font-size:13px;
  line-height:1.55;
}

.zfrica-wb-rules-list li{
  margin:6px 0;
}


/* Rules modal: keep bold normal, only currency is green */
#zfrica-wb-rules-modal b{
  color: inherit;
}

#zfrica-wb-rules-modal .zfrica-wb-money{
  color:#0f766e;
  font-weight:800;
}





/* Payouts card styling*/
/* Payouts card styling*/
/* Payouts card styling*/

/* =======================
   ZFRICA Payouts (Merged)
   ======================= */

.zfrica-wb-payouts-card{
  border:1px solid rgba(15,23,42,.08);
  border-radius:18px;
  padding:18px;
  background:#EEF2FF;
  margin:16px 0 0;
  box-shadow:0 10px 30px rgba(15,23,42,.06);
}

.zfrica-wb-payouts-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}

.zfrica-wb-payouts-title{
  font-size:18px;
  font-weight:900;
  color:#0f172a;
  margin:0 0 4px;
}

.zfrica-wb-payouts-sub{
  font-size:12.5px;
  color:#64748b;
  margin:0;
}

.zfrica-wb-payouts-menu{
  border:1px solid rgba(15,23,42,.08);
  background:#fff;
  border-radius:12px;
  height:36px;
  width:42px;
  cursor:pointer;
  font-size:18px;
  line-height:1;
  color:#64748b;
}

/* Latest payout box */
.zfrica-wb-payouts-box{
  background:#fff;
  border:1px solid rgba(15,23,42,.06);
  border-radius:14px;
  padding:14px;
  margin-bottom:12px;
  box-shadow:0 6px 16px rgba(15,23,42,.04);
}

.zfrica-wb-payouts-box-title{
  font-size:12px;
  font-weight:800;
  color:#0f766e;
  margin:0 0 10px;
}

.zfrica-wb-payouts-latest{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.zfrica-wb-payouts-amount{
  font-size:20px;
  font-weight:900;
  color:#0f766e;
}

.zfrica-wb-payouts-meta{
  font-size:12px;
  color:#64748b;
  margin-top:10px;
}

/* History container */
.zfrica-wb-payouts-history{
  background:#f8fafc;
  border:1px solid rgba(15,23,42,.06);
  border-radius:14px;
  padding:12px;
  box-shadow:0 6px 16px rgba(15,23,42,.03);
}

.zfrica-wb-payouts-history .zfrica-wb-payouts-box-title{
  margin-bottom:8px;
  color:#334155;
}

/* History rows (flat, no borders/pills) */
.zfrica-wb-payout-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 0;
  margin:0;
  background:transparent;
  border:0;
  box-shadow:none;
}

.zfrica-wb-payout-line{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

/* Amount stays green in history */
.zfrica-wb-payout-naira{
  font-weight:900;
  color:#0f766e;
}

.zfrica-wb-payout-date{
  font-size:12px;
  color:#94a3b8;
  white-space:nowrap;
}

/* Pills: keep for Latest payout only */
.zfrica-wb-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  border:1px solid rgba(15,23,42,.10);
  background:#f1f5f9;
  color:#0f172a;
}

.zfrica-wb-pill.is-paid{
  background:#e7faf5;
  border-color: rgba(15,118,110,.25);
  color:#0f766e;
}
.zfrica-wb-pill.is-paid::before{
  content:"✓";
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:16px;
  height:16px;
  border-radius:999px;
  background:#0f766e;
  color:#fff;
  font-size:11px;
  line-height:1;
}

.zfrica-wb-pill.is-rejected{
  background:#fff1f2;
  border-color: rgba(239,68,68,.25);
  color:#b91c1c;
}

.zfrica-wb-pill.is-pending{
  background:#fff7ed;
  border-color: rgba(234,88,12,.25);
  color:#9a3412;
}

/* Pending amount pill */
.zwb-metric-pending-amt{
  background:#fff7ed;
  border:1px solid rgba(234,88,12,.25);
  color:#9a3412;
}

/* Remove pill styling inside history (status becomes plain text) */
.zfrica-wb-payout-row .zfrica-wb-pill{
  background:transparent;
  border:0;
  padding:0;
  border-radius:0;
  font-weight:700;
}
.zfrica-wb-payout-row .zfrica-wb-pill::before{
  content:none !important;
}
.zfrica-wb-payout-row .zfrica-wb-pill.is-paid{ color:#0f766e; }
.zfrica-wb-payout-row .zfrica-wb-pill.is-rejected{ color:#b45309; }
.zfrica-wb-payout-row .zfrica-wb-pill.is-pending{ color:#9a3412; }

/* Empty state */
.zfrica-wb-payouts-empty{
  background:#fff;
  border:1px solid rgba(15,23,42,.06);
  border-radius:14px;
  padding:14px;
  color:#64748b;
  font-size:13px;
  font-weight:700;
  box-shadow:0 6px 16px rgba(15,23,42,.03);
}