/* ==========================================================================
   Responsive Styles
   ========================================================================== */

/* Show pagination and Mobile Header Navigation at 1300px */
@media (max-width: 1300px) {
    .vip-status__pagination {
        display: flex;
    }

    .header__menu-toggle {
        display: flex;
    }

    .header__nav {
        position: fixed;
        top: 0;
        right: -370px;
        width: 370px;
        height: 100vh;
        background: rgba(0, 0, 0, 0.9);
        backdrop-filter: blur(1000px);
        transition: right 0.3s ease;
        z-index: 1000;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        padding: 110px 40px 0 40px;
    }

    .header__nav.active {
        right: 0;
    }

    /* Blur overlay when menu is open */
    .header__overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(0, 0, 0, 0.3);
        backdrop-filter: blur(5px);
        z-index: 999;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }

    .header__overlay.active {
        opacity: 1;
        visibility: visible;
    }

    /* Prevent body scroll when menu is open */
    body.menu-open {
        overflow: hidden;
        position: fixed;
        width: 100%;
    }

    .header__nav-list {
        position: relative;
        flex-direction: column;
        gap: 32px;
        align-items: start;
        width: 100%;
    }

    .header__nav-item {
        position: relative;
    }

    .header__nav-divider {
        display: block;
        width: 100%;
        height: 1px;
        background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(196, 196, 196, 0.50) 20%, rgba(196, 196, 196, 0.50) 80%, rgba(0, 0, 0, 0) 100%);
    }

    .header__nav-link {
        font-size: 18px;
        font-weight: 400;
    }

    .header__actions {
        display: flex;
        flex-direction: column;
        gap: 20px;
        /* margin-top: 72px; */
    }

    .header__btn {
        min-width: auto;
        width: 100vw;
        font-size: 18px;
        padding: 15px 0;
    }

    .header__container {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        height: 80px;
        padding: 0 var(--container-padding);
    }

    /* Benefits Grid */
    .benefits__grid {
        display: flex;
        flex-direction: column;
        gap: 20px;
        max-width: 100%;
    }

    .benefits__column {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .benefits__row {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .benefit-card {
        justify-content: flex-end;
    }

    .benefit-card__content {
        align-items: flex-end;
    }

    .benefit-card__text {
        text-align: right;
        max-width: 500px;
    }

    .benefit-card__content {
        max-width: 500px;
    }

    .benefit-card--vertical {
        flex-direction: row;
    }

    /* Унификация размеров всех карточек */
    .benefit-card,
    .benefit-card--vertical,
    .benefit-card--square,
    .benefit-card--horizontal {
        width: 100% !important;
        height: 200px !important;
        max-width: 100% !important;
        padding: 20px !important;
        flex: none !important;
    }

    /* Изменение картинок на tab версии */
    .benefit-card:nth-child(1) {
        background-image: url('./img/benefits/tab/ben-1.webp');
    }

    .benefits__column:nth-child(2) .benefit-card:nth-child(1) {
        background-image: url('./img/benefits/tab/ben-2.webp');
    }

    .benefits__column:nth-child(2) .benefit-card:nth-child(2) {
        background-image: url('./img/benefits/tab/ben-3.webp');
    }

    .benefits__column:nth-child(3) .benefit-card:nth-child(1) {
        background-image: url('./img/benefits/tab/ben-4.webp');
    }

    .benefits__column:nth-child(3) .benefit-card:nth-child(2) {
        background-image: url('./img/benefits/tab/ben-5.webp');
    }

    .benefits__row .benefit-card:nth-child(1) {
        background-image: url('./img/benefits/tab/ben-6.webp');
    }

    .benefits__row .benefit-card:nth-child(2) {
        background-image: url('./img/benefits/tab/ben-7.webp');
    }
}

@media (max-width: 1440px) {
    :root {
        --container-padding: 60px;
    }

    .benefits__grid {
        grid-template-columns: 1fr 380px 380px;
    }

    .benefit-card--square {
        width: 380px;
    }
}

/* Fix VIP cards positioning on medium screens */
@media (min-width: 1301px) and (max-width: 1500px) {
    .vip-status__cards {
        width: 100vw;
        max-width: 100vw;
        margin-left: calc(-50vw + 50%);
        margin-right: calc(-50vw + 50%);
        padding: 0 20px;
        justify-content: center;
    }
}

@media (max-width: 1024px) {
    :root {
        --container-padding: 40px;
    }
}

@media (max-width: 1200px) {
    .header__container {
        gap: 60px;
    }

    .hero {
        height: 100vh;
        min-height: 700px;
    }

    .hero__container {
        padding: 0 var(--spacing-lg);
    }

    .hero__content {
        max-width: 600px;
    }

    .hero__subtitle {
        margin-top: 32px;
    }

    .hero__actions {
        flex-direction: column;
        gap: 24px;
        margin-top: 48px;
    }

    .vip-status__cards {
        gap: 24px;
        padding: 0 40px;
        width: 100vw;
        margin-left: calc(-50vw + 50%);
        margin-right: calc(-50vw + 50%);
    }

    .vip-status__cards .vip-card {
        min-width: 280px;
    }

    .benefits__row {
        grid-column: 1;
        flex-direction: column;
    }

    .exchange__actions {
        flex-direction: column;
        gap: 24px;
    }

    /* Manager Carousel Tablet Images */
    .carousel__slide:nth-child(1) .carousel__image {
        content: url('./img/priority-slider/tab/247.webp');
    }

    .carousel__slide:nth-child(2) .carousel__image {
        content: url('./img/priority-slider/tab/AbsolutePrivacyTrust.webp');
    }

    .carousel__slide:nth-child(3) .carousel__image {
        content: url('./img/priority-slider/tab/ExclusiveVIP.webp');
    }

    .carousel__slide:nth-child(4) .carousel__image {
        content: url('./img/priority-slider/tab/FastTrackPayouts.webp');
    }

    .carousel__slide:nth-child(5) .carousel__image {
        content: url('./img/priority-slider/tab/HigherBetting.webp');
    }

    .carousel__slide:nth-child(6) .carousel__image {
        content: url('./img/priority-slider/tab/Invitation-OnlyEvents.webp');
    }

    .carousel__slide:nth-child(7) .carousel__image {
        content: url('./img/priority-slider/tab/Upto20Cashback.webp');
    }

    .carousel__slide:nth-child(8) .carousel__image {
        content: url('./img/priority-slider/tab/Wager-free Bonuses.webp');
    }

    .manager__header {
        margin-bottom: var(--spacing-xl);
    }

    .carousel-swiper {
        height: auto !important;
        min-height: auto !important;
    }

    .carousel__slide {
        height: auto !important;
        padding: 0 !important;
    }

    .carousel__image {
        position: static !important;
        width: 100% !important;
        height: auto !important;
        object-fit: contain !important;
    }

    .carousel-swiper .swiper-slide .carousel__image {
        position: static !important;
        width: 100% !important;
        height: auto !important;
        object-fit: contain !important;
    }

    .carousel__content {
        position: absolute;
        top: 30px;
        right: 30px;
    }
}

@media (max-width: 768px) {
    :root {
        --font-size-4xl: 32px;
        --font-size-3xl: 32px;
        --font-size-2xl: 20px;
        --font-size-xl: 18px;
        --font-size-lg: 18px;
        --font-size-base: 14px;
        --font-size-sm: 18px;
        --font-size-xs: 12px;
        --container-padding: 20px;
    }

    .vip-status__pagination {
        margin-top: -50px;
    }

    .vip-status {
        padding-bottom: var(--spacing-2xl);
    }

    .manager__title {
        font-size: var(--font-size-2xl);
    }

    .hero {
        height: 100vh;
        min-height: 600px;
        padding: 100px 0 60px;
    }

    .hero__content {
        text-align: center;
        max-width: 100%;
    }

    .hero__title {
        font-size: var(--font-size-3xl);
        line-height: 1.2;
    }

    .hero__subtitle {
        font-size: var(--font-size-lg);
        margin-top: 24px;
    }

    .hero__actions {
        flex-direction: column;
        gap: 16px;
        align-items: center;
        margin-top: 32px;
    }

    .hero__btn {
        width: 100%;
        max-width: 280px;
    }

    .hero__container {
        padding: 0 var(--spacing-sm);
    }

    .vip-status__cards {
        gap: 16px;
        padding: 0 20px;
        width: 100vw;
        margin-left: calc(-50vw + 50%);
        margin-right: calc(-50vw + 50%);
    }

    .vip-status__cards .vip-card {
        min-width: 260px;
    }

    .carousel {
        width: 100%;
        height: 400px;
    }

    .carousel__controls {
        margin-top: var(--spacing-lg);
        gap: var(--spacing-lg);
    }

    .carousel__navigation {
        gap: var(--spacing-lg);
    }

    .carousel-swiper {
        height: 80vh;
    }

    .carousel__slide {
        min-height: 400px;
    }

    .carousel__content {
        padding: 40px 20px;
        text-align: center;
    }

    .carousel__title {
        font-size: var(--font-size-2xl);
        margin-bottom: 16px;
    }

    .carousel__text {
        font-size: var(--font-size-base);
        margin-bottom: 24px;
    }

    .carousel__btn {
        padding: 14px 28px;
        font-size: var(--font-size-base);
    }

    .benefits__grid {
        gap: 16px;
    }

    .benefits__column {
        gap: 16px;
    }

    .benefits__row {
        gap: 16px;
    }

    .benefit-card {
        padding: 20px;
    }

    .benefit-card--vertical {
        height: 500px;
    }

    .benefit-card--square,
    .benefit-card--horizontal {
        height: 300px;
    }

    .benefit-card__content {
        gap: 16px;
        max-width: 100%;
    }

    .benefit-card__title {
        font-size: var(--font-size-lg);
    }

    .benefit-card__text {
        font-size: var(--font-size-sm);
    }

    .section__title {
        font-size: var(--font-size-3xl);
        margin-bottom: 24px;
    }

    .section__subtitle {
        font-size: var(--font-size-lg);
        margin-bottom: 32px;
    }

    .vip-card__text {
        font-size: var(--font-size-sm);
    }

    .exchange__title {
        font-size: var(--font-size-2xl);
    }

    .exchange__text {
        font-size: var(--font-size-base);
    }

    .benefits__title {
        font-size: var(--font-size-2xl);
    }

    .faq__title {
        font-size: var(--font-size-2xl);
    }

    .faq__question {
        font-size: var(--font-size-base);
    }

    .faq__answer {
        font-size: var(--font-size-sm);
    }

    .footer__content {
        flex-direction: column;
        gap: 24px;
        width: 100%;
        text-align: center;
    }

    .footer__info {
        flex-direction: column;
        gap: 16px;
        text-align: center;
    }

    .footer__logo {
        margin-bottom: 16px;
    }

    .footer__text {
        font-size: var(--font-size-sm);
        max-width: 100%;
    }

    .footer__actions {
        flex-direction: column;
        gap: 16px;
        align-items: center;
    }

    .footer__btn {
        width: 100%;
        max-width: 280px;
    }

    .footer__content {
        flex-direction: column;
        gap: var(--spacing-lg);
        text-align: center;
    }

    .carousel-swiper {
        height: 400px;
        overflow: hidden;
    }

    .carousel__slide {
        padding: 20px;
        align-items: center !important;
        justify-content: flex-end !important;
    }

    .carousel__content {
        gap: 16px;
        max-width: 100%;
        transform: translateY(30px) !important;
        margin: 0;
    }

    .carousel__text {
        font-size: 14px;
    }

    .carousel-swiper .swiper-button-next,
    .carousel-swiper .swiper-button-prev {
        width: 32px;
        height: 32px;
    }

    .carousel-swiper .swiper-button-next svg,
    .carousel-swiper .swiper-button-prev svg {
        width: 32px;
        height: 32px;
    }

    .carousel__controls {
        gap: var(--spacing-lg);
    }

    .carousel__navigation {
        gap: var(--spacing-lg);
    }

    .carousel__text {
        max-width: 200px;
    }
}

/* Extra small devices */
@media (max-width: 480px) {
    .hero {
        height: 100vh;
        min-height: 500px;
        padding: 80px 0 40px;
    }

    .hero__container {
        padding: 0 var(--container-padding);
    }

    .hero__content {
        max-width: 95%;
        text-align: center;
    }

    .hero__title {
        font-size: 36px;
        line-height: 1.1;
        max-width: 300px;
    }

    .hero__subtitle {
        font-size: 20px;
        max-width: 240px;
        margin-top: 20px;
    }

    .hero__actions {
        margin-top: 32px;
    }

    .hero__btn {
        padding: 18px 0 21px;
        font-size: var(--font-size-2xl);
    }

    .vip-status__subtitle {
        margin-top: 32px;
    }

    .vip-status__actions {
        margin-top: 48px;
    }

    .vip__btn {
        font-size: var(--font-size-2xl);
    }

    .vip-status__subtitle {
        max-width: 240px;
        margin-top: 24px;
    }

    .vip-status__actions {
        margin-top: 32px;
    }

    .manager__header {
        max-width: 280px;
        gap: var(--spacing-sm);
    }

    .hero__bg-img {
        content: url('./img/hero-bg-mob.webp');
    }

    .ticker__logo {
        height: 48px;
    }

    .exchange {
        background-image: url('./img/exchange-bg-mob.webp');
        background-size: contain;
        padding: var(--spacing-3xl) 0;
    }

    .benefits__grid {
        gap: 12px;
    }

    .benefits__column {
        gap: 12px;
    }

    .benefits__row {
        gap: 12px;
    }

    .benefit-card {
        padding: 16px;
    }

    .benefit-card--vertical {
        height: 400px;
    }

    .benefit-card--square,
    .benefit-card--horizontal {
        height: 250px;
    }

    .benefit-card__content {
        gap: 12px;
    }

    .benefit-card__title {
        font-size: var(--font-size-base);
    }

    .benefit-card__text {
        font-size: var(--font-size-xs);
    }

    .footer__content {
        gap: 20px;
    }

    .footer__info {
        gap: 12px;
    }

    .footer__text {
        font-size: var(--font-size-xs);
    }

    .footer__actions {
        gap: 12px;
    }

    .footer__btn {
        padding: 14px 20px;
        font-size: var(--font-size-sm);
    }

    .section__title {
        font-size: var(--font-size-2xl);
        margin-bottom: 20px;
    }

    .section__subtitle {
        font-size: var(--font-size-base);
        margin-bottom: 24px;
    }

    .exchange__text {
        font-size: var(--font-size-sm);
    }

    .faq__title {
        font-size: var(--font-size-xl);
    }

    .faq__question {
        font-size: var(--font-size-sm);
        padding: 30px 20px;
    }

    .faq__question span {
        max-width: 280px;
    }

    .faq__answer {
        font-size: var(--font-size-xs);
    }

    .section {
        padding: 60px 0;
    }

    .container {
        padding: 0 var(--container-padding);
    }

    .vip-cards__grid {
        gap: 20px;
    }

    .vip-card {
        padding: 24px;
    }

    .exchange__content {
        gap: 32px;
    }

    .exchange__actions {
        gap: 16px;
    }

    .faq__list {
        gap: 16px;
    }

    .section {
        padding: 40px 0;
    }

    .vip-cards__grid {
        gap: 16px;
    }

    .vip-card {
        padding: 20px;
    }

    .exchange__content {
        gap: 24px;
    }

    .exchange__actions {
        gap: 12px;
    }

    .faq__list {
        gap: 12px;
    }

    .footer {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 0;
    }

    .footer__container {
        flex-direction: column;
    }

    .footer__logo {
        width: auto;
    }

    .footer__links-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
        text-align: center;
    }

    .footer__text {
        text-align: center;
    }

    .cta__container {
        gap: 80px;
    }

    .cta {
        background-image: url('./img/footer-bg-mob.webp');
        background-size: contain;
        background-position: 100% 65%;
    }

    /* Manager Carousel Mobile Images */
    .carousel__slide:nth-child(1) .carousel__image {
        content: url('./img/priority-slider/mob/247.webp');
    }

    .carousel__slide:nth-child(2) .carousel__image {
        content: url('./img/priority-slider/mob/AbsolutePrivacyTrust.webp');
    }

    .carousel__slide:nth-child(3) .carousel__image {
        content: url('./img/priority-slider/mob/ExclusiveVIP.webp');
    }

    .carousel__slide:nth-child(4) .carousel__image {
        content: url('./img/priority-slider/mob/FastTrackPayouts.webp');
    }

    .carousel__slide:nth-child(5) .carousel__image {
        content: url('./img/priority-slider/mob/HigherBetting.webp');
    }

    .carousel__slide:nth-child(6) .carousel__image {
        content: url('./img/priority-slider/mob/Invitation-OnlyEvents.webp');
    }

    .carousel__slide:nth-child(7) .carousel__image {
        content: url('./img/priority-slider/mob/Upto20Cashback.webp');
    }

    .carousel__slide:nth-child(8) .carousel__image {
        content: url('./img/priority-slider/mob/Wager-free Bonuses.webp');
    }

    /* Mobile Benefits Slider */
    .benefits__mobile-slider {
        display: block;
    }

    .benefits__grid {
        display: none;
    }

    .carousel__content {
        position: absolute;
        top: -50px;
        right: 10px;
        max-width: 290px;
    }

    .carousel__title,
    .carousel__text {
        margin-bottom: 0;
    }

    .carousel__slide {
        background-color: transparent;
    }

    .manager__container {
        gap: var(--spacing-md);
    }

    .carousel__controls {
        margin-top: 0;
    }

    .manager__carousel {
        gap: var(--spacing-md);
        padding: 0 20px;
    }

    /* Hide manager carousel navigation buttons on mobile */
    .manager__carousel .swiper-button-prev,
    .manager__carousel .swiper-button-next,
    .carousel__btn--prev,
    .carousel__btn--next {
        display: none !important;
    }

    .manager {
        padding: var(--spacing-3xl) 0;
    }

    .benefits {
        padding-top: 0;
    }

    .benefits__container {
        gap: var(--spacing-lg);
    }

    .exchange__btn {
        width: 240px;
    }
}

/* Media query for screen height */
@media (max-height: 920px) {
    .vip-card {
        min-height: 708px !important;
        max-height: 708px !important;
        overflow: hidden;
        border-radius: var(--border-radius-md);
        border-top: 1px solid rgba(255, 255, 255, 0.15);
        border-bottom: 1px solid rgba(255, 255, 255, 0.15);
        padding: 30px 25px;
        gap: 36px;
    }

    .vip-card__content {
        gap: 60px;
    }

    .vip-card__requirements {
        gap: 32px;
    }

    .vip-card__requirement {
        gap: 18px;
    }

    .vip-card__requirement-values {
        gap: 18px;
    }

    .vip-card__amount,
    .vip-card__bonus-amount {
        font-size: 22px;
    }

    .vip-card__currency,
    .vip-card__bonus-currency {
        font-size: 14px;
    }

    .vip-card__period {
        font-size: 12px;
    }

    .vip-card__confirmation {
        font-size: 12px;
    }

    .vip-card__privilege {
        font-size: 12px;
        padding: 4px 0;
    }

    .vip-status__subtitle {
        margin-top: 20px;
    }

    .vip-status__actions {
        margin-top: 24px;
    }
}

/* Media query for larger screen height - carousel images */
@media (min-height: 951px) {
    .carousel__image {
        object-fit: contain !important;
    }

    .carousel-swiper .swiper-slide .carousel__image {
        object-fit: contain !important;
    }
}