/* =========================================================
   JomDonation – Purple Theme (Custom CSS)
   Paste into:
   - Your template custom.css, OR
   - JomDonation "Custom CSS" area (if available)
   ========================================================= */

/* 1) Theme tokens */
:root{
  --jd-purple-900:#2b0a3d;
  --jd-purple-800:#3b0f57;
  --jd-purple-700:#4c1771;
  --jd-purple-600:#6a1fb7;   /* primary */
  --jd-purple-500:#7c3aed;   /* accent */
  --jd-purple-200:#e9d5ff;   /* soft bg */
  --jd-purple-100:#f5efff;

  --jd-text:#1b1025;
  --jd-muted:#5b4b6a;
  --jd-border:rgba(124,58,237,.22);

  --jd-radius:14px;
  --jd-shadow:0 10px 30px rgba(43,10,61,.12);
}

/* 2) Safe scope: applies to common JomDonation wrappers.
   If your site uses different wrappers, keep these and add your real wrapper. */
.jomdonation,
#jomdonation,
.jd-container,
.jdp-container,
.com_jomdonation{
  color:var(--jd-text);
}

/* 3) Cards / panels / sections */
.jomdonation .card,
#jomdonation .card,
.jd-container .card,
.jomdonation .panel,
#jomdonation .panel,
.jomdonation .well,
#jomdonation .well,
.jd-container .jd-box,
.jd-container .jd-card,
.com_jomdonation .card{
  background:linear-gradient(180deg, #fff 0%, var(--jd-purple-100) 140%);
  border:1px solid var(--jd-border);
  border-radius:var(--jd-radius);
  box-shadow:var(--jd-shadow);
}

/* 4) Headings */
.jomdonation h1, .jomdonation h2, .jomdonation h3,
#jomdonation h1, #jomdonation h2, #jomdonation h3,
.jd-container h1, .jd-container h2, .jd-container h3{
  color:var(--jd-purple-800);
}

.jomdonation .title, #jomdonation .title, .jd-container .title{
  color:var(--jd-purple-800);
  font-weight:800;
}

/* 5) Links */
.jomdonation a, #jomdonation a, .jd-container a{
  color:var(--jd-purple-600);
  text-decoration:none;
}
.jomdonation a:hover, #jomdonation a:hover, .jd-container a:hover{
  color:var(--jd-purple-500);
  text-decoration:underline;
}

/* 6) Buttons */
.jomdonation .btn,
#jomdonation .btn,
.jd-container .btn,
.jomdonation button,
#jomdonation button,
.jd-container button,
.jomdonation input[type="submit"],
#jomdonation input[type="submit"],
.jd-container input[type="submit"]{
  background:linear-gradient(180deg, var(--jd-purple-600), var(--jd-purple-700));
  color:#fff;
  border:1px solid rgba(124,58,237,.35);
  border-radius:12px;
  padding:.65rem 1rem;
  font-weight:700;
  box-shadow:0 10px 20px rgba(124,58,237,.22);
  transition:transform .12s ease, box-shadow .12s ease, filter .12s ease;
}

.jomdonation .btn:hover,
#jomdonation .btn:hover,
.jd-container .btn:hover,
.jomdonation button:hover,
#jomdonation button:hover,
.jd-container button:hover,
.jomdonation input[type="submit"]:hover,
#jomdonation input[type="submit"]:hover,
.jd-container input[type="submit"]:hover{
  transform:translateY(-1px);
  filter:brightness(1.03);
  box-shadow:0 14px 28px rgba(124,58,237,.28);
}

.jomdonation .btn:focus,
#jomdonation .btn:focus,
.jd-container .btn:focus,
.jomdonation button:focus,
#jomdonation button:focus,
.jd-container button:focus,
.jomdonation input[type="submit"]:focus,
#jomdonation input[type="submit"]:focus,
.jd-container input[type="submit"]:focus{
  outline:0;
  box-shadow:0 0 0 4px rgba(124,58,237,.22), 0 14px 28px rgba(124,58,237,.24);
}

/* Secondary / outline button (common classes) */
.jomdonation .btn.btn-secondary,
.jomdonation .btn.btn-default,
#jomdonation .btn.btn-secondary,
#jomdonation .btn.btn-default,
.jd-container .btn.btn-secondary,
.jd-container .btn.btn-default{
  background:#fff;
  color:var(--jd-purple-700);
  border:1px solid rgba(124,58,237,.35);
  box-shadow:none;
}
.jomdonation .btn.btn-secondary:hover,
.jomdonation .btn.btn-default:hover,
#jomdonation .btn.btn-secondary:hover,
#jomdonation .btn.btn-default:hover,
.jd-container .btn.btn-secondary:hover,
.jd-container .btn.btn-default:hover{
  background:var(--jd-purple-100);
}

/* 7) Form fields */
.jomdonation input[type="text"],
.jomdonation input[type="email"],
.jomdonation input[type="tel"],
.jomdonation input[type="number"],
.jomdonation input[type="url"],
.jomdonation select,
.jomdonation textarea,
#jomdonation input[type="text"],
#jomdonation input[type="email"],
#jomdonation input[type="tel"],
#jomdonation input[type="number"],
#jomdonation input[type="url"],
#jomdonation select,
#jomdonation textarea,
.jd-container input[type="text"],
.jd-container input[type="email"],
.jd-container input[type="tel"],
.jd-container input[type="number"],
.jd-container input[type="url"],
.jd-container select,
.jd-container textarea{
  background:#fff;
  border:1px solid rgba(124,58,237,.25);
  border-radius:12px;
  padding:.6rem .75rem;
  color:var(--jd-text);
  transition:border-color .12s ease, box-shadow .12s ease;
}

.jomdonation input:focus,
.jomdonation select:focus,
.jomdonation textarea:focus,
#jomdonation input:focus,
#jomdonation select:focus,
#jomdonation textarea:focus,
.jd-container input:focus,
.jd-container select:focus,
.jd-container textarea:focus{
  border-color:rgba(124,58,237,.65);
  box-shadow:0 0 0 4px rgba(124,58,237,.18);
  outline:0;
}

.jomdonation label, #jomdonation label, .jd-container label{
  color:var(--jd-purple-800);
  font-weight:700;
}

/* 8) Donation amount options (common patterns) */
.jomdonation .amount,
.jomdonation .donation-amount,
.jomdonation .jd-amount,
#jomdonation .amount,
#jomdonation .donation-amount,
#jomdonation .jd-amount,
.jd-container .amount,
.jd-container .donation-amount,
.jd-container .jd-amount{
  color:var(--jd-purple-800);
  font-weight:800;
}

.jomdonation .btn.amount-btn,
#jomdonation .btn.amount-btn,
.jd-container .btn.amount-btn{
  background:#fff;
  color:var(--jd-purple-700);
  border:1px solid rgba(124,58,237,.35);
  box-shadow:none;
}
.jomdonation .btn.amount-btn.active,
#jomdonation .btn.amount-btn.active,
.jd-container .btn.amount-btn.active{
  background:linear-gradient(180deg, var(--jd-purple-600), var(--jd-purple-700));
  color:#fff;
}

/* 9) Progress bars */
.jomdonation .progress,
#jomdonation .progress,
.jd-container .progress{
  background:rgba(124,58,237,.10);
  border-radius:999px;
  overflow:hidden;
  border:1px solid rgba(124,58,237,.18);
}
.jomdonation .progress-bar,
#jomdonation .progress-bar,
.jd-container .progress-bar{
  background:linear-gradient(90deg, var(--jd-purple-600), var(--jd-purple-500));
}

/* 10) Tables / lists */
.jomdonation table,
#jomdonation table,
.jd-container table{
  border-collapse:separate;
  border-spacing:0;
  width:100%;
  overflow:hidden;
  border-radius:var(--jd-radius);
  border:1px solid var(--jd-border);
}
.jomdonation th, #jomdonation th, .jd-container th{
  background:var(--jd-purple-100);
  color:var(--jd-purple-800);
  font-weight:800;
}
.jomdonation td, #jomdonation td, .jd-container td{
  border-top:1px solid rgba(124,58,237,.14);
}

/* 11) Alerts / messages */
.jomdonation .alert,
#jomdonation .alert,
.jd-container .alert{
  border-radius:12px;
  border:1px solid rgba(124,58,237,.22);
  background:var(--jd-purple-100);
  color:var(--jd-purple-900);
}
.jomdonation .alert-success,
#jomdonation .alert-success,
.jd-container .alert-success{
  border-color:rgba(124,58,237,.30);
}
.jomdonation .alert-danger,
#jomdonation .alert-danger,
.jd-container .alert-danger{
  background:rgba(124,58,237,.08);
  border-color:rgba(76,23,113,.35);
}

/* 12) Small polish */
.jomdonation hr, #jomdonation hr, .jd-container hr{
  border:0;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(124,58,237,.35), transparent);
}
.jomdonation .muted, #jomdonation .muted, .jd-container .muted{
  color:var(--jd-muted);
}

/* 13) Optional: tighten spacing on mobile */
@media (max-width: 640px){
  .jomdonation .btn,
  #jomdonation .btn,
  .jd-container .btn{
    width:100%;
  }
}