/* mobile-style.css - Comprehensive mobile styles for Allengual website */

/* Base responsive rules for tablets and mobile devices */
@media (max-width: 860px) {
    /* General section adjustments */
    .section-container {
        gap: 64px; /* Reduce gap between sections on mobile */
    }

    .hero-section {
        height: 60px;
    }

    /* Hero section */
    .text-button {
        width: 100%;
        position: relative; /* Use relative instead of static for better control */
        /*padding: 0;*/
        align-items: center;
        text-align: center;
        margin-top: 50px; /* Maintain consistent top margin */
        padding-right: 40px;

        top: 60px; /* Slightly reduced top margin on very small screens */

    }

    /* Keep the top position consistent for the main title */
    .div[data-i18n="main_title"] {
        margin-top: 0; /* Reset any margins */
        padding-top: 0; /* Reset any padding */
    }

    .div {
        font-size: 38px; /* Smaller font for main heading */
    }

    .crm-atp {
        width: 100%;
        /*font-size: 18px;*/
    }

    .buttons {
        flex-direction: column;
        width: 100%;
    }

    .button-do-test,
    .button-do-reservation {
        width: 100%;
        padding-left: 10px;
        padding-right: 10px;
    }

    .frame-solution-texts-title {
        font-size: 28px;
        text-align: center;
    }

    .frame-solution-row {
        grid-template-columns: repeat(1, 1fr);
    }

    .frame-solution-row2 {
        grid-template-columns: repeat(2, 1fr);
    }
    /* First 3 items each take 2 columns (2×3 = 6) */
    .frame-solution-row2 > :nth-child(1),
    .frame-solution-row2 > :nth-child(2),
    .frame-solution-row2 > :nth-child(3),
    .frame-solution-row2 > :nth-child(4) {
        grid-column: span 1;
    }
    /* Items 4 and 5 each take 3 columns (3×2 = 6) */
    .frame-solution-row2 > :nth-child(5) {
        grid-column: span 2;
    }

    .hero-section-laptop-mobile {
        display: flex;
        width: 100%;
    }

    .hero-section-images {
        display: none;
    }

    .hero-section-phone {
        width: 60%;
        position: static;
        transform: none;
        margin-top: -100px; /* Negative margin to create overlap */
    }

    /* ATP Main Description */
    .main-description {
        padding: 30px;
    }

    .frame-solution-texts {
        width: 100%;
        position: static;
    }

    .frame-whom-card {
        grid-template-columns: repeat(1, 1fr);
        gap: 36px;
    }
    /* Assuming image is first child and text is second child */
    .frame-whom-card > :nth-child(1) {
        order: 2; /* Move image to second position */
    }
    .frame-whom-card > :nth-child(2) {
        order: 1; /* Move text to first position */
    }

    .atp-description-text,
    .frame-whom-card-item-text {
        font-size: 16px;
    }

    /* Who Benefits Section */
    .frame-whom {
        width: 100%;
        padding: 0 20px;
    }

    .frame-whom-cards {
        flex-direction: column;
        gap: 20px;
    }

    .card {
        width: 100%;

        min-height: 200px;
        height: auto;
    }

    .image-item {
        flex: 0 0 200px; /* Fixed width, prevents wrapping */
        border-radius: 35px;
    }

    .whom-texts {
        width: 100%;
    }

    .whom-texts-title {
        font-size: 28px;
    }

    .whom-texts-description {
        font-size: 16px;
    }

    /* App Section */
    .frame-app {
        padding: 0 20px;
    }

    .frame-app-client,
    .frame-app-owner,
    .frame-app-trainer {
        flex-direction: column;
        gap: 30px;
    }


    .div12,
    .div14,
    .div16 {
        width: 100%;
        text-align: center;
    }

    .frame-app-client-mockups,
    .frame-app-owner-mockups,
    .frame-app-trainer-mockups {
        width: 100%;
        position: relative;
        height: 400px; /* Fixed height for mockup container */

        display: none;
    }

    .frame-app-owner-mockups-mobile {
        display: flex;
    }

    .app-section-client-get-1,
    .app-section-client-get-2,
    .app-section-trainer-get-1,
    .app-section-trainer-get-2 {
        position: absolute;
        width: 50%;
        height: auto;
    }

    .app-section-client-get-1 {
        right: 0;
        z-index: 2;
    }

    .app-section-client-get-2 {
        left: 0;
        z-index: 1;
    }

    .app-section-trainer-get-1 {
        left: 0;
        transform: rotate(0);
        z-index: 1;
    }

    .app-section-trainer-get-2 {
        right: 0;
        z-index: 2;
    }

    .frame-app-owner-mockups {
        position: relative;
        height: 300px;
    }

    .app-section-owner-get-laptop {
        width: 100%;
        position: relative;
    }

    .app-section-owner-get-phone {
        width: 40%;
        position: absolute;
        left: 10%;
        top: 20%;
        transform: rotate(15deg);
    }

    .frame-app-client-features,
    .frame-app-owner-features,
    .frame-app-trainer-features {
        width: 100%;
        max-width: 616px;
    }

    /* Benefits section */
    .frame-whom-card {
        padding: 30px;

        min-height: 400px; /* Минимальная высота вместо фиксированной */
        height: auto; /* Высота будет определяться содержимым */
    }

    .frame-whom-card-items {
        width: 100%;
        position: static;
    }

    .img-benefits {
        display: none; /* Hide on mobile for better UX */
    }

    /* CRM Section */
    .frame-crm {
        flex-direction: column;
        padding: 0 10px;
        gap: 30px;
    }

    .frame-crm-description {
        width: 100%;
    }

    .frame-crm-image {
        display: none;
    }

    .frame-crm-image-mobile {
        display: flex;
        padding-left: 0;
    }

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

    .frame-no-english-cards {
        grid-template-columns: repeat(1, 1fr);
        gap: 36px;
    }

    .frame-section-3-box {
        border-radius: 0;
    }

    .frame-section-3-title {
        font-size: 36px;
    }

    .div18 {
        font-size: 38px;
    }

    .div19 {
        font-size: 16px;
    }

    /* CRM Functionality */
    .frame-crm-full-control {
        padding: 40px 0;
    }

    .frame-crm-full-control-box {
        padding: 0 20px;
        gap: 30px;
        top: 30px;
    }

    .frame-1321314616 {
        flex-direction: column;
        width: 100%;
        gap: 20px;
    }

    .card-crm {
        width: 100%;
        min-height: 270px; /* Минимальная высота вместо фиксированной */
        height: auto; /* Высота будет определяться содержимым */
    }

    .card-crm-texts {
        width: 100%;
        min-height: 270px; /* Минимальная высота вместо фиксированной */
        height: auto; /* Высота будет определяться содержимым */
    }

    /* CRM Control blocks */
    .block-full-control,
    .block-easy-booking,
    .block-balance-history,
    .block-shop,
    .block-statistics {
        min-height: 800px;
        height: auto;
        padding-bottom: 20px;
    }

    .frame-full-control-texts,
    .frame-easy-booking-texts,
    .frame-balance-history-texts,
    .frame-shop-texts,
    .frame-statistics-texts {
        width: 100%;
        position: static;
        padding: 30px 20px;
        box-sizing: border-box;
    }

    .div20 {
        width: 100%;
        font-size: 28px;
        text-align: center;
    }

    .div21 {
        font-size: 22px;
        width: 100%;
    }

    .frame-full-control-mockup-main,
    .frame-shop-mockup-main,
    .img-statistics-main,
    .img-balance-main {
        display: none;
    }

    .frame-easy-booking-mockup-main,
    .frame-balance-history-mockup-main,
    .frame-statistics-mockup-main {
        position: static;
        width: 100%;
        height: auto;
        display: flex;
        justify-content: center;
        transform: none;
        margin-top: 20px;
    }

    .img-crm-full-control-1,
    .img-easy_booking-2,
    .img-store-main {
        position: static;
        transform: none;
        width: 70%;
        height: auto;
    }

    .frame-full-control-mockups-small,
    .frame-easy-booking-mockups,
    .frame-shop-mockups-small,
    .frame-statistics-mockups-small {
        display: none; /* Hide small mockups on mobile */
    }

    .img-history-main {
        display: none;
    }

    /* Become Client Section */
    .frame-become-client {
        padding: 30px;

        min-height: 700px; /* Минимальная высота вместо фиксированной */
        height: auto; /* Высота будет определяться содержимым */
    }

    .picture-guys {
        display: none; /* Hide on mobile */
    }

    .become-client-box {
        width: 100%;
        position: static;
    }

    .become-client-text {
        text-align: center;
        font-size: 32px;
        margin-top: 8px;
    }

    .button-sent-message-text {
        font-size: 18px;
    }

    .crm-2 {
        font-size: 18px;
    }

    .button-become-client {
        width: 100%;
    }

    /* Contacts Section */
    .button-sent-message {
        width: 100%;
    }

    /* Fix for mobile forms */
    .input-text-field,
    .input-text-field-dark,
    .input-text-area-dark {
        width: 100%;
    }

    .privacy-text,
    .checkbox-text-dark {
        font-size: 14px;
    }

    /* Adjust toast notifications for mobile */
    .toast-container {
        left: 10px;
        right: 10px;
        max-width: none;
        width: auto;
    }

    /* Ensure modals are mobile-friendly */
    .modal-container {
        width: 95%;
        max-height: 80vh;
    }

    .modal-header {
        padding: 20px 20px 0;
    }

    .modal-content {
        padding: 0 20px 20px;
    }

    .policy-modal-title {
        font-size: 24px;
    }

    .policy-modal-section-title {
        font-size: 20px;
    }
}