/* ============================================================================
   Plan One — Booking Modal (global, loaded on all pages)
   Uses .pb-modal-* classes inside .po-modal-root (not under .po-shell)
   so it works on home page, browse page, single billboard, etc.
   ============================================================================ */

.po-modal-root {
	font-family: 'IBM Plex Sans Arabic', 'IBM Plex Sans', system-ui, sans-serif;
	direction: rtl;

	--pb-brand: #1E40D7;
	--pb-brand-600: #1734B5;
	--pb-brand-50: #EEF2FF;
	--pb-brand-100: #DCE3FE;
	--pb-accent: #1FCFC0;
	--pb-ink: #0A1B40;
	--pb-ink-700: #1F2D52;
	--pb-ink-500: #4A567A;
	--pb-muted: #6B7591;
	--pb-line: #E6E8F0;
	--pb-line-soft: #F0F2F8;
	--pb-bg: #F6F7FB;
}

.po-modal-root .pb-num {
	font-family: 'IBM Plex Sans', system-ui, sans-serif;
	font-feature-settings: 'tnum' 1, 'lnum' 1;
}

.po-modal-root .pb-modal {
	display: flex;
	position: fixed;
	top: 0; right: 0; bottom: 0; left: 0;
	z-index: 99999;
	align-items: center;
	justify-content: center;
	padding: 20px;
	animation: pbFadeIn .18s ease;
	direction: rtl;
}
.po-modal-root .pb-modal[hidden] {
	display: none !important;
}
@keyframes pbFadeIn {
	from { opacity: 0; }
	to   { opacity: 1; }
}
.po-modal-root .pb-modal-overlay {
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	background: rgba(10, 27, 64, .65);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	cursor: pointer;
}
.po-modal-root .pb-modal-card {
	position: relative;
	background: #fff;
	border-radius: 18px;
	box-shadow: 0 32px 80px -20px rgba(10, 27, 64, .5);
	width: 100%;
	max-width: 580px;
	max-height: 92vh;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	animation: pbModalIn .25s cubic-bezier(.4, 0, .2, 1);
}
@keyframes pbModalIn {
	from { opacity: 0; transform: scale(.95) translateY(10px); }
	to   { opacity: 1; transform: scale(1) translateY(0); }
}
.po-modal-root .pb-modal-close {
	position: absolute;
	top: 14px;
	left: 14px;
	right: auto;
	z-index: 2;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .9);
	color: var(--pb-ink);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 8px rgba(10, 27, 64, .18);
	cursor: pointer;
	border: 0;
	font-family: inherit;
	padding: 0;
}
.po-modal-root .pb-modal-close:hover {
	background: #fff;
	color: var(--pb-brand);
}
.po-modal-root .pb-modal-body {
	overflow-y: auto;
	flex: 1;
	display: flex;
	flex-direction: column;
}

.po-modal-root .pb-modal-hero {
	position: relative;
	width: 100%;
	height: 200px;
	overflow: hidden;
	flex-shrink: 0;
}
.po-modal-root .pb-modal-hero svg,
.po-modal-root .pb-modal-hero img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
}
.po-modal-root .pb-modal-content {
	padding: 22px 24px 24px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.po-modal-root .pb-modal-head {
	display: flex;
	align-items: center;
	gap: 10px;
}
.po-modal-root .pb-card-chip {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	height: 26px;
	padding: 0 10px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	background: var(--pb-brand-50);
	color: var(--pb-brand);
	line-height: 1;
}
.po-modal-root .pb-card-chip svg { flex-shrink: 0; }
.po-modal-root .pb-code {
	font-size: 11px;
	font-weight: 700;
	color: var(--pb-muted);
	letter-spacing: .04em;
	font-family: 'IBM Plex Mono', monospace;
}
.po-modal-root .pb-modal-title {
	font-size: 22px;
	font-weight: 800;
	color: var(--pb-ink);
	letter-spacing: -.01em;
	margin: 0;
	line-height: 1.25;
}
.po-modal-root .pb-modal-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	color: var(--pb-ink-500);
	font-size: 13px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--pb-line);
}
.po-modal-root .pb-modal-meta-i {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.po-modal-root .pb-modal-meta-i svg {
	color: var(--pb-muted);
	flex-shrink: 0;
}
.po-modal-root .pb-modal-section-title {
	font-size: 14px;
	font-weight: 700;
	color: var(--pb-ink);
	margin: 0 0 10px;
}

/* Year tabs (filter) */
.po-modal-root .pb-modal-years {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	align-items: center;
}
.po-modal-root .pb-modal-year-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 64px;
	height: 36px;
	padding: 0 14px;
	background: #fff;
	border: 1.5px solid var(--pb-line);
	border-radius: 10px;
	font-family: inherit;
	font-size: 13px;
	font-weight: 700;
	color: var(--pb-ink-700);
	cursor: pointer;
	transition: all .15s;
}
.po-modal-root .pb-modal-year-btn:hover {
	border-color: var(--pb-brand);
	color: var(--pb-brand);
}
.po-modal-root .pb-modal-year-btn.is-on {
	background: var(--pb-brand);
	border-color: var(--pb-brand);
	color: #fff;
}
.po-modal-root .pb-modal-year-more {
	min-width: 36px;
	padding: 0;
	font-size: 20px;
	color: var(--pb-muted);
	font-weight: 400;
}

/* Months grid */
.po-modal-root .pb-modal-months {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 8px;
}
.po-modal-root .pb-modal-month {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 12px 4px;
	background: #fff;
	border: 1.5px solid var(--pb-line);
	border-radius: 10px;
	cursor: pointer;
	font-family: inherit;
	transition: all .15s;
	text-align: center;
	font-size: 13px;
	font-weight: 600;
	color: var(--pb-ink);
}
.po-modal-root .pb-modal-month:hover:not(.is-unavailable) {
	border-color: var(--pb-brand);
}
.po-modal-root .pb-modal-month.is-selected {
	background: var(--pb-brand-50);
	border-color: var(--pb-brand);
	color: var(--pb-brand);
	font-weight: 700;
}
.po-modal-root .pb-modal-month.is-unavailable {
	background: var(--pb-line-soft);
	color: var(--pb-muted);
	cursor: not-allowed;
	opacity: .55;
	text-decoration: line-through;
}

/* Selected chips */
.po-modal-root .pb-modal-selected {
	margin-top: 12px;
	padding-top: 14px;
	border-top: 1px dashed var(--pb-line);
}
.po-modal-root .pb-modal-selected-label {
	font-size: 12px;
	font-weight: 600;
	color: var(--pb-muted);
	margin-bottom: 8px;
}
.po-modal-root .pb-modal-selected-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.po-modal-root .pb-modal-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
	background: var(--pb-brand-50);
	border: 1px solid var(--pb-brand-100);
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	color: var(--pb-brand);
}
.po-modal-root .pb-modal-chip-x {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--pb-brand);
	color: #fff;
	font-size: 9px;
	border: 0;
	cursor: pointer;
	font-family: inherit;
	padding: 0;
}
.po-modal-root .pb-modal-chip-x:hover {
	background: var(--pb-brand-600);
}

/* Footer */
.po-modal-root .pb-modal-foot {
	padding: 16px 24px;
	border-top: 1px solid var(--pb-line);
	background: var(--pb-line-soft);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-shrink: 0;
}
.po-modal-root .pb-modal-total {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.po-modal-root .pb-modal-total-label {
	font-size: 12px;
	color: var(--pb-muted);
	font-weight: 500;
}
.po-modal-root .pb-modal-total-value {
	font-size: 22px;
	font-weight: 800;
	color: var(--pb-ink);
	font-family: 'IBM Plex Sans', sans-serif;
}
.po-modal-root .pb-modal-confirm {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--pb-brand);
	color: #fff;
	border-radius: 10px;
	padding: 12px 22px;
	font-size: 14px;
	font-weight: 700;
	border: 0;
	cursor: pointer;
	font-family: inherit;
}
.po-modal-root .pb-modal-confirm:hover {
	background: var(--pb-brand-600);
}
.po-modal-root .pb-modal-confirm:disabled {
	background: var(--pb-line);
	color: var(--pb-muted);
	cursor: not-allowed;
}
.po-modal-root .pb-spinner-mini {
	width: 14px;
	height: 14px;
	border: 2px solid rgba(255,255,255,.4);
	border-top-color: #fff;
	border-radius: 50%;
	animation: pbSpin .8s linear infinite;
	display: inline-block;
}
@keyframes pbSpin {
	to { transform: rotate(360deg); }
}

@media (max-width: 600px) {
	.po-modal-root .pb-modal {
		padding: 0;
		align-items: flex-end;
	}
	.po-modal-root .pb-modal-card {
		max-height: 95vh;
		border-radius: 18px 18px 0 0;
		max-width: 100%;
	}
	.po-modal-root .pb-modal-months {
		grid-template-columns: repeat(3, 1fr);
	}
	.po-modal-root .pb-modal-foot {
		flex-direction: column;
		align-items: stretch;
	}
	.po-modal-root .pb-modal-confirm {
		justify-content: center;
		width: 100%;
	}
}