/* Record detail window (expense + sale): what happened, how much, who, when, proof */

.overlay .modal.rd-modal {
    --rd-tone: #7c5cfc;
    --rd-tone-2: color-mix(in srgb, var(--rd-tone) 70%, #14203a);
    --rd-flow: var(--rd-tone);
    width: min(960px, calc(100vw - 56px));
    max-width: none;
    height: auto;
    min-height: 0;
    max-height: min(780px, calc(100dvh - 28px));
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 14px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--rd-tone) 24%, var(--theme-stroke, rgba(255,255,255,.8)));
    border-radius: 24px;
    background:
        radial-gradient(circle at 96% 0%, color-mix(in srgb, var(--rd-tone) 20%, transparent), transparent 44%),
        radial-gradient(circle at 4% 100%, color-mix(in srgb, var(--rd-tone) 14%, transparent), transparent 42%),
        linear-gradient(150deg, color-mix(in srgb, var(--rd-tone) 4%, rgba(248,250,254,.95)), color-mix(in srgb, var(--rd-tone) 9%, rgba(233,238,248,.93)));
    box-shadow: 0 30px 70px rgba(24,34,76,.3), inset 0 1px 0 rgba(255,255,255,.9);
    backdrop-filter: blur(22px) saturate(150%);
    -webkit-backdrop-filter: blur(22px) saturate(150%);
    animation: rdModalIn .38s cubic-bezier(.2,.85,.28,1.08) both;
}

html[data-theme="dark"] .overlay .modal.rd-modal {
    border-color: color-mix(in srgb, var(--rd-tone) 30%, rgba(255,255,255,.12));
    background:
        radial-gradient(circle at 96% 0%, color-mix(in srgb, var(--rd-tone) 26%, transparent), transparent 44%),
        radial-gradient(circle at 4% 100%, color-mix(in srgb, var(--rd-tone) 14%, transparent), transparent 42%),
        linear-gradient(150deg, color-mix(in srgb, var(--rd-tone) 8%, rgba(30,38,52,.97)), color-mix(in srgb, var(--rd-tone) 5%, rgba(15,20,29,.96)));
    box-shadow: 0 30px 76px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.07);
}

/* ---------- header ---------- */
.rd-head {
    flex: none;
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) auto 40px;
    align-items: center;
    gap: 12px;
    min-height: 76px;
    padding: 12px 14px;
    border: 1px solid var(--theme-stroke, rgba(255,255,255,.8));
    border-radius: 19px;
    background:
        radial-gradient(circle at 100% 50%, color-mix(in srgb, var(--rd-tone) 14%, transparent), transparent 45%),
        linear-gradient(135deg, rgba(255,255,255,.94), rgba(244,247,252,.9));
    box-shadow: 0 10px 26px rgba(31,42,82,.12), inset 0 1px 0 rgba(255,255,255,.95);
}

html[data-theme="dark"] .rd-head {
    border-color: rgba(255,255,255,.12);
    background:
        radial-gradient(circle at 100% 50%, color-mix(in srgb, var(--rd-tone) 16%, transparent), transparent 45%),
        linear-gradient(145deg, rgba(41,50,64,.97), rgba(24,31,43,.95));
}

.rd-head-icon {
    position: relative;
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border-radius: 17px;
    font-size: 25px;
    color: #fff;
    background: linear-gradient(145deg, color-mix(in srgb, var(--rd-tone) 62%, #fff), var(--rd-tone));
    box-shadow: 0 9px 20px color-mix(in srgb, var(--rd-tone) 38%, transparent);
}

.rd-head-icon::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 2px solid var(--rd-tone);
    animation: rdRing 2.8s ease-out infinite;
    pointer-events: none;
}

.rd-head-icon i {
    animation: rdFloat 3s ease-in-out infinite;
}

.rd-head-text {
    min-width: 0;
}

.rd-kicker {
    display: block;
    font-size: 12px;
    font-weight: 750;
    color: var(--text2);
}

.rd-head h3 {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    font-size: 21px;
    font-weight: 900;
    color: var(--text1);
}

.rd-state {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 36px;
    padding: 6px 13px;
    border: 1px solid color-mix(in srgb, var(--rd-tone) 28%, transparent);
    border-radius: 12px;
    font-size: 12.5px;
    font-weight: 850;
    white-space: nowrap;
    color: var(--rd-tone);
    background: color-mix(in srgb, var(--rd-tone) 11%, transparent);
}

.rd-state i {
    font-size: 17px;
}

.rd-close {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border: 1px solid var(--border);
    border-radius: 13px;
    font-size: 19px;
    color: var(--text2);
    background: rgba(255,255,255,.8);
    cursor: pointer;
    transition: color .2s ease, background .2s ease, transform .3s ease;
}

html[data-theme="dark"] .rd-close {
    background: rgba(255,255,255,.06);
}

.rd-close:hover,
.rd-close:focus-visible {
    color: #fff;
    border-color: transparent;
    background: linear-gradient(145deg, #f29a8a, #dc424d);
    transform: rotate(90deg);
    outline: none;
}

/* ---------- body: rows that always line up ---------- */
.rd-body {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px 2px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--rd-tone) 38%, transparent) transparent;
}

.rd-row {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 12px;
    align-items: stretch;
}

.rd-row > * {
    min-width: 0;
}

.rd-body > *,
.rd-row > * {
    animation: rdRise .5s cubic-bezier(.2,.85,.28,1.05) both;
}

.rd-row > :nth-child(2) {
    animation-delay: .08s;
}

.rd-row:nth-of-type(2) > * {
    animation-delay: .16s;
}

/* ---------- hero: the money ---------- */
.rd-hero {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    overflow: hidden;
    padding: 18px;
    border-radius: 22px;
    color: #fff;
    background:
        radial-gradient(circle at 100% 0%, rgba(255,255,255,.28), transparent 45%),
        linear-gradient(145deg, color-mix(in srgb, var(--rd-tone) 70%, #fff), var(--rd-tone) 55%, var(--rd-tone-2));
    box-shadow: 0 16px 34px color-mix(in srgb, var(--rd-tone) 36%, transparent);
}

.rd-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.3) 50%, transparent 65%);
    transform: translateX(120%);
    animation: rdShine 5s ease-in-out 1.2s infinite;
    pointer-events: none;
}

.rd-flow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px 5px 6px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 850;
    background: rgba(255,255,255,.2);
    border: 1px solid rgba(255,255,255,.35);
}

.rd-flow i {
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: 16px;
    color: var(--rd-flow);
    background: #fff;
    animation: rdNudge 2.4s ease-in-out infinite;
}

.rd-amount-label {
    margin-top: 22px;
    font-size: 12.5px;
    font-weight: 700;
    opacity: .85;
}

.rd-amount {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 2px 0 20px;
    font-size: 38px;
    font-weight: 950;
    line-height: 1.2;
    text-shadow: 0 2px 10px rgba(0,0,0,.18);
}

.rd-hero.is-credit .rd-flow i,
.rd-hero.is-void .rd-flow i {
    animation: rdSpin 6s linear infinite;
}

.rd-amount small {
    font-size: 14px;
    font-weight: 800;
    opacity: .9;
}

.rd-hero-meta {
    width: 100%;
    margin-top: auto !important;
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px dashed rgba(255,255,255,.4);
    font-size: 12.5px;
    font-weight: 750;
}

.rd-hero-meta i {
    font-size: 17px;
}

.rd-hero.is-struck .rd-amount {
    text-decoration: line-through;
    text-decoration-thickness: 3px;
    opacity: .75;
}

/* ---------- cards ---------- */
.rd-card {
    display: flex;
    flex-direction: column;
    padding: 14px;
    border: 1px solid var(--theme-stroke, rgba(255,255,255,.8));
    border-radius: 20px;
    background: rgba(255,255,255,.76);
    box-shadow: 0 8px 20px rgba(29,41,88,.06), inset 0 1px 0 rgba(255,255,255,.9);
}

html[data-theme="dark"] .rd-card {
    border-color: rgba(255,255,255,.1);
    background: linear-gradient(145deg, rgba(47,58,76,.85), rgba(30,39,53,.85));
    box-shadow: none;
}

.rd-card-head {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 12px;
    font-size: 13.5px;
    font-weight: 850;
    color: var(--text1);
}

.rd-card-head > span {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    font-size: 16px;
    color: #fff;
    background: linear-gradient(145deg, color-mix(in srgb, var(--rd-tone) 62%, #fff), var(--rd-tone));
    box-shadow: 0 5px 12px color-mix(in srgb, var(--rd-tone) 30%, transparent);
}

/* ---------- detail items: each kind of fact has its own colour ---------- */
.rd-items {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 1fr;
    gap: 10px;
}

.rd-item {
    --i-a: #8fa0ff;
    --i-b: #5461df;
    min-width: 0;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 11px;
    align-items: center;
    padding: 11px 12px;
    border: 1px solid color-mix(in srgb, var(--i-b) 18%, var(--theme-stroke, rgba(120,130,150,.25)));
    border-radius: 16px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--i-b) 7%, transparent), transparent 80%);
    transition: transform .25s cubic-bezier(.2,.9,.3,1.1), border-color .25s ease, box-shadow .25s ease;
}

.rd-item:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--i-b) 45%, transparent);
    box-shadow: 0 10px 20px color-mix(in srgb, var(--i-b) 16%, transparent);
}

.rd-item > i {
    grid-row: 1 / 3;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    font-size: 21px;
    color: #fff;
    background: linear-gradient(145deg, var(--i-a), var(--i-b));
    box-shadow: 0 6px 14px color-mix(in srgb, var(--i-b) 30%, transparent);
    transition: transform .35s cubic-bezier(.2,.9,.3,1.2);
}

.rd-item:hover > i {
    transform: rotate(-8deg) scale(1.08);
}

.rd-item > span {
    font-size: 11.5px;
    font-weight: 750;
    color: var(--text2);
}

.rd-item > strong {
    min-width: 0;
    font-size: 14.5px;
    font-weight: 850;
    color: var(--text1);
    overflow-wrap: anywhere;
}

.rd-item > strong small {
    margin-inline-start: 5px;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--text2);
}

.rd-item > strong small.t {
    display: block;
    margin: 2px 0 0;
}

.rd-item.is-wide {
    grid-column: 1 / -1;
}

.rd-item[data-k="date"] { --i-a: #6db8ff; --i-b: #2f78e0; }
.rd-item[data-k="person"] { --i-a: #c28bf5; --i-b: #8a4fe0; }
.rd-item[data-k="fuel"] { --i-a: #f2a43a; --i-b: #e8820a; }
.rd-item[data-k="money"] { --i-a: #5fd0a0; --i-b: #1f9d6a; }
.rd-item[data-k="kind"] { --i-a: #f6c05a; --i-b: #e08a1e; }
.rd-item[data-k="pump"] { --i-a: #6cc6e2; --i-b: #2f9fc4; }

/* ---------- who recorded it ---------- */
.rd-by {
    display: flex;
    align-items: center;
    gap: 12px;
}

.rd-avatar {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: 18px;
    font-weight: 900;
    color: #fff;
    background: linear-gradient(145deg, #7d8df6, #5461df);
    box-shadow: 0 6px 14px rgba(84,97,223,.32);
}

.rd-by b {
    display: block;
    font-size: 14.5px;
    font-weight: 850;
    color: var(--text1);
}

.rd-by small {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--text2);
}

.rd-by time {
    margin-inline-start: auto;
    padding: 5px 11px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 800;
    color: #5461df;
    background: rgba(84,97,223,.12);
}

/* ---------- document number ---------- */
.rd-doc {
    display: flex;
    align-items: center;
    gap: 11px;
}

.rd-doc-ico {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    font-size: 21px;
    color: #fff;
    background: linear-gradient(145deg, #6cc6e2, #2f9fc4);
    box-shadow: 0 6px 14px rgba(47,159,196,.3);
}

.rd-doc-text {
    min-width: 0;
    flex: 1;
}

.rd-doc-text small {
    display: block;
    font-size: 11.5px;
    font-weight: 750;
    color: var(--text2);
}

.rd-doc-text bdi {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 13px;
    font-weight: 850;
    letter-spacing: .3px;
    color: var(--text1);
    direction: ltr;
    unicode-bidi: isolate;
}

.rd-copy {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border: 1px solid var(--border);
    border-radius: 12px;
    font-size: 18px;
    color: var(--text2);
    background: rgba(255,255,255,.7);
    cursor: pointer;
    transition: color .2s ease, background .2s ease, transform .2s ease;
}

html[data-theme="dark"] .rd-copy {
    background: rgba(255,255,255,.06);
}

.rd-copy:hover {
    color: #fff;
    background: linear-gradient(145deg, #6cc6e2, #2f9fc4);
    transform: scale(1.06);
}

.rd-copy.is-done {
    color: #fff;
    background: linear-gradient(145deg, #5fd0a0, #1f9d6a);
}

.rd-doc + .rd-doc {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed var(--border);
}

.rd-doc-ico.is-track {
    background: linear-gradient(145deg, #c28bf5, #8a4fe0);
    box-shadow: 0 6px 14px rgba(138,79,224,.3);
}

.rd-qr {
    width: 64px;
    height: 64px;
    padding: 5px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid var(--border);
}

.rd-qr svg,
.rd-qr img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    image-rendering: pixelated;
}

.rd-row.is-single {
    grid-template-columns: minmax(0, 1fr);
}

.rd-files .attach-files-list {
    margin-top: 2px;
}

.rd-item.is-wide {
    grid-column: 1 / -1;
}

/* ---------- note: a small sticky note ---------- */
.rd-note {
    display: flex;
    gap: 11px;
    padding: 13px 14px;
    border: 1px solid rgba(230,162,58,.4);
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(246,192,90,.2), rgba(246,192,90,.06));
}

.rd-note > i {
    flex: none;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    font-size: 19px;
    color: #fff;
    background: linear-gradient(145deg, #f6c05a, #e08a1e);
    box-shadow: 0 6px 14px rgba(224,138,30,.3);
}

.rd-note b {
    display: block;
    margin-bottom: 2px;
    font-size: 12px;
    font-weight: 800;
    color: var(--text2);
}

.rd-note p {
    margin: 0;
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.8;
    color: var(--text1);
}

/* ---------- correction: what happened, step by step ---------- */
.rd-story {
    padding: 14px;
    border: 1px solid color-mix(in srgb, var(--rd-tone) 32%, transparent);
    border-radius: 20px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--rd-tone) 11%, transparent), transparent 75%);
}

.rd-story-text {
    margin: 0 0 12px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.9;
    color: var(--text1);
}

.rd-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.rd-step {
    --s-a: #f6c05a;
    --s-b: #b46a23;
    position: relative;
    padding: 12px;
    border: 1px solid color-mix(in srgb, var(--s-b) 30%, transparent);
    border-radius: 16px;
    background: color-mix(in srgb, var(--s-b) 8%, transparent);
}

.rd-step[data-s="reversal"] { --s-a: #f08ab9; --s-b: #c23878; }
.rd-step[data-s="replacement"] { --s-a: #5fcfd8; --s-b: #087e8b; }

.rd-step.is-here {
    border-color: var(--s-b);
    box-shadow: 0 10px 22px color-mix(in srgb, var(--s-b) 22%, transparent);
}

.rd-step-ico {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    margin-bottom: 8px;
    border-radius: 11px;
    font-size: 18px;
    color: #fff;
    background: linear-gradient(145deg, var(--s-a), var(--s-b));
}

.rd-step b {
    display: block;
    font-size: 12.5px;
    font-weight: 850;
    color: var(--s-b);
}

.rd-step bdi {
    display: block;
    margin-top: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 11px;
    font-weight: 750;
    color: var(--text2);
    direction: ltr;
    unicode-bidi: isolate;
}

.rd-step-tag {
    position: absolute;
    top: 10px;
    inset-inline-end: 10px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 850;
    color: #fff;
    background: var(--s-b);
}

.rd-step:not(:last-child)::after {
    content: '\ea61';
    position: absolute;
    top: 50%;
    inset-inline-start: -9px;
    width: 18px;
    height: 18px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-family: 'tabler-icons';
    font-size: 11px;
    color: var(--text2);
    background: var(--theme-surface, #fff);
    border: 1px solid var(--border);
    transform: translateY(-50%);
    z-index: 2;
}

/* ---------- actions ---------- */
.rd-actions {
    --others: 1;
    flex: none;
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) repeat(var(--others), minmax(0, 1fr));
    gap: 10px;
    padding: 12px 2px 2px;
    border-top: 1px solid color-mix(in srgb, var(--rd-tone) 18%, var(--theme-stroke, rgba(255,255,255,.7)));
}

.rd-actions .btn {
    min-height: 52px;
    gap: 10px;
    margin: 0;
    border-radius: 14px;
    font-size: 14px;
    font-weight: 850;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.rd-actions .btn:hover {
    transform: translateY(-2px);
}

.rd-actions .btn > i {
    flex: none;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    font-size: 18px;
    color: #fff;
    background: linear-gradient(145deg, var(--b-a), var(--b-b));
    box-shadow: 0 6px 14px color-mix(in srgb, var(--b-b) 34%, transparent);
}

.rd-actions .btn-print {
    --b-a: #6db8ff;
    --b-b: #2f78e0;
}

.rd-actions .btn-fix {
    --b-a: #f6c05a;
    --b-b: #e08a1e;
}

.rd-actions .btn-loc {
    --b-a: #6cc6e2;
    --b-b: #2f9fc4;
}

.rd-actions .btn-print:hover {
    border-color: #2f78e0;
    box-shadow: 0 10px 22px rgba(47,120,224,.22);
}

.rd-actions .btn-fix:hover {
    border-color: #e08a1e;
    box-shadow: 0 10px 22px rgba(224,138,30,.24);
}

.rd-actions .btn-print:hover > i {
    animation: rdPrint .7s ease;
}

.rd-actions .btn-loc:hover {
    border-color: #2f9fc4;
    box-shadow: 0 10px 22px rgba(47,159,196,.22);
}

.rd-actions .btn-loc:hover > i {
    animation: rdPop .45s ease;
}

.rd-actions .btn-fix:hover > i {
    animation: rdWrite .8s ease;
}

.overlay .modal.rd-modal .rd-actions .btn-primary {
    --b-a: rgba(255,255,255,.34);
    --b-b: rgba(255,255,255,.14);
    position: relative;
    overflow: hidden;
    color: #fff;
    border-color: transparent !important;
    background: linear-gradient(135deg, color-mix(in srgb, var(--rd-tone) 70%, #fff), var(--rd-tone-2)) !important;
    box-shadow: 0 10px 22px color-mix(in srgb, var(--rd-tone) 34%, transparent) !important;
}

.rd-actions .btn-primary > i {
    box-shadow: none;
    border: 1px solid rgba(255,255,255,.35);
}

.rd-actions .btn-primary:hover > i {
    animation: rdPop .45s ease;
}

.rd-actions .btn-primary::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.38) 50%, transparent 65%);
    transform: translateX(120%);
    animation: rdShine 4.5s ease-in-out 1.6s infinite;
    pointer-events: none;
}

/* ---------- phones: one column that scrolls, header and buttons stay ---------- */
/* ---------- wide screens: one compact money strip, details beside the document and the person ---------- */
@media (min-width: 901px) {
    .overlay .modal.rd-modal {
        width: min(1080px, calc(100vw - 56px));
    }

    .rd-body {
        display: grid;
        grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
        grid-auto-flow: row dense;
        align-content: start;
    }

    .rd-row {
        display: contents;
    }

    .rd-body > .rd-story,
    .rd-body > .rd-note,
    .rd-body > .rd-files {
        grid-column: 1 / -1;
    }

    .rd-hero {
        grid-column: 1 / -1;
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
        gap: 6px 18px;
        padding: 12px 18px;
        border-radius: 20px;
    }

    .rd-amount-label {
        margin: 0;
    }

    .rd-amount {
        margin: 0;
        font-size: 30px;
    }

    .rd-hero-meta {
        width: auto;
        margin: 0 !important;
        margin-inline-start: auto !important;
        padding: 6px 12px;
        border: 0;
        border-radius: 999px;
        background: rgba(255,255,255,.18);
    }

    .rd-row:first-of-type > .rd-card {
        grid-column: 1;
        grid-row: span 2;
    }

    .rd-row:nth-of-type(2) > *,
    .rd-row.is-single > * {
        grid-column: 2;
    }

    .rd-items {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .rd-item.is-wide {
        grid-column: auto;
    }
}

@media (max-width: 900px) {
    .overlay .modal.rd-modal {
        width: min(560px, calc(100vw - 18px));
        height: calc(100dvh - 18px);
        max-height: calc(100dvh - 18px);
        padding: 12px;
    }
    .rd-head {
        grid-template-columns: 46px minmax(0, 1fr) 40px;
        gap: 10px;
        min-height: 68px;
        padding: 10px 12px;
    }
    .rd-head-icon {
        width: 46px;
        height: 46px;
        font-size: 22px;
    }
    .rd-head h3 {
        font-size: 18px;
    }
    .rd-state {
        grid-column: 1 / -1;
        grid-row: 2;
        justify-self: start;
        min-height: 32px;
    }
    .rd-row {
        grid-template-columns: 1fr;
    }
    .rd-amount {
        font-size: 34px;
    }
    .rd-items {
        grid-template-columns: 1fr;
    }
    .rd-steps {
        grid-template-columns: 1fr;
    }
    .rd-step:not(:last-child)::after {
        top: auto;
        bottom: -10px;
        inset-inline-start: 50%;
        transform: rotate(90deg);
    }
    .rd-actions {
        grid-template-columns: 1fr;
    }
    .rd-actions[data-others="2"],
    .rd-actions[data-others="3"] {
        grid-template-columns: 1fr 1fr;
    }
    .rd-actions[data-others="2"] .btn-primary,
    .rd-actions[data-others="3"] .btn-primary {
        grid-column: 1 / -1;
    }
    .rd-actions[data-others="3"] .btn:last-child {
        grid-column: 1 / -1;
    }
    .rd-actions .btn-primary {
        order: -1;
    }
}

@keyframes rdModalIn { from { opacity: 0; transform: translateY(18px) scale(.965); } to { opacity: 1; transform: none; } }
@keyframes rdRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes rdRing { 0% { transform: scale(1); opacity: .5; } 100% { transform: scale(1.4); opacity: 0; } }
@keyframes rdFloat { 50% { transform: translateY(-2px); } }
@keyframes rdShine { 0%, 55% { transform: translateX(120%); } 80%, 100% { transform: translateX(-120%); } }
@keyframes rdNudge { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(2px, -2px); } }
@keyframes rdSpin { to { transform: rotate(360deg); } }
@keyframes rdPrint { 0% { transform: translateY(0); } 30% { transform: translateY(-4px) scale(1.08); } 60% { transform: translateY(2px); } 100% { transform: none; } }
@keyframes rdWrite { 0% { transform: none; } 25% { transform: translate(3px, -2px) rotate(-14deg); } 50% { transform: translate(-3px, 1px) rotate(10deg); } 75% { transform: translate(2px, -1px) rotate(-6deg); } 100% { transform: none; } }
@keyframes rdPop { 0% { transform: scale(1); } 50% { transform: scale(1.25); } 100% { transform: scale(1); } }

@media (prefers-reduced-motion: reduce) {
    .overlay .modal.rd-modal,
    .rd-body > *,
    .rd-row > *,
    .rd-head-icon::after,
    .rd-head-icon i,
    .rd-hero::after,
    .rd-flow i,
    .rd-actions .btn-primary::after {
        animation: none !important;
    }
}