/*  */
/* General Reset  */
/*  */

/* General css reset  */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

*::before,
*::after {
    box-sizing: border-box;
}


.hidden {
    display: none !important;
}

body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    scroll-behavior: smooth;

    background: var(--bg);
    color: var(--text);
}

h1 {
    margin-top: 40px;
    margin-bottom: 40px;
    font-size: 3rem;
    line-height: 4rem;
}

h2 {
    font-size: 2rem;
    line-height: 3rem;
    margin-bottom: 1rem;
}

h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

ul {
    list-style: none;
    padding-left: 0;
}

.bold {
    font-weight: bold;
}

p {
    line-height: 1.6rem;
}

.words-container {
    line-height: 1.75rem;
}

@media screen and (max-width: 768px) {
    h1 {
        font-size: 3rem;
        line-height: 3.5rem;
    }

    h2 {
        font-size: 2rem;
        line-height: 2.5rem;
    }

    h3 {
        font-size: 1.5rem;
    }
}

.twoRemTop {
    margin-top: 2rem;
}

.threeRemTop {
    margin-top: 3rem !important;
}

.mirroredImage {
    transform: rotateY(180deg);
}

.contentsectionOuter {
    margin-top: 3rem;
    margin-bottom: 3rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

a {
    text-decoration: none;
}

body {
    /* 3. Add accessible line-height */
    line-height: 1.5;
    /* 4. Improve text rendering */
    -webkit-font-smoothing: antialiased;
}

/* 5. Improve media defaults */
img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
}

/* 6. Inherit fonts for form controls */
input,
button,
textarea,
select {
    font: inherit;
}

/* 7. Avoid text overflows */
p,
h1,
h2,
h3,
h4,
h5,
h6 {
    overflow-wrap: break-word;
}

/* 8. Improve line wrapping */
p {
    text-wrap: pretty;
}

/*
    9. Create a root stacking context
  */
#root,
#__next {
    isolation: isolate;
}

/*  */
/*  */
/* HEADER STYLES */
/*  */
/*  */

:root {
    --max-width: 1600px;
    --transition-speed: 0.3s;
    --mobile-breakpoint: 1240px;
}


/* Base Header Styles */
.site-header {
    background-color: var(--bg);
    box-shadow: var(--header-shadow);
    position: sticky;
    top: 0;
    z-index: 1000;
    width: 100%;
    min-height: 60px;
    margin: 0;
    padding: 0;
}

.header-container {
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 1rem;
    height: 100%;
}

/* Mobile specific - force full width */
@media (max-width: 1350px) {
    .header-container {
        max-width: none;
        width: 100%;
        padding: 0.5rem 1rem;
    }
}

/* Logo Styles */
.logo-wrapper {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: var(--text);
    gap: 0.75rem;
    flex: 1;
    /* Take available space */
}

.logo-image {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
}

.logo-text {
    font-size: 1.25rem;
    font-weight: bold;
}

/* Mobile Menu Button */
.mobile-menu-btn {
    position: relative;
    z-index: 1001;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    width: 30px;
    height: 30px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
}

.hamburger-line {
    width: 100%;
    height: 3px;
    background-color: var(--text);
    border-radius: 2px;
    transition: all var(--transition-speed);
}

/* Hamburger Animation */
.mobile-menu-btn.active .hamburger-line:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
}

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

.mobile-menu-btn.active .hamburger-line:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
}

/* Navigation - Hidden on Mobile */
.main-nav {
    display: none;
}

/* Mobile Navigation Overlay */
.mobile-nav-overlay {
    display: none;
    position: fixed;
    top: 60px;
    /* Below header */
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg);
    z-index: 999;
    overflow-y: auto;
}

.mobile-nav-overlay.active {
    display: block;
}

.mobile-nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mobile-nav-item {
    border-bottom: 1px solid var(--border-color);
}

.mobile-nav-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 1.25rem 1.5rem;
    text-decoration: none;
    color: var(--text);
    font-size: 1.125rem;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background-color var(--transition-speed);
}

.mobile-nav-link:hover {
    background-color: var(--hover-bg);
}

/* Mobile Submenu */
.mobile-submenu {
    display: none;
    list-style: none;
    padding: 0;
    margin: 0;
    background-color: var(--hover-bg);
}

.mobile-nav-item.submenu-open .mobile-submenu {
    display: block;
}

.mobile-nav-item.submenu-open .submenu-icon {
    transform: rotate(180deg);
}

.mobile-submenu li {
    border-top: 1px solid var(--border-color);
}

.mobile-submenu a {
    display: block;
    padding: 1rem 3rem;
    text-decoration: none;
    color: var(--text-color);
    transition: background-color var(--transition-speed);
}

.mobile-submenu a:hover {
    background-color: #e8e8e8;
}

.submenu-icon {
    transition: transform var(--transition-speed);
}

.mobile-logout-form {
    margin: 0;
}

.mobile-logout-form .logout-btn {
    text-align: left;
    font-family: inherit;
    font-size: inherit;
}

/* Mobile Language Switcher Styles */
.language-switcher-mobile {
    width: 100%;
}

.mobile-lang-toggle {
    width: 100%;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background-color var(--transition-speed);
}

.lang-current {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Fix: Hide language options by default */
.mobile-lang-options {
    max-height: 0;
    overflow: hidden;
    list-style: none;
    padding: 0;
    margin: 0;
    background-color: var(--bg);
    transition: max-height var(--transition-speed) ease;
}

/* Show language options when parent has submenu-open class */
.mobile-language-selector.submenu-open .mobile-lang-options {
    max-height: 400px;
    /* Adjust based on number of languages */
}

/* Rotate icon when open */
.mobile-language-selector.submenu-open .submenu-icon {
    transform: rotate(180deg);
}

.mobile-lang-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 3rem;
    text-decoration: none;
    color: var(--text);
    border-top: 1px solid var(--border-color);
    transition: background-color var(--transition-speed);
}

.mobile-lang-option:hover {
    background-color: #e8e8e8;
}

.mobile-language-selector .flag-emoji {
    font-size: 1.25rem;
}

/* Mobile Languages Slide-in Menu */
.mobile-menu {
    position: fixed;
    top: 60px;
    /* Below header */
    right: -100%;
    width: 100%;
    height: calc(100vh - 60px);
    background: var(--bg);
    transition: right var(--transition-speed);
    z-index: 1002;
    /* Higher than overlay */
    overflow-y: auto;
    box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
}

.mobile-menu.active {
    right: 0;
}

@media (max-width: 768px) {
    .mobile-menu {
        top: 50px;
        height: calc(100vh - 50px);
    }
}

.mobile-menu-back {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 1rem 1.5rem;
    background: var(--header-bg);
    border: none;
    border-bottom: 1px solid var(--border-color);
    font-size: 1rem;
    cursor: pointer;
    transition: background-color var(--transition-speed);
}

.mobile-menu-back:hover {
    background-color: var(--hover-bg);
}

.mobile-menu-content {
    padding: 1rem;
}

.mobile-menu-header,
.mobile-menu-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    margin-bottom: 1rem;
    text-decoration: none;
    color: var(--text);
    font-size: 1.25rem;
    font-weight: bold;
    border-radius: 8px;
    transition: background-color var(--transition-speed);
}

.mobile-menu-header:hover,
.mobile-menu-footer:hover {
    background-color: var(--hover-bg);
}

/* Mobile Language List */
.mobile-language-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mobile-language-item {
    margin-bottom: 0.5rem;
}

.mobile-language-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 1rem;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    transition: all var(--transition-speed);
}

.mobile-language-toggle:hover {
    background-color: var(--hover-bg);
}

.language-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.flag-icon {
    font-size: 1.5rem;
}

.expand-icon {
    transition: transform var(--transition-speed);
}

.mobile-language-toggle[aria-expanded="true"] .expand-icon {
    transform: rotate(180deg);
}

/* Mobile Levels List - smooth slide animation */
.mobile-levels-list {
    max-height: 0;
    overflow: hidden;
    list-style: none;
    padding: 0;
    margin: 0 0 0 1rem;
    transition: max-height 0.3s ease-out;
}

.mobile-language-toggle[aria-expanded="true"]+.mobile-levels-list {
    max-height: 400px;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

.mobile-levels-list li {
    margin-bottom: 0.25rem;
}

.mobile-levels-list a {
    display: block;
    padding: 0.75rem;
    text-decoration: none;
    color: var(--text);
    border-radius: 4px;
    transition: background-color var(--transition-speed);
}

.mobile-levels-list a:hover {
    background-color: var(--hover-bg);
}

/* Desktop Styles */
@media (min-width: 1350px) {
    .header-container {
        padding: 1rem 2rem;
    }

    .logo-wrapper {
        gap: 1rem;
    }

    .logo-image {
        width: 70px;
        height: 70px;
    }

    .logo-text {
        font-size: 1.5rem;
    }

    /* Hide mobile elements */
    .mobile-menu-btn,
    .mobile-menu,
    .mobile-nav-overlay {
        display: none !important;
    }

    /* Show navigation */
    .main-nav {
        display: block;
    }

    .nav-list {
        display: flex;
        align-items: center;
        gap: 1.5rem;
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .nav-item {
        position: relative;
    }

    .theme-menu .nav-link {
        padding: 0.25rem 1rem;
    }

    .nav-link {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.75rem 1rem;
        text-decoration: none;
        color: var(--text);
        background: var(--bg);
        font-weight: 500;
        font-size: 1.125rem;
        background: transparent;
        border: none;
        cursor: pointer;
        transition: all var(--transition-speed);
        font-weight: 600;
    }

    .nav-link:hover {
        text-decoration: underline;
        text-underline-offset: 6px;
    }

    .dropdown-icon {
        transition: transform var(--transition-speed);
    }

    .nav-item:hover .dropdown-icon {
        transform: rotate(180deg);
    }

    /* Dropdown Menu */
    .dropdown-menu {
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        min-width: 200px;
        background: var(--bg);
        color: var(--text);
        border: 1px solid var(--border-color);
        border-radius: 8px;
        box-shadow: var(--header-shadow);
        opacity: 0;
        visibility: hidden;
        transition: all var(--transition-speed);
        margin-top: 0.5rem;
    }

    .nav-item:hover .dropdown-menu {
        opacity: 1;
        visibility: visible;
    }

    .dropdown-item {
        display: block;
        padding: 1rem 1.5rem;
        text-decoration: none;
        color: var(--text);
        transition: background-color var(--transition-speed);
    }

    .dropdown-item:hover {
        background-color: var(--hover-bg);
    }

    .dropdown-item:first-child {
        border-radius: 8px 8px 0 0;
    }

    .dropdown-item:last-child {
        border-radius: 0 0 8px 8px;
    }

    /* Mega Menu */
    .mega-menu {
        position: absolute;
        top: 100%;
        /* left: 50%;
        transform: translateX(-50%); */
        width: 80vw;
        max-width: 1000px;
        max-height: 80vh;
        overflow-y: auto;
        background: var(--bg);
        color: var(--text);
        border: 1px solid var(--border);
        border-radius: 8px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
        opacity: 0;
        visibility: hidden;
        transition: all var(--transition-speed);
        margin-top: 0.5rem;
    }

    /* Center the languages mega menu */
    .languages-mega-menu {
        left: -20vw;
    }

    .nav-item:hover .mega-menu {
        opacity: 1;
        visibility: visible;
    }

    .mega-menu-content {
        padding: 2rem;
    }

    .mega-menu-header {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 1rem;
        margin-bottom: 1.5rem;
        text-decoration: none;
        font-size: 1.5rem;
        font-weight: bold;
        border-radius: 8px;
        transition: all var(--transition-speed);
        gap: 15px;
    }

    /* Languages Grid */
    .languages-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5rem;
        margin-bottom: 1.5rem;
    }

    .language-item {
        display: block;
        text-decoration: none;
        border: 1px solid var(--border);
        border-radius: 8px;
        padding: 1rem;
        transition: all var(--transition-speed);
    }

    .language-main-link {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0 0.5rem;
        text-decoration: none;

        font-weight: 700;
        font-size: 1.5rem;
        transition: transform var(--transition-speed);
    }

    /* Language levels shown immediately */
    .language-levels {
        margin-top: 0.75rem;
        padding-top: 0.75rem;
        border-top: 1px solid var(--border);
    }

    .level-link {
        display: block;
        padding: 0.5rem 0.75rem;
        text-decoration: none;
        color: var(--text);
        background: var(--bg);
        font-size: 0.95rem;
        border-radius: 4px;
        transition: all var(--transition-speed);
    }

    .mega-menu-footer {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 1rem;
        text-decoration: none;
        color: var(--text);
        background: var(--bg);
        font-size: 1.25rem;
        font-weight: bold;
        border-radius: 8px;
        transition: all var(--transition-speed);
        gap: 15px;
        /* width: fit-content; */
    }

    /* Alle mega menu items text en bg */
    .mega-menu-header,
    .language-main-link,
    .language-item {
        color: var(--text);
        background: var(--bg);
    }

    /* Alle menu's hover effecten */
    .mega-menu-header:hover,
    .mega-menu-footer:hover,
    .language-main-link:hover,
    .level-link:hover {
        background-color: var(--surface-2);
        transform: scale(1.05);
    }

    /* =========================================
   THEME PICKER (UNIFIED DESKTOP + MOBILE)
   - Desktop: hover/focus dropdown inside .theme-menu
   - Mobile: uses existing .mobile-submenu open/close
   ========================================= */

    /* ---------- Shared theme UI primitives ---------- */

    .theme-current {
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }

    .theme-current-label {
        white-space: nowrap;
    }

    /* Icon (works everywhere: desktop + mobile) */
    .theme-eye {
        width: 18px;
        height: 18px;
        border-radius: 999px;
        display: inline-block;
        flex: 0 0 18px;
    }

    .theme-eye--dark {
        background: #111;
    }

    .theme-eye--light {
        background: #f3f4f6;
        border: 1px solid rgba(0, 0, 0, 0.18);
    }

    .theme-eye--system {
        background: linear-gradient(90deg, #111 50%, #f3f4f6 50%);
        border: 1px solid rgba(0, 0, 0, 0.18);
    }

    .theme-eye--sepia {
        background: #d6b27c;
    }

    .theme-chevron {
        opacity: 0.8;
    }

    /* Option base (shared button reset + layout) */
    .theme-option,
    .mobile-theme-option {
        appearance: none;
        -webkit-appearance: none;

        display: flex;
        align-items: center;
        gap: 10px;

        width: 100%;
        background: transparent;
        border: 0;

        text-align: left;
        color: inherit;
        font: inherit;

        cursor: pointer;
    }

    /* Active state (shared) */
    .theme-option.is-active,
    .mobile-theme-option.is-active {
        font-weight: 600;
    }


    /* ---------- Desktop dropdown (no-JS hover/focus) ---------- */

    /* Prevent clipping from header/nav containers */
    .site-header .nav-item.theme-switcher,
    .site-header .theme-menu {
        overflow: visible;
    }

    .site-header .theme-menu {
        position: relative;
        display: inline-block;
    }

    /* Trigger (desktop) */
    .site-header .theme-menu .theme-current {
        /* reset default button styling */
        background: transparent;
        border: 0;
        color: inherit;
        font: inherit;
        cursor: pointer;
        line-height: 1;
        font-weight: 900;
    }

    /* Dropdown panel */
    .site-header .theme-menu .theme-dropdown {
        --theme-gap: 10px;

        position: absolute;
        top: calc(100% + var(--theme-gap));
        right: 0;
        z-index: 9999;

        min-width: 190px;
        padding: 15px;

        background: #fff;
        border: 1px solid rgba(0, 0, 0, 0.10);
        border-radius: 12px;
        box-shadow: 0 14px 40px rgba(0, 0, 0, 0.14);

        /* hidden state */
        opacity: 0;
        visibility: hidden;
        transform: translateY(-6px);
        pointer-events: none;

        transition: opacity 160ms ease, transform 160ms ease, visibility 0s linear 160ms;
    }

    /* Color for background of various themes */
    .theme-menu-light {
        background: white;
        border-radius: 45px;
        color: #1a1e30;
    }

    .theme-menu-dark {
        background: black;
        border-radius: 45px;
        color: #e5e7eb;
    }

    .theme-menu-system {
        background: white;
        border-radius: 45px;
        color: #1a1e30;
    }

    .theme-menu-sepia {
        background: #f6db9c;
        border-radius: 45px;
        color: #1a1e30;
    }

    .theme-menu-light .theme-current-label {
        color: var(--text);
    }


    .theme-menu-dark theme-current-label {
        color: var(--bg);
    }

    /* Hover bridge so it doesn't close while moving mouse down */
    .site-header .theme-menu .theme-dropdown::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: -25px;
        height: 25px;
        background: transparent;
    }

    /* Open on hover + focus-within */
    .site-header .theme-menu:hover .theme-dropdown,
    .site-header .theme-menu:focus-within .theme-dropdown {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        pointer-events: auto;
        transition: opacity 160ms ease, transform 160ms ease, visibility 0s;
    }

    .site-header .theme-menu .theme-dropdown form {
        margin: 0;
    }

    /* Desktop option spacing + hover/focus */
    .site-header .theme-menu .theme-option {
        padding: 5px 12px;
        border-radius: 112px;
        font-weight: 700;
        border: 1px solid;
    }

    .site-header .theme-menu .theme-option:hover {
        text-decoration: underline;
    }

    .theme-dropdown form {
        display: flex;
        flex-direction: column;
        gap: 5px;
    }

    /* .site-header .theme-menu .theme-option:hover {
        background: rgba(0, 0, 0, 0.06);
    } */

    /* .site-header .theme-menu .theme-option:focus-visible {
        outline: 2px solid rgba(0, 0, 0, 0.25);
        outline-offset: 2px;
        background: rgba(0, 0, 0, 0.06);
    }

    .site-header .theme-menu .theme-option.is-active {
        background: rgba(0, 0, 0, 0.08);
    } */


    /* ---------- Mobile submenu (uses your existing submenu open/close) ---------- */

    .mobile-theme-submenu {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .mobile-theme-submenu li {
        margin: 0;
        padding: 0;
    }

    /* Mobile option spacing (no background hover needed typically) */
    .mobile-theme-option {
        padding: 12px 0;
        border-radius: 0;
    }

    /* If you want a subtle pressed/hover feel on mobile as well */
    .mobile-theme-option:active {
        opacity: 0.85;
    }

    /* Theme icon must be global (mobile overlay is not inside .theme-menu) */
    .theme-eye {
        width: 18px;
        height: 18px;
        border-radius: 999px;
        display: inline-block;
        flex: 0 0 18px;
    }

    .theme-eye--dark {
        background: #111;
    }

    .theme-eye--light {
        background: #f3f4f6;
        border: 1px solid rgba(0, 0, 0, 0.18);
    }

    .theme-eye--system {
        background: linear-gradient(90deg, #111 50%, #f3f4f6 50%);
        border: 1px solid rgba(0, 0, 0, 0.18);
    }

    .theme-eye--sepia {
        background: #d6b27c;
    }



    /* GENERAL DETAILS STYLEs */

    details {
        background: --surface;
        border: 2px solid black;
        display: block;
        width: 100%;
        /* width: fit-content; */
        /* min-width:300px; */
        text-align: center;
        padding: 5px 25px;
        border-radius: 5px;
        /* margin-top: 10px; */
        font-size: 18px;
        margin-bottom: 0px;
    }

    details[open] {
        /* Styles when the details is expanded */
        text-align: left;
        /* Any other styles you want when open */
    }

    details p {
        padding: 10px;
        font-size: 18px;
        text-align: left;
    }


    /* Account Styles */
    .nav-account {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .account-text {
        display: inline;
    }

    .account-icon {
        width: 30px;
        height: 30px;
        transition: transform var(--transition-speed);
    }

    .account-icon:hover {
        transform: scale(1.1);
    }

    .logout-form {
        display: inline;
    }

    .logout-btn {
        font-family: inherit;
        font-size: inherit;
    }
}

/* Mobile specific adjustments */
@media (max-width: 768px) {
    .site-header {
        min-height: 50px;
    }

    .header-container {
        padding: 0.5rem;
        gap: 0.5rem;
    }

    .logo-wrapper {
        gap: 0.5rem;
    }

    .logo-image {
        width: 35px;
        height: 35px;
    }

    .logo-text {
        font-size: 1rem;
    }

    .mobile-menu-btn {
        width: 25px;
        height: 25px;
        flex-shrink: 0;
    }

    .hamburger-line {
        height: 2.5px;
    }

    /* Adjust menu positions for smaller header */
    .mobile-nav-overlay {
        top: 50px;
    }

    .mobile-menu {
        top: 50px;
        height: calc(100vh - 50px);
    }
}

@media (hover: none) {

    .nav-item:hover .dropdown-menu,
    .nav-item:hover .mega-menu {
        opacity: 0;
        visibility: hidden;
    }
}

/* Language Switcher - Ensure compatibility with existing component */
.language-switcher {
    position: relative;
}

.dropdown-container {
    position: relative;
}

.language-toggle {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    cursor: pointer;
    transition: all var(--transition-speed);
}

.language-toggle:hover {
    text-decoration: underline;
    text-underline-offset: 6px;
}

.flag-emoji {
    font-size: 1.5rem;
}

.language-name {
    font-weight: 600;
    font-size: 1.1rem;
}

.chevronDropdownMenu {
    transition: transform var(--transition-speed);
}

.language-toggle:hover .chevronDropdownMenu,
.dropdown-container:hover .chevronDropdownMenu {
    transform: rotate(180deg);
}

.language-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 200px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: var(--header-shadow);
    padding: 0.5rem 0;
    margin-top: 0.5rem;
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-speed);
    z-index: 1000;
}

/* Show dropdown on hover of container */
.dropdown-container:hover .language-dropdown,
.language-dropdown:hover {
    opacity: 1;
    visibility: visible;
}

.language-dropdown.show {
    opacity: 1;
    visibility: visible;
}

.language-option {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.5rem;
    text-decoration: none;
    color: var(--text);
    transition: background-color var(--transition-speed);
    font-weight: 600;
}

.language-option:hover {
    background-color: var(--hover-bg);
    color: var(--hover-color);
}

/* Add invisible bridge for hover continuity */
.dropdown-menu::before,
.mega-menu::before,
.language-dropdown::before {
    content: '';
    position: absolute;
    top: -20px;
    left: 0;
    right: 0;
    height: 20px;
}

@media screen and (min-width: 1500px) {
    .languages-mega-menu {
        left: 50%;
        transform: translateX(-50%);
    }
}


/*  */
/* SPECIFIC STYLING GENERAL STYLEs */
/*  */

.mainPage {
    min-height: calc(100vh - 246px);
    overflow-x: hidden;
    padding-bottom: 3rem;
}

.PageHeader,
.PageSubHeader {
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.5), 0 2px 5px rgba(0, 0, 0, 0.4);
    text-align: center;
    line-height: 3rem;
}

.PageSubHeader {
    font-size: clamp(25px, 4vw, 35px);
}

.topAndBottom20px {
    margin-top: 20px !important;
    margin-bottom: 20px !important;
}

/* General Styles  */
.three-column-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

}

@media screen and (max-width: 768px) {
    .hideOnMobile {
        display: none !important;
    }
}

.buttonNoStyling {
    background: transparent;
    border: 0;
    cursor: pointer;
}

.button.buttonRight {
    display: block;
    margin-left: auto;
}

.top1Rem {
    margin-top: 1rem;
}

.text-nowrap {
    white-space: nowrap;
}

.flex {
    display: flex;
    flex: 1;
    gap: 15px;
    flex-wrap: wrap;
}

.flex.flexNoWrap {
    flex-wrap: nowrap;
}

.flex-centered {
    justify-content: center;
}

.flex-grow {
    flex-grow: 1;
}

.center {
    justify-content: center;
}

.contentSection {
    width: 85vw;
    max-width: 1250px;
    line-height: 2rem;
    margin: auto;
    margin-top: 2rem;
}

.contentSection1RemTop {
    margin-top: 1rem;
}

.contentSection3RemTop {
    margin-top: 3rem;
}

.contentSectionNoMarginTop {
    width: 85vw;
    max-width: 1000px;
    line-height: 2rem;
    margin: auto;
    margin-top: 0;
}

/* @media screen and (min-width: 1500px) {
    .contentSection.contentSectionStoryGrid {
        max-width: 1200px;
        transform:translateX(-100px);
    }
} */

.contentSectionGrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 100px;
}


/* General Content grid 2 columns */
@media screen and (min-width: 768px) {
    .contentSectionInnerGrid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 15px;
    }
}


.roundedCorners {
    border-radius: 15px;
}

.contentSectionGridLift,
.contentSectionGridRight {
    width: 100%;
    height: 100%;
}


.contentSection p {
    margin: 1rem 0;
}

.alignCenter {
    text-align: center;
}

.pagination {
    text-align: center;
}

.cataloguePagination.pagination {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-top: 2rem;
}

.bgSteelBlue {
    background: var(--steelBlue);
}

/* Text overlay for visibility */
.clearTextOverlayWhite {
    color: white;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.5), 0 2px 5px rgba(0, 0, 0, 0.4);
    font-weight: 600;
}

.largeCentered {
    text-align: center;
    font-size: 3rem;
}

.centered {
    text-align: center;
}


/* Pagination */
.pagination a {

    width: 40px;
    height: 40px;
    display: inline-block;
    border-radius: 5px;
    margin: 5px;
    /* display: grid; */
    place-items: center;
    text-align: center;
    text-decoration: none;
    line-height: 35px;
}

/* Pagination kleuren */
/* mixed */
a.pagination-mixed {
    color: black;
    font-weight: bold;
    background: white;
    border: 2px solid black;
}

/* entry */
a.pagination-a1 {
    color: var(--entryLevel);
    font-weight: bold;
    background: var(--surface);
    border: 2px solid var(--entryLevel);
}

a.pagination-mixed.active,
a.pagination-mixed:hover {
    background: black;
    font-weight: bold;
    color: var(--text);
    border: 2px solid black;
}

a.pagination-a1.active,
a.pagination-a1:hover {
    background: var(--entryLevel);
    font-weight: bold;
    color: white;
    border: 2px solid var(--entryLevel);
}


/* beginner */
a.pagination-a2 {
    color: var(--beginnerLevel);
    font-weight: bold;
    background: white;
    border: 2px solid var(--beginnerLevel);
}

a.pagination-a2.active,
a.pagination-a2:hover {
    background: var(--beginnerLevel);
    font-weight: bold;
    color: white;
    border: 2px solid var(--beginnerLevel);
}

/* intermediate */
a.pagination-b1 {
    color: var(--intermediateLevel);
    font-weight: bold;
    background: white;
    border: 2px solid var(--intermediateLevel);
}

a.pagination-b1.active,
a.pagination-b1:hover {
    background: var(--intermediateLevel);
    font-weight: bold;
    color: white;
    border: 2px solid var(--intermediateLevel);
}

/* upperintermediate */
a.pagination-b2 {
    color: var(--upperIntermediateLevel);
    font-weight: bold;
    background: white;
    border: 2px solid var(--upperIntermediateLevel);
}

a.pagination-b2.active,
a.pagination-b2:hover {
    background: var(--upperIntermediateLevel);
    font-weight: bold;
    color: white;
    border: 2px solid var(--upperIntermediateLevel);
}


/* advanced */
a.pagination-c1 {
    color: var(--advancedLevel);
    font-weight: bold;
    background: white;
    border: 2px solid var(--advancedLevel);
}

a.pagination-c1.active,
a.pagination-c1:hover {
    background: var(--advancedLevel);
    font-weight: bold;
    color: white;
    border: 2px solid var(--advancedLevel);
}

.paginationLinksGoBack {
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-decoration: none;
    align-items: center;
    margin-top: 1rem;
}

nav .paginationLinksGoBack {
    display: flex;
    flex-direction: row;
    gap: 5px;
    text-decoration: none;
    align-items: center;
    flex-wrap: wrap;

}

nav .paginationLinksGoBack a,
nav .paginationLinksGoBack span {
    line-height: 15px;
}



nav .paginationLinksGoBack a {
    color: var(--text);
    text-decoration: underline;
}

.boxShadow {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5),
        0 4px 6px -2px rgba(0, 0, 0, 0.5);
    transition: box-shadow 0.3s ease-in-out;
    transition: all 0.25s;
}

.boxShadow:hover {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5),
        0 10px 10px -5px rgba(0, 0, 0, 0.5);
}

/* Button Class scale effect */
.button {
    border-radius: 5px;
    transition: all 200ms ease;
    padding: 15px 25px;
    color: white;
    font-weight: bold;
    text-decoration: none;
    display: inline-block;
    background-color: #007bff;
    /* Added for visibility */
    cursor: pointer;
    text-align: center;
}

button.button {
    padding: 5px 35px;
}

.buttonSmall {
    padding: 5px 15px;
}

.button:hover {
    transform: scale(1.05);
}

.button:active {
    transform: scale(0.98);
    /* Slightly smaller when clicked */
}

.button.buttonSmall {
    padding: 5px 15px;
}

.buttonSteelblue {
    background-color: steelblue;
}

.buttonFirebrick {
    background-color: firebrick;
}

.buttonGrey {
    background-color: #e5e7eb;
    color: black;
}

.buttonGrey:hover {
    color: #e5e7eb;
    background-color: black;
}

.button-red {
    background-color: rgb(232, 25, 87);
}

.button-black {
    background-color: black;
}


.background-a1 {
    background: var(--entryLevel);
}

.background-a2 {
    background: var(--beginnerLevel);
}

.background-b1 {
    background: var(--intermediateLevel);
}

.background-b2 {
    background: var(--upperIntermediateLevel);
}

.background-c1 {
    background: var(--advancedLevel);
}


/* .background-a1 .translate-btn {
    border: 2px solid transparent;
} */

/* Colored Button styles */
.story-grid .story-item p.button-a1,
.button-a1,
.button-A1,
.badge-a1,
.wordCount-a1,
.itemType-a1,
.speed-active.button-a1 {
    background: var(--entryLevel);
    border: 2px solid var(--entryLevel);
    color: white;
}

.badge.category-a1 {
    background: white;
    color: var(--entryLevel) !important;
    border: 2px solid white !important;
}

.button-a1:hover,
.background-a1 .grammar-tips-btn:hover,
.background-a1 .grammar-tips-btn.active,
.background-a1 .translate-btn:hover,
.background-a1 .translate-btn.active {
    border: 2px solid var(--entryLevel) !important;
}

.buttonReadThisStory.button-a1:hover {
    background: var(--entryLevel);
    border: var(--entryLevel) 2px solid;
    color: var(--text);
}

.paginationLinksGoBack .button-a1-back {
    background: var(--surface) !important;
    color: var(--entryLevel) !important;
    border: 2px solid var(--entryLevel) !important;
    padding: 5px 10px;
    border-radius: 5px;
    font-weight: bold;
}

/* .downloadChapterButton.button-a1:hover .download {
    color: var(--entryLevel);
} */

.storySuccessButton.button-a1,
.storySuccessButton.button-a2 .storySuccessButton.button-b1 .storySuccessButton.button-b2 {
    border-color: transparent;
}

.story-grid .story-item p.button-a2,
.button-a2,
.badge-a2,
.wordCount-a2,
.itemType-a2,
.speed-active.button-a2 {
    color: var(--text);
    background: var(--beginnerLevel);
    border: var(--beginnerLevel) 2px solid;
}

.button-a2:hover {
    border: var(--beginnerLevel) 2px solid;
}

.buttonReadThisStory.button-a2:hover {
    color: white;
    background: var(--beginnerLevel);
    border: var(--beginnerLevel) 2px solid;
}

.downloadChapterButton.button-a2:hover .download {
    color: var(--beginnerLevel);
}

.story-grid .story-item p.button-b1,
.button-b1,
.badge-b1,
.wordCount-b1,
.itemType-b1,
.speed-active.button-b1 {
    border: var(--intermediateLevel) 2px solid;
    color: white;
    background: var(--intermediateLevel);
}

.button-b1:hover {
    border: var(--intermediateLevel) 2px solid;
}

.buttonReadThisStory.button-b1:hover {
    background: var(--intermediateLevel);
    border: var(--intermediateLevel) 2px solid;
}

.downloadChapterButton.button-b1:hover .download {
    color: var(--intermediateLevel);
}

.button-b2,
.story-grid .story-item p.button-b2,
.badge-b2,
.wordCount-b2,
.itemType-b2,
.speed-active.button-b2 {
    color: white;
    background: var(--upperIntermediateLevel);
    border: var(--upperIntermediateLevel) 2px solid;
}

.button-b2:hover {
    border: var(--upperIntermediateLevel) 2px solid;
}

.buttonReadThisStory.button-b2:hover {
    background: var(--upperIntermediateLevel);
    border: var(--upperIntermediateLevel) 2px solid;
}

.downloadChapterButton.button-b2:hover .download {
    color: var(--upperIntermediateLevel);
}

/* advancedLevel */
.button-c1,
.story-grid .story-item p.button-c1,
.badge-c1,
.wordCount-c1,
.itemType-c1,
.speed-active.button-c1 {
    color: white;
    background: var(--advancedLevel);
    border: var(--advancedLevel) 2px solid;
}

.button-b2:hover {
    border: var(--advancedLevel) 2px solid;
}

.buttonReadThisStory.button-b2:hover {
    background: var(--advancedLevel);
    border: var(--advancedLevel) 2px solid;
}

.downloadChapterButton.button-b2:hover .download {
    color: var(--advancedLevel);
}

/* Button Disabled */
a.disabled-link {
    opacity: 0.6;
    text-decoration: line-through;
    filter: grayscale(50%);
}

p.disabled-link a {
    text-decoration: line-through;
}

/* CITATION STYLES */
.citation {
    cursor: help;
    color: #1a73e8;
    font-size: 0.8em;
    vertical-align: super;
}

.citation-text {
    visibility: hidden;
    width: 6cle00px;
    max-width: 90vw;
    background-color: #f8f9fa;
    color: #333;
    text-align: left;
    border-radius: 6px;
    padding: 10px;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -150px;
    opacity: 0;
    transition: opacity 0.3s;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    font-size: 0.9rem;
    line-height: 1.4;
}

@media screen and (max-width: 768px) {
    .citation-text {
        width: 80vw;
        /* Take up 80% of screen width (10% margin on each side) */
        max-width: 80vw;
        /* Ensure it doesn't exceed 80% */
        position: absolute;
        margin: 0;
        left: 0;


    }
}

.citation:hover .citation-text {
    visibility: visible;
    opacity: 1;
}

.key-findings {
    background-color: #f1f8ff;
    padding: 15px;
    border-radius: 5px;
    margin-top: 20px;
}

.key-findings li {
    margin-bottom: 10px;
}


/* Mobile Styles */
@media screen and (max-width: 768px) {
    .nav-list {
        position: absolute;
        top: 60px;
        left: 0;
        right: 0;
        background-color: #333;
        flex-direction: column;
        align-items: center;
        display: none;
        padding: 20px 0;
    }

    .nav-list.active {
        display: flex;
    }

    .menu-toggle {
        display: flex;
        flex-direction: column;
        cursor: pointer;
        margin-left: auto;
    }

    .menu-toggle .menuBar {
        background-color: #fff;
        height: 3px;
        width: 25px;
        margin: 4px 0;
    }

    .menu-toggle.active .bar:nth-child(1) {
        transform: rotate(-45deg);
        position: absolute;
        top: 10px;
    }

    .menu-toggle.active .bar:nth-child(2) {
        opacity: 0;
    }

    .menu-toggle.active .bar:nth-child(3) {
        transform: rotate(45deg);
        position: absolute;
        top: 10px;
    }

    .dropdown-menu,
    .dropdown-menu .dropdown-menu {
        position: static;
        display: block;
    }
}

/* languageLevelsOuter */
.languageLevelsOuter {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
    margin-bottom: 1rem;
}

@media screen and (max-width: 1040px) {
    .languageLevelsOuter {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }

}

@media screen and (max-width: 768px) {
    .languageLevelsOuter {
        grid-auto-flow: row;
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        margin: 25px;
    }
}

/*  */
/* LanguageLevels */
/*  */

.languageLevel {
    padding: 15px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.languageLevel a {
    color: white;
    font-weight: bold;
    text-decoration: none;
    display: block;
    width: 100%;
}

.languageLevel.entry a {
    background-color: rgb(232, 25, 87);
}

.languageLevel.beginner a {
    background-color: rgb(229, 195, 25);
}

.languageLevel.intermediate a {
    background-color: green;
    ;
}

.languageLevel.upperIntermediate a {
    background-color: rgb(24, 109, 226);
}

.languageLevel.advanced {
    background-color: var(--advancedLevel);
}

.languageLevel img {
    width: 50%;
    max-width: 200px;
    display: block;
    margin: auto;
    margin-bottom: 1rem;
}

.languageLevel.entry,
.languageLevel.beginner,
.languageLevel.intermediate,
.languageLevel.upperIntermediate,
.languageLevel.advancedLevel {
    border: 3px solid;
    border-radius: 5px;

}

.languageLevel.entry {
    border-color: var(--entryLevel);
    color: var(--entryLevel);
}

.languageLevel.beginner {
    border-color: var(--beginnerLevel);
    color: var(--beginnerLevel)
}

.languageLevel.intermediate {
    border-color: var(--intermediateLevel);
    color: var(--intermediateLevel);
}

.languageLevel.upperIntermediate {
    border-color: var(--upperIntermediateLevel);
    color: var(--upperIntermediateLevel);
}

.languageLevel.advancedLevel {
    border-color: var(--advancedLevel);
    color: var(--advancedLevel);
}

.languageLevel p {
    color: black;
}

.languageLevel a {
    border: 1px solid;
    padding: 15px;
    display: block;
    text-align: center;
    margin: 0;
}


/*  */
/* Single Languages */
/*  */

.SingleLanguageHeader {
    min-height: 50vh;
    display: grid;
    grid-template-rows: 1fr auto;
    /* Main area + stats area */
    background-size: cover;
    background-position: bottom;
    background-repeat: no-repeat;
    color: white;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.5), 0 2px 5px rgba(0, 0, 0, 0.4);
    padding: 1rem;
    text-align: center;
}

.SingleLanguageHeader p {
    text-shadow: none !important;
    font-weight: 600;
}

/* Center the title/subtitle div
.SingleLanguageHeader>div:first-child {
    display: grid;
    place-items: center;
    text-align: center;
    align-self: center;
    width: 1100px;
    margin: auto;
    max-width: 90vw;
}

.SingleLanguageHeader>h1 {
    place-self: center;
} */


/* Make the main header a grid container with 3 rows */
.SingleLanguageHeader {
    display: grid;
    grid-template-rows: 1fr auto 1fr;
    /* padding: 2rem; */
}

/* Center the title/subtitle div in the middle row */
.SingleLanguageHeader>div:first-child {
    grid-row: 2;
    display: grid;
    place-items: center;
    text-align: center;
    width: 1100px;
    margin: auto;
    max-width: 90vw;
}

/* Style the membership perks at the bottom */
.membershipPerks {
    grid-row: 3;
    justify-self: center;
    margin: 0;
    padding-bottom: 1rem;
    display: flex;
    flex-wrap: wrap;
    font-weight: bold;
    align-self: end;
    margin-top: 1rem;
    /* optional: add some space from bottom edge */
}

@media screen and (max-width: 768px) {
    .SingleLanguageHeader {
        grid-template-rows: auto;
    }

    .SingleLanguageHeader>div:first-child {
        grid-row: 1;
    }

    .membershipPerks {
        grid-row: 2;
    }
}


/* Stats at the bottom */
.hero-stats {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    font-size: clamp(18px, 0.5vw + 14px, 25px);
    grid-row: 3;
    margin-top: 3rem;
}

.book-stats p::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='black' d='M508.176,243.518c-5.5-6.281-15.109-6.859-21.391-1.313l-44.672,39.547L315.926,393.408c-7.953,7.016-18.078,10.781-28.484,10.781c-3.031,0-6.063-0.297-9.109-0.938l-72.125-15.984l-87.094-19.219l-61.078-13.516l-8.734-1.953c-2.766-0.938-5.219-2.156-7.375-3.766c-3.469-2.516-6.219-5.781-8.109-9.531c-1.938-3.766-2.953-7.953-2.953-12.219c0-2.609,0.438-5.344,1.219-8.016c0.953-2.891,2.313-5.5,3.984-7.813c2.453-3.469,5.781-6.219,9.531-8.094c3.703-1.953,7.875-2.953,12.156-2.953c0.719,0,1.438,0.063,2.156,0.063l62.953,13.594l146,31.578c18.078,3.969,36.938-0.938,50.813-13.219l89.766-79.078l91.656-80.734c8.234-7.297,11.703-18.578,8.891-29.188c-2.75-10.703-11.281-18.875-22.047-21.188l-11.422-2.453l-83.266-18L287.801,78.799c-18.063-3.969-36.922,0.938-50.813,13.234L96.129,215.768L53.77,252.986L16.91,285.361c-1.516,1.734-2.813,3.469-3.969,5.344c-0.656,0.797-1.234,1.516-1.813,2.391c-3.609,4.922-6.5,10.547-8.453,16.703c-1.813,5.703-2.672,11.563-2.672,17.266c0,12.359,3.969,24.141,10.984,33.828c3.531,4.922,7.797,9.25,12.797,12.859c4.906,3.625,10.547,6.516,16.688,8.391l0.656,0.219l64.25,14.094l60.859,13.297l105.672,23.125c5.125,1.156,10.328,1.672,15.531,1.672c17.703,0,34.984-6.359,48.578-18.297l3.609-3.172l125.469-111.094l41.781-37C513.16,259.408,513.738,249.814,508.176,243.518z'/%3E%3C/svg%3E");
    display: inline-block;
    width: 22px;
    height: 22px;
    margin-right: 8px;
    margin-top: 5px;
    vertical-align: top;
    opacity: 1;
}

.book-stats p::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='black' d='M508.176,243.518c-5.5-6.281-15.109-6.859-21.391-1.313l-44.672,39.547L315.926,393.408c-7.953,7.016-18.078,10.781-28.484,10.781c-3.031,0-6.063-0.297-9.109-0.938l-72.125-15.984l-87.094-19.219l-61.078-13.516l-8.734-1.953c-2.766-0.938-5.219-2.156-7.375-3.766c-3.469-2.516-6.219-5.781-8.109-9.531c-1.938-3.766-2.953-7.953-2.953-12.219c0-2.609,0.438-5.344,1.219-8.016c0.953-2.891,2.313-5.5,3.984-7.813c2.453-3.469,5.781-6.219,9.531-8.094c3.703-1.953,7.875-2.953,12.156-2.953c0.719,0,1.438,0.063,2.156,0.063l62.953,13.594l146,31.578c18.078,3.969,36.938-0.938,50.813-13.219l89.766-79.078l91.656-80.734c8.234-7.297,11.703-18.578,8.891-29.188c-2.75-10.703-11.281-18.875-22.047-21.188l-11.422-2.453l-83.266-18L287.801,78.799c-18.063-3.969-36.922,0.938-50.813,13.234L96.129,215.768L53.77,252.986L16.91,285.361c-1.516,1.734-2.813,3.469-3.969,5.344c-0.656,0.797-1.234,1.516-1.813,2.391c-3.609,4.922-6.5,10.547-8.453,16.703c-1.813,5.703-2.672,11.563-2.672,17.266c0,12.359,3.969,24.141,10.984,33.828c3.531,4.922,7.797,9.25,12.797,12.859c4.906,3.625,10.547,6.516,16.688,8.391l0.656,0.219l64.25,14.094l60.859,13.297l105.672,23.125c5.125,1.156,10.328,1.672,15.531,1.672c17.703,0,34.984-6.359,48.578-18.297l3.609-3.172l125.469-111.094l41.781-37C513.16,259.408,513.738,249.814,508.176,243.518z'/%3E%3C/svg%3E");
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-right: 8px;
    margin-top: 5px;
    vertical-align: top;
    opacity: 1;
}


.book-stats p::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='black' d='M508.176,243.518c-5.5-6.281-15.109-6.859-21.391-1.313l-44.672,39.547L315.926,393.408c-7.953,7.016-18.078,10.781-28.484,10.781c-3.031,0-6.063-0.297-9.109-0.938l-72.125-15.984l-87.094-19.219l-61.078-13.516l-8.734-1.953c-2.766-0.938-5.219-2.156-7.375-3.766c-3.469-2.516-6.219-5.781-8.109-9.531c-1.938-3.766-2.953-7.953-2.953-12.219c0-2.609,0.438-5.344,1.219-8.016c0.953-2.891,2.313-5.5,3.984-7.813c2.453-3.469,5.781-6.219,9.531-8.094c3.703-1.953,7.875-2.953,12.156-2.953c0.719,0,1.438,0.063,2.156,0.063l62.953,13.594l146,31.578c18.078,3.969,36.938-0.938,50.813-13.219l89.766-79.078l91.656-80.734c8.234-7.297,11.703-18.578,8.891-29.188c-2.75-10.703-11.281-18.875-22.047-21.188l-11.422-2.453l-83.266-18L287.801,78.799c-18.063-3.969-36.922,0.938-50.813,13.234L96.129,215.768L53.77,252.986L16.91,285.361c-1.516,1.734-2.813,3.469-3.969,5.344c-0.656,0.797-1.234,1.516-1.813,2.391c-3.609,4.922-6.5,10.547-8.453,16.703c-1.813,5.703-2.672,11.563-2.672,17.266c0,12.359,3.969,24.141,10.984,33.828c3.531,4.922,7.797,9.25,12.797,12.859c4.906,3.625,10.547,6.516,16.688,8.391l0.656,0.219l64.25,14.094l60.859,13.297l105.672,23.125c5.125,1.156,10.328,1.672,15.531,1.672c17.703,0,34.984-6.359,48.578-18.297l3.609-3.172l125.469-111.094l41.781-37C513.16,259.408,513.738,249.814,508.176,243.518z'/%3E%3C/svg%3E");
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-right: 8px;
    margin-top: 5px;
    vertical-align: top;
    opacity: 1;
}

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

@media screen and (max-width: 768px) {
    .hero-stats {
        /* display: none; */
    }

    .hero-stats-mobile {
        display: block;
    }

    .hero-stats-mobile p {
        margin: 0.25rem 0;
    }

}

.hero-stats p {
    margin: 0;
}



.italianHeader,
.spanishHeader,
.frenchHeader,
.dutchHeader {
    background-position: bottom !important;
}

.germanHeader {
    background-position: center !important;
}


.italianHeader h1,
.spanishHeader h1,
.frenchHeader h1,
.germanHeader h1,
.dutchHeader h1 {
    font-size: 4rem;
    text-transform: capitalize;
}




/* Sign up page */
/* Form Container */
/* LOGIN FORM */
.form-container {
    margin: auto;
    padding: 0 20px;
    background: var(--surface);
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* Form Title */
.form-container h1 {
    text-align: center;
    margin-bottom: 20px;
    color: var(--text);
    font-size: 40px;
}

/* Form Group */
.form-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 15px;
}

/* Labels */
.form-group label {
    margin-bottom: 5px;
    font-weight: 600;
    color: var(--text);
}

.form-group .signupFields {
    flex: 2;
}

.form-group .signupFields input,
.form-group .signupFields textarea {
    width: 100%;
}

.form-group .signupFields .error-message {
    color: firebrick;
    font-weight: bold;
    padding: 5px;
    font-size: 14px;
}

/* Input Fields */
.form-group input {
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: 5px;
    font-size: 16px;
    transition: border-color 0.3s ease;
}

.form-group input:focus {
    border-color: #007bff;
    outline: none;
}

/* Responsive Layout */
@media (min-width: 768px) {
    .form-group {
        flex-direction: row;
        align-items: center;
    }

    .form-group label {
        flex: 1;
        margin-bottom: 0;
        margin-right: 10px;
        text-align: left;
    }

    .form-group input {
        flex: 2;
    }

    .loginFormLinks p {
        margin: 0.75rem 0 0 0;
    }

    .checkbox-group {
        flex: 1;
    }

    .checkbox-group .checkbox-label {
        font-weight: 500;
    }
}

/* ALERTS */



.alert {
    padding: 15px;
    font-size: 20px;
    color: white;
    font-weight: bold;
    width: 80%;
    position: fixed;
    max-width: fit-content;
    border-radius: 5px;
    top: 125px;
    left: 25px;
}

.alert-success {
    background: darkgreen;
}

.alert-info {
    background: orange;
}

.alert-danger {
    background: firebrick;
}




.flash-message {
    animation: flashMessage 5s ease-in-out forwards;
}

@keyframes flashMessage {
    0% {
        opacity: 0;
        transform: translateY(-10px);
    }

    5% {
        opacity: 1;
        transform: translateY(0);
    }

    95% {
        opacity: 1;
        transform: translateY(0);
    }

    100% {
        opacity: 0;
        transform: translateY(-10px);
        pointer-events: none;
    }
}

/* GENERAL KEYFRAME */

/* animation: fadeIn 2s 0.5s forwards; */

@keyframes fadeIn {
    from {
        opacity: 0;
        /* Start invisible */
    }

    to {
        opacity: 1;
        /* End fully visible */
    }
}

@keyframes slideInFromRight {
    from {
        transform: translateX(100%);
    }

    to {
        transform: translateX(0%);
    }
}

/* SWIPER STYLES */

.languageSlider .swiper-pagination {
    margin-top: 1rem;
    position: static;
}

.mobileOnly {
    display: none;
}

@media screen and (max-width: 768px) {
    .mobileOnly {
        display: block;
    }
}

.desktopOnly {
    display: block;
}

@media screen and (max-width: 768px) {
    .desktopOnly {
        display: none;
    }
}

.makeFlex {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 20px;
    font-weight: bold;
}

span[aria-current="page"] span {
    text-decoration: underline;
}

/* Previous/Next buttons - active state */
#previous_page,
#next_page {
    width: 50px;
    height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: all 0.2s ease;
}

#next_page {
    margin-right: -18px;
}

/* Previous/Next buttons - disabled state */
#no_previous_page,
#no_next_page {
    width: 50px;
    height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0.3;
    cursor: not-allowed;
}

/* Hover effects */
#previous_page:hover,
#next_page:hover {
    background-color: #f3f4f6;
    color: #3b82f6;
}

/* Page number links */
nav a[href*="page="] {
    padding: 5px;
    border-radius: 4px;
    transition: all 0.2s ease;
    color: blue;
}


#no_next_page_mobile,
#no_previous_page_mobile,
#next_page_mobile,
#previous_page_mobile {
    padding: 5px;
    height: 45px;

}


nav a[href*="page="]:hover {
    background-color: #f3f4f6;
    color: firebrick;
}

/* Current page enhancement */
span[aria-current="page"] span {
    text-decoration: underline;
    color: firebrick;
}

.bookSummary br {
    margin-bottom: 1rem;
}

.bookSummary br:nth-of-type(even) {
    display: none;
}

#countries-list option {
    font-size: 50px;
}

/* Make the dropdown arrow visible and clickable */
input[list]::-webkit-calendar-picker-indicator {
    display: block;
    opacity: 1;
    cursor: pointer;
}

/* For Firefox */
input[list]::-moz-list-arrow {
    display: block;
}

/* Optional: Style the input to look more like a select */
input[list] {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.7rem center;
    background-size: 1em;
    padding-right: 2.5rem;
    padding-left: 0.5rem;
}

.contentSectionLegal h2,
.contentSectionLegal h3 {
    margin-top: 1rem;
}

.subsection-list {
    list-style: circle;
    margin-left: 15px;
}

/* ACCORDEON DETAILS STYLES */

/* Content Accordion Specific Styles */
.content-accordion {
    background: var(--surface);
    border: 1px solid border border-radius: 12px;
    margin-bottom: 1.25rem;
    transition: border-color 0.2s ease;
    overflow: hidden;
}

.content-accordion:hover {
    border-color: var(--text);
    ;
}

/* .content-accordion:hover {
    border-width: 4px;
} */

/* Accordion Header/Summary */
.content-accordion__header {
    cursor: pointer;
    user-select: none;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    background: transparent;
    transition: background-color 0.2s ease;
}

.content-accordion__header img {
    height: 75px;
    width: 75px;
    display: inline-block;
}

.accordion__header_container.guidedLearning img {
    height: 125px;
    width: auto;
    display: inline-block;
}



/* Drill block */

select {
    padding: 8px 12px;
    border: 2px solid #3498db;
    border-radius: 4px;
    background-color: #f8f9fa;
    font-family: 'Arial', sans-serif;
    font-size: 16px;
    color: #333;
}

details.chapter-drill-block {
    border: 1px solid black;
}

details.chapter-drill-block .accordion__header_container h3 {
    margin: 1rem 0;
}

.drill-option .accordion__header_container img {
    width: 75px;
    height: 75px;

}

.accordion__header_container {
    display: flex;
    justify-content: center;
    gap: 15px;
    align-items: center;
    margin-right: 15px;
}


.contentAccordionGeneralInfo .content-accordion__body p {
    margin: 0;
    padding: 5px;
}

/* Remove default marker */
.content-accordion__header::-webkit-details-marker {
    display: none;
}

/* Custom arrow indicator */
.content-accordion__header::after {
    content: '';
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 8px solid #6b7280;
    transition: transform 0.3s ease, border-color 0.2s ease;
    flex-shrink: 0;
    margin-left: 1rem;
}

.content-accordion[open]>.content-accordion__header::after {
    transform: rotate(180deg);
}

/* Specifieke guided content header styling */

.guided-learning-intro .content-accordion {
    background: var(--cardGradient);
}

.guided-learning-intro .content-accordion__header h2 {
    font-size: 1.5rem;
}


/* Header title styling */
.content-accordion__header h2 {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text);
    line-height: 1.5;
}

/* Accordion Body/Content */
.content-accordion__body {
    padding: 0 1.5rem 1.5rem;
    color: var(--text);
    line-height: 1.6;
}

.content-accordion__body p {
    margin: 0.5rem 0;
}

.content-accordion__body p:first-child {
    margin-top: 0;
}

.content-accordion__body p:last-child {
    margin-bottom: 0;
}

/* Smooth reveal animation */
.content-accordion[open] .content-accordion__body {
    animation: accordionSlide 0.35s ease;
}

@keyframes accordionSlide {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Optional: Add open state indicator for better UX */
.content-accordion[open] {
    border-color: #9ca3af;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}

/* Mobile responsive adjustments */
@media (max-width: 640px) {
    .content-accordion {
        border-radius: 8px;
        margin-bottom: 1rem;
    }

    .content-accordion__header {
        padding: 10px;
    }

    .content-accordion__header h2 {
        font-size: 1rem;
    }

    .content-accordion__body {
        padding: 0;
    }
}

.breadcrumb a {
    text-decoration: underline;
}

/* Guided Learning border */

.guidedLearning {
    color: var(--text);
    /* border-width: 2px;
    border-style: solid; */
}

.guidedLearning-a1 {
    border-color: var(--entryLevel);
}

.guidedLearning-a2 {
    border-color: var(--beginnerLevel);
}

.guidedLearning-b1 {
    border-color: var(--intermediateLevel);
}

.guidedLearning-b2 {
    border-bottom: var(--upperIntermediateLevel);
}

.guidedLearning-b1 {
    border-bottom: var(--advancedLevel);
}

/* FOOTER STYLES */

footer {
    padding: 50px 0 100px 0;
    color: var(--white) !important;
    background-color: var(--black);
    min-height: 100px;

}

.footerContainer {
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: repeat(3, 1fr);
    width: 90vw;
    max-width: 1250px;
    margin: auto;
    gap: 50px;
}

@media screen and (max-width: 768px) {
    .footerContainer {
        display: grid;
        grid-auto-flow: row;
        grid-template-columns: auto;

    }
}


.footerLogoContainer .logo img {
    width: 100px !important;
    height: 100px !important;
}

.footerLogoContainer .logo p {
    font-size: 35px;
}

.footerLogoContainer .logo {
    display: flex;
    flex-direction: column;
    align-items: start;
    /* Optional: centers content horizontally */
}

.footerContainer a {
    color: white;
}

.footerLanguagesContainer h4 a {
    font-size: 35px;
    margin-bottom: 15px;
    display: block;
}

.footerLanguagesContainer a,
.footerLinksContainer a {
    font-size: 16px;
    line-height: 30px
}

ul.languagesRoutes {
    margin-bottom: 25px;
}

.footerLinksContainer .language-toggle {
    padding: 5px;
    border: 1px solid white;
    color: white;
    border-radius: 5px;
    margin-bottom: 20px;
}

.footerLinksContainer .language-option {
    color: black;
}

footer .language-dropdown.show {
    top: 50px;
    margin-top: 0;
}


/* CONTENT-GRID / STORY-GRID CARDS */
.content-grid,
/* Single Story page for specific LEVEL A1/A2/B1/B2 etc */
.story-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    padding: 0;
}


@media (max-width: 1024px) {
    .story-grid {
        grid-template-columns: repeat(2, 1fr);
        /* 2 columns on tablets */
    }
}

@media (max-width: 768px) {
    .story-grid {
        grid-template-columns: 1fr;
        /* 1 column on mobile */
    }
}

.story-grid .story-item,
.content-grid .content-item {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--text);
    transition: transform 0.5s;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 4px 4px 4px rgba(43, 23, 23, 0.468);
    height: 500px;
    background: var(--surface);
}

/* Fix for cover image and image display */
.story-grid .story-item .cover_image,
.content-grid .content-item .cover_image {
    flex: 1;
    position: relative;
    /* Keep this for absolute positioned children */
    background-image: url("/images/no-default-cover.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Make the image fill the container using absolute positioning */
.story-grid .story-item .storyItemImage,
.content-grid .content-item .storyItemImage {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

.blog-story-grid.story-grid .story-item .storyItemImage,
.blog-story-grid.content-grid .content-item .storytItemImage {
    position: relative;
}

.story-grid .story-item:hover,
.content-grid .content-item:hover {
    transform: scale(1.05);
    box-shadow: 4px 4px 15px rgba(43, 23, 23, 0.468);
}


.story-grid .story-item a,
.content-grid .content-item a {
    text-decoration: none;
}

.story-grid .story-item h2,
.content-grid .content-item h2 {
    text-decoration: none;
    text-align: center;
    padding: 5px;
    color: var(--text);
    /* min-height:92px; */
    font-size: 1.15rem;
    line-height: 30px;
    margin-bottom: 0;
}

.cover_image {
    position: relative;
}

.story-grid .showChapterProgress,
.content-grid .showChapterProgress {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 5;
    background: white;
    font-size: 14px;
    font-weight: semi-bold;
    font-weight: bold;
    padding: 10px;
    transform: translate(-50%, -50%);
    border-radius: 5px;
    opacity: 0.80;
}

.story-grid .showChapterProgress p,
.content-grid .showChapterProgress p {
    margin: 0;
}

.story-grid .showChapterProgress p.totalPages,
.content-grid .showChapterProgress p.totalPages {
    margin-top: -10px;
}

.story-grid .story-meta,
.content-grid .story-meta {
    position: absolute;
    top: 5px;
    left: 5px;
}

.story-meta .item-level,
.story-meta .item-level {
    color: white;
    font-weight: bold;
    border-radius: 5px;
    width: fit-content;
    padding: 0 10px;
    margin-top: 5px;
}

.story-grid .wordCount,
.content-grid .wordCount {
    padding: 0 5px;
    color: white;
    display: flex;
    align-content: center;
    gap: 5px;
    font-weight: bold;
    font-size: 16px;
    border-radius: 5px;
    margin-bottom: 5px;
}

.story-grid .storyLanguageFlags,
.content-grid .storyLanguageFlags {
    position: absolute;
    top: 5px;
    right: 5px;
    background: rgba(255, 255, 255, 0.461);
    padding: 10px;
    border-radius: 5px;
    display: flex;
    flex-direction: row;
    gap: 5px;
}

.story-grid .storyLanguageFlags img,
.content-grid .storyLanguageFlags img {
    width: 35px;
    border: none !important;
}

.story-grid .story-meta svg,
.content-grid .story-meta svg {
    height: 28px;
    width: 28px;
}

.genres {
    position: absolute;
    bottom: 5px;
    left: 5px;
    display: flex;
    flex-wrap: wrap-reverse;
    gap: 5px;
}

.genres .badge {
    padding: 0 5px;
    border-radius: 5px;
    color: white;
    font-weight: bold;
    font-size: 14px;
}

.clarificationTitlea1 {
    display: block;
    font-size: 1rem;
    font-weight: 500;
    margin: 0;
    margin-top: -1rem;
}

.storyChapter .clarificationTitlea1 {
    margin-top: 0;
}

.story-meta {
    text-align: center;
}

.story-grid .story-summary {
    padding: 5px 10px;

    color: var(--text);
}

.story-grid .story-summary p {
    margin: 0;
    font-size: 1rem;
    line-height: 1.4rem;
}

.buttonReadThisStory {
    text-align: center;
}

.story-grid .story-item .buttonReadThisStory {
    padding: 15px;
    color: white;
    font-weight: bold;
    margin: 0;
}

.type .itemType {
    margin: 0;
    text-align: center;
    font-weight: bold;
    color: white;
    font-size: 18px;
}

.story-item a {
    display: flex;
    flex-direction: column;
    height: 100%;
    /* Make the link fill the entire container */
    text-decoration: none;
    /* Remove default link underline */
    color: black;
}



/* Grid Keuzekaartje betalen */


/* Animation triggers when .animate class is added */
.contentSection.storySuccess,
#grid-column-keuzeKaartje.animate {
    animation: fadeIn 1.5s ease-in forwards;
}

.contentSection.storySuccess h2,
.contentSection.storySuccess a {
    color: green;
}

.underline {
    text-decoration: underline;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(450px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* General Animation */

/* Animation for tab switch */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* SWIPER SETTINGS */


.swiper-slide {
    transition: all 0.3 ease-in-out;
}

.swiper-slide:hover {
    transform: scale(1.001) !important;
}

.swiper-container-wrapper {
    position: relative;
    padding: 0px;
    /* Space for arrows */
}

.swiper-container-wrapper .swiper-button-prev,
.swiper-container-wrapper .swiper-button-next {
    position: absolute;
    top: 50%;
    z-index: 2;
    color: var(--entryLevel);
}

.swiper-container-wrapper .swiper-button-prev {
    left: -50px;
}

.swiper-container-wrapper .swiper-button-next {
    right: -50px;
}


.swiper-container-wrapper .swiper-button-prev:hover,
.swiper-container-wrapper .swiper-button-next:hover {
    transform: scale(1.2);
}

@media screen and (max-width: 768px) {
    .swiper-container-wrapper {
        padding-right: 15px;
        padding-left: 15px;
    }

    .swiper-container-wrapper .swiper-button-prev {
        left: -20px;
    }

    .swiper-container-wrapper .swiper-button-next {
        right: -20px;
    }
}

/* STIJLEN VOOR 3 kaartjes account (free account / maandelijks / jaarlijks */


/*  */
/* PRijzen */
/*  */

/* Desktop (above 1240px): Grid layout with 3 columns */
@media (min-width: 1241px) {
    .subscription-swiper .swiper-wrapper {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
        transform: none !important;
        transition: none !important;
    }

    .subscription-swiper .swiper-slide {
        width: auto !important;
        margin-right: 0 !important;
    }

    .subscription-cards-prev,
    .subscription-cards-next,
    .subscription-cards-pagination {
        display: none !important;
    }
}

/* Tablet (768px to 1240px): Special grid layout */
@media screen and (min-width: 768px) and (max-width: 1240px) {
    .subscription-swiper .swiper-wrapper {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "a a"
            "b c";
        gap: 25px;
        transform: none !important;
        transition: none !important;
    }

    .subscription-swiper .swiper-slide {
        width: auto !important;
        margin-right: 0 !important;
    }

    .subscription-cards-prev,
    .subscription-cards-next,
    .subscription-cards-pagination {
        display: none !important;
    }

    /* Grid areas for the cards */
    .grid-3-column {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "a a"
            "b c";
        gap: 25px;
    }

    .grid-3-column .grid-3-column-inner:nth-child(2),
    #yearlySubCard {
        grid-area: a;
        transform: scale(1);
    }

    .grid-3-column .grid-3-column-inner:nth-child(1),
    #monthlySubCard {
        grid-area: b;
    }

    .grid-3-column .grid-3-column-inner:nth-child(3),
    #singlePurchaseCard {
        grid-area: c;
    }
}

/* Mobile: Let swiper handle it */
@media (max-width: 767px) {
    .subscription-swiper .swiper-wrapper {
        display: flex;
    }

    .subscription-cards-wrapper {
        position: relative;
    }

    /* Position navigation buttons */
    .subscription-cards-wrapper .swiper-button-prev,
    .subscription-cards-wrapper .swiper-button-next {
        top: 50%;
        transform: translateY(-50%);
    }

    #grid-column-keuzeKaartje h3.keuzekaartjeOmschrijving {
        font-size: 1.5rem;
    }

    .paginationKeuzekaartjes {
        margin-top: 100px !important;
    }
}

/* Base grid setup */
.grid-3-column {
    display: grid;
    grid-template-columns: 1fr;
    gap: 50px;
    grid-auto-flow: row;
}

/* Desktop grid (above 1240px) */
@media screen and (min-width: 1241px) {
    .grid-3-column {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 25px;
        margin-top: 1rem;
    }
}

#grid-column-keuzeKaartje {
    padding: 2rem 10px 10px 10px;
}

.grid-3-column ul {
    font-weight: 500;
    margin-bottom: 1rem;
    color: black;
}

.best-choice-badge {
    position: absolute;
    top: -20px;
    left: 20px;
    background: rgb(234, 208, 57);
    color: white;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: bold;
}

.grid-column-keuzeKaartje {
    scroll-margin-top: 400px;
}

.grid-3-column-inner {
    /* background-color: rgb(230, 235, 238); */
    background-color: var(--surface);
    border: 3px solid var(--border);
    border-radius: 10px;
    padding: 10px;
    display: flex;
    position: relative;
    flex-direction: column;
    box-shadow: 4px 6px 12px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
}

.grid-3-column-inner:hover {
    transform: scale(1.025);
    box-shadow: 6px 10px 20px rgba(0, 0, 0, 0.25);
}

/* Special treatment for the yearly/best choice card (2nd card) */
.grid-3-column-inner:nth-child(2) {
    transform: scale(1.05);
    border-color: gold;
    box-shadow: 4px 6px 16px rgba(255, 165, 0, 0.3);
}

.grid-3-column-inner:nth-child(2):hover {
    transform: scale(1.075);
    box-shadow: 6px 12px 24px rgba(255, 165, 0, 0.4);
}

/* Reset scale for tablet view */
@media screen and (min-width: 768px) and (max-width: 1240px) {
    .grid-3-column-inner:nth-child(2) {
        transform: scale(1);
    }

    .grid-3-column-inner:nth-child(2):hover {
        transform: scale(1.025);
    }
}

.grid-3-column-inner h3 {
    margin-bottom: 0;
    text-align: center;
    min-height: 64px;
}

.grid-3-column-inner img {
    width: 150px;
    margin: 0 auto;
}

.grid-3-column-inner .keuzeKaartjePrice {
    font-size: 30px;
    line-height: 2rem;
    text-align: center;
    font-weight: 700;
    color: #551a8b;
}

.grid-3-column-inner .keuzeKaartjePrice .pricePerMonth {
    font-size: 20px;
    font-weight: 600;
}

.grid-3-column-inner .keuzekaartjeOmschrijving {
    font-size: 2rem;
    line-height: 2.5rem;
    font-weight: 600;
    color: #551a8b;
}

.keuzeKaartjeListItem {
    display: flex;
    gap: 15px;
    align-items: center;
    margin-left: 15px;
    font-size: 18px;
    text-align: start;
    fill: var(--border);
}

@media screen and (max-width: 768px) {
    .keuzeKaartjeListItem {
        gap: 10px;
        margin-left: 5px;
        font-size: 16px;

    }
}

.grid-3-column-inner p {
    flex-grow: 1;
}

.grid-column-keuzeKaartje {
    opacity: 0;
}

.button.buttonKeuzeKaartje {
    margin: 0;
    background: steelblue;
    color: white;
    text-align: center;
    font-size: 18px;
    font-weight: 600;
}

.button.buttonKeuzeKaartje:hover {
    transform: scale(1);
}

/* FORM header for signup and auth forms */
/* NOW GENERAL STYLES */
.form-container .form-header {
    display: flex;
    align-items: center;
    gap: 1rem;

}

.form-container .form-header h1 {
    flex-grow: 1;
    text-align: center;
    font-size: 45px;

}

.form-container .form-header img {
    height: 150px;
}

@media screen and (max-width: 768px) {
    .form-container .form-header {
        flex-direction: column;
        gap: 0.5rem;
    }
}

#signup-form {
    padding: 20px 0;
}

.signupForm {
    /* display: grid; */
    /* place-items:center; */
}

.loginOuterFlex {
    display: flex;
    align-items: center;
    margin-bottom: 2rem;
}

@media screen and (max-width: 768px) {
    .loginOuterFlex {
        flex-direction: column;
    }
}

.signupForm .form-container {
    padding: 20px;
}

/* PASSWORD RESET CSS  */
.loginFormLinks {
    display: flex;
    justify-content: space-between;
    margin-top: 0.5rem;
    padding: 1rem 0;
    flex-wrap: wrap;
}

.loginOuterFlex img {
    height: 100px;
}

.loginInnerFlex {
    text-align: center;
    flex-grow: 1;
}

/* Responsive Layout */
@media (min-width: 768px) {
    .loginFormLinks {
        display: flex;
        justify-content: space-between;
        padding: 20px 0;
    }

    .loginFormLinks p {
        margin: 0.75rem 0 0 0;
    }
}

.signup-step {
    margin-top: 2rem;
}

/* STYLING OF INPUT  */

.filters-dropdown {
    position: relative;
    display: inline-block;
}

.filters-dropdown>summary {
    list-style: none;
    cursor: pointer;
}

.filters-dropdown>summary::-webkit-details-marker {
    display: none;
}

.filters-dropdown-panel {
    position: absolute;
    z-index: 20;
    margin-top: 0.5rem;
    min-width: 280px;
    padding: 1rem;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
}

.filters-stacked .filter-row {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-bottom: 0.75rem;
}

.filters-stacked .filter-label {
    font-size: 0.85rem;
    color: #333;
}

.filters-stacked .filter-select {
    width: 100%;
}

.filter-actions {
    display: flex;
    justify-content: flex-end;
}

/*  */
/* Pagination */
/*  */

.paginationCount {
    text-align: center;
    margin-top: 2rem;
    color: var(--text);
    font-size: 0.9rem;
}