/* Product Pricing Matrix — front end. */

.wcpdm-nafc {
	font-style: italic;
}

/* Shortcode output carries no padding or spacing by default — the per-shortcode
   padding/margin fields in Products → Display add any wanted spacing. Every direct
   child (the heading and each content block) is zeroed so there is no erratic gap
   above or below the output; explicit padding/margin from the fields is applied
   inline and overrides these. */
.wcpdm-sc {
	margin: 0;
	padding: 0;
}

.wcpdm-sc > * {
	margin-top: 0;
	margin-bottom: 0;
	padding-top: 0;
	padding-bottom: 0;
}

/* Top-align Divi text modules that contain this plugin's output. Two
   inline-block modules otherwise align on their baselines, so a shorter module
   (e.g. the picker) drops down next to a taller one. This only has an effect
   when the module is inline-block; on normal block modules it is harmless. */
.et_pb_text:has( .wcpdm-pp ),
.et_pb_text:has( .wcpdm-sc ) {
	vertical-align: top !important;
}

/* On phones, let side-by-side inline-block modules stack vertically so the
   right block falls below the left instead of being squeezed beside it. */
@media ( max-width: 767px ) {
	.et_pb_text:has( .wcpdm-pp ),
	.et_pb_text:has( .wcpdm-sc ) {
		display: block !important;
		width: 100% !important;
	}
}

/* Period pricing picker. Borderless by default; the current period is
   distinguished by text colour (editable), not a background. */
.wcpdm-pp {
	--wcpdm-pp-row-h: 44px;
	--wcpdm-pp-current-color: #07aced;
	display: block;
	width: auto;
	max-width: 360px;
	text-align: left;
	box-sizing: border-box;
}

.wcpdm-pp *,
.wcpdm-pp *::before,
.wcpdm-pp *::after {
	box-sizing: border-box;
}

.wcpdm-pp-scroll {
	max-height: calc( var( --wcpdm-pp-visible, 3 ) * var( --wcpdm-pp-row-h ) );
	overflow-y: auto;
	scrollbar-gutter: stable;
	-webkit-overflow-scrolling: touch;
}

/* Reserve room for the sticky header row when one is shown. */
.wcpdm-pp--head .wcpdm-pp-scroll {
	max-height: calc( ( var( --wcpdm-pp-visible, 3 ) + 1 ) * var( --wcpdm-pp-row-h ) );
}

/* Shared two-column grid keeps the Period/Price columns aligned between the
   header and the rows, scrollbar gutter included. */
.wcpdm-pp-head,
.wcpdm-pp-row {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 12px;
	align-items: center;
	height: var( --wcpdm-pp-row-h );
	padding: 0 14px;
}

.wcpdm-pp-head {
	position: sticky;
	top: 0;
	z-index: 1;
	font-weight: 600;
	background: var( --wcpdm-pp-head-bg, #fff );
}

.wcpdm-pp-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.wcpdm-pp-range {
	text-align: left;
	white-space: nowrap;
	color: var( --wcpdm-pp-range-color, inherit );
}

.wcpdm-pp-price {
	text-align: right;
	font-weight: 600;
	color: var( --wcpdm-pp-price-color, inherit );
}

/* Current period: highlighted by font colour (and an optional background). */
.wcpdm-pp-current {
	color: var( --wcpdm-pp-current-color, #07aced );
	background: var( --wcpdm-pp-current-bg, transparent );
	font-weight: 600;
}

.wcpdm-pp-current .wcpdm-pp-range,
.wcpdm-pp-current .wcpdm-pp-price {
	color: inherit;
}