/*
 * HClinic design system - 3/7 components
 * Buttons, service/consultation cards, notices, dividers, accordions, cookie notice, floating call.
 *
 * Note on specificity: The7 and WPBakery print per-element <style> blocks keyed by ID
 * (#default-btn-xxxx:not(:hover) { ... !important }) after the head, so button rules below use
 * #main + :not(:hover) to outrank them. Colours saved as inline style="" need !important.
 */

/* ==========================================================================================
   Buttons
   Primary = solid blue. Secondary = quiet outline (small "details" links, nav tiles).
   Hover lifts 1px, press settles back: transform only, no layout movement.
   ========================================================================================== */

#main .dt-btn,
#main .btn-modal.btn-primary,
#main .vc_btn3 {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: var(--hc-tap);
	transition: transform var(--hc-duration-fast) var(--hc-ease-standard),
		box-shadow var(--hc-duration-normal) var(--hc-ease-standard),
		background-color var(--hc-duration-fast) var(--hc-ease-standard),
		border-color var(--hc-duration-fast) var(--hc-ease-standard),
		color var(--hc-duration-fast) var(--hc-ease-standard);
}

/* Primary (The7 .dt-btn, Ultimate Addons modal trigger) */
#main a.dt-btn:not(:hover),
#main button.btn-modal.btn-primary:not(:hover) {
	padding: .625rem 1.25rem !important;
	border: 1px solid var(--hc-blue-primary) !important;
	border-radius: var(--hc-radius-sm) !important;
	background: var(--hc-blue-primary) !important;
	box-shadow: var(--hc-shadow-sm) !important;
	color: #fff !important;
	font-family: var(--hc-font) !important;
	font-size: .9375rem !important;
	font-weight: 600 !important;
	letter-spacing: 0 !important;
	line-height: 1.3 !important;
	text-transform: none !important;
}

#main a.dt-btn:hover,
#main button.btn-modal.btn-primary:hover {
	border: 1px solid var(--hc-blue-primary-dark) !important;
	border-radius: var(--hc-radius-sm) !important;
	background: var(--hc-blue-primary-dark) !important;
	box-shadow: var(--hc-shadow-hover) !important;
	color: #fff !important;
	transform: translateY(-1px);
}

#main a.dt-btn:active,
#main button.btn-modal.btn-primary:active {
	box-shadow: var(--hc-shadow-sm) !important;
	transform: translateY(0) scale(.98);
}

#main .dt-btn *,
#main .btn-modal.btn-primary * {
	color: inherit !important;
}

#main .dt-btn::before,
#main .dt-btn::after {
	display: none;
}

/* Secondary: small "Детальніше про лікаря" style links */
#main a.dt-btn.dt-btn-s:not(:hover) {
	padding: .5rem 1.125rem !important;
	background: var(--hc-blue-surface) !important;
	border: 1px solid #bae6fd !important;
	border-radius: var(--hc-radius-pill) !important;
	box-shadow: none !important;
	color: var(--hc-blue-primary-dark) !important;
	font-size: .875rem !important;
}

#main a.dt-btn.dt-btn-s:hover {
	border-radius: var(--hc-radius-pill) !important;
	background: var(--hc-blue-primary) !important;
	border-color: var(--hc-blue-primary) !important;
}

/* Navigation tiles: the homepage "Ціни / Лікарі / Гінекологія ..." rows are links to sections,
   not calls to action, so they read as quiet tiles instead of edge-to-edge blue bars.
   They must stay block-level and full width: the generic .dt-btn rule above is inline-flex, which
   shrank each tile to its text and left a centred "pyramid" of different-width pills. */
#main a.dt-btn.full-width-btn {
	display: flex;
	width: 100%;
}

/* Tiles are stacked with a gap; The7's 1px separator between them would draw a line behind
   every pill, so it is dropped. */
#main .btn-align-center:has(> .full-width-btn) {
	margin-bottom: .625rem;
}

#main .btn-align-center:has(> .full-width-btn) + .vc_separator {
	display: none;
}

#main a.dt-btn.full-width-btn:not(:hover) {
	justify-content: space-between;
	padding: .875rem 1.25rem !important;
	background: var(--hc-card-bg) !important;
	border: 1px solid var(--hc-border-subtle) !important;
	border-radius: var(--hc-radius-md) !important;
	box-shadow: var(--hc-shadow-card) !important;
	color: var(--hc-navy-deep) !important;
	font-size: 1rem !important;
}

#main a.dt-btn.full-width-btn:hover {
	border-radius: var(--hc-radius-md) !important;
	background: var(--hc-card-bg) !important;
	border-color: rgba(2, 132, 199, .45) !important;
	box-shadow: var(--hc-shadow-hover) !important;
	color: var(--hc-blue-primary-dark) !important;
}

#main a.dt-btn.full-width-btn::after {
	display: block;
	position: static;
	width: auto;
	height: auto;
	margin-left: .75rem;
	background: none;
	color: var(--hc-blue-primary);
	content: "\203A" / "";
	font-size: 1.5rem;
	line-height: 1;
	opacity: 1;
	transform: none;
	transition: transform var(--hc-duration-fast) var(--hc-ease-standard);
}

#main a.dt-btn.full-width-btn:hover::after {
	transform: translateX(3px);
}

/* ==========================================================================================
   Info-box cards (Ultimate Addons .aio-icon-component.style_3)
   Used for /zini/ service links and doctor-consultation links. The whole box is already one
   <a>, so the card is the link: no nested links, one focus target, one hover surface.
   ========================================================================================== */

#main .aio-icon-component.style_3 {
	margin: 0;
}

#main .aio-icon-component.style_3 .aio-icon-box-link {
	display: block;
	height: 100%;
	border-radius: var(--hc-radius-md);
	color: inherit;
	text-decoration: none;
}

#main .aio-icon-component.style_3 .aio-icon-box {
	display: flex;
	align-items: center;
	justify-content: space-between;
	box-sizing: border-box;
	height: 100%;
	min-height: 4.25rem;
	margin: 0;
	padding: .875rem 1.25rem;
	/* Ultimate Addons' script writes an inline padding-top (for the icon it overlaps) onto the box
	   after load; the icon is hidden here, so the block padding is restated to centre the text. */
	padding-block: .875rem !important;
	border: 1px solid var(--hc-border-subtle) !important;
	border-radius: var(--hc-radius-md);
	background: var(--hc-card-bg) !important;
	box-shadow: var(--hc-shadow-card);
	text-align: left;
	transition: transform var(--hc-duration-normal) var(--hc-ease-standard),
		box-shadow var(--hc-duration-normal) var(--hc-ease-standard),
		border-color var(--hc-duration-fast) var(--hc-ease-standard);
}

/* The saved icon markup is empty (font-size:0); it only reserves space. */
#main .aio-icon-component.style_3 .aio-icon-square_box {
	display: none;
}

#main .aio-icon-component.style_3 .aio-icon-description {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	justify-content: center;
	align-self: stretch;
	margin: 0;
	padding: 0;
	text-align: left;
}

#main .aio-icon-component.style_3 .aio-icon-description p {
	margin: 0;
	text-align: left !important;
}

#main .aio-icon-component.style_3 .aio-icon-description p:empty {
	display: none;
}

#main .aio-icon-component.style_3 .aio-icon-description [style] {
	color: var(--hc-navy-deep) !important;
	font-family: var(--hc-font) !important;
	font-size: 1.0625rem !important;
	font-weight: 600 !important;
	line-height: 1.35 !important;
	text-align: left !important;
}

#main .aio-icon-component.style_3 .aio-icon-box::after {
	flex: 0 0 auto;
	margin-left: 1rem;
	color: var(--hc-blue-primary);
	content: "\203A" / "";
	font-size: 1.75rem;
	line-height: 1;
	transition: transform var(--hc-duration-fast) var(--hc-ease-standard);
}

#main .aio-icon-component.style_3 .aio-icon-box-link:hover .aio-icon-box,
#main .aio-icon-component.style_3 .aio-icon-box-link:focus-visible .aio-icon-box {
	border-color: rgba(2, 132, 199, .45) !important;
	box-shadow: var(--hc-shadow-hover);
	transform: translateY(-2px);
}

#main .aio-icon-component.style_3 .aio-icon-box-link:hover .aio-icon-box::after {
	transform: translateX(3px);
}

#main .aio-icon-component.style_3 .aio-icon-box-link:focus-visible {
	box-shadow: none;
	outline-offset: 3px;
}

/* One responsive layout for rows that hold these cards. WPBakery splits the cards across floated
   columns; dissolving the column wrappers lets every card be a direct child of the row, with no
   fixed heights: 1 per line on phones, 2 on tablets, 3 on desktop.
   Rows wrap and centre, so a short last line is balanced on both sides instead of leaving a hole
   at the right: 6 consultation cards are 3 + 3; 11 price links are 3 + 3 + 3 + a centred pair.
   (A plain auto-fit grid with a 260px minimum fits FOUR columns in the 1200px container, which
   turns 6 cards into 4 + 2 and keeps the hole.) */
#main .vc_row:has(.aio-icon-component.style_3) {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1rem;
	margin-inline: 0;
	margin-bottom: var(--hc-space-6);
}

#main .vc_row:has(.aio-icon-component.style_3) .aio-icon-component.style_3 {
	flex: 0 1 100%;
	min-width: 0;
}

@media (min-width: 640px) {
	#main .vc_row:has(.aio-icon-component.style_3) .aio-icon-component.style_3 {
		flex-basis: calc((100% - 1rem) / 2);
	}
}

@media (min-width: 960px) {
	#main .vc_row:has(.aio-icon-component.style_3) .aio-icon-component.style_3 {
		flex-basis: calc((100% - 2rem) / 3);
	}
}

/* Clearfix pseudo-elements (display: table) would otherwise become empty grid items: a
   display: contents parent still generates its ::before / ::after boxes. */
#main .vc_row:has(.aio-icon-component.style_3)::before,
#main .vc_row:has(.aio-icon-component.style_3)::after,
#main .vc_row:has(.aio-icon-component.style_3) > .vc_column_container::before,
#main .vc_row:has(.aio-icon-component.style_3) > .vc_column_container::after,
#main .vc_row:has(.aio-icon-component.style_3) .vc_column-inner::before,
#main .vc_row:has(.aio-icon-component.style_3) .vc_column-inner::after,
#main .vc_row:has(.aio-icon-component.style_3) .wpb_wrapper::before,
#main .vc_row:has(.aio-icon-component.style_3) .wpb_wrapper::after {
	display: none;
}

#main .vc_row:has(.aio-icon-component.style_3) > .vc_column_container,
#main .vc_row:has(.aio-icon-component.style_3) > .vc_column_container > .vc_column-inner,
#main .vc_row:has(.aio-icon-component.style_3) .wpb_wrapper {
	display: contents;
}

/* ==========================================================================================
   Notices and dividers
   ========================================================================================== */

#main .hclinic-price-notice {
	margin: var(--hc-space-4) 0 !important;
	padding: var(--hc-space-4) var(--hc-space-5) !important;
	border: 1px solid #bae6fd !important;
	border-left: 4px solid var(--hc-blue-primary) !important;
	border-radius: var(--hc-radius-md) !important;
	background: var(--hc-blue-surface) !important;
	box-shadow: none !important;
	color: var(--hc-slate-text) !important;
	font-size: .9375rem !important;
	line-height: 1.55 !important;
	text-align: left !important;
}

#main .hclinic-price-notice [style] {
	color: var(--hc-slate-muted) !important;
	font-size: .875rem !important;
}

/* Red section rules from the old design become one neutral hairline. */
#main .vc_separator .vc_sep_line {
	border-top-color: var(--hc-border-subtle) !important;
	border-top-width: 1px !important;
}

/* ==========================================================================================
   Booking call-to-action under card groups
   The Ultimate Addons wrapper left-aligns the button and sits flush against the cards above it.
   ========================================================================================== */

#content .ult-modal-input-wrapper {
	display: flex;
	justify-content: center;
	margin: var(--hc-space-5) 0 var(--hc-space-6);
}

/* ==========================================================================================
   Price alert callout (/zini/ and the other price templates)
   The saved content is four loose, centred elements: a red caps warning, the phone number, a
   red 8pt disclaimer and an empty &nbsp; paragraph. They read as one message, so they are one
   card. The date notice and the page title stay separate rows above it.
   ========================================================================================== */

#content .wpb_text_column:has(> .wpb_wrapper > h3 > a[href^="tel:"]) {
	margin-bottom: 0;
}

#content .wpb_text_column:has(> .wpb_wrapper > h3 > a[href^="tel:"]) > .wpb_wrapper {
	box-sizing: border-box;
	max-width: 45rem;
	margin: 0 auto;
	padding: 1.25rem;
	border: 1px solid var(--hc-border-subtle);
	border-radius: 12px;
	background: var(--hc-card-bg);
	box-shadow: var(--hc-shadow-sm);
	text-align: center;
}

#content .wpb_text_column:has(> .wpb_wrapper > h3 > a[href^="tel:"]) h3 {
	margin: 0;
	text-align: center !important;
}

/* Warning: the one urgent line, in the alert hue at body size (it is typed in capitals). */
#content .wpb_text_column:has(> .wpb_wrapper > h3 > a[href^="tel:"]) h3:not(:has(a)) {
	color: var(--hc-alert);
	font-size: .9375rem;
	font-weight: 700;
	letter-spacing: .01em;
	line-height: 1.45;
}

#content .wpb_text_column:has(> .wpb_wrapper > h3 > a[href^="tel:"]) h3 [style] {
	color: inherit !important;
	font-size: inherit !important;
}

/* Phone: a tappable pill, not an unstyled grey line. */
#content .wpb_text_column:has(> .wpb_wrapper > h3 > a[href^="tel:"]) h3 > a[href^="tel:"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: var(--hc-tap);
	margin: .75rem 0;
	padding: 0 1.25rem;
	border: 1px solid #bae6fd;
	border-radius: var(--hc-radius-pill);
	background: var(--hc-blue-surface);
	color: var(--hc-navy-deep);
	font-size: 1.375rem;
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	letter-spacing: .01em;
	text-decoration: none;
	transition: background-color var(--hc-duration-fast) var(--hc-ease-standard),
		color var(--hc-duration-fast) var(--hc-ease-standard),
		transform var(--hc-duration-fast) var(--hc-ease-standard);
}

#content .wpb_text_column:has(> .wpb_wrapper > h3 > a[href^="tel:"]) h3 > a[href^="tel:"]:hover {
	background: var(--hc-blue-primary);
	color: #fff;
	transform: translateY(-1px);
}

/* Disclaimer: small print, muted. Red here was shouting a routine note. */
#content .wpb_text_column:has(> .wpb_wrapper > h3 > a[href^="tel:"]) p {
	margin: 0;
	color: var(--hc-slate-muted);
	font-size: .75rem;
	line-height: 1.5;
	text-align: center !important;
}

#content .wpb_text_column:has(> .wpb_wrapper > h3 > a[href^="tel:"]) p [style] {
	color: inherit !important;
	font-size: inherit !important;
}

/* The trailing <p>&nbsp;</p> is the only paragraph in the card without an element child. */
#content .wpb_text_column:has(> .wpb_wrapper > h3 > a[href^="tel:"]) p:not(:has(*)) {
	display: none;
}

/* ==========================================================================================
   Accordions and tabs
   ========================================================================================== */

#main .vc_tta-panel-heading,
#main .wpb_accordion .wpb_accordion_wrapper .wpb_accordion_header {
	border: 1px solid var(--hc-border-subtle);
	border-radius: var(--hc-radius-sm);
	background: var(--hc-card-bg);
	box-shadow: none;
}

#main .vc_tta-panel-title > a {
	min-height: var(--hc-tap);
	font-weight: 600;
}

/* ==========================================================================================
   Cookie notice (LuckyWP): a slim bar, not a quarter of the screen
   ========================================================================================== */

.lwpcngNoticeBar.lwpcngNoticeBar-bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: .5rem 1.25rem;
	box-sizing: border-box;
	padding: .75rem var(--hc-gutter);
	background: rgba(10, 25, 47, .97);
	box-shadow: 0 -8px 24px rgba(10, 25, 47, .18);
	font-family: var(--hc-font);
}

.lwpcngNotice_message {
	flex: 1 1 22rem;
	max-width: 60rem;
	margin: 0;
	color: #e2e8f0;
	font-size: .875rem;
	line-height: 1.5;
	text-align: left;
}

.lwpcngNotice_buttons {
	display: flex;
	flex: 0 0 auto;
	gap: .5rem;
	margin: 0;
}

.lwpcngNotice_accept,
.lwpcngNotice_reject {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 6rem;
	min-height: var(--hc-tap);
	margin: 0;
	padding: 0 1.125rem;
	box-sizing: border-box;
	border: 1px solid rgba(255, 255, 255, .35);
	border-radius: var(--hc-radius-sm);
	background: transparent;
	color: #fff;
	cursor: pointer;
	font-size: .875rem;
	font-weight: 600;
	transition: background-color var(--hc-duration-fast) var(--hc-ease-standard);
}

.lwpcngNotice_accept {
	border-color: var(--hc-blue-primary);
	background: var(--hc-blue-primary);
}

.lwpcngNotice_accept:hover {
	background: var(--hc-blue-primary-dark);
}

.lwpcngNotice_reject:hover {
	background: rgba(255, 255, 255, .1);
}

@media (max-width: 600px) {
	.lwpcngNotice_buttons {
		width: 100%;
	}

	.lwpcngNotice_accept,
	.lwpcngNotice_reject {
		flex: 1 1 0;
	}
}

/* ==========================================================================================
   Floating call widget (Binotel)
   ========================================================================================== */

/* The label inside the round icon ("КНОПКА ЗВ'ЯЗКУ") is injected by Binotel's script with its own
   display rule, so !important. It is the link's only text, so it is moved off-screen rather than
   removed: the button keeps its accessible name. */
#bingc-phone-button #bingc-phone-button-icon-text {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
	clip-path: inset(50%) !important;
	white-space: nowrap !important;
}

#bingc-phone-button {
	transition: transform var(--hc-duration-normal) var(--hc-ease-standard);
}

#bingc-phone-button:hover {
	transform: scale(1.05);
}