/**
 * VM Savings Comparison Block - Styles
 *
 * @package VM_Base_Theme
 * @since 1.0.0
 */

/* ==========================================================================
   Block wrapper
   ========================================================================== */

.vm-cb-main.vm-savings-comparison-block {
	width: 100vw;
	max-width: unset !important;
	margin-left: calc(50% - 50vw) !important;
	margin-inline: auto;
}

/* ==========================================================================
   Two-column inner layout
   ========================================================================== */

.vm-savings-comparison-inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--wp--preset--spacing--large);
	align-items: start;
}

/* ==========================================================================
   Left column — title + image
   ========================================================================== */

.vm-left {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--medium);
}

.vm-savings-comparison-title {
	margin: 0;
	font-family: var(--wp--preset--font-family--zilla-slab, Georgia, serif);
	font-size: var(--wp--preset--font-size--x-large);
	color: var(--wp--preset--color--foreground);
	line-height: 1.2;
}

.vm-savings-comparison-image-wrap {
	width: 100%;
}

.vm-savings-comparison-image {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--vm-radius-lg, 8px);
	object-fit: cover;
}

/* ==========================================================================
   Right column — offers table
   ========================================================================== */

.vm-right {
	display: flex;
	flex-direction: column;
}

/* ==========================================================================
   Unified table container
   ========================================================================== */

.vm-savings-table {
	background: #ffffff;
	border: 1px solid var(--wp--preset--color--contrast, #e2e2e2);
	border-radius: var(--vm-radius-lg, 8px);
	overflow: hidden;
}

/* ==========================================================================
   Offer rows
   ========================================================================== */

.vm-savings-offers {
	list-style: none;
	margin: 0;
	padding: 0;
}

.vm-savings-offer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--medium);
	padding: 1rem 1.25rem;
	border-bottom: 1px solid var(--wp--preset--color--contrast, #e2e2e2);
}

.vm-offer-name {
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 400;
	color: var(--wp--preset--color--foreground);
}

.vm-offer-pricing {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-end;
	gap: 0.5rem;
	flex-shrink: 0;
	white-space: nowrap;
}

.vm-offer-regular-price {
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 400;
	color: var(--wp--preset--color--neutral-medium);
}

.vm-offer-regular-price.is-struck {
	text-decoration: line-through;
}

.vm-offer-promo-price {
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	color: var(--wp--preset--color--foreground);
}

/* ==========================================================================
   Total rows
   ========================================================================== */

.vm-savings-total-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--medium);
	padding: 1rem 1.25rem;
	font-weight: 700;
}

.vm-savings-total-label,
.vm-savings-total-value {
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
	color: var(--wp--preset--color--foreground);
}

/* Total without pass — light gray row */
.vm-savings-total-row:not(.is-promo) {
	background: var(--wp--preset--color--neutral-lighter, #f3f4f6);
}

/* Single total row (no promos set) */
.vm-savings-total-row.is-single {
	background: var(--wp--preset--color--neutral-lighter, #f3f4f6);
}

/* With Aloha Legacy Pass — black footer row */
.vm-savings-total-row.is-promo {
	background: var(--wp--preset--color--black, #000);
}

.vm-savings-total-row.is-promo .vm-savings-total-label,
.vm-savings-total-row.is-promo .vm-savings-total-value {
	color: var(--wp--preset--color--white, #fff);
}

/* ==========================================================================
   Editor placeholder
   ========================================================================== */

.vm-savings-comparison-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 200px;
	background: var(--wp--preset--color--neutral-lighter);
	border: 2px dashed var(--wp--preset--color--neutral-light);
	border-radius: var(--vm-radius-lg, 8px);
	color: var(--wp--preset--color--neutral-medium);
	font-size: var(--wp--preset--font-size--medium);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media ( max-width: 850px ) {
	.vm-savings-comparison-inner {
		grid-template-columns: 1fr;
	}

	.vm-savings-offer,
	.vm-savings-total-row {
		padding: 0.875rem 1rem;
	}
}