@font-face {
    font-family: "ProximaSoft";
    src: url("/assets/fonts/proxima_soft_bold.otf");
}

:root {
    color-scheme: dark;
}

html, body{
    height: 100%;
    margin: 0;
    background: linear-gradient(#000000, #2b1f00);
    color-scheme: dark;
}

body {
    font-family: ui-rounded, "ProximaSoft", sans-serif;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;

    height: auto;
    min-height: 100vh;
    min-height: 100dvh;
}

@keyframes fmToastIn { from { transform: translateY(-8px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes fmToastOut { from { transform: translateY(0); opacity: 1; } to { transform: translateY(-8px); opacity: 0; } }

@keyframes spin { to { transform: rotate(360deg); } }

html { -webkit-text-size-adjust: 100%; }
body { -webkit-text-size-adjust: 100%; }

.donate-hero {
    display: flex;
    gap: 16px;
    align-items: stretch;
    justify-content: space-between;
}

.donate-hero__left {
    flex: 1;
    min-width: 0; /* cực quan trọng để text không bóp cột sai */
}

.donate-hero__qr {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
}

/* QR vuông: dùng width/height rõ ràng */
.donate-hero__qrBox {
    width: 120px;
    height: 120px;
    border-radius: 12px;
    overflow: hidden;
    background: rgba(255,255,255,.25);
    border: 1px solid rgba(0,0,0,.12);
}

.donate-hero__qrBox img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Mobile nhỏ hơn chút nhưng vẫn “to tương đương chữ” */
@media (max-width: 420px){
    .donate-hero__qrBox{ width: 104px; height: 104px; }
}

.donate-hero__qrBox {
    cursor: pointer;
}

.donate-hero__qr.copied .donate-hero__qrBox {
    outline: 2px solid rgba(0,0,0,.25);
    transform: scale(0.98);
}

/* Nav active state using theme color */
.nav-active {
    background: color-mix(in srgb, var(--t, #ffd24a) 18%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--t, #ffd24a) 50%, transparent);
    color: color-mix(in srgb, var(--t, #ffd24a) 90%, white);
}