body {
	font-family: Arial, sans-serif;
	margin: 0;
	padding: 0;
	background-color: #f9f9f9;
	min-height: 100vh;
}

.container {
	background: #fff;
	padding: 20px;
	margin: 0 auto;
	border-radius: 8px;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
	width: 90%;
	max-width: 500px;
}

table {
	width: fit-content;
	margin: 0 auto;
	border-collapse: collapse;
}

th,
td {
	border: 1px solid #ccc;
	padding: 8px;
	text-align: center;
	vertical-align: middle;
	font-size: 20px;
}

th {
	background-color: #f4f4f4;
}

tbody tr:nth-child(even) {
	background-color: #f9f9f9;
}

p {
	text-align: left;
	font-size: 18px;
}


   
#map {
	height: 800px;
	padding:2%;
	width: 96%;
}
a { text-decoration: none; }

h3 {
	text-align:center;
	text-transform: uppercase;
}
p {
	padding:10px;
}
.hexagon {
	width: 40px;
	height: 50px;
	background: linear-gradient(to bottom right, #57a1dd, #355d8c);
	color: white;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
	font-weight: bold;
	clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
	box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
	margin: 0 auto;
}
th{
	border:none;
}
.dayTime th{
	font-weight:normal;
	text-transform:uppercase;
}
.dt2 th{
	padding:0;
}
.col3 td {
	width:33%;
}
/* =========================================================
   MAIN MASJID PROFILE
   ========================================================= */

.masjid-profile-name {
	text-transform: uppercase;
	font-weight: bold;
	padding: 4px 8px 2px;
	line-height: 1.15;
}


/* Masjid Address */

.masjid-profile-address {
	padding: 0 10px 0px;
	text-align: center;
	font-size: 12px;
	line-height: 8px;
	color: #666;
	font-weight: normal;
	text-transform: none;
	border: 0;
	background-color: #f4f4f4;
}

/* =========================================================
   SECTION TITLE
   ========================================================= */

.section-title {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin: 18px 0 10px;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.2;
	text-transform: uppercase;
	color: #263238;
}

.section-title::before,
.section-title::after {
	content: "";
	flex: 1;
	height: 1px;
	background: #d5dadd;
}

.section-subtitle {
	text-align: center;

	margin-top: -5px;
	margin-bottom: 8px;

	font-size: 9px;
	font-weight: 500;

	letter-spacing: 0.8px;
	text-transform: uppercase;

	color: #777;
}


/* Divider lines */

.section-title-line {
	flex: 1;

	height: 1px;

	background: #d9dfe5;
}


/* Title */

.section-title h3 {
	margin: 0;
	padding: 0;

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

	line-height: 18px;

	color: #3b699a;

	white-space: nowrap;

	letter-spacing: 0.5px;

	text-transform: uppercase;
}
/* =========================================================
MAIN MASJID PROFILE — DIRECTION
========================================================= */

.main-direction-cell {
	padding: 10px 0 !important;
	text-align: center;
}
.main-direction-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-width: 150px;
	padding: 8px 18px;
	border: 1px solid #72bda2;
	border-radius: 8px;
	background: #fff;
	color: #087b4c;
	text-decoration: none;
	font-size: 14px;
	font-weight: 700;
	line-height: 20px;
	transition:
		background 0.2s ease,
		border-color 0.2s ease,
		color 0.2s ease,
		transform 0.15s ease;
}
.main-direction-button:hover {
	background: #f2fbf7;
	border-color: #087b4c;
	color: #087b4c;

	text-decoration: none;
}


.main-direction-button:active {
	transform: scale(0.97);
}

/* =========================================================
   LOCAL SALAH TIMING
   ========================================================= */

.local-salah-timing {
	display: grid;

	grid-template-columns:
		repeat(6, minmax(0, 1fr));

	gap: 4px;
	
	padding: 0 15px;

	width: 100%;

	box-sizing: border-box;
}


/* =========================================================
   TIMING TILE
   ========================================================= */

.local-salah-tile {
	display: flex;

	flex-direction: column;

	align-items: center;
	justify-content: center;

	min-width: 0;

	padding: 6px 2px 7px;

	background: #eef0e5;

	border-radius: 12px;

	box-sizing: border-box;

	text-align: center;

	line-height: 1;
}


/* =========================================================
   ICON
   ========================================================= */

.local-salah-icon {
	height: 18px;

	display: flex;
	align-items: center;
	justify-content: center;

	font-size: 15px;

	margin-bottom: 2px;

	color: #111;
}


/* =========================================================
   TIME
   ========================================================= */

.local-salah-time {
	font-size: 17px;

	font-weight: 500;

	line-height: 20px;

	white-space: nowrap;

	color: #111;
}


/* =========================================================
   ARABIC / URDU
   ========================================================= */

.local-salah-ar {
	font-size: 9px;
	line-height: 11px;
	height: 11px;
	white-space: nowrap;
	color: #222;
}


/* =========================================================
   ENGLISH NAME
   ========================================================= */

.local-salah-name {
	font-size: 11px;

	font-weight: 500;

	line-height: 11px;

	margin-top: 2px;

	color: #222;

	letter-spacing: 0.2px;
}
/* =========================================================
   FLOATING LOCAL SALAH TIMING
   ========================================================= */

.floating-local-salah {
	position: fixed;

	left: 50%;
	bottom: 10px;

	width: min(500px, calc(100% - 20px));

	padding: 6px;

	background: rgba(255, 255, 255, 0.97);

	

	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.16);

	box-sizing: border-box;

	z-index: 9999;

	opacity: 0;
	visibility: hidden;

	transform: translate(-50%, 20px);

	transition:
		opacity 0.25s ease,
		transform 0.25s ease,
		visibility 0.25s ease;
}


.floating-local-salah.visible {
	opacity: 1;
	visibility: visible;

	transform: translate(-50%, 0);
}


/* =========================================================
   FLOATING TITLE
   ========================================================= */

.floating-local-salah-title {
	text-align: center;

	font-size: 10px;
	font-weight: bold;

	letter-spacing: 0.5px;

	color: #333;

	padding: 2px 0 5px;
}


/* =========================================================
   SIX TIMING TILES
   ========================================================= */

.floating-salah-grid {
	display: grid;

	grid-template-columns:
		repeat(6, minmax(0, 1fr));

	gap: 3px;
}


/* =========================================================
   TILE
   ========================================================= */

.floating-salah-tile {
	display: flex;

	flex-direction: column;

	align-items: center;
	justify-content: center;

	min-width: 0;

	padding: 5px 2px;

	background: #eef0e5;

	border-radius: 6px;

	text-align: center;

	line-height: 1;
}


.floating-salah-tile span {
	display: block;

	font-size: 9px;
	line-height: 11px;

	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;

	max-width: 100%;
}

.floating-salah-icon {
	height: 14px;

	display: flex;
	align-items: center;
	justify-content: center;

	font-size: 11px;

	line-height: 14px;

	margin-bottom: 1px;

	color: #111;
}

.floating-salah-tile strong {
	display: block;

	margin-top: 2px;

	font-size: 15px;
	line-height: 18px;

	font-weight: 600;

	white-space: nowrap;
}


.main-direction-icon {
	width: 24px;
	height: 24px;

	fill: #087b4c;

	flex: 0 0 auto;
}


/* =========================================================
   NEAREST MASAJID
   ========================================================= */
#nearest-masajid-list {
  padding: 0px 15px;
}
.nearest-masajid-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	width: 100%;
	margin-bottom: 10px;
}



/* =========================================================
   NEAREST MASAJID — DISTANCE TABS
   ========================================================= */

.nearest-distance-bar {
	display: flex;
	width: 100%;
	box-sizing: border-box;

	overflow-x: auto;
	overflow-y: visible;

	white-space: nowrap;
	flex-wrap: nowrap;

	padding: 0 15px 8px;
	margin: 0;

	gap: 0;

	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.nearest-distance-bar::-webkit-scrollbar {
	display: none;
}


/* =========================================================
   TAB
   ========================================================= */

.nearest-distance-option {
	position: relative;

	flex: 1 1 0;
	min-width: 0;

	height: 38px;

	padding: 0 10px;

	margin: 0;

	border: 1px solid #ccc;
	border-radius: 0;

	background: #fff;
	color: #222;

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

	text-align: center;
	white-space: nowrap;

	cursor: pointer;

	box-sizing: border-box;

	transition:
		background 0.2s ease,
		color 0.2s ease,
		border-color 0.2s ease;
}


/* =========================================================
   REMOVE DOUBLE DIVIDERS
   ========================================================= */

.nearest-distance-option + .nearest-distance-option {
	border-left: 0;
}


/* =========================================================
   FIRST TAB — LEFT CORNER
   ========================================================= */

.nearest-distance-option:first-child {
	border-radius: 8px 0 0 8px;
}


/* =========================================================
   LAST TAB — RIGHT CORNER
   ========================================================= */

.nearest-distance-option:last-child {
	border-radius: 0 8px 8px 0;
}


/* =========================================================
   ACTIVE TAB
   ========================================================= */

.nearest-distance-option.active {
	background: #3b699a;
	color: #fff;

	border-color: #3b699a;

	font-weight: bold;

	z-index: 2;
}


/* =========================================================
   ACTIVE TAB POINTER
   ========================================================= */

.nearest-distance-option.active::after {
	content: "";

	position: absolute;

	left: 50%;
	bottom: -7px;

	transform: translateX(-50%);

	width: 0;
	height: 0;

	border-left: 7px solid transparent;
	border-right: 7px solid transparent;
	border-top: 7px solid #3b699a;
}


/* =========================================================
   HOVER
   ========================================================= */

.nearest-distance-option:not(.active):hover {
	background: #f5f7fa;
}


/* =========================================================
   SMALL SCREEN
   ========================================================= */

@media (max-width: 450px) {

	.nearest-distance-option {
		height: 36px;

		padding: 0 8px;

		font-size: 12px;
	}
}



/* =========================================
	Nearest Masajid List
========================================= */

.nearest-masajid-list {
	width: 100%;

	/* Natural height for short lists */
	height: auto;

	/* Maximum approximately 4:5 */
	max-height: 625px;

	overflow-y: auto;
	overflow-x: hidden;

	box-sizing: border-box;

	scrollbar-width: thin;
}



/* =========================================================
   MASJID CARD
   ========================================================= */

.nearest-masjid-item {
	display: flex;
	align-items: center;

	width: 100%;

	padding: 7px 5px;

	border-bottom: 1px solid #eee;

	box-sizing: border-box;

	min-height: 55px;
}

/* =========================================================
   LEFT 60%
   ========================================================= */

.nearest-masjid-info {
	width: 60%;
	min-width: 0;

	display: flex;
	flex-direction: column;
	justify-content: center;
}


.nearest-masjid-name {
	font-size: 18px;
	font-weight: 700;

	line-height: 20px;

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


.nearest-masjid-address {
	font-size: 11px;
	color: #777;

	line-height: 14px;

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


.nearest-masjid-name a {
	color: #16233a;
	text-decoration: none;
}


.nearest-masjid-name a:hover {
	color: #15945d;
}


/* Direction */
.nearest-masjid-direction {
	font-size: 11px;

	margin-top: 3px;
}

.nearest-masjid-direction-row {
	margin-top: auto;
	padding-top: 18px;
}


/* =========================================================
   DIRECTION BUTTON
   ========================================================= */

.nearest-masjid-direction {
	font-size: 11px;
	margin-top: 4px;
}


.nearest-direction-button {
	display: inline-flex;
	align-items: center;

	gap: 4px;

	padding: 3px 7px;

	border: 1px solid #cbd8e2;
	border-radius: 5px;

	background: #fafcff;

	color: #1769aa;

	text-decoration: none;

	font-size: 10px;
	font-weight: 500;

	line-height: 15px;

	white-space: nowrap;

	box-sizing: border-box;

	transition:
		background 0.15s ease,
		border-color 0.15s ease,
		color 0.15s ease;
}


.nearest-direction-button:hover {
	background: #f0f7fc;

	border-color: #1769aa;

	color: #0d568e;
}


/* Navigation icon */

.nearest-direction-icon {
	width: 13px;
	height: 13px;

	fill: #087b4c;

	flex: 0 0 auto;
}


/* =========================================================
   DISTANCE
   ========================================================= */

.nearest-distance {
	border-left: 1px solid #cbd8e2;

	margin-left: 5px;
	padding-left: 7px;

	color: #1769aa;

	font-weight: 800;
}


/* =========================================================
   RIGHT 40%
   ========================================================= */

.nearest-masjid-times {
	width: 40%;

	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-around;

	gap: 4px;

	height: 100%;
}


/* =========================================================
   TIME TILES
   ========================================================= */

.nearest-time-tile {
	min-width: 52px;

	text-align: center;

	background: #f3f3f3;

	border-radius: 7px;

	padding: 5px 3px;

	box-sizing: border-box;

	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}


/* Current period = slightly bigger */

.nearest-time-tile.current-period {
	min-width: 52px;

	min-height: 52px;
}


/* Next period = slightly smaller + shifted */

.nearest-time-tile.next-period {
	min-width: 47px;

	min-height: 47px;

	transform: none;
	opacity: 0.9;
}


/* =========================================================
   TILE TEXT
   ========================================================= */

.nearest-time-name {
	font-size: 12px;
	
	line-height: 14px;
	padding: 1px 3px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	text-transform: uppercase;
}


.current-period .nearest-time-name {
	color: #087b4c;
}


.next-period .nearest-time-name {
	color: #1769aa;
}


.nearest-time-value {
	font-size: 18px;

	font-weight: bold;

	line-height: 20px;

	white-space: nowrap;
}


.next-period .nearest-time-value {
	font-size: 15px;
}


.nearest-no-result {
	padding: 20px;
	text-align: center;
	color: #777;
}

/* =========================================================
   MASJID PROFILE QR POSTER
   ========================================================= */

.profile-qr-poster {
	margin-top: 24px;
	padding: 16px 14px;

	text-align: center;

	border-top: 1px solid #e1e5e8;

	background: #fafbfb;
	border-radius: 8px;
}


.profile-qr-poster-title {
	font-size: 15px;
	font-weight: 700;

	color: #263238;

	margin-bottom: 6px;
}


.profile-qr-poster-text {
	max-width: 430px;

	margin: 0 auto 12px;

	font-size: 11px;
	line-height: 16px;

	color: #70777c;
}


.profile-qr-poster-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	padding: 8px 14px;

	border: 1px solid #3b699a;
	border-radius: 6px;

	background: #3b699a;
	color: #fff;

	font-size: 11px;
	font-weight: 700;

	cursor: pointer;

	transition:
		background 0.2s ease,
		border-color 0.2s ease,
		transform 0.15s ease;
}


.profile-qr-poster-button:hover {
	background: #315a84;
	border-color: #315a84;
}


.profile-qr-poster-button:active {
	transform: translateY(1px);
}

/* =========================================================
   MASAJID NETWORK CREDIT FOOTER
   ========================================================= */

.masajid-credit-footer {
	width: 100%;
	margin-top: 30px;
	padding: 20px 15px 25px;

	box-sizing: border-box;

	text-align: center;

	border-top: 1px solid #ddd;

	color: #555;

	font-size: 13px;
	line-height: 1.7;
}


/* Arabic credit */

.credit-arabic {
	margin-bottom: 10px;

	font-size: 17px;
	font-weight: 600;

	color: #333;

	direction: rtl;
}


/* Main message */

.credit-message {
	max-width: 600px;
	margin: 0 auto 6px;

	font-size: 13px;
}


/* Project purpose */

.credit-purpose {
	max-width: 600px;
	margin: 0 auto;

	font-size: 12px;

	color: #777;
}


/* Small screens */

@media (max-width: 450px) {

	.masajid-credit-footer {
		margin-top: 25px;
		padding: 18px 12px 22px;

		font-size: 13px;
		line-height: 1.65;
	}

	.credit-arabic {
		font-size: 16px;
		line-height: 1.8;
		margin-bottom: 9px;
	}

	.credit-message {
		font-size: 13px;
		padding: 0 5px;
	}
	

}

.masjid-map-label {
	

	text-shadow:
		-1px -1px 0 #fff,
		 1px -1px 0 #fff,
		-1px  1px 0 #fff,
		 1px  1px 0 #fff,
		-1px  0px 0 #fff,
		 1px  0px 0 #fff,
		 0px -1px 0 #fff,
		 0px  1px 0 #fff;
}