/*
 * The donation pages: /donate (the two payment methods, cryptocurrency and Rewarble Gift Card, and the calculator),
 * /account/donations (the owner's orders) and /account/donations/{orderCode} (one order: its state, its payments and the
 * link back to the provider's page), and the owner's Rewarble list and order pages under /account/donations/rewarble. It
 * builds on the shared .card, .btn, .data-table, .form-note and
 * .notice-banner of site.css and on mypage.css (.mypage-box__title, .mypage-actions, .dp-scroll, .dp-pager). No inline
 * styles anywhere: the CSP forbids them.
 */

/* ---- /donate ------------------------------------------------------------------------------------------------------ */

/* One centred card: title, subtitle, the amount box, then the notes. */
.donate-card {
    max-width: 760px;
    margin: 0 auto;
    padding: 40px 44px 44px;
}

.donate-card__title {
    margin: 0;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
}

.donate-card__subtitle {
    margin: 6px 0 28px;
    color: var(--c-muted);
    text-align: center;
}

.donate-card__box {
    padding: 28px 32px 32px;
    border: 1px solid var(--c-rule);
    background: #fff;
}

.donate-card__signin {
    margin: 0 0 16px;
    text-align: center;
}

.donate-card__actions {
    margin: 0;
    text-align: center;
}

.donate-card__notes-title {
    margin: 36px 0 14px;
    padding: 0 0 10px;
    border-bottom: 1px solid var(--c-rule);
    font-size: 18px;
    font-weight: 700;
    text-align: center;
}

.donate-terms {
    margin: 0;
    padding: 0 0 0 20px;
    line-height: 1.7;
    list-style: disc;
}

.donate-terms li {
    margin: 0 0 6px;
}

.donate-card__mine {
    margin: 20px 0 0;
    text-align: center;
}

.donate-form section {
    margin: 0 0 8px;
}

.donate-form label {
    display: block;
    margin: 0 0 10px;
    font-weight: 700;
}

.donate-form section.error input {
    border-color: var(--c-error);
}

.donate-amount {
    display: flex;
    align-items: center;
    gap: 10px;
}

.donate-form .donate-amount input[type="number"] {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    max-width: none;
}

.donate-amount__unit {
    font-weight: 700;
    color: var(--c-muted);
}

/* The quick amounts and the live DP result are enhancements: they exist only when the script runs. */
.donate-quick {
    display: none;
}

.js .donate-quick {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
    margin: 0 0 12px;
}

.donate-quick__button {
    width: 100%;
    min-width: 0;
    padding-inline: 4px;
    text-align: center;
}

/* The quick amount that equals the typed one: the site's accent yellow, like the active tab. */
.donate-quick__button.is-selected {
    background: var(--c-accent);
    box-shadow: inset 0 0 0 2px var(--c-bar);
    color: var(--c-bar);
}

/* The DP result: one number, always taking its row under the script so the button never jumps. */
.donate-preview {
    margin: 18px 0 20px;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
}

.donate-preview[hidden] {
    display: none;
}

.js .donate-preview[hidden] {
    display: block;
    visibility: hidden;
    min-height: 1.4em;
}

.donate-submit {
    margin: 0;
    text-align: center;
}

/* ---- the two payment tabs --------------------------------------------------------------------------------------------- */

/* Two equal buttons side by side, no gap, one height; a long label wraps inside its button, the pair never stacks. */
.donate-tabs {
    display: flex;
    margin: 0 0 28px;
}

.donate-tabs .btn {
    flex: 1 1 0;
    min-width: 0;
    min-height: 60px;
    padding: 8px 14px;
    font-size: 17px;
    overflow-wrap: anywhere;
}

.donate-tabs .btn:focus-visible {
    outline: 2px solid var(--c-link);
    outline-offset: -4px;
}

/* There is no global [hidden] rule on the site, so the panel says it itself. */
.donate-method-panel {
    min-width: 0;
}

.donate-method-panel[hidden] {
    display: none;
}

.donate-method__subtitle {
    margin: 24px 0 8px;
    font-size: 16px;
    font-weight: 700;
}

.donate-method-panel .donate-card__notes-title {
    margin-top: 28px;
    font-size: 16px;
    text-align: left;
}

.donate-method-panel .donate-card__mine {
    text-align: left;
}

/* ---- the Rewarble panel -------------------------------------------------------------------------------------------- */

/* The notices and the purchase links are one family: a titled block, then a list with a small amber marker, a hanging
   indent so a wrapped line aligns with its text, and the same rhythm. The purchase block has no box of its own, so its
   inset is the notice box's border plus padding: both blocks share one text column. About 20px separates the blocks and
   the form box. */
.rewarble-notices {
    margin: 0 0 20px;
    padding: 18px 22px 20px;
    border-left: 4px solid var(--c-accent);
    background: #fff6d6;
    color: #4d3d00;
}

.rewarble-notices .donate-method__subtitle,
.rewarble-buy .donate-method__subtitle {
    margin: 0 0 10px;
}

.rewarble-list {
    margin: 0;
    padding: 0;
    line-height: 1.75;
    list-style: none;
}

.rewarble-list li {
    position: relative;
    margin: 0 0 9px;
    padding-left: 20px;
    overflow-wrap: anywhere;
    text-wrap: balance;
}

.rewarble-list li:last-child {
    margin-bottom: 0;
}

.rewarble-list li::before {
    content: "";
    position: absolute;
    top: 0.8em;
    left: 4px;
    width: 7px;
    height: 7px;
    background: #a87700;
    transform: translateY(-50%) rotate(45deg);
}

.rewarble-list__label {
    margin-left: 4px;
    color: var(--c-muted);
}

.rewarble-buy {
    margin: 0 0 20px;
    padding: 0 22px 0 26px;
}

/* The VPN reminder under the purchase links: a muted hint on the items' text column (their 20px hanging indent). */
.rewarble-buy__note {
    margin: 10px 0 0;
    padding-left: 20px;
    color: var(--c-muted);
    font-size: 14px;
    line-height: 1.75;
    overflow-wrap: anywhere;
    text-wrap: balance;
}

.rewarble-box__title {
    margin-top: 0;
}

/* The notices and the hints wrap at any width. Balanced lines keep a wrapped last line from being one or two stray
   characters, which is how Chinese text otherwise breaks (every character is a break opportunity). */
.rewarble-box .form-note,
.rewarble-calc__hint {
    text-wrap: balance;
}

/* A card row: its number and what to type, then one code field (and, on rows 2 to 5, the remove button) in one line. */
.rewarble-row {
    margin: 0 0 16px;
}

.donate-form .rewarble-row label {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 8px;
    margin: 0 0 8px;
}

.rewarble-row__field {
    color: var(--c-muted);
    font-size: 13px;
    font-weight: 400;
}

.rewarble-row__control {
    display: flex;
    align-items: stretch;
    gap: 10px;
}

.rewarble-row__control input {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    letter-spacing: 0.04em;
}

.rewarble-row.error input {
    border-color: var(--c-error);
}

/* Adding and removing rows, and the "unused rows stay empty" note, only make sense with the script. */
.rewarble-add-row,
.rewarble-remove {
    display: none;
}

.js .rewarble-add-row {
    display: block;
    margin: 4px 0 24px;
}

.js .rewarble-add-row[hidden] {
    display: none;
}

.rewarble-add {
    width: 100%;
}

.js .rewarble-remove {
    display: inline-flex;
    flex: 0 0 auto;
}

.js .rewarble-nojs {
    display: none;
}

/* Under the script only row 1 and the rows that hold a code show; the add button opens the next one. */
.js .rewarble-row--extra {
    display: none;
}

.js .rewarble-row--extra.is-open {
    display: block;
}

/* ---- the calculator (Rewarble panel only) -------------------------------------------------------------------------- */

/* The same outlined box as the amount form: chips, the amount field with its unit, two stat tiles, a muted note. */
.rewarble-calc {
    margin: 36px 0 0;
    padding: 28px 32px 30px;
    border: 1px solid var(--c-rule);
    background: #fff;
}

.rewarble-calc__title {
    margin: 0 0 6px;
    font-size: 20px;
}

.rewarble-calc__hint {
    margin: 0 0 20px;
    color: var(--c-muted);
    font-size: 14px;
    line-height: 1.6;
}

/* Chips are links, so they work without the script: five equal columns, always visible. */
.rewarble-calc__chips {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
    margin: 0 0 16px;
}

.rewarble-calc__chips .donate-quick__button {
    min-height: 44px;
    font-size: 15px;
}

.donate-tabs .btn,
.rewarble-calc__chips .btn {
    text-decoration: none;
}

.rewarble-calc__submit {
    width: 100%;
    margin: 12px 0 0;
}

.js .rewarble-calc__submit {
    display: none;
}

.rewarble-calc__result {
    margin: 22px 0 0;
}

/* Two equal dark tiles with the figure in the site's accent yellow, like the header. */
.rewarble-calc__tiles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 0;
}

.rewarble-calc__tile {
    padding: 18px 12px 16px;
    background: var(--c-bar);
    text-align: center;
}

.rewarble-calc__tile dt {
    margin: 0 0 6px;
    color: #d9d9d9;
    font-size: 13px;
}

.rewarble-calc__tile dd {
    margin: 0;
    color: var(--c-accent);
    font-size: 30px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.15;
    overflow-wrap: anywhere;
}

.rewarble-calc__range {
    margin: 12px 0 0;
    color: var(--c-error);
    font-weight: 700;
    text-align: center;
}

.rewarble-calc__range[hidden] {
    display: none;
}

.rewarble-calc__note {
    margin: 14px 0 0;
    color: var(--c-muted);
    font-size: 13px;
    text-align: center;
}

/* ---- the method tab bar of the owner's order pages ------------------------------------------------------------------- */

.donate-method-tabs {
    margin: 0 0 20px;
}

/* ---- one Rewarble order ---------------------------------------------------------------------------------------------- */

.rewarble-cards td {
    padding-block: 10px;
}

.rewarble-card__mask {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    letter-spacing: 0.02em;
}

.rewarble-note {
    overflow-wrap: anywhere;
    white-space: pre-line;
}

/* ---- the owner's orders -------------------------------------------------------------------------------------------- */

.donate-list td {
    white-space: nowrap;
}

/* ---- one order ------------------------------------------------------------------------------------------------------ */

.donate-order {
    max-width: 760px;
    margin: 0 auto;
    padding: 28px 32px 32px;
}

.donate-order__facts {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 8px 20px;
    margin: 0 0 24px;
}

.donate-order__facts dt {
    color: var(--c-muted);
    font-size: 14px;
}

.donate-order__facts dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.donate-badge {
    display: inline-block;
    margin-left: 8px;
    padding: 0 10px;
    border-radius: 9px;
    background: var(--c-error);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    vertical-align: middle;
}

.donate-panel {
    margin: 0 0 20px;
    padding: 12px 16px;
    border-left: 4px solid var(--c-accent);
    background: #fff6d6;
    color: #4d3d00;
}

.donate-panel--credited {
    border-left-color: #2e8b57;
    background: #e8f5ee;
    color: #14442b;
}

.donate-panel--attention {
    border-left-color: var(--c-error);
    background: #fdecea;
    color: #7a1a13;
}

.donate-order__subtitle {
    margin: 0 0 10px;
    font-size: 16px;
}

.donate-payments td {
    padding-block: 10px;
}

.donate-counted {
    font-weight: 700;
    color: #14442b;
}

.donate-attach {
    margin: 0 0 20px;
}

.donate-attach .notice-banner {
    margin-bottom: 12px;
}

.donate-order__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 16px;
    margin: 0 0 8px;
}

.donate-back {
    margin: 24px 0 0;
}

@media (max-width: 991.98px) {
    .donate-card {
        padding: 32px 28px 36px;
    }
}

@media (max-width: 575.98px) {
    .js .donate-quick {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .donate-card {
        padding: 28px 16px 32px;
    }

    .donate-card__box {
        padding: 20px 14px 24px;
    }

    .donate-preview {
        font-size: 20px;
    }

    .donate-order {
        padding: 20px 18px 24px;
    }

    .donate-order__facts {
        grid-template-columns: minmax(0, 1fr);
        gap: 2px;
    }

    .donate-order__facts dd {
        margin-bottom: 12px;
    }

    .donate-tabs .btn {
        min-height: 52px;
        padding: 6px 8px;
        font-size: 15px;
    }

    .rewarble-notices {
        padding: 14px 14px 16px;
    }

    .rewarble-buy {
        padding: 0 14px 0 18px;
    }

    .rewarble-calc {
        padding: 20px 14px 22px;
    }

    .rewarble-calc__tile {
        padding: 14px 8px 12px;
    }

    .rewarble-calc__tile dd {
        font-size: 24px;
    }

    .rewarble-remove {
        padding: 0 12px;
    }
}