/*
 * DokterIN mobile menu (full-screen overlay) + one-row mobile header.
 * See inc/mobile-menu.php and assets/js/dokterin-mobile-menu.js.
 *
 * The header shows the hamburger at <= 1199px (Nav Menu "Show On: Tablet",
 * extended in dokterin-site-builder-header.css), so "mobile" here = max-width: 1199px.
 */

/* ------------------------------------------------------------------ */
/* Closed header on tablet/phones: logo left, hamburger right, one row */
/* ------------------------------------------------------------------ */

@media ( max-width: 1199px ) {

	/* Elementor stacks both columns at 100% width on phones, which pushes the
	 * hamburger onto a second row. Keep them side by side. */
	.elementor-inner-section:has( .tmpcoder-nav-menu-container ) > .elementor-container {
		flex-wrap: nowrap;
		align-items: center;
	}

	.elementor-inner-section .elementor-column:has( > .elementor-widget-wrap .elementor-widget-site-logo ) {
		flex: 1 1 auto !important;
		width: auto !important;
		min-width: 0 !important;
		margin-right: 0;
	}

	/* The Site Logo widget is set to "align: center"; on phones its column is
	 * wide, so pin the logo to the left like the open-menu bar. */
	.elementor-inner-section .elementor-widget-site-logo .tmpcoder-site-logo-container,
	.elementor-inner-section .elementor-widget-site-logo .tmpcoder-site-logo {
		text-align: left !important;
	}

	.elementor-inner-section .elementor-column:has( > .elementor-widget-wrap .tmpcoder-nav-menu-container ) {
		flex: 0 0 auto !important;
		width: auto !important;
	}

	.elementor-inner-section .elementor-column:has( > .elementor-widget-wrap .tmpcoder-nav-menu-container ) > .elementor-widget-wrap {
		justify-content: flex-end;
	}

	.elementor-inner-section .tmpcoder-mobile-nav-menu-container,
	.elementor-inner-section .tmpcoder-mobile-toggle-wrap {
		width: auto;
	}

	.elementor-inner-section .tmpcoder-mobile-toggle-wrap {
		display: flex;
		justify-content: flex-end;
		cursor: pointer;
	}

	.elementor-inner-section .tmpcoder-mobile-toggle {
		padding: 10px 0 !important;
	}

	.elementor-inner-section .tmpcoder-mobile-toggle-line {
		background: var( --dokterin-text, #1f2937 ) !important;
	}

	/* The overlay replaces the widget's own teal dropdown. */
	.dokterin-has-mobile-menu .tmpcoder-mobile-nav-menu {
		display: none !important;
	}
}

html.dokterin-mm-open,
html.dokterin-mm-open body {
	overflow: hidden;
}

/* ------------------------------------------------------------------ */
/* Overlay                                                             */
/* ------------------------------------------------------------------ */

.dokterin-mm {
	--dokterin-mm-blue: #1a75bb;
	--dokterin-mm-text: #3d3d3d;
	--dokterin-mm-title: #1f1f1f;

	position: fixed;
	inset: 0;
	z-index: 100000;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
	background: linear-gradient( 90deg, #ffb3e2 0%, #fdf2f8 50%, #8cc5ed 100% );
	font-family: "Plus Jakarta Sans", sans-serif;
	letter-spacing: 0;
	opacity: 0;
	transition: opacity 0.25s ease;
}

.dokterin-mm[hidden] {
	display: none;
}

.dokterin-mm.is-open {
	opacity: 1;
}

@media ( min-width: 1200px ) {

	.dokterin-mm {
		display: none !important;
	}
}

.dokterin-mm a,
.dokterin-mm a:hover {
	text-decoration: none !important;
}

.dokterin-mm-inner {
	box-sizing: border-box;
	min-height: 100%;
	padding: 22px 32px 48px;
}

/* Same position/shape as the header pill it covers. */
.dokterin-mm-bar {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 14px 12px 20px;
	background: #fff;
	border-radius: 24px;
	box-shadow: 0 10px 30px rgba( 20, 40, 80, 0.12 );
	transform: translateY( -6px );
	transition: transform 0.25s ease;
}

.dokterin-mm.is-open .dokterin-mm-bar {
	transform: none;
}

.dokterin-mm-logo {
	display: inline-flex;
	flex: 0 1 auto;
	min-width: 0;
	margin-right: auto;
}

.dokterin-mm-logo img {
	display: block;
	width: auto;
	height: 32px;
	max-width: 100%;
}

/* Language switch pill */
.dokterin-mm-lang {
	display: flex;
	align-items: center;
	gap: 2px;
	flex-shrink: 0;
	padding: 3px;
	background: #e7eef8;
	border-radius: 999px;
}

.dokterin-mm-lang-item {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	opacity: 0.75;
	transition: background-color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

.dokterin-mm-lang-item img {
	display: block;
	width: 24px;
	height: 16px;
	border-radius: 3px;
	object-fit: cover;
}

.dokterin-mm-lang-item.is-current {
	background: #fff;
	box-shadow: 0 2px 8px rgba( 20, 40, 80, 0.15 );
	opacity: 1;
}

/* Close button - reset the theme's global <button> styling. */
.dokterin-mm .dokterin-mm-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	min-height: 0;
	margin: 0;
	padding: 0 !important;
	background: transparent !important;
	border: 0 !important;
	border-radius: 50%;
	box-shadow: none !important;
	color: var( --dokterin-mm-blue ) !important;
	cursor: pointer;
}

.dokterin-mm .dokterin-mm-close:hover {
	background: rgba( 26, 117, 187, 0.1 ) !important;
}

.dokterin-mm .dokterin-mm-close:focus {
	outline: none;
}

.dokterin-mm .dokterin-mm-close:focus-visible {
	outline: 2px solid var( --dokterin-mm-blue );
	outline-offset: 2px;
}

/* Menu links */
.dokterin-mm-nav ul {
	margin: 48px 0 0;
	padding: 0;
	list-style: none;
	text-align: center;
}

.dokterin-mm-nav li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.dokterin-mm-nav a {
	display: block;
	padding: 14px 0;
	color: var( --dokterin-mm-text );
	font-size: 24px;
	font-weight: 500;
	line-height: 1.3;
	transition: color 0.2s ease;
}

.dokterin-mm-nav a:hover,
.dokterin-mm-nav a:focus-visible {
	color: var( --dokterin-mm-blue );
}

/* Login/Daftar + Hubungi Kami */
.dokterin-mm-actions {
	display: grid;
	gap: 18px;
	width: 100%;
	max-width: 440px;
	margin: 40px auto 0;
	padding: 0 18px;
	box-sizing: border-box;
}

.dokterin-mm-btn {
	display: block;
	padding: 12px 16px;
	border: 1px solid transparent;
	border-radius: 8px;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.4;
	text-align: center;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.dokterin-mm-btn--outline {
	background: #fff;
	border-color: var( --dokterin-mm-blue );
	color: var( --dokterin-mm-blue );
}

.dokterin-mm-btn--soft {
	background: #e1ecf8;
	border-color: #c9dcf1;
	color: var( --dokterin-mm-blue );
}

.dokterin-mm-btn:hover,
.dokterin-mm-btn:focus-visible {
	background: var( --dokterin-mm-blue );
	border-color: var( --dokterin-mm-blue );
	color: #fff;
}

/* Temukan Kami / Download aplikasi di */
.dokterin-mm-section {
	margin-top: 44px;
	text-align: center;
}

.dokterin-mm .dokterin-mm-heading {
	margin: 0 0 16px;
	color: var( --dokterin-mm-title );
	font-size: 18px;
	font-weight: 600;
	line-height: 1.4;
}

.dokterin-mm-social {
	display: flex;
	justify-content: center;
	gap: 20px;
}

.dokterin-mm-social a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: rgba( 26, 117, 187, 0.2 );
	color: var( --dokterin-mm-blue );
	transition: background-color 0.2s ease, color 0.2s ease;
}

.dokterin-mm-social a:hover,
.dokterin-mm-social a:focus-visible {
	background: var( --dokterin-mm-blue );
	color: #fff;
}

.dokterin-mm-apps {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
}

.dokterin-mm-apps img {
	display: block;
	width: auto;
	height: 44px;
}

@media ( max-width: 360px ) {

	.dokterin-mm-inner {
		padding-left: 16px;
		padding-right: 16px;
	}

	.dokterin-mm-lang-item {
		width: 34px;
		height: 34px;
	}
}