@media (max-width: 767px) {
  .container {
    margin-left: 0;
    margin-right: 0;
  }

  .place__left h1 {
    font-size: 18px;
  }

  .single .place__box h3 {
    font-size: 16px;
  }
}


.site-grid {
    grid-gap: 0;
}

        
.row {
    display: flex;
    flex-wrap: wrap;
  }
  
  .breadcrumb {
    display: flex;
    align-items: center;
    padding: 5px;
    border-radius: 50px;
    background-color: #f0f0f0;
    color: #333;
    gap: 10px;
    transition: background-color 0.3s;
    font-size:14px;
 }
 
  .place-item {
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  .entry-detail {
    flex: 1; /* Gör så att .entry-detail expanderar och tar upp tillgängligt vertikalt utrymme */
  }
  
  .box-layout-02 {
    background: #ffffff;
    border: solid 1px #eeeeee;
    border-top: 0;
    padding: 20px;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.05);
    margin-bottom:20px;
}

.icon-container-2 {
            margin-right: 8px; /* Ger lite utrymme mellan ikonen och texten */
        }

      
.place__box h3 {
    font-size: 22px;
    font-weight:700; 
    color: #2d2d2d;
}

.widget img {
  border: 1px solid #eee;
    border-radius: 0.25rem;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
}

.open-now {
    color: #4CAF50; /* Grön färg */
}

.closed-now {
    color: #F44336; /* Röd färg */
}

.daily-hours {
    font-size: 1.2em;
    margin-bottom: 10px;
}

.opening-hours-table {
    width: 80%; /* Exempel: Sätter bredden till 80% av förälder-elementet */
    margin-top: 10px;
    border-collapse: collapse; /* Tar bort mellanrum mellan cellerna */
}

.opening-hours-table td {
    padding: 8px;
    border-bottom: 1px solid #ddd; /* Lägger till en horisontell linje mellan raderna */
}

.opening-hours-table tr:hover {
    background-color: #f5f5f5; /* Lägger till en hover-effekt på rader */
}

.current-day {
    font-weight: bold;
    background-color: #e8f4e8;
}

.icon-container-2 {
    font-size: 24px; /* Ställ in ikonstorleken */
    vertical-align: middle;
}

.phone .www {
margin-bottom:10px;
}

.icon-circle {
  display: inline-flex;
  justify-content: center;
  background-color: #e4e4e4;
  align-items: center;
  width: 35px; /* Eller vilken storlek du vill ha på din cirkel */
  height: 35px; /* Måste vara samma som bredden för att göra cirkeln perfekt rund */
  border-radius: 50%;
  text-align: center;
  font-size:16px;
  color: #868484;
}


.highlight {
background-color: #e4e4e4;
}

.blue {
background-color: #89a8e1;
color: #f7f7f7;
}

.grey {
background-color: #dfdddd;
color: #868484;
}

.grey2 {
color: #f0f0f0;
}

.yellow {
background-color: #FFC436;
color: #f7f7f7;
}

.red {
background-color: #FF8080;
color: #f7f7f7;
}

.green {
background-color: #b3fabf;
color: #f9fbf7;
}

.green2 {
background-color: #037a34;
color: #f9fbf7;
}
.black {
background-color: #000;
color: #f7f7f7;
}

.listing-desc {
background-color: #fff;
    margin: 20px 0;
    } 
    
.icon-container-2 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    margin-right: 10px;
}

.icon-container {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    margin-right: 10px;
}

.icon-container-big {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 100px;
    border-radius: 50%;
}

.map-address a {
    color: #666;
    font-size: 14px;
    margin-bottom: 10px;
  }
  
.icon-nearby {
    display: flex;
    align-items: center;
    padding: 5px;
    border-radius: 50px; /* Adjust if you want the container to have less rounded corners */
    background-color: #f0f0f0; /* Light grey background for the container */
    color: #333; /* Text/icon color */
    gap: 10px; /* Space between items within the flex container */
    transition: background-color 0.3s; /* Smooth transition for background color change */
}

.icon-nearby i {
    background-color: #ccc; /* Darker grey background specifically for the icon */
    padding: 8px; /* Space around the icon */
    border-radius: 50%; /* Makes the background of the icon circular */
    /* Ensure the icon font size is large enough for visibility and adjust if needed */
    font-size: 16px; /* Example font-size, adjust as needed */
    display: flex; /* To center the icon if it does not align properly */
    justify-content: center;
    align-items: center;
}

.icon-nearby a {
    text-transform: lowercase; 
}

.icon-nearby .listing-text,
.place__title--reviews .listing-text {
    /* To make sure the text displays in normal case if a style elsewhere has made it uppercase */
    text-transform: none; /* This will display the text as it is, without transforming to uppercase */
}

/* If you want to capitalize the first letter of each word */
.icon-nearby .listing-text,
.place__title--reviews .listing-text {
    text-transform: capitalize;
}
  
 .count-reviews .report a {
     color: #666;
    font-size: 14px;
  }

/* category-icons.css */
.mt-category-subcats .mt-category-subcats-item {
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
    position: relative;
    text-align: center;
    background-size: cover; /* Försäkrar att en bakgrundsbild, om tillämpad, täcker hela elementet */
}

.mt-category-subcats-item a {
    text-decoration: none;
    display: flex;
    align-items: center;
    padding: 5px;
    border-radius: 50px;
    background-color: #f0f0f0;
    color: #333;
    gap: 10px;
    transition: background-color 0.3s; /* Övergångseffekt för hover */
}

.mt-category-subcats-item a:hover {
    background-color: #e9ecef;
}

.fa-icon-circle {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    }
    
    .fa-icon-circle2 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    
}

.fa {
    font-size: 16px;
}

.la {
    font-size: 20px;
}

.mt-category-subcats-featured a {
  font-weight: 500;
}

/* Basstilar för RSS-flödet */
.newsfeed {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.newsfeed li {
    margin-bottom: 15px;
    padding: 10px;
    border-bottom: 1px solid #eaeaea;
}

/* Stil för enskilda länkar */
.feed-link a {
    color: #0078d4; /* Länkfärg */
    text-decoration: none; /* Tar bort understrykning */
    font-weight: bold; /* Gör texten fett */
}

.feed-link a:hover {
    text-decoration: underline; /* Lägger till understrykning på hover */
}

/* Stil för beskrivningar */
.feed-item-description {
    color: #333; /* Mörkare textfärg för beskrivning */
    margin-top: 5px;
}

/* Vissa extra stilregler för att hantera avstånd och layout */
.newsfeed li:last-child {
    border-bottom: none; /* Tar bort border på sista elementet */
}

/* Responsive design för mindre skärmar */
@media (max-width: 768px) {
    .newsfeed li {
        padding: 10px 5px;
    }
    .feed-link a {
        font-size: 16px;
    }
}

.wrap-image {
    float: right;
    max-width: 400px; /* eller något värde som passar din layout */
    height: auto;
    margin: 20px 0 10px 20px; /* ger plats till vänster om bilden och nedan */
    border: solid 3px #eeeeee;
    border-top: 0;
    border-radius: 8px;
}

.mt-category-desc {
    overflow: hidden; /* säkerställer att texten omsluter floating-element */
}

footer {
    padding-top: 20px;
    padding-bottom: 20px;
}

.footer-container {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: flex-start;
    flex-wrap: wrap;
    margin: auto;
}

.footer-section h4 {
    color: #666;
}

.footer-section ul, .footer-section p {
    list-style: none;
    padding: 0;
}

.footer-section a {
    color: #666;
    text-decoration: none;
    display: block;
    margin-bottom: 5px;
}

.footer-section a:hover {
    text-decoration: underline;
}

.socials {
    display: flex;
    list-style: none;
}

.socials li {
    margin-bottom: 20px;
}

.socials a {
    display: inline-block;
    width: 40px;
    height: 40px;
    background: #e8491d;
    border-radius: 50%;
    color: #fff;
    line-height: 40px;
    text-align: center;
    transition: background-color 0.3s;
}

.socials a:hover {
    background: #c1351d;
}

.socials a i {
    margin-right: 8px; /* Lägg till lite utrymme mellan ikonen och texten */
}

@media (max-width: 768px) {
    .footer-container {
        flex-direction: column;
        align-items: center;
    }

    .footer-section {
        margin-bottom: 20px;
    }
}

.listing-text {
  color: #acacac;
    font-size: 14px;
  font-weight: normal; /* Om huvudtexten är fetare, gör denna normal för kontrast */
  display: inline-block;
  margin-left: 5px; /* Ger lite utrymme mellan "Betygsätt" och "Emporia" */
  position: relative;
  top: -3px; /* Justerar vertikal position lätt uppåt */
  }
  
.count-reviews {
  color: #acacac;
    font-size: 14px;
  font-weight: normal; /* Om huvudtexten är fetare, gör denna normal för kontrast */
  display: inline-block;
  margin-left: 5px; /* Ger lite utrymme mellan "Betygsätt" och "Emporia" */
  }

hr {
  border: none;
  height: 1px; /* Höjden på linjen */
  background: linear-gradient(to right, #8e9eab, #fff);
}

@media (max-width: 768px) {
  .place__box h3 {
    text-align: left;
  }
}

.place__logo {
  margin: 20px 0; 
  padding: 10px; 
  text-align: center; /* Om du har text eller andra element, håll dem centrerade */
  background-color: #f9f9f9; /* En lätt bakgrundsfärg, ändra efter behov */
  border-radius: 8px; /* Ger en försiktig runt hörn på inramningen */
  box-shadow: 0 1px 1px rgba(0,0,0,0.1); /* En subtil skugga för djup */
  max-width: 300px; /* En maximal bredd för logon, ändra efter din bilds storlek */
  overflow: hidden; /* Säkerställer att inget går utanför de rundade hörnen */
}

.place__logo img {
  width: 100%; /* Får bilden att skala med elementets bredd */
  height: auto; /* Bibehåller aspektratio så bilden inte förvrängs */
  display: block; /* Tar bort extra utrymme under bilden */
}

.place__logo:hover {
  transform: scale(1.05); /* Lätt zoom in-effekt */
  transition: transform 0.3s ease; /* För smidig animationsförändring */
}

.place-thumb {
    position: relative; /* Positionera ikontext med avseende på detta */
    /* Andra stilar som du har */
}

.place-thumb img {
    /* Se till att bilden fyller sin container */
    display: block;
    width: 100%;
    /* Lägg till mer stilar vid behov */
}

.icon-text {
    position: absolute; 
    top: 0;
    left: 0;
    color: white; /* Lägg till lämplig textfärg */
    padding: 7px 5px; /* Lite utrymme inuti ikon-text containern */
}

.icon-text {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    text-transform: none;
    font-weight:500;
    font-size:14px;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 25px;
    padding: 3px 10px 3px 3px;
    margin: 5px 3px 0px 3px;
}

.place__desc2 ul {
  list-style-type: none; /* Tar bort punkterna */
  padding-left: 0; /* Tar bort vänster padding så att texten är i linje med resten av innehållet */
  margin-bottom:20px;
}


.place__desc2 ol {
  list-style: none; /* Tar bort nummer */
  padding-left: 0; /* Tar bort vänster padding så att texten är i linje med resten av innehållet */
  margin-bottom:20px;
}

.place__desc2 li {
  margin-bottom: 10px; /* Lägger till lite utrymme mellan varje listpunkt */
}

.place__desc2 p {
  margin: 10px 0; /* Tar bort marin på paragrafer för att undvika extra utrymme */
}

.place-item-summary {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    border-radius: 8px;
    margin-bottom: 20px;
}

.place-inner-summary {
    display: flex;
    flex-direction: column;
}

.place-thumb-summary {
    position: relative;
    overflow: hidden;
    line-height: 0;
}

.place-thumb-summary img {
    width: 100%;
    height: auto;
    transition: transform 0.3s ease;
    height: 210px;
    object-fit: cover;
}

.place-thumb-summary:hover img {
    transform: scale(1.1);
}

.place-thumb-summary-small {
    background-image: url('/media/com_mtree/images/no-img-small-shopping.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;  /* Ställ in önskad bredd */
    height: 80px; /* Ställ in önskad höjd */
}


.place-type-summary {
    position: absolute;
    border-radius: 25px;
    padding: 3px 10px 3px 3px;
    margin: 5px 3px 0px 3px;
    background-color: rgba(255, 255, 255, 0.8);
    box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    font-size: 14px;
}


.icon-container-summary {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px;
    border-radius: 50%;
    color: #2d2d2d;
    margin-right: 5px;
    font-size: 16px;
    width: 30px; /* Justerbar baserat på ikonstorlek */
    height: 30px;
}

.entry-detail-summary {
    padding: 5px 15px 0 15px;
    background-color: #fff;
}

.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


.entry-head-summary {
    margin-bottom: 10px;
}

.place-title-summary {
   font-size: 22px;
    font-weight:700; 
    color: #2d2d2d;
    line-height: 1.4;
   
}

.place-title-summary a {
    text-decoration: none;
    color: inherit;
}

.place-rating-summary {
    display: flex;
    align-items: center;
}

.colored-star-summary {
    color: #FFD700;
}

.place-preview {
   padding: 0 10px 0 10px;
}

.count-reviews-summary {
    font-size: 14px;
    color: #777;
    margin-bottom: 10px;
}

.place-rating-summary,
.count-reviews-summary {
    display: inline-flex; /* Makes the elements flex containers themselves, aligning children inline */
    align-items: center; /* Aligns the content of the rating and review flex containers vertically */
}


/* Omdömen container */
.mt_review {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Omdöme post */
.mt_review-item {
    background-color: #fff;
    border: 1px solid #eaeaea;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin-bottom: 24px;
    padding: 24px;
    border-radius: 8px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Omdöme post - hover effekt */
.mt_review-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Användarnamn */
.mt_review-item h3 {
    font-size: 20px;
    font-weight: 500;
    line-height: 1.4;
    margin: 5px 0px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mt_review-item h3 a {
    text-decoration: none;
}

/* Omdömestexten med citattecken */
.mt_review-item p {
    font-size: 16px;
    line-height: 1.6;
    color: #555;
    position: relative;
    padding-left: 30px;
}

.mt_review-item p:before {
    content: "“";
    font-size: 4rem;
    color: #f0f0f0;
    position: absolute;
    left: 0;
    top: -20px;
}

/* Datum och annan metadata */
.mt_review-item small {
    display: block;
    margin-top: 16px;
    font-size: 0.875rem;
    color: #999;
}

/* Responsiva stilar */
@media (max-width: 768px) {
    .mt_review-item h3 {
        font-size: 1rem;
    }

    .mt_review-item p {
        font-size: 14px;
        line-height: 1.4;
        padding-left: 25px;
    }

    .mt_review-item p:before {
        font-size: 3rem;
    }

    .mt_review-item p:after {
        font-size: 3rem;
    }
    
.mt_review-item h3 i {
    margin-right: 8px;
    font-size: 1.2rem; 
    vertical-align: middle; /* Centrera ikonen vertikalt */
}
    .mt_review-item small {
        font-size: 0.75rem;
    }
}

.place__title--openhour {
    background-color: #f9f9f9; 
    border-left: 4px solid #FFC436; 
    padding: 10px;
    border-radius: 5px;
    color: #333; 
    margin: 10px 0;
    max-width: 600px; 
    
}

.today {
    background-color: #f9f9f9;     
}

   .facilities {
            width: 100%;
            margin: auto;
            padding: 20px 0;
        }

        .facilities h2 {
            text-align: center;
            margin-bottom: 20px;
        }

        .facility-list {
            list-style-type: none;
            display: flex; /* Gör listan flexibel */
            flex-wrap: wrap; /* Tillåter innehåll att rada upp på ny rad */
            padding: 0;
            justify-content: left; /* Centrerar elementen horisontellt */
            max-width: 1200px; /* Maxbredd för listcontainer */
            margin: auto; /* Centrerar listcontainer */
        }

        .facility-list li {
            width: 20%; /* 100% / 5 för att få 5 element per rad */
            padding: 10px; /* Lägg till lite utrymme runt varje element */
            box-sizing: border-box; /* Säkerställer att padding räknas in i bredden */
            text-align: center; /* Centrerar texten inom varje element */
        }

        .facility-list li i {
            margin-right: 8px;
            color: #4BB543; /* Grön färg för tillgängliga faciliteter */
        }

        @media (max-width: 1200px) {
            /* Justera för mindre skärmar, färre än 5 */
            .facility-list li {
                width: 50%; /* 2 per rad på mindre skärmar */
            }
        }

        @media (max-width: 600px) {
            /* Enkolumns layout för riktigt små skärmar */
            .facility-list li {
                width: 100%; /* 1 per rad på små skärmar */
            }
        }
   .popup-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: none;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1000;
        justify-content: center;
        align-items: center;
      }

      .popup-content {
        background: #fff;
        padding: 20px;
        border-radius: 5px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
      }

     /* Stil för social-media-list och social-media-item */
.social-media-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.social-media-item {
  margin-bottom: 10px; /* Ger avstånd mellan listobjekten */
}

.social-media-item a {
  text-decoration: none; 
  color: #333;
  font-weight: bold;
  font-size: 14px; /* Justera storleken efter behov */
  display: inline-block;
  padding: 10px 15px;
  border-radius: 30px;
  transition: background-color 0.3s ease;
}

.social-media-item i {
  margin-right: 8px; /* avstånd mellan ikon och text */
}

/* Specifik ikon- och länkfärg */
#facebookShare i {
  color: #3b5998;
}

#facebookShare:hover {
  background-color: #3b5998;
  color: white;
}

#twitterShare i {
  color: #1da1f2;
}

#twitterShare:hover {
  background-color: #1da1f2;
  color: white;
}

#copyLink i {
  color: #565656;
}

#copyLink:hover {
  background-color: #565656;
  color: white;
}

/* Rundade ikoner med specifik klass */
.social-media-item .fab, .social-media-item .fas {
  border-radius: 50%; /* Fullständigt rund form */
  padding: 5px;
  align-items: center;
    width: 35px;
    height: 35px;
  background-color: #f0f0f0; /* Ljus bakgrundsfärg för ikonerna */
  color: white; /* Sätter färgen på ikonerna till vit */
}

.social-media-item .fab:hover, .social-media-item .fas:hover {
  color: white; /* Behåller färgen vit när man hovrar (om du vill ha det) */
}