/* -------- */
/*   Core   */
/* -------- */

body {
	& header {
		& .banner {
			display: none;
		}
	}

	& footer {
		& .links {
			> a {
				margin: 0 0.8vh;
				font-size: 1.4vh;
			}
		}
	}
}

/* -------------- */
/*   Components   */
/* -------------- */

.hide-on-mobile {
	display: none !important;
}

.show-on-mobile {
	display: block !important;
}

#showcase {
	& .pods {
		margin-right: 0;
		justify-content: center;
		gap: 8px;

		> a {
			& .pod {
				width: 14vh;

				> div {
					margin: 4px;

					> h3 {
						font-size: 16px;
					}

					> div {
						display: none;
					}
				}
			}
		}
	}
}

#landing {
	> .wrapper {
		& h1 {
			font-size: 5vh;
		}

		& .vessel {
			column-gap: 100vh;
		}
	}
}

.yg-tabs {
	& .yg-benefits-selectors {
		gap: 8px;

		> div {
			background: rgb(25 116 182 / 10%);
		}
	}
}

.btn {
	min-width: 15vh;
	padding: 1vh 2vh;
	font-size: 1.4vh;
}

.dropdown {
	& .label {
		display: none;
	}

	& .options {
		position: relative;
		top: 0;
		display: block;
		border: 1px solid var(--light-grey);
		box-shadow: none;
	}
}

/* --------- */
/*   Pages   */
/* --------- */

#home {
	& #our-mission {
		padding: 5vh 0;

		& .container {
			width: 90%;
		}
	}
}

#fanvil {
	& #benefits-of-fanvil {
		display: flex;
		padding: 4vh 2vh 0;

		& .left {
			width: 100%;
			margin-bottom: 2vh;
		}

		& .right {
			width: 100%;
		}
	}
}

#tcx-videos {
	& #video-samples {
		& .videos-grid {
			grid-template-columns: repeat(2, 1fr);
			gap: 4px;

			> div {
				height: 100px;
			}
		}
	}

	& #worldwide {
		padding: 8vh 5%;

		& h2 {
			width: 100%;
			font-size: 3vh;
		}

		& .vessel {
			& .left {
				width: 100%;
			}

			& .right {
				display: none;
			}
		}
	}
}

#product {
	& #information {
		width: 95%;

		& .container {
			& .left-half {
				width: 100%;
			}

			& .right-half {
				width: 100%;

				& .product-title {
					font-size: 3vh;
				}

				& .product-category {
					font-size: 2vh;
				}
			}
		}
	}

	& #description {
		width: 95%;

		& .options {
			& .option {
				font-size: 2.5vh;
			}

			& i {
				font-size: 2vh;
			}
		}
	}
}

#contact,
.reseller,
#align-to-yellowgrid,
#direct-debit,
#returns {
	padding-inline: 4px;

	& .vessel {
		&.left {
			& h1 {
				margin-bottom: 12px;
				font-size: 4vh;
			}
		}

		&.right {
			padding: 16px;

			& form {
				& fieldset {
					& .text-input,
					& .select-input {
						width: 100%;
					}

					& button {
						width: 48%;
					}
				}
			}
		}
	}
}

#blogs,
#blog {
	& .page-title {
		& h1 {
			margin: 5vh 0 2vh;
		}

		& .input {
			width: 90%;
			margin-bottom: 5vh;
		}
	}

	& .post_preview {
		width: 100%;
	}
}

#blog {
	> .wrapper {
		> h1 {
			margin-top: 24px;
		}

		& .blog {
			& #linkedin-link {
				display: none;
			}

			& .the_post {
				width: 100%;
				padding: 12px;
			}
		}
	}
}

#privacy,
#slavery-policy,
#disclaimer,
#fair-usage-policy {
	> .body-content {
		> .vessel {
			padding: 20px 16px;
		}
	}
}

#login,
#password-reset {
	& .vessel {
		padding: 56px 40px 60px;
	}
}

#password-sender {
	& .container {
		width: 95%;
		padding: 3vh 0;
	}
}

#send-credentials {
	& #content {
		width: 95%;
	}

	& #tutorial {
		margin: 0;
		border: 3px solid #111;

		& .fa-angle-left {
			top: unset;
			bottom: -5vh;
			left: 1vh;
			transform: translateY(0);
			border-radius: 0 0 5px 5px;
			padding: 1.75vh;
			font-size: 1.5vh;
		}

		& .fa-angle-right {
			top: unset;
			bottom: -5vh;
			right: 1vh;
			transform: translateY(0);
			border-radius: 0 0 5px 5px;
			padding: 1.75vh;
			font-size: 1.5vh;
		}

		& p {
			max-width: 90%;
			padding: 1vh;
			font-size: 1.25vh;
		}

		& #close-btn {
			bottom: -5vh;
			padding: 1.5vh;
			font-size: 1.5vh;
		}
	}
}

#allProducts {
	margin: 1vh 0.5vh;

	& .blue {
		display: none !important;
	}

	& section#top {
		& nav {
			> * {
				font-size: 1.3vh;
			}
		}
	}

	& section#products {
		grid-template-columns: repeat(1, 95%);
		row-gap: 2vh;
	}
}

.payment-gateway {
	flex-direction: column;

	& .payment-breakdown,
	.customer-details {
		width: 100%;
	}

	& .customer-details {
		> div {
			width: 100%;
			padding: 1vh;

			&:first-child {
				margin-top: 2vh;
			}

			&:last-child {
				margin-bottom: 2vh;
			}
		}
	}

	& .payment-breakdown {
		& h3 {
			margin-top: 2vh;
		}

		& .table-of-items {
			> div {
				max-height: 38vh;
			}
		}

		& .final-results {
			margin-block: 2vh;
		}
	}
}

#mfa-setup {
	width: 90%;
	left: 5%;
}

/* ------------------ */
/*   tab-layouts.js   */
/* ------------------ */

.tab-layouts {
	> .container {
		> .vessel {
			padding: 12px 16px;

			> div {
				&:has(iframe) {
					width: 100%;
					height: 25vh;
				}
			}
		}
	}
}