/**
 * BD Booking Calendar — styles v1.6.0
 *
 * Designed to sit directly beneath the WP Hotel Booking single-room form.
 * Matches the form's white background, field widths, and font weight so the
 * pricing summary reads as a natural continuation rather than a separate widget.
 *
 * BEM-style .bd-* prefix keeps us isolated from theme & plugin CSS.
 *
 * @package BD_Booking_Calendar
 */

/* ── Hide extras rows that the JS has auto-set ─────────────────────── */
.hb_addition_packages li.bd-hide-extra-row {
	display: none !important;
}

/* ── Adults pricing note (injected into the adults form group) ─────── */
.bd-adults-pricing-note {
	margin-top: 5px;
	font-size: 12px;
	line-height: 1.45;
	color: #666;
}

/* ── Children age-split UI ─────────────────────────────────────────── */
.bd-children-age-wrap {
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.bd-children-age-title {
	font-weight: 600;
	margin-bottom: 8px;
	font-size: 13px;
	color: #333;
}

.bd-children-age-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 8px;
}

.bd-children-age-row label {
	margin: 0;
	font-size: 13px;
	color: #444;
}

.bd-child-age-input {
	width: 90px;
	max-width: 90px;
}

.bd-children-age-help {
	font-size: 12px;
	color: #777;
	margin-top: 6px;
	font-style: italic;
}

.bd-children-age-error {
	margin-top: 8px;
	font-size: 12px;
	color: #c0392b;
	font-weight: 500;
}

.bd-price-hint {
	display: block;
	font-size: 11px;
	font-weight: normal;
	color: #999;
}

/* ════════════════════════════════════════════════════════════════════
   PRICE SUMMARY WIDGET
   Sits directly beneath .wphb-single-room-booking-container.
   Matches the form's white background and border treatment so it reads
   as a continuation of the booking panel.
════════════════════════════════════════════════════════════════════ */

.bd-price-summary {
	margin: 0;
	padding: 20px;
	background: #fff;
	border-top: 2px solid #e8e8e8;
	width: 100%;
	box-sizing: border-box;
	font-size: 13px;
	color: #333;
	line-height: 1.5;
}

/* Section heading — matches .hb-booking-room-form-head p sizing */
.bd-price-summary__title {
	font-size: 14px;
	font-weight: 700;
	color: #222;
	margin: 0 0 14px;
	padding-bottom: 10px;
	border-bottom: 1px solid #efefef;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

/* ── Price line blocks ─────────────────────────────────────────────── */
.bd-price-block {
	display: flex;
	flex-direction: column;
	padding: 8px 0;
	border-bottom: 1px solid #f2f2f2;
}

.bd-price-block:last-child {
	border-bottom: none;
}

.bd-price-block__header {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 10px;
}

.bd-price-block__label {
	font-weight: 600;
	color: #333;
	font-size: 13px;
}

.bd-price-block__amount {
	font-weight: 600;
	color: #333;
	font-size: 13px;
	white-space: nowrap;
	flex-shrink: 0;
}

.bd-price-block__sub {
	font-size: 11px;
	color: #999;
	margin-top: 2px;
}

/* Meta summary line */
.bd-price-block--meta {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	padding: 5px 0 2px;
	font-size: 11px;
	color: #aaa;
	border-bottom: none;
}

.bd-price-summary__divider {
	border: none;
	border-top: 1px dashed #e0e0e0;
	margin: 4px 0;
}

/* ── Grand total row ───────────────────────────────────────────────── */
.bd-price-summary__total {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 14px;
	padding-top: 14px;
	border-top: 2px solid #333;
	font-size: 16px;
	font-weight: 700;
	color: #111;
}

.bd-price-summary__total-amount {
	font-size: 18px;
}

/* ── Footer note ───────────────────────────────────────────────────── */
.bd-price-summary__note {
	margin-top: 10px;
	font-size: 11px;
	color: #aaa;
	font-style: italic;
}

.bd-price-summary__loading {
	margin-top: 8px;
	font-size: 12px;
	color: #aaa;
	font-style: italic;
}

/* ════════════════════════════════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════════════════════════════════ */

@media ( max-width: 767px ) {
	.bd-price-summary {
		padding: 16px;
		font-size: 13px;
	}

	.bd-price-summary__total {
		font-size: 15px;
	}

	.bd-price-summary__total-amount {
		font-size: 16px;
	}
}

/* ════════════════════════════════════════════════════════════════════
   DEBUG PANEL
════════════════════════════════════════════════════════════════════ */

#bd-debug-panel {
	position: fixed;
	bottom: 0; right: 0;
	width: 520px; max-width: 100vw;
	max-height: 420px;
	background: #1e1e2e;
	color: #cdd6f4;
	font-family: monospace;
	font-size: 11px;
	z-index: 999999;
	display: flex;
	flex-direction: column;
	border-top-left-radius: 8px;
	box-shadow: -2px -2px 16px rgba(0,0,0,.5);
}
.bd-debug-header {
	display: flex; justify-content: space-between; align-items: center;
	padding: 6px 10px;
	background: #313244;
	border-top-left-radius: 8px;
	flex-shrink: 0;
}
.bd-debug-controls { display: flex; gap: 6px; }
.bd-debug-controls button {
	background: #45475a; color: #cdd6f4; border: none;
	padding: 2px 8px; border-radius: 4px; cursor: pointer; font-size: 11px;
}
.bd-debug-controls button:hover { background: #585b70; }
.bd-debug-body { flex: 1; overflow-y: auto; padding: 4px 8px; }
.bd-debug-row {
	display: flex; gap: 6px; align-items: baseline;
	padding: 2px 0; border-bottom: 1px solid rgba(255,255,255,.05);
	line-height: 1.4;
}
.bd-debug-ts   { color: #6c7086; flex-shrink: 0; width: 88px; }
.bd-debug-cat  { flex-shrink: 0; width: 58px; font-weight: bold; border-radius: 3px; padding: 0 3px; text-align: center; }
.bd-debug-cat--init     { background:#a6e3a1; color:#1e1e2e; }
.bd-debug-cat--ajax     { background:#89b4fa; color:#1e1e2e; }
.bd-debug-cat--date     { background:#fab387; color:#1e1e2e; }
.bd-debug-cat--event    { background:#cba6f7; color:#1e1e2e; }
.bd-debug-cat--form     { background:#f38ba8; color:#1e1e2e; }
.bd-debug-cat--ui       { background:#94e2d5; color:#1e1e2e; }
.bd-debug-cat--extra    { background:#f9e2af; color:#1e1e2e; }
.bd-debug-cat--children { background:#eba0ac; color:#1e1e2e; }
.bd-debug-cat--render   { background:#b4befe; color:#1e1e2e; }
.bd-debug-cat--sync     { background:#a6e3a1; color:#1e1e2e; }
.bd-debug-cat--btn      { background:#f5c2e7; color:#1e1e2e; }
.bd-debug-msg  { color: #cdd6f4; flex: 1; }
.bd-debug-data { color: #a6adc8; word-break: break-all; font-size: 10px; }
.bd-debug-footer {
	border-top: 1px solid #313244;
	padding: 6px 8px;
	flex-shrink: 0;
	background: #181825;
}
#bd-debug-snapshot {
	max-height: 120px; overflow-y: auto;
	color: #a6e3a1; font-size: 10px; margin: 4px 0;
	white-space: pre-wrap; word-break: break-all;
}