/* =========================================================
   AMP MICI — WooCommerce
   Block Theme integration
   ========================================================= */


/* =========================================================
   ORDER CONFIRMATION
   ========================================================= */

body.woocommerce-order-received {
	background: #f8f4fc;
}


.ampmici-order-confirmation {
	width: 100%;

	max-width: none !important;

	margin: 0 !important;

	padding:
		clamp(2rem, 4vw, 3.5rem)
		var(--wp--custom--layout--gutter, 24px)
		clamp(4rem, 7vw, 6rem);

	background:
		linear-gradient(
			180deg,
			#ffffff 0%,
			#f8f4fc 42%,
			#f8f4fc 100%
		);
}


.ampmici-order-confirmation__inner {
	width: 100%;

	max-width: 1240px;

	margin-inline: auto;
}


/* =========================================================
   HERO
   ========================================================= */

.ampmici-order-confirmation__hero {
	position: relative;

	display: flex;

	flex-direction: column;

	align-items: center;

	max-width: 780px;

	margin:
		0
		auto
		clamp(2rem, 4vw, 3rem);

	padding:
		clamp(1rem, 3vw, 2rem)
		1rem
		0;

	text-align: center;
}


.ampmici-order-confirmation__icon {
	display: grid;

	place-items: center;

	width: 76px;
	height: 76px;

	margin-bottom: 1.2rem;

	border-radius: 50%;

	background:
		linear-gradient(
			135deg,
			#f5ebfb,
			#ffffff
		);

	box-shadow:
		0 12px 30px
		rgba(75, 0, 130, .07);
}


.ampmici-order-confirmation__icon svg {
	width: 52px;
	height: 52px;

	fill: none;

	stroke: #4b0082;

	stroke-width: 3;

	stroke-linecap: round;

	stroke-linejoin: round;
}


.ampmici-order-confirmation__title {
	margin: 0 !important;

	color: #24113d;

	font-size:
		clamp(2.25rem, 4.5vw, 3.6rem);

	font-weight: 850;

	line-height: 1.2;

	text-align: center;
}


.ampmici-order-confirmation__lead {
	max-width: 650px;

	margin:
		.8rem
		auto
		0
	!important;

	color: #756a7d;

	font-size:
		clamp(.95rem, 1.15vw, 1.06rem);

	line-height: 1.8;

	text-align: center;
}


/*
 * Keep Woo status for failed/pending cases,
 * but visually suppress duplicate success message.
 */

.ampmici-order-status {
	margin-top: .75rem;
}


.ampmici-order-status
.wc-block-order-confirmation-status {
	color: #776c7c;

	font-size: .82rem;

	text-align: center;
}


/* =========================================================
   ORDER SUMMARY
   ========================================================= */

.ampmici-order-summary-card {
	margin-bottom: 1.3rem;
}


.ampmici-order-summary
.wc-block-order-confirmation-summary-list {
	display: grid !important;

	grid-template-columns:
		repeat(5, minmax(0, 1fr));

	gap: .8rem;

	margin: 0 !important;

	padding: 0 !important;

	list-style: none !important;
}


.ampmici-order-summary
.wc-block-order-confirmation-summary-list-item {
	display: flex;

	flex-direction: column;

	align-items: center;

	justify-content: center;

	min-width: 0;

	min-height: 125px;

	padding:
		1rem
		.8rem
	!important;

	box-sizing: border-box;

	border:
		1px solid
		rgba(75, 0, 130, .07);

	border-radius: 14px;

	background: #ffffff;

	text-align: center;

	box-shadow:
		0 7px 22px
		rgba(36, 17, 61, .028);
}


.ampmici-order-summary
.wc-block-order-confirmation-summary-list-item
> span:first-child {
	margin-bottom: .35rem;

	color: #4b0082;

	font-size: .74rem;

	font-weight: 850;
}


.ampmici-order-summary
.wc-block-order-confirmation-summary-list-item
> span:last-child {
	max-width: 100%;

	overflow-wrap: anywhere;

	color: #4c4054;

	font-size: .8rem;

	font-weight: 700;

	line-height: 1.55;
}


/* =========================================================
   GENERIC ORDER SECTION
   ========================================================= */

.ampmici-order-section {
	margin-top: 1.15rem;

	padding:
		1.25rem
		1.3rem
		1.35rem;

	border:
		1px solid
		rgba(75, 0, 130, .07);

	border-radius: 16px;

	background: #ffffff;

	box-shadow:
		0 7px 22px
		rgba(36, 17, 61, .025);
}


.ampmici-order-section__heading {
	display: flex !important;

	align-items: center;

	justify-content: flex-start;

	gap: .65rem;

	margin-bottom: 1rem;
}


.ampmici-order-section__icon {
	display: grid;

	place-items: center;

	flex: 0 0 auto;

	width: 34px;
	height: 34px;

	border-radius: 50%;

	background:
		rgba(75, 0, 130, .07);

	color: #4b0082;

	font-size: .7rem;

	font-weight: 900;
}


.ampmici-order-section__heading h2 {
	margin: 0 !important;

	color: #24113d;

	font-size:
		clamp(1.25rem, 2vw, 1.55rem);

	font-weight: 850;

	line-height: 1.4;
}


/* =========================================================
   ORDER TOTALS
   ========================================================= */

.ampmici-order-section
.wc-block-order-confirmation-totals-wrapper {
	margin: 0 !important;

	padding: 0 !important;
}


.ampmici-order-section
.wc-block-order-confirmation-totals {
	margin: 0 !important;

	padding: 0 !important;
}


/*
 * WooCommerce controls the internal table markup.
 * We style the component lightly rather than depending
 * on a deep fixed DOM structure.
 */

.ampmici-order-section
.wc-block-order-confirmation-totals
table {
	width: 100%;

	margin: 0 !important;

	border:
		1px solid
		rgba(75, 0, 130, .06);

	border-collapse: separate;

	border-spacing: 0;

	border-radius: 11px;

	overflow: hidden;
}


.ampmici-order-section
.wc-block-order-confirmation-totals
thead {
	background:
		linear-gradient(
			135deg,
			#faf6fc,
			#f6effa
		);
}


.ampmici-order-section
.wc-block-order-confirmation-totals
:where(th, td) {
	padding:
		.8rem
		1rem
	!important;

	border-color:
		rgba(75, 0, 130, .055)
	!important;

	color: #625769;

	font-size: .78rem;

	line-height: 1.6;

	text-align: right;
}


.ampmici-order-section
.wc-block-order-confirmation-totals
th {
	color: #24113d;

	font-weight: 850;
}


.ampmici-order-section
.wc-block-order-confirmation-totals
a {
	color: #4b0082;

	font-weight: 800;

	text-decoration: none;
}


.ampmici-order-section
.wc-block-order-confirmation-totals
tfoot
tr:last-child {
	background:
		linear-gradient(
			135deg,
			#fbf8fd,
			#f3eafa
		);
}


.ampmici-order-section
.wc-block-order-confirmation-totals
tfoot
tr:last-child
:where(th, td) {
	color: #4b0082;

	font-size: .9rem;

	font-weight: 850;
}


/* =========================================================
   BILLING ADDRESS
   ========================================================= */

.ampmici-order-section
.wc-block-order-confirmation-billing-wrapper {
	margin: 0 !important;

	padding: 0 !important;
}


.ampmici-order-section
.wc-block-order-confirmation-billing-address {
	margin: 0 !important;

	padding:
		1rem
		1.05rem
	!important;

	border:
		1px solid
		rgba(75, 0, 130, .055);

	border-radius: 10px;

	background:
		linear-gradient(
			135deg,
			#fcfafd,
			#f8f4fc
		);

	color: #625769;

	font-size: .8rem;

	line-height: 1.8;
}


/*
 * WooCommerce may include its own wrapper heading.
 * We already provide our own heading.
 */

.ampmici-order-section
.wc-block-order-confirmation-billing-wrapper
> h2 {
	display: none !important;
}


/* =========================================================
   ACTION BUTTONS
   ========================================================= */

.ampmici-order-actions {
	display: flex;

	flex-wrap: wrap;

	justify-content: center;

	gap: .7rem;

	margin-top: 1.6rem;
}


.ampmici-order-action {
	display: inline-flex;

	align-items: center;

	justify-content: center;

	gap: .5rem;

	min-height: 46px;

	padding:
		.6rem
		1.25rem;

	box-sizing: border-box;

	border-radius: 10px;

	font-size: .78rem;

	font-weight: 850;

	text-decoration: none !important;
}


.ampmici-order-action--primary {
	border:
		1px solid
		#4b0082;

	background: #4b0082;

	color: #ffffff !important;
}


.ampmici-order-action--primary:hover {
	border-color: #6a1b9a;

	background: #6a1b9a;
}


.ampmici-order-action--secondary {
	border:
		1px solid
		rgba(75, 0, 130, .27);

	background: #ffffff;

	color: #4b0082 !important;
}


.ampmici-order-action--secondary:hover {
	border-color: #4b0082;

	background: #faf6fc;
}


/* =========================================================
   GENERAL WOOCOMMERCE BASE
   Safe defaults for future Woo pages
   ========================================================= */

.woocommerce {
	font-family: inherit;
}


.woocommerce
:where(
	button,
	.button,
	input,
	select,
	textarea
) {
	font-family: inherit;
}


.woocommerce
a {
	transition:
		color .18s ease,
		background-color .18s ease,
		border-color .18s ease;
}


/* Woo buttons */

.woocommerce
:where(
	button.button,
	a.button,
	input.button
) {
	border-radius: 10px;

	font-weight: 800;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1050px) {

	.ampmici-order-summary
	.wc-block-order-confirmation-summary-list {
		grid-template-columns:
			repeat(3, minmax(0, 1fr));
	}

}


@media (max-width: 720px) {

	.ampmici-order-confirmation {
		padding:
			1.5rem
			16px
			4rem;
	}


	.ampmici-order-confirmation__icon {
		width: 64px;
		height: 64px;
	}


	.ampmici-order-confirmation__icon svg {
		width: 44px;
		height: 44px;
	}


	.ampmici-order-summary
	.wc-block-order-confirmation-summary-list {
		grid-template-columns:
			repeat(2, minmax(0, 1fr));
	}


	.ampmici-order-section {
		padding:
			1rem;
	}


	.ampmici-order-section
	.wc-block-order-confirmation-totals {
		overflow-x: auto;
	}


	.ampmici-order-section
	.wc-block-order-confirmation-totals
	table {
		min-width: 600px;
	}


	.ampmici-order-actions {
		flex-direction: column;
	}


	.ampmici-order-action {
		width: 100%;
	}

}


@media (max-width: 460px) {

	.ampmici-order-summary
	.wc-block-order-confirmation-summary-list {
		grid-template-columns: 1fr;
	}

}