/* General styles */
body {
    font-size: large;
    font-family: 'Roboto', sans-serif;
    margin: 0;
    padding: 0;
    width: 100%;
    overflow-x: hidden; /* Prevent horizontal scrolling */
}

ul {
    text-align: left;
}

/* Reset default margins for h3 */
h3 {
    margin: 0;
}

.hamburger-menu  {
    display: none;
}

.logo-container {
    position: fixed;
    top: 0;
    width: 100vw; /* Fixed width */
    background-color: #000000;
    z-index: 1000;
}

.logo-container .header-inner {
    left: 0; /* Stretch to left edge */
    right: 0; /* Stretch to right edge */
    margin: 0 auto; /* Center the 1000px width */
    background-color: inherit;
    display: flex;
    justify-content: space-between; /* Logo on left, button on right */
    align-items: center; /* Vertically center content */
    width: 1000px;
    height: 60px;
}

.logo-container .logo-image {
    width: 200px; /* Match original inline style */
    height: auto;
    padding-top: 10px;
}

.container {
    padding-top: 60px; /* Adjust for header height */
}

/* Container setup */
.container {
    position: relative;
    width: 100%;
    overflow: hidden;
}

#page-content {
    position: relative;
    max-width: 800px;
    width: 100%;
    box-sizing: border-box;
    margin: 0 auto;
    text-align: center;
    display: block;
}

/* Ensure all direct children of #page-content are constrained */
#page-content > * {
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
}

.page-content p {
    text-align: left;
}





/*********************/
/*** BASE TEMPLATE ***/
/*********************/

/* Navigation Menu Styles */

    .header-inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px 20px;
        flex-wrap: wrap;
    }

    .logo-link {
        flex-shrink: 0;
    }

    nav.top-menu {
        margin-left: auto;
        padding: 10px;
    }

    nav.top-menu ul {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        justify-content: center;
        gap: 20px;
    }

    nav.top-menu li {
        margin: 0;
    }

    nav.top-menu a {
        color: #ffffff; /* Черный текст */
        text-decoration: none;
        padding: 5px;
        font-size: 14px;
        text-transform: uppercase;
        transition: all 0.3s ease;
        border-radius: 5px;
    }

    nav.top-menu a:hover {
        background-color: #f0f0f0;
        border-radius: 5px;
    }

    /* Синяя кнопка "Цель" */
    nav.top-menu a.blue-background {
        background-color: #007BFF;
        color: white !important;
        border-radius: 5px;
        padding: 8px 16px;
    }

    nav.top-menu a.blue-background:hover {
        background-color: #0056b3;
    }

    /* Кнопка "Начать" и профиль — в правом углу */
    .header-inner > div:last-child {
        display: flex;
        align-items: center;
        gap: 15px;
        flex-shrink: 0;
    }


.content {
max-width: 800px;
text-align: center; 
font-size: medium; 
font-family: Roboto; 
margin: auto; 
margin-top: 20px;
}

/* Full width image setup */
.full-width-image-container {
    width: 100vw!important;
    max-width: 100vw!important;
    background-color: #fff;
    overflow: hidden;
    position: relative; /* Allow for positioning adjustments */
    left: 50%; /* Start from the center of the parent */
    transform: translateX(-50%); /* Center the container relative to the viewport */
    box-sizing: border-box;
    margin: 0; /* Remove any default margins */

}

.full-width-image-container img {
    width: 100vw!important;
    max-width: 100vw!important;
    height: auto;
    display: block;
    filter: brightness(0.7);
}

.slogan {
    background-color: #000;
    color: white;
    padding: 1px;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw!important;
    max-width: 100vw!important;
}

.slogan h1 {
    font-weight: 500;
}

/* Style for title containers */
.index-page-title {
    max-width: 100%;
    width: 100%;
    border-radius: 10px;
    margin: 20px 0; /* Add some spacing above and below */
    margin-top: 50px;
}

/* Apply the blue background to the h2 inside index-page-title */
.index-page-title h2 {
    color: white !important;
    background: #000000 !important;
    border-radius: 5px !important;
    padding: 10px 20px !important; /* Add padding to make the background more visible */
    margin: 0 !important; /* Remove default margins to ensure the background fits properly */
    margin-top: 50px;
    font-weight: 500;
    text-transform: uppercase;
}

/* Ensure other containers don't exceed 800px */
.stats, .methodology-group, .testimonial-container, .posts-list, .launches-container {
    max-width: 100%;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}

h3.group-title {
    text-align: center;
    font-weight: bold;
    text-transform: uppercase;
}

.methodology-group {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
    max-width: 100%;
    width: 100%;
}

.methodology-item {
    width: calc(50% - 20px);
    gap: 10px;
    margin: 15px 0px;
}

.methodology-item img {
    width: 90%;
    height: auto;
    border-radius: 10px;
    margin: 10px auto;
}

.methodology-item a {
    display: inline-block;
    padding: 10px 10px;
    text-decoration: none;
    color: white;
    background-color: #007BFF; /* #16da00; */
    border-radius: 5px;
    transition: background-color 0.3s ease;
    text-align: center;
    margin: 0 auto;
}

.methodology-item a:hover {
    background-color: #011bab; /* #13ab01; */
    text-decoration: none;
}

/* Highly specific rule for grey buttons with unique context */
#page-content .methodology-group .methodology-item a.grey-button {
    background-color: #a0a0a0 !important;
    color: #666666 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

#page-content .methodology-group .methodology-item a.grey-button:hover {
    background-color: #a0a0a0 !important;
}

/* Optional: Styling for span elements (adjusted for better support) */
#page-content .methodology-group .methodology-item span.grey-button {
    display: block;
    padding: 10px 0;
    text-decoration: none;
    pointer-events: none;
}

#page-content .methodology-group .methodology-item span.grey-button:hover {
    background-color: #a0a0a0;
}

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

/* HERO CTA: центрированный блок */
.hero-cta-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    max-width: 1000px;
    display: flex;
    flex-direction: column;        /* ВЕРТИКАЛЬНО ПО УМОЛЧАНИЮ */
    align-items: center;            /* ВСЁ ПО ЦЕНТРУ */
    gap: 28px;
    padding: 0 20px;
    box-sizing: border-box;
    z-index: 10;
    pointer-events: none;
}

.hero-cta-wrapper > * {
    pointer-events: auto;
}

/* Форма: центрированная, с blur */
.hero-form {
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    padding: 24px;
    border: 4px solid rgba(255, 255, 255, 0.8);
    border-radius: 18px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
    text-align: center;
    max-width: 380px;               /* Ограничение ширины */
    margin: 0 auto;                 /* Центрирование */
}


.hero-form p {
    color: white;
}

/* Форма — растянута на всю ширину */
.email-subscribe-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}

email-subscribe-form p {
    text-align: center;
    font-size: 11px;
}

/* Поле ввода */
.email-input {
    padding: 16px;
    font-size: 16px;
    border: 2px solid rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 1);
    color: black;
    border-radius: 12px;
    outline: none;
    transition: all 0.3s ease;
    width: 100%;
    box-sizing: border-box;
}

.email-input::placeholder {
    color: rgba(0, 0, 0, 0.8);
}

.email-input:focus {
    border-color: white;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.2);
}

/* Кнопка */
.hero-submit-btn {
    padding: 16px;
    font-size: 17px;
    font-weight: 600;
    background: #007BFF;
    color: white;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    width: 100%;
    box-sizing: border-box;
}

.hero-submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 123, 255, 0.4);
    background: #0056b3;
}

/* Текст причин */
.hero-reasons {
    color: white;
    text-align: center;
    max-width: 400px;
}

.reason-item {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    font-size: 17px;
    line-height: 1.4;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.reason-icon {
    font-size: 24px;
    margin-right: 12px;
    flex-shrink: 0;
}

.reason-item p {
    margin: 0;
}

/* Статистика под формой */
.form-note {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.9);
    margin-top: 10px;
    font-style: italic;
}

/* === ДЕСКТОП: ГОРИЗОНТАЛЬНО === */
@media (min-width: 769px) {
    .hero-cta-wrapper {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .hero-form {
        order: 2;
        max-width: 360px;
    }

    .hero-reasons {
        order: 1;
        text-align: left;
        max-width: min-content;
        margin-left: auto;
    }

    .reason-item {
        justify-content: flex-start;
    }
}



/* ------------------------------------------------------------------
   STICKY EMAIL BAR – идеальное выравнивание с hero-кнопкой
   ------------------------------------------------------------------ */
.sticky-email-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 14px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    z-index: 1000;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateY(100%);
    max-height: 100vh;
    overflow: hidden;
}

.sticky-email-bar.visible {
    transform: translateY(0);
    background: black;
}

/* Форма: поле + кнопка на одной линии */
.sticky-email-form {
    display: flex;
    gap: 12px;
    width: 960px;
 
}

/* ПОЛЕ EMAIL: 100% ширины - кнопка - gap */
.sticky-email-input {
    flex: 1;
    min-width: 0; /* Важно: позволяет сжатие */
    padding: 0 18px;
    font-size: 16px;
    font-family: inherit;
    background: white;
    color: #000;
    border: 2px solid rgba(0, 0, 0, 0.15);
    border-radius: 12px;
    outline: none;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
}

.sticky-email-input::placeholder {
    color: #888;
    font-style: normal;
}

.sticky-email-input:focus {
    border-color: #007BFF;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.2);
}

/* КНОПКА: ТОЧНО КАК В HERO */
.sticky-submit-btn.blue-button {
    padding: 10px;
    font-size: 16px;
    font-weight: 500;
    background: #007BFF;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 220px; /* Как в hero */
    box-sizing: border-box;
    margin: 0px!important;
}

.sticky-submit-btn:hover {
    background: #0056b3;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 123, 255, 0.4);
}

/* Мобильная версия */
@media (max-width: 640px) {
    .sticky-email-form {
        flex-direction: column;
        width: 100%;
    }
    .sticky-email-input {
        width: 100%;
        padding:10px;
    }
    .sticky-submit-btn {
        min-width: auto;
        width: 100%!important;
    }

}

/* Примечание */
.sticky-note {
    margin: 0;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.9);
    font-style: italic;
    text-align: center;
    max-width: 560px;
}


/* ---------- AS SEEN ON ---------- */
.as-seen-on {
    text-align: center;
    padding: 20px 0;
    background: #fff;     
    width: 100vw !important;
    max-width: 100vw !important;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    display: block;
}
.as-seen-on__title {
    font-size: 0.85rem;
    color: #777;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 12px;
}
.as-seen-on__logos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 32px;                       /* space between logos */
    align-items: center;
}
.as-seen-on__logo {
    height: 32px;                    /* fixed height */
    width: auto;                     /* keep proportion */
    object-fit: contain;
    filter: grayscale(100%);        /* optional: make them grey */
    transition: filter .2s;
}
.as-seen-on__logo:hover {
    filter: grayscale(0%);
}

/* --------------------------------------------------------------
   MEDIA QUOTES – FULL-WIDTH, 3 blocks (like photoai.com)
   -------------------------------------------------------------- */
   .media-quotes {
    width: 100vw !important;
    max-width: 100vw !important;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    padding: 20px 0;
    text-align: center;
    box-sizing: border-box;

}

.media-quotes__inner {
    max-width: 800px;                    /* same as page content */
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    gap: 40px;
    display: ruby;
}

/* Individual quote */
.media-quote {
    background: #fff;
    border-radius: 16px;
    padding: 16px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
    position: relative;
    font-style: normal;
    border-left: 6px solid #007BFF;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    width: 25%;
    margin: 0px;
}

.media-quote:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0,0,0,0.12);
}

.media-quote__text {
    text-align: center!important;
    line-height: 1.6;
    color: #222;
    margin: 0 0 16px 0;
    font-weight: 600;
}

.media-quote__text a {
    color: #007BFF;
    text-decoration: underline;
}

.media-quote__text a:hover {
    color: #0056b3;
}

/* Source */
.media-quote__source {
    font-size: 0.95rem;
    color: #666;
    font-weight: 600;
    margin: 0;
}

.media-quote__source cite {
    font-style: normal;
    color: #007BFF;
}

/* CTA variant – different border color */
.media-quote--cta {
    border-left-color: #39b300;
    background: #f8fff8;
}

.media-quote--cta .media-quote__source cite {
    color: #39b300;
}





/* Styles for methodology buttons section */
.methodology-buttons {
    display: flex;
    flex-wrap: nowrap; /* Ensure items stay in a single row on desktop */
    justify-content: space-between; /* Distribute items evenly */
    width: 100%;
    gap: 3%; /* Add spacing between the blocks */
}

.methodology-button-block {
    width: 33%; /* Each block takes 1/3 of the container width */
    display: flex;
    align-items: center; /* Vertically center the button and text */
}

.methodology-button-block .blue-button {
    margin-right: 10px; /* Space between the button and the text */
}

/* Таблица разницы между алгоритмами и методиками */
.comparison-table {
    max-width: 1200px;
    margin: 0 auto 40px auto;
    padding: 0 20px;
    text-align: left;
}

.comparison-table table {
    width: 100%;
    border-collapse: collapse;
    background-color: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    overflow: hidden;
}

.comparison-table th,
.comparison-table td {
    padding: 15px;
    text-align: left;
    font-size: 16px;
    line-height: 1.5;
}

.comparison-table th {
    background-color: #000;
    color: #fff;
    font-weight: bold;
    text-align: center;
}

.comparison-table tr:hover {
    background-color: #f1f1f1;
}

/* Оформление статистики по участникам */
.stats {
    max-width: 100%;
    width: 100%;
    display: flex;
    gap: 20px;
    justify-content: center;
}

.stats-small-desktop {
    max-width: 100%;
    width: 100%;
    display: flex;
    gap: 20px;
    justify-content: center;
    margin-bottom: 20px;
    text-align: left;
}

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

/* New stats-results styling */
.stats-results {
    width: 15%;
}

.stats-results .big {
    font-size: 28px;
    font-weight: bold;
    color: #39b300;
}

.stats-results .large {
    font-size: 18px;
}

.stats-results .small {
    font-size: 16px;
}

.stats .big {
    font-size: 28px;
    font-weight: bold;
}

.stats .large {
    font-size: 18px;
}

.stats .small {
    font-size: 16px;
}

/* Stats font size */
.font-statistics {
    font-size: 12px;
}


/* ------------------------------------------------------------------
   FAQ SECTION – как на photoai.com
   ------------------------------------------------------------------ */
   .faq-section {
    max-width: 100%;
    width: 100%;
    text-align: center;
    text-decoration: none;
}

.faq-title {
    background-color: #000;
    color: white;
    padding: 12px 20px;
    border-radius: 8px;
    font-size: 20px;
    font-weight: 600;
    text-transform: uppercase;
    display: inline-block;
    margin-bottom: 30px;
}

.faq-list {
    max-width: 600px;
    margin: 0 auto;
    border-top: 1px solid #333;
}

.faq-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
    border-bottom: 1px solid #333;
    cursor: pointer;
    transition: background 0.2s ease;
}

.faq-item:hover {
    background-color: rgba(0, 0, 0, 0.03);
    text-decoration: none;
}

.faq-question {
    font-size: 17px;
    font-weight: 500;
    color: #000;
    text-align: left;
    flex: 1;
    padding-right: 20px;
    line-height: 1.4;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.faq-question:hover {
    text-decoration: none;
}

.faq-plus {
    font-size: 24px;
    font-weight: bold;
    color: #007BFF;
    flex-shrink: 0;
}

.faq-plus:hover {
    text-decoration: none;
}

/* Paragraph alignment */
#page-content p {
    text-align: left;
    margin: 0;
    max-width: 100%;
    width: 100%;
}

/* Style for the advantages section to display text in two columns */
.advantages-columns {
    column-count: 2; /* Split the text into 2 columns */
    column-gap: 5%; /* Gap between columns */
    column-width: 50%; /* Each column takes approximately 50% width */
    margin: 0;
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
    padding: 0px 20px 0px 20px;
}

/* Style for individual advantage columns */
.advantage-column {
    box-sizing: border-box;
    break-inside: avoid; /* Prevent column breaks inside a single advantage item */
    text-align: left; /* Center-align the entire column (for the title) */
    margin-bottom: 20px; /* Add spacing between advantage items */
}

/* Style for the bold title */
.advantage-column b {
    display: block;
    font-size: 20px;
    margin-bottom: 12px; /* Add gap between the title and the description text */
}

/* Style for the description text inside advantage-column */
.advantage-column {
    text-align: left; /* Align the description text to the left */
}

/* Ensure the description text (not inside <b>) is left-aligned */
.advantage-column:not(b) {
    text-align: left;
}

.myVideo {
    width: 80%!important;
    height: auto;
    display: block;
    margin: 0 auto;
    padding: 0;
    border-radius: 10px;
}

.ot0k1vyhodVideo {
    width: 100%!important;
    height: auto;
    display: block;
    margin: 0 auto;
    padding: 0;
}

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

/* VK video Shorts */
.vkontakte-shorts {
    width: auto
}

/* Ensure the container stacks items vertically */
.how-it-works-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px; /* Space between cards */
    width: 90%!important;
    max-width: 800px; /* Adjust as needed */
    margin: 0 auto; /* Center the container */
}

/* Style for each card */
.how-it-works-card {
    display: flex;
    align-items: center; /* Vertically center image and text */
    width: 100%;
    /*background-color: #ededed; /* Optional: background for cards */
    border-radius: 8px; /* Optional: rounded corners */
}

/* Style for images to be square */
.how-it-works-card img {
    width: 100px; /* Fixed width for square image */
    height: 100px; /* Fixed height for square image */
    object-fit: cover; /* Ensure image fits without distortion */
    margin-right: 20px; /* Space between image and text */
    border-radius: 4px; /* Optional: slight rounding for image */
}

/* Style for the description text */
.how-it-works-card p {
    flex: 1; /* Take remaining space */
    margin: 0;
    font-size: 16px;
    line-height: 1.5;
}

/* Style for the arrow connectors */
.arrow-connector {
    font-size: 24px;
    text-align: center;
    color: #333; /* Adjust color as needed */
}

/* Graph Ot 0 k 1 / iz 10 v 30 */

.chart-wrapper {
    position: relative;
    text-align: center;
    margin: 20px 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.chart-container {
    width: 85%;
    display: inline-block;
    vertical-align: middle;
    margin: 0 auto;
}

.chart-container canvas {
    aspect-ratio: 1; /* Default square, overridden by JS if needed */
    width: 100%;
    height: auto;
}

.nav-arrow {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #007BFF;
    padding: 10px;
    vertical-align: middle;
    margin: 0 10px;
}

.nav-arrow:hover {
    color: #0056b3;
}

.left-arrow {
    order: -1;
}

.right-arrow {
    order: 1;
}

.charts-wrapper-mobile {
    display: none;
    margin-top: 0;
    padding-top: 0;
}

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

/* Footer Styles */
.footer {
    background-color: #000;
    color: #fff;
    padding: 20px 0;
    width: 100%; /* Full width of the page */
    margin: 40px auto 0 auto; /* Center the footer content and add top margin */
    box-sizing: border-box;
}

.footer-container {
    display: flex;
    justify-content: space-between; /* Distribute columns evenly */
    align-items: flex-start; /* Vertically align items at the top */
    width: 1000px; /* Match header width (.header-inner) */
    margin: 0 auto; /* Center the container within the footer */
    padding: 0 15px;
}

.footer-column {
    flex: 1; /* Allow columns to grow and shrink equally */
    padding: 0 15px;
    text-align: left; /* Align content to the left */
    box-sizing: border-box;
    min-width: 0; /* Prevent overflow issues */
}

.footer-column h4 {
    margin-bottom: 10px;
    font-size: 16px;
    text-align: left; /* Align titles to the left */
}

.footer-column p {
    margin-bottom: 10px;
    text-align: left; /* Align paragraph text to the left */
}

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

.footer-column ul li {
    margin-bottom: 5px;
    text-align: left; /* Align list items to the left */
}

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

/***********************/
/* Press Cards Section */
/***********************/

.press {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

.press-card {
    width: 45%;
    background-color: #fff;
    border-radius: 15px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    overflow: hidden;
    text-align: center;
    padding: 15px;
    box-sizing: border-box;
    transition: transform 0.3s ease;
}

.press-card:hover {
    transform: translateY(-5px);
    text-decoration: none;
}

.press-card .press-square-img {
    width: 150px;
    height: 150px;
    object-fit: cover;
    border-radius: 15px;
    margin: 0 auto 15px;
    display: block;
}

.press-card h3 {
    font-size: 1.2em;
    margin: 10px 0;
    color: #000000;
    text-align: left;
    font-weight: 600;
}

.press-card p {
    font-size: 0.9em;
    color: #666;
    line-height: 1.5;
    margin-bottom: 10px;
}

.press-card a {
    text-decoration: none;
}

.press-card .date {
    text-align: left;
    font-size: 0.8em;
    color: #6b6b6b;
    margin-top: 10px;
}

/************/
/* Цели */
/************/

/* ---------- Популярные цели (3 в ряд, вертикальные карточки) ---------- */
.popular-goals-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    margin: 30px auto 40px;
    box-sizing: border-box;
    padding: 0 10px;
    padding-bottom: 10px;
}

@media (min-width: 768px) {
    .popular-goals-wrapper {
        width: 100vw!important; /* Full viewport width on desktop */
        max-width: 100vw!important; /* Ensure it doesn't exceed viewport */
        margin: 30px 0 40px; /* Remove auto margins to allow full width */
        padding: 0; /* Remove side padding to stretch to edges */
        display: flex;
        justify-content: center; /* Center the cards */
        align-items: center; /* Vertically center if needed */
        position: relative;
        left: 50%;
        transform: translateX(-50%);
    }

    .popular-goals-wrapper .popular-goal-card {
        width: calc(33.333% - 20px); /* Adjust card width for 3 cards with gap */
        max-width: 300px; /* Slightly increased max-width for better spacing */
        margin: 0 10px; /* Add horizontal margin for spacing between cards */
    }
}

.popular-goal-card {
    width: calc(33.333% - 14px);      /* 3 карточки в ряд */
    max-width: 280px;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,.1);
    display: flex;
    flex-direction: column;
    transition: transform .3s ease;
    text-align: center;
}

.popular-goal-card:hover {
    transform: translateY(-6px);
}

.popular-goal-card img {
    width: 100%;
    object-fit: cover;
}

.goal-title {
    margin: 12px 10px 6px;
    font-size: 18px;
    font-weight: bold;
    color: #000;
    text-transform: uppercase;
}

.goal-time {
    margin: 0 10px 12px;
    font-size: 16px;
    font-weight: bold;
    color: #39b300;
    text-align: center;
}

.popular-goal-card .blue-button {
    margin: 15px auto 15px!important;
    width: 80%;
}

@media (min-width: 768px) {
.carousel-arrows.hide-right, .carousel-arrows.hide-left {
    display: none;
}
}



/* Изображения статистики */
.user-row img {
    width: 49%;
    height: auto;
    margin: 0 auto;
    margin-bottom: 20px;
}

/* Отзывы */
.testimonial-container {
    column-count: 2; /* Two columns for desktop */
    column-gap: 20px; /* Space between columns */
    padding: 0 10px;
}

.testimonial {
    background-color: #effdde;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    transition: transform 0.2s;
    margin-bottom: 20px; /* Vertical spacing between testimonials */
    box-sizing: border-box;
    display: inline-block; /* Ensures proper stacking in columns */
    width: 100%; /* Full width within the column */
    break-inside: avoid; /* Prevents splitting across columns */
}

.testimonial:hover {
    transform: translateY(-5px);
}

.testimonial img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    float: left;
    margin-right: 15px;
}

.testimonial-content {
    overflow: hidden;
    text-align: left;
}

.name {
    font-size: 18px;
    font-weight: bold;
    color: #333;
    text-align: left;
    margin: 0;
}

.affiliation {
    font-size: 16px;
    color: #666;
    margin: 5px 0;
}

.stars {
    color: red;
    font-size: 16px;
    margin-bottom: 10px;
    text-align: left;
}

.text {
    font-size: 16px;
    color: #444;
    line-height: 1.5;
}

/* БЛОГ */
#page-content li {
    text-align: left;
}

#page-content ol li {
    text-align: left;
}

.posts-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 100%;
    width: 100%;
}

.card {
    width: 300px;
    margin: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    display: inline-block;
    vertical-align: top;
    background-color: #fff;
    text-align: center;
    padding: 10px;
}

.card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.card-title {
    padding: 10px;
    font-size: 16px;
    font-weight: bold;
}

.card-title a {
    text-decoration: none;
    color: #333;
}

.card-title a:hover {
    color: #000000;
}

/* Blue button styling */
.blue-button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #007BFF;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    font-size: 16px;
    text-align: center;
    margin: 10px 0;
    transition: background-color 0.3s ease;
    width: fit-content!important;
    margin: auto;
}

.blue-button:hover {
    background-color: #011bab;
    text-decoration: none;
}

/* Modal Styles */
.clickable-image {
    cursor: pointer;
}

.modal {
    display: none;
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.9); /* Modal backdrop remains dark */
}

.modal-content {
    margin: auto; /* Center vertically and horizontally */
    display: block;
    max-width: 80%; /* Limit modal image to 80% of viewport width */
    max-height: 80%; /* Limit modal image to 80% of viewport height */
    width: auto;
    height: auto;
    margin-top: 5%;
    background-color: rgba(0, 0, 0, 0.5); /* 50% transparent background for modal image */
    padding: 10px; /* Optional: Add padding */
    border-radius: 5px; /* Optional: For a nicer look */
}

.close {
    color: #fff;
    position: absolute;
    top: 15px;
    right: 35px;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
    z-index: 10001;
}

.close:hover,
.close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

/***********************/   
/* Блоги */
/***********************/

.blog-content {
    position: relative;
    max-width: 800px;
    width: 800px;
    box-sizing: border-box;
    margin: auto;
    text-align: center;
    display: block;
}

.blog-content p {
    text-align: left;
}

.blog-content .logo-container {
    position: fixed;
    width: 100%;
    margin: 0;
    justify-content: space-between; /* Consistent layout for blog pages */
}

.blog-content img {
    border-radius: 10px;
    width: 80%;
}

/***********************/   
/*** АДМИНКА ЗАПУСКИ ***/
/***********************/

.launches-container {
    margin: 0 auto;
    padding: 20px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    width: 100%;
    box-sizing: border-box;
    overflow-x: auto;
}

.launches-table {
    width: 100%;
    min-width: 100%;
    border-collapse: collapse;
}

.launches-table th,
.launches-table td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
    box-sizing: border-box;
}

.launches-table tr:nth-child(even) {
    background-color: #f9f9f9;
}

.progress-container {
    display: flex;
    align-items: center;
    gap: 5px;
}

.progress-container form {
    display: inline;
}

.progress-container button {
    padding: 2px 6px;
    font-size: 12px;
}

/***********************/   
/* Подвал */
/***********************/   

/* Make product card styles more specific to avoid conflicts */
/* Ensure product-cards layout is consistent across all viewport sizes */
.container .product-cards {
    display: flex;
    flex-wrap: wrap; /* Changed to wrap to allow cards to wrap naturally if they don't fit */
    justify-content: space-between; /* Distributes cards evenly with space between them */
    gap: 20px; /* Adds consistent spacing between cards */
    margin: 0 auto; /* Centers the container */
    max-width: 800px; /* Matches the max-width of the page content */
}

/* Style for individual product cards */
.container .product-card {
    width: calc(20% - 16px); /* Each card takes 20% of the container width minus gap adjustments */
    border-radius: 10px; /* Rounded corners for the card */
    overflow: hidden; /* Ensures content doesn't overflow the card */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Subtle shadow for depth */
    transition: transform 0.3s ease; /* Smooth hover animation */
    background-color: white; /* White background for the card */
    display: flex;
    flex-direction: column; /* Stacks image and title vertically */
}

/* Hover effect for product cards */
.container .product-card:hover {
    transform: translateY(-5px); /* Lifts the card slightly on hover */
}

/* Override generic img styles for product card images */
.container .product-card img {
    width: 100%; /* Ensures the image fills the card width */
    height: 120px; /* Fixed height for consistency */
    object-fit: cover; /* Ensures the image covers the area without distortion */
    max-width: 100%; /* Prevents the image from exceeding the card width */
    border-radius: 0; /* No rounded corners on the image itself */
}

/* Style for the card title */
.container .product-card .card-title {
    padding: 10px; /* Adds padding around the title */
    text-align: center; /* Centers the title text */
}

/* Style for links within the card */
.container .product-card a {
    text-decoration: none; /* Removes underline from links */
    color: #333; /* Dark gray color for the text */
    font-weight: bold; /* Makes the text bold */
    display: block; /* Ensures the link takes the full width of the title area */
}

/* Styles for Dashboard page */

/* General container styling */
.dashboard-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    font-family: Arial, sans-serif;
}

/* Expiring keys styling */
.launches-expiring-keys {
    margin-bottom: 30px;
}

.launches-expiring-keys ul {
    list-style: none;
    padding: 0;
}

.launches-expiring-keys li {
    padding: 8px 0;
    font-size: 16px;
    color: #333;
}

/* Table wrapper for responsiveness */
.table-wrapper {
    overflow-x: auto;
    margin-top: 20px;
    vertical-align: top; /* Ensure table content starts at the top */
    align-items: flex-start;
}

/* Table styling */
.dashboard-table {
    border-collapse: collapse;
    background-color: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Table caption */
.dashboard-table caption {
    font-size: 18px;
    font-weight: bold;
    padding: 10px;
    background-color: #f5f5f5;
    color: #333;
}

/* Table headers */
.dashboard-table th {
    background-color: #4a90e2;
    color: #fff;
    font-weight: 600;
    text-transform: uppercase;
    padding: 12px 16px;
    font-size: 14px;
    border-bottom: 2px solid #3a73b8;
}

/* Table cells */
.dashboard-table td {
    font-size: 16px;
    color: #333;
    border-bottom: 1px solid #ddd;
}

/* Specific column styling */
.methodology-column {
    text-align: left;
}

.numeric-column {
    text-align: right;
}

/* Zebra striping for rows */
.dashboard-table tbody tr:nth-child(even) {
    background-color: #f9f9f9;
}

/* Hover effect on rows */
.dashboard-table tbody tr:hover {
    background-color: #e6f0fa;
    transition: background-color 0.3s ease;
}

/* Results table alternating row colors */
.row-even {
    background-color: #f9f9f9;
}

.row-odd {
    background-color: #e6f0fa;
}

/* Total row styling */
.dashboard-table tfoot tr.total-row {
    background-color: #f5f5f5;
    font-weight: bold;
    border-top: 2px solid #ddd;
}

.dashboard-table tfoot td {
    padding: 12px 16px;
    color: #000;
}

/* Dashboard links */
.dashboard-links {
    margin-top: 20px;
}

.dashboard-links a {
    display: inline-block;
    padding: 10px 20px;
    background-color: #4a90e2;
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
    font-weight: 600;
}

.dashboard-links a:hover {
    background-color: #3a73b8;
    transition: background-color 0.3s ease;
}

/* Dashboard table layout */
.renewals-table {
    width: 65%;
    display: inline-block;
    vertical-align: top;
    box-sizing: border-box;
}

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

.age-distribution-table,
.funnel-table {
    width: 49%; /* 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 */
}



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

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

.cycle-details-container {
    margin: 20px auto;
    padding-left: 15px;
}

.cycle-details-container ul,
.training-instructions-container ul,
.training-report-container ul {
    text-align: left;
    font-size: 16px;
    line-height: 1.6;
    list-style: none;
    padding: 0 10px;
}

.cycle-details-container li {
    margin-bottom: 10px;
    padding: 5px 0;
}

.button-container {
    text-align: center;
    margin: 20px 0;
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.training-instructions-container {
    margin: 20px auto;
    padding: 0px 15px;
}

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

.training-instructions-container ul li .report-block {
    margin-bottom: 50px;
}

.training-instructions-container li strong,
.training-report-container li strong {
    color: #000;
    font-weight: 600;
}

.training-instructions-container li h2,
.training-report-container li h2 {
    margin: 0 0 10px;
    font-size: 1.2em;
}

.training-instructions-container iframe,
.training-instructions-container img,
.training-instructions-container video,
.training-report-container .rubber-color {
    max-width: 100%;
    display: block;
    margin: 10px auto;
    aspect-ratio: 16/9;
    border-radius: 15px;
}

.training-report-container {
    max-width: 600px !important;
    margin: 20px auto;
    padding: 15px;
    background-color: #f0f0f0;
    border-radius: 15px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    display: none;
}

.training-report-container.active {
    display: block;
}

.training-report-container h2 {
    margin-top: 0;
    text-align: center;
}

#training-report-form {
    text-align: left;
    font-size: 16px;
    line-height: 1.6;
}

.commentary-section {
    margin-top: 15px;
    text-align: left;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.commentary-section label {
    display: block;
    margin-bottom: 5px;
}

.commentary-section textarea {
    width: 100%;
    resize: vertical;
    font-size: 16px;
    padding: 8px;
    border-radius: 5px;
    border: 1px solid #ccc;
    box-sizing: border-box;
}

.form-submit {
    text-align: center;
    margin-top: 15px;
}

.profile-btn {
    padding: 10px 20px;
    margin: 5px;
    background-color: #007BFF;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    min-width: 120px;
    display: inline-block;
}

.profile-btn:hover {
    background-color: #0056b3;
}

.exercise-report {
    margin-bottom: 20px;
    padding: 10px;
    border-radius: 5px;
}

.exercise-report label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    font-size: 18px;
}

.exercise-report input[type="number"] {
    width: 60px;
    height: 40px;
    padding: 5px;
    margin: 5px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box;
    background-color: #fff;
    text-align: center;
    vertical-align: middle;
}

.exercise-report input[type="number"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.exercise-report input[type="number"]::-webkit-inner-spin-button,
.exercise-report input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.exercise-report input[type="text"] {
font-size: 16px;
padding: 5px;
border-radius: 5px;
border: 1px solid #ccc;
}

.exercise-report input[type="text"].weight-field {
width: 60px;
margin: 5px;
text-align: center;
vertical-align: middle;
}

.exercise-report .additional-info {
font-weight: normal;
margin-top: 5px;
}

.rubber-input-container {
display: flex;
flex-wrap: wrap;
gap: 10px;
align-items: center;
margin-top: 5px;
max-width: 540px;
}

.rubber-input-group {
display: flex;
align-items: center;
gap: 5px;
}

.rubber-color {
width: 30px;
height: 30px;
border-radius: 5px;
display: inline-block;
vertical-align: middle;
}

.rubber-color.green { background-color: #008000; }
.rubber-color.purple { background-color: #800080; }
.rubber-color.red { background-color: #FF0000; }
.rubber-color.yellow { background-color: #FFFF00; }
.rubber-color.blue { background-color: #0000FF; }
.rubber-color.black { background-color: #000000; }
.rubber-color.orange { background-color: #FFA500; }

.report-date {
font-weight: normal;
color: #666;
}





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

.profile-details-container, 
.subscriptions-container, 
.active-launches-container, 
.finished-launches-container {
    background-color: #fff;
    border-radius: 10px;
    padding: 0px;
    margin-bottom: 30px;
}

.profile-details-container ul, 
.subscriptions-container ul, 
.active-launches-container ul, 
.finished-launches-container ul {
    list-style: none;
    padding: 0;
}

.profile-details-container li, 
.subscriptions-container li, 
.active-launches-container li, 
.finished-launches-container li {
    margin-bottom: 10px;
}

.profile-details-container li strong {
    color: #000;
}

a {
    color: #007BFF;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

.profile-btn {
    padding: 10px 20px;
    background-color: #007BFF;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    display: inline-block;
}

.profile-btn:hover {
    background-color: #0056b3;
}

.profile-btn:disabled {
    background-color: #cccccc;
    cursor: not-allowed;
}

.cancel-btn {
    background-color: #ff4d4d;
}

.cancel-btn:hover {
    background-color: #cc0000;
}

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

.editable-input, .editable-select {
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 5px;
    width: 100px;
}

.form-group {
    margin: 15px 0;
    text-align: left;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

.form-input {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box;
}

.form-buttons {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.popup {
    width: 400px !important;
    max-width: 400px !important;
    min-width: 300px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0,0,0,0.3);
    z-index: 1000;
    overflow: auto;
    display: none;
    text-align: center;
}

.popup[style*="display: block"] {
    display: block !important;
}

#overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999;
}

#overlay[style*="display: block"] {
    display: block !important;
}

.switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 20px;
    margin-left: 10px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ff4d4d;
    transition: 0.4s;
    border-radius: 20px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    transition: 0.4s;
    border-radius: 50%;
}

input:checked + .slider {
    background-color: #4CAF50;
}

input:checked + .slider:before {
    transform: translateX(20px);
}

/* Telegram Block Styles */
.goal-group { 
    max-width: 600px; 
    width: 100%; 
    margin: 0 auto; 
    box-sizing: border-box; 
    text-align: center; 
}
.goal-item { 
    display: block; 
    width: 100%; 
    margin: 15px 0; 
}
.goal-selection { 
    display: inline-block; 
    text-align: center; 
    width: auto; 
    margin: 0 auto; 
}
.goal-selection h3.group-title { 
    margin: 0 0 20px 0; 
    font-size: 18px; 
    text-align: center; 
}

.goal-group.blue-button { 
    background-color: #007BFF; 
    color: white; 
    padding: 10px 20px; 
    border: none; 
    border-radius: 5px; 
    cursor: pointer; 
    font-size: 16px; 
}
.blue-button:hover { 
    background-color: #0056b3; 
    text-decoration: none;
}
.goal-info { 
    display: none; 
}

/* Active Launches Styles */
.active-launches-container ul li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
}

.active-launches-container .cycle-info {
    flex-grow: 1;
    margin-right: 20px; /* More space between cycle info and buttons */
}

.active-launches-container .button-group {
    display: flex;
    justify-content: flex-end; /* Align buttons to the right */
    gap: 5px; /* Reduced space between buttons */
}

.active-launches-container .details-btn {
    margin: 0;
}

.active-launches-container .complete-btn {
    margin: 0;
    background-color: #28a745; /* Green when active */
}

.active-launches-container .complete-btn:disabled {
    background-color: #cccccc; /* Gray when disabled */
}






/*********************/
/* SUBSCRIPTION PAGE */
/*********************/
.subscription-page .payment-options-container {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
}

.subscription-page .payment-options {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 20px;
}

.subscription-page .payment-option {
    flex: 1;
    padding: 8px 15px;
    background-color: #fff;
    border: 2px solid #000;
    border-radius: 10px;
    transition: all 0.3s ease;
    cursor: pointer;
    box-sizing: border-box;
    margin: 5px 0;
    height: 40px; /* Match goal-option height */
}

.subscription-page .payment-option:hover {
    background-color: #e0e0e0;
    border-color: #000;
}

.subscription-page .payment-option.payment-option-selected {
    background-color: #007BFF;
    border-color: #007BFF;
    color: #fff;
}

.subscription-page .payment-option.payment-option-selected:hover {
    background-color: #0056b3;
    border-color: #0056b3;
}

.subscription-page .payment-details {
    text-align: left;
    font-size: 16px;
    line-height: 1.6;
}

.subscription-page .goal-options {
    display: block; /* Stack groups vertically */
    width: 100%;
}

.subscription-page .goal-group {
    max-width: 600px;
    width: 100%;
    margin: 0 auto 40px; /* Space between groups */
    box-sizing: border-box;
    text-align: center;
}

.subscription-page .goal-group .group-title {
    margin: 0 0 10px 0;
    font-size: 18px;
    text-align: center;
    width: 100%;
}

.subscription-page .goal-button {
    display: block; /* Stack buttons vertically */
    width: 100%;
    padding: 8px 15px;
    background-color: #fff;
    border: 2px solid #000;
    border-radius: 10px;
    transition: all 0.3s ease;
    cursor: pointer;
    box-sizing: border-box;
    margin: 5px 0;
    height: 40px; /* Consistent height */
    font-size: 16px;
    text-align: left;
}

.subscription-page .goal-button:hover {
    background-color: #e0e0e0;
    border-color: #000;
}

.subscription-page .goal-button.payment-option-selected {
    background-color: #007BFF;
    border-color: #007BFF;
    color: #fff;
}

.subscription-page .goal-button.payment-option-selected:hover {
    background-color: #0056b3;
    border-color: #0056b3;

}

.subscription-page .goal-button .price-monthly,
.subscription-page .goal-button .price-results {
    font-size: 14px;
    color: #000;
}

.subscription-page .goal-button.payment-option-selected .price-monthly,
.subscription-page .goal-button.payment-option-selected .price-results {
    color: #fff;
}

/* Remove checkbox-related styles since we're using buttons */
.subscription-page .goal-option,
.subscription-page .goal-item,
.subscription-page .goal-selection,
.subscription-page .goal-content,
.subscription-page .goal-option input[type="checkbox"],
.subscription-page .goal-option label {
    all: unset; /* Reset these styles as they are no longer needed */
}

.subscription-page .terms-container {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
}

.subscription-page .promo-container {
    display: flex;
    gap: 10px;
    align-items: center;
}

.subscription-page #promocode-input {
    flex: 1;
    padding: 10px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box;
    height: 40px; /* Match button height */
}

.subscription-page .blue-button {
    background-color: #007BFF;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
    height: 40px; /* Consistent height */
}

.subscription-page .blue-button:hover {
    background-color: #0056b3;
}

.subscription-page .error {
    color: red;
    text-align: center;
    margin-bottom: 20px;
    display: none;
}

.subscription-page .success {
    color: green;
    text-align: center;
    margin-bottom: 20px;
    display: none;
}

.subscription-page #subscription-form div {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20px;
}

.subscription-page #selected-goals {
    font-size: 20px;
    margin-bottom: 40px;
    width: 100%;
    box-sizing: border-box;
    text-transform: uppercase;
}

.subscription-page #selected-goals div {
    display: flex;
    justify-content: space-between; /* Stretch to full width */
    align-items: baseline; /* Align items vertically */
    margin: 5px 0;
    box-sizing: border-box;
    font-family: monospace; /* Monospace font */
    width: 100%; /* Ensure full width */
}

.subscription-page #selected-goals .label {
    flex-shrink: 0; /* Prevent label from shrinking */
}

.subscription-page #selected-goals .dots {
    flex-grow: 1; /* Allow dots to fill space */
    text-align: center; /* Center dots visually */
    white-space: nowrap; /* Keep dots on one line */
    overflow: hidden; /* Prevent overflow */
}

.subscription-page #selected-goals .price {
    flex-shrink: 0; /* Prevent price from shrinking */
    min-width: 50px; /* Ensure price has space */
    text-align: right; /* Right-align price */
}

.subscription-page #selected-goals .total {
    font-weight: bold; /* Bold for total line */
    margin-top: 10px; /* Spacing before total */
}

.subscription-page #email {
    width: 70%;
    padding: 10px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 5px;
    margin-top: 10px;
}

.subscription-page #subscription-form label {
    display: flex;
    align-items: center;
    font-size: 16px;
}

.subscription-page #subscription-form input[type="checkbox"] {
    margin-right: 10px;
}

.subscription-page #subscription-form button:disabled {
    background-color: #cccccc;
    cursor: not-allowed;
}

.subscription-page #autorenewal-text {
    text-align: left;
    font-size: 16px;
    margin-top: 20px;
    display: none;
}

@media (min-width: 768px) {
    .subscription-page .goal-group .goal-button {
        width: 75%; /* Maintain original width for larger screens */
        margin-left: auto;
        margin-right: auto;
    }
}