/**
 * Dr. Domatov — mobile header + touch/hover fixes
 * Loaded after style.css (injected by custom.js).
 * v=20260712scroll
 */

/* --------------------------------------------------------------------------
   Header: sticky layering, no slide jump, hamburger usable above hero
   -------------------------------------------------------------------------- */
.site-header {
	z-index: 10050;
}

.site-header .sticky-header,
.site-header .main-bar-wraper,
.site-header .main-bar {
	z-index: 10050;
}

.site-header .w3menu-toggler.navicon,
.site-header .logo-header {
	position: relative;
	z-index: 10060;
}

.hero-banner.style-2 {
	position: relative;
	z-index: 1;
}

@media only screen and (max-width: 991px) {
	/* Avoid sticky header slide-in jump that overlaps hero / feels broken */
	.is-fixed .main-bar {
		animation: none !important;
		transition: background-color 0.25s ease, box-shadow 0.25s ease;
		margin-top: 0 !important;
	}

	/*
	 * Root cause of white gap above purple sticky bar:
	 * box-header uses inset padding (10–15px) so the floating chrome sits below
	 * the viewport top; when .is-fixed, that inset reads as a white strip above
	 * the purple ::before / secondary bar. Flush it when sticky.
	 */
	.site-header.box-header .is-fixed .main-bar {
		top: 0 !important;
		left: 0 !important;
		right: 0 !important;
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
		border-radius: 0 !important;
		background-color: var(--bs-secondary) !important;
		box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12) !important;
		z-index: 10050;
	}

	.site-header.box-header .is-fixed .main-bar > .container,
	.site-header.box-header .is-fixed .main-bar > .container-fluid,
	.site-header.box-header .is-fixed .main-bar > .inner-bar {
		background-color: transparent !important;
		max-width: 100% !important;
		width: 100% !important;
		margin: 0 !important;
		border-radius: 0 !important;
		padding-left: 12px !important;
		padding-right: 12px !important;
	}

	.site-header.box-header .is-fixed .main-bar > *:before,
	.site-header.box-header .is-fixed .main-bar > .container:before,
	.site-header.box-header .is-fixed .main-bar > .container-fluid:before {
		width: 100% !important;
		height: 100% !important;
		margin: 0 !important;
		inset: 0 !important;
		right: 0 !important;
		left: 0 !important;
		top: 0 !important;
		border-radius: 0 !important;
		box-shadow: none !important;
	}

	/* Keep fixed bar clear of floating hero deco */
	.site-header.box-header .main-bar > .container,
	.site-header.box-header .main-bar > .container-fluid {
		position: relative;
		z-index: 1;
	}

	/* Side drawer above sticky bar; overlay must sit above header chrome */
	.header-nav.mo-left,
	.header-nav.mo-right {
		z-index: 10070 !important;
	}

	.menu-close,
	.menu-close.fade-overlay {
		z-index: 10055 !important;
	}

	.w3menu-toggler.open ~ .menu-close.fade-overlay {
		width: 100%;
		opacity: 0.5;
	}

	/* Hamburger hit target */
	.w3menu-toggler.navicon {
		min-width: 44px;
		min-height: 44px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		-webkit-tap-highlight-color: transparent;
	}

	/* Floating circular hero insets must not steal taps or cause jump */
	.hero-banner.style-2 .item3,
	.hero-banner.style-2 .item4,
	.hero-banner.style-2 .item5,
	.hero-banner.style-2 .item1,
	.hero-banner.style-2 .item2,
	.hero-banner.style-2 .circle-wrapper {
		pointer-events: none !important;
		touch-action: none;
	}

	.hero-banner.style-2 .hero-thumbnail,
	.hero-banner.style-2 .hero-thumbnail > img,
	.hero-banner.style-2 .hero-content {
		position: relative;
		z-index: 2;
	}

	/* Soften continuous float motion on small screens (layout stability) */
	.hero-banner.style-2 .move-1,
	.hero-banner.style-2 .move-2,
	.hero-banner.style-2 .move-3,
	.hero-banner.style-2 .move-4 {
		animation: none !important;
	}
}

@media only screen and (max-width: 575px) {
	/* Hide smaller floating circles that crowd the portrait on phones */
	.hero-banner.style-2 .item3,
	.hero-banner.style-2 .item4,
	.hero-banner.style-2 .item5 {
		opacity: 0.85;
		pointer-events: none !important;
	}

	/*
	 * Appointment CTA (.extra-nav): theme parks a single gold btn on the
	 * RTL start edge of a fixed white strip → looks like a bottom-right
	 * floating chip overlapping content. Use a full-width clinic bar.
	 */
	.site-header .extra-nav {
		float: none !important;
		left: 0 !important;
		right: 0 !important;
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
		min-height: 0;
		padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)) !important;
		background: #fff !important;
		border-top: 1px solid rgba(48, 38, 109, 0.12);
		box-shadow: 0 -8px 24px rgba(3, 27, 78, 0.12) !important;
		z-index: 10040 !important;
		display: flex !important;
		align-items: center;
		justify-content: center;
		transition: transform 0.35s ease, opacity 0.35s ease !important;
		bottom: 0 !important;
		transform: translateY(110%);
		opacity: 0;
		pointer-events: none;
	}

	.site-header .extra-nav.active {
		bottom: 0 !important;
		transform: translateY(0);
		opacity: 1;
		pointer-events: auto;
	}

	.site-header .extra-nav.bottom-end {
		transform: translateY(110%);
		opacity: 0;
		pointer-events: none;
	}

	.site-header .extra-nav .extra-cell,
	.site-header .extra-nav .extra-cell ul.header-right,
	.site-header .extra-nav .extra-cell ul {
		width: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
		display: flex !important;
		justify-content: stretch !important;
		align-items: center;
		gap: 0;
	}

	.site-header .extra-nav .extra-cell > * {
		margin: 0 !important;
		width: 100%;
	}

	.site-header .extra-nav .extra-cell ul li {
		display: block !important;
		width: 100% !important;
		margin: 0 !important;
	}

	.site-header .extra-nav .extra-cell ul li .btn,
	.site-header .extra-nav .btn {
		width: 100% !important;
		min-width: 0 !important;
		min-height: 48px;
		justify-content: center !important;
		align-items: center !important;
		padding: 12px 20px !important;
		border-radius: 12px !important;
		font-size: 16px !important;
		font-weight: 600;
		box-shadow: none;
	}

	/* Keep scroll-top clear of the CTA bar (LTR left / RTL logical) */
	.scroltop {
		bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important;
		left: 16px !important;
		right: auto !important;
	}

	html[dir="rtl"] .scroltop {
		left: auto !important;
		right: 16px !important;
	}

	/* Reserve space so last content isn't covered when bar is visible */
	body {
		padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
	}
}

/* --------------------------------------------------------------------------
   Hover-only effects: real hover devices only (prevents stuck hover on touch)
   -------------------------------------------------------------------------- */
@media (hover: none) {
	/*
	 * ClinicMaster pairs :hover with .active for card chrome.
	 * On touch, :hover sticks after tap — force non-hover look unless .active
	 * (JS no longer sets sticky .active via mouseenter on coarse pointers).
	 */
	.icon-bx-wraper.style-6:hover:not(.active):after {
		background: #fff;
	}
	.icon-bx-wraper.style-6:hover:not(.active)::before {
		color: var(--bs-secondary);
	}
	.icon-bx-wraper.style-6:hover:not(.active) .bg {
		opacity: 0;
	}
	.icon-bx-wraper.style-6:hover:not(.active) .dz-title:after {
		background: linear-gradient(to left, var(--bs-secondary) 0, rgba(0, 0, 0, 0) 100%);
	}
	.icon-bx-wraper.style-6:hover:not(.active) .dz-title,
	.icon-bx-wraper.style-6:hover:not(.active) p,
	.icon-bx-wraper.style-6:hover:not(.active) a {
		color: var(--bs-heading-color);
	}
	.icon-bx-wraper.style-6:hover:not(.active) .icon-bx {
		background: var(--bs-secondary);
	}
	.icon-bx-wraper.style-6:hover:not(.active) .icon-bx i {
		color: #fff;
	}

	.icon-bx-wraper.style-7:hover:not(.active):after {
		background: #fff;
	}
	.icon-bx-wraper.style-7:hover:not(.active) .bg {
		opacity: 0;
	}
	.icon-bx-wraper.style-7:hover:not(.active) .dz-title:after {
		background: linear-gradient(to left, var(--bs-secondary) 0, rgba(0, 0, 0, 0) 100%);
		opacity: 0.3;
	}
	.icon-bx-wraper.style-7:hover:not(.active) .dz-title,
	.icon-bx-wraper.style-7:hover:not(.active) p,
	.icon-bx-wraper.style-7:hover:not(.active) a {
		color: var(--bs-heading-color);
	}
	.icon-bx-wraper.style-7:hover:not(.active) .icon-bx {
		background: #fff;
	}
	.icon-bx-wraper.style-7:hover:not(.active) .icon-bx i {
		color: var(--bs-primary);
	}
	.icon-bx-wraper.style-7:hover:not(.active) .dz-media img {
		transform: none;
	}

	.btn-hover1:hover:not(:active),
	.btn-hover2:hover:not(:active) {
		transform: none;
	}

	.icon-link-hover-end:hover i,
	.icon-link-hover-start:hover i,
	.icon-link-hover-top:hover i,
	.icon-link-hover-bottom:hover i {
		transform: none;
	}

	.dz-card.style-1:hover .dz-media img {
		transform: none;
	}
}

/* True hover devices only — reinforce intentional hover (optional clarity) */
@media (hover: hover) and (pointer: fine) {
	.icon-bx-wraper.style-6:hover,
	.icon-bx-wraper.style-7:hover {
		cursor: pointer;
	}
}

/* Touch feedback without sticky hover */
@media (hover: none) {
	.icon-bx-wraper.style-6:active,
	.icon-bx-wraper.style-7:active {
		/* brief tap feedback via existing .active rules if JS sets it */
	}

	.btn:active,
	.btn-hover1:active,
	.btn-hover2:active {
		opacity: 0.92;
	}
}

/* Reduce layout shift from sticky header height placeholder on small screens */
@media only screen and (max-width: 991px) {
	.site-header.header-transparent.box-header {
		margin-bottom: 0;
	}
}