/* FONTS */
@font-face {
	font-family: 'Vera';
	src: url('../font/Vera.woff2?v=') format('woff2'),
		url('../font/Vera.woff?v=') format('woff'),
		url('../font/Vera.ttf?v=') format('truetype');

	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Vera';
	src: url('../font/VeraBd.woff2?v=') format('woff2'),
		url('../font/VeraBd.woff?v=') format('woff'),
		url('../font/VeraBd.ttf?v=') format('truetype');

	font-weight: bold;
	font-style: normal;
}

@font-face {
	font-family: 'Vera';
	src: url('../font/VeraIt.woff2?v=') format('woff2'),
		url('../font/VeraIt.woff?v=') format('woff'),
		url('../font/VeraIt.ttf?v=') format('truetype');

	font-weight: normal;
	font-style: italic;
}

@font-face {
	font-family: 'Vera';
	src: url('../font/VeraBI.woff2?v=') format('woff2'),
		url('../font/VeraBI.woff?v=') format('woff'),
		url('../font/VeraBI.ttf?v=') format('truetype');

	font-weight: bold;
	font-style: italic;
}

@font-face {
    font-family: 'Arial Fallback';
    src: local(Arial);
    size-adjust: 112%;
    ascent-override: 86%;
    descent-override: 18%;
    line-gap-override: 0%;
}

/* GLOBAL */
:root {
	--color-bg-foundation: #000;
	--color-bg-header-footer: #111;
	--color-bg-main: #262626;
	--color-bg-accent: #484848;
	
	--color-font-primary: #fff;
	--color-font-subtext: #808080;

	--color-font-link: #76b8ff;

	--color-status-pending: #e89d14;
	--color-status-success: #43ac43;
	--color-status-error: #bb3232;

	--color-button-facebook: #0866ff;
	--color-button-instagram: #ff0a8f;
	--color-button-telephone: #26c943;
	--color-button-message: #7e32ad;

	--color-form-info: #487ea5;
	--color-form-button: #e5e5e5;
	--color-form-error: #ff3e3e;
	--color-form-success: #61cb61;
	--color-form-button-hover: #fff;

	--color-form-button-working-a: #fa9f1c;
	--color-form-button-working-b: #ec8921;

	--color-form-button-confirm: #2ecc71;
	--color-form-button-cancel: #e74c3c;

	--color-streaming-bg: #021537;
	--color-internal-custom: #1e364c;

	--accent-color-1: #6dabe3;  /* Kettering */
	--accent-color-2: #ff1200;  /* Corby */
	--accent-color-3: #0e9729;  /* Daventry */
	--accent-color-4: #d6de00;  /* Rushden & Higham */
	--accent-color-5: #ec7705;  /* Wellingborough */
	--accent-color-6: #1caba5;  /* Burnham-on-Sea */
	--accent-color-7: #e97187;  /* Milton Keynes */
	--accent-color-8: #ad82cc;  /* Market Harborough */
	--accent-color-9: #58206a;  /* Edinburgh */

	--color-banner-blue: #4a97fc;
	--color-banner-green: #8ce020;
	--color-banner-red: #b1322d;
	--color-banner-yellow: #eeda34;
	--color-banner-pink: #cd5fbb;
	--color-banner-orange: #fd7916;

	--branding-allstars: #ffcd01;
	--branding-slk-1: #e3080b;
	--branding-slk-2: #0860e3;
	--branding-ballet: #E3807B;
	--branding-ballet-boys: #2078b9;
	--branding-tuition-1: #b93d46;
	--branding-tuition-2: #931734;
	--branding-contemporary: #7f7f7f;
	--branding-tap: #af991e;
	--branding-velocity: #7ed957;
	--branding-musical-theatre-1: #f09410;
	--branding-musical-theatre-2: #990404;
	--branding-modern: #9b2f80;
	--branding-senior-dance-company: #0060ad;
	--branding-junior-dance-company: #2e9244;
	--branding-acro: #9f4886;
	--branding-commercial: #9820bc;
	--branding-shooting-stars: #e8980e;
	--branding-circus-skills-a: #dc0830;
	--branding-circus-skills-b: #dace0a;
	
	--branding-festival-1: #f78a9e;
	--branding-festival-2: #f56f87;
	--branding-festival-3: #fe988b;

	--branding-jazz-fusion-1: #d2bb22;
	--branding-jazz-fusion-2: #d56903;

	--branding-drama-1: #578413;
	--branding-drama-2: #EF103C;
	--branding-drama-3: #EFA410;
	--branding-drama-4: #539AEB;
	--branding-drama-5: #E68CE9;

	--branding-starpass-bronze: #b17115;
	--branding-starpass-silver: #818181;
	--branding-starpass-gold: #b78420;
	--branding-starpass-platinum: #4c6091;
	--branding-starpass-legacy: #6c757d;

	--hover-overlay: rgba(255, 255, 255, 0.408);
	--hover-overlay-duration: 0.5s;

	--form-row-lighter: #343434;
	--form-row-darker: #1f1f1f;

	--content-box-bg: #343434;
	--content-box-border: #585858;

	--shop-color-starpass: #800080;
	--shop-color-cart: #019401;

	--shop-price-original: #888;
	--shop-price-discounted: #28a745;
}

/* BRANDING */
.bg-starpass-bronze {
	background-color: var(--branding-starpass-bronze) !important;
}

.bg-starpass-silver {
	background-color: var(--branding-starpass-silver) !important;
}

.bg-starpass-gold {
	background-color: var(--branding-starpass-gold) !important;
}

.bg-starpass-platinum {
	background-color: var(--branding-starpass-platinum) !important;
}

.bg-starpass-legacy {
	background-color: var(--branding-starpass-legacy) !important;
}

.cls-allstars {
	color: var(--branding-allstars);
}

.cls-slk-1 {
	color: var(--branding-slk-1);
}

.cls-slk-2 {
	color: var(--branding-slk-2);
}

.cls-ballet {
	color: var(--branding-ballet);
}

.cls-ballet-boys {
	color: var(--branding-ballet-boys);
}

.cls-shooting-stars {
	color: var(--branding-shooting-stars);
}

.cls-circus-skills-a {
	color: var(--branding-circus-skills-a);
}

.cls-circus-skills-b {
	color: var(--branding-circus-skills-b);
}

.cls-commercial {
	color: var(--branding-commercial);
}

.cls-festival-team {
	background: linear-gradient(to bottom, var(--branding-festival-1), var(--branding-festival-2), var(--branding-festival-3));
}

.cls-jazz-fusion {
	background: linear-gradient(to bottom, var(--branding-jazz-fusion-1), var(--branding-jazz-fusion-2));
}

.cls-tuition {
	background: linear-gradient(to right, var(--branding-tuition-1), var(--branding-tuition-2));
}

.cls-musical-theatre {
	background: linear-gradient(to right, var(--branding-musical-theatre-1), var(--branding-musical-theatre-2));
}

.cls-tuition, .cls-musical-theatre, .cls-jazz-fusion, .cls-festival-team {
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.cls-tap {
	color: var(--branding-tap);
}

.cls-velocity {
	color: var(--branding-velocity);
}

.cls-seniors {
	color: var(--branding-senior-dance-company);
}

.cls-juniors {
	color: var(--branding-junior-dance-company);
}

.cls-acro {
	color: var(--branding-acro);
}

.cls-drama b:nth-of-type(1) { color: var(--branding-drama-1); }
.cls-drama b:nth-of-type(2) { color: var(--branding-drama-2); }
.cls-drama b:nth-of-type(3) { color: var(--branding-drama-3); }
.cls-drama b:nth-of-type(4) { color: var(--branding-drama-4); }
.cls-drama b:nth-of-type(5) { color: var(--branding-drama-5); }

.cls-contemporary {
	color: var(--branding-contemporary);
}

.cls-modern {
	color: var(--branding-modern);
}

.color-starpass-bronze {
	filter: brightness(0) saturate(100%) invert(44%) sepia(97%) saturate(592%) hue-rotate(2deg) brightness(86%) contrast(84%);
}

.color-starpass-silver {
	filter: brightness(0) saturate(100%) invert(79%) sepia(33%) saturate(0%) hue-rotate(134deg) brightness(86%) contrast(106%);
}

.color-starpass-gold {
	filter: brightness(0) saturate(100%) invert(99%) sepia(27%) saturate(6124%) hue-rotate(313deg) brightness(100%) contrast(83%);
}

.color-starpass-platinum {
	filter: brightness(0) saturate(100%) invert(50%) sepia(9%) saturate(904%) hue-rotate(185deg) brightness(98%) contrast(84%);
}

*, *::before, *::after {
	box-sizing: border-box;
	font-family: 'Vera', 'Arial Fallback', sans-serif;
}

*:focus {
	outline: 0;
}

[v-cloak] {
	display: none;
  }

html {
	font-size: 100%;
	scroll-behavior: smooth;
	background: var(--color-bg-foundation);
	color: var(--color-font-primary);
}

body {
	padding: 0;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
}

html, body {
	touch-action: manipulation;
	height: 100%;
}

a {
	color: var(--color-font-link);
	text-decoration: none;
	cursor: pointer;
}

a:hover {
	text-decoration: underline;
}

ul {
	margin: 5px 0 0 0;
	list-style-type: square;
}

.sub-ul {
	margin: 5px 0;
}

li {
	margin: 3px 0;
}

p {
	margin: 0;
}

p.quote {
	padding: 20px;
	font-size: 1.1em;
	font-style: italic;
}

p.quote::before {
	content: open-quote;
}

p.quote::after {
	content: close-quote " - " attr(data-author);
}

h1, h2 {
	margin-top: 0;
}

.tags {
	margin-bottom: 10px;
	font-style: italic;
}

.tags span:not(:last-child)::after {
	content: " \2022";
	margin-right: 5px;
 }

.no-margin {
	margin: 0;
}

img {
	max-height: 100%;
	max-width: 100%;
}

.link-overlay {
	transition: background var(--hover-overlay-duration);
}

.link-overlay:hover {
	background-color: var(--hover-overlay);
}

.spacer {
	height: 30px;
}

.indent {
	margin-left: 20px;
}

.footnote {
	font-style: italic;
	font-size: 0.9em;
}

.text-section {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.icon-header {
	display: flex;
	align-items: center;
	gap: 10px;
}

.icon-header img {
	width: 20px;
	height: 20px;
}

.section-logo-container {
	display: flex;
	justify-content: space-between;
	margin-bottom: 20px;
}

.section-logo-container-small {
	display: flex;
	gap: 20px;
	align-self: flex-start;
}

.section-logo-container-small img {
	height: 60px;
}

.section-logo-container-small img.venue {
	height: 80px;
	max-width: 400px;
}

.section-logo {
	width: 500px;
}

.pop {
	transition: transform 0.1s ease-in-out, z-index 0.1s ease-in-out;
}

.pop:hover {
	transform: scale(1.05);
}

.curved {
	border-radius: 10px;
}

.image-strip {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 20px;
	justify-content: space-evenly;
	margin: 20px;
}

.image-strip img {
	height: 45px;
}

.image-stack {
	display: flex;
	gap: 10px;
	padding: 0 15px;
}

.image-stack img {
	min-width: 0;
}

#enquiry-float {
	position: fixed;
	bottom: 20px;
	right: 20px;
	display: flex;
	align-items: center;
	cursor: pointer;
	color: var(--color-font-primary);
	text-decoration: none;
	z-index: 20;
}

#enquiry-float img {
	background: rgb(41, 205, 41);
	width: 75px;
	height: 75px;
	padding: 15px;
	border-radius: 20px;
}

#enquiry-float span {
	background: rgb(57 153 57);
	border-top-left-radius: 20px;
	border-bottom-left-radius: 20px;
	padding: 15px 20px;
	padding-right: 30px;
	margin-right: -15px;
}

@media screen and (max-width: 600px) {
	.image-stack {
		flex-direction: column;
	}
}

.bevel {
	border-radius: 15px;
	overflow: hidden;
}

#wrapper {
	max-width: 1700px;
	width: 100%;
	background: var(--color-bg-header-footer);
}

.content-wrapper {
	max-width: 1120px;
	margin: 0 auto;
}

#header-content {
	height: 120px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

#header-logo {
	height: 100%;
	width: 100%;
	padding: 20px;
	background-image: url(https://starlight.seventy9.co.uk/static/images/logos/logo_header.svg?v=);
	background-repeat: no-repeat;
	background-origin: content-box;
	background-position: left center;
}

#nav-menu-button {
	width: 50px;
	height: 50px;
	margin: 20px;
	display: none;
	flex-direction: column;
	justify-content: space-around;
	cursor: pointer;
}

#nav-menu-button .bar {
	width: 100%;
	height: 5px;
	background: white;
	border-radius: 5px;
}

#nav-menu-top-bar {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 10px;
	justify-content: center;
	margin: 0 30px;
	white-space: nowrap;
}

.nav-menu-user-presence {
	display: none;
	justify-content: flex-end;
}

.nav-menu-user-presence.enabled {
	display: flex;
}

#nav-menu-buttons {
	display: flex;
	gap: 20px;
}

#nav-menu-buttons a {
	color: var(--color-font-primary);
}

#nav-menu-top-bar a:hover {
	cursor: pointer;
	text-decoration: none;
}

#nav-menu-shroud {
	position: absolute;
	bottom: 0;
	top: 0;
	right: calc(100% + 2px);
	display: block;
	width: 100%;
	background: linear-gradient(270deg, black, transparent);
	display: none;
	align-items: center;
	justify-content: end;
}

#nav-menu-shroud-arrow {
	width: 60px;
	height: 60px;
	background-image: url(https://starlight.seventy9.co.uk/static/images/interface/arrow_right.svg?v=);
	background-repeat: no-repeat;
	background-color: var(--color-bg-main);
	background-size: 50%;
	background-position: 21px center;
	border-top-left-radius: 60px;
	border-bottom-left-radius: 60px;
	cursor: pointer;
}

#user-presence-icons {
	display: flex;
	flex-direction: row;
	gap: 10px;
	margin-left: 10px;
}

.colour-strip {
	height: 5px;
	background: linear-gradient(
	  to right,
	  var(--accent-color-1) 0%,
	  var(--accent-color-1) 11.11%,
	  var(--accent-color-2) 11.11%,
	  var(--accent-color-2) 22.22%,
	  var(--accent-color-3) 22.22%,
	  var(--accent-color-3) 33.33%,
	  var(--accent-color-4) 33.33%,
	  var(--accent-color-4) 44.44%,
	  var(--accent-color-5) 44.44%,
	  var(--accent-color-5) 55.55%,
	  var(--accent-color-6) 55.55%,
	  var(--accent-color-6) 66.66%,
	  var(--accent-color-7) 66.66%,
	  var(--accent-color-7) 77.77%,
	  var(--accent-color-8) 77.77%,
	  var(--accent-color-8) 88.88%,
	  var(--accent-color-9) 88.88%,
	  var(--accent-color-9) 100%
	);
}

#error-little-cook {
	display: flex;
	justify-content: center;
	margin: 60px 0 40px 0;
}

main {
	background: var(--color-bg-main);
}

#main-content {
	padding: 30px 40px;
}

.footer-image {
	margin-bottom: -4px;
	border-top: 4px solid white;
}

footer {
	margin: 0 30px;
	padding-bottom: 30px;
}

#footer-affiliates {
	display: flex;
	flex-direction: row;
	justify-content: space-evenly;
	flex-wrap: wrap;
	gap: 30px;
	margin-top: 55px;
	margin-bottom: 50px;
}

#footer-affiliates img {
	height: 45px;
}

#footer-legal {
	margin-top: 30px;
	color: var(--color-font-subtext);
	display: flex;
	flex-direction: column;
	gap: 10px;
}

#footer-legal a {
	color: var(--color-font-subtext);
}

#footer-legal-links {
	display: flex;
	flex-direction: row;
	gap: 20px;
}

#footer-columns {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 65px;
	padding: 30px 30px 0 30px;
}

.footer-column {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.footer-column span {
	margin-bottom: 10px;
	font-weight: bold;
}

#footer-join {
	display: flex;
	justify-content: space-between;
}

#footer-socials {
	display: flex;
	flex-direction: row;
	gap: 15px;
	margin: 30px 30px 0 30px;
}

#footer-socials a {
	width: 60px;
	height: 60px;
	filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(248deg) brightness(106%) contrast(106%);
}

#footer-social-facebook:hover {
	filter: invert(37%) sepia(82%) saturate(6119%) hue-rotate(215deg) brightness(103%) contrast(103%);
}

#footer-social-youtube:hover {
	filter: invert(18%) sepia(53%) saturate(5483%) hue-rotate(357deg) brightness(96%) contrast(133%);
}

#footer-social-instagram:hover {
	filter: invert(18%) sepia(78%) saturate(4594%) hue-rotate(317deg) brightness(100%) contrast(107%);
}

@keyframes toast-spin {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

#toast {
	display: none;
	gap: 5px;
	align-items: center;
	position: fixed;
	top: 0;
	width: 100%;
	left: 0;
	padding: 10px;
	z-index: 900;
	background-color: #4040a3;
}

#toast::after {
	content: attr(data-text);
}

#toast::before {
	content: '';
	display: block;
	width: 20px;
	height: 20px;
	background: url(https://starlight.seventy9.co.uk/static/images/interface/status_info.svg?v=) no-repeat center;
}

#toast.pending {
	background-color: var(--color-status-pending);
}

#toast.pending::before {
	animation: toast-spin 2s linear infinite;
	background-image: url(https://starlight.seventy9.co.uk/static/images/interface/status_spinner.svg?v=);
}

#toast.success {
	background-color: var(--color-status-success);
}

#toast.success::before {
	background-image: url(https://starlight.seventy9.co.uk/static/images/interface/status_success.svg?v=);
}

#toast.error {
	background-color: var(--color-status-error);
}

#toast.error::before {
	background-image: url(https://starlight.seventy9.co.uk/static/images/interface/status_error.svg?v=);
}

.tab-nav-bar {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 15px auto;
	flex-wrap: wrap;
	gap: 10px;
	max-width: 800px;
}

.tab-nav-bar a {
	padding: 10px;
	border: 2px solid var(--color-font-primary);
	border-radius: 10px;
	color: var(--color-font-primary);
	position: relative;
	white-space: nowrap;
}

.tab-nav-bar a:nth-child(9n+1) { border-color: var(--accent-color-1); }
.tab-nav-bar a:nth-child(9n+2) { border-color: var(--accent-color-2); }
.tab-nav-bar a:nth-child(9n+3) { border-color: var(--accent-color-3); }
.tab-nav-bar a:nth-child(9n+4) { border-color: var(--accent-color-4); }
.tab-nav-bar a:nth-child(9n+5) { border-color: var(--accent-color-5); }
.tab-nav-bar a:nth-child(9n+6) { border-color: var(--accent-color-6); }
.tab-nav-bar a:nth-child(9n+7) { border-color: var(--accent-color-7); }
.tab-nav-bar a:nth-child(9n+8) { border-color: var(--accent-color-8); }
.tab-nav-bar a:nth-child(9n+9) { border-color: var(--accent-color-9); }

.tab-nav-bar a:hover, .tab-nav-bar a.active {
	color: black;
	text-decoration: none;
}

.tab-nav-bar a:nth-child(9n+1):hover, .tab-nav-bar a:nth-child(9n+1).active { background: var(--accent-color-1); }
.tab-nav-bar a:nth-child(9n+2):hover, .tab-nav-bar a:nth-child(9n+2).active { background: var(--accent-color-2); }
.tab-nav-bar a:nth-child(9n+3):hover, .tab-nav-bar a:nth-child(9n+3).active { background: var(--accent-color-3); }
.tab-nav-bar a:nth-child(9n+4):hover, .tab-nav-bar a:nth-child(9n+4).active { background: var(--accent-color-4); }
.tab-nav-bar a:nth-child(9n+5):hover, .tab-nav-bar a:nth-child(9n+5).active { background: var(--accent-color-5); }
.tab-nav-bar a:nth-child(9n+6):hover, .tab-nav-bar a:nth-child(9n+6).active { background: var(--accent-color-6); }
.tab-nav-bar a:nth-child(9n+7):hover, .tab-nav-bar a:nth-child(9n+7).active { background: var(--accent-color-7); }
.tab-nav-bar a:nth-child(9n+8):hover, .tab-nav-bar a:nth-child(9n+8).active { background: var(--accent-color-8); }
.tab-nav-bar a:nth-child(9n+9):hover, .tab-nav-bar a:nth-child(9n+9).active { background: var(--accent-color-9); }

.tab-accent-1 { border-color: var(--accent-color-1) !important; }
.tab-accent-2 { border-color: var(--accent-color-2) !important; }
.tab-accent-3 { border-color: var(--accent-color-3) !important; }
.tab-accent-4 { border-color: var(--accent-color-4) !important; }
.tab-accent-5 { border-color: var(--accent-color-5) !important; }
.tab-accent-6 { border-color: var(--accent-color-6) !important; }
.tab-accent-7 { border-color: var(--accent-color-7) !important; }
.tab-accent-8 { border-color: var(--accent-color-8) !important; }
.tab-accent-9 { border-color: var(--accent-color-9) !important; }

.tab-accent-1:hover, .tab-accent-1.active { background: var(--accent-color-1) !important; }
.tab-accent-2:hover, .tab-accent-2.active { background: var(--accent-color-2) !important; }
.tab-accent-3:hover, .tab-accent-3.active { background: var(--accent-color-3) !important; }
.tab-accent-4:hover, .tab-accent-4.active { background: var(--accent-color-4) !important; }
.tab-accent-5:hover, .tab-accent-5.active { background: var(--accent-color-5) !important; }
.tab-accent-6:hover, .tab-accent-6.active { background: var(--accent-color-6) !important; }
.tab-accent-7:hover, .tab-accent-7.active { background: var(--accent-color-7) !important; }
.tab-accent-8:hover, .tab-accent-8.active { background: var(--accent-color-8) !important; }
.tab-accent-9:hover, .tab-accent-9.active { background: var(--accent-color-9) !important; }

@media screen and (max-width: 1110px) {
	#nav-menu-button {
		display: flex;
	}

	#nav-menu-top-bar {
		display: none;
		position: absolute;
		right: 0;
		bottom: 0;
		top: 0;
		background: var(--color-bg-header-footer);
		border-left: 3px solid var(--color-bg-main);
		width: 200px;
		flex-direction: column;
		justify-content: flex-start;
		padding: 30px 0;
		margin: 0;
		z-index: 500;
	}

	.nav-menu-user-presence {
		flex-direction: column;
		margin-bottom: 20px;
		padding: 0 30px;
	}
	
	#nav-menu-buttons {
		padding: 0 30px;
		flex-direction: column;
	}

	#nav-menu-top-bar.active {
		display: flex;
	}

	#nav-menu-top-bar > a {
		padding: 15px 40px;
	}

	#nav-menu-top-bar > a:hover {
		background-color: var(--color-bg-main)
	}

	#nav-menu-shroud {
		display: flex;
	}

	#user-presence-icons {
		flex-direction: column;
		margin-top: 10px;
	}

	.section-logo-container {
		flex-direction: column;
		align-items: center;
		gap: 20px;
	}

	.section-logo-container-small {
		align-self: unset;
	}
}

@media screen and (max-width: 768px) {
	body {
		border-color: blue;
	}

	#footer-legal {
		text-align: center;
	}

	#footer-legal-links {
		gap: unset;
		justify-content: space-around;
	}
}

@media screen and (max-width: 660px) {
	#footer-legal-links {
		gap: 10px;
		margin-top: 10px;
		align-items: flex-start;
		flex-direction: column;
	}
}

@media screen and (max-width: 410px) {
	#footer-columns {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}
}

@media screen and (max-width: 1040px) {
	#footer-socials {
		margin-top: 40px;
		justify-content: center;
		gap: 35px;
	}

	#footer-join {
		flex-direction: column;
	}
}

.button-bar {
	display: flex;
	gap: 10px;
	margin-bottom: 20px;
	flex-wrap: wrap;
}

.button {
	padding: 10px;
	color: var(--font-color-primary);
	border-radius: 10px;
	display: flex;
	gap: 5px;
	align-items: center;
	justify-content: center;
	background-color: var(--color-button-telephone);
}

.button:hover {
	text-decoration: none;
}

.button::before {
	content: '';
	width: 20px;
	height: 20px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(248deg) brightness(106%) contrast(106%);
	display: inline-block;
}

@media screen and (max-width: 1110px) {
	.button-bar {
		justify-content: center;
	}
}

/* MODAL */
.modal-overlay {
	background-color: rgba(0, 0, 0, 0.5);
	display: flex;
	justify-content: center;
	align-items: center;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

.modal {
	background-color: #252525;
	border-radius: 8px;
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.8);
	width: 450px;
	max-width: 90%;
	overflow: hidden;
	border: 1px solid #333;
}

.modal-header {
	background-color: #1a1a1a;
	color: white;
	padding: 16px 20px;
	font-weight: 500;
	font-size: 18px;
	border-top-left-radius: 8px;
	border-top-right-radius: 8px;
	border-bottom: 1px solid #333;
}

.modal-content {
	padding: 20px;
	line-height: 1.5;
	color: #e0e0e0;
}

.modal-footer.form-field {
	padding: 12px 20px;
	display: flex;
	justify-content: flex-end;
	gap: 12px;
	border-top: 1px solid #333;
	background-color: #1d1d1d;
	flex-direction: row;
}

/* QR Code Display Styles */
.qr-code {
	display: block;
	background: white;
	border: 20px solid white;
	border-radius: 10px;
	width: 200px;
	height: auto;
	margin: 20px auto;
}

.qr-instructions {
	margin-top: 10px !important;
}

/* Flash animation for highlighting elements */
.flash-highlight {
	background-color: #76b8ff !important;
	transition: none;
}

.flash-fade {
	background-color: transparent !important;
	transition: background-color 1s ease-out;
}