/**
 * Frontend Booking Modal Styles
 * Wamy Pilgrim Booking
 */

:root {
	--wbk-primary: #1e5631;
	--wbk-primary-dark: #0f2b22;
	--wbk-primary-light: #2d7a46;
	--wbk-accent: #c5a059;
	--wbk-accent-hover: #b08d46;
	--wbk-bg-cream: #fcfaf6;
	--wbk-text-dark: #1f2937;
	--wbk-text-muted: #4b5563;
	--wbk-border: #e5e7eb;
	--wbk-radius: 12px;
	--wbk-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

/* Modal Backdrop Overlay */
.wamy-bk-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background: rgba(15, 43, 34, 0.7);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.3s cubic-bezier(0.16, 1, 0.3, 1);
	box-sizing: border-box;
}

.wamy-bk-overlay.is-active {
	opacity: 1;
	visibility: visible;
}

/* Modal Dialog Card */
.wamy-bk-dialog {
	background: #ffffff;
	width: 100%;
	max-width: 760px;
	max-height: 90vh;
	border-radius: var(--wbk-radius);
	box-shadow: var(--wbk-shadow);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	transform: translateY(24px) scale(0.97);
	transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
	position: relative;
	border: 1px solid rgba(197, 160, 89, 0.3);
	font-family: 'Hind Siliguri', 'Segoe UI', sans-serif;
	box-sizing: border-box;
}

.wamy-bk-overlay.is-active .wamy-bk-dialog {
	transform: translateY(0) scale(1);
}

/* Header */
.wamy-bk-header {
	background: linear-gradient(135deg, var(--wbk-primary-dark) 0%, var(--wbk-primary) 100%);
	color: #ffffff;
	padding: 12px 20px;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	position: relative;
	border-bottom: 2px solid var(--wbk-accent);
}

.wamy-bk-header::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-image: radial-gradient(rgba(197, 160, 89, 0.15) 1px, transparent 0);
	background-size: 14px 14px;
	pointer-events: none;
	opacity: 0.6;
}

.wamy-bk-header__content {
	position: relative;
	z-index: 1;
}

.wamy-bk-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: rgba(197, 160, 89, 0.2);
	border: 1px solid rgba(197, 160, 89, 0.4);
	color: #f7e7c4;
	font-size: 13px;
	font-weight: 600;
	padding: 3px 10px;
	border-radius: 20px;
	margin-bottom: 3px; font-size: 11px; padding: 1px 8px;
}

.wamy-bk-title {
	margin: 0 0 4px;
	font-size: 16px;
	font-weight: 700;
	color: #ffffff;
	line-height: 1.3;
}

.wamy-bk-subtitle {
	margin: 0;
	font-size: 12px;
	color: #e5e7eb;
	opacity: 0.9;
	font-weight: 400;
}

.wamy-bk-close {
	background: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.2);
	color: #ffffff;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.2s ease;
	flex-shrink: 0;
	position: relative;
	z-index: 2;
	padding: 0;
}

.wamy-bk-close:hover {
	background: rgba(255, 255, 255, 0.25);
	transform: rotate(90deg);
}

/* Modal Body / Scrollable Area */
.wamy-bk-body {
	padding: 12px 20px;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	flex: 1 1 auto;
	box-sizing: border-box;
}

/* Sections */
.wamy-bk-section {
	background: var(--wbk-bg-cream);
	border: 1px solid var(--wbk-border);
	border-radius: 10px;
	padding: 18px 20px;
	margin-bottom: 18px;
}

.wamy-bk-section__head {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 14px;
	border-bottom: 1px dashed #d1d5db;
	padding-bottom: 8px;
}

.wamy-bk-section__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	background: var(--wbk-primary);
	color: #ffffff;
	font-size: 12px;
	font-weight: 700;
	border-radius: 50%;
}

.wamy-bk-section__title {
	margin: 0;
	font-size: 16px;
	font-weight: 700;
	color: var(--wbk-primary-dark);
}

/* Grids */
.wamy-bk-grid {
	display: grid;
	gap: 14px;
}

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

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

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

/* Fields & Labels */
.wamy-bk-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.wamy-bk-label {
	font-size: 13.5px;
	font-weight: 600;
	color: var(--wbk-text-dark);
	display: flex;
	align-items: center;
	gap: 4px;
}

.wamy-bk-req {
	color: #dc2626;
	font-weight: 700;
}

/* Inputs, Selects, Textareas */
.wamy-bk-input,
.wamy-bk-select,
.wamy-bk-textarea {
	width: 100%;
	padding: 10px 14px;
	border: 1.5px solid var(--wbk-border);
	border-radius: 8px;
	font-size: 14.5px;
	color: var(--wbk-text-dark);
	background: #ffffff;
	transition: all 0.2s ease;
	font-family: inherit;
	box-sizing: border-box;
}

.wamy-bk-input:focus,
.wamy-bk-select:focus,
.wamy-bk-textarea:focus {
	outline: none;
	border-color: var(--wbk-primary);
	box-shadow: 0 0 0 3px rgba(30, 86, 49, 0.15);
}

.wamy-bk-input.is-invalid,
.wamy-bk-select.is-invalid {
	border-color: #dc2626;
	background: #fffafa;
}

/* Radio Pill Group (Hajj / Umrah) */
.wamy-bk-pill-group {
	display: flex;
	gap: 8px;
}

.wamy-bk-pill {
	flex: 1;
	cursor: pointer;
	position: relative;
}

.wamy-bk-pill input[type="radio"] {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.wamy-bk-pill span {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 9px 12px;
	background: #ffffff;
	border: 1.5px solid var(--wbk-border);
	border-radius: 8px;
	font-size: 14px;
	font-weight: 600;
	color: var(--wbk-text-dark);
	transition: all 0.2s ease;
	text-align: center;
}

.wamy-bk-pill input[type="radio"]:checked + span {
	background: rgba(30, 86, 49, 0.08);
	border-color: var(--wbk-primary);
	color: var(--wbk-primary-dark);
	font-weight: 700;
	box-shadow: 0 0 0 1px var(--wbk-primary);
}

/* Stepper (Pilgrim Count) */
.wamy-bk-stepper {
	display: flex;
	align-items: center;
	background: #ffffff;
	border: 1.5px solid var(--wbk-border);
	border-radius: 8px;
	overflow: hidden;
	height: 42px;
}

.wamy-bk-stepper__btn {
	width: 44px;
	height: 100%;
	background: #f3f4f6;
	border: none;
	font-size: 18px;
	font-weight: 700;
	color: var(--wbk-text-dark);
	cursor: pointer;
	transition: background 0.2s;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}

.wamy-bk-stepper__btn:hover {
	background: #e5e7eb;
	color: var(--wbk-primary);
}

.wamy-bk-stepper__input {
	flex: 1;
	border: none;
	text-align: center;
	font-size: 16px;
	font-weight: 700;
	color: var(--wbk-primary-dark);
	padding: 0;
	background: transparent;
	-moz-appearance: textfield;
}

.wamy-bk-stepper__input::-webkit-outer-spin-button,
.wamy-bk-stepper__input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* Gender Selector */
.wamy-bk-gender-select {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 10px 14px;
	background: #ffffff;
	border: 1.5px solid var(--wbk-border);
	border-radius: 8px;
	height: 42px;
	box-sizing: border-box;
}

.wamy-bk-gender-select label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13.5px;
	font-weight: 600;
	cursor: pointer;
}

/* Extra Pilgrims Repeater Card */
.wamy-bk-extra-card {
	background: #ffffff;
	border: 1px solid #d1d5db;
	border-radius: 8px;
	padding: 14px;
	margin-bottom: 12px;
	position: relative;
	border-left: 4px solid var(--wbk-accent);
}

.wamy-bk-extra-card__head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 10px;
	font-size: 13px;
	font-weight: 700;
	color: var(--wbk-text-muted);
}

.wamy-bk-extra-remove {
	background: none;
	border: none;
	color: #dc2626;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	padding: 2px 6px;
	border-radius: 4px;
}

.wamy-bk-extra-remove:hover {
	background: #fee2e2;
}

/* Alert Box */
.wamy-bk-alert {
	padding: 12px 16px;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 600;
	margin-bottom: 16px;
	line-height: 1.4;
}

.wamy-bk-alert--error {
	background: #fee2e2;
	color: #991b1b;
	border: 1px solid #f87171;
}

.wamy-bk-alert--success {
	background: #dcfce7;
	color: #166534;
	border: 1px solid #86efac;
}

/* Footer / Action Bar */
.wamy-bk-footer {
	margin-top: 10px;
	padding-top: 16px;
	border-top: 1px solid var(--wbk-border);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}

.wamy-bk-footer__info {
	font-size: 12.5px;
	color: var(--wbk-text-muted);
}

.wamy-bk-footer__actions {
	display: flex;
	gap: 10px;
}

.wamy-bk-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 24px;
	border-radius: 8px;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	border: none;
	transition: all 0.2s ease;
	font-family: inherit;
}

.wamy-bk-btn--primary {
	background: var(--wbk-primary);
	color: #ffffff;
	box-shadow: 0 4px 12px rgba(30, 86, 49, 0.25);
}

.wamy-bk-btn--primary:hover {
	background: var(--wbk-primary-dark);
	transform: translateY(-1px);
	box-shadow: 0 6px 16px rgba(30, 86, 49, 0.35);
}

.wamy-bk-btn--secondary {
	background: #f3f4f6;
	color: var(--wbk-text-dark);
	border: 1px solid #d1d5db;
}

.wamy-bk-btn--secondary:hover {
	background: #e5e7eb;
}

.wamy-bk-btn__spinner {
	width: 16px;
	height: 16px;
	border: 2px solid rgba(255, 255, 255, 0.3);
	border-top-color: #ffffff;
	border-radius: 50%;
	animation: wamySpinner 0.6s linear infinite;
	display: inline-block;
}

@keyframes wamySpinner {
	to { transform: rotate(360deg); }
}

/* Success Screen View */
.wamy-bk-success {
	text-align: center;
	padding: 30px 15px 15px;
}

.wamy-bk-success__icon {
	width: 80px;
	height: 80px;
	background: rgba(30, 86, 49, 0.1);
	color: var(--wbk-primary);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 16px;
	border: 3px solid var(--wbk-primary);
	animation: wamyPulse 2s infinite;
}

@keyframes wamyPulse {
	0% { box-shadow: 0 0 0 0 rgba(30, 86, 49, 0.4); }
	70% { box-shadow: 0 0 0 16px rgba(30, 86, 49, 0); }
	100% { box-shadow: 0 0 0 0 rgba(30, 86, 49, 0); }
}

.wamy-bk-success__title {
	margin: 0 0 8px;
	font-size: 24px;
	font-weight: 700;
	color: var(--wbk-primary-dark);
}

.wamy-bk-success__desc {
	margin: 0 auto 20px;
	font-size: 15px;
	color: var(--wbk-text-muted);
	max-width: 500px;
	line-height: 1.5;
}

.wamy-bk-success__box {
	background: var(--wbk-bg-cream);
	border: 1px solid var(--wbk-accent);
	border-radius: 10px;
	padding: 16px 20px;
	max-width: 440px;
	margin: 0 auto 20px;
	text-align: left;
}

.wamy-bk-success__row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 6px 0;
	border-bottom: 1px dashed #e5e7eb;
	font-size: 14px;
}

.wamy-bk-success__row:last-child {
	border-bottom: none;
}

.wamy-bk-success__code {
	font-family: 'Consolas', 'Courier New', monospace;
	font-size: 16px;
	color: var(--wbk-primary);
	background: #ffffff;
	padding: 2px 8px;
	border-radius: 4px;
	border: 1px solid var(--wbk-accent);
}

.wamy-bk-success__hotline {
	margin-bottom: 20px;
	font-size: 14px;
}

.wamy-bk-phone-btn {
	display: inline-block;
	margin-top: 6px;
	background: var(--wbk-primary);
	color: #ffffff;
	text-decoration: none;
	padding: 8px 18px;
	border-radius: 20px;
	font-weight: 700;
	font-size: 15px;
	transition: background 0.2s;
}

.wamy-bk-phone-btn:hover {
	background: var(--wbk-primary-dark);
	color: #ffffff;
}

.wamy-bk-success__actions {
	display: flex;
	justify-content: center;
}