/**
 * The add-listing page's choice of type, on both sites: MyListing's type
 * cards (templates/add-listing/choose-type.php, the "Add listing" widget)
 * as the guide's cards, after the package cards of add-listing.css: a
 * bordered card, the type's icon in a 48px icon tile, its name at 20px, an
 * arrow at the right, lifting on hover. MyListing's flip to a black
 * "Choose type" side is left out. Built for Swiss Biotech Day on October 7,
 * 2026 (sites/sbd/add-listing.css until then), SBA's page since October
 * 12, 2026. See docs/add-listing.md.
 *
 * MyListing sets the card's height per column class and positions both
 * faces absolutely; the selectors carry `.i-section.choose-type` to win
 * over its rules, and !important only where MyListing writes the icon's
 * color inline (SBA's widget also sets a color per type).
 */


/* The widget in the content width with the 16px gutter, as the components'
   .sba-c-container: the page's container or section is full width, and
   Elementor's boxed width would center 1400px without the gutter. Five
   classes: Elementor resets a container's widgets to max-width 100% with
   four (.elementor.elementor .e-con > .elementor-widget). SBD's page is
   built from containers, SBA's from sections. */
body.page .elementor .e-con > .elementor-widget.elementor-widget-case27-add-listing-widget,
body.page .elementor .elementor-section .elementor-widget.elementor-widget-case27-add-listing-widget {
	width: 100%;
	max-width: var(--sba-container-max);
	margin-right: auto;
	margin-left: auto;
	padding-right: 16px;
	padding-left: 16px;
	box-sizing: border-box;
}

/* The grid on the content's edge, as the hero's text above, with 24px
   between the cards; MyListing's Bootstrap columns add 10px to 15px. */
.i-section.choose-type .container-fluid {
	padding-right: 0;
	padding-left: 0;
}

.i-section.choose-type .row {
	margin-right: -12px;
	margin-left: -12px;
}

.i-section.choose-type .ac-category {
	height: auto;
	margin-bottom: 24px;
	padding-right: 12px;
	padding-left: 12px;
	perspective: none;
}

.i-section.choose-type .cat-card {
	height: auto;
	transform-style: flat;
	transition: none;
}

.i-section.choose-type .cat-card a {
	display: block;
	text-decoration: none;
}

.i-section.choose-type .cat-card .face {
	position: static;
	width: auto;
	height: auto;
	transform: none;
	backface-visibility: visible;
}

.i-section.choose-type .cat-card .face.ac-back-side {
	display: none !important;
}

.i-section.choose-type .cat-card .face.ac-front-side {
	justify-content: flex-start;
	gap: 16px;
	padding: 24px;
	border: 1px solid var(--sba-border);
	border-radius: var(--sba-radius);
	background: var(--sba-surface);
	box-shadow: none;
	transition:
		transform var(--sba-duration-hover) ease,
		box-shadow var(--sba-duration-hover) ease,
		border-color var(--sba-duration-hover) ease;
}

.i-section.choose-type .cat-card:hover .face.ac-front-side,
.i-section.choose-type .cat-card a:focus-visible .face.ac-front-side {
	transform: translateY(-4px);
	border-color: var(--sba-red);
	box-shadow: 0 10px 25px -5px hsl(var(--sba-charcoal-hsl) / 0.1);
}

.i-section.choose-type .cat-card a:focus-visible {
	outline: none;
}

.i-section.choose-type .hovering-c {
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	gap: 16px;
	padding: 0;
	transform: none;
	text-align: left;
}

/* The icon tile, as on the package cards. */
.i-section.choose-type .ac-front-side .cat-icon {
	display: flex;
	flex: 0 0 48px;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	margin: 0;
	border-radius: var(--sba-radius);
	background: var(--sba-icon-tile-bg) !important;
	color: var(--sba-icon-tile-color) !important;
}

/* MyListing colors the glyph itself white, for its colored circle. */
.i-section.choose-type .ac-front-side .cat-icon i {
	color: var(--sba-icon-tile-color);
	font-size: 24px;
	line-height: 1;
}

.i-section.choose-type .ac-front-side .category-name {
	top: 0;
	color: var(--sba-charcoal);
	font-family: var(--sba-font-sans);
	font-size: 20px;
	font-weight: var(--sba-heading-weight);
	letter-spacing: var(--sba-heading-tracking);
	line-height: 28px;
	text-align: left;
}

/* The arrow at the right, moving 4px on hover like a button's. */
.i-section.choose-type .face.ac-front-side::after {
	content: "";
	position: static;
	flex: 0 0 16px;
	width: 16px;
	height: 16px;
	background-color: var(--sba-red-dark);
	-webkit-mask: url("../icons/lucide/arrow-right.svg") center / contain no-repeat;
	mask: url("../icons/lucide/arrow-right.svg") center / contain no-repeat;
	transition: transform var(--sba-duration-hover) ease;
}

.i-section.choose-type .face.ac-front-side::before {
	content: none;
}

.i-section.choose-type .cat-card:hover .face.ac-front-side::after {
	transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
	.i-section.choose-type .cat-card:hover .face.ac-front-side,
	.i-section.choose-type .cat-card:hover .face.ac-front-side::after {
		transform: none;
	}
}


/* The confirmation after the form (templates/add-listing/done.php), on
   both sites: the check in the icon tile's red, a title, one paragraph
   and the two buttons, centered in a narrow column. */
.sba-submitted {
	max-width: 36rem;
	margin: 0 auto;
	padding: 48px 16px 64px;
	text-align: center;
	color: var(--sba-charcoal);
}

.sba-submitted .sba-submitted-icon {
	display: inline-block;
	font-size: 48px;
	line-height: 1;
	margin-bottom: 20px;
	color: var(--sba-red);
}

.sba-submitted .sba-submitted-title {
	margin: 0 0 12px;
	font-size: 28px;
	line-height: 36px;
	font-weight: 700;
}

.sba-submitted .sba-submitted-text {
	margin: 0 0 28px;
	font-size: 16px;
	line-height: 26px;
	color: hsl(var(--sba-charcoal-hsl) / 0.72);
}

.sba-submitted .sba-submitted-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
}

@media (min-width: 768px) {
	.sba-submitted {
		padding: 64px 16px 96px;
	}

	.sba-submitted .sba-submitted-title {
		font-size: 32px;
		line-height: 40px;
	}
}