/*
 * Shared saved-quote sticky action buttons + fixed price banner.
 *
 * Reusable across the price calculators (internal home, external home,
 * wallpapering, water damage repair, etc.).
 *
 * Markup:    views/partials/price-calculator-actions.ejs
 * Behaviour: /assets/js/price-calculator-actions.js  (window.SavedQuoteActions.init())
 */

.saved-quote-layout {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

#displaySavedQuoteActions {
	order: 1;
}

.saved-quote-intro-title {
	margin: 0;
	font-size: 1.05rem;
	font-weight: 700;
	color: #0f172a;
}

.saved-quote-intro-note {
	margin: 0;
	max-width: 80ch;
	font-size: 0.95rem;
	line-height: 1.45;
	color: #374151;
}

.saved-quote-intro-prompt {
	margin: 0;
	font-size: 1rem;
	font-weight: 600;
	color: #1f5f8b;
}

#displayPriceBreakdown {
	order: 2;
}

#displayShowHideMeasurementsLink {
	order: 3;
}

.saved-quote-actions-layout {
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	gap: 0.75rem;
	margin-top: 0.35rem;
}

.saved-quote-actions-main {
	flex: 1 1 auto;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0.5rem;
}

.saved-quote-actions-main .btn,
.saved-quote-actions-share .btn {
	/* Keep button and link labels text vertically aligned the same way. */
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	border-radius: 0.55rem;
	font-weight: 700;
	line-height: 1.2;
	padding: 0.6rem 0.8rem;
	white-space: normal;
}

.saved-quote-actions-share {
	flex: 0 0 auto;
	display: flex;
}

.saved-quote-actions-share .btn {
	min-width: 132px;
}

.saved-quote-actions-layout-sticky {
	width: 100%;
	max-width: 1100px;
	margin-top: 0;
	margin-left: auto;
	margin-right: auto;
	justify-content: center;
}

.saved-quote-actions-layout-sticky .saved-quote-actions-main {
	flex: 0 0 auto;
	width: auto;
	grid-template-columns: repeat(4, minmax(132px, 1fr));
}

.price-fixed-box {
	position: fixed;
	left: 0;
	right: 0;
	width: 100%;
	bottom: 0;
	top: auto !important;
	height: auto;
	background-color: #ffffff;
	padding: 0.25rem 0.5rem calc(0.25rem + env(safe-area-inset-bottom));
	text-align: center;
	z-index: 999;
	border-top: 1px solid #d1d5db;
	box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: center;
	gap: 0.35rem;
	min-height: 0;
}

.price-fixed-summary {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.35rem;
	flex-wrap: wrap;
}

.price-fixed-box #total-price {
	margin: 0 !important;
	line-height: 1;
	white-space: nowrap;
}

.price-fixed-box .price-fixed-note {
	font-size: 0.66rem;
	line-height: 1;
	color: #4b5563;
	white-space: nowrap;
}

body {
	padding-bottom: 10vh;
}

body.has-saved-quote-sticky-actions {
	padding-bottom: 220px;
}

@media (max-width: 991.98px) {
	.price-fixed-box {
		align-items: center;
		flex-direction: column;
		flex-wrap: nowrap;
		/* Add extra vertical space inside the mobile sticky price banner. */
		gap: 0.45rem;
		padding: 0.65rem 0.7rem calc(0.65rem + env(safe-area-inset-bottom));
	}

	.price-fixed-summary {
		flex-direction: column;
		gap: 0.2rem;
	}

	.price-fixed-box #total-price {
		line-height: 1.1;
	}

	.price-fixed-box .price-fixed-note {
		font-size: 0.82rem;
		line-height: 1.2;
	}

	body {
		padding-bottom: 15vh;
	}

	body.has-saved-quote-sticky-actions {
		padding-bottom: 255px;
	}
}

@media (max-width: 767.98px) {
	.saved-quote-actions-layout {
		flex-direction: column;
	}

	.saved-quote-actions-main {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.saved-quote-actions-layout-sticky .saved-quote-actions-main {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.saved-quote-actions-share .btn {
		min-width: 0;
		width: 100%;
	}

	.saved-quote-actions-layout-sticky .saved-quote-actions-main,
	.saved-quote-actions-layout-sticky .saved-quote-actions-share {
		width: 100%;
	}

	body.has-saved-quote-sticky-actions {
		padding-bottom: 315px;
	}
}

@media (min-width: 992px) {
	/* Desktop: add breathing room above and below the displayed price. */
	.price-fixed-box {
		padding-top: 0.7rem;
		padding-bottom: 0.7rem;
		gap: 0.5rem;
	}

	.price-fixed-summary {
		gap: 0.5rem;
	}
}

@media (min-width: 768px) {
	.price-fixed-box {
		left: 0 !important;
		right: 0 !important;
		top: auto !important;
		bottom: 0 !important;
		transform: none !important;
	}
}