/* ==================================================
   STYLE.CSS – Struktur / indholdsfortegnelse

   1) TOKENS (variables)
   2) FONTS (@font-face)
   3) BASE / GLOBAL (body, section, generelle elementer)
   4) COMPONENTS (header, nav, social, mobile menu)
   5) SECTIONS (band-intro, tour, shop, musik, contact, footer)
   6) THIRD-PARTY OVERRIDES (Bandsintown)
   7) LAYOUT HELPERS + CONTAINER (din auto-responsive blok)
   8) MEDIA QUERIES (desktop, ultrawide, mobile)

   NOTE: Ingen styles er ændret — kun flyttet + kommenteret.
   ================================================== */


/* ================================
   1) TOKENS (farver, borders, etc.)
   ================================ */
:root{
    --c-bg: #000;
    --c-bg-2: #222;
    --c-bg-3: #333;

    --c-text: red;
    --c-accent: yellow;

    --b-accent: 2px solid var(--c-accent);
    --b-brand: 2px solid var(--c-text);

    --r-sm: 6px;
    --r-md: 12px;

    --overlay-dark: rgba(0,0,0,.55);

    --max: 1100px;
    --gutter: 24px;
}

/* ================================
   2) FONTS (lokale fontfiler)
   Disse @font-face bruges via font-family navne nedenfor.
   ================================ */

/* Importing custom fonts */

@font-face {
    font-family: 'Being-ExtraBold';
    src: url('/fonts/Being-ExtraBold.ttf') format('ttf'),
    url('/fonts/Being-ExtraBold.woff') format('woff'),
    url('/fonts/Being-ExtraBold.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Being-Light';
    src: url('/fonts/Being-Light.ttf') format('ttf'),
    url('/fonts/Being-Light.woff') format('woff'),
    url('/fonts/Being-Light.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Being-Bold';
    src: url('/fonts/Being-Bold.ttf') format('ttf'),
    url('/fonts/Being-Bold.woff') format('woff'),
    url('/fonts/Being-Bold.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Being-Regular';
    src: url('/fonts/Being-Regular.ttf') format('ttf'),
    url('/fonts/Being-Regular.woff') format('woff'),
    url('/fonts/Being-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

/* ================================
   3) BASE / GLOBAL
   Grundregler som påvirker hele siden.
   ================================ */

/* General body styling */
body {
    font-family: 'Being-ExtraBold', sans-serif;
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

/* ================================
   4) COMPONENTS
   Genbrugelige UI-dele: header, nav, social, mobile menu.
   ================================ */

/* Styling the header */
header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #222;
    color: red;
    padding: 12px 15px;
    transition: background-color 0.3s, box-shadow 0.3s;
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Being-Regular', sans-serif;
    font-weight: bold;
    font-size: 25px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
    box-sizing: border-box;
    border-bottom: 2px solid #c9b037; /* mere gylden */
    line-height: 1;
}

/* Når siden er scrollet: mørkere header + kraftigere skygge */
 body.scrolled header {
     background-color: #111;
     box-shadow: 0 2px 8px rgba(0,0,0,0.6);
 }

/* Container inde i header: holder nav og SoMe samlet */
.header-content {
    display: flex;
    align-items: center;
    gap: 20px;
    width: 100%;
    max-width: 1400px;
    box-sizing: border-box;
    justify-content: center;
}

/* Header navigation links */
.nav-links {
    display: flex;
    gap: 20px;
}

/* Header links: “knap-look” */
header a {
    color: red;
    text-decoration: none;
    padding: 8px 18px;
    font-size: 1.2em;
    border: 2px solid red;
    border-radius: 5px;
    transition: background-color 0.3s, color 0.3s;
    line-height: 1;

}

/* Header hover animation */
header a:hover {
    background-color: red;
    color: #fff;
}

/* ---------- SOCIAL MEDIA BUTTONS (DESKTOP) ---------- */

/* Social media buttons */
.social-media-buttons {
    display: flex;
    gap: 10px;
}

/* Social media buttons animation */
.social-media-buttons a {
    display: inline-block;
    border: none;
    outline: none;
    padding: 4px;
    border-radius: 6px;
    transition: background-color 0.3s, transform 0.3s;
}

/* SoMe icons: fast størrelse */
.social-media-buttons img {
    width: 30px;
    height: 30px;
    display: block;
}

/* SoMe hover: rød baggrund + zoom */
.social-media-buttons a:hover {
    background-color: red;
    transform: scale(1.1);
}

/* ---------- MOBILE MENU (HAMBURGER + SLIDE-IN) ---------- */

.mobile-menu-button {
    display: none;
    cursor: pointer;
    font-size: 1.5em;
    background: transparent;
    border: none;
    color: red;
    position: fixed;
    right: 15px;
    top: 15px;
    padding: 0; /* Remove any extra padding to let it fit the size of the icon */
    width: auto; /* Let the width be determined by the content */
    height: auto;
}

/* Skjuler telefon bund-SoME knapper på computer-visning*/
.social-media-buttons-mobile {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 35px;
    height: 100%;
    padding-bottom: 20px;
}

 .social-media-buttons-mobile a:hover {
     background-color: red;
     transform: scale(1.1);
 }

 .social-media-buttons-mobile a {
     display: inline-block;
     border: none;
     outline: none;
     padding: 3px;
     border-radius: 5px;
     transition: background-color 0.3s, transform 0.3s;
 }

 .social-media-buttons-mobile img {
     width: 40px;
     height: 40px;
     image-rendering: auto;
 }

/* Mobile menu container */
.mobile-menu {
    position: fixed;
    top: 0;
    right: 0;
    background-color: rgba(255, 255, 255, 0.9); /* White background with opacity */
    width: 50%; /* Slide out to cover 50% of the screen width */
    height: 100%;
    max-height: 100vh;
    transform: translateX(100%);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
    display: flex;
    flex-direction: column;
    padding-top: 60px;
    padding-right: 20px; /* Space for close button */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;

}

/* Mobile menu animation */
.mobile-menu a {
    padding: 15px;
    text-align: center;
    color: black;
    text-decoration: none;
    font-size: 1.2em;
    display: block;
    transition: background-color 0.3s, color 0.3s;
    border-radius: 6px;
    margin: 3px 0;
    outline: none;
    border: none; /* Ensure no borders */
    box-shadow: none; /* Remove any box-shadow */
}

/* Mobile menu hover animation */
.mobile-menu a:hover {
    background-color: red;
    color: #fff;
}

/* Mobile menu animation */
.mobile-menu.active {
    transform: translateX(0);
    opacity: 1;
}

/* Close menu function*/
.close-menu {
    position: absolute;
    top: 15px;
    right: 15px;
    font-size: 1.5em;
    cursor: pointer;
    background: transparent;
    border: none;
    color: black;
    transition: color 0.3s;
}

/*Close menu function closing animation */
.close-menu:hover {
    color: red;
}

/* ================================
   5) SECTIONS
   Styles der primært hører til en bestemt side-sektion.
   ================================ */

/* ---------- HERO / BAND INTRO ---------- */

 /* Band introduction section */
 .band-intro {
     width: 100%;
     height: 100vh;
     display: flex;
     flex-direction: column;
     justify-content: center; /* Align content vertically at the center */
     align-items: center;
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
     color: red;
     font-family: 'Being-ExtraBold', sans-serif;
     font-size: 5.5vw;
     text-align: center;
     margin: 0;
     padding-top: 40px;
     box-sizing: border-box;
     position: relative;
     overflow: hidden;
 }

 /* Dårlige Råd Title styling */
 #Start-title {
     margin: 0; /* Remove any default margin */
     padding-top: 220px; /* Remove any padding */
     padding-right: 80px;
     line-height: 1.2; /* Adjust line height if needed */
     position: relative;
     z-index: 2;
     transform: translateY(-140px);;
     display: inline-block;   /* shrink-wrap to text width */
     text-align: left;
 }


 /*Dårlige Råd portrait styling */
 .band-intro img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     margin: 0;
     border-radius: 0;
     z-index: 0;
     inset: 0;
     position: absolute;
     filter: grayscale(100%);
 }



 /* Styling the sections */
 section {
     width: 100%;
     min-height: 50vh;
     display: flex;
     align-items: center;
     justify-content: center;
     text-align: center;
     padding: 80px 20px 60px;
     box-sizing: border-box;
     border-bottom: 2px solid #c9b037; /* mere gylden */
     margin: 0; /* Remove margin to align yellow line */
     font-family: 'Being-Light', sans-serif;
 }

/* ---------- TOUR SECTION ---------- */

#tour {
     position: relative;
     background: url("images/live2.jpg") no-repeat 50% center / cover;

 }

/* Tour overlay: gør baggrund mørkere + sort/hvid */
 #tour::before {
     content: "";
     position: absolute;
     inset: 0;
     background: inherit;
     filter: grayscale(100%) brightness(0.50);
 }

 #tour > div {
     position: relative;
     z-index: 1;
 }

 /* Tour section styling */
 .tour-dates {
     list-style: none;
     padding: 0;
     margin: 0 auto;
     max-width: 800px; /* keep it centered and not too wide */
 }

/* Tour dates list (egen liste, separat fra Bandsintown) */
.tour-dates li {
     margin: 10px 0;
     padding: 12px 16px;
     border: 2px solid red;
     border-radius: 8px;
     transition: transform 0.2s ease, background 0.3s ease;
     font-size: 1.2em;
 }

 .tour-dates li:hover {
     background: rgba(255, 0, 0, 0.1); /* faint red glow */
     transform: scale(1.02);
     cursor: pointer;
 }

 .tour-dates a {
     text-decoration: none;
     color: yellow; /* keep it in line with section-content */
     display: block;
     cursor: pointer;
 }

 .tour-dates a.past {
     opacity: 0.2;
 }

 .tour-dates .soldout {
     color: red;
     font-weight: bold;
     margin-left: 8px;
 }

 .tour-dates .special {
     color: yellow;
     font-weight: bold;
 }


 /* Shop section styling */
 #shop {
     background-color: #333;
     position: relative;
 }

 #contact {
     background-color: black;
 }

/* ---------- FOOTER ---------- */

/* Footer styling */
 footer {
     width: 100%;
     background-color: black;
     padding: 0; /* Remove any padding from the footer itself */
     margin: 0; /* Ensure no margin is added */
     box-sizing: border-box; /* Include padding and border in the element's total width and height */
 }

 .footer-bar {
     background-color: white; /* White background for the copyright bar */
     color: black; /* Black text color */
     width: 100%; /* Ensure it takes up full width of the footer */
     padding: 10px 0; /* Padding for the copyright bar */
     font-family: 'Avenir Next LT Pro', sans-serif;
     font-size: 1em;
     text-align: center;
     box-sizing: border-box; /* Include padding and border in the element's total width and height */
 }

/* ---------- TYPOGRAPHY HELPERS (titles, section content) ---------- */

 /*Styling of section titles */
 .section-title {
     font-family: 'Being-Bold', sans-serif;
     font-weight: normal;
     color: red;
     font-size: 3em;
     margin: 0;
     position: relative; /* Required for positioning the pseudo-element */
     display: inline-block; /* Adjust to fit the text width */
     text-align: center; /* Center text and pseudo-element */
 }

 .section-title::after {
     content: '';
     display: block; /* Block display to ensure it's on its own line */
     width: 100%; /* Adjust to fit the text width */
     height: 2px; /* Line thickness */
     background-color: yellow; /* Line color */
     margin: 10px auto 0; /* Center the line horizontally and give space above it */
     position: absolute; /* Position relative to the title */
     left: 0; /* Align the line to the start of the title */
     right: 0; /* Align the line to the end of the title */
     bottom: -10px; /* Position the line just below the title */
 }

 /*Styling of section content font*/
 .section-content {
     font-family: 'Being-Light', sans-serif; /* Font til indhold af sections */
     font-size: 40px;
     color: yellow;
 }

 .section-text {
     font-size: 1.2em;
     margin: 0;
 }

 /* Animation for hovering over events */
 .highlight {
     color: yellow;
     transition: transform 0.3s ease, text-shadow 0.3s ease;
     line-height: 1.5;
 }

 .highlight:hover {
     transform: scale(1.1); /* Slightly enlarges the text */
     text-shadow: 0 0 10px red; /* Adds a glowing effect */
 }


/* ---------- MEDIA EMBEDS ---------- */

/* Ensure the YouTube video takes up 60% of the viewport width */
 .youtube-video-wrapper {
     width: 50vw; /* 60% of viewport width */
     max-width: 1000px; /* Adjust as needed */
     margin: 20px 0; /* Space around the video */
     position: relative;
     padding-top: 56.25%; /* Adjusted for a 16:9 aspect ratio */
 }

 .youtube-video {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     border: none;
 }


/* ================================
   6) OVERRIDES
   Bandsintown: alt der starter med .bit-
   (hold det samlet her, så du altid kan finde det)
   ================================ */

#tour .bit-rsvp.bit-button {
               display: none;
}

#tour .bit-widget .bit-clickable-nav-link {
        font-size: 30px;
}

#tour .bit-widget .bit-play-my-city-heading-text {
    font-size: 25px;
}


#tour .bit-location-under-tablet {
          display: block;
          text-align: center;
          font-size: 25px;
          line-height: 2.2;
      }

#tour .bit-widget .bit-vertical-date
{
    border-style: solid;
    border-color: #4A4A4A;
    border-radius: 10px;
    border-width: 1px;
    padding: 5px;
    margin-right: 20px;
}

#tour .bit-widget.bit-layout-desktop .bit-vertical-date-numeric-date {
    font-size: 25px;
    line-height: 36px;
}

#tour .bit-widget.bit-layout-desktop .bit-venue-vertical {
    font-size: 25px;
}


#tour .bit-widget .bit-play-my-city-cta {
    display: none;
}

/* ================================
  5) SECTIONS (continued)
  MUSIK + CONTACT er mere komplekse og ligger her nede.
  ================================ */

/* MUSIK: baggrund + overlays */
 #musik {
     padding-top: 60px; /* mindre luft i toppen */
 }
 .live-image {
     width: 100%;
     padding: 0;
     margin: 0;
 }

 .live-image img {
     width: 100%;
     height: 60vh;
     object-fit: cover;
     display: block;
     filter: grayscale(100%);
 }


/* MUSIK: spacing + image block */
 #musik{
     position: relative;
     background: url("images/test1.jpg") no-repeat 65% center / cover;
 }

 #musik::before{
     content:"";
     position:absolute;
     inset:0;
     filter: grayscale(100%) brightness(0.60);
     background: inherit;
     z-index:0;
 }

 #musik::after{
     content:"";
     position:absolute;
     inset:0;
     background: rgba(0,0,0,0.55);
     z-index:1;
 }

 #musik > div{ position: relative; z-index: 2; }

 /* Kontakt: baggrund + overlay + card */
 #contact{
     position: relative;
     overflow: hidden;
     background: none; /* vigtigt */
 }

 /* mørk overlay (så tekst står skarpt) */
 #contact::before{
     content:"";
     position:absolute;
     inset: 0;
     background: url("images/opadbil.jpg") no-repeat 50% 28%;
     background-size: cover;
     filter: grayscale(100%) brightness(0.65);
     z-index: 0;
 }

 #contact::after{
     content:"";
     position:absolute;
     inset: 0;
     background: rgba(0,0,0,0.60);
     z-index: 1;
 }

 /* “overhæng”/card */
 #contact > div{
     position: relative;
     z-index: 2;

     max-width: 350px;
     width: 100%;
     margin: 0 auto;

     padding: 48px 36px;

     background: rgba(0,0,0,0.45);   /* card baggrund */
     border: 2px solid yellow;          /* 🔥 rød ramme */
     border-radius: 12px;

     box-shadow: 0 12px 40px rgba(0,0,0,0.7);

     color: yellow;
 }


 /* Sørg for at indhold i MUSIK ikke shrink-wraps af section:flex */


 /* Sørg for at Spotify wrapper fylder */
 #musik .spotify-wrap {
     width: 100%;
     max-width: 700px;
 }

 /* iframe skal være block og fylde */
 #musik .spotify-wrap iframe {
     display: block;
     width: 100%;
     height: 400px; /* prøv 420-520 for “bred vibe” */
     border: 0;
 }



 /* Begræns kun INDHOLD, ikke baggrunde */
 section > div,
 .header-content,
 #tour .tour-inner{
     width: min(var(--max), calc(100% - (var(--gutter) * 2)));
     margin-left: auto;
     margin-right: auto;
 }

 /* 5) Sikkerhedsnet: ingen billeder/iframes må lave overflow */
 img, iframe{
     max-width: 100%;
 }

/* ================================
   8) MEDIA QUERIES
   Samlet nederst, så overrides altid er “sidste ord”.
   ================================ */

/* =========================================================================================
   =============================== DESKTOP (>= 1024px) =====================================
   ========================================================================================= */
 @media (min-width: 1024px){

     .header-content{
         justify-content: space-between;
         padding: 0 50px;
     }

     .band-intro{
         font-size: clamp(52px, 5vw, 110px);
     }

     /* 4) MUSIK: mere højde + bedre billed-fokus + content-width */
     #musik{
         min-height: 70vh;
         padding-top: 100px;
         padding-bottom: 100px;
         background-position: 65% 30%;
     }

     #musik > div{
         width: min(900px, calc(100% - 48px));
         max-width: 600px;
     }

     #musik .spotify-wrap{
         width: 100%;
         max-width: 900px;
         margin: 0 auto;
     }

     #musik .spotify-wrap iframe{
         width: 100%;
         height: clamp(340px, 32vw, 460px);
         display: block;
         border: 0;
     }




 } /* ✅ SLUT DESKTOP */


/* =========================================================================================
   ============================== ULTRAWIDE (>= 1900px) ====================================
   ========================================================================================= */
 @media (min-width: 1900px){


     /* Header ultrawide (din blok) */
     header{
         padding-top: 18px;
         padding-bottom: 18px;
     }

     .header-content{
         width: auto;
         max-width: none;
         justify-content: center;
         gap: 18px;
     }

     header a{
         font-size: 1.90em;
         padding: 10px 22px;
     }

     .social-media-buttons img{
         width: 53px;
         height: 53px;
     }

     .social-media-buttons{
         margin-left: 10px;
     }

     /* MUSIK ultrawide (din blok) */
     #musik{
         min-height: 80vh;
         padding-top: 180px;
         padding-bottom: 120px;
         background-position: 65% 30%;
     }

     #musik > div{
         width: min(900px, calc(100% - 48px));
         max-width: 900px;
     }

     #musik .spotify-wrap{
         width: 100%;
         max-width: 900px;
         margin: 0 auto;
     }

     #musik .spotify-wrap iframe{
         width: 80%;
         height: clamp(340px, 32vw, 460px);
         display: block;
         border: 0;
     }

     /* Section titles større på ultrawide */
     .section-title{
         font-size: clamp(80px, 5vw, 100px);
     }

     /* CONTACT ultrawide (din blok) */
     #contact{
         min-height: 100vh;
         padding-top: 140px;
         padding-bottom: 140px;
     }

     #contact::before{
         background-size: cover;
     }

     #contact .section-content{
         transform: scale(1.3);
         transform-origin: center;
         padding-top: 40px;
     }

     #contact .section-title{
         margin-bottom: 20px;
     }

     #contact > div{
         max-width: 520px;
         padding: 56px 44px;
         box-sizing: border-box;
         margin: 0 auto;
     }
 } /* ✅ SLUT ULTRAWIDE */


/* =========================================================================================
   =================== MOBIL (<= 768px) + PORTRAIT (stående) ===============================
   ========================================================================================= */
 @media (max-width: 768px) and (orientation: portrait) {
     .mobile-menu-button {
         top: 20px;
         right: 10px;
         font-size: 2em;
         display: block;
     }

     .mobile-menu {
         position: fixed;
         top: 0;
         right: 0;
         height: 100dvh;
         width: min(86vw, 200px);
         background: rgba(255, 255, 255, 0.85); /* 👈 semi-transparent */
         box-shadow: -24px 0 60px rgba(0, 0, 0, .25);
         transform: translateX(110%);
         opacity: 1; /* drop opacity fade på selve panelet */
         transition: transform .28s ease;
         z-index: 1001;
         border-top-left-radius: 18px;
         border-bottom-left-radius: 18px;
         overflow: hidden;
     }


     .social-media-buttons-mobile {
         display: flex;
         justify-content: center;
         align-items: center;
         gap: 35px;
         height: 100%;
         padding-bottom: 20px;
     }

     #tour {
         background-position: center center;
     }

     .social-media-buttons a {
         display: inline-block;
         transition: background-color 0.3s, transform 0.3s;
     }

     .social-media-buttons img {
         width: 35px;
         height: 35px;
         display: block;
     }

     .header-content {
         display: none;
     }

     header {
         border-bottom: none;
         box-shadow: none;
         background: none;
         margin: 0; /* Ensure no margin is pushing it down */
         padding: 0; /* Reset padding if any exists */
         position: relative; /* Make sure it's positioned correctly */
         top: 0;
     }

     .band-intro img {
         width: 100%;
         height: 100%;
         object-fit: cover;
         inset: 0;
         position: absolute;
         filter: grayscale(100%);
         transform: scale(1);
         object-position: 10% center; /* keep framing sane */
     }

     .band-intro {
         width: 100%;
         min-height: 100vh;
         padding-right: 30px;
         padding-top: 65px; /* clears header */
         background-size: contain; /* or "cover" if you want it stretched */
         background-position: center;
         background-repeat: no-repeat;
         display: flex;
         flex-direction: column;
         justify-content: flex-start; /* vertically center text */
         align-items: center; /* horizontally center text */
         color: red; /* text color */
         text-align: center;
         font-family: 'Being-ExtraBold', sans-serif;
         position: relative;

     }

     .band-intro h1 {
         margin-top: 0; /* remove extra space */
     }

     #Start-title {
         margin-top: 0; /* remove default spacing */
         padding-top: 1vh;
         z-index: 2;
         position: relative; /* place above overlay */
         transform: translateY(-40px);
         font-size: 14vw;
         line-height: 0.95;
         padding-right: 120px;
     }

     #contact {
         padding-top: 80px;
     }

     #contact > div {
         display: inline-block; /* 👈 shrink-wrap */
         width: fit-content;
         max-width: min(520px, calc(100% - 48px)); /* stadig responsiv */
         box-sizing: border-box;
         text-align: center;
         border: 2px solid yellow; /* rammen på card’et */
         padding: 48px 36px;
         margin: 0 auto;
     }

     /* SoMe ikoner i kontakt: lidt mindre så de ikke sprænger */
     #contact .social-media-buttons-mobile img {
         width: 34px;
         height: 34px;
     }

     #musik {
         background-position: 38% 35% !important; /* 👈 helt mod venstre */
         min-height: unset !important; /* slår 50vh fra */
         height: auto !important;
         padding: 48px 16px 8px !important; /* stram top/bund */
         align-items: flex-start !important; /* ikke midt-centreret */
     }

     /* MOBIL: gør musik-indholdet smallere og mere kontrolleret */
     #musik > div {
         width: min(92vw, 340px) !important;
         max-width: 340px !important;
     }

     /* MOBIL: gør teksten mindre (din er 40px pt.) */
     #musik .section-content {
         font-size: 28px !important;
     }

     /* MOBIL: gør spotify-boksen smallere og centreret */
     #musik .spotify-wrap {
         width: 100% !important;
         max-width: 300px !important;
         margin: 0 auto !important;
     }

     /* MOBIL: gør iframe lavere (og dermed visuelt mindre) */
     #musik .spotify-wrap iframe {
         width: 100% !important;
         height: 400px !important; /* prøv 220–300 */
         display: block;
         margin-bottom: 0 !important;
     }

    #tour .bit-widget .bit-nav-bar-container .bit-nav-bar {
        display: flex;
        float: none;
        line-height: 20px;
        flex-direction: row;
        align-items: flex-end;
        padding: 20px  10px 0;
    }

    #tour .bit-widget.bit-layout-ipad .bit-event .bit-button {
        display: none;
    }

        #tour .bit-widget .bit-nav-bar-container .bit-nav-bar {
            line-height: 30px;
        }}

        /* ✅ SLUT MOBIL */