/**
 * MME Core — front-end styling.
 *
 * Only covers what the plugin itself outputs: forms, listing grids, cards
 * and the contact strip. Colours are taken from the theme where possible,
 * with sensible fallbacks so nothing breaks if the theme changes.
 */

:root {
	--mme-navy: var(--navy, #1b2a4a);
	--mme-navy-dark: var(--navy-dark, #0f1a2e);
	--mme-gold: var(--gold, #c9a54e);
	--mme-gold-light: var(--gold-light, #d4b76a);
	--mme-off-white: var(--off-white, #f8f6f0);
	--mme-line: #e3e1da;
	--mme-muted: #6b7280;
	--mme-radius: 8px;
	--mme-shadow: 0 2px 10px rgba(27, 42, 74, 0.08);
	--mme-shadow-lift: 0 10px 28px rgba(27, 42, 74, 0.16);
}

/* ==================================================================
 * Forms
 * ============================================================== */

.mme-form-wrap {
	margin: 0 0 2rem;
}

.mme-form {
	padding: 2rem;
	background: #fff;
	border: 1px solid var(--mme-line);
	border-radius: var(--mme-radius);
	box-shadow: var(--mme-shadow);
}

.mme-form--compact {
	padding: 1.5rem;
}

.mme-form-header {
	margin: 0 0 1.5rem;
	padding-bottom: 1rem;
	border-bottom: 2px solid var(--mme-gold);
}

.mme-form-title {
	margin: 0 0 0.35rem;
	color: var(--mme-navy);
	font-size: 1.6rem;
	line-height: 1.25;
}

.mme-form-intro {
	margin: 0;
	color: var(--mme-muted);
	font-size: 0.95rem;
	line-height: 1.65;
}

.mme-form-section {
	margin: 0 0 1.75rem;
	padding: 0;
	border: 0;
}

.mme-form-section:last-of-type {
	margin-bottom: 1rem;
}

.mme-section-title {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	width: 100%;
	margin: 0 0 0.75rem;
	padding: 0 0 0.5rem;
	border-bottom: 1px solid var(--mme-line);
	color: var(--mme-navy);
	font-size: 1.05rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.mme-section-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 28px;
	height: 28px;
	background: var(--mme-navy);
	border-radius: 50%;
	color: var(--mme-gold);
	font-size: 0.85rem;
}

.mme-section-note {
	margin: -0.35rem 0 0.9rem;
	color: var(--mme-muted);
	font-size: 0.88rem;
	font-style: italic;
	line-height: 1.6;
}

.mme-fields {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
}

.mme-form .mme-field {
	flex: 1 1 100%;
	min-width: 0;
}

.mme-form .mme-w-half {
	flex: 1 1 calc(50% - 0.5rem);
}

.mme-form .mme-w-third {
	flex: 1 1 calc(33.333% - 0.67rem);
}

.mme-form .mme-w-quarter {
	flex: 1 1 calc(25% - 0.75rem);
}

.mme-field-label {
	display: block;
	margin: 0 0 0.3rem;
	color: var(--mme-navy);
	font-size: 0.9rem;
	font-weight: 600;
}

.mme-req {
	color: #b32d2e;
}

.mme-field-note {
	margin: 0 0 0.4rem;
	color: var(--mme-muted);
	font-size: 0.82rem;
	line-height: 1.55;
}

.mme-form input[type="text"],
.mme-form input[type="email"],
.mme-form input[type="tel"],
.mme-form input[type="url"],
.mme-form input[type="number"],
.mme-form input[type="date"],
.mme-form select,
.mme-form textarea {
	width: 100%;
	padding: 0.7rem 0.85rem;
	background: #fff;
	border: 1px solid #cfd4dc;
	border-radius: 5px;
	color: #1f2937;
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.5;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.mme-form textarea {
	min-height: 110px;
	resize: vertical;
}

.mme-form input:focus,
.mme-form select:focus,
.mme-form textarea:focus {
	border-color: var(--mme-gold);
	box-shadow: 0 0 0 3px rgba(201, 165, 78, 0.18);
	outline: none;
}

.mme-form ::placeholder {
	color: #9aa1ab;
}

/* Radios and tick boxes */

.mme-choices {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.25rem;
	margin-top: 0.15rem;
}

.mme-choice,
.mme-check-inline {
	display: inline-flex;
	align-items: flex-start;
	gap: 0.5rem;
	color: #374151;
	font-size: 0.95rem;
	line-height: 1.5;
	cursor: pointer;
}

.mme-choice input,
.mme-check-inline input {
	flex: 0 0 auto;
	margin-top: 0.2rem;
}

.mme-check-inline a {
	color: var(--mme-navy);
	text-decoration: underline;
}

/* Errors */

.mme-error {
	display: block;
	color: #b32d2e;
	font-size: 0.82rem;
	line-height: 1.5;
}

.mme-error:not(:empty) {
	margin-top: 0.3rem;
}

.mme-field.has-error input,
.mme-field.has-error select,
.mme-field.has-error textarea {
	border-color: #b32d2e;
	background: #fdf5f5;
}

/* The spam trap — must stay out of sight but reachable by robots. */
.mme-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Actions and feedback */

.mme-form-actions {
	margin-top: 0.5rem;
}

.mme-submit {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
}

.mme-submit[disabled] {
	opacity: 0.65;
	cursor: progress;
}

.mme-spinner {
	display: none;
	width: 15px;
	height: 15px;
	border: 2px solid rgba(255, 255, 255, 0.45);
	border-top-color: #fff;
	border-radius: 50%;
	animation: mme-spin 0.7s linear infinite;
}

.mme-form.is-sending .mme-spinner {
	display: inline-block;
}

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

@media (prefers-reduced-motion: reduce) {
	.mme-spinner {
		animation-duration: 3s;
	}
}

.mme-form-response {
	display: none;
	margin-top: 1rem;
	padding: 0.85rem 1rem;
	border-radius: 5px;
	font-size: 0.95rem;
	line-height: 1.6;
}

.mme-form-response.is-visible {
	display: block;
}

.mme-form-response.is-error {
	background: #fdf1f1;
	border-left: 4px solid #b32d2e;
	color: #8a2424;
}

.mme-form-response.is-success {
	background: #f2f8f2;
	border-left: 4px solid #2e7d32;
	color: #1f5c23;
}

.mme-form-thanks {
	padding: 2.25rem 2rem;
	background: var(--mme-off-white);
	border: 1px solid var(--mme-gold);
	border-radius: var(--mme-radius);
	text-align: center;
}

.mme-thanks-tick {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	margin-bottom: 1rem;
	background: var(--mme-navy);
	border-radius: 50%;
	color: var(--mme-gold);
	font-size: 1.5rem;
}

.mme-form-thanks p {
	max-width: 34rem;
	margin: 0 auto;
	color: var(--mme-navy);
	font-size: 1.05rem;
	line-height: 1.7;
}

@media (max-width: 768px) {
	.mme-form {
		padding: 1.35rem;
	}

	.mme-form .mme-w-half,
	.mme-form .mme-w-third,
	.mme-form .mme-w-quarter {
		flex: 1 1 100%;
	}
}

/* ==================================================================
 * Listing grids
 * ============================================================== */

.mme-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.75rem;
	margin: 0 0 2rem;
}

.mme-grid--1 {
	grid-template-columns: 1fr;
}

.mme-grid--2 {
	grid-template-columns: repeat(2, 1fr);
}

.mme-grid--3 {
	grid-template-columns: repeat(3, 1fr);
}

.mme-grid--4 {
	grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 1024px) {
	.mme-grid--3,
	.mme-grid--4 {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 640px) {
	.mme-grid,
	.mme-grid--2,
	.mme-grid--3,
	.mme-grid--4 {
		grid-template-columns: 1fr;
	}
}

.mme-empty {
	padding: 1.5rem;
	background: var(--mme-off-white);
	border: 1px dashed var(--mme-line);
	border-radius: var(--mme-radius);
	color: var(--mme-muted);
	text-align: center;
}

/* ==================================================================
 * Cards
 * ============================================================== */

.mme-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: #fff;
	border: 1px solid var(--mme-line);
	border-radius: var(--mme-radius);
	box-shadow: var(--mme-shadow);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.mme-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--mme-shadow-lift);
}

.mme-card-media {
	position: relative;
	display: block;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: var(--mme-off-white);
}

.mme-card-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.mme-card:hover .mme-card-media img {
	transform: scale(1.05);
}

.mme-card-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	color: var(--mme-gold);
	font-size: 2.25rem;
	opacity: 0.55;
}

.mme-card-badge {
	position: absolute;
	top: 0.75rem;
	left: 0.75rem;
	padding: 0.3rem 0.7rem;
	background: rgba(27, 42, 74, 0.92);
	border-radius: 999px;
	color: #fff;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

.mme-badge-soon {
	background: var(--mme-gold);
	color: var(--mme-navy-dark);
}

.mme-card-body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	padding: 1.25rem;
}

.mme-card-title {
	margin: 0 0 0.35rem;
	font-size: 1.15rem;
	line-height: 1.35;
}

.mme-card-title a {
	color: var(--mme-navy);
	text-decoration: none;
}

.mme-card-title a:hover {
	color: var(--mme-gold);
}

.mme-card-tagline {
	margin: 0 0 0.75rem;
	color: var(--mme-gold);
	font-size: 0.9rem;
	font-weight: 600;
}

.mme-card-excerpt {
	margin: 0 0 1rem;
	color: #4b5563;
	font-size: 0.93rem;
	line-height: 1.65;
}

.mme-card-date {
	margin: 0 0 0.3rem;
	color: var(--mme-muted);
	font-size: 0.8rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.mme-card-facts {
	margin: 0 0 1rem;
	padding: 0;
	list-style: none;
}

.mme-card-facts li {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	padding: 0.25rem 0;
	color: #4b5563;
	font-size: 0.88rem;
}

.mme-card-facts i {
	width: 1.1rem;
	color: var(--mme-gold);
	text-align: center;
}

.mme-card-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin-top: auto;
	padding-top: 0.9rem;
	border-top: 1px solid var(--mme-line);
}

.mme-card-price {
	color: var(--mme-navy);
	font-size: 1.05rem;
	font-weight: 700;
}

.mme-card-ref {
	color: var(--mme-muted);
	font-size: 0.8rem;
	letter-spacing: 0.05em;
}

.mme-card-link {
	color: var(--mme-navy);
	font-size: 0.88rem;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.mme-card-link:hover {
	color: var(--mme-gold);
}

.mme-card-merchant {
	margin: 0.6rem 0 0;
	color: var(--mme-muted);
	font-size: 0.78rem;
}

.mme-card.is-coming-soon {
	opacity: 0.92;
}

/* Guide tiles */

.mme-card--guide .mme-guide-inner {
	display: block;
	padding: 1.75rem 1.25rem;
	color: inherit;
	text-align: center;
	text-decoration: none;
}

.mme-guide-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 58px;
	height: 58px;
	margin-bottom: 0.9rem;
	background: var(--mme-navy);
	border-radius: 50%;
	color: var(--mme-gold);
	font-size: 1.4rem;
}

.mme-card--guide .mme-card-title {
	margin-bottom: 0.4rem;
	color: var(--mme-navy);
}

/* Area tiles */

.mme-area-tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.3rem;
	min-height: 120px;
	padding: 1.25rem 1rem;
	background: var(--mme-navy);
	border-radius: var(--mme-radius);
	color: #fff;
	text-align: center;
	text-decoration: none;
	transition: background 0.2s ease, transform 0.2s ease;
}

.mme-area-tile:hover {
	background: var(--mme-navy-dark);
	color: #fff;
	transform: translateY(-3px);
}

.mme-area-name {
	font-size: 1.1rem;
	font-weight: 700;
}

.mme-area-count {
	color: var(--mme-gold-light);
	font-size: 0.82rem;
}

.mme-area-tagline {
	color: var(--mme-gold-light);
	font-size: 0.82rem;
	line-height: 1.35;
}

/* An area with nothing to book yet. Muted rather than switched off — it is
   still somewhere worth knowing about, so the photograph shows through and the
   colour comes back on hover, but the flatter wash and the note underneath
   make it obvious there is nothing to click through to just yet. */

.mme-area-tile--unlisted {
	background: var(--mme-navy-dark);
}

.mme-area-note {
	display: block;
	margin-top: 0.15rem;
	color: rgba(255, 255, 255, 0.82);
	font-size: 0.76rem;
	font-style: italic;
	line-height: 1.3;
}

/* A tile with a photograph of its own. The picture is set on the tile itself
   as an inline style, so a dark wash sits over it to keep the wording
   readable whatever the photo happens to look like. */

.mme-area-tile--photo {
	position: relative;
	overflow: hidden;
	min-height: 160px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

.mme-area-tile--photo::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: linear-gradient( to bottom, rgba( 12, 27, 51, 0.35 ), rgba( 12, 27, 51, 0.82 ) );
}

.mme-area-tile--photo .mme-area-name,
.mme-area-tile--photo .mme-area-tagline {
	position: relative;
	z-index: 1;
}

/* ==================================================================
 * Contact strip, notices, coming soon
 * ============================================================== */

.mme-contact-strip {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 2rem;
	padding: 1.25rem 1.5rem;
	background: var(--mme-navy);
	border-radius: var(--mme-radius);
}

.mme-contact-strip--plain {
	flex-direction: column;
	gap: 0.75rem;
	padding: 0;
	background: none;
}

.mme-contact-item {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	color: #fff;
	font-size: 0.98rem;
	text-decoration: none;
}

.mme-contact-item i {
	color: var(--mme-gold);
}

.mme-contact-item:hover {
	color: var(--mme-gold-light);
}

.mme-contact-strip--plain .mme-contact-item {
	color: var(--mme-navy);
}

.mme-affiliate-notice {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	margin: 0 0 1.5rem;
	padding: 0.85rem 1rem;
	background: var(--mme-off-white);
	border-left: 3px solid var(--mme-gold);
	border-radius: 4px;
	color: var(--mme-muted);
	font-size: 0.85rem;
	line-height: 1.6;
}

.mme-affiliate-notice i {
	margin-top: 0.15rem;
	color: var(--mme-gold);
}

.mme-coming-soon {
	max-width: 40rem;
	margin: 2rem auto;
	padding: 2.5rem 2rem;
	background: var(--mme-off-white);
	border: 1px solid var(--mme-line);
	border-radius: var(--mme-radius);
	text-align: center;
}

.mme-coming-soon-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	margin-bottom: 1rem;
	background: var(--mme-navy);
	border-radius: 50%;
	color: var(--mme-gold);
	font-size: 1.6rem;
}

.mme-coming-soon h2 {
	margin: 0 0 0.6rem;
	color: var(--mme-navy);
}

.mme-coming-soon p {
	margin: 0 auto 1.5rem;
	max-width: 32rem;
	color: #4b5563;
	line-height: 1.7;
}

.mme-coming-soon .mme-form {
	text-align: left;
}

/* WhatsApp button, in case the theme has no style for it. Deliberately the
   softer green the theme uses rather than WhatsApp's own bright one, so the
   fallback cannot suddenly look louder than the rest of the site. */
.btn-whatsapp {
	background: #1e7d51;
	border-color: #1e7d51;
	color: #fff;
}

.btn-whatsapp:hover {
	background: #15704a;
	border-color: #15704a;
	color: #fff;
}

/* The photo tiles carry their picture as a background with a dark scrim over
   the top, so an unlisted one is muted by deepening that scrim and draining
   some colour out of the photograph rather than by changing the tile colour. */

.mme-area-tile--photo.mme-area-tile--unlisted {
	filter: saturate(0.55);
}

.mme-area-tile--photo.mme-area-tile--unlisted::before {
	background: linear-gradient(180deg, rgba(15, 26, 46, 0.72) 0%, rgba(15, 26, 46, 0.86) 100%);
}

.mme-area-tile--photo.mme-area-tile--unlisted:hover,
.mme-area-tile--photo.mme-area-tile--unlisted:focus-visible {
	filter: saturate(1);
}

@media (prefers-reduced-motion: reduce) {
	.mme-area-tile--unlisted,
	.mme-area-tile--photo.mme-area-tile--unlisted {
		transition: none;
	}
}