:root {
    color-scheme: light dark;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: var(--tg-theme-bg-color, #ffffff);
    color: var(--tg-theme-text-color, #18212b);
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-width: 280px;
    background: var(--tg-theme-bg-color, #ffffff);
    color: var(--tg-theme-text-color, #18212b);
}

[hidden] {
    display: none !important;
}

.mini-app {
    width: min(100%, 620px);
    margin: 0 auto;
    padding: max(16px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom));
}

.purchase-form,
.form-field {
    border: 0;
    margin: 0;
    padding: 0;
}

.language-button {
    margin-bottom: 16px;
}

.language-dialog {
    width: min(calc(100% - 32px), 420px);
    padding: 0;
    border: 1px solid var(--tg-theme-section-separator-color, #d7dde3);
    border-radius: 18px;
    background: var(--tg-theme-bg-color, #ffffff);
    color: var(--tg-theme-text-color, #18212b);
}

.language-dialog::backdrop {
    background: rgba(0, 0, 0, 0.72);
}

.language-dialog__content {
    display: grid;
    gap: 12px;
    padding: 20px;
}

.language-dialog h2 {
    margin: 0 0 4px;
    text-align: center;
}

.language-dialog p {
    margin: 0 0 4px;
    color: var(--tg-theme-text-color, #18212b);
    line-height: 1.55;
    text-align: center;
}

.language-dialog .button--secondary {
    border-color: var(--tg-theme-section-separator-color, #c6cdd4);
    color: var(--tg-theme-text-color, #18212b);
}

.purchase-form {
    display: grid;
    gap: 18px;
}

.purchase-form h1 {
    margin: 0;
    font-size: 1.45rem;
}

.required-note,
.field-help,
.ton-payment__status {
    margin: 6px 0 0;
    color: var(--tg-theme-hint-color, #66727d);
    line-height: 1.55;
}

.form-field > label,
.form-field > legend,
.ton-payment h2 {
    display: block;
    margin: 0 0 8px;
    font-weight: 700;
}

.text-input {
    width: 100%;
    min-height: 48px;
    padding: 10px 12px;
    border: 1px solid var(--tg-theme-section-separator-color, #c6cdd4);
    border-radius: 10px;
    background: var(--tg-theme-secondary-bg-color, #f7f8fa);
    color: var(--tg-theme-text-color, #18212b);
    font: inherit;
}

.payment-method-options,
.payment-submit-actions,
.ton-wallet-actions {
    display: grid;
    gap: 10px;
}

.ton-payment {
    padding: 14px;
    border-radius: 12px;
    border: 1px solid var(--tg-theme-section-separator-color, #d7dde3);
    background: var(--tg-theme-secondary-bg-color, #f2f4f6);
}

.ton-payment h2,
.ton-payment p {
    margin-top: 0;
}

.button {
    width: 100%;
    min-height: 48px;
    padding: 11px 16px;
    border: 1px solid var(--tg-theme-button-color, #2481cc);
    border-radius: 10px;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.button--primary {
    background: var(--tg-theme-button-color, #2481cc);
    color: var(--tg-theme-button-text-color, #ffffff);
}

.button--secondary {
    background: transparent;
    color: var(--tg-theme-link-color, #168acd);
}

.button:focus-visible,
.text-input:focus-visible,
.payment-method-option:focus-within {
    outline: 3px solid var(--tg-theme-link-color, #168acd);
    outline-offset: 3px;
}

.payment-method-option {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 48px;
    padding: 10px 14px;
    border: 1px solid var(--tg-theme-section-separator-color, #d7dde3);
    border-radius: 12px;
    background: var(--tg-theme-secondary-bg-color, #f2f4f6);
}

input[type="radio"] {
    accent-color: var(--tg-theme-button-color, #2481cc);
}

.mini-app-footer {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--tg-theme-section-separator-color, #d7dde3);
}

.trust-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.trust-badges a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 88px;
    min-height: 88px;
    padding: 4px;
    border-radius: 10px;
    background: #ffffff;
}

.trust-badges img {
    display: block;
    width: auto;
    height: 85px;
    object-fit: contain;
}

.trust-badges a:focus-visible {
    outline: 3px solid var(--tg-theme-link-color, #168acd);
    outline-offset: 3px;
}

.button:disabled,
input:disabled,
select:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

.ltr {
    direction: ltr;
    unicode-bidi: isolate;
}

@media (min-width: 480px) {
    .payment-method-options {
        grid-template-columns: 1fr 1fr;
    }
}