/* mobile-style.css - Comprehensive mobile styles for JustDoFit 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 */
    .hero-section {
        min-height: auto;
        padding-top: 0; /* Add padding to account for fixed header */
    }

    .hero-section-box {
        width: calc(100% - 40px);
        flex-direction: column;
        position: relative; /* Ensure proper positioning context */
    }

    .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-just-do-fit {
        width: 100%;
        font-size: 18px;
    }

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

    .button-page-form,
    .component-35 {
        width: 100%;
    }

    .download-app-cta {
        position: static;
        width: 100%;
        margin-top: 100px;
        padding: 0 20px;
    }

    .download-buttons {
        flex-direction: row;
        width: 100%;
        justify-content: space-between;
    }

    .download-app-hero-ios,
    .download-app-hero-android {
        width: 47%;
    }

    .download-buttons-big {
        flex-direction: row;
        gap: 20px;
        width: calc(100%);
        padding-left: 20px;
        padding-right: 40px;
    }

    .download-app-big-ios,
    .download-app-big-android {
        width: 50%;
    }

    .just-do-fit2 {
        font-size: 28px;
        text-align: center;
    }

    .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 */
    }

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

    .main-description-texts {
        width: 100%;
        position: static;
    }

    .jdf-description-text,
    .div6 {
        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;
    }

    .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;
    }

    .advantage-box {
        padding: 15px 10px 15px 0;
    }

    .advantage-icon {
        width: 60px;
        height: 60px;

        margin-left: 10px;
    }

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

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

    .features-benefits {
        width: 100%;
        position: static;
    }

    .div17 {
        font-size: 28px;
        text-align: center;
    }

    .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,
    .frame-crm-image {
        width: 100%;
        padding: 0;
    }

    .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;
    }

    .crm-title {
        font-size: 32px;
        text-align: center;
        padding: 0 20px;
    }

    .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, .div33 {
        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;
    }

    /* Prices Section */
    .frame-prices {
        padding: 0 20px;
    }

    .frame-prices-title {
        width: 100%;
        flex-direction: column;
        gap: 20px;
        align-items: center;
    }

    .prices-title-text {
        /*font-size: 32px;*/
        font-size: 43px;
    }

    .prices-cards {
        width: 100%;
        flex-direction: column;
        gap: 20px;
    }

    .prices-card {
        width: 100%;
    }

    .prices-card-box {
        width: 100%;
    }
    .prices-plan-title {
        font-size: 24px;
    }
    .prices-plan-price {
        position: relative;
    }

    /* 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;
    }

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

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

    /* Contacts Section */
    .frame-contacts {
        width: 100%;
        flex-direction: column;
        gap: 40px;
        padding: 0 20px;
    }

    .contacts2 {
        width: 100%;
    }

    .contacts-title-text {
        text-align: center;
        font-size: 43px;
    }

    .contact-info {
        flex-direction: row;
    }

    .frame-contact-form {
        left: 50%;
        transform: translateX(-50%);
    }

    .form-contacts {
        width: 100%;
    }

    .button-sent-message {
        width: 100%;
    }

    /* Footer */
    .frame-footer {
        width: 100%;
        padding-top: 150px;
        position: relative;
    }

    .frame-bottom-download-box {
        width: calc(100% - 40px);
        padding: 30px;
        height: auto;
        top: -120px;
    }

    .text11 {
        width: 90%;
        height: auto;
        gap: 20px;
    }

    .div55 {
        font-size: 20px;
    }

    .just-do-fit4 {
        font-size: 28px;
    }

    .crm-just-do-fit2 {
        font-size: 16px;
    }

    .frame-footer-items {
        width: 100%;
        padding: 0 20px;
        box-sizing: border-box;
        position: static;
        margin-top: 120px;
        transform: none;
    }

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

    .frame-input-text,
    .frame-input-area {
        width: 100%;
    }

    .privacy {
        width: 100%;
    }

    .privacy-text,
    .privacy-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,
    .prices-modal-container {
        width: 95%;
        max-height: 80vh;
    }

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

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

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

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

    .prices-features-cards {
        flex-direction: column;
    }

    .prices-feature-card {
        width: 100%;
    }
}

/* Adjustments for landscape orientation */
/*@media (max-width: 860) and (orientation: landscape) {*/
/*    .hero-section {*/
/*        padding-top: 100px;*/
/*    }*/

/*    .hero-section-box {*/
/*        flex-direction: row;*/
/*        align-items: center;*/
/*    }*/

/*    .text-button {*/
/*        width: 50%;*/
/*        text-align: left;*/
/*        align-items: flex-start;*/
/*        margin-top: 0; !* Reset margin in landscape mode *!*/
/*    }*/

/*    .hero-section-images {*/
/*        width: 50%;*/
/*        margin-top: 0;*/
/*        display: none;*/
/*    }*/
/*}*/