/* Extracted from base.html head (3 inline <style> blocks) to cut ~48KB per HTML page. Bump ?v= in base.html when editing. */

		/* Shared, constrained H1 size for /<type>/<country>/ hub pages
		   (sunrise, sunset, weather, aqi, prayer-times, holidays, time-changes)
		   so they match /countries/ instead of falling through to Bootstrap's ~2.5rem default. */
		h1.hub-country-h1 { font-size: 1.8em; }

		/* Cap oversized Bootstrap display-* H1s on phones so they don't
		   dwarf the page (Bootstrap's .display-* are fixed rem sizes that
		   do not shrink on small screens). */
		@media (max-width: 576px) {
			h1.display-1, h1.display-2, h1.display-3, h1.display-4 { font-size: 2rem; line-height: 1.2; }
			h1.display-5, h1.display-6 { font-size: 1.75rem; line-height: 1.2; }
		}

		/* CDN-Safe Visibility */
		.logged-in-only {
			display: none !important;
		}

		.logged-out-only {
			display: block;
		}

		/* If cookie is present, swap visibility */
		.user-logged-in .logged-in-only {
			display: flex !important;
		}

		.user-logged-in .logged-out-only {
			display: none !important;
		}

		/* If Premium, hide the entire ad container */
		.user-is-premium .ads-container {
			display: none !important;
		}





		.hidden-main {
			display: none;
		}

		/* Breadcrumb nav — semantic Home → Continent → Country → City trail.
		   Powers BreadcrumbList JSON-LD schema for rich snippets on Google + Bing. */
		.breadcrumbs-nav { font-size: 0.85rem; margin: 8px 0 12px; color: #555; }
		.breadcrumbs-nav .breadcrumb-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0; }
		.breadcrumbs-nav .breadcrumb-item { display: inline-flex; align-items: center; }
		.breadcrumbs-nav .breadcrumb-item a { color: #007bff; text-decoration: none; }
		.breadcrumbs-nav .breadcrumb-item a:hover { text-decoration: underline; }
		.breadcrumbs-nav .breadcrumb-item.active span { color: #333; font-weight: 500; }
		.breadcrumbs-nav .breadcrumb-sep { margin: 0 6px; color: #999; }

		/* Screen-reader-only text — visible to crawlers and assistive tech, hidden visually.
		   Use this to enrich anchor text (e.g. "Time in Tokyo") without UI noise. */
		.sr-only {
			position: absolute;
			width: 1px;
			height: 1px;
			margin: -1px;
			padding: 0;
			overflow: hidden;
			clip: rect(0, 0, 0, 0);
			white-space: nowrap;
			border: 0;
		}

		/* "EN" badge after nav links when the user is on an INTERFACE locale —
		   tells them the link's destination is in English (since interface locales
		   only translate chrome, not page content). The badge sits next to the link
		   text and stays small. Excludes the language switcher itself and any nav
		   item flagged with .nav-link-localized (e.g. the Qibla link, which IS
		   available in their locale). */
		body.is-interface-locale .navbar-nav .nav-link:not(.nav-link-localized):not(.lang-option)::after,
		body.is-interface-locale .nav-tabs .nav-link:not(.nav-link-localized):not(.lang-option)::after,
		body.is-interface-locale .nav-link:not(.nav-link-localized):not(.lang-option)::after,
		body.is-interface-locale footer a:not(.nav-link-localized):not([href^="mailto:"])::after,
		body.is-interface-locale .footer a:not(.nav-link-localized):not([href^="mailto:"])::after {
			content: " EN";
			display: inline-block;
			margin-left: 4px;
			padding: 0 4px;
			font-size: 0.6em;
			font-weight: 600;
			line-height: 1.4;
			color: #888;
			background: rgba(0, 0, 0, 0.05);
			border-radius: 3px;
			vertical-align: super;
		}


		/* Ensure body and html take up the full height of the page */
		html,
		body {
			height: 100%;
			margin: 0;
		}

		body {
			max-width: 1100px;
			padding: 0px !important;
			margin: 0 auto !important;
			display: flex !important;
			flex-direction: column !important;
		}

		main {
			flex-grow: 1;
		}

		a {
			color: #007bff;
			/* Your standard link color */
			text-decoration: none;
			/* Example: if you remove underlines by default */
		}

		/*a:visited {
		    color: #007bff; 
		} Same as unvisited */

		a:hover {
			color: #0056b3;
			/* Optional: different hover color */
			text-decoration: none;
			/* Optional: underline on hover */
		}

		.container-fluid {

			padding-right: 0px !important;
			padding-left: 0px !important;

		}

		.navbar {
			width: 100%;
			padding-bottom: 0;
			display: flex;
			justify-content: space-between;
			align-items: center;
			background-color: #ffffff !important;
			border-bottom: 1px solid #ddd;
			padding: 5px 0 0 5px !important;
		}

		/* Style for the burger menu icon with equal margins */
		.navbar-toggler {
			margin: 5px;
		}

		.nav-tabs {
			border-bottom: none;
			margin-bottom: 0;
		}

		.nav-tabs .nav-link {
			background: linear-gradient(to bottom, #f8f9fa, white);
			border: 1px solid #ddd;
			border-bottom: none;
			margin-right: 2px;
			border-radius: 0.25rem 0.25rem 0 0;
			padding: 8px 16px;
			color: #555;
		}

		@media (min-width: 992px) {
			.navbar-nav .nav-link,
			.nav-tabs .nav-link {
				font-size: 14px;
			}
		}

		.nav-tabs .nav-link.active {
			background-color: #007bff;
			border-color: #007bff #007bff #fff;
			color: white;
		}

		/* Hidden-but-accessible span for SEO + screen readers (e.g. " Widget" suffix in nav/footer links) */
		.visually-hidden-seo {
			position: absolute !important;
			width: 1px !important; height: 1px !important;
			padding: 0 !important; margin: -1px !important;
			overflow: hidden !important; clip: rect(0,0,0,0) !important;
			white-space: nowrap !important; border: 0 !important;
		}

		.nav-tabs .nav-link:hover {
			background-color: #e9ecef;
		}

		.navbar .navbar-brand {
			color: inherit;
		}

		footer {
			max-width: 1100px;
			margin: 0 auto;
			text-align: left;
			width: 100%;
			border-top: none;
			padding-top: 0;
			clear: both;
		}

		.abovefooter {
			max-width: 1100px;
			margin: 0 auto;
			text-align: left;
			width: 100%;
			border-top: 1px solid #ddd;
			padding-top: 10px;
			padding-bottom: 10px;
			clear: both;

			/* Desktop: No horizontal padding so it aligns with the container */
			padding-left: 0;
			padding-right: 0;
		}

		/* First abovefooter gets a thicker top border as section start */
		.abovefooter:first-child {
			border-top: 1px solid #ddd;
		}

		/* Apply horizontal padding ONLY on screens smaller than 992px (Mobile/Tablet) */
		@media (max-width: 991.98px) {
			.abovefooter {
				padding-left: 15px;
				padding-right: 15px;
			}
		}

		.abovefooter {
			/* Your existing styles for abovefooter */
			line-height: 1.6;
			/* Improves readability if links wrap */
		}

		.abovefooter a {
			/* Optional: if you want specific styling for these links */
			/* color: blue; */
			text-decoration: none;
			/* Or your preferred link style */
			margin-right: 0px;
			/* Tiny space before the separator starts */
		}

		.abovefooter a:hover {
			text-decoration: underline;
		}

		.city-separator {
			color: #666;
			/* Color of the dot, adjust as needed */
			/* You can add more padding/margin here if   isn't enough */
			/* For example:
		    padding-left: 5px;
		    padding-right: 5px;
		    */
			margin-left: 2px;
			/* Tiny space after the previous link */
		}


		/* Mobile view styling */
		@media (max-width: 992px) {

			/* Stack the nav items vertically when in mobile view */
			.nav-tabs .nav-item {
				width: 100%;
			}

			.nav-tabs .nav-link {
				display: block;
				width: 100%;
				text-align: left;
				padding: 10px 16px;
				border-radius: 0;
				border: 1px solid #ddd !important;
				margin-bottom: 2px;
			}
		}

		/* General container styling */
		#main-calculator-container {
			display: flex;
		}

		/* Content sections for inputs and results */
		.content-half {
			flex: 1 1 350px;
			max-width: 350px;
		}


		/* General container styling */
		/* General container styling */
		#popular-section {
			background-color: beige;
			border: 1px solid darkgoldenrod;
			padding: 20px;
			margin-top: 20px;
			border-radius: 0px;
			box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
			/* Slight shadow */
			flex-basis: 350px;
			/* Fixed width */
			flex-grow: 0;
			/* Prevent it from growing larger */
			flex-shrink: 0;
			/* Prevent it from shrinking */
			height: auto;
			/* Ensure height adjusts based on content */
			margin-left: 10px;
			Optional: Add spacing between sections */
		}



		/* Remove margin-left for mobile screens */
		@media (max-width: 768px) {
			#main-calculator-container {
				flex-direction: column;
				align-items: center;
			}

			#popular-section {
				margin-left: 0;
				/* Remove left margin */
				width: 100%;
				/* Full width for mobile */
			}
		}

		/* Tooltip styling remains unchanged */
		.tooltip-container {
			position: relative;
			display: inline-block;
			cursor: pointer;
			text-decoration: underline dotted grey;
			text-underline-offset: 2px;
			/* Adjust the space between text and the underline */
		}

		.tooltip-container .tooltip-text {
			visibility: hidden;
			width: 200px;
			background-color: black;
			color: #fff;
			text-align: center;
			border-radius: 5px;
			padding: 5px 10px;
			position: absolute;
			z-index: 1;
			bottom: 100%;
			/* Position above the text */
			left: 50%;
			margin-left: -100px;
			opacity: 0;
			transition: opacity 0.3s;
		}

		.tooltip-container:hover .tooltip-text {
			visibility: visible;
			opacity: 1;
		}

		div.container {
			padding: 0;
		}

		span.day-display {

			/* Here is the color you wanted */
			color: rgb(108, 117, 125) !important;
			margin-right: 6px !important;
		}

		/* Styles for the print button and date */
		.header-anchor-links-left {
			display: flex;
			align-items: center;
			gap: 10px;
			margin-bottom: 3px;
			/* Optional: Add spacing below */
		}

		.header-anchor-links-left button {
			flex: none !important;
			width: auto !important;
			background: none;
			border: none;
			color: inherit;
			font: inherit;
			text-decoration: none;
			cursor: pointer;
			padding: 0;
			margin: 0;
			display: inline-flex;
			/* Align icon and text horizontally */
			align-items: center;
		}

		.header-anchor-links-left button:hover {
			text-decoration: underline;
		}

		.header-anchor-links-left .print-date {
			font-size: 14px;
			color: #555;
			/* Optional: Different color for date */
		}

		/* Styles for Cite, Link, Share buttons */
		.header-anchor-links-right {
			display: flex;
			align-items: center;
			gap: 10px;
		}

		.header-anchor-links-right button {
			flex: none !important;
			width: auto !important;
			background: none;
			border: none;
			color: inherit;
			font: inherit;
			text-decoration: none;
			cursor: pointer;
			padding: 0;
			margin: 0;
			display: inline-flex;
			align-items: center;
		}

		.header-anchor-links-right button:hover {
			text-decoration: underline;
		}

		.header-anchor-links-right | {
			color: #ccc;
			/* Color for pipe separators */
		}















		/* Remove button styles and make them look like links */
		.header-anchor-links button {
			background: none !important;
			/* No background */
			border: none !important;
			/* Remove border */
			color: inherit !important;
			/* Use the color of the surrounding text */
			font: inherit !important;
			/* Inherit the font from the parent element */
			text-decoration: none !important;
			/* Remove any text decoration */
			cursor: pointer !important;
			/* Show pointer cursor to indicate clickable element */
			padding: 0 !important;
			/* Remove any padding */
			margin: 0 !important;
			/* Remove any margin */
			display: inline !important;
			/* Ensure they are inline with text */
		}

		/* Optional: Styling to add hover effect like links */
		.header-anchor-links button:hover {
			text-decoration: underline !important;
			/* Underline on hover to resemble links */
		}

		.header-hidden {
			display: none !important;
		}

		/* Info Layer Styling */
		#citeLayer {
			background-color: #f8f9fa;
			/* Light gray background */
			border: 1px solid #ccc;
			/* Light border */
			padding: 10px;
			/* Add some padding */
			margin-top: 10px;
			/* Space below the link */
			border-radius: 5px;
			/* Rounded corners */
			position: relative;
			/* Ensure it appears below the clicked link */
			/* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow for better visibility */
			transition: background-color 0.3s ease;

		}

		/* Hide the 'X' icon when the layer is closed */
		#citeLayer.hidden {
			display: none;
		}

		.info-layer p {
			margin: 0;
			/* Remove default margins */
		}

		.info-layer button {
			margin-top: 5px;
			/* Space between text and button */
			background-color: #007bff;
			/* Blue button */
			color: white;
			/* White text */
			border: none;
			/* No border */
			padding: 5px 10px;
			/* Button padding */
			border-radius: 3px;
			/* Rounded corners */
			cursor: pointer;
			/* Pointer cursor */
		}

		.info-layer button:hover {
			background-color: #0056b3;
			/* Darker blue on hover */
		}


		.grey-divider {
			border: 1px solid #dddddd !important;
			/* Add a grey top border */
			width: 100%;
			/* Ensure it spans the full width */
			margin: 20px 0;
			/* Optional: Add vertical spacing */
		}

		/* Ensure links are inline */
		.header-anchor-links {
			display: flex !important;
			/* Use flexbox for layout */
			gap: 10px !important;
			/* Add spacing between items */
		}

		.header-anchor-links a {
			text-decoration: none !important;
			/* Remove underlines */
			color: inherit !important;
			/* Use the parent color */
			font-size: 16px !important;
			/* Adjust font size */
		}

		.header-anchor-links a:hover {
			text-decoration: underline !important;
			/* Optional: Add underline on hover */
		}

		/* Cite Button Styling */
		.cite-button {
			margin-bottom: 10px;
		}

		.cite-button a {
			display: inline-flex;
			align-items: center;
			background-color: #f8f9fa;
			padding: 8px 12px;
			border-radius: 5px;

			text-decoration: none;
			font-size: 14px;
			font-weight: 500;
			transition: background-color 0.2s ease;
		}

		.cite-button a:hover {
			background-color: #e9ecef;
			text-decoration: none;
		}

		/* Close button (X) */
		.close-btn {
			position: absolute;
			top: 5px;
			right: 8px;
			cursor: pointer;
			font-size: 12px;
			color: #cccccc;
		}

		/* Styling for the copy button */
		#copyButton {
			display: block;
			background-color: #808080;
			/* Default grey color */
			border: none;
			padding: 5px 10px;
			cursor: pointer;
			font-weight: bold;
			border-radius: 5px;
			transition: background-color 0.3s ease, color 0.3s ease;
			margin-left: 0px;

		}

		/* When the copy button text changes to 'COPIED' */
		#copyButton.copied {
			background-color: #d3d3d3;
			/* Darker grey when clicked */
			color: #fff;
		}

		#copyButton.hidden {
			display: none !important;
		}

		@media (max-width: 480px) {
			.last-updated {
				display: none;
			}
		}



		/* General styles for the themes list */
		.themes-list {
			font-family: Arial, sans-serif;
			margin: 0px;
			line-height: 1.4;
			/* Adjusted for readability */
		}

		/* Theme section container */
		.theme-section {
			margin-bottom: 0px;
			/* Spacing between themes */
		}

		/* H2 for theme titles */
		.theme-section h2 {
			font-size: 1.5rem;
			/* Slightly larger font for H2 */
			font-weight: bold;
			margin: 0px 0;
			/* Spacing above and below */
		}

		/* H3 for categories */
		.theme-section h3 {
			font-size: 1.2rem;
			/* Smaller than H2 */
			font-weight: normal;
			margin: 0;
			/* No additional margin */
			display: inline-block;
			/* Ensures inline display for categories */
		}

		/* Links inside H2 and H3 */
		.theme-section h2 a,
		.theme-section h3 a {
			text-decoration: none;
			/* Remove underline */
		}

		.theme-section h2 a:hover,
		.theme-section h3 a:hover {
			text-decoration: underline;
			/* Add underline on hover for accessibility */
		}

		/* Hidden-main class styling */
		.hidden-main {
			font-size: 0.9rem;
			/* Slightly smaller for the extra text */
			color: #777;
			/* Muted text color */
			font-weight: normal;
		}












		/* TWO COLUMN IN CATEGORY */
		.calculators-two-col {

			margin-bottom: 0.5rem;
		}

		.calculators-two-col ul {
			/* Enable bullet points */
			list-style-type: disc;

			/* Provide space for bullets */
			margin: 0;

			/* Single column by default (mobile) */
			column-count: 1;
			column-gap: 1rem;
		}

		.calculators-two-col ul li {}

		/* For desktop screens */
		@media (min-width: 768px) {
			.calculators-two-col ul {
				column-count: 2;
				/* Switch to two columns on larger screens */
			}
		}








		/* --- START: Add/Modify these styles for Search --- */

		/* Style for the full-width search bar below the nav */
		#full-width-search-bar {
			/* Visible by default on larger screens, hidden on mobile via media query */
			padding: 15px 10px;
			background: linear-gradient(to bottom, white, #f8f9fa);
			border-bottom: 1px solid #ddd;
			margin-bottom: 0px;
			/* Optional spacing below search bar */

		}

		#full-width-search-bar .input-group .btn {
			flex-shrink: 0;
			/* Prevent button shrinking */
		}

		/* Container for mobile search in dropdown */
		.mobile-search-container {
			display: none;
			/* Hidden by default, shown on mobile via media query */
			padding: 10px 15px;
			/* Spacing within the dropdown */
		}

		.mobile-search-container input {
			width: 100%;
			padding: 8px 12px;
			border: 1px solid #ccc;
			border-radius: 0.25rem;
		}

		@media (max-width: 991.98px) {

			/* --- Fixed Mobile Navbar Base --- */
			.navbar.fixed-top-mobile {
				position: fixed !important;
				top: 0 !important;
				right: 0 !important;
				left: 0 !important;
				z-index: 1030 !important;
				padding-top: 0.25rem !important;
				padding-bottom: 0.25rem !important;
				padding-left: 0.5rem !important;
				padding-right: 0.5rem !important;
				display: flex !important;
				/* Ensure flex */
				flex-wrap: wrap !important;
				/* CRITICAL: Allows .navbar-collapse to drop to the next line */
				align-items: flex-start;
				/* Align items to the start of the cross axis */
			}

			/* --- Container for Header Items (Logo, Search, Toggler) --- */
			.navbar.fixed-top-mobile .container-fluid {
				display: flex !important;

				align-items: center !important;
				width: 100% !important;
				/* Ensure it spans the full width of the navbar line */
				padding-left: 0 !important;
				padding-right: 0 !important;
				/* No flex-basis needed here if parent allows wrap and next sibling forces new line */
			}

			/* --- Logo, Search, Toggler styles from previous step (mostly fine) --- */
			.navbar.fixed-top-mobile .navbar-brand {
				margin-right: 0.5rem;
				flex-shrink: 0;
			}

			.navbar.fixed-top-mobile .mobile-header-search-form {
				min-width: 100px;
			}

			.navbar.fixed-top-mobile .navbar-toggler {
				flex-shrink: 0;
				margin-left: auto;
				/* Push toggler to the right if search doesn't fill all space */
			}




			/* --- Collapsible Menu Container (#themeMenu) --- */
			#themeMenu.navbar-collapse.collapse.show,
			/* When shown */
			#themeMenu.navbar-collapse.collapsing {
				/* During transition */
				flex-basis: 100% !important;
				/* CRITICAL: Forces it to take a new line */
				width: 100% !important;
				/* Explicitly set to full width of the parent navbar */
				background-color: #ffffff;
				/* Set a solid background color (e.g., white or light grey) */
				border-top: 1px solid #dee2e6;
				/* Optional: separator line from header */

				/* Remove any horizontal margins that might be pushing it */
				margin-left: 0 !important;
				margin-right: 0 !important;
			}

			/* --- UL inside the collapsible menu --- */
			#themeMenu ul.nav-tabs {
				margin-left: 0 !important;
				/* Override .ms-auto */
				margin-right: 0 !important;
				width: 100% !important;
				/* Make the UL take full width of #themeMenu */
				flex-direction: column !important;
				/* Stack items vertically */
				padding-left: 0;
				/* Remove default ul padding */
				list-style: none;
				/* Remove default ul list style */
			}

			/* --- List Items and Links in Collapsed Menu --- */
			#themeMenu .nav-tabs .nav-item {
				width: 100%;
				margin-right: 0;
				/* Remove any right margin from desktop tab layout */
			}

			#themeMenu .nav-tabs .nav-link {
				display: block;
				width: 100%;
				text-align: left;
				border-radius: 0;
				border: none;
				border-bottom: 1px solid #dee2e6;
				/* Separator line between items */
				padding: 0.75rem 1rem;
				/* Adjust padding for touch targets */
				background-color: transparent;
				/* Use #themeMenu's background */
				color: #212529;
				/* Default dark text color */
			}

			#themeMenu .nav-tabs .nav-link:hover {
				background-color: #f8f9fa;
				/* Slight hover effect */
			}

			#themeMenu .nav-tabs .nav-link.active {
				background-color: #007bff;
				color: white;
				border-bottom-color: #007bff;
			}

			#themeMenu .nav-tabs .nav-item:last-child .nav-link {
				border-bottom: none;
				/* Remove border from the very last item */
			}

			/* --- Body Padding for Fixed Mobile Navbar --- */
			body {
				/* Adjust this value based on the actual height of your *first row* of .fixed-top-mobile navbar.
           Inspect its height in developer tools. */
				padding-top: 52px !important;
				/* STARTING ESTIMATE, PLEASE ADJUST */
			}

			/* Ensure desktop search bar is hidden on mobile */
			#full-width-search-bar {
				display: none !important;
			}
		}


		@media (max-width: 991.98px) {

			/* --- 1. Main Fixed Navbar Container --- */
			.navbar.fixed-top-mobile {
				position: fixed !important;
				top: 0 !important;
				left: 0 !important;
				right: 0 !important;
				z-index: 1030 !important;
				background-color: #ffffff !important;
				/* Solid background for the navbar */

				display: flex !important;
				flex-direction: column !important;
				/* CRITICAL: Stack direct children vertically */
				align-items: stretch !important;
				/* Make direct children take full width */

				/* Overall padding for the entire fixed block (top/bottom, left/right) */
				padding: 0px !important;
				/* Example: 0.5rem is often 8px. Adjust as needed. */
			}

			/* --- 2. Header Row (Logo, Search, Toggler) --- */
			/* This is the FIRST direct child of .navbar.fixed-top-mobile */
			.navbar.fixed-top-mobile>.container-fluid {
				display: flex !important;
				flex-wrap: wrap !important;
				align-items: center !important;
				width: 100% !important;
				/* Take full width of parent's content box */
				padding: 0 !important;
				/* This row has no internal padding; uses parent's */
				min-height: 44px !important;
				/* order: 1; (default) */
				flex-shrink: 0 !important;
			}

			/* --- Logo, Mobile Search, Toggler (within the .container-fluid header row) --- */
			.navbar.fixed-top-mobile .navbar-brand {
				margin-right: 8px !important;
				/* Space after logo */
				flex-shrink: 0;
				margin-left: 8px;
				font-size: 1rem !important;
			}

			.navbar.fixed-top-mobile .mobile-header-search-form {
				flex-grow: 1;
				/* Allow search to take available space */
				margin-right: 8px !important;
				/* Space before toggler */
			}

			.navbar.fixed-top-mobile .mobile-header-search-form .form-control-sm {
				height: calc(1.5em + .5rem + 2px);
				/* Standard BS small input height */
			}

			.navbar.fixed-top-mobile .navbar-toggler {
				flex-shrink: 0;
				margin-left: 0 !important;
				/* Remove auto margin */
				padding: .20rem .20rem !important;
				/* Bootstrap default, adjust if needed */
			}

			.navbar.fixed-top-mobile .navbar-toggler .navbar-toggler-icon {
				width: 1.2em !important;
				/* Smaller icon width. Default is 1.5em. */
				height: 1.2em !important;
				/* Smaller icon height. Default is 1.5em. */
			}

			/* --- 3. Collapsible Menu (#themeMenu) --- */
			/* This is the SECOND direct child of .navbar.fixed-top-mobile */
			/* Styles for the #themeMenu div itself, determines its place in the flex column */
			#themeMenu.navbar-collapse {
				width: 100% !important;
				/* Must take full width to occupy its own "row" in the column */
				/* order: 2; (default) */
			}

			/* Styles when menu is OPEN (.show) or OPENING (.collapsing) */
			#themeMenu.navbar-collapse.show,
			#themeMenu.navbar-collapse.collapsing {
				display: block !important;
				/* Crucial: render as a block to take up space */

				background-color: #ffffff !important;
				/* Background for the menu dropdown area */
				border-top: 1px solid #dee2e6 !important;
				/* Separator line above menu items */
				/* Padding INSIDE the menu box, around the UL */
				padding-top: 8px !important;
				padding-bottom: 8px !important;
				padding-left: 8px !important;
				/* Let nav-links handle their own horizontal padding */
				padding-right: 8px !important;

				/* === FIX STARTS HERE === */
				max-height: calc(100vh - 44px);
				/* Set max height to viewport height minus header height */
				overflow-y: auto;
				/* Enable vertical scrolling only when content overflows */
				/* === FIX ENDS HERE === */
			}

			/* Ensure it's hidden properly and doesn't take up space when not .show */
			#themeMenu.navbar-collapse:not(.show):not(.collapsing) {
				display: none !important;
				margin-top: 0 !important;
			}

			/* --- Menu Items (UL, LI, A) inside #themeMenu --- */
			#themeMenu ul.nav-tabs {
				list-style: none !important;
				padding: 0 !important;
				margin: 0 !important;
				width: 100% !important;
				display: flex !important;
				flex-direction: column !important;
			}

			#themeMenu .nav-tabs .nav-item {
				width: 100% !important;
			}

			#themeMenu .nav-tabs .nav-link {
				display: block !important;
				width: 100% !important;
				padding: 10px 16px !important;
				/* Example padding for touch targets (0.75rem 1rem) */
				text-decoration: none !important;
				color: #212529 !important;
				background-color: transparent !important;
				border: 1px solid #dee2e6 !important;
				/* Remove individual borders */
				border-bottom: 1px solid #dee2e6 !important;
				/* Separator line BETWEEN items */
				border-radius: 0 !important;
			}

			#themeMenu .nav-tabs .nav-link:hover {
				background-color: #f8f9fa !important;
				color: #0056b3 !important;
			}

			#themeMenu .nav-tabs .nav-link.active {
				background-color: #007bff !important;
				color: white !important;
				border-bottom-color: #007bff !important;
			}

			#themeMenu .nav-tabs .nav-item:last-child .nav-link {
				border-bottom: 1px solid #dee2e6 !important;
			}

			/* --- Body Padding for Fixed Header --- */
			body {
				/*
        This MUST be the height of the .navbar.fixed-top-mobile when the menu is CLOSED.
        Calculation:
        (.navbar.fixed-top-mobile's top padding) +
        (height of .navbar.fixed-top-mobile > .container-fluid) +
        (.navbar.fixed-top-mobile's bottom padding)

        Example using 8px padding: 8px (top nav pad) + ~38px (header row height) + 8px (bottom nav pad) = ~54px.
        INSPECT the height of `.navbar.fixed-top-mobile` (when menu is closed) in dev tools and set this value.
        */
				padding-top: 44px !important;
				/* !!! ADJUST THIS VALUE AFTER INSPECTING !!! */
			}

			/* Hide Desktop Search Bar on mobile */
			#full-width-search-bar {
				display: none !important;
			}
		}

		/* @media (max-width: 420px) {
  .mobile-header-search-form {
    
    flex: 0 1 auto;

   
    width: auto;
	max-width:160px;

    
    min-width: 0;

    
    box-sizing: border-box;
  }
}*/


		.mobile-search-container .input-group .btn.btn-outline-secondary {
			border-color: #ced4da !important;
			/* Match default form-control border color. Use !important to be sure. */
		}

		/* Optional: Keep border color consistent on hover too */
		/* If you want the border to stay light grey even when hovering over the button */
		/* Remove this block if you prefer the button border to darken on hover */
		.mobile-search-container .input-group .btn.btn-outline-secondary:hover {
			border-color: #ced4da !important;
			/* Keep default hover background/text for visual feedback */
			color: #fff;
			background-color: #6c757d;
		}









		/*
		  By default (mobile-first), the text is visible.
		  We don't need a `max-width` rule because `<span>` is inline by default.
		*/
		.nav-text-mobile-only {
			display: inline;
		}

		/* 
		  On larger screens (desktop view), hide the text part.
		  This breakpoint MUST match your Bootstrap navbar collapse point (lg = 992px).
		*/
		@media (min-width: 992px) {

			.nav-text-mobile-only {
				display: none;
			}

			.navbar.fixed-top-mobile {
				position: static !important;
				/* Back to normal flow */
				flex-direction: row !important;
				/* Navbar items in a row */
				align-items: center !important;
				/* Align items in the center of the row */
				padding: 5px 0 0 5px !important;
				/* Your original desktop padding */
				/* background-color: transparent !important; /* Or original desktop bg */
			}

			.navbar.fixed-top-mobile>.container-fluid {
				/* width: auto !important; /* Allow it to size based on its content (brand) */
				/* Bootstrap's .navbar-expand-lg > .container-fluid handles this mostly */
				padding: 0 !important;
				/* Reset if mobile set it differently and conflicts */
				flex-wrap: nowrap !important;
				/* Ensure brand, toggler, collapse are in one line */
			}

			#themeMenu.navbar-collapse {
				/* Revert to Bootstrap's default behavior for .navbar-collapse on desktop */
				display: flex !important;
				/* It becomes a flex container for its items (the UL) */
				flex-basis: auto !important;
				width: auto !important;
				margin-top: 0 !important;
				padding: 0 !important;
				border-top: none !important;
				background-color: transparent !important;
				/* Or theme default */
			}

			#themeMenu ul.nav-tabs {
				flex-direction: row !important;
				/* Tabs are horizontal */
				margin-left: auto !important;
				/* Push to the right (ms-auto) */
			}

			#themeMenu .nav-tabs .nav-link {
				/* Revert to your desktop tab styling */
				padding: 8px 4px !important;
				/* Your original desktop padding */
				border: 1px solid #ddd !important;
				border-bottom: none !important;
				margin-right: 2px !important;
				border-radius: 0.25rem 0.25rem 0 0 !important;
				background: linear-gradient(to bottom, #f8f9fa, white) !important;
				color: #555 !important;
			}

			#themeMenu .nav-tabs .nav-link.active {
				background-color: #007bff !important;
				border-color: #007bff #007bff #fff !important;
				color: white !important;
			}

			#themeMenu .nav-tabs .nav-link:hover {
				background-color: #e9ecef !important;
			}


			body {
				padding-top: 0 !important;
				/* No fixed header padding on desktop */
			}

			#full-width-search-bar {
				display: block !important;
				/* Or flex, depending on its internal layout */
			}

			/* Ensure mobile-specific header search is hidden on desktop */
			.navbar.fixed-top-mobile .mobile-header-search-form {
				display: none !important;
			}
		}




		.calculator-tags {
			margin-top: 10px;
			/* Add some space above the tags section */
			margin-bottom: 5px;
			/* Add some space below the tags section */
		}

		.tags-list {
			list-style: none;
			/* Remove default bullet points */
			padding: 0;
			margin: 0;
			display: flex;
			/* Arrange tags in a row */
			flex-wrap: wrap;
			/* Allow tags to wrap to the next line if they don't fit */
			gap: 8px;
			/* Space between tags */
		}

		.tags-list li {
			margin: 0;
			/* Remove default li margin if any */
		}

		.tags-list .tag {
			display: inline-block;
			/* Allows padding and margins */
			padding: 6px 12px;
			/* Vertical and horizontal padding for the pill shape */
			background-color: #e0e0e0;
			/* Light grey background */
			color: #333;
			/* Dark grey text color */
			text-decoration: none;
			/* Remove underline from links */
			border-radius: 16px;
			/* Makes it pill-shaped (adjust for more/less roundness) */
			font-size: 0.9em;
			/* Slightly smaller font size */
			transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
			/* Smooth hover effect */
			border: 1px solid #c0c0c0;
			/* Subtle border */
		}

		.tags-list .tag:hover {
			background-color: #007bff;
			/* Primary color on hover (e.g., blue) */
			color: #fff;
			/* White text on hover */
			border-color: #0056b3;
			/* Darker border on hover */
		}




		@media (min-width: 991.99px) {
			/* Styles for desktop (above Bootstrap LG breakpoint) */

			.navbar.fixed-top-mobile {
				position: static !important;
				/* Override fixed positioning, making it part of normal flow */
				/* Reset any specific mobile padding if it conflicts with desktop appearance */
				/* Usually, Bootstrap's default .navbar padding will take over correctly */
				padding-top: 5px !important;
				/* Reset to original or desired desktop padding */
				padding-bottom: 0 !important;
				padding-left: 5px !important;
				padding-right: 0 !important;
				/* Example: Reverting to your original .navbar padding */
			}

			body {
				padding-top: 0 !important;
				/* Remove any top padding added for mobile */
			}

			/* Ensure desktop search bar is visible (already in your code, good to confirm) */
			#full-width-search-bar {
				display: block;
				/* Or flex if using flex layout inside */
			}
		}

		/* New mobile header search form styles */
		.mobile-header-search-form {
			/* flex-grow-1 is applied via Bootstrap class */
			/* mx-2 provides spacing via Bootstrap class */
		}

		.mobile-header-search-form .form-control-sm {
			height: calc(1.5em + .5rem + 2px);
			/* Standard BS5 sm height */
			/* You might want to adjust font-size or padding if it looks too cramped */
		}

		.mobile-header-search-form .btn-sm {
			/* Ensure button aligns nicely. BS5 sm button should be fine. */
		}




		/* 1. Default Hamburger Icon (Custom Grey) */
		.navbar-toggler-icon {
			/* We are overriding Bootstrap's default background-image.
		       The !important is crucial here to ensure it takes precedence. */
			background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23888888' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;

			/* Keep the transition for a smooth change to the X */
			transition: background-image 0.25s ease-in-out;

			/* You can also set width, height etc. here if Bootstrap's defaults aren't desired,
		       but they are usually fine:
		       width: 1.5em;
		       height: 1.5em;
		       display: inline-block;
		       vertical-align: middle;
		       background-repeat: no-repeat;
		       background-position: center;
		       background-size: 100%;
		    */
		}

		/* 2. X Icon (Custom Grey) when menu is expanded */
		.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
			/* The !important is crucial here as well. */
			background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23888888' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M7 7 L23 23 M7 23 L23 7'/%3e%3c/svg%3e") !important;
		}

		/* ----- END: Custom Grey Hamburger and X Icons ----- */



		@media (max-width: 991.98px) {
			.mobile-header-search-form .input-group {
				/* Ensures the input group can take the full width if the form is flex-grow */
				width: 100%;
			}

			.mobile-header-search-form .input-group .form-control {
				/* Bootstrap's .input-group generally handles this,
		           but explicitly ensure no right border radius.
		           The .input-group-sm should provide a .2rem radius by default.
		        */
				border-top-right-radius: 0;
				border-bottom-right-radius: 0;
				/* Optional: ensure border color matches button if desired, or leave default */
				/* border-color: #6c757d; */
				/* Example: if button is Bootstrap's secondary */
			}

			.mobile-header-search-form .btn-mobile-custom-search {
				background-color: #6c757d;
				/* Dark grey (Bootstrap's $gray-800 or similar) */
				border-color: #6c757d;
				/* Border color to match background */
				color: white;
				/* Makes the Font Awesome icon white */

				/* Bootstrap's .input-group generally handles this,
		           but explicitly ensure no left border radius and set right radius.
		           .input-group-sm should give a .2rem radius.
		        */
				border-top-left-radius: 0;
				border-bottom-left-radius: 0;
				border-top-right-radius: .2rem;
				/* Bootstrap's default sm radius */
				border-bottom-right-radius: .2rem;
				/* Bootstrap's default sm radius */

				/* Ensure consistent height with form-control-sm if not using input-group-sm button size */
				/* padding-top: .25rem; */
				/* padding-bottom: .25rem; */
				/* font-size: .875rem; */
			}

			.mobile-header-search-form .btn-mobile-custom-search:hover,
			.mobile-header-search-form .btn-mobile-custom-search:focus {
				background-color: #565e64;
				/* Slightly darker grey for hover/focus */
				border-color: #565e64;
				color: white;
				box-shadow: none;
				/* Optional: remove default focus shadow if you don't like it */
			}

			.mobile-header-search-form .btn-mobile-custom-search:active {
				background-color: #565e64;
				/* Even darker for active state */
				border-color: #565e64;
				color: white;
			}

			#themeMenu .nav-tabs .nav-item .mobile-search-nav-link-style {
				display: block !important;
				width: 100% !important;
				padding: 10px 16px !important;
				/* Matches your nav-link padding */
				text-decoration: none !important;
				/* color: #212529 !important; /* Text color, form elements handle their own */
				background-color: transparent !important;
				/* Matches nav-link background */
				border: 1px solid #dee2e6 !important;
				/* Matches your nav-link border */
				/* If your nav-links have a specific border-bottom that differs, adjust here */
				border-bottom: 1px solid #dee2e6 !important;
				/* Already covered by 'border' */
				border-radius: 0 !important;
				/* Matches nav-link */
				box-sizing: border-box;
				/* Ensures padding and border are within the element's width/height */
				background: linear-gradient(to bottom, #f8f9fa, white);
				margin-bottom: 2px;
				font-weight: 500;
			}

			/* Adjust the form within the styled div */
			#themeMenu .nav-tabs .nav-item .mobile-search-nav-link-style .mobile-header-search-form {
				margin: 0 !important;
				/* Remove any default form margins */
				padding: 0 !important;
				/* Form itself has no padding; the wrapper div does */
				display: flex !important;
				/* Ensures input-group inside behaves correctly */
				width: 100% !important;
			}

			#themeMenu .nav-tabs .nav-item .mobile-search-nav-link-style .mobile-header-search-form .input-group {
				width: 100% !important;
				/* Input group takes full width of the form */
			}

			/* Hover effect for the styled wrapper div (to match nav-link hover) */
			#themeMenu .nav-tabs .nav-item .mobile-search-nav-link-style:hover {
				background-color: #f8f9fa !important;
				/* Matches your nav-link hover background */
				/* color: #0056b3 !important; /* Text color for nav-link hover, not directly applicable here */
			}
		}




		/* New: Event Planner Promo Bar Styling */
		.event-planner-promo-bar {
			background-color: #fffacd;
			/* Light yellow color */
			border-bottom: 1px solid #ffebcd;
			/* Slightly darker yellow border */

			padding: 0 15px;
			/* Horizontal padding, vertical handled by child paragraph */
			color: #333;
			/* Darker text color for readability */

		}

		.event-planner-promo-bar p {
			font-size: 0.9rem;
			/* Slightly smaller text for the promo */
		}

		.event-planner-promo-bar a {
			color: #007bff;
			/* Bootstrap primary blue */
			text-decoration: none;
		}

		.event-planner-promo-bar a:hover {
			text-decoration: underline !important;
			/* Ensure underline on hover */
		}




		.holiday-date-header {
			font-weight: bold;

			padding-bottom: 0.3rem;
			border-bottom: 1px solid #eee;
			font-size: 0.95em;
			color: #333;
		}

		.data-list li:first-child,
		.holiday-date-header+li {
			margin-top: 0.5rem;
		}


















		/* Mobile Countdown Link - Permanent Red/White */
		.mobile-countdown-link,
		.mobile-countdown-link:visited,
		.mobile-countdown-link:hover,
		.mobile-countdown-link:active {
			background-color: #d9534f !important;
			color: #ffffff !important;
			font-size: 0.7rem;
			font-weight: 800;
			text-decoration: none !important;
			border: none;
			padding: 4px 10px;
			border-radius: 20px;
			white-space: nowrap;
			margin-right: 4px;
			display: inline-block;
			box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
			text-transform: uppercase;
		}
		/* Live clock inside the pill: fixed width + tabular nums to avoid jitter */
		#header-live-clock {
			display: inline-block;
			width: 5.4em;             /* fixed width prevents jitter */
			text-align: center;
			font-variant-numeric: tabular-nums;
			font-feature-settings: "tnum";
			font-family: ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;
			font-size: 0.95em;
			letter-spacing: 0;
		}
		/* Smaller icons + tighter spacing in mobile header right group */
		.mobile-header-icons { gap: 6px !important; }
		.mobile-header-icons .header-icon-link { font-size: 1rem; }
		.mobile-header-icons .crown-glow { font-size: 0.95rem; }
		.mobile-header-icons .user-avatar-circle { width: 22px; height: 22px; font-size: 0.7rem; }
		.mobile-header-icons .navbar-toggler { padding: 2px 4px; }
		.mobile-header-icons .navbar-toggler-icon { width: 1.1em; height: 1.1em; }

		/* Optional: slightly darker red when actually pressing down */
		.mobile-countdown-link:active {
			background-color: #c9302c !important;
			transform: translateY(1px);
		}

		/* Desktop Bar (Below search) */
		.desktop-countdown-promo {
			width: 100%;
			margin-top: 8px;
		}

		.desktop-countdown-promo a {
			display: flex;
			align-items: center;
			background: #fff5f5;
			/* Very light red */
			border: 1px dashed #d9534f;
			padding: 6px 15px;
			border-radius: 8px;
			text-decoration: none;
			color: #333;
			font-size: 0.95rem;
			transition: all 0.2s ease;
		}

		.desktop-countdown-promo a:hover {
			background: #ffebeb;
			border-style: solid;
			transform: translateY(-1px);
			box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
		}

		.desktop-countdown-promo i {
			color: #d9534f;
			font-size: 1.1rem;
		}

		.desktop-countdown-promo .promo-anchor {
			color: #d9534f;
			font-weight: 800;
			text-decoration: underline;
			margin-left: 5px;
		}




		/* --- TOP AD PLACEMENT HEIGHT --- 
			.top-ad-container {
			    min-height: 50px; 
			    overflow: hidden;
			}

			
			@media (min-width: 768px) {
			    .top-ad-container {
			        min-height: 90px;
			    }
			}*/


		/* Top Ad Placement Styling */
		.top-ad-container {
			width: 100% !important;
			min-height: 50px !important;
			margin: 5px 0 !important;
			padding: 0 !important;
			overflow: hidden;
			background-color: #ffffff;
			display: block !important;
			/* Changed from flex to block for stability */
			text-align: center !important;
		}

		/* Update your existing .house-ad-fallback in base.html */
		.house-ad-fallback {
			display: block !important;
			width: 100%;
			height: 50px;
			line-height: 50px;
			text-decoration: none !important;
			color: #333 !important;
			/* Darker for better visibility */
			font-size: 14px;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			background-color: #ffffff;
			transition: background 0.2s;
		}

		.house-ad-fallback i.fab.fa-apple {
			font-size: 1.2rem;
			vertical-align: middle;
			color: #000;
		}

		@media (min-width: 768px) {
			.top-ad-container {
				min-height: 90px !important;
			}

			.house-ad-fallback {
				height: 90px;
				line-height: 90px;
				font-size: 18px;
			}
		}




		.header-icon-link {
			color: #444;
			transition: color 0.2s ease;
			display: flex;
			align-items: center;
			justify-content: center;
			text-decoration: none !important;
		}

		.header-icon-link:hover {
			color: #007bff;
		}

		/* ── Language switcher ── */
		.lang-switcher { position: relative; display: flex; align-items: center; margin: 0 2px; }
		/* Outer circle is the visible container */
		.lang-current {
			position: relative;
			width: 26px; height: 26px;
			border-radius: 50%; border: 1px solid #ccc;
			background: #fff;
			overflow: hidden;
			cursor: pointer; user-select: none;
		}
		/* Flag span inside — zoomed in so the flag's rectangle fills the circle */
		.lang-current > span.flag-emoji {
			position: absolute;
			top: 0; bottom: 0; left: 3px; right: -3px;
			display: flex; align-items: center; justify-content: center;
			font-size: 2.6rem;
			line-height: 1;
			transform: scale(1.1);
		}
		/* Arrow overlapping bottom-right, OUTSIDE the circle so overflow:hidden doesn't clip it */
		.lang-switcher::after {
			content: '▾';
			position: absolute; bottom: -4px; right: -4px;
			width: 12px; height: 12px;
			background: #333; color: #fff;
			border-radius: 50%;
			display: flex; align-items: center; justify-content: center;
			font-size: 0.55rem; line-height: 1;
			z-index: 3;
			border: 1px solid #fff;
			pointer-events: none;
		}
		.lang-dropdown {
			display: none; position: absolute; top: 38px; right: 0; z-index: 9999;
			background: #fff; border-radius: 10px; box-shadow: 0 4px 20px rgba(0,0,0,.15);
			padding: 8px 10px; min-width: 130px;
		}
		.lang-dropdown.open { display: flex; flex-direction: column; gap: 2px; }
		.lang-option {
			display: flex; align-items: center; gap: 8px;
			padding: 6px 8px; border-radius: 8px;
			cursor: pointer; border: none; text-decoration: none;
			color: #333; font-size: 0.85rem; font-weight: 500;
			transition: background .15s;
		}
		.lang-option:hover { background: #f3f4f6; text-decoration: none; color: #333; }
		.lang-option.active { background: #eff6ff; color: #1e3a8a; font-weight: 600; }
		.lang-flag {
			width: 24px; height: 24px; border-radius: 50%; overflow: hidden;
			display: flex; align-items: center; justify-content: center;
			font-size: 2.7rem; flex-shrink: 0; border: 1px solid #ccc;
		}

		/* Ensure mobile header container doesn't squash items */
		@media (max-width: 991.98px) {
			.fixed-top-mobile .container-fluid {
				padding-left: 10px !important;
				padding-right: 5px !important;
			}

			.header-icon-link {
				font-size: 1.2rem;
			}
		}








		/* Darker Golden Glowing Crown Effect */
		.crown-glow {
			color: #FFB300 !important;
			font-size: 0.9rem;
			text-shadow: 0 0 3px rgba(255, 160, 0, 0.6), 0 0 6px rgba(255, 128, 0, 0.3);
			transition: all 0.3s ease-in-out;
		}

		.crown-glow:hover {
			color: #FFD700 !important;
			/* Classic Gold on hover */
			text-shadow: 0 0 6px rgba(255, 160, 0, 0.9), 0 0 12px rgba(255, 100, 0, 0.5);
			transform: scale(1.1);
		}

		/* Fix for shorter mobile ad text */
		.mobile-text {
			display: none;
		}

		@media (max-width: 768px) {
			.desktop-text {
				display: none;
			}

			.mobile-text {
				display: inline;
			}
		}






		/* USER LOGIN */
		/* User Avatar Circle */
		.user-avatar-circle {
			width: 32px;
			height: 32px;
			background-color: #007bff;
			/* Primary Blue */
			color: white;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 14px;
			font-weight: 700;
			line-height: 1;
			border: 2px solid transparent;
			transition: all 0.2s ease;
			box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
		}

		/* If user is premium, maybe give them a gold border? */
			{
			% if g.is_premium %
		}

		.user-avatar-circle {
			border-color: #FFB300;
			/* Gold border for premium users */
			background-color: #333;
			/* Dark background to make gold pop */
		}

			{
			% endif %
		}

		.user-avatar-circle:hover {
			transform: scale(1.05);
			background-color: #0056b3;
			box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
		}








		/* --- Add these specific lines to your existing CSS block --- */

		.mobile-text {
			display: none;
		}

		.desktop-text {
			display: inline;
		}

		@media (max-width: 768px) {
			.desktop-text {
				display: none;
			}

			.mobile-text {
				display: inline;
			}
		}

		/* Ensure the real ad is centered if it appears */
		#top-ad-placement ins,
		#top-ad-placement iframe {
			margin: 0 auto !important;
			display: block !important;
		}

		/* Hide fallback when an ad is detected */
		.ad-loaded #house-ad-fallback-wrapper {
			display: none !important;
		}