/*
 * modals.css · Phase 14. Popups and notices drawn by GeoDirectory, GetPaid,
 * UsersWP and their add-ons, which still render under this theme.
 *
 * Replaces the popup, location-switcher and notice parts of Code Snippets
 * 170, 174, 204-208, 245 and 246. Those were built on the old dark palette;
 * this is Ground and Ink with hairlines, the same as the rest of the theme.
 * base.css already squares every corner and drops every shadow, so neither
 * is restated here.
 *
 * !important is used where the plugin's own Bootstrap rule (.bsui .x) ties on
 * specificity and loads later, the same call components.css makes.
 */

/* ---------------------------------------------------------------- */
/* Base modal                                                         */
/* ---------------------------------------------------------------- */

.modal-content {
	background: var(--wp--preset--color--ground) !important;
	border: 2px solid var(--wp--preset--color--ink) !important;
	color: var(--wp--preset--color--ink);
}

.modal-header,
.modal-footer {
	border-color: var(--wp--preset--color--ink) !important;
	border-width: 2px !important;
}

.modal h1,
.modal h2,
.modal h3,
.modal h4,
.modal h5,
.modal h6,
.modal .modal-title {
	font-family: var(--wp--preset--font-family--shout) !important;
	font-weight: 800 !important;
	text-transform: uppercase !important;
	letter-spacing: normal !important;
}

.modal .form-control,
.modal .form-select {
	background-color: var(--wp--preset--color--ground) !important;
	border: 2px solid var(--wp--preset--color--ink) !important;
	color: var(--wp--preset--color--ink) !important;
	font-family: var(--wp--preset--font-family--speak) !important;
}

/* The ✕: Bootstrap draws a 16px glyph in a 24px box. Same glyph, a 44px
   target, at any width. */
.modal .btn-close {
	box-sizing: border-box;
	flex: none;
	width: 44px;
	height: 44px;
	margin: 0 !important;
	padding: 0 !important;
	background-position: center;
	background-size: 16px;
	opacity: 1;
}

.modal .btn-close:hover,
.modal .btn-close:focus-visible {
	background-color: var(--wp--preset--color--ink);
	filter: invert(1);
}

/* Below 1024 every Bootstrap modal (location switcher, tickets, GetPaid
   payment, contact/claim iframe) is the whole screen, not a card floating
   over a page behind it: the tram has no room for a side gutter. */
@media (max-width: 1023px) {
	.modal .modal-dialog {
		width: 100% !important;
		max-width: none !important;
		height: 100%;
		margin: 0 !important;
	}

	.modal .modal-content {
		min-height: 100%;
		border-width: 0 !important;
	}

	.modal-dialog-scrollable .modal-content {
		max-height: none;
		height: 100%;
	}

	.modal .modal-footer {
		padding-bottom: calc(var(--wp--preset--spacing--16) + env(safe-area-inset-bottom, 0px));
	}
}

/* The loader is markup from geodirectory.js. Squaring the corners would leave
   Bootstrap's ring as a three-sided outline, so it is a solid spinning square. */
.modal .spinner-border,
.bsui .spinner-border {
	width: 24px !important;
	height: 24px !important;
	border: 0 !important;
	background-color: var(--wp--preset--color--ink) !important;
	animation: oad-modal-spin 0.75s linear infinite !important;
}

@keyframes oad-modal-spin {
	to {
		transform: rotate(360deg);
	}
}

/* Buttons inside any modal (avatar crop, tickets, payment, location): the
   Section 22 button. Ink at rest and Action on hover; Ground controls turn
   Ink on hover; a disabled one is Ground and Muted, never a grey fill. */
.modal .btn {
	align-items: center;
	border: 2px solid var(--wp--preset--color--ink) !important;
	display: inline-flex;
	font-family: var(--wp--preset--font-family--shout) !important;
	font-size: 13px !important;
	font-weight: 800 !important;
	justify-content: center;
	letter-spacing: 0.04em;
	min-height: 44px;
	padding: 0 var(--wp--preset--spacing--24) !important;
	text-transform: uppercase;
}

.modal .btn-primary,
.modal .btn-dark {
	background: var(--wp--preset--color--ink) !important;
	color: var(--wp--preset--color--white) !important;
}

.modal .btn-primary:hover,
.modal .btn-dark:hover {
	background: var(--wp--preset--color--ground) !important;
	color: var(--wp--preset--color--ink) !important;
	outline: 2px solid var(--wp--preset--color--ink) !important;
	outline-offset: -2px !important;
}

.modal .btn-secondary,
.modal .btn-outline-secondary,
.modal .btn-outline-primary,
.modal .btn-light {
	background: var(--wp--preset--color--ground) !important;
	color: var(--wp--preset--color--ink) !important;
}

.modal .btn-secondary:hover,
.modal .btn-outline-secondary:hover,
.modal .btn-outline-primary:hover,
.modal .btn-light:hover {
	background: var(--wp--preset--color--ink) !important;
	color: var(--wp--preset--color--white) !important;
}

.modal .btn:disabled,
.modal .btn.disabled {
	background: var(--wp--preset--color--ground) !important;
	border-color: var(--wp--preset--color--muted) !important;
	color: var(--wp--preset--color--muted) !important;
	cursor: not-allowed;
	opacity: 1 !important;
}

/* ---------------------------------------------------------------- */
/* Location switcher, opened from the header and the home hero        */
/* ---------------------------------------------------------------- */

#gdlm-switcher .modal-body,
#gdlm-switcher .modal-header {
	background: var(--wp--preset--color--ground) !important;
}

#gdlm-switcher #dlm-switcher-title {
	margin-bottom: 0 !important;
	padding-bottom: 0 !important;
}

#gdlm-switcher .text-muted {
	color: var(--wp--preset--color--muted) !important;
	font-weight: 500 !important;
}

/* The switcher's own "muted h6" line repeats the title. */
#gdlm-switcher .w-100.h6.text-muted {
	display: none;
}

/* ---------------------------------------------------------------- */
/* Location and search suggestions dropdown                           */
/* ---------------------------------------------------------------- */

.gdlm-location-suggestions.dropdown-menu,
.gdas-search-suggestions.dropdown-menu {
	background-color: var(--wp--preset--color--ground) !important;
	border: 2px solid var(--wp--preset--color--ink) !important;
}

.gd-suggestions-dropdown {
	padding: 8px !important;
}

.gdas-search-suggestions .gdas-section-title.dropdown-header {
	background-color: var(--wp--preset--color--ground) !important;
	color: var(--wp--preset--color--muted) !important;
}

.gdlm-location-suggestions *,
.gdas-search-suggestions * {
	background-color: transparent !important;
	color: var(--wp--preset--color--ink) !important;
}

.gdlm-location-suggestions .list-group-item-action:hover,
.gdlm-location-suggestions .dropdown-item:hover,
.gdlm-location-suggestions li:hover,
.gdas-search-suggestions .list-group-item-action:hover,
.gdas-search-suggestions .dropdown-item:hover,
.gdas-search-suggestions li:hover {
	background-color: var(--wp--preset--color--ink) !important;
	color: var(--wp--preset--color--white) !important;
}

.gdlm-location-suggestions .list-group-item-action:hover *,
.gdlm-location-suggestions .dropdown-item:hover *,
.gdlm-location-suggestions li:hover *,
.gdas-search-suggestions .list-group-item-action:hover *,
.gdas-search-suggestions .dropdown-item:hover *,
.gdas-search-suggestions li:hover * {
	color: var(--wp--preset--color--white) !important;
}

/* Rows are 44px targets with a hairline between them, and the list sits in
   the modal's own flow: Popper positions it absolutely from the input, which
   let it hang out of the card on desktop. Popper writes inline styles, so
   the overrides carry !important. */
.gdlm-location-suggestions.dropdown-menu,
.gdas-search-suggestions.dropdown-menu {
	position: static !important;
	inset: auto !important;
	transform: none !important;
	width: 100% !important;
	max-height: 50svh !important;
	margin: var(--wp--preset--spacing--8) 0 0 !important;
}

.gdlm-location-suggestions.dropdown-menu li,
.gdas-search-suggestions.dropdown-menu li {
	display: flex !important;
	align-items: center !important;
	min-height: 44px;
	margin: 0 !important;
	padding: 0 var(--wp--preset--spacing--16) !important;
	border-top: 2px solid var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--speak);
	font-size: 16px;
	font-weight: 500;
	text-align: left;
}

.gdlm-location-suggestions.dropdown-menu li:first-child,
.gdas-search-suggestions.dropdown-menu li:first-child {
	border-top: 0;
}

/* Font Awesome glyphs: the row text already says what each one is. */
.gdlm-location-suggestions li i,
.gdas-search-suggestions li i {
	display: none;
}

/* ---------------------------------------------------------------- */
/* Notices. oad-event-visibility and oad-claim-flow both print         */
/* .bsui .alert and rely on it looking like this.                       */
/* ---------------------------------------------------------------- */

.bsui .alert {
	background-color: var(--wp--preset--color--ground) !important;
	border: 2px solid var(--wp--preset--color--ink) !important;
	border-left-width: 4px !important;
	color: var(--wp--preset--color--ink) !important;
	font-family: var(--wp--preset--font-family--speak) !important;
	font-size: 16px;
	margin: 0 0 var(--wp--preset--spacing--16);
	opacity: 1 !important;
	padding: var(--wp--preset--spacing--8) var(--wp--preset--spacing--16) !important;
}

/* Section 32: the 4px left bar marks the kind. Info and confirmation are
   Ink, a warning or error is Warning. Success is not a colour and never a
   tick, so the icon Font Awesome prints in front of the words goes. */
.bsui .alert-danger,
.bsui .alert-warning {
	border-left-color: var(--wp--preset--color--warning) !important;
}

.bsui .alert > i:first-child {
	display: none;
}

.bsui .alert a {
	color: var(--wp--preset--color--ink) !important;
	text-decoration: underline;
}

.bsui .alert .btn-close {
	box-sizing: border-box;
	flex: none;
	height: 44px;
	margin: 0 !important;
	margin-left: var(--wp--preset--spacing--8) !important;
	padding: 0 !important;
	position: static;
	width: 44px;
}

.advmap_nofound,
.advmap_nofound .alert {
	opacity: 1 !important;
}