/* Serial number help modal — centered overlay (bose.com dialog language). */

.bosevn-serial-help {
	width: min(100% - 2rem, 800px);
	max-height: calc(100vh - 2rem);
	padding: 0;
	border: 0;
	background: transparent;
	color: #131317;
}

.bosevn-serial-help::backdrop {
	background: rgba(0, 0, 0, 0.5);
}

.bosevn-serial-help__panel {
	display: flex;
	flex-direction: column;
	max-height: calc(100vh - 2rem);
	background: #fff;
	border-radius: 3px;
	box-shadow: rgba(0, 0, 0, 0.25) 0 12px 32px;
}

.bosevn-serial-help__header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.5rem 1.5rem 0;
}

.bosevn-serial-help__title {
	margin: 0;
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.25;
}

.bosevn-serial-help__close {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	padding: 0;
	border: 0;
	background: transparent;
	color: #131317;
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
}

.bosevn-serial-help__close:hover,
.bosevn-serial-help__close:focus-visible {
	opacity: 0.7;
}

.bosevn-serial-help__body {
	overflow: auto;
	padding: 1rem 1.5rem 1.5rem;
	font-size: 0.9375rem;
	line-height: 1.6;
}

.bosevn-serial-help__body p {
	margin: 0 0 1rem;
}

.bosevn-serial-help__figure {
	display: flex;
}

.bosevn-serial-help__figure img {
	max-width: 100%;
	height: auto;
}

.bosevn-serial-help__section-title {
	margin: 0 0 0.75rem;
	font-size: 1.125rem;
	font-weight: 700;
}

.bosevn-serial-help__gallery {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-bottom: 1.5rem;
}

.bosevn-serial-help__gallery img {
	flex: 1 1 140px;
	max-width: 100%;
	height: auto;
}

.bosevn-warranty-form__serial-help-trigger {
	display: inline;
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	text-decoration: underline;
	cursor: pointer;
}

.bosevn-warranty-form__serial-help-trigger:hover,
.bosevn-warranty-form__serial-help-trigger:focus-visible {
	opacity: 0.8;
}

body.bosevn-serial-help-open {
	overflow: hidden;
}

.bosevn-warranty-form__notices {
	margin-bottom: 1.5rem;
}

.bosevn-warranty-form__notices .woocommerce-message,
.bosevn-warranty-form__notices .woocommerce-error,
.bosevn-warranty-form__notices .woocommerce-info {
	margin: 0 0 1rem;
	border-radius: 3px;
	border-top: 0;
	box-shadow: none;
	font-size: var(--bose-font-size-sm, 0.875rem);
}

.bosevn-warranty-form__notice--success {
	background: #e7f2ec;
	color: #1f7a44;
}

/* Public warranty gate (/bao-hanh/) — login required. */

/*
 * The warranty gate content is rendered through Theme Post Content inside the
 * Single template, so structure-based first-child hiding can blank the page
 * when Elementor template wrappers change.
 */

body.bosevn-warranty-public-page .site-main,
body.bosevn-warranty-public-page .elementor-location-single {
	padding-top: var(--bose-space-16, 64px);
}

.bosevn-warranty-gate-page {
	max-width: 560px;
	margin: 0 auto;
	padding: 0 16px;
}

.bosevn-warranty-gate {
	--bwg-ink: var(--bose-ink, #131317);
	--bwg-ink-soft: var(--bose-ink-soft, #3e474a);
	--bwg-link: #5c2d91;

	max-width: 560px;
	margin: 0 auto;
	color: var(--bwg-ink);
}

.bosevn-warranty-gate__title {
	margin: 0.5rem 0 1.5rem;
	font-size: 2rem;
	font-weight: 500;
	line-height: 1.2;
	color: var(--bwg-ink);
}

.bosevn-warranty-gate__intro {
	margin: 0 0 2rem;
	font-size: var(--bose-font-size-md, 1rem);
	line-height: var(--bose-line-height-normal, 1.5);
	color: var(--bwg-ink-soft);
}

.bosevn-warranty-gate__intro a {
	color: var(--bwg-link);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.bosevn-warranty-gate__intro a:hover,
.bosevn-warranty-gate__intro a:focus-visible {
	opacity: 0.85;
}

.bosevn-warranty-gate__cta {
	margin: 0;
}

.bosevn-warranty-gate__cta-link {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	color: var(--bwg-link);
	font-size: var(--bose-font-size-md, 1rem);
	font-weight: var(--bose-font-weight-medium, 500);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.bosevn-warranty-gate__cta-link:hover,
.bosevn-warranty-gate__cta-link:focus-visible {
	opacity: 0.85;
}

.bosevn-warranty-gate__cta-chevron {
	font-size: 1.125rem;
	line-height: 1;
}

/* Embedded warranty check on the gate page. */
.bosevn-warranty-gate-page .bosevn-warranty-check--embed {
	max-width: none;
	margin: 3rem 0 0;
	padding: 3rem 0 0;
	border-top: 1px solid var(--bose-border-subtle, #e8e8e8);
}

.bosevn-warranty-gate-page .bosevn-warranty-check--embed .bosevn-warranty-check__title {
	font-size: 2rem;
	font-weight: 500;
}

/* Mobile ≤560px — warranty gate page */
@media (max-width: 560px) {
	body.bosevn-warranty-public-page .site-main,
	body.bosevn-warranty-public-page .elementor-location-single {
		padding-top: var(--bose-space-8, 32px);
	}

	.bosevn-warranty-gate__title {
		font-size: 1.5rem;
		margin-bottom: 1rem;
	}

	.bosevn-warranty-gate__intro {
		margin-bottom: 1.5rem;
		font-size: 0.9375rem;
	}

	.bosevn-warranty-gate-page .bosevn-warranty-check--embed {
		margin-top: 2rem;
		padding-top: 2rem;
	}

	.bosevn-warranty-gate-page .bosevn-warranty-check--embed .bosevn-warranty-check__title {
		font-size: 1.5rem;
	}
}

/* Multi-file proof preview: thumbnail row. */
.bosevn-warranty-form__preview-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bose-space-2);
	margin-top: var(--bose-space-2);
}

.bosevn-warranty-form__preview-list img {
	width: 88px;
	height: 88px;
	object-fit: cover;
	border-radius: var(--bose-radius-sm);
	border: 1px solid var(--bose-border-subtle);
}

/* My Products table -------------------------------------------------------
   Four columns only: product (name + serial + id + note stacked), status,
   warranty period, extended period. The account theme sets `overflow: hidden`
   on .shop_table, so anything that does not fit is unreachable — keep the
   column count low and let the product cell wrap instead of the dates. */

.bosevn-my-products__table {
	table-layout: fixed;
}

/* The date columns get a fixed width that fits "dd/mm/yyyy – dd/mm/yyyy" plus
   the theme's cell padding; the product column takes whatever is left. */
.bosevn-my-products__table th:nth-child(2),
.bosevn-my-products__table td:nth-child(2) {
	width: 180px;
}

.bosevn-my-products__table th:nth-child(3),
.bosevn-my-products__table td:nth-child(3),
.bosevn-my-products__table th:nth-child(4),
.bosevn-my-products__table td:nth-child(4) {
	width: 200px;
}

.woocommerce-account .bosevn-my-products__table tbody td {
	vertical-align: top;
	white-space: normal;
}

.bosevn-my-products__product {
	display: block;
	color: var(--bose-ink, #131317);
	font-weight: var(--bose-font-weight-medium, 500);
	line-height: 1.35;
}

.bosevn-my-products__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-top: 6px;
}

.bosevn-my-products__id {
	font-size: 12px;
	color: var(--bose-ink-muted, #8c8c8c);
	font-variant-numeric: tabular-nums;
}

.bosevn-my-products__note {
	display: block;
	margin-top: 6px;
	font-size: 13px;
	line-height: 1.4;
	color: var(--bose-ink-soft, #3e474a);
}

/* Dates read as one value per cell, so keep the range on one line. */
.woocommerce-account .bosevn-my-products__table tbody td:nth-child(3),
.woocommerce-account .bosevn-my-products__table tbody td:nth-child(4) {
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

/* Stacked rows on narrow screens: the product cell has several lines, so it
   reads better left-aligned under its label than squeezed to the right. */
@media (max-width: 782px) {
	.bosevn-my-products__table {
		table-layout: auto;
	}

	.woocommerce-account .bosevn-my-products__table tbody td:first-child {
		flex-direction: column;
		align-items: flex-start;
		gap: 4px;
		text-align: left;
	}

	.bosevn-my-products__meta {
		margin-top: 2px;
	}
}

/* No zebra striping: WooCommerce tints every second row, which fights the row
   separator and makes the multi-line product cell harder to scan. The border
   between rows is enough. */
.woocommerce-account .bosevn-my-products__table tbody tr td,
.woocommerce-account .bosevn-my-products__table tbody tr:nth-child(2n) td,
.woocommerce-account .bosevn-my-products__table tbody tr:nth-child(2n) th {
	background-color: transparent;
}