/* StarwayPay Product Showcase -- single product page restyle */

/* Note: overall column widths/gaps/breakpoints for the product page are
   already fully owned by wp-content/mu-plugins/starway-ppom-style-fix.php
   (precisely tuned mobile/tablet/desktop layout) -- intentionally not
   touched or overridden here to avoid fighting that existing math. */

/* Ad banner slot (left column, top) */
.swc-banner {
	display: block;
	margin-bottom: 16px;
	border-radius: 14px;
	overflow: hidden;
	line-height: 0;
}
.swc-banner-img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 14px;
}

/* Trust badges */
.swc-trust-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 14px 0 18px;
}
.swc-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 600;
	color: #fff;
	background: linear-gradient(135deg, #5b7fff 0%, #a855f7 100%);
	padding: 7px 14px;
	border-radius: 999px;
}
.swc-badge-icon {
	font-size: 13px;
	line-height: 1;
}

/* Product description -- the template now renders the FULL description
   (wp:post-content) instead of an auto-trimmed excerpt (wp:post-excerpt
   strips all HTML tags when no manual short description is set, which is
   why headings/lists/paragraphs were collapsing into one run-on block of
   text -- a content-formatting problem, not something CSS alone could
   fix). These rules just give the now-preserved h2/ol/p structure normal
   spacing to match the reference layout. */
.single-product .wp-block-post-content {
	line-height: 1.7;
}
.single-product .wp-block-post-content h2,
.single-product .wp-block-post-content h3 {
	font-size: 16px;
	font-weight: 700;
	margin: 18px 0 8px;
}
.single-product .wp-block-post-content p {
	margin: 10px 0;
}
.single-product .wp-block-post-content ol,
.single-product .wp-block-post-content ul {
	margin: 8px 0;
	padding-left: 22px;
}
.single-product .wp-block-post-content li {
	margin: 4px 0;
}
.single-product .wp-block-post-content a {
	text-decoration: underline;
}

/* PPOM option regrouping -- showcase.js reorders EXISTING .form-check
   cards in place via the `order` CSS property and injects these heading
   divs as extra siblings inside the same field wrapper (never relocating
   a card out of its `[class*="ppom-input-"]` parent, since that parent
   is what starway-ppom-style-fix.php's card styling and click-delegation
   both key off). */
.swc-inline-heading {
	flex-basis: 100% !important;
	width: 100% !important;
	font-size: 14px;
	font-weight: 700;
	color: #fff;
	padding-left: 10px;
	margin: 10px 0 2px;
	border-left: 3px solid #5b7fff;
}
.swc-inline-heading.swc-promo {
	border-left-color: #a855f7;
}

/* A promo-tagged card keeps its normal position among its siblings
   (reordered to the front of its group) and gets a small ribbon instead
   of being duplicated -- cloning would recreate the exact duplicate-id
   bug already fixed once in starway-ppom-style-fix.php ("Area
   unclickable"). */
.swc-is-promo {
	box-shadow: 0 0 0 1px rgba(168, 85, 247, 0.6) !important;
}
.swc-is-promo::after {
	content: 'Promo';
	position: absolute;
	top: -8px;
	right: -6px;
	background: linear-gradient(135deg, #5b7fff 0%, #a855f7 100%);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	padding: 2px 8px;
	border-radius: 999px;
	z-index: 4;
	pointer-events: none;
}

/* Site-wide product-page popup ad */
.swc-popup-overlay {
	position: fixed;
	inset: 0;
	background: rgba(10, 13, 26, 0.72);
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}
.swc-popup-box {
	position: relative;
	max-width: 480px;
	width: 100%;
}
.swc-popup-box img {
	width: 100%;
	height: auto;
	border-radius: 16px;
	display: block;
}
.swc-popup-close {
	position: absolute;
	top: -14px;
	right: -14px;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: #fff;
	color: #111;
	border: none;
	font-size: 18px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}