@media only screen and (max-width: 767px) {
    /* Hamburger Menu Styles */
    .hamburger-menu {
        display: flex!important;
        flex-direction: column;
        justify-content: space-between;
        width: 30px;
        height: 20px;
        cursor: pointer;
        z-index: 1003; /* Highest z-index for hamburger */
        position: relative;
    }
    
    .hamburger-menu span {
        display: block;
        width: 100%;
        height: 4px;
        background-color: #ffffff;
        transition: all 0.3s ease;
        margin: 2px 0;
    }

    /* Active state for hamburger (transforms into 'X') */
    .hamburger-menu.active span:nth-child(1) {
        transform: rotate(45deg) translate(6px, 6px); /* Adjusted for thickness */
    }

    .hamburger-menu.active span:nth-child(2) {
        opacity: 0;
    }

    .hamburger-menu.active span:nth-child(3) {
        transform: rotate(-45deg) translate(8px, -8px); /* Adjusted for thickness */
    }

    /* Navigation Menu Styles - Hidden by default */
    nav.top-menu {
        display: none; /* Hide menu by default on mobile */
        width: 100%;
        background-color: #fff;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
        padding: 10px 0;
        overflow-y: auto;
        max-height: calc(100vh - 60px);
        /* Ensure vertical layout and left alignment */
        flex-direction: column;
        align-items: flex-start;
    }

    /* Show menu when active */
    nav.top-menu.active {
        display: flex; /* Show menu when active */
        position: fixed !important;
        top: 60px !important;
        left: 0 !important;
        width: 100% !important;
        z-index: 1001 !important; /* Below hamburger and logo, above content */
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateZ(0) !important;
        -webkit-transform: translateZ(0); /* Safari fallback */
    }

    nav.top-menu a {
        font-size: 16px !important;
        color: #000 !important;
        text-decoration: none !important;
        display: block !important;
        padding: 10px !important;
        box-sizing: border-box !important;
        opacity: 1 !important;
        background-color: transparent !important;
        z-index: 1001 !important;
        position: relative !important;
        margin: 5px 15px !important;
        width: auto !important;
    }

    /* Container Padding */
    .container {
        padding-top: 60px;
    }

    /* Additional Fallbacks */
    nav.top-menu, nav.top-menu * {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }


/*** BASE TEMPLATE ***/
.content {
    margin-top: 20px;
}

.logo-link {
    margin: auto;
    width: 50%;
}

/* Logo Container */
.logo-container {
    top: 0;
    width: 100vw;
    z-index: 1002; /* Above menu, below hamburger */
    background-color: #000000;
    align-items: center;
    position: fixed;
}

/* Header Inner Layout */
.logo-container .header-inner {
    background-color: inherit;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 90%;
    padding: 10px;
}

.logo-container .logo-image {
    margin-top: 5px;
    max-height: 40px;
}

.logo-container .blue-button {
    padding: 8px 16px;
    font-size: 14px;
    margin: 0;
}



/* Blog Content Header Fix */
.blog-content .logo-container {
    position: fixed;
    width: 100vw;
    margin: 0;
    justify-content: space-between;
}

/* Body Reset */
body {
    margin: 0;
    padding: 0;
    width: 100%;
    overflow-x: hidden; /* Prevent horizontal scroll */
    -webkit-overflow-scrolling: touch; /* Improve mobile scrolling */
}

h1 {
    font-size: 1.5rem;
}

#page-content {
    width: 95%;
    margin: auto;
    max-width: 90%;
}

/***********/
/* ГЛАВНАЯ */
/***********/

.hero-cta-wrapper {
    padding: 0 16px;
    gap: 20px;
}


.reason-item {
    font-size: 18px
}

.hero-form {
    width: 80%;
    margin: 0px;
}


.hero-form p {
    font-size: 11px;
    text-align: center;
}

.index .full-width-image-container img {
    height:550px;
}

.email-input,
.hero-submit-btn {
    font-size: 15px;
    padding: 14px;
}

.hero-submit-btn.blue-button {
    width: 100%!important;
}

.reason-item {
    font-size: 15px;
}

.reason-icon {
    font-size: 20px;
}

.form-note {
    font-size: 11px;
}

.sticky-submit-btn.blue-button {
width: 100%!important; 
}

.stats, .methodology-group, .testimonial-container, .posts-list, .launches-container {
    max-width: 100%;
    width: 100%;
}

.full-width-image-container {
    width: 100vw;
    left: 50%;
    transform: translateX(-50%);
}

.full-width-image-container img {
    height: 50vw;
    width: auto !important;
    object-fit: cover;
}

.index-page-title {
    width: 100%;
    text-transform: uppercase;
    margin-top: 40px;
    margin-bottom: 20px;
}

.index-page-title h2 {
    font-size: 1.2em !important;
    padding: 8px 16px;
    font-weight: 500;
}

img {
    max-width: 100%;
    width: 90%;
    height: auto;
}




 /* === SECTION CONTAINER === */
.popular-goals-section {
    width: 95%!important;
    position: relative;
    overflow: visible; /* Allow arrows to go outside */
    margin: 20px 0 40px;
}

/* === CAROUSEL WRAPPER === */
.popular-goals-wrapper,
.popular-goals-wrapper-3 {
    display: flex;
    flex-wrap: nowrap;
    gap: 3%;
    padding: 0 10% 20px; /* Adjusted for centering first card */
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;

    /* Center snap points symmetrically */
    scroll-padding-left: 10%;
    scroll-padding-right: 10%;
}

/* Hide scrollbar */
.popular-goals-wrapper::-webkit-scrollbar,
.popular-goals-wrapper-3::-webkit-scrollbar {
    display: none;
}

/* === CARD === */
.popular-goal-card {
    flex: 0 0 80%;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,.1);
    display: flex;
    flex-direction: column;
    text-align: center;
    scroll-snap-align: center; /* REQUIRED */
}

/* === ARROWS – Fixed, Outside, On Edges === */
.carousel-arrows {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    align-items: center;
    pointer-events: none;
    z-index: 10;
    padding: 0 12px;
}

.carousel-arrow {
    pointer-events: auto;
    width: 50px;
    height: 50px;
    background: #007BFF;
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    font-weight: bold;
    color: #fff;
    transition: all .2s ease;
    user-select: none;
}


/* Arrow icons */
.carousel-arrow.left::before { 
    vertical-align: text-bottom;
    content: "‹"; }
.carousel-arrow.right::before { 
    vertical-align: text-bottom;
    content: "›"; }

/* Right arrow always sticks to right edge */
.carousel-arrow.right {
    margin-left: auto;
}

/* Fully hide inactive arrows */
.carousel-arrows.hide-left .left,
.carousel-arrows.hide-right .right {
    display: none !important;
}

/* === CARD CONTENT === */
.popular-goal-card img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.goal-title {
    font-size: 1em;
    margin: 10px 8px 5px;
    font-weight: bold;
    color: #000;
    text-transform: uppercase;
    line-height: 1.3;
}

.goal-time {
    margin: 0 8px 10px;
    font-weight: bold;
    color: #39c300;
    line-height: 1.3;
}

.popular-goal-card .blue-button {
    margin: 15px auto;
    padding: 10px 15px;
    font-size: 14px;
    min-width: 100px;
    background: #007BFF;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    display: inline-block;
}

.popular-goal-card .blue-button:hover {
    background: #0056b3;
}

    .popular-goals-wrapper .popular-goal-card:first-child {
    margin-left: 280%;
    }
    .popular-goals-wrapper .popular-goal-card:last-child {
    margin-right: 30%;
    }

    .popular-goals-wrapper-3 .popular-goal-card:first-child {
       margin-left: 195%;
    }
    .popular-goals-wrapper .popular-goal-card:last-child {
    margin-right: 30%;
    }

/* === ARROWS – Fixed, Outside, On Edges === */
.carousel-arrows {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    align-items: center;
    pointer-events: none;
    z-index: 10;
    padding: 0;
}

.carousel-arrow {
    pointer-events: auto;
    width: 40px;
    height: 40px;
    background: #007BFF;
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    font-weight: bold;
    color: #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,.3);
    transition: all .2s ease;
    user-select: none;
    position: relative;
}

/* Position arrows half outside */
.carousel-arrow.left {
    left: -20px;
}

.carousel-arrow.right {
    right: -20px;
}

/* Hover effect */
.carousel-arrow:hover {
    background: #0056b3;
}

/* Arrow icons */
.carousel-arrow.left::before { 
    align-items: baseline;
    content: "‹"; 
}
.carousel-arrow.right::before { 
    align-items: baseline;
    content: "›"; 
}

/* Right arrow always sticks to right edge */
.carousel-arrow.right {
    margin-left: auto;
}

/* Fully hide inactive arrows */
.carousel-arrows.hide-left .left,
.carousel-arrows.hide-right .right {
    display: none !important;
}

/* === CAROUSEL WRAPPER === */
.popular-goals-wrapper,
.popular-goals-wrapper-3 {
    display: flex;
    flex-wrap: nowrap;
    gap: 3%;
    padding: 0 0 20px; /* No side padding */
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}



.media-quote.quote2, .media-quote.quote3 {
    display: none;;
}

.media-quote.quote1 {
    width: 70%;
    margin: auto;
}

.stats-small-desktop {
    display: none;
}

.stats-small-mobile {
    display: block; /* Ensure mobile stats are visible */
    flex-direction: column; /* Stack items vertically */
    gap: 10px; /* Space between items */
    margin-bottom: 20px;
    width: 100%; /* Full width on mobile */
}

.index-images {
    width: 90% !important;
    border-radius: 10px;
}

.methodology-group {
    flex-direction: column;
}

.methodology-buttons {
    flex-direction: column;
    gap: 15px;
}

.methodology-button-block {
    width: 100%;
}

.methodology-button-block .blue-button {
    margin-right: 15px;
}

.methodology-item {
    flex-basis: 100% !important;
    width: 100%;
    margin-bottom: 20px;
    max-width: 100%;
}

.methodology-item a {
    width: 15%;
}

.methodology-item span {
    display: block;
    margin: 10px 0;
    font-size: 16px;
    touch-action: manipulation;
}

.methodology-item h3 {
    white-space: normal;
    overflow: visible;
    text-overflow: initial;
    width: 100%;
    line-height: 1.4;
}

.advantages-columns {
    flex-direction: column;
    flex-wrap: wrap;
    column-count: 1 !important;
}

.advantage-column {
    flex: 0 0 100%;
    width: 100%;
    margin-bottom: 15px;
    text-align: left;
    margin-bottom: 20px;
}

.advantage-column b {
    font-size: 1rem;
}

.myVideo {
    width: 90% !important;
}

.ot0k1vyhodVideo {
    width: 100% !important;
}

.how-it-works-container {
    flex-direction: column;
    gap: 15px;
    width: 100%!important;
}

.how-it-works-card {
    width: 90%;
    margin: 0 auto 15px;
}

.how-it-works-card img {
    width: 75px;
}

.comparison-table th,
.comparison-table td {
    font-size: 14px;
    padding: 10px;
}

.press-card {
    width: 100%;
}

.user-row img {
    width: 100%;
}

.stats-results {
    width: 30%;
}

.testimonial-container {
    column-count: 1;
}

.testimonial {
    width: 100%;
    margin-bottom: 20px;
}

.clickable-image {
    pointer-events: none;
    cursor: default;
}

.blog-content {
    width: 90%;
    margin: auto;
}

.blog-content iframe {
    width: 100%;
    height: auto;
}

.container .product-cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.container .product-card {
    width: 160px;
}

.container .product-card img {
    width: 100%;
    max-width: 100%;
    height: 120px;
    object-fit: cover;
}

/* Graph styles - full width underneath active launches table */
.payment-graph {
    width: 100% !important;
    max-width: 100% !important;
    display: block;
    margin: 20px auto 0;
    padding: 0 5px;
    box-sizing: border-box;
}

.payment-graph img {
    width: 100% !important;
    height: auto !important;
    display: block;
}

.key-activations-table {
    width: 100% !important; /* Explicitly set to viewport width */
    overflow-x: auto; /* Allow horizontal scroll if content overflows */
    display: block;
    margin: 20px 0;
    box-sizing: border-box;
    padding: 0; /* Remove any padding affecting width */
}

.key-activations-table table {
    width: 100% !important; /* Full width of the container */
    min-width: 100% !important; /* Ensure it doesn't collapse */
    table-layout: auto; /* Let content dictate column width */
    box-sizing: border-box;
}

.key-activations-table th,
.key-activations-table td {
    width: auto !important; /* Allow cells to expand */
    min-width: 0 !important; /* Prevent minimum width constraints */
    padding: 8px 4px !important; /* Adjust padding as needed */
    word-wrap: break-word !important; /* Enable multiline text */
    white-space: normal !important; /* Allow text wrapping */
    overflow: visible !important; /* Ensure content is visible */
    box-sizing: border-box; /* Include padding in width */
    text-align: left; /* Ensure content aligns properly */
}

/* Ensure no fixed widths override */
.key-activations-table th,
.key-activations-table td {
    max-width: none !important;
}

/* Dashboard table layout for mobile */
.renewals-table {
    width: 100%!important;
    display: inline-block;
    margin-bottom: 20px;
    padding: 0;
}

.active-launches-table {
    width: 100% !important;
    max-width: 100% !important;
    display: table;
    padding: 0;
    margin: 0 auto;
    box-sizing: border-box;
}

.active-launches-table table {
    width: 100% !important;
    min-width: 100% !important;
    table-layout: auto; /* Allows content to dictate column width */
    box-sizing: border-box;
}

.active-launches-table th,
.active-launches-table td {
    width: auto !important; /* Allow cells to expand */
    min-width: 0 !important; /* Prevent minimum width constraints */
    padding: 8px 4px !important; /* Keep padding, adjust if needed */
    word-wrap: break-word !important; /* Allow text to wrap */
    white-space: normal !important; /* Remove nowrap to allow wrapping */
    overflow: visible !important; /* Ensure content is visible */
    box-sizing: border-box; /* Include padding in width */
}

/* Ensure no fixed widths override */
.active-launches-table th,
.active-launches-table td {
    max-width: none !important;
}

.active-launches-table {
    width: 100%;
    vertical-align: top;   
    display: inline-grid;
    box-sizing: border-box;
}

.age-distribution-table,
.funnel-table {
    width: 100%; /* Slightly less than 50% to account for margins or padding */
    display: inline-block; /* Places divs side by side */
    vertical-align: top; /* Aligns the top of the divs */
    box-sizing: border-box; /* Includes padding and border in width calculation */
    padding: 10px; /* Optional: Adds some spacing */
}

/* Additional Fallbacks */
nav.top-menu, nav.top-menu * {
    -webkit-transform: translateZ(0); /* Force hardware acceleration */
    transform: translateZ(0);
}/*** Главная Страница ***/

.slogan h1 {
font-size: 1.2em;
}/* Desktop-specific styles to hide hamburger menu */


/**********************/
/* Grapsh Ot 0 k 1    */
/**********************/

.chart-wrapper {
    display: none; /* Hide desktop chart wrapper */
}

.charts-wrapper-mobile {
    display: block; /* Show mobile chart wrapper */
    width: 100%;
    margin-top: 0;
    padding-top: 0;
}

.charts-wrapper-mobile canvas {
    width: 100% !important;
    aspect-ratio: 4 / 3; /* Consistent aspect ratio for mobile */
    margin-bottom: 20px; /* Space between charts */
    display: block;
}

.nav-arrow {
    display: none;
}



/* Footer Styles */
.footer {
    width: 100%;
    max-width: 100vw; /* Ensures it doesn't exceed screen width */
    background-color: #000000; /* Optional: Add a background color */
    padding: 20px 0;
    margin-top: 40px; /* Space from content */
    box-sizing: border-box;
}

.footer-container {
    width: 90%; /* Matches header-inner width for consistency */
    max-width: 800px; /* Optional: Limit max width for readability */
    margin: 0 auto; /* Center the container */
    display: flex;
    flex-direction: column; /* Stack columns vertically */
    align-items: center; /* Center align items */
}

.footer-column {
    width: 100%; /* Full width of container */
    margin-bottom: 20px; /* Space between columns */
    text-align: center; /* Center text within each column */
}

.footer-column h4 {
    font-size: 1.2em;
    margin-bottom: 10px;
}

.footer-column ul {
    list-style: none;
    padding: 0;
}

.footer-column ul li {
    margin: 5px 0;
}

.footer-column p {
    margin: 10px 0 0;
    font-size: 0.9em;
    color: #ffffff;
}

.footer-column ul li a {
    color: #c3c3c3;
    text-decoration: none; /* No underline by default */
    font-size: 16px;
}

.footer-column ul li a:hover {
    text-decoration: none; /* No underline on hover */
    color: #8f8f8f; /* Change color on hover without underline */
}

/* Ensure footer stays at bottom but doesn't overflow */
body {
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.container {
    flex: 1 0 auto; /* Ensures content pushes footer down */
}

.footer {
    flex-shrink: 0; /* Prevents footer from shrinking */
}

/*************/
/* GOAL PAGE */
/*************/

.vkontakte-shorts iframe {
    width: 100%; /* Responsive width */
    max-width: 640px; /* Cap the width */
}



/****************/
/* PROFILE PAGE */
/****************/

        .profile-details-buttons {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            margin: 10px 0;
        }
        .profile-details-buttons button.profile-btn {
            padding: 10px 10px !important;
            margin: 0 5px !important; /* Reduced margin for tighter fit */
            vertical-align: middle; /* Align vertically */
        }

       .result-btn {
            width: 100%;
        }

        .new-cycle-btn {
            margin: 10px 0px 0px;
        }

        /* Padding Adjustments */
        .profile-details-container,
        .subscriptions-container,
        .finished-launches-container {
            padding-top: 0px !important;
            padding-bottom: 0px !important; /* Ensure no top or bottom padding */
        }

        .active-launches-container {
            padding: 0px !important;
        }

        /* Active Launches Layout */
        .active-launches-container ul li {
            display: block !important; /* Stack elements vertically */
            margin-bottom: 15px;
        }
        .active-launches-container li div {
            display: block; /* Ensure content stacks vertically */
            margin-bottom: 5px; /* Space between goal/cycle and progress bar */
        }
        .active-launches-container li .progress-bar-container {
            margin-bottom: 10px; /* Space between progress bar and button */
        }
        .active-launches-container li button.profile-btn.details-btn {
            margin: 0px !important;
            margin-top: 5px; /* Space above button */
            margin-bottom: 20px; /* Space below button */
            display: block; /* Ensure button is below progress bar */
            width: 100%; /* Full width for better mobile appearance */
            text-align: center; /* Center text in button */
        }

        .subscriptions-container li {
            display: block; /* Reset to block for vertical stacking */
            margin-bottom: 20px;
        }

        /* Telegram Block Responsiveness */
        .goal-group { width: 90%; }
        .goal-item { margin: 10px 0; }
    }

    #password-popup h3, #new-cycle-popup h3, #max-reps-popup h3 {
        margin-bottom: 20px;
    }

    #password-popup form div, #max-reps-popup form div {
        display: flex;
        align-items: center;
        margin-bottom: 15px;
    }

    #password-popup form label, #max-reps-popup form label {
        min-width: 80px;
        text-align: left;
        margin-right: 10px;
    }

    #password-popup form input, #max-reps-popup form input {
        flex: 0 0 250px;
        padding: 8px;
        box-sizing: border-box;
    }

    #password-popup form button, #max-reps-popup form button {
        margin: 0 5px;
        display: inline-block;
        padding: 10px 20px;
    }

    .popup {
        display: none;
    }

    .new-cycle-list {
        list-style: none;
        padding: 0;
    }

    .telegram-error, .profile-error {
        color: red;
        text-align: center;
        margin-top: 10px;
    }

    #loading-indicator {
        display: none;
    }

/**************/
/* CYCLE PAGE */
/**************/

    .goal-cycle-title {
        margin-top: 0px; 
    }


    .cycle-details-container,
    .training-instructions-container,
    .training-report-container {
        margin: 10px auto;
        padding-top: 0px;
        padding-bottom: 0px;
        width: 90%;
    }

    .cycle-details-container ul,
    .training-instructions-container ul,
    .training-report-container ul {
        padding: 0 5px;
    }

    .button-container {
        margin: 10px 0;
        flex-direction: column;
        display: ruby;
    }

    .profile-btn {
        margin: 5px 0;
    }

    .training-instructions-container li.exercise-block,
    .training-report-container li.report-block {
        margin-bottom: 15px;
        padding: 5px;
    }

    .exercise-report input[type="number"] {
        width: 50px;
        height: 35px;
        margin: 3px;
    }

    .exercise-report input[type="text"].weight-field {
        width: 50px;
        margin: 3px;
    }


    .rubber-color {
        width: 25px;
        height: 25px;
    }

    .rubber-input-container {
        max-width: 100%;
    }

    .commentary-section {
        max-width: 100%;
    }

    .training-report-container {
        margin-top: 10px;
        padding-top: 10px;
    }


/**********************/
/* RESULTS TABLE PAGE */
/**********************/

.results-container {
    text-align: center !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

.table-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    margin-left: 0 !important; /* Override the -100px offset */
    overflow-x: auto !important; /* Allow horizontal scroll if content still overflows after wrapping */
    display: block !important;
    text-align: left !important; /* Align table content left for better readability */
    box-sizing: border-box !important;
    padding: 0 5px !important; /* Minimal padding to avoid edge clipping */
}

.results-table {
    width: 100% !important;
    min-width: 0 !important; /* Remove the 1000px min-width constraint */
    table-layout: auto !important; /* Let content dictate column widths */
    border-collapse: collapse !important;
    box-sizing: border-box !important;
}

.results-table th,
.results-table td {
    padding: 6px 4px !important; /* Reduce padding for tighter fit */
    text-align: left !important;
    border-bottom: 1px solid #ddd !important;
    white-space: normal !important; /* Allow text to wrap */
    word-wrap: break-word !important; /* Force long words to break */
    overflow-wrap: break-word !important;
    hyphens: auto !important; /* Auto-hyphenate if needed */
    min-width: 0 !important;
    box-sizing: border-box !important;
    font-size: 14px !important; /* Slightly smaller font for mobile */
}

/* Specific column overrides for better mobile fit */
.results-table td:nth-child(2) { /* Цель column */
    white-space: normal !important;
    word-wrap: break-word !important;
    line-height: 1.2em !important;
    max-width: 150px !important; /* Prevent excessive width */
}

.results-table td:nth-child(7) { /* Дата начала column */
    min-width: 80px !important;
    max-width: 100px !important;
    white-space: nowrap !important; /* Keep dates nowrap if possible */
}

/* Filter form adjustments to center and fit */
.filter-form {
    display: block !important;
    text-align: center !important;
    margin: 0 auto 20px auto !important;
    width: 100% !important;
    max-width: 90% !important;
    box-sizing: border-box !important;
}

.filter-form select,
.filter-form button {
    width: 100% !important; /* Full width for touch-friendliness */
    margin: 5px 0 !important;
    box-sizing: border-box !important;
}

@media (max-width: 480px) {
    .profile-btn {
        font-size: 14px;
        padding: 8px 15px;
    }

    .exercise-report label {
        font-size: 16px;
    }

    .exercise-report input[type="number"] {
        width: 45px;
        height: 30px;
    }

    .exercise-report input[type="text"].weight-field {
        width: 45px;
    }


    .rubber-color {
        width: 20px;
        height: 20px;
    }

    /*********************/
    /* SUBSCRIPTION PAGE */
    /*********************/

    .subscription-page .payment-option {
        padding: 10px;
        height: auto;
    }

    .subscription-page #selected-goals .label {
        letter-spacing: -1px;
        font-size: 15px;
    }

    .subscription-page #selected-goals .dots {
        font-size: 15px;
    }

    .subscription-page #selected-goals .price {
        font-size: 15px;
    }

    .subscription-page #promocode-block {
    display: block;
    margin-left: 0px;
    margin-right: 0px;
    }

    .subscription-page #promocode-block .index-page-title {
        width: 95%;
    }

    .subscription-page .terms-container {
        max-width: 90%; /* Match the max-width of payment-options-container and index-page-title */
        margin: 0 auto; /* Center the container horizontally */
        padding: 20px; /* Maintain existing padding */
        box-sizing: border-box; /* Ensure padding is included in width calculation */
        width: 90%; /* Ensure it takes full available width up to max-width */
    }
    
    .subscription-page .promo-container {
        max-width: 90%; /* Match the max-width of payment-options-container and index-page-title */
        margin: 0 auto; /* Center the container horizontally */
        padding: 0; /* Remove default padding to match terms-container's inner padding */
        box-sizing: border-box; /* Ensure padding is included in width calculation */
        width: 90%; /* Ensure it takes full available width up to max-width */
        display: flex; /* Preserve flex behavior for input and button */
        gap: 10px; /* Maintain existing gap between input and button */
        align-items: center; /* Maintain vertical alignment */
    }

    .subscription-page #subscription-form .consent {
        display: inline-block;
    }

}