/* ===== Mondiale Werken Donate (purple styling + mobile details first) ===== */
.mowe-donate.wizard{
  --pad:1rem;
  --gap:1rem;
  --br:16px;
  --shadow:0 8px 24px rgba(0,0,0,.08);

  /* Brand */
  --purple:#60418b;      /* primary */
  --purple-700:#513673;  /* hover */
  --text:#824337;        /* requested text colour */
  --muted:#6b7280;
  --bg:#ffffff;
  --border:#e5e7eb;
  --ring: 0 0 0 3px rgba(96,65,139,.25);
}

/* Layout */
.mowe-step{margin-bottom:1.25rem}
.mowe-step-title{margin:.25rem 0 1rem;font-size:1.125rem;color:var(--text)}

/* Tiles (Step 1) */
.mowe-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--gap)}
.mowe-tile{display:flex;flex-direction:column;gap:.5rem;padding:var(--pad);border-radius:var(--br);box-shadow:var(--shadow);background:var(--bg);cursor:pointer;border:2px solid transparent;text-align:left;transition:border-color .15s, transform .06s}
.mowe-tile:focus-visible,.mowe-tile[aria-pressed="true"]{outline:none;border-color:var(--purple);box-shadow:var(--ring)}
.mowe-tile:hover{border-color:var(--purple)}
.mowe-tile:active{transform:translateY(1px)}
.mowe-tile img{width:100%;height:140px;object-fit:cover;border-radius:12px}
.mowe-tile .amt{font-weight:700;font-size:1.25rem;color:var(--purple)}
.mowe-tile .txt{opacity:.9;color:var(--text)}

/* Custom amount inside the tile */
.mowe-tile.mowe-tile-custom .custom-box{
  margin-top:.5rem; display:flex; gap:.5rem; align-items:center; flex-wrap:wrap;
}
.mowe-tile.mowe-tile-custom label{
  display:flex; align-items:center; gap:.25rem;
  padding:.4rem .6rem; border:1px solid var(--border);
  border-radius:12px; background:#fff;
}
.mowe-tile.mowe-tile-custom input{
  border:0; outline:0; font:inherit; width:9ch;
}
.mowe-tile.mowe-tile-custom .mowe-custom-confirm{
  padding:.45rem .8rem; border-radius:999px; border:1px solid var(--purple);
  background:#fff; color:var(--purple); cursor:pointer;
  transition:background .15s, border-color .15s, color .15s, transform .06s;
}
.mowe-tile.mowe-tile-custom .mowe-custom-confirm:hover{
  border-color:var(--purple-700); color:var(--purple-700);
}

/* Step 2 */
.mowe-accounts{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--gap)}
.card{padding:1rem;border-radius:var(--br);background:#fff;box-shadow:var(--shadow);border:2px solid transparent;text-align:left;cursor:pointer;transition:border-color .15s, transform .06s}
.card .title{font-weight:700;margin-bottom:.25rem;color:var(--text)}
.card .sub{color:var(--muted);font-size:.95rem}
.card[aria-pressed="true"], .card:focus-visible{border-color:var(--purple);outline:none;box-shadow:var(--ring)}
.card:hover{border-color:var(--purple)}
.card:active{transform:translateY(1px)}

/* Step 3: preferences */
.mowe-pref{margin-bottom:1rem}
.mowe-pref .label{margin-bottom:.35rem;color:var(--muted)}
.mowe-pref .choices{display:flex;gap:.5rem;flex-wrap:wrap}
.mowe-pref .choices button{padding:.5rem .9rem;border-radius:999px;border:1px solid var(--border);background:#fff;cursor:pointer;transition:background .15s, color .15s, border-color .15s}
.mowe-pref .choices button:hover{border-color:var(--purple)}
.mowe-pref .choices button[aria-pressed="true"]{background:var(--purple);color:#fff;border-color:var(--purple)}
.mowe-pref .choices button:focus-visible{outline:none;box-shadow:var(--ring)}

/* QR + details side-by-side on desktop; stacked on mobile */
.mowe-qrzone{display:grid;grid-template-columns:1fr minmax(320px,1fr);gap:var(--gap);align-items:start}
@media (max-width:768px){.mowe-qrzone{grid-template-columns:1fr}}
.mowe-qrwrap{padding:var(--pad);border-radius:var(--br);background:var(--bg);box-shadow:var(--shadow);display:grid;gap:.6rem;justify-items:start}
.mowe-qrhint{margin:.25rem 0 .25rem;color:var(--muted)}
#mowe-epc-qr canvas,#mowe-epc-qr img{width:320px;max-width:100%;height:auto;border-radius:12px;border:1px solid var(--border)}
.mowe-qr-actions{display:flex;gap:.5rem;flex-wrap:wrap}
.mowe-qr-actions a{padding:.55rem .9rem;border-radius:10px;border:1px solid var(--border);background:#fff;text-decoration:none;color:var(--text);transition:background .15s, border-color .15s, color .15s, transform .06s}
.mowe-qr-actions a:hover{border-color:var(--purple);color:var(--purple)}
.mowe-qr-actions a:focus-visible{outline:none;box-shadow:var(--ring)}
.mowe-qr-actions a:active{transform:translateY(1px)}
/* Explicit style for Download QR so it's clearly visible */
.mowe-qr-actions .mowe-download-qr{
  border-color: var(--purple);
  color: var(--purple);
}
.mowe-qr-actions .mowe-download-qr:hover{
  background: var(--purple);
  border-color: var(--purple);
  color: #fff;
}

/* Mobile/Desktop visibility toggles */
.mowe-mobile-only{display:none}
.mowe-desktop-only{display:block}
@media (max-width:768px){
  .mowe-mobile-only{display:block}
  .mowe-desktop-only{display:none}
}

/* Details block with per-field copy ICON buttons */
.mowe-details{padding:var(--pad);border-radius:var(--br);background:#fff;box-shadow:var(--shadow)}
.mowe-details .row{display:grid;grid-template-columns:160px 1fr;margin:.1rem 0;gap:.5rem .75rem;align-items:center}
.mowe-details .label{font-weight:700;color:var(--text)}
.mowe-details .value{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}
.mowe-details .value .mowe-copy{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;padding:0;border-radius:10px;border:1px solid var(--purple);
  background:#fff;color:var(--purple);cursor:pointer;transition:background .15s, border-color .15s, color .15s, transform .06s, padding .15s;
}
.mowe-details .value .mowe-copy svg{display:block}
.mowe-details .value .mowe-copy:hover{border-color:var(--purple-700);color:var(--purple-700)}
.mowe-details .value .mowe-copy:focus-visible{outline:none;box-shadow:var(--ring)}
.mowe-details .value .mowe-copy:active{transform:translateY(1px)}
.mowe-details .value .mowe-copy .copied{font-size:.85rem;padding:0 .4rem}

/* Expand copy button while feedback text is shown */
.mowe-details .value .mowe-copy.showing-text{
  width:auto; min-width:120px; padding:.45rem .6rem;
  display:inline-flex; align-items:center; justify-content:center;
}

/* Screen-reader only utility */
.sr-only{
  position:absolute !important;
  width:1px !important; height:1px !important;
  padding:0 !important; margin:-1px !important; overflow:hidden !important;
  clip:rect(0,0,0,0) !important; white-space:nowrap !important; border:0 !important;
}

.mowe-help{margin:.6rem 0 0;color:var(--muted);white-space:pre-line}

/* Helpers */
[hidden]{display:none!important}
.smooth-enter{animation:moweFade .35s ease}
@keyframes moweFade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}