/* ==========================================================================
   Tanzih Travel Booking — Frontend Styles
   Modern, clean design for Umrah travel registration
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* ---------- CSS Variables ---------- */
:root {
	--tanzih-primary: #0e7c61;
	--tanzih-primary-dark: #065f46;
	--tanzih-primary-light: #d1fae5;
	--tanzih-accent: #0891b2;
	--tanzih-accent-light: #e0f7fa;
	--tanzih-gold: #d4a843;
	--tanzih-gold-light: #fef9e7;
	--tanzih-danger: #ef4444;
	--tanzih-danger-light: #fee2e2;
	--tanzih-warning: #f59e0b;
	--tanzih-warning-light: #fef3c7;
	--tanzih-gray-50: #f9fafb;
	--tanzih-gray-100: #f3f4f6;
	--tanzih-gray-200: #e5e7eb;
	--tanzih-gray-300: #d1d5db;
	--tanzih-gray-400: #9ca3af;
	--tanzih-gray-500: #6b7280;
	--tanzih-gray-600: #4b5563;
	--tanzih-gray-700: #374151;
	--tanzih-gray-800: #1f2937;
	--tanzih-gray-900: #111827;
	--tanzih-radius: 12px;
	--tanzih-radius-sm: 8px;
	--tanzih-radius-lg: 16px;
	--tanzih-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
	--tanzih-shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.12);
	--tanzih-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	--tanzih-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ---------- CTA Buttons (Single Trip Page) ---------- */
.tanzih-cta-container {
	display: flex;
	gap: 12px;
	margin: 24px 0;
	flex-wrap: wrap;
	font-family: var(--tanzih-font);
}

.tanzih-cta-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 28px;
	border-radius: var(--tanzih-radius);
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	transition: var(--tanzih-transition);
	text-decoration: none !important;
	border: none;
	font-family: var(--tanzih-font);
	line-height: 1.2;
}

.tanzih-cta-whatsapp {
	background: linear-gradient(135deg, #25d366, #128c7e);
	color: #fff !important;
	box-shadow: 0 4px 15px rgba(37, 211, 102, 0.3);
}

.tanzih-cta-whatsapp:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 25px rgba(37, 211, 102, 0.45);
	color: #fff !important;
}

.tanzih-cta-register {
	background: linear-gradient(135deg, var(--tanzih-primary), var(--tanzih-accent));
	color: #fff !important;
	box-shadow: 0 4px 15px rgba(14, 124, 97, 0.3);
}

.tanzih-cta-register:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 25px rgba(14, 124, 97, 0.45);
}

/* ---------- Schedule Section ---------- */
.tanzih-schedules-section {
	margin: 32px 0;
	font-family: var(--tanzih-font);
}

.tanzih-section-title {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 20px;
	font-weight: 700;
	color: var(--tanzih-gray-800);
	margin-bottom: 20px;
	font-family: var(--tanzih-font);
}

.tanzih-schedules-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 14px;
}

.tanzih-schedule-card {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 16px 20px;
	border-radius: var(--tanzih-radius);
	background: #fff;
	border: 1px solid var(--tanzih-gray-200);
	transition: var(--tanzih-transition);
}

.tanzih-schedule-card:hover {
	box-shadow: var(--tanzih-shadow);
}

.tanzih-schedule-date {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 50px;
}

.tanzih-schedule-day {
	font-size: 28px;
	font-weight: 800;
	color: var(--tanzih-primary);
	line-height: 1;
}

.tanzih-schedule-month {
	font-size: 11px;
	font-weight: 600;
	color: var(--tanzih-gray-500);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.tanzih-schedule-info {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.tanzih-schedule-formatted {
	font-size: 14px;
	font-weight: 600;
	color: var(--tanzih-gray-700);
}

.tanzih-schedule-seats {
	font-size: 13px;
	color: var(--tanzih-gray-500);
}

.tanzih-schedule-badge {
	padding: 4px 12px;
	border-radius: 20px;
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
}

.tanzih-badge-available {
	background: var(--tanzih-primary-light);
	color: var(--tanzih-primary-dark);
}

.tanzih-badge-almost-full {
	background: var(--tanzih-warning-light);
	color: #92400e;
}

.tanzih-badge-full {
	background: var(--tanzih-danger-light);
	color: #991b1b;
}

.tanzih-schedule-full {
	opacity: 0.5;
}

/* ---------- Modal ---------- */
.tanzih-modal {
	position: fixed;
	z-index: 99999;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	font-family: var(--tanzih-font);
}

.tanzih-modal-overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
	backdrop-filter: blur(4px);
}

.tanzih-modal-content {
	position: relative;
	background: #fff;
	padding: 32px;
	border-radius: var(--tanzih-radius-lg);
	width: 95%;
	max-width: 600px;
	max-height: 90vh;
	overflow-y: auto;
	box-shadow: var(--tanzih-shadow-lg);
	animation: tanzihSlideUp 0.35s ease-out;
}

@keyframes tanzihSlideUp {
	from {
		opacity: 0;
		transform: translateY(30px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.tanzih-modal-close {
	position: absolute;
	top: 16px;
	right: 20px;
	font-size: 28px;
	background: none;
	border: none;
	color: var(--tanzih-gray-400);
	cursor: pointer;
	line-height: 1;
	padding: 4px;
	transition: color 0.2s;
}

.tanzih-modal-close:hover {
	color: var(--tanzih-gray-700);
}

.tanzih-modal-header h2 {
	font-size: 22px;
	font-weight: 700;
	color: var(--tanzih-gray-900);
	margin: 0 0 4px;
}

.tanzih-modal-trip-title {
	font-size: 14px;
	color: var(--tanzih-primary);
	font-weight: 600;
	margin: 0 0 24px;
}

/* ---------- Step Indicator ---------- */
.tanzih-steps-indicator {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0;
	margin-bottom: 28px;
	padding: 0 20px;
}

.tanzih-step {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	flex-shrink: 0;
}

.tanzih-step-number {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	font-weight: 700;
	background: var(--tanzih-gray-200);
	color: var(--tanzih-gray-500);
	transition: var(--tanzih-transition);
}

.tanzih-step.active .tanzih-step-number {
	background: linear-gradient(135deg, var(--tanzih-primary), var(--tanzih-accent));
	color: #fff;
	box-shadow: 0 3px 12px rgba(14, 124, 97, 0.3);
}

.tanzih-step.completed .tanzih-step-number {
	background: var(--tanzih-primary);
	color: #fff;
}

.tanzih-step-label {
	font-size: 12px;
	font-weight: 600;
	color: var(--tanzih-gray-400);
	transition: color 0.3s;
}

.tanzih-step.active .tanzih-step-label,
.tanzih-step.completed .tanzih-step-label {
	color: var(--tanzih-primary);
}

.tanzih-step-line {
	flex: 1;
	height: 2px;
	background: var(--tanzih-gray-200);
	margin: 0 8px;
	margin-bottom: 22px;
	transition: background 0.3s;
}

.tanzih-step-line.active {
	background: var(--tanzih-primary);
}

/* ---------- Form Steps ---------- */
.tanzih-form-step h3 {
	font-size: 17px;
	font-weight: 700;
	color: var(--tanzih-gray-800);
	margin: 0 0 20px;
}

/* ---------- Schedule Options (Radio Cards) ---------- */
.tanzih-schedule-options {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.tanzih-schedule-option {
	cursor: pointer;
	display: block;
}

.tanzih-schedule-option input[type="radio"] {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.tanzih-schedule-option-inner {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 14px 18px;
	border-radius: var(--tanzih-radius);
	border: 2px solid var(--tanzih-gray-200);
	transition: var(--tanzih-transition);
	background: #fff;
}

.tanzih-schedule-option:hover .tanzih-schedule-option-inner {
	border-color: var(--tanzih-primary-light);
	background: var(--tanzih-gray-50);
}

.tanzih-schedule-option input[type="radio"]:checked~.tanzih-schedule-option-inner {
	border-color: var(--tanzih-primary);
	background: linear-gradient(135deg, rgba(14, 124, 97, 0.03), rgba(8, 145, 178, 0.03));
	box-shadow: 0 0 0 3px rgba(14, 124, 97, 0.1);
}

.tanzih-schedule-option.disabled {
	cursor: not-allowed;
	opacity: 0.5;
}

.tanzih-schedule-option-date {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 50px;
}

.tanzih-schedule-option-day {
	font-size: 26px;
	font-weight: 800;
	color: var(--tanzih-primary);
	line-height: 1;
}

.tanzih-schedule-option-month {
	font-size: 11px;
	font-weight: 600;
	color: var(--tanzih-gray-500);
	text-transform: uppercase;
}

.tanzih-schedule-option-info {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.tanzih-schedule-option-full-date {
	font-size: 14px;
	font-weight: 600;
	color: var(--tanzih-gray-700);
}

.tanzih-schedule-option-seats {
	font-size: 13px;
}

.tanzih-text-available {
	color: var(--tanzih-primary);
}

.tanzih-text-almost {
	color: var(--tanzih-warning);
	font-weight: 600;
}

.tanzih-text-full {
	color: var(--tanzih-danger);
	font-weight: 600;
}

.tanzih-schedule-option-check {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--tanzih-gray-100);
	color: transparent;
	transition: var(--tanzih-transition);
	flex-shrink: 0;
}

.tanzih-schedule-option input[type="radio"]:checked~.tanzih-schedule-option-inner .tanzih-schedule-option-check {
	background: var(--tanzih-primary);
	color: #fff;
}

.tanzih-no-schedules {
	text-align: center;
	padding: 30px;
	color: var(--tanzih-gray-400);
	font-style: italic;
}

/* ---------- Form Fields ---------- */
.tanzih-form-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.tanzih-form-full {
	grid-column: 1 / -1;
}

.tanzih-form-group {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.tanzih-form-group label {
	font-size: 13px;
	font-weight: 600;
	color: var(--tanzih-gray-700);
}

.tanzih-form-group .required {
	color: var(--tanzih-danger);
}

.tanzih-form-group input,
.tanzih-form-group select,
.tanzih-form-group textarea {
	width: 100%;
	padding: 11px 14px;
	border: 1.5px solid var(--tanzih-gray-300);
	border-radius: var(--tanzih-radius-sm);
	font-size: 14px;
	font-family: var(--tanzih-font);
	color: var(--tanzih-gray-800);
	background: #fff;
	transition: var(--tanzih-transition);
	box-sizing: border-box;
}

.tanzih-form-group input:focus,
.tanzih-form-group select:focus,
.tanzih-form-group textarea:focus {
	outline: none;
	border-color: var(--tanzih-primary);
	box-shadow: 0 0 0 3px rgba(14, 124, 97, 0.1);
}

.tanzih-form-group input.error,
.tanzih-form-group select.error {
	border-color: var(--tanzih-danger);
	box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

/* ---------- Review Card ---------- */
.tanzih-review-card {
	background: var(--tanzih-gray-50);
	border-radius: var(--tanzih-radius);
	border: 1px solid var(--tanzih-gray-200);
	padding: 20px;
	margin-bottom: 20px;
}

.tanzih-review-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px 0;
	border-bottom: 1px solid var(--tanzih-gray-200);
}

.tanzih-review-row:last-child {
	border-bottom: none;
}

.tanzih-review-label {
	font-size: 13px;
	color: var(--tanzih-gray-500);
}

.tanzih-review-value {
	font-size: 14px;
	font-weight: 600;
	color: var(--tanzih-gray-800);
	text-align: right;
}

.tanzih-review-total {
	margin-top: 8px;
	padding-top: 16px;
	border-top: 2px solid var(--tanzih-primary-light);
}

.tanzih-review-total .tanzih-review-label {
	font-weight: 700;
	color: var(--tanzih-gray-700);
	font-size: 15px;
}

.tanzih-review-total .tanzih-review-value {
	font-size: 18px;
	color: var(--tanzih-primary);
	font-weight: 800;
}

/* ---------- Terms & Checkbox ---------- */
.tanzih-terms-text {
	max-height: 150px;
	overflow-y: auto;
	padding: 14px;
	background: var(--tanzih-gray-50);
	border: 1px solid var(--tanzih-gray-200);
	border-radius: var(--tanzih-radius-sm);
	font-size: 13px;
	color: var(--tanzih-gray-600);
	margin-bottom: 16px;
	line-height: 1.6;
}

.tanzih-checkbox-label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	cursor: pointer;
	font-size: 14px;
	color: var(--tanzih-gray-700);
	margin-bottom: 20px;
}

.tanzih-checkbox-label input[type="checkbox"] {
	margin-top: 3px;
	width: 18px;
	height: 18px;
	accent-color: var(--tanzih-primary);
	flex-shrink: 0;
}

/* ---------- Form Navigation ---------- */
.tanzih-form-nav {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	margin-top: 24px;
	padding-top: 20px;
	border-top: 1px solid var(--tanzih-gray-200);
}

.tanzih-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 24px;
	border-radius: var(--tanzih-radius-sm);
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: var(--tanzih-transition);
	border: none;
	font-family: var(--tanzih-font);
	text-decoration: none !important;
	line-height: 1.3;
}

.tanzih-btn-prev {
	background: var(--tanzih-gray-100);
	color: var(--tanzih-gray-600);
}

.tanzih-btn-prev:hover {
	background: var(--tanzih-gray-200);
}

.tanzih-btn-next {
	background: linear-gradient(135deg, var(--tanzih-primary), var(--tanzih-accent));
	color: #fff;
	margin-left: auto;
	box-shadow: 0 3px 12px rgba(14, 124, 97, 0.2);
}

.tanzih-btn-next:hover {
	transform: translateY(-1px);
	box-shadow: 0 5px 20px rgba(14, 124, 97, 0.35);
}

.tanzih-btn-submit {
	background: linear-gradient(135deg, var(--tanzih-primary), #059669);
	color: #fff;
	margin-left: auto;
	box-shadow: 0 3px 12px rgba(14, 124, 97, 0.2);
	min-width: 180px;
}

.tanzih-btn-submit:hover {
	transform: translateY(-1px);
	box-shadow: 0 5px 20px rgba(14, 124, 97, 0.35);
}

.tanzih-btn-submit:disabled {
	opacity: 0.6;
	cursor: not-allowed;
	transform: none;
}

/* ---------- Success State ---------- */
.tanzih-success-animation {
	text-align: center;
	margin-bottom: 16px;
}

.tanzih-success-animation svg {
	animation: tanzihCheckmark 0.6s ease-out;
}

@keyframes tanzihCheckmark {
	0% {
		transform: scale(0);
		opacity: 0;
	}

	50% {
		transform: scale(1.2);
	}

	100% {
		transform: scale(1);
		opacity: 1;
	}
}

#tanzih-registration-success h3,
.tanzih-registration-success h3 {
	text-align: center;
	font-size: 20px;
	color: var(--tanzih-gray-800);
	margin: 0 0 8px;
}

.tanzih-success-code {
	text-align: center;
	font-size: 16px;
	color: var(--tanzih-gray-600);
	margin-bottom: 20px;
}

.tanzih-success-code strong {
	font-size: 22px;
	color: var(--tanzih-primary);
	letter-spacing: 1px;
}

.tanzih-success-summary {
	background: var(--tanzih-gray-50);
	border-radius: var(--tanzih-radius);
	padding: 16px;
	margin-bottom: 24px;
	font-size: 14px;
	line-height: 1.8;
	color: var(--tanzih-gray-700);
}

.tanzih-success-actions {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.tanzih-btn-wa-confirm {
	background: linear-gradient(135deg, #25d366, #128c7e) !important;
	color: #fff !important;
	padding: 14px 24px;
	text-align: center;
	box-shadow: 0 4px 15px rgba(37, 211, 102, 0.3);
}

.tanzih-btn-wa-confirm:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 25px rgba(37, 211, 102, 0.45);
	color: #fff !important;
}

.tanzih-btn-copy {
	background: var(--tanzih-gray-100);
	color: var(--tanzih-gray-700);
	padding: 12px 24px;
}

.tanzih-btn-copy:hover {
	background: var(--tanzih-gray-200);
}

/* ---------- Messages ---------- */
#tanzih-form-message,
.tanzih-form-message {
	padding: 12px 16px;
	border-radius: var(--tanzih-radius-sm);
	font-size: 14px;
	margin-top: 16px;
}

.tanzih-message-error {
	background: var(--tanzih-danger-light);
	color: #991b1b;
	border: 1px solid #fca5a5;
}

.tanzih-message-success {
	background: var(--tanzih-primary-light);
	color: var(--tanzih-primary-dark);
	border: 1px solid #6ee7b7;
}

/* ---------- Error notice ---------- */
.tanzih-error {
	padding: 16px;
	background: var(--tanzih-danger-light);
	color: #991b1b;
	border-radius: var(--tanzih-radius-sm);
	font-size: 14px;
}

/* ---------- Standalone Form Container ---------- */
.tanzih-standalone-form {
	max-width: 600px;
	margin: 32px auto;
	padding: 32px;
	background: #fff;
	border-radius: var(--tanzih-radius-lg);
	box-shadow: var(--tanzih-shadow-lg);
	font-family: var(--tanzih-font);
}

.tanzih-standalone-header h2 {
	font-size: 22px;
	font-weight: 700;
	margin: 0 0 4px;
	color: var(--tanzih-gray-900);
}

.tanzih-standalone-trip {
	font-size: 14px;
	color: var(--tanzih-primary);
	font-weight: 600;
	margin: 0 0 24px;
}

/* ---------- Responsive ---------- */
@media (max-width: 640px) {
	.tanzih-cta-container {
		flex-direction: column;
	}

	.tanzih-cta-btn {
		justify-content: center;
		width: 100%;
	}

	.tanzih-modal-content,
	.tanzih-standalone-form {
		padding: 20px;
		margin: 16px;
		width: calc(100% - 32px);
	}

	.tanzih-form-grid {
		grid-template-columns: 1fr;
	}

	.tanzih-steps-indicator {
		padding: 0;
	}

	.tanzih-step-label {
		font-size: 10px;
	}

	.tanzih-step-number {
		width: 30px;
		height: 30px;
		font-size: 12px;
	}

	.tanzih-schedules-grid {
		grid-template-columns: 1fr;
	}

	.tanzih-schedule-option-day {
		font-size: 22px;
	}

	.tanzih-review-row {
		flex-direction: column;
		align-items: flex-start;
		gap: 2px;
	}

	.tanzih-review-value {
		text-align: left;
	}

	.tanzih-form-nav {
		flex-direction: column-reverse;
	}

	.tanzih-btn-next,
	.tanzih-btn-submit {
		margin-left: 0;
		width: 100%;
	}

	.tanzih-btn-prev {
		width: 100%;
	}
}

/* ============================================================
   CHECK STATUS FORM & RESULT
   ============================================================ */
.tanzih-cek-status-wrapper {
	max-width: 600px;
	margin: 0 auto;
	font-family: 'Inter', sans-serif;
}

.tanzih-cek-status-box {
	background: #fff;
	padding: 30px;
	border-radius: var(--tanzih-radius-lg);
	box-shadow: var(--tanzih-shadow-md);
	text-align: center;
	margin-bottom: 24px;
	border: 1px solid var(--tanzih-gray-200);
}

.tanzih-cek-status-box h3 {
	margin: 0 0 10px;
	font-size: 24px;
	color: var(--tanzih-gray-900);
}

.tanzih-cek-status-box p {
	color: var(--tanzih-gray-500);
	margin-bottom: 24px;
	font-size: 15px;
}

.tanzih-input-group {
	display: flex;
	gap: 12px;
}

.tanzih-input-group input {
	flex: 1;
	margin: 0;
}

.tanzih-input-group button {
	flex-shrink: 0;
	padding: 0 24px;
}

.tanzih-status-card {
	background: #fff;
	border-radius: var(--tanzih-radius-lg);
	box-shadow: var(--tanzih-shadow-md);
	border: 1px solid var(--tanzih-gray-200);
	overflow: hidden;
}

.tanzih-status-header {
	padding: 24px;
	background: var(--tanzih-gray-50);
	border-bottom: 1px solid var(--tanzih-gray-200);
}

.tanzih-status-header h4 {
	margin: 0 0 16px;
	font-size: 18px;
	color: var(--tanzih-gray-900);
}

.tanzih-status-header p {
	margin: 0 0 8px;
	font-size: 14px;
	color: var(--tanzih-gray-700);
}

.tanzih-status-badge {
	padding: 16px 24px;
	border-bottom: 1px solid var(--tanzih-gray-200);
	font-size: 16px;
	display: flex;
	align-items: center;
	gap: 12px;
}

.tanzih-badge-pending {
	background: #fef3c7;
	color: #92400e;
}

.tanzih-badge-contacted {
	background: #dbeafe;
	color: #1e40af;
}

.tanzih-badge-confirmed {
	background: #d1fae5;
	color: #065f46;
}

.tanzih-badge-dp_paid {
	background: #ede9fe;
	color: #5b21b6;
}

.tanzih-badge-cancelled {
	background: #fee2e2;
	color: #991b1b;
}

.tanzih-doc-section {
	padding: 24px;
}

.tanzih-doc-section h4 {
	margin: 0 0 20px;
	font-size: 18px;
}

.tanzih-doc-list {
	list-style: none;
	padding: 0;
	margin: 0 0 24px;
}

.tanzih-doc-item {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	padding: 12px;
	border-bottom: 1px solid var(--tanzih-gray-100);
}

.tanzih-doc-item:last-child {
	border-bottom: none;
}

.tanzih-doc-icon {
	margin-right: 12px;
	font-size: 18px;
}

.tanzih-doc-name {
	flex: 1;
	font-weight: 500;
	color: var(--tanzih-gray-800);
}

.tanzih-doc-status {
	font-weight: 600;
	font-size: 14px;
}

.tanzih-doc-note {
	flex-basis: 100%;
	margin-top: 8px;
	margin-left: 30px;
	font-size: 13px;
	color: var(--tanzih-gray-500);
	font-style: italic;
}

.tanzih-progress-wrap {
	background: var(--tanzih-gray-100);
	border-radius: 99px;
	height: 24px;
	position: relative;
	overflow: hidden;
}

.tanzih-progress-bar {
	height: 100%;
	background: var(--tanzih-primary);
	border-radius: 99px;
	transition: width 0.5s ease;
}

.tanzih-progress-text {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: 600;
	color: #fff;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

@media (max-width: 600px) {
	.tanzih-input-group {
		flex-direction: column;
	}

	.tanzih-input-group button {
		width: 100%;
	}
}

/* ==========================================================================
   TRIP DETAILS — Custom Sections (v3.0)
   ========================================================================== */

.tanzih-trip-details {
	font-family: var(--tanzih-font);
	margin: 32px 0;
}

/* ---------- Agency Badge ---------- */
.tanzih-agency-badge {
	background: linear-gradient(135deg, rgba(14, 124, 97, 0.06), rgba(8, 145, 178, 0.06));
	border: 1px solid rgba(14, 124, 97, 0.15);
	border-radius: var(--tanzih-radius);
	padding: 20px 24px;
	margin-bottom: 24px;
	backdrop-filter: blur(10px);
}

.tanzih-agency-logo-area {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 14px;
}

.tanzih-agency-icon {
	font-size: 32px;
	line-height: 1;
}

.tanzih-agency-names {
	display: flex;
	flex-direction: column;
}

.tanzih-agency-name {
	font-size: 16px;
	font-weight: 700;
	color: var(--tanzih-gray-800);
	line-height: 1.3;
}

.tanzih-agency-brand {
	font-size: 13px;
	font-weight: 600;
	color: var(--tanzih-primary);
}

.tanzih-agency-details {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

.tanzih-agency-detail-item {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
}

.tanzih-agency-detail-label {
	font-weight: 600;
	color: var(--tanzih-gray-500);
}

.tanzih-agency-detail-value {
	font-weight: 600;
	color: var(--tanzih-gray-700);
}

/* ---------- Overview Card ---------- */
.tanzih-overview-card {
	background: #fff;
	border-radius: var(--tanzih-radius-lg);
	border: 1px solid var(--tanzih-gray-200);
	overflow: hidden;
	margin-bottom: 24px;
	box-shadow: var(--tanzih-shadow);
}

.tanzih-overview-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20px 24px;
	background: linear-gradient(135deg, var(--tanzih-primary), var(--tanzih-accent));
	color: #fff;
}

.tanzih-overview-title {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 18px;
	font-weight: 700;
	margin: 0;
	color: #fff;
}

.tanzih-overview-price {
	text-align: right;
}

.tanzih-price-label {
	display: block;
	font-size: 11px;
	opacity: 0.85;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.tanzih-price-value {
	display: block;
	font-size: 22px;
	font-weight: 800;
	line-height: 1.2;
}

.tanzih-price-suffix {
	font-size: 12px;
	opacity: 0.8;
}

.tanzih-overview-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 0;
}

.tanzih-overview-item {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 18px 24px;
	border-bottom: 1px solid var(--tanzih-gray-100);
	border-right: 1px solid var(--tanzih-gray-100);
	transition: background 0.2s;
}

.tanzih-overview-item:hover {
	background: var(--tanzih-gray-50);
}

.tanzih-overview-icon {
	font-size: 26px;
	line-height: 1;
	flex-shrink: 0;
}

.tanzih-overview-item-label {
	display: block;
	font-size: 12px;
	font-weight: 600;
	color: var(--tanzih-gray-400);
	text-transform: uppercase;
	letter-spacing: 0.3px;
}

.tanzih-overview-item-value {
	display: block;
	font-size: 15px;
	font-weight: 700;
	color: var(--tanzih-gray-800);
	margin-top: 2px;
}

/* ---------- Departures Section ---------- */
.tanzih-departures-section {
	margin-bottom: 28px;
}

.tanzih-departures-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
	gap: 16px;
}

.tanzih-departure-card {
	background: #fff;
	border-radius: var(--tanzih-radius);
	border: 1px solid var(--tanzih-gray-200);
	overflow: hidden;
	transition: var(--tanzih-transition);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.tanzih-departure-card:hover {
	box-shadow: var(--tanzih-shadow);
	transform: translateY(-2px);
}

.tanzih-dep-header {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px 20px;
	background: var(--tanzih-gray-50);
	border-bottom: 1px solid var(--tanzih-gray-200);
}

.tanzih-dep-date-block {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 50px;
}

.tanzih-dep-day {
	font-size: 28px;
	font-weight: 800;
	color: var(--tanzih-primary);
	line-height: 1;
}

.tanzih-dep-month {
	font-size: 11px;
	font-weight: 600;
	color: var(--tanzih-gray-500);
	text-transform: uppercase;
}

.tanzih-dep-meta {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.tanzih-dep-formatted-date {
	font-size: 14px;
	font-weight: 600;
	color: var(--tanzih-gray-700);
}

.tanzih-dep-airline {
	font-size: 12px;
	color: var(--tanzih-gray-500);
}

.tanzih-dep-status {
	padding: 4px 12px;
	border-radius: 20px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.3px;
	white-space: nowrap;
}

.tanzih-dep-status-ready {
	background: var(--tanzih-primary-light);
	color: var(--tanzih-primary-dark);
}

.tanzih-dep-status-almost {
	background: var(--tanzih-warning-light);
	color: #92400e;
}

.tanzih-dep-status-full {
	background: var(--tanzih-danger-light);
	color: #991b1b;
}

/* Flight Rows */
.tanzih-dep-flights {
	padding: 14px 20px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.tanzih-flight-row {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 13px;
	padding: 8px 12px;
	border-radius: var(--tanzih-radius-sm);
	flex-wrap: wrap;
}

.tanzih-flight-outbound {
	background: #f0fdf4;
}

.tanzih-flight-inbound {
	background: #eff6ff;
}

.tanzih-flight-direction {
	font-size: 16px;
	flex-shrink: 0;
}

.tanzih-flight-number {
	font-weight: 700;
	color: var(--tanzih-gray-800);
	min-width: 50px;
}

.tanzih-flight-route {
	font-weight: 600;
	color: var(--tanzih-primary);
	min-width: 60px;
}

.tanzih-flight-date {
	font-size: 12px;
	color: var(--tanzih-gray-500);
	min-width: 50px;
}

.tanzih-flight-time {
	font-weight: 600;
	color: var(--tanzih-gray-700);
	margin-left: auto;
}

.tanzih-flight-arrow {
	color: var(--tanzih-gray-400);
	margin: 0 4px;
}

.tanzih-dep-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px 20px;
	border-top: 1px solid var(--tanzih-gray-100);
	font-size: 12px;
}

.tanzih-dep-code {
	color: var(--tanzih-gray-500);
}

.tanzih-dep-seats {
	font-weight: 600;
	color: var(--tanzih-primary);
}

/* ---------- Package Cards ---------- */
.tanzih-packages-section {
	margin-bottom: 28px;
}

.tanzih-packages-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 20px;
}

.tanzih-package-card {
	background: #fff;
	border-radius: var(--tanzih-radius-lg);
	border: 1px solid var(--tanzih-gray-200);
	overflow: hidden;
	transition: var(--tanzih-transition);
	position: relative;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.tanzih-package-card:hover {
	box-shadow: var(--tanzih-shadow-lg);
	transform: translateY(-3px);
}

.tanzih-package-featured {
	border-color: var(--tanzih-primary);
	border-width: 2px;
}

.tanzih-package-badge {
	position: absolute;
	top: -1px;
	right: 20px;
	background: linear-gradient(135deg, var(--tanzih-gold), #c0952d);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	padding: 4px 14px;
	border-radius: 0 0 8px 8px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.tanzih-package-header {
	padding: 20px 24px 16px;
	text-align: center;
	border-bottom: 1px solid var(--tanzih-gray-100);
}

.tanzih-package-name {
	font-size: 20px;
	font-weight: 800;
	color: var(--tanzih-gray-800);
	margin: 0;
	text-transform: uppercase;
	letter-spacing: 1px;
}

.tanzih-package-hotels {
	padding: 14px 24px;
	border-bottom: 1px solid var(--tanzih-gray-100);
}

.tanzih-hotel-city {
	display: block;
	font-size: 13px;
	font-weight: 700;
	color: var(--tanzih-gray-600);
	margin-bottom: 6px;
}

.tanzih-package-hotels ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.tanzih-package-hotels li {
	background: var(--tanzih-gray-100);
	padding: 3px 10px;
	border-radius: 6px;
	font-size: 12px;
	font-weight: 500;
	color: var(--tanzih-gray-700);
}

.tanzih-package-pricing {
	padding: 16px 24px 20px;
}

.tanzih-price-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px 0;
	border-bottom: 1px solid var(--tanzih-gray-100);
}

.tanzih-price-row:last-child {
	border-bottom: none;
}

.tanzih-price-type {
	font-size: 14px;
	font-weight: 500;
	color: var(--tanzih-gray-600);
}

.tanzih-price-type small {
	font-size: 11px;
	color: var(--tanzih-gray-400);
}

.tanzih-price-amount {
	font-size: 16px;
	font-weight: 800;
	color: var(--tanzih-primary);
}

/* ---------- Bonuses ---------- */
.tanzih-bonuses-section {
	margin-bottom: 28px;
}

.tanzih-bonuses-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 10px;
}

.tanzih-bonus-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 18px;
	background: linear-gradient(135deg, rgba(14, 124, 97, 0.04), rgba(8, 145, 178, 0.04));
	border: 1px solid rgba(14, 124, 97, 0.1);
	border-radius: var(--tanzih-radius-sm);
	transition: var(--tanzih-transition);
}

.tanzih-bonus-item:hover {
	background: linear-gradient(135deg, rgba(14, 124, 97, 0.08), rgba(8, 145, 178, 0.08));
	transform: translateY(-1px);
}

.tanzih-bonus-check {
	font-size: 16px;
	flex-shrink: 0;
}

.tanzih-bonus-text {
	font-size: 14px;
	font-weight: 600;
	color: var(--tanzih-gray-700);
}

/* ---------- Itinerary Timeline ---------- */
.tanzih-itinerary-section {
	margin-bottom: 28px;
}

.tanzih-itinerary-timeline {
	position: relative;
	padding-left: 24px;
}

.tanzih-itinerary-timeline::before {
	content: '';
	position: absolute;
	left: 11px;
	top: 0;
	bottom: 0;
	width: 2px;
	background: linear-gradient(to bottom, var(--tanzih-primary), var(--tanzih-accent));
	border-radius: 2px;
}

.tanzih-itinerary-day {
	position: relative;
	margin-bottom: 8px;
	background: #fff;
	border-radius: var(--tanzih-radius);
	border: 1px solid var(--tanzih-gray-200);
	overflow: hidden;
	transition: var(--tanzih-transition);
}

.tanzih-itinerary-day::before {
	content: '';
	position: absolute;
	left: -20px;
	top: 22px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--tanzih-primary);
	border: 2px solid #fff;
	box-shadow: 0 0 0 2px var(--tanzih-primary);
	z-index: 1;
}

.tanzih-itinerary-day:hover {
	box-shadow: var(--tanzih-shadow);
}

.tanzih-itinerary-open {
	border-color: var(--tanzih-primary);
}

.tanzih-itinerary-header {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 18px;
	cursor: pointer;
	user-select: none;
	transition: background 0.2s;
}

.tanzih-itinerary-header:hover {
	background: var(--tanzih-gray-50);
}

.tanzih-itinerary-day-badge {
	background: linear-gradient(135deg, var(--tanzih-primary), var(--tanzih-accent));
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	padding: 4px 12px;
	border-radius: 6px;
	white-space: nowrap;
	flex-shrink: 0;
}

.tanzih-itinerary-day-info {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.tanzih-itinerary-location {
	font-size: 14px;
	font-weight: 700;
	color: var(--tanzih-gray-800);
}

.tanzih-itinerary-date {
	font-size: 12px;
	color: var(--tanzih-gray-500);
}

.tanzih-itinerary-toggle {
	transition: transform 0.3s;
	color: var(--tanzih-gray-400);
	flex-shrink: 0;
}

.tanzih-itinerary-open .tanzih-itinerary-toggle {
	transform: rotate(180deg);
}

.tanzih-itinerary-content {
	padding: 0 18px 16px;
	border-top: 1px solid var(--tanzih-gray-100);
}

.tanzih-itinerary-activities {
	list-style: none;
	margin: 12px 0 0;
	padding: 0;
}

.tanzih-itinerary-activities li {
	position: relative;
	padding: 8px 0 8px 24px;
	font-size: 14px;
	color: var(--tanzih-gray-700);
	line-height: 1.5;
	border-bottom: 1px solid var(--tanzih-gray-50);
}

.tanzih-itinerary-activities li:last-child {
	border-bottom: none;
}

.tanzih-itinerary-activities li::before {
	content: '';
	position: absolute;
	left: 6px;
	top: 14px;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--tanzih-primary);
	opacity: 0.5;
}

/* ---------- Tour Notes ---------- */
.tanzih-tour-notes {
	display: flex;
	gap: 14px;
	padding: 18px 24px;
	background: var(--tanzih-gold-light);
	border: 1px solid rgba(212, 168, 67, 0.2);
	border-radius: var(--tanzih-radius);
	margin-bottom: 28px;
}

.tanzih-notes-icon {
	font-size: 24px;
	flex-shrink: 0;
	line-height: 1;
}

.tanzih-notes-content strong {
	display: block;
	font-size: 14px;
	color: var(--tanzih-gray-800);
	margin-bottom: 4px;
}

.tanzih-notes-content p {
	font-size: 13px;
	color: var(--tanzih-gray-600);
	line-height: 1.6;
	margin: 0;
}

/* ---------- Trip Details Responsive ---------- */
@media (max-width: 768px) {
	.tanzih-overview-header {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
		text-align: left;
	}

	.tanzih-overview-price {
		text-align: left;
	}

	.tanzih-overview-grid {
		grid-template-columns: 1fr;
	}

	.tanzih-departures-grid {
		grid-template-columns: 1fr;
	}

	.tanzih-packages-grid {
		grid-template-columns: 1fr;
	}

	.tanzih-bonuses-grid {
		grid-template-columns: 1fr;
	}

	.tanzih-dep-header {
		flex-wrap: wrap;
	}

	.tanzih-dep-status {
		width: 100%;
		text-align: center;
		margin-top: 8px;
	}

	.tanzih-flight-row {
		font-size: 12px;
		gap: 6px;
	}

	.tanzih-flight-time {
		margin-left: 0;
		width: 100%;
		margin-top: 4px;
	}

	.tanzih-agency-details {
		flex-direction: column;
		gap: 8px;
	}

	.tanzih-itinerary-timeline {
		padding-left: 20px;
	}
}/* ==========================================================================
   Tanzih Travel Booking — Frontend Styles (Premium Reference Match)
   v3.1.3
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
	--tanzih-green-dark: #115e59;   /* Header & Buttons */
	--tanzih-green-light: #22c55e;  /* WA Button */
	--tanzih-green-pale: #ecfdf5;   /* Badges background */
	--tanzih-orange: #f59e0b;       /* Badges text / Topbar */
	--tanzih-border: #e5e7eb;
	--tanzih-bg: #f9fafb;
	--tanzih-text-main: #1f2937;
	--tanzih-text-muted: #6b7280;
	--tanzih-white: #ffffff;
	--tanzih-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
	--tanzih-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.025);
	--tanzih-radius: 12px;
}

/* WTE OVERRIDES */
.wp-travel-engine-trip-tabs-nav,
.wp-travel-engine-trip-tabs-content,
#wte-trip-sidebar,
.wte-trip-content,
.wte-trip-tabs-wrapper { display: none !important; }

/* GLOBAL */
.tanzih-trip-details * { box-sizing: border-box; font-family: 'Inter', sans-serif; }
.tanzih-trip-details { color: var(--tanzih-text-main); margin-top: 40px; }
.tanzih-trip-details h3, .tanzih-trip-details h4 { margin: 0; }

	display: grid !important;
	grid-template-columns: minmax(0, 2fr) minmax(340px, 1fr);
	gap: 30px;
	align-items: start;
}

/* COMMON SECTION HEADER */
.tanzih-section { margin-bottom: 40px; }
.tanzih-section-header { margin-bottom: 20px; }
.tanzih-section-header h3 {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 18px;
	font-weight: 700;
	color: var(--tanzih-green-dark);
}
.tanzih-section-subtitle {
	display: block;
	font-size: 13px;
	color: var(--tanzih-text-muted);
	margin-top: 5px;
	margin-left: 28px;
}
.tanzih-section-header.with-link {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.tanzih-section-link {
	font-size: 13px;
	color: var(--tanzih-text-muted);
}

/* OVERVIEW CARD */
.tanzih-overview-card {
	background: var(--tanzih-white);
	border: 1px solid var(--tanzih-border);
	border-radius: var(--tanzih-radius);
	overflow: hidden;
	margin-bottom: 40px;
	box-shadow: var(--tanzih-shadow);
}
.tanzih-overview-header {
	background: var(--tanzih-green-dark);
	color: var(--tanzih-white);
	padding: 20px 24px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.tanzih-overview-header .title-wrap { display: flex; align-items: center; gap: 15px; }
.tanzih-overview-header .icon-circle {
	background: rgba(255,255,255,0.15);
	width: 40px; height: 40px;
	border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	font-size: 20px;
}
.tanzih-overview-header h3 { color: var(--tanzih-white); font-size: 18px; margin-bottom: 4px; }
.tanzih-overview-header span { font-size: 12px; opacity: 0.8; font-weight: 400; }
.tanzih-overview-header .price-wrap { text-align: right; }
.tanzih-overview-header .price-wrap .label { display: block; font-size: 10px; opacity: 0.8; letter-spacing: 1px; }
.tanzih-overview-header .price-wrap .val { font-size: 20px; font-weight: 700; }

.tanzih-overview-body { padding: 24px; }
.tanzih-overview-grid {
	display: flex;
	justify-content: space-between;
}
.tanzih-overview-item {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 15px;
	position: relative;
}
.tanzih-overview-item:not(:last-child)::after {
	content: '';
	position: absolute;
	right: 0;
	top: 10%;
	height: 80%;
	width: 1px;
	background: var(--tanzih-border);
}
.tanzih-overview-item .icon { font-size: 24px; }
.tanzih-overview-item .lbl { display: block; font-size: 11px; font-weight: 700; color: var(--tanzih-text-muted); margin-bottom: 4px; letter-spacing: 0.5px; }
.tanzih-overview-item .val { display: block; font-size: 14px; font-weight: 700; color: var(--tanzih-text-main); }
@media (max-width: 768px) {
	.tanzih-overview-grid { flex-direction: column; gap: 20px; }
	.tanzih-overview-item:not(:last-child)::after { display: none; }
}

/* SCHEDULE CARDS */
.tanzih-schedules-grid { display: flex; flex-direction: column; gap: 16px; }
.tanzih-schedule-card {
	background: var(--tanzih-white);
	border: 1px solid var(--tanzih-border);
	border-radius: var(--tanzih-radius);
	overflow: hidden;
}
.tanzih-schedule-main {
	display: flex;
	align-items: center;
	padding: 16px;
	border-bottom: 1px dashed var(--tanzih-border);
}
.tanzih-schedule-main .date-box {
	background: var(--tanzih-green-dark);
	color: var(--tanzih-white);
	width: 60px; height: 60px;
	border-radius: 8px;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	margin-right: 20px;
}
.tanzih-schedule-main .date-box .d { font-size: 20px; font-weight: 700; line-height: 1; }
.tanzih-schedule-main .date-box .m { font-size: 10px; font-weight: 600; margin-top: 4px; }
.tanzih-schedule-main .info-box { flex: 1; }
.tanzih-schedule-main .full-date { display: block; font-size: 15px; font-weight: 700; margin-bottom: 6px; }
.tanzih-schedule-main .airline { display: block; font-size: 13px; color: var(--tanzih-text-muted); }
.tanzih-schedule-main .status-box .badge {
	padding: 6px 12px;
	border-radius: 20px;
	font-size: 11px; font-weight: 700;
	background: var(--tanzih-green-pale); color: var(--tanzih-green-dark);
}
.tanzih-schedule-footer {
	padding: 12px 16px;
	display: flex; justify-content: space-between; align-items: center;
	background: var(--tanzih-bg);
}
.tanzih-schedule-footer .seats { font-size: 13px; font-weight: 600; color: var(--tanzih-orange); }
.tanzih-schedule-footer .link { font-size: 13px; font-weight: 600; color: var(--tanzih-green-dark); text-decoration: none; }

/* PACKAGE CARDS */
.tanzih-packages-grid { display: flex; gap: 20px; }
.tanzih-package-card {
	flex: 1;
	background: var(--tanzih-white);
	border: 1px solid var(--tanzih-green-dark);
	border-radius: var(--tanzih-radius);
	position: relative;
	overflow: hidden;
	display: flex; flex-direction: column;
}
.tanzih-package-card .badge-populer {
	position: absolute; top: 0; right: 0;
	background: var(--tanzih-orange); color: var(--tanzih-white);
	font-size: 11px; font-weight: 700; padding: 6px 16px;
	border-bottom-left-radius: var(--tanzih-radius);
}
.tanzih-package-card .pkg-header { padding: 30px 20px 20px; text-align: center; }
.tanzih-package-card .pkg-header h4 { font-size: 20px; color: var(--tanzih-text-main); margin-bottom: 5px; }
.tanzih-package-card .pkg-header span { font-size: 12px; color: var(--tanzih-text-muted); }
.tanzih-package-card .pkg-hotels { padding: 0 20px 20px; }
.tanzih-package-card .hotel { margin-bottom: 15px; }
.tanzih-package-card .hotel .lbl { font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.tanzih-package-card .hotel .val { background: var(--tanzih-bg); padding: 8px 12px; border-radius: 6px; font-size: 13px; color: var(--tanzih-text-muted); border: 1px solid var(--tanzih-border); }
.tanzih-package-card .pkg-prices { padding: 0 20px 20px; border-top: 1px dashed var(--tanzih-border); padding-top: 20px; flex: 1; }
.tanzih-package-card .pkg-prices .pr { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; font-size: 14px; }
.tanzih-package-card .pkg-prices .pr span { color: var(--tanzih-text-muted); }
.tanzih-package-card .pkg-prices .pr strong { color: var(--tanzih-green-dark); font-size: 16px; }
.tanzih-package-card .pkg-footer { padding: 20px; }
.tanzih-package-card .btn-pilih { width: 100%; padding: 12px; border-radius: 8px; background: var(--tanzih-green-dark); color: var(--tanzih-white); font-weight: 600; border: none; cursor: pointer; }
@media (max-width: 768px) { .tanzih-packages-grid { flex-direction: column; } }

/* ITINERARY */
.tanzih-itinerary-list { display: flex; flex-direction: column; gap: 15px; }
.tanzih-itinerary-item {
	display: flex; gap: 20px;
	background: var(--tanzih-white);
	border: 1px solid var(--tanzih-border);
	padding: 20px; border-radius: var(--tanzih-radius);
}
.tanzih-itinerary-item .iti-day {
	background: var(--tanzih-green-dark);
	color: var(--tanzih-white);
	padding: 6px 12px; border-radius: 20px;
	font-size: 12px; font-weight: 600; height: fit-content; white-space: nowrap;
}
.tanzih-itinerary-item .iti-title { font-weight: 700; font-size: 16px; margin-bottom: 8px; }
.tanzih-itinerary-item .iti-desc { font-size: 14px; color: var(--tanzih-text-muted); }
.tanzih-itinerary-item .iti-desc p:last-child { margin-bottom: 0; }

/* COST DETAILS */
.tanzih-cost-section {
	background: var(--tanzih-white);
	border: 1px solid var(--tanzih-border);
	border-radius: var(--tanzih-radius);
	padding: 24px;
}
.tanzih-cost-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-top: 20px;}
.tanzih-cost-col h4 { display: flex; align-items: center; gap: 10px; font-size: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--tanzih-border); margin-bottom: 15px; }
.tanzih-cost-col.includes h4 { color: var(--tanzih-green-light); }
.tanzih-cost-col.excludes h4 { color: var(--tanzih-orange); }
.tanzih-cost-col ul { list-style: none; padding: 0; margin: 0; }
.tanzih-cost-col ul li { padding-left: 20px; position: relative; margin-bottom: 10px; font-size: 14px; color: var(--tanzih-text-muted); }
.tanzih-cost-col.includes ul li::before { content: '✓'; position: absolute; left: 0; color: var(--tanzih-green-light); font-weight: bold; }
.tanzih-cost-col.excludes ul li::before { content: '✕'; position: absolute; left: 0; color: var(--tanzih-orange); font-weight: bold; }

/* SIDEBAR CARD */
.tanzih-sidebar-column { position: sticky; top: 40px; }
.tanzih-sidebar-card {
	background: var(--tanzih-white);
	border: 1px solid var(--tanzih-border);
	border-radius: var(--tanzih-radius);
	box-shadow: var(--tanzih-shadow-lg);
	overflow: hidden;
}
.tanzih-sidebar-topbar {
	background: var(--tanzih-orange);
	color: var(--tanzih-white);
	text-align: center;
	padding: 10px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1px;
}
.tanzih-sidebar-body { padding: 24px; }
.tanzih-sidebar-price-label { font-size: 11px; color: var(--tanzih-text-muted); margin-bottom: 4px; }
.tanzih-sidebar-price-value { color: var(--tanzih-green-dark); font-size: 32px; font-weight: 800; line-height: 1; margin-bottom: 12px; }
.tanzih-sidebar-price-value .currency { font-size: 18px; margin-right: 4px; }
.tanzih-sidebar-price-value .suffix { font-size: 14px; font-weight: 600; color: var(--tanzih-text-muted); }
.tanzih-sidebar-installment { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--tanzih-green-dark); background: var(--tanzih-green-pale); padding: 8px 12px; border-radius: 6px; margin-bottom: 24px; font-weight: 600; }

.tanzih-sidebar-form .tanzih-form-group { margin-bottom: 16px; }
.tanzih-sidebar-form label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 8px; }
.tanzih-sidebar-form select { width: 100%; padding: 12px; border: 1px solid var(--tanzih-border); border-radius: 6px; font-size: 13px; background: var(--tanzih-bg); outline: none; }

.tanzih-sidebar-actions { display: flex; flex-direction: column; gap: 12px; margin-top: 24px; margin-bottom: 24px; }
.tanzih-btn-wa, .tanzih-btn-daftar { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 14px; border-radius: 8px; font-weight: 700; font-size: 15px; border: none; cursor: pointer; text-decoration: none; transition: 0.2s; }
.tanzih-btn-wa { background: var(--tanzih-green-light); color: var(--tanzih-white); }
.tanzih-btn-wa:hover { opacity: 0.9; color: white; }
.tanzih-btn-daftar { background: var(--tanzih-green-dark); color: var(--tanzih-white); }
.tanzih-btn-daftar:hover { opacity: 0.9; }

.tanzih-sidebar-trust ul { list-style: none; padding: 0; margin: 0; }
.tanzih-sidebar-trust ul li { font-size: 12px; color: var(--tanzih-text-muted); margin-bottom: 8px; display: flex; align-items: flex-start; gap: 8px; }
.tanzih-sidebar-trust ul li .icon { color: var(--tanzih-green-light); font-weight: bold; }

/* AGGRESSIVE WTE OVERRIDES TO PREVENT SQUASHING */
.wp-travel-engine-trip-sidebar,
.wte-trip-right-sidebar,
.wte-sidebar,
.wp-travel-engine-sidebar,
.wp-travel-engine-trip-tabs-wrapper,
#wte-trip-sidebar {
    display: none !important;
}

.wp-travel-engine-trip-wrapper,
.wte-trip-wrapper,
.wte-content-area,
.wp-travel-engine-content,
.wte-trip-content-left {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    padding-right: 0 !important;
}

/* Ensure our two column layout stretches fully */
.tanzih-wrapper {
    width: 100% !important;
}

/* ==========================================================================
   WP TRAVEL ENGINE THEME / NATIVE FIXES FOR MOBILE
   ========================================================================== */
@media (max-width: 768px) {
    /* Prevent the main title from being massive and overlapping the badge */
    h1.entry-title, .wte-trip-title, .page-title, .entry-header h1 {
        font-size: 26px !important;
        line-height: 1.3 !important;
        margin-top: 25px !important;
        margin-bottom: 15px !important;
        clear: both;
        display: block;
    }

    /* Push the overview card down so it doesn't collide with floating badges */
    .tanzih-overview-card {
        margin-top: 30px !important;
    }

    /* Ensure the price wrap aligns correctly on mobile */
    .tanzih-overview-header .price-wrap {
        text-align: left !important;
    }

    /* SCHEDULE MOBILE FIXES */
    .tanzih-schedule-card {
        display: block !important;
    }
    .tanzih-section-header.with-link {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    .tanzih-schedule-main {
        flex-direction: column;
        align-items: flex-start;
        padding: 16px;
    }
    .tanzih-schedule-main .date-box {
        margin-bottom: 12px;
        margin-right: 0;
    }
    .tanzih-schedule-main .info-box {
        margin-bottom: 12px;
    }
    .tanzih-schedule-main .status-box {
        width: auto;
        text-align: left;
    }
}