/* ==========================================================================
   responsive.css — адаптив.
   Брейкпоинты повторяют оригинал (desktop-first):
     1430px, 1400px, 1320px, 1200px, 992px, 768px, 600px, 500px
   ========================================================================== */

@media (min-width: 1920px) {
    body {
        --grad-limit: 960px;
        background-size: contain;
    }
}

/* ---------- ≤ 1430px ---------- */
@media (max-width: 1429.98px) {
    .exchange-pair__side {
        width: 480px;
    }
}

/* ---------- ≤ 1400px ---------- */
@media (max-width: 1399.98px) {
    .referral-hero {
        grid-template-columns: 1fr 340px;
    }
}

/* ---------- ≤ 1320px ---------- */
@media (max-width: 1320px) {
    :root {
        --container-padding: 40px;
    }
}

/* ---------- ≤ 1200px ---------- */
@media (max-width: 1199.98px) {
    :root {
        --container-padding: 20px;
    }

    .hero {
        grid-template-columns: 420px 1fr;
        gap: 15px;
        padding: 40px 0;
    }

    .hero__subtitle {
        font-size: 20px;
    }

    .recent-exchanges__grid {
        gap: 15px;
    }

    .partners__grid {
        gap: 16px;
    }

    .promo-banner__title {
        font-size: 32px;
    }

    .promo-banner__description {
        font-size: 16px;
    }

    .footer__top {
        grid-template-columns: 240px 1fr 1fr;
    }

    /* Страница обмена */
    .exchange-pair__side {
        flex-grow: 1;
        flex-shrink: 1;
        width: 40%;
    }

    .exchange-pair__arrow {
        display: none;
    }

    /* FAQ / Контакты */
    .page-header__title {
        font-size: 40px;
    }

    .faq-section__title {
        font-size: 32px;
    }

    .faq-cards {
        gap: 16px;
    }

    .faq-card,
    .faq-category,
    .contact-card {
        padding: 28px;
    }

    .contacts__lead {
        font-size: 20px;
    }

    .contacts__description,
    .contact-card__text {
        font-size: 16px;
    }

    .contact-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Реферальная */
    .referral-hero {
        grid-template-columns: 1fr 240px;
    }

    .referral-hero__text {
        font-size: 18px;
    }

    .referral-hero__title {
        font-size: 36px;
    }

    .referral-intro {
        margin-top: 40px;
        font-size: 18px;
    }
}

/* ---------- ≤ 992px ---------- */
@media (max-width: 992px) {
    .legal {
        padding: 24px;
        border-radius: 16px;
        font-size: 14px;
    }

    .legal__head {
        margin-bottom: 16px;
        padding-bottom: 16px;
    }

    .legal__title {
        font-size: 24px;
    }

    .legal__content {
        --xpad: 0px;
    }

    .legal__heading {
        padding: 16px;
        font-size: 16px;
    }
}

@media (max-width: 991.98px) {
    /* Header */
    .header {
        margin-top: 12px;
        margin-bottom: 24px;
    }

    .header__left {
        gap: 0;
    }

    .header__burger {
        display: block;
    }

    .header__nav {
        display: none;
    }

    .header__right {
        gap: 12px;
    }

    .header__login {
        width: 40px;
        padding: 0;
        font-size: 0;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='24' fill='none'%3E%3Cpath fill='%23EBEEF3' d='M10.849 11.56c1.588 0 2.963-.569 4.087-1.693 1.124-1.123 1.693-2.498 1.693-4.087 0-1.588-.57-2.963-1.693-4.087C13.812.57 12.436 0 10.849 0 9.26 0 7.885.57 6.762 1.693c-1.124 1.124-1.694 2.5-1.694 4.087 0 1.589.57 2.964 1.694 4.087 1.124 1.124 2.499 1.694 4.087 1.694Zm10.114 6.895a14.303 14.303 0 0 0-.194-1.517 11.936 11.936 0 0 0-.373-1.524 7.534 7.534 0 0 0-.627-1.422 5.369 5.369 0 0 0-.945-1.232 4.167 4.167 0 0 0-1.358-.853 4.692 4.692 0 0 0-1.733-.314c-.245 0-.482.1-.94.399-.325.211-.651.422-.978.63-.315.2-.74.389-1.267.558a5.027 5.027 0 0 1-1.549.25 5.033 5.033 0 0 1-1.549-.25c-.525-.17-.95-.357-1.265-.557-.364-.233-.694-.445-.98-.632-.457-.298-.694-.398-.939-.398-.624 0-1.207.105-1.733.314a4.162 4.162 0 0 0-1.358.853 5.367 5.367 0 0 0-.944 1.232c-.261.458-.472.937-.627 1.422-.15.469-.276.981-.373 1.524a14.232 14.232 0 0 0-.195 1.517c-.032.472-.048.945-.047 1.418 0 1.252.398 2.267 1.183 3.014.776.739 1.802 1.113 3.05 1.113h11.556c1.248 0 2.274-.374 3.05-1.113.785-.747 1.184-1.761 1.184-3.015 0-.483-.017-.96-.049-1.417Z'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: 50% 50%;
        background-size: 22px 24px;
    }

    .header__account {
        gap: 0;
    }

    .header__logout {
        display: none;
    }

    .header__icon-btn {
        min-width: 40px;
    }

    /* Hero */
    .hero {
        grid-template-columns: 1fr;
        gap: 0;
        padding: 30px 0;
    }

    .hero__title {
        font-size: 36px;
    }

    .hero__subtitle {
        margin-top: 20px;
    }

    .hero__widget {
        margin-top: 32px;
        padding: 16px;
        border-radius: 20px;
    }

    /* Последние обмены */
    .recent-exchanges__grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .exchange-card {
        padding: 16px;
        border-radius: 12px;
    }

    /* Как это работает */
    .how-card {
        gap: 32px;
        padding: 16px;
        border-radius: 12px;
    }

    .how-card__actions {
        gap: 16px;
    }

    /* Преимущества */
    .partners__grid {
        grid-template-columns: 1fr;
    }

    /* Промо-баннер */
    .promo-banner {
        margin: 60px 0;
    }

    .promo-banner__content {
        flex-direction: column;
        align-items: stretch;
        gap: 32px;
        padding: 32px;
        border-radius: 24px;
    }

    .promo-banner__main {
        gap: 24px;
    }

    .promo-banner__title {
        font-size: 28px;
    }

    .promo-banner__aside {
        align-items: stretch;
    }

    .promo-banner__button {
        width: 100%;
    }

    /* Footer */
    .footer__inner {
        padding: 24px 0;
    }

    .footer__top {
        grid-template-columns: 1fr 1fr;
    }

    .footer__col:first-child {
        grid-column: span 2;
    }

    .footer__slogan {
        width: auto;
    }

    .footer__menu {
        gap: 8px;
        font-size: 14px;
    }

    /* Surfaces */
    .paper {
        padding: 24px;
        border-radius: 18px;
    }

    /* Страница обмена */
    .exchange-pair {
        flex-direction: column;
        gap: 30px;
    }

    .exchange-pair__side {
        width: 100%;
    }

    .exchange-details__grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    /* 404 */
    .error-page {
        flex-direction: column;
        gap: 30px;
    }

    /* Реферальная */
    .referral-hero {
        grid-template-columns: 1fr 180px;
    }

    .referral-hero__title {
        margin-bottom: 18px;
        font-size: 32px;
    }

    .referral-hero__text {
        font-size: 16px;
    }

    .referral-hero__image img {
        width: 180px;
        height: 180px;
    }
}

/* ---------- ≤ 768px ---------- */
@media (max-width: 767.98px) {
    .page-header__title {
        font-size: 32px;
    }

    .faq-section {
        margin-top: 48px;
    }

    .faq-section__title {
        font-size: 28px;
    }

    .faq-cards {
        grid-template-columns: 1fr;
    }

    .faq-card,
    .faq-category,
    .contact-card {
        padding: 24px;
    }

    .contacts__lead {
        font-size: 18px;
    }

    .contact-cards {
        grid-template-columns: 1fr;
        gap: 20px;
        margin-top: 40px;
    }

    .contacts__note {
        margin-top: 32px;
    }
}

/* ---------- ≤ 600px ---------- */
@media (max-width: 600px) {
    body {
        --grad-limit: 700px;
        background-size: 700px;
        background-position: 50% 0;
    }

    :root {
        --container-padding: 12px;
    }

    .legal {
        padding: 16px;
    }

    .legal__title {
        font-size: 20px;
    }

    .legal__heading {
        margin: 24px 0 16px;
        border-radius: 9px;
        line-height: 20px;
    }
}

@media (max-width: 599.98px) {
    /* Header */
    .header__logo {
        height: 34px;
    }

    .header__theme {
        display: none;
    }

    /* Типографика и поверхности */
    .section-title {
        font-size: 24px;
    }

    .paper {
        padding: 16px;
        border-radius: 16px;
        font-size: 14px;
    }

    .btn--submit {
        height: 40px;
        font-size: 16px;
    }

    /* Форма обмена на главной */
    .exchange-widget {
        padding: 16px;
    }

    .exchange-widget__label {
        margin-bottom: 4px;
        font-size: 12px;
    }

    .amount-group__select {
        width: 130px;
    }

    .amount-group__input {
        height: 40px;
        padding: 0 12px;
        font-size: 14px;
    }

    .currency-select__value {
        padding-right: 26px;
        font-size: 14px;
    }

    .currency-select__chevron {
        top: calc(50% - 10px);
        width: 20px;
        height: 20px;
    }

    .exchange-widget__limits {
        font-size: 12px;
    }

    .exchange-widget__swap {
        margin: 12px 0;
    }

    .exchange-widget__submit {
        height: 44px;
        font-size: 16px;
    }

    /* Dropdown валют */
    .select-dropdown--currency {
        position: fixed;
        left: 16px !important;
        right: 16px !important;
        width: auto;
        max-width: calc(100vw - 32px);
        max-height: 60vh;
    }

    .select-dropdown--currency .select-dropdown__list {
        max-height: none;
    }

    .currency-option {
        gap: 10px;
        padding: 10px;
    }

    .currency-option__icon {
        width: 24px;
        height: 24px;
    }

    .currency-option__code {
        font-size: 14px;
    }

    .currency-option__name {
        font-size: 12px;
    }

    /* Последние обмены */
    .recent-exchanges {
        margin-top: 40px;
    }

    .exchange-card {
        gap: 32px;
    }

    .exchange-card__amount {
        font-size: 16px;
    }

    .exchange-card__date {
        font-size: 12px;
    }

    .exchange-card__pair {
        gap: 8px;
    }

    .exchange-card__coin {
        gap: 4px;
        font-size: 14px;
    }

    .exchange-card__coin img {
        width: 28px;
        height: 28px;
    }

    .exchange-card__arrow {
        width: 16px;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='15' fill='none'%3E%3Cpath fill='%23576CD3' d='M16.707 8.207a1 1 0 0 0 0-1.414L10.343.429A1 1 0 1 0 8.93 1.843L14.586 7.5l-5.657 5.657a1 1 0 0 0 1.414 1.414l6.364-6.364ZM0 8.5h16v-2H0v2Z'/%3E%3C/svg%3E");
    }

    /* Как это работает */
    .how-it-works {
        margin: 24px 0;
    }

    .how-card {
        grid-template-columns: 1fr;
    }

    .how-card__step {
        margin-top: 24px;
        font-size: 20px;
    }

    .how-card__text {
        margin-top: 8px;
        font-size: 16px;
    }

    .how-card__aside {
        display: none;
    }

    .how-card__actions {
        margin-top: 16px;
    }

    .slider-btn {
        width: 40px;
        height: 40px;
        border-radius: 8px;
    }

    .slider-btn img {
        width: 16px;
        height: 16px;
    }

    /* Преимущества */
    .partners {
        margin: 40px 0;
    }

    .partners__grid {
        margin-top: 16px;
    }

    .feature-card {
        padding: 20px;
        border-radius: 16px;
    }

    .feature-card__icon {
        width: 48px;
        height: 48px;
        margin-bottom: 16px;
        border-radius: 12px;
    }

    .feature-card__title {
        margin-bottom: 12px;
        font-size: 16px;
    }

    .feature-card__text {
        font-size: 14px;
    }

    .partners__action {
        margin-top: 24px;
    }

    .partners__link {
        width: 100%;
        height: 48px;
        font-size: 16px;
    }

    /* Промо-баннер */
    .promo-banner {
        margin: 40px 0;
    }

    .promo-banner__content {
        gap: 24px;
        padding: 24px;
        border-radius: 20px;
    }

    .promo-banner__main {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

    .promo-banner__icon {
        width: 56px;
        height: 56px;
    }

    .promo-banner__icon + .promo-banner__icon {
        margin-left: -8px;
    }

    .promo-banner__badge {
        font-size: 12px;
    }

    .promo-banner__title {
        font-size: 24px;
    }

    .promo-banner__description {
        font-size: 15px;
    }

    .promo-banner__button {
        height: 56px;
        padding: 0 32px;
        font-size: 16px;
    }

    /* Footer */
    .footer__inner {
        margin-top: 24px;
    }

    .footer__top {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .footer__col:first-child {
        grid-column: auto;
    }

    .footer__logo {
        height: 34px;
    }

    .footer__slogan {
        font-size: 14px;
    }

    .footer__title {
        margin-bottom: 12px;
        font-size: 16px;
    }

    /* Модалки */
    .modal__content {
        border-radius: 12px;
    }

    .modal__header {
        min-height: auto;
        margin: 16px;
        padding-bottom: 16px;
    }

    .modal__title {
        font-size: 20px;
    }

    .modal__body {
        padding: 0 16px 16px;
        font-size: 14px;
    }

    .auth-form .input {
        padding: 0 12px;
    }

    .auth-form .btn--submit {
        height: 48px;
        font-size: 14px;
    }

    .checkbox--compact .checkbox__label {
        font-size: 12px;
    }

    .auth-form__links {
        margin-top: 16px;
    }

    .auth-link {
        font-size: 13px;
    }

    /* Страница обмена */
    .exchange-pair {
        gap: 12px;
    }

    .exchange-pair__row {
        margin-bottom: 12px;
    }

    .exchange-pair__label {
        margin-bottom: 8px;
        font-size: 14px;
    }

    .amount-group--page {
        height: 40px;
    }

    .amount-group--page .amount-group__input {
        padding: 0 12px;
        font-size: 16px;
    }

    .network-select__button {
        height: 40px;
        padding: 0 32px 0 12px;
        font-size: 14px;
    }

    .network-select__text {
        font-size: 14px;
    }

    .network-select__chevron {
        right: 10px;
        width: 16px;
        height: 16px;
        top: calc(50% - 8px);
    }

    .exchange-details {
        margin-top: 26px;
    }

    .exchange-details__title {
        margin-bottom: 28px;
        font-size: 20px;
    }

    .exchange-details__grid {
        gap: 12px;
    }

    .exchange-details .form-field__label {
        margin-bottom: 4px;
        font-size: 12px;
    }

    .exchange-details .input {
        height: 40px;
        padding: 0 12px;
        font-size: 14px;
    }

    .exchange-details .form-field__hint {
        margin-top: 4px;
        font-size: 12px;
    }

    .exchange-details__footer {
        flex-direction: column;
        align-items: stretch;
        margin-top: 16px;
    }

    .exchange-details__submit {
        width: 100%;
        margin-top: 16px;
    }

    .rate-info {
        margin: 16px 0;
        padding: 12px;
        font-size: 14px;
    }

    .rate-info__item dt {
        margin-bottom: 4px;
        font-size: 12px;
    }

    .rate-info__item dd {
        font-size: 14px;
    }

    .rate-info p,
    .exchange-support p {
        margin-bottom: 8px;
    }

    .exchange-support {
        font-size: 14px;
    }

    /* Детали заявки */
    .offer-page {
        padding-top: 0;
        padding-bottom: 36px;
    }

    .offer-card__header {
        flex-direction: column;
        gap: 16px;
        margin-bottom: 24px;
    }

    .offer-card__title {
        font-size: 24px;
    }

    .offer-route {
        grid-template-columns: 1fr;
        gap: 14px;
        padding: 16px;
    }

    .offer-route__arrow {
        transform: rotate(90deg);
        font-size: 22px;
    }

    .offer-route__amount {
        font-size: 20px;
    }

    .offer-details {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .offer-details__item--wide {
        grid-column: auto;
    }

    .offer-details__item {
        padding: 16px;
    }

    .offer-card__actions {
        align-items: stretch;
        flex-direction: column;
        gap: 16px;
        padding: 16px;
    }

    .offer-card__paid {
        flex-basis: auto;
    }

    /* Личный кабинет */
    .profile-page {
        padding-top: 0;
        padding-bottom: 36px;
    }

    .profile-heading {
        align-items: center;
        flex-direction: row;
        gap: 14px;
        margin-bottom: 16px;
        padding-bottom: 16px;
    }

    .profile-heading__title {
        font-size: 24px;
    }

    .profile-metrics {
        grid-template-columns: 1fr;
    }

    .history-item {
        grid-template-columns: 1fr 1fr;
    }

    .history-item__route {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .history-item__status {
        justify-self: end;
    }

    /* Реферальная */
    .referral-hero {
        grid-template-columns: 1fr;
    }

    .referral-hero__title br {
        display: none;
    }

    .referral-hero__image img {
        width: 160px;
        height: 160px;
    }

    .referral-intro {
        font-size: 16px;
    }

    .referral-steps {
        margin: 24px 0;
    }

    .referral-steps__grid {
        grid-template-columns: 1fr;
        margin-top: 16px;
        overflow: hidden;
        border-radius: 8px;
    }

    .referral-step {
        border: 0;
    }

    .referral-step__title {
        padding: 20px 15px;
        font-size: 18px;
    }

    .referral-step__text {
        padding: 20px 15px;
        font-size: 15px;
    }

    .referral-rules {
        margin: 24px 0;
    }

    .referral-rules__list {
        margin-top: 16px;
    }

    .accordion--plain .accordion__item + .accordion__item {
        margin-top: 12px;
    }

    .accordion--plain .accordion__control {
        font-size: 16px;
    }

    .accordion--plain .accordion__content {
        padding-top: 8px;
        font-size: 14px;
    }

    /* 404 */
    .error-page__title {
        margin-bottom: 16px;
    }

    .alert {
        margin-bottom: 16px;
        padding: 16px;
        font-size: 14px;
    }

    .alert br {
        display: none;
    }

    .error-page__aside {
        width: 140px;
    }
}

@media (max-width: 500px) {
    .profile-shell {
        padding: 20px 16px;
        border-radius: 16px;
    }

    .profile-heading__logout {
        height: 42px;
        padding-right: 18px;
        padding-left: 18px;
    }

    .profile-tabs {
        gap: 6px;
        margin-bottom: 20px;
    }

    .profile-tabs__item {
        width: auto;
        height: 64px;
    }

    .profile-tabs__icon {
        width: 44px;
        height: 44px;
    }

    .profile-tabs__icon svg {
        width: 34px;
        height: 34px;
    }

    .profile-panel__title {
        font-size: 22px;
    }

    .profile-password-form {
        padding: 16px;
    }

    .profile-password-form__actions {
        align-items: stretch;
        flex-direction: column;
    }

    .profile-password-form__actions .btn {
        width: 100%;
    }

    .history-item {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 16px;
    }

    .history-item__route,
    .history-item__status {
        grid-column: auto;
        grid-row: auto;
        justify-self: start;
    }

    .history-item__route {
        flex-wrap: wrap;
    }

    .profile-metric__value {
        font-size: 26px;
    }
}

/* ---------- Блог ---------- */
@media (max-width: 991.98px) {
    .blog-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .blog-grid {
        grid-template-columns: 1fr;
    }

    .article-meta,
    .article-card,
    .article-disclaimer {
        border-right: 0;
        border-left: 0;
        border-radius: 0;
    }

    .article-card {
        padding: 16px;
    }

    .article-content h1 {
        font-size: 24px;
    }

    .article-content h2 {
        font-size: 20px;
    }

    .article-content h3 {
        font-size: 17px;
    }
}

@media (max-width: 576px) {
    .blog__title {
        font-size: 36px;
    }

    .blog-card {
        padding: 16px;
    }

    .blog-card__title {
        font-size: 17.6px;
    }

    .blog-card__excerpt {
        font-size: 14px;
    }

    .breadcrumbs {
        font-size: 14px;
    }

    .article-meta__byline {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .article-meta__divider {
        display: none;
    }

    .article-content h1 {
        font-size: 22px;
    }

    .article-content h2 {
        font-size: 18px;
    }

    .article-content h3 {
        font-size: 16px;
    }
}