/**
 * The panel that appears under a section after something is added to the cart.
 *
 * Sized for the people who buy this: older customers and their families. Body
 * text sits at 1.125rem rather than the 14px the page defaults to, the tick is
 * large enough to read at a glance, and both actions are full 56px targets so
 * they can be hit without precision. Colours come from the theme palette, and
 * the contrast of white on #3fa39c clears WCAG AA at this size.
 */
.hubhom-cart-panel {
	margin: var( --wp--preset--spacing--30, 1.5rem ) 0 0;
	padding: 1.5rem;
	border: 2px solid #3fa39c;
	border-radius: 14px;
	background: #f2fdfc;
	/* Lifts the panel off a page that is otherwise flat cards on white, so it
	   reads as a new thing that just happened rather than more page furniture. */
	box-shadow: 0 6px 20px rgba( 63, 163, 156, 0.18 );
	animation: hubhom-cart-panel-in 0.28s ease-out;
}

@keyframes hubhom-cart-panel-in {
	from {
		opacity: 0;
		transform: translateY( 10px );
	}
	to {
		opacity: 1;
		transform: translateY( 0 );
	}
}

/* Someone who asked for less motion still gets the panel, just without the
   slide — the panel is information, the animation is decoration. */
@media ( prefers-reduced-motion: reduce ) {
	.hubhom-cart-panel {
		animation: none;
	}
}

.hubhom-cart-panel__added {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	margin: 0 0 0.5rem;
	font-size: 1.25rem;
	line-height: 1.4;
	color: #1f4f4c;
}

.hubhom-cart-panel__tick {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	background: #3fa39c;
	color: #fff;
	font-size: 1.1rem;
	font-weight: 700;
}

.hubhom-cart-panel__summary {
	margin: 0 0 1rem;
	padding-left: 2.65rem;
	font-size: 1.125rem;
	color: #2f2f2f;
}

.hubhom-cart-panel__next {
	margin: 0 0 0.75rem;
	padding-left: 2.65rem;
	font-size: 1.125rem;
	font-weight: 600;
	color: #2f2f2f;
}

.hubhom-cart-panel__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	padding-left: 2.65rem;
}

/* Matching the theme's own button metrics keeps these from reading as a
   different kind of control to the ones the customer just used. */
/* Matched to the shop's own buttons, measured on the page: "Add Package to
   Cart" is 45px tall at 16px type with no border. The panel's first attempt at
   56px and 17px stood a head above everything around it and read as a
   different kind of control. Borders are drawn inside the box so the two
   buttons still line up despite the ghost one being outlined. */
.hubhom-cart-panel__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: 45px;
	padding: 0.6rem 1.5rem;
	border-radius: 999px;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.18s ease, color 0.18s ease;
}

/* Colour is also set as a style attribute when the panel is built. The
   DesignSetGo plugin paints every link in a group with an important rule that
   outranks anything declarable here, and a style attribute is the only place
   its selector cannot reach. These declarations stay as the fallback for when
   that plugin is not in play. */
.hubhom-cart-panel__button--primary,
.hubhom-cart-panel__button--primary:visited {
	border: 2px solid #3fa39c;
	background: #3fa39c;
	color: #fff;
}

.hubhom-cart-panel__button--primary:hover,
.hubhom-cart-panel__button--primary:focus {
	background: #2d7a75;
	border-color: #2d7a75;
	color: #fff;
}

.hubhom-cart-panel__button--ghost {
	border: 2px solid #3fa39c;
	background: transparent;
	color: #2d7a75;
}

.hubhom-cart-panel__button--ghost:hover,
.hubhom-cart-panel__button--ghost:focus {
	background: #e8f5f4;
}

.hubhom-cart-panel__button:focus-visible {
	outline: 3px solid #2d7a75;
	outline-offset: 3px;
}

/* On a phone the indent costs more than it buys, and side-by-side buttons get
   too narrow to read, so the panel goes to a single column. */
@media ( max-width: 600px ) {
	.hubhom-cart-panel {
		padding: 1.25rem;
	}

	.hubhom-cart-panel__summary,
	.hubhom-cart-panel__next,
	.hubhom-cart-panel__actions {
		padding-left: 0;
	}

	.hubhom-cart-panel__actions {
		flex-direction: column;
	}

	.hubhom-cart-panel__button {
		width: 100%;
	}
}

/* A last line of defence. The panel picks a wide container, but themes and
   page builders can still place a button somewhere unexpectedly narrow, and a
   squeezed panel is worse than an unstyled one: the first release wrapped its
   heading one character per line inside a 226px column. Below the point where
   the two-column action row stops fitting, everything goes to one column. */
@container ( max-width: 480px ) {
	.hubhom-cart-panel__actions {
		flex-direction: column;
	}

	.hubhom-cart-panel__button {
		width: 100%;
	}
}

.hubhom-cart-panel__added strong,
.hubhom-cart-panel__summary strong {
	/* Long product names must not force the panel wider than its column or
	   break mid-word; they wrap on spaces like ordinary prose. */
	overflow-wrap: break-word;
}