/**
 * Beeline Quick Add - front end styles.
 *
 * Layout and visibility rules carry !important because page-builder themes
 * (Divi in particular) ship broad global selectors that otherwise catch the
 * popup's generic elements and hide or restyle them.
 */

/* -------------------------------------------------------------------------
 * Shell
 * ---------------------------------------------------------------------- */

.bqa-modal {
	position: fixed !important;
	inset: 0 !important;
	z-index: 999999 !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	font-family: var( --bqa-font, inherit );
	color: var( --bqa-text, #1f2933 );
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.18s ease, visibility 0.18s ease;
	-webkit-font-smoothing: antialiased;
}

.bqa-modal[hidden] {
	display: none !important;
}

.bqa-modal.is-open {
	opacity: 1;
	visibility: visible;
}

.bqa-modal__overlay {
	position: absolute !important;
	inset: 0 !important;
	background: var( --bqa-overlay, rgba( 11, 18, 32, 0.55 ) );
}

.bqa-modal__panel {
	position: relative !important;
	box-sizing: border-box !important;
	width: calc( 100% - 32px );
	max-width: var( --bqa-max-width, 460px );
	max-height: calc( 100vh - 48px );
	overflow-y: auto;
	overscroll-behavior: contain;
	background: var( --bqa-panel, #fff );
	border-radius: var( --bqa-radius, 12px );
	box-shadow: 0 24px 60px -12px rgba( 12, 18, 28, 0.35 );
	padding: 28px 24px 20px;
	transform: translateY( 12px ) scale( 0.98 );
	transition: transform 0.22s cubic-bezier( 0.2, 0.9, 0.3, 1 );
	outline: none;
	text-align: left;
}

.bqa-modal.is-open .bqa-modal__panel {
	transform: none;
}

.bqa-modal__panel.is-busy {
	opacity: 0.55;
	pointer-events: none;
}

/* Side drawer */
.bqa-modal--right {
	justify-content: flex-end;
	align-items: stretch;
}

.bqa-modal--right .bqa-modal__panel {
	width: var( --bqa-max-width, 460px );
	max-width: 100%;
	max-height: 100%;
	border-radius: 0;
	padding-top: 40px;
	transform: translateX( 24px );
}

/* Bottom sheet */
.bqa-modal--bottom {
	align-items: flex-end;
}

.bqa-modal--bottom .bqa-modal__panel {
	width: 100%;
	max-width: 100%;
	border-radius: var( --bqa-radius, 12px ) var( --bqa-radius, 12px ) 0 0;
	transform: translateY( 24px );
}

.bqa-modal__close {
	position: absolute !important;
	top: 10px;
	right: 10px;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	background: transparent !important;
	color: var( --bqa-muted, #6b7480 ) !important;
	cursor: pointer;
	line-height: 1 !important;
	box-shadow: none !important;
}

.bqa-modal__close:hover,
.bqa-modal__close:focus {
	background: var( --bqa-secondary, #eef1f4 ) !important;
	color: var( --bqa-text, #1f2933 ) !important;
}

.bqa-modal__error {
	margin: 0 0 4px;
	padding: 12px 14px;
	border-radius: calc( var( --bqa-radius, 12px ) - 4px );
	background: #fdecec;
	color: #8a1f1f;
	font-size: 0.95em;
	line-height: 1.45;
}

.bqa-live-region {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect( 1px, 1px, 1px, 1px );
	clip-path: inset( 50% );
	white-space: nowrap;
}

body.bqa-modal-open {
	overflow: hidden;
}

/* -------------------------------------------------------------------------
 * Stages
 * ---------------------------------------------------------------------- */

.bqa-stage {
	display: flex !important;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	padding: 12px 0 18px;
	text-align: center;
}

.bqa-stage[hidden] {
	display: none !important;
}

.bqa-stage__text {
	margin: 0 !important;
	font-size: 1.05em;
	font-weight: 600;
	color: var( --bqa-text, #1f2933 );
}

.bqa-anim-wrap {
	display: flex !important;
	align-items: center;
	justify-content: center;
	color: var( --bqa-accent, #1f7a5a );
}

.bqa-anim-wrap--loading,
.bqa-anim-wrap--loading .bqa-anim {
	width: var( --bqa-loading-size, 120px );
	height: var( --bqa-loading-size, 120px );
}

.bqa-anim-wrap--success,
.bqa-anim-wrap--success .bqa-anim {
	width: var( --bqa-success-size, 96px );
	height: var( --bqa-success-size, 96px );
}

.bqa-anim--image {
	max-width: 100%;
	height: auto !important;
	object-fit: contain;
}

.bqa-anim--lottie svg {
	display: block;
	width: 100% !important;
	height: 100% !important;
}

/* Ring */
.bqa-ring__spin {
	transform-origin: center;
	stroke-dasharray: 90 160;
	animation: bqa-spin 1.1s linear infinite;
}

@keyframes bqa-spin {
	to {
		transform: rotate( 360deg );
	}
}

/* Dots */
.bqa-anim--dots {
	display: flex !important;
	align-items: center;
	justify-content: center;
	gap: 10px;
	height: auto !important;
}

.bqa-anim--dots span {
	display: block;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: currentColor;
	animation: bqa-bounce 0.9s ease-in-out infinite;
}

.bqa-anim--dots span:nth-child( 2 ) {
	animation-delay: 0.15s;
}

.bqa-anim--dots span:nth-child( 3 ) {
	animation-delay: 0.3s;
}

@keyframes bqa-bounce {
	0%, 80%, 100% {
		transform: translateY( 0 );
		opacity: 0.45;
	}
	40% {
		transform: translateY( -10px );
		opacity: 1;
	}
}

/* Bar */
.bqa-anim--bar {
	position: relative;
	width: 100% !important;
	max-width: 240px;
	height: 6px !important;
	border-radius: 99px;
	background: var( --bqa-secondary, #eef1f4 );
	overflow: hidden;
}

.bqa-anim--bar span {
	position: absolute;
	inset: 0 auto 0 0;
	width: 40%;
	border-radius: 99px;
	background: currentColor;
	animation: bqa-slide 1.2s ease-in-out infinite;
}

@keyframes bqa-slide {
	0% {
		transform: translateX( -100% );
	}
	100% {
		transform: translateX( 250% );
	}
}

/* Pulse */
.bqa-anim--pulse {
	position: relative;
}

.bqa-anim--pulse span {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: currentColor;
	opacity: 0.35;
	animation: bqa-pulse 1.6s ease-out infinite;
}

.bqa-anim--pulse span:nth-child( 2 ) {
	animation-delay: 0.8s;
}

@keyframes bqa-pulse {
	0% {
		transform: scale( 0.4 );
		opacity: 0.5;
	}
	100% {
		transform: scale( 1 );
		opacity: 0;
	}
}

/* Bag */
.bqa-bag__item {
	animation: bqa-drop 1.4s ease-in-out infinite;
}

.bqa-bag__body {
	animation: bqa-squash 1.4s ease-in-out infinite;
	transform-origin: 32px 54px;
}

@keyframes bqa-drop {
	0% {
		transform: translateY( -6px );
		opacity: 0;
	}
	30% {
		opacity: 1;
	}
	60%, 100% {
		transform: translateY( 26px );
		opacity: 0;
	}
}

@keyframes bqa-squash {
	0%, 55%, 100% {
		transform: scaleY( 1 );
	}
	70% {
		transform: scaleY( 0.94 );
	}
}

/* Tick */
.bqa-tick__circle {
	stroke-dasharray: 145;
	stroke-dashoffset: 145;
	animation: bqa-draw 0.5s ease-out forwards;
}

.bqa-tick__check {
	stroke-dasharray: 40;
	stroke-dashoffset: 40;
	animation: bqa-draw 0.3s 0.35s ease-out forwards;
}

@keyframes bqa-draw {
	to {
		stroke-dashoffset: 0;
	}
}

/* -------------------------------------------------------------------------
 * Panel blocks
 * ---------------------------------------------------------------------- */

.bqa-modal__body[hidden],
.bqa-modal__actions[hidden] {
	display: none !important;
}

.bqa-modal__body {
	display: block !important;
	border-top: 1px solid var( --bqa-secondary, #eef1f4 );
	padding-top: 16px;
	margin-top: 4px;
}

.bqa-block {
	display: block !important;
	margin: 0 0 18px;
}

.bqa-block:last-child {
	margin-bottom: 8px;
}

.bqa-block__title {
	margin: 0 0 10px !important;
	padding: 0 !important;
	font-size: 0.8em !important;
	font-weight: 700 !important;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var( --bqa-muted, #6b7480 ) !important;
	line-height: 1.3 !important;
}

.bqa-modal__body ul {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* Added item */
.bqa-added__item,
.bqa-line {
	display: flex !important;
	align-items: flex-start;
	gap: 12px;
	padding: 10px 0;
	border-bottom: 1px solid var( --bqa-secondary, #eef1f4 );
}

.bqa-added__item:last-child,
.bqa-line:last-child {
	border-bottom: 0;
}

.bqa-added__media,
.bqa-line__media {
	flex: 0 0 56px;
	width: 56px;
}

.bqa-added__media img,
.bqa-line__media img,
.bqa-reco__media img {
	display: block !important;
	width: 100% !important;
	height: auto !important;
	border-radius: calc( var( --bqa-radius, 12px ) - 6px );
	margin: 0 !important;
}

.bqa-added__detail,
.bqa-line__detail {
	flex: 1 1 auto;
	min-width: 0;
}

.bqa-added__name,
.bqa-line__name {
	display: block !important;
	font-weight: 600;
	line-height: 1.35;
	color: var( --bqa-text, #1f2933 ) !important;
	text-decoration: none !important;
}

.bqa-added__qty,
.bqa-line__meta {
	display: block;
	margin-top: 3px;
	font-size: 0.85em;
	color: var( --bqa-muted, #6b7480 );
}

.bqa-line__meta p {
	margin: 0 !important;
}

.bqa-line__price {
	flex: 0 0 auto;
	text-align: right;
	font-weight: 600;
	white-space: nowrap;
}

.bqa-line__price .amount,
.bqa-total__value .amount {
	color: inherit;
}

.bqa-line__controls {
	display: flex !important;
	align-items: center;
	gap: 8px;
	margin-top: 8px;
}

.bqa-step {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	padding: 0 !important;
	margin: 0 !important;
	border: 1px solid var( --bqa-secondary, #eef1f4 ) !important;
	border-radius: 6px !important;
	background: transparent !important;
	color: var( --bqa-text, #1f2933 ) !important;
	font-size: 15px !important;
	line-height: 1 !important;
	cursor: pointer;
	box-shadow: none !important;
}

.bqa-step:hover {
	background: var( --bqa-secondary, #eef1f4 ) !important;
}

.bqa-line__qty {
	min-width: 20px;
	text-align: center;
	font-size: 0.9em;
	color: var( --bqa-muted, #6b7480 );
}

.bqa-line__remove {
	display: block !important;
	margin: 6px 0 0 auto !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	color: var( --bqa-muted, #6b7480 ) !important;
	font-size: 0.8em !important;
	text-decoration: underline;
	cursor: pointer;
	box-shadow: none !important;
}

.bqa-lines__more {
	margin: 8px 0 0 !important;
	font-size: 0.85em;
	color: var( --bqa-muted, #6b7480 );
}

/* Totals */
.bqa-total__row {
	display: flex !important;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 4px 0;
}

.bqa-total__row--total {
	margin-top: 6px;
	padding-top: 10px;
	border-top: 1px solid var( --bqa-secondary, #eef1f4 );
	font-size: 1.1em;
	font-weight: 700;
}

.bqa-total__label {
	color: var( --bqa-muted, #6b7480 );
}

.bqa-total__row--total .bqa-total__label {
	color: var( --bqa-text, #1f2933 );
}

.bqa-total__value {
	font-weight: 600;
}

.bqa-total__note {
	margin: 6px 0 0 !important;
	font-size: 0.8em;
	color: var( --bqa-muted, #6b7480 );
}

/* Savings */
.bqa-savings__current {
	margin: 0 0 10px !important;
	font-weight: 600;
	color: var( --bqa-accent, #1f7a5a );
}

.bqa-offer {
	display: flex !important;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	padding: 10px 12px;
	margin-bottom: 8px;
	border-radius: calc( var( --bqa-radius, 12px ) - 4px );
	background: var( --bqa-secondary, #eef1f4 );
	color: var( --bqa-secondary-text, #1f2933 );
	font-size: 0.9em;
	line-height: 1.4;
}

.bqa-offer:last-child {
	margin-bottom: 0;
}

.bqa-offer__text {
	flex: 1 1 auto;
}

.bqa-offer__action {
	flex: 0 0 auto;
	padding: 6px 12px !important;
	border: 0 !important;
	border-radius: 99px !important;
	background: var( --bqa-accent, #1f7a5a ) !important;
	color: var( --bqa-accent-text, #fff ) !important;
	font-size: 0.9em !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	cursor: pointer;
	box-shadow: none !important;
}

/* The store owner's own wording for a break or bundle tier. */
.bqa-offer__note {
	display: block;
	margin-top: 2px;
	opacity: 0.75;
	font-size: 0.9em;
}

/* Other products counting towards the same bundle. */
.bqa-offer__members {
	flex: 1 0 100%;
	margin-top: 2px;
	font-size: 0.85em;
	line-height: 1.5;
}

.bqa-offer__members-label {
	opacity: 0.75;
}

a.bqa-offer__member {
	color: inherit !important;
	text-decoration: underline !important;
}

a.bqa-offer__member:not( :last-child )::after {
	content: ",";
	text-decoration: none !important;
}

/* Free delivery */
.bqa-delivery__message {
	margin: 0 0 8px !important;
	font-weight: 600;
	line-height: 1.4;
}

.bqa-delivery--qualified .bqa-delivery__message {
	color: var( --bqa-accent, #1f7a5a );
}

.bqa-progress {
	position: relative;
	height: 8px;
	border-radius: 99px;
	background: var( --bqa-secondary, #eef1f4 );
	overflow: hidden;
}

.bqa-progress__fill {
	display: block;
	height: 100%;
	border-radius: 99px;
	background: var( --bqa-accent, #1f7a5a );
	transition: width 0.4s cubic-bezier( 0.2, 0.9, 0.3, 1 );
}

/* Recommendations */
.bqa-reco--cards {
	display: grid !important;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	gap: 12px;
}

.bqa-reco__item {
	display: flex !important;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.bqa-reco__link {
	display: block !important;
	text-decoration: none !important;
	color: var( --bqa-text, #1f2933 ) !important;
}

.bqa-reco__name {
	display: block;
	margin-top: 6px;
	font-size: 0.82em;
	line-height: 1.3;
}

.bqa-reco__price {
	display: block;
	font-size: 0.82em;
	font-weight: 600;
	color: var( --bqa-muted, #6b7480 );
}

.bqa-reco__price del {
	opacity: 0.6;
}

.bqa-reco__add {
	margin-top: auto !important;
	padding: 6px 8px !important;
	border: 1px solid var( --bqa-accent, #1f7a5a ) !important;
	border-radius: 99px !important;
	background: transparent !important;
	color: var( --bqa-accent, #1f7a5a ) !important;
	font-size: 0.8em !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	cursor: pointer;
	box-shadow: none !important;
}

.bqa-reco__add:hover {
	background: var( --bqa-accent, #1f7a5a ) !important;
	color: var( --bqa-accent-text, #fff ) !important;
}

.bqa-reco--engine {
	font-size: 0.9em;
}

.bqa-reco--engine img {
	height: auto !important;
}

/* Actions */
.bqa-modal__actions {
	display: flex !important;
	gap: 10px;
	padding-top: 14px;
	margin-top: 4px;
	border-top: 1px solid var( --bqa-secondary, #eef1f4 );
}

.bqa-btn {
	flex: 1 1 0;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	padding: 12px 16px !important;
	border: 0 !important;
	border-radius: calc( var( --bqa-radius, 12px ) - 4px ) !important;
	font-size: 0.95em !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	text-align: center;
	text-decoration: none !important;
	cursor: pointer;
	box-shadow: none !important;
	transition: filter 0.15s ease;
}

.bqa-btn:hover {
	filter: brightness( 0.94 );
}

.bqa-btn--primary {
	background: var( --bqa-accent, #1f7a5a ) !important;
	color: var( --bqa-accent-text, #fff ) !important;
}

.bqa-btn--secondary {
	background: var( --bqa-secondary, #eef1f4 ) !important;
	color: var( --bqa-secondary-text, #1f2933 ) !important;
}

.bqa-modal :focus-visible {
	outline: 2px solid var( --bqa-accent, #1f7a5a );
	outline-offset: 2px;
}

/* -------------------------------------------------------------------------
 * Small screens
 * ---------------------------------------------------------------------- */

@media ( max-width: 600px ) {
	.bqa-modal {
		align-items: flex-end;
	}

	.bqa-modal__panel {
		width: 100% !important;
		max-width: 100% !important;
		max-height: 88vh;
		border-radius: var( --bqa-radius, 12px ) var( --bqa-radius, 12px ) 0 0 !important;
		padding: 24px 18px 18px;
	}

	.bqa-reco--cards {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}

	.bqa-modal__actions {
		flex-direction: column;
	}
}

/* -------------------------------------------------------------------------
 * Reduced motion
 * ---------------------------------------------------------------------- */

@media ( prefers-reduced-motion: reduce ) {
	.bqa-modal,
	.bqa-modal__panel,
	.bqa-progress__fill,
	.bqa-btn {
		transition: none !important;
	}

	.bqa-ring__spin,
	.bqa-anim--dots span,
	.bqa-anim--bar span,
	.bqa-anim--pulse span,
	.bqa-bag__item,
	.bqa-bag__body {
		animation-duration: 2.4s !important;
	}

	.bqa-tick__circle,
	.bqa-tick__check {
		animation: none !important;
		stroke-dashoffset: 0 !important;
	}
}