/* ═══════════════════════════════════════════════════════════════════════════
   Marsaalam Pack Payments — Frontend CSS  (Dark Mode Premium)
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
	/* Brand */
	--mpp-gold:          #C9A84C;
	--mpp-gold-light:    #e8d08a;
	--mpp-gold-dark:     #a8873a;
	--mpp-gold-muted:    rgba(201,168,76,.15);
	--mpp-gold-border:   rgba(201,168,76,.25);

	/* Dark palette */
	--mpp-bg:            #0a0a0a;
	--mpp-bg-card:       #111111;
	--mpp-bg-card-2:     #161616;
	--mpp-bg-input:      rgba(255,255,255,.05);
	--mpp-bg-input-focus:rgba(255,255,255,.08);

	/* Text */
	--mpp-text:          #f0f0f0;
	--mpp-text-soft:     rgba(240,240,240,.75);
	--mpp-text-muted:    rgba(240,240,240,.45);

	/* Borders */
	--mpp-border:        rgba(255,255,255,.08);
	--mpp-border-gold:   rgba(201,168,76,.30);

	/* Misc */
	--mpp-radius:        14px;
	--mpp-radius-sm:     8px;
	--mpp-shadow:        0 4px 24px rgba(0,0,0,.45);
	--mpp-shadow-lg:     0 12px 48px rgba(0,0,0,.65);
	--mpp-glass:         rgba(255,255,255,.03);
	--mpp-transition:    .25s ease;
}

/* ── Reset ────────────────────────────────────────────────────────────────── */
.mpp-page-wrap *, .mpp-page-wrap *::before, .mpp-page-wrap *::after {
	box-sizing: border-box;
}
.mpp-page-wrap {
	font-family: 'Lato', 'Segoe UI', Arial, sans-serif;
	color: var(--mpp-text);
	line-height: 1.6;
	background: var(--mpp-bg);
	min-height: 100vh;
}

/* ── Hero ─────────────────────────────────────────────────────────────────── */
.mpp-hero {
	position: relative;
	min-height: 400px;
	background: var(--mpp-bg) no-repeat center center / cover;
	display: flex;
	align-items: flex-end;
}
.mpp-hero-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to bottom,
		rgba(0,0,0,.1) 0%,
		rgba(0,0,0,.55) 50%,
		rgba(0,0,0,.88) 100%
	);
	display: flex;
	align-items: center;
	justify-content: center;
}
.mpp-hero-content {
	padding: 52px 44px;
	max-width: 820px;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.mpp-badge {
	display: inline-block;
	background: linear-gradient(135deg, var(--mpp-gold) 0%, var(--mpp-gold-dark) 100%);
	color: #fff;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 2.5px;
	text-transform: uppercase;
	padding: 5px 14px;
	border-radius: 20px;
	margin-bottom: 14px;
}
.mpp-hero-title {
	font-size: clamp(30px, 4vw, 54px);
	font-weight: 900;
	color: #fff;
	margin: 0 0 14px;
	line-height: 1.1;
	text-shadow: 0 2px 12px rgba(0,0,0,.5);
}
.mpp-hero-duration {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: rgba(255,255,255,.8);
	font-size: 15px;
	margin: 0 0 18px;
	background: rgba(255,255,255,.1);
	backdrop-filter: blur(8px);
	padding: 5px 14px;
	border-radius: 20px;
	border: 1px solid rgba(255,255,255,.12);
}
.mpp-hero-duration i { color: var(--mpp-gold); }
.mpp-hero-price {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 6px;
	margin-top: 4px;
}
.mpp-price-amount {
	font-size: 44px;
	font-weight: 900;
	color: var(--mpp-gold);
	line-height: 1;
	text-shadow: 0 0 30px rgba(201,168,76,.4);
}
.mpp-price-currency {
	font-size: 20px;
	font-weight: 700;
	color: var(--mpp-gold);
}
.mpp-price-per {
	font-size: 14px;
	color: rgba(255,255,255,.5);
	margin-left: 2px;
}

/* ── Body layout ──────────────────────────────────────────────────────────── */
.mpp-body {
	background: var(--mpp-bg);
	padding: 44px 20px 100px;
}
.mpp-container {
	max-width: 1200px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 360px;
	gap: 28px;
	align-items: start;
}

/* ── Glass Cards ──────────────────────────────────────────────────────────── */
.mpp-section {
	background: var(--mpp-bg-card);
	border: 1px solid var(--mpp-border);
	border-radius: var(--mpp-radius);
	padding: 32px;
	margin-bottom: 20px;
	box-shadow: var(--mpp-shadow);
	backdrop-filter: blur(10px);
	transition: border-color var(--mpp-transition);
}
.mpp-section:hover {
	border-color: rgba(255,255,255,.12);
}
.mpp-section-title {
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--mpp-gold);
	margin: 0 0 22px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--mpp-border-gold);
	display: flex;
	align-items: center;
	gap: 10px;
}
.mpp-section-title i {
	font-size: 14px;
	opacity: .85;
}
.mpp-content {
	font-size: 15px;
	line-height: 1.8;
	color: var(--mpp-text-soft);
}
.mpp-content p { margin: 0 0 1em; }
.mpp-content h2, .mpp-content h3 { color: var(--mpp-text); }

/* ── Gallery ──────────────────────────────────────────────────────────────── */
.mpp-gallery-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: 10px;
}
.mpp-gallery-item {
	display: block;
	border-radius: var(--mpp-radius-sm);
	overflow: hidden;
	aspect-ratio: 4/3;
	border: 1px solid var(--mpp-border);
}
.mpp-gallery-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--mpp-transition);
}
.mpp-gallery-item:hover img { transform: scale(1.06); }

/* ── Features ─────────────────────────────────────────────────────────────── */
.mpp-features-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 10px;
}
.mpp-feature-item {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	color: var(--mpp-text-soft);
	background: var(--mpp-glass);
	padding: 11px 14px;
	border-radius: var(--mpp-radius-sm);
	border: 1px solid var(--mpp-border);
	transition: border-color var(--mpp-transition), background var(--mpp-transition);
}
.mpp-feature-item:hover {
	background: rgba(201,168,76,.06);
	border-color: var(--mpp-border-gold);
}
.mpp-feature-check {
	color: var(--mpp-gold);
	font-size: 13px;
	flex-shrink: 0;
}

/* ── Conditions ───────────────────────────────────────────────────────────── */
.mpp-conditions-content {
	font-size: 14px;
	color: var(--mpp-text-soft);
	line-height: 1.8;
	background: rgba(201,168,76,.04);
	border-left: 3px solid var(--mpp-gold);
	padding: 16px 22px;
	border-radius: 0 var(--mpp-radius-sm) var(--mpp-radius-sm) 0;
}

/* ── FAQ ──────────────────────────────────────────────────────────────────── */
.mpp-faq-list { display: flex; flex-direction: column; gap: 8px; }
.mpp-faq-item {
	border: 1px solid var(--mpp-border);
	border-radius: var(--mpp-radius-sm);
	overflow: hidden;
	background: var(--mpp-bg-card);
}
.mpp-faq-q {
	width: 100%;
	background: transparent;
	border: none;
	padding: 16px 20px;
	text-align: left;
	font-size: 14px;
	font-weight: 600;
	color: var(--mpp-text);
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	align-items: center;
	transition: background var(--mpp-transition), color var(--mpp-transition);
}
.mpp-faq-q:hover { background: rgba(201,168,76,.05); color: var(--mpp-gold-light); }
.mpp-faq-q.active { background: rgba(201,168,76,.07); color: var(--mpp-gold); }
.mpp-faq-arrow { transition: transform var(--mpp-transition); color: var(--mpp-gold); font-size: 11px; }
.mpp-faq-q.active .mpp-faq-arrow { transform: rotate(180deg); }
.mpp-faq-a {
	display: none;
	padding: 0 20px 16px;
	font-size: 14px;
	color: var(--mpp-text-muted);
	line-height: 1.7;
	background: rgba(201,168,76,.04);
}
.mpp-faq-a.open { display: block; }

/* ── Sticky Sidebar ───────────────────────────────────────────────────────── */
.mpp-sidebar { position: sticky; top: 24px; }
.mpp-sidebar-card {
	background: var(--mpp-bg-card);
	border: 1px solid var(--mpp-border-gold);
	border-radius: var(--mpp-radius);
	padding: 28px;
	box-shadow: var(--mpp-shadow-lg), 0 0 40px rgba(201,168,76,.08);
	position: relative;
	overflow: hidden;
}
.mpp-sidebar-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	background: linear-gradient(90deg, transparent, var(--mpp-gold), transparent);
}
.mpp-sidebar-pack-name {
	font-size: 15px;
	font-weight: 700;
	color: var(--mpp-text);
	margin-bottom: 14px;
	line-height: 1.4;
}
.mpp-sidebar-price-wrap {
	display: flex;
	align-items: baseline;
	gap: 6px;
	margin-bottom: 10px;
}
.mpp-sidebar-price {
	font-size: 40px;
	font-weight: 900;
	color: var(--mpp-gold);
	line-height: 1;
	text-shadow: 0 0 24px rgba(201,168,76,.35);
}
.mpp-sidebar-currency {
	font-size: 17px;
	font-weight: 700;
	color: var(--mpp-gold);
}
.mpp-sidebar-duration {
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: 13px;
	color: var(--mpp-text-muted);
	margin-bottom: 18px;
}
.mpp-sidebar-duration i { color: var(--mpp-gold); }
.mpp-sidebar-features {
	list-style: none;
	margin: 0 0 22px;
	padding: 0;
}
.mpp-sidebar-features li {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	font-size: 13px;
	color: var(--mpp-text-soft);
	padding: 7px 0;
	border-bottom: 1px solid var(--mpp-border);
}
.mpp-sidebar-features li:last-child { border-bottom: none; }
.mpp-sidebar-features li i { color: var(--mpp-gold); margin-top: 2px; flex-shrink: 0; font-size: 11px; }
.mpp-sidebar-divider { height: 1px; background: var(--mpp-border); margin: 18px 0; }

/* ── CTA Buttons ──────────────────────────────────────────────────────────── */
.mpp-btn-cash,
.mpp-btn-whatsapp {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	width: 100%;
	padding: 15px 20px;
	border: none;
	border-radius: var(--mpp-radius-sm);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .3px;
	cursor: pointer;
	transition: all var(--mpp-transition);
	margin-bottom: 10px;
	position: relative;
	overflow: hidden;
}
.mpp-btn-cash::after,
.mpp-btn-whatsapp::after {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(255,255,255,0);
	transition: background .2s;
}
.mpp-btn-cash:hover::after,
.mpp-btn-whatsapp:hover::after { background: rgba(255,255,255,.06); }

.mpp-btn-cash {
	background: linear-gradient(135deg, var(--mpp-gold) 0%, #a8873a 100%);
	color: #fff;
	box-shadow: 0 4px 20px rgba(201,168,76,.25);
}
.mpp-btn-cash:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 28px rgba(201,168,76,.4);
}
.mpp-btn-whatsapp {
	background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
	color: #fff;
	box-shadow: 0 4px 20px rgba(37,211,102,.2);
}
.mpp-btn-whatsapp:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 28px rgba(37,211,102,.35);
}
.mpp-sidebar-secure {
	display: flex;
	align-items: center;
	gap: 6px;
	justify-content: center;
	font-size: 11px;
	color: var(--mpp-text-muted);
	margin-top: 14px;
}
.mpp-sidebar-secure i { color: var(--mpp-gold); }

/* ── Modal overlay ────────────────────────────────────────────────────────── */
.mpp-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,.8);
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	backdrop-filter: blur(6px);
	animation: mppFadeIn .2s ease;
}
@keyframes mppFadeIn { from { opacity: 0; } to { opacity: 1; } }

.mpp-modal {
	background: var(--mpp-bg-card-2);
	border: 1px solid var(--mpp-border);
	border-radius: var(--mpp-radius);
	max-width: 620px;
	width: 100%;
	max-height: 90vh;
	overflow-y: auto;
	position: relative;
	animation: mppSlideUp .25s ease;
	box-shadow: 0 32px 80px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.05);
}
@keyframes mppSlideUp {
	from { transform: translateY(30px); opacity: 0; }
	to   { transform: translateY(0);    opacity: 1; }
}
.mpp-modal-close {
	position: absolute;
	top: 16px;
	right: 16px;
	background: rgba(255,255,255,.06);
	border: 1px solid var(--mpp-border);
	width: 34px;
	height: 34px;
	border-radius: 50%;
	font-size: 16px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background var(--mpp-transition);
	color: var(--mpp-text-muted);
	z-index: 1;
}
.mpp-modal-close:hover { background: rgba(255,255,255,.12); color: var(--mpp-text); }

.mpp-modal-header {
	padding: 30px 32px 0;
	border-bottom: 1px solid var(--mpp-border);
	margin-bottom: 26px;
}
.mpp-modal-header h2 {
	font-size: 22px;
	font-weight: 800;
	margin: 0 0 6px;
	color: var(--mpp-text);
}
#mpp-modal-method-label {
	font-size: 13px;
	color: var(--mpp-gold);
	margin: 0 0 18px;
	font-weight: 600;
}

/* ── Checkout Form ────────────────────────────────────────────────────────── */
#mpp-checkout-form { padding: 0 32px 32px; }
.mpp-form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin-bottom: 16px;
}
.mpp-form-group { display: flex; flex-direction: column; gap: 6px; }
.mpp-form-full { grid-column: 1 / -1; margin-bottom: 16px; }
.mpp-form-group label {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .8px;
	color: var(--mpp-text-muted);
}
.mpp-form-group input,
.mpp-form-group select,
.mpp-form-group textarea {
	background: var(--mpp-bg-input);
	border: 1px solid var(--mpp-border);
	border-radius: var(--mpp-radius-sm);
	padding: 11px 14px;
	font-size: 14px;
	font-family: inherit;
	color: var(--mpp-text);
	transition: border-color var(--mpp-transition), background var(--mpp-transition);
}
.mpp-form-group input::placeholder,
.mpp-form-group textarea::placeholder { color: var(--mpp-text-muted); }
.mpp-form-group input:focus,
.mpp-form-group textarea:focus {
	outline: none;
	border-color: var(--mpp-gold);
	background: var(--mpp-bg-input-focus);
	box-shadow: 0 0 0 3px rgba(201,168,76,.12);
}
.mpp-form-group.mpp-has-error input,
.mpp-form-group.mpp-has-error textarea {
	border-color: #e05252;
	background: rgba(224,82,82,.05);
}
.mpp-field-error { font-size: 11px; color: #e05252; margin-top: 2px; }

.mpp-form-actions { display: flex; gap: 12px; margin-top: 26px; }
.mpp-btn-outline {
	flex: 1;
	padding: 13px;
	background: transparent;
	border: 1px solid var(--mpp-border);
	border-radius: var(--mpp-radius-sm);
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	color: var(--mpp-text-muted);
	transition: all var(--mpp-transition);
}
.mpp-btn-outline:hover {
	border-color: var(--mpp-gold);
	color: var(--mpp-gold-light);
	background: rgba(201,168,76,.05);
}
.mpp-btn-submit {
	flex: 2;
	padding: 13px;
	background: linear-gradient(135deg, var(--mpp-gold) 0%, var(--mpp-gold-dark) 100%);
	border: none;
	border-radius: var(--mpp-radius-sm);
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	color: #fff;
	transition: all var(--mpp-transition);
	box-shadow: 0 4px 18px rgba(201,168,76,.25);
}
.mpp-btn-submit:hover:not(:disabled) {
	transform: translateY(-1px);
	box-shadow: 0 6px 24px rgba(201,168,76,.4);
}
.mpp-btn-submit:disabled { opacity: .6; cursor: not-allowed; }

/* ── Confirmation ─────────────────────────────────────────────────────────── */
.mpp-confirmation { padding: 40px 32px; text-align: center; }
.mpp-confirmation-icon {
	width: 72px;
	height: 72px;
	background: rgba(201,168,76,.1);
	border: 2px solid var(--mpp-gold);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 20px;
	color: var(--mpp-gold);
	font-size: 28px;
}
.mpp-confirmation h2 { font-size: 24px; font-weight: 800; margin-bottom: 10px; color: var(--mpp-text); }
#mpp-confirmation-msg { color: var(--mpp-text-soft); font-size: 15px; margin-bottom: 24px; max-width: 400px; margin-left: auto; margin-right: auto; }
.mpp-confirmation-details {
	background: rgba(201,168,76,.05);
	border: 1px solid var(--mpp-border-gold);
	border-radius: var(--mpp-radius-sm);
	padding: 16px 20px;
	text-align: left;
	font-size: 14px;
	margin-bottom: 24px;
	max-width: 360px;
	margin-left: auto;
	margin-right: auto;
	color: var(--mpp-text-soft);
}
.mpp-confirmation-details strong { color: var(--mpp-gold); display: block; font-size: 18px; margin-bottom: 6px; }
.mpp-confirmation-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.mpp-btn-gold {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 24px;
	background: linear-gradient(135deg, var(--mpp-gold) 0%, var(--mpp-gold-dark) 100%);
	color: #fff;
	text-decoration: none;
	border-radius: var(--mpp-radius-sm);
	font-size: 14px;
	font-weight: 700;
	transition: all var(--mpp-transition);
	box-shadow: 0 4px 16px rgba(201,168,76,.25);
}
.mpp-btn-gold:hover { transform: translateY(-2px); box-shadow: 0 6px 22px rgba(201,168,76,.45); color: #fff; }

/* ── Unavailable ──────────────────────────────────────────────────────────── */
.mpp-unavailable { min-height: 60vh; display: flex; align-items: center; justify-content: center; }
.mpp-unavailable-inner { text-align: center; padding: 40px; }
.mpp-unavailable-icon { font-size: 48px; color: var(--mpp-gold); margin-bottom: 16px; display: block; }
.mpp-unavailable h2 { font-size: 22px; margin-bottom: 20px; color: var(--mpp-text-soft); }

/* ── Shortcode button ─────────────────────────────────────────────────────── */
.mpp-shortcode-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 13px 28px;
	background: linear-gradient(135deg, var(--mpp-gold) 0%, var(--mpp-gold-dark) 100%);
	color: #fff !important;
	text-decoration: none;
	border-radius: 50px;
	font-size: 15px;
	font-weight: 700;
	transition: all var(--mpp-transition);
	box-shadow: 0 4px 18px rgba(201,168,76,.3);
}
.mpp-shortcode-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 26px rgba(201,168,76,.5); }

/* ── Pack card (shortcode) ────────────────────────────────────────────────── */
.mpp-pack-card {
	background: var(--mpp-bg-card);
	border: 1px solid var(--mpp-border);
	border-radius: var(--mpp-radius);
	overflow: hidden;
	box-shadow: var(--mpp-shadow);
	transition: transform var(--mpp-transition), box-shadow var(--mpp-transition), border-color var(--mpp-transition);
}
.mpp-pack-card:hover { transform: translateY(-5px); box-shadow: var(--mpp-shadow-lg); border-color: var(--mpp-border-gold); }
.mpp-pack-card-img { position: relative; height: 180px; background: var(--mpp-bg-card-2) no-repeat center center / cover; }
.mpp-pack-badge { position: absolute; top: 12px; left: 12px; background: var(--mpp-gold); color: #fff; font-size: 10px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; padding: 4px 11px; border-radius: 20px; }
.mpp-pack-card-body { padding: 22px; }
.mpp-pack-card-title { font-size: 16px; font-weight: 700; margin: 0 0 6px; color: var(--mpp-text); }
.mpp-pack-card-duration { font-size: 12px; color: var(--mpp-text-muted); margin: 0 0 12px; }
.mpp-pack-card-features { list-style: none; padding: 0; margin: 0 0 16px; }
.mpp-pack-card-features li { font-size: 13px; color: var(--mpp-text-soft); padding: 3px 0; }
.mpp-pack-card-footer { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--mpp-border); padding-top: 14px; }
.mpp-pack-card-price { font-size: 22px; font-weight: 800; color: var(--mpp-gold); }
.mpp-pack-card-price span { font-size: 13px; font-weight: 600; }
.mpp-pack-card-btn { background: var(--mpp-gold); color: #fff; text-decoration: none; font-size: 13px; font-weight: 700; padding: 8px 16px; border-radius: var(--mpp-radius-sm); transition: background var(--mpp-transition); }
.mpp-pack-card-btn:hover { background: var(--mpp-gold-dark); color: #fff; }

/* ── Scrollbar (dark) ─────────────────────────────────────────────────────── */
.mpp-modal::-webkit-scrollbar { width: 5px; }
.mpp-modal::-webkit-scrollbar-track { background: var(--mpp-bg-card-2); }
.mpp-modal::-webkit-scrollbar-thumb { background: var(--mpp-border); border-radius: 4px; }
.mpp-modal::-webkit-scrollbar-thumb:hover { background: var(--mpp-gold-dark); }

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 960px) {
	.mpp-container { grid-template-columns: 1fr; }
	.mpp-sidebar { position: static; order: -1; }
}
@media (max-width: 600px) {
	.mpp-hero-content { padding: 28px 20px; }
	.mpp-section { padding: 20px; }
	.mpp-body { padding: 16px 12px 60px; }
	.mpp-form-row { grid-template-columns: 1fr; }
	.mpp-features-list { grid-template-columns: 1fr; }
	#mpp-checkout-form { padding: 0 16px 24px; }
	.mpp-modal-header { padding: 20px 20px 0; }
	.mpp-form-actions { flex-direction: column; }
	.mpp-btn-submit, .mpp-btn-outline { flex: unset; width: 100%; }
	.mpp-confirmation { padding: 28px 20px; }
}