.wc-payout-method-fields{border:1px solid #e5e7eb;padding:14px;border-radius:12px;margin-top:10px;background:#ffffff}
.wcpayout-grid{display:flex;flex-direction:column;gap:10px}
.wcpayout-option{display:flex;align-items:flex-start;gap:12px;border:1.5px solid #e5e7eb;padding:14px 14px;border-radius:14px;background:#fff;transition:all .2s ease;position:relative}
.wcpayout-option:hover{box-shadow:0 2px 14px rgba(2,6,23,.08)}
.wcpayout-option.selected{border-color:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.15)}
.wcpayout-option input{margin-top:4px}
.wcpayout-icon{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:10px;background:#f1f5f9;flex:0 0 36px}
.wcpayout-body{flex:1}
.wcpayout-title{display:block;font-weight:700;color:#0f172a}
.wcpayout-sub{display:block;font-size:12px;color:#475569;margin-top:2px}
.wcpayout-fields{background:#f8fafc;border:1px dashed #cbd5e1;padding:12px;border-radius:10px;margin:8px 0 2px 48px}
.badge{display:inline-block;font-size:11px;border-radius:9999px;padding:2px 8px;background:#eafff2;color:#065f46;border:1px solid #bbf7d0;margin-left:6px;vertical-align:middle}

.wcpayout-option input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border: 2px solid #94a3b8;
  border-radius: 50%;
  outline: none;
  cursor: pointer;
  position: relative;
  margin-right: 8px;
}
.wcpayout-option input[type="radio"]:checked {
  border-color: #22c55e;
  background-color: #22c55e;
  box-shadow: 0 0 0 2px rgba(34,197,94,.2);
}

/* Clear, obvious circular radios */
.wcpayout-option input[type="radio"]{
  appearance: auto;
  width: 20px;
  height: 20px;
  accent-color: #22c55e; /* green */
  border-radius: 9999px;
  flex: 0 0 20px;
}
.wcpayout-option input[type="radio"]:focus{
  outline: none;
  box-shadow: 0 0 0 3px rgba(34,197,94,.25);
  border-radius: 9999px;
}
/* Extra visual cue when selected */
.wcpayout-option.selected{
  border-color:#22c55e;
  box-shadow:0 0 0 3px rgba(34,197,94,.15);
}

/* Force radios to look like checkboxes */
.wcpayout-option input[type="radio"]{
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 20px;
  height: 20px;
  border: 2px solid #94a3b8;
  border-radius: 4px;
  display: inline-block;
  position: relative;
  cursor: pointer;
  margin-top: 2px;
}
.wcpayout-option input[type="radio"]:checked::after{
  content: '\2713'; /* checkmark */
  position: absolute;
  top: -2px;
  left: 2px;
  font-size: 18px;
  color: #22c55e;
}
.wcpayout-option input[type="radio"]:focus{
  outline: none;
  box-shadow: 0 0 0 3px rgba(34,197,94,.25);
}

/* ---- Custom checkbox-style control for single-select ---- */
.wcpayout-option{
  position: relative;
}
.wcpayout-option input[type="radio"]{
  position:absolute;
  opacity:0;
  width:1px;height:1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
}
.wcpayout-check{
  width:20px;height:20px;
  border:2px solid #94a3b8;
  border-radius:6px;
  display:inline-block;
  margin-top:2px;
  margin-right:8px;
  flex:0 0 20px;
  background:#fff;
  position:relative;
}
/* checked state (green box + tick) */
.wcpayout-option input[type="radio"]:checked + .wcpayout-check{
  border-color:#22c55e;
  background:#22c55e;
}
.wcpayout-option input[type="radio"]:checked + .wcpayout-check:after{
  content:"";
  position:absolute;
  left:5px; top:1px;
  width:6px; height:12px;
  border:3px solid #fff;
  border-top:0;border-left:0;
  transform:rotate(45deg);
}
/* keyboard focus ring */
.wcpayout-option input[type="radio"]:focus + .wcpayout-check{
  box-shadow:0 0 0 3px rgba(34,197,94,.25);
}
/* layout tweak: move icon/body after check visually aligned */
.wcpayout-option{
  gap:12px;
}

/* ==== Mobile fix & theme override ==== */
/* Some themes inject custom radio bullets with ::before/::after on payment labels. Kill them here. */
.woocommerce-checkout #payment .wcpayout-option::before,
.woocommerce-checkout #payment .wcpayout-option::after,
.wcpayout-option::before,
.wcpayout-option::after{
  content:none !important;
  display:none !important;
}

/* Force-hide native radios in our component across breakpoints */
.wcpayout-option input[type="radio"]{
  position:absolute !important;
  left:-9999px !important;
  opacity:0 !important;
  width:1px !important;
  height:1px !important;
  pointer-events:none !important;
}

/* Use grid for robust alignment */
.wcpayout-option{
  display:grid;
  grid-template-columns: 22px 38px 1fr;
  align-items:start;
  column-gap:12px;
  row-gap:4px;
  padding:14px;
}
.wcpayout-check{ grid-column:1; }
.wcpayout-icon{ grid-column:2; }
.wcpayout-body{ grid-column:3; }

/* Ensure the detail box aligns under the body content */
.wcpayout-fields{ margin-left:0; grid-column: 1 / -1; margin-top:8px; }
.wcpayout-fields[data-method="paypal"]{ margin-left: calc(22px + 38px + 12px); } /* offset under text when grid collapses */

/* Small screens: hide icon to save width, keep clear checkbox + text */
@media (max-width: 480px){
  .wcpayout-option{ grid-template-columns: 22px 1fr; }
  .wcpayout-icon{ display:none; }
  .wcpayout-fields{ grid-column: 1 / -1; margin-left: 22px; }
}

/* Make the custom checkbox crisp and centered */
.wcpayout-check{
  width:20px;height:20px;border:2px solid #94a3b8;border-radius:6px;
  background:#fff; position:relative; margin-top:2px;
}
.wcpayout-option input[type="radio"]:checked + .wcpayout-check{
  border-color:#22c55e; background:#22c55e;
}
.wcpayout-option input[type="radio"]:checked + .wcpayout-check:after{
  content:""; position:absolute; left:5px; top:1px; width:6px; height:12px;
  border:3px solid #fff; border-top:0; border-left:0; transform:rotate(45deg);
}