/* Basic Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Container */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 0.5em;
}

/* 12-Column Grid */
.row {
    display: flex;
    flex-wrap: wrap;
    margin-left: -0.5em;
    margin-right: -0.5em;
}

[class*='col-'] {
    padding-left: 1em;
    padding-right: 1em;
    flex-grow: 1; /* Allows the column to grow */
    flex-shrink: 0; /* Prevents the column from shrinking below its flex-basis */
    flex-basis: 0;  /* Distributes available space equally */
    min-width: 0;   /* Prevents overflowing content */
    max-width: 100%; /* Ensures columns don't exceed the container's width */
    box-sizing: border-box; /* Ensures padding and borders are included in width */
    word-wrap: break-word;  /* Wrap long text to prevent overflow */
}

/* Column Widths (Now with max-width set) */
.col-1 { flex-basis: 8.33%; max-width: 8.33%; }
.col-2 { flex-basis: 16.66%; max-width: 16.66%; }
.col-3 { flex-basis: 25%; max-width: 25%; }
.col-4 { flex-basis: 33.33%; max-width: 33.33%; }
.col-5 { flex-basis: 41.66%; max-width: 41.66%; }
.col-6 { flex-basis: 50%; max-width: 50%; }
.col-7 { flex-basis: 58.33%; max-width: 58.33%; }
.col-8 { flex-basis: 66.66%; max-width: 66.66%; }
.col-9 { flex-basis: 75%; max-width: 75%; }
.col-10 { flex-basis: 83.33%; max-width: 83.33%; }
.col-11 { flex-basis: 91.66%; max-width: 91.66%; }
.col-12 { flex-basis: 100%; max-width: 100%; }

/* Media Queries for Responsiveness */
@media (min-width: 1920px) {
    .container {
        max-width: 1600px;
    }
}

@media (min-width: 1440px) {
    html body {
        font-size: 17px;
    }
    .container {
        max-width: 1360px;
    }
}

@media (max-width: 1200px) {
    html body {
        font-size: 16px;
    }
    .container {
        max-width: 960px;
    }
}

@media (max-width: 992px) {
    html body {
        font-size: 15px;
    }
    .container {
        max-width: 100%;
    }
}

@media (max-width: 768px) {
    html body {
        font-size: 14px;
    }
    .container {
        max-width: 100%;
    }
    .hideOnMobile {
        display: none !important;
    }
    .showOnMobile {
        display: block !important;
    }
    /* Stack columns for smaller screens */
    [class*='col-'] {
        flex-basis: 100%;
        max-width: 100%;
    }

    .footer p span {
        display: block !important;
        margin-bottom: 16px !important;
    }
}

@media (max-width: 576px) {
    html body {
        font-size: 14px;
    }
    html body.app {
        font-size: 15px !important;
    }
    html body.app h2 {
        font-size: 2.2em !important;
    }
    h1 {
        font-size: 3em !important;
    }
    body .container.body {
        margin-top: 80px;
    }
    .container {
        max-width: 100%;
    }
    body .illustration-image {
        max-width: 90% !important;
        max-height: 300px !important;
    }
    body .logo img {
        height: 33px;
    }
    .showOnMobile {
        display: block !important;
    }
    .footer-links {
        text-align: center;
    }
    .hideOnMobile {
        display: none;
    }
    .container.custom-layout {
        max-width: 92% !important;
    }
    .footer p span {
        display: block !important;
        margin-bottom: 16px !important;
    }
    .subscription-card .col-7 {
        margin-bottom: 0 !important;
    }
    .subscription-card .col-4 {
        margin-bottom: 0 !important;
    }
    .bottom-gap {
        margin-bottom: 2rem;
    }
    .spacing-1 {
        padding: 2.6rem !important;
    }
    html .border-large {
        border-radius: 3em;
    }
    body .modal-content {
        padding-left: 1em !important;
        padding-top: 6em !important;
        padding-bottom: 3em !important;
        padding-right: 1em !important;
    }
    body [class*='col-'] {
        padding-left: 0.5em;
        padding-right: 0.5em;
        flex-basis: 100%;
        max-width: 100%;
    }
    html body .back-button {
        width: 54px;
        height: 54px;
        padding: 16px;
        margin-bottom: 2em;
    }
    html body .back-button img {
    display: inline-block;
    height: 100%;
    }
    html body .support-header {
        padding-left: 2em !important;
        padding-right: 2em !important;
    }
    body .cookie-banner {
        left: 8px;
        right: 8px;
        transform: none;
      }
    body .cookie-banner .banner-content {
        max-width: 100% !important;
    }
    body .cookie-consent-actions .btn {
        display: block;
        margin-top: 1em;
        margin-bottom: 0;
        width: 100%;
    }
    body .cookie-consent-actions .spacer-m-horizontal {
        display: none;
    }
}

/* New Utility Classes for Vertical Alignment */
.align-top {
    align-items: flex-start;
}

.align-middle {
    align-items: center;
}

.align-bottom {
    align-items: flex-end;
}

/* Utility Classes for Alignment */
.justify-center {
    justify-content: center;
}

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

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

.align-center {
    align-items: center;
}

.align-start {
    align-items: flex-start;
}

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