/* ==========================================================================
   L2 Beleth — Design v3: Podpora (/donate)
   View: app/Views/v3/donate.php · JS: /assets/js/v3/donate.js
   Prototyp: design_handoff_l2beleth/design/Podpora v3.dc.html
   Prefix .don3-  (body.b3-page-donate)
   ========================================================================== */

/* Pozadí stránky (prototyp: 25% 40% z výšky stránky ≈ 470px při 1440×900; stránka je
   delší o sekci s platbou, proto pevná výška, aby záře zůstala za nadpisem). */
body.b3-page-donate {
    --b-page-bg: radial-gradient(800px 500px at 25% 470px, rgba(217, 181, 98, .12), transparent 70%), #070d0e;
}

/* ── Stavový banner (?status=success|cancel) ───────────────────────────── */
.don3-banner {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0 0 clamp(32px, 4vw, 48px);
    padding: 16px 22px;
    border: 1px solid rgba(29, 122, 110, .9);
    border-radius: 14px;
    background:
        radial-gradient(320px 120px at 0 0, rgba(60, 201, 180, .12), transparent 70%),
        #0b1315;
    color: #a6ebdd;
    font-size: 17px;
    line-height: 1.5;
}
.don3-banner i { flex: none; font-size: 22px; margin-top: 1px; }
.don3-banner--cancel {
    border-color: rgba(224, 112, 90, .55);
    background:
        radial-gradient(320px 120px at 0 0, rgba(224, 112, 90, .12), transparent 70%),
        #0b1315;
    color: #f0a390;
}

/* ── Prototyp: 2 sloupce ───────────────────────────────────────────────── */
.don3-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
    gap: 56px clamp(40px, 6vw, 96px);
    align-items: start;
}
/* Obal se roztáhne na výšku řádku → sticky jen ve dvou sloupcích (v jednom sloupci nemá kam
   „plavat“, takže nepřekrývá text pod sebou jako prototyp). */
.don3-intro-wrap { align-self: stretch; min-width: 0; }
.don3-intro {
    position: sticky;
    top: 24px;
    display: flex;
    flex-direction: column;
    gap: 22px;
}
.don3-intro .b-kicker { line-height: 1.55; }
.don3-h1 {
    --b-h1-size: clamp(34px, 4.6vw, 60px);
    line-height: 1.05;
    overflow-wrap: break-word;
}
.don3-cta {
    margin-top: 8px;
    align-self: flex-start;
    max-width: 100%;
    padding: 15px 28px;
    font-weight: 400;
    white-space: normal;
}
.don3-cta i { font-size: 1em; }
.don3-cta-note {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: -8px 0 0;
    font-size: 15px;
    font-style: italic;
    color: #6f8584;
}
.don3-cta-note i { flex: none; font-style: normal; font-size: 16px; color: #8a6a2a; }

.don3-terms { display: flex; flex-direction: column; min-width: 0; }
.don3-row {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 18px;
    padding: 28px 0;
    border-top: 1px solid #14201f;
}
.don3-row:first-child { padding: 0 0 28px; border-top: 0; }
.don3-row__icon { font-size: 26px; color: #3cc9b4; }
.don3-row__body { display: flex; flex-direction: column; gap: 8px; }
.don3-row__title { font-size: 20px; color: #e7eeec; }
.don3-note { margin: 12px 0 0; font-size: 15px; font-style: italic; color: #6f8584; }

/* ── Platba / režim (legacy funkce) ────────────────────────────────────── */
.don3-flow { margin-top: clamp(72px, 9vw, 128px); scroll-margin-top: 24px; }
.don3-panel {
    --b-card-pad: clamp(20px, 4vw, 56px);
    --b-radius: 20px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
    gap: clamp(36px, 5vw, 72px);
    align-items: start;
}
.don3-panel__main {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    min-width: 0;
}
.don3-orn { display: flex; align-items: center; gap: 12px; --ink: #d9b562; }
.don3-flow__title { font-size: clamp(28px, 3.4vw, 40px); overflow-wrap: break-word; max-width: 100%; }
.don3-flow__sub { margin: 0; font-size: 19px; font-style: italic; line-height: 1.5; color: #cfdcda; }
.don3-rate {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    max-width: 100%;
    margin: 2px 0 0;
    padding: 10px 20px;
    border: 1px solid #8a6a2a;
    border-radius: 999px;
    background: rgba(217, 181, 98, .06);
    color: #cfdcda;
    font-size: 17px;
    line-height: 1.35;
}
.don3-rate > i { flex: none; font-size: 20px; color: #d9b562; }
.don3-num {
    font-family: var(--b-display);
    font-weight: 700;
    color: #e3c47f;
    text-shadow: 0 0 18px rgba(217, 181, 98, .3);
    white-space: nowrap;
}

.don3-action {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    width: 100%;
    margin-top: 10px;
}
.don3-flow__cta { max-width: 100%; white-space: normal; }

.don3-gate {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 16px;
    width: 100%;
    padding: clamp(16px, 3.5vw, 20px);
    border: 1px dashed #1d2d31;
    border-radius: 16px;
    background: rgba(7, 13, 14, .45);
}
.don3-gate__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid #8a6a2a;
    border-radius: 50%;
    background: rgba(217, 181, 98, .08);
    color: #e3c47f;
    font-size: 20px;
}
.don3-gate__body { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.don3-gate__title { font-size: 18px; line-height: 1.25; color: #e7eeec; }
.don3-gate__text { font-size: 16.5px; line-height: 1.55; color: #a4b6b4; }
.don3-gate__btn { grid-column: 1 / -1; justify-self: start; max-width: 100%; white-space: normal; }

.don3-facts { display: flex; flex-direction: column; min-width: 0; margin: 0; padding: 0; list-style: none; }
.don3-fact {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 16px;
    padding: 22px 0;
    border-top: 1px solid #14201f;
}
.don3-fact:first-child { padding-top: 0; border-top: 0; }
.don3-fact:last-child { padding-bottom: 0; }
.don3-fact__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid #14514a;
    border-radius: 50%;
    background: rgba(60, 201, 180, .06);
    color: #3cc9b4;
    font-size: 20px;
}
.don3-fact__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.don3-fact__title {
    font-family: var(--b-body);
    font-weight: 400;
    font-size: 15px;
    line-height: 1.35;
    font-variant: small-caps;
    letter-spacing: .2em;
    color: #a6ebdd;
}
.don3-fact__text { font-size: 16.5px; line-height: 1.6; color: #bfcecd; }

/* ── Checkout dialog ───────────────────────────────────────────────────── */
html.don3-lock { overflow: hidden; }

.don3-modal {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: clamp(16px, 5vh, 56px) clamp(10px, 3vw, 32px);
    background: rgba(3, 7, 8, .84);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    animation: don3-fade 180ms ease;
}
.don3-modal[hidden] { display: none; }

.don3-dialog {
    position: relative;
    width: 100%;
    max-width: 620px;
    margin: auto;
    padding: clamp(18px, 4vw, 36px);
    border: 1px solid #1d2d31;
    border-radius: 18px;
    background:
        radial-gradient(420px 240px at 100% 0, rgba(217, 181, 98, .10), transparent 70%),
        radial-gradient(360px 220px at 0 100%, rgba(60, 201, 180, .05), transparent 70%),
        #0b1315;
    box-shadow: 0 40px 120px rgba(0, 0, 0, .75);
    color: #e7eeec;
    font-size: 17px;
    line-height: 1.55;
    animation: don3-rise 240ms var(--b-ease);
}
.don3-dialog:focus { outline: none; }

.don3-dialog__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.don3-dialog__titles { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.don3-dialog__step { margin: 0; }
.don3-dialog__title {
    font-size: clamp(22px, 3vw, 28px);
    line-height: 1.1;
    color: #d9b562;
    text-shadow: 0 0 30px rgba(217, 181, 98, .25);
}
.don3-dialog__close {
    appearance: none;
    -webkit-appearance: none;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin: -4px -6px 0 0;
    padding: 0;
    border: 1px solid #1d2d31;
    border-radius: 50%;
    background: transparent;
    color: #a4b6b4;
    font-size: 18px;
    cursor: pointer;
}
.don3-dialog__close:hover, .don3-dialog__close:focus-visible {
    border-color: #8a6a2a;
    background: rgba(217, 181, 98, .08);
    color: #e3c47f;
}

/* Kroky: zlaté tečky + linky */
.don3-steps {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    margin: 26px 0 0;
    padding: 0 0 22px;
    border-bottom: 1px solid #14201f;
    list-style: none;
}
.don3-steps__item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    min-width: 0;
    text-align: center;
}
.don3-steps__item + .don3-steps__item::before {
    content: '';
    position: absolute;
    top: 14px;
    left: calc(-50% + 22px);
    right: calc(50% + 22px);
    height: 1px;
    background: #1d2d31;
    transition: background-color var(--b-dur) ease, box-shadow var(--b-dur) ease;
}
.don3-steps__item.is-done + .don3-steps__item::before {
    background: linear-gradient(90deg, #8a6a2a, #d9b562);
    box-shadow: 0 0 8px rgba(217, 181, 98, .45);
}
.don3-steps__dot {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid #2a3e42;
    border-radius: 50%;
    background: #081012;
    color: #6f8584;
    font-family: var(--b-display);
    font-weight: 700;
    font-size: 13px;
    line-height: 1;
    transition: color var(--b-dur) ease, background-color var(--b-dur) ease, border-color var(--b-dur) ease, box-shadow 200ms ease;
}
.don3-steps__item.is-active .don3-steps__dot {
    border-color: #d9b562;
    background: var(--b-grad-gold);
    color: #070d0e;
    box-shadow: 0 0 18px rgba(217, 181, 98, .5);
}
.don3-steps__item.is-done .don3-steps__dot {
    border-color: #8a6a2a;
    background: rgba(217, 181, 98, .1);
    color: #e3c47f;
}
.don3-steps__label {
    max-width: 100%;
    font-size: 13.5px;
    line-height: 1.2;
    font-variant: small-caps;
    letter-spacing: .1em;
    color: #6f8584;
}
.don3-steps__item.is-active .don3-steps__label { color: #e3c47f; }
.don3-steps__item.is-done .don3-steps__label { color: #a4b6b4; }

.don3-dialog__body { padding-top: 24px; min-width: 0; }

.don3-alert {
    margin: 18px 0 0;
    padding: 12px 16px;
    border: 1px solid rgba(224, 112, 90, .55);
    border-radius: 12px;
    background: rgba(224, 112, 90, .08);
    color: #f0a390;
    font-size: 16px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}
.don3-alert:empty { display: none; }

.don3-dialog__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 26px;
    padding-top: 22px;
    border-top: 1px solid #14201f;
}
.don3-dialog__foot .b-btn { max-width: 100%; padding: 12px 20px; gap: 8px; font-size: 14px; white-space: normal; }
.don3-dialog__foot .b-btn--ghost-teal { padding: 11px 19px; }
.don3-next { flex: 1 1 220px; }
.don3-back { flex: 0 0 auto; }

.don3-dialog__busy {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: inherit;
    background: rgba(7, 13, 14, .72);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}
.don3-dialog__busy[hidden] { display: none; }
.don3-spinner {
    width: 48px;
    height: 48px;
    border: 2px solid rgba(217, 181, 98, .18);
    border-top-color: #d9b562;
    border-radius: 50%;
    box-shadow: 0 0 24px rgba(217, 181, 98, .25);
    animation: b-spin .8s linear infinite;
}

/* Krok 1 — podmínky */
.don3-prose { display: flex; flex-direction: column; gap: 14px; font-size: 17px; line-height: 1.65; color: #bfcecd; }
.don3-prose strong { font-weight: 600; color: #e7eeec; }
.don3-doclink {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 10px;
    max-width: 100%;
    padding-bottom: 2px;
    border-bottom: 1px solid rgba(138, 106, 42, .6);
    color: #e3c47f;
    font-size: 17px;
    line-height: 1.4;
}
.don3-doclink i { flex: none; font-size: 18px; }
.don3-doclink:hover, .don3-doclink:focus-visible { border-bottom-color: #d9b562; color: #f6ead0; }

.don3-checks { display: flex; flex-direction: column; gap: 12px; margin-top: 22px; }
.don3-check {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
    padding: 14px 16px;
    border: 1px solid #1d2d31;
    border-radius: 14px;
    background: #081012;
    cursor: pointer;
    transition: border-color var(--b-dur) ease, background-color var(--b-dur) ease;
}
.don3-check:hover { border-color: #2a3e42; }
.don3-check:has(input:checked) { border-color: rgba(138, 106, 42, .85); background: rgba(217, 181, 98, .05); }
.don3-check input {
    appearance: none;
    -webkit-appearance: none;
    display: grid;
    place-content: center;
    width: 22px;
    height: 22px;
    margin: 2px 0 0;
    border: 1px solid #2a3e42;
    border-radius: 7px;
    background: #070d0e;
    cursor: pointer;
}
.don3-check input::before {
    content: '';
    width: 11px;
    height: 6px;
    border-left: 2px solid #070d0e;
    border-bottom: 2px solid #070d0e;
    transform: translateY(-1px) rotate(-45deg) scale(0);
    transition: transform 140ms var(--b-ease);
}
.don3-check input:checked {
    border-color: #d9b562;
    background: var(--b-grad-gold);
    box-shadow: 0 0 14px rgba(217, 181, 98, .4);
}
.don3-check input:checked::before { transform: translateY(-1px) rotate(-45deg) scale(1); }
.don3-check__label { font-size: 15.5px; line-height: 1.55; color: #cfdcda; }
.don3-check__label strong { font-weight: 600; color: #f6ead0; }

/* Krok 2 — postava */
.don3-chars { display: flex; flex-direction: column; gap: 10px; }
.don3-char {
    appearance: none;
    -webkit-appearance: none;
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    margin: 0;
    padding: 14px 16px;
    border: 1px solid #1d2d31;
    border-radius: 14px;
    background: #081012;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.don3-char:hover { border-color: #8a6a2a; background: rgba(217, 181, 98, .04); }
.don3-char[aria-pressed="true"] {
    border-color: #d9b562;
    background: rgba(217, 181, 98, .08);
    box-shadow: 0 0 24px rgba(217, 181, 98, .15), inset 0 0 0 1px rgba(217, 181, 98, .2);
}
.don3-char:disabled { opacity: .5; cursor: not-allowed; }
.don3-char:disabled:hover { border-color: #1d2d31; background: #081012; }
.don3-char__avatar {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid #14514a;
    border-radius: 50%;
    background: rgba(60, 201, 180, .08);
    color: #3cc9b4;
    font-size: 19px;
}
.don3-char[aria-pressed="true"] .don3-char__avatar { border-color: #8a6a2a; background: rgba(217, 181, 98, .1); color: #e3c47f; }
.don3-char__who { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; }
.don3-char__name {
    overflow: hidden;
    font-family: var(--b-display);
    font-weight: 700;
    font-size: 16px;
    line-height: 1.3;
    color: #e7eeec;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.don3-char__lvl { font-size: 14.5px; line-height: 1.3; font-variant: small-caps; letter-spacing: .14em; color: #a4b6b4; }
.don3-badge {
    --ink: #3cc9b4;
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 11px;
    border: 1px solid #14514a;
    border-radius: 999px;
    background: rgba(60, 201, 180, .06);
    color: #a6ebdd;
    font-size: 12.5px;
    line-height: 1.3;
    letter-spacing: .16em;
}
.don3-badge .b-diamond { width: 6px; height: 6px; }
.don3-badge--on {
    --ink: #e0705a;
    border-color: rgba(224, 112, 90, .45);
    background: rgba(224, 112, 90, .06);
    color: #f0a390;
}
.don3-warn {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 14px 0 0;
    padding: 12px 16px;
    border: 1px solid rgba(224, 112, 90, .45);
    border-radius: 12px;
    background: rgba(224, 112, 90, .07);
    color: #f0a390;
    font-size: 16px;
    line-height: 1.5;
}
.don3-warn[hidden] { display: none; }
.don3-warn i { flex: none; font-size: 18px; margin-top: 2px; }
.don3-empty { margin: 0; padding: 32px 16px; text-align: center; font-size: 17px; font-style: italic; color: #a4b6b4; }

/* Krok 3 — částka */
.don3-field { display: flex; flex-direction: column; gap: 10px; }
.don3-field + .don3-field { margin-top: 24px; }
.don3-label {
    margin: 0;
    font-size: 15px;
    line-height: 1.3;
    font-variant: small-caps;
    letter-spacing: .24em;
    color: #a6ebdd;
}
.don3-input {
    display: flex;
    align-items: center;
    min-width: 0;
    padding: 0 6px 0 24px;
    border: 1px solid #1d2d31;
    border-radius: 999px;
    background: #081012;
    transition: border-color var(--b-dur) ease, box-shadow 200ms ease;
}
.don3-input:focus-within {
    border-color: #8a6a2a;
    box-shadow: 0 0 0 3px rgba(217, 181, 98, .12), 0 0 24px rgba(217, 181, 98, .12);
}
.don3-input.is-invalid { border-color: rgba(224, 112, 90, .55); }
.don3-input input {
    flex: 1;
    min-width: 0;
    margin: 0;
    padding: 12px 0;
    border: 0;
    outline: none;
    background: transparent;
    color: #f6ead0;
    font-family: var(--b-display);
    font-weight: 700;
    font-size: 26px;
    line-height: 1.2;
    -moz-appearance: textfield;
    appearance: textfield;
}
.don3-input input:focus-visible { outline: none; }
.don3-input input::-webkit-outer-spin-button,
.don3-input input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.don3-input--text input {
    padding: 14px 0;
    color: #e7eeec;
    font-family: var(--b-body);
    font-weight: 400;
    font-size: 18px;
}
.don3-input__unit {
    flex: none;
    padding: 0 18px 0 10px;
    color: #8a6a2a;
    font-family: var(--b-display);
    font-weight: 700;
    font-size: 18px;
}
.don3-hint { margin: 0; font-size: 15px; line-height: 1.5; font-style: italic; color: #6f8584; }
.don3-hint.is-low { color: #f0a390; }

.don3-presets { display: grid; grid-template-columns: repeat(auto-fit, minmax(52px, 1fr)); gap: 8px; }
.don3-preset {
    justify-content: center;
    min-width: 0;
    padding: 9px 4px;
    font-family: var(--b-display);
    font-weight: 700;
    font-size: 15px;
    font-variant: normal;
    letter-spacing: 0;
    white-space: nowrap;
}

.don3-methods { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.don3-method {
    appearance: none;
    -webkit-appearance: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 0;
    margin: 0;
    padding: 16px 12px;
    border: 1px solid #1d2d31;
    border-radius: 16px;
    background: #081012;
    color: inherit;
    font: inherit;
    text-align: center;
    cursor: pointer;
    transition: border-color var(--b-dur) ease, background-color var(--b-dur) ease, box-shadow 200ms ease;
}
.don3-method:hover { border-color: #2a3e42; }
.don3-method[aria-pressed="true"] {
    border-color: #d9b562;
    background: rgba(217, 181, 98, .08);
    box-shadow: 0 0 24px rgba(217, 181, 98, .14);
}
.don3-method.is-disabled, .don3-method.is-disabled:hover { border-color: #1d2d31; opacity: .4; cursor: not-allowed; }
.don3-method > i { font-size: 26px; color: #3cc9b4; }
.don3-method[aria-pressed="true"] > i { color: #e3c47f; }
.don3-method__label { font-size: 16.5px; font-weight: 600; line-height: 1.3; color: #e7eeec; }
.don3-method__desc { font-size: 14px; line-height: 1.35; color: #a4b6b4; }

/* Souhrn / platební instrukce */
.don3-summary {
    margin-top: 24px;
    padding: 6px 20px;
    border: 1px solid #1d2d31;
    border-radius: 16px;
    background: #081012;
}
.don3-bank {
    margin-top: 24px;
    padding: 18px 20px 6px;
    border: 1px solid #14514a;
    border-radius: 16px;
    background:
        radial-gradient(300px 160px at 100% 0, rgba(60, 201, 180, .08), transparent 70%),
        #081012;
}
.don3-bank__title { margin: 0 0 4px; }
.don3-sum-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px 16px;
    padding: 12px 0;
}
.don3-sum-row + .don3-sum-row { border-top: 1px solid #14201f; }
.don3-sum-key { font-size: 15px; line-height: 1.4; font-variant: small-caps; letter-spacing: .18em; color: #a4b6b4; }
.don3-sum-val {
    margin-left: auto;
    min-width: 0;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.4;
    color: #e7eeec;
    text-align: right;
    overflow-wrap: anywhere;
}
.don3-sum-val--coin {
    font-family: var(--b-display);
    font-weight: 700;
    font-size: 19px;
    color: #e3c47f;
    text-shadow: 0 0 18px rgba(217, 181, 98, .35);
}
.don3-copy {
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    margin: 0;
    padding: 2px 0;
    border: 0;
    background: none;
    color: #f6ead0;
    font-family: var(--b-display);
    font-weight: 700;
    font-size: 17px;
    line-height: 1.35;
    letter-spacing: .02em;
    text-align: right;
    overflow-wrap: anywhere;
    cursor: pointer;
}
.don3-copy > i { flex: none; font-size: 16px; color: #8a6a2a; transition: color var(--b-dur) ease; }
.don3-copy:hover > i, .don3-copy:focus-visible > i { color: #e3c47f; }
.don3-copy__toast {
    position: absolute;
    right: 0;
    bottom: calc(100% + 6px);
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--b-grad-teal);
    color: #070d0e;
    font-family: var(--b-body);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: .02em;
    white-space: nowrap;
    opacity: 0;
    transform: translateY(4px);
    pointer-events: none;
    transition: opacity 200ms ease, transform 200ms var(--b-ease);
}
.don3-copy.is-copied .don3-copy__toast { opacity: 1; transform: none; }

.don3-qr { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 22px; }
.don3-qr img {
    width: 160px;
    height: 160px;
    padding: 6px;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 0 0 1px #8a6a2a, 0 0 30px rgba(217, 181, 98, .2);
}
.don3-small-note { margin: 18px 0 0; font-size: 15px; line-height: 1.55; font-style: italic; color: #6f8584; text-align: center; }

/* Krok 4 — objednávka vytvořena */
.don3-ok {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 12px;
    padding: 16px 18px;
    border: 1px solid rgba(29, 122, 110, .9);
    border-radius: 14px;
    background: rgba(60, 201, 180, .06);
    color: #a6ebdd;
    font-size: 16.5px;
    line-height: 1.6;
}
.don3-ok > i { font-size: 22px; margin-top: 2px; color: #3cc9b4; }
.don3-ok strong { font-weight: 600; color: #e3fbf5; }

/* Small-caps štítky jsou v prototypech vždy malými písmeny („krok 1“, „historie verzí“);
   texty z lang začínají velkým písmenem → jen vizuálně (DOM/čtečky beze změny). */
.don3-fact__title,
.don3-dialog__step,
.don3-steps__label,
.don3-char__lvl,
.don3-label,
.don3-sum-key,
.don3-bank__title,
.don3-qr .b-kicker { text-transform: lowercase; }

@keyframes don3-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes don3-rise { from { opacity: 0; transform: translateY(12px) scale(.985); } to { opacity: 1; transform: none; } }