/*!
 * Pigee Booking — public widget styles.
 * Mobile-first. Brand colour is injected via --pigee-brand.
 */

.pigee-bkg-app,
.pigee-bkg-app * { box-sizing: border-box; }

.pigee-bkg-app {
	--pb: var(--pigee-brand, #0F766E);
	--pb-soft: color-mix(in srgb, var(--pb) 12%, #fff);
	--pb-ink: #1d2129;
	--pb-mut: #6b7280;
	--pb-line: #e6e8eb;
	--pb-bg: #ffffff;
	--pb-radius: 14px;
	color-scheme: light;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: var(--pb-ink);
	background: #ffffff;
	max-width: 560px;
	margin: 0 auto;
	padding: 18px 16px 40px;
	-webkit-font-smoothing: antialiased;
}
.pigee-bkg-embed .pigee-bkg-app { padding-top: 8px; }
.pigee-bkg-page-wrap { background: #f5f6f8; min-height: 60vh; }

/* ---- progress rail ---- */
.pigee-bkg-steps {
	display: flex;
	gap: 6px;
	margin: 4px 0 20px;
}
.pigee-bkg-steps i {
	flex: 1;
	height: 4px;
	border-radius: 4px;
	background: var(--pb-line);
	transition: background .25s;
}
.pigee-bkg-steps i.is-done { background: var(--pb); }
.pigee-bkg-steps i.is-now  { background: var(--pb); opacity: .55; }

.pigee-bkg-h {
	font-size: 1.22rem;
	font-weight: 700;
	margin: 0 0 4px;
	letter-spacing: -.01em;
}
.pigee-bkg-sub { color: var(--pb-mut); font-size: .9rem; margin: 0 0 16px; }

/* ---- cards / option rows ---- */
.pigee-bkg-card {
	background: var(--pb-bg);
	border: 1px solid var(--pb-line);
	border-radius: var(--pb-radius);
	padding: 18px;
	margin-bottom: 12px;
}
/* Confirm-step summary card: a touch more room around the details */
.pigee-bkg-card .pigee-bkg-opt-name {
	font-size: 1.02rem;
	line-height: 1.4;
}
.pigee-bkg-card .pigee-bkg-opt-meta {
	margin-top: 6px;
	line-height: 1.5;
}
.pigee-bkg-opt {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	text-align: left;
	background: var(--pb-bg);
	border: 1px solid var(--pb-line);
	border-radius: 12px;
	padding: 14px;
	margin-bottom: 10px;
	cursor: pointer;
	transition: border-color .15s, box-shadow .15s, transform .05s;
}
.pigee-bkg-opt:active { transform: scale(.99); }
.pigee-bkg-opt:hover { border-color: var(--pb); }
.pigee-bkg-opt.is-sel {
	border-color: var(--pb);
	box-shadow: 0 0 0 3px var(--pb-soft);
}
.pigee-bkg-opt-main { flex: 1; min-width: 0; }
.pigee-bkg-opt-name { font-weight: 600; }
.pigee-bkg-opt-meta { color: var(--pb-mut); font-size: .82rem; margin-top: 2px; }
.pigee-bkg-opt-price { font-weight: 700; white-space: nowrap; }
.pigee-bkg-opt-avatar {
	width: 42px; height: 42px;
	border-radius: 50%;
	background: var(--pb-soft);
	color: var(--pb);
	display: flex; align-items: center; justify-content: center;
	font-weight: 700;
	flex: none;
}
.pigee-bkg-cat-label {
	font-size: .74rem;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--pb-mut);
	margin: 16px 0 8px;
	font-weight: 700;
}

/* ---- date strip ---- */
.pigee-bkg-dates {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	padding-bottom: 6px;
	scrollbar-width: none;
}
.pigee-bkg-dates::-webkit-scrollbar { display: none; }
.pigee-bkg-day {
	flex: none;
	width: 58px;
	border: 1px solid var(--pb-line);
	border-radius: 12px;
	padding: 8px 4px;
	text-align: center;
	cursor: pointer;
	background: #fff;
	position: relative;
}
.pigee-bkg-day.is-sel { border-color: var(--pb); box-shadow: 0 0 0 3px var(--pb-soft); }
.pigee-bkg-day[disabled] { opacity: .35; cursor: not-allowed; }
.pigee-bkg-day .dow { font-size: .68rem; color: var(--pb-mut); text-transform: uppercase; }
.pigee-bkg-day .dom { font-size: 1.1rem; font-weight: 700; }
.pigee-bkg-day .heat {
	display: block;
	width: 16px; height: 4px;
	border-radius: 3px;
	margin: 4px auto 0;
}
/* demand heat colours — never reveal counts, just a hint */
.heat-quiet    { background: #34d399; }
.heat-moderate { background: #fbbf24; }
.heat-busy     { background: #fb7185; }
.heat-premium  { background: #a855f7; }
.heat-closed   { background: var(--pb-line); }

.pigee-bkg-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 14px;
	margin: 12px 0 4px;
	font-size: .74rem;
	color: var(--pb-mut);
}
.pigee-bkg-legend span { display: flex; align-items: center; gap: 5px; }
.pigee-bkg-legend i { width: 12px; height: 4px; border-radius: 3px; }

/* ---- slot grid ---- */
.pigee-bkg-slots {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
	margin-top: 14px;
}
.pigee-bkg-slot {
	border: 1px solid var(--pb-line);
	border-radius: 10px;
	padding: 11px 4px;
	text-align: center;
	font-weight: 600;
	font-size: .92rem;
	cursor: pointer;
	background: #fff;
	position: relative;
}
.pigee-bkg-slot:hover { border-color: var(--pb); }
.pigee-bkg-slot.is-sel { background: var(--pb); color: #fff; border-color: var(--pb); }
.pigee-bkg-slot small {
	display: block;
	font-size: .64rem;
	font-weight: 600;
	margin-top: 2px;
	opacity: .8;
}
.pigee-bkg-slot.lvl-premium small { color: #a855f7; }
.pigee-bkg-slot.is-sel small { color: #fff; }

/* ---- form fields ---- */
.pigee-bkg-field { margin-bottom: 14px; }
.pigee-bkg-field label {
	display: block;
	font-size: .82rem;
	font-weight: 600;
	margin-bottom: 5px;
}
.pigee-bkg-field input,
.pigee-bkg-field textarea,
.pigee-bkg-field select {
	width: 100%;
	border: 1px solid var(--pb-line);
	border-radius: 10px;
	padding: 12px;
	font-size: 1rem;
	font-family: inherit;
	background: #fff;
}
.pigee-bkg-field input:focus,
.pigee-bkg-field textarea:focus {
	outline: none;
	border-color: var(--pb);
	box-shadow: 0 0 0 3px var(--pb-soft);
}
.pigee-bkg-check {
	display: flex;
	gap: 9px;
	align-items: flex-start;
	font-size: .85rem;
	color: var(--pb-mut);
}
.pigee-bkg-check input { width: auto; margin-top: 2px; }

/* ---- pay choices ---- */
.pigee-bkg-pay { display: grid; gap: 8px; margin: 10px 0 4px; }
.pigee-bkg-pay .pigee-bkg-opt { margin-bottom: 0; }

/* ---- summary bar ---- */
.pigee-bkg-summary {
	background: var(--pb-soft);
	border-radius: 12px;
	padding: 12px 14px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 14px 0;
}
.pigee-bkg-summary .lbl { font-size: .8rem; color: var(--pb-mut); }
.pigee-bkg-summary .amt { font-size: 1.25rem; font-weight: 800; }

/* ---- buttons / nav ---- */
.pigee-bkg-nav {
	display: flex;
	gap: 10px;
	margin-top: 16px;
}
.pigee-bkg-btn {
	flex: 1;
	background: var(--pb);
	color: #fff;
	border: 0;
	border-radius: 12px;
	padding: 14px 16px;
	font-size: 1rem;
	font-weight: 700;
	cursor: pointer;
	transition: filter .15s, transform .05s;
}
.pigee-bkg-btn:hover { filter: brightness(1.06); }
.pigee-bkg-btn:active { transform: scale(.99); }
.pigee-bkg-btn[disabled] { opacity: .5; cursor: not-allowed; }
.pigee-bkg-btn--ghost {
	background: #fff;
	color: var(--pb-ink);
	border: 1px solid var(--pb-line);
}
.pigee-bkg-btn--sm { flex: none; padding: 10px 16px; font-size: .9rem; }

/* ---- result / states ---- */
.pigee-bkg-result { text-align: center; padding: 26px 14px; }
.pigee-bkg-result .tick {
	width: 64px; height: 64px;
	border-radius: 50%;
	background: var(--pb);
	color: #fff;
	display: flex; align-items: center; justify-content: center;
	font-size: 2rem;
	margin: 0 auto 16px;
}
.pigee-bkg-result.is-err .tick { background: #ef4444; }
.pigee-bkg-result h2 { margin: 0 0 6px; }
.pigee-bkg-result p { color: var(--pb-mut); }

/* ---- status / detail list (manage page) ---- */
.pigee-bkg-status {
	display: inline-block;
	font-size: .72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
	padding: 4px 10px;
	border-radius: 999px;
	margin-bottom: 8px;
}
.pigee-bkg-status--confirmed { background: #dcfce7; color: #166534; }
.pigee-bkg-status--pending   { background: #fef9c3; color: #854d0e; }
.pigee-bkg-status--cancelled { background: #fee2e2; color: #991b1b; }
.pigee-bkg-status--completed { background: #e0e7ff; color: #3730a3; }
.pigee-bkg-status--no_show   { background: #f3f4f6; color: #4b5563; }
.pigee-bkg-detail-list { list-style: none; padding: 0; margin: 14px 0; }
.pigee-bkg-detail-list li {
	display: flex;
	justify-content: space-between;
	padding: 9px 0;
	border-bottom: 1px solid var(--pb-line);
	font-size: .92rem;
}
.pigee-bkg-detail-list li:last-child { border-bottom: 0; }
.pigee-bkg-detail-list span { color: var(--pb-mut); }
.pigee-bkg-manage-actions { display: flex; gap: 10px; margin-top: 14px; }
.pigee-bkg-note { font-size: .85rem; color: var(--pb-mut); }

/* ---- misc ---- */
.pigee-bkg-poweredby {
	text-align: center;
	font-size: .74rem;
	color: var(--pb-mut);
	margin-top: 18px;
}
.pigee-bkg-poweredby::before { content: "\2727  "; }
.pigee-bkg-noscript { text-align: center; color: var(--pb-mut); padding: 30px; }
.pigee-bkg-error-msg {
	background: #fef2f2;
	border: 1px solid #fecaca;
	color: #991b1b;
	border-radius: 10px;
	padding: 10px 12px;
	font-size: .86rem;
	margin: 10px 0;
}

/* ---- loader ---- */
.pigee-bkg-loader { display: flex; gap: 6px; justify-content: center; padding: 50px 0; }
.pigee-bkg-loader span {
	width: 9px; height: 9px;
	border-radius: 50%;
	background: var(--pb);
	animation: pigee-bkg-bounce .6s infinite alternate;
}
.pigee-bkg-loader span:nth-child(2) { animation-delay: .2s; }
.pigee-bkg-loader span:nth-child(3) { animation-delay: .4s; }
@keyframes pigee-bkg-bounce { to { transform: translateY(-9px); opacity: .4; } }

/* ---- locked feature teaser (shown to lower tiers) ---- */
.pigee-bkg-locked {
	position: relative;
	border: 1px dashed var(--pb-line);
	border-radius: 12px;
	padding: 14px;
	margin-bottom: 10px;
	opacity: .75;
}
.pigee-bkg-locked::after {
	content: "\1F512";
	position: absolute;
	top: 10px; right: 12px;
}

@media (min-width: 600px) {
	.pigee-bkg-slots { grid-template-columns: repeat(4, 1fr); }
}

/* ── Month calendar ─────────────────────────────────────────── */
.pigee-bkg-cal-wrap {
	margin: 12px 0;
}
.pigee-bkg-cal-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 10px;
}
.pigee-bkg-cal-nav-title {
	font-weight: 700;
	font-size: 15px;
	color: var(--pigee-g, #1a2e1a);
}
.pigee-bkg-cal-nav-btn {
	background: none;
	border: 1.5px solid var(--pigee-line, #d8d0c4);
	border-radius: 8px;
	width: 34px; height: 34px;
	font-size: 20px;
	cursor: pointer;
	color: var(--pigee-g, #1a2e1a);
	display: flex; align-items: center; justify-content: center;
	transition: background .15s;
}
.pigee-bkg-cal-nav-btn:hover:not(:disabled) { background: var(--pigee-cream2, #f0ebe0); }
.pigee-bkg-cal-nav-btn:disabled { opacity: .3; cursor: default; }
.pigee-bkg-cal-grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 4px;
}
.pigee-bkg-cal-dow {
	text-align: center;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--pigee-muted, #8a8070);
	padding-bottom: 4px;
}
.pigee-bkg-cal-cell {
	aspect-ratio: 1;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	border: 2px solid transparent;
	transition: background .12s, border-color .12s;
	position: relative;
}
.pigee-bkg-cal-cell.pigee-bkg-cal-empty,
.pigee-bkg-cal-cell.is-closed {
	cursor: default;
	opacity: .3;
}
.pigee-bkg-cal-cell.is-closed .pigee-bkg-cal-dom { text-decoration: line-through; }
.pigee-bkg-cal-dom {
	font-size: 13px;
	font-weight: 600;
	color: var(--pigee-g, #1a2e1a);
	position: relative;
	z-index: 1;
}
/* Heat dot under the date number */
.pigee-bkg-cal-cell:not(.is-closed):not(.pigee-bkg-cal-empty)::after {
	content: '';
	position: absolute;
	bottom: 4px;
	left: 50%;
	transform: translateX(-50%);
	width: 5px; height: 5px;
	border-radius: 50%;
	background: var(--pigee-brand, #0f766e);
}
.pigee-bkg-cal-cell.heat-moderate::after { background: #f59e0b; }
.pigee-bkg-cal-cell.heat-busy::after    { background: #ef4444; }
.pigee-bkg-cal-cell.heat-premium::after { background: #8b5cf6; }
.pigee-bkg-cal-cell.heat-quiet::after   { background: var(--pigee-brand, #0f766e); }
.pigee-bkg-cal-cell:not(.is-closed):hover {
	background: var(--pigee-cream2, #f0ebe0);
}
.pigee-bkg-cal-cell.is-sel {
	border-color: var(--pigee-brand, #0f766e);
	background: var(--pigee-brand, #0f766e) !important;
}
.pigee-bkg-cal-cell.is-sel .pigee-bkg-cal-dom { color: #fff; }
.pigee-bkg-cal-cell.is-sel::after { background: rgba(255,255,255,.6); }

/* ── Surcharge tag on time slot ─────────────────────────────── */
.pigee-bkg-surcharge-tag {
	display: block;
	font-size: 10px;
	font-weight: 700;
	color: #92400e;
	background: #fef3c7;
	border-radius: 4px;
	padding: 1px 4px;
	margin-top: 2px;
	line-height: 1.4;
}
/* Surcharge summary rows */
.pigee-bkg-summary-row {
	display: flex;
	justify-content: space-between;
	padding: 4px 0;
	font-size: 14px;
}
.pigee-bkg-sur-label { color: #92400e; font-size: 13px; }
.pigee-bkg-sur-amt   { color: #92400e; font-weight: 600; }
.pigee-bkg-summary-total {
	border-top: 1.5px solid var(--pb-line, #e8e0d0);
	margin-top: 4px;
	padding-top: 8px;
	font-weight: 700;
	font-size: 16px;
}

/* ── Dark-mode safety: keep the booking widget readable ────────── */
@media (prefers-color-scheme: dark) {
	.pigee-bkg-app {
		background: #ffffff !important;
		color: #1d2129 !important;
	}
	.pigee-bkg-cal-dom { color: #1a2e1a !important; }
	.pigee-bkg-cal-cell { background: #ffffff; }
	.pigee-bkg-cal-cell:not(.is-closed):hover { background: #f0ebe0 !important; }
	.pigee-bkg-cal-dow { color: #6b7280 !important; }
	.pigee-bkg-card,
	.pigee-bkg-opt,
	.pigee-bkg-slot { background: #ffffff !important; color: #1d2129 !important; }
	.pigee-bkg-field input,
	.pigee-bkg-field textarea,
	.pigee-bkg-field select {
		background: #ffffff !important; color: #1d2129 !important;
	}
}

/* ── Mobile overflow fix for the calendar grid ─────────────────── */
@media (max-width: 380px) {
	.pigee-bkg-cal-grid { gap: 3px; }
	.pigee-bkg-cal-cell { border-width: 1.5px; }
	.pigee-bkg-cal-dom { font-size: 12px; }
	.pigee-bkg-app { padding-left: 10px; padding-right: 10px; }
}
.pigee-bkg-cal-grid { max-width: 100%; }
.pigee-bkg-slots {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
	gap: 8px;
}

/* VAT number on booking summary */
.pigee-bkg-vat-num {
	font-size: 11px;
	color: var(--pigee-muted, #8a8070);
	text-align: right;
	margin-top: 4px;
}

/* ── Add-on options on the booking form ─────────────────────── */
.pigee-bkg-addons { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.pigee-bkg-addon {
	display: flex; align-items: center; gap: 10px;
	padding: 10px 12px; border: 1.5px solid var(--pigee-line, #e5ddcf);
	border-radius: 10px; cursor: pointer;
}
.pigee-bkg-addon:hover { border-color: var(--pigee-brand, #0f766e); }
.pigee-bkg-addon input { width: 18px; height: 18px; flex-shrink: 0; }
.pigee-bkg-addon-info { flex: 1; }
.pigee-bkg-addon-name { font-weight: 600; font-size: 14px; }
.pigee-bkg-addon-meta { font-size: 12px; color: var(--pigee-muted, #8a8070); }
.pigee-bkg-addon-price { font-weight: 700; font-size: 14px; color: var(--pigee-brand, #0f766e); }

/* ---- Promo code field ------------------------------------------- */
.pigee-bkg-promo-msg { font-size: 13px; font-weight: 600; margin-top: 4px; min-height: 18px; }
.pigee-bkg-promo-msg.ok { color: #16a34a; }
.pigee-bkg-promo-msg.err { color: #dc2626; }
.pigee-bkg-discount-row .amt.pigee-bkg-discount-amt { color: #16a34a; font-weight: 700; }
.pigee-bkg-ok-msg { color: #16a34a; font-weight: 600; padding: 10px 0; }
.pigee-bkg-input { width: 100%; box-sizing: border-box; border: 1.5px solid var(--pb-line, #e3e9e8); border-radius: 10px; padding: 10px 13px; font-size: 14px; font-family: inherit; }
.pigee-bkg-btn--sm { flex: none; font-size: 13px; padding: 9px 14px; }

/* ---- Waitlist box ------------------------------------------------ */
.pigee-bkg-waitlist-box { background: var(--pb-surface, #fff); border: 1.5px solid var(--pb-line, #e5ddcf); border-radius: 12px; padding: 16px; margin-top: 12px; }
.pigee-bkg-waitlist-box .pigee-bkg-input { margin-top: 8px; }