:root {
    --primary-50: #fbf8ff;
    --primary-100: #e0cffc;
    --primary-200: #c29ffa;
    --primary-300: #a370f7;
    --primary-400: #8540f5;
    --primary-500: #6610f2;
    --primary-600: #520dc2;
    --primary-700: #3d0a91;
    --primary-800: #290661;
    --primary-900: #140330;
    --primary: var(--primary-600);
    --bs-modal-margin: 2rem !important;
    --bs-danger-rgb: 223, 32, 32;
    --bs-success-rgb: 0, 153, 51;
}

html, body {
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
}


.custom-tooltip {
  --bs-tooltip-bg: var(--primary);
  --bs-tooltip-color: var(--bs-white);
}

.container {
    --bs-gutter-x: 2rem;
}

.main-title {
    font-size: calc(1.375rem + 1.5vw) !important;
    margin-bottom: 0 !important;
}

.page-title {
    color: var(--primary);
    margin-bottom: 3rem;
}

h1, .h1 {
    font-size: calc(1.325rem + .9vw) !important;
}

h2, .h2 {
    font-size: calc(1.275rem + .3vw) !important;
}

h3, .h3 {
    font-size: 1.25rem !important;
}

a {
    text-decoration: none;
    cursor: pointer;
    color: var(--primary);
    font-weight: 500 !important;

    &:hover {
        color: var(--primary-700);
    }
}

.fw-bold, strong, b, th {
    font-weight: 500 !important;
}

.modal-close-btn {
    position: absolute;
    top: -19px;
    right: -19px;
    display: flex;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    z-index: 4;
}

.text-primary {
    color: var(--primary) !important;
}

.accordion {
    --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem var(--primary-200);
    --bs-accordion-active-bg: var(--bs-white);
}

.form-control:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 .25rem var(--primary-100);
}

.plan-name {
    font-weight: 500;
    text-align: center;
    color: var(--bs-secondary);
    font-size: 2rem;
}

.price-container {
    display: flex;
    align-items: baseline;
    justify-content: center;
    margin-bottom: 2rem;

    & p {
        margin-bottom: 0;
    }
}

.bg-primary {
    background-color: var(--primary) !important;
}

.bg-primary-light {
    background: var(--primary-50) !important;
}

.bg-orange {
    background-color: var(--bs-orange) !important;
}

.text-bg-orange {
    background-color: var(--bs-orange) !important;
}

.btn {
    border-radius: 50rem !important;
}

.btn-primary {
    background-color: var(--primary) !important;
    color: white !important;
    border: 1px solid var(--primary-700) !important;

    &:hover {
        background-color: var(--primary-700) !important;
        border: 1px solid var(--primary-800) !important;
    }
}

.btn-outline-primary {
    background-color: var(--primary-100) !important;
    color: var(--primary) !important;
    border: 1px solid var(--primary) !important;

    &:hover {
        background-color: var(--primary-200) !important;
        color: var(--primary-800) !important;
        border: 1px solid var(--primary-700) !important;
    }
}

.btn-lang {
    display: inline-block;
    border-radius: var(--bs-border-radius);
    padding: .35rem;
    border: 1px solid var(--primary-100);
    color: white;
    font-weight: 600;
    font-size: small;
    line-height: 1;

    &:hover {
        color: var(--primary);
        background-color: var(--primary-100);
    }

    &:active {
        background-color: var(--primary-200) !important;
        color: var(--primary-800) !important;
        border-color: var(--primary-700);
    }
}

section {
    padding: 3rem 0;
}

.header {
    position: sticky;
    top: 0;
    z-index: 3;
    border-bottom: 1px solid var(--primary);
    box-shadow: none;
    transition: all .3s linear;

    &.show-border {
        border-color: var(--primary-700);
        box-shadow: var(--bs-box-shadow);
    }

    .navbar {
        display: flex;
        align-items: center;
        height: 80px;
        background-color: var(--primary);
        color: white;
    }

    .offcanvas {
        background-color: var(--bs-dark);
    }

    .navbar-toggler {
        border: 0 !important;
        box-shadow: none !important;
        padding: 0 0 0 1rem;
        font-size: 2rem;
    }

    .navbar-close {
        padding: 0 1rem;
        margin-right: -1rem;
        font-size: 2rem;
    }
}

.header-bottom {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--primary);
    color: white;
}

.wave-content {
    margin-top: -10px;
}

.month-year-switch {
    align-self: center;
    background-color: var(--bs-light);
    border-radius: 50rem;
    width: 320px;

    .nav-link {
        color: var(--primary);
        background-color: transparent;
    }

    .nav-link.active {
        color: white;
        background-color: var(--primary);
    }
}

.plan-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: white;
    box-shadow: var(--bs-box-shadow);
    border-radius: 1rem;
    padding: 1.5rem;

    &.primary {
        background-color: var(--primary);
        color: white !important;
    }
}

.plan-card ul {
    list-style-type: none;
    padding-left: 0;
    margin-left: 2rem;

    & li {
        position: relative;
        margin-bottom: .75rem;

        & span.bi {
            left: -2rem;
            position: absolute;
            text-align: center;
            width: 2rem;
            line-height: inherit;
            display: list-item;
            color: var(--primary);
        }
    }
}

.review-card {
    display: flex;
    flex-direction: column;
    height: 260px;
    align-items: center;
    justify-content: start;
    padding: 2rem;
    background-color: white;
    transition: all .3s ease-in;

    &:hover {
        box-shadow: var(--bs-box-shadow-lg) !important;
    }
}

.compatibility-table tr td, .compatibility-table tr th {
    white-space: nowrap;
}

.compatibility-table tr td:first-child, .compatibility-table tr th:first-child {
    position: sticky;
    left: -1px;
    box-shadow: 5px 0 6px -6px #00000030;
}

.footer {
    margin-top: auto;
    padding: 2rem 0;
    background-color: var(--primary);
}

.time-line {
    .nav {
        margin-right: 3rem;

        .vertical-line {
            position: absolute;
            width: 1px;
            height: calc(100% - 12px);
            top: 6px;
            background-color: var(--bs-gray-300);
            z-index: -1;
            left: 4px;
        }

        & a {
            display: flex;
            align-items: center;
            color: var(--bs-secondary);
            font-size: .8rem;
            margin-bottom: 1.5rem;
            transition: all .3s linear;

            .time-circle {
                display: inline-flex;
                width: 9px;
                height: 9px;
                background-color: white;
                border-radius: 50rem;
                border: 2px solid var(--bs-gray-300);
                margin-right: .5rem;
                transition: all .3s linear;
            }

            &:hover {
                color: var(--primary);

                .time-circle {
                    border-color: var(--primary);
                }
            }

            &.active {
                color: var(--primary);
                font-weight: 500;

                .time-circle {
                    border-color: var(--primary);
                    background-color: var(--primary);
                    animation: pulse-animation 2s infinite;
                }
            }

            &:last-child {
                margin-bottom: 0;
            }
        }
    }
}

@keyframes pulse-animation {
    0% {
        box-shadow: 0 0 0 0 var(--primary-300);
    }
    100% {
        box-shadow: 0 0 0 6px rgba(0, 0, 0, 0);
    }
}

/* lg */
@media (max-width: 991.98px) {
    .offcanvas-body {
        font-size: 1.5rem;

        .nav-item {
            margin-bottom: .75rem;
        }
    }

    .btn-lang {
        font-size: 1.25rem;
    }
    
    /* Dark language dropdown menu only in mobile hamburger menu */
    .offcanvas .dropdown-menu {
        background-color: #212529 !important;
        color: #ffffff !important;
    }
    
    .offcanvas .dropdown-item {
        color: #ffffff !important;
    }
    
    .offcanvas .dropdown-item:hover,
    .offcanvas .dropdown-item:focus {
        background-color: #495057 !important;
        color: #ffffff !important;
    }
}

/* sm */
@media (max-width: 575.98px) {
    .modal-dialog {
        margin: 1.3rem;
    }

    .offcanvas {
        --bs-offcanvas-width: 100%;
        --bs-offcanvas-border-color: var(--bs-dark);
    }

    .what-abo-link {
        font-size: 1rem !important;
    }

    .time-line {
        .nav {
            margin: 0 1rem;
        }

        .vertical-line {
            width: 2px !important;
            left: 8px !important;
        }

        .time-line-nav-txt {
            display: none;
        }

        .time-circle {
            width: 18px !important;
            height: 18px !important;
        }
    }
}

/* Make iframes inherit rounded corners from their parent container */
.ratio.rounded-2 iframe,
.rounded-2.ratio iframe {
    border-radius: var(--bs-border-radius) !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    overflow: hidden;
}