/* ForcePlay donate — payment tiles (stage 1) + amount, summary and bonus table (stage 2). Loaded only where the template adds class "fpd"
   (currently x25 OLD). Every rule is scoped to .fpd or to tooltip content with .fpd-tip. */

/* system tiles: logo + one-line hint */
.fpd .psys_systems .psys__item {
    flex-direction: column;
    gap: 7px;
    min-height: 98px;
    padding: 14px 8px 11px;
}
.fpd .psys_systems .psys__img {
    max-width: 90%;
    max-height: 44px;
    width: auto;
    height: auto;
    object-fit: contain;
}
.fpd .fpd-sub {
    display: block;
    max-width: 100%;
    font-size: 11.5px;
    line-height: 1.3;
    text-align: center;
    color: #d6c7a3;
    font-family: "Segoe UI", Roboto, Arial, sans-serif;
    font-weight: 600;
    overflow-wrap: anywhere;
}

/* calmer frame, gold outline instead of a solid gold fill for the chosen tile */
.fpd .psys__bg {
    border-radius: 8px;
    border: 1px solid rgba(240, 183, 140, 0.28);
    background: rgba(0, 0, 0, 0.32);
    transition: border-color .15s, background-color .15s, box-shadow .15s;
}
.fpd .psys__item:hover .psys__bg {
    background: rgba(0, 0, 0, 0.44);
    border-color: rgba(214, 170, 82, 0.65);
}
.fpd .psys__input:checked ~ .psys__bg,
.fpd .psys__item[data-open-gwps-active="true"] .psys__bg {
    background: rgba(214, 170, 82, 0.10);
    border: 2px solid #d6aa52;
    box-shadow: 0 0 0 1px rgba(214, 170, 82, 0.22), 0 0 16px rgba(214, 170, 82, 0.22);
}
.fpd .psys__input:checked ~ .fpd-sub { color: #f3dca0; }
/* theme custom.css paints tile text #313131 !important (made for the old gold fill) — readable on the dark tile */
.payform__pm.fpd .psys_def .psys__item { color: #e9dcbc !important; }
.payform__pm.fpd .psys_def .psys__item[data-open-gwps-active="true"] { color: #f3dca0 !important; }
.fpd .psys__item:focus-visible { outline: 2px solid #d6aa52; outline-offset: 2px; }

/* hint bubble (pure CSS; the site's tippy tooltips do not render, so we do not rely on them) */
.fpd .psys_systems .psys__item:hover { z-index: 6; }
.fpd .fpd-pop {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    width: max-content;
    max-width: 250px;
    padding: 10px 12px;
    border: 1px solid #b58a3f;
    border-radius: 8px;
    background: #221a12;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.55);
    color: #eadfc6;
    font: 500 12.5px/1.45 "Segoe UI", Roboto, Arial, sans-serif;
    text-align: left;
    white-space: normal;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .15s, transform .15s, visibility .15s;
    z-index: 30;
}
.fpd .fpd-pop::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -6px;
    border: 6px solid transparent;
    border-top-color: #b58a3f;
}
.fpd .fpd-pop b { display: block; margin-bottom: 4px; color: #f3dca0; }
.fpd .fpd-pop .tl { display: block; position: relative; padding-left: 12px; margin-top: 2px; }
.fpd .fpd-pop .tl::before { content: "•"; position: absolute; left: 0; color: #d6aa52; }
.fpd .fpd-pop .nt { display: block; margin-top: 6px; opacity: .8; font-size: 11.5px; }
@media (hover: hover) {
    .fpd .psys_systems .psys__item:hover .fpd-pop {
        opacity: 1;
        visibility: visible;
        transform: translateX(-50%) translateY(0);
    }
}
@media (hover: none) {
    .fpd .fpd-pop { display: none; }
}

@media (max-width: 575px) {
    .fpd .psys_systems .psys__item { min-height: 88px; padding: 12px 6px 9px; }
    .fpd .psys_systems .psys__img { max-height: 40px; }
    .fpd .fpd-sub { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
    .fpd .psys__bg, .fpd .fpd-pop { transition: none; }
}

/* ===================== stage 2: amount, order summary, bonus table =====================
   Elements below are created by fp-donate.js; .fpd-on is put on the form and .fpd-bonus on the
   bonus block only after they are built, so without the script the page looks exactly as before. */
.fpd-on .fpd-hide,
.fpd-on #item_board { display: none !important; }
.fpd-bonus .fpd-old { display: none !important; }
/* while the script loads keep the old table invisible; it comes back if the script fails */
.fpd-js .row:has(.payform__pm.fpd) .main_li_hover { visibility: hidden; }

.fpd-on #coin { color: #f3e7cc; font-weight: 700; }
.fpd-on #bonus_sum { color: #f3c96b; font-weight: 700; }

/* quick amounts */
.fpd-quick {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(62px, 1fr));   /* 6 amounts fit one row */
    gap: 8px;
    margin: -8px 0 20px;
}
.fpd-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 8px 4px 7px;
    border: 1px solid rgba(240, 183, 140, 0.28);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.32);
    color: #f3e7cc;
    font: 700 15px/1.1 "Segoe UI", Roboto, Arial, sans-serif;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: border-color .15s, background-color .15s, transform .15s;
}
.fpd-chip small { font-size: 11.5px; font-weight: 800; color: #e7bf6a; letter-spacing: .02em; }
.fpd-chip small.z { color: #a8987a; font-weight: 600; }
.fpd-chip:hover { border-color: rgba(214, 170, 82, 0.7); background: rgba(0, 0, 0, 0.44); }
.fpd-chip:active { transform: translateY(1px); }
.fpd-chip.on {
    border-color: #d6aa52;
    background: rgba(214, 170, 82, 0.14);
    box-shadow: inset 0 0 0 1px #d6aa52;
}
.fpd-chip:focus-visible { outline: 2px solid #d6aa52; outline-offset: 2px; }

/* ion slider: green to ForcePlay gold */
.fpd-on .irs--round .irs-bar { background-color: #d6aa52; }
.fpd-on .irs--round .irs-handle { border-color: #d6aa52; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4); }
.fpd-on .irs--round .irs-handle.state_hover,
.fpd-on .irs--round .irs-handle:hover { background-color: #fff6e2; }
.fpd-on .irs--round .irs-from,
.fpd-on .irs--round .irs-to,
.fpd-on .irs--round .irs-single { background-color: #d6aa52; color: #221a12; font-weight: 700; }
.fpd-on .irs--round .irs-from:before,
.fpd-on .irs--round .irs-to:before,
.fpd-on .irs--round .irs-single:before { border-top-color: #d6aa52; }
/* the slider's own min/max captions ("5 CoL", "2500, +500 CoL") looked like a chosen value; the scale below shows them */
.fpd-on .irs--round .irs-min,
.fpd-on .irs--round .irs-max { display: none !important; }

/* compact strip where the old price board was: what you get | price in USD / RUB / EUR / UAH */
.fpd-cost {
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    width: calc(100% - 30px);
    margin: 0 15px 16px;
    border: 1px solid rgba(240, 183, 140, 0.25);
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.28);
    color: #cbbd9f;
    font: 600 13px/1.35 "Segoe UI", Roboto, Arial, sans-serif;
}
.fpd-cost__get,
.fpd-cost__price {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    padding: 8px 14px;
}
.fpd-cost__get { flex: 0 0 auto; border-right: 1px solid rgba(240, 183, 140, 0.2); }
.fpd-cost__price { flex: 1 1 0; min-width: 0; }
.fpd-cost__get > span,
.fpd-cost__price > span {
    color: #a8987a;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.fpd-cost__get b { color: #ffcb86; font-size: 18px; line-height: 1.2; white-space: nowrap; font-variant-numeric: tabular-nums; }
.fpd-cost__get b i { display: block; color: #e7bf6a; font-size: 12px; font-style: normal; }
.fpd-cost__fx { display: grid; grid-template-columns: repeat(2, max-content); gap: 1px 26px; }   /* 2 x 2, like the old board */
.fpd-cost__fx .c { white-space: nowrap; }
.fpd-cost__fx em { display: inline-block; min-width: 34px; color: #a8987a; font-size: 12px; font-style: normal; }
.fpd-cost__fx b { color: #f3e7cc; font-size: 15px; font-variant-numeric: tabular-nums; }
.fpd-cost__gifts {
    flex: 0 0 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-top: 1px solid rgba(240, 183, 140, 0.18);
}
.fpd-cost__gifts[hidden] { display: none; }
.fpd-cost__gl { color: #e7bf6a; font-weight: 700; }

/* hints of the edge tiles stay inside the block; a hint drops below its tile when there is no room above */
.fpd .fpd-pop { transform: translateX(calc(-50% + var(--fpd-dx, 0px))) translateY(4px); }
.fpd .fpd-pop::after { left: calc(50% - var(--fpd-dx, 0px)); }
@media (hover: hover) {
    .fpd .psys_systems .psys__item:hover .fpd-pop { transform: translateX(calc(-50% + var(--fpd-dx, 0px))) translateY(0); }
}
.fpd .fpd-pop.fpd-pop--down { top: calc(100% + 10px); bottom: auto; }
.fpd .fpd-pop.fpd-pop--down::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: #b58a3f; }

/* filter row (RU / UA / CARDS / PayPal / crypto / All systems) hidden on request: every tile already says who it is
   for. "All systems" stays active in the page, so gw.js keeps showing all systems. To bring it back: delete this rule. */
.payform__pm.fpd { display: none; }

/* payment tiles a little smaller (logos 34px instead of 44px) */
.fpd .psys_systems .psys__item { min-height: 80px; padding: 10px 6px 8px; gap: 5px; }
.fpd .psys_systems .psys__img { max-width: 84%; max-height: 34px; }
.fpd .fpd-sub { font-size: 11px; }

/* thin "add N more for a bigger bonus" line under the quick amounts */
.fpd-next {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin: -12px 0 18px;
    padding: 6px 10px;
    border: 1px dashed rgba(214, 170, 82, 0.6);
    border-radius: 8px;
    background: rgba(214, 170, 82, 0.07);
    color: #f3dca0;
    font: 600 13px/1.35 "Segoe UI", Roboto, Arial, sans-serif;
    text-align: left;
    cursor: pointer;
    transition: background-color .15s, border-color .15s;
}
.fpd-next[hidden] { display: none; }
.fpd-next:hover { background: rgba(214, 170, 82, 0.15); border-style: solid; }
.fpd-next:focus-visible { outline: 2px solid #d6aa52; outline-offset: 2px; }
.fpd-next .ic {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #d6aa52;
    color: #221a12;
    font-weight: 800;
    font-size: 12px;
    line-height: 1;
}
.fpd-next.max { border-style: solid; cursor: default; }
.fpd-next.max:hover { background: rgba(214, 170, 82, 0.07); }

.fpd-gift {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px 3px 4px;
    border: 1px solid rgba(240, 183, 140, 0.25);
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.28);
    font-size: 12.5px;
    color: #e2d5b9;
}
.fpd-gift img { width: 18px; height: 18px; border-radius: 3px; }
.fpd-gift b { color: #f3dca0; }
.fpd-gift--icon { padding: 2px 6px 2px 3px; margin: 2px; }
.fpd-btable td.i { white-space: normal; }

/* honest bonus table (right column) */
.fpd-btable-box { margin: 4px 0 6px; overflow-x: auto; }
.fpd-btable {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 6px;
    font: 600 14px/1.35 "Segoe UI", Roboto, Arial, sans-serif;
    font-variant-numeric: tabular-nums;
    color: #e2d5b9;
}
.fpd-btable th {
    padding: 0 12px 2px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #b8a684;
    text-align: left;
}
.fpd-btable td {
    padding: 10px 12px;
    background: rgba(0, 0, 0, 0.28);
    border-top: 1px solid rgba(240, 183, 140, 0.14);
    border-bottom: 1px solid rgba(240, 183, 140, 0.14);
    vertical-align: middle;
    text-align: left;
}
.fpd-btable td:first-child { border-left: 1px solid rgba(240, 183, 140, 0.14); border-radius: 8px 0 0 8px; }
.fpd-btable td:last-child { border-right: 1px solid rgba(240, 183, 140, 0.14); border-radius: 0 8px 8px 0; }
.fpd-btable td b { color: #f3e7cc; font-size: 15px; }
.fpd-btable td span { color: #a8987a; font-size: 12.5px; }
.fpd-btable td.s { color: #cbbd9f; }
.fpd-btable td.g b { color: #ffcb86; }
.fpd-btable tbody tr { cursor: pointer; }
.fpd-btable tbody tr:hover td { background: rgba(0, 0, 0, 0.40); border-color: rgba(214, 170, 82, 0.45); }
.fpd-btable tbody tr:focus-visible { outline: 2px solid #d6aa52; outline-offset: 1px; }
.fpd-btable tbody tr.on td { background: rgba(214, 170, 82, 0.14); border-color: rgba(214, 170, 82, 0.8); }
.fpd-btable td .fpd-pct {
    display: inline-block;
    min-width: 54px;
    padding: 3px 10px;
    border-radius: 999px;
    background: linear-gradient(180deg, #ebc674, #c99a42);
    color: #221a12;
    font-size: 13.5px;
    font-weight: 800;
    text-align: center;
}
.fpd-btable-note { margin: 4px 2px 0; font: 500 12.5px/1.45 "Segoe UI", Roboto, Arial, sans-serif; color: #b8a684; text-align: left; }

/* payment help under the table: gold note instead of green labels */
.fpd-bonus .fpd-help {
    display: block;
    margin: 6px 0 0;
    padding: 14px 16px;
    border: 1px solid rgba(214, 170, 82, 0.55);
    border-radius: 10px;
    background: linear-gradient(100deg, rgba(214, 170, 82, 0.16), rgba(214, 170, 82, 0.04));
    color: #e6dccb;
    font: 600 13.5px/1.55 "Segoe UI", Roboto, Arial, sans-serif;
}
.fpd-bonus .fpd-help a { display: inline-block; margin: 3px 2px; text-decoration: none; }
.fpd-bonus .fpd-help .label {
    display: inline-block;
    padding: 5px 12px !important;
    border: 1px solid rgba(214, 170, 82, 0.75);
    border-radius: 999px !important;
    background: rgba(0, 0, 0, 0.25) !important;
    color: #f3dca0 !important;
    font: 700 13px/1.2 "Segoe UI", Roboto, Arial, sans-serif;
    transition: background-color .15s, color .15s;
}
.fpd-bonus .fpd-help a:hover .label,
.fpd-bonus .fpd-help a:focus-visible .label { background: #d6aa52 !important; color: #221a12 !important; }

/* the theme adds 20px under every <p> in a block: keep the note close to the bonus table */
.fpd-bonus .fpd-btable-note { margin-bottom: 0; }

/* trust line under the pay button */
.fpd-trust {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    margin-top: 10px;
    color: #a8987a;
    font: 500 12px/1.45 "Segoe UI", Roboto, Arial, sans-serif;
}
.fpd-trust__lock { display: inline-flex; align-items: center; gap: 5px; color: #cbbd9f; font-weight: 700; }
.fpd-trust__gift { color: #e7bf6a; font-weight: 600; }
.fpd-trust__gift[hidden] { display: none; }

/* "can't pay?" note, same look as on L2Etina */
.fpd-note {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin: 6px 0 20px;               /* room below: the block itself has almost no bottom padding */
    padding: 14px 18px 14px 14px;
    border: 1px solid rgba(214, 170, 82, 0.6);
    border-radius: 12px;
    background: linear-gradient(100deg, rgba(214, 170, 82, 0.17), rgba(214, 170, 82, 0.05));
    text-align: left;
}
.fpd-note .ic {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    margin-top: 1px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(214, 170, 82, 0.2);
    color: #e7bf6a;
}
.fpd-note .ic svg { width: 20px; height: 20px; }
.fpd-note .tx { min-width: 0; margin: 0; color: #e6dccb; font: 500 13.5px/1.55 "Segoe UI", Roboto, Arial, sans-serif; }
.fpd-note .tx b { display: block; margin-bottom: 3px; color: #fff; font-size: 14.5px; font-weight: 700; line-height: 1.45; }
.fpd-note .tx a {
    color: #e7bf6a;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: rgba(214, 170, 82, 0.5);
}
.fpd-note .tx a:hover,
.fpd-note .tx a:focus { color: #f3dca0; text-decoration-color: currentColor; }

/* sub-methods of a system (BetaTransfer: Visa/Mastercard UAH, QR, P2P...): light blue -> ForcePlay gold */
.fpd-on .donations-method-item {
    border-color: rgba(240, 183, 140, 0.35);
    background-color: rgba(0, 0, 0, 0.25);
    color: #eadfc6;
    transition: border-color .15s, background-color .15s;
}
.fpd-on .donations-method-item:hover { border-color: rgba(214, 170, 82, 0.8); background-color: rgba(214, 170, 82, 0.12); }
.fpd-on .donations-method-item.method-active {
    border-color: #d6aa52;
    background-color: rgba(214, 170, 82, 0.18);
    box-shadow: inset 0 0 0 1px #d6aa52;
    color: #f3dca0;
}

@media (max-width: 575px) {
    .fpd-quick { grid-template-columns: repeat(3, 1fr); }
    .fpd-cost { width: 100%; margin-left: 0; margin-right: 0; }
    .fpd-cost__get { flex: 0 0 100%; flex-direction: row; align-items: baseline; justify-content: space-between; border-right: 0; border-bottom: 1px solid rgba(240, 183, 140, 0.2); }
    .fpd .psys_systems .psys__item { min-height: 72px; padding: 9px 5px 7px; }
    .fpd .psys_systems .psys__img { max-height: 30px; }
    .fpd .fpd-sub { font-size: 10.5px; }
    .fpd-btable th, .fpd-btable td { padding-left: 8px; padding-right: 8px; }
    .fpd-btable td .fpd-pct { min-width: 0; }
    /* slider scale numbers overlap on phones; the quick-amount buttons cover the same job */
    .fpd-on .irs-grid-text { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .fpd-chip, .fpd-next, .fpd-bonus .fpd-help .label { transition: none; }
}