/* V2.19 — Button style packs. Chosen in Settings → Appearance → Button style.
   Only colour, border, corner radius, shadow and weight change; existing sizes per screen are kept.
   html[data-btn-style] is set by buttons-v219.js. No attribute = the original look. */

/* ---------- A. Clean Solid: deep green primary, white outlined secondary ---------- */
html[data-btn-style="solid"] .btn:not(.danger){background:#147438!important;color:#fff!important;border:1.5px solid #147438!important;border-radius:10px!important;box-shadow:0 1px 2px rgba(16,40,24,.18)!important;font-weight:700!important;transition:background .15s,box-shadow .15s,transform .15s}
html[data-btn-style="solid"] .btn:not(.danger):hover{background:#0f5f2d!important;border-color:#0f5f2d!important;box-shadow:0 3px 10px rgba(16,40,24,.22)!important}
html[data-btn-style="solid"] .btn.secondary{background:#fff!important;color:#147438!important;border:1.5px solid #9cc7a8!important;box-shadow:none!important}
html[data-btn-style="solid"] .btn.secondary:hover{background:#f0f7f2!important;border-color:#147438!important}
html.bellife-dark[data-btn-style="solid"] .btn:not(.danger){background:#5fbf78!important;border-color:#5fbf78!important;color:#0b1a10!important}
html.bellife-dark[data-btn-style="solid"] .btn.secondary{background:transparent!important;color:#bfe5c8!important;border-color:#4f7a5c!important}

/* ---------- B. Soft Modern: gradient primary with glow, quiet grey secondary ---------- */
html[data-btn-style="soft"] .btn:not(.danger){background:linear-gradient(180deg,#34b45a,#1d8a42)!important;color:#fff!important;border:0!important;border-radius:12px!important;box-shadow:0 4px 12px rgba(29,138,66,.28),inset 0 1px 0 rgba(255,255,255,.25)!important;font-weight:700!important;transition:transform .15s,box-shadow .15s}
html[data-btn-style="soft"] .btn:not(.danger):hover{transform:translateY(-1px);box-shadow:0 7px 18px rgba(29,138,66,.32),inset 0 1px 0 rgba(255,255,255,.25)!important}
html[data-btn-style="soft"] .btn.secondary{background:#f1f4f2!important;color:#1e3527!important;border:1px solid #e0e6e2!important;box-shadow:0 1px 2px rgba(0,0,0,.05)!important}
html[data-btn-style="soft"] .btn.secondary:hover{background:#e8eeea!important}
html.bellife-dark[data-btn-style="soft"] .btn.secondary{background:#2d3430!important;color:#e7efe9!important;border-color:#3d4641!important}

/* ---------- C. Compact Pill: rounded pills, bright primary, ghost secondary ---------- */
html[data-btn-style="pill"] .btn:not(.danger){background:#1f9d4d!important;color:#fff!important;border:1.5px solid #1f9d4d!important;border-radius:999px!important;box-shadow:none!important;font-weight:650!important;letter-spacing:.1px;transition:background .15s}
html[data-btn-style="pill"] .btn:not(.danger):hover{background:#178a42!important}
html[data-btn-style="pill"] .btn.secondary{background:transparent!important;color:#17723a!important;border:1.5px solid #cfe2d5!important}
html[data-btn-style="pill"] .btn.secondary:hover{background:#eef7f1!important;border-color:#1f9d4d!important}
html.bellife-dark[data-btn-style="pill"] .btn.secondary{color:#a9dcb8!important;border-color:#3f5f49!important}

/* ---------- D. Bold Dark: near-black primary, crisp outlined secondary, green for selected ---------- */
html[data-btn-style="bold"] .btn:not(.danger){background:#14261b!important;color:#fff!important;border:1.5px solid #14261b!important;border-radius:8px!important;box-shadow:0 2px 0 #0a1510!important;font-weight:800!important;letter-spacing:.2px;transition:transform .1s,box-shadow .1s}
html[data-btn-style="bold"] .btn:not(.danger):hover{transform:translateY(-1px);box-shadow:0 3px 0 #0a1510!important}
html[data-btn-style="bold"] .btn:not(.danger):active{transform:translateY(1px);box-shadow:0 0 0 #0a1510!important}
html[data-btn-style="bold"] .btn.secondary{background:#fff!important;color:#14261b!important;border:1.5px solid #14261b!important;box-shadow:0 2px 0 #c9d3cc!important}
html[data-btn-style="bold"] .btn.secondary:hover{background:#f4f6f5!important}
/* selected filter chips stand out in green */
html[data-btn-style="bold"] [aria-pressed="true"].btn,html[data-btn-style="bold"] .ps-sticker-tabs .btn:not(.secondary){background:#147438!important;border-color:#147438!important;box-shadow:0 2px 0 #0b4421!important}
html.bellife-dark[data-btn-style="bold"] .btn:not(.danger){background:#e9f1eb!important;color:#0e1a12!important;border-color:#e9f1eb!important;box-shadow:0 2px 0 #7d8a81!important}
html.bellife-dark[data-btn-style="bold"] .btn.secondary{background:transparent!important;color:#e9f1eb!important;border-color:#8fa596!important;box-shadow:none!important}

/* Settings preview chips */
.ps-btnstyle-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px;margin:10px 0}
.ps-btnstyle-opt{display:flex;flex-direction:column;gap:8px;padding:12px;border:2px solid rgba(127,127,127,.25);border-radius:12px;cursor:pointer;background:transparent;color:inherit;text-align:left;font:inherit}
.ps-btnstyle-opt[aria-pressed="true"]{border-color:#1f9d4d;background:rgba(31,157,77,.08)}
.ps-btnstyle-opt small{opacity:.75}