/*
Design tokens copied from Mam Lou's prototype (yr-return-your-sample-v1.html)
so this matches the approved visual direction. If the site's Elementor Global
Colors already define equivalents, replace these hex values with var()
references to those globals instead of duplicating them here.
*/
:root {
	--yr-navy: #10233A;
	--yr-cream: #F4F0E6;
	--yr-paper: #FCFBF9;
	--yr-gold: #B8934E;
	--yr-line: #DFD8C8;
	--yr-ink-soft: #5A6B80;
	--yr-success: #2F6B4F;
	--yr-warn: #8A6218;
}

.yr-returns-table {
	width: 100%;
	border-collapse: collapse;
}
.yr-returns-table th {
	text-align: left;
	font-size: 11px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--yr-ink-soft);
	padding-bottom: 8px;
	border-bottom: 1px solid var(--yr-line);
}
.yr-returns-table td {
	padding: 14px 0;
	border-bottom: 1px solid var(--yr-line);
	font-size: 14px;
}
.yr-meta {
	font-size: 12px;
	color: var(--yr-ink-soft);
}

.yr-pill {
	display: inline-block;
	font-size: 11px;
	letter-spacing: .06em;
	text-transform: uppercase;
	padding: 3px 9px;
	border-radius: 100px;
	border: 1px solid var(--yr-line);
	color: var(--yr-ink-soft);
}
.yr-pill--at_lab,
.yr-pill--results {
	border-color: var(--yr-success);
	color: var(--yr-success);
}
.yr-pill--manual_review {
	border-color: var(--yr-warn);
	color: var(--yr-warn);
}

.yr-card {
	background: var(--yr-paper);
	border: 1px solid var(--yr-line);
	border-radius: 4px;
	padding: 20px;
	margin: 16px 0;
}
.yr-card--hold {
	border-left: 3px solid var(--yr-warn);
}

#yr-packaging-form label {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	padding: 13px 0;
	border-bottom: 1px solid var(--yr-line);
	font-size: 14px;
}
#yr-packaging-form input[type=checkbox] {
	width: 20px;
	height: 20px;
	flex: 0 0 auto;
	margin-top: 2px;
	accent-color: var(--yr-navy);
}
#yr-create-return-btn {
	display: block;
	width: 100%;
	margin-top: 16px;
	padding: 15px 20px;
	border: 1px solid var(--yr-gold);
	border-radius: 4px;
	background: var(--yr-gold);
	color: var(--yr-navy);
	font-weight: 500;
	cursor: pointer;
}
#yr-create-return-btn:disabled {
	opacity: .4;
	cursor: not-allowed;
}

.yr-qr-box {
	border: 1px dashed var(--yr-ink-soft);
	border-radius: 4px;
	padding: 32px 20px;
	text-align: center;
	background: var(--yr-cream);
	margin: 16px 0;
}
.yr-qr-placeholder {
	font-size: 13px;
	color: var(--yr-ink-soft);
}

/* Payment popup - overlay/modal for the Stripe Payment Element.
   This part IS actively used regardless of theme, since it's a fixed
   overlay rather than page content. */
.yr-pay-overlay {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(16, 35, 58, 0.5);
	z-index: 9999;
	align-items: center;
	justify-content: center;
}
.yr-pay-overlay.show {
	display: flex;
}
.yr-pay-modal {
	background: #fff;
	border-radius: 12px;
	padding: 28px;
	max-width: 420px;
	width: 90%;
	max-height: 85vh;
	overflow-y: auto;
	position: relative;
}
.yr-pay-close {
	position: absolute;
	top: 12px;
	right: 16px;
	background: none;
	border: none;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	color: var(--yr-ink-soft);
}