@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@100;400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inria+Sans:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap');

:root {
  	/* MAIN */
  	--background: black;
	--backdrop: #0c0c0c;
	--backdrop-semilight: #131313;
  	--backdrop-light: #181818;
	--backdrop-lighter: #202020;
	--border-gray: #3c3c3c;

	/* BUTTONS */
	--tr-button: #292929;
	--tr-button-hover: #212121;

	/* CHRISTMAS */
	--xmas: #e4223c;
	--xmas-hover: #9b1839;

	/* MOVEMBER */
	--movember: #1a59cf;
	--movember-hover: #1747a1;

  	--warning-red: #b40f33;
  	--warning-darkred: #360711;
  	--warning-orange: #db4126;
  	--teal: #35d472;
	--darkteal: #03492c;
  	--blue: #0769b9;
  	--purple: #9e27ad;
	--greyed-out: #4d4d4d;
	--golden: #a18946;
	--gray: #808080;
	--mediumgray: #474747;
	--darkgray: #272727;
	--darkergray: #1a1a1a;
  	
  	/* --accent: #3d6aff; */
	/* --accent: #f0581c; */
	--accent: white;
  	--accent-hover: #3a55eb;

	--nav-gradient: linear-gradient(90deg,rgba(255, 150, 0, 1) 0%, rgba(219, 0, 67, 1) 40%, rgba(12, 7, 16, 1) 100%);
	--button-gradient: linear-gradient(90deg,rgba(255, 150, 0, 1) 0%, rgba(219, 0, 67, 1) 100%);
	--pay-gradient: linear-gradient(90deg,rgba(0, 168, 194, 1) 0%, rgba(26, 79, 67, 1) 50%, rgba(0, 168, 194, 1) 100%);
	--warning-gradient: linear-gradient(90deg,rgba(209, 6, 104, 1) 0%, rgba(179, 18, 0, 1) 100%);
	--graydient: linear-gradient(90deg,rgba(56, 56, 56, 1) 0%, rgba(15, 15, 15, 1) 100%);
	--footer-gradient: linear-gradient(90deg, rgb(0 0 0) 0%, rgb(219 0 67) 100%);
  
	/* PROPERTIES */
  	--border-radius: 20px;
}

::selection {
	background: rgb(219, 0, 67);
	color: white;
}

* {
	margin: 0;
	padding: 0;
	font-family: "Inria Sans", sans-serif;
}

input[type="text"] {
	font-family: "Inria Sans", sans-serif !important;
}

html {
	scroll-behavior: smooth;
  	overflow-x: hidden;
}

a {
	color: var(--accent);
}

body {
	background: var(--background);
  	overflow-x: hidden;
}

.required {
	color: red;
}

.flow-out {
	transition: letter-spacing 0.15s ease;
}

.flow-out:hover {
	letter-spacing: 0.1rem;
}

#snowflake-container {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	z-index: 1000;
	pointer-events: none;
}

.snowflake {
	position: absolute;
	top: -30px;
	background-color: white;
	border-radius: 50%;
	opacity: 0.7;
}

@keyframes fall {
	0% { transform: translateY(0); }
	100% { transform: translateY(100vh); }
}

@keyframes sway {
	0%, 100% { transform: translateX(0); }
	50% { transform: translateX(50px); }
}

#container {
	position: relative;
	min-height: 100vh;
	margin-top: 200px;
}

#contribution-text {
	text-align: center;
	font-weight: bold;
  	background-color: var(--accent);
	color: white;
	padding: 6px 0;
  	transition: color 0.5s ease;
}

#page-title {
	text-align: center;
	text-transform: uppercase;
	margin: 120px 0 50px;
	color: white;
}

#donation-text {
	text-align: center;
	font-weight: bold;
	color: white;
	padding: 4px 0;
}

#footer-content {
	text-align: center;
	background: var(--background);
	border-top: 5px solid;
	border-image: var(--nav-gradient) 1;
	color: var(--accent);
	padding: 30px 0;
	margin-top: 100px;
}

#footer-tags {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 1%;
	margin-bottom: 50px;
}

#footer-tags img {
	height: 32px;
}

.trustpilot-widget {
	margin-bottom: 30px;
}

.separator {
  	color: gray;
  	font-size: 18px;
  	margin: 0 15px;
}

#alert {
	width: max-content;
	position: fixed;
	left: 50%;
	transform: translateX(-50%);
	bottom: 0;
	text-align: center;
	padding: 8px 10px;
	background-color: #0d64b4;
	color: white;
	font-size: 16px;
	font-weight: normal;
}

#alert span {
	background-color: #0b559b;
	padding: 0 7px 3px 7px;
	margin-left: 50px;
	cursor: pointer;
}

#gdpr-info {
	margin: 0 auto;
	width: 70%;
	color: white;
}

#gdpr-info a {
  	text-decoration: none;
  	font-weight: bold;
  	color: white;
}

#gdpr-info a:hover {
  	text-decoration: underline;
}

#gdpr-info span {
	display: inline-block;
	font-weight: bold;
	font-size: 18px;
	margin-bottom: 4px;
}

#cart-slideout {
	position: fixed;
	top: 0;
	bottom: 0;
	right: 0;
	width: 670px;
	padding-bottom: 20px;
	background-color: rgba(0, 0, 0, 0.8);
	backdrop-filter: blur(1rem);
	color: white;
	z-index: 999;
	transform: translateX(100%);
	transition: transform 0.5s ease;
	overflow-y: scroll;
}

#cart-slideout[data-visible="true"] {
	transform: translateX(0%);
}

#close-cart-slideout {
	position: absolute;
	top: 20px;
	left: 20px;
	width: 36px;
	aspect-ratio: 1;
	border: 0;
	background: 0;
	font-size: 36px;
	line-height: 36px;
	font-weight: lighter;
	color: white;
	cursor: pointer;
}

#cart-slideout h3 {
	margin-top: 30px;
	text-align: center;
	text-transform: uppercase;
}

#login-text {
	text-align: center;
}

#cart-wrapper {
	width: 80%;
	margin: 0 auto;
	margin-top: 20px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

#free-shipping-bar-wrapper {
	margin-top: 15px;
	padding: 15px 5%;
	padding-bottom: 20px;
	text-align: center;
	border: 1px solid rgb(90 90 90);
	border-radius: 10px;
}

#free-shipping-bar-wrapper p {
	margin-bottom: 10px;
	font-weight: bold;
}

#free-shipping-bar {
	width: 100%;
	height: 10px;
	border-radius: 100vw;
	overflow: hidden;
	background: var(--backdrop-lighter);
}

#amount-bar {
	width: 0%;
	height: 100%;
	border-radius: 100vw;
	background: var(--button-gradient);
}

#empty-cart-btn {
	display: block;
	margin: 0 auto;
	margin-top: 15px;
	padding: 6px 14px;
	border: 1px solid var(--backdrop-lighter);
	border-radius: 100vw;
	background: var(--backdrop);
	color: white;
	text-transform: uppercase;
	cursor: pointer;
}

#empty-cart-btn:hover {
	background: var(--backdrop-light);
}

.patch-cart-object {
	display: flex;
	gap: 10px;
	align-items: center;
}

.patch-cart-object:not(:last-child) {
	padding-bottom: 10px;
	border-bottom: 1px solid rgb(90, 90, 90);
}

.patch-cart-object img {
	width: 64px;
	aspect-ratio: 1;
}

.right-item-info {
	flex: 1;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

.patch-cart-info {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.delayed-shipping-wrapper {
	width: fit-content;
	padding: 2px 8px;
	border-radius: 4px;
	display: flex;
	gap: 5px;
	justify-content: center;
	align-items: center;
	background-color: rgb(255 255 255 / 0.1);
	text-transform: uppercase;
	font-weight: bold;
	letter-spacing: 0.02rem;
	font-size: 13px;
	cursor: default;
	user-select: none;
}

.delayed-shipping-wrapper img {
	width: 18px;
	aspect-ratio: 1;
}

.patch-cart-actions {
	margin-left: auto;
	display: flex;
	align-items: center;
}

.quantity-wrapper {
	display: flex;
	align-items: center;
	margin-right: 80px;
}

/* Decrease and increase qty buttons */
.quantity-wrapper > div {
	width: 24px;
	aspect-ratio: 1;
	border-radius: 50%;
	font-size: 24px;
	line-height: 20px;
	text-align: center;
	background: 0;
	cursor: pointer;
	user-select: none;
}

.quantity-wrapper > div:hover {
	background: var(--backdrop-light);
}

.item-qty-input {
	width: 28px;
	border: 0;
	outline: none;
	background: 0;
	color: white;
	appearance: textfield;
	text-align: center;
	font-size: 14px;
}

.remove-from-cart-btn {
	width: 32px;
	aspect-ratio: 1;
	background-image: url('../img/trash-can.png');
	background-repeat: no-repeat;
	background-position: center;
	background-size: 50%;
	filter: invert();
	border: 0;
	border-radius: 50%;
	cursor: pointer;
}

#select-free-patch-btn {
	background: rgb(0 0 0 / 0.3);
	border: 0;
	color: var(--gray);
	padding: 12px 0;
	text-transform: uppercase;
	cursor: pointer;
	transition: color 0.15s ease;
}

#select-free-patch-btn:hover {
	color: white;
}

#bottom-section-wrapper {
	display: flex;
	justify-content: space-between;
}

#discount-code-wrapper {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

#discount-code-wrapper input {
	background: transparent;
	color: white;
	border: 1px solid rgb(90, 90, 90);
	outline: none;
	padding: 6px 4px;
	border-radius: 30px;
}

#discount-input-row {
	display: flex;
	align-items: center;
	gap: 5px;
}

#apply-discount-code-btn,
#remove-discount-code-btn {
	width: 32px;
	aspect-ratio: 1;
	background-color: #fff;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 50%;
	filter: invert();
	border: 0;
	border-radius: 50%;
	cursor: pointer;
}

#apply-discount-code-btn {
	background-image: url('../img/check.png');
}

#remove-discount-code-btn {
	background-image: url('../img/cross.png');
	background-size: 40%;
}

#apply-discount-code-btn:hover,
#remove-discount-code-btn:hover {
	background-color: #dbdbdb;
}

#invalid-discount-code-text {
	display: none;
	color: var(--warning-red);
}

#calculated-costs {
	width: 200px;
	font-size: 16px;
	display: flex;
	flex-direction: column;
	gap: 5px;
}

#calculated-costs > div {
	display: flex;
	justify-content: space-between;
}

.cost-row-right {
	display: flex;
}

#total-cost-row {
	font-size: 18px;
	font-weight: bold;
}

#checkout-btn {
	height: 36px;
	border: 0;
	border-radius: 100vw;
	background: var(--button-gradient);
	color: white;
	font-size: 16px;
	font-weight: bold;
	text-transform: uppercase;
	cursor: pointer;
}

#checkout-btn:hover {
	background: 0;
	border: 2px solid white;
}

#cart-empty-wrapper {
	margin-top: 50px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	align-items: center;
	text-align: center;
}

#cart-empty-wrapper button {
	height: 35px;
	width: 210px;
	padding-inline: 16px;
	background: var(--button-gradient);
	color: white;
	border: 0;
	border-radius: 100vw;
	text-transform: uppercase;
	font-weight: bold;
	font-size: 15px;
	cursor: pointer;
}

#cart-empty-wrapper button:hover {
	background: 0;
	border: 2px solid white;
}

@media screen and (max-width: 1040px) {
	#alert {
		width: 100%;
	}

	#alert span {
		margin: 0;
	}
}

@media screen and (max-width: 1000px) {
	#cart-slideout {
		width: 100%;
	}

	#checkout-btn:hover,
	#cart-empty-wrapper button:hover {
		letter-spacing: 0;
		background: var(--button-gradient);
		border: 0;
	}

	#empty-cart-btn:hover {
		background: var(--backdrop);
	}

	#select-free-patch-btn:hover {
		color: var(--gray);
	}
}

@media screen and (max-width: 990px) {
	#page-title {
		margin-top: 120px;
		margin-bottom: 30px;
		font-size: 24px;
	}
}

@media screen and (max-width: 672px) {
	#footer-tags {
		width: 100%;
		flex-wrap: wrap;
		gap: 10px;
	}

	#footer-tags img {
		width: calc((100% - (10px * 3) - 20px) / 3);
		height: auto;
	}
	
	#background-text {
		display: none;
	}
  
    #footer-content .separator {
		display: none;
    }

    #footer-content p {
		display: flex;
      	flex-direction: column;
      	gap: 5px;
      	margin-bottom: 20px;
    }
}

@media screen and (max-width: 600px) {
	#close-cart-slideout {
		top: 10px;
		left: 10px;
	}

	#cart-wrapper {
		width: 90%;
	}

	.quantity-wrapper {
		margin-right: 50px;
	}
}

@media screen and (max-width: 490px) {
	#empty-cart-btn {
		margin-bottom: 10px;
	}
	
	.right-item-info {
		width: 100%;
		flex-direction: column;
		align-items: start;
		gap: 10px;
	}
	
	.patch-cart-info {
		gap: 10px;
	}

	.patch-cart-actions {
		width: 100%;
		margin-left: 0;
		justify-content: space-between;
	}

	.quantity-wrapper {
		margin-right: 30px;
	}

	.remove-from-cart-btn {
		margin-left: auto;
	}

	#bottom-section-wrapper {
		flex-direction: column;
		gap: 20px;
	}

	#calculated-costs {
		order: 1;
		width: 100%;
	}

	#discount-code-wrapper {
		order: 2;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		justify-content: end;
	}

	#invalid-discount-code-text {
		flex-basis: 100%;
		text-align: right;
		margin-right: calc(32px + 5px);
	}

	#checkout-btn {
		margin-top: 5px;
	}
}

@media screen and (max-width: 400px) {
	.quantity-wrapper {
		margin-right: 15px;
	}
}