/* MoneyJourney Pages skin for the MoneyJourney Watchlist components.
   Loaded only on pages that show them. It does not change content or colours, only shapes:
   pill buttons, softer inputs, rounder gate boxes, so every page matches the Pro page. */
body.mjp-skin .mj-wl .mj-btn,
body.mjp-skin .mj-wl .mj-cta-btn,
body.mjp-skin .mj-wl .mj-mx-btn,
body.mjp-skin .mj-co .mj-cbtn,
body.mjp-skin .mj-gate a.mj-gate-btn { border-radius: 999px !important; transition: background .2s, color .2s, transform .12s, box-shadow .2s; }
body.mjp-skin .mj-wl .mj-btn:active,
body.mjp-skin .mj-wl .mj-cta-btn:active,
body.mjp-skin .mj-gate a.mj-gate-btn:active { transform: scale(.97); }
body.mjp-skin .mj-wl .mj-cta-btn { padding: 11px 22px !important; box-shadow: 0 8px 22px rgba(184, 134, 59, .25); }

body.mjp-skin .mj-wl .mj-input,
body.mjp-skin .mj-wl select,
body.mjp-skin .mj-wl input[type="search"] { border-radius: 14px !important; border-color: rgba(16, 27, 26, .12) !important; transition: border-color .2s, box-shadow .2s; }
body.mjp-skin .mj-wl .mj-input:focus,
body.mjp-skin .mj-wl select:focus,
body.mjp-skin .mj-wl input[type="search"]:focus { outline: 0 !important; border-color: #1F7A5C !important; box-shadow: 0 0 0 4px rgba(31, 122, 92, .12); }

/* the members box shown in articles and gated pages */
body.mjp-skin .mj-gate { border: 0 !important; border-radius: 24px !important; padding: clamp(22px, 3vw, 32px) !important; background: #fff !important; box-shadow: 0 1px 2px rgba(16, 27, 26, .04), 0 10px 30px rgba(16, 27, 26, .07); position: relative; overflow: hidden; }
body.mjp-skin .mj-gate::before { content: ''; position: absolute; left: 0; top: 0; right: 0; height: 4px; background: linear-gradient(90deg, #B8863B, #1F7A5C); }
body.mjp-skin .mj-gate a.mj-gate-btn { background: #1F7A5C !important; padding: 12px 24px !important; box-shadow: 0 8px 22px rgba(31, 122, 92, .25); }
body.mjp-skin .mj-gate a.mj-gate-btn:hover { background: #0E5A43 !important; }

/* component roots sit inside our wide container: no extra outer margin */
body.mjp-skin .mjp .mjq-embed :is(div.mj-wl, div.mj-pf) { margin-left: 0 !important; margin-right: 0 !important; }