/**
 * GoodMeet meeting page designs: shared parts.
 *
 * Every design sets these variables on its own root class; the brand colour
 * and button shape settings override --gm-accent, --gm-accent-ink and
 * --gm-radius inline.
 */
.gm {
	--gm-accent: #085df2;
	--gm-accent-ink: #fff;
	--gm-radius: 12px;
	--gm-ink: #0b1220;
	--gm-muted: #5b6475;
	--gm-line: #e3e8f1;
	--gm-surface: #fff;
	--gm-soft: #f4f7fb;
	--gm-accent-soft: color-mix(in srgb, var(--gm-accent) 12%, #fff);
	box-sizing: border-box;
	color: var(--gm-ink);
	font-size: 15px;
	line-height: 1.55;
	text-align: left;
	-webkit-font-smoothing: antialiased;
}

.goodmeet-wrapper.gm {
	text-align: left;
}

.gm *,
.gm *::before,
.gm *::after {
	box-sizing: border-box;
}

.gm .gm-icon {
	width: 16px;
	height: 16px;
	flex: none;
}

.gm .gm-muted {
	color: var(--gm-muted);
}

.gm .gm-title {
	margin: 0;
	color: var(--gm-ink);
	text-wrap: balance;
}

/* Buttons */
.gm .gm-btn,
.gm a.gm-btn,
.gm button.gm-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 46px;
	margin: 0;
	padding: 0 20px;
	border: 0;
	border-radius: var(--gm-radius);
	background: var(--gm-accent);
	box-shadow: 0 10px 20px -12px color-mix(in srgb, var(--gm-accent) 90%, transparent);
	color: var(--gm-accent-ink);
	font: inherit;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: normal;
	text-align: center;
	text-decoration: none;
	text-transform: none;
	cursor: pointer;
	transition: filter 0.15s, background-color 0.15s;
}

.gm .gm-btn:hover,
.gm .gm-btn:focus {
	color: var(--gm-accent-ink);
	filter: brightness(1.07);
	text-decoration: none;
}

.gm .gm-btn:focus-visible {
	outline: 2px solid var(--gm-accent);
	outline-offset: 3px;
}

.gm .gm-btn.gm-btn-ghost {
	background: transparent;
	box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--gm-accent) 35%, transparent);
	color: var(--gm-accent);
}

.gm .gm-btn.gm-btn-ghost:hover {
	background: var(--gm-accent-soft);
	color: var(--gm-accent);
	filter: none;
}

.gm .gm-btn-wide {
	display: flex;
	width: 100%;
}

.gm .gm-btn.gm-btn-sm {
	min-height: 38px;
	padding: 0 14px;
	font-size: 13.5px;
}

/* Countdown */
.gm .gm-countdown {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 8px;
	font-variant-numeric: tabular-nums;
}

.gm .gm-unit {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding: 14px 4px;
	border-radius: 14px;
	background: var(--gm-surface);
	box-shadow: 0 0 0 1px var(--gm-line);
}

.gm .gm-num {
	color: var(--gm-accent);
	font-size: 30px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.02em;
}

.gm .gm-lbl {
	color: var(--gm-muted);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.gm .gm-state {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 16px 18px;
	border-radius: 14px;
	background: var(--gm-surface);
	box-shadow: 0 0 0 1px var(--gm-line);
}

.gm .gm-state b {
	font-size: 16px;
}

.gm .gm-state span {
	color: var(--gm-muted);
	font-size: 13.5px;
}

.gm .gm-live {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.gm .gm-live i {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: #e5484d;
	box-shadow: 0 0 0 0 rgba(229, 72, 77, 0.55);
	animation: gm-pulse 2s infinite;
}

@keyframes gm-pulse {
	70% {
		box-shadow: 0 0 0 8px rgba(229, 72, 77, 0);
	}
	100% {
		box-shadow: 0 0 0 0 rgba(229, 72, 77, 0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.gm .gm-live i {
		animation: none;
	}
}

/* Action */
.gm .gm-action {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.gm .gm-action-title {
	margin: 0;
	font-size: 16px;
	font-weight: 700;
}

.gm .gm-action p {
	margin: 0;
}

.gm .gm-linkrow {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 40px;
	padding: 0 6px 0 12px;
	border-radius: calc(var(--gm-radius) - 2px);
	background: var(--gm-soft);
	color: var(--gm-muted);
	font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
	font-size: 12.5px;
}

.gm .gm-linkrow span {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.gm .gm-copy {
	margin: 0;
	padding: 5px 10px;
	border: 0;
	border-radius: 6px;
	background: var(--gm-surface);
	box-shadow: 0 0 0 1px var(--gm-line);
	color: var(--gm-ink);
	font: inherit;
	font-size: 12px;
	cursor: pointer;
}

.gm .gm-copy:focus-visible {
	outline: 2px solid var(--gm-accent);
}

.gm .gm-register {
	text-align: left;
}

/*
 * Sign in / register form (rendered by an add-on into .gm-register).
 * Resets the legacy boxed form and other plugins' flex rows: labels sit
 * above 44px inputs, the primary button takes the design's accent.
 */
.gm .gm-register .goodmeet-meeting-section {
	margin: 0;
	padding: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	text-align: left;
}

.gm .gm-register .goodmeet-meeting-section-title {
	margin: 0 0 14px;
	color: var(--gm-ink);
	font-family: inherit;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.35;
}

.gm .gm-register .goodmeet-meeting-form-wrapper {
	display: flex;
	flex-direction: column;
	gap: 18px;
	max-width: none;
	margin: 0;
}

.gm .gm-register .goodmeet-meeting-form {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin: 0;
}

.gm .gm-register .goodmeet-form-group {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 6px;
	margin: 0;
}

.gm .gm-register .goodmeet-form-label {
	display: block;
	/* Beats the shared form stylesheet's "width: 30% !important" label column. */
	width: 100% !important;
	margin: 0;
	color: var(--gm-ink);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
	text-align: left;
}

.gm .gm-register .goodmeet-input-wrapper {
	width: 100%;
}

.gm .gm-register .goodmeet-form-input {
	display: block;
	width: 100%;
	min-height: 44px;
	margin: 0;
	padding: 0 14px;
	border: 1px solid color-mix(in srgb, var(--gm-ink) 28%, transparent);
	border-radius: 10px;
	background: var(--gm-surface);
	box-shadow: none;
	color: var(--gm-ink);
	font: inherit;
	font-size: 16px;
	line-height: 1.3;
	transition: border-color 0.15s, box-shadow 0.15s;
}

.gm .gm-register .goodmeet-form-input::placeholder {
	color: var(--gm-muted);
	opacity: 1;
}

.gm .gm-register .goodmeet-form-input:focus {
	border-color: var(--gm-accent);
	outline: none;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--gm-accent) 28%, transparent);
}

.gm .gm-register .goodmeet-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 46px;
	margin: 0;
	padding: 0 18px;
	border: 0;
	border-radius: var(--gm-radius);
	font: inherit;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	text-transform: none;
	cursor: pointer;
	transition: filter 0.15s, background-color 0.15s;
}

.gm .gm-register .goodmeet-btn-primary {
	background: var(--gm-accent);
	box-shadow: 0 10px 20px -12px color-mix(in srgb, var(--gm-accent) 90%, transparent);
	color: var(--gm-accent-ink);
}

.gm .gm-register .goodmeet-btn-primary:hover {
	background: var(--gm-accent);
	color: var(--gm-accent-ink);
	filter: brightness(0.93);
}

.gm .gm-register .goodmeet-btn-secondary {
	background: transparent;
	box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--gm-accent) 45%, transparent);
	color: var(--gm-accent);
}

.gm .gm-register .goodmeet-btn-secondary:hover {
	background: var(--gm-accent-soft);
	color: var(--gm-accent);
}

.gm .gm-register .goodmeet-btn:focus-visible {
	outline: 2px solid var(--gm-accent);
	outline-offset: 2px;
}

.gm .gm-register .goodmeet-separator {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	color: var(--gm-muted);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.gm .gm-register .goodmeet-separator::before,
.gm .gm-register .goodmeet-separator::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--gm-line);
}

/*
 * Messages the sign-in and register scripts print: one per field under its
 * input, and one at the top of a form. The top ones share the box the page's
 * own sign-in error uses, in red for a problem and green for success, and
 * reset the legacy stylesheet's centred 16px text.
 */
.gm .gm-register .error-message,
.gm .gm-register .goodmeet-form-error-message.top,
.gm .gm-register .goodmeet-form_success-message {
	margin: 0;
	padding: 10px 12px;
	border-radius: 10px;
	background: #fef3f2;
	color: #b42318;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	text-align: left;
}

.gm .gm-register .goodmeet-form_success-message {
	background: #ecfdf3;
	color: #067647;
}

.gm .gm-register .goodmeet-form-error-message:not(.top) {
	margin: 6px 0 0;
	color: #b42318;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.4;
	text-align: left;
}

.gm .gm-register .goodmeet-form-input[aria-invalid="true"] {
	border-color: #d92d20;
}

/* Host control (overrides the legacy green button) */
.gm .gm-host {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 12px;
	border-radius: min(var(--gm-radius), 14px);
	background: #fff8eb;
	box-shadow: inset 0 0 0 1px #f8dfae;
	color: #8a5300;
	font-size: 12.5px;
}

.gm .gm-host p {
	margin: 0;
}

.gm .gm-btn.goodmeet-meeting-status {
	background: #0b1220;
	box-shadow: none;
	color: #fff;
}

.gm .gm-btn.goodmeet-meeting-status.gm-btn-ghost {
	background: transparent;
	box-shadow: inset 0 0 0 1.5px #0b1220;
	color: #0b1220;
}

/* Buy button (overrides the legacy orange link) */
.gm a.gm-btn.goodmeet-buy-button {
	margin: 0;
	padding: 0 20px;
	background: transparent;
	color: var(--gm-accent);
}

/* Details */
.gm .gm-details {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	margin: 0;
	font-size: 14px;
}

.gm .gm-details dt,
.gm .gm-details dd {
	margin: 0;
	padding: 9px 0;
	border-top: 1px solid var(--gm-line);
}

.gm .gm-details dt:first-of-type,
.gm .gm-details dd:first-of-type {
	border-top: 0;
}

.gm .gm-details dt {
	padding-right: 16px;
	color: var(--gm-muted);
	font-weight: 400;
}

.gm .gm-details dd {
	font-weight: 600;
	text-align: right;
	font-variant-numeric: tabular-nums;
}

/* Agenda */
.gm .gm-agenda {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	list-style: none;
}

.gm .gm-agenda li {
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr);
	gap: 12px;
	margin: 0;
	padding: 11px 0;
	border-top: 1px solid var(--gm-line);
}

.gm .gm-agenda li:first-child {
	border-top: 0;
}

.gm .gm-agenda-time {
	padding-top: 2px;
	color: var(--gm-accent);
	font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
	font-size: 12.5px;
	font-variant-numeric: tabular-nums;
}

/* Summary + thumbnail */
.gm .gm-summary {
	max-width: 68ch;
	color: color-mix(in srgb, var(--gm-ink) 80%, transparent);
	line-height: 1.7;
}

.gm .gm-summary > :first-child {
	margin-top: 0;
}

.gm .gm-summary > :last-child {
	margin-bottom: 0;
}

/*
 * Rich description content. The Description field is the WordPress editor,
 * so a summary can hold headings, lists, quotes, images and code. Sizes are
 * relative so each design's own font and size carry through; colours come
 * from the design's ink and accent.
 */
.gm .gm-summary p {
	margin: 0 0 0.9em;
}

.gm .gm-summary :is(h1, h2, h3, h4, h5, h6) {
	margin: 1.4em 0 0.5em;
	color: var(--gm-ink);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.01em;
}

.gm .gm-summary h1 { font-size: 1.6em; }
.gm .gm-summary h2 { font-size: 1.35em; }
.gm .gm-summary h3 { font-size: 1.15em; }
.gm .gm-summary :is(h4, h5, h6) { font-size: 1em; }

.gm .gm-summary :is(ul, ol) {
	margin: 0 0 1em;
	padding-left: 1.4em;
	text-align: left;
}

.gm .gm-summary li {
	margin: 0.3em 0;
	padding-left: 0.2em;
}

.gm .gm-summary li::marker {
	color: var(--gm-accent);
}

.gm .gm-summary :is(strong, b) {
	color: var(--gm-ink);
	font-weight: 650;
}

.gm .gm-summary a {
	color: var(--gm-accent);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.gm .gm-summary a:hover {
	text-decoration-thickness: 2px;
}

.gm .gm-summary blockquote {
	margin: 1.2em 0;
	padding: 0.2em 0 0.2em 1em;
	border-left: 3px solid var(--gm-accent);
	color: var(--gm-ink);
	font-style: italic;
	text-align: left;
}

.gm .gm-summary blockquote p:last-child {
	margin-bottom: 0;
}

.gm .gm-summary pre,
.gm .gm-summary code {
	font-family: ui-monospace, SFMono-Regular, Consolas, Menlo, monospace;
	font-size: 0.88em;
}

.gm .gm-summary pre {
	margin: 0 0 1em;
	padding: 12px 14px;
	overflow-x: auto;
	border-radius: min(var(--gm-radius, 12px), 12px);
	background: color-mix(in srgb, var(--gm-ink) 6%, transparent);
	white-space: pre-wrap;
	text-align: left;
}

.gm .gm-summary hr {
	margin: 1.5em 0;
	border: 0;
	border-top: 1px solid color-mix(in srgb, var(--gm-ink) 14%, transparent);
}

.gm .gm-summary img {
	max-width: 100%;
	height: auto;
	border-radius: min(var(--gm-radius, 12px), 12px);
}

.gm .gm-summary :is(img, figure).aligncenter {
	display: block;
	margin: 1em auto;
}

.gm .gm-summary :is(img, figure).alignleft {
	float: left;
	margin: 0.3em 1.2em 0.8em 0;
}

.gm .gm-summary :is(img, figure).alignright {
	float: right;
	margin: 0.3em 0 0.8em 1.2em;
}

.gm .gm-summary::after {
	content: "";
	display: table;
	clear: both;
}


.gm .gm-thumb {
	overflow: hidden;
	border-radius: 18px;
}

.gm .gm-thumb img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
}

/* Small shared bits */
.gm .gm-chip {
	display: inline-flex;
	align-self: flex-start;
	align-items: center;
	gap: 6px;
	min-height: 28px;
	padding: 0 12px;
	border-radius: 999px;
	background: var(--gm-accent-soft);
	color: var(--gm-accent);
	font-size: 12.5px;
	font-weight: 700;
}

.gm .gm-label {
	display: block;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--gm-line);
	color: var(--gm-muted);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.gm .gm-block {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.gm .gm-person {
	display: flex;
	align-items: center;
	gap: 12px;
}

.gm .gm-avatar {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	object-fit: cover;
}

/* Phones: designs paint their own page background, so run it edge to edge
   instead of stopping at the site theme's container padding. */
@media (max-width: 600px) {
	.gm[class*="gm-theme-"] {
		width: 100vw;
		max-width: 100vw;
		margin-left: calc(50% - 50vw);
		margin-right: calc(50% - 50vw);
	}
}

/* Customization: sidebar on the left */
.gm.gm-flip .gm-flip-grid,
.gm.gm-flip .gm-paper-grid {
	direction: rtl;
}

.gm.gm-flip .gm-flip-grid > *,
.gm.gm-flip .gm-paper-grid > * {
	direction: ltr;
}

/* Pro's "Add to Google Calendar" widget, restyled to sit inside a design */
.gm .goodmeet-single-widget-add-calendar {
	margin: 0;
	overflow: visible;
	border: 0;
	border-radius: 0;
	background: transparent;
}

.gm .goodmeet-single-widget-add-calendar .goodmeet-widget-title {
	display: none;
}

.gm .goodmeet-single-widget-add-calendar .calander-btn-wrapper {
	padding: 0;
}

.gm a.goodmeet-add-to-calendar-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 42px;
	padding: 0 16px;
	border: 0;
	border-radius: min(var(--gm-radius), 12px);
	background: transparent;
	box-shadow: inset 0 0 0 1.5px var(--gm-line);
	color: var(--gm-ink);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
}

.gm a.goodmeet-add-to-calendar-btn:hover {
	background: var(--gm-soft);
	color: var(--gm-ink);
}

.gm a.goodmeet-add-to-calendar-btn svg {
	width: 22px;
	height: 22px;
}

.gm a.goodmeet-add-to-calendar-btn > :not(svg) {
	margin: 0;
	color: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
}