/* ================================================
   WS-ICON (common.css)
   ================================================ */

ws-icon {
	width: 20px;
	height: 20px;
	padding: 2px;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
}

/* ================================================
   SECTION BASE (main.css)
   ================================================ */

.section {
	width: 100%;
	padding: 0 80px;
	box-sizing: border-box;
	position: relative;
}

.section-white {
	background: #ffffff; /* --base-white-solid */
}

/* ================================================
   BUTTONS (buttons.css) — variants used in prefooter/footer
   ================================================ */

.btn {
	box-sizing: border-box;
	display: flex;
	justify-content: center;
	align-items: center;
	border: 0;
	cursor: pointer;
	text-decoration: none;

	span { white-space: nowrap; }

	&.btn-40 {
		padding: 8px 12px;
		border-radius: 12px;
		height: 40px;

		span {
			/* --font-body-med-md */
			font: normal normal 500 16px/20px "Inter", sans-serif;
			padding: 0 8px;
		}

		&.btn-square { width: 40px; }
	}

	&.btn-primary {
		color: #ffffff;      /* --text-base-invert-primary */
		background: #1e201f; /* --base-greengrey-990 */
		box-shadow:
				0 0 0 1px #303332,       /* --base-greengrey-950 */
				0 2px 2px -1px #001a0a33, /* --base-greengrey-a-200 */
				0 4px 4px -2px #001a0a33,
				0 6px 8px -3px #081c1626; /* --base-greengrey-a-150 */

		ws-icon svg { fill: #ffffff; }

		&:hover {
			background: #474b49;    /* --base-greengrey-900 */
			box-shadow:
					0 0 0 1px #474b49,
					0 2px 2px -1px #001a0a33,
					0 4px 4px -2px #001a0a33,
					0 6px 8px -3px #081c1626;
		}

		&:active {
			background: #5d625f;   /* --base-greengrey-800 */
			box-shadow: 0 0 0 1px #5d625f;
		}
	}

	&.btn-ghost, &[disabled] {
		color: #0a0a0a33;       /* --text-base-ghost */
		background: #2636260f;  /* --base-greengrey-a-100 */
		box-shadow: 0 0 0 1px #2636260f;
		ws-icon svg { fill: #0a0a0a33; }
		pointer-events: none;
	}
}

a.btn {
	display: inline-flex;
}

.btn-special {
	text-decoration: none;

	&.btn-store {
		display: flex;
		width: 156px;
		height: 40px;
		border-radius: 12px;
		padding: 6px 12px;
		box-sizing: border-box;
		background: #ffffff; /* --base-white-solid */
		/* --shadow-large-out */
		box-shadow:
				0 0 0 1px #2636360f,     /* --base-slate-a-100 */
				0 4px 4px -2px #0f1c2926, /* --base-slate-a-150 */
				0 12px 12px -6px #2636360f,
				0 24px 24px -12px #2636360f;
		align-items: center;
		gap: 12px;

		.btn-special-logo {
			width: 28px;
			height: 28px;
		}

		.btn-special-text {
			display: flex;
			flex-direction: column;

			.btn-special-text-text {
				color: #05050580;           /* --text-base-tertiatry */
				font-family: "Inter", serif;
				font-size: 11px;
				font-style: normal;
				font-weight: 400;
				line-height: 12px;
			}

			.btn-special-text-name {
				color: #000000a8;           /* --text-base-secondary */
				font-family: "Inter", serif;
				font-size: 14px;
				font-style: normal;
				font-weight: 500;
				line-height: 16px;
			}
		}
	}
}

/* ================================================
   PREFOOTER (main.css)
   ================================================ */

.prefooter {
	max-width: 1240px;
	margin: 0 auto;
	padding: 80px 0 20px 0;
	display: flex;
	gap: 40px;

	.prefooter__banner {
		width: 100%;
		display: flex;
		align-content: center;
		border-radius: 32px;
		/* linear-gradient using --base-greengrey-100 and --base-greengrey-200 */
		background: linear-gradient(180deg, #f2f3f2 0%, #ccd1ce 100%);
		box-shadow:
				0 0 0 1px #2636260f,           /* --base-greengrey-a-100 */
				0 2px 4px -2px #081c1626,      /* --base-greengrey-a-150 */
				0 4px 8px -2px #081c1626,
				0 12px 12px -3px #2636260f,
				0 16px 16px -4px #2636260f,
				0 0 40px 2px rgba(255, 255, 255, 0.40) inset,
				0 0 40px 20px rgba(255, 255, 255, 0.40) inset;
		position: relative;
		overflow: hidden;

		img.line {
			position: absolute;
			z-index: 1;
			bottom: 1px;
		}

		.l {
			display: flex;
			padding: 40px 0 40px 96px;
			flex-direction: column;
			gap: 8px;
			flex: 1 0 0;
			z-index: 2;

			.prefooter__heading {
				color: #000000ed; /* --text-base-primary */
				/* --font-heading-semi-lg */
				font: normal normal 600 32px/40px "Inter", sans-serif;
			}

			.prefooter__subtext {
				color: #000000a8; /* --text-base-secondary */
				/* --font-body-reg-lg */
				font: normal normal 400 18px/24px "Inter", sans-serif;
			}
		}

		.r {
			display: flex;
			padding: 0 96px 0 0;
			gap: 12px;
			z-index: 2;
			align-items: center;
			justify-content: flex-end;
		}
	}
}

/* ================================================
   FOOTER (main.css)
   ================================================ */

.section:has(.footer) {
	border-top: 1px solid #1a1a1a12;
}

.footer {
	max-width: 1240px;
	margin: 0 auto;
	padding: 80px 0 80px 0;
	display: flex;
	flex-direction: column;

	.footer__main {
		width: 100%;
		display: flex;
		justify-content: space-between;
		padding-bottom: 80px;

		.footer__main-logo .footer__main-logoWrapper {
			display: flex;
			gap: 8px;
			align-items: center;

			svg { fill: #000000ed; width: 32px; height: 32px; } /* --text-base-primary */

			div {
				color: #000000ed;
				font-family: "Work Sans", sans-serif; /* --font-family-brand-logo */
				font-size: 15px;                      /* --font-size-body-sm */
				font-style: normal;
				font-weight: 600;                     /* --font-weight-semibold */
				line-height: 20px;                    /* --line-height-s */
				letter-spacing: 0px;                  /* --letter-spacing-regular */
			}
		}

		.footer__main-columns {
			display: flex;
			gap: 32px;

			.footer__main-columnGroup {
				display: flex;
				gap: 24px;
				flex-direction: column;
				min-width: 180px;

				.footer__main-groupTitle {
					display: flex;
					align-items: center;
					color: #000000ed;
					/* --font-body-med-md */
					font: normal normal 500 16px/20px "Inter", sans-serif;
					height: 32px;
				}

				.footer__main-groupItems {
					display: flex;
					gap: 16px;
					flex-direction: column;

					a {
						color: #05050580; /* --text-base-tertiatry */
						/* --font-body-reg-sm */
						font: normal normal 400 15px/20px "Inter", sans-serif;
						text-decoration: none;

						&:hover {
							color: #000000ed;
							text-decoration: underline;
						}
					}
				}
			}
		}
	}

	.footer__mid {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-bottom: 32px;

		.footer__mid-links {
			display: flex;
			gap: 32px;

			a {
				color: #05050580;
				font: normal normal 400 15px/20px "Inter", sans-serif;
				text-decoration: none;

				&:hover {
					color: #000000ed;
					text-decoration: underline;
				}
			}
		}

		.footer__mid-buttons {
			display: flex;
			gap: 10px;
		}
	}

	.footer__bottom {
		display: flex;
		align-items: center;
		justify-content: space-between;

		.footer__bottom-copy {
			color: #05050580;
			/* --font-body-reg-xs */
			font: normal normal 400 13px/18px "Inter", sans-serif;
		}

		.footer__bottom-logo {
			svg {
				width: 34px;
				height: 34px;
			}
		}

		.footer__bottom-links {
			display: flex;
			gap: 8px;

			a {
				display: block;
				svg { fill: #1a1a1a12; width: 24px; height: 24px; } /* --text-base-muted */

				&:hover {
					svg { fill: #0a0a0a33; } /* --text-base-ghost */
				}
			}
		}
	}
}

/* ================================================
   ADAPTIVE (adaptive.css)
   ================================================ */

@media screen and (max-width: 1240px) {
	.prefooter {
		.prefooter__banner {
			.l { padding: 40px 0 40px 56px; }
			.r { padding: 0 56px 0 0; }
		}
	}

	.footer {
		.footer__main {
			gap: 50px;

			.footer__main-columns {
				gap: 24px;
				flex-wrap: wrap;
			}
		}
	}
}

@media screen and (max-width: 991px) {
	.section:not(.section-full-width) { padding: 0 40px; }

	.prefooter {
		margin: 0 -20px;
		padding: 40px 0;

		.prefooter__banner {
			flex-direction: column;

			.l { padding: 20px; }

			.r {
				padding: 0 20px 20px 20px;
				flex-direction: column;
				.btn { width: 100%; }
			}

			.line {
				height: 100%;
				width: 130%;
				bottom: 1px;
				transform: translateY(30px);
			}
		}
	}

	.footer {
		padding: 40px 0;

		.footer__main {
			flex-direction: column;

			.footer__main-logoWrapper { justify-content: center; }

			.footer__main-columns {
				.footer__main-columnGroup {
					width: 100%;
					border-bottom: 1px solid #081c1626; /* --border-mid-high */
					transition: all 0.3s ease-out;

					.footer__main-groupTitle {
						flex-shrink: 0;
						justify-content: space-between;

						&:after {
							content: '>';
							display: block;
							transform: scaleX(2) rotate(90deg);
							font-size: 12px;
							color: #05050580;
							transition: all 0.2s ease-out;
						}

						&.footer__main-groupActive:after {
							transform: scaleX(2) rotate(-90deg);
						}
					}

					.footer__main-groupItems {
						height: 0;
						opacity: 0;
						overflow: hidden;
						transition: height, padding 0.3s ease-out;
						padding-bottom: 0;
					}

					.footer__main-groupActive + .footer__main-groupItems {
						height: 100%;
						opacity: 1;
						padding-bottom: 24px;
						transition: height, padding 0.3s ease-out;
					}
				}
			}
		}

		.footer__mid {
			flex-direction: column-reverse;
			gap: 32px;

			.footer__mid-links {
				flex-direction: column;
				gap: 16px;
				a { text-align: center; }
			}
		}

		.footer__bottom {
			flex-direction: column;
			gap: 12px;

			.footer__bottom-links {
				order: 1;
				gap: 20px;

				a svg {
					width: 32px;
					height: 32px;
				}
			}

			.footer__bottom-copy { order: 2; }
			.footer__bottom-logo { order: 3; }
		}
	}
}

@media screen and (max-width: 470px) {
	.prefooter { margin: 0; }
}

@media screen and (max-width: 380px) {
	.section:not(.section-full-width) { padding: 0 20px; }
}