/**
 * FG Booking - front-end styles.
 *
 * The five brand colours are exposed as custom properties on .fgb-app so a
 * theme (or Xtool's own Custom CSS control) can re-point any of them for
 * one page without touching this file.
 *
 * --fg-alert is NOT one of the five supplied colours: it is derived. The
 * brand palette is entirely warm earth tones with no negative hue, and a
 * "cancelled" / "no-show" state genuinely needs to read as negative rather
 * than as just another tan badge. It is tuned to sit in the same family.
 */

.fgb-app {
	--fg-cafe-noir: #4C3D19;
	--fg-kombu-green: #354024;
	--fg-moss-green: #889063;
	--fg-tan: #CFBB99;
	--fg-bone: #E5D7C4;
	--fg-alert: #9C5A3C;
	--fg-white: #FFFDF9;

	--fg-radius: 12px;
	--fg-gap: 16px;
	--fg-shadow: 0 2px 10px rgba(53, 64, 36, .08);

	color: var(--fg-cafe-noir);
	font-size: 16px;
	line-height: 1.6;
	max-width: 900px;
	margin-inline: auto;
	box-sizing: border-box;
}

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

/* ---------- typography ---------- */

.fgb-h2 { font-size: 1.35rem; margin: 0 0 8px; color: var(--fg-kombu-green); }
.fgb-h3 { font-size: 1.05rem; margin: 24px 0 8px; color: var(--fg-kombu-green); }
.fgb-hint { font-size: .875rem; color: var(--fg-moss-green); margin: 6px 0; }
.fgb-empty { color: var(--fg-moss-green); text-align: center; padding: 24px 0; margin: 0; }
.fgb-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 700; letter-spacing: .06em; }

/* ---------- surfaces ---------- */

.fgb-card {
	background: var(--fg-white);
	border: 1px solid var(--fg-tan);
	border-radius: var(--fg-radius);
	padding: 20px;
	margin-bottom: var(--fg-gap);
	box-shadow: var(--fg-shadow);
}

.fgb-notice {
	border-radius: var(--fg-radius);
	padding: 12px 16px;
	margin-bottom: var(--fg-gap);
	font-size: .925rem;
	border: 1px solid transparent;
}
.fgb-notice--error { background: #F6E6DE; border-color: var(--fg-alert); color: #6E3B23; }
.fgb-notice--success { background: var(--fg-bone); border-color: var(--fg-moss-green); color: var(--fg-kombu-green); }
.fgb-notice--warning { background: var(--fg-tan); border-color: var(--fg-cafe-noir); color: var(--fg-cafe-noir); }

/* ---------- forms ---------- */

.fgb-label { display: block; margin-bottom: 14px; font-weight: 600; font-size: .9rem; color: var(--fg-kombu-green); }

.fgb-input {
	display: block;
	width: 100%;
	margin-top: 6px;
	padding: 11px 13px;
	font: inherit;
	font-weight: 400;
	color: var(--fg-cafe-noir);
	background: var(--fg-white);
	border: 1px solid var(--fg-tan);
	border-radius: 8px;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.fgb-input:focus {
	outline: none;
	border-color: var(--fg-moss-green);
	box-shadow: 0 0 0 3px rgba(136, 144, 99, .22);
}
textarea.fgb-input { resize: vertical; min-height: 90px; }
.fgb-input--file { padding: 9px; background: var(--fg-bone); }

.fgb-check { display: flex; gap: 8px; align-items: flex-start; font-size: .9rem; margin-bottom: 14px; }
.fgb-check input { margin-top: 4px; flex: 0 0 auto; }
.fgb-check--boxed {
	background: var(--fg-bone);
	border: 1px solid var(--fg-tan);
	border-radius: 8px;
	padding: 12px 14px;
	margin-top: 14px;
}
.fgb-check--boxed small { display: block; color: var(--fg-moss-green); font-weight: 400; }

/* ---------- buttons ---------- */

.fgb-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 22px;
	font: inherit;
	font-weight: 600;
	line-height: 1.2;
	border-radius: 999px;
	border: 1px solid transparent;
	cursor: pointer;
	text-decoration: none;
	transition: background-color .15s ease, color .15s ease, transform .1s ease;
}
.fgb-btn:active { transform: translateY(1px); }
.fgb-btn:disabled { opacity: .55; cursor: not-allowed; }

.fgb-btn--primary { background: var(--fg-kombu-green); color: var(--fg-bone); }
.fgb-btn--primary:hover:not(:disabled) { background: var(--fg-cafe-noir); color: var(--fg-bone); }

.fgb-btn--ghost { background: transparent; color: var(--fg-kombu-green); border-color: var(--fg-tan); }
.fgb-btn--ghost:hover { background: var(--fg-bone); }

.fgb-btn.is-loading { position: relative; color: transparent; }
.fgb-btn.is-loading::after {
	content: "";
	position: absolute;
	width: 16px; height: 16px;
	border: 2px solid var(--fg-bone);
	border-top-color: transparent;
	border-radius: 50%;
	animation: fgb-spin .7s linear infinite;
}
@keyframes fgb-spin { to { transform: rotate(360deg); } }

.fgb-linkbtn {
	background: none; border: 0; padding: 6px 0;
	font: inherit; font-size: .875rem;
	color: var(--fg-moss-green);
	text-decoration: underline;
	cursor: pointer;
	display: block;
}

/* ---------- step indicator ---------- */

.fgb-steps {
	display: flex;
	gap: 4px;
	list-style: none;
	margin: 0 0 24px;
	padding: 0;
	overflow-x: auto;
	scrollbar-width: none;
}
.fgb-steps::-webkit-scrollbar { display: none; }

.fgb-steps__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	flex: 1 0 auto;
	min-width: 72px;
	opacity: .5;
	transition: opacity .2s ease;
}
.fgb-steps__item.is-active,
.fgb-steps__item.is-done { opacity: 1; }

.fgb-steps__num {
	width: 30px; height: 30px;
	display: grid; place-items: center;
	border-radius: 50%;
	background: var(--fg-bone);
	color: var(--fg-cafe-noir);
	font-size: .8rem; font-weight: 700;
	border: 1px solid var(--fg-tan);
}
.fgb-steps__item.is-active .fgb-steps__num { background: var(--fg-kombu-green); color: var(--fg-bone); border-color: var(--fg-kombu-green); }
.fgb-steps__item.is-done .fgb-steps__num { background: var(--fg-moss-green); color: var(--fg-white); border-color: var(--fg-moss-green); }
.fgb-steps__label { font-size: .7rem; text-align: center; color: var(--fg-moss-green); }

/* ---------- wizard ---------- */

.fgb-wizard {
	background: var(--fg-white);
	border: 1px solid var(--fg-tan);
	border-radius: var(--fg-radius);
	padding: 22px;
	box-shadow: var(--fg-shadow);
}

.fgb-step { display: none; }
.fgb-step.is-active { display: block; animation: fgb-fade .25s ease; }
@keyframes fgb-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.fgb-step__title { font-size: 1.2rem; margin: 0 0 4px; color: var(--fg-kombu-green); }
.fgb-step__sub { font-size: .875rem; color: var(--fg-moss-green); margin: 0 0 16px; }
.fgb-step__error {
	margin-top: 12px;
	padding: 10px 14px;
	border-radius: 8px;
	background: #F6E6DE;
	color: #6E3B23;
	font-size: .875rem;
}

.fgb-wizard__nav {
	display: flex;
	gap: 10px;
	justify-content: flex-end;
	margin-top: 24px;
	padding-top: 18px;
	border-top: 1px solid var(--fg-bone);
}
.fgb-wizard__nav [data-fgb-prev] { margin-right: auto; }

/* ---------- choice cards ---------- */

.fgb-choices {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	gap: 12px;
}

.fgb-choice {
	display: flex;
	flex-direction: column;
	text-align: left;
	padding: 0;
	overflow: hidden;
	background: var(--fg-white);
	border: 2px solid var(--fg-tan);
	border-radius: var(--fg-radius);
	cursor: pointer;
	font: inherit;
	color: inherit;
	transition: border-color .15s ease, transform .1s ease, box-shadow .15s ease;
}
.fgb-choice:hover { border-color: var(--fg-moss-green); transform: translateY(-2px); box-shadow: var(--fg-shadow); }
.fgb-choice.is-selected { border-color: var(--fg-kombu-green); background: var(--fg-bone); }
.fgb-choice[hidden] { display: none; }

.fgb-choice__img { display: block; width: 100%; aspect-ratio: 4 / 3; background: var(--fg-bone) center/cover no-repeat; }
.fgb-choice__body { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; }
.fgb-choice__title { font-weight: 700; color: var(--fg-kombu-green); }
.fgb-choice__meta { font-size: .8rem; color: var(--fg-moss-green); }
.fgb-choice__price { font-weight: 700; color: var(--fg-cafe-noir); margin-top: 4px; }
.fgb-choice__price small { font-weight: 400; color: var(--fg-moss-green); }

.fgb-choices--theme { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }

/* ---------- time slots ---------- */

.fgb-slots {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
	gap: 8px;
}
.fgb-slots .fgb-hint { grid-column: 1 / -1; }

.fgb-slot {
	padding: 11px 6px;
	font: inherit;
	font-weight: 600;
	color: var(--fg-cafe-noir);
	background: var(--fg-white);
	border: 2px solid var(--fg-tan);
	border-radius: 8px;
	cursor: pointer;
	transition: border-color .15s ease, background-color .15s ease;
}
.fgb-slot:hover { border-color: var(--fg-moss-green); }
.fgb-slot.is-selected { background: var(--fg-kombu-green); border-color: var(--fg-kombu-green); color: var(--fg-bone); }

/* ---------- coupon ---------- */

.fgb-coupon { display: flex; gap: 10px; align-items: stretch; }
.fgb-coupon .fgb-input { margin-top: 0; text-transform: uppercase; }
.fgb-coupon__msg { font-size: .875rem; margin: 10px 0 0; min-height: 1.4em; }
.fgb-coupon__msg.is-ok { color: var(--fg-kombu-green); font-weight: 600; }
.fgb-coupon__msg.is-error { color: var(--fg-alert); }

/* ---------- payment + summary ---------- */

.fgb-summary {
	background: var(--fg-bone);
	border-radius: var(--fg-radius);
	padding: 16px 18px;
	margin-bottom: 20px;
}
.fgb-summary__discount { color: var(--fg-kombu-green); font-size: .9rem; margin-top: 8px; }
.fgb-summary__total {
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid var(--fg-tan);
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--fg-kombu-green);
}

.fgb-pay { background: var(--fg-bone); border-radius: var(--fg-radius); padding: 16px 18px; }
.fgb-pay__grid { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: start; }
.fgb-pay__qr img { display: block; width: 150px; height: auto; border-radius: 8px; background: var(--fg-white); }

.fgb-terms {
	margin-top: 18px;
	padding: 14px 16px;
	background: var(--fg-bone);
	border-radius: 8px;
	font-size: .85rem;
	color: var(--fg-cafe-noir);
	max-height: 180px;
	overflow-y: auto;
}

/* ---------- key/value lists ---------- */

.fgb-kv-list { margin: 0; }
.fgb-kv-list > div {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 7px 0;
	border-bottom: 1px solid var(--fg-tan);
}
.fgb-kv-list > div:last-child { border-bottom: 0; }
.fgb-kv-list dt { color: var(--fg-moss-green); font-size: .875rem; margin: 0; }
.fgb-kv-list dd { margin: 0; font-weight: 600; text-align: right; color: var(--fg-cafe-noir); }

/* ---------- status badges ---------- */

.fgb-badge {
	display: inline-block;
	padding: 4px 11px;
	border-radius: 999px;
	font-size: .75rem;
	font-weight: 700;
	line-height: 1.5;
	white-space: nowrap;
}
.fgb-badge--pending_payment { background: var(--fg-tan); color: var(--fg-cafe-noir); }
.fgb-badge--confirmed { background: var(--fg-moss-green); color: var(--fg-white); }
.fgb-badge--checked_in { background: var(--fg-kombu-green); color: var(--fg-bone); }
.fgb-badge--completed { background: var(--fg-bone); color: var(--fg-kombu-green); border: 1px solid var(--fg-moss-green); }
.fgb-badge--cancelled { background: #F0DED4; color: #6E3B23; }
.fgb-badge--no_show { background: var(--fg-alert); color: var(--fg-white); }
.fgb-badge--queue { background: var(--fg-cafe-noir); color: var(--fg-bone); }

/* ---------- booking cards ---------- */

.fgb-booking-card__head {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 14px;
}
.fgb-booking-card__head > div:first-child { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fgb-booking-card__total { font-size: 1.1rem; font-weight: 700; color: var(--fg-kombu-green); }
.fgb-cancel-form { margin-top: 14px; }

/* ---------- confirmation ---------- */

.fgb-confirm { text-align: center; }
.fgb-confirm__check {
	width: 56px; height: 56px;
	margin: 0 auto 12px;
	display: grid; place-items: center;
	border-radius: 50%;
	background: var(--fg-moss-green);
	color: var(--fg-white);
	font-size: 1.7rem;
}
.fgb-confirm__code {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin: 14px 0;
	padding: 12px 20px;
	background: var(--fg-bone);
	border: 2px dashed var(--fg-moss-green);
	border-radius: var(--fg-radius);
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: .08em;
	color: var(--fg-kombu-green);
}
.fgb-confirm .fgb-kv-list { margin-top: 20px; text-align: left; }

/* ---------- auth ---------- */

.fgb-auth__tabs { display: flex; gap: 6px; margin-bottom: 18px; border-bottom: 1px solid var(--fg-tan); }
.fgb-auth__tab {
	flex: 1;
	padding: 11px 8px;
	background: none;
	border: 0;
	border-bottom: 3px solid transparent;
	font: inherit;
	font-weight: 600;
	color: var(--fg-moss-green);
	cursor: pointer;
}
.fgb-auth__tab.is-active { color: var(--fg-kombu-green); border-bottom-color: var(--fg-kombu-green); }

.fgb-auth__panel { display: none; }
.fgb-auth__panel.is-active { display: block; }

.fgb-profile__head {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	padding-bottom: 18px;
	margin-bottom: 18px;
	border-bottom: 1px solid var(--fg-bone);
}
.fgb-profile__head > a { margin-left: auto; }
.fgb-avatar { border-radius: 50%; }
.fgb-profile__head .fgb-h2 { margin: 0; }

/* ---------- responsive ---------- */

@media (max-width: 640px) {
	.fgb-wizard { padding: 16px; }
	.fgb-choices { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
	.fgb-pay__grid { grid-template-columns: 1fr; }
	.fgb-pay__qr img { width: 100%; max-width: 220px; margin-inline: auto; }
	.fgb-wizard__nav { flex-wrap: wrap; }
	.fgb-wizard__nav .fgb-btn { flex: 1 1 auto; }
	.fgb-steps__label { display: none; }
	.fgb-steps__item { min-width: 40px; }
	.fgb-kv-list > div { flex-direction: column; gap: 2px; }
	.fgb-kv-list dd { text-align: left; }
	.fgb-confirm__code { font-size: 1.2rem; flex-wrap: wrap; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
	.fgb-app *, .fgb-app *::before, .fgb-app *::after {
		animation-duration: .01ms !important;
		transition-duration: .01ms !important;
	}
}



/* ==================================================================== */
/* Slot entrance                                                        */
/* ==================================================================== */
/*
 * The slots arrive one after another once a date is picked. The stagger is
 * driven by --fgb-i, which the script sets to each button's index, so the
 * timing stays here rather than being baked into the JS.
 *
 * The delay is capped with min(): a room on 10-minute slots from 10:00 to
 * 22:15 renders more than seventy buttons, and an uncapped 28ms step would
 * take two full seconds to finish - long enough to read as the page being
 * broken rather than as an animation.
 */

@keyframes fgb-slot-in {
	from { opacity: 0; transform: translateY(8px) scale(.97); }
	to   { opacity: 1; transform: none; }
}

.fgb-slot {
	animation: fgb-slot-in .28s cubic-bezier(.2, .7, .3, 1) both;
	animation-delay: min(calc(var(--fgb-i, 0) * 28ms), 620ms);
}

/*
 * Reduced motion means no movement, not no feedback: the buttons still
 * appear in order, they just fade rather than travel.
 */
@media (prefers-reduced-motion: reduce) {
	@keyframes fgb-slot-in {
		from { opacity: 0; }
		to   { opacity: 1; }
	}

	.fgb-slot {
		animation-duration: .01ms;
		animation-delay: 0ms;
	}
}

/* ==================================================================== */
/* Confirmation: reminder opt-in + live card                            */
/* ==================================================================== */

.fgb-notify {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 18px 0 0;
	padding: 12px 14px;
	background: var(--fg-bone);
	border: 1px solid var(--fg-tan);
	border-radius: var(--fg-radius, 10px);
}

.fgb-notify__icon { font-size: 1.3rem; line-height: 1; flex: 0 0 auto; }

.fgb-notify__text { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.fgb-notify__text strong { color: var(--fg-kombu-green); }
.fgb-notify__text span { font-size: .8rem; color: var(--fg-moss-green); }

.fgb-notify__btn { flex: 0 0 auto; }

.fgb-live {
	margin: 14px 0 0;
	padding: 16px;
	background: var(--fg-kombu-green);
	color: var(--fg-bone);
	border-radius: var(--fg-radius, 10px);
}

.fgb-live__head {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: .72rem;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--fg-tan);
}

.fgb-live__heading { flex: 1 1 auto; min-width: 0; }
.fgb-live__countdown { font-variant-numeric: tabular-nums; white-space: nowrap; }

.fgb-live__dot {
	width: 8px; height: 8px;
	border-radius: 50%;
	background: var(--fg-tan);
	flex: 0 0 auto;
}

/* A slot in progress is the one state worth animating - it is the only one
   that changes without the customer doing anything. */
.fgb-live.is-running .fgb-live__dot {
	background: #8FD694;
	animation: fgb-live-pulse 1.6s ease-in-out infinite;
}
.fgb-live.is-over .fgb-live__dot { background: var(--fg-moss-green); }

@keyframes fgb-live-pulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50%      { opacity: .45; transform: scale(.8); }
}

@media (prefers-reduced-motion: reduce) {
	.fgb-live.is-running .fgb-live__dot { animation: none; }
}

.fgb-live__time {
	display: flex;
	align-items: baseline;
	gap: 8px;
	flex-wrap: wrap;
	margin: 10px 0 14px;
}

.fgb-live__start {
	font-size: 2.1rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -.01em;
	font-variant-numeric: tabular-nums;
}

.fgb-live__arrow, .fgb-live__end { color: var(--fg-tan); font-variant-numeric: tabular-nums; }
.fgb-live__dur { margin-left: auto; font-size: .8rem; color: var(--fg-tan); }

.fgb-live__stats {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}

.fgb-live__stat {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding: 10px 8px;
	background: rgba(229, 215, 196, .10);
	border-radius: 8px;
	text-align: center;
}

.fgb-live__label {
	font-size: .66rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--fg-tan);
}

.fgb-live__value {
	font-size: 1.45rem;
	font-weight: 700;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
}

.fgb-live__value--eta { font-size: 1.05rem; color: #8FD694; }
.fgb-live__value--eta.is-late { color: #F0B189; }

.fgb-live__foot {
	margin: 12px 0 0;
	font-size: .78rem;
	color: var(--fg-tan);
	text-align: center;
}

@media (max-width: 480px) {
	.fgb-live__dur { margin-left: 0; flex-basis: 100%; }
	.fgb-live__start { font-size: 1.8rem; }
}

/* ==================================================================== */
/* Theme guard                                                          */
/* ==================================================================== */
/*
 * Themes - Elementor's global colours in particular - style `a:hover`,
 * `a:active`, `button:hover` and `button:active` site-wide, usually with
 * the site accent. Those selectors are (0,1,1). Every colour this
 * stylesheet puts on a component is (0,1,0), because it is set on the
 * component's base rule and the base rule has no state in it.
 *
 * So the accent wins the moment the pointer touches anything: a green
 * button turns pink on hover and stays pink while pressed. That is not a
 * missing style, it is a specificity loss, and no amount of styling the
 * base rule harder fixes it.
 *
 * Nothing below is new design. Each rule restates the colour the component
 * already has, at a specificity that survives - (0,2,1) for the generic
 * case, (0,3,0) and up for components that set a colour of their own, so
 * they also outrank the generic rule.
 *
 * `color: inherit` is right for the generic line precisely because every
 * component that needs a specific colour is listed underneath it.
 *
 * No `!important` here either, for the same reason as everywhere else in
 * this codebase: an Elementor control compiles to `{{WRAPPER}} .fgb-x`,
 * and `!important` would be the one thing that could beat it.
 */

.fgb-app a:hover,
.fgb-app a:focus,
.fgb-app a:active,
.fgb-app button:hover,
.fgb-app button:focus,
.fgb-app button:active {
	color: inherit;
}

.fgb-app .fgb-btn--primary:hover,
.fgb-app .fgb-btn--primary:focus,
.fgb-app .fgb-btn--primary:active { color: var(--fg-bone); }

.fgb-app .fgb-btn--ghost:hover,
.fgb-app .fgb-btn--ghost:focus,
.fgb-app .fgb-btn--ghost:active { color: var(--fg-kombu-green); }

/* The spinner state hides the label by painting it transparent; letting the
   guard turn it back on would flash the text under the spinner. */
.fgb-app .fgb-btn.is-loading:hover,
.fgb-app .fgb-btn.is-loading:focus,
.fgb-app .fgb-btn.is-loading:active { color: transparent; }

.fgb-app .fgb-linkbtn:hover,
.fgb-app .fgb-linkbtn:focus,
.fgb-app .fgb-linkbtn:active { color: var(--fg-moss-green); }

.fgb-app .fgb-slot:hover,
.fgb-app .fgb-slot:focus,
.fgb-app .fgb-slot:active { color: var(--fg-cafe-noir); }

.fgb-app .fgb-slot.is-selected:hover,
.fgb-app .fgb-slot.is-selected:focus,
.fgb-app .fgb-slot.is-selected:active { color: var(--fg-bone); }

.fgb-app .fgb-auth__tab:hover,
.fgb-app .fgb-auth__tab:focus,
.fgb-app .fgb-auth__tab:active { color: var(--fg-moss-green); }

.fgb-app .fgb-auth__tab.is-active:hover,
.fgb-app .fgb-auth__tab.is-active:focus,
.fgb-app .fgb-auth__tab.is-active:active { color: var(--fg-kombu-green); }