<!DOCTYPE html>
<html lang= "no">
<head>
  <!-- PWA Styles and Scripts -->
  <link rel="stylesheet" href="/static/pwa.css">
  <script src="/static/pwa.js"></script>

    <link rel="shortcut icon" href="/static/logo-test.png">
    <link rel="apple-touch-icon" href="/static/logo-test.png">
    <meta name="msapplication-TileImage" content="/static/logo-test.png">
    <meta name="msapplication-TileColor" content="#ffffff">


<!-- Conditional Tracking Scripts -->




<!-- ExoClick Scripts (at bottom of page) -->


<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "WebSite",
  "name": "Conflingo",
  "url": "https://www.conflingo.com/no",
  "description": "Conflingo er et nytt norsk-utviklet sosialt medium som er rettet mot brukere i globalt, utforsk feeden, del innhold, kommenter og skap nye vennskap.",
  "publisher": {
    "@type": "Organization",
    "name": "Conflingo",
    "logo": "https://www.conflingo.com/static/conflingo-high-resolution-logo.png"
  },
  "mainEntityOfPage": {
    "@type": "WebPage",
    "@id": "https://www.conflingo.com/no"
  },
  "potentialAction": {
    "@type": "SearchAction",
    "target": "https://www.conflingo.com/search-results?q={search_term_string}",
    "query-input": "required name=search_term_string"
  }
}
</script>



<!-- NOTIFICATIONS START -->
<!-- Include jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<!-- Include Toastr for Toast Notifications -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>

<!-- Notifications Script -->
<script>
$(document).ready(function () {
  const notificationsUrl = 'https://chat_service-mikknu17.pythonanywhere.com/notifications';
  const clearNotificationsUrl = 'https://chat_service-mikknu17.pythonanywhere.com/notifications/clear';
  const authToken = 'Bearer ';

  // Toastr configuration
  toastr.options = {
    closeButton: true,
    timeOut: 5000, // Auto-dismiss after 5 seconds
    positionClass: 'toast-bottom-right', // Position toast above notification bell
    preventDuplicates: true, // Avoid duplicate toasts
    newestOnTop: true, // Display the newest toasts on top
    progressBar: true, // Show a progress bar
  };

  // Ensure the toast container is moved directly under the <body>
  function ensureToastContainerPosition() {
    const toastContainer = $('#toast-container');
    if (toastContainer.length) {
      $('body').append(toastContainer); // Ensure proper placement
    }
  }

  ensureToastContainerPosition();

  // Function to validate the auth token
  function isValidAuthToken(token) {
    return token && token.trim() !== '' && token.length > 10; // Ensure token is valid
  }

  // Add the notification bell dynamically if authToken is valid
  function addNotificationBell() {
    if (!isValidAuthToken(authToken)) {
      console.log('Invalid or missing auth token, hiding notification bell.');
      return; // Do not render if token is invalid
    }

    const bellHtml = `
      <div id="notification-bell-container">
        <div id="notification-bell" class="notification-bell">
          <i class="far fa-comment"></i>
          <span id="notification-count" class="notification-count" style="display: none;"></span>
        </div>
      </div>
    `;
    $('body').append(bellHtml);
  }

  // Add styles for the notification bell
  function addNotificationBellStyles() {
    const styles = `
      <style>
        #notification-bell-container {
          position: fixed;
          bottom: 10px;
          right: 10px;
          z-index: 1000;
        }
        .notification-bell {
          position: relative;
          background: white;
          color: black;
          border-radius: 40px;
          min-width: 48px;
          min-height: 48px;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
        }
        .notification-bell:hover {
          background: #ff4040;
        }
        .notification-bell .fa-comment {
          font-size: 24px;
        }
.notification-count {
  position: absolute;
  top: 5px; /* Original position */
  right: 5px; /* Original position */
  background: red;
  color: white;
  font-size: 12px;
  font-weight: bold;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: none; /* Hidden by default */
  display: flex; /* Flexbox for alignment */
  align-items: center; /* Vertical centering */
  justify-content: center; /* Horizontal centering */
  text-align: center; /* Ensure proper text alignment */
  line-height: 1; /* Prevent extra spacing around text */
}


        #toast-container {
          position: fixed !important;
          bottom: calc(20px + 60px) !important;
          right: 20px;
          z-index: 1100;
        }
        .toast {
          background: rgba(0, 0, 0, 0.7); /* Transparent black */
          color: white;
          border-radius: 8px;
          padding: 10px 15px;
          font-size: 14px;
          box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
          transition: background-color 0.3s ease;
        }
        .toast:hover {
          background: rgba(0, 0, 0, 0.9); /* Slightly darker black on hover */
        }
      </style>
    `;
    $('head').append(styles);
  }

  // Fetch notifications periodically
  function fetchNotifications() {
    if (!isValidAuthToken(authToken)) return; // Skip fetching if token is invalid

    $.ajax({
      url: notificationsUrl,
      method: 'GET',
      headers: {
        'Authorization': authToken
      },
      success: function (response) {
        // Update the notification bell with unread count
        updateNotificationBell(response.unread_count);

        // Show toast notifications for new messages
        displayToastNotifications(response.notifications);

        // Schedule the next poll
        setTimeout(fetchNotifications, 30000); // Poll every 30 seconds
      },
      error: function (error) {
        console.error('Error fetching notifications:', error);
        // Retry after a delay
        setTimeout(fetchNotifications, 60000); // Retry after 60 seconds
      }
    });
  }

  // Update notification bell count
  function updateNotificationBell(unreadCount) {
    const countElement = $('#notification-count');
    if (unreadCount > 0) {
      countElement.text(unreadCount).show(); // Show count if there are unread notifications
    } else {
      countElement.hide(); // Hide count container if no unread notifications
    }
  }

  // Display toast notifications for new notifications
  let displayedNotificationIds = [];
  function displayToastNotifications(notifications) {
    notifications.forEach(function (notification) {
      const chatId = notification.chat_id;
      const notificationId = notification.id;

      if (!displayedNotificationIds.includes(notificationId)) {
        const toastMessage = 'Du har fått en ny varsel';

        // Show the toast and attach click handler to navigate to chat room
        toastr.info(toastMessage, '', {
          onclick: function () {
            window.location.href = '/no/chat_room/' + chatId;
          }
        });

        displayedNotificationIds.push(notificationId);
      }
    });
  }

  // Clear notifications and redirect on bell click
  $(document).on('click', '#notification-bell', function () {
    if (!isValidAuthToken(authToken)) return;

    // Clear notifications
    $.ajax({
      url: clearNotificationsUrl,
      method: 'POST',
      headers: {
        'Authorization': authToken
      },
      success: function () {
        updateNotificationBell(0); // Clear the count
        console.log('Notifications cleared');
        window.location.href = '/no/your_matches'; // Redirect to matches page
      },
      error: function (error) {
        console.error('Error clearing notifications:', error);
        window.location.href = '/no/your_matches'; // Redirect even if clearing fails
      }
    });
  });

  // Initialize the notification system
  addNotificationBell(); // Add the bell if token is valid
  addNotificationBellStyles(); // Add required styles
  fetchNotifications(); // Start fetching notifications
});
</script>
 <!-- NOTIFICATIONS END -->
</script>
    <meta charset="UTF-8">
    <link rel="canonical" href="https://www.conflingo.com/no">
    <link rel="alternate" href="https://www.conflingo.com/no" hreflang="no" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Conflingo er et globalt nettsamfunn der du kan dele meninger, kommentere, og bygge relasjoner med andre brukere i Norge. Finn likesinnede, diskuter anonymt og skap nye vennskap.">
    <meta name="keywords" content="Conflingo, meninger, norsk innhold, sosiale medier, nettsamfunn, globalt nettsamfunn">
    <meta name="google-adsense-account" content="ca-pub-7425465590125571">
<meta name="yandex-verification" content="8938d31848bad64d" />

    <title>Conflingo Norge</title>
    <link rel="icon" type="image/x-icon" href="/static/logo-test.png">
    
    
    <style type="text/css">@font-face {font-family:ADLaM Display;font-style:normal;font-weight:400;src:url(/cf-fonts/s/adlam-display/5.0.3/latin-ext/400/normal.woff2);unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;font-display:swap;}@font-face {font-family:ADLaM Display;font-style:normal;font-weight:400;src:url(/cf-fonts/s/adlam-display/5.0.3/latin/400/normal.woff2);unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;font-display:swap;}@font-face {font-family:ADLaM Display;font-style:normal;font-weight:400;src:url(/cf-fonts/s/adlam-display/5.0.3/adlam/400/normal.woff2);unicode-range:U+061F,U+0640,U+2015,U+201B,U+2020-2021,U+2030,U+204F,U+25CC,U+2E28-2E29,U+2E41,U+1E900-1E95F;font-display:swap;}</style>
<style type="text/css">@font-face {font-family:Noto Sans;font-style:normal;font-weight:400;src:url(/cf-fonts/v/noto-sans/5.0.18/latin-ext/wght/normal.woff2);unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;font-display:swap;}@font-face {font-family:Noto Sans;font-style:normal;font-weight:400;src:url(/cf-fonts/v/noto-sans/5.0.18/vietnamese/wght/normal.woff2);unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;font-display:swap;}@font-face {font-family:Noto Sans;font-style:normal;font-weight:400;src:url(/cf-fonts/v/noto-sans/5.0.18/devanagari/wght/normal.woff2);unicode-range:U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+25CC,U+A830-A839,U+A8E0-A8FF;font-display:swap;}@font-face {font-family:Noto Sans;font-style:normal;font-weight:400;src:url(/cf-fonts/v/noto-sans/5.0.18/cyrillic-ext/wght/normal.woff2);unicode-range:U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;font-display:swap;}@font-face {font-family:Noto Sans;font-style:normal;font-weight:400;src:url(/cf-fonts/v/noto-sans/5.0.18/greek/wght/normal.woff2);unicode-range:U+0370-03FF;font-display:swap;}@font-face {font-family:Noto Sans;font-style:normal;font-weight:400;src:url(/cf-fonts/v/noto-sans/5.0.18/greek-ext/wght/normal.woff2);unicode-range:U+1F00-1FFF;font-display:swap;}@font-face {font-family:Noto Sans;font-style:normal;font-weight:400;src:url(/cf-fonts/v/noto-sans/5.0.18/cyrillic/wght/normal.woff2);unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;font-display:swap;}@font-face {font-family:Noto Sans;font-style:normal;font-weight:400;src:url(/cf-fonts/v/noto-sans/5.0.18/latin/wght/normal.woff2);unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;font-display:swap;}@font-face {font-family:Noto Sans;font-style:normal;font-weight:500;src:url(/cf-fonts/v/noto-sans/5.0.18/cyrillic-ext/wght/normal.woff2);unicode-range:U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;font-display:swap;}@font-face {font-family:Noto Sans;font-style:normal;font-weight:500;src:url(/cf-fonts/v/noto-sans/5.0.18/devanagari/wght/normal.woff2);unicode-range:U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+25CC,U+A830-A839,U+A8E0-A8FF;font-display:swap;}@font-face {font-family:Noto Sans;font-style:normal;font-weight:500;src:url(/cf-fonts/v/noto-sans/5.0.18/latin-ext/wght/normal.woff2);unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;font-display:swap;}@font-face {font-family:Noto Sans;font-style:normal;font-weight:500;src:url(/cf-fonts/v/noto-sans/5.0.18/latin/wght/normal.woff2);unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;font-display:swap;}@font-face {font-family:Noto Sans;font-style:normal;font-weight:500;src:url(/cf-fonts/v/noto-sans/5.0.18/vietnamese/wght/normal.woff2);unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;font-display:swap;}@font-face {font-family:Noto Sans;font-style:normal;font-weight:500;src:url(/cf-fonts/v/noto-sans/5.0.18/greek-ext/wght/normal.woff2);unicode-range:U+1F00-1FFF;font-display:swap;}@font-face {font-family:Noto Sans;font-style:normal;font-weight:500;src:url(/cf-fonts/v/noto-sans/5.0.18/cyrillic/wght/normal.woff2);unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;font-display:swap;}@font-face {font-family:Noto Sans;font-style:normal;font-weight:500;src:url(/cf-fonts/v/noto-sans/5.0.18/greek/wght/normal.woff2);unicode-range:U+0370-03FF;font-display:swap;}@font-face {font-family:Noto Sans;font-style:normal;font-weight:700;src:url(/cf-fonts/v/noto-sans/5.0.18/vietnamese/wght/normal.woff2);unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;font-display:swap;}@font-face {font-family:Noto Sans;font-style:normal;font-weight:700;src:url(/cf-fonts/v/noto-sans/5.0.18/greek/wght/normal.woff2);unicode-range:U+0370-03FF;font-display:swap;}@font-face {font-family:Noto Sans;font-style:normal;font-weight:700;src:url(/cf-fonts/v/noto-sans/5.0.18/cyrillic-ext/wght/normal.woff2);unicode-range:U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;font-display:swap;}@font-face {font-family:Noto Sans;font-style:normal;font-weight:700;src:url(/cf-fonts/v/noto-sans/5.0.18/devanagari/wght/normal.woff2);unicode-range:U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+25CC,U+A830-A839,U+A8E0-A8FF;font-display:swap;}@font-face {font-family:Noto Sans;font-style:normal;font-weight:700;src:url(/cf-fonts/v/noto-sans/5.0.18/latin-ext/wght/normal.woff2);unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;font-display:swap;}@font-face {font-family:Noto Sans;font-style:normal;font-weight:700;src:url(/cf-fonts/v/noto-sans/5.0.18/cyrillic/wght/normal.woff2);unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;font-display:swap;}@font-face {font-family:Noto Sans;font-style:normal;font-weight:700;src:url(/cf-fonts/v/noto-sans/5.0.18/greek-ext/wght/normal.woff2);unicode-range:U+1F00-1FFF;font-display:swap;}@font-face {font-family:Noto Sans;font-style:normal;font-weight:700;src:url(/cf-fonts/v/noto-sans/5.0.18/latin/wght/normal.woff2);unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;font-display:swap;}</style>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

    <!-- SHARING TAGS -->
    <meta property="og:locale" content="nb_NO">
    <meta property="og:url" content="https://www.conflingo.com/no" />
    <meta property="og:type" content="article" />
    <meta property="og:title" content="Conflingo - Norges Nettsamfunn" />
    <meta property="og:description" content="Conflingo er et Norsk nettsamfunn der du kan dele meninger, kommentere, og bygge relasjoner med andre brukere i Norge. Finn likesinnede, diskuter anonymt og skap nye vennskap."/>
    <meta property="og:image" content="https://www.conflingo.com/static/conflingo-high-resolution-logo 2.png" />
    <meta property="og:image:type" content="image" />
    <meta property="og:image:width" content="1200" />
    <meta property="og:image:height" content="630" />
    <!-- SHARING TAGS END -->

    <style>
body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    font-family: 'Noto Sans', sans-serif;
    overflow-x: hidden;
    line-height: 1.5;
}
.header {
    width: 100%;
    background-color: white;
    color: black;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    position: fixed;
    top: 0;
    z-index: 10;
    transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
}
.header.hidden-scroll {
    opacity: 0;
    visibility: hidden;
    z-index: 0;
}
.header .logo img {
    height: 40px; /* Adjust the height as needed */
}
.header nav {
    display: flex;
    margin-right: 40px;
}
.header nav a {
    color: black;
    text-decoration: none;
    font-weight: 700;
}
.intro-container {
    height: 100vh;
    background-image: url('/static/background-image.webp');
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: relative;
    padding-top: 60px; /* To prevent header overlap */
}

/* Add this CSS for screen readers to recognize the alt text */
.intro-container::before {
    content: "Nye venner som blir bedre kjent med hverandre og har det gøy";
    position: absolute;
    left: -9999px;
    height: 1px;
    width: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0); /* Ensures the content is only available to screen readers */
}
.intro-content {
    z-index: 1;
}
.logo-container {
    display: flex;
    align-items: center;
}
.logo {
    display: flex;
    align-items: center;
    text-decoration: none;
}
.logo-icon {
    width: auto;
    height: 2.5em; /* Matches the font-size of the text */
    margin-right: 8px; /* Space between icon and text */
}
.logo-text {
    font-family: 'Montserrat', sans-serif;
    font-size: 2.5em;
    line-height: 1;
    font-weight: bold;
    color: #ff4040;
    text-decoration: none;
}
.intro-content .logo-intro img {
    width: 550px;
    max-width: 90%;
    margin-bottom: 20px;
}
.intro-content h1 {
    color: #ff4040;
    font-family: "ADLaM Display", system-ui;
    font-weight: 400;
    font-style: normal;
    font-size: 32px;
    margin: 0 0px 20px 0;
}
.intro-content p {
    color: white;
    font-size: 18px;
    margin-bottom: 30px;
    padding:15px;
}
.intro-content .button {
    background-color: #ff4040;
    color: white;
    padding: 15px 30px;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    margin: 10px;
    text-decoration: none;
    font-weight: 700;
}
.intro-content .button:hover {
    background-color: #ff4c3b;
}
.mobile-menu-icon {
    display: none;
}
.mobile-menu {
    display: none;
    flex-direction: column;
    gap: 10px;
    background-color: white;
    position: fixed;
    top: 60px;
    right: 0;
    width: 250px;
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    z-index: 11;
    transition: transform 0.3s ease-in-out;
}
.mobile-menu a {
    color: black;
    text-decoration: none;
    font-weight: 700;
    display: block;
    padding: 10px 0;
}
.mobile-menu .register-button {
    background-color: #ff4040;
    color: white;
    padding: 10px;
    border: none;
    border-radius: 5px;
    text-align: center;
    margin-top: 20px;
}
.mobile-menu .register-button:hover {
    background-color: #ff4c3b;
}
@media (max-width: 900px) {
    .header nav {
        display: none;
    }
    .logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    margin-right: auto;
}
    .mobile-menu-icon {
        display: block;
        font-size: 24px;
        cursor: pointer;
        margin-right: 40px;
    }
    .intro-container {
        height: 100vh;
        background-color: white;
        background-size: cover;
        background-position: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        position: relative;
    }
    .intro-content .button {
        display: block;
        width: 80%;
        max-width: 300px;
        margin: 10px auto;
    }
    .intro-content .button:first-of-type {
        background-color: #ff4040;
        color: white;
    }
    .intro-content .button:last-of-type {
        background-color: transparent;
        color: #ff6f61;
        border: 2px solid #ff4040;
    }
}
@media (min-width: 900px) {
    .mobile-menu {
        display: none !important;
    }
    .intro-content .button:first-of-type {
        background-color: #ff4040;
        color: white;
        margin-right: 10px;
    }
    .intro-content .button:last-of-type {
        background-color: #ff4040;
        color: white;
    }
}
.features-section {
    background-color: #f5f5f5;
    padding: 50px 20px;
    text-align: center;
}
.features-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}
.feature-card {
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: transform 0.3s, box-shadow 0.3s;
    width: 300px;
    text-align: left;
    padding: 20px;
}
.feature-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}
.feature-icon {
    font-size: 40px;
    color: #ff4040;
    margin-bottom: 20px;
}
.feature-title {
    font-size: 24px;
    color: #ff4040;
    margin-bottom: 10px;
}
.feature-description {
    font-size: 16px;
    color: black;
}
.button.features {
    background-color: #ff4040;
    color: white;
    padding: 15px 30px;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    margin: 20px auto;
    text-decoration: none;
    font-weight: 700;
    display: block;
    width: 200px;
    transition: background-color 0.3s, transform 0.3s;
}
.button.features:hover {
    background-color: #ff4c3b;
    transform: scale(1.05);
}
@keyframes fadeIn {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
.footer {
    background-color: white;
    color: black;
    padding: 40px 20px;
    text-align: center;
}
.footer-container {
    display: flex;
    justify-content: center;
    gap: 50px;
    flex-wrap: wrap;
}
.footer-column {
    text-align: left;
}
.footer-column h3 {
    font-size: 18px;
    color: #ff4040;
    margin-bottom: 10px;
}
.footer-column ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.footer-column ul li {
    margin-bottom: 10px;
}
.footer-column ul li a {
    color: black;
    text-decoration: none;
}
.footer-column ul li a:hover {
    text-decoration: underline;
}
.footer hr {
    margin: 40px 0;
    border: 0;
    border-top: 1px solid #444;
}
.footer p {
    margin: 0;
}

    .why-conflingo-content {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
    }

    /* Hide the desktop image on mobile */
    .conflingo-image-desktop {
        display: block;
    }

    .conflingo-image-mobile {
        display: none;
    }

    /* Layout for mobile screens */
    @media (max-width: 768px) {
        .why-conflingo-content {
            flex-direction: column; /* Stack elements vertically */
        }
        .why-conflingo-section{
            padding: 20px 5px !important;
        }

        /* Show the mobile image and hide the desktop image */
        .conflingo-image-mobile {
            display: block;
        }

        .conflingo-image-desktop {
            display: none;
        }

        .conflingo-text {
            text-align: center;
            padding: 0 20px;
        }

        .conflingo-image-mobile img {
            margin: 0 auto; /* Center the image */
            width: 100%;
        }
    }


.why-conflingo-section {
  padding: 80px 20px;
  background: #fff;
  color: black;
}

.why-conflingo-content {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 1200px;
  margin: 0 auto;
  flex-wrap: wrap;
}

.conflingo-text {
  flex: 1;
  padding: 20px;
}

.conflingo-text h2 {
  font-size: 36px;
  margin-bottom: 20px;
}

.conflingo-text p {
  font-size: 18px;
  margin-bottom: 30px;
}

.feature-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.feature-item {
  display: flex;
  align-items: flex-start;
  background: #f5f5f5;
  border-radius: 10px;
  padding: 20px;
  flex: 1 1 calc(50% - 40px);
  margin: 10px;
  transition: background 0.3s;
  box-shadow:0 4px 8px rgba(0, 0, 0, 0.1);
}

.feature-item:hover {
  background: rgba(255, 255, 255, 0.2);
}

.feature-icon {
  font-size: 40px;
  margin-right: 20px;
}

.feature-text h3 {
  font-size: 22px;
  margin-bottom: 10px;
}

.feature-text p {
  font-size: 16px;
}

.button.features.a {
  background-color: #ff4040;
  color: #fff;
  text-align:center;
  padding: 15px 30px;
  border: none;
  border-radius: 30px;
  cursor: pointer;
  margin-top: 40px;
  text-decoration: none;
  font-weight: 700;
  transition: background-color 0.3s, color 0.3s;
}

.button.features.a:hover {
  background-color: #ff4040;
  color: #fff;
}

.conflingo-image {
  flex: 1;
  text-align: center;
}

.conflingo-image img {
  max-width: 100%;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

@media (max-width: 768px) {
  .why-conflingo-content {
    flex-direction: column-reverse;
  }
  .feature-item {
    flex: 1 1 100%;
  }
  .conflingo-text {
    text-align: left;
  }
}

/* Styles for the Counter */
.counter {
    font-size: 48px;
    font-weight: bold;
    color: #ff4040;
    margin-top: 20px;
    animation: countUpAnimation 1.5s ease-out forwards;
}

@keyframes countUpAnimation {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 768px) {
  /* Initial state for feature items */
  .feature-item {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  }

  /* Visible state when the feature item comes into view */
  .feature-item.visible {
    opacity: 1;
    transform: translateY(0);
  }
}
    </style>

<style>
  .blogpreview-grid {
      display: grid;
      gap: 40px;
      padding: 20px;
      grid-template-columns: 1fr;
      max-width: 1200px;
      margin: 0 auto;
  }
  @media (min-width: 600px) {
      .blogpreview-grid {
          grid-template-columns: repeat(2, 1fr);
      }
  }
  @media (min-width: 900px) {
      .blogpreview-grid {
          grid-template-columns: repeat(3, 1fr);
      }
  }
  .blogpreview-card {
      border: 1px solid #ddd;
      padding: 15px;
      border-radius: 10px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
      background: white;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      height: 100%;
  }
  .blogpreview-card img {
      max-width: 100%;
      border-radius: 6px;
      margin-bottom: 10px;
  }
  .blogpreview-card h3 {
      margin: 10px 0 5px;
      font-size: 18px;
  }
  .blogpreview-card p {
      font-size: 14px;
      color: #444;
      flex-grow: 1;
  }
  .blogpreview-btn {
      margin-top: 10px;
      display: inline-block;
      padding: 8px 16px;
      background: #ff4040;
      color: white;
      border-radius: 5px;
      text-decoration: none;
      text-align: center;
  }
</style>

</head>
<body>
                
    <header class="header">
        <a href="/no/all_opinions" class="logo">
            <div class="logo-container">
                <div class="logo">
                    <svg class="logo-icon" width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <rect x="12" y="20" width="40" height="12" fill="#ff4040"/>
                        <rect x="12" y="36" width="28" height="12" fill="#ff4040"/>
                        <polygon points="28,48 20,48 12,56" fill="#ff4040"/>
                    </svg>
                    <span class="logo-text">Conflingo</span>
                </div>
            </div>
        </a>
        <nav id="nav-links">
            <!-- Links will be added dynamically based on login status -->
                            <a href="/no/all_opinions" class="nav-link" style="display: flex; align-items: center; padding: 10px; text-decoration: none; color: black; font-size: 16px;" onmouseover="this.style.color='#ff4040'" onmouseout="this.style.color='black'">
Forum
                </a>
                                <a href="/no/matching" class="nav-link" style="display: flex; align-items: center; padding: 10px; text-decoration: none; color: black; font-size: 16px;" onmouseover="this.style.color='#ff4040'" onmouseout="this.style.color='black'">
Matching
                </a>
                <a href="/no/nyheter" class="nav-link" style="display: flex; align-items: center; padding: 10px; text-decoration: none; color: black; font-size: 16px;" onmouseover="this.style.color='#ff4040'" onmouseout="this.style.color='black'">
Nyheter
                </a>
                <a href="/no/login" class="nav-link" style="display: flex; align-items: center; padding: 10px; text-decoration: none; color: black; font-size: 16px; background-color: #e0e0e0; border-radius: 5px;" onmouseover="this.style.color='#ff4040'" onmouseout="this.style.color='black'">

                    <span>Logg inn</span>
                </a>
                <a href="/no/signup" class="nav-link button" style="display: flex; align-items: center; padding: 10px; text-decoration: none; color: black; font-size: 16px; background-color: #e0e0e0; border-radius: 5px;" onmouseover="this.style.color='#ff4040'" onmouseout="this.style.color='black'">

                    <span>Registrer deg</span>
                </a>
        </nav>
        <div class="mobile-menu-icon" onclick="toggleMobileMenu()">
            <i class="fas fa-bars"></i>
        </div>
    </header>
    <div class="mobile-menu" id="mobileMenu">
        <!-- Links will be added dynamically based on login status -->
    </div>
    <div class="intro-container">
        <div class="intro-content">
            <div class="logo-intro">
                <img src="/static/logo-no-background-slogan.png" alt="Conflingo Logo">
            </div>
            <h1>Sosialt Medium Som Belønner Deg</h1>
            <p style="color: white; font-size: 18px; margin: 20px 0; text-shadow: 1px 1px 3px rgba(0,0,0,0.5);">
                <strong>Tjen poeng som blir til ekte belønninger!</strong> Stem, del meninger og knytt kontakter for å bygge din saldo.
            </p>
            <a href="/no/signup" class="button">Bli Med i Dag</a>
            <a href="/no/tjene-penger" class="button" style="background: #FFD700; color: #333;">Se Hvordan Du Tjener </a>
        </div>
    </div>


<div class="why-conflingo-section">
  <div class="why-conflingo-content">
    <div class="conflingo-text">
      <h2>Sosiale medier, slik det burde være.</h2>
      <p>
        Glem algoritmestyrte meninger og støy – her snakker du med ekte mennesker om det som betyr noe for deg.
      </p>
      <div class="feature-list">
        <div class="feature-item">
          <div class="feature-icon">
            <i class="fas fa-user-shield"></i>
          </div>
          <div class="feature-text">
            <h3>Du velger hvor synlig du vil være.</h3>
            <p>
              Hos oss er det dine ord som betyr noe, ikke hvem du er.
            </p>
          </div>
        </div>
        <div class="feature-item">
          <div class="feature-icon">
            <i class="fas fa-newspaper"></i>
          </div>
          <div class="feature-text">
            <h3>Les, tenk, si din mening.</h3>
            <p>
               Nasjonale og globale nyheter, alltid med kommentarfelt. Les på <a href="https://www.conflingo.com/no/nyheter">Norsk</a> eller <a href="https://www.conflingo.com/news">Engelsk.</a>
            </p>
          </div>
        </div>
        <div class="feature-item">
          <div class="feature-icon">
            <i class="fas fa-shield-alt"></i>
          </div>
          <div class="feature-text">
            <h3>Smart moderering, trygg opplevelse.</h3>
            <p>
              Vår avanserte teknologi filtrerer ut upassende innhold før det når deg, slik at du kan fokusere på det som virkelig betyr noe.
            </p>
          </div>
        </div>
        <div class="feature-item">
          <div class="feature-icon">
            <i class="fas fa-users"></i>
          </div>
          <div class="feature-text">
            <h3>Et sosialt medium som respekterer tiden din.</h3>
            <p>
              Hold deg oppdatert, delta i samtaler og finn mennesker du matcher med – alt på én plattform.
            </p>
          </div>
        </div>
      </div>
      <a href="/no/signup" class="button features" style="text-align:center;">Bli med oss i dag</a>
      <a href="/no/learn" class="button features" style="text-align:center;">Lær mer om Conflingo</a>
    </div>
  </div>
  <h2 style="text-align:center;">Siste nytt</h2>
  <div class="blogpreview-grid">
      
          <div class="blogpreview-card">
              
              
              
              
              
              
              
              
              

              
              
              
                  
                      
                  
              

              
              

              
                  <img src="https://conflingo-soccer-files.s3.amazonaws.com/news_files/96df8fb3-3164-4314-aa6d-4f89bf65b639.webp" alt="Forhåndsvisningsbilde">
              
              <h3>Betydelig skade på regjeringsbygninger i Kuwait etter droneangrep</h3>
              <p>Kuwaitiske myndigheter opplyser at regjeringsbygninger har fått omfattende skader etter et angrep med droner, som ifølge offisielle kilder skal ha blitt gjen...</p>
              <a class="blogpreview-btn" href="https://www.conflingo.com/no/nyheter/2026-04-04/betydelig-skade-pa-regjeringsbygninger-i-kuwait-etter-droneangrep">Les artikkelen</a>
              </a>
          </div>
      
          <div class="blogpreview-card">
              
              
              
              
              
              
              
              
              

              
              
              
                  
                      
                  
              

              
              

              
                  <img src="https://conflingo-soccer-files.s3.amazonaws.com/news_files/d0de0d70-b405-4c9d-a25b-c6f6cd04146c.webp" alt="Forhåndsvisningsbilde">
              
              <h3>Bil kjørte inn i folkemengde i Louisiana – minst 15 personer skadet</h3>
              <p>Minst 15 personer ble skadet, flere av dem alvorlig, da en bil kjørte inn i en større folkemengde i byen New Iberia i delstaten Louisiana lørdag. Hendelsen f...</p>
              <a class="blogpreview-btn" href="https://www.conflingo.com/no/nyheter/2026-04-04/bil-kjorte-inn-i-folkemengde-i-louisiana-minst-15-personer-skadet">Les artikkelen</a>
              </a>
          </div>
      
          <div class="blogpreview-card">
              
              
              
              
              
              
              
              
              

              
              
              
                  
                      
                  
              

              
              

              
                  <img src="https://conflingo-soccer-files.s3.amazonaws.com/news_files/eda81574-1b57-49e1-9f68-1f1da9ad892c.webp" alt="Forhåndsvisningsbilde">
              
              <h3>Mann pågrepet etter utslipp av tennvæske i boligblokk i Lier</h3>
              <p>En mann ble lørdag kveld pågrepet av politiet etter at han skal ha helt ut tennvæske i en boligblokk i Lier kommune i Viken. Hendelsen førte til at nødetaten...</p>
              <a class="blogpreview-btn" href="https://www.conflingo.com/no/nyheter/2026-04-04/mann-pagrepet-etter-utslipp-av-tennvaeske-i-boligblokk-i-lier">Les artikkelen</a>
              </a>
          </div>
      
  </div>
</div>




<script>
          document.addEventListener("DOMContentLoaded", () => {
    createLanguageSwitcher();
  });

  function createLanguageSwitcher() {
    const switcherDiv = document.getElementById("languageSwitcher");
    switcherDiv.style.display = "flex";
    switcherDiv.style.justifyContent = "center";
    switcherDiv.style.alignItems = "center";
    switcherDiv.style.margin = "20px";

    // Create a dropdown menu
    const select = document.createElement("select");
    select.id = "languageSelect";
    select.style.padding = "10px";
    select.style.fontSize = "16px";
    select.style.border = "2px solid #ccc";
    select.style.borderRadius = "5px";
    select.style.cursor = "pointer";
    select.style.transition = "all 0.3s ease";
    select.style.marginLeft = "10px";

    // Add hover effect
    select.addEventListener("mouseover", () => {
      select.style.borderColor = "#007BFF";
      select.style.boxShadow = "0 0 5px rgba(0, 123, 255, 0.5)";
    });
    select.addEventListener("mouseout", () => {
      select.style.borderColor = "#ccc";
      select.style.boxShadow = "none";
    });

    // Add language options
    const languages = [
            { code: "no", name: "NO", flag: "🇳🇴" },
          { code: "en", name: "EN", flag: "🇬🇧" },

    ];

    languages.forEach((lang) => {
      const option = document.createElement("option");
      option.value = lang.code;
      option.textContent = `${lang.flag} ${lang.name}`;
      select.appendChild(option);
    });

    // Append a label with a flag
    const label = document.createElement("span");
    label.textContent = "🌐";
    label.style.fontSize = "16px";
    label.style.marginRight = "10px";

    switcherDiv.appendChild(label);
    switcherDiv.appendChild(select);

    // Handle language change
    select.addEventListener("change", (event) => {
      const selectedLanguage = event.target.value;
      if (selectedLanguage === "no") {
        window.location.href = "/no";
      } else {
        window.location.href = "/";
      }
    });
  }
    </script>

<script>
    var isLoggedIn = false;
</script>

    <script>
function toggleMobileMenu() {
    const mobileMenu = document.getElementById('mobileMenu');
    if (mobileMenu.style.display === 'flex') {
        mobileMenu.style.display = 'none';
    } else {
        mobileMenu.style.display = 'flex';
    }
}

document.addEventListener('DOMContentLoaded', function() {
            const navLinks = document.getElementById('nav-links');
            const mobileMenu = document.getElementById('mobileMenu');
            navLinks.innerHTML = '';
            mobileMenu.innerHTML = '';

        if (isLoggedIn) {
            navLinks.innerHTML = `
                <a href="/no/all_opinions" class="nav-link" style="display: flex; align-items: center; padding: 10px; text-decoration: none; color: black; font-size: 16px;" onmouseover="this.style.color='#ff4040'" onmouseout="this.style.color='black'">
Forum
                </a>
                <a href="/no/matching" class="nav-link" style="display: flex; align-items: center; padding: 10px; text-decoration: none; color: black; font-size: 16px;" onmouseover="this.style.color='#ff4040'" onmouseout="this.style.color='black'">
Matching
                </a>
                <a href="/no/nyheter" class="nav-link" style="display: flex; align-items: center; padding: 10px; text-decoration: none; color: black; font-size: 16px;" onmouseover="this.style.color='#ff4040'" onmouseout="this.style.color='black'">
Nyheter
                </a>
                <a href="/no/profile" class="nav-link" style="display: flex; align-items: center; padding: 10px; text-decoration: none; color: black; font-size: 16px;" onmouseover="this.style.color='#ff4040'" onmouseout="this.style.color='black'">
Profil
                </a>
                <a href="/no/settings" class="nav-link" style="display: flex; align-items: center; padding: 10px; text-decoration: none; color: black; font-size: 16px;" onmouseover="this.style.color='#ff4040'" onmouseout="this.style.color='black'">
Innstillinger
                </a>
                <a href="/logout" class="nav-link" style="display: flex; align-items: center; padding: 10px; text-decoration: none; color: black; font-size: 16px;" onmouseover="this.style.color='#ff4040'" onmouseout="this.style.color='black'">
Logg ut
                </a>
            `;
            mobileMenu.innerHTML = `
                <h3>Navigering</h3>
                <a href="/no/all_opinions" class="nav-link" style="display: flex; align-items: center; padding: 10px; text-decoration: none; color: black; font-size: 16px;" onmouseover="this.style.color='#ff4040'" onmouseout="this.style.color='black'">
Forum
                </a>
                <a href="/no/matching" class="nav-link" style="display: flex; align-items: center; padding: 10px; text-decoration: none; color: black; font-size: 16px;" onmouseover="this.style.color='#ff4040'" onmouseout="this.style.color='black'">
Matching
                </a>
                <a href="/no/nyheter" class="nav-link" style="display: flex; align-items: center; padding: 10px; text-decoration: none; color: black; font-size: 16px;" onmouseover="this.style.color='#ff4040'" onmouseout="this.style.color='black'">
Nyheter
                </a>
                <a href="/no/profile" class="nav-link" style="display: flex; align-items: center; padding: 10px; text-decoration: none; color: black; font-size: 16px;" onmouseover="this.style.color='#ff4040'" onmouseout="this.style.color='black'">
Profil
                </a>
                <a href="/no/settings" class="nav-link" style="display: flex; align-items: center; padding: 10px; text-decoration: none; color: black; font-size: 16px;" onmouseover="this.style.color='#ff4040'" onmouseout="this.style.color='black'">
Innstillinger
                </a>
                <a href="/logout" class="nav-link" style="display: flex; align-items: center; padding: 10px; text-decoration: none; color: black; font-size: 16px;" onmouseover="this.style.color='#ff4040'" onmouseout="this.style.color='black'">
Logg ut
                </a>
            `;
        } else {
            navLinks.innerHTML = `
                <a href="/no/all_opinions" class="nav-link" style="display: flex; align-items: center; padding: 10px; text-decoration: none; color: black; font-size: 16px;" onmouseover="this.style.color='#ff4040'" onmouseout="this.style.color='black'">
Forum
                </a>
                                <a href="/no/matching" class="nav-link" style="display: flex; align-items: center; padding: 10px; text-decoration: none; color: black; font-size: 16px;" onmouseover="this.style.color='#ff4040'" onmouseout="this.style.color='black'">
Matching
                </a>
                <a href="/no/nyheter" class="nav-link" style="display: flex; align-items: center; padding: 10px; text-decoration: none; color: black; font-size: 16px;" onmouseover="this.style.color='#ff4040'" onmouseout="this.style.color='black'">
Nyheter
                </a>
                <a href="/no/login" class="nav-link" style="display: flex; align-items: center; padding: 10px; text-decoration: none; color: black; font-size: 16px; background-color: #e0e0e0; border-radius: 5px;" onmouseover="this.style.color='#ff4040'" onmouseout="this.style.color='black'">

                    <span>Logg inn</span>
                </a>
                <a href="/no/signup" class="nav-link button" style="display: flex; align-items: center; padding: 10px; text-decoration: none; color: black; font-size: 16px; background-color: #e0e0e0; border-radius: 5px;" onmouseover="this.style.color='#ff4040'" onmouseout="this.style.color='black'">

                    <span>Registrer deg</span>
                </a>
            `;
            mobileMenu.innerHTML = `
                <h3>Navigering</h3>
                <a href="/no/all_opinions" class="nav-link" style="display: flex; align-items: center; padding: 10px; text-decoration: none; color: black; font-size: 16px;" onmouseover="this.style.color='#ff4040'" onmouseout="this.style.color='black'">
Forum
                </a>
                                <a href="/no/matching" class="nav-link" style="display: flex; align-items: center; padding: 10px; text-decoration: none; color: black; font-size: 16px;" onmouseover="this.style.color='#ff4040'" onmouseout="this.style.color='black'">
Matching
                </a>
                <a href="/no/nyheter" class="nav-link" style="display: flex; align-items: center; padding: 10px; text-decoration: none; color: black; font-size: 16px;" onmouseover="this.style.color='#ff4040'" onmouseout="this.style.color='black'">
Nyheter
                </a>
                <a href="/no/login" class="nav-link" style="display: flex; align-items: center; padding: 10px; text-decoration: none; color: black; font-size: 16px; background-color: #e0e0e0; border-radius: 5px;" onmouseover="this.style.color='#ff4040'" onmouseout="this.style.color='black'">

                    <span>Logg inn</span>
                </a>
                <a href="/no/signup" class="nav-link" style="display: flex; align-items: center; padding: 10px; text-decoration: none; color: black; font-size: 16px; background-color: #e0e0e0; border-radius: 5px;" onmouseover="this.style.color='#ff4040'" onmouseout="this.style.color='black'">

                    <span>Registrer deg</span>
                </a>
            `;
        };


    // Intersection Observer for feature cards animation
    const featureCards = document.querySelectorAll('.feature-card');
    const observer = new IntersectionObserver(entries => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.classList.add('animate');
            }
        });
    });
    featureCards.forEach(card => {
        observer.observe(card);
    });

    // Header hide/show on scroll
    const header = document.querySelector('.header');
    let lastScrollTop = 0;
    window.addEventListener('scroll', function() {
        let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
        if (scrollTop > lastScrollTop) {
            header.classList.add('hidden-scroll');
        } else {
            header.classList.remove('hidden-scroll');
        }
        lastScrollTop = scrollTop;
    });
});
function moveImageForMobile() {
            const screenWidth = window.innerWidth;
            const imageDesktop = document.getElementById('conflingoImageDesktop');
            const imageMobile = document.getElementById('conflingoImageMobile');
            const textSection = document.getElementById('conflingoText');

            if (screenWidth <= 768) {
                // Move the image below the <h2> on mobile
                textSection.insertBefore(imageMobile, textSection.children[2]); // Moves the mobile image
            } else {
                // Ensure the desktop image is used on larger screens
                imageDesktop.style.display = "block";
                imageMobile.style.display = "none";
            }
        }

        // Execute on window resize and load
        window.addEventListener('resize', moveImageForMobile);
        window.addEventListener('load', moveImageForMobile);


// Function to animate feature items on scroll
document.addEventListener('DOMContentLoaded', function() {
  const featureItems = document.querySelectorAll('.feature-item');

  const observerOptions = {
    root: null,
    rootMargin: '0px',
    threshold: 0.1
  };

  const observer = new IntersectionObserver(entries => {
    entries.forEach((entry, index) => {
      if (entry.isIntersecting) {
        entry.target.classList.add('visible');
        // Optional: Add staggered delay
        entry.target.style.transitionDelay = `${index * 0.2}s`;
        observer.unobserve(entry.target); // Stop observing after animation starts
      }
    });
  }, observerOptions);

  featureItems.forEach(item => {
    observer.observe(item);
  });
});
    </script>
    <script>

   const authToken = 'Bearer ';
document.addEventListener("DOMContentLoaded", function () {
    // Check if user is logged in (assuming 'authToken' is defined elsewhere)
    if (typeof authToken !== "undefined" && authToken.trim().length > 10) {
        // Create the "Add Post" button
        const addPostButton = document.createElement("div");
        addPostButton.id = "add-post-button";
        addPostButton.innerHTML = `
            <a href="/no/profile#del-innlegg" title="Add Post" style="text-decoration: none;">
                <i class="fas fa-pen"></i>
            </a>
        `;

        // Basic styling (fixed position near notification bell)
        addPostButton.style.position = "fixed";
        addPostButton.style.bottom = "10px";
        addPostButton.style.right = "70px";  // Place it 60px/70px to the left of the bell
        addPostButton.style.zIndex = "999999";
        addPostButton.style.width = "48px";
        addPostButton.style.height = "48px";
        addPostButton.style.borderRadius = "50%";
        addPostButton.style.backgroundColor = "white";
        addPostButton.style.boxShadow = "0 2px 5px rgba(0,0,0,0.2)";
        addPostButton.style.display = "flex";
        addPostButton.style.alignItems = "center";
        addPostButton.style.justifyContent = "center";
        addPostButton.style.cursor = "pointer";
        addPostButton.style.transition = "background-color 0.3s";

        // Style the pen icon
        const penIcon = addPostButton.querySelector("i.fas.fa-pen");
        penIcon.style.fontSize = "22px";
        penIcon.style.color = "black";

        // Hover effect
        addPostButton.addEventListener("mouseover", function () {
            addPostButton.style.backgroundColor = "#ff4040";
            penIcon.style.color = "white";
        });
        addPostButton.addEventListener("mouseout", function () {
            addPostButton.style.backgroundColor = "white";
            penIcon.style.color = "black";
        });

        // Append to body (or any container) so it's visible in fixed position
        document.body.appendChild(addPostButton);
    }
});


</script>
<!-- Modern Footer Template for Conflingo -->
<footer class="conflingo-footer">
    <div class="footer-container">
        <div class="footer-main">
            <div class="footer-brand">
                <div class="footer-logo">
                    <svg class="logo-icon" width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <rect x="12" y="20" width="40" height="12" fill="#FF4040"/>
                        <rect x="12" y="36" width="28" height="12" fill="#FF4040"/>
                        <polygon points="28,48 20,48 12,56" fill="#FF4040"/>
                    </svg>
                    <span class="footer-logo-text">Conflingo</span>
                </div>
                <div class="footer-about">
                    <p class="footer-description">
                        
                        Conflingo er stedet der folk tør å si hva de mener. Vi samler ekte historier, sterke meninger og diskusjoner som faktisk betyr noe – uansett hvem du er eller hvor du kommer fra.

                        
                    </p>
                </div>
            </div>

            <div class="footer-links">
                <div class="footer-column">
                    <h3>Navigasjon</h3>
                    <ul>
                        <li><a href="/no">Hjem</a></li>
                        <li><a href="/no/all_opinions">Forum</a></li>
                        <li><a href="/no/your_matches">Matching</a></li>
                        <li><a href="/no/nyheter">Nyheter</a></li>
                        <li><a href="/no/learn">Lær om Conflingo</a></li>
                    </ul>
                </div>

                <div class="footer-column">
                    <h3>Ressurser</h3>
                    <ul>
                        <li><a href="/no/earn">Hvordan tjene</a></li>
                        <li><a href="/earning-hub">Tjenestesenter</a></li>
                        <li><a href="/shop">Belønningsbutikk</a></li>
                        <li><a href="https://cft.conflingo.com/">Conflingo Blockchain - CFT</a></li>
                        <li><a href="/tests">Personlighetstester</a></li>
                        <li><a href="/matrigma-test">Gratis Matrigma Test</a></li>
                    </ul>
                </div>

                <div class="footer-column">
                    <h3>Juridisk</h3>
                    <ul>
                        <li><a href="/no/privacy-policy">Personvernerklæring</a></li>
                        <li><a href="/no/terms-of-service">Vilkår for bruk</a></li>
                        <li><a href="/no/cookie-preferences"">
                            Administrer informasjonskapsler
                        </a></li>
                        <li><a href="/no/om-redaksjonen">Om redaksjonen</a></li>
                        <li><a href="/no/contact_us">Kontakt oss</a></li>
                    </ul>
                </div>
            </div>
        </div>

        <div class="footer-bottom">
            <div class="language-switcher">
                <button id="language-toggle" class="language-toggle">
                    <i class="fas fa-globe"></i>
                    <span id="current-language">
                        Norsk
                    </span>
                </button>
                <div id="language-dropdown" class="language-dropdown">
                    <a href="/no" data-lang="no" class="language-option active">Norsk</a>
                    <a href="/" data-lang="en" class="language-option ">English</a>
                </div>
            </div>
            <div class="footer-search">
                <script async src="https://cse.google.com/cse.js?cx=d79a73c11724f4764"></script>
                <div class="gcse-searchbox-only"></div>
            </div>
            <div class="footer-copyright">
                <p>&copy; 2026 Conflingo. Alle rettigheter reservert.</p>
            </div>
        </div>
    </div>
</footer>

<!-- Footer Styles -->
<style>
    .conflingo-footer {
        background-color: #f9f9f9;
        font-family: 'Noto Sans', sans-serif;
        padding: 3rem 0 1.5rem;
        margin-top: auto;
        width: 100%;
        border-top: 1px solid #e0e0e0;
        position: relative;
        z-index: 4; /* Higher than sidebars but lower than mobile dropdowns */
    }

    /* Create a pseudo-element clearfix to force layout separation */
    .conflingo-footer::before {
        content: "";
        display: block;
        clear: both;
        height: 1px;
    }

    .footer-container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 1.5rem;
    }

    .footer-main {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 2rem;
        margin-bottom: 2rem;
    }

    .footer-brand {
        flex: 1 1 150px;
    }

    .footer-logo {
        display: flex;
        align-items: center;
        margin-bottom: 1rem;
    }

    .footer-logo-text {
        font-size: 1.5rem;
        font-weight: 700;
        margin-left: 0.5rem;
    }

    .footer-about {
        margin-top: 1rem;
    }

    .footer-description {
        font-size: 0.9rem;
        line-height: 1.5;
    }

    .footer-links {
        display: flex;
        flex-wrap: wrap;
        gap: 2rem;
        flex: 2 1 200px;
    }

    .footer-column {
        flex: 1 1 150px;
        min-width: 150px; /* Ensure minimum width for consistent columns */
    }

    .footer-column h3 {
        color: #ff4040;
        font-size: 1.1rem;
        margin-bottom: 1rem;
        font-weight: 600;
    }

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

    .footer-column ul li {
        margin-bottom: 0.75rem;
    }

    .footer-column ul li a {
        text-decoration: none;
        font-size: 0.9rem;
        transition: color 0.2s ease;
        font-weight:400;
    }

    .footer-column ul li a:hover {
        color: #ff4040;
    }

    .footer-bottom {
        border-top: 1px solid #e0e0e0;
        padding-top: 1.5rem;
        display: flex;
        flex-wrap: wrap;
        gap: 1.5rem;
        justify-content: space-between;
        align-items: center;
    }

    .fa-solid .fas{
        color: #ff4040;
    }

    .footer-copyright p {
        text-align: center;
    }

    .language-switcher {
        position: relative;
    }

    .language-toggle {
        background-color: transparent;
        border: 1px solid #ddd;
        border-radius: 4px;
        padding: 0.5rem 1rem;
        font-size: 0.9rem;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        color: #ff4040;
        font-weight: 600;
    }

    .language-toggle:hover {
        background-color: #f5f5f5;
    }

    .language-dropdown {
        position: absolute;
        bottom: 100%;
        left: 0;
        background-color: white;
        border: 1px solid #ddd;
        border-radius: 4px;
        z-index: 20; /* Higher than footer */
        min-width: 120px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        display: none;
    }

    .language-option {
        display: block;
        padding: 0.5rem 1rem;
        text-decoration: none;
        font-size: 0.9rem;
        color: #ff4040;
    }

    .language-option:hover {
        background-color: #f5f5f5;
    }

    .language-option.active {
        background-color: #eee;
        font-weight: 600;
    }

    .footer-search {
        max-width: 300px;
        flex: 1 1 100px;
    }

    .footer-social {
        display: flex;
        gap: 1rem;
    }

    .social-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background-color: #f0f0f0;
        text-decoration: none;
        transition: all 0.2s ease;
    }

    .social-icon:hover {
        background-color: #ff4040;
        color: white;
    }

    .footer-copyright {
        flex-basis: 100%;
        text-align: center;
        margin-top: 1.5rem;
        font-size: 0.8rem;
    }

    /* Responsive adjustments */
    @media (max-width: 768px) {
        .conflingo-footer {
            padding: 2rem 0 1rem;
        }

        .footer-main {
            flex-direction: column;
            gap: 1rem; /* Reduced gap */
        }

        .footer-links {
            display: grid;
            grid-template-columns: 1fr;
            gap: 1rem;
            margin-top: 0.5rem;
        }

        .footer-column {
            margin-bottom: 0.5rem;
        }

        .footer-bottom {
            flex-direction: column;
            align-items: center;
            gap: 1rem;
        }

        .language-switcher,
        .footer-search,
        .footer-social {
            width: 100%;
            display: flex;
            justify-content: center;
        }

        .language-dropdown {
            left: 50%;
            transform: translateX(-50%);
        }

        .footer-copyright {
            text-align: center;
            margin-top: 1rem;
            width: 100%;
            flex-basis:0;
        }
    }

    @media (max-width: 480px) {
        .conflingo-footer {
            padding: 1.5rem 0 0.75rem; /* Even more compact on mobile */
        }

        .footer-container {
            padding: 0 1rem;
        }

        .footer-main {
            gap: 0.75rem; /* Further reduced gap on mobile */
        }

        .footer-brand {
            margin-bottom: 0.5rem;
        }

        .footer-about {
            margin-top: 0.5rem;
        }

        .footer-description {
            margin-bottom: 0.5rem;
        }

        .footer-links {
            display: grid;
            grid-template-columns: 1fr;
            gap: 0.75rem;
            margin-bottom: 0.5rem;
        }

        .footer-column {
            margin-bottom: 0.75rem;
        }

        .footer-column h3 {
            margin-bottom: 0.5rem;
            font-size: 1rem;
        }

        .footer-column ul li {
            margin-bottom: 0.5rem;
        }

        .footer-bottom {
            padding-top: 1rem;
            gap: 1rem;
        }

        .footer-copyright {
            margin-top: 0.75rem;
        }
    }

    /* Create space for sidebars on desktop */
    @media (min-width: 900px) {
        .sidebar-adjusted .sidebar,
        .sidebar-adjusted .right-sidebar,
        .sidebar-adjusted .ads {
            height: auto !important; /* Override fixed height */
            bottom: 0;
            overflow-y: auto;
        }

        /* Ensure footer links display as 3 columns */
        .footer-links {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 2rem;
        }

        .footer-column {
            min-width: 0; /* Reset min-width to ensure grid works properly */
            width: 100%;
        }
    }

    /* Proper spacing between content and footer */
    .main-content {
        min-height: calc(100vh - 180px); /* Minimum height to push footer down */
        padding-bottom: 2rem; /* Consistent spacing before footer */
    }

    /* Hide ONLY the small floating Consent toolbar after consent, on non-legal pages */
    body.has-consent:not(.privacy-page):not(.terms-page) #ft-floating-toolbar,
    body.has-consent:not(.privacy-page):not(.terms-page) .ft-container.ft-left-pos {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    /* (kept above block sufficient for direct targeting) */

    /* Hide the specific Google ESF support iframe for the floating toolbar after consent */
    body.has-consent:not(.privacy-page):not(.terms-page) iframe#google_esf,
    body.has-consent:not(.privacy-page):not(.terms-page) iframe[id*="google_esf"] {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
</style>
<script>
  // PWA: inject manifest + theme-color in head, and register Service Worker
  (function(){
    try{
      var head = document.getElementsByTagName('head')[0] || document.documentElement;
      // Inject manifest if not present
      if (!document.querySelector('link[rel="manifest"]')){
        var m = document.createElement('link');
        m.setAttribute('rel','manifest');
        m.setAttribute('href','/manifest.webmanifest');
        head.appendChild(m);
      }
      // Ensure theme-color exists and is white for seamless status area
      (function(){
        var meta = document.querySelector('meta[name="theme-color"]');
        if (!meta){
          meta = document.createElement('meta');
          meta.setAttribute('name','theme-color');
          head.appendChild(meta);
        }
        meta.setAttribute('content','#ffffff');
      })();
      // iOS PWA hints
      if (!document.querySelector('meta[name="apple-mobile-web-app-capable"]')){
        var am = document.createElement('meta');
        am.setAttribute('name','apple-mobile-web-app-capable');
        am.setAttribute('content','yes');
        head.appendChild(am);
      }
      (function(){
        var sb = document.querySelector('meta[name="apple-mobile-web-app-status-bar-style"]');
        if (!sb){
          sb = document.createElement('meta');
          sb.setAttribute('name','apple-mobile-web-app-status-bar-style');
          head.appendChild(sb);
        }
        // Use 'default' to match white header consistently
        sb.setAttribute('content','default');
      })();
      // Register SW
      if ('serviceWorker' in navigator){
        navigator.serviceWorker.register('/service-worker.js').then(function(reg) {
          console.log('SW registered');
        }).catch(function(err) {
          console.log('SW registration failed');
        });
        navigator.serviceWorker.addEventListener('message', function(ev){
          if (ev && ev.data && ev.data.type === 'sw-activated'){
            console.log('Service Worker v' + ev.data.version + ' activated with features:', ev.data.features);
            if (ev.data.caching === 'cloudflare-only') {
              console.log('PWA now using Cloudflare-only caching strategy');
            }
            if (ev.data.ui === 'native-bottom-nav' || ev.data.ui === 'bottom-nav' || ev.data.ui === 'bottom-nav-fixed') {
              console.log('PWA using native bottom navigation with filters');
            }
            // Ensure bottom nav appears without refreshing
            if (ev.data.forceRefresh && !document.getElementById('pwa-bottom-nav')) {

              // Try to create/show bottom nav instead of refreshing
              if (window.ensureBottomNavVisible) {
                window.ensureBottomNavVisible();
              }
            }
            // Clear any old caches when switching versions
            try{
              caches.keys().then(keys=>keys.forEach(k=>{
                if(!/clg-offline-v27/.test(k)) caches.delete(k);
              }));
            }catch(_e){}
          } else if (ev && ev.data && ev.data.type === 'navigate-to-hash'){
            // Handle comment anchor navigation from push notifications
            try{
              if (ev.data.hash && window.location.hash !== ev.data.hash) {
                window.location.hash = ev.data.hash;
                // Scroll to the element after a brief delay to ensure it's rendered
                setTimeout(function(){
                  var element = document.querySelector(ev.data.hash);
                  if (element) element.scrollIntoView({ behavior: 'smooth', block: 'center' });
                }, 100);
              }
            }catch(_e){}
          }
        });
      }
    }catch(_e){}
  })();
</script>


<script>
// Minimal push subscription helper (UI toggles will call these)
window.ConflingoPush = (function(){
  const state = { sub: null, key: null };
  async function urlBase64ToUint8Array(base64String) {
    const padding = '='.repeat((4 - base64String.length % 4) % 4);
    const base64 = (base64String + padding).replace(/-/g, '+').replace(/_/g, '/');
    const rawData = atob(base64);
    const outputArray = new Uint8Array(rawData.length);
    for (let i = 0; i < rawData.length; ++i) { outputArray[i] = rawData.charCodeAt(i); }
    return outputArray;
  }
  async function getPublicKey(){
    if (state.key) return state.key;
    const r = await fetch('/push/public_key', {cache:'no-store'});
    const j = await r.json();
    state.key = j.publicKey || '';
    return state.key;
  }
  async function ensureSubscription(){
    if (!('serviceWorker' in navigator) || !('PushManager' in window)) return null;
    const reg = await navigator.serviceWorker.ready;
    const existing = await reg.pushManager.getSubscription();
    if (existing) { state.sub = existing; return existing; }
    const keyB64 = await getPublicKey();
    if (!keyB64) return null;
    const appServerKey = await urlBase64ToUint8Array(keyB64);
    const sub = await reg.pushManager.subscribe({ userVisibleOnly: true, applicationServerKey: appServerKey });
    state.sub = sub;
    return sub;
  }
  async function subscribeWithPrefs(prefs){
    const sub = await ensureSubscription();
    if (!sub) throw new Error('No subscription');
    await fetch('/push/subscribe', { method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({ subscription: sub.toJSON(), prefs: prefs||{} }) });
    return true;
  }
  async function updatePrefs(prefs){
    await fetch('/push/preferences', { method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify(prefs||{}) });
    return true;
  }
  async function unsubscribe(){
    try{
      const reg = await navigator.serviceWorker.ready;
      const sub = await reg.pushManager.getSubscription();
      if (sub){
        await fetch('/push/unsubscribe', { method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({ subscription: sub.toJSON() }) });
        await sub.unsubscribe();
      }
    }catch(e){}
  }
  return { subscribeWithPrefs, updatePrefs, unsubscribe };
})();
</script>

<script src="https://cdn.jsdelivr.net/npm/@fingerprintjs/fingerprintjs@3/dist/fp.min.js"></script>
<script>
  FingerprintJS.load().then(fp => {
    fp.get().then(result => {
      if (result && result.visitorId) {
        document.cookie = "cfp=" + result.visitorId + "; max-age=2592000; path=/; SameSite=Lax";
      }
    });
  });
</script>



<!-- Footer JavaScript -->
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Get the current HTML lang attribute
        const htmlLang = document.documentElement.lang || 'no';

        // Sidebar adjustment function
        function adjustSidebars() {
            // Only run this on desktop
            if (window.innerWidth < 900) return;

            const footer = document.querySelector('.conflingo-footer');
            if (!footer) return;

            const sidebar = document.querySelector('.sidebar');
            const rightSidebar = document.querySelector('.right-sidebar');
            const ads = document.querySelector('.ads');
            const footerTop = footer.getBoundingClientRect().top + window.scrollY;

            // Add a class to body for CSS targeting
            document.body.classList.add('sidebar-adjusted');

            // Calculate the height for sidebars to end at the footer
            const newHeight = footerTop - 60; // 60px is header height

            // Apply the calculated max-height to all sidebars
            [sidebar, rightSidebar].forEach(element => {
                if (element) {
                    element.style.maxHeight = (newHeight - window.scrollY) + 'px';
                }
            });

            // Special handling for ads element which appears on news pages
            if (ads) {
                ads.style.maxHeight = (newHeight - window.scrollY) + 'px';

                // For news pages, ensure ads have the correct CSS properties
                ads.style.overflow = 'auto';

                // Check if this is a news page by looking at URL or page content
                const isNewsPage = window.location.pathname.includes('/news') ||
                                  document.title.toLowerCase().includes('news');

                if (isNewsPage) {
                    // Set specific properties for ads on news pages
                    ads.style.position = 'fixed';
                    ads.style.top = '60px';
                    ads.style.right = '0';
                    ads.style.width = '200px';
                    ads.style.height = 'auto';
                    ads.style.maxHeight = (newHeight - window.scrollY) + 'px';
                }
            }
        }

        // Call on load and resize
        adjustSidebars();
        window.addEventListener('resize', adjustSidebars);
        window.addEventListener('scroll', adjustSidebars);

        // Toggle language dropdown visibility
        const languageToggle = document.getElementById('language-toggle');
        const languageDropdown = document.getElementById('language-dropdown');

        if (languageToggle && languageDropdown) {
            languageToggle.addEventListener('click', function(e) {
                e.stopPropagation();
                languageDropdown.style.display = languageDropdown.style.display === 'block' ? 'none' : 'block';
            });

            // Close dropdown when clicking outside
            document.addEventListener('click', function() {
                if (languageDropdown) {
                    languageDropdown.style.display = 'none';
                }
            });
        }

        // Fix for possible mobile layout issues by helping adjust content area
        function adjustMainContentPadding() {
            const footer = document.querySelector('.conflingo-footer');
            const mainContent = document.querySelector('.main-content');

            if (footer && mainContent) {
                // Remove this padding - it's creating excess white space
                // We'll handle it with CSS instead for better consistency
                mainContent.style.paddingBottom = '';
            }
        }

        // Call once on load
        adjustMainContentPadding();
        window.addEventListener('resize', adjustMainContentPadding);

        // Hide Google CMP widget on all pages except privacy policy and terms of service
        function hideCMPWidget() {
            // List of pages where the CMP widget should be visible
            const allowedPages = [
                '/privacy-policy',
                '/no/privacy-policy',
                '/terms-of-service',
                '/no/terms-of-service',
                '/privacy_policy_en',
                '/privacy_policy',
                '/terms_of_service_en',
                '/terms_of_service'
            ];

            // Get the current page path
            const currentPath = window.location.pathname;

            // Check if the current page is not in the allowed list
            const isAllowedPage = allowedPages.some(page => currentPath.includes(page));

            if (!isAllowedPage) {
                // Common CMP widget selectors
                const cmpSelectors = [
                    '#ft-floating-toolbar',
                    '[id*="cookiebot"]',
                    '[class*="cookiebot"]',
                    '[id*="cmp"]',
                    '[class*="cmp"]',
                    '[id*="consent"]',
                    '[class*="consent"]',
                    '.fc-consent-root',
                    '#fc-consent-root',
                    '[data-cmp-ab]',
                    '.cmpbox',
                    '.quantcast-choice',
                    '.qc-cmp2-container',
                    '.gdpr-consent-tool',
                    '.onetrust-consent-sdk'
                ];

                // Function to hide widgets including Shadow DOM elements
                function hideWidgets() {
                    // Regular DOM elements
                    cmpSelectors.forEach(selector => {
                        const widgets = document.querySelectorAll(selector);
                        widgets.forEach(widget => {
                            widget.style.display = 'none !important';
                            widget.style.visibility = 'hidden !important';
                        });
                    });

                    // Handle Shadow DOM - look for elements that might contain shadow roots
                    const allElements = document.querySelectorAll('*');
                    allElements.forEach(element => {
                        if (element.shadowRoot) {
                            try {
                                // Try to hide elements inside shadow root
                                const shadowElements = element.shadowRoot.querySelectorAll('*');
                                shadowElements.forEach(shadowEl => {
                                    if (shadowEl.id === 'ft-floating-toolbar' ||
                                        shadowEl.className.includes('ft-floating') ||
                                        shadowEl.className.includes('cmp') ||
                                        shadowEl.className.includes('consent')) {
                                        shadowEl.style.display = 'none !important';
                                        shadowEl.style.visibility = 'hidden !important';
                                    }
                                });

                                // Also inject CSS into shadow root
                                const shadowStyle = document.createElement('style');
                                shadowStyle.textContent = `
                                    #ft-floating-toolbar,
                                    [id*="ft-floating"],
                                    [class*="ft-floating"],
                                    [class*="cmp"],
                                    [class*="consent"] {
                                        display: none !important;
                                        visibility: hidden !important;
                                        opacity: 0 !important;
                                    }
                                `;
                                element.shadowRoot.appendChild(shadowStyle);
                            } catch (e) {
                                // Shadow root might be closed or inaccessible
                            }
                        }

                        // If the element itself looks like the CMP floating toolbar, hide it (do not remove)
                        if (element.id === 'ft-floating-toolbar') {
                            element.style.display = 'none !important';
                            element.style.visibility = 'hidden !important';
                        }
                    });
                }

                // Hide immediately
                hideWidgets();

                // Try to hide CMP widgets with a delay to ensure they're loaded
                setTimeout(hideWidgets, 1000);
                setTimeout(hideWidgets, 2000);
                setTimeout(hideWidgets, 5000);

                // Also check periodically for dynamically loaded widgets
                const startTime = Date.now();
                const checkInterval = setInterval(() => {
                    hideWidgets();

                    // Stop checking after 30 seconds
                    if (Date.now() - startTime > 30000) {
                        clearInterval(checkInterval);
                    }
                }, 500);
            }
        }

        // Call the CMP hiding function
        hideCMPWidget();
    });
</script>
<script>
  if (!localStorage.getItem("conflingo_session_id")) {
    localStorage.setItem("conflingo_session_id", crypto.randomUUID());
  }

  const sessionId = localStorage.getItem("conflingo_session_id");
  const startTime = Date.now();
  let navigatingInternally = false;

  document.addEventListener("click", function(e) {
    const anchor = e.target.closest("a");
    if (anchor && anchor.href && anchor.origin === location.origin) {
      navigatingInternally = true;
    }
  });

  function sendExitPing() {
    if (navigatingInternally) return;

    const dwellTime = Math.round((Date.now() - startTime) / 1000);
    navigator.sendBeacon("/track/dwell", JSON.stringify({
      session_id: sessionId,
      url: "/exit",
      page_url: window.location.pathname,
      time_spent: dwellTime
    }));
  }

  window.addEventListener("beforeunload", sendExitPing);
  document.addEventListener("visibilitychange", () => {
    if (document.visibilityState === "hidden") {
      sendExitPing();
    }
  });

  fetch("/track/ping", {
    method: "POST",
    keepalive: true,
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      url: window.location.pathname,
      session_id: sessionId
    })
  });
</script>




<!-- Cookie Consent Center Modal -->

<div id="cookie-consent-banner" class="conflingo-cookie-modal-overlay">
    <div class="conflingo-cookie-modal">
        <div class="cookie-modal-header">
            <div class="conflingo-logo-large">
                <svg class="logo-icon-large" width="48" height="48" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <rect x="12" y="20" width="40" height="12" fill="#FF4040"/>
                    <rect x="12" y="36" width="28" height="12" fill="#FF4040"/>
                    <polygon points="28,48 20,48 12,56" fill="#FF4040"/>
                </svg>
                <span class="logo-text-large">Conflingo</span>
            </div>
        </div>

        <div class="cookie-modal-body">
            <div class="cookie-icon">
                <i class="fas fa-cookie-bite"></i>
            </div>
            <h2 class="cookie-title">
                
                Vi bruker informasjonskapsler
                
            </h2>
            <p class="cookie-description">
                
                For å gi deg den <strong>beste opplevelsen</strong> på Conflingo bruker vi informasjonskapsler for analyse og personaliserte annonser. Ved å godta hjelper du oss å forbedre plattformen.
                
            </p>
        </div>

        <div class="cookie-modal-actions">
            
            <button class="btn-accept-large" onclick="setCookieConsent('accept')">
                <i class="fas fa-check-circle"></i>
                <span>Godta alle informasjonskapsler</span>
            </button>

            <div class="secondary-options">
                <button class="btn-customize-modal" onclick="showCookieSettings()">
                    <i class="fas fa-cog"></i> Tilpass valg
                </button>
                <button class="btn-essential-modal" onclick="setCookieConsent('essential_only')">
                    <i class="fas fa-ban"></i> Kun nødvendige
                </button>
            </div>
            
        </div>
    </div>
</div>

<!-- Cookie Settings Modal -->
<div id="cookie-settings-modal" class="cookie-modal" style="display: none;">
    <div class="cookie-modal-content">
        <div class="cookie-modal-header">
            
            <h3>Informasjonskapsler innstillinger</h3>
            <button class="cookie-close" onclick="hideCookieSettings()">&times;</button>
            
        </div>
        <div class="cookie-modal-body">
            <div class="cookie-category">
                
                <h4><input type="checkbox" checked disabled> Nødvendige informasjonskapsler</h4>
                <p>Disse er nødvendige for at nettstedet skal fungere og kan ikke deaktiveres.</p>
                
            </div>
            <div class="cookie-category">
                
                <h4><input type="checkbox" id="analytics-consent"> Analyse informasjonskapsler</h4>
                <p>Hjelper oss å forstå hvordan du bruker nettstedet vårt gjennom anonyme data.</p>
                
            </div>
            <div class="cookie-category">
                
                <h4><input type="checkbox" id="ads-consent"> Reklame informasjonskapsler</h4>
                <p>Brukes til å vise relevante annonser basert på dine interesser.</p>
                
            </div>
        </div>
        <div class="cookie-modal-footer">
            
            <button class="cookie-btn cookie-btn-accept" onclick="saveCustomConsent()">Lagre valg</button>
            <button class="cookie-btn cookie-btn-secondary" onclick="setCookieConsent('essential_only')">Kun nødvendige</button>
            <button class="cookie-btn cookie-btn-customize" onclick="goToCookiePreferences()">Avanserte innstillinger</button>
            
        </div>
    </div>
</div>


<style>
/* Center Modal Overlay */
.conflingo-cookie-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: fadeIn 0.3s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Main Modal */
.conflingo-cookie-modal {
    background: linear-gradient(145deg, #ffffff 0%, #f8f9fa 100%);
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    max-width: 520px;
    width: 100%;
    overflow: hidden;
    animation: slideIn 0.4s ease-out;
    border: 3px solid #FF4040;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-30px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Header with Logo */
.cookie-modal-header {
    background: linear-gradient(135deg, #FF4040 0%, #FF6B6B 100%);
    padding: 25px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.cookie-modal-header::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
    animation: shimmer 3s ease-in-out infinite;
}

@keyframes shimmer {
    0%, 100% { transform: rotate(0deg); }
    50% { transform: rotate(180deg); }
}

.conflingo-logo-large {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    position: relative;
    z-index: 1;
}

.logo-icon-large {
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.3));
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.logo-text-large {
    font-size: 28px;
    font-weight: 800;
    color: white;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    letter-spacing: 1px;
}

/* Modal Body */
.cookie-modal-body {
    padding: 35px 30px;
    text-align: center;
    color: #333;
}

.cookie-icon {
    font-size: 48px;
    color: #FF4040;
    margin-bottom: 20px;
    animation: bounce 2s ease-in-out infinite;
}

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.cookie-title {
    font-size: 24px;
    font-weight: 700;
    color: #2d3748;
    margin: 0 0 15px 0;
    line-height: 1.2;
}

.cookie-description {
    font-size: 16px;
    line-height: 1.6;
    color: #4a5568;
    margin: 0;
}

.cookie-description strong {
    color: #FF4040;
    font-weight: 600;
}

/* Action Buttons */
.cookie-modal-actions {
    padding: 0 30px 35px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.btn-accept-large {
    background: linear-gradient(135deg, #FF4040 0%, #FF6B6B 100%);
    color: white;
    border: none;
    padding: 20px 30px;
    border-radius: 12px;
    cursor: pointer;
    font-size: 18px;
    font-weight: 700;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    box-shadow: 0 8px 25px rgba(255, 64, 64, 0.4);
    transition: all 0.3s ease;
    text-transform: none;
    position: relative;
    overflow: hidden;
}

.btn-accept-large::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s;
}

.btn-accept-large:hover::before {
    left: 100%;
}

.btn-accept-large:hover {
    background: linear-gradient(135deg, #FF6B6B 0%, #FF4040 100%);
    transform: translateY(-3px);
    box-shadow: 0 12px 35px rgba(255, 64, 64, 0.6);
}

.btn-accept-large:active {
    transform: translateY(-1px);
}

.btn-accept-large i {
    font-size: 24px;
}

.btn-accept-large small {
    font-size: 13px;
    font-weight: 400;
    opacity: 0.9;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Secondary Options */
.secondary-options {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.btn-customize-modal, .btn-essential-modal {
    background: #f7fafc;
    color: #4a5568;
    border: 2px solid #e2e8f0;
    padding: 12px 20px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
    flex: 1;
    justify-content: center;
}

.btn-customize-modal:hover {
    background: #2196F3;
    color: white;
    border-color: #2196F3;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(33, 150, 243, 0.3);
}

.btn-essential-modal:hover {
    background: #718096;
    color: white;
    border-color: #718096;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(113, 128, 150, 0.3);
}

.cookie-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.7);
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.cookie-modal-content {
    background: white;
    border-radius: 8px;
    max-width: 500px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
}

.cookie-modal-header {
    padding: 20px 20px 10px;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cookie-modal-header h3 {
    margin: 0;
    font-size: 20px;
}

.cookie-close {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #666;
}

.cookie-modal-body {
    padding: 20px;
}

.cookie-category {
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
}

.cookie-category:last-child {
    border-bottom: none;
}

.cookie-category h4 {
    margin: 0 0 8px 0;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
}

.cookie-category p {
    margin: 0;
    font-size: 14px;
    color: #666;
    line-height: 1.4;
}

.cookie-modal-footer {
    padding: 15px 20px 20px;
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .conflingo-cookie-modal {
        max-width: 90vw;
        margin: 0 10px;
    }

    .cookie-modal-header {
        padding: 20px;
    }

    .logo-text-large {
        font-size: 24px;
    }

    .cookie-modal-body {
        padding: 25px 20px;
    }

    .cookie-title {
        font-size: 22px;
    }

    .cookie-description {
        font-size: 15px;
    }

    .cookie-modal-actions {
        padding: 0 20px 25px;
    }

    .btn-accept-large {
        padding: 18px 25px;
        font-size: 17px;
    }

    .secondary-options {
        flex-direction: column;
        gap: 8px;
    }

    .btn-customize-modal, .btn-essential-modal {
        padding: 10px 16px;
        font-size: 13px;
    }

    .cookie-modal-footer {
        flex-direction: column;
    }
}

@media (max-width: 480px) {
    .conflingo-cookie-modal {
        max-width: 95vw;
        border-radius: 16px;
    }

    .cookie-modal-header {
        padding: 18px;
    }

    .logo-text-large {
        font-size: 22px;
    }

    .cookie-modal-body {
        padding: 20px 15px;
    }

    .cookie-icon {
        font-size: 40px;
        margin-bottom: 15px;
    }

    .cookie-title {
        font-size: 20px;
    }

    .cookie-description {
        font-size: 14px;
    }

    .cookie-modal-actions {
        padding: 0 15px 20px;
    }

    .btn-accept-large {
        padding: 16px 20px;
        font-size: 16px;
    }

    .btn-accept-large i {
        font-size: 20px;
    }

    .btn-accept-large small {
        font-size: 12px;
    }
}
</style>

<script>
function setCookieConsent(consentType, method = 'banner') {
    fetch('/api/cookie-consent/set', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({
            consent_type: consentType,
            method: method
        })
    })
    .then(response => response.json())
    .then(data => {
        if (data.status === 'success') {

            const modal = document.getElementById('cookie-consent-banner');
            if (modal) {
                modal.style.opacity = '0';
                modal.style.transform = 'scale(0.95)';
                setTimeout(() => {
                    modal.style.display = 'none';
                }, 300);
            }


            sessionStorage.setItem('consent-handled', '1');


            const isFirstConsent = !sessionStorage.getItem('consent-handled-before');

            if (isFirstConsent) {
                sessionStorage.setItem('consent-handled-before', '1');
                setTimeout(() => {
                    window.location.reload();
                }, 500);
            }
        }
    })
    .catch(error => {
        console.error('Error setting cookie consent:', error);
    });
}


function showCookieSettings() {
    document.getElementById('cookie-settings-modal').style.display = 'flex';
}

function goToCookiePreferences() {
    const isNorwegian = document.documentElement.lang === 'no';
    window.location.href = isNorwegian ? '/no/cookie-preferences' : '/cookie-preferences';
}

function hideCookieSettings() {
    document.getElementById('cookie-settings-modal').style.display = 'none';
}

function saveCustomConsent() {
    const analyticsConsent = document.getElementById('analytics-consent').checked;
    const adsConsent = document.getElementById('ads-consent').checked;

    let consentType = 'essential_only';
    if (analyticsConsent && adsConsent) {
        consentType = 'accept';
    } else if (analyticsConsent) {
        consentType = 'customize_analytics';
    } else if (adsConsent) {
        consentType = 'customize_ads';
    }

    setCookieConsent(consentType, 'modal');
    hideCookieSettings();
}

document.addEventListener('DOMContentLoaded', function() {
    // Check if modal should be hidden due to existing consent
    const consent = getCookie('conflingo_consent');
    const modal = document.getElementById('cookie-consent-banner');

    if (consent && modal) {
        modal.style.display = 'none';
    }

    if (modal) {
        modal.style.transition = 'opacity 0.3s ease, transform 0.3s ease';
    }
});

function getCookie(name) {
    const value = `; ${document.cookie}`;
    const parts = value.split(`; ${name}=`);
    if (parts.length === 2) return parts.pop().split(';').shift();
}
</script>


<script>
document.addEventListener('DOMContentLoaded', function () {
  const consentNotRequired = false;
  const isBot              = false;
  const existingConsent    = getCookie('conflingo_consent');

  if (consentNotRequired && !isBot && !existingConsent) {
    let fired = false;
    const fire = () => {
      if (fired) return;
      fired = true;
      setCookieConsent('accept', 'geo_auto');
      remove();
    };
    const remove = () => {
      ['pointerdown','click','keydown','scroll','touchstart'].forEach(evt =>
        window.removeEventListener(evt, fire, {passive:true})
      );
    };
    ['pointerdown','click','keydown','scroll','touchstart'].forEach(evt =>
      window.addEventListener(evt, fire, {once:true, passive:true})
    );
    setTimeout(() => { if (document.visibilityState === 'visible' && document.hasFocus()) fire(); }, 1500);
  }

});
</script>
<script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'9e74a91b1de49efc',t:'MTc3NTM1MTI5NQ=='};var a=document.createElement('script');a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script></body>

</html>