/* ==========================================================================
   Mushtaha Tours Theme — Core Stylesheet
   Design language: Premium Light Travel — soft white/cream surfaces,
   rounded cards with layered soft shadows, brand red as the confident
   accent (CTAs, hovers, highlights), warm gold used sparingly for premium
   touches (ratings, badges). Built for an international travel & tourism
   brand: generous imagery slots, smooth scroll/hover motion, friendly
   rounded geometry — the opposite of stark/minimal.
   Variables -> Reset -> Layout -> Components -> Sections -> Utilities
   ========================================================================== */

:root {
	--color-primary: #D71A21;
	--color-primary-dark: #A8121A;
	--color-primary-light: #FCE9EA;
	--color-gold: #C9972E;
	--color-cream: #FFF8F2;
	--color-light-gray: #F6F7FB;
	--color-dark-gray: #1F2430;
	--color-white: #FFFFFF;
	--color-border: #E8EAF0;
	--color-text-muted: #667085;
	--font-heading: 'Poppins', 'Noto Kufi Arabic', sans-serif;
	--font-body: 'Open Sans', 'Noto Sans Arabic', sans-serif;
	--radius-sm: 10px;
	--radius-md: 18px;
	--radius-lg: 28px;
	--radius-pill: 999px;
	--shadow-sm: 0 4px 16px rgba(31, 36, 48, 0.06);
	--shadow-md: 0 14px 36px rgba(31, 36, 48, 0.10);
	--shadow-lg: 0 28px 64px rgba(31, 36, 48, 0.16);
	--shadow-primary: 0 14px 30px rgba(215, 26, 33, 0.28);
	--transition-base: 280ms cubic-bezier(0.4, 0, 0.2, 1);
	--transition-slow: 480ms cubic-bezier(0.16, 1, 0.3, 1);
	--header-height: 90px;
	--container-width: 1280px;
}

html[dir="rtl"] body {
	font-family: var(--font-body);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
	margin: 0;
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.7;
	color: var(--color-dark-gray);
	background: var(--color-white);
	-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
button { font-family: inherit; cursor: pointer; }
h1, h2, h3, h4, h5 {
	font-family: var(--font-heading);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.01em;
	margin: 0 0 18px;
	color: var(--color-dark-gray);
}
h1 { font-size: clamp(2.4rem, 5vw, 4.2rem); line-height: 1.1; font-weight: 700; }
h2 { font-size: clamp(1.9rem, 3.6vw, 3rem); }
h3 { font-size: 1.4rem; }
p { margin: 0 0 16px; color: var(--color-text-muted); }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

:focus-visible {
	outline: 3px solid var(--color-primary);
	outline-offset: 2px;
	border-radius: 4px;
}

.skip-link {
	/* Not left:-9999px: that classic offscreen technique inflates the
	   document's scrollable width to ~10,000px in RTL (left/right don't
	   mean "start/end" to layout sizing), pushing all real content out of
	   the visible viewport on narrow RTL screens. clip-path hides it
	   without affecting layout bounds in either direction. */
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	background: var(--color-primary);
	color: var(--color-white);
	padding: 10px 16px;
	z-index: 10000;
}
.skip-link:focus {
	left: 10px;
	top: 10px;
	width: auto;
	height: auto;
	overflow: visible;
	clip-path: none;
}
html[dir="rtl"] .skip-link:focus { left: auto; right: 10px; }

.container {
	max-width: var(--container-width);
	margin: 0 auto;
	padding: 0 24px;
}

section { padding: 96px 0; }
@media (max-width: 768px) { section { padding: 56px 0; } }

.section-heading { text-align: center; max-width: 700px; margin: 0 auto 56px; }
.section-heading .eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--color-primary);
	background: var(--color-primary-light);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	font-size: 0.78rem;
	padding: 7px 16px;
	border-radius: var(--radius-pill);
	margin-bottom: 18px;
}
.bg-light { background: var(--color-light-gray); }
.bg-cream { background: var(--color-cream); }
.bg-dark { background: var(--color-dark-gray); color: var(--color-white); }
.bg-dark h1, .bg-dark h2, .bg-dark h3, .bg-dark p { color: var(--color-white); }

/* ---------- Buttons ---------- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 15px 30px;
	border-radius: var(--radius-pill);
	font-weight: 600;
	font-size: 0.95rem;
	border: 2px solid transparent;
	cursor: pointer;
	transition: transform var(--transition-base), box-shadow var(--transition-base), background var(--transition-base), color var(--transition-base), border-color var(--transition-base);
	white-space: nowrap;
}
.btn-primary { background: var(--color-primary); color: var(--color-white); box-shadow: var(--shadow-primary); }
.btn-primary:hover { background: var(--color-primary-dark); transform: translateY(-3px); box-shadow: 0 18px 36px rgba(215,26,33,0.34); }
.btn-outline { border-color: var(--color-border); color: var(--color-dark-gray); background: var(--color-white); }
.btn-outline:hover { border-color: var(--color-primary); color: var(--color-primary); transform: translateY(-3px); box-shadow: var(--shadow-sm); }
.btn-white { background: var(--color-white); color: var(--color-primary); box-shadow: var(--shadow-md); }
.btn-white:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.btn-outline-light { border-color: rgba(255,255,255,0.55); color: var(--color-white); background: transparent; }
.btn-outline-light:hover { border-color: var(--color-white); background: rgba(255,255,255,0.12); transform: translateY(-3px); }
.btn-block { width: 100%; }
.btn:active { transform: translateY(-1px) scale(0.98); }
.btn[disabled] { opacity: 0.55; cursor: not-allowed; transform: none !important; box-shadow: none !important; }

/* ---------- Social icons (footer) ---------- */
.mushtaha-social-icons { display: inline-flex; gap: 10px; margin-inline-end: 16px; }
.social-icon { width: 28px; height: 28px; border-radius: 50%; background: rgba(255,255,255,0.12); display: inline-flex; align-items: center; justify-content: center; transition: background var(--transition-base), transform var(--transition-base); }
.social-icon:hover { background: var(--color-primary); transform: translateY(-2px); }

/* ---------- Language switcher (lives in header-actions + mobile menu, both light backgrounds) ---------- */
.mushtaha-lang-switch { display: inline-flex; align-items: center; background: var(--color-light-gray); border: 1px solid var(--color-border); border-radius: var(--radius-pill); padding: 3px; }
.mushtaha-lang-switch a { padding: 6px 14px; border-radius: var(--radius-pill); font-size: 0.78rem; font-weight: 700; color: var(--color-text-muted); transition: background var(--transition-base), color var(--transition-base); }
.mushtaha-lang-switch a:hover { color: var(--color-primary); }
.mushtaha-lang-switch a.is-active { background: var(--color-primary); color: var(--color-white); }
/* Polylang/WPML render their own <ul><li> markup inside the same wrapper
   (see mushtaha_language_switcher()) — restyle it to match the pill above
   instead of leaving their default plain-list output unstyled. */
.mushtaha-lang-switch ul { display: flex; align-items: center; gap: 0; margin: 0; padding: 0; list-style: none; }
.mushtaha-lang-switch li { list-style: none; margin: 0; }
.mushtaha-lang-switch .lang-item.current-lang a,
.mushtaha-lang-switch .wpml-ls-current-language a { background: var(--color-primary); color: var(--color-white); }

/* ---------- Header / Mega Menu ---------- */
.mushtaha-header {
	background: rgba(255,255,255,0.96);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--color-border);
	position: relative;
	z-index: 500;
	transition: box-shadow var(--transition-base);
}
.mushtaha-header.is-sticky-enabled.is-pinned {
	position: sticky;
	top: 0;
	box-shadow: var(--shadow-md);
	animation: slideDown var(--transition-slow);
}
@keyframes slideDown { from { transform: translateY(-100%); } to { transform: translateY(0); } }
.header-inner { display: flex; align-items: center; justify-content: space-between; min-height: var(--header-height); gap: 32px; }
.site-branding img { max-height: 54px; width: auto; }
.site-title-link { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 700; color: var(--color-primary); }

.mushtaha-main-nav { flex: 1; display: flex; justify-content: center; }
.mega-menu { display: flex; gap: 6px; position: relative; }
.mega-menu > .menu-item { position: relative; }
.nav-link { position: relative; display: flex; align-items: center; gap: 6px; padding: 12px 18px; font-weight: 600; font-size: 0.95rem; border-radius: var(--radius-pill); transition: color var(--transition-base), background var(--transition-base); }
.nav-link:hover { color: var(--color-primary); background: var(--color-primary-light); }
.nav-link.is-active { color: var(--color-primary); background: var(--color-primary-light); }
.nav-caret { transition: transform var(--transition-base); }
.has-mega-panel:hover .nav-caret { transform: rotate(180deg); }

.mushtaha-mega-panel {
	position: absolute;
	top: 100%;
	left: 50%;
	min-width: 300px;
	width: max-content;
	max-width: min(680px, calc(100vw - 48px));
	background: var(--color-white);
	box-shadow: var(--shadow-lg);
	border-radius: var(--radius-md);
	margin-top: 14px;
	opacity: 0;
	visibility: hidden;
	transform: translateX(-50%) translateY(10px) scale(0.98);
	transform-origin: top center;
	transition: opacity var(--transition-slow), transform var(--transition-slow), visibility var(--transition-slow);
	z-index: 50;
}
.has-mega-panel:hover .mushtaha-mega-panel,
.has-mega-panel:focus-within .mushtaha-mega-panel {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0) scale(1);
}
/* Columns adapt to however many .mega-panel-column children actually exist
   (1 for a simple list, up to 4+ for a full mega menu) instead of forcing
   4 fixed tracks that squeeze a single column's content into a quarter-width
   sliver and break the layout. */
.mega-panel-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 32px; padding: 32px; }
.mega-panel-column .mega-column-title { display: block; font-weight: 700; color: var(--color-primary); margin-bottom: 14px; }
.mega-panel-column .sub-menu { display: flex; flex-direction: column; gap: 10px; }
.mega-panel-column .sub-menu-item a { color: var(--color-text-muted); transition: color var(--transition-base), transform var(--transition-base); display: inline-block; }
.mega-panel-column .sub-menu-item a:hover { color: var(--color-primary); transform: translateX(4px); }
html[dir="rtl"] .mega-panel-column .sub-menu-item a:hover { transform: translateX(-4px); }

.header-actions { display: flex; align-items: center; gap: 16px; }
.btn-cta { padding: 13px 26px; }

.mobile-menu-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: none; padding: 8px; min-width: 44px; min-height: 44px; }
.mobile-menu-toggle span { width: 24px; height: 2px; border-radius: 2px; background: var(--color-dark-gray); transition: transform var(--transition-base), opacity var(--transition-base); }
.mobile-menu-panel { display: none; background: var(--color-white); border-top: 1px solid var(--color-border); padding: 24px 0; box-shadow: var(--shadow-md); }
.mobile-menu-panel.is-open { display: block; animation: fadeUp var(--transition-slow); }
.mobile-menu-list { display: flex; flex-direction: column; }
.mobile-menu-list a { display: block; padding: 15px 20px; border-bottom: 1px solid var(--color-border); min-height: 44px; font-weight: 600; }
.mobile-menu-footer { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; padding: 16px 20px; }

@media (max-width: 1024px) {
	.mushtaha-main-nav { display: none; }
	.mobile-menu-toggle { display: flex; }
}

@media (max-width: 480px) {
	/* Logo + language pill + CTA button + hamburger were crowding/overflowing
	   on narrow phones. The language pill is still reachable in the mobile
	   menu footer, so hide the header-row copy here rather than shrink
	   everything to the point of being hard to tap. */
	.header-actions .mushtaha-lang-switch { display: none; }
	.btn-cta { padding: 11px 16px; font-size: 0.85rem; }
	.site-branding img { max-height: 40px; }
}

/* ---------- WhatsApp Floating Button ---------- */
.mushtaha-whatsapp-float {
	position: fixed;
	bottom: 26px;
	inset-inline-end: 26px;
	width: 62px;
	height: 62px;
	border-radius: 50%;
	background: #25D366;
	color: var(--color-white);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: var(--shadow-lg);
	z-index: 900;
	transition: transform var(--transition-base);
}
.mushtaha-whatsapp-float::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 2px solid #25D366;
	animation: whatsappPulseRing 2.2s infinite;
}
.mushtaha-whatsapp-float:hover { transform: scale(1.1) translateY(-2px); }
@keyframes whatsappPulseRing {
	0% { transform: scale(1); opacity: 0.6; }
	100% { transform: scale(1.7); opacity: 0; }
}

/* ---------- Breadcrumbs ---------- */
.mushtaha-breadcrumbs { background: var(--color-light-gray); padding: 18px 0; }
.mushtaha-breadcrumbs ol { display: flex; gap: 8px; max-width: var(--container-width); margin: 0 auto; padding: 0 24px; font-size: 0.85rem; color: var(--color-text-muted); }
.mushtaha-breadcrumbs li:not(:last-child)::after { content: '/'; margin-inline-start: 8px; }
.mushtaha-breadcrumbs a:hover { color: var(--color-primary); }

/* ---------- Hero ---------- */
.mushtaha-hero { position: relative; padding: 80px 0 0; overflow: hidden; background: linear-gradient(180deg, var(--color-cream) 0%, var(--color-white) 100%); }
.hero-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; align-items: center; padding-bottom: 80px; }
@media (max-width: 960px) { .hero-grid { grid-template-columns: 1fr; padding-bottom: 48px; } }

.hero-blob { position: absolute; border-radius: 50%; filter: blur(2px); z-index: 0; opacity: 0.5; animation: blobFloat 9s ease-in-out infinite; }
.hero-blob-1 { width: 280px; height: 280px; background: var(--color-primary-light); top: -60px; inset-inline-end: 8%; }
.hero-blob-2 { width: 180px; height: 180px; background: #FCEFD8; bottom: 10%; inset-inline-start: 2%; animation-delay: 2s; }
@keyframes blobFloat { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-24px) scale(1.06); } }

.hero-content { position: relative; z-index: 2; }
.hero-content .eyebrow { color: var(--color-primary); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.85rem; display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px; }
.hero-content h1 { animation: fadeUp 600ms ease-out; }
.hero-content p { font-size: 1.15rem; max-width: 560px; animation: fadeUp 600ms ease-out 100ms backwards; }
.hero-cta-group { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 8px; margin-bottom: 36px; animation: fadeUp 600ms ease-out 200ms backwards; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } }

.hero-chips { display: flex; flex-wrap: wrap; gap: 10px; animation: fadeUp 600ms ease-out 280ms backwards; }
.hero-chip { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; background: var(--color-white); border: 1.5px solid var(--color-border); border-radius: var(--radius-pill); font-weight: 600; font-size: 0.88rem; transition: border-color var(--transition-base), color var(--transition-base), transform var(--transition-base), box-shadow var(--transition-base); }
.hero-chip:hover { border-color: var(--color-primary); color: var(--color-primary); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.hero-chip:active { transform: translateY(0) scale(0.97); }
.hero-chip .chip-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--color-gold); }

.hero-visual { position: relative; z-index: 1; }
.hero-visual-frame { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); aspect-ratio: 4/4.6; background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%); }
.hero-visual-frame img { width: 100%; height: 100%; object-fit: cover; transition: transform 6s ease; }
.hero-visual-frame:hover img { transform: scale(1.08); }
.hero-visual-pattern { position: absolute; inset: 0; opacity: 0.18; }
.hero-visual-badge { position: absolute; bottom: 24px; inset-inline-start: 24px; background: var(--color-white); border-radius: var(--radius-md); box-shadow: var(--shadow-md); padding: 16px 20px; display: flex; align-items: center; gap: 12px; animation: fadeUp 600ms ease-out 400ms backwards; }
.hero-visual-badge .badge-icon { width: 40px; height: 40px; border-radius: 50%; background: var(--color-primary-light); color: var(--color-primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.hero-visual-badge strong { display: block; font-size: 1rem; }
.hero-visual-badge span { font-size: 0.8rem; color: var(--color-text-muted); }

/* ---------- Trust badges strip ---------- */
.trust-strip { border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); background: var(--color-white); }
.trust-strip-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; padding: 28px 0; }
@media (max-width: 900px) { .trust-strip-grid { grid-template-columns: repeat(2, 1fr); } }
.trust-item { display: flex; align-items: center; gap: 14px; }
.trust-item-icon { width: 46px; height: 46px; border-radius: 50%; background: var(--color-primary-light); color: var(--color-primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.trust-item strong { display: block; font-size: 0.92rem; }
.trust-item span { font-size: 0.8rem; color: var(--color-text-muted); }

/* ---------- Intro / Stats ---------- */
.intro-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
@media (max-width: 900px) { .intro-grid { grid-template-columns: 1fr; } }

.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
@media (max-width: 900px) { .stats-grid { grid-template-columns: repeat(2, 1fr); } }
.stat-tile { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: var(--radius-md); padding: 32px 24px; text-align: center; transition: transform var(--transition-base), background var(--transition-base); }
.stat-tile:hover { transform: translateY(-6px); background: rgba(255,255,255,0.1); }
.stat-number { font-family: var(--font-heading); font-size: clamp(2.2rem, 4vw, 3rem); font-weight: 700; color: var(--color-white); line-height: 1; }
.stat-label { color: rgba(255,255,255,0.7); font-size: 0.9rem; margin-top: 8px; }

/* ---------- Card Grids (Services / Destinations / Offers) ---------- */
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.card-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1024px) { .card-grid, .card-grid.cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .card-grid, .card-grid.cols-4 { grid-template-columns: 1fr; } }

/* Bento variant — breaks the generic "3 equal cards in a row" feature-row
   pattern by letting the first item claim a 2x2 footprint; the rest
   auto-flow densely around it. Falls back to a single column on mobile. */
.card-grid.bento { grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(190px, auto); grid-auto-flow: dense; }
.card-grid.bento > :first-child { grid-column: span 2; grid-row: span 2; }
.card-grid.bento > :first-child .service-card-icon { width: 72px; height: 72px; margin-top: 32px; }
.card-grid.bento > :first-child h3 { font-size: 1.7rem; }
.card-grid.bento > :first-child .service-card-body { justify-content: flex-start; }
.card-grid.bento > :first-child .service-card-body p { font-size: 1.05rem; max-width: 480px; }
.card-grid.bento > :first-child .service-card-link { margin-top: 24px; }
@media (max-width: 1024px) {
	.card-grid.bento { grid-template-columns: repeat(2, 1fr); }
	.card-grid.bento > :first-child { grid-column: span 2; grid-row: span 1; }
}
@media (max-width: 640px) {
	.card-grid.bento { grid-template-columns: 1fr; }
	.card-grid.bento > :first-child { grid-column: span 1; grid-row: span 1; }
}

.service-card {
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	overflow: hidden;
	transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
	display: flex;
	flex-direction: column;
}
.service-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); border-color: transparent; }
.service-card:active { transform: translateY(-4px) scale(0.99); }
.service-card-icon { width: 60px; height: 60px; border-radius: var(--radius-md); background: var(--color-primary-light); color: var(--color-primary); display: flex; align-items: center; justify-content: center; margin: 28px 28px 0; transition: background var(--transition-base), color var(--transition-base), transform var(--transition-base); }
.service-card:hover .service-card-icon { background: var(--color-primary); color: var(--color-white); transform: scale(1.08) rotate(-4deg); }
.service-card-body { padding: 22px 28px 28px; flex: 1; display: flex; flex-direction: column; }
.service-card-body h3 { margin-bottom: 10px; }
.service-card-link { margin-top: auto; color: var(--color-primary); font-weight: 700; font-size: 0.92rem; display: inline-flex; align-items: center; gap: 6px; padding-top: 10px; }
.service-card-link svg { transition: transform var(--transition-base); }
.service-card:hover .service-card-link svg { transform: translateX(4px); }
html[dir="rtl"] .service-card:hover .service-card-link svg { transform: translateX(-4px); }

.destination-card { position: relative; border-radius: var(--radius-md); overflow: hidden; aspect-ratio: 4/5; box-shadow: var(--shadow-sm); transition: box-shadow var(--transition-base), transform var(--transition-base); }
.destination-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-6px); }
.destination-card:active { transform: translateY(-3px) scale(0.99); }
.destination-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms ease; }
.destination-card:hover img { transform: scale(1.1); }
.destination-card-tint { position: absolute; inset: 0; transition: transform 600ms ease; }
.destination-card:hover .destination-card-tint { transform: scale(1.1); }
.destination-tint-1 { background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary)); }
.destination-tint-2 { background: linear-gradient(135deg, var(--color-dark-gray), var(--color-primary-dark)); }
.destination-tint-3 { background: linear-gradient(135deg, var(--color-gold), var(--color-primary)); }
.destination-tint-4 { background: linear-gradient(135deg, #3A3F4E, var(--color-primary)); }
.destination-card-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(0,0,0,0.78) 100%); display: flex; align-items: flex-end; padding: 26px; }
.destination-card-overlay h3 { color: var(--color-white); margin: 0; font-size: 1.3rem; }
.destination-card-overlay span { color: rgba(255,255,255,0.82); font-size: 0.85rem; }

.offer-card { border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm); transition: box-shadow var(--transition-base), transform var(--transition-base); background: var(--color-white); }
.offer-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-6px); }
.offer-card:active { transform: translateY(-3px) scale(0.99); }
.offer-card-badge { position: absolute; margin: 16px; background: var(--color-gold); color: var(--color-white); padding: 7px 16px; border-radius: var(--radius-pill); font-size: 0.78rem; font-weight: 700; }
.offer-card-img { position: relative; aspect-ratio: 16/10; overflow: hidden; }
.offer-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms ease; }
.offer-card:hover .offer-card-img img { transform: scale(1.08); }
.offer-card-body { padding: 22px; }
.offer-price { color: var(--color-primary); font-weight: 700; font-size: 1.25rem; }

/* ---------- Testimonials ---------- */
.testimonial-track { display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; }
.testimonial-card { scroll-snap-align: start; min-width: 340px; background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 30px; box-shadow: var(--shadow-sm); transition: box-shadow var(--transition-base), transform var(--transition-base); }
.testimonial-card:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); }
.testimonial-stars { color: var(--color-gold); margin-bottom: 14px; letter-spacing: 3px; }
.testimonial-author { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.testimonial-author img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; }
.testimonial-author strong { display: block; font-size: 0.95rem; }
.testimonial-author span { font-size: 0.82rem; color: var(--color-text-muted); }

/* ---------- Partners ---------- */
.partners-row { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; opacity: 0.75; }
.partners-row img { max-height: 46px; width: auto; height: auto; filter: grayscale(1); transition: filter var(--transition-base), opacity var(--transition-base), transform var(--transition-base); }
.partners-row img:hover { filter: grayscale(0); opacity: 1; transform: translateY(-2px); }

/* ---------- Forms ---------- */
.mushtaha-form { background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 44px; box-shadow: var(--shadow-md); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
@media (max-width: 640px) { .form-row { grid-template-columns: 1fr; } }
.form-group { display: flex; flex-direction: column; gap: 7px; margin-bottom: 20px; }
.form-row .form-group { margin-bottom: 0; }
.form-group label { font-weight: 600; font-size: 0.9rem; }
.form-group .required { color: var(--color-primary); }
.form-group input,
.form-group select,
.form-group textarea {
	min-height: 50px;
	padding: 12px 18px;
	border: 1.5px solid var(--color-border);
	border-radius: var(--radius-sm);
	font-family: inherit;
	font-size: 1rem;
	background: var(--color-light-gray);
	color: var(--color-dark-gray);
	transition: border-color var(--transition-base), box-shadow var(--transition-base), background var(--transition-base);
}
.form-group textarea { min-height: 120px; resize: vertical; }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
	border-color: var(--color-primary);
	box-shadow: 0 0 0 4px rgba(215,26,33,0.12);
	background: var(--color-white);
	outline: none;
}
.form-group .field-error { color: var(--color-primary); font-size: 0.82rem; min-height: 18px; }
.form-group input[aria-invalid="true"],
.form-group select[aria-invalid="true"],
.form-group textarea[aria-invalid="true"] { border-color: var(--color-primary); }

.form-feedback { display: none; padding: 16px 20px; border-radius: var(--radius-sm); margin-bottom: 20px; font-weight: 600; }
.form-feedback.is-success { display: block; background: #E7F7EE; color: #1E7A43; }
.form-feedback.is-error { display: block; background: #FCEAEA; color: #A8121A; }

.btn-spinner { width: 16px; height: 16px; border: 2px solid rgba(255,255,255,0.5); border-top-color: var(--color-white); border-radius: 50%; animation: spin 700ms linear infinite; display: none; }
.is-loading .btn-spinner { display: inline-block; }
.is-loading .btn-label { opacity: 0.85; }
@keyframes spin { to { transform: rotate(360deg); } }

.whatsapp-quick-btn { display: inline-flex; align-items: center; gap: 10px; background: #25D366; color: var(--color-white); padding: 15px 26px; border-radius: var(--radius-pill); font-weight: 600; box-shadow: 0 12px 26px rgba(37,211,102,0.3); transition: background var(--transition-base), transform var(--transition-base); }
.whatsapp-quick-btn:hover { background: #1DA851; transform: translateY(-3px); }

/* ---------- Newsletter Band ---------- */
.newsletter-band { position: relative; overflow: hidden; background: linear-gradient(120deg, var(--color-primary) 0%, var(--color-primary-dark) 100%); border-radius: var(--radius-lg); padding: 48px; display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; color: var(--color-white); box-shadow: 0 20px 48px rgba(0,0,0,0.28); }
.newsletter-band::after { content: ''; position: absolute; top: -60px; inset-inline-end: -60px; width: 220px; height: 220px; border-radius: 50%; background: rgba(255,255,255,0.06); pointer-events: none; }
.newsletter-band h3 { color: var(--color-white); margin-bottom: 6px; }
.newsletter-band p { color: rgba(255,255,255,0.85); margin-bottom: 0; }
.newsletter-form { display: flex; gap: 10px; flex-wrap: wrap; min-width: 360px; flex: 1; max-width: 460px; }
.newsletter-form input[type="email"] { flex: 1; min-width: 200px; min-height: 52px; padding: 0 20px; border-radius: var(--radius-pill); border: none; font-size: 0.95rem; }
.newsletter-form input[type="email"]:focus { outline: 3px solid rgba(255,255,255,0.6); }
.newsletter-form .btn { background: var(--color-dark-gray); border-color: var(--color-dark-gray); color: var(--color-white); white-space: nowrap; }
.newsletter-form .btn:hover { background: #000; color: var(--color-white); }
.newsletter-feedback { width: 100%; margin-top: 10px; font-size: 0.85rem; font-weight: 600; min-height: 18px; }

/* ---------- Footer ---------- */
.mushtaha-footer { position: relative; background: var(--color-dark-gray); color: rgba(255,255,255,0.78); }
.mushtaha-footer::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-gold) 50%, var(--color-primary) 100%); }
.footer-newsletter-wrap { padding: 56px 0 0; }
.footer-top { display: grid; grid-template-columns: 2fr 1fr 1fr 1.3fr; gap: 40px; padding: 64px 0; }
.footer-top .footer-col { padding-inline-start: 40px; border-inline-start: 1px solid rgba(255,255,255,0.08); }
.footer-top .footer-col:first-child { padding-inline-start: 0; border-inline-start: none; }
@media (max-width: 900px) {
	.footer-top { grid-template-columns: repeat(2, 1fr); }
	.footer-top .footer-col { border-inline-start: none; padding-inline-start: 0; }
}
@media (max-width: 560px) { .footer-top { grid-template-columns: 1fr; } }
.footer-brand .custom-logo-link { display: inline-block; margin-bottom: 18px; }
.footer-brand img.custom-logo { max-height: 44px; width: auto; height: auto; }
.footer-logo-text { display: inline-block; margin-bottom: 18px; color: var(--color-white); font-size: 1.4rem; font-weight: 700; }
.footer-tagline { color: rgba(255,255,255,0.62); line-height: 1.8; max-width: 320px; }

/* .widget-title is shared with the light blog/news sidebar widgets (see
   .news-sidebar .widget) — keep the base rule readable on light backgrounds
   and let the footer override to white + an accent underline. */
.widget-title { color: var(--color-dark-gray); font-size: 1rem; margin-bottom: 20px; }
.mushtaha-footer .widget-title { position: relative; color: var(--color-white); font-size: 0.95rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; padding-bottom: 14px; margin-bottom: 22px; }
.mushtaha-footer .widget-title::after { content: ''; position: absolute; bottom: 0; inset-inline-start: 0; width: 30px; height: 2px; background: var(--color-primary); border-radius: 2px; }

.footer-menu li, .footer-contact-list li { margin-bottom: 14px; }
.footer-menu a, .footer-contact-list a { position: relative; padding-inline-start: 16px; color: rgba(255,255,255,0.65); font-size: 0.93rem; transition: color var(--transition-base), transform var(--transition-base), padding var(--transition-base); display: inline-block; }
.footer-menu a::before, .footer-contact-list a::before { content: ''; position: absolute; inset-inline-start: 0; top: 50%; transform: translateY(-50%); width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,0.3); transition: background var(--transition-base); }
.footer-menu a:hover, .footer-contact-list a:hover { color: var(--color-white); transform: translateX(4px); }
.footer-menu a:hover::before, .footer-contact-list a:hover::before { background: var(--color-primary); }
html[dir="rtl"] .footer-menu a:hover, html[dir="rtl"] .footer-contact-list a:hover { transform: translateX(-4px); }

.footer-trust-row { display: flex; gap: 16px; flex-wrap: wrap; padding: 32px 0; border-top: 1px solid rgba(255,255,255,0.08); }
.footer-trust-row .trust-mini { display: flex; align-items: center; gap: 10px; padding: 10px 18px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); border-radius: var(--radius-pill); font-size: 0.82rem; font-weight: 600; color: rgba(255,255,255,0.75); transition: background var(--transition-base), border-color var(--transition-base); }
.footer-trust-row .trust-mini:hover { background: rgba(255,255,255,0.09); border-color: rgba(255,255,255,0.16); }
.footer-trust-row .trust-mini svg { color: var(--color-primary); flex-shrink: 0; }

.footer-bottom { background: rgba(0,0,0,0.18); padding: 22px 0; font-size: 0.85rem; }
.footer-bottom p { color: rgba(255,255,255,0.78); }
.footer-bottom-inner { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; }

/* ---------- Info columns (Requirements / Documents / Processing Time) ---------- */
.info-columns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 24px; }
@media (max-width: 900px) { .info-columns { grid-template-columns: 1fr; } }
.info-block { background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 30px; transition: box-shadow var(--transition-base), transform var(--transition-base); }
.info-block:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); }
.info-block-highlight { background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark)); color: var(--color-white); border-color: transparent; }
.info-block-highlight h3 { color: var(--color-white); }
.info-block-highlight p { color: rgba(255,255,255,0.9); }
.processing-time { font-family: var(--font-heading); font-size: 1.9rem; font-weight: 700; margin-bottom: 8px; }
.check-list { display: flex; flex-direction: column; gap: 13px; margin-top: 16px; }
.check-list li { position: relative; padding-inline-start: 28px; color: var(--color-text-muted); }
.check-list li::before { content: ''; position: absolute; inset-inline-start: 0; top: 4px; width: 18px; height: 18px; border-radius: 50%; background: var(--color-primary-light); }
.check-list li::after { content: '✓'; position: absolute; inset-inline-start: 3px; top: 2px; color: var(--color-primary); font-size: 0.75rem; font-weight: 700; }

/* ---------- Accordion (FAQ, Egypt Security FAQ) ---------- */
.mushtaha-accordion { display: flex; flex-direction: column; gap: 12px; }
.accordion-item { border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 4px 22px; background: var(--color-white); transition: border-color var(--transition-base), box-shadow var(--transition-base); }
.accordion-item:hover { border-color: var(--color-primary); }
.accordion-item[open] { box-shadow: var(--shadow-sm); }
.accordion-item summary { cursor: pointer; padding: 18px 0; font-weight: 600; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.accordion-item summary::-webkit-details-marker { display: none; }
.accordion-item summary::after { content: '+'; font-size: 1.4rem; color: var(--color-primary); transition: transform var(--transition-base); }
.accordion-item[open] summary::after { transform: rotate(45deg); }
.accordion-body { padding-bottom: 20px; color: var(--color-text-muted); }
.faq-search-wrap { margin: 28px 0; position: relative; }
.faq-search-wrap input { width: 100%; min-height: 56px; padding: 14px 22px; border: 1.5px solid var(--color-border); border-radius: var(--radius-pill); font-size: 1rem; background: var(--color-light-gray); }
.faq-search-wrap input:focus { border-color: var(--color-primary); outline: none; box-shadow: 0 0 0 4px rgba(215,26,33,0.12); background: var(--color-white); }

/* ---------- Contact map ---------- */
.contact-map { border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--color-border); box-shadow: var(--shadow-sm); }
.contact-map iframe { width: 100%; height: 280px; border: 0; display: block; }

/* ---------- News / Blog ---------- */
.news-layout { display: grid; grid-template-columns: 2.4fr 1fr; gap: 40px; }
@media (max-width: 900px) { .news-layout { grid-template-columns: 1fr; } }
.news-main { display: flex; flex-direction: column; }

/* Featured first article — large editorial treatment, image one side,
   content the other. Falls back to a brand-gradient panel when the post
   has no featured image so the layout never looks broken on fresh content. */
.news-featured { display: grid; grid-template-columns: 1.3fr 1fr; align-items: stretch; background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); margin-bottom: 48px; transition: box-shadow var(--transition-base); }
.news-featured:hover { box-shadow: var(--shadow-lg); }
.news-featured-img { position: relative; min-height: 320px; background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%); }
.news-featured-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.news-featured-badge { position: absolute; top: 22px; inset-inline-start: 22px; background: var(--color-white); color: var(--color-primary); font-weight: 700; font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.05em; padding: 7px 16px; border-radius: var(--radius-pill); box-shadow: var(--shadow-sm); }
.news-featured-body { padding: 44px 44px 44px 0; display: flex; flex-direction: column; justify-content: center; }
.news-featured-body h2 { font-size: clamp(1.5rem, 2.4vw, 2.1rem); margin-bottom: 14px; }
@media (max-width: 900px) {
	.news-featured { grid-template-columns: 1fr; }
	.news-featured-body { padding: 28px; }
	.news-featured-img { min-height: 220px; }
}

.news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
@media (max-width: 1024px) { .news-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .news-grid { grid-template-columns: 1fr; } }
.news-grid-card { display: flex; flex-direction: column; border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; background: var(--color-white); transition: box-shadow var(--transition-base), transform var(--transition-base); }
.news-grid-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-6px); }
.news-grid-card:active { transform: translateY(-3px) scale(0.99); }
.news-grid-card-img { position: relative; aspect-ratio: 16/10; overflow: hidden; background: linear-gradient(135deg, var(--color-dark-gray) 0%, var(--color-primary-dark) 100%); }
.news-grid-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms ease; }
.news-grid-card:hover .news-grid-card-img img { transform: scale(1.08); }
.news-grid-card-body { padding: 22px; display: flex; flex-direction: column; flex: 1; }
.news-grid-card-body h3 { font-size: 1.1rem; margin-bottom: 8px; }
.news-card-date { color: var(--color-primary); font-size: 0.82rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.news-sidebar .widget { background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 24px; margin-bottom: 24px; }
.news-pagination { margin-top: 48px; }
.news-pagination .page-numbers { display: inline-flex; padding: 8px 16px; margin-inline-end: 6px; border: 1px solid var(--color-border); border-radius: var(--radius-pill); }
.news-pagination .page-numbers.current { background: var(--color-primary); color: var(--color-white); border-color: var(--color-primary); }
.news-content { line-height: 1.8; }
.news-content img { border-radius: var(--radius-md); margin: 24px 0; }
.news-content iframe, .news-content embed, .news-content video { max-width: 100%; }
/* Editor-pasted tables/embeds (pricing tables, maps, etc.) can be wider
   than the viewport on phones; scroll them horizontally inside their own
   box instead of breaking the page layout. */
.news-content table { display: block; max-width: 100%; overflow-x: auto; white-space: nowrap; border-collapse: collapse; }
.news-content table td, .news-content table th { padding: 10px 16px; border: 1px solid var(--color-border); }
.news-tags { margin-top: 32px; display: flex; gap: 8px; flex-wrap: wrap; }
.news-tags a { background: var(--color-light-gray); padding: 6px 14px; border-radius: var(--radius-pill); font-size: 0.82rem; transition: background var(--transition-base), color var(--transition-base); }
.news-tags a:hover { background: var(--color-primary-light); color: var(--color-primary); }

/* ---------- Request form pages (Flight/Hotel/Civil Affairs/etc.) ---------- */
.request-page-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 32px; align-items: start; }
@media (max-width: 900px) { .request-page-grid { grid-template-columns: 1fr; } }
.request-page-side { position: sticky; top: 110px; }

/* ---------- Intro "Why Choose Us" list ---------- */
.intro-why { background: var(--color-cream); border-radius: var(--radius-lg); padding: 36px; }
.intro-why-list { display: flex; flex-direction: column; gap: 20px; margin-top: 20px; }
.intro-why-list li { display: flex; flex-direction: column; gap: 4px; padding-inline-start: 20px; border-inline-start: 3px solid var(--color-primary); }
.intro-why-list span { color: var(--color-text-muted); font-size: 0.9rem; }

/* ---------- Utilities ---------- */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* Honeypot field on request forms — same direction-agnostic hiding technique
   as .screen-reader-text above (not left:-9999px, which breaks RTL layouts). */
.mtm-honeypot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
[data-animate] { opacity: 0; transform: translateY(24px); transition: opacity 650ms cubic-bezier(0.16,1,0.3,1), transform 650ms cubic-bezier(0.16,1,0.3,1); }
[data-animate].is-visible { opacity: 1; transform: translateY(0); }
[data-animate-delay="1"] { transition-delay: 80ms; }
[data-animate-delay="2"] { transition-delay: 160ms; }
[data-animate-delay="3"] { transition-delay: 240ms; }
[data-animate-delay="4"] { transition-delay: 320ms; }
[data-animate-delay="5"] { transition-delay: 400ms; }
[data-animate-delay="6"] { transition-delay: 480ms; }