/* set base styles for the page */
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #f8f9fa;
            color: #333;
            margin: 0;
            padding: 20px;
            display: flex;
            flex-direction: column;
            min-height: 100vh;
        }
        
        /* style the header as a flexible navigation bar */
        header {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: space-between;
            padding-bottom: 15px;
            margin-bottom: 25px;
            border-bottom: 1px solid #e9ecef;
        }

        /* flex container to align the logo and title horizontally */
        .brand-container {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .logo-link {
            display: flex;
            align-items: center;
            text-decoration: none;
            transition: opacity 0.2s ease;
        }

        .logo-link:hover {
            opacity: 0.8;
        }

        /* restrict the height to eliminate the massive white box from the jpeg */
        .site-logo {
            height: 55px;
            width: auto;
            border-radius: 6px;
            mix-blend-mode: multiply;
        }

        /* remove the default margin so it aligns perfectly with the logo */
        header h1 {
            margin: 0;
            font-size: 1.5rem;
            text-align: left;
            color: #2c3e50;
        }

        /* organize the navigation links */
        nav {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        nav a {
            margin: 0;
            color: #007bff;
            text-decoration: none;
            font-weight: bold;
            font-size: 0.95rem;
        }

        nav a:hover {
            text-decoration: underline;
        }

        /* stack the header elements neatly on small mobile screens */
        @media (max-width: 650px) {
            header {
                flex-direction: column;
                justify-content: center;
                gap: 15px;
            }
            
            .brand-container {
                flex-direction: column;
                text-align: center;
            }
            
            header h1 {
                text-align: center;
            }
        }

        /* main container til at skubbe footeren ned i bunden */
        main {
            flex: 1;
        }

        /* style den nye footer */
        footer {
            text-align: center;
            padding: 30px 20px 10px 20px;
            margin-top: 40px;
            border-top: 1px solid #e9ecef;
            font-size: 0.9rem;
            color: #6c757d;
        }
        footer a {
            color: #007bff;
            text-decoration: none;
            margin: 0 5px;
        }
        footer a:hover {
            text-decoration: underline;
        }
        footer p {
            margin: 8px 0;
        }

        /* center and style the main title */
        h1 {
            text-align: center;
            color: #2c3e50;
            margin-bottom: 20px;
        }
        .disclaimer {
            max-width: 1200px;
            margin: 0 auto 20px auto;
            padding: 14px 16px;
            border: 2px solid #dc3545;
            border-radius: 8px;
            background-color: #fff5f5;
            color: #7a1a1a;
            font-size: 1.1rem;
            font-weight: 800;
            line-height: 1.4;
            text-align: center;
        }
        .site-notice {
            max-width: 1200px;
            margin: 0 auto 16px auto;
            padding: 14px 16px;
            border: 2px solid #111111;
            border-radius: 8px;
            background-color: #ffffff;
            color: #111111;
            font-size: 1rem;
            font-weight: 700;
            line-height: 1.45;
            text-align: center;
            box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
        }
        .theme-controls {
            max-width: 1200px;
            margin: 0 auto 16px auto;
            display: flex;
            justify-content: flex-end;
            gap: 8px;
        }
        #themeToggle {
            border: 1px solid #ced4da;
            background-color: #ffffff;
            color: #495057;
            border-radius: 5px;
            width: 42px;
            height: 42px;
            padding: 0;
            font-size: 1.15rem;
            font-weight: normal;
            line-height: 1;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }
        #themeToggle:hover {
            background-color: #f1f3f5;
        }
        .language-menu-wrap {
            position: relative;
        }
        #languageMenuButton {
            border: 1px solid #ced4da;
            background-color: #ffffff;
            color: #495057;
            border-radius: 5px;
            height: 42px;
            padding: 0 12px;
            font-size: 0.85rem;
            font-weight: bold;
            line-height: 1;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 72px;
        }
        #languageMenuButton:hover {
            background-color: #f1f3f5;
        }
        .language-dropdown {
            position: absolute;
            right: 0;
            top: calc(100% + 6px);
            min-width: 140px;
            padding: 6px;
            border: 1px solid #ced4da;
            border-radius: 6px;
            background-color: #ffffff;
            box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);
            display: none;
            z-index: 1200;
        }
        .language-dropdown.open {
            display: block;
        }
        .language-option {
            width: 100%;
            border: 1px solid #ced4da;
            background-color: #ffffff;
            color: #495057;
            border-radius: 5px;
            padding: 8px 10px;
            font-size: 0.85rem;
            font-weight: bold;
            text-align: left;
            cursor: pointer;
        }
        .language-option + .language-option {
            margin-top: 6px;
        }
        .language-option:hover {
            background-color: #f1f3f5;
        }
        .language-option.active {
            background-color: #e9f7ef;
            border-color: #b7e4c7;
            color: #1b5e20;
        }
        /* style the search input field */
        #searchInput {
            width: 100%;
            max-width: 500px;
            padding: 12px;
            margin: 0 auto 16px auto;
            display: block;
            border: 1px solid #ced4da;
            border-radius: 5px;
            font-size: 16px;
            box-sizing: border-box;
        }
        .filter-controls {
            max-width: 1200px;
            margin: 0 auto 30px auto;
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
            align-items: center;
        }
        .filter-toggle-wrap {
            max-width: 1200px;
            margin: 0 auto 12px auto;
            display: flex;
            justify-content: flex-start;
            gap: 10px;
            flex-wrap: wrap;
        }
        #filterToggleBtn {
            border: 1px solid #ced4da;
            background-color: #ffffff;
            color: #495057;
            border-radius: 5px;
            padding: 10px 12px;
            font-size: 0.9rem;
            font-weight: bold;
            cursor: pointer;
        }
        #filterToggleBtn:hover {
            background-color: #f1f3f5;
        }
        #mapToggleBtn {
            border: 1px solid #ced4da;
            background-color: #ffffff;
            color: #495057;
            border-radius: 5px;
            padding: 10px 12px;
            font-size: 0.9rem;
            font-weight: bold;
            cursor: pointer;
        }
        #mapToggleBtn:hover {
            background-color: #f1f3f5;
        }
        #mapToggleBtn.active {
            background-color: #e9f7ef;
            border-color: #b7e4c7;
            color: #1b5e20;
        }
        #filterToggleBtn.active {
            background-color: #e9f7ef;
            border-color: #b7e4c7;
            color: #1b5e20;
        }
        .filter-controls.hidden {
            display: none;
        }
        .map-wrap {
            max-width: 1200px;
            margin: 0 auto 20px auto;
            border: 1px solid #e9ecef;
            border-radius: 8px;
            background-color: #ffffff;
            padding: 10px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
        }
        .map-wrap.hidden {
            display: none;
        }
        .map-embed {
            width: 100%;
            height: 430px;
            border: 0;
            border-radius: 6px;
        }
        .map-note {
            margin: 8px 2px 0 2px;
            font-size: 0.85rem;
            color: #6c757d;
        }
        .map-status {
            margin: 8px 2px 0 2px;
            font-size: 0.85rem;
            color: #495057;
        }
        .map-info-window {
            color: #000 !important;
        }
        .map-info-window strong {
            color: #000 !important;
        }
        .map-go-to-card-btn {
            margin-top: 8px;
            border: 1px solid #ced4da;
            background-color: #ffffff;
            color: #212529;
            border-radius: 5px;
            padding: 6px 10px;
            font-size: 0.82rem;
            font-weight: bold;
            cursor: pointer;
        }
        .map-go-to-card-btn:hover {
            background-color: #f1f3f5;
        }
        .gm-style .gm-style-iw,
        .gm-style .gm-style-iw-c,
        .gm-style .gm-style-iw-d,
        .gm-style .gm-style-iw-d * {
            color: #000 !important;
        }
        .map-restaurant-list {
            margin-top: 10px;
            max-height: 220px;
            overflow-y: auto;
            border: 1px solid #e9ecef;
            border-radius: 6px;
            padding: 6px;
            background-color: #ffffff;
        }
        .map-restaurant-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            padding: 6px;
            border-radius: 4px;
        }
        .map-restaurant-item:hover {
            background-color: #f8f9fa;
        }
        .map-restaurant-btn {
            border: 1px solid #ced4da;
            background-color: #ffffff;
            color: #495057;
            border-radius: 5px;
            padding: 5px 8px;
            font-size: 0.8rem;
            cursor: pointer;
            font-weight: bold;
            flex-shrink: 0;
        }
        .map-restaurant-btn:hover {
            background-color: #f1f3f5;
        }
        .map-restaurant-name {
            font-size: 0.88rem;
            color: #495057;
            line-height: 1.3;
        }
        #hidePartialBtn {
            border: 1px solid #ced4da;
            background-color: #ffffff;
            color: #495057;
            border-radius: 5px;
            padding: 10px 12px;
            font-size: 0.9rem;
            font-weight: bold;
            cursor: pointer;
        }
        #hidePartialBtn.active {
            background-color: #e9f7ef;
            border-color: #b7e4c7;
            color: #1b5e20;
        }
        .filter-group {
            width: 100%;
        }
        .filter-title {
            font-size: 0.9rem;
            font-weight: bold;
            margin: 2px 0 8px 0;
            color: #495057;
        }
        .chip-list {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }
        .filter-chip {
            border: 1px solid #ced4da;
            background-color: #ffffff;
            color: #495057;
            border-radius: 999px;
            padding: 6px 10px;
            font-size: 0.85rem;
            cursor: pointer;
        }
        .filter-chip.active {
            background-color: #e9f7ef;
            border-color: #b7e4c7;
            color: #1b5e20;
        }
        /* create a responsive grid layout */
        .grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 20px;
            max-width: 1200px;
            margin: 0 auto;
        }
        /* style the restaurant cards */
        .card {
            background-color: #ffffff;
            border: 1px solid #e9ecef;
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
        }
        .card.card-highlight {
            box-shadow: 0 0 0 3px rgba(255, 193, 7, 0.65), 0 6px 12px rgba(0, 0, 0, 0.12);
            transition: box-shadow 0.2s ease;
        }
        /* style card typography */
        .card h2 {
            margin: 0 0 10px 0;
            font-size: 1.25rem;
            color: #007bff;
        }
        .card .restaurant-name-btn {
            border: 0;
            background: transparent;
            color: inherit;
            font: inherit;
            padding: 0;
            margin: 0;
            text-align: left;
            cursor: pointer;
        }
        .card .restaurant-name-btn:hover {
            text-decoration: underline;
        }
        .card .address {
            font-weight: bold;
            color: #495057;
            font-size: 0.9rem;
            margin: 0;
            white-space: normal;
            overflow: visible;
            text-overflow: unset;
        }
        .card .address.copy-address {
            cursor: pointer;
        }
        .card .address.copy-address:hover {
            text-decoration: underline;
        }
        .card .address-row {
            display: block;
            gap: 10px;
            margin-bottom: 10px;
        }
        .card .actions {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-top: 8px;
        }
        .card .action-btn {
            border: 1px solid #ced4da;
            background-color: #ffffff;
            color: #495057;
            border-radius: 5px;
            padding: 6px 10px;
            font-size: 0.85rem;
            cursor: pointer;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
        }
        .card .action-btn:hover {
            background-color: #f1f3f5;
        }
        .copy-toast {
            position: fixed;
            right: 20px;
            bottom: 20px;
            z-index: 1200;
            background-color: #1b5e20;
            color: #ffffff;
            border-radius: 6px;
            padding: 10px 12px;
            font-size: 0.9rem;
            font-weight: bold;
            opacity: 0;
            transform: translateY(12px);
            pointer-events: none;
            transition: opacity 0.2s ease, transform 0.2s ease;
        }
        .copy-toast.show {
            opacity: 1;
            transform: translateY(0);
        }
        .card .desc {
            margin: 0;
            font-size: 0.95rem;
            line-height: 1.5;
            color: #6c757d;
        }
        .card .halal-info {
            margin-bottom: 12px;
            padding: 10px 12px;
            border-radius: 6px;
            font-size: 0.9rem;
            line-height: 1.4;
            border: 1px solid transparent;
        }
        .card .halal-info strong {
            display: block;
            margin-bottom: 4px;
        }
        /* styling for the green full halal box */
        .card .halal-info.full {
            background-color: #e9f7ef;
            border-color: #b7e4c7;
            color: #1b5e20;
        }
        /* styling for the yellow partial halal box */
        .card .halal-info.partial {
            background-color: #fff8e1;
            border-color: #ffe082;
            color: #7a5d00;
        }

        @media (prefers-color-scheme: dark) {
            body {
                background-color: #0f1115;
                color: #e6e8eb;
            }

            /* tilføj mørkt tema for header og footer */
            header { border-color: #2f3640; }
            footer { border-color: #2f3640; color: #a7b0ba; }
            nav a { color: #66b3ff; }
            footer a { color: #66b3ff; }

            h1 { color: #f1f3f5; }
            .disclaimer {
                background-color: #3a1d1d;
                border-color: #ff6b6b;
                color: #ffd7d7;
            }
            #searchInput {
                background-color: #161b22;
                color: #e6e8eb;
                border-color: #2f3640;
            }
            #searchInput::placeholder { color: #9aa3ad; }
            #hidePartialBtn, #filterToggleBtn, #mapToggleBtn {
                background-color: #0f141b;
                color: #d0d7de;
                border-color: #3b434d;
            }
            #mapToggleBtn:hover, #filterToggleBtn:hover { background-color: #1c232d; }
            #mapToggleBtn.active, #filterToggleBtn.active, #hidePartialBtn.active {
                background-color: #143423;
                border-color: #2e7d57;
                color: #c8f5d9;
            }
            .filter-title { color: #d0d7de; }
            .filter-chip {
                background-color: #0f141b;
                color: #d0d7de;
                border-color: #3b434d;
            }
            .filter-chip.active {
                background-color: #143423;
                border-color: #2e7d57;
                color: #c8f5d9;
            }
            .card, .map-wrap {
                background-color: #161b22;
                border-color: #2f3640;
                box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
            }
            .map-note { color: #a7b0ba; }
            .map-status { color: #d0d7de; }
            .map-restaurant-list {
                background-color: #0f141b;
                border-color: #2f3640;
            }
            .map-restaurant-item:hover { background-color: #1c232d; }
            .map-restaurant-btn {
                background-color: #0f141b;
                color: #d0d7de;
                border-color: #3b434d;
            }
            .map-restaurant-btn:hover { background-color: #1c232d; }
            .map-restaurant-name { color: #d0d7de; }
            .card h2 { color: #66b3ff; }
            .card .restaurant-name-btn { color: inherit; }
            .card .address { color: #d0d7de; }
            .card .desc { color: #a7b0ba; }
            .card .action-btn {
                background-color: #0f141b;
                color: #d0d7de;
                border-color: #3b434d;
            }
            .card .action-btn:hover { background-color: #1c232d; }
            .card .halal-info.full {
                background-color: #143423;
                border-color: #2e7d57;
                color: #c8f5d9;
            }
            .card .halal-info.partial {
                background-color: #3a2f12;
                border-color: #8a6f2d;
                color: #ffe8a6;
            }
            #themeToggle,
            #languageMenuButton,
            .language-option {
                background-color: #0f141b;
                color: #d0d7de;
                border-color: #3b434d;
            }
            #themeToggle:hover,
            #languageMenuButton:hover,
            .language-option:hover { background-color: #1c232d; }
            .language-dropdown {
                background-color: #161b22;
                border-color: #2f3640;
                box-shadow: 0 6px 14px rgba(0, 0, 0, 0.45);
            }
            .language-option.active {
                background-color: #143423;
                border-color: #2e7d57;
                color: #c8f5d9;
            }
        }

        /* tilføj override klasser for det valgte tema */
        html[data-theme="dark"] body { background-color: #0f1115; color: #e6e8eb; }
        html[data-theme="dark"] header { border-color: #2f3640; }
        html[data-theme="dark"] footer { border-color: #2f3640; color: #a7b0ba; }
        html[data-theme="dark"] nav a { color: #66b3ff; }
        html[data-theme="dark"] footer a { color: #66b3ff; }
        html[data-theme="dark"] h1 { color: #f1f3f5; }
        html[data-theme="dark"] .disclaimer { background-color: #3a1d1d; border-color: #ff6b6b; color: #ffd7d7; }
        html[data-theme="dark"] #searchInput { background-color: #161b22; color: #e6e8eb; border-color: #2f3640; }
        html[data-theme="dark"] #searchInput::placeholder { color: #9aa3ad; }
        html[data-theme="dark"] #hidePartialBtn, html[data-theme="dark"] #filterToggleBtn, html[data-theme="dark"] #mapToggleBtn, html[data-theme="dark"] .filter-chip, html[data-theme="dark"] .map-restaurant-btn, html[data-theme="dark"] .card .action-btn, html[data-theme="dark"] #themeToggle, html[data-theme="dark"] #languageMenuButton, html[data-theme="dark"] .language-option {
            background-color: #0f141b; color: #d0d7de; border-color: #3b434d;
        }
        html[data-theme="dark"] #filterToggleBtn:hover, html[data-theme="dark"] #mapToggleBtn:hover, html[data-theme="dark"] .map-restaurant-btn:hover, html[data-theme="dark"] .card .action-btn:hover, html[data-theme="dark"] #themeToggle:hover, html[data-theme="dark"] #languageMenuButton:hover, html[data-theme="dark"] .language-option:hover { background-color: #1c232d; }
        html[data-theme="dark"] .language-dropdown { background-color: #161b22; border-color: #2f3640; box-shadow: 0 6px 14px rgba(0, 0, 0, 0.45); }
        html[data-theme="dark"] .language-option.active { background-color: #143423; border-color: #2e7d57; color: #c8f5d9; }
        html[data-theme="dark"] #filterToggleBtn.active, html[data-theme="dark"] #mapToggleBtn.active, html[data-theme="dark"] #hidePartialBtn.active, html[data-theme="dark"] .filter-chip.active {
            background-color: #143423; border-color: #2e7d57; color: #c8f5d9;
        }
        html[data-theme="dark"] .filter-title, html[data-theme="dark"] .map-status, html[data-theme="dark"] .map-restaurant-name, html[data-theme="dark"] .card .address { color: #d0d7de; }
        html[data-theme="dark"] .card, html[data-theme="dark"] .map-wrap { background-color: #161b22; border-color: #2f3640; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35); }
        html[data-theme="dark"] .map-note, html[data-theme="dark"] .card .desc { color: #a7b0ba; }
        html[data-theme="dark"] .map-restaurant-list { background-color: #0f141b; border-color: #2f3640; }
        html[data-theme="dark"] .map-restaurant-item:hover { background-color: #1c232d; }
        html[data-theme="dark"] .card h2 { color: #66b3ff; }
        html[data-theme="dark"] .card .restaurant-name-btn { color: inherit; }
        html[data-theme="dark"] .card .halal-info.full { background-color: #143423; border-color: #2e7d57; color: #c8f5d9; }
        html[data-theme="dark"] .card .halal-info.partial { background-color: #3a2f12; border-color: #8a6f2d; color: #ffe8a6; }

        /* keep the logo visible and clean in dark mode */
        html[data-theme="dark"] .site-logo {
            mix-blend-mode: normal;
            background-color: #ffffff;
            padding: 4px;
        }


        html[data-theme="light"] body { background-color: #f8f9fa; color: #333; }
        html[data-theme="light"] header { border-color: #e9ecef; }
        html[data-theme="light"] footer { border-color: #e9ecef; color: #6c757d; }
        html[data-theme="light"] nav a { color: #007bff; }
        html[data-theme="light"] footer a { color: #007bff; }
        html[data-theme="light"] h1 { color: #2c3e50; }
        html[data-theme="light"] .disclaimer { background-color: #fff5f5; border-color: #dc3545; color: #7a1a1a; }
        html[data-theme="light"] #searchInput { background-color: #ffffff; color: #333; border-color: #ced4da; }
        html[data-theme="light"] #searchInput::placeholder { color: #757575; }
        html[data-theme="light"] #hidePartialBtn, html[data-theme="light"] #filterToggleBtn, html[data-theme="light"] #mapToggleBtn, html[data-theme="light"] .filter-chip, html[data-theme="light"] .map-restaurant-btn, html[data-theme="light"] .card .action-btn, html[data-theme="light"] #themeToggle, html[data-theme="light"] #languageMenuButton, html[data-theme="light"] .language-option {
            background-color: #ffffff; color: #495057; border-color: #ced4da;
        }
        html[data-theme="light"] #filterToggleBtn:hover, html[data-theme="light"] #mapToggleBtn:hover, html[data-theme="light"] .map-restaurant-btn:hover, html[data-theme="light"] .card .action-btn:hover, html[data-theme="light"] #themeToggle:hover, html[data-theme="light"] #languageMenuButton:hover, html[data-theme="light"] .language-option:hover { background-color: #f1f3f5; }
        html[data-theme="light"] .language-dropdown { background-color: #ffffff; border-color: #ced4da; box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12); }
        html[data-theme="light"] .language-option.active { background-color: #e9f7ef; border-color: #b7e4c7; color: #1b5e20; }
        html[data-theme="light"] #filterToggleBtn.active, html[data-theme="light"] #mapToggleBtn.active, html[data-theme="light"] #hidePartialBtn.active, html[data-theme="light"] .filter-chip.active {
            background-color: #e9f7ef; border-color: #b7e4c7; color: #1b5e20;
        }
        html[data-theme="light"] .filter-title, html[data-theme="light"] .map-status, html[data-theme="light"] .map-restaurant-name, html[data-theme="light"] .card .address { color: #495057; }
        html[data-theme="light"] .card, html[data-theme="light"] .map-wrap { background-color: #ffffff; border-color: #e9ecef; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); }
        html[data-theme="light"] .map-note, html[data-theme="light"] .card .desc { color: #6c757d; }
        html[data-theme="light"] .map-restaurant-list { background-color: #ffffff; border-color: #e9ecef; }
        html[data-theme="light"] .map-restaurant-item:hover { background-color: #f8f9fa; }
        html[data-theme="light"] .card h2 { color: #007bff; }
        html[data-theme="light"] .card .restaurant-name-btn { color: inherit; }
        html[data-theme="light"] .card .halal-info.full { background-color: #e9f7ef; border-color: #b7e4c7; color: #1b5e20; }
        html[data-theme="light"] .card .halal-info.partial { background-color: #fff8e1; border-color: #ffe082; color: #7a5d00; }