/* ==========================================================================
   Portal theme tokens — the --gs-color-* aliases read by the shared plugin
   panels (pickup arrival, order events, service orders, luggage, visitor).
   Defined once for every theme-aware portal wrapper. The light block flips on
   data-theme="light", which ProviderPortal::theme_bootstrap_script() stamps on
   the wrapper. The --lw-* palette they read is supplied by each portal.
   ========================================================================== */

:is(.mphb-gs-provider-portal, .mphb-gs-manager-portal, .mphb-gs-owner-portal) {
	--gs-color-surface:  var(--lw-card-bg, var(--lw-navy));
	--gs-color-text:     var(--lw-white);
	--gs-color-muted:    var(--lw-white-70);
	--gs-color-muted-bg: var(--lw-white-08);
	--gs-color-border:   var(--lw-card-border, var(--lw-white-10));

	/* Typography floor: 12 px for chrome, 13 px for operational text. */
	--mgr-text-xs: .75rem;
	--mgr-text-sm: .8125rem;

	/* Semantic tokens: each -bg is a translucent band of its hue, and every
	 * text token keeps at least 4.5:1 on its band and on the card surface. */
	--gs-color-primary:     #d4bb93;
	--gs-color-primary-bg:  rgba(212, 187, 147, 0.16);
	--gs-color-on-primary:  #0f1e2e;
	--gs-color-warning:     #fcd34d;
	--gs-color-warning-bg:  rgba(252, 211, 77, 0.16);
	--gs-color-info:        #93c5fd;
	--gs-color-info-bg:     rgba(147, 197, 253, 0.16);
	--gs-color-success:     #86efac;
	--gs-color-success-bg:  rgba(134, 239, 172, 0.16);
	--gs-color-error:       #fca5a5;
	--gs-color-error-bg:    rgba(252, 165, 165, 0.16);
	--gs-color-surface-alt: var(--lw-white-08);
	--gs-color-shadow:      rgba(0, 0, 0, 0.35);
}

:is(.mphb-gs-provider-portal, .mphb-gs-manager-portal, .mphb-gs-owner-portal)[data-theme="light"] {
	--gs-color-primary:     #6b5a42;
	--gs-color-primary-bg:  rgba(107, 90, 66, 0.12);
	--gs-color-on-primary:  #ffffff;
	--gs-color-warning:     #92400e;
	--gs-color-warning-bg:  rgba(245, 158, 11, 0.18);
	--gs-color-info:        #1e40af;
	--gs-color-info-bg:     rgba(37, 99, 235, 0.12);
	--gs-color-success:     #166534;
	--gs-color-success-bg:  rgba(22, 163, 74, 0.14);
	--gs-color-error:       #991b1b;
	--gs-color-error-bg:    rgba(220, 38, 38, 0.12);
	--gs-color-surface-alt: var(--lw-white-08);
	--gs-color-shadow:      rgba(0, 0, 0, 0.08);
}

/* Guest billing tip controls. */
.mphb-gs-shell .gs-billing-tip {
	margin-block: var(--gs-space-lg, 16px);
	padding: var(--gs-space-lg, 16px);
	border: 1px solid var(--gs-color-border, #e5e7eb);
	border-radius: var(--gs-radius-md, 10px);
	background: var(--gs-color-surface-alt, #f9fafb);
	color: var(--gs-color-text, #0f172a);
}

.mphb-gs-shell .gs-billing-tip-panel[hidden],
.mphb-gs-shell .gs-billing-tip__reveal[hidden] {
	display: none;
}

.mphb-gs-shell .gs-billing-tip__reveal {
	margin-block: var(--gs-space-lg, 16px);
}

.mphb-gs-shell .gs-billing-tip__title {
	margin-block: 0 var(--gs-space-lg, 16px);
	font-size: 1rem;
	font-weight: 700;
	color: inherit;
}

.mphb-gs-shell .gs-billing-tip__controls,
.mphb-gs-shell .gs-billing-tip__presets {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--gs-space-sm, 8px);
}

/* The free amount wraps under the chips on phones: keep the rows apart. */
.mphb-gs-shell .gs-billing-tip__controls {
	row-gap: var(--gs-space-lg, 16px);
}

.mphb-gs-shell button.gs-billing-tip__chip {
	min-block-size: 42px;
	padding-block: var(--gs-space-sm, 8px);
	padding-inline: var(--gs-space-md, 12px);
	border: 1px solid var(--gs-color-border, #e5e7eb);
	border-radius: 999px;
	background: var(--gs-color-surface, #ffffff);
	box-shadow: none;
	color: var(--gs-color-text, #0f172a);
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}

.mphb-gs-shell button.gs-billing-tip__chip:is(:hover, :focus-visible),
.mphb-gs-shell button.gs-billing-tip__chip.is-selected {
	border-color: var(--gs-color-primary, #c49a3a);
	background: var(--gs-color-primary-light, #f0e6d2);
	color: var(--gs-color-primary-dark, #6b521f);
}

.mphb-gs-shell button.gs-billing-tip__chip:focus-visible,
.mphb-gs-shell .gs-billing-tip__input:focus-visible {
	outline: 2px solid var(--gs-color-border-focus, #9e7b2e);
	outline-offset: 2px;
}

.mphb-gs-shell .gs-billing-tip__free {
	display: inline-flex;
	flex: 0 1 8rem;
}

.mphb-gs-shell .gs-billing-tip__input {
	inline-size: 100%;
	min-block-size: 42px;
	padding-block: var(--gs-space-sm, 8px);
	padding-inline: var(--gs-space-md, 12px);
	border: 1px solid var(--gs-color-border, #e5e7eb);
	border-radius: var(--gs-radius-sm, 6px);
	background: var(--gs-color-surface, #ffffff);
	color: var(--gs-color-text, #0f172a);
	font: inherit;
}

.mphb-gs-shell .gs-billing-tip__message {
	margin-block: var(--gs-space-lg, 16px) 0;
	color: var(--gs-color-text-muted, #64748b);
	font-size: 0.875rem;
	line-height: 1.5;
}

.mphb-gs-shell[data-theme="light"] .gs-billing-tip {
	border-color: var(--gs-color-border, #e5e7eb);
	background: var(--gs-color-surface-alt, #f9fafb);
	color: var(--gs-color-text, #0f172a);
}

.mphb-gs-shell[data-theme="dark"] .gs-billing-tip {
	border-color: rgba(255, 255, 255, 0.18);
	background: rgba(255, 255, 255, 0.06);
	color: var(--gs-color-text, #f8fafc);
}

.mphb-gs-shell[data-theme="dark"] button.gs-billing-tip__chip,
.mphb-gs-shell[data-theme="dark"] .gs-billing-tip__input {
	border-color: rgba(255, 255, 255, 0.22);
	background: rgba(255, 255, 255, 0.08);
	color: var(--gs-color-text, #f8fafc);
}

.mphb-gs-shell[data-theme="dark"] button.gs-billing-tip__chip:is(:hover, :focus-visible),
.mphb-gs-shell[data-theme="dark"] button.gs-billing-tip__chip.is-selected {
	border-color: var(--gs-color-primary, #d4bb93);
	background: rgba(212, 187, 147, 0.2);
	color: #f8fafc;
}

.mphb-gs-shell[data-theme="dark"] .gs-billing-tip__message {
	color: var(--gs-color-text-muted, #cbd5e1);
}

/* Balance + tip breakdown under each pay button: a caption of that button, not glued to it. */
.mphb-gs-shell .gs-billing-pay-cta__breakdown {
	margin: var(--gs-space-sm, 8px) 0 0;
	color: var(--gs-color-text-muted, #64748b);
	font-size: 0.8125rem;
	font-variant-numeric: tabular-nums;
	text-align: center;
}

.mphb-gs-shell .gs-billing-pay-cta__breakdown[hidden] {
	display: none;
}

.mphb-gs-shell[data-theme="dark"] .gs-billing-pay-cta__breakdown {
	color: var(--gs-color-text-muted, #cbd5e1);
}

/* The breakdown sits between the pay button and the toggle: keep the same gap. */
.mphb-gs-shell .gs-billing-pay-cta__breakdown + .gs-billing-pay-cta__toggle-wrap {
	margin-block-start: var(--gs-space-md, 12px);
}

.mphb-gs-shell .gs-services-pay-cta--partial:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}