/* ============================================================
   CAWFA — Membership Plan (Single Plan Layout)
============================================================ */

:root {
  --mp-bg1:#050505;
  --mp-bg2:#101010;
  --mp-card:#141414;
  --mp-border:#2b2b2b;
  --mp-tx:#ffffff;
  --mp-dim:#c4c4c4;
  --mp-red:#d90404;
  --mp-red2:#730707;
  --mp-success:#44c06a;
}

/* BODY */
.mp-body{
  background:radial-gradient(circle at top,#151515,#050505 45%,#000 85%);
  color:var(--mp-tx);
}
.mp-wrapper{
  padding-top:1.5rem;
}

/* PAGE HEADER */
.mp-page-title{
  font-size:1.4rem;
  font-weight:700;
  display:flex;
  align-items:center;
  gap:.5rem;
  color:#fff;
  margin-bottom:.25rem;
}
.mp-page-title i{
  color:var(--mp-red);
  font-size:1.3rem;
}
.mp-page-desc{
  font-size:.9rem;
  color:#cfcfcf;
}

/* PLAN CARD */
.mp-plan-card{
  background:linear-gradient(145deg,#161616,#0d0d0d);
  border-radius:18px;
  border:1px solid var(--mp-border);
  padding:1.6rem 1.35rem 1.4rem;
  color:#fff;
  box-shadow:0 10px 30px rgba(0,0,0,.55);
  display:flex;
  flex-direction:column;
  height:100%;
}

/* Plan header */
.mp-plan-header{
  margin-bottom:1rem;
}
.mp-plan-label{
  font-size:1.05rem;
  font-weight:600;
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  color:#fff;
  margin-bottom:.4rem;
}
.mp-plan-label i{
  color:var(--mp-red);
  font-size:1.1rem;
}

/* PRICE */
.mp-plan-price-wrap{
  display:flex;
  align-items:baseline;
  gap:.18rem;
  flex-wrap:nowrap;
}
.mp-price-symbol{
  font-size:1.6rem;
  font-weight:700;
  color:var(--mp-red);
  line-height:1;
}
.mp-plan-price{
  font-size:2.4rem;
  font-weight:800;
  line-height:1;
  color:var(--mp-red);
}
.mp-price-currency{
  font-size:1.05rem;
  font-weight:700;
  color:var(--mp-red);
  line-height:1;
  margin-left:.15rem;
}
.mp-plan-period{
  margin-top:.25rem;
  font-size:.85rem;
  color:var(--mp-dim);
}

/* Tagline & features */
.mp-plan-tagline{
  font-size:.9rem;
  color:#d0d0d0;
  margin-bottom:.9rem;
}
.mp-plan-features{
  flex:1 1 auto;
}
.mp-feature-item{
  display:flex;
  align-items:flex-start;
  gap:.55rem;
  font-size:.9rem;
  margin-bottom:.5rem;
  color:var(--mp-dim);
}
.mp-feature-item i{
  color:var(--mp-red);
  font-size:1rem;
  margin-top:.15rem;
}

/* SELECT BUTTON */
.mp-select-btn{
  width:100%;
  padding:.75rem 1.1rem;
  border-radius:999px;
  background:transparent;
  border:1px solid rgba(255,255,255,.35);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.55rem;
  font-weight:500;
  transition:.25s ease;
}
.mp-select-btn i{
  color:var(--mp-red);
  font-size:1rem;
}
.mp-select-btn:hover{
  background:#fff;
  border-color:#fff;
  color:#000;
}
.mp-select-btn:hover i{
  color:#000 !important;
}

/* Selected state */
.mp-plan-card.mp-selected{
  border-color:var(--mp-red);
  box-shadow:0 0 22px rgba(217,4,4,.6);
}
.mp-plan-card.mp-selected .mp-select-btn{
  background:var(--mp-red);
  border-color:var(--mp-red);
  color:#fff;
}
.mp-plan-card.mp-selected .mp-select-btn i{
  color:#fff !important;
}

/* Notes */
.mp-notes-title{
  font-size:.82rem;
  font-weight:600;
  color:#fff;
  margin-bottom:.2rem;
}
.mp-notes-list{
  padding-left:1rem;
  font-size:.8rem;
  color:#b9b9b9;
}
.mp-notes-list li{
  margin-bottom:.15rem;
}

/* SUMMARY CARD */
.mp-summary-card{
  background:
    radial-gradient(circle at top, rgba(217,4,4,.16), transparent 55%),
    linear-gradient(145deg,#151515,#050505);
  border-radius:18px;
  border:1px solid var(--mp-border);
  padding:1.5rem 1.3rem;
  box-shadow:0 12px 36px rgba(0,0,0,.75);
  display:flex;
  flex-direction:column;
  height:100%;
}
.mp-summary-title{
  font-size:1.25rem;
  font-weight:700;
  color:#ffffff;
  display:flex;
  align-items:center;
  gap:.5rem;
}
.mp-summary-title i{
  font-size:1.2rem;
  color:var(--mp-red);
}
.mp-summary-subtitle{
  font-size:.9rem;
  color:#cacaca;
}
.mp-summary-body{
  margin-top:.4rem;
  margin-bottom:1.1rem;
}

/* Empty state */
.mp-summary-plan-empty{
  display:flex;
  align-items:center;
  flex-direction:column;
  text-align:center;
  padding:1rem;
  border:1px dashed rgba(255,255,255,.25);
  border-radius:14px;
  background:rgba(0,0,0,.4);
  color:var(--mp-dim);
  min-height:150px;
  justify-content:center;
}
.mp-summary-plan-empty i{
  font-size:1.4rem;
  color:var(--mp-red);
}

/* Active state */
.mp-summary-plan-active{
  padding:.6rem;
  border-radius:12px;
}
.mp-summary-pill{
  display:inline-flex;
  align-items:center;
  padding:.28rem .9rem;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.25);
  font-size:.82rem;
  margin-bottom:.55rem;
}
.mp-summary-price{
  display:flex;
  align-items:baseline;
  gap:.18rem;
  flex-wrap:nowrap;
  margin-bottom:.25rem;
}
#mpSummaryPriceValue{
  font-size:2rem;
  font-weight:800;
  color:var(--mp-red);
}
.mp-summary-period{
  font-size:.85rem;
  color:#cfcfcf;
}

/* PAY BUTTON */
.mp-pay-btn{
  width:100%;
  padding:.75rem 1rem;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.3);
  background:transparent;
  color:#fff;
  font-weight:600;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.55rem;
  transition:.25s ease;
}
.mp-pay-btn i{
  font-size:1rem;
  color:var(--mp-red);
}
.mp-pay-btn:hover{
  background:#fff;
  color:#000;
}
.mp-pay-btn:hover i{
  color:#000 !important;
}
.mp-pay-btn.disabled,
.mp-pay-btn:disabled{
  opacity:.45;
  cursor:not-allowed;
}

/* REGISTER CTA */
.mp-register-cta{
  font-size:.85rem;
  color:#cfcfcf;
}
.mp-register-link{
  color:var(--mp-red);
  text-decoration:none;
  margin-left:.35rem;
}
.mp-register-link:hover{
  text-decoration:underline;
}

/* RESPONSIVE */
@media(max-width:991.98px){
  .mp-summary-card{ margin-top:1.4rem; }
}
@media(max-width:575.98px){
  .mp-plan-card{ padding:1.25rem 1rem; }
  .mp-summary-card{ padding:1.25rem 1rem; }
  .mp-page-title{ font-size:1.2rem; }
  .mp-page-desc{ font-size:.82rem; }
}

/* ============================================================
   CAWFA — Payment Manual (Payoneer)
============================================================ */

.copy-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    margin-left: 6px;
    padding: 0 4px;
}

.copy-btn i {
    font-size: 1rem;
    transition: 0.3s;
}

.copy-btn:hover i {
    color: #ff3b3b;
    transform: scale(1.1);
}