/* Mobile quick-links bar (inc/mobile-quick-links.php). Bar shows <=600px only;
   the support drawer works at any width but is only openable from the bar. */

#orthexa-quick-links {
	display: none;
}

@media (max-width: 600px) {
	body {
		padding-bottom: calc(64px + env(safe-area-inset-bottom));
	}

	/* The bar's Cart button replaces FKCart's floating icon, which would
	   otherwise sit on top of the bar. */
	#fkcart-floating-toggler {
		display: none !important;
	}

	#orthexa-quick-links {
		display: flex;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 9998;
		background: #fff;
		border-top: 1px solid #ececec;
		box-shadow: 0 -2px 14px rgba(0, 0, 0, 0.07);
		padding: 7px 0 calc(7px + env(safe-area-inset-bottom));
	}

	/* Lift the product page's sticky add-to-cart clear of the bar. */
	.sticky-add-to-cartwrapper {
		bottom: calc(76px + env(safe-area-inset-bottom));
	}
}

.orthexa-ql-item {
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	background: none;
	border: 0;
	padding: 2px 0;
	margin: 0;
	color: #222529;
	font-size: 12px;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.orthexa-ql-item:hover,
.orthexa-ql-item:focus {
	color: #222529;
	text-decoration: none;
	background: none;
	outline: none;
}

/* The discounts label reuses the existing lowercase 'discount' porto-child
   string ("popust", "popusti", ...); capitalize it for display. */
.orthexa-ql-label {
	text-transform: capitalize;
}

.orthexa-ql-icon {
	position: relative;
	display: block;
	height: 26px;
}

.orthexa-ql-icon i {
	display: block;
	font-size: 25px;
	line-height: 26px;
	margin: 0;
}

.orthexa-ql-count {
	position: absolute;
	top: -6px;
	right: -10px;
	min-width: 17px;
	height: 17px;
	padding: 0 4px;
	border-radius: 9px;
	background: var(--e-global-color-quaternary, #383f48);
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	line-height: 17px;
	text-align: center;
	display: none;
}

/* The button carries .open-popup-button-top-bar only for its delegated click
   handler (discount-popup.js); undo that class's top-bar pill styling here. */
#orthexa-ql-cart.open-popup-button-top-bar {
	background: none;
	padding: 2px 0;
	margin: 0;
	border-radius: 0;
	text-transform: none;
	font-weight: 400;
	font-size: 12px;
	white-space: normal;
	z-index: auto;
}

#orthexa-ql-cart.open-popup-button-top-bar::after {
	content: none;
}

/* Middle button state: default = Discounts (empty cart); JS adds .has-items. */
#orthexa-ql-cart .orthexa-ql-icon-cart,
#orthexa-ql-cart .orthexa-ql-label-cart {
	display: none;
}

#orthexa-ql-cart.has-items .orthexa-ql-icon-cart,
#orthexa-ql-cart.has-items .orthexa-ql-label-cart {
	display: block;
}

#orthexa-ql-cart.has-items .orthexa-ql-icon-discounts,
#orthexa-ql-cart.has-items .orthexa-ql-label-discounts {
	display: none;
}

#orthexa-ql-cart.has-items .orthexa-ql-count {
	display: block;
}

/* Compact bar on short viewports (small phones / browser UI eating height). */
@media (max-width: 600px) and (max-height: 700px) {
	body {
		padding-bottom: calc(52px + env(safe-area-inset-bottom));
	}

	.sticky-add-to-cartwrapper {
		bottom: calc(64px + env(safe-area-inset-bottom));
	}

	#orthexa-quick-links {
		padding: 4px 0 calc(4px + env(safe-area-inset-bottom));
	}

	.orthexa-ql-item,
	#orthexa-ql-cart.open-popup-button-top-bar {
		font-size: 11px;
		gap: 2px;
	}

	.orthexa-ql-icon {
		height: 20px;
	}

	.orthexa-ql-icon i {
		font-size: 19px;
		line-height: 20px;
	}

	.orthexa-ql-count {
		top: -5px;
		right: -8px;
		min-width: 15px;
		height: 15px;
		line-height: 15px;
		font-size: 10px;
	}
}

/* -------- Support drawer (Intercom-style bottom sheet) -------- */

#orthexa-support-overlay {
	position: fixed;
	inset: 0;
	z-index: 100000;
	background: rgba(15, 23, 42, 0.45);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.25s ease, visibility 0.25s ease;
}

#orthexa-support {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 100001;
	display: flex;
	flex-direction: column;
	max-height: 88dvh;
	background: #fff;
	border-radius: 20px 20px 0 0;
	box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.18);
	transform: translateY(105%);
	visibility: hidden;
	transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1), visibility 0.32s;
}

body.orthexa-support-open #orthexa-support-overlay {
	opacity: 1;
	visibility: visible;
}

body.orthexa-support-open #orthexa-support {
	transform: translateY(0);
	visibility: visible;
}

body.orthexa-support-open {
	overflow: hidden;
}

@media (min-width: 601px) {
	#orthexa-support {
		left: auto;
		right: 24px;
		bottom: 24px;
		width: 400px;
		max-height: 72vh;
		border-radius: 16px;
		transform: translateY(24px);
		opacity: 0;
		transition: transform 0.25s ease, opacity 0.25s ease, visibility 0.25s;
	}

	body.orthexa-support-open #orthexa-support {
		opacity: 1;
	}
}

.orthexa-support-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 18px 20px;
	border-radius: inherit;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	background: linear-gradient(135deg, #1e306e 0%, #243983 60%, #1c5fa8 100%);
	color: #fff;
	flex-shrink: 0;
}

.orthexa-support-avatar {
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
}

.orthexa-support-head .orthexa-support-avatar {
	width: 40px;
	height: 40px;
	border: 2px solid rgba(255, 255, 255, 0.35);
}

.orthexa-support-head-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	flex: 1;
	min-width: 0;
}

.orthexa-support-title {
	font-size: 17px;
	font-weight: 700;
	line-height: 1.2;
	color: #fff;
}

.orthexa-support-subtitle {
	font-size: 13px;
	line-height: 1.3;
	color: rgba(255, 255, 255, 0.75);
}

.orthexa-support-close {
	background: rgba(255, 255, 255, 0.12);
	border: 0;
	border-radius: 50%;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	flex-shrink: 0;
	padding: 0 0 2px;
}

.orthexa-support-close:hover {
	background: rgba(255, 255, 255, 0.22);
}

.orthexa-support-body {
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
}

.orthexa-support-message-row {
	display: flex;
	align-items: flex-end;
	gap: 8px;
	margin: 0 24px 16px 0;
}

.orthexa-support-message-row .orthexa-support-avatar-sm {
	width: 28px;
	height: 28px;
}

.orthexa-support-message {
	background: #f2f4f7;
	border-radius: 16px 16px 16px 4px;
	padding: 12px 14px;
	font-size: 14px;
	line-height: 1.55;
	color: #222529;
}

/* The ID outranks the Elementor-generated per-template rows-gap rule. */
#orthexa-support .elementor-field-group:not(.elementor-field-type-submit) {
	margin-bottom: 14px;
}

/* Elementor renders the success message dark-on-dark inside the drawer. */
#orthexa-support .elementor-message.elementor-message-success.elementor-message-svg {
	color: white;
}