/**
 * MoKabb Taxi Packages Pro — frontend styles.
 * Glassmorphism, gradient hero, cards, sticky CTA, dark mode ready.
 */

.mtpp-page {
	--mtpp-primary: #f7b500;
	--mtpp-secondary: #1a1a1a;
	--mtpp-primary-dark: #d99f00;
	--mtpp-on-primary: #1a1a1a;
	--mtpp-bg: #ffffff;
	--mtpp-fg: #14181f;
	--mtpp-muted: #5b6573;
	--mtpp-card: rgba(255, 255, 255, 0.65);
	--mtpp-border: rgba(255, 255, 255, 0.4);
	--mtpp-radius: 18px;
	--mtpp-shadow: 0 10px 40px rgba(18, 28, 45, 0.12);
	color: var(--mtpp-fg);
	font-family: inherit;
	line-height: 1.65;
}

.mtpp-page[data-mtpp-mode="dark"] {
	--mtpp-bg: #0d1117;
	--mtpp-fg: #e9eef6;
	--mtpp-muted: #9aa6b8;
	--mtpp-card: rgba(30, 38, 52, 0.55);
	--mtpp-border: rgba(255, 255, 255, 0.08);
	--mtpp-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
	background: var(--mtpp-bg);
}

/* Theme-inherit mode: background and text come from the active theme so the
   page blends seamlessly between the theme header and footer. Only the brand
   primary (buttons, links, accents) stays under plugin control. Surfaces fall
   back to the theme's own color presets where available. */
.mtpp-page[data-mtpp-mode="theme"] {
	--mtpp-bg: transparent;
	--mtpp-fg: currentColor;
	--mtpp-muted: currentColor;
	--mtpp-card: var(--wp--preset--color--background, rgba(127, 127, 127, 0.06));
	--mtpp-border: rgba(127, 127, 127, 0.22);
	--mtpp-shadow: 0 8px 30px rgba(0, 0, 0, 0.10);
	background: var(--mtpp-bg);
	color: inherit;
}

.mtpp-page[data-mtpp-mode="theme"] .mtpp-muted,
.mtpp-page[data-mtpp-mode="theme"] .mtpp-feature p {
	opacity: 0.72;
}

.mtpp-wrap {
	max-width: 1140px;
	margin: 0 auto;
	padding: 0 20px;
}

.mtpp-section {
	padding: 64px 0;
}

.mtpp-section h2 {
	font-size: clamp(1.5rem, 3vw, 2.1rem);
	margin: 0 0 24px;
	font-weight: 800;
	letter-spacing: -0.02em;
}

/* Glassmorphism utility */
.mtpp-glass {
	background: var(--mtpp-card);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border: 1px solid var(--mtpp-border);
	border-radius: var(--mtpp-radius);
	box-shadow: var(--mtpp-shadow);
}

/* Hero */
.mtpp-hero {
	position: relative;
	min-height: 70vh;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 80px 20px;
	background-image: var(--mtpp-hero-bg, none);
	background-size: cover;
	background-position: center;
	background-color: #1a1a1a;
	overflow: hidden;
}

/* No image set: use a branded gradient instead of a flat gray block. */
.mtpp-hero--no-image {
	background-image: none;
	background: linear-gradient(135deg, var(--mtpp-secondary), var(--mtpp-primary-dark));
}

.mtpp-hero--no-image .mtpp-hero-overlay {
	background: linear-gradient(135deg, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.15));
}

.mtpp-hero--no-image .mtpp-hero-overlay::after {
	opacity: 0.12;
}

.mtpp-hero-overlay {
	position: absolute;
	inset: 0;
	/* Neutral dark scrim keeps the white hero text readable over any photo
	   or brand color. A primary-tinted blend is layered on where supported. */
	background: linear-gradient(135deg, rgba(0, 0, 0, 0.62), rgba(0, 0, 0, 0.45));
	z-index: 1;
}

.mtpp-hero-overlay::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--mtpp-primary);
	mix-blend-mode: multiply;
	opacity: 0.28;
}

.mtpp-hero-inner {
	position: relative;
	z-index: 2;
	max-width: 760px;
	padding: 44px 40px;
	color: #fff;
}

.mtpp-hero-title {
	font-size: clamp(2rem, 5vw, 3.4rem);
	font-weight: 900;
	margin: 0 0 14px;
	letter-spacing: -0.03em;
	line-height: 1.05;
}

.mtpp-hero-subtitle {
	font-size: clamp(1rem, 2vw, 1.3rem);
	opacity: 0.95;
	margin: 0 0 26px;
}

.mtpp-hero-stats {
	display: flex;
	gap: 28px;
	justify-content: center;
	margin-bottom: 30px;
	flex-wrap: wrap;
}

.mtpp-stat {
	display: flex;
	flex-direction: column;
}

.mtpp-stat strong {
	font-size: 1.4rem;
	font-weight: 800;
}

.mtpp-stat em {
	font-style: normal;
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	opacity: 0.85;
}

/* Buttons */
.mtpp-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 13px 26px;
	border-radius: 999px;
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
	border: 1px solid var(--mtpp-border);
	background: rgba(255, 255, 255, 0.9);
	color: var(--mtpp-fg);
	transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
	line-height: 1;
}

.mtpp-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
}

.mtpp-btn-primary {
	background: var(--mtpp-primary);
	color: var(--mtpp-on-primary);
	border: none;
}

.mtpp-btn-primary:hover {
	background: var(--mtpp-primary-dark);
	color: var(--mtpp-on-primary);
}

.mtpp-btn-hero {
	font-size: 1.05rem;
	padding: 16px 38px;
}

.mtpp-btn-whatsapp {
	background: #25d366;
	color: #fff;
	border: none;
}

.mtpp-btn-whatsapp:hover {
	color: #fff;
}

/* Grids */
.mtpp-grid {
	display: grid;
	gap: 24px;
}

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

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

@media (max-width: 640px) {
	.mtpp-grid-2, .mtpp-grid-3, .mtpp-grid-4 { grid-template-columns: 1fr; }
	.mtpp-section { padding: 44px 0; }
}

/* Feature cards */
.mtpp-feature {
	padding: 28px 22px;
	text-align: center;
}

.mtpp-feature-icon {
	font-size: 2rem;
	display: block;
	margin-bottom: 12px;
}

.mtpp-feature h3 {
	margin: 0 0 8px;
	font-size: 1.05rem;
}

.mtpp-feature p {
	margin: 0;
	color: var(--mtpp-muted);
	font-size: 0.92rem;
}

/* Lists */
.mtpp-checklist {
	list-style: none;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
}

@media (max-width: 640px) {
	.mtpp-checklist { grid-template-columns: 1fr; }
}

.mtpp-checklist li {
	padding-left: 30px;
	position: relative;
}

.mtpp-checklist li::before {
	content: "✓";
	position: absolute;
	left: 0;
	color: var(--mtpp-secondary);
	font-weight: 800;
}

.mtpp-chips {
	list-style: none;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.mtpp-chips li {
	background: rgba(0, 0, 0, 0.06);
	background: color-mix(in srgb, var(--mtpp-primary) 14%, transparent);
	color: var(--mtpp-secondary);
	padding: 8px 16px;
	border-radius: 999px;
	font-weight: 600;
	font-size: 0.9rem;
}

/* Gallery */
.mtpp-gallery-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
}

.mtpp-gallery-grid img {
	width: 100%;
	height: 220px;
	object-fit: cover;
	border-radius: 14px;
}

@media (max-width: 640px) {
	.mtpp-gallery-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Accordion / FAQ */
.mtpp-accordion-item {
	border: 1px solid var(--mtpp-border);
	border-radius: 12px;
	margin-bottom: 12px;
	overflow: hidden;
	background: var(--mtpp-card);
}

.mtpp-accordion-item summary {
	cursor: pointer;
	padding: 18px 22px;
	font-weight: 700;
	list-style: none;
}

.mtpp-accordion-item summary::-webkit-details-marker { display: none; }

.mtpp-accordion-body {
	padding: 0 22px 18px;
	color: var(--mtpp-muted);
}

/* Reviews */
.mtpp-review {
	padding: 26px 24px;
	margin: 0;
}

.mtpp-stars {
	color: #f5b301;
	margin-bottom: 10px;
}

.mtpp-review cite {
	display: block;
	margin-top: 12px;
	font-weight: 700;
	font-style: normal;
}

/* CTA band */
.mtpp-cta-band {
	background: linear-gradient(135deg, var(--mtpp-secondary), var(--mtpp-primary-dark));
	color: #fff;
	text-align: center;
}

.mtpp-cta-band h2 { color: #fff; }

.mtpp-cta-inner p {
	max-width: 560px;
	margin: 0 auto 24px;
	opacity: 0.95;
}

/* Contact */
.mtpp-contact-row {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
}

/* Sticky CTA */
.mtpp-sticky-cta {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9990;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 12px 20px;
	background: var(--mtpp-card);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border-top: 1px solid var(--mtpp-border);
	box-shadow: 0 -6px 30px rgba(0, 0, 0, 0.12);
	transform: translateY(110%);
	transition: transform 0.3s ease;
}

.mtpp-sticky-cta.is-visible {
	transform: translateY(0);
}

.mtpp-sticky-title {
	font-weight: 700;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Package cards (shortcode) */
.mtpp-live-search {
	width: 100%;
	max-width: 420px;
	padding: 12px 18px;
	border-radius: 999px;
	border: 1px solid var(--mtpp-border);
	margin-bottom: 24px;
	font-size: 1rem;
}

.mtpp-pkg-card {
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.mtpp-pkg-thumb {
	width: 100%;
	height: 190px;
	object-fit: cover;
}

.mtpp-pkg-body {
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1;
}

.mtpp-pkg-body h3 { margin: 0; }

.mtpp-pkg-body h3 a {
	text-decoration: none;
	color: var(--mtpp-fg);
}

.mtpp-pkg-sub {
	color: var(--mtpp-muted);
	font-size: 0.9rem;
	margin: 0;
}

.mtpp-pkg-price {
	font-weight: 800;
	color: var(--mtpp-secondary);
}

.mtpp-pkg-card .mtpp-btn {
	margin-top: auto;
	justify-content: center;
}

.mtpp-pkg-card.is-hidden { display: none; }

/* Animations */
@media (prefers-reduced-motion: no-preference) {
	.mtpp-animate {
		opacity: 0;
		transform: translateY(20px);
		transition: opacity 0.6s ease, transform 0.6s ease;
	}
	.mtpp-animate.is-in {
		opacity: 1;
		transform: none;
	}
}