
/* Power of One Shared CSS (central) */
.poo-wrap{max-width:1180px;margin:0 auto;padding:16px}
.poo-card{border:1px solid #d7d7d7;border-radius:16px;padding:16px;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.03)}
.poo-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (max-width:720px){.poo-grid{grid-template-columns:1fr}.poo-wrap{padding:12px}}
.poo-row{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end}
.poo-field{min-width:220px;flex:1}
.poo-field label{display:block;font-weight:700;margin:0 0 6px}
.poo-field input,.poo-field select,.poo-field textarea{
  width:100%;padding:12px 12px;border:1px solid #bdbdbd;border-radius:12px;outline:0;background:#fff
}
.poo-field textarea{min-height:110px;resize:vertical}
.poo-btn{display:inline-block;padding:12px 16px;border-radius:14px;border:0;background:#111;color:#fff;cursor:pointer;font-weight:800}
.poo-btn:hover{opacity:.92}
.poo-btn--ghost{background:#fff;color:#111;border:1px solid #111}
.poo-note{font-size:14px;opacity:.8;margin-top:10px}
.poo-alert{padding:12px 14px;border-radius:14px;border:1px solid #ddd;background:#f9fafb}
.poo-alert--success{border-color:#7bdcb5;background:#ecfdf5}
.poo-alert--error{border-color:#fca5a5;background:#fef2f2}
.poo-wall{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px}
.poo-tile{position:relative;border-radius:16px;overflow:hidden;border:1px solid #ddd;background:#f7f7f7}
.poo-tile img{width:100%;height:140px;object-fit:cover;display:block}
.poo-tile .poo-hover{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center;padding:10px;background:linear-gradient(transparent, rgba(0,0,0,.75));color:#fff;font-weight:900;opacity:0;transition:opacity .15s}
.poo-tile:hover .poo-hover{opacity:1}
.poo-hr{height:1px;background:#e8e8e8;margin:16px 0}
.poo-turnstile{margin:12px 0}


/* Phase 2 shared form polish */
.poo-field label{display:block;font-weight:700;margin:0 0 6px}
.poo-field label.screen-reader-text{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.poo-field input::placeholder,.poo-field textarea::placeholder{opacity:.75}
.poo-field input:focus,.poo-field select:focus,.poo-field textarea:focus{
  border-color:#111; box-shadow:0 0 0 3px rgba(0,0,0,.08);
}
.poo-turnstile{display:flex;justify-content:center;margin:14px 0 6px}
.poo-submit-center{text-align:center;margin-top:14px}
.poo-btn{font-size:20px;line-height:1.1;min-width:240px;display:inline-block;text-align:center}
@media (max-width:720px){.poo-btn{width:100%;min-width:0}}

/* Donors form: match Wakanda-style card */
.poo-card--form{
  max-width: 760px;
  margin: 0 auto;
  padding: 18px 16px;
  border-radius: 18px;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.poo-field input::placeholder{opacity:.75}
.poo-field input:focus,.poo-field select:focus,.poo-field textarea:focus{
  border-color:#111;
  box-shadow: 0 0 0 3px rgba(0,0,0,.08);
}
.poo-submit-center{text-align:center;margin-top:14px}
.poo-submit-center .poo-btn{font-size:22px;line-height:1.1;padding:14px 22px;min-width:260px;border-radius:16px}
.poo-turnstile{display:flex;justify-content:center}

/* Standout inline checkbox choices */
.poo-choices{
  grid-column: 1 / -1;
  border: 1px solid #e5e5e5;
  border-radius: 14px;
  padding: 12px 12px;
  background: #fafafa;
}
.poo-choices .poo-choices-title{font-weight:800;margin:0 0 8px 0}
.poo-choices .poo-choices-row{display:flex;flex-wrap:wrap;gap:12px}
.poo-choices label{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border:1px solid #d7d7d7;
  border-radius: 14px;
  background:#fff;
  font-weight:800;
}
.poo-choices input[type="checkbox"]{
  width:20px;height:20px;
}
.poo-file{
  grid-column: 1 / -1;
}
.poo-file input[type="file"]{
  width:100%;
  padding:12px 12px;
  border:1px dashed #bdbdbd;
  border-radius:14px;
  background:#fff;
}

/* === Donors form polish (Wakanda-style) === */
.poo-form-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 720px){
  .poo-form-grid{ grid-template-columns: 1fr 1fr; }
  .poo-form-grid .poo-full{ grid-column: 1 / -1; }
}

.poo-note{
  grid-column: 1 / -1;
  font-size: 14px;
  line-height: 1.35;
  opacity: .9;
  padding: 10px 12px;
  border: 1px solid #e5e5e5;
  border-radius: 14px;
  background: #fafafa;
}

/* Choice tiles - works for radio or checkbox */
.poo-choices input[type="radio"],
.poo-choices input[type="checkbox"]{
  width:20px;height:20px;
}
.poo-choices label{
  cursor:pointer;
  user-select:none;
}
.poo-choices input[type="radio"]:checked + span,
.poo-choices input[type="checkbox"]:checked + span{
  /* if markup uses span after input */
}
.poo-choices label:has(input[type="radio"]:checked),
.poo-choices label:has(input[type="checkbox"]:checked){
  border-color:#111;
  box-shadow: 0 0 0 3px rgba(0,0,0,.06);
}

/* === Donors payment type UI (override theme) === */
.poo-card.poo-card--form{max-width: 760px; width: 100%;}
.poo-choices{width:100%;}
.poo-choices .poo-choices-row{
  display:grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 720px){
  .poo-choices .poo-choices-row{grid-template-columns: 1fr 1fr;}
}
.poo-choices label.poo-choice{
  display:flex;
  align-items:center;
  padding: 14px 14px;
  border: 2px solid #e5e5e5;
  border-radius: 16px;
  background:#fff;
  font-weight: 800;
  cursor:pointer;
  margin:0;
}
.poo-choices label.poo-choice:hover{border-color:#bdbdbd}
.poo-choices label.poo-choice input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.poo-choices label.poo-choice span.poo-choice-text{
  display:flex;
  align-items:center;
  gap: 12px;
  width:100%;
}
.poo-choices label.poo-choice span.poo-choice-text:before{
  content:'';
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 2px solid #111;
  box-sizing:border-box;
  display:inline-block;
  flex: 0 0 auto;
}
.poo-choices label.poo-choice input:checked + span.poo-choice-text:before{
  background:#111;
  box-shadow: inset 0 0 0 4px #fff;
}
.poo-choices label.poo-choice input:checked + span.poo-choice-text{
  /* subtle emphasis when selected */
}
.poo-choices label.poo-choice:has(input:checked){
  border-color:#111;
  box-shadow: 0 0 0 3px rgba(0,0,0,.06);
}
.poo-note{margin-top: 2px;}

/* === Donors form width (wider) === */
.poo-wrap{max-width: 1100px; margin: 0 auto;}
.poo-card.poo-card--form{max-width: 980px; width: 100%;}

/* === Donors form layout fixes === */
.poo-card.poo-card--form{display:block;}
.poo-card.poo-card--form form{width:100%;}
.poo-form-grid{width:100%; max-width:100%;}
.poo-form-grid > *{min-width:0;}
.poo-field input[type="text"],
.poo-field input[type="email"],
.poo-field input[type="tel"],
.poo-field input[type="number"],
.poo-field input[type="file"],
.poo-field select,
.poo-field textarea{
  width:100% !important;
  border-radius: 14px !important;
}

/* === Ensure donors field grid spans full width === */
.poo-form-grid-inner,
.poo-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 18px 18px;
  width:100%;
}
@media (min-width: 720px){
  .poo-form-grid-inner,
  .poo-grid{grid-template-columns: 1fr 1fr;}
}
.poo-form-grid-inner .poo-full,
.poo-grid .poo-full,
.poo-form-grid .poo-full{
  grid-column: 1 / -1;
}

/* === Full-width form card (prevent half-card squeeze) === */
.poo-card.poo-card--form{
  max-width: none !important;
  width: 100% !important;
}

/* ===========================
   POO Shared Form System
   =========================== */
.poo-wrap{
  width:100% !important;
  max-width:100% !important;
  margin: 0 auto !important;
  padding: 0 12px;
  box-sizing: border-box;
  overflow: visible;
}
.poo-wrap.poo-breakout{
  width: min(1100px, calc(100vw - 24px)) !important;
  max-width: none !important;
  margin-left: 50% !important;
  transform: translateX(-50%) !important;
}
.poo-card{
  width:100% !important;
  max-width:100% !important;
  background: #fff;
  border-radius: 18px;
  padding: 26px 26px 28px;
  box-sizing: border-box;
}
@media (max-width: 720px){
  .poo-card{padding: 18px 16px 20px;}
}

.poo-form-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 18px;
  width:100%;
}
@media (min-width: 720px){
  .poo-form-grid{grid-template-columns: 1fr 1fr;}
}
.poo-full{grid-column: 1 / -1;}

.poo-field input[type="text"],
.poo-field input[type="email"],
.poo-field input[type="tel"],
.poo-field input[type="number"],
.poo-field input[type="file"],
.poo-field select,
.poo-field textarea{
  width:100% !important;
  border-radius: 16px !important;
  border: 1px solid rgba(0,0,0,0.12) !important;
  background: #fff !important;
  padding: 14px 16px !important;
  font-size: 16px !important;
  box-sizing: border-box;
}
.poo-field select{
  appearance: auto;
}
.poo-field input::placeholder,
.poo-field textarea::placeholder{opacity: .7;}

.poo-note{
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,0.10);
  background: rgba(0,0,0,0.03);
  padding: 12px 14px;
  font-size: 14px;
}

.poo-alert{
  border-radius: 16px;
  padding: 14px 16px;
  margin: 0 0 18px;
  border: 1px solid transparent;
  font-size: 15px;
  line-height: 1.35;
}
.poo-alert--success{background: rgba(46, 204, 113, 0.12); border-color: rgba(46, 204, 113, 0.35);}
.poo-alert--error{background: rgba(231, 76, 60, 0.12); border-color: rgba(231, 76, 60, 0.35);}

.poo-submit{
  display:flex;
  justify-content:center;
}
.poo-submit button{
  font-size: 20px !important;
  padding: 14px 26px !important;
  border-radius: 16px !important;
  min-width: 240px;
  text-align:center;
}

/* === Payment tiles === */
.poo-paybox{
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 18px;
  padding: 16px;
}
.poo-paybox__title{font-weight: 700; margin: 0 0 12px; font-size: 18px;}
.poo-paybox__grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 720px){
  .poo-paybox__grid{grid-template-columns: 1fr 1fr;}
}
.poo-paytile{
  display:block;
  cursor:pointer;
}
.poo-paytile input{position:absolute; opacity:0; pointer-events:none;}
.poo-paytile__inner{
  display:flex;
  align-items:center;
  gap: 12px;
  padding: 14px 14px;
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,0.12);
  background:#fff;
  box-shadow: 0 0 0 0 rgba(0,0,0,0);
  transition: box-shadow .15s ease, border-color .15s ease;
}
.poo-paydot{
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(0,0,0,0.35);
  display:inline-block;
  position: relative;
}
.poo-paytxt{font-size: 16px; font-weight: 700;}
.poo-paytile input:checked + .poo-paytile__inner{
  border-color: rgba(0,0,0,0.55);
  box-shadow: 0 0 0 3px rgba(0,0,0,0.10);
}
.poo-paytile input:checked + .poo-paytile__inner .poo-paydot:after{
  content:'';
  position:absolute;
  inset: 3px;
  border-radius: 50%;
  background: rgba(0,0,0,0.75);
}
