/* =============================================================
   DOODLY — Auto-Pay recurring subscription UI
   Premium toggle, glass settings panel, admin billing KPIs.
   ============================================================= */

/* ---- checkout toggle ---- */
.ap-toggle { display:flex; align-items:flex-start; gap:12px; cursor:pointer; padding:14px; border:1.5px solid var(--line); border-radius:16px; background:var(--surface); transition:border-color .2s, box-shadow .2s; }
.ap-toggle:has(#apEnable:checked) { border-color:var(--leaf); box-shadow:0 0 0 1px var(--leaf); background:var(--mint-soft); }
.ap-toggle input { position:absolute; opacity:0; width:0; height:0; }
.ap-switch { flex:0 0 auto; width:42px; height:24px; border-radius:999px; background:var(--line); position:relative; transition:background .25s; margin-top:2px; }
.ap-knob { position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:0 2px 5px rgba(0,0,0,.2); transition:transform .25s cubic-bezier(.2,1.3,.4,1); }
.ap-toggle input:checked + .ap-switch { background:var(--leaf); }
.ap-toggle input:checked + .ap-switch .ap-knob { transform:translateX(18px); }
.ap-toggle input:focus-visible + .ap-switch { box-shadow:var(--ring); }
.ap-toggle-tx { display:flex; flex-direction:column; gap:2px; }
.ap-toggle-tx b { color:var(--forest); font-size:.96rem; }
.ap-toggle-tx small { color:var(--ink-3); font-size:.8rem; line-height:1.4; }
.ap-methods-mini { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.ap-methods-mini[hidden] { display:none; }
.ap-mini { padding:.45rem .8rem; border-radius:999px; border:1px solid var(--line); background:var(--surface); color:var(--forest); font-weight:700; font-size:.8rem; cursor:pointer; transition:border-color .2s, background .2s; }
.ap-mini:hover { border-color:var(--mint); }
.ap-mini.sel { border-color:var(--leaf); background:var(--mint-soft); color:var(--leaf-600); box-shadow:0 0 0 1px var(--leaf); }

/* ---- dashboard settings ---- */
.ap-pitch { color:var(--ink-2); font-size:.92rem; margin-bottom:14px; }
.ap-pitch b { color:var(--forest); }
.ap-methods { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:14px; }
@media (max-width:480px){ .ap-methods { grid-template-columns:1fr; } }
.ap-method { display:flex; align-items:center; gap:.5rem; padding:.7rem .9rem; border-radius:12px; border:1.5px solid var(--line); background:var(--surface); color:var(--forest); font-weight:700; font-size:.88rem; cursor:pointer; transition:border-color .2s, background .2s; }
.ap-method svg { color:var(--leaf-600); }
.ap-method.sel { border-color:var(--leaf); background:var(--mint-soft); color:var(--leaf-600); box-shadow:0 0 0 1px var(--leaf); }
.ap-rows { display:grid; gap:9px; margin-bottom:14px; }
.ap-row { display:flex; align-items:center; justify-content:space-between; gap:1rem; font-size:.9rem; color:var(--ink-2); padding-bottom:9px; border-bottom:1px solid var(--line); }
.ap-row:last-child { border-bottom:0; padding-bottom:0; }
.ap-row span { display:inline-flex; align-items:center; gap:.5rem; }
.ap-row svg { color:var(--leaf-600); }
.ap-row b { color:var(--forest); font-weight:800; text-align:right; }
.ap-alert { display:flex; align-items:center; gap:.5rem; background:#fdeae6; color:#a32b1b; border:1px solid #f3b6ab; border-radius:12px; padding:.6rem .8rem; font-size:.84rem; font-weight:600; margin-bottom:14px; }
[data-theme="dark"] .ap-alert { background:#371814; color:#ff9d8a; border-color:#5e271f; }
.ap-actions { display:flex; flex-wrap:wrap; gap:8px; }
.ap-actions .btn { font-size:.84rem; }
.ap-history { margin-top:14px; border-top:1px solid var(--line); padding-top:12px; display:grid; gap:8px; }
.ap-h-row { display:grid; grid-template-columns:auto 1fr auto auto; gap:.6rem; align-items:center; font-size:.85rem; color:var(--ink-2); }
.ap-h-dot { width:9px; height:9px; border-radius:50%; background:var(--ink-3); }
.ap-h-dot.success, .ap-h-dot.ok { background:var(--leaf); } .ap-h-dot.failed { background:#c0392b; }
.ap-h-amt { font-weight:800; color:var(--forest); }

/* ---- admin billing ---- */
.ap-kpis { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
@media (min-width:760px){ .ap-kpis { grid-template-columns:repeat(6,1fr); } }
.ap-kpi { border:1px solid var(--line); border-radius:16px; background:var(--surface); padding:14px; box-shadow:var(--shadow-sm); }
.ap-kpi-n { font-family:"Fraunces",serif; font-weight:600; color:var(--forest); font-size:1.5rem; line-height:1; }
.ap-kpi-l { font-size:.74rem; color:var(--ink-3); font-weight:600; margin-top:6px; }
.ap-filters { display:flex; gap:8px; }
.ap-filters select { padding:.45rem .7rem; border-radius:10px; border:1px solid var(--line); background:var(--surface); color:var(--forest); font:inherit; font-size:.82rem; }
.ap-fail-note { display:flex; align-items:center; gap:.5rem; margin-top:12px; background:#fff4dc; color:#7a4f00; border:1px solid #f2cd86; border-radius:12px; padding:.6rem .8rem; font-size:.84rem; font-weight:600; }
[data-theme="dark"] .ap-fail-note { background:#2a1f09; color:#ffce7a; border-color:#5c4517; }