.mhs-page-wrap {
	max-width: 1320px;
	margin: 0 auto;
	padding: 0 0 40px;
	box-sizing: border-box;
}
.mhs-page-wrap *, .mhs-page-wrap *::before, .mhs-page-wrap *::after { box-sizing: inherit; }

.mhs-hero {
	text-align: center;
	max-width: 720px;
	margin: 0 auto 18px;
	padding: 0 12px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.mhs-hero-title {
	margin: 0 0 8px;
	font-size: 26px;
	font-weight: 700;
	color: #1f2430;
}
.mhs-hero-tagline {
	margin: 0;
	font-size: 15px;
	line-height: 1.5;
	color: #6b7280;
}

.mhs-app {
	--mhs-blue: #1a73e8;
	--mhs-blue-dark: #1558b3;
	--mhs-border: #d7dce3;
	--mhs-bg: #ffffff;
	--mhs-text: #1f2430;
	--mhs-muted: #6b7280;
	--mhs-map-height: 620px;

	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: var(--mhs-text);
	border: 1px solid var(--mhs-border);
	border-radius: 10px;
	overflow: hidden;
	background: var(--mhs-bg);
	box-shadow: 0 1px 4px rgba(0, 0, 0, .06);
	max-width: 100%;
	box-sizing: border-box;
}
.mhs-app *, .mhs-app *::before, .mhs-app *::after { box-sizing: border-box; }

/* iOS Safari zooms the whole page in when a focused form control has a
   computed font-size under 16px. Force 16px on every text-like control
   in the tool (URL box, latitude/longitude, zoom, and the Settings
   modal fields) so that can never trigger. Checkboxes/radios are
   excluded since their on-screen size isn't text-driven. */
.mhs-app input:not([type="checkbox"]):not([type="radio"]),
.mhs-app select,
.mhs-page-wrap .mhs-modal input:not([type="checkbox"]):not([type="radio"]) {
	font-size: 16px !important;
}

/* Toolbar - Edit selection / Clear / Focus on the left, URL box on the
   right (same row, on desktop/tablet); wraps to its own full-width row
   on narrow screens via flex-wrap below. */
.mhs-toolbar {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	padding: 10px 12px;
	background: #f3f5f8;
	border-bottom: 1px solid var(--mhs-border);
}
/* Edit selection / Clear / Focus always stay together on one line - this
   group never wraps internally; only the group as a whole vs. the URL
   box (the other flex item in .mhs-toolbar) can drop to separate rows. */
.mhs-toolbar-actions {
	display: flex;
	flex-wrap: nowrap;
	gap: 8px;
	flex: 0 1 auto;
	min-width: 0;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
.mhs-toolbar-actions::-webkit-scrollbar { display: none; }
.mhs-toolbar-actions .mhs-btn { flex: 0 0 auto; }

/* URL box + Go button merged into a single unified control: one shared
   border/radius, Go sits flush on the right with just a divider line -
   not two separate elements with a gap between them. Flexes to fill the
   remaining toolbar width on desktop/tablet, height-matched to the
   other toolbar buttons. */
.mhs-url-box {
	display: flex;
	align-items: stretch;
	margin-left: auto;
	flex: 1 1 400px;
	border: 1px solid var(--mhs-border);
	border-radius: 6px;
	background: #fff;
	overflow: hidden;
}
.mhs-url-box:focus-within {
	border-color: var(--mhs-blue);
	box-shadow: 0 0 0 3px rgba(26, 115, 232, .15);
}
.mhs-url-input-wrap {
	position: relative;
	flex: 1;
	min-width: 0;
	display: flex;
}
.mhs-url-box .mhs-url-input {
	width: 100%;
	min-width: 0;
	flex: 1;
	border: none;
	background: transparent;
	padding: 9px 34px 9px 12px;
	font-size: 16px; /* keeps iOS Safari from auto-zooming on focus */
	line-height: 1.3;
	outline: none;
}
.mhs-url-box .mhs-btn-go {
	flex: 0 0 auto;
	border: none;
	border-left: 1px solid var(--mhs-border);
	border-radius: 0;
	background: #f3f5f8;
}
.mhs-url-box .mhs-btn-go:hover { background: #eef2f7; }

/* Clear (x) button, shown only while the URL field has content. Sits
   as an overlay on top of the input via position:absolute (not a flex
   sibling), with its own translucent dark circle - this makes it
   immune to whatever background/border a theme's global input[type=text]
   rule imposes on the input underneath, since it never has to match
   that color to look seamless. */
.mhs-url-clear-btn {
	position: absolute;
	top: 50%;
	right: 6px;
	transform: translateY(-50%);
	width: 22px;
	height: 22px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: rgba(0, 0, 0, .18);
	color: #fff;
	font-size: 14px;
	line-height: 1;
	cursor: pointer;
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 2;
	transition: background .15s;
}
.mhs-url-clear-btn:hover, .mhs-url-clear-btn:focus-visible { background: rgba(0, 0, 0, .55); }
.mhs-url-clear-btn:not([hidden]) { display: flex; }

/* Invalid lat/lng entry (empty, non-numeric, or out of range) */
.mhs-input-invalid {
	border-color: #b3261e !important;
	box-shadow: 0 0 0 3px rgba(179, 38, 30, .12);
}

/* Buttons */
.mhs-btn {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 9px 16px;
	font-size: 16px;
	font-weight: 600;
	border-radius: 6px;
	border: 1px solid var(--mhs-border);
	background: #fff;
	color: var(--mhs-text);
	cursor: pointer;
	white-space: nowrap;
	transition: background .15s ease, border-color .15s ease;
}
.mhs-btn:hover { background: #eef2f7; }
.mhs-btn-primary {
	background: var(--mhs-blue);
	border-color: var(--mhs-blue);
	color: #fff;
}
.mhs-btn-primary:hover { background: var(--mhs-blue-dark); }
.mhs-btn-primary.mhs-active { background: var(--mhs-blue-dark); box-shadow: inset 0 0 0 2px rgba(255,255,255,.4); }
.mhs-btn:disabled { opacity: .55; cursor: not-allowed; }

/* Map */
.mhs-map-wrap {
	position: relative;
	width: 100%;
	height: var(--mhs-map-height);
}
.mhs-map { width: 100%; height: 100%; background: #e5e9ee; cursor: grab; }
.mhs-map .leaflet-container { cursor: grab; }
.mhs-app.mhs-editing .mhs-map,
.mhs-app.mhs-editing .mhs-map .leaflet-container {
	cursor: crosshair;
	touch-action: none; /* let our own drag-select handle touch instead of the browser's native pan/zoom gestures */
}

.mhs-selection-info {
	position: absolute;
	left: 12px;
	bottom: 12px;
	background: rgba(30, 34, 44, .85);
	color: #fff;
	font-size: 12px;
	line-height: 1.5;
	padding: 8px 12px;
	border-radius: 8px;
	z-index: 500;
}
/* "Screenshot" map control - sits where Leaflet's own attribution
   control used to be (bottom-right), styled as a translucent-white
   pill so it stays legible over the map. */
.mhs-screenshot-control {
	display: flex;
	align-items: center;
	background: rgba(255, 255, 255, .8);
	border-radius: 6px;
	box-shadow: 0 1px 5px rgba(0, 0, 0, .4);
	line-height: 1;
}
.mhs-screenshot-btn {
	display: flex;
	align-items: center;
	gap: 5px;
	border: none;
	background: transparent;
	margin: 0;
	padding: 6px 10px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 12px;
	font-weight: 600;
	color: #1f2430;
	cursor: pointer;
	border-radius: 6px;
	transition: background .15s, opacity .15s;
}
.mhs-screenshot-btn:hover { background: rgba(0, 0, 0, .08); }
.mhs-screenshot-btn:disabled,
.mhs-screenshot-btn.mhs-busy { opacity: .55; cursor: progress; }
.mhs-screenshot-btn .mhs-icon { display: flex; }
.mhs-screenshot-btn .mhs-icon svg { display: block; width: 15px; height: 15px; }
/* Hint ("?") icon sitting to the right of the Screenshot button's text,
   inside the same translucent control pill. */
.mhs-screenshot-control .mhs-hint-wrap { margin-left: 0; margin-right: 8px; }

/* Brief flash over the captured area (selection box, or the whole map
   when none is drawn) when a screenshot is taken - mirrors a phone's
   screenshot flash, confined to what was actually captured. */
.mhs-screenshot-flash {
	position: absolute;
	background: #fff;
	pointer-events: none;
	z-index: 600;
	opacity: 0;
	animation: mhs-screenshot-flash .35s ease-out;
}
@keyframes mhs-screenshot-flash {
	0%   { opacity: 0; }
	12%  { opacity: .9; }
	100% { opacity: 0; }
}

.mhs-selection-rect {
	border: 2px solid var(--mhs-blue);
	background: rgba(26, 115, 232, .18);
}
.mhs-handle {
	width: 26px;
	height: 26px;
	background: var(--mhs-blue, #1a73e8);
	border: 3px solid #fff;
	border-radius: 50%;
	box-shadow: 0 1px 5px rgba(0,0,0,.35);
	cursor: grab;
}

.mhs-location-pin-wrap { pointer-events: none; }
.mhs-location-pin {
	transform-origin: bottom center;
	animation: mhs-pin-drop .35s ease-out;
}
.mhs-location-pin svg { display: block; filter: drop-shadow(0 2px 3px rgba(0,0,0,.35)); }
.mhs-location-pin.mhs-pin-fade {
	animation: mhs-pin-fade .3s ease-in forwards;
}
@keyframes mhs-pin-drop {
	0%   { transform: translateY(-18px); opacity: 0; }
	60%  { transform: translateY(2px); opacity: 1; }
	100% { transform: translateY(0); opacity: 1; }
}
@keyframes mhs-pin-fade {
	to { transform: translateY(-6px); opacity: 0; }
}

.mhs-progress-overlay {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba(255, 255, 255, .85);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 900;
}
.mhs-progress-box { width: 280px; text-align: center; }
.mhs-progress-text { font-size: 13px; margin-bottom: 10px; color: var(--mhs-text); }
.mhs-progress-bar { height: 8px; border-radius: 4px; background: #e5e9ee; overflow: hidden; }
.mhs-progress-bar-fill { height: 100%; width: 0%; background: var(--mhs-blue); transition: width .2s ease; }

/* Quick "Screenshot" button processing spinner - shown from the moment
   the shutter flash/sound fires until the AJAX call resolves (success,
   error, or network failure). Its look (including the spin keyframes)
   is applied entirely inline by mhs-map.js, not here, so it always
   renders/animates correctly even if this stylesheet is served from a
   stale cache after an update - see showScreenshotSpinner() in
   assets/js/mhs-map.js. */

/* Bottom controls */
.mhs-controls {
	display: flex;
	flex-wrap: wrap;
	align-items: end;
	gap: 16px;
	padding: 14px 16px;
	border-top: 1px solid var(--mhs-border);
	max-width: 100%;
	box-sizing: border-box;
}
.mhs-field { display: flex; flex-direction: column; gap: 6px; font-size: 16px; min-width: 0; max-width: 100%; }
.mhs-field label { color: #1f2430; font-weight: 600; font-size: 16px; display: flex; align-items: center; gap: 6px; }
.mhs-field select, .mhs-field input[type=text], .mhs-field input[type=number] {
	padding: 8px 10px;
	border: 1px solid var(--mhs-border);
	border-radius: 6px;
	font-size: 16px;
	background: #fff;
	box-sizing: border-box;
}
/* Native <select> can ignore flex-stretch sizing and expand to fit its
   widest <option> text instead - forcing width:100% + min-width:0
   here (not just on the parent) is what actually keeps it inside the
   field on narrow screens. */
.mhs-field select {
	width: 100%;
	min-width: 0;
	max-width: 100%;
}
.mhs-field-source { min-width: 200px; max-width: 100%; }
.mhs-field-lat input, .mhs-field-lng input { width: 140px; }
/* Latitude and Longitude are grouped so they're always one flex item
   inside .mhs-controls - they can move to a new row together, but can
   never be split apart from each other onto separate rows. */
.mhs-latlng-group {
	display: flex;
	flex-wrap: nowrap;
	gap: 16px;
	flex: 0 0 auto;
	min-width: 0;
}
.mhs-zoom-heading-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 14px; }
.mhs-autozoom-wrap { display: flex; align-items: center; gap: 2px; }
.mhs-field-zoom .mhs-autozoom-switch { font-size: 13px; font-weight: 500; color: var(--mhs-muted); gap: 6px; white-space: nowrap; }
.mhs-zoom-row { display: flex; align-items: center; gap: 10px; }
.mhs-zoom-number { width: 68px; }
.mhs-zoom-slider { width: 180px; accent-color: var(--mhs-blue); }
.mhs-zoom-number:disabled, .mhs-zoom-slider:disabled { opacity: .55; cursor: not-allowed; }

.mhs-actions { display: flex; gap: 8px; margin-left: auto; }

/* Hint tooltip (used on the Zoom label) */
.mhs-hint-wrap { position: relative; display: inline-flex; align-items: center; margin-left: 2px; }
.mhs-hint-btn {
	width: 16px;
	height: 16px;
	padding: 0;
	border-radius: 50%;
	border: 1px solid var(--mhs-muted);
	background: #fff;
	color: var(--mhs-muted);
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: help;
}
.mhs-hint-btn:hover, .mhs-hint-btn:focus { border-color: var(--mhs-blue); color: var(--mhs-blue); }
/* Shown via JS by setting display:block + position:fixed with a
   viewport-clamped left/top - it's moved to <body> while open so it
   can't get clipped by .mhs-app's overflow:hidden (needed elsewhere for
   the widget's rounded corners) and can't overflow past the edge of a
   narrow phone screen the way a purely CSS-centered popover could. */
.mhs-hint-popover {
	display: none;
	width: 260px;
	max-width: calc(100vw - 20px);
	background: #1f2430;
	color: #fff;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.45;
	padding: 8px 10px;
	border-radius: 6px;
	box-shadow: 0 4px 16px rgba(0,0,0,.28);
	z-index: 100000;
	text-align: left;
	box-sizing: border-box;
}

/* Modal */
.mhs-modal-backdrop {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba(20, 24, 32, .45);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 10000;
	padding: 20px;
}
.mhs-modal {
	background: #fff;
	width: 100%;
	max-width: 420px;
	max-height: 88vh;
	border-radius: 10px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	box-shadow: 0 20px 60px rgba(0,0,0,.3);
}
.mhs-modal-header {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 14px 16px;
	background: #f3f5f8;
	border-bottom: 1px solid var(--mhs-border);
}
.mhs-modal-header h3 { margin: 0; font-size: 15px; flex: 1; }
.mhs-modal-close { background: none; border: none; font-size: 20px; cursor: pointer; color: var(--mhs-muted); line-height: 1; padding: 4px; }
.mhs-modal-body { padding: 16px; overflow-y: auto; }
.mhs-modal-body h4 { margin: 18px 0 6px; font-size: 13px; }
.mhs-modal-body h4:first-child { margin-top: 0; }
.mhs-hint { margin: 0 0 8px; font-size: 12px; color: var(--mhs-muted); }
.mhs-modal-body hr { border: none; border-top: 1px solid var(--mhs-border); margin: 16px 0; }
.mhs-modal-footer {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	padding: 12px 16px;
	border-top: 1px solid var(--mhs-border);
	background: #f9fafb;
}
.mhs-radio-group { display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.mhs-radio-group label, .mhs-toggle { display: flex; align-items: center; gap: 8px; cursor: pointer; }
/* Toggle switches (Auto Zoom, Combine map tiles...) - the native
   checkbox stays in the DOM for accessibility/keyboard support, just
   visually hidden; .mhs-toggle-slider (its very next sibling) is
   styled into an iOS-style pill switch matching the plugin's blue. */
.mhs-toggle input[type=checkbox] {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}
.mhs-toggle-slider {
	position: relative;
	flex: 0 0 auto;
	width: 36px;
	height: 20px;
	border-radius: 999px;
	background: #c7ccd4;
	transition: background .15s ease;
}
.mhs-toggle-slider::before {
	content: '';
	position: absolute;
	top: 2px;
	left: 2px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 2px rgba(0,0,0,.25);
	transition: transform .15s ease;
}
.mhs-toggle input[type=checkbox]:checked + .mhs-toggle-slider { background: var(--mhs-blue); }
.mhs-toggle input[type=checkbox]:checked + .mhs-toggle-slider::before { transform: translateX(16px); }
.mhs-toggle input[type=checkbox]:focus-visible + .mhs-toggle-slider { box-shadow: 0 0 0 3px rgba(26,115,232,.35); }
.mhs-toggle input[type=checkbox]:disabled + .mhs-toggle-slider { opacity: .55; cursor: not-allowed; }
.mhs-toggle:has(input[type=checkbox]:disabled) { cursor: not-allowed; }
.mhs-label-small { display: block; font-size: 11px; color: var(--mhs-muted); margin-bottom: 4px; text-transform: uppercase; letter-spacing: .02em; }
.mhs-modal-body input[type=text] {
	width: 100%;
	padding: 8px 10px;
	border: 1px solid var(--mhs-border);
	border-radius: 6px;
	font-size: 13px;
}
.mhs-slider-row { display: flex; align-items: center; gap: 10px; }
.mhs-slider-row input[type=range] { flex: 1; accent-color: var(--mhs-blue); }
.mhs-tilelimit-value, .mhs-delay-value {
	min-width: 42px;
	text-align: right;
	font-size: 12px;
	font-weight: 600;
	color: var(--mhs-muted);
}

/* Toast */
.mhs-toast {
	position: absolute;
	left: 50%;
	bottom: 16px;
	transform: translateX(-50%);
	background: #1f2430;
	color: #fff;
	padding: 10px 16px;
	border-radius: 8px;
	font-size: 13px;
	z-index: 2000;
	box-shadow: 0 6px 20px rgba(0,0,0,.25);
}
.mhs-toast.mhs-toast-error { background: #b3261e; }

/* Icons - real inline SVG (currentColor), sized to match text */
.mhs-icon { width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.mhs-icon svg { width: 100%; height: 100%; display: block; }

/* `display:flex` above has equal CSS specificity to the browser's
   built-in `[hidden]{display:none}` rule, and author styles win ties —
   so without this, toggling the `hidden` attribute in JS did not
   actually hide these two elements. */
.mhs-modal-backdrop[hidden],
.mhs-progress-overlay[hidden] {
	display: none !important;
}

@media (max-width: 640px) {
	.mhs-hero-title { font-size: 21px; }
	.mhs-hero-tagline { font-size: 13px; }
	.mhs-app { --mhs-map-height: 380px !important; } /* shorter on phones so the source/zoom/download row below stays reachable without excessive scrolling inside the map; !important needed since the shortcode sets this as an inline style */
	.mhs-toolbar { justify-content: center; }
	.mhs-toolbar-actions { width: 100%; }
	.mhs-toolbar-actions .mhs-btn { padding: 8px 10px; font-size: 14px; }
	.mhs-controls { flex-direction: column; align-items: stretch; }
	.mhs-actions { margin-left: 0; }
	.mhs-url-box { width: 100%; }
	.mhs-field-source { min-width: 0; }
	.mhs-latlng-group { width: 100%; }
	.mhs-latlng-group .mhs-field { flex: 1 1 0; min-width: 0; }
	.mhs-field-lat input, .mhs-field-lng input { width: 100%; }
}

/* ============================================================
   DONATE BANNER
   ============================================================ */
.mhs-donate-banner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 6px;
	background: snow;
	font-size: 15px;
	font-weight: 400;
	border-radius: 10px;
	border: 1px solid #ddd;
	padding: 10px 14px;
	width: 100%;
	margin: 16px 0;
	font-family: Arial, sans-serif;
	color: #333;
	text-align: center;
	box-sizing: border-box;
}

/* ============================================================
   SEO CONTENT SECTION (end-user guide, tool reference, FAQ)
   ============================================================ */
#mhs-seo-section {
	max-width: 1320px;
	width: 100%;
	margin: 20px auto 0;
	box-sizing: border-box;
	padding: 24px;
	border: 3px solid #ccc;
	box-shadow: 0 0 10px #f4efe7;
	border-radius: 10px;
	background-color: #fff;
	font-family: Arial, sans-serif;
	font-size: 18px;
	line-height: 1.42857143;
	color: #333;
}
#mhs-seo-section h1 {
	font-family: "Segoe UI", Arial, sans-serif;
	font-weight: bold;
	letter-spacing: -0.02em;
	color: #310062;
	margin-top: 1rem;
	margin-bottom: 0.5rem;
	line-height: 1.2;
	font-size: 2.5rem;
}
#mhs-seo-section h2 {
	font-family: "Segoe UI", Arial, sans-serif;
	font-weight: bold;
	letter-spacing: -0.02em;
	color: #310062;
	margin-bottom: 0.5rem;
	line-height: 1.2;
	font-size: 1.75rem;
}
#mhs-seo-section h2.mhs-faq-title {
	color: #00778a;
	font-size: 2.6rem;
	font-weight: normal;
	text-align: center;
	margin-bottom: 1rem;
	letter-spacing: -0.02em;
}
#mhs-seo-section h3 {
	font-family: Arial, sans-serif;
	font-size: inherit;
	font-weight: bold;
	line-height: inherit;
	margin: 20px 0 6px;
	color: #333;
}
#mhs-seo-section p { margin: 0 0 10px; font-size: 18px; line-height: 1.42857143; color: #333; }
#mhs-seo-section code {
	background: #f3f5f8;
	border: 1px solid var(--mhs-border, #d7dce3);
	border-radius: 4px;
	padding: 1px 6px;
	font-size: .9em;
}

#mhs-seo-section ul.mhs-article-list,
#mhs-seo-section ol.mhs-article-list {
	padding-left: 25px;
	margin: 0 0 10px;
	font-size: 18px;
	line-height: 1.42857143;
	color: #333;
}
#mhs-seo-section ul.mhs-article-list li,
#mhs-seo-section ol.mhs-article-list li { margin-bottom: 4px; }

/* 2-col grid for the desktop/mobile how-to */
.mhs-row { display: grid; gap: 24px; align-items: start; margin-bottom: 0; }
.mhs-row-2col { grid-template-columns: 1fr 1fr; }

/* CTA button */
.mhs-btn-danger,
.mhs-btn-danger:link,
.mhs-btn-danger:visited,
.mhs-btn-danger:hover,
.mhs-btn-danger:focus,
.mhs-btn-danger:active {
	display: inline-block;
	padding: 10px 20px;
	background-color: #dc3545;
	color: #fff !important;
	border: 1px solid #dc3545;
	border-radius: 4px;
	font-size: 1.5rem;
	font-weight: 400;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	line-height: 1.5;
	transition: background-color .15s ease-in-out, border-color .15s ease-in-out;
	font-family: Arial, sans-serif;
}
.mhs-btn-danger:hover,
.mhs-btn-danger:focus { background-color: #c82333; border-color: #bd2130; text-decoration: none; }
.mhs-btn-danger:active { background-color: #bd2130; border-color: #a71d2a; }

/* FAQ Accordion */
#mhs-faq-accordion { margin-top: 0; }
.mhs-accordion-item {
	border: 1px solid #ddd;
	border-radius: 0;
	margin-bottom: 1.5rem;
	overflow: hidden;
	background-color: #fff;
}
.mhs-accordion-header,
#mhs-seo-section h3.mhs-accordion-header { margin: 0; padding: 0; font-size: inherit; line-height: inherit; }
.mhs-accordion-btn {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 1rem 1.25rem;
	font-size: 1.3rem;
	font-family: Arial, sans-serif;
	font-weight: 400;
	color: #212529;
	background-color: #fff;
	border: 0;
	border-radius: 0;
	text-align: left;
	cursor: pointer;
	line-height: 1.4;
	transition: color .15s ease-in-out, background-color .15s ease-in-out;
	box-shadow: none;
}
.mhs-accordion-btn:hover { background-color: #f8f8f8; color: #212529; }
.mhs-accordion-btn:focus,
.mhs-accordion-btn:focus-visible { outline: none; box-shadow: none; background-color: #fff; color: #212529; }
.mhs-accordion-btn.mhs-open:focus,
.mhs-accordion-btn.mhs-open:focus-visible { background-color: #e7f1ff; color: #0c63e4; }
.mhs-accordion-btn::after {
	content: "";
	flex-shrink: 0;
	width: 1.25rem;
	height: 1.25rem;
	margin-left: auto;
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
	background-repeat: no-repeat;
	background-size: 1.25rem;
	transition: transform .2s ease-in-out;
}
.mhs-accordion-btn.mhs-open::after {
	transform: rotate(-180deg);
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230c63e4'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
.mhs-accordion-btn.mhs-open { color: #0c63e4; background-color: #e7f1ff; box-shadow: inset 0 -1px 0 rgba(0,0,0,.125); }
.mhs-accordion-collapse { display: none; border-top: 1px solid rgba(0,0,0,.125); }
.mhs-accordion-collapse.mhs-show { display: block; }
.mhs-accordion-body { padding: 1rem 1.25rem; font-size: 18px; line-height: 1.42857143; color: #333; font-family: Arial, sans-serif; }

/* SEO section responsive */
@media (max-width: 768px) {
	#mhs-seo-section { padding: 16px; }
}
@media (max-width: 575.98px) {
	#mhs-seo-section { width: auto !important; padding: 16px 10px !important; }
	#mhs-seo-section h1 { font-size: 1.8rem !important; }
	#mhs-seo-section h2 { font-size: 1.4rem !important; }
	#mhs-seo-section h2.mhs-faq-title { font-size: 2rem !important; }
	.mhs-row-2col { grid-template-columns: 1fr !important; }
	.mhs-btn-danger { font-size: 1rem !important; }
	.mhs-accordion-btn { font-size: 1rem !important; }
}

/* ============================================================
   EDGE SAFE-AREA (<=1024px)
   .mhs-page-wrap is the single outer wrapper for the whole
   frontend (hero, tool, donate banner, and SEO section all live
   inside it), so giving IT an 8px horizontal inset keeps every
   child element off the viewport edge on tablet/mobile. Placed
   last and using padding-left/padding-right longhands (instead of
   the `padding` shorthand) so it always wins over the earlier
   `.mhs-page-wrap { padding: 0 0 *px; }` rule regardless of
   viewport width, while leaving top/bottom padding untouched.
   ============================================================ */
@media (max-width: 1024px) {
	.mhs-page-wrap {
		padding-left: 8px;
		padding-right: 8px;
	}
}