/*
 * Interlab Core — front-end styles for migrated features.
 *
 * Migrated from WPCode CSS snippets (prod export 2026-06-16):
 *   - "Product Description Tab Styles" (#3) — download buttons + video container (ProductDisplay tabs)
 *   - "Table Default Style" (#4)           — tables in product & category descriptions
 *
 * Kept with the plugin (not the child theme) so the styling travels with the features it supports.
 */

/* --- Product description tabs: download buttons (#3) --- */
.download-button {
	display: inline-block;
	padding: 10px 20px;
	background-color: #0d244c;
	color: #ffffff;
	text-decoration: none;
	border-radius: 4px;
	font-weight: bold;
}

.download-button:hover {
	background-color: #5fbadd;
}

/* --- Product description tabs: video container (#3) --- */
.video-container {
	position: relative;
	width: 100%;
	padding-bottom: 56.25%;
}

.video-container iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

@media screen and (max-width: 768px) {
	.video-container {
		padding-bottom: 75%;
	}
}

/* --- Tables in product & category descriptions (#4) --- */
.single-product .product .entry-content table:not(.additional-information-tab table),
.category-description .entry-content table {
	width: auto;
	table-layout: auto;
	border-collapse: collapse;
	border-spacing: 0;
	border: 1px solid #ccc !important;
	margin: 0;
}

.single-product .product .entry-content table:not(.additional-information-tab table) th,
.single-product .product .entry-content table:not(.additional-information-tab table) td,
.category-description .entry-content table th,
.category-description .entry-content table td {
	padding: 3px;
	text-align: left;
	border: 1px solid #ccc !important;
}

.single-product .product .entry-content table:not(.additional-information-tab table) th,
.category-description .entry-content table th {
	background-color: #f2f2f2;
}

.single-product .product .entry-content table:not(.additional-information-tab table) tr:nth-child(even),
.category-description .entry-content table tr:nth-child(even) {
	background-color: #f2f2f2;
}

@media (min-width: 768px) {
	.single-product .product .entry-content table:not(.additional-information-tab table),
	.category-description .entry-content table {
		width: calc(100% - 20px);
	}
}

@media (max-width: 767px) {
	.single-product .product .entry-content table:not(.additional-information-tab table),
	.category-description .entry-content table {
		display: block;
		white-space: nowrap;
		overflow-x: auto;
	}

	.single-product .product .entry-content table:not(.additional-information-tab table) thead,
	.category-description .entry-content table thead {
		display: table-header-group;
	}

	.single-product .product .entry-content table:not(.additional-information-tab table) tbody,
	.category-description .entry-content table tbody {
		display: table-row-group;
	}

	.single-product .product .entry-content table:not(.additional-information-tab table) tr,
	.category-description .entry-content table tr {
		display: table-row;
		width: 100%;
	}

	.single-product .product .entry-content table:not(.additional-information-tab table) td,
	.category-description .entry-content table td {
		display: table-cell;
		white-space: nowrap;
		border: 1px solid #ccc !important;
	}
}

/* -------------------------------------------------------------------------
 * "Your price" savings display (Pricing module — Savings).
 * Struck-through list price + a green "Save $X (Y%)" badge, shown on the
 * product page (via the AJAX price), the cart/checkout and the wishlist.
 * --------------------------------------------------------------------- */
.ilc-yp {
	display: inline-flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 6px 10px;
}
.ilc-yp-label {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: .72em;
	font-weight: 600;
	letter-spacing: .01em;
	color: #1a7f37;
	flex-basis: 100%;
}
.ilc-yp-tick::before {
	content: "\2713"; /* check mark */
	font-size: .9em;
}
/* The fragment is injected into the theme's price element, which aggressively styles and even
 * hides <del> + child spans — so these visibility/layout rules need !important to win. */
.ilc-yp .ilc-yp-was {
	display: inline !important;
	color: #9aa0a6 !important;
	text-decoration: line-through !important;
	font-weight: 400 !important;
	font-size: .8em !important;
}
.ilc-yp .ilc-yp-now {
	display: inline !important;
	font-weight: 600 !important;
}
.ilc-yp .ilc-yp-unit {
	color: #9aa0a6 !important;
	font-size: .62em !important;
	font-weight: 400 !important;
}
.ilc-yp .ilc-yp-save {
	display: inline-block !important;
	background: #e7f6ec !important;
	color: #1a7f37 !important;
	font-size: .72em !important;
	font-weight: 600 !important;
	line-height: 1.4 !important;
	padding: 1px 8px !important;
	border-radius: 4px !important;
	white-space: nowrap;
}
.ilc-yp-save .woocommerce-Price-amount {
	color: inherit;
	font-weight: 600;
}
.ilc-yp-saved {
	display: block;
	color: #1a7f37;
	font-size: .8em;
	margin-top: 2px;
}
.ilc-yp-total th,
.ilc-yp-total td {
	color: #1a7f37;
}
.ilc-yp--compact {
	gap: 4px 6px;
	font-size: .95em;
}
/* On listing cards the saving is a bolder solid pill so it stands out in a grid (the product
 * page keeps the softer tinted pill). */
.ilc-yp--compact .ilc-yp-save {
	background: var(--ilc-yp-listing-bg, #1a7f37) !important;
	color: #fff !important;
	font-size: .68em !important;
	padding: 1px 9px !important;
	border-radius: 20px !important;
}
/* "You save %" column in the quantity-break table. */
#csp-tbl .ilc-tier-save {
	color: #1a7f37;
	font-weight: 600;
}

/* -------------------------------------------------------------------------
 * Same-day dispatch countdown (StockEta — [countdown_timer]).
 * A soft "pill": accent text on a tint of the same colour. Colours come from
 * CSS vars set inline on the container (settings-driven). !important because
 * the pill sits in the theme's product summary, which styles generic spans.
 * --------------------------------------------------------------------- */
.ilc-countdown {
	margin: .5rem 0;
}
.ilc-cd-pill {
	display: inline-flex !important;
	align-items: center;
	gap: 8px;
	background: var(--ilc-cd-bg, #e7f6ec) !important;
	color: var(--ilc-cd-fg, #15602b) !important;
	border-radius: 8px;
	padding: 7px 14px;
	font-size: 14px;
	line-height: 1.35;
}
.ilc-cd-pill.is-urgent {
	background: var(--ilc-cd-bg-urgent, #fdeccd) !important;
	color: var(--ilc-cd-fg-urgent, #854f0b) !important;
}
.ilc-cd-pill--next {
	background: var(--ilc-cd-bg-next, #e6f1fb) !important;
	color: var(--ilc-cd-fg-next, #0c447c) !important;
}
.ilc-cd-ic {
	flex: 0 0 auto;
}
.ilc-cd-time {
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}