/*
 * DokterIN footer — CSS port of the dokterin.co.id Tailwind footer
 * (14px root: py-10 px-4 = 35px 14px, gap-10 = 35px, gap-6 = 21px, gap-3 = 10.5px).
 * Single column below 768px, 7-column grid (2 / 3 / 1) from 768px.
 */

.dokterin-footer {
	--df-primary: #1a75bb;
	--df-primary-soft: rgb(26 117 187 / 0.2);
	--df-text: #3d3d3d;
	--df-title: #000;

	position: relative;
	width: 100%;
	font-family: "Plus Jakarta Sans", sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
	letter-spacing: normal;
	color: var(--df-title);
	background: linear-gradient(to right, #ffb3e2, #fdf2f8, #8cc5ed);
}

.dokterin-footer *,
.dokterin-footer *::before,
.dokterin-footer *::after {
	box-sizing: border-box;
}

.dokterin-footer ul,
.dokterin-footer p {
	margin: 0;
	padding: 0;
	list-style: none;
}

.dokterin-footer a {
	color: var(--df-text);
	text-decoration: none;
	transition: color 0.2s ease;
}

.dokterin-footer a:hover,
.dokterin-footer a:focus-visible {
	color: var(--df-primary);
}

.dokterin-footer__inner {
	max-width: 1260px;
	margin: 0 auto;
	padding: 35px 14px;
}

.dokterin-footer__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 35px;
}

.dokterin-footer__brand {
	display: flex;
	flex-direction: column;
}

.dokterin-footer__logo {
	display: inline-flex;
	align-self: flex-start;
}

.dokterin-footer__logo img {
	display: block;
	width: 200px;
	height: auto;
}

.dokterin-footer__company {
	margin-top: 14px;
	font-size: 16px;
	line-height: 24px;
	color: var(--df-text);
}

.dokterin-footer__contact {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin: 14px 0 !important;
}

.dokterin-footer__contact li {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	color: var(--df-text);
}

.dokterin-footer__icon {
	flex-shrink: 0;
	width: 21px;
	height: 21px;
}

.dokterin-footer__icon svg,
.dokterin-footer__social-link svg {
	display: block;
	width: 24px;
	height: 24px;
}

.dokterin-footer__social {
	display: flex;
	flex-direction: column;
	margin-top: 21px;
}

.dokterin-footer__social .dokterin-footer__title {
	margin-bottom: 10.5px;
}

.dokterin-footer__social-list {
	display: flex;
	align-items: center;
	gap: 14px;
}

.dokterin-footer__social-link {
	display: flex;
	padding: 10.5px;
	background: var(--df-primary-soft);
	border-radius: 50%;
	transition: opacity 0.2s ease;
}

.dokterin-footer__social-link:hover {
	opacity: 0.8;
}

.dokterin-footer__title {
	display: block;
	margin-bottom: 14px;
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
	color: var(--df-title);
}

.dokterin-footer__nav {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 21px;
}

.dokterin-footer__col {
	display: flex;
	flex-direction: column;
}

.dokterin-footer__col--about {
	gap: 21px;
}

.dokterin-footer__links {
	display: flex;
	flex-direction: column;
	gap: 10.5px;
}

.dokterin-footer__apps {
	display: flex;
	flex-direction: column;
}

.dokterin-footer__apps--desktop {
	display: none;
	margin-top: 35px;
}

.dokterin-footer__apps--mobile {
	margin-top: 21px;
}

.dokterin-footer__badges {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 14px;
}

.dokterin-footer__badges a {
	display: contents;
}

.dokterin-footer__badges img {
	display: block;
	width: auto;
	height: 42px;
}

.dokterin-footer__bottom {
	width: 100%;
	padding: 14px;
	background: var(--df-primary);
}

.dokterin-footer__bottom-inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 7px;
	max-width: 1260px;
	margin: 0 auto;
	font-size: 10px;
	line-height: 15px;
	color: #fff;
}

@media (min-width: 768px) {
	.dokterin-footer__grid {
		grid-template-columns: repeat(7, minmax(0, 1fr));
	}

	.dokterin-footer__brand {
		grid-column: span 2 / span 2;
	}

	.dokterin-footer__nav {
		grid-column: span 3 / span 3;
	}

	.dokterin-footer__apps--desktop {
		display: flex;
	}

	.dokterin-footer__apps--mobile {
		display: none;
	}

	.dokterin-footer__bottom {
		padding: 14px 35px;
	}

	.dokterin-footer__bottom-inner {
		font-size: 12px;
		line-height: 18px;
	}
}