/* BetAdvisor.ng /responsible-gambling/ (mu-plugin betadvisor-page-responsible-gambling.php). Prefix rgp-. Calm palette. */

.tpl-trust .rgp-start { background: var(--green); color: #dbe9e2; border-radius: var(--radius); padding: 16px; margin: 0 0 24px; }
.rgp-start__h { margin: 0 0 10px; font-family: var(--font-head); font-weight: 800; font-size: 1.1rem; color: #fff; }
.rgp-start__steps { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; counter-reset: rgps; }
.rgp-start__steps li { margin: 0; counter-increment: rgps; position: relative; padding: 10px 12px 10px 44px; border-radius: 10px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14); font-size: .92rem; line-height: 1.4; }
.rgp-start__steps li::before { content: counter(rgps); position: absolute; left: 12px; top: 10px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--lime); color: var(--green); font-weight: 800; font-size: .78rem; }
.rgp-start__steps b { display: block; color: #fff; }
.rgp-jump { display: flex; flex-wrap: wrap; gap: 6px; }
.rgp-jump a { padding: 5px 11px; border-radius: 999px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .2); color: #fff; font-size: .8rem; font-weight: 700; text-decoration: none; }
.rgp-jump a:hover { background: var(--lime); color: var(--green); }

/* ----- Self-check ----- */
.rgp-quiz { border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); padding: 16px; margin: 0 0 24px; box-shadow: var(--shadow); }
.rgp-quiz__intro { margin: 0 0 12px; font-size: .92rem; color: var(--ink-soft); }
.rgp-quiz__list { margin: 0; padding-left: 1.4em; display: grid; gap: 12px; }
.rgp-quiz__list li { margin: 0; }
.rgp-quiz fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.rgp-quiz legend { padding: 0; margin: 0 0 6px; font-weight: 700; font-size: .95rem; }
.rgp-quiz__opts { display: flex; flex-wrap: wrap; gap: 6px; }
.rgp-quiz__opts input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rgp-quiz__opts label { cursor: pointer; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; background: #fbfaf6; font-size: .84rem; font-weight: 600; }
.rgp-quiz__opts input:checked + label { background: var(--green); border-color: var(--green); color: #fff; }
.rgp-quiz__opts input:focus-visible + label { outline: 3px solid var(--gold); outline-offset: 2px; }
.rgp-quiz__res { margin: 16px 0 0; padding: 12px 14px; border-radius: var(--radius-sm); background: #f1efe8; border-left: 4px solid var(--line); }
.rgp-quiz__res.is-ok { background: var(--green-soft); border-left-color: var(--green-2); }
.rgp-quiz__res.is-low { background: #eef5e1; border-left-color: var(--lime); }
.rgp-quiz__res.is-mid { background: #fbf1da; border-left-color: var(--gold); }
.rgp-quiz__res.is-high { background: var(--red-soft); border-left-color: var(--red-line); }
.rgp-quiz__res p { margin: 0 0 6px; }
.rgp-quiz__score { font-weight: 800; color: var(--green); }
.rgp-meter { height: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--green-soft), #fbf1da, var(--red-soft)); overflow: hidden; margin: 0 0 8px; }
.rgp-meter span { display: block; height: 100%; width: 0; background: var(--green-2); opacity: .7; transition: width .2s; }
.rgp-quiz__note { margin: 10px 0 0; font-size: .78rem; color: var(--ink-soft); }

/* ----- Ladder ----- */
.rgp-ladder { margin: 0 0 24px; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
.rgp-ladder__scroll { overflow-x: auto; }
.rgp-ladder svg { display: block; width: 100%; min-width: 480px; height: auto; }
.rgp-l__bar { fill: var(--green-soft); }
.rgp-l__bar--3, .rgp-l__bar--4 { fill: #cfe4d6; }
.rgp-l__bar--5 { fill: var(--green-2); }
.rgp-l__n { font-family: var(--font-head); font-weight: 800; font-size: 18px; fill: var(--green); }
.rgp-l__bar--5 + .rgp-l__n { fill: #fff; }
.rgp-l__t { font-size: 12px; font-weight: 700; fill: var(--ink); font-family: var(--font); }
.rgp-l__ax { font-size: 12px; fill: var(--ink-soft); font-family: var(--font); }
.rgp-ladder__list { margin: 10px 0 0; padding-left: 1.3em; font-size: .9rem; }
.rgp-ladder__list li { margin: .2em 0; }
.rgp-ladder figcaption { font-size: .82rem; color: var(--ink-soft); margin-top: 6px; }

/* ----- Budget ----- */
.rgp-calc { background: var(--card); border: 2px solid var(--green); border-radius: var(--radius); padding: 16px; margin: 0 0 24px; box-shadow: var(--shadow); }
.rgp-calc__in { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) { .rgp-calc__in { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.rgp-calc__f { display: flex; flex-direction: column; gap: 4px; font-size: .8rem; font-weight: 700; color: var(--ink-soft); }
.rgp-calc__f input { font: inherit; font-size: 1rem; font-weight: 700; color: var(--ink); padding: 9px 10px; border: 1px solid var(--line); border-radius: 8px; background: #fbfaf6; width: 100%; min-width: 0; }
.rgp-calc__f small { font-weight: 400; font-size: .72rem; }
.rgp-calc__out { display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 14px 0 0; }
@media (min-width: 640px) { .rgp-calc__out { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.rgp-calc__out div { background: var(--green-soft); border-radius: 8px; padding: 10px; }
.rgp-calc__out span { display: block; font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); }
.rgp-calc__out b { font-family: var(--font-head); font-size: 1.15rem; color: var(--green); }
.rgp-calc__msg { font-size: .88rem; margin: 10px 0 0; }

/* ----- Blocking tabs ----- */
.rgp-block { margin: 0 0 24px; }
.rgp-tabs { display: none; gap: 6px; margin: 0 0 10px; flex-wrap: wrap; }
.rgp-block.is-tabbed .rgp-tabs { display: flex; }
.rgp-tabs button { font: inherit; font-size: .88rem; font-weight: 700; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--ink); cursor: pointer; }
.rgp-tabs button[aria-selected="true"] { background: var(--green); border-color: var(--green); color: #fff; }
.rgp-tabs button:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.rgp-pane { border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fbfaf6; padding: 12px 16px; margin: 0 0 10px; }
.rgp-block.is-tabbed .rgp-pane h3 { display: none; }
.rgp-pane h3 { margin: 0 0 6px; font-size: 1rem; }
.rgp-pane ol { margin: 0; padding-left: 1.3em; }
.rgp-pane li { margin: .35em 0; font-size: .93rem; }
.rgp-note { font-size: .8rem; color: var(--ink-soft); margin: 6px 0 0; }

/* ----- Help cards ----- */
.rgp-help { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 10px; }
.rgp-help li { margin: 0; }
.rgp-help a { display: block; padding: 14px 16px; border: 1px solid var(--line); border-left: 4px solid var(--green-2); border-radius: var(--radius-sm); background: var(--card); color: var(--ink); text-decoration: none; }
.rgp-help a:hover { border-color: var(--green-2); color: var(--ink); }
.rgp-help b { display: block; color: var(--green); font-family: var(--font-head); }
.rgp-help span { display: block; font-size: .9rem; margin: 2px 0 4px; }
.rgp-help em { font-style: normal; font-size: .8rem; font-weight: 700; color: var(--green-2); }

/* ----- Content helpers ----- */
.rgp-grid { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); margin: 0 0 20px; }
@media (min-width: 640px) { .rgp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rgp-box { padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fbfaf6; }
.rgp-box h3 { margin: 0 0 6px; font-size: 1rem; }
.rgp-box p, .rgp-box ul { margin: 0 0 .4em; font-size: .92rem; }
.rgp-box--warn { border-left: 4px solid var(--red-line); background: var(--red-soft); }
.tpl-trust .entry h2 { scroll-margin-top: 80px; }
@media (prefers-reduced-motion: reduce) { .rgp-meter span { transition: none; } }