/**
 * Pigee Booking — hosted portal chrome.
 *
 * Styles only the page shell (header, identity, theme toggle, footer) and
 * provides the light/dark theme variables. The booking widget itself is
 * styled by public.css; this file gives it an atmospheric frame.
 */

/* ---- Theme tokens ----------------------------------------------- */
.pigee-portal-body a { color: inherit; text-decoration: none; }
.pigee-portal-body a:hover { color: inherit; text-decoration: none; }

.pigee-portal-body {
	--pp-bg: #f4f7f6;
	--pp-surface: #ffffff;
	--pp-ink: #182624;
	--pp-mute: #6a7b79;
	--pp-line: #e3e9e8;
	--pp-brand: var(--pigee-brand, #0F766E);
	--pp-shadow: 0 18px 50px -28px rgba(15, 50, 46, .45);
	margin: 0;
	background: var(--pp-bg);
	color: var(--pp-ink);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	min-height: 100vh;
}
.pigee-portal-body[data-theme="dark"] {
	--pp-bg: #0e1716;
	--pp-surface: #16211f;
	--pp-ink: #eef3f2;
	--pp-mute: #8fa3a0;
	--pp-line: #25332f;
	--pp-shadow: 0 18px 50px -24px rgba(0, 0, 0, .7);
}

/* Atmospheric backdrop — a soft brand-tinted glow. */
.pigee-portal-body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background:
		radial-gradient( 60% 40% at 12% 0%, color-mix(in srgb, var(--pp-brand) 16%, transparent), transparent 70% ),
		radial-gradient( 50% 35% at 100% 10%, color-mix(in srgb, var(--pp-brand) 10%, transparent), transparent 70% );
}

/* ---- Splash (pre-mount) ----------------------------------------- */
.pigee-portal-splash {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* ---- Shell layout ----------------------------------------------- */
.pigee-portal {
	position: relative;
	z-index: 1;
	max-width: 560px;
	margin: 0 auto;
	padding: 28px 18px 48px;
	display: flex;
	flex-direction: column;
	gap: 18px;
	min-height: 100vh;
}

/* ---- Header ----------------------------------------------------- */
.pigee-portal-header {
	display: flex;
	align-items: center;
	gap: 14px;
}
.pigee-portal-brand {
	display: flex;
	align-items: center;
	gap: 13px;
	flex: 1;
	min-width: 0;
}
.pigee-portal-logo {
	width: 52px;
	height: 52px;
	border-radius: 13px;
	object-fit: cover;
	box-shadow: var(--pp-shadow);
}
.pigee-portal-mark {
	width: 52px;
	height: 52px;
	border-radius: 13px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
	font-weight: 800;
	color: #fff;
	background: linear-gradient( 145deg, var(--pp-brand), color-mix(in srgb, var(--pp-brand) 70%, #000) );
	box-shadow: var(--pp-shadow);
}
.pigee-portal-id { min-width: 0; }
.pigee-portal-name {
	margin: 0;
	font-size: 20px;
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.15;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--pp-ink);
}
.pigee-portal-tagline {
	margin: 2px 0 0;
	font-size: 13px;
	color: var(--pp-mute) !important;
}
.pigee-portal-theme {
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	border-radius: 11px;
	border: 1px solid var(--pp-line);
	background: var(--pp-surface);
	font-size: 17px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform .12s, border-color .12s;
}
.pigee-portal-theme:hover {
	transform: translateY(-1px);
	border-color: var(--pp-brand);
}

/* ---- Stage (booking widget host) -------------------------------- */
.pigee-portal-stage {
	background: var(--pp-surface);
	border: 1px solid var(--pp-line);
	border-radius: 18px;
	box-shadow: var(--pp-shadow);
	overflow: hidden;
}
.pigee-portal-stage .pigee-bkg-app {
	max-width: none;
	margin: 0;
	padding: 22px 20px;
}
/* Dark theme: re-tint the widget surfaces public.css drew light. */
.pigee-portal-body[data-theme="dark"] .pigee-bkg-app {
	color: var(--pp-ink);
}
.pigee-portal-body[data-theme="dark"] .pigee-bkg-card,
.pigee-portal-body[data-theme="dark"] .pigee-bkg-opt,
.pigee-portal-body[data-theme="dark"] .pigee-bkg-slot,
.pigee-portal-body[data-theme="dark"] .pigee-bkg-day {
	background: #1d2b28;
	border-color: var(--pp-line);
	color: var(--pp-ink);
}
.pigee-portal-body[data-theme="dark"] .pigee-bkg-field input,
.pigee-portal-body[data-theme="dark"] .pigee-bkg-field select,
.pigee-portal-body[data-theme="dark"] .pigee-bkg-field textarea {
	background: #1d2b28;
	border-color: var(--pp-line);
	color: var(--pp-ink);
}
.pigee-portal-body[data-theme="dark"] .pigee-bkg-sub,
.pigee-portal-body[data-theme="dark"] .pigee-bkg-note,
.pigee-portal-body[data-theme="dark"] .pigee-bkg-opt-meta {
	color: var(--pp-mute);
}

/* ---- Contact strip ---------------------------------------------- */
.pigee-portal-contact {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
	justify-content: center;
	font-size: 13px;
	color: var(--pp-mute);
}
.pigee-portal-contact-item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

/* ---- Footer ----------------------------------------------------- */
.pigee-portal-footer {
	margin-top: auto;
	text-align: center;
	font-size: 12px;
	color: var(--pp-mute);
	padding-top: 8px;
}
.pigee-portal-footer strong { color: var(--pp-brand); }

/* ---- Loader (shown in splash) ----------------------------------- */
.pigee-portal-splash .pigee-bkg-loader span {
	background: var(--pp-brand);
}

@media (min-width: 620px) {
	.pigee-portal { padding-top: 44px; }
	.pigee-portal-stage .pigee-bkg-app { padding: 28px 26px; }
}

/* ── Dark mode: month calendar ──────────────────────────────── */
.pigee-portal-body[data-theme="dark"] .pigee-bkg-cal-nav-title,
.pigee-portal-body[data-theme="dark"] .pigee-bkg-cal-dom {
	color: #e8e4da;
}
.pigee-portal-body[data-theme="dark"] .pigee-bkg-cal-dow {
	color: #9a9180;
}
.pigee-portal-body[data-theme="dark"] .pigee-bkg-cal-nav-btn {
	color: #e8e4da;
	border-color: #3a4a3a;
}
.pigee-portal-body[data-theme="dark"] .pigee-bkg-cal-nav-btn:hover:not(:disabled) {
	background: #2a3a2a;
}
.pigee-portal-body[data-theme="dark"] .pigee-bkg-cal-cell:not(.is-closed):hover {
	background: #2a3a2a;
}
.pigee-portal-body[data-theme="dark"] .pigee-bkg-cal-cell.is-sel .pigee-bkg-cal-dom {
	color: #fff;
}

/* Dark mode — ensure business name and tagline are always legible */
.pigee-portal-body[data-theme="dark"] .pigee-portal-name {
	color: var(--pp-ink) !important;
}
.pigee-portal-body[data-theme="dark"] .pigee-portal-tagline {
	color: var(--pp-mute) !important;
}
/* Light mode safety — dark text on light bg */
.pigee-portal-body:not([data-theme="dark"]) .pigee-portal-name {
	color: var(--pp-ink) !important;
}