@font-face {
    font-family: IRANYekan;
    src: url("./IRANYekan-Bold.woff2") format("woff2"), url("./IRANYekan-Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

* {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    font-family: IRANYekan, Tahoma, Arial, sans-serif;
}

body {
    margin: 0;
    min-height: 100vh;
    min-height: 100svh;
    background: #eaf3f8;
    color: #111827;
    font-family: IRANYekan, Tahoma, Arial, sans-serif;
    font-weight: 700;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

button,
input {
    font: inherit;
}

.page {
    width: 100%;
    min-height: 100vh;
    min-height: 100svh;
    background: #fff;
}

.header {
    display: flex;
    align-items: center;
    gap: .78rem;
    background: #229ed9;
    color: #fff;
    padding: 1.12rem 1.05rem 1.85rem;
    padding-top: max(1.12rem, env(safe-area-inset-top));
}

.brand-mark {
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(255, 255, 255, .16);
    flex: 0 0 auto;
}

.brand-mark svg,
.status-icon svg {
    width: 1.65rem;
    height: 1.65rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.header h1 {
    margin: 0;
    font-size: 1.2rem;
    line-height: 1.6;
    font-weight: 700;
}

.content {
    margin-top: -.8rem;
    background: #fff;
    border-radius: 8px 8px 0 0;
    padding: 1rem .95rem;
    padding-bottom: max(1rem, env(safe-area-inset-bottom));
}

.info-list {
    display: flex;
    flex-direction: column;
    gap: .68rem;
}

.info-card {
    border: 1px solid #e7eef3;
    background: #f5f8fb;
    border-radius: 8px;
    padding: .86rem .92rem .83rem;
}

.label {
    margin-bottom: .38rem;
    color: #64748b;
    font-size: .75rem;
    line-height: 1.65;
}

.value {
    color: #172033;
    font-size: .98rem;
    line-height: 1.85;
    overflow-wrap: anywhere;
}

.value.user {
    direction: ltr;
    text-align: right;
    font-size: 1rem;
}

.amount-card {
    border-color: #dbeef8;
    background: #eff9fe;
}

.amount {
    color: #087fbb;
    font-size: 1.22rem;
    line-height: 1.72;
}

.gateway-help {
    margin: 1.08rem 0 .7rem;
    text-align: center;
    color: #475569;
    font-size: .8rem;
    line-height: 1.7;
}

.gateway-form,
.action-form {
    margin: 0;
}

.pay-button {
    width: 100%;
    min-height: 3.72rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 8px;
    background: #229ed9;
    color: #fff;
    font-size: 1rem;
    text-decoration: none;
    box-shadow: 0 8px 19px rgba(2, 132, 199, .18);
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: background-color .16s, transform .08s;
}

.pay-button:active {
    background: #1584ba;
    transform: scale(.992);
}

.normal,
.loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
}

.normal svg,
.address-label svg,
.copy-button svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.normal svg {
    width: 1.3rem;
    height: 1.3rem;
}

.loading {
    display: none;
    font-size: .89rem;
}

.pay-button[aria-busy=true] {
    background: #1688c0;
    pointer-events: none;
}

.pay-button[aria-busy=true] .normal {
    display: none;
}

.pay-button[aria-busy=true] .loading {
    display: flex;
}

.spinner {
    width: 1.18rem;
    height: 1.18rem;
    border-radius: 50%;
    border: 2.4px solid rgba(255, 255, 255, .38);
    border-top-color: #fff;
    animation: spin .7s linear infinite;
}

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

.address-card {
    margin-top: .88rem;
    padding: .78rem;
    border: 1px solid #e7eef3;
    border-radius: 8px;
    background: #f5f8fb;
}

.address-label {
    display: flex;
    align-items: center;
    gap: .38rem;
    margin-bottom: .55rem;
    color: #64748b;
    font-size: .76rem;
    line-height: 1.6;
}

.address-label svg {
    width: 1rem;
    height: 1rem;
}

.address-row {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.address-value {
    height: 3rem;
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0 .7rem;
    border: 1px solid #e5edf3;
    border-radius: 8px;
    background: #fff;
    color: #64748b;
    font: 700 .69rem Arial, sans-serif;
    user-select: all;
}

.copy-button {
    height: 3rem;
    min-width: 4.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .34rem;
    border: 1px solid #d7eaf5;
    border-radius: 8px;
    background: #fff;
    color: #1183bd;
    font-size: .79rem;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.copy-button svg {
    width: 1.02rem;
    height: 1.02rem;
}

.copy-button:active {
    background: #eaf5fb;
}

.copy-status {
    display: none;
    margin-top: .55rem;
    color: #059669;
    font-size: .72rem;
    line-height: 1.6;
}

.copy-status.show {
    display: block;
}

.notice {
    margin-top: .88rem;
    padding: .82rem .83rem .92rem;
    border: 1px solid #fde68a;
    border-radius: 8px;
    background: #fffbeb;
}

.notice h2 {
    display: flex;
    align-items: center;
    gap: .42rem;
    margin: 0 0 .68rem;
    color: #a9560c;
    font-size: .86rem;
    line-height: 1.6;
}

.notice h2 svg {
    width: 1.13rem;
    height: 1.13rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.notice ul {
    display: flex;
    flex-direction: column;
    gap: .57rem;
    margin: 0;
    padding: 0 1.12rem 0 0;
    color: #78350f;
}

.notice li {
    padding-right: .1rem;
    font-size: .72rem;
    line-height: 1.95;
}

.notice li::marker {
    color: #d97706;
}

.verify-content {
    display: flex;
    flex-direction: column;
    gap: .88rem;
}

.status-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .62rem;
    padding: 1rem .9rem;
    border: 1px solid #dbeef8;
    border-radius: 8px;
    background: #eff9fe;
    text-align: center;
}

.status-card h2 {
    margin: 0;
    color: #172033;
    font-size: 1.06rem;
    line-height: 1.7;
}

.status-card p,
.verify-message {
    margin: 0;
    color: #334155;
    font-size: .85rem;
    line-height: 2;
}

.verify-message a {
    color: #087fbb;
}

.status-icon {
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.status-success {
    border-color: #bbf7d0;
    background: #f0fdf4;
}

.status-success .status-icon {
    background: #dcfce7;
    color: #15803d;
}

.status-error {
    border-color: #fecaca;
    background: #fef2f2;
}

.status-error .status-icon {
    background: #fee2e2;
    color: #b91c1c;
}

.status-warning {
    border-color: #fde68a;
    background: #fffbeb;
}

.status-warning .status-icon {
    background: #fef3c7;
    color: #b45309;
}

.content > .action-list {
    margin-top: .88rem;
}

.verify-content > .action-list {
    margin-top: 0;
}

.action-list {
    display: flex;
    flex-direction: column;
    gap: .62rem;
}

.action-button {
    width: 100%;
    min-height: 3.05rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 8px;
    padding: .65rem .9rem;
    text-align: center;
    text-decoration: none;
    font-size: .9rem;
    cursor: pointer;
}

.action-button.primary {
    background: #229ed9;
    color: #fff;
}

.action-button.support {
    background: #16a34a;
    color: #fff;
}

.action-button.secondary {
    border-color: #d7eaf5;
    background: #fff;
    color: #1183bd;
}

.retry-note {
    margin: -.2rem 0 .2rem;
    text-align: center;
    color: #64748b;
    font-size: .74rem;
    line-height: 1.7;
}

.channel-link {
    text-align: center;
    color: #64748b;
    font-size: .74rem;
    line-height: 1.7;
    text-decoration: none;
}

@media (min-width: 480px) {
    body {
        padding: 1.25rem;
    }

    .page {
        min-height: 0;
        max-width: 430px;
        margin: 0 auto;
        overflow: hidden;
        border-radius: 8px;
        box-shadow: 0 20px 52px rgba(15, 23, 42, .12);
    }
}

@media (prefers-reduced-motion: reduce) {
    .pay-button {
        transition: none;
    }

    .spinner {
        animation-duration: 1.3s;
    }
}