@charset "windows-1251";  
body {
            font-family: Arial, sans-serif;
            margin: 20px;
            max-width: 1366px;
            margin: 0 auto;
        }
		.topseo-btn-wrapper{
  text-align:center;
  margin:40px 0;
}

.topseo-btn{
  display:inline-block;
  padding:16px 32px;
  font-size:18px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:1px;
  color: #ffffff !important;
  background:linear-gradient(135deg,#ff0055,#7a00ff);
  border-radius:50px;
  text-decoration:none;
  transition:all .3s ease;
  box-shadow:0 10px 25px rgba(0,0,0,0.2);
}

.topseo-btn:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 35px rgba(0,0,0,0.3);
  background:linear-gradient(135deg,#ff2a75,#9b30ff);
}

.topseo-btn:active{
  transform:translateY(0);
  box-shadow:0 8px 15px rgba(0,0,0,0.2);
}
.accordion {
  max-width:800px;
  margin:20px auto;
}

.accordion-item {
  border:1px solid #eee;
  border-radius:12px;
  margin-bottom:15px;
  overflow:hidden;
  box-shadow:0 5px 15px rgba(0,0,0,0.05);
}

.accordion-header {
  background:#111;
  color:#fff;
  padding:15px 20px;
  cursor:pointer;
  font-weight:600;
}

.accordion-content {
  display:none;
  padding:20px;
  background:#313131;
  line-height:1.6;
  color: #FFF !important;
}

.accordion-item.active .accordion-content{
  display:block;
}


		.article > h1 {
    margin: 0 0 8px 0 !important;
    font-size: 18px !important;
    line-height: 1.25 !important;
    color: #0f172a !important;
    font-weight: 800 !important;
}
.article {
    background: var(--n-card) !important;
    border: 1px solid var(--n-line) !important;
    border-radius: var(--n-radius) !important;
    box-shadow: var(--n-shadow2) !important;
    overflow: hidden !important;
    padding: 0 !important;
    transition: transform .15s ease, box-shadow .15s ease !important;
} 
        header {
            margin-bottom: 70px;
            padding-bottom: 20px;
            border-bottom: 1px solid #000;
        }
        h1 {
            text-align: center;
        }
        a {
            text-decoration: none;
            color: #3c6eaf;
			font-weight: 300;
			}
        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }
        a:hover {
            color: #0849af;
        }
        .header .search {
            margin-left: auto;
        }
        .header input {
            padding: 5px;
            font-size: 1em;
        }
        .latest-articles {
            margin-bottom: 20px;
            display: flex;
            gap: 10px;
        }
        .latest-article {
            flex: 1;
            border: 1px solid #ddd;
            padding: 10px;
            background-color: #f9f9f9;
        }
        .latest-article img {
            max-width: 100%;
            height: auto;
        }
		    .rating-stars {
       font-size: 24px;
    color: gold;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 2px;
    margin-top: -60px;
    position: absolute;
    }
    .star {
        margin: 0; /* Премахване на външните отстояния */
        padding: 0; /* Премахване на вътрешните отстояния */
    }
        .article {
            border: 1px solid #ddd;
            padding: 10px;
            margin: 10px 0;
            background-color: #f9f9f9;
			min-height: 300px;
			width: 100%;
			float: left;
			max-width: 1136px;

        }
        .article img {
            height: auto;
            margin-bottom: 10px;
           max-width: 200px;
            padding-right: 15px;
            float: left;
        }
        img {
            width: 100%;
            height: auto;
            margin-bottom: 10px;
            max-width: 300px;
            padding-right: 15px;
            float: left;
            padding: 5px 0px;
        }
        .article-title {
            font-size: 1.2em;
            margin-bottom: 10px;
            line-height: 1.4;
        }
        .article-content {
            font-size: 0.8em;
            color: #333;
            line-height: 1.4;
        }
        #pagination {
            margin-top: 20px;
            max-width: 14%;
            float: right;
        }
        .article h1 {
            color: #4d4b4b;
        }
        #pagination a {
            padding: 10px;
            min-width: 15px;
            margin: auto;
            font-size: 1em;
            cursor: pointer;
            text-decoration: none;
            border: 1px solid #ddd;
            background-color: #f9f9f9;
            color: #000;
            display: inline-flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 5px;
            margin-top: 5px;
            width: 7%;
            margin-left: 2px;
			border-radius: 5px;
        }
        #pagination a.active {
            font-weight: bold;
            background-color: #ddd;
        }
        div#contttent {
            margin: 0 auto;
			margin-bottom: 30px;
			width: 97% !important;
        }
        div#articlesContainer {
            max-width: 85%;
            float: left;
        }
        img.fddfss {
            width: 131px;
            display: flex;
            float: none;
        }
        header h1 {
            text-align: center;
            font-size: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: -60px;
        }
        .header .search {
            margin-left: auto;
            width: 100%;
			display: flex;
        }
        h6 {
            margin: 0;
        }
        .header input {
            width: 300px;
        }
        h3, h2, h1 {
            color: #003485;
			font-weight: 300 !important;
        }
        li:before {
            content: "-";
            margin-right: 5px;
        }
        li {
            display: flow;
            margin-left: 10px;
        }
       
        div#footer {
            float: none;
            clear: both;
            display: flex;
            align-items: center;
            background-color:#d1d1d1;
            padding: 10px;
            color: #000;
        }
        ul {
            list-style-type: none; 
            padding: 0; 
            margin: 0; 
        }
        li {
            margin: 5px 0; /* Добавя малко разстояние между елементите, ако е необходимо */
        }
		a[href^="blob:"] {
			margin-top: -25px !important;
			position: absolute;
			margin-left: 10px;
		}
		.footer-links-container a {
    background-color: #e7e7e7;
    width: 24px;
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
		}
		@media (min-width: 769px) {
			div#footer a {
					float: left;
					align-items: center;
					padding: 0px 5px;
					margin: 1px;
					text-align: left;
					line-height: 1.2pc;
					background-color: #d9d9d9;
					justify-content: flex-start;
				}
		}
		section#dadjokes-section {
    margin-bottom: 48px;
}
        @media (max-width: 768px) {
			.article {
    border: 1px solid #ddd;
    padding: 10px;
    margin: 10px 0;
    background-color: #f9f9f9;
    min-height: 300px;
    width: auto !important;
    float: left;
    max-width: max-content !important;
}
            .latest-articles {
                margin-bottom: 20px;
                display: block;
            }
            .latest-article img {
                max-width: 100%;
                height: auto;
                max-height: max-content;
            }
            .header .search input {
                margin-left: auto;
                width: 96%;
            }
            h1 {
                text-align: left;
                font-size: 25px;
            }
            h2 {
                font-size: 20px;
            }
            #pagination a {
                padding: 6px;
                margin: 1px 1px;
                font-size: 1em;
                cursor: pointer;
                text-decoration: none;
                border: 1px solid #ddd;
                background-color: #f9f9f9;
                color: #000;
                float: left;
                width: 20%;
            }
            body {
                margin: 5px;
            }
            .article img {
                width: 100%;
                height: auto;
                margin-bottom: 10px;
                max-width: max-content;
                padding-right: 15px;
                float: left;
            }
            div#articlesContainer {
                max-width: 82%;
                float: left;
            }
            #pagination {
                text-align: center;
                margin-top: 20px;
                max-width: 17%;
                float: right;
                overflow-y: scroll;
                position: sticky;
                height: 700px;
            }
        }
		
		  div#pagination:before {
            content: "Articles:";
            display: flex;
            text-align: center;
            align-items: center;
            justify-content: center;
        }

        .rss-news {
            border-top: 1px solid #ddd;
            padding-top: 10px;
            margin-top: 20px;
            background: transparent;
            font-family: inherit;
			    margin-bottom: 40px;
				display: table;
        }

        .rss-news h2 {
            text-align: left;
            margin-bottom: 6px;
            font-size: 22px;
        }

        .rss-news h3 {
            text-align: left;
            margin-top: 0;
            margin-bottom: 12px;
            font-size: 15px;
            font-weight: normal;
            color: #555;
            line-height: 1.5;
        }

        .rss-section-menu {
            margin: 10px 0 0;
            font-size: 14px;
            text-align: center;
        }

        .rss-section-menu a {
            text-decoration: none;
            color: #005bbb;
            margin: 0 10px;
        }

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

        .rss-item {
            border: 1px solid #eee;
            padding: 15px;
            margin-bottom: 15px;
            border-radius: 6px;
            background: #fff;
        }

        .rss-item h3 {
            margin: 0 0 8px 0;
            font-size: 18px;
        }

        .rss-date {
            font-size: 12px;
            color: #777;
            margin-bottom: 8px;
        }

        .rss-item p {
            margin: 0 0 10px 0;
            font-size: 14px;
            line-height: 1.4;
        }

        .rss-button {
            display: inline-block;
            padding: 8px 16px;
            text-decoration: none;
            border-radius: 4px;
            background: #ff6600;
            color: #fff;
            font-size: 14px;
            border: none;
        }

        .rss-button:hover {
            opacity: 0.9;
        }

        .rss-loading {
            font-size: 14px;
            color: #777;
        }

        .rss-item img {
            width: 200px;
            margin-right: 10px;
        }

        /* ------------------ ВРЕМЕТО ЗА БЪЛГАРИЯ ------------------ */
        .weather-section {
            border-top: 1px solid #ddd;
            margin-top: 30px;
            padding-top: 15px;
            background: transparent;
        }

        .weather-section h2 {
            font-size: 22px;
            margin-bottom: 8px;
        }

        .weather-section h3 {
            font-size: 15px;
            margin-top: 0;
            margin-bottom: 15px;
            color: #555;
            font-weight: normal;
            line-height: 1.5;
        }

        .weather-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: 15px;
        }

        .weather-city {
            border: 1px solid #eee;
            border-radius: 6px;
            padding: 10px;
            background: #fafafa;
            font-size: 13px;
        }

        .weather-city h4 {
            margin: 0 0 6px;
            font-size: 16px;
        }

        .weather-current {
            font-size: 13px;
            margin-bottom: 8px;
        }

        .weather-current span {
            display: inline-block;
            margin-right: 8px;
        }

        .weather-daily {
            width: 100%;
            border-collapse: collapse;
            font-size: 12px;
        }

        .weather-daily th,
        .weather-daily td {
            border: 1px solid #ddd;
            padding: 3px 4px;
            text-align: center;
        }

        .weather-daily th {
            background: #f0f0f0;
            font-weight: 600;
        }

        @media (max-width: 600px) {
            .weather-daily th,
            .weather-daily td {
                font-size: 11px;
                padding: 2px;
            }
        }

        /* --------- ВАЛУТНИ КУРСОВЕ --------- */
        #currencyRatesContainer table {
            width: 100%;
            border-collapse: collapse;
            font-size: 13px;
        }

        #currencyRatesContainer th,
        #currencyRatesContainer td {
            border: 1px solid #ddd;
            padding: 4px 6px;
            text-align: center;
        }

        #currencyRatesContainer th {
            background: #f0f0f0;
        }
		/* бутон за мобилно меню по подразбиране скрит на десктоп */
.rss-menu-toggle {
    display: none;
    cursor: pointer;
}

/* ДЕСКТОП изглед – и двете менюта са отворени нормално */

/* първото меню (SEO секции) */
.rss-section-menu {
    margin: 10px 0 0;
    text-align: center;
}
.rss-section-menu a {
    text-decoration: none;
    color: #005bbb;
    margin: 0 10px;
}



/* бутоните по подразбиране – скрити на десктоп */
.rss-menu-toggle,
.sections-menu-toggle {
    display: none;
    cursor: pointer;
}

/* МОБИЛЕН изглед */
@media (max-width: 768px) {

    .rss-menu-toggle,
    .sections-menu-toggle {
        display: inline-block;
        margin-top: 10px;
        padding: 8px 14px;
        background: #ff6600;
        color: #fff;
        border: none;
        border-radius: 4px;
        font-size: 14px;
    }

    /* по подразбиране и двете менюта са СКРИТИ */
    .rss-section-menu
     {
        display: none;
        margin-top: 8px;
    }

    /* когато им сложим .open – се показват вертикално */
    .rss-section-menu.open {
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }



    .rss-section-menu a {
        display: block;
        padding: 8px 0;
        margin: 0;
        border-top: 1px solid #eee;
		text-align: left;
        margin-left: 10px;
    }


}
/* ==========================================================
   OVERRIDES: latest-article / rss-item / weather-city / .article
   (сложи го най-отдолу в CSS)
   ========================================================== */

:root{
  --n-bg: #f6f7fb;
  --n-card: #ffffff;
  --n-line: #e7e7e7;
  --n-text: #111827;
  --n-muted: #6b7280;
  --n-brand: #003485;
  --n-accent: #ff6600;
  --n-radius: 14px;
  --n-shadow: 0 10px 24px rgba(0,0,0,.06);
  --n-shadow2: 0 6px 16px rgba(0,0,0,.05);
}

body{ background: var(--n-bg); }

/* -----------------------
   1) LATEST ARTICLES CARDS
   ----------------------- */

.latest-articles{
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 14px !important;
  margin: 0 0 18px !important;
}

.latest-article{
  background: var(--n-card) !important;
  border: 1px solid var(--n-line) !important;
  border-radius: var(--n-radius) !important;
  box-shadow: var(--n-shadow2) !important;
  overflow: hidden !important;
  padding: 0 !important;
  transition: transform .15s ease, box-shadow .15s ease !important;
}

.latest-article:hover{
  transform: translateY(-2px) !important;
  box-shadow: var(--n-shadow) !important;
}

/* много важно: ти имаш глобално img { float:left; width:100%... } */
.latest-article img{
  width: 100% !important;
  height: 160px !important;
  object-fit: cover !important;
  float: none !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  background: #f2f4f7 !important;
  border: 0 !important;
}

.latest-article h6{
  margin: 10px 12px 6px !important;
  font-size: 12px !important;
  color: var(--n-muted) !important;
  font-weight: 500 !important;
}

.latest-article h3{
  margin: 0 12px 12px !important;
  font-size: 15px !important;
  line-height: 1.25 !important;
  color: var(--n-text) !important;
  font-weight: 700 !important;
}

/* ако линка е обвивка на картата */
.latest-article-link{
  display: block !important;
  color: inherit !important;
}

/* -----------------------
   2) RSS ITEMS (news cards)
   ----------------------- */

/* grid за двата списъка, ако ги имаш */
#rssNewsList,
#gnewsNewsList{
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px !important;
}

.rss-item{
  position: relative !important;
  background: var(--n-card) !important;
  border: 1px solid var(--n-line) !important;
  border-radius: 12px !important;
  box-shadow: var(--n-shadow2) !important;
  padding: 14px !important;
  overflow: hidden !important;
  transition: transform .15s ease, box-shadow .15s ease !important;
}

.rss-item:hover{
  transform: translateY(-2px) !important;
  box-shadow: var(--n-shadow) !important;
}

/* лента отгоре като “категория” */
.rss-item:before{
  content:"";
  position:absolute;
  left:0; top:0;
  width:100%;
  height:3px;
  background: linear-gradient(90deg, var(--n-accent), #0ea5e9);
}

/* thumbnail */
.rss-item img{
  width: 130px !important;
  height: 84px !important;
  object-fit: cover !important;
  border-radius: 10px !important;
  float: left !important;
  margin: 6px 12px 10px 0 !important;
  padding: 0 !important;
  background: #f2f4f7 !important;
  border: 1px solid #eef0f2 !important;
  max-width: none !important;
}

.rss-item h3{
  margin: 0 0 6px 0 !important;
  font-size: 16px !important;
  line-height: 1.25 !important;
  color: var(--n-text) !important;
  font-weight: 700 !important;
}

.rss-date{
  margin: 0 0 10px 0 !important;
  font-size: 12px !important;
  color: var(--n-muted) !important;
}

.rss-item p{
  margin: 0 0 12px 0 !important;
  font-size: 13.5px !important;
  line-height: 1.55 !important;
  color: #334155 !important;
}

/* бутон */
.rss-button{
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 9px 12px !important;
  border-radius: 10px !important;
  background: var(--n-accent) !important;
  color: #fff !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  border: 0 !important;
  text-decoration: none !important;
}

.rss-button:hover{ opacity: .92 !important; }

/* clear float */
.rss-item:after{
  content:"";
  display:block;
  clear:both;
}

/* -----------------------
   3) WEATHER CARDS (bgWeatherContainer)
   ----------------------- */

#bgWeatherContainer .weather-grid{
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 14px !important;
}

#bgWeatherContainer .weather-city{
  background: var(--n-card) !important;
  border: 1px solid var(--n-line) !important;
  border-radius: 12px !important;
  box-shadow: var(--n-shadow2) !important;
  padding: 12px !important;
}

#bgWeatherContainer .weather-city h4{
  margin: 0 0 10px 0 !important;
  font-size: 16px !important;
  color: var(--n-text) !important;
  font-weight: 800 !important;
}

#bgWeatherContainer .weather-current{
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px 10px !important;
  margin-bottom: 10px !important;
  font-size: 13px !important;
  color: #334155 !important;
}

#bgWeatherContainer .weather-current span{
  display: inline-flex !important;
  gap: 6px !important;
  background: #f3f4f6 !important;
  border: 1px solid #eceef1 !important;
  border-radius: 999px !important;
  padding: 4px 8px !important;
}

/* таблица по-стегната */
#bgWeatherContainer .weather-daily{
  width: 100% !important;
  border-collapse: collapse !important;
  font-size: 12px !important;
}

#bgWeatherContainer .weather-daily th,
#bgWeatherContainer .weather-daily td{
  border: 1px solid #e7e7e7 !important;
  padding: 6px 6px !important;
  text-align: center !important;
}

#bgWeatherContainer .weather-daily th{
  background: #f3f4f6 !important;
  font-weight: 800 !important;
  color: #111827 !important;
}

/* -----------------------
   4) .article (news posts list)
   ----------------------- */

.article{
  background: var(--n-card) !important;
  border: 1px solid var(--n-line) !important;
  border-radius: var(--n-radius) !important;
  box-shadow: var(--n-shadow2) !important;
  padding: 16px !important;
  margin: 14px 0 !important;
  min-height: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  overflow: hidden !important;
  transition: transform .15s ease, box-shadow .15s ease !important;
}

.article:hover{
  transform: translateY(-2px) !important;
  box-shadow: var(--n-shadow) !important;
}

.article h3{
  margin: 0 0 8px 0 !important;
  font-size: 18px !important;
  line-height: 1.2 !important;
  color: var(--n-text) !important;
  font-weight: 800 !important;
}

/* датата */
.article h6{
  margin: 0 0 10px 0 !important;
  font-size: 12px !important;
  color: var(--n-muted) !important;
  font-weight: 500 !important;
}

/* thumbnail в article */
.article img{
  width: 220px !important;
  height: 140px !important;
  object-fit: cover !important;
  border-radius: 12px !important;
  float: left !important;
  margin: 6px 14px 10px 0 !important;
  padding: 0 !important;
  border: 1px solid #eef0f2 !important;
  background: #f2f4f7 !important;
  max-width: none !important;
}

/* текст */
.article p{
  margin: 0 0 10px 0 !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: #334155 !important;
}

/* линк "Read original" */
.article a{
  font-weight: 700 !important;
}

/* clearfix */
.article:after{
  content:"";
  display:block;
  clear:both;
}

/* -----------------------
   RESPONSIVE
   ----------------------- */

@media (max-width: 1024px){
  .latest-articles{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  #bgWeatherContainer .weather-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  #rssNewsList,
  #gnewsNewsList{
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 600px){
  .latest-articles{
    grid-template-columns: 1fr !important;
  }

  .rss-item img{
    width: 100% !important;
    height: 170px !important;
    float: none !important;
    margin: 6px 0 10px 0 !important;
  }

  .article img{
    width: 100% !important;
    height: 190px !important;
    float: none !important;
    margin: 6px 0 10px 0 !important;
  }

  #bgWeatherContainer .weather-grid{
    grid-template-columns: 1fr !important;
  }
}
/* =========================
   NEWS GRID FOR .article (2 per row)
   Paste at the END of your CSS
   ========================= */

:root{
  --n-card: #ffffff;
  --n-line: #e7e7e7;
  --n-muted: #667085;
  --n-title: #0b2a55;
  --n-shadow: 0 10px 24px rgba(0,0,0,.06);
  --n-shadow2: 0 6px 16px rgba(0,0,0,.05);
  --n-radius: 14px;
  --n-accent: #ff6600;
  --n-accent2: #0ea5e9;
}

/* Make the articles list a 2-col grid WITHOUT touching pagination */
#articlesContainer{
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: stretch;
}

/* Your article card (2 columns) */
#articlesContainer > .article{
  background: var(--n-card) !important;
  border: 1px solid var(--n-line) !important;
  border-radius: var(--n-radius) !important;
  box-shadow: var(--n-shadow2) !important;
  padding: 16px !important;
  margin: 0 !important;            /* gap controls spacing now */
  min-height: auto !important;
  width: auto !important;          /* stop old width rules */
  max-width: none !important;
  float: none !important;          /* kill floats */
  overflow: hidden !important;
  transition: transform .15s ease, box-shadow .15s ease !important;

  /* 2 per row */
  flex: 0 0 calc(50% - 8px);
  position: relative;
}

/* Fancy top accent line like news cards */
#articlesContainer > .article::before{
  content:"";
  position:absolute;
  left:0; top:0;
  width:100%; height:3px;
  background: linear-gradient(90deg, var(--n-accent), var(--n-accent2));
}

/* Hover lift */
#articlesContainer > .article:hover{
  transform: translateY(-2px);
  box-shadow: var(--n-shadow) !important;
}

/* Article title (your H3 inside article) */
#articlesContainer > .article > h3{
  margin: 0 0 8px 0 !important;
  font-size: 18px !important;
  line-height: 1.25 !important;
  color: #0f172a !important;
  font-weight: 800 !important;
}

/* Date (your h6) */
#articlesContainer > .article > h6{
  margin: 0 0 10px 0 !important;
  font-size: 12px !important;
  color: var(--n-muted) !important;
  font-weight: 500 !important;
}

/* Thumbnail inside article (left, like real news sites) */
#articlesContainer > .article img{
  object-fit: cover !important;
  border-radius: 12px !important;
  border: 1px solid #eef0f2 !important;
  background: #f2f4f7 !important;
  float: none !important;
  margin: 0 12px 10px 0 !important;
  padding: 0 !important;
  min-width: 380px !important;
}

/* Text / excerpt */
#articlesContainer > .article p{
  margin: 0 0 10px 0 !important;
  font-size: 13.5px !important;
  line-height: 1.55 !important;
  color: #334155 !important;
}
#articlesContainer > .article a:hover{
  color: #0849af !important;
}

/* Fix hr spacing */
#articlesContainer > .article hr{
  margin: 16px 0 0 !important;
  border: 0 !important;
  border-top: 1px solid #eef0f2 !important;
}

/* =========================
   NEWS-LIKE SECTION HEADERS (H2 + H3 under sections)
   Dot + pulsing "live" effect
   ========================= */

/* Target section headers inside #articlesContainer */
#articlesContainer h2{
  width: 100%;
  margin: 18px 0 6px !important;
  font-size: 20px !important;
  line-height: 1.2 !important;
  color: var(--n-title) !important;
  font-weight: 800 !important;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* The “LIVE dot” */
#articlesContainer h2::before{
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--n-accent);
  display: inline-block;
  animation: livePulse 1.2s infinite ease-in-out;
  box-shadow: 0 0 0 0 rgba(255,102,0,.45);
}
#articlesContainer h3 {
    width: 100%;
    margin: 0 0 14px !important;
    font-size: 13.5px !important;
    line-height: 1.6 !important;
    color: var(--n-muted) !important;
    font-weight: 400 !important;
}
/* Subtitle look */h3{
  width: 100%;
  margin: 0 0 14px !important;
  font-size: 13.5px !important;
  line-height: 1.6 !important;
  color: var(--n-muted) !important;
  font-weight: 400 !important;
}

/* Pulse animation */
@keyframes livePulse{
  0%   { transform: scale(1);   box-shadow: 0 0 0 0 rgba(255,102,0,.45); opacity: 1; }
  70%  { transform: scale(1.15);box-shadow: 0 0 0 10px rgba(255,102,0,0); opacity: .95; }
  100% { transform: scale(1);   box-shadow: 0 0 0 0 rgba(255,102,0,0); opacity: 1; }
}

/* =========================
   RESPONSIVE (mobile = 1 column)
   ========================= */
@media (max-width: 900px){
  #articlesContainer > .article{
    flex: 0 0 100%;
  }
  #articlesContainer > .article img{
    width: 100% !important;
    height: 180px !important;
    float: none !important;
    margin: 0 0 10px 0 !important;
  }
}
/* =========================
   FIX: Articles layout (2 columns) + section styling
   Paste at the END of CSS
   ========================= */

:root{
  --n-card: #ffffff;
  --n-line: #e7e7e7;
  --n-muted: #667085;
  --n-title: #0b2a55;
  --n-shadow: 0 10px 24px rgba(0,0,0,.06);
  --n-shadow2: 0 6px 16px rgba(0,0,0,.05);
  --n-radius: 14px;
  --n-accent: #ff6600;
  --n-accent2: #0ea5e9;
}

/* ---------- 1) FORCE 2-COL GRID for articlesContainer ---------- */
#articlesContainer{
  /* override старите float/width правила */
  width: 100% !important;

  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px !important;
  align-items: stretch !important;
}

/* Заглавията/описанията вътре да са на цял ред */
#articlesContainer > h2,
#articlesContainer > h3{
  grid-column: 1 / -1 !important;
}

/* Ако имаш други елементи (например статус/loader), да са на цял ред */
#articlesContainer > :not(.article):not(h2):not(h3){
  grid-column: 1 / -1 !important;
}

/* Самата карта */
#articlesContainer > .article{
  box-sizing: border-box !important;
  min-width: 0 !important;          /* ключово, иначе текстът бута колоните */
  float: none !important;
  width: auto !important;
  max-width: none !important;
  clear: none !important;

  background: var(--n-card) !important;
  border: 1px solid var(--n-line) !important;
  border-radius: var(--n-radius) !important;
  box-shadow: var(--n-shadow2) !important;
  padding: 16px !important;
  margin: 0 !important;
  overflow: hidden !important;
  position: relative !important;
  transition: transform .15s ease, box-shadow .15s ease !important;
}

#articlesContainer > .article::before{
  content:"";
  position:absolute;
  left:0; top:0;
  width:100%; height:3px;
  background: linear-gradient(90deg, var(--n-accent), var(--n-accent2));
}

#articlesContainer > .article:hover{
  transform: translateY(-2px);
  box-shadow: var(--n-shadow) !important;
}

/* Thumbnail */
#articlesContainer > .article img{
  object-fit: cover !important;
  border-radius: 12px !important;
  border: 1px solid #eef0f2 !important;
  background: #f2f4f7 !important;
  float: none !important;
  margin: 0 12px 10px 0 !important;
  padding: 0 !important;
  min-width: 380px  !important;
}

/* Article title + date */
#articlesContainer > .article > h3{
  margin: 0 0 8px 0 !important;
  font-size: 18px !important;
  line-height: 1.25 !important;
  color: #0f172a !important;
  font-weight: 800 !important;
}
#articlesContainer > .article > h6{
  margin: 0 0 10px 0 !important;
  font-size: 12px !important;
  color: var(--n-muted) !important;
  font-weight: 500 !important;
}

/* Excerpt */
#articlesContainer > .article p{
  margin: 0 0 10px 0 !important;
  font-size: 13.5px !important;
  line-height: 1.55 !important;
  color: #334155 !important;
}

/* ---------- 2) "News section" headers with pulsing dot (EVERYWHERE) ---------- */
/* Включва и jokes-section / fx-section / recipes-section / etc */
section[id$="-section"]{
  margin-top: 28px !important; /* override inline margin-top */
  padding: 18px 18px 16px;
  border: 1px solid var(--n-line);
  border-radius: var(--n-radius);
  background: linear-gradient(180deg, #ffffff 0%, #fbfbfd 100%);
  box-shadow: var(--n-shadow2);
}

section[id$="-section"] > h2{
  margin: 0 0 6px !important;
  font-size: 20px !important;
  line-height: 1.2 !important;
  color: var(--n-title) !important;
  font-weight: 800 !important;
  display: flex;
  align-items: center;
  gap: 10px;
}

section[id$="-section"] > h2::before{
  content:"";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--n-accent);
  display: inline-block;
  animation: livePulse 1.2s infinite ease-in-out;
  box-shadow: 0 0 0 0 rgba(255,102,0,.45);
}

section[id$="-section"] > h3{
  margin: 0 0 14px !important; /* override inline */
  font-size: 13.5px !important;
  line-height: 1.6 !important;
  color: var(--n-muted) !important;
  font-weight: 400 !important;
}

/* Pulse animation */
@keyframes livePulse{
  0%   { transform: scale(1);    box-shadow: 0 0 0 0 rgba(255,102,0,.45); opacity: 1; }
  70%  { transform: scale(1.15); box-shadow: 0 0 0 10px rgba(255,102,0,0); opacity: .95; }
  100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(255,102,0,0); opacity: 1; }
}

/* ---------- 3) Jokes styling (kill inline list styles) ---------- */
#jokes-box ul{
  list-style: none !important;
  padding-left: 0 !important;
  margin: 0 !important;
}
#jokes-box li{
  margin: 0 0 10px 0 !important;
  padding: 10px 12px !important;
  border: 1px solid var(--n-line) !important;
  border-radius: 12px !important;
  background: #fff !important;
  box-shadow: var(--n-shadow2) !important;
  color: #334155 !important;
  line-height: 1.5 !important;
  white-space: pre-line; /* да си пази 1) 2) на нов ред */
}

/* ---------- 4) Exchange rates + books: clean tables / lists ---------- */
#fx-box table{
  width: 100% !important;
  border-collapse: collapse !important;
  background: #fff !important;
  border: 1px solid var(--n-line) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}

#fx-box th,
#fx-box td{
  border-bottom: 1px solid #eef0f2 !important;
  padding: 10px 10px !important;
  text-align: center !important;
}

#fx-box th{
  background: #f3f4f6 !important;
  font-weight: 800 !important;
  color: #111827 !important;
}

/* books list if present */
#books-box ul{
  list-style: none !important;
  padding-left: 0 !important;
  margin: 0 0 12px 0 !important;
}
#books-box li{
  margin: 0 0 10px 0 !important;
  padding: 10px 12px !important;
  border: 1px solid var(--n-line) !important;
  border-radius: 12px !important;
  background: #fff !important;
  box-shadow: var(--n-shadow2) !important;
}

/* ако след fx-section имаш останало “голo” UL (както в примера) */
#fx-section + ul{
  list-style: none !important;
  padding-left: 0 !important;
  margin: 12px 0 0 !important;
}
#fx-section + ul > li{
  margin: 0 0 10px 0 !important;
  padding: 10px 12px !important;
  border: 1px solid var(--n-line) !important;
  border-radius: 12px !important;
  background: #fff !important;
  box-shadow: var(--n-shadow2) !important;
  color: #334155 !important;
  line-height: 1.5 !important;
  white-space: pre-line !important;
}

/* ---------- 5) Responsive ---------- */
@media (max-width: 1024px){
  #articlesContainer{
    grid-template-columns: 1fr !important;
  }
  #articlesContainer > .article img{
    width: 100% !important;
    height: 180px !important;
    float: none !important;
    margin: 0 0 10px 0 !important;
  }
}
/* =========================
   FULL-WIDTH TOP BAR (header + menu + search)
   Paste at the END of CSS
   ========================= */

/* make the wrapper stretch full screen even if body is max-width */
#headerWrapper{

  top: 0;
  z-index: 9999;

  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);

  background: rgba(246,247,251,.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--n-line);
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
}

/* keep content nicely centered inside the full-width bar */
#headerWrapper > header,
#headerWrapper > nav#sectionsMenu,
#headerWrapper + .header{
  max-width: 1366px;
  margin: 0 auto;
  padding-left: 14px;
  padding-right: 14px;
  margin: 0 auto !important;
}

/* ---------- HEADER typography + layout ---------- */
#headerWrapper header{
  margin: 0 auto !important;
  padding: 14px 0 10px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

#headerWrapper header a{
  text-decoration: none;
  color: inherit;
  display: block;
}

#headerWrapper header center{
  display: flex;
  justify-content: center;
  align-items: center;
}

/* logo */
#headerWrapper img.fddfss{
  width: 80px !important;
  height: 80px !important;
  max-width: none !important;
  border-radius: 16px !important;
  object-fit: cover;
  float: none !important;
  margin: 0 auto 8px !important;
  padding: 0 !important;
  border: 1px solid #eef0f2 !important;
  background: #f2f4f7 !important;
}

/* title */
#headerWrapper h1#dynamicTitle{
  margin: 0 !important;
  padding: 0 10px !important;
  text-align: center !important;
  font-size: 22px !important;
  line-height: 1.18 !important;
  font-weight: 900 !important;
  color: #0f172a !important;

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* subtitle */
#headerWrapper h2#dynamicSubtitle{
  margin: 6px auto 0 !important;
  padding: 0 10px !important;
  text-align: center !important;
  font-size: 13.5px !important;
  line-height: 1.55 !important;
  color: var(--n-muted) !important;
  font-weight: 500 !important;

  max-width: 1100px;

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------- MENU like pill tabs ---------- */
nav#sectionsMenu{
  margin: 8px auto 0 !important;
  padding: 0 0 10px !important;
}

nav#sectionsMenu ul{
  list-style: none !important;
  padding: 8px !important;
  margin: 0 !important;

  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;

  background: #ffffff;
  border: 1px solid #eef0f2;
  border-radius: 16px;
}

nav#sectionsMenu li{
  margin: 0 !important;
  padding: 0 !important;
}
nav#sectionsMenu li:before{ content: none !important; }

nav#sectionsMenu a{
  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 9px 12px;
  border-radius: 999px;

  background: #f3f4f6;
  border: 1px solid #eceef1;

  color: #111827 !important;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .2px;

  text-decoration: none;
  transition: transform .12s ease, background .12s ease, border-color .12s ease, box-shadow .12s ease;
}

nav#sectionsMenu a:hover{
  background: #fff1e8;
  border-color: rgba(255,102,0,.35);
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(255,102,0,.10);
}

/* subtle "live" dot like news site */
nav#sectionsMenu a::before{
  content:"";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--n-accent);
  animation: livePulse 1.2s infinite ease-in-out;
}

/* ---------- SEARCH full-width + clean ---------- */
#headerWrapper + .header{
  margin: 10px auto 12px !important;
  padding: 0 0 12px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#headerWrapper + .header .search{
  width: 100% !important;
  margin: 0 !important;
  display: flex;
}

#headerWrapper + .header input#searchInput, .header .search input{
  padding: 12px 14px !important;
  font-size: 14px !important;
  border-radius: 14px !important;

  border: 1px solid #e5e7eb !important;
  background: #ffffff !important;
  outline: none !important;

  box-shadow: 0 6px 16px rgba(0,0,0,.05);
}

#headerWrapper + .header input#searchInput:focus,.header .search input:focus{
  border-color: rgba(255,102,0,.45) !important;
  box-shadow: 0 0 0 4px rgba(255,102,0,.14), 0 10px 20px rgba(0,0,0,.07);
}

/* placeholder readable */
#headerWrapper + .header input#searchInput::placeholder{
  color: #98a2b3;
  font-weight: 600;
}

/* ---------- MOBILE tweaks ---------- */
@media (max-width: 768px){
  #headerWrapper > header,
  #headerWrapper > nav#sectionsMenu,
  #headerWrapper + .header{
    padding-left: 10px;
    padding-right: 10px;
  }

  #headerWrapper img.fddfss{
    width: 80px !important;
    height: 80px !important;
  }

  #headerWrapper h1#dynamicTitle{
    font-size: 18px !important;
    -webkit-line-clamp: 3;
  }

  nav#sectionsMenu ul{
    justify-content: flex-start;
    overflow-x: auto;
    flex-wrap: nowrap;
    gap: 8px;
    padding: 8px;
    scrollbar-width: none;
  }
  nav#sectionsMenu ul::-webkit-scrollbar{ display:none; }

  nav#sectionsMenu a{
    white-space: nowrap;
  }
}
/* =========================
   FOOTER REBUILD (your #footerreali / #footer mess)
   Paste at END of CSS
   ========================= */

#footerreali{
  width: 100%;
  clear: both;
  margin-top: 34px;
}

/* if you accidentally nested #footerreali inside itself (you did), neutralize it */
#footerreali #footerreali{
  width: 100%;
  margin: 0;
  padding: 0;
}

/* normalize the repeated #footer blocks */
#footerreali #footer{
  max-width: 1366px;
  margin: 0 auto 12px;
  padding: 14px 14px;
  border: 1px solid var(--n-line);
  border-radius: var(--n-radius);
  background: var(--n-card);
  box-shadow: var(--n-shadow2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

/* first footer row (email + stars) */
#footerreali #footer > div:first-child{
  font-weight: 700;
  color: #0f172a;
}

#footerreali #footer .rating-stars{
  position: static !important;   /* kill the absolute positioning you had */
  margin: 0 !important;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 18px;
  line-height: 1;
  background: #fff7e6;
  border: 1px solid rgba(255,102,0,.25);
  padding: 6px 10px;
  border-radius: 999px;
}

/* star pulse (subtle, not a nightclub sign) */
#footerreali #footer .rating-stars .star{
  padding: 0;
  margin: 0;
  animation: starTwinkle 2.4s infinite ease-in-out;
}
#footerreali #footer .rating-stars .star:nth-child(2){ animation-delay: .15s; }
#footerreali #footer .rating-stars .star:nth-child(3){ animation-delay: .30s; }
#footerreali #footer .rating-stars .star:nth-child(4){ animation-delay: .45s; }
#footerreali #footer .rating-stars .star:nth-child(5){ animation-delay: .60s; }

@keyframes starTwinkle{
  0%,100%{ transform: translateY(0); filter: brightness(1); opacity: .92; }
  50%{ transform: translateY(-1px); filter: brightness(1.15); opacity: 1; }
}

/* partners title block: you have a #footer that only says "Партньори:" */
#footerreali #footer:has(> :only-child){
  justify-content: center;
  font-weight: 900;
  color: #0b2a55;
}
#footerreali #footer:has(> :only-child)::before{
  content:"";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--n-accent);
  margin-right: 10px;
  animation: livePulse 1.2s infinite ease-in-out;
}

/* ---------- Partners links mega-list (inside h1... yes, it’s weird) ---------- */
#footerreali #footer h1{
  margin: 0 !important;
  padding: 0 !important;
  font-size: 0 !important; /* kill the H1 sizing so it doesn't nuke layout */
  width: 100%;
  display: block;
}

/* make that pile of <a> look like tidy pills */
#footerreali #footer h1 a{
  font-size: 13px !important;
  font-weight: 800 !important;
  height: auto !important;
  line-height: 1.1 !important;

  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 5px 8px;
  margin: 6px 6px 0 0 !important;

  border-radius: 20px;
  background: #f3f4f6;
  border: 1px solid #eceef1;

  color: #111827 !important;
  text-decoration: none !important;

  transition: transform .12s ease, background .12s ease, border-color .12s ease, box-shadow .12s ease;
}

/* small dot, “live” feel */
#footerreali #footer h1 a::before{
  content:"";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--n-accent);
  animation: livePulse 1.2s infinite ease-in-out;
}

#footerreali #footer h1 a:hover{
  background: #fff1e8;
  border-color: rgba(255,102,0,.35);
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(255,102,0,.10);
}

/* reuse your pulse keyframes if not already present */
@keyframes livePulse{
  0%,100%{ transform: scale(1); opacity: .65; filter: blur(0); }
  50%{ transform: scale(1.25); opacity: 1; filter: blur(.1px); }
}

/* ---------- Footer pagination links (the big .footer-links-container) ---------- */
#footerreali .footer-links-container{
  max-width: 1366px;
  margin: 12px auto 0 !important;
  padding: 14px 14px !important;

  border: 1px solid var(--n-line);
  border-radius: var(--n-radius);
  background: var(--n-card);
  box-shadow: var(--n-shadow2);

  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 8px !important;
}

/* override inline styles on <a> inside footer-links-container */
#footerreali .footer-links-container a{
  margin: 0 !important;
  color: #111827 !important;
  text-decoration: none !important;

  font-size: 13px;
  font-weight: 900;

  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 12px;
  background: #f3f4f6;
  border: 1px solid #eceef1;

  transition: transform .12s ease, background .12s ease, border-color .12s ease, box-shadow .12s ease;
}

#footerreali .footer-links-container a:hover{
  background: #e9eefb;
  border-color: #d9e3ff;
  transform: translateY(-1px);
  box-shadow: 0 10px 18px rgba(11,94,215,.10);
}

/* Mobile: make footer breathe */
@media (max-width: 768px){
  #footerreali #footer{
    padding: 12px 10px;
    justify-content: center;
    text-align: center;
  }
  #footerreali #footer .rating-stars{
    justify-content: center;
  }
  #footerreali #footer h1 a{
    width: auto;
  }
  #footerreali .footer-links-container{
    padding: 12px 10px !important;
  }
}
/* =========================
   HEADER + MENU (exactly for your HTML)
   Paste at END of CSS
   ========================= */

:root{
  --n-bg: #f6f7fb;
  --n-card: #ffffff;
  --n-line: #e7e7e7;
  --n-muted: #667085;
  --n-title: #0b2a55;
  --n-accent: #ff6600;
  --n-shadow: 0 10px 24px rgba(0,0,0,.06);
  --n-shadow2: 0 6px 16px rgba(0,0,0,.05);
  --n-radius: 14px;
}

body{
  background: var(--n-bg);
}

/* HEADER CARD */
header{
  max-width: 1366px;
  margin: 0 auto 16px;
  padding: 16px 16px 14px;
  border: 1px solid var(--n-line);
  border-radius: var(--n-radius);
  background: linear-gradient(180deg, #ffffff 0%, #fbfbfd 100%);
  box-shadow: var(--n-shadow);
}

/* make the link not “explode” layout */
header > a{
  display: block;
  text-decoration: none;
  color: inherit;
}

/* kill <center> weirdness and make it modern */
header center{
  display: flex;
  justify-content: center;
  align-items: center;
}

/* logo image */
header img.fddfss{
  width: 80px;
  max-width: 38vw;
  height: auto;
  border-radius: 14px;
  border: 1px solid #eef0f2;
  background: #f2f4f7;
  padding: 0 !important;
  margin: 0 auto 10px !important;
  float: none !important;
  display: block;
}

/* Title */
header h1#dynamicTitle{
  margin: 0;
  text-align: center;
  font-size: 26px;
  line-height: 1.15;
  color: #0f172a;
  font-weight: 900 !important;
}

/* Subtitle */
header h2#dynamicSubtitle{
  margin: 8px 0 0;
  text-align: center;
  font-size: 14px;
  line-height: 1.6;
  color: var(--n-muted);
  font-weight: 500 !important;
}

/* ===== MENU BUTTON (mobile) ===== */
.rss-menu-toggle{
  display: none;
  cursor: pointer;
  margin: 14px auto 0;
  padding: 10px 14px;
  border: none;
  border-radius: 12px;
  background: var(--n-accent);
  color: #fff;
  font-size: 14px;
  font-weight: 900;
  box-shadow: 0 10px 18px rgba(255,102,0,.18);
}

/* ===== MENU NAV ===== */
nav.rss-section-menu{
  margin: 14px 0 0;
  padding: 10px;
  border: 1px solid #eef0f2;
  background: #ffffff;
  border-radius: 14px;

  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

/* menu links as pills */
nav.rss-section-menu a{
  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 9px 12px;
  border-radius: 999px;

  background: #f3f4f6;
  border: 1px solid #eceef1;

  color: #111827;
  font-size: 13px;
  font-weight: 900;
  text-decoration: none;

  transition: transform .12s ease, background .12s ease, border-color .12s ease, box-shadow .12s ease;
}

/* live dot */
nav.rss-section-menu a::before{
  content:"";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--n-accent);
  animation: livePulse 1.2s infinite ease-in-out;
}

/* hover */
nav.rss-section-menu a:hover{
  background: #fff1e8;
  border-color: rgba(255,102,0,.35);
  transform: translateY(-1px);
  box-shadow: 0 10px 18px rgba(255,102,0,.10);
}

/* focus */
nav.rss-section-menu a:focus-visible,
.rss-menu-toggle:focus-visible{
  outline: none;
  box-shadow: 0 0 0 4px rgba(255,102,0,.22);
}

/* pulse anim */
@keyframes livePulse{
  0%,100%{ transform: scale(1); opacity: .65; }
  50%{ transform: scale(1.25); opacity: 1; }
}

/* ===== MOBILE BEHAVIOR ===== */
@media (max-width: 768px){
  header{
    padding: 14px 12px 12px;
  }

  header h1#dynamicTitle{
    font-size: 22px;
  }

  /* show the button */
  .rss-menu-toggle{
    display: inline-flex;
    justify-content: center;
    width: min(100%, 100%);
  }

  /* hide menu by default on mobile */
  nav.rss-section-menu{
    display: none;
  }

  /* your JS adds .open */
  nav.rss-section-menu.open{
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
	        width: 95%;
  }

  nav.rss-section-menu a{
    border-radius: 12px;
    justify-content: flex-start;
  }
}

/* ===== DESKTOP: keep it open ===== */
@media (min-width: 769px){
  nav.rss-section-menu{
    display: flex !important;
  }
}
body.kjfghj div#articlesContainer {
    grid-template-columns: none !important;
}
/* =========================
   CURRENCY RATES (your exact HTML)
   Paste at END of CSS
   ========================= */

section#currency-rates.rss-news{
  margin: 28px 0 42px;
  padding: 18px 18px 16px;
  border: 1px solid var(--n-line);
  border-radius: var(--n-radius);
  background: linear-gradient(180deg, #ffffff 0%, #fbfbfd 100%);
  box-shadow: var(--n-shadow2);
}

/* headline with “live dot” */
section#currency-rates > h2{
  margin: 0 0 6px;
  font-size: 20px;
  line-height: 1.2;
  color: var(--n-title);
  font-weight: 900 !important;

  display: flex;
  align-items: center;
  gap: 10px;
}

section#currency-rates > h2::before{
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--n-accent);
  animation: livePulse 1.2s infinite ease-in-out;
  flex: 0 0 auto;
}

section#currency-rates > h3{
  margin: 0 0 14px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--n-muted);
  font-weight: 500 !important;
}

/* container */
#currencyRatesContainer{
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* table card */
#currencyRatesContainer table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
  border: 1px solid var(--n-line);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--n-shadow2);
}

/* header row */
#currencyRatesContainer thead th{
  background: #f3f4f6;
  color: #111827;
  font-weight: 900;
  font-size: 13px;
  padding: 12px 12px;
  text-align: left;
  border-bottom: 1px solid #eef0f2;
}

/* cells */
#currencyRatesContainer tbody td{
  padding: 11px 12px;
  font-size: 13.5px;
  color: #334155;
  border-bottom: 1px solid #eef0f2;
  background: #fff;
}

/* zebra */
#currencyRatesContainer tbody tr:nth-child(even) td{
  background: #fcfcfd;
}

/* hover */
#currencyRatesContainer tbody tr:hover td{
  background: #fff1e8;
}

/* first column looks like “tag” */
#currencyRatesContainer tbody td:first-child{
  font-weight: 900;
  color: #0f172a;
  width: 110px;
}

/* make the “rate” column align nicely */
#currencyRatesContainer tbody td:last-child{
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* small source note */
#currencyRatesContainer p.rss-loading{
  margin: 10px 2px 0 !important;
  font-size: 11.5px !important;
  color: var(--n-muted) !important;
}

/* mobile: tighter paddings */
@media (max-width: 600px){
  #currencyRatesContainer thead th,
  #currencyRatesContainer tbody td{
    padding: 9px 10px;
    font-size: 13px;
  }
}

/* if you don’t already have this animation from earlier, keep it */
@keyframes livePulse{
  0%,100%{ transform: scale(1); opacity: .65; }
  50%{ transform: scale(1.25); opacity: 1; }
}
/* ========= SECTIONS MENU (YOUR EXACT HTML) ========= */

/* base */
nav#sectionsMenu{
  margin: 12px 0 !important;
  padding: 12px !important;
  border: 1px solid #e7e7e7 !important;
  border-radius: 14px !important;
  background: #fff !important;
}

/* remove your global li dash only for this menu */
nav#sectionsMenu ul li:before{
  content: "" !important;
  margin: 0 !important;
}

/* reset ul */
nav#sectionsMenu ul{
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;

  /* desktop */
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  justify-content: center !important;
}

/* reset li */
nav#sectionsMenu li{
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* link pill */
nav#sectionsMenu a{
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;

  padding: 10px 12px !important;
  border-radius: 999px !important;

  background: #f3f4f6 !important;
  border: 1px solid #eceef1 !important;

  color: #111827 !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}

/* dot before link */
nav#sectionsMenu a:before{
  content: "" !important;
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background: #ff6600 !important;
  display: inline-block !important;
}

/* ===== MOBILE: stack vertically ===== */
@media (max-width: 768px){
  nav#sectionsMenu ul{
    display: block !important;   /* important: no flex */
    gap: 0 !important;
  }

  nav#sectionsMenu li{
    margin: 8px 0 !important;
  }

  nav#sectionsMenu a{
    width: 92% !important;
    justify-content: flex-start !important;
    border-radius: 12px !important;
    background: #fff !important;
    border: 1px solid #eef0f2 !important;
  }
}
/* =========================
   RSS articles => same look as #articlesContainer > .article
   Paste at END of CSS
   ========================= */

/* 1) RSS grid да е 2 колони като новините */
#rssBlocks .rss-grid{
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px !important;
  align-items: stretch !important;
}

/* mobile => 1 колона */
@media (max-width: 900px){
  #rssBlocks .rss-grid{
    grid-template-columns: 1fr !important;
  }
}

/* 2) Всяка RSS статия (карта) да е като #articlesContainer > .article */
#rssBlocks .rss-grid > .article{
  box-sizing: border-box !important;
  min-width: 0 !important;

  background: var(--n-card, #fff) !important;
  border: 1px solid var(--n-line, #e7e7e7) !important;
  border-radius: var(--n-radius, 14px) !important;
  box-shadow: var(--n-shadow2, 0 6px 16px rgba(0,0,0,.05)) !important;

  padding: 16px !important;
  margin: 0 !important;
  float: none !important;
  width: auto !important;
  max-width: none !important;
  overflow: hidden !important;
  position: relative !important;

  transition: transform .15s ease, box-shadow .15s ease !important;
}

/* горна “accent” линия */
#rssBlocks .rss-grid > .article::before{
  content:"";
  position:absolute;
  left:0; top:0;
  width:100%; height:3px;
  background: linear-gradient(90deg, var(--n-accent, #ff6600), var(--n-accent2, #0ea5e9));
}

/* hover lift */
#rssBlocks .rss-grid > .article:hover{
  transform: translateY(-2px);
  box-shadow: var(--n-shadow, 0 10px 24px rgba(0,0,0,.06)) !important;
}

/* 3) Заглавие + дата вътре */
#rssBlocks .rss-grid > .article > h1{
  margin: 0 0 8px 0 !important;
  font-size: 18px !important;
  line-height: 1.25 !important;
  color: #0f172a !important;
  font-weight: 800 !important;
}

#rssBlocks .rss-grid > .article > h6{
  margin: 0 0 10px 0 !important;
  font-size: 12px !important;
  color: var(--n-muted, #667085) !important;
  font-weight: 500 !important;
}

/* 4) Ако има IMG в RSS (някои фийдове имат) */
#rssBlocks .rss-grid > .article img{
  width: 140px !important;
  height: 105px !important;
  object-fit: cover !important;
  border-radius: 12px !important;
  border: 1px solid #eef0f2 !important;
  background: #f2f4f7 !important;

  float: left !important;
  margin: 0 12px 10px 0 !important;
  padding: 0 !important;
  max-width: none !important;
}

/* mobile img => full width */
@media (max-width: 900px){
  #rssBlocks .rss-grid > .article img{
    width: 100% !important;
    height: 180px !important;
    float: none !important;
    margin: 0 0 10px 0 !important;
  }
}

/* 5) Текст/описание */
#rssBlocks .rss-grid > .article p{
  margin: 0 0 10px 0 !important;
  font-size: 13.5px !important;
  line-height: 1.55 !important;
  color: #334155 !important;
}

/* 6) Линкът “Read full article” */
#rssBlocks .rss-grid > .article a{
  font-weight: 700 !important;
  color: #ffffff !important;
  text-decoration: none !important;
}
#rssBlocks .rss-grid > .article a:hover{
  color: #0849af !important;
}

/* 7) Изчисти HR (ако го има) */
#rssBlocks .rss-grid > .article hr{
  margin: 16px 0 0 !important;
  border: 0 !important;
  border-top: 1px solid #eef0f2 !important;
}

/* 8) clearfix ако има float img */
#rssBlocks .rss-grid > .article::after{
  content:"";
  display:block;
  clear:both;
}
/* =========================
   BG NEWS LIST (OFFNews + SvobodnaEvropa)
   Make it look like Spaceflight ".article" cards
   Paste at END of CSS
   ========================= */

/* 1) Grid: 2 per row like your other news */
#bgNewsList .rss-grid{
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px !important;
  align-items: stretch !important;
}

/* 2) Card styling: same vibe as #articlesContainer > .article / #rssBlocks cards */
#bgNewsList .rss-grid > .article{
  box-sizing: border-box !important;
  min-width: 0 !important;

  background: var(--n-card, #fff) !important;
  border: 1px solid var(--n-line, #e7e7e7) !important;
  border-radius: var(--n-radius, 14px) !important;
  box-shadow: var(--n-shadow2, 0 6px 16px rgba(0,0,0,.05)) !important;

  padding: 16px !important;
  margin: 0 !important;
  float: none !important;
  width: auto !important;
  max-width: none !important;
  overflow: hidden !important;
  position: relative !important;

  transition: transform .15s ease, box-shadow .15s ease !important;
}

/* top accent line */
#bgNewsList .rss-grid > .article::before{
  content:"";
  position:absolute;
  left:0; top:0;
  width:100%; height:3px;
  background: linear-gradient(90deg, var(--n-accent, #ff6600), var(--n-accent2, #0ea5e9));
}

/* hover lift */
#bgNewsList .rss-grid > .article:hover{
  transform: translateY(-2px);
  box-shadow: var(--n-shadow, 0 10px 24px rgba(0,0,0,.06)) !important;
}

/* title + meta */
#bgNewsList .rss-grid > .article > h1{
  margin: 0 0 8px 0 !important;
  font-size: 18px !important;
  line-height: 1.25 !important;
  color: #0f172a !important;
  font-weight: 800 !important;
}

#bgNewsList .rss-grid > .article > h6{
  margin: 0 0 10px 0 !important;
  font-size: 12px !important;
  color: var(--n-muted, #667085) !important;
  font-weight: 500 !important;
}

/* image: small thumb left like your Spaceflight cards */
#bgNewsList .rss-grid > .article img{
  width: 140px !important;
  height: 92px !important;
  object-fit: cover !important;
  border-radius: 12px !important;
  border: 1px solid #eef0f2 !important;
  background: #f2f4f7 !important;

  float: left !important;
  margin: 0 12px 10px 0 !important;
  padding: 0 !important;
  max-width: none !important;
}

/* excerpt */
#bgNewsList .rss-grid > .article p{
  margin: 0 0 10px 0 !important;
  font-size: 13.5px !important;
  line-height: 1.55 !important;
  color: #334155 !important;
}

/* link button inside .rss-button (you already have base styles) */
#bgNewsList .rss-grid > .article a{
  font-weight: 700 !important;
  text-decoration: none !important;
}

/* clearfix (because img is floated) */
#bgNewsList .rss-grid > .article::after{
  content:"";
  display:block;
  clear:both;
}

/* 3) Mobile: 1 col + image full width */
@media (max-width: 900px){
  #bgNewsList .rss-grid{
    grid-template-columns: 1fr !important;
  }
  #bgNewsList .rss-grid > .article img{
    width: 100% !important;
    height: 180px !important;
    float: none !important;
    margin: 0 0 10px 0 !important;
  }
}
div#credGrid .article {
    max-width: 95% !important;
}
h2 {
    width: 100%;
    margin: 18px 0 6px !important;
    font-size: 20px !important;
    line-height: 1.2 !important;
    color: var(--n-title) !important;
    font-weight: 800 !important;
    display: flex;
    align-items: center;
    gap: 10px;
}
#articlesContainer h2::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--n-accent);
    display: inline-block;
    animation: livePulse 1.2s infinite ease-in-out !important;
    box-shadow: 0 0 0 0 rgba(255, 102, 0, .45) !important;
}
.article::before, .latest-article::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 3px !important;
    background: linear-gradient(90deg, var(--n-accent, #ff6600), var(--n-accent2, #0ea5e9)) !important;
}
div#detailMount {
    width: 94%;
}
section#rssNewsRoot,section#credSection,section#recipesRoot {
    width: 85%;
}
section#credSection, {
    width: 85%;
}