/* Menyn i headern */
.slot--header-horizontal-menu .nav .open > a,
.slot--header-horizontal-menu .nav .open > a:hover,
.slot--header-horizontal-menu .nav .open > a:focus,
.slot--header-horizontal-menu .nav a:focus {
    background: transparent;
}

.slot--header-horizontal-menu {
    border-top: none;
    margin-bottom: 3px;
}

.slot--header-horizontal-menu .navbar-nav > li a {
    padding: 8px 14px;
    border-radius: 3px;
}

.slot--header-horizontal-menu .navbar-nav > li a:hover {
    background: #006dc3 !important;
    color: #fff !important;
    border-radius: 3px;
}

/* Header utan skugga */
.bountiful--header {
    box-shadow: none;
}

/* Desktop-layout: göm sidebar, gör main fullbredd */
@media (min-width: 1100px) {
    .startpage .bountiful--sidebar {
        display: none;
    }

    .startpage .bountiful--body .bountiful--body-wrapper .bountiful--main {
        float: none;
        width: 100%;
        margin: 0;
    }

    .startpage .bountiful--body .bountiful--body-wrapper {
        padding: 0 0 40px 0;
        width: 100%;
        overflow-x: hidden;
        max-width: none;
    }

    .startpage .bountiful--body .bountiful--body-wrapper .bountiful--main .bountiful--main-wrapper {
        box-shadow: none;
        padding: 0;
    }

    .startpage .hero {
        max-width: none !important;
        width: 100% !important;
    }

    .startpage .tws-container--tws-image-carousel,
    .startpage .tws-container--tws-custom-html,
    .startpage .tws-container--tws-articles-two,
    .startpage .newsletter,
    .startpage .shopwindow {
        max-width: 1400px;
        margin: 0 auto !important;
        padding: 20px 10px 10px 10px;
    }
}

/* Bildspel: ta bort extra padding */
.tws-container--tws-image-carousel.hero {
    padding: 0 !important;
}

/* Responsiv tabell */
@media (max-width: 768px) {
    .responsive-table tr,
    .responsive-table td {
        display: block;
        width: 100%;
    }

    .responsive-table td {
        padding: 1.5rem !important;
    }
}

/* Menyn utan extra mellanrum */
.slot--header-horizontal-menu {
    margin-bottom: 0 !important;
}

/* MOBIL: gör HERO fullbredd */
@media (max-width: 1100px) {
    .startpage .hero,
    .startpage .tws-container--tws-image-carousel.hero {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .startpage .bountiful--body .bountiful--body-wrapper,
    .startpage .bountiful--main,
    .startpage .bountiful--main-wrapper {
        max-width: 100% !important;
        padding: 0 !important;
    }
}

/* Desktop Instagram-bilder */
.tws-instagram--insta-post {
    width: 250px !important;
    height: 250px !important;
    background-size: cover !important;
    background-position: center !important;
    border-radius: 10px;
    margin: 0 auto;
}



.tws-instagram--posts-container > a {
    padding: 0 20px !important;
    display: inline-block;
}

/* ================================
   MOBILFIX FÖR VIDEO-BLOCKEN
   ================================ */
@media (max-width: 768px) {

    .tws-container--tws-custom-html video {
        width: 100% !important;
        height: auto !important;
        display: block !important;
    }

    .tws-container--tws-custom-html div[style*="border: 4px solid"] {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
    }

    .tws-container--tws-custom-html > div {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* MOBILFIX FÖR REKLAMBILDEN */
@media (max-width: 768px) {
    .tws-container--tws-custom-html img {
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
    }
}

/* PIXELPERFEKT MOBILVERSION FÖR VIDEOSEKTIONEN */
@media (max-width: 768px) {

    .tws-container--tws-custom-html > div {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        padding: 0 10px !important;
    }

    .tws-container--tws-custom-html h2 {
        font-size: 22px !important;
        margin-bottom: 12px !important;
        line-height: 1.2 !important;
    }

    .tws-container--tws-custom-html div[style*="border: 4px solid"] {
        border-width: 3px !important;
        border-radius: 14px !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
    }

    .tws-container--tws-custom-html video {
        width: 100% !important;
        height: auto !important;
        display: block !important;
        border-radius: 10px !important;
    }

    .tws-container--tws-custom-html p {
        font-size: 15px !important;
        line-height: 1.45 !important;
        margin-top: 12px !important;
        padding: 0 6px !important;
    }

    .tws-container--tws-custom-html > div {
        margin-bottom: 40px !important;
    }
}

/* MOBIL: Gör videoblocken fullbredd och staplade */
@media (max-width: 768px) {
    .startpage-videoblock {
        width: 100% !important;
        max-width: 100% !important;
        display: block !important;
        margin: 0 auto 30px auto !important;
    }
}

/* Ta bort vit kant under PNG-bilden */
.startpage .tws-container--tws-custom-html {
    padding-bottom: 0 !important;
}

/* ============================================
   MOBIL: Stabil 2x2 Instagram-grid + spacing
   ============================================ */
@media (max-width: 768px) {

    /* spacing före/efter flödet */
    .tws-instagram--posts-container {
        margin-top: 40px !important;
        margin-bottom: 40px !important;
    }

    /* grid */
    .tws-instagram--posts-container {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 6px !important;
        width: 100% !important;
        justify-items: center !important;
        align-items: center !important;
        padding: 0 !important;
    }

    /* länkar */
    .tws-instagram--posts-container > a {
        display: block !important;
        width: 100% !important;
        max-width: 140px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* bilder */
    .tws-instagram--insta-post {
        width: 100% !important;
        height: 140px !important;
        border-radius: 10px !important;
        background-size: cover !important;
        background-position: center !important;
        display: block !important;
    }
}

/* Mer spacing före och efter Instagram-sektionen */
.tws-container--tws-instagram {
    margin-top: 0px !important;
    margin-bottom: 90px !important;
}

/* MOBIL: Perfekt centrerad och tight 2x2 Instagram-grid */
@media (max-width: 768px) {

    .tws-instagram--posts-container {
        display: grid !important;
        grid-template-columns: 140px 140px !important; /* två fasta kolumner */
        justify-content: center !important; /* centrerar hela gridet */
        gap: 8px !important; /* lagom tight */
        padding: 0 !important;
        width: 100% !important;
        margin: 40px auto !important; /* spacing ovan/under */
    }

    .tws-instagram--posts-container > a {
        display: block !important;
        width: 140px !important;
        height: 140px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .tws-instagram--insta-post {
        width: 140px !important;
        height: 140px !important;
        border-radius: 10px !important;
        background-size: cover !important;
        background-position: center !important;
        display: block !important;
    }
}

/* MOBIL: Gör footer-bilden mindre utan att påverka andra bilder */
@media (max-width: 768px) {
    img.footer-logo {
        width: 150px !important;   /* justera här: 140–180px beroende på känsla */
        max-width: 80% !important;
        height: auto !important;
    }
}


/* --- Nyhetssektion --- */

#medicolle-news {
  margin: 60px 0;
  text-align: center;
}

.news-title {
  font-size: 2.2em;
  color: #006dc3;
  margin-bottom: 40px;
}

/* Grid */
.news-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  max-width: 1200px;
  margin: 0 auto;
  justify-content: center;
}

/* Kort */
.news-card {
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.08);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  margin: 0 auto;
}

/* --- Dynamisk, responsiv bild --- */
.news-image-wrapper {
  width: 100%;
  max-height: 260px;      /* kontrollerad höjd på desktop */
  overflow: hidden;
}

.news-image {
  width: 100%;
  height: 100%;
  object-fit: cover;       /* beskär snyggt */
  display: block;
}

/* Mobilanpassning för bild */
@media (max-width: 900px) {
  .news-image-wrapper {
    max-height: 180px;     /* lägre höjd på mobil */
  }
}

/* Innehåll */
.news-content {
  padding: 20px;
  text-align: left;
}

.news-date {
  background: #006dc3;
  color: white;
  padding: 5px 12px;
  border-radius: 4px;
  font-size: 0.85em;
  font-weight: 600;
}

.news-heading {
  margin-top: 15px;
  color: #003366;
  font-size: 1.4em;
  line-height: 1.3;
}

.news-text {
  color: #34495e;
  margin: 15px 0 25px;
  font-size: 1em;
  line-height: 1.5;
}

/* --- KNAPPSTIL (EXAKT SOM OCT-PRODUKTER) --- */

/* Läs mer-knapp */
.news-readmore,
.news-readmore:link,
.news-readmore:visited,
.news-readmore:hover,
.news-readmore:active {
  display: inline-block;
  padding: 12px 28px;
  background-color: #0077cc;
  color: white !important;
  text-decoration: none !important;
  border-radius: 40px;
  font-size: 18px;
  font-weight: bold;
  transition: all 0.25s ease;
}

.news-readmore:hover {
  background-color: #005fa3 !important;
  transform: scale(1.06);
  box-shadow: 0 4px 10px rgba(0,0,0,0.25);
}

/* Visa alla nyheter-knapp */
.news-all-wrapper {
  text-align: center;
  margin-top: 70px; /* mer luft under korten */
}

.news-all-btn,
.news-all-btn:link,
.news-all-btn:visited,
.news-all-btn:hover,
.news-all-btn:active {
  display: inline-block;
  padding: 12px 28px;
  background-color: #0077cc;
  color: white !important;
  text-decoration: none !important;
  border-radius: 40px;
  font-size: 18px;
  font-weight: bold;
  transition: all 0.25s ease;
}

.news-all-btn:hover {
  background-color: #005fa3 !important;
  transform: scale(1.06);
  box-shadow: 0 4px 10px rgba(0,0,0,0.25);
}

/* Mobil */
@media (max-width: 900px) {
  .news-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   IOL-PORTAL – FULLBREDD, UTAN SIDEBAR, UTAN VIT BOX
   GÄLLER ENDAST SIDAN custompage-9104919
   ============================================================ */

/* Ta bort vänsterspalten */
.custompage-9104919 .bountiful--sidebar {
    display: none !important;
}

/* Gör hela sidans container fullbredd */
.custompage-9104919 .bountiful--body .bountiful--body-wrapper {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
}

/* Gör main fullbredd */
.custompage-9104919 .bountiful--main {
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
}

/* Ta bort den vita boxen runt innehållet */
.custompage-9104919 .bountiful--main-wrapper {
    box-shadow: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* ============================================================
   IOL-PORTAL – ISOLERAD DESIGN
   ============================================================ */

#iol-portal {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  max-width: 420px;
  margin: 0 auto;
  padding: 30px 20px;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 18px rgba(0,0,0,0.08);
  text-align: center;
  transition: max-width 0.3s ease;
}

/* När iframen visas – expandera wrappern */
#iol-portal.portal-active {
  max-width: 100%;
  padding: 0;
  box-shadow: none;
  background: transparent;
  border-radius: 0;
}

/* Titel */
#iol-portal h3 {
  margin-top: 0;
  font-size: 26px;
  color: #003f7d;
  font-weight: 600;
}

/* Inputs */
#iol-portal input[type="text"],
#iol-portal input[type="password"] {
  width: 100%;
  padding: 12px;
  margin-top: 12px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 16px;
  box-sizing: border-box;
}

/* Login-knapp */
#iol-portal button {
  margin-top: 18px;
  width: 100%;
  padding: 12px;
  background: #0055aa;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 17px;
  cursor: pointer;
  transition: background 0.2s;
}

#iol-portal button:hover {
  background: #003f7d;
}

/* Felmeddelande */
#iol-error {
  margin-top: 14px;
  color: #c00 !important;
  font-weight: 500;
}

/* Iframe-wrapper */
#iol-frame-wrapper {
  margin-top: 20px !important;
}

#iol-frame {
  width: 100% !important;
  height: 800px !important;
  border: 1px solid #ddd !important;
  border-radius: 8px !important;
}

/* Mobilanpassning */
@media (max-width: 600px) {
  #iol-portal {
    padding: 24px 16px;
  }

  #iol-portal h3 {
    font-size: 22px;
  }

  #iol-portal button {
    font-size: 16px;
  }
}

/* ============================
   FJÄRRSUPPORT-KNAPP – MOBILFIX
   ============================ */
@media (max-width: 600px) {
  .fjarrsupport-btn {
    position: static !important;
    display: inline-block !important;   /* kompakt knapp */
    margin: 20px auto 18px auto !important; /* centrerad + extra spacing nedåt */
    text-align: center !important;
  }
}