/*

Theme Name: VremyaNamaza
Author: Jackzavr

*/

/* BEM layout — namaz visual style */

*,
:after,
:before{
	box-sizing: border-box;
}


:root{
	--layout-max: 75rem;
	--gutter: clamp(15px, 3vw, 20px);
	--card-gap: 20px;
	--card-padding-top: 25px;
	--card-padding-inline: 20px;
	--card-padding-bottom: 30px;
	--layout-gap: 20px;
	--scroll-anchor-offset: 20px;
	--section-gap: calc(2 * var(--card-gap) - var(--gutter));
	--radius-sm: 8px;
	--radius-md: 12px;
	--font-size-sm: 14px;
	--font-size-md: 15px;
	--font-size-lg: 19px;
	--font-size-xl: 24px;
	--inline-icon-size: 1.333em;
	--inline-icon-gap: 8px;

	--bg: #fff;
	--text: #222322;
	--text-muted: #717371;
	--text-secondary: #4e4f4e;
	--surface: #f5f5f5;
	--color-surface: var(--surface);
	--border: rgb(34 34 34 / 10%);
	--border-table: #e0e0e0;
	--border-strong: rgb(34 34 34 / 14%);
	--border-medium: rgb(34 34 34 / 11%);
	--border-dotted: rgb(34 34 34 / 8%);
	--underline: #ccc;
	--link: #3f8252;
	--link-hover: #4f9a62;
	--accent: #f5dc6e;
	--accent-hover: #edd055;
	--accent-text: #222322;
	--brand: #4f9a62;
	--brand-dark: #3f8252;
	--bg-page: #4f9a62;
	--text-on-brand: #fff;
	--text-inverse: #fff;
	--meta-dots: #b8b8b6;
	--caption: rgb(34 34 34 / 50%);
	--btn-secondary-bg: rgb(255 255 255 / 18%);
	--my-city-bg: var(--accent);
	--my-city-text: var(--accent-text);
	--my-city-bg-active: var(--btn-secondary-bg);
	--my-city-text-active: var(--text-on-brand);
	--share-schedule-bg: var(--btn-secondary-bg);
	--share-schedule-text: var(--text-on-brand);
	--btn-disabled-bg: rgb(34 34 34 / 8%);
	--row-highlight: rgb(245 220 111 / 30%);
	--calendar-event-bg: #fdf8e8;
	--calendar-hijri: #555555;
	--calendar-hover: #9a9a98;
	--qibla-marker: #d9564c;
	--error: #e56b62;
	--compass-bg: #fff;
	--compass-border: rgb(34 34 34 / 26%);
	--compass-halo: var(--surface);
	--compass-dashed: rgb(34 34 34 / 16%);
	--compass-tick: rgb(34 34 34 / 42%);
	--compass-point: var(--text-muted);
	--compass-index: var(--brand);
	--compass-needle: var(--brand);
	--compass-needle-tail: rgb(34 34 34 / 32%);
	--compass-hub-bg: #fff;
	--compass-hub-border: var(--brand);
	--compass-aligned-ring: rgb(79 154 98 / 22%);
	--footer-link-border: rgb(255 255 255 / 14%);
	--footer-link-border-hover: rgb(255 255 255 / 22%);
	--header-link-border: rgb(255 255 255 / 55%);
	--header-link-border-hover: rgb(255 255 255 / 92%);
	--theme-switch-border: rgb(255 255 255 / 35%);
	--theme-switch-bg: rgb(255 255 255 / 15%);
	--theme-switch-text: #fff;
	--theme-switch-focus: #fff;
	--theme-switch-active-bg: rgb(255 255 255 / 15%);
	--search-bg: #fff;
	--tabs-nav-border: rgb(255 255 255 / 50%);
	--search-icon-filter: brightness(0) opacity(0.54);
}

html[data-theme="dark"]{
	color-scheme: dark;
	--bg-page: #2e3436;
	--bg: #272c2d;
	--search-bg: var(--bg);
	--surface: #35393b;
	--text: #babdb6;
	--text-on-brand: var(--text);
	--text-muted: #909090;
	--text-secondary: #aaaaaa;
	--border: rgb(186 189 182 / 12%);
	--border-table: #555753;
	--border-strong: rgb(186 189 182 / 20%);
	--border-medium: rgb(186 189 182 / 14%);
	--border-dotted: rgb(186 189 182 / 8%);
	--underline: #555753;
	--meta-dots: #727774;
	--link: #729fcf;
	--link-hover: #81afdb;
	--btn-secondary-bg: rgb(238 238 236 / 14%);
	--my-city-bg: var(--accent);
	--my-city-text: var(--accent-text);
	--my-city-bg-active: var(--btn-secondary-bg);
	--my-city-text-active: var(--text-on-brand);
	--share-schedule-bg: var(--btn-secondary-bg);
	--share-schedule-text: var(--text-on-brand);
	--compass-bg: var(--bg);
	--compass-border: rgb(186 189 182 / 28%);
	--compass-halo: var(--bg-page);
	--compass-dashed: rgb(186 189 182 / 16%);
	--compass-tick: rgb(186 189 182 / 42%);
	--compass-point: #babdb6;
	--compass-index: #8ae234;
	--compass-needle: #8ae234;
	--compass-needle-tail: rgb(186 189 182 / 32%);
	--compass-hub-bg: var(--bg);
	--compass-hub-border: #8ae234;
	--compass-aligned-ring: rgb(138 226 52 / 24%);
	--caption: rgb(186 189 182 / 55%);
	--btn-disabled-bg: rgb(238 238 236 / 6%);
	--accent: #f5dc6e;
	--accent-hover: #edd055;
	--accent-text: #222322;
	--row-highlight: rgb(53 57 59 / 50%);
	--calendar-event-bg: rgb(238 238 236 / 6%);
	--calendar-hijri: #909090;
	--calendar-hover: #727774;
	--tabs-nav-border: rgb(186 189 182 / 22%);
	--search-icon-filter: brightness(0) invert(1) opacity(0.54);
	--theme-switch-border: rgb(186 189 182 / 18%);
	--theme-switch-bg: rgb(238 238 236 / 10%);
	--theme-switch-text: #babdb6;
	--theme-switch-focus: var(--text);
	--theme-switch-active-bg: rgb(238 238 236 / 12%);
}

html{
	scroll-padding-top: 0px;
	scroll-behavior: smooth;
	background-color: var(--bg-page);
	color-scheme: light;
}

html.theme-switching,
html.theme-switching *,
html.theme-switching *::before,
html.theme-switching *::after{
	transition: none !important;
}

section[id], .card[id]{
	scroll-margin-top: var(--scroll-anchor-offset);
}

body, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, form, fieldset, input, textarea, p{
	margin: 0;
	padding: 0;
}

html, body{
	width: 100%;
	height: 100%;
}

@font-face{
	font-family: 'Noto Sans';
	src: local('Noto Sans'),
		 local('NotoSans'),
		 url('fonts/notosans/400.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face{
	font-family: 'Noto Sans';
	src: local('Noto Sans SemiBold'),
		 local('NotoSans-SemiBold'),
		 url('fonts/notosans/600.woff2') format('woff2');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

@font-face{
	font-family: 'Nunito';
	src: url('fonts/nunito/400-cyrillic-ext.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face{
	font-family: 'Nunito';
	src: url('fonts/nunito/400-cyrillic.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face{
	font-family: 'Nunito';
	src: url('fonts/nunito/400-latin-ext.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face{
	font-family: 'Nunito';
	src: url('fonts/nunito/400-latin.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face{
	font-family: 'Nunito';
	src: url('fonts/nunito/500-cyrillic-ext.woff2') format('woff2');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face{
	font-family: 'Nunito';
	src: url('fonts/nunito/500-cyrillic.woff2') format('woff2');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face{
	font-family: 'Nunito';
	src: url('fonts/nunito/500-latin-ext.woff2') format('woff2');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face{
	font-family: 'Nunito';
	src: url('fonts/nunito/500-latin.woff2') format('woff2');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face{
	font-family: 'Nunito';
	src: url('fonts/nunito/600-cyrillic-ext.woff2') format('woff2');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face{
	font-family: 'Nunito';
	src: url('fonts/nunito/600-cyrillic.woff2') format('woff2');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face{
	font-family: 'Nunito';
	src: url('fonts/nunito/600-latin-ext.woff2') format('woff2');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face{
	font-family: 'Nunito';
	src: url('fonts/nunito/600-latin.woff2') format('woff2');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face{
	font-family: 'Amiri';
	src: url('fonts/amiri/amiri-regular.woff2') format('woff2');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}

@font-face{
	font-family: 'Amiri';
	src: url('fonts/amiri/amiri-bold.woff2') format('woff2');
	font-weight: bold;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}

body{
	position: relative;
	background-color: var(--bg-page);
	min-width: 320px;
	min-height: 100%;
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
	font-family: 'Nunito', sans-serif;
	color: var(--text);
	font-size: var(--font-size-lg);
	font-weight: 400;
}

b, strong{
	font-weight: 600;
}

table{
	border-collapse: collapse;
	border-spacing: 0;
}

fieldset, img{
	border: 0;
}

img{
	vertical-align: middle;
}

ol, ul{
	list-style: none;
}

h1, h2, h3, h4, h5, h6{
	line-height: 1.3;
	font-weight: 600;
	margin-bottom: 25px;
}

h1{
	font-size: clamp(2.5rem, 8vw, 2.8125rem);
	color: var(--text-on-brand);
	overflow-wrap: anywhere;
	hyphens: auto;
}

h2{
	font-size: 30px;
	border-bottom: 1px solid var(--border);
}

h3{
	font-size: 24px;
	border-bottom: 1px solid var(--border);
}

h4{
	font-size: 21px;
}

h5, h6{
	font-size: inherit;
}

h2, h2 a, h3, h3 a, h4, h4 a, h5, h6{
	color: var(--text);
}

p{
	-moz-hyphens: auto;
	-webkit-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto;
	margin: 25px 0;
}

p button{
	background: var(--color-surface);
	display: inline-block;
	cursor: pointer;
	font-family: inherit;
	font-size: inherit;
	border: none;
	outline: none;
	border-radius: var(--radius-sm);
	padding: 2px 4px;
}

a{
	color: var(--link);
	text-decoration: none;
}

mark{
	background: var(--accent);
	border-radius: 6px;
	color: var(--accent-text);
	padding: 2px 4px;
}

blockquote{
	font-size: inherit;
	border-left: 1px solid var(--border-strong);
	padding: 0 20px;
	margin: 0;
}

.content{
	display: flex;
	flex-direction: column;
	flex: 1 0 auto;
}

.content__main{
	position: relative;
	flex: 1 0 auto;
	padding-block: var(--gutter);
	display: flex;
	flex-direction: column;
	gap: var(--layout-gap);
}

/* FLEX + GAP — vertical spacing between siblings */

.content__inner{
	display: flex;
	flex-direction: column;
	gap: var(--layout-gap);
}

.header__inner{
	display: flex;
	flex-direction: column;
	gap: var(--card-gap);
}

.content__main > .pagination{
	margin-block: 0;
	margin-inline: auto;
}

.tabs{
	display: flex;
	flex-direction: column;
	gap: var(--card-gap);
}

.tabs__panel--active{
	display: flex;
	flex-direction: column;
	gap: var(--card-gap);
}

.tabs__panel h2,
.tabs__panel h3{
	margin-bottom: 0;
}

.card{
	display: flex;
	flex-direction: column;
	gap: var(--card-gap);
	margin-bottom: 0;
	position: relative;
	background: var(--bg);
	overflow: hidden;
	border-radius: var(--radius-md);
	padding: var(--card-padding-top) var(--card-padding-inline) var(--card-padding-bottom);
}

.card[hidden]{
	display: none !important;
}

.card a:not(.button):not(.toc__link):not(.tabs__tab){
	color: var(--text);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
	text-decoration-color: var(--underline);
}

.card h2,
.card h3{
	margin-bottom: 0;
}

.card p,
.card > blockquote{
	margin: 0;
}

.schedule__prayers{
	display: flex;
	flex-direction: column;
	gap: var(--card-gap);
}

.schedule__prayer h3{
	margin-bottom: 0;
}

.schedule__prayer p{
	color: var(--text-secondary);
	font-size: 15px;
	margin: 0;
}

.faq{
	display: flex;
	flex-direction: column;
	gap: var(--card-gap);
	text-align: left;
}

.mosque-list{
	display: flex;
	flex-direction: column;
	gap: var(--card-gap);
	text-align: left;
}

.mosque-list__address,
.mosque-list__hours,
.mosque-list__phone,
.mosque-list__website{
	margin-bottom: 0;
}

.meta{
	display: flex;
	flex-direction: column;
	gap: var(--card-gap);
	box-sizing: border-box;
	width: 100%;
	min-width: 0;
	margin: 0;
	padding: 0;
}

.meta__row{
	position: relative;
	display: flex;
	align-items: flex-end;
	box-sizing: border-box;
	width: 100%;
	min-width: 0;
	margin: 0;
	text-align: left;
}

.settings-form{
	display: flex;
	flex-direction: column;
	gap: var(--card-gap);
	margin-top: 0;
}

.settings-facts{
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 0;
	padding-top: var(--card-gap);
	border-top: 1px solid var(--border-table);
	color: var(--text-muted);
	font-size: var(--font-size-sm);
	line-height: 1.4;
}

.settings-facts__title,
.settings-facts__line,
.settings-facts__note,
.settings-facts__link{
	margin: 0;
}

.settings-facts__title{
	font-size: var(--font-size-sm);
	font-weight: 600;
	color: var(--text-muted);
}

.settings-facts__label{
	font-weight: 400;
}

.settings-facts__link a{
	color: inherit;
	text-decoration: underline;
	text-decoration-color: var(--underline);
	text-underline-offset: 2px;
}

.city-list{
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
	gap: 18px var(--card-gap);
	text-align: left;
}

.city-list li{
	margin: 0;
	min-width: 0;
}

.city-list li:has(.city-list__link-km){
	display: flex;
	align-items: baseline;
	gap: 0.35em;
}

.city-list li:has(.city-list__link-km) .city-list__link{
	display: inline;
	flex: 0 1 auto;
	min-width: 0;
}

.city-list li:has(.city-list__link-km) .city-list__link-km{
	flex: 0 0 auto;
}

.article-list{
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
	gap: var(--card-gap);
}

.article-list .article-card{
	display: flex;
	flex-direction: column;
	margin: 0;
	background: var(--bg);
	border-radius: var(--radius-md);
	overflow: hidden;
	color: var(--text);
	text-decoration: none;
}

.article-list .article-card img,
.article-list .article-card .thumbnail{
	width: 100%;
	aspect-ratio: 403 / 264;
	display: block;
}

.article-list .article-card img{
	object-fit: cover;
}

.article-list .article-card .thumbnail{
	background: var(--color-surface);
	border-bottom: 1px solid var(--border-dotted);
}

.article-list .article-card span{
	padding: var(--card-padding-top) var(--card-padding-inline) var(--card-padding-bottom);
	font-size: var(--font-size-md);
	font-weight: 600;
	line-height: 1.4;
}

.toc.card{
	display: flex;
	flex-direction: column;
	gap: var(--card-gap);
}

.toc:has(.toc__toggle){
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
}

.toc:has(.toc__toggle) .toc__list{
	width: 100%;
}

.toc__title,
.related__title{
	font-size: var(--font-size-md);
	font-weight: 600;
}

.toc__toggle{
	flex-shrink: 0;
	background: transparent;
	color: var(--text);
	font-family: inherit;
	font-size: var(--font-size-sm);
	border: none;
	cursor: pointer;
}

.toc:has(.toc__toggle):not(.toc--open) .toc__list{
	display: none;
}

/* Typography inside flex containers */
.content__main > :is(h1, h2, h3, h4, h5, h6),
.card > :is(h1, h2, h3, h4, h5, h6):not(.mosque-list__name){
	margin-bottom: 0;
}

:is(.card, .content__main, .tabs__panel--active, .prose, .schedule, .faq__item, .mosque-list__item, .related, .ramadan) > p,
.prose p{
	margin: 0;
}

.prose ul:not(.city-list){
	margin: 0;
	padding-left: 20px;
	list-style: disc;
}

.prose ul:not(.city-list) li{
	margin: 0;
}

.prose ul:not(.city-list) li + li{
	margin-top: calc(var(--card-gap) / 2);
}

.prose ol{
	display: flex;
	flex-direction: column;
	gap: var(--card-gap);
	margin: 0;
	padding-left: 20px;
	list-style: none;
	counter-reset: list;
}

.prose ol li{
	margin: 0;
}

.prose table,
.prose .video{
	margin: 0;
}

/* MOSQUE GALLERY */
.gallery{
	display: flex;
	flex-wrap: wrap;
	gap: var(--card-gap);
	margin: 0;
}

.mosque-list__item .gallery{
	gap: var(--card-gap);
}

.mosque-list__item .gallery__item{
	flex: 1 1 min(100%, calc(50% - 7.5px));
	min-width: 0;
	max-width: min(100%, 270px);
}

/* RELATED LINKS */
.related{
	display: flex;
	flex-direction: column;
	gap: var(--card-gap);
}

/* PAGINATION */
.pagination{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 5px;
	margin-inline: auto;
	font-size: inherit;
}

.pagination a,
.pagination span{
	margin: 0;
	background: var(--bg);
	display: inline-block;
	font-family: inherit;
	color: var(--text);
	font-size: var(--font-size-md);
	border: none;
	outline: none;
	border-radius: var(--radius-md);
	padding: 10px 15px;
}

.pagination .current{
	background: var(--accent);
	color: var(--accent-text);
}

/* CONTACT FORM */
.form-response{
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.notice{
	margin: 0;
	background: var(--brand);
	color: var(--text-on-brand);
	font-size: var(--font-size-lg);
	text-align: center;
	border-radius: var(--radius-md);
	padding: 20px;
}

.notice.error{
	background: var(--error);
}

.footer .container{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--card-gap);
}

.footer__nav{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--card-gap);
}

/* QIBLA */
.card > .meta--qibla{
	margin-top: 0;
	margin-bottom: 0;
}

/* TOC */
.toc__list{
	display: flex;
	flex-direction: column;
	gap: 0;
}

/* ARABIC TEXT */
.arabic-text{
	margin-bottom: 0;
	font-family: 'Amiri';
	direction: rtl;
	font-size: 120%;
	line-height: 2.4;
	unicode-bidi: embed;
}

/* TABS */
.tabs__nav{
	max-width: 100%;
	display: inline-flex;
	flex-wrap: nowrap;
	gap: var(--card-gap);
	overflow-x: auto;
	white-space: nowrap;
	border: 1px solid var(--tabs-nav-border);
	border-radius: var(--radius-md);
	padding: 5px;
}

.tabs--light .tabs__nav{
	border-color: var(--border-medium);
}

.tabs__nav::-webkit-scrollbar{
	width: 0;
	height: 0;
}

.tabs__tab{
	background: transparent;
	display: inline-block;
	cursor: pointer;
	font-family: inherit;
	color: var(--text-on-brand);
	font-size: var(--font-size-md);
	font-weight: 400;
	line-height: 1.3;
	border: none;
	border-radius: var(--radius-sm);
	user-select: none;
	padding: 10px 15px;
}

.tabs--light .tabs__tab{
	color: var(--text);
}

.tabs__tab--active{
	background: var(--accent);
	cursor: default;
	color: var(--accent-text);
}

.tabs--light .tabs__tab--active{
	color: var(--accent-text);
}

.tabs__panel[hidden]{
	display: none !important;
}

/* HEADER */
.header{
	position: relative;
	width: 100%;
	padding-top: 20px;
	padding-bottom: 10px;
}

.header__logo{
	display: block;
	line-height: 0;
	outline: none;
	flex-shrink: 0;
	max-width: min(100%, 320px);
	text-align: center;
	margin-inline: auto;
}

.header__logo-image{
	display: block;
	width: 100%;
	height: auto;
	filter: brightness(0) invert(1);
}

.header__top{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--card-gap);
	width: 100%;
}

.header__search{
	width: 100%;
}

.header__search .search{
	width: 100%;
}

.header__nav{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: var(--card-gap);
	width: 100%;
}

.header__link{
	display: block;
	width: fit-content;
	max-width: 100%;
	margin-inline: 0;
	color: var(--text-on-brand);
	font-size: var(--font-size-md);
	font-weight: 400;
	line-height: 1.4;
	text-align: center;
	text-decoration: none;
	border: none;
	border-bottom: 1px solid var(--header-link-border);
	border-radius: 0;
	padding: 0;
	white-space: nowrap;
}

.header .search{
	position: relative;
	background: var(--search-bg);
	display: flex;
	align-items: center;
	height: 50px;
	line-height: 50px;
	border-radius: var(--radius-md);
	padding: 0 5px 0 0;
	min-width: 0;
	max-width: 100%;
}

.search__nearby{
	display: flex;
	align-items: center;
	flex-shrink: 0;
	padding: 0 10px 0 10px;
	line-height: 0;
	text-decoration: none;
	-webkit-tap-highlight-color: transparent;
	border-right: 1px solid var(--border);
}

.search__nearby-icon{
	display: block;
	width: auto;
	height: 20px;
	flex-shrink: 0;
	filter: var(--search-icon-filter);
}

.search__field{
	background: transparent;
	height: 50px;
	flex: 1 1 auto;
	min-width: 0;
	width: 100%;
	font-family: inherit;
	font-size: var(--font-size-md);
	color: var(--text);
	outline: none;
	border: none;
	padding-left: 10px;
}

.search__field::placeholder,
.ramadan-search .search__field::placeholder{
	color: var(--text-muted);
	opacity: 1;
}

.search__submit{
	position: relative;
	background: var(--accent);
	height: 40px;
	flex-shrink: 0;
	overflow: hidden;
	cursor: pointer;
	color: var(--accent-text);
	font-size: var(--font-size-sm);
	line-height: 40px;
	border: none;
	outline: none;
	margin-left: 5px;
	border-radius: var(--radius-sm);
	padding: 0 15px;
}

/* ADS */
.banner{
	max-width: 360px;
	display: table;
	overflow: hidden;
	margin-left: auto;
	margin-right: auto;
}

.banner img{
	width: 100%;
	max-width: 100%;
	height: auto;
	display: block;
	cursor: pointer;
}

/* INTRO */
.content__actions{
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
}

.my-city,
.share-schedule,
.locate{
	-webkit-appearance: none;
	appearance: none;
	align-self: start;
	display: inline-flex;
	align-items: center;
	gap: var(--inline-icon-gap);
	font-family: inherit;
	font-size: var(--font-size-md);
	font-weight: 400;
	line-height: 1.3;
	border: none;
	border-radius: var(--radius-sm);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
	padding: 4px 10px;
	cursor: pointer;
}

.my-city__icon,
.my-city__label,
.share-schedule__icon,
.share-schedule__label,
.locate__icon,
.locate__label{
	display: block;
}

.my-city__icon,
.share-schedule__icon,
.locate__icon,
.install__icon,
.schedule-table__download-icon{
	display: block;
	width: auto;
	height: var(--inline-icon-size);
	flex-shrink: 0;
}

.js .my-city:not([data-ready]),
.js .share-schedule:not([data-ready]),
.js .locate:not([data-ready]){
	visibility: hidden;
}

.locate{
	background: var(--accent);
	color: var(--accent-text);
}

.my-city{
	background: var(--my-city-bg);
	color: var(--my-city-text);
}

.my-city[aria-pressed="true"]{
	background: var(--my-city-bg-active);
	color: var(--my-city-text-active);
}

.share-schedule{
	background: var(--share-schedule-bg);
	color: var(--share-schedule-text);
}

.my-city[aria-pressed="true"] .my-city__icon{
	filter: brightness(0) invert(1);
}

.share-schedule__icon{
	filter: brightness(0) invert(1);
}

.locate[aria-pressed="true"] .locate__icon,
.locate:disabled .locate__icon{
	filter: brightness(0) opacity(0.44);
}

.locate[aria-pressed="true"],
.locate:disabled{
	background: var(--btn-disabled-bg);
	color: var(--text-muted);
	cursor: default;
}

.locate:disabled:not([aria-pressed="true"]){
	opacity: 0.45;
}

.search-empty__status{
	margin: 0;
	font-size: var(--font-size-md);
	color: var(--text-muted);
}

.city__empty,
.install{
	margin: 0;
	color: var(--text-muted);
	font-size: var(--font-size-md);
	font-weight: 400;
	line-height: 1.3;
}

.install__button{
	display: inline-flex;
	align-items: flex-start;
	gap: var(--inline-icon-gap);
	max-width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	vertical-align: text-bottom;
	color: var(--text);
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	cursor: pointer;
}

.install__text{
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
	text-decoration-color: var(--underline);
}

.install__button:focus-visible .install__text{
	color: var(--text);
	text-decoration-color: var(--underline);
}

.install[hidden],
.share-schedule[hidden]{
	display: none !important;
}

.content__intro{
	color: var(--text-on-brand);
}

.content__intro a,
.content__intro-link{
	color: var(--text-on-brand);
	border-bottom: 1px solid var(--header-link-border);
	text-decoration: none;
	transition: border-bottom-color 0.15s ease;
	-webkit-tap-highlight-color: transparent;
}

.content__intro-link{
	display: inline;
	margin: 0;
	padding: 0;
	border-top: 0;
	border-left: 0;
	border-right: 0;
	border-radius: 0;
	background: none;
	font: inherit;
	cursor: pointer;
}

.content__intro a:hover,
.content__intro-link:hover{
	border-bottom-color: var(--header-link-border-hover);
}

.content__intro a:focus-visible,
.content__intro-link:focus-visible{
	outline: 2px solid var(--header-link-border);
	outline-offset: 2px;
}

.content__intro a[aria-busy="true"],
.content__intro-link[aria-busy="true"]{
	opacity: 0.7;
	cursor: wait;
}

.content__intro-tail{
	display: inline-block;
}

/* BREADCRUMBS */
.breadcrumbs{
	color: var(--text-on-brand);
	font-size: var(--font-size-sm);
}

.breadcrumbs__list{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.breadcrumbs__list li + li::before{
	content: '›';
	display: inline-block;
	margin: 0 5px;
}

.breadcrumbs__link{
	color: var(--text-on-brand);
}

/* TABLE OF CONTENTS */
.toc{
	counter-reset: list;
	text-align: left;
}

.toc__list{
	overflow: hidden;
}

.toc__list li{
	padding-top: 10px;
	padding-bottom: 10px;
}

.toc__list li a{
	position: relative;
	display: inline;
	color: var(--text);
	font-size: var(--font-size-lg);
	line-height: 1.3;
	text-decoration: none;
	border-bottom: 1px dotted var(--text);
}

.toc__link--current{
	border-bottom-style: solid;
}

/* CURRENT TIME */
.schedule__clock{
	display: flex;
	align-items: flex-start;
	margin-top: calc(-1 * var(--card-padding-top));
	margin-inline: calc(-1 * var(--card-padding-inline));
	margin-bottom: 0;
	padding: var(--card-padding-top) var(--card-padding-inline) var(--card-padding-inline);
	border-bottom: 1px solid var(--border);
}

.calendar-section .schedule__clock{
	flex-wrap: wrap;
	row-gap: 20px;
}

.schedule__date--gregorian, .schedule__date--hijri{
	display: flex;
	flex-direction: column;
	gap: 5px;
	width: 50%;
}

.schedule__date--gregorian{
	text-align: left;
	padding-right: 4px;
	margin-right: auto;
}

.schedule__date--hijri{
	text-align: right;
	padding-left: 4px;
	margin-left: auto;
}

.schedule__date--gregorian dt, .schedule__date--hijri dt{
	max-width: 100%;
	display: block;
	overflow: hidden;
	white-space: nowrap;
	color: var(--text-muted);
	font-size: var(--font-size-md);
	text-overflow: ellipsis;
	margin-bottom: 5px;
}

.schedule__date--gregorian dd, .schedule__date--hijri dd{
	font-size: var(--font-size-lg);
}

.calendar__today-holiday{
	display: flex;
	flex-direction: column;
	gap: 5px;
	flex: 0 0 100%;
	width: 100%;
	margin: 0;
	padding: 0;
}

.calendar__today-holiday dt{
	max-width: 100%;
	display: block;
	overflow: hidden;
	white-space: nowrap;
	color: var(--text-muted);
	font-size: var(--font-size-md);
	text-overflow: ellipsis;
	margin: 0;
}

.calendar__today-holiday dd{
	font-size: var(--font-size-lg);
	margin: 0;
}

.calendar__today-holiday--event dd{
	background: var(--calendar-event-bg);
	border-radius: var(--radius-sm);
	padding: 10px 12px;
}

/* TIME LEFT */
.schedule__countdown{
	display: inline-block;
	background: var(--accent);
	color: var(--accent-text);
	line-height: 1.3;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.02em;
	border-radius: var(--radius-sm);
	padding: 2px 8px;
}

/* PRAYER */
.schedule__prayer{
	z-index: 1;
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--card-gap);
	margin-top: 0;
	text-align: left;
	border-radius: var(--radius-md);
	padding: var(--gutter);
}

.schedule__prayer--active{
	background: var(--accent);
	color: var(--accent-text);
}

.schedule__prayer--active h3,
.schedule__prayer--active p,
.schedule__prayer--active .schedule__time{
	color: var(--accent-text);
}

.schedule__time{
	position: absolute;
	top: 11px;
	right: 14px;
	font-weight: 600;
	font-size: clamp(1.75rem, 8vw, 2.25rem);
}

.schedule__time span{
	font-size: var(--font-size-sm);
	font-weight: 600;
}

/* HERO IMAGE */
.image{
	z-index: 1;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: auto;
	display: block;
}

/* RELATED LINKS */
.related__link{
	align-self: start;
	width: fit-content;
	max-width: 100%;
}

/* OPTIONS */
.meta__row::after{
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 8px;
	height: 2px;
	background: repeat-x radial-gradient(2px circle at 1px 1px, var(--meta-dots) 50%, transparent 50.2%) 0 0 /6px 2px;
}

.meta__row dt{
	flex: 1 1 0%;
	min-width: 0;
	margin: 0;
}

.meta__row dt span,
.meta__row dd span,
.meta__row dd time{
	z-index: 1;
	position: relative;
	background: var(--bg);
}

.meta__row dt span{
	padding-right: 6px;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

.meta__row dd{
	flex: 0 0 auto;
	box-sizing: border-box;
	width: max-content;
	max-width: calc(100% - 5rem);
	margin: 0 0 0 auto;
	padding-left: 0;
	font-weight: 600;
	text-align: right;
	background: none;
}

.meta__row dd span,
.meta__row dd time{
	padding-left: 6px;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

#nafl .meta__row dd time + time{
	padding-left: 0;
}

#night-time > p,
#night-time blockquote{
	color: var(--text-muted);
	font-size: var(--font-size-md);
}

/* TABLE */
.schedule-table{
	display: flex;
	flex-direction: column;
	gap: var(--card-gap);
	margin: 0;
	min-width: 0;
}

.schedule-table__table{
	width: 100%;
	border-collapse: collapse;
	text-align: center;
}

.schedule-table__caption{
	text-align: left;
}

.schedule-table__table tr{
	width: 100%;
	border: none;
}

.schedule-table__table thead th{
	vertical-align: top;
	font-weight: 600;
	font-size: var(--font-size-md);
}

.schedule-table__table thead th span{
	display: block;
	font-size: inherit;
	font-weight: normal;
}

.schedule-table__table tbody td,
.schedule-table__table tbody th{
	white-space: nowrap;
	font-size: var(--font-size-lg);
	font-weight: inherit;
}

.schedule-table__table tbody td span,
.schedule-table__table tbody th span{
	font-size: inherit;
}

.note{
	color: var(--text-muted);
	font-size: var(--font-size-md);
	line-height: 1.3;
}

.schedule-table__download{
	margin: 0;
}

.schedule-table__download-btn{
	display: inline-flex;
	align-items: flex-start;
	gap: var(--inline-icon-gap);
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: var(--text);
	font-family: inherit;
	font-size: var(--font-size-md);
	font-weight: 400;
	line-height: 1.3;
	cursor: pointer;
	text-decoration: none;
}

.schedule-table__download-text{
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
	text-decoration-color: var(--underline);
}

.schedule-table__download-btn:focus-visible .schedule-table__download-text{
	color: var(--text);
	text-decoration-color: var(--underline);
}

.schedule-table__download-btn[aria-busy="true"]{
	pointer-events: none;
	opacity: 0.6;
}

/* RAMADAN */
.calendar-section:has(> .image){
	position: relative;
	overflow: hidden;
	padding-bottom: 92%;
}

.ramadan-search{
	position: relative;
	margin-bottom: 35px;
}

.ramadan-search .search__field{
	background: var(--color-surface);
	width: 100%;
	height: 48px;
	display: block;
	font-family: inherit;
	font-size: var(--font-size-md);
	font-weight: 400;
	line-height: 48px;
	border: none;
	border-radius: var(--radius-md);
	padding: 0 20px;
	margin: 0;
}

/* FAQ */
.faq__item{
	display: flex;
	flex-direction: column;
	gap: var(--card-gap);
	margin-bottom: 0;
	/* padding: 20px 20px;
	background: var(--color-surface);
	border-radius: var(--radius-md); */
}

.faq__item > h3{
	font-size: var(--font-size-xl);
	font-weight: 600;
	line-height: 1.55;
	margin: 0;
}

.faq__answer{
	font-weight: 400;
}

/* MOSQUES */
.mosque-list__item{
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--card-gap);
	margin-bottom: 0;
	/* padding: var(--gutter);
	background: var(--color-surface);
	border-radius: var(--radius-md); */
}

.mosque-list__name{
	font-size: var(--font-size-xl);
	font-weight: 600;
	line-height: 1.3;
}

.mosque-list__address{
	font-size: var(--font-size-lg);
}

.mosque-list__hours{
	color: var(--text-muted);
	font-size: var(--font-size-md);
}

.mosque-list__address,
.mosque-list__hours,
.mosque-list__phone,
.mosque-list__website{
	position: relative;
}

.mosque-list__phone + .mosque-list__phone{
	margin-top: -8px;
}

.mosque-list__phone a,
.mosque-list__website a{
	color: inherit;
}

.mosque-list .button{
	background: transparent;
	font-family: inherit;
	display: block;
	width: fit-content;
	max-width: 100%;
	cursor: pointer;
	color: var(--text);
	font-size: var(--font-size-md);
	border: 1px solid var(--border-medium);
	outline: none;
	border-radius: var(--radius-sm);
	padding: 7px 15px;
	margin-inline: auto;
}

/* QIBLA */
.qibla.card{
	padding-inline: 0;
	padding-bottom: 0;
}

.qibla.card > :is(h2, h3){
	margin-inline: var(--card-padding-inline);
}

.qibla.card > :is(p, .meta){
	padding-inline: var(--card-padding-inline);
}

.compass{
	display: flex;
	flex-direction: column;
	gap: var(--card-gap);
	width: 100%;
}

.compass__widget{
	width: 100%;
}

.compass__controls{
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}

.compass__face{
	position: relative;
	width: 100%;
	max-width: 272px;
	aspect-ratio: 1;
	margin: 0 auto;
	border-radius: 50%;
	background: var(--compass-bg);
	border: 2px solid var(--compass-border);
	color: var(--text);
	box-shadow: 0 0 0 6px var(--compass-halo);
	transition: border-color .3s ease, box-shadow .3s ease;
}

.compass__face::before{
	content: "";
	position: absolute;
	inset: 13%;
	border: 1px dashed var(--compass-dashed);
	border-radius: 50%;
	pointer-events: none;
	z-index: 1;
}

.compass--aligned .compass__face{
	border-color: var(--compass-index);
	box-shadow: 0 0 0 6px var(--compass-aligned-ring);
}

.compass__index{
	position: absolute;
	top: 5px;
	left: 50%;
	width: 0;
	height: 0;
	background: transparent;
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-bottom: 10px solid var(--compass-index);
	transform: translateX(-50%);
	z-index: 5;
}

.compass__ticks{
	position: absolute;
	inset: 8%;
	border-radius: 50%;
	background: repeating-conic-gradient(var(--compass-tick) 0 0.9deg, transparent 0.9deg 30deg);
	-webkit-mask: radial-gradient(circle, transparent 0 45%, #000 45% 49%, transparent 49%);
	mask: radial-gradient(circle, transparent 0 45%, #000 45% 49%, transparent 49%);
	opacity: 1;
	z-index: 1;
}

.compass__dial{
	position: absolute;
	inset: 0;
	transition: transform .12s linear;
	z-index: 2;
}

.compass__point{
	position: absolute;
	font-size: var(--font-size-sm);
	font-weight: 600;
	color: var(--compass-point);
	line-height: 1.3;
	transform: translate(-50%, -50%);
}

.compass__point--n{
	top: 9%;
	left: 50%;
}

.compass__point--s{
	top: 91%;
	left: 50%;
}

.compass__point--e{
	top: 50%;
	left: 91%;
}

.compass__point--w{
	top: 50%;
	left: 9%;
}

.compass__needle{
	position: absolute;
	inset: 0;
	transform-origin: center;
	transform: rotate(0deg);
	transition: transform 1s cubic-bezier(.22, .61, .36, 1);
	z-index: 3;
}

.compass__needle::before{
	content: "";
	position: absolute;
	left: 50%;
	top: 15%;
	width: 10px;
	height: 34%;
	background: var(--compass-needle);
	clip-path: polygon(50% 0, 100% 100%, 0 100%);
	transform: translateX(-50%);
}

.compass__needle::after{
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 7px;
	height: 26%;
	background: var(--compass-needle-tail);
	clip-path: polygon(50% 100%, 100% 0, 0 0);
	transform: translateX(-50%);
}

.compass--unknown .compass__needle::before,
.compass--unknown .compass__needle::after{
	opacity: .3;
}

.compass__hub{
	position: absolute;
	top: 50%;
	left: 50%;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--compass-hub-bg);
	border: 2px solid var(--compass-hub-border);
	transform: translate(-50%, -50%);
	z-index: 4;
}

.compass__status{
	margin: 0;
	color: var(--text-muted);
	font-size: var(--font-size-md);
	font-weight: 400;
	line-height: 1.3;
}

.compass__readout{
	margin: 0;
	text-align: center;
	font-size: var(--font-size-md);
	font-weight: 400;
	line-height: 1.3;
	color: var(--text);
}

#qibla-city[hidden]{
	display: none !important;
}

@media (prefers-reduced-motion: reduce){
	html{
		scroll-behavior: auto;
	}
	.compass__face{
		transition: none;
	}
	.compass__needle{
		transition: none;
	}
}

#qibla-map{
	scroll-margin-top: var(--scroll-anchor-offset);
}

.qibla.card > .qibla__map{
	margin-top: 0;
	width: 100%;
	max-width: none;
	margin-inline: 0;
	margin-bottom: 0;
}

.qibla__map.leaflet-container{
	width: 100% !important;
	height: 100%;
	min-height: 400px;
}

.qibla__map.leaflet-container .leaflet-overlay-pane svg path{
	vector-effect: non-scaling-stroke;
}

.qibla__map{
	height: 400px;
}

.qibla__map .marker-wrap, .qibla__map .marker-wrap.leaflet-div-icon{
	background: transparent;
	border: none;
}

.qibla__map .marker-wrap .marker, .qibla__map .marker{
	position: relative;
	width: 70px;
	height: 70px;
}

.qibla__map .marker:after{
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 70px;
	height: 70px;
	display: block;
	border: 18px solid #d9564c;
	border-radius: 50%;
	border-bottom-right-radius: 0;
	transform: rotate(45deg);
}

.qibla__map .marker:before{
	content: "";
	z-index: 1;
	position: absolute;
	left: 0;
	top: 0;
	border: 18px solid #d9564c;
	width: 70px;
	height: 70px;
	border-radius: 50%;
}

/* CALENDAR */
.calendar{
	z-index: 2;
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: var(--card-gap);
}

.calendar .month{
	flex: 1 1 min(100%, 22rem);
	width: auto;
	max-width: 100%;
	margin: 0;
	text-align: left;
	display: flex;
	flex-direction: column;
	gap: var(--card-gap);
}

.calendar .month h2,
.calendar .month h3,
.calendar .month h4{
	font-weight: 600;
	margin: 0;
}

.calendar .month table, .calendar .month table caption, .calendar .month table thead, .calendar .month table tbody{
	width: 100%;
	display: block;
}

.calendar .month table{
	margin-bottom: 0;
	background: var(--color-surface);
	text-align: center;
	border-radius: var(--radius-sm);
	padding: 30px 5px 30px;
}

.calendar .month table caption{
	margin-bottom: 0;
	font-size: var(--font-size-md);
	font-weight: 600;
}

.calendar .month table th{
	font-size: var(--font-size-sm);
	font-weight: 600;
	text-transform: uppercase;
}

.calendar .month table tr{
	max-width: 360px;
	display: flex;
	align-content: stretch;
	white-space: nowrap;
	margin-left: auto;
	margin-right: auto;
}

.calendar .month table tr td, .calendar .month table tr th{
	width: calc(14.2857% - 2px);
	display: inline-block;
	line-height: 1.4;
	border: 1px solid transparent;
	padding-top: 3px;
	padding-bottom: 7px;
	margin: 1px;
}

.calendar .month .day{
	border-radius: var(--radius-sm);
}

.calendar .month .day.event{
	background: var(--calendar-event-bg);
	border-color: var(--accent);
}

.calendar .month .day.current{
	background: var(--qibla-marker);
	color: var(--text-on-brand);
	border-color: var(--qibla-marker);
}

.calendar .month .day .gregorian{
	font-size: var(--font-size-md);
	font-weight: 600;
}

.calendar .month .day .hijri{
	display: block;
	color: var(--calendar-hijri);
	font-size: var(--font-size-sm);
	font-weight: 600;
}

.calendar .month .day.current .hijri{
	color: var(--text-on-brand);
}

.calendar .month .events{
	display: flex;
	flex-direction: column;
	gap: var(--card-gap);
	margin-top: 0;
	text-align: left;
	padding-right: 20px;
}

.calendar .month .events li{
	display: block;
	margin-bottom: 0;
	font-size: var(--font-size-lg);
}

.calendar .month .events li span{
	background: var(--error);
	display: inline-block;
	color: var(--text-on-brand);
	font-size: var(--font-size-sm);
	font-weight: 600;
	border-radius: var(--radius-sm);
	padding: 2px 6px 3px;
	margin-right: 5px;
}

.calendar__download-year{
	flex: 1 1 100%;
	width: 100%;
	margin-top: var(--card-gap);
}

/* GALLERY */
.gallery__item{
	-webkit-appearance: none;
	appearance: none;
	box-sizing: border-box;
	max-width: 270px;
	background: none;
	border: none;
	padding: 0;
	font: inherit;
	color: inherit;
	text-align: left;
	cursor: pointer;
}

.gallery__item img{
	width: 100%;
	height: auto;
	display: block;
	image-rendering: pixelated;
	border-radius: var(--radius-sm);
}

.city-list__link{
	display: block;
	overflow: hidden;
	color: var(--text);
	font-size: var(--font-size-lg);
	white-space: nowrap;
	text-overflow: ellipsis;
	line-height: 1.4;
}

.city-list__link-km{
	color: var(--text-muted);
}

/* PROSE */
.prose{
	display: flex;
	flex-direction: column;
	gap: var(--card-gap);
	line-height: 1.6;
	text-align: left;
}

.prose > :is(h2, h3, h4, h5, h6){
	margin: 0;
}

.prose a:not(.city-list__link){
	color: inherit;
}

.prose ol li:before{
	content: counter(list) ". ";
	counter-increment: list;
}

.prose table{
	max-width: 100%;
	display: inline-block;
	vertical-align: top;
	overflow-x: auto;
	text-align: left;
	border-collapse: collapse;
	border-spacing: 0;
}

.prose table th{
	color: var(--text);
	font-weight: 600;
	text-align: left;
	vertical-align: bottom;
}

.prose table th, .prose table td{
	vertical-align: top;
	border: none;
	border-bottom: 1px solid var(--border-table);
	padding: 10px 15px;
}

.prose table thead th{
	border-top: 1px solid var(--border-table);
}

.prose .video{
	position: relative;
	height: auto;
	overflow: hidden;
	padding-bottom: 56.25%;
}

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

/* IMAGES */
.picture{
	display: flex;
	flex-direction: column;
	gap: 5px;
	margin: 0;
}

.picture img{
	max-width: 100%;
	height: auto;
	display: block;
	margin: 0 auto;
	border-radius: var(--radius-md);
}

.picture .caption{
	display: block;
	color: var(--caption);
	font-size: 80%;
	padding: 5px 0 0;
}

/* FOOTER */
.footer{
	width: 100%;
	flex: 0 0 auto;
	margin-top: var(--section-gap);
	color: var(--text-on-brand);
	font-size: var(--font-size-md);
	text-align: center;
	padding-block: var(--gutter);
}

.footer a{
	color: var(--text-on-brand);
	font-size: var(--font-size-md);
	border-bottom: 1px solid var(--footer-link-border);
}

/* SEARCH DROPDOWN */
.search__dropdown{
	z-index: 9999;
	position: absolute;
	left: 0;
	right: 0;
	top: calc(100% + 4px);
	background: var(--search-bg);
	height: auto;
	text-align: left;
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-md);
	padding: 6px;
	list-style: none;
	margin: 0;
}

.search__dropdown li{
	display: block;
}

.search__dropdown li a{
	display: block;
	color: var(--text);
	font-size: 17px;
	line-height: 1.5;
	border-radius: var(--radius-sm);
	padding: 5px 10px;
}

.search__dropdown li a:hover,
.search__dropdown li a:focus-visible{
	background: var(--accent);
	color: var(--accent-text);
}

/* LIGHTBOX */
.lightbox{
	z-index: 10001;
	position: fixed;
	inset: 0;
	background: rgb(34 34 34 / 74%);
	display: none;
}

.lightbox--visible{
	display: block;
}

.lightbox__image{
	z-index: 1;
	position: fixed;
	top: 50%;
	left: 50%;
	width: auto;
	max-width: 95vw;
	max-height: 95vh;
	display: block;
	transform: translate(-50%, -50%);
}

.lightbox__close, .lightbox__prev, .lightbox__next{
	z-index: 2;
	position: fixed;
	background: rgb(34 34 34 / 66%);
	cursor: pointer;
	color: #fff;
	font-size: var(--font-size-md);
	border: none;
	outline: none;
	padding: 15px;
}

.lightbox__close{
	top: 0;
	right: 0;
}

.lightbox__prev, .lightbox__next{
	top: calc(50% - 22px);
}

.lightbox__prev{
	left: 0;
}

.lightbox__next{
	right: 0;
}

/* Leaflet */
.leaflet-pane, .leaflet-tile, .leaflet-marker-icon, .leaflet-marker-shadow, .leaflet-tile-container, .leaflet-pane > svg, .leaflet-pane > canvas, .leaflet-zoom-box, .leaflet-layer{
	position: absolute;
	left: 0;
	top: 0;
}

.leaflet-container{
	overflow: hidden;
	-webkit-tap-highlight-color: transparent;
	background: var(--color-surface);
	outline: 0;
	font-family: inter;
	font-size: 12px;
	line-height: 1.5;
}

.leaflet-tile, .leaflet-marker-icon, .leaflet-marker-shadow{
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
	-webkit-user-drag: none;
}

.leaflet-marker-icon, .leaflet-marker-shadow{
	display: block;
}

.leaflet-container .leaflet-overlay-pane svg, .leaflet-container .leaflet-marker-pane img, .leaflet-container .leaflet-shadow-pane img, .leaflet-container .leaflet-tile-pane img, .leaflet-container .leaflet-tile{
	max-width: none !important;
	max-height: none !important;
}

.leaflet-container.leaflet-touch-zoom{
	-ms-touch-action: pan-x pan-y;
	touch-action: pan-x pan-y;
}

.leaflet-container.leaflet-touch-drag{
	-ms-touch-action: pinch-zoom;
	touch-action: pinch-zoom;
}

.leaflet-container.leaflet-touch-drag.leaflet-touch-zoom{
	-ms-touch-action: none;
	touch-action: none;
}

.leaflet-container a{
	-webkit-tap-highlight-color: rgba(51, 181, 229, 0.4);
	color: #0078A8;
}

.leaflet-tile{
	filter: inherit;
	visibility: hidden;
}

.leaflet-tile-loaded{
	visibility: inherit;
}

.leaflet-zoom-box{
	width: 0;
	height: 0;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	z-index: 800;
	border: 2px dotted #38f;
	background: rgba(255,255,255,0.5);
}

.leaflet-overlay-pane svg{
	-moz-user-select: none;
}

.leaflet-pane{
	z-index: 400;
}

.leaflet-tile-pane{
	z-index: 200;
}

.leaflet-overlay-pane{
	z-index: 400;
}

.leaflet-shadow-pane{
	z-index: 500;
}

.leaflet-marker-pane{
	z-index: 600;
}

.leaflet-map-pane canvas{
	z-index: 100;
}

.leaflet-map-pane svg{
	z-index: 200;
}

.leaflet-control{
	position: relative;
	z-index: 800;
	pointer-events: auto;
	float: left;
	clear: both;
	cursor: auto;
}

.leaflet-top, .leaflet-bottom{
	position: absolute;
	z-index: 1000;
	pointer-events: none;
}

.leaflet-top{
	top: 10px;
}

.leaflet-right{
	right: 10px;
}

.leaflet-bottom{
	bottom: 0;
}

.leaflet-left{
	left: 0;
}

.leaflet-right .leaflet-control{
	float: right;
	margin-right: 10px;
}

.leaflet-top .leaflet-control{
	margin-top: 10px;
}

.leaflet-bottom .leaflet-control{
	margin-bottom: 10px;
}

.leaflet-left .leaflet-control{
	margin-left: 10px;
}

.leaflet-fade-anim .leaflet-tile{
	will-change: opacity;
}

.leaflet-zoom-animated{
	-webkit-transform-origin: 0 0;
	-ms-transform-origin: 0 0;
	transform-origin: 0 0;
}

.leaflet-zoom-anim .leaflet-zoom-animated{
	will-change: transform;
	-webkit-transition: -webkit-transform 0.25s cubic-bezier(0,0,0.25,1);
	-moz-transition: -moz-transform 0.25s cubic-bezier(0,0,0.25,1);
	transition: transform 0.25s cubic-bezier(0,0,0.25,1);
}

.leaflet-zoom-anim .leaflet-tile, .leaflet-pan-anim .leaflet-tile{
	-webkit-transition: none;
	-moz-transition: none;
	transition: none;
}

.leaflet-zoom-anim .leaflet-zoom-hide{
	visibility: hidden;
}

.leaflet-interactive{
	cursor: pointer;
}

.leaflet-grab{
	cursor: grab;
}

.leaflet-crosshair, .leaflet-crosshair .leaflet-interactive{
	cursor: crosshair;
}

.leaflet-dragging .leaflet-grab, .leaflet-dragging .leaflet-grab .leaflet-interactive{
	cursor: grabbing;
}

.leaflet-marker-icon, .leaflet-marker-shadow, .leaflet-pane > svg path, .leaflet-tile-container{
	pointer-events: none;
}

.leaflet-marker-icon.leaflet-interactive, .leaflet-pane > svg path.leaflet-interactive{
	pointer-events: auto;
}

.leaflet-container a.leaflet-active{
	outline: 2px solid orange;
}

.leaflet-bar{
	border-radius: 4px;
}

.leaflet-bar a{
	background: #fff;
	border-bottom: 1px solid var(--color-surface);
	width: 26px;
	height: 26px;
	line-height: 26px;
	display: block;
	text-align: center;
	text-decoration: none;
	color: #000;
}

.leaflet-bar a{
	background-position: 50% 50%;
	background-repeat: no-repeat;
	display: block;
}

.leaflet-bar a:first-child{
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
}

.leaflet-bar a:last-child{
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
	border-bottom: none;
}

.leaflet-bar a.leaflet-disabled{
	cursor: default;
	background: #fff;
	color: var(--text-muted);
	font-weight: 400;
}

.leaflet-touch .leaflet-bar a{
	width: 44px;
	height: 44px;
	line-height: 44px;
}

.leaflet-touch .leaflet-bar a:last-child{
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
}

.leaflet-control-zoom-in, .leaflet-control-zoom-out{
	font-family: inter;
	font-size: 18px;
	font-weight: 600;
	text-indent: 1px;
}

.leaflet-touch .leaflet-control-zoom-in, .leaflet-touch .leaflet-control-zoom-out{
	font-size: 22px;
}

.leaflet-container .leaflet-control-attribution{
	background: rgba(255, 255, 255, 0.7);
	margin: 0;
}

.leaflet-control-attribution{
	padding: 0 5px;
	color: #333;
	font-size: 11px;
}

.leaflet-control-attribution a{
	text-decoration: none;
}

.leaflet-touch .leaflet-bar{
	background-clip: padding-box;
}

.leaflet-div-icon{
	background: #fff;
	border: 1px solid #666;
}


.qibla__map.leaflet-container .leaflet-control-attribution{
	background: transparent;
}

/* Layout: container */
.container{
	width: 100%;
	max-width: var(--layout-max);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.content__inner > .card{
	min-width: 0;
}

.schedule__date{
	margin: 0;
}

.card .tomorrow{
	margin: 0;
	margin-inline: calc(-1 * var(--card-padding-inline));
	padding: 20px var(--card-padding-inline) 0;
	border-top: 1px solid var(--border);
	font-size: var(--font-size-md);
	font-weight: 400;
	line-height: 1.3;
}

.schedule-table__scroll{
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	margin-inline: calc(-1 * var(--card-padding-inline));
	padding-inline: var(--card-padding-inline);
}

.schedule-table__scroll::-webkit-scrollbar{
	width: 0;
	height: 0;
}

.schedule-table__table{
	min-width: 100%;
}

.schedule-table__table th,
.schedule-table__table td{
	padding: 10px 15px;
	border-bottom: 1px solid var(--border-table);
}

.schedule-table__table thead th{
	border-top: 1px solid var(--border-table);
}

.settings-form__field{
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
	text-align: left;
}

.settings-form__label{
	display: block;
	margin-bottom: 0;
	font-family: inherit;
	font-size: var(--font-size-md);
	font-weight: 600;
}

.settings-form__input, .settings-form__textarea{
	background-color: var(--color-surface);
	color: var(--text);
	width: 100%;
	height: 48px;
	display: block;
	font-family: inherit;
	font-size: var(--font-size-md);
	font-weight: 400;
	line-height: 48px;
	border: none;
	outline: none;
	border-radius: var(--radius-md);
	padding: 0 15px;
	margin: 0;
}

.settings-form__select{
	background-color: var(--color-surface);
	color: var(--text);
	width: 100%;
	height: 48px;
	display: block;
	font-family: inherit;
	font-size: var(--font-size-md);
	font-weight: 400;
	line-height: 48px;
	border: none;
	outline: none;
	border-radius: var(--radius-md);
	margin: 0;
	padding: 0 40px 0 15px;
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 12px 8px;
}

.settings-form__textarea{
	height: 96px;
	padding: 10px 15px;
	line-height: 1.45;
	resize: vertical;
}

.settings-form__consent{
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0;
	font-size: var(--font-size-md);
	font-weight: 400;
	line-height: 1.45;
	cursor: pointer;
}

.settings-form__checkbox{
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	margin: 2px 0 0;
	accent-color: var(--brand);
	cursor: pointer;
}

.settings-form__consent a{
	color: inherit;
	border-bottom: 1px solid var(--underline);
}

.settings-form__submit{
	background: var(--accent);
	height: 40px;
	font-family: inherit;
	font-size: var(--font-size-md);
	line-height: 40px;
	color: var(--accent-text);
	border: none;
	border-radius: var(--radius-sm);
	padding: 0 15px;
	cursor: pointer;
}

.mosque-list .button:hover,
.mosque-list .button:active{
	background: transparent;
	color: var(--text);
}

.schedule-table__table tbody tr[aria-current="date"] > *{
	background: var(--row-highlight);
}

.schedule-table__table tbody tr:hover > *{
	background: var(--row-highlight);
}

/* MUSLIM NAMES */
.names-picker__form{
	min-width: 0;
}

.names-picker .search{
	width: 100%;
	border: 1px solid var(--border-medium);
	border-radius: var(--radius-md);
}

.names-picker .search .search__field{
	padding: 0 15px;
}

.names-picker__labels-wrap,
.names-picker__letters-wrap{
	min-width: 0;
}

.names-picker .tabs{
	width: 100%;
}

.names-picker__labels.tabs__nav,
.names-picker__letters.tabs__nav{
	display: flex;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

.names-picker__labels.tabs__nav{
	flex-wrap: wrap;
	white-space: normal;
}

.names-picker__letters.tabs__nav{
	flex-wrap: nowrap;
	white-space: nowrap;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.names-picker__letters.tabs__nav::-webkit-scrollbar{
	width: 0;
	height: 0;
}

.names-picker .tabs__tab{
	flex: 0 0 auto;
	text-decoration: none;
}

@media (max-width: 640px){
	.names-picker .tabs{
		display: block;
	}

	.names-picker__labels.tabs__nav{
		flex-wrap: nowrap;
		white-space: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.names-picker__labels.tabs__nav::-webkit-scrollbar{
		width: 0;
		height: 0;
	}
}

.names-picker .tabs__tab--muted:not(.tabs__tab--active){
	color: var(--text-muted);
	opacity: 0.45;
}

.names-picker__status,
.names-picker__hint{
	margin: 0;
	color: var(--text-muted);
	font-size: var(--font-size-sm);
}

.names-picker__reset-link{
	color: var(--link);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
	text-decoration-color: var(--underline);
}

.names-picker__results{
	display: flex;
	flex-direction: column;
	gap: var(--card-gap);
}

.names-picker__results--empty{
	display: none;
}

.names-letter{
	display: flex;
	flex-direction: column;
	gap: var(--card-gap);
}

.names-letter__title{
	margin: 0;
}

.names-list{
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
	gap: 18px var(--card-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.names-item{
	display: flex;
	flex-direction: column;
	gap: var(--card-gap);
	background: var(--surface);
	min-width: 0;
	text-align: left;
	border-radius: var(--radius-md);
	padding: var(--gutter);
}

.names-item__title{
	font-size: var(--font-size-lg);
	font-weight: 600;
	line-height: 1.4;
	margin: 0;
}

.names-item__meaning{
	margin: 0;
	color: var(--text-secondary);
	font-size: var(--font-size-md);
	line-height: 1.4;
}

.names-item__variants{
	margin: 0;
	color: var(--text-muted);
	font-size: var(--font-size-sm);
	line-height: 1.4;
}

.names-item--hidden,
.names-letter--hidden{
	display: none !important;
}

.asma-names__list{
	counter-reset: asma-name;
}

.asma-names__item{
	position: relative;
}

.asma-names__number{
	position: absolute;
	bottom: var(--gutter);
	right: var(--gutter);
	margin: 0;
	color: var(--text-muted);
	font-size: var(--font-size-sm);
	line-height: 1.4;
}

.asma-names__item .names-item__title{
	color: var(--text);
	font-size: var(--font-size-lg);
	font-weight: 600;
	line-height: 1.4;
}

.asma-names__arabic{
	margin: 0;
	color: var(--text);
	font-family: 'Amiri', "Arial Unicode MS", sans-serif;
	font-size: calc(var(--font-size-lg) + 2px);
	font-weight: 400;
	line-height: 1.6;
}

.asma-names__item .names-item__meaning{
	color: var(--text-secondary);
	font-size: var(--font-size-md);
	font-weight: 400;
	line-height: 1.4;
}

.asma-names__play{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	align-self: flex-start;
	width: 32px;
	height: 32px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: var(--radius-sm);
	background: transparent;
	cursor: pointer;
}

.asma-names__play-icon{
	display: block;
	width: 24px;
	height: 24px;
}

.asma-names__audio{
	display: none;
}

/* THEME SWITCH */
.theme-switch{
	display: flex;
	justify-content: center;
	width: 100%;
}

.theme-switch__fieldset{
	margin: 0;
	padding: 0;
	border: 0;
	min-inline-size: 0;
}

.theme-switch__options{
	display: inline-flex;
	flex-wrap: nowrap;
	max-width: 100%;
	font-size: var(--font-size-sm);
	background: var(--theme-switch-bg);
	border-radius: 999px;
	padding: 4px;
}

.theme-switch__option{
	position: relative;
	display: inline-flex;
}

.theme-switch__input{
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
	margin: 0;
}

.theme-switch__label{
	display: inline-block;
	background: transparent;
	color: var(--theme-switch-text);
	font-size: 1em;
	line-height: 1.3;
	white-space: nowrap;
	border-radius: 999px;
	padding: 0.5em 1.15em;
	cursor: pointer;
	text-align: center;
	transition: background-color .15s ease, color .15s ease;
}

.theme-switch__input:checked + .theme-switch__label{
	background: var(--theme-switch-active-bg);
}

.theme-switch__input:focus-visible + .theme-switch__label{
	outline: 2px solid var(--theme-switch-focus);
	outline-offset: 1px;
}

html[data-theme="dark"] .leaflet-tile-pane{
	filter: brightness(0.82) saturate(0.75);
}

html[data-theme="dark"] .leaflet-bar a,
html[data-theme="dark"] .leaflet-div-icon{
	background: var(--bg);
	color: var(--text);
	border-color: var(--border-strong);
}

html[data-theme="dark"] .leaflet-bar a.leaflet-disabled{
	background: var(--bg);
	color: var(--text-muted);
}

html[data-theme="dark"] .leaflet-control-attribution{
	background: rgb(34 34 34 / 45%);
	color: var(--text-muted);
}

html[data-theme="dark"] .leaflet-control-attribution a{
	color: var(--link);
}

html[data-theme="dark"] .locate{
	background: var(--my-city-bg);
	color: var(--my-city-text);
}

html[data-theme="dark"] .locate[aria-pressed="true"],
html[data-theme="dark"] .locate:disabled{
	background: var(--share-schedule-bg);
	color: var(--share-schedule-text);
}

html[data-theme="dark"] .my-city[aria-pressed="true"] .my-city__icon,
html[data-theme="dark"] .locate[aria-pressed="true"] .locate__icon,
html[data-theme="dark"] .locate:disabled .locate__icon,
html[data-theme="dark"] .share-schedule__icon{
	filter: var(--search-icon-filter);
}

html[data-theme="dark"] .install__icon,
html[data-theme="dark"] .schedule-table__download-icon,
html[data-theme="dark"] .asma-names__play-icon{
	filter: var(--search-icon-filter);
}

html[data-theme="dark"] .asma-names__play{
	background: var(--btn-secondary-bg);
	color: var(--text-on-brand);
}

html[data-theme="dark"] .header__logo-image{
	filter: brightness(0) invert(1);
	opacity: 0.8;
}

html[data-theme="dark"] .settings-form__select{
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23babdb6' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
}