/* --------------------------------- */
/* 1. Basic Resets and General Styles */
/* --------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Amiri&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cairo&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lateef&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Scheherazade&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Aref+Ruqaa&display=swap');

.arabic {
    font-family: 'Lateef', serif;
    /*font-family: 'Aref Ruqaa', serif;*/
    /* font-family: 'Scheherazade', serif; */
    /* font-family: 'Amiri', serif; */
    /* font-family: serif;*/
	font-size: 2em;
	color: #fff;
	direction: rtl;
	text-align: right;
	line-height: 1.6;
	margin-bottom: 10px;
	line-height: 61.2px;
}
.cairo {
    font-family: 'Cairo', sans-serif;
    font-size: 2em;
    color: #fff;
    direction: rtl;
    text-align: right;
    line-height: 1.6;
    margin-bottom: 10px;
}

 html, body {
     height: 100%;
     margin: 0;
     overflow: hidden;
     font-family: 'Open Sans', sans-serif !important;
}

.col-md-10.hadith {
    background-color: #ffffff;
    background-image: url('/uploads/hadith-mosque.png'), linear-gradient(to bottom, #ffffff 0%, #f4fafc 100%);
    background-repeat: no-repeat, no-repeat;
    background-position: center bottom, center center;
    background-size: 100% auto, 100% 100%;
}
.hadith {
    position: absolute;
    top: 40px;
    font-size: 30px;
    direction: rtl;
    text-align: center;
    background-color: #ffffff;
    border-radius: 14px;
    height: 90%;
    padding: 33px;
    border: solid 1px #0093a4;
    box-shadow: 0 10px 28px rgba(0, 73, 96, 0.09);
    overflow: hidden;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.col-md-10.hadith p {
    padding-right: 0;
    padding-left: 0;
}

.hadith small {
    display: block;
    margin: 10px 0;
    font-style: normal;
    font-size: 16px;
    line-height: 1.45;
    text-align: center;
    color: #6b7d86;
    font-family: 'Amiri', serif;
}

 .container-fluid {
     background-color: rgb(0 0 0 / 8%);
     position: relative;
     background-image: url(/uploads/bg-clock.png) !important;
     background-repeat: repeat;
     height: 100%;
}
 .row.align-items-center.prayertimesrow {
     Position: absolute;
     bottom: 75px;
     background: linear-gradient(to top right, #0093a4, #0093a2);
     height: 140px;
     left: 0;
     max-width: 100%;
     margin-left: 0;
}
 .row.justify-content-end {
     display: flex;
}
 .row.justify-content-end.event {
     position: relative;
     display: flex;
     flex-direction: column;
     align-items: flex-end;
}
/* --------------------- */
/* 2. Header Styles */
/* --------------------- */
 .header {
     height: 80px;
}
 .row.header.align-items-left {
     padding-right: 0;
     padding-left: 0;
     width: 103%;
    background: var(--theme-gradient) !important;
}
 .header .col-8.right {
     background: linear-gradient(to top right, #0093a4, #0093a2);
     margin-top: -5px;
     height: 85px;
     padding-top: 10px;
     text-align: right;
     z-index: 10;
     margin-left: -5px;
     z-index: 0;
}
 .header .col-8.right .datesection {
    display: inline-block;
    float: left;
    line-height: 30px;
    padding-top: 10px;
    border-right: solid 1px #fff;
    padding-right: 8px;
}
 .header .col-8.right span {
     display: inline;
     color: #ffffff;
     font-size: 28px;
     padding-left: 15px;
     font-weight: bold;
     float: left;
}
 span.datehijri {
     clear: both;
     font-size: 14px;
     width: 100%;
    direction: rtl;
}
 .row.justify-content-start.dars:first-child {
     margin-top: 24px;
}
 .row .toast-info p {
     margin-bottom: 0;
     line-height: 17px;
}
 .row.justify-content-start.dars p.day {
     font-weight: bold;
}
 .row.justify-content-start.dars p.sheik {
    /*font-size: 8px;
    */
}
 .row.justify-content-start.dars p.dars {
     font-size: 15px;
}
 .row.justify-content-start.dars .toast-info {
     zoom: 100%;
     margin-bottom: 2px;
    height: 55px;
}
 .header .col-4.left {
     text-align: left;
     z-index: 10;
     height: 100px;
}

@media screen
and (min-width: 769px)
and (max-width: 1100px)
and (max-height: 650px) {
	.header .col-4.left {
		height: 85px;
	}
}
 .header .logo {
     background: #515253;
     border-bottom-right-radius: 40px;
}
 .header .logo img {
     display: block;
     -webkit-user-select: none;
     margin: auto;
     cursor: zoom-in;
     transition: background-color 300ms;
     float: left;
     width: 470px;
     margin-top: 11px;
     padding: 11px;
}
/* ------------------------------------ */
/* 3. Toast Styles for Prayer Time */
/* ------------------------------------ */
 .toast-info {
     margin-bottom: 15px;
     background: linear-gradient(to top, #f3f3f3, #ffffff);
     border-top-left-radius: 16px;
     border-bottom-left-radius: 16px;
     color: white;
     display: flex;
     align-items: center;
     border: solid 1px #0093a4;
     zoom: 210%;
}
 .toast-info .row {
     margin: 0;
     width: 100%;
     height: 100%;
}
 .row .toast-info {
     width: 290px;
}
 .toast-info .fa-history {
     padding: 10px;
     background-color: blue;
} 
 .toast-info.prayer p.countdown {
     font-weight: bold;
}
 .row.info .toast-info .fa-clock, .row .toast-info .fa-calendar-alt {
     font-size: 21px;
     line-height: 35px;
}


.eventssection .toast-info.prayer .row .col-2 i,
.eventssection .toast-info.friday-imam .row .col-2 i {
	font-size: 32px !important;
        font-size: clamp(28px, 3.6vw, 40px) !important;
	line-height: 1 !important;
	margin: 0 !important;
}
	
	
	
 .toast-info .row .col-2 {
     background-color: #0093a4;
     width: 100%;
}
 .toast-info .row .col-10 {
     background-color: #ffffff;
     color: black;
     line-height: 35px;
     width: 100%;
     height: 100%;
     padding-top: 2px;
     padding-bottom: 3px;
}
/* ------------------------------------- */
/* 4. Toast Styles for Upcoming Events */
/* ------------------------------------- */
 .toast-info.event {
     position: absolute;
     right: 0;
}
 .toast-info.event p {
     display: inline;
     font-size: 16px;
}
 .toast-info.event p.name {
     font-weight: bold;
     font-size: 13px;
}
 .toast-info.today p.name, .toast-info.today p.date {
     line-height: 23px;
     margin-bottom: 0;
}
 .toast-info.event p.name, .toast-info.event p.date {
     line-height: 23px;
}
/* ------------------------------------------------ */
/* 5. Row with 12-hour Clock and Prayer Times */
/* ------------------------------------------------ */
 ul {
     list-style-type: none;
     padding: 0;
}
 ul li {
     margin-bottom: 5px;
}
 .prayername, .iqamatime {
    /*text-align: center !important;
    */
}
 ul.prayertimes li.highlight .prayer-wrapper {
     color: yellow;
}
/* --------------------- */
/* 6. Media Queries */
/* --------------------- */
 @media (orientation: landscape) {
    /* landscape styles here if any specific adjustments are needed */
}
 @media (orientation: portrait) {
    /* portrait styles here if any specific adjustments are needed */
}
/* ---------------------------------------- */
/* 7. Jumbotron and Carousel Styles */
/* ---------------------------------------- */
 .jumbotron, .jumbotronCarousel {
     height: 100%;
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     z-index: -1;
     padding: 0 !important;
}
 .carousel-item img, .carousel-item video {
     height: 100%;
     object-fit: cover;
}
 .container, .container-fluid {
     padding: 0;
     margin: 0;
}
/* ---- Event Notification Styles ---- */
 .event-notification {
     position: absolute;
     bottom: 10%;
     left: 50%;
     transform: translateX(-50%);
     padding: 20px;
     background-color: rgba(0, 0, 0, 0.7);
     border-radius: 10px;
     display: none;
     color: #fff;
     font-size: 20px;
}
/* ---- Prayer Styles ---- */
 ul.row.prayertimes {
     height: 121px;
     padding: 0;
     margin: 0;
}
 ul.prayertimes li {
     zoom: 143%;
}
 ul.prayertimes li.Sunrise {
     vertical-align: top;
}
 ul.prayertimes li.highlight {
     display: inline-block;
     padding-right: 27px;
     color: yellow;
}
 .prayer-wrapper {
     line-height: 28px;
     color: white;
     font-weight: bold;
}
 .prayer-wrapper .iqamatime {
     font-weight: normal;
     font-size: 17px;
}
 .prayer-wrapper .prayertime {
     font-size: 47px;
    font-family: 'Cairo', sans-serif;
}
 
 .toast-info.event p.date {
     font-size: 16px;
}
 .toast-info.event p {
     display: block;
    /* this is default for p elements but is written to ensure block level display */
     margin: 0;
    /* Removes the default margin from p tags if desired */
}
 .toast-info.event .name, .toast-info.event .date {
     display: block;
    /* This ensures each paragraph is on a new line */
}
/* ---- Vector Container Styles ---- */
 .vector-container {
     height: 100px;
     position: absolute;
     top: 135px;
     left: 62%;
     z-index: 9;
}
 .arabesque-vector {
     width: 620px;
     position: absolute;
     bottom: -110%;
     left: 50%;
     transform-origin: 50% 50%;
     animation: rotateVector 20s infinite linear;
     opacity: 0.05;
}
 @keyframes rotateVector {
     0% {
         transform: translateX(-50%) rotate(0deg);
    }
     100% {
         transform: translateX(-50%) rotate(360deg);
    }
}
/* ---- Toast Info Styles ---- */
 .toast-info.prayer p {
     display: inline;
     padding-right: 5px;
	 font-size: 24px !important;
}
.toast-info.prayer p.prayername {
    font-size: 14px !important;
}
.toast-info.prayer .col-10 {
    padding: 4px 5px 0 13px;
    text-align: left;
}
 .toast-info.event p {
     display: inline;
     font-size: 16px;
}
 .toast-info.event p.name {
     font-weight: bold;
}
/* ---- Hidden Styles ---- */
 .hidden {
     display: none !important;
}
/* ---- Athan Popup Styles ---- */
 .athan-popup {
     display: flex;
     align-items: center;
     justify-content: center;
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgb(0 0 0 / 88%);
     z-index: 1000;
}
 .athan-content {
     text-align: center;
     color: #fff;
}

.row.justify-content-start.dars {
    display: none;
}
.container.tasbih .col {
    font-size: 45px;
}
.container.tasbih {
    padding-bottom: 25px;
}
 .notice-popup {
     display: flex;
     align-items: center;
     justify-content: center;
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: 1000;
	 padding-top: 5px;
     align-items: flex-start;
     justify-content: flex-start;
	 background-color: #f5f5f5e0;
	 background-image: linear-gradient(to bottom left, rgba(0, 0, 0, 0) 0%, #f5f5f5 30%) !important;
     text-align: center;
     color: #fff;
}


.notice-popup .mobile-container img {
    width: 325px;
}
/* ---- Progress Bar Styles ---- */
 .progress-bar {
     height: 20px;
     background-color: #ffffff !important;
     width: 310px;
     margin: 20px auto;
     border-radius: 8px;
}
 .progress {
     height: 100%;
     background: linear-gradient(to right, #0093a4, #0093a2);
     width: 100%;
     transform: scaleX(0);
     transform-origin: left center;
     will-change: transform;
}
/* ---- Animation Styles ---- */
 @keyframes blink {
     0% {
         opacity: 1;
    }
     50% {
         opacity: 0;
    }
     100% {
         opacity: 1;
    }
}
 .blinking {
     animation: blink 2s infinite;
}
/* ---- Iqama Countdown Styles ---- */
 p#iqamaCountdown {
     font-size: 38px;
     font-weight: bold;
}
/* ---- Row Styles ---- */
 .row.justify-content-end {
     display: flex;
}
 .row.justify-content-end.event {
     position: relative;
     display: flex;
     flex-direction: column;
     align-items: flex-end;
}
 .toast-info.event:nth-child(1) {
     top: 0px;
}
 .toast-info.event:nth-child(2) {
     top: 63px;
}
 .toast-info.event:nth-child(3) {
     top: 106px;
}
 .toast-info.event:nth-child(4) {
     top: 149px;
}
 .toast-info.event:nth-child(5) {
     top: 172px;
}
 .toast-info.event:nth-child(6) {
     top: 235px;
}
 p#iqamaCountdown, p#iqamaCountdowntxt {
     display: inline-block;
     font-size: 56px;
     margin-bottom: 35px;
     padding-left: 25px;
}
 p#iqamaCountdowntxt {
     font-size: 45px;
}
 .athan-content p {
     font-size: 45px;
    font-family: 'Cairo', sans-serif;
}
 .athan-content h1#prayerName {
    font-size: 108px;
    font-family: 'Cairo', sans-serif;
    font-weight: bold;
}
 .col-md-6.eventssection {
     padding-top: 25px;
}
@media screen and (max-width: 768px) {
	/* Hide tables on screens smaller than 768px and show the message */
	.container-fluid {
		display: none;
	}

	#notSupportedMessage {
		display: block;
	}
}

.rq-info.left.medlem {
    margin-right: 15px;
}
.rq-info.left.medlem img {
     width: 255px;
}
.rq-info.left.mobilepay {

}
.rq-info.left.mobilepay img {
     width: 200px;
}

.col-md-6.eventssection .row .toast-info {
    width: 250px;
}

.row.info .toast-info .fa-clock {
    margin: 2px 0 0 -5px;
}

.mobile-container {
}

.mobile-container img {
    width: 155px;
}

.mobile-container p {
   font-size: 19px;
}


.section .set {
    width: 80%;
    /*border: solid 1px #cfcfcf5c;
    border-radius: 10px;*/
    margin: 0 auto;
}
.section:first-child .set {
    width: 270px;
} 

.section:nth-child(5) .set,
.section:nth-child(4) .set {
    width: 1270px;
}

.section:nth-child(2) .set {
    width: 1273px;
}

.section:nth-child(3) .set {
    width: 1273px;
}
/*
.section:nth-child(2) .set .translation p.wider {
    border-top: unset;
}*/


.section:nth-child(2) {
    padding-bottom: 0;
    margin-bottom: 0;
}/*
.section:nth-child(2) .set .translation p.wider,
.section:nth-child(2) .set {
	border-bottom: unset;
	border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}*/

.section:nth-child(3) .set .translation p.wider,
.section:nth-child(3) .set .translation p.wider,
.section:nth-child(3) .set {
    /*border-top: unset;
	border-top-left-radius: 0;
    border-top-right-radius: 0;*/
}


.notice-content {
    width: 100%;
    height: 100%;
    padding: 2px;
}

.section {
    margin-bottom: 10px;
    padding-bottom: 15px;
	position: relative;
}
.section:nth-child(5) .badge,
.section:nth-child(2) .badge {
    /*margin-left: 594px;*/
}

.section:nth-child(3) .badge {
    margin-left: 594px;
}
.section:nth-child(4) .badge {
    /*margin-left: 78px;*/
}


.section h2 { 
    font-size: 1.2em;
    color: #bbb;
    padding-bottom: 10px;
	margin-bottom: 0px;
}

.section h2 p {
    background: #f4e4a4;
    position: relative;
    width: 90px;
    margin: 0 auto;
    border-radius: 6px;
    color: #535353;
    padding: 3px;
}

.section .arabic {
	font-size: 45px;
    direction: rtl;
    text-align: center !important;
    margin-bottom: 0 !important;
    padding-top: 10px;
    /*border-left: solid 1px;
    border-right: solid 1px;
    border-color: #cfcfcf5c;*/
	color: #0f0f0f;
}

.translation {
    font-size: 0.9em;
    color: #ccc;
    margin-bottom: 0px;
    text-align: center;
}

.translation p {
    position: relative;
    margin: 0 auto;
    color: #82807c;
    padding: 2px;
    font-weight: bold;
    font-size: 25px;
    border-radius: 6px;
    border: solid 1px #cfcfcf5c;
    /*border-top-left-radius: unset;
    border-top-right-radius: unset;*/
	font-family: 'Cairo';
	background: #e9e8e2;
}

.translation p.wide {
    width: 1040px;
}

.translation p.wider {
    width: 100%;
    font-size: 29px;
}

.section .groupp {
    display: inline-block;
    width: 20%;
    /*border: solid 1px #cfcfcf5c;
    border-radius: 10px;*/
}

.references {
    font-size: 0.8em;
    color: #888;
    text-align: center;
    margin-top: 30px;
}



.section .badge {
	display: inline-block;
    background-color: #82807c;
    color: #9a9476;
    font-weight: bold;
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 14px;
    position: absolute;
    z-index: 10;
    margin-left: -27px;
    border-top-left-radius: 0;
    border-bottom-right-radius: 0;
    background: #fae7a2;
}


.header .col-8.right .weather-info{
	display: inline-block;
    float: left;
    line-height: 30px;
    padding-top: 10px;
	vertical-align: middle;
}
.header .col-8.right .weather-info span {
    text-align: right;
    font-size: 42px;
    vertical-align: middle;
    padding: 15px 0px 0px 16px;
}

/* =========================================================
   Dynamisk konfiguration, Jummah og genbrug på flere moskéer
   ========================================================= */

.header .logo {
    position: relative;
    overflow: hidden;
}

.header .logo img {
    width: auto !important;
    max-width: 94%;
    max-height: 82px;
    object-fit: contain;
    cursor: default;
    margin: 7px 0 0 12px !important;
    padding: 4px !important;
}

.eid-greeting {
    color: #fff;
    position: absolute;
    left: 18px;
    bottom: 2px;
    font-size: 18px;
    white-space: nowrap;
}

.weather-info {
    display: inline-flex;
    align-items: center;
    float: left;
    height: 65px;
    margin-left: 14px;
    color: #fff;
    font-size: 29px;
    font-weight: 700;
}

.weather-info img {
    width: 42px;
    height: 42px;
    object-fit: contain;
}

.main-content-row {
    min-height: calc(100vh - 275px);
}

.hadith .quote-content {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 92%;
    margin: 0 auto;
    color: #365766;
    opacity: 1;
    text-align: center;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9);
}

.eid-content {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.eid-content img {
    display: block;
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
}

.display-error {
    direction: ltr;
    text-align: left;
    background: #fff3cd;
    color: #664d03;
    border: 1px solid #ffecb5;
    border-radius: 7px;
    padding: 14px;
    font-size: 18px;
    margin-top: 16px;
}

.friday-imam-row {
    margin-top: 10px;
}

.toast-info.friday-imam p {
    margin: 0;
    line-height: 22px;
}

.toast-info.friday-imam .imam-name {
    font-size: 15px;
}

.badge-row {
    margin-top: 58px;
}

.rq-info.left.medlem {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    align-items: center;
}

.rq-info.left.medlem img {
    width: 245px;
    max-height: 115px;
    object-fit: contain;
}

.row.justify-content-end.event {
    gap: 7px;
}

.row.justify-content-end.event .toast-info.event {
    position: relative !important;
    top: auto !important;
    margin-bottom: 0;
}

ul.row.prayertimes {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    width: 100%;
}

ul.prayertimes li {
    flex: 1 1 0;
    width: auto;
    max-width: none;
    min-width: 0;
    padding: 0 10px !important;
    margin: 0;
    zoom: 1 !important;
}

ul.prayertimes li.highlight {
    display: list-item;
    padding-right: 10px !important;
}

ul.prayertimes .prayer-wrapper {
    line-height: 28px;
    white-space: nowrap;
}

ul.prayertimes .prayer-wrapper .prayername {
    font-size: 24px;
}

ul.prayertimes .prayer-wrapper .prayertime {
    font-size: clamp(32px, 4.1vw, 52px);
    line-height: 1.05;
}

ul.prayertimes .prayer-wrapper .iqamatime {
    font-size: clamp(15px, 1.35vw, 21px);
}

ul.prayertimes.has-jummah .prayer-wrapper .prayertime {
    font-size: clamp(29px, 2.7vw, 45px);
}

ul.prayertimes.has-jummah .prayer-wrapper .prayername {
    font-size: 21px;
}

.toast-info.prayer .col-10 p {
    display: inline;
    margin: 0;
}

.toast-info.prayer .countdown {
    display: inline !important;
    margin-left: 5px;
}

#iqamaLine {
    display: flex;
    align-items: baseline;
    justify-content: center;
}

.athan-content .progress-bar {
    overflow: hidden;
}

.news-ticker.hidden {
    display: none !important;
}

@media screen and (max-width: 1100px) {
    .rq-info.left.medlem img {
        width: 205px;
    }

    ul.prayertimes li {
        padding: 0 5px !important;
    }

    ul.prayertimes .prayer-wrapper .prayername {
        font-size: 19px;
    }
}

/* ===== 2026-07-16 finjusteringer ===== */
.clocksection {
    position: relative;
}

.col-md-10.hadith {
    width: 92%;
    max-width: 615px;
    height: calc(100vh - 355px);
    min-height: 320px;
}

.hadith {
    top: 18px;
    padding: 24px 28px;
    font-size: 27px;
}

.hadith .quote-content {
    font-size: 26px;
    font-size: clamp(26px, 2.1vw, 38px);
    line-height: 1.7;
    text-align: center;
}

.hadith small {
    font-size: 15px;
    line-height: 1.45;
    text-align: center;
}

.container-fluid {
    background-color: rgb(0 0 0 / 8%);
    background-image: url('/uploads/bg-clock.png') !important;
    background-repeat: repeat;
}

.vector-container {
    display: block !important;
}

.arabesque-vector {
    opacity: 0.06;
}

.toast-info {
    zoom: 182%;
}

.col-md-6.eventssection {
    padding-top: 10px;
    padding-right: 18px;
}

.col-md-6.eventssection .row .toast-info {
    width: 300px;
}

.toast-info.prayer {
    min-width: 300px;
}

.toast-info.prayer .col-10,
.toast-info.prayer p,
.toast-info.prayer .prayername,
.toast-info.prayer .countdown {
    white-space: nowrap;
}

.toast-info.friday-imam {
    width: 300px;
}

.toast-info.friday-imam .col-10 {
    padding: 8px 12px 8px 14px;
    line-height: 1.25;
}

.toast-info.friday-imam p {
    display: block;
    line-height: 1.2;
    margin: 0;
}

.toast-info.friday-imam .imam-name {
    font-size: 17px;
    margin-top: 3px;
    margin-bottom: 7px;
}

.toast-info.friday-imam .topic-label {
    font-size: 12px;
    color: #222;
    margin-bottom: 2px;
}

.toast-info.friday-imam .topic-text {
    font-size: 15px;
    line-height: 1.25;
}

.badge-row {
    margin-top: 46px;
}

.rq-info.left.medlem {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    padding-right: 6px;
}

.rq-info.left.medlem img {
    width: 238px;
    max-width: 48%;
    height: auto;
    max-height: 106px;
    object-fit: contain;
    display: block;
}

ul.prayertimes li.highlight .prayer-wrapper,
ul.prayertimes li.highlight .prayer-wrapper .prayertime,
ul.prayertimes li.highlight .prayer-wrapper .iqamatime,
ul.prayertimes li.highlight .prayer-wrapper .prayername {
    color: yellow;
}
/* ===== v4: skærmtilpasning og lagdeling ===== */
.container-fluid {
    isolation: isolate;
}

.header,
.main-content-row {
    position: relative;
    z-index: 2;
}

.row.align-items-center.prayertimesrow {
    position: absolute;
    z-index: 2;
}

.news-ticker {
    z-index: 2;
}

.main-content-row {
    height: calc(100vh - 275px);
    min-height: 0;
}

.clocksection,
.eventssection {
    height: 100%;
}

.clocksection {
    padding: 0;
}

.col-md-10.hadith {
    position: absolute;
    top: 18px;
    top: clamp(16px, 2.2vh, 26px);
    bottom: 22px;
    bottom: clamp(18px, 2.8vh, 32px);
    left: 20px;
    left: clamp(14px, 1.8vw, 28px);
    right: auto;
    width: calc(100% - 40px);
    width: calc(100% - clamp(28px, 4vw, 56px));
    max-width: 615px;
    height: auto;
    min-height: 0;
    margin: 0;
    z-index: 2;
}

.vector-container {
    display: block !important;
    position: absolute;
    inset: 80px 0 215px 0;
    height: auto;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.arabesque-vector {
    z-index: 0;
    opacity: 0.055;
    pointer-events: none;
}

.header,
.main-content-row,
.row.align-items-center.prayertimesrow,
.news-ticker {
    z-index: 2;
}

.athan-popup,
.notice-popup {
    position: fixed;
    z-index: 1000;
}

@media screen and (max-height: 700px) {
    .col-md-10.hadith {
        top: 12px;
        bottom: 14px;
        padding: 18px 24px;
    }

    .hadith .quote-content {
        font-size: 23px;
        font-size: clamp(23px, 2vw, 32px);
        line-height: 1.55;
        text-align: center;
    }
}

@media screen and (min-width: 1700px) {
    .col-md-10.hadith {
        max-width: 660px;
    }

}


/* ===== v6: helt glat progress, mere luft og Jummah på én linje ===== */
.col-md-10.hadith {
    top: 34px;
    top: clamp(30px, 4vh, 46px);
}

.toast-info.prayer {
    zoom: 152%;
    width: 320px !important;
    min-width: 320px;
    max-width: calc(100% - 12px);
}

.toast-info.prayer .col-10 {
    padding-left: 11px;
    padding-right: 12px;
    overflow: hidden;
}

.toast-info.prayer .prayername {
    font-size: 22px !important;
}

.toast-info.prayer.jummah-countdown p,
.toast-info.prayer.jummah-countdown .prayername,
.toast-info.prayer.jummah-countdown .countdown {
    font-size: 21px !important;
    letter-spacing: -0.2px;
}

#progress {
    width: 100%;
    transform: scaleX(0);
    transform-origin: left center;
    will-change: transform;
}

@media screen and (max-height: 700px) {
    .col-md-10.hadith {
        top: 24px;
        bottom: 14px;
    }
}

/* ===== v7: ens toast-kolonne og adskilt tickerlag ===== */
.main-content-row {
    overflow: hidden;
}

.eventssection {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    overflow: hidden;
    padding-top: 10px;
    padding-right: 18px;
    padding-bottom: 12px;
}

.eventssection > .row {
    flex: 0 0 auto;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
}

.eventssection > .row.info,
.eventssection > .friday-imam-row,
.eventssection > .row.justify-content-end.event {
    justify-content: flex-end;
}

/* Samme fysiske bredde og zoom for countdown, imam og events. */
.eventssection .toast-info,
.eventssection .toast-info.prayer,
.eventssection .toast-info.friday-imam,
.eventssection .toast-info.event {
    zoom: 152%;
    width: 320px !important;
    min-width: 320px;
    max-width: 320px;
    box-sizing: border-box;
}

.friday-imam-row {
    margin-top: 12px;
}

.toast-info.friday-imam .col-10 {
    padding: 7px 10px 7px 12px;
    overflow: hidden;
}

.toast-info.friday-imam .name {
    font-size: 17px;
    line-height: 1.15;
}

.toast-info.friday-imam .imam-name {
    font-size: 16px;
    line-height: 1.2;
    margin-top: 3px;
    margin-bottom: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.toast-info.friday-imam .topic-label {
    font-size: 12px;
    line-height: 1.15;
    margin-bottom: 2px;
}

.toast-info.friday-imam .topic-text {
    font-size: 14px;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.row.justify-content-end.event {
    margin-top: 10px;
    gap: 8px;
}

.toast-info.event .col-10 {
    padding: 6px 10px 6px 12px;
    overflow: hidden;
}

.toast-info.event p.name {
    font-size: 14px;
    line-height: 1.2;
}

.toast-info.event p.date {
    font-size: 14px;
    line-height: 1.2;
    margin-top: 4px;
}

/* Badges holdes inde i hovedområdet og kan ikke glide ned bag prayer-bar/ticker. */
.badge-row {
    flex: 0 1 auto !important;
    margin-top: auto;
    min-height: 0;
    max-height: 112px;
    overflow: hidden;
    align-items: flex-end;
}

.rq-info.left.medlem {
    height: 100%;
    min-height: 0;
    align-items: flex-end;
}

.rq-info.left.medlem img {
    width: 238px;
    max-width: 48%;
    max-height: 100px;
}

/* Ticker er sit eget ugennemsigtige lag. */
.news-ticker {
    background-color: #3f3f3f;
    opacity: 1;
    isolation: isolate;
    overflow: hidden;
}

.news-ticker,
.eocjs-newsticker,
.eocjs-newsticker .eocjs-newsticker-container {
    z-index: 5;
}

@media screen and (max-height: 760px) {
    .eventssection .toast-info,
    .eventssection .toast-info.prayer,
    .eventssection .toast-info.friday-imam,
    .eventssection .toast-info.event {
        zoom: 142%;
        width: 320px !important;
        min-width: 320px;
        max-width: 320px;
    }

    .friday-imam-row {
        margin-top: 8px;
    }

    .row.justify-content-end.event {
        margin-top: 7px;
    }

    .toast-info.friday-imam .name {
        font-size: 16px;
    }

    .toast-info.friday-imam .imam-name {
        font-size: 15px;
        margin-bottom: 4px;
    }

    .toast-info.friday-imam .topic-text,
    .toast-info.event p.name,
    .toast-info.event p.date {
        font-size: 13px;
    }

    .badge-row {
        max-height: 94px;
    }

    .rq-info.left.medlem img {
        max-height: 84px;
    }
}

/* ===== v8: dekorationsplacering, tættere toast-kolonne og badges ===== */

/* Arabesque placeres i den øverste del af hovedområdet, stadig bag indholdet. */
.vector-container {
    inset: 80px 0 215px 0;
    z-index: 0;
}

.arabesque-vector {
    top: clamp(-115px, -7vh, -55px);
    bottom: auto !important;
    left: 50%;
    width: clamp(430px, 44vw, 620px);
    z-index: 0;
}

/* Fjern den dobbelte luft fra toastens margin + rækkens margin. */
.eventssection .toast-info {
    margin-bottom: 0;
}

.friday-imam-row {
    margin-top: 5px;
}

.row.justify-content-end.event {
    margin-top: 5px;
    gap: 5px;
}

/* Badges pakkes tæt og placeres helt til højre. */
.badge-row {
    justify-content: flex-end !important;
    padding-right: 0 !important;
}

.rq-info.left.medlem {
    width: auto !important;
    max-width: 100%;
    margin-right: 0 !important;
    padding-right: 0 !important;
    gap: 5px !important;
    justify-content: flex-end !important;
}

.rq-info.left.medlem img {
    width: auto !important;
    height: clamp(66px, 7.2vh, 82px);
    max-width: none !important;
    max-height: 82px;
    flex: 0 0 auto;
}

@media screen and (max-height: 760px) {
    .arabesque-vector {
        top: -80px;
    }

    .friday-imam-row,
    .row.justify-content-end.event {
        margin-top: 4px;
    }

    .rq-info.left.medlem img {
        height: 68px;
        max-height: 68px;
    }
}


/* ===== v9: stabil ticker uden jQuery-animationer + lydaktivering ===== */
.safe-news-ticker {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    white-space: nowrap;
    contain: layout paint;
}

.safe-ticker-track {
    position: absolute;
    top: 0;
    left: 0;
    display: inline-flex;
    align-items: center;
    width: max-content;
    height: 100%;
    white-space: nowrap;
    color: #fff;
    font-family: 'Cairo', sans-serif;
    font-size: 35px;
    line-height: 75px;
    will-change: transform;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
}

.safe-ticker-item,
.safe-ticker-divider {
    display: inline-block;
    flex: 0 0 auto;
}

.safe-ticker-divider {
    padding: 0 22px;
}

/* ===== v10: gendan ur- og ticker-layout efter udfasning af eocjs-CSS ===== */
.ticker-caption {
    display: inline-block;
    position: relative;
    float: right;
    height: 100%;
    padding-top: 6px;
    margin-right: clamp(18px, 2vw, 38px);
    max-width: calc(100% - 20px);
}

.ticker-caption p {
    position: relative;
    height: 100%;
    margin: 0;
    padding-left: clamp(12px, 1.5vw, 25px);
    padding-right: 0;
    color: #fff;
    font-size: clamp(48px, 4.35vw, 61px);
    font-weight: 700;
    line-height: 65px;
    white-space: nowrap;
    vertical-align: middle;
}

.news-ticker {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 75px;
    overflow: hidden;
    background-color: #3f3f3f;
    opacity: 1;
    isolation: isolate;
    z-index: 5;
    pointer-events: none;
}

.safe-news-ticker {
    display: block;
    width: 100%;
    height: 75px;
}

/*@media screen and (max-width: 1400px) {
    .ticker-caption {
        margin-right: 22px;
    }

    .ticker-caption p {
        font-size: clamp(47px, 4.2vw, 58px);
    }
}*/

/* ===== v12: kontinuerlig ticker og større støttebadges ===== */
.safe-ticker-track {
    display: flex;
    flex-wrap: nowrap;
}

.safe-ticker-group {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    height: 100%;
    white-space: nowrap;
}

.safe-ticker-measuring {
    visibility: hidden;
    pointer-events: none;
}

.safe-ticker-item {
    unicode-bidi: isolate;
}

.badge-row {
    max-height: 126px;
}

.rq-info.left.medlem img {
    height: clamp(82px, 10vh, 105px);
    max-height: 105px;
}

@media screen and (max-height: 760px) {
    .badge-row {
        max-height: 102px;
    }

    .rq-info.left.medlem img {
        height: 84px;
        max-height: 84px;
    }
}


/* ===== v13: korrekt tickerretning, lydtilladelse og stabil lydtest ===== */
.safe-news-ticker.ticker-language-ar .safe-ticker-item {
    direction: rtl;
    text-align: right;
}

.safe-news-ticker.ticker-language-da .safe-ticker-item {
    direction: ltr;
    text-align: left;
}

.audio-control-button {
    position: fixed;
    top: 92px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1300;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid #007c8a;
    border-radius: 999px;
    padding: 8px 14px;
    background: rgba(255,255,255,.96);
    color: #005d67;
    font-size: 16px;
    font-weight: 700;
    box-shadow: 0 5px 18px rgba(0,0,0,.18);
    cursor: pointer;
    white-space: nowrap;
}

.audio-control-button.hidden {
    display: none !important;
}

.audio-control-button.audio-control-active {
    left: auto;
    right: 14px;
    transform: none;
    padding: 7px 10px;
    opacity: .78;
}

.audio-control-button.audio-control-active span {
    display: none;
}

.audio-control-button.audio-control-muted,
.audio-control-button.audio-control-error {
    background: #fff7d6;
    border-color: #d7a500;
    color: #684e00;
}

.audio-control-button.audio-control-error {
    background: #ffe8e8;
    border-color: #c62828;
    color: #8b1111;
}


/* ===== v15: kompakt lydstatus og omvendt visuel tickerretning ===== */
.audio-control-button.audio-control-collapsed {
    left: auto;
    right: 14px;
    transform: none;
    padding: 7px 10px;
    opacity: .78;
}

.audio-control-button.audio-control-collapsed span {
    display: none;
}


/* ===== v16: fælles tema, mobilvisning og responsive popups ===== */
:root {
    --theme-primary: #0093a4;
    --theme-secondary: #0093a2;
    --theme-gradient: linear-gradient(to top right, #0093a4, #0093a2);
}

.header .col-8.right,
.row.align-items-center.prayertimesrow {
    background: var(--theme-gradient) !important;
}

.toast-info .row .col-2,
.toast-info .row .col-2.d-flex {
    background: var(--theme-gradient) !important;
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
}

.progress {
    background: linear-gradient(to right, var(--theme-primary), var(--theme-secondary)) !important;
}

.hadith,
.toast-info,
.audio-control-button {
    border-color: var(--theme-primary) !important;
}

.audio-control-button {
    color: var(--theme-primary);
}

@media screen and (max-width: 768px) {
    html,
    body {
        width: 100% !important;
        height: auto !important;
        min-height: 100%;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        transform: none !important;
        zoom: 1 !important;
    }

    body {
        background: #eef3f4;
        padding-bottom: 58px;
    }

    .container-fluid {
        display: block !important;
        width: 100%;
        height: auto !important;
        min-height: 100vh;
        overflow: visible;
        padding: 0 !important;
        background-position: center top;
    }

    .jumbotron,
    .vector-container,
    .clocksection,
    .friday-imam-row,
    .badge-row {
        display: none !important;
    }

    .row.header.align-items-left {
        display: grid !important;
        grid-template-columns: 1fr;
        width: 100% !important;
        height: auto;
        margin: 0 !important;
        padding: 0 !important;
    }

    .header .col-4.left,
    .header .col-8.right {
        flex: none;
        width: 100%;
        max-width: none;
        margin: 0 !important;
    }

    .header .col-4.left {
        height: 72px;
        border-radius: 0 0 24px 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }

    .header .logo img {
        float: none;
        width: auto !important;
        max-width: 92%;
        max-height: 64px;
        margin: 0 !important;
        padding: 5px !important;
    }

    .header .col-8.right {
        min-height: 104px;
        height: auto;
        padding: 10px 14px 11px;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "date clock"
            "weather weather";
        align-items: center;
        gap: 4px 10px;
    }

    .header .col-8.right .datesection {
        grid-area: date;
        float: none;
        display: block;
        min-width: 0;
        padding: 0 10px 0 0;
        border-right: 1px solid rgba(255,255,255,.45);
        line-height: 1.15;
    }

    .header .col-8.right .datesection span {
        float: none;
        display: block;
        width: auto;
        padding: 0;
        font-size: clamp(17px, 5vw, 23px);
        line-height: 1.25;
        white-space: normal;
    }

    .header .col-8.right .datesection .datehijri {
        direction: rtl;
        font-size: clamp(14px, 4.2vw, 18px);
        margin-top: 2px;
    }

    .ticker-caption {
        grid-area: clock;
        float: none;
        position: static;
        width: auto;
        min-width: 126px;
        height: auto;
        margin: 0;
        padding: 0;
        text-align: right;
    }

    .ticker-caption p {
        height: auto;
        margin: 0;
        padding: 0;
        font-size: clamp(36px, 11vw, 54px);
        line-height: 1;
        white-space: nowrap;
    }

    .weather-info,
    .header .col-8.right .weather-info {
        grid-area: weather;
        float: none;
        height: auto;
        min-height: 0;
        margin: 1px 0 0;
        padding: 0;
        justify-content: flex-start;
        font-size: 17px;
    }

    .weather-info img {
        width: 30px;
        height: 30px;
    }

    .header .col-8.right .weather-info span {
        float: none;
        font-size: 22px;
        padding: 0 0 0 7px;
    }

    .main-content-row {
        display: block !important;
        width: 100%;
        height: auto !important;
        min-height: 0;
        margin: 0 !important;
        padding: 12px;
        overflow: visible;
    }

    .eventssection,
    .col-md-6.eventssection {
        display: block;
        width: 100%;
        max-width: none;
        height: auto;
        padding: 0;
        overflow: visible;
    }

    .eventssection > .row,
    .eventssection > .row.info,
    .eventssection > .row.justify-content-end.event {
        width: 100%;
        margin: 0 0 9px !important;
        justify-content: stretch !important;
    }

    .eventssection .toast-info,
    .eventssection .toast-info.prayer,
    .eventssection .toast-info.event {
        zoom: 1 !important;
        width: 100% !important;
        min-width: 0;
        max-width: none;
        margin: 0;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 5px 16px rgba(0,0,0,.08);
    }

    .toast-info.prayer .row,
    .toast-info.event .row {
        min-height: 66px;
    }

    .toast-info .row .col-2 {
        flex: 0 0 62px;
        max-width: 62px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .toast-info .row .col-10 {
        flex: 1 1 auto;
        max-width: none;
        min-width: 0;
    }

    .toast-info.prayer .col-10 {
        display: flex;
        align-items: baseline;
        gap: 6px;
        padding: 10px 12px;
        overflow: visible;
    }

    .toast-info.prayer p,
    .toast-info.prayer .prayername,
    .toast-info.prayer .countdown,
    .toast-info.prayer.jummah-countdown p,
    .toast-info.prayer.jummah-countdown .prayername,
    .toast-info.prayer.jummah-countdown .countdown {
        font-size: clamp(20px, 6vw, 29px) !important;
    }

    .row.justify-content-end.event {
        gap: 8px;
    }

    .toast-info.event .col-10 {
        padding: 9px 12px;
    }

    .toast-info.event p.name {
        font-size: 16px;
    }

    .toast-info.event p.date {
        font-size: 15px;
    }

    .row.align-items-center.prayertimesrow {
        position: relative !important;
        inset: auto !important;
        bottom: auto !important;
        display: block;
        width: 100%;
        max-width: none;
        height: auto;
        margin: 0 !important;
        padding: 12px !important;
    }

    .prayertimesrow .col-12.prayer {
        padding: 0;
    }

    ul.row.prayertimes,
    ul.prayertimes {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        height: auto;
        margin: 0;
        padding: 0;
        gap: 8px;
    }

    ul.prayertimes li,
    ul.prayertimes.has-jummah li {
        flex: 0 0 auto;
        display: block;
        width: 100%;
        min-width: 0;
        max-width: none;
        margin: 0;
        padding: 0 !important;
        border: 1px solid rgba(255,255,255,.28);
        border-radius: 14px;
        background: rgba(255,255,255,.10);
        overflow: hidden;
        zoom: 1 !important;
    }

    ul.prayertimes li.hidden {
        display: none !important;
    }

    ul.prayertimes .prayer-wrapper {
        display: grid;
        grid-template-columns: minmax(82px, 1fr) auto minmax(82px, 1fr);
        align-items: center;
        gap: 8px;
        width: 100%;
        padding: 11px 14px;
        line-height: 1.15;
        white-space: normal;
    }

    ul.prayertimes .prayer-wrapper .prayername,
    ul.prayertimes.has-jummah .prayer-wrapper .prayername {
        text-align: left;
        font-size: clamp(18px, 5.3vw, 23px);
    }

    ul.prayertimes .prayer-wrapper .prayertime,
    ul.prayertimes.has-jummah .prayer-wrapper .prayertime {
        text-align: center;
        font-size: clamp(29px, 8vw, 39px);
        line-height: 1;
    }

    ul.prayertimes .prayer-wrapper .iqamatime,
    ul.prayertimes.has-jummah .prayer-wrapper .iqamatime {
        text-align: right;
        font-size: clamp(13px, 3.8vw, 17px);
    }

    ul.prayertimes li.highlight {
        padding: 0 !important;
        border-color: #ffed47;
        background: rgba(255,237,71,.15);
        box-shadow: 0 0 0 2px rgba(255,237,71,.18);
    }

    .news-ticker {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 58px;
        z-index: 1100;
    }

    .safe-news-ticker,
    .safe-ticker-track,
    .safe-ticker-group {
        height: 58px;
    }

    .safe-ticker-item {
        font-size: clamp(23px, 7vw, 31px) !important;
        line-height: 58px !important;
    }

    .audio-control-button,
    .audio-control-button.audio-control-active,
    .audio-control-button.audio-control-collapsed {
        top: 10px;
        right: 10px;
        left: auto;
        transform: none;
        max-width: calc(100vw - 20px);
        font-size: 14px;
        padding: 7px 10px;
    }

    .athan-popup {
        padding: 18px 12px;
        overflow-y: auto;
    }

    .athan-content {
        width: min(100%, 520px);
    }

    .athan-content p {
        font-size: clamp(22px, 7vw, 32px);
        margin-bottom: 8px;
    }

    .athan-content h1#prayerName {
        font-size: clamp(54px, 18vw, 82px);
        line-height: 1.05;
    }

    .progress-bar {
        width: min(82vw, 360px);
        margin: 15px auto;
    }

    #iqamaLine {
        flex-wrap: wrap;
        gap: 5px;
    }

    p#iqamaCountdown,
    p#iqamaCountdowntxt {
        margin: 0;
        padding: 0 5px;
        font-size: clamp(31px, 10vw, 46px);
    }

    p#iqamaCountdowntxt {
        font-size: clamp(24px, 7vw, 34px);
    }

    .mobile-container img {
        width: min(38vw, 150px);
    }

    .mobile-container p {
        font-size: 16px;
    }

    .notice-popup {
        display: block;
        padding: 12px 8px 24px;
        overflow-x: hidden;
        overflow-y: auto;
        background-color: #f4f5f3;
        background-image: linear-gradient(to bottom left, rgba(255,255,255,.88) 0%, #f4f5f3 44%) !important;
        color: #111;
        -webkit-overflow-scrolling: touch;
    }

    .notice-popup.hidden {
        display: none !important;
    }

    .notice-content {
        width: 100%;
        height: auto;
        min-height: 100%;
        padding: 0;
    }

    .notice-popup .containerD {
        width: 100%;
        max-width: 720px;
        margin: 0 auto;
        padding: 0;
    }

    /* PÅ mobil skal indholdet bruge hele bredden og scrolle lodret i stedet for at blive skaleret ned. */
    #tasbihPopup .containerD {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        transform: none !important;
        transform-origin: top center !important;
    }

    .notice-popup .section {
        width: 100%;
        margin: 0 0 11px;
        padding: 12px 10px;
        border: 1px solid rgba(0,0,0,.06);
        border-radius: 14px;
        background: rgba(255,255,255,.88);
        box-shadow: 0 5px 16px rgba(0,0,0,.05);
    }

    .notice-popup .section .set,
    .notice-popup .section:first-child .set,
    .notice-popup .section:nth-child(2) .set,
    .notice-popup .section:nth-child(3) .set,
    .notice-popup .section:nth-child(4) .set,
    .notice-popup .section:nth-child(5) .set {
        width: 100% !important;
        max-width: none;
        margin: 0;
    }

    .notice-popup .section h2 {
        margin: 0 0 7px;
        padding: 0;
        text-align: center;
        line-height: 1;
    }

    .notice-popup .section .badge {
        position: static;
        display: inline-block;
        margin: 0;
        padding: 5px 10px;
        border-radius: 8px;
        font-size: 13px;
    }

    .notice-popup .section .arabic {
        width: 100%;
        margin: 0;
        padding: 4px 5px 8px;
        color: #111;
        font-size: clamp(25px, 8vw, 38px);
        line-height: 1.6;
        text-align: center !important;
        overflow-wrap: anywhere;
    }

    .notice-popup .translation {
        width: 100%;
    }

    .notice-popup .translation p,
    .notice-popup .translation p.wide,
    .notice-popup .translation p.wider {
        width: 100% !important;
        margin: 0;
        padding: 8px 9px;
        font-size: clamp(15px, 4.5vw, 20px);
        line-height: 1.45;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .notice-popup .section .groupp {
        display: block;
        width: 100%;
        margin: 0 0 10px;
        padding: 9px;
        border-radius: 10px;
        background: rgba(236,236,232,.72);
    }

    .notice-popup .section .groupp:last-child {
        margin-bottom: 0;
    }

    .notice-popup .references {
        margin: 4px 0 0;
        padding: 8px;
        font-size: 12px;
    }
}

@media screen and (min-width: 560px) and (max-width: 768px) {
    .notice-popup .section:nth-child(4) {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }

    .notice-popup .section:nth-child(4) .groupp {
        margin: 0;
    }
}

/* =========================================================
   v17 – kompakt mobilheader og countdown på én linje
   ========================================================= */
@media screen and (max-width: 768px) {
    /* Logoet er nyttigt på TV, men tager for meget lodret plads på mobil. */
    .header .col-4.left,
    .header .logo,
    #eidGreeting {
        display: none !important;
    }

    .row.header.align-items-left,
    .header {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
    }

    /* Én kompakt statuslinje med dato, tid og vejr. */
    .header .col-8.right {
        width: 100% !important;
        max-width: none !important;
        min-height: 78px !important;
        height: auto !important;
        margin: 0 !important;
        padding: 7px 12px 8px !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "date clock"
            "date weather";
        align-items: center;
        column-gap: 10px;
        row-gap: 1px;
    }

    .header .col-8.right .datesection {
        grid-area: date;
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr);
        align-content: center;
        column-gap: 6px;
        row-gap: 1px;
        min-width: 0;
        margin: 0;
        padding: 0 10px 0 0 !important;
        border-right: 1px solid rgba(255,255,255,.42);
        line-height: 1.05;
    }

    .header .col-8.right .datesection span {
        display: block !important;
        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        line-height: 1.12 !important;
        white-space: nowrap !important;
    }

    .header .col-8.right .datesection .day {
        grid-column: 1;
        font-size: clamp(14px, 4.1vw, 18px) !important;
    }

    .header .col-8.right .datesection .date {
        grid-column: 2;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: clamp(14px, 4.1vw, 18px) !important;
    }

    .header .col-8.right .datesection .datehijri {
        grid-column: 1 / -1;
        margin-top: 2px !important;
        font-size: clamp(11px, 3.4vw, 15px) !important;
        text-align: center;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .ticker-caption {
        grid-area: clock;
        min-width: 0 !important;
        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: right;
        align-self: end;
    }

    .ticker-caption p {
        margin: 0 !important;
        padding: 0 !important;
        font-size: clamp(29px, 8.6vw, 42px) !important;
        line-height: .95 !important;
        letter-spacing: -1px;
        white-space: nowrap;
    }

    .weather-info,
    .header .col-8.right .weather-info {
        grid-area: weather;
        width: auto !important;
        min-width: 0;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        justify-content: flex-end !important;
        align-self: start;
        line-height: 1;
    }

    .weather-info img {
        width: 22px !important;
        height: 22px !important;
    }

    .header .col-8.right .weather-info span {
        margin: 0 !important;
        padding: 0 0 0 5px !important;
        font-size: clamp(15px, 4.4vw, 19px) !important;
        line-height: 1 !important;
    }

    /* Countdown-boksen skal aldrig bryde “Asr om 04:17:07” over to linjer. */
    .main-content-row {
        padding: 8px 10px !important;
    }

    .eventssection > .row,
    .eventssection > .row.info {
        margin-bottom: 6px !important;
    }

    .toast-info.prayer .row {
        min-height: 56px !important;
        flex-wrap: nowrap !important;
    }

    .toast-info.prayer .row .col-2 {
        flex: 0 0 54px !important;
        max-width: 54px !important;
    }

    .toast-info.prayer .col-10 {
        display: flex !important;
        flex-flow: row nowrap !important;
        align-items: center !important;
        justify-content: flex-start;
        gap: 5px !important;
        min-width: 0 !important;
        padding: 8px 10px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
    }

    .toast-info.prayer .col-10 > p,
    .toast-info.prayer .col-10 > p:first-child,
    .toast-info.prayer .col-10 > p.countdown {
        display: inline-flex !important;
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        line-height: 1 !important;
        white-space: nowrap !important;
    }

    .toast-info.prayer .prayername,
    .toast-info.prayer .countdown,
    .toast-info.prayer.jummah-countdown .prayername,
    .toast-info.prayer.jummah-countdown .countdown,
    .toast-info.prayer .col-10 > p {
        font-size: clamp(18px, 5.4vw, 25px) !important;
    }

    .toast-info.prayer .countdown {
        font-weight: 700;
    }
}

@media screen and (max-width: 390px) {
	
    .audio-control-button.audio-control-collapsed {
		margin-top: 68px !important;
    }

	
    .header .col-8.right {
        min-height: 70px !important;
        padding-left: 9px !important;
        padding-right: 9px !important;
        column-gap: 7px;
    }

    .header .col-8.right .datesection {
        column-gap: 4px;
        padding-right: 7px !important;
    }

    .ticker-caption p {
        font-size: clamp(27px, 8.2vw, 34px) !important;
    }

    .toast-info.prayer .prayername,
    .toast-info.prayer .countdown,
    .toast-info.prayer.jummah-countdown .prayername,
    .toast-info.prayer.jummah-countdown .countdown,
    .toast-info.prayer .col-10 > p {
        font-size: clamp(17px, 5vw, 21px) !important;
    }
}

/* =========================================================
   v18 – mobil: korrekt mellemrum, kompakt header og mindre luft
   ========================================================= */
@media screen and (max-width: 768px) {
    /* Statusheader: vejr under ugedagen, ur til højre i begge rækker. */
    .header .col-8.right {
        grid-template-columns: minmax(0, 1fr) auto !important;
        grid-template-areas:
            "date clock"
            "weather clock" !important;
        min-height: 72px !important;
        padding: 6px 12px 7px !important;
        column-gap: 9px !important;
        row-gap: 2px !important;
    }

    .header .col-8.right .datesection {
        grid-area: date;
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-rows: auto auto;
        align-items: center;
        column-gap: 7px;
        row-gap: 0;
        padding-right: 9px !important;
        min-width: 0;
    }

    .header .col-8.right .datesection .day {
        grid-column: 1;
        grid-row: 1;
        text-align: left;
    }

    .header .col-8.right .datesection .date {
        grid-column: 2;
        grid-row: 1;
        text-align: right;
    }

    .header .col-8.right .datesection .datehijri {
        grid-column: 2;
        grid-row: 2;
        width: 100% !important;
        margin-top: 1px !important;
        font-size: clamp(11px, 3.4vw, 15px) !important;
        text-align: right !important;
        direction: rtl;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .weather-info,
    .header .col-8.right .weather-info {
        grid-area: weather;
        justify-content: flex-start !important;
        align-self: start;
        width: auto !important;
        margin: -1px 0 0 !important;
        padding: 0 !important;
    }

    .ticker-caption {
        grid-area: clock;
        align-self: center !important;
    }

    /* <span>Asr</span> og tekstnoden "om" er to flex-elementer. */
    .toast-info.prayer .col-10 > p:first-child {
        column-gap: .28em !important;
    }

    /* Fjern unødvendig plads mellem countdown og bedetidslisten. */
    .main-content-row {
        min-height: 0 !important;
        height: auto !important;
        padding: 6px 10px 4px !important;
        margin: 0 !important;
    }

    .eventssection,
    .col-md-6.eventssection {
        min-height: 0 !important;
        height: auto !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .eventssection > .row,
    .eventssection > .row.info {
        margin-bottom: 0 !important;
    }

    .eventssection > .row.justify-content-end.event:empty {
        display: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .row.align-items-center.prayertimesrow {
        margin-top: 0 !important;
    }
}

@media screen and (max-width: 390px) {
    .header .col-8.right {
        min-height: 68px !important;
        padding: 5px 9px 6px !important;
        column-gap: 6px !important;
    }

    .header .col-8.right .datesection {
        column-gap: 4px;
        padding-right: 6px !important;
    }
}


/* =========================================================
   v19 – mobilvejr til venstre og diskret lukning af athan-popup
   ========================================================= */
.athan-popup-close {
    display: none;
    position: fixed;
    top: 14px;
    right: 14px;
    z-index: 1003;
    width: 38px;
    height: 38px;
    padding: 0;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 50%;
    background: rgba(0, 0, 0, .16);
    color: rgba(255, 255, 255, .62);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    opacity: .62;
    transition: opacity .2s ease, background-color .2s ease;
}

.athan-popup-close:hover,
.athan-popup-close:focus-visible {
    opacity: 1;
    background: rgba(0, 0, 0, .34);
    outline: none;
}

@media screen and (max-width: 768px) {
    /* Dagen øverst til venstre, vejret direkte under den, dato/hijri i midten og ur til højre. */
    .header .col-8.right {
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr) auto !important;
        grid-template-rows: auto auto !important;
        grid-template-areas:
            "day date clock"
            "weather hijri clock" !important;
        align-items: center !important;
        column-gap: 8px !important;
        row-gap: 1px !important;
    }

    /* display:contents lader de tre datofelter deltage direkte i headerens grid. */
    .header .col-8.right .datesection {
        display: contents !important;
        border: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .header .col-8.right .datesection .day {
        grid-area: day !important;
        align-self: center !important;
        justify-self: start !important;
        text-align: left !important;
    }

    .header .col-8.right .datesection .date {
        grid-area: date !important;
        align-self: center !important;
        justify-self: end !important;
        width: 100% !important;
        text-align: right !important;
    }

    .header .col-8.right .datesection .datehijri {
        grid-area: hijri !important;
        align-self: start !important;
        justify-self: end !important;
        width: 100% !important;
        margin: 0 !important;
        text-align: right !important;
        direction: rtl;
    }

    .weather-info,
    .header .col-8.right .weather-info {
        grid-area: weather !important;
        align-self: center !important;
        justify-self: start !important;
        justify-content: flex-start !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .ticker-caption {
        grid-area: clock !important;
        align-self: center !important;
        justify-self: end !important;
        border-left: 1px solid rgba(255, 255, 255, .42);
        padding-left: 9px !important;
    }

    .athan-popup-close {
        display: flex;
        top: max(10px, env(safe-area-inset-top));
        right: max(10px, env(safe-area-inset-right));
    }
}

@media screen and (max-width: 390px) {
    .header .col-8.right {
        grid-template-columns: auto minmax(0, 1fr) auto !important;
        column-gap: 5px !important;
    }

    .ticker-caption {
        padding-left: 6px !important;
    }

    .athan-popup-close {
        width: 34px;
        height: 34px;
        font-size: 16px;
    }
}


/* =========================================================
   v20 – smal mobilheader, fuldt synligt ur og lukning af notice
   ========================================================= */
.notice-popup-close {
    display: none;
    position: fixed;
    top: 14px;
    right: 14px;
    z-index: 1005;
    width: 38px;
    height: 38px;
    padding: 0;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(0, 0, 0, .12);
    border-radius: 50%;
    background: rgba(255, 255, 255, .72);
    color: rgba(0, 0, 0, .48);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .08);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    opacity: .72;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transition: opacity .2s ease, background-color .2s ease;
}

.notice-popup-close:hover,
.notice-popup-close:focus-visible {
    opacity: 1;
    background: rgba(255, 255, 255, .94);
    outline: none;
}

@media screen and (max-width: 768px) {
    /* Tre stabile kolonner: dag/vejr, dato/hijri og ur. */
    .header .col-8.right {
        display: grid !important;
        grid-template-columns: minmax(54px, .72fr) minmax(82px, 1fr) minmax(102px, 1.28fr) !important;
        grid-template-rows: auto auto !important;
        grid-template-areas:
            "day date clock"
            "weather hijri clock" !important;
        min-height: 64px !important;
        height: auto !important;
        padding: 5px 8px 6px !important;
        column-gap: 6px !important;
        row-gap: 1px !important;
        align-items: center !important;
        overflow: hidden !important;
    }

    .header .col-8.right .datesection {
        display: contents !important;
    }

    .header .col-8.right .datesection .day,
    .header .col-8.right .datesection .date,
    .header .col-8.right .datesection .datehijri {
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        line-height: 1.08 !important;
    }

    .header .col-8.right .datesection .day {
        grid-area: day !important;
        justify-self: start !important;
        font-size: clamp(11px, 3.8vw, 16px) !important;
        text-align: left !important;
    }

    .header .col-8.right .datesection .date {
        grid-area: date !important;
        justify-self: end !important;
        width: 100% !important;
        font-size: clamp(10px, 3.5vw, 15px) !important;
        text-align: right !important;
    }

    .header .col-8.right .datesection .datehijri {
        grid-area: hijri !important;
        justify-self: end !important;
        width: 100% !important;
        font-size: clamp(8px, 2.9vw, 12px) !important;
        text-align: right !important;
        direction: rtl !important;
    }

    .weather-info,
    .header .col-8.right .weather-info {
        grid-area: weather !important;
        justify-self: start !important;
        justify-content: flex-start !important;
        align-self: center !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        white-space: nowrap !important;
    }

    .weather-info img {
        flex: 0 0 auto;
        width: 14px !important;
        height: 14px !important;
    }

    .header .col-8.right .weather-info span {
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 0 0 4px !important;
        font-size: clamp(10px, 3.4vw, 15px) !important;
        line-height: 1 !important;
    }

    .ticker-caption {
        grid-area: clock !important;
        justify-self: stretch !important;
        align-self: center !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 0 0 6px !important;
        overflow: visible !important;
        border-left: 1px solid rgba(255, 255, 255, .42);
        text-align: right !important;
    }

    .ticker-caption p {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        font-size: clamp(23px, 8.4vw, 40px) !important;
        line-height: .94 !important;
        letter-spacing: -1.25px !important;
        white-space: nowrap !important;
        text-align: right !important;
    }

    .notice-popup-close {
        display: flex;
        top: max(10px, env(safe-area-inset-top));
        right: max(10px, env(safe-area-inset-right));
    }
}

@media screen and (max-width: 340px) {
    .header .col-8.right {
        grid-template-columns: minmax(48px, .68fr) minmax(72px, .92fr) minmax(96px, 1.3fr) !important;
        min-height: 58px !important;
        padding: 4px 6px 5px !important;
        column-gap: 4px !important;
    }

    .ticker-caption {
        padding-left: 4px !important;
    }

    .ticker-caption p {
        font-size: clamp(21px, 8.1vw, 30px) !important;
        letter-spacing: -1.4px !important;
    }

    .notice-popup-close,
    .athan-popup-close {
        width: 32px;
        height: 32px;
        font-size: 15px;
    }
}

/* =========================================================
   v21 – sidste mobilfinjusteringer
   ========================================================= */
@media screen and (max-width: 768px) {
    .notice-popup-close {
        display: flex;
        top: max(18px, env(safe-area-inset-top));
        right: max(14px, env(safe-area-inset-right));
    }

    .header .col-8.right .datesection .datehijri {
        grid-area: hijri !important;
        justify-self: end !important;
        width: 100% !important;
        font-size: clamp(8px, 3.9vw, 12px) !important;
        text-align: right !important;
        direction: rtl !important;
    }

    .weather-info,
    .header .col-8.right .weather-info {
        margin-top: -15px !important;
    }
}

@media screen and (max-width: 390px) {
    .toast-info.prayer .prayername,
    .toast-info.prayer .countdown,
    .toast-info.prayer.jummah-countdown .prayername,
    .toast-info.prayer.jummah-countdown .countdown,
    .toast-info.prayer .col-10 > p {
        font-size: clamp(18px, 13vw, 32px) !important;
        line-height: 45px;
    }
}

/* ===== v26: lydikon følger toastens placering ===== */
.audio-control-button.audio-control-active {
    margin-top: 26px;
}

/* =========================================================
   v24 – større desktop-toasts igen
   ========================================================= */
@media screen and (min-width: 1280px) {
    .eventssection .toast-info,
    .eventssection .toast-info.prayer,
    .eventssection .toast-info.friday-imam,
    .eventssection .toast-info.event {
        zoom: 168% !important;
        width: 320px !important;
        min-width: 320px !important;
        max-width: 320px !important;
    }
	.main-content-row {
		height: calc(100vh - 295px);
		min-height: 0;
	}
}

/* Bevar en stor, men sikker størrelse på smallere desktop-/landskabsskærme. */
@media screen and (min-width: 1024px) and (max-width: 1279px) {
    .eventssection .toast-info,
    .eventssection .toast-info.prayer,
    .eventssection .toast-info.friday-imam,
    .eventssection .toast-info.event {
        zoom: 155% !important;
        width: 320px !important;
        min-width: 320px !important;
        max-width: 320px !important;
    }
}

@media screen and (min-width: 769px) and (max-width: 1023px) {
    .eventssection .toast-info,
    .eventssection .toast-info.prayer,
    .eventssection .toast-info.friday-imam,
    .eventssection .toast-info.event {
        zoom: 138% !important;
        width: 320px !important;
        min-width: 320px !important;
        max-width: 320px !important;
    }
}

/* =========================================================
   v31 – ens venstreforskydning og kun topmargin på info-rækker
   ========================================================= */
.eventssection > .row.info,
.eventssection > .friday-imam-row,
.eventssection > .row.justify-content-end.event {
    margin-left: 6px;
}

.row.info.justify-content-end {
    margin-top: 14px;
}

/* =========================================================
   v27 – badges fast nederst til højre i hovedområdet
   ========================================================= */
@media screen and (min-width: 769px) {
    .eventssection,
    .col-md-6.eventssection {
        position: relative;
    }

    .eventssection > .badge-row,
    .col-md-6.eventssection > .badge-row {
        position: absolute !important;
        right: 10px !important;
        bottom: 10px !important;
        left: auto !important;
        top: auto !important;
        width: auto !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        justify-content: flex-end !important;
        align-items: flex-end !important;
        z-index: 3;
    }

    .badge-row .rq-info.left.medlem {
        width: auto !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        justify-content: flex-end !important;
        align-items: center !important;
    }
}

/* v28: skub badge-rækken lidt væk fra højre kant */
.row.info.justify-content-end.badge-row {
    margin-right: 7px !important;
}

/* =========================================================
   v29 – logo i fuld bredde og en smule større desktop-toasts
   ========================================================= */
.header .logo img {
    max-width: 100% !important;
}

@media screen and (min-width: 1280px) {
    .eventssection .toast-info,
    .eventssection .toast-info.prayer,
    .eventssection .toast-info.friday-imam,
    .eventssection .toast-info.event {
        zoom: 175% !important;
        width: 325px !important;
        min-width: 325px !important;
        max-width: 325px !important;
    }
}

@media screen and (min-width: 1024px) and (max-width: 1279px) {
    .eventssection .toast-info,
    .eventssection .toast-info.prayer,
    .eventssection .toast-info.friday-imam,
    .eventssection .toast-info.event {
        zoom: 160% !important;
        width: 325px !important;
        min-width: 325px !important;
        max-width: 325px !important;
    }
}

@media screen and (min-width: 769px) and (max-width: 1023px) {
    .eventssection .toast-info,
    .eventssection .toast-info.prayer,
    .eventssection .toast-info.friday-imam,
    .eventssection .toast-info.event {
        zoom: 142% !important;
        width: 325px !important;
        min-width: 325px !important;
        max-width: 325px !important;
    }
}

/* =========================================================
   v30 – lidt større medlems- og donationsbadges på desktop
   ========================================================= */
@media screen and (min-width: 769px) {
    .badge-row .rq-info.left.medlem img,
    .rq-info.left.medlem #memberBadge,
    .rq-info.left.medlem #donationBadge {
        height: clamp(90px, 11vh, 118px) !important;
        max-height: 118px !important;
        width: auto !important;
        max-width: none !important;
    }
}

/* Bevar en pæn størrelse på lave desktopskærme uden overlap. */
@media screen and (min-width: 769px) and (max-height: 760px) {
    .badge-row .rq-info.left.medlem img,
    .rq-info.left.medlem #memberBadge,
    .rq-info.left.medlem #donationBadge {
        height: 94px !important;
        max-height: 94px !important;
    }
}

/* =========================================================
   v35 – Denver 1024 × 432: header, vejr og highlight
   ========================================================= */

@media screen
and (min-width: 960px)
and (max-width: 1100px)
and (max-height: 650px) {

    /*
     * Kompakt-layoutets hvide farver må ikke overskrive highlight.
     */
    ul.prayertimes > li.highlight .prayer-wrapper,
    ul.prayertimes > li.highlight .prayer-wrapper .prayername,
    ul.prayertimes > li.highlight .prayer-wrapper .prayertime,
    ul.prayertimes > li.highlight .prayer-wrapper .iqamatime {
        color: #fff200 !important;
    }
}

/* =========================================================
   Android 8-kompatibel ticker
   ========================================================= */

@keyframes safeTickerMoveLeft {
    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        transform: translate3d(-50%, 0, 0);
    }
}

@keyframes safeTickerMoveRight {
    from {
        transform: translate3d(-50%, 0, 0);
    }

    to {
        transform: translate3d(0, 0, 0);
    }
}

.safe-ticker-track {
    display: inline-flex !important;
    width: auto !important;
    max-width: none !important;
    animation-fill-mode: forwards;
    backface-visibility: hidden;
    will-change: transform;
}

/*
 * Sørg altid for, at den aktive bøn bliver gul.
 * Denne regel ligger uden for tablet-media-queryen.
 */
ul.row.prayertimes > li.highlight .prayer-wrapper,
ul.row.prayertimes > li.highlight .prayername,
ul.row.prayertimes > li.highlight .prayertime,
ul.row.prayertimes > li.highlight .iqamatime {
    color: #fff200 !important;
}

@media screen
and (min-width: 960px)
and (max-width: 1100px)
and (max-height: 650px) {

    .news-ticker {
        display: block;
        visibility: visible;
        height: 54px !important;
    }

    .safe-news-ticker,
    .safe-ticker-track,
    .safe-ticker-group {
        height: 54px !important;
    }

    .safe-ticker-item,
    .safe-ticker-divider {
        font-size: 28px !important;
        line-height: 54px !important;
    }

    .row.align-items-center.prayertimesrow {
        bottom: 54px !important;
    }

    .ticker-caption p {
        font-size: 36px !important;
        line-height: 1 !important;
        letter-spacing: -1px !important;
    }

    .header .col-8.right .weather-info
    .weather-temperature {
        font-size: 20px !important;
    }

    .header .col-8.right .weather-info
    .weather-symbol {
        font-size: 18px !important;
    }
}
/* =========================================================
   v36 – Denver: samme headerudtryk som desktop + sikker highlight
   ========================================================= */
   
    

@media screen
and (min-width: 769px)
and (max-width: 1100px)
and (max-height: 650px) {
    /*
     * Højre header følger desktop-opdelingen: dato/hijri, vejr og stort ur.
     * Bredden passer til 1024 px-skærmens Bootstrap col-8-område.
     */
    .header .col-8.right {
        grid-template-columns: minmax(0, 1fr) 115px 240px !important;
        column-gap: 8px !important;
        padding: 5px 10px 5px 8px !important;
    }

    .header .col-8.right .datesection .day,
    .header .col-8.right .datesection .date {
        font-size: 16px !important;
        line-height: 1.05 !important;
    }

    .header .col-8.right .datesection .datehijri {
        margin-top: 4px !important;
        font-size: 14px !important;
        line-height: 1 !important;
    }

    .weather-info,
    .header .col-8.right .weather-info {
        gap: 7px !important;
        overflow: visible !important;
    }

    .header .col-8.right .weather-info .weather-temperature {
        font-size: 25px !important;
        line-height: 1 !important;
        letter-spacing: -1px !important;
		padding: 0;
    }

    .header .col-8.right .weather-info .weather-symbol {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
        font-size: 27px !important;
        line-height: 1 !important;
        overflow: visible !important;
		padding: 5px;
    }

    /* CSS-tegnet måne virker også, når Android-fonten mangler tegnet ☾. */
    .header .col-8.right .weather-info .weather-symbol-moon {
        position: relative !important;
        width: 24px !important;
        min-width: 24px !important;
        height: 24px !important;
        font-size: 0 !important;
    }

    .header .col-8.right .weather-info .weather-symbol-moon::before {
        content: '';
        display: block;
        width: 18px;
        height: 18px;
        border: 4px solid #fff;
        border-top-color: transparent;
        border-left-color: transparent;
        border-radius: 50%;
        transform: rotate(-42deg);
        box-sizing: border-box;
    }

    .ticker-caption p {
        font-size: 65px !important;
        line-height: 1 !important;
        letter-spacing: -1.6px !important;
    }

    /* Tabletregler må aldrig gøre den aktive bøn hvid igen. */
    ul.row.prayertimes > li.highlight .prayer-wrapper,
    ul.row.prayertimes > li.highlight .prayername,
    ul.row.prayertimes > li.highlight .prayertime,
    ul.row.prayertimes > li.highlight .iqamatime {
        color: #fff200 !important;
    }
}
   
@media screen 
and (min-width: 960px)
and (max-width: 1100px)
and (max-height: 650px) {
    /*
     * Højre header følger desktop-opdelingen: dato/hijri, vejr og stort ur.
     * Bredden passer til 1024 px-skærmens Bootstrap col-8-område.
     */
    .header .col-8.right {
        grid-template-columns: minmax(0, 1fr) 115px 240px !important;
        column-gap: 8px !important;
        padding: 5px 10px 5px 8px !important;
    }

    .header .col-8.right .datesection .day,
    .header .col-8.right .datesection .date {
        font-size: 23px !important;
        line-height: 1.05 !important;
    }

    .header .col-8.right .datesection .datehijri {
        margin-top: 4px !important;
        font-size: 14px !important;
        line-height: 1 !important;
    }

    .weather-info,
    .header .col-8.right .weather-info {
        gap: 7px !important;
        overflow: visible !important;
    }

    .header .col-8.right .weather-info .weather-temperature {
        font-size: 28px !important;
        line-height: 1 !important;
        letter-spacing: -1px !important;
    }

    .header .col-8.right .weather-info .weather-symbol {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
        font-size: 27px !important;
        line-height: 1 !important;
        overflow: visible !important;
    }

    /* CSS-tegnet måne virker også, når Android-fonten mangler tegnet ☾. */
    .header .col-8.right .weather-info .weather-symbol-moon {
        position: relative !important;
        width: 24px !important;
        min-width: 24px !important;
        height: 24px !important;
        font-size: 0 !important;
    }

    .header .col-8.right .weather-info .weather-symbol-moon::before {
        content: '';
        display: block;
        width: 18px;
        height: 18px;
        border: 4px solid #fff;
        border-top-color: transparent;
        border-left-color: transparent;
        border-radius: 50%;
        transform: rotate(-42deg);
        box-sizing: border-box;
    }

    .ticker-caption p {
        font-size: 65px !important;
        line-height: 1 !important;
        letter-spacing: -1.6px !important;
    }

    /* Tabletregler må aldrig gøre den aktive bøn hvid igen. */
    ul.row.prayertimes > li.highlight .prayer-wrapper,
    ul.row.prayertimes > li.highlight .prayername,
    ul.row.prayertimes > li.highlight .prayertime,
    ul.row.prayertimes > li.highlight .iqamatime {
        color: #fff200 !important;
    }
}

/* =========================================================
   v37 – Denver: notice-popup skal passe og uret skal have højremargin
   ========================================================= */
@media screen
and (min-width: 960px)
and (max-width: 1100px)
and (max-height: 650px) {
    /* Giv uret lidt luft til højre, så det ikke rammer skærmkanten. */
    .ticker-caption {
        padding-right: 10px !important;
        box-sizing: border-box !important;
    }

    .ticker-caption p {
        padding-right: 0 !important;
    }

    /* Efter-bøn-popupen skal kunne være på Denver 1024 × 432 uden at skære teksten af. */
    .notice-popup {
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding: 4px 4px 10px !important;
        -webkit-overflow-scrolling: touch;
    }

    .notice-content {
        padding: 0 !important;
    }

    .notice-popup .containerD {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 8px 8px !important;
        box-sizing: border-box !important;
    }

    .notice-popup .section {
        margin-bottom: 5px !important;
        padding-bottom: 7px !important;
    }

    .notice-popup .section h2 {
        padding-bottom: 4px !important;
    }

    .notice-popup .section .badge {
        font-size: 12px !important;
        padding: 3px 8px !important;
    }

    .notice-popup .section .set,
    .notice-popup .section:first-child .set,
    .notice-popup .section:nth-child(2) .set,
    .notice-popup .section:nth-child(3) .set,
    .notice-popup .section:nth-child(5) .set {
        width: 100% !important;
        max-width: 100% !important;
    }

    .notice-popup .section .arabic {
        font-size: 33px !important;
        line-height: 1.25 !important;
        padding-top: 4px !important;
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
    }

    .notice-popup .translation p,
    .notice-popup .translation p.wide,
    .notice-popup .translation p.wider {
        width: 100% !important;
        max-width: 100% !important;
        font-size: 19px !important;
        line-height: 1.28 !important;
        padding: 4px 8px !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
        box-sizing: border-box !important;
    }

    .notice-popup .section:nth-child(4) {
        display: flex !important;
        justify-content: center !important;
        gap: 6px !important;
        padding-bottom: 5px !important;
    }

    .notice-popup .section .groupp {
        width: 33.333% !important;
        box-sizing: border-box !important;
    }

    .notice-popup .section:nth-child(4) .arabic {
        font-size: 30px !important;
        line-height: 1.2 !important;
    }

    .notice-popup .section:nth-child(4) .translation p {
        font-size: 16px !important;
        line-height: 1.2 !important;
        padding: 4px 6px !important;
    }

    .notice-popup .references {
        margin-top: 8px !important;
        padding-bottom: 6px !important;
        font-size: 12px !important;
    }
}

/* =========================================================
   v41 – kompakte landskabsskærme: ingen badge-overlap + 854 × 534
   ========================================================= */

/*
 * På lave landskabsskærme optager medlems-/donationsbadges for meget af
 * højre kolonne og kan dække countdown, imam og emne. Desktop berøres ikke.
 */
@media screen
and (min-width: 769px)
and (max-width: 1100px)
and (max-height: 650px) {
    .eventssection > .badge-row,
    .col-md-6.eventssection > .badge-row,
    .row.info.justify-content-end.badge-row {
        display: none !important;
    }
}

/* Denver 1024 × 432: gør toast-kolonnen mindre, når imamkortet vises. */
@media screen
and (min-width: 960px)
and (max-width: 1100px)
and (max-height: 650px) {
    .eventssection,
    .col-md-6.eventssection {
        padding-top: 8px !important;
        padding-right: 12px !important;
        padding-bottom: 6px !important;
    }

    .eventssection .toast-info,
    .eventssection .toast-info.prayer,
    .eventssection .toast-info.friday-imam,
    .eventssection .toast-info.event {
        zoom: 125% !important;
        width: 315px !important;
        min-width: 315px !important;
        max-width: 315px !important;
    }

    .eventssection > .row.info,
    .eventssection > .friday-imam-row,
    .eventssection > .row.justify-content-end.event {
        margin-left: 0 !important;
    }

    .row.info.justify-content-end {
        margin-top: 7px !important;
    }

    .friday-imam-row,
    .row.justify-content-end.event {
        margin-top: 4px !important;
    }

    .toast-info.friday-imam .col-10 {
        padding: 6px 9px 6px 11px !important;
    }

    .toast-info.friday-imam .name {
        font-size: 16px !important;
    }

    .toast-info.friday-imam .imam-name {
        margin-top: 2px !important;
        margin-bottom: 4px !important;
        font-size: 14px !important;
    }

    .toast-info.friday-imam .topic-label {
        font-size: 11px !important;
    }

    .toast-info.friday-imam .topic-text {
        font-size: 13px !important;
        line-height: 1.15 !important;
    }
}

/*
 * 854 × 534 og lignende landskabsvisninger.
 * Bevar to kolonner, men reducer header, prayer-bar, ticker og toaststørrelser.
 */
@media screen
and (min-width: 769px)
and (max-width: 959px)
and (max-height: 650px) {

    .main-content-row {
        height: calc(100vh - 238px) !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

    .clocksection,
    .eventssection,
    .col-md-6.eventssection {
        height: 100% !important;
        min-height: 0 !important;
    }

    .col-md-10.hadith {
        top: 10px !important;
        bottom: 10px !important;
        left: 10px !important;
        width: calc(100% - 20px) !important;
        max-width: none !important;
        height: auto !important;
        min-height: 0 !important;
        padding: 16px 18px !important;
        overflow: hidden !important;
    }

    .hadith .quote-content {
        max-width: 94% !important;
        margin: 0 auto !important;
        font-size: 23px !important;
        line-height: 1.42 !important;
        text-align: center !important;
    }

    .hadith small {
        margin: 6px 0 !important;
        font-size: 12px !important;
        line-height: 1.25 !important;
        text-align: center !important;
    }

    .eventssection,
    .col-md-6.eventssection {
        padding: 7px 9px 6px 0 !important;
        overflow: hidden !important;
    }

    .eventssection .toast-info,
    .eventssection .toast-info.prayer,
    .eventssection .toast-info.friday-imam,
    .eventssection .toast-info.event {
        zoom: 118% !important;
        width: 300px !important;
        min-width: 300px !important;
        max-width: 300px !important;
    }

    .eventssection > .row.info,
    .eventssection > .friday-imam-row,
    .eventssection > .row.justify-content-end.event {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .row.info.justify-content-end {
        margin-top: 4px !important;
    }

    .friday-imam-row,
    .row.justify-content-end.event {
        margin-top: 4px !important;
    }

    .toast-info.prayer .prayername,
    .toast-info.prayer .countdown,
    .toast-info.prayer .col-10 > p {
        font-size: 20px !important;
    }

    .toast-info.friday-imam .col-10 {
        padding: 5px 8px 5px 10px !important;
    }

    .toast-info.friday-imam .name {
        font-size: 15px !important;
    }

    .toast-info.friday-imam .imam-name {
        margin-top: 2px !important;
        margin-bottom: 3px !important;
        font-size: 13px !important;
    }

    .toast-info.friday-imam .topic-label {
        margin-bottom: 1px !important;
        font-size: 10px !important;
    }

    .toast-info.friday-imam .topic-text {
        font-size: 12px !important;
        line-height: 1.12 !important;
    }

    .row.align-items-center.prayertimesrow {
        left: 0 !important;
        bottom: 50px !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 110px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    ul.row.prayertimes,
    ul.prayertimes {
        height: 110px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    ul.prayertimes li,
    ul.prayertimes.has-jummah li {
        padding: 0 2px !important;
        margin: 0 !important;
    }

    ul.prayertimes .prayer-wrapper,
    ul.prayertimes.has-jummah .prayer-wrapper {
        line-height: 22px !important;
    }

    ul.prayertimes .prayer-wrapper .prayername,
    ul.prayertimes.has-jummah .prayer-wrapper .prayername {
        font-size: 16px !important;
    }

    ul.prayertimes .prayer-wrapper .prayertime,
    ul.prayertimes.has-jummah .prayer-wrapper .prayertime {
        font-size: 34px !important;
        line-height: 1.05 !important;
    }

    ul.prayertimes .prayer-wrapper .iqamatime,
    ul.prayertimes.has-jummah .prayer-wrapper .iqamatime {
        font-size: 12px !important;
        line-height: 1.1 !important;
    }

    .news-ticker {
        display: block !important;
        visibility: visible !important;
        height: 50px !important;
    }

    .safe-news-ticker,
    .safe-ticker-track,
    .safe-ticker-group {
        height: 50px !important;
    }

    .safe-ticker-item,
    .safe-ticker-divider {
        font-size: 24px !important;
        line-height: 50px !important;
    }

    ul.row.prayertimes > li.highlight .prayer-wrapper,
    ul.row.prayertimes > li.highlight .prayername,
    ul.row.prayertimes > li.highlight .prayertime,
    ul.row.prayertimes > li.highlight .iqamatime {
        color: #fff200 !important;
    }
}

/* =========================================================
   v42 – små landskabsskærme: desktop-struktur i topbaren
   ========================================================= */
@media screen
and (min-width: 769px)
and (max-width: 959px)
and (max-height: 650px) {}

/* Lidt smallere landskabsskærme får samme struktur med et lidt mindre ur. */
@media screen
and (min-width: 769px)
and (max-width: 820px)
and (max-height: 650px) {
}

/* =========================================================
   v45 – selvtilpassende Tasbih-popup, tydelig header og brede toasts
   ========================================================= */

/* Højre informationskolonne og dens kort bruger hele skærmens højre halvdel. */
@media screen and (min-width: 769px) {
    .main-content-row {
        display: flex !important;
        flex-wrap: nowrap !important;
    }

    .clocksection,
    .col-md-6.clocksection,
    .eventssection,
    .col-md-6.eventssection {
        flex: 0 0 50% !important;
        width: 50% !important;
        max-width: 50% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    .eventssection,
    .col-md-6.eventssection {
        padding-left: 8px !important;
        padding-right: 12px !important;
    }

    .eventssection > .row,
    .eventssection > .row.info,
    .eventssection > .friday-imam-row,
    .eventssection > .row.justify-content-end.event {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        justify-content: stretch !important;
    }

    .eventssection .toast-info,
    .eventssection .toast-info.prayer,
    .eventssection .toast-info.friday-imam,
    .eventssection .toast-info.event,
    .col-md-6.eventssection .toast-info {
        zoom: 1 !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .eventssection .toast-info .row {
        width: 100% !important;
        min-height: 78px;
    }

    .eventssection .toast-info .row .col-2 {
        flex: 0 0 15% !important;
        max-width: 15% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .eventssection .toast-info .row .col-10 {
        flex: 0 0 85% !important;
        max-width: 85% !important;
        min-width: 0 !important;
    }

    .eventssection .toast-info.prayer .col-10 {
        display: flex !important;
        align-items: baseline !important;
        flex-wrap: nowrap !important;
        gap: 7px !important;
        padding: 12px 16px !important;
        overflow: hidden !important;
    }

    .eventssection .toast-info.prayer .col-10 > p,
    .eventssection .toast-info.prayer .prayername,
    .eventssection .toast-info.prayer .countdown,
    .eventssection .toast-info.prayer.jummah-countdown .prayername,
    .eventssection .toast-info.prayer.jummah-countdown .countdown {
        font-size: clamp(24px, 2.4vw, 40px) !important;
        line-height: 1.05 !important;
        letter-spacing: -0.5px !important;
        white-space: nowrap !important;
    }

    .eventssection .toast-info.friday-imam .col-10,
    .eventssection .toast-info.event .col-10 {
        padding: 10px 16px !important;
    }

    .eventssection .toast-info.friday-imam .name {
        font-size: clamp(20px, 1.65vw, 29px) !important;
        line-height: 1.08 !important;
    }

    .eventssection .toast-info.friday-imam .imam-name {
        font-size: clamp(18px, 1.45vw, 25px) !important;
        line-height: 1.12 !important;
        margin: 4px 0 7px !important;
    }

    .eventssection .toast-info.friday-imam .topic-label,
    .eventssection .toast-info.friday-imam .topic-text,
    .eventssection .toast-info.event p.name,
    .eventssection .toast-info.event p.date {
        font-size: clamp(16px, 1.2vw, 21px) !important;
        line-height: 1.2 !important;
    }
}

/* Små landskabsskærme følger desktop-headerens tre klare felter. */
@media screen
and (min-width: 769px)
and (max-width: 1100px)
and (max-height: 700px) {

    .eventssection,
    .col-md-6.eventssection {
        padding-top: 8px !important;
        padding-left: 6px !important;
        padding-right: 10px !important;
        padding-bottom: 7px !important;
    }

    .eventssection .toast-info .row {
        min-height: 72px !important;
    }

    .eventssection .toast-info.prayer .col-10 > p,
    .eventssection .toast-info.prayer .prayername,
    .eventssection .toast-info.prayer .countdown,
    .eventssection .toast-info.prayer.jummah-countdown .prayername,
    .eventssection .toast-info.prayer.jummah-countdown .countdown {
        font-size: clamp(23px, 2.7vw, 31px) !important;
    }

    .eventssection .toast-info.friday-imam .name {
        font-size: clamp(19px, 2.1vw, 24px) !important;
    }

    .eventssection .toast-info.friday-imam .imam-name {
        font-size: clamp(17px, 1.85vw, 21px) !important;
    }

    .eventssection .toast-info.friday-imam .topic-label,
    .eventssection .toast-info.friday-imam .topic-text,
    .eventssection .toast-info.event p.name,
    .eventssection .toast-info.event p.date {
        font-size: clamp(15px, 1.55vw, 18px) !important;
    }

    .notice-popup-close,
    .athan-popup-close {
        display: flex !important;
    }
}

/* Tasbih-indholdet fordeles over hele højden og skaleres kun ned ved behov. */
@media screen
and (min-width: 769px)
and (max-width: 1100px)
and (max-height: 700px) {
    .notice-popup {
        display: flex !important;
        align-items: stretch !important;
        justify-content: center !important;
        width: 100vw !important;
        height: 100vh !important;
        padding: 6px 8px 7px !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        background: #f5f5f3 !important;
    }

    .notice-popup.hidden {
        display: none !important;
    }

    .notice-content {
        display: flex !important;
        align-items: flex-start !important;
        justify-content: center !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    .notice-popup .containerD {
        display: grid !important;
        grid-template-rows: auto auto auto auto auto auto !important;
        align-content: space-between !important;
        row-gap: clamp(2px, .55vh, 5px) !important;
        width: 100% !important;
        max-width: none !important;
        min-height: 100% !important;
        margin: 0 auto !important;
        padding: 0 2px 2px !important;
        box-sizing: border-box !important;
        transform-origin: top center !important;
    }

    .notice-popup .section {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    .notice-popup .section .set,
    .notice-popup .section:first-child .set,
    .notice-popup .section:nth-child(2) .set,
    .notice-popup .section:nth-child(3) .set,
    .notice-popup .section:nth-child(4) .set,
    .notice-popup .section:nth-child(5) .set {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
    }

    .notice-popup .section h2 {
        min-height: 18px !important;
        margin: 0 !important;
        padding: 0 0 2px !important;
        line-height: 1 !important;
    }

    .notice-popup .section .badge {
        position: static !important;
        display: inline-block !important;
        margin: 0 !important;
        padding: 3px 8px !important;
        font-size: clamp(11px, 1.45vh, 14px) !important;
        line-height: 1 !important;
    }

    .notice-popup .section .arabic {
        margin: 0 !important;
        padding: 0 !important;
        color: #111 !important;
        font-size: clamp(27px, 5.15vh, 36px) !important;
        line-height: 1.18 !important;
        text-align: center !important;
        white-space: normal !important;
        overflow-wrap: normal !important;
        word-break: normal !important;
    }

    .notice-popup .translation {
        margin: 0 !important;
    }

    .notice-popup .translation p,
    .notice-popup .translation p.wide,
    .notice-popup .translation p.wider {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        padding: 3px 7px !important;
        box-sizing: border-box !important;
        font-size: clamp(17px, 3.55vh, 23px) !important;
        line-height: 1.16 !important;
        white-space: normal !important;
        overflow-wrap: normal !important;
        word-break: normal !important;
    }

    .notice-popup .section:nth-child(4) {
        display: flex !important;
        align-items: flex-start !important;
        justify-content: center !important;
        gap: 5px !important;
    }

    .notice-popup .section .groupp {
        display: block !important;
        flex: 1 1 0 !important;
        width: 33.333% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    .notice-popup .section:nth-child(4) .arabic {
        font-size: clamp(25px, 4.8vh, 34px) !important;
        line-height: 1.12 !important;
        white-space: nowrap !important;
    }

    .notice-popup .section:nth-child(4) .translation p {
        font-size: clamp(15px, 3.1vh, 21px) !important;
        line-height: 1.1 !important;
        white-space: nowrap !important;
    }

    .notice-popup .references {
        margin: 0 !important;
        padding: 1px 0 0 !important;
        font-size: clamp(10px, 1.8vh, 13px) !important;
        line-height: 1 !important;
    }
}

/* Ekstra sikkerhed til 854 × 534 og smallere landskabsskærme. */
@media screen
and (min-width: 769px)
and (max-width: 900px)
and (max-height: 560px) {

    .notice-popup {
        padding: 4px 6px 5px !important;
    }

    .notice-popup .containerD {
        row-gap: 2px !important;
        padding-bottom: 0 !important;
    }

    .notice-popup .section .arabic {
        font-size: 27px !important;
        line-height: 1.12 !important;
    }

    .notice-popup .translation p,
    .notice-popup .translation p.wide,
    .notice-popup .translation p.wider {
        font-size: 17px !important;
        line-height: 1.12 !important;
        padding-top: 2px !important;
        padding-bottom: 2px !important;
    }

    .notice-popup .section:nth-child(4) .arabic {
        font-size: 25px !important;
    }

    .notice-popup .section:nth-child(4) .translation p {
        font-size: 15px !important;
    }
}

/* =========================================================
   v47 – badges til højre på desktop og større fredagstoasts på tablet
   ========================================================= */

/* På store skærme skal badgegruppen altid slutte helt mod højre. */
@media screen and (min-width: 1101px) {
    .eventssection > .badge-row,
    .col-md-6.eventssection > .badge-row,
    .row.info.justify-content-end.badge-row {
        right: 12px !important;
        left: auto !important;
        width: auto !important;
        justify-content: flex-end !important;
    }

    .badge-row .rq-info.left.medlem,
    .rq-info.left.medlem {
        width: auto !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        justify-content: flex-end !important;
    }
}

/* Badges fjernes helt på tablets og øvrige små skærme. */
@media screen and (max-width: 1100px) {
    .eventssection > .badge-row,
    .col-md-6.eventssection > .badge-row,
    .row.info.justify-content-end.badge-row,
    .rq-info.left.medlem {
        display: none !important;
    }
}

/*
 * På lave landskabsskærme bruger countdown og fredagsimam hele højden
 * i højre halvdel. Flex gør samtidig countdown-kortet højt, hvis
 * imamkortet ikke vises den pågældende dag.
 */
@media screen
and (min-width: 769px)
and (max-width: 1100px)
and (max-height: 700px) {
    .eventssection,
    .col-md-6.eventssection {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        height: 100% !important;
        min-height: 0 !important;
        overflow: hidden !important;
        padding: 8px 10px 8px 7px !important;
        box-sizing: border-box !important;
    }

    .eventssection > .row.info:first-child,
    .eventssection > .friday-imam-row {
        flex: 1 1 0 !important;
        width: 100% !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        align-items: stretch !important;
        justify-content: stretch !important;
    }

    .eventssection > .friday-imam-row {
        margin-top: 7px !important;
    }

    .eventssection > .row.justify-content-end.event {
        flex: 0 0 auto !important;
        margin: 7px 0 0 !important;
    }

    .eventssection .toast-info.prayer,
    .eventssection .toast-info.friday-imam {
        display: flex !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 100% !important;
        min-height: 0 !important;
        margin: 0 !important;
        zoom: 1 !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    .eventssection .toast-info.prayer > .row,
    .eventssection .toast-info.friday-imam > .row {
        display: flex !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        margin: 0 !important;
    }

    .eventssection .toast-info.prayer .row .col-2,
    .eventssection .toast-info.friday-imam .row .col-2 {
        flex: 0 0 16% !important;
        max-width: 16% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
    }

    .eventssection .toast-info.prayer .row .col-2 i,
    .eventssection .toast-info.friday-imam .row .col-2 i {
        font-size: 32px !important;
        font-size: clamp(28px, 3.6vw, 40px) !important;
        line-height: 1 !important;
        margin: 0 !important;
    }

    .eventssection .toast-info.prayer .row .col-10,
    .eventssection .toast-info.friday-imam .row .col-10 {
        flex: 0 0 84% !important;
        max-width: 84% !important;
        min-width: 0 !important;
        height: 100% !important;
        box-sizing: border-box !important;
    }

    .eventssection .toast-info.prayer .col-10 {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        padding: 10px 15px !important;
        overflow: hidden !important;
    }

    .eventssection .toast-info.prayer .prayer-countdown-content {
        display: flex !important;
        align-items: baseline !important;
        justify-content: flex-start !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
        width: 100% !important;
        min-width: 0 !important;
        white-space: nowrap !important;
    }

    .eventssection .toast-info.prayer .prayer-countdown-content p,
    .eventssection .toast-info.prayer .prayer-countdown-content .prayername,
    .eventssection .toast-info.prayer .prayer-countdown-content .countdown,
    .eventssection .toast-info.prayer.jummah-countdown .prayername,
    .eventssection .toast-info.prayer.jummah-countdown .countdown {
        margin: 0 !important;
        padding: 0 !important;
        font-size: clamp(30px, 4.7vw, 42px) !important;
        /*font-weight: 700 !important;*/
        line-height: 1.05 !important;
        letter-spacing: -1px !important;
        white-space: nowrap !important;
    }

    .eventssection .toast-info.friday-imam .col-10 {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: center !important;
        padding: 9px 15px !important;
        overflow: hidden !important;
    }

    .eventssection .toast-info.friday-imam .name {
        margin: 0 0 4px !important;
        font-size: clamp(26px, 3vw, 34px) !important;
        line-height: 1.05 !important;
    }

    .eventssection .toast-info.friday-imam .imam-name {
        margin: 0 0 8px !important;
        font-size: clamp(23px, 2.65vw, 30px) !important;
        line-height: 1.08 !important;
    }

    .eventssection .toast-info.friday-imam .topic-label,
    .eventssection .toast-info.friday-imam .topic-text {
        margin: 0 !important;
        font-size: clamp(19px, 2.15vw, 24px) !important;
        line-height: 1.14 !important;
        overflow-wrap: anywhere !important;
    }

    .eventssection .toast-info.friday-imam .topic-label {
        margin-bottom: 3px !important;
    }
}

/* 854 × 534 får lidt strammere tekst, så begge store kort stadig kan være der. */
@media screen
and (min-width: 769px)
and (max-width: 900px)
and (max-height: 560px) {
    .eventssection .toast-info.prayer .prayer-countdown-content p,
    .eventssection .toast-info.prayer .prayer-countdown-content .prayername,
    .eventssection .toast-info.prayer .prayer-countdown-content .countdown,
    .eventssection .toast-info.prayer.jummah-countdown .prayername,
    .eventssection .toast-info.prayer.jummah-countdown .countdown {
        font-size: 30px !important;
        letter-spacing: -1.2px !important;
    }

    .eventssection .toast-info.friday-imam .name {
        font-size: 25px !important;
    }

    .eventssection .toast-info.friday-imam .imam-name {
        font-size: 22px !important;
        margin-bottom: 6px !important;
    }

    .eventssection .toast-info.friday-imam .topic-label,
    .eventssection .toast-info.friday-imam .topic-text {
        font-size: 18px !important;
    }
}

/* =========================================================
   v48 – store fredagstoasts på alle skærme uden kæmpekort når imam mangler
   ========================================================= */
@media screen and (min-width: 769px) {
    .eventssection,
    .col-md-6.eventssection {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        min-height: 0 !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    /* På desktop reserveres pladsen nederst til de synlige badges. */
    .eventssection.imam-card-visible,
    .col-md-6.eventssection.imam-card-visible {
        padding-bottom: 132px !important;
    }

    .eventssection.imam-card-visible > .row.info:first-child,
    .eventssection.imam-card-visible > .friday-imam-row {
        flex: 1 1 0 !important;
        width: 100% !important;
        min-height: 0 !important;
        max-height: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 0 !important;
        align-items: stretch !important;
        justify-content: stretch !important;
    }

    .eventssection.imam-card-visible > .friday-imam-row {
        margin-top: 9px !important;
    }

    .eventssection.imam-card-visible .toast-info.prayer,
    .eventssection.imam-card-visible .toast-info.friday-imam {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 100% !important;
        min-height: 0 !important;
        margin: 0 !important;
        zoom: 1 !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    .eventssection.imam-card-visible .toast-info.prayer > .row,
    .eventssection.imam-card-visible .toast-info.friday-imam > .row {
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        margin: 0 !important;
    }

    /* Uden imam må countdownen være større, men ikke vokse til hele kolonnen. */
    .eventssection.imam-card-hidden,
    .col-md-6.eventssection.imam-card-hidden {
        padding-bottom: 132px !important;
    }

    .eventssection.imam-card-hidden > .row.info:first-child {
        flex: 0 0 auto !important;
        width: 100% !important;
        height: 160px !important;
        height: clamp(125px, 23vh, 210px) !important;
        min-height: 125px !important;
        max-height: 210px !important;
        /*margin: 0 !important;*/
        padding: 0 !important;
        align-items: stretch !important;
        justify-content: stretch !important;
    }

    .eventssection.imam-card-hidden .toast-info.prayer {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 100% !important;
         margin-top: 12px !important;
        zoom: 1 !important;
    }

    .eventssection .toast-info.prayer .row .col-2,
    .eventssection .toast-info.friday-imam .row .col-2 {
        flex: 0 0 16% !important;
        max-width: 16% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
    }

    .eventssection .toast-info.prayer .row .col-10,
    .eventssection .toast-info.friday-imam .row .col-10 {
        flex: 0 0 84% !important;
        max-width: 84% !important;
        min-width: 0 !important;
        height: 100% !important;
        box-sizing: border-box !important;
    }

    .eventssection .toast-info.prayer .col-10 {
        display: flex !important;
        align-items: center !important;
        padding: 14px 18px !important;
        padding: clamp(10px, 1.3vw, 22px) clamp(14px, 1.7vw, 28px) !important;
    }

    .eventssection .toast-info.prayer .prayer-countdown-content {
        display: flex !important;
        align-items: baseline !important;
        flex-wrap: nowrap !important;
        gap: 9px !important;
        gap: clamp(7px, .7vw, 13px) !important;
        width: 100% !important;
        min-width: 0 !important;
        white-space: nowrap !important;
    }

    .eventssection .toast-info.prayer .prayer-countdown-content p,
    .eventssection .toast-info.prayer .prayer-countdown-content .prayername,
    .eventssection .toast-info.prayer .prayer-countdown-content .countdown,
    .eventssection .toast-info.prayer.jummah-countdown .prayername,
    .eventssection .toast-info.prayer.jummah-countdown .countdown {
        margin: 0 !important;
        padding: 0 !important;
        font-size: 38px !important;
        font-size: clamp(32px, 4.15vw, 56px) !important;
        /*font-weight: 700 !important;*/
        line-height: 1.04 !important;
        letter-spacing: -1px !important;
        white-space: nowrap !important;
    }

    .eventssection .toast-info.friday-imam .col-10 {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: center !important;
        padding: 14px 18px !important;
        padding: clamp(10px, 1.3vw, 22px) clamp(14px, 1.7vw, 28px) !important;
        overflow: hidden !important;
    }

    .eventssection .toast-info.friday-imam .name {
        margin: 0 0 5px !important;
        font-size: 22px !important;
        font-size: clamp(28px, 2.45vw, 44px) !important;
        line-height: 1.04 !important;
    }

    .eventssection .toast-info.friday-imam .imam-name {
        margin: 0 0 8px !important;
        margin: 0 0 clamp(6px, .7vw, 12px) !important;
        font-size: 29px !important;
        font-size: clamp(25px, 2.15vw, 38px) !important;
        line-height: 1.08 !important;
    }

    .eventssection .toast-info.friday-imam .topic-label,
    .eventssection .toast-info.friday-imam .topic-text {
        margin: 0 !important;
        font-size: 20px !important;
        font-size: clamp(18px, 1.45vw, 26px) !important;
        line-height: 1.14 !important;
        overflow-wrap: anywhere !important;
    }

    .eventssection .toast-info.friday-imam .topic-label {
        margin-bottom: 3px !important;
    }
}

/* 1280 × 720 og andre lave desktops: giv imamkortet mere lodret plads. */
@media screen
and (min-width: 1101px)
and (max-height: 800px) {
    .eventssection.imam-card-visible,
    .col-md-6.eventssection.imam-card-visible {
        padding-bottom: 110px !important;
    }

    .eventssection.imam-card-visible > .row.info:first-child {
        flex: 0 1 42% !important;
    }

    .eventssection.imam-card-visible > .friday-imam-row {
        flex: 1 1 58% !important;
    }

    .eventssection .toast-info.friday-imam .col-10 {
        padding: 10px 16px !important;
    }

    .eventssection .toast-info.friday-imam .col-10 > p {
        flex: 0 0 auto !important;
    }

    .eventssection .toast-info.friday-imam .imam-name {
        overflow: visible !important;
        text-overflow: clip !important;
    }
}

/* Tablets har ingen badges og kan derfor bruge hele højden til de to kort. */
@media screen
and (min-width: 769px)
and (max-width: 1100px) {
    .eventssection.imam-card-visible,
    .eventssection.imam-card-hidden,
    .col-md-6.eventssection.imam-card-visible,
    .col-md-6.eventssection.imam-card-hidden {
        padding-bottom: 8px !important;
    }

    .eventssection.imam-card-hidden > .row.info:first-child {
        height: 150px !important;
        height: clamp(120px, 25vh, 175px) !important;
        min-height: 120px !important;
        max-height: 175px !important;
    }
}

/* 854 × 534: stor og læsbar tekst, men stadig plads til hele imamkortet. */
@media screen
and (min-width: 769px)
and (max-width: 900px)
and (max-height: 560px) {
    .eventssection .toast-info.prayer .prayer-countdown-content p,
    .eventssection .toast-info.prayer .prayer-countdown-content .prayername,
    .eventssection .toast-info.prayer .prayer-countdown-content .countdown,
    .eventssection .toast-info.prayer.jummah-countdown .prayername,
    .eventssection .toast-info.prayer.jummah-countdown .countdown {
        font-size: 38px !important;
    }

    .eventssection .toast-info.friday-imam .name {
        font-size: 27px !important;
    }

    .eventssection .toast-info.friday-imam .imam-name {
        font-size: 24px !important;
    }

    .eventssection .toast-info.friday-imam .topic-label,
    .eventssection .toast-info.friday-imam .topic-text {
        font-size: 18px !important;
    }
}


/* ===== v50: faste Android 8-fallbacks før clamp() i countdown/imam-kort ===== */

/* =========================================================
   v52 – alle kompakte lydstatusser holdes inde i countdown-kortet
   ========================================================= */

/*
 * Lydknappen er et direkte barn af prayer-toasten. Prayer-toasten
 * bruges derfor som positioneringsramme, så både aktiv og sammenfoldet
 * lydstatus ligger i øverste højre hjørne af den hvide .col-10-del.
 */
.eventssection .toast-info.prayer {
    position: relative !important;
}

.eventssection .toast-info.prayer > .audio-control-button.audio-control-active,
.eventssection .toast-info.prayer > .audio-control-button.audio-control-collapsed {
    position: absolute !important;
    top: 6px !important;
    right: 6px !important;
    bottom: auto !important;
    left: auto !important;
    width: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    height: 32px !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    justify-content: center !important;
    z-index: 4 !important;
}

/* =========================================================
   v53 – fast afstand før countdown på Denver TAQ-10252
   ========================================================= */

/*
 * Denver-tablettens gamle WebView understøtter ikke flex-gap stabilt.
 * Afstanden sættes derfor med klassisk margin på countdown-elementet
 * for alle kommende bønner, ikke kun når Jummah vises.
 */
@media screen
and (min-width: 960px)
and (max-width: 1100px)
and (max-height: 650px) {
    .eventssection .toast-info.prayer .prayer-countdown-content {
        gap: 0 !important;
    }

    .eventssection .toast-info.prayer .prayer-countdown-content .countdown {
        margin-left: 8px !important;
    }
	
    .eventssection .toast-info.prayer .prayer-countdown-content .prayername {
         font-size: 30px !important;
    }
}


/* =========================================================
   Countdown-kort: større tekst med tydeligt størrelseshierarki
   ========================================================= */

/* Desktop: countdown størst, derefter bønnenavn og til sidst "om". */
.eventssection .toast-info.prayer .prayer-countdown-content .countdown,
.eventssection .toast-info.prayer.jummah-countdown .countdown {
    font-size: 60px !important;
    font-size: clamp(60px, 5.2vw, 82px) !important;
    line-height: 1.02 !important;
}

.eventssection .toast-info.prayer .prayer-countdown-content .prayername,
.eventssection .toast-info.prayer.jummah-countdown .prayername {
    font-size: 46px !important;
    font-size: clamp(46px, 3.8vw, 64px) !important;
    line-height: 1.02 !important;
}

.eventssection .toast-info.prayer .prayer-countdown-content > p:first-child {
    font-size: 26px !important;
    font-size: clamp(26px, 2.2vw, 36px) !important;
    font-weight: 400 !important;
    line-height: 1.02 !important;
    letter-spacing: 0 !important;
}

/* Denver 1024 px: udnyt den høje countdown-boks bedre. */
@media screen and (min-width: 960px) and (max-width: 1100px) {
    .eventssection .toast-info.prayer .col-10 {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .eventssection .toast-info.prayer .prayer-countdown-content .countdown,
    .eventssection .toast-info.prayer.jummah-countdown .countdown {
        font-size: 54px !important;
        font-size: clamp(54px, 5.6vw, 60px) !important;
    }

    .eventssection .toast-info.prayer .prayer-countdown-content .prayername,
    .eventssection .toast-info.prayer.jummah-countdown .prayername {
        font-size: 38px !important;
        font-size: clamp(38px, 2.8vw, 43px) !important;
    }

    .eventssection .toast-info.prayer .prayer-countdown-content > p:first-child {
        font-size: 24px !important;
        font-size: clamp(24px, 2.6vw, 27px) !important;
    }
}

/* 854 px og øvrige små landskabsskærme: større, men stadig sikker ved Maghrib/Jummah. */
@media screen and (min-width: 769px) and (max-width: 959px) {
    .eventssection .toast-info.prayer .col-10 {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .eventssection .toast-info.prayer .prayer-countdown-content .countdown,
    .eventssection .toast-info.prayer.jummah-countdown .countdown {
        font-size: 44px !important;
        font-size: clamp(44px, 5.4vw, 50px) !important;
    }

    .eventssection .toast-info.prayer .prayer-countdown-content .prayername,
    .eventssection .toast-info.prayer.jummah-countdown .prayername {
        font-size: 36px !important;
        font-size: clamp(36px, 4.3vw, 40px) !important;
    }

    .eventssection .toast-info.prayer .prayer-countdown-content > p:first-child {
        font-size: 20px !important;
        font-size: clamp(20px, 2.4vw, 23px) !important;
    }
}

/* Mobil: større end før, men stadig sikker ved Maghrib/Jummah. */
@media screen and (max-width: 768px) {
    .eventssection .toast-info.prayer .prayer-countdown-content .countdown,
    .eventssection .toast-info.prayer.jummah-countdown .countdown {
        font-size: 28px !important;
        font-size: clamp(28px, 9vw, 38px) !important;
    }

    .eventssection .toast-info.prayer .prayer-countdown-content .prayername,
    .eventssection .toast-info.prayer.jummah-countdown .prayername {
        font-size: 26px !important;
        font-size: clamp(26px, 7.5vw, 34px) !important;
    }

    .eventssection .toast-info.prayer .prayer-countdown-content > p:first-child {
        font-size: 16px !important;
        font-size: clamp(16px, 4vw, 20px) !important;
    }
}