/*
 * XG Warranty Claim Form — Theme-Compatible Stylesheet
 *
 * Design principles:
 *  - Borders use rgba(128,128,128) — visible on BOTH light and dark themes
 *  - --xg-input-bg: subtle white overlay so fields have a visible surface on dark
 *  - All text: color: inherit / font: inherit — follows the active theme
 *  - One CSS variable (--xg-accent) for interactive chrome; themes can override
 */

/* ── Accent colour override point ────────────────────────────── */
:root {
	--xg-accent:        var( --wp--preset--color--primary,
	                    var( --color-primary,
	                    var( --accent-color, #2271b1 ) ) );
	--xg-accent-hover:  color-mix( in srgb, var( --xg-accent ) 80%, #000 20% );
	--xg-radius:        8px;
	--xg-border:        1px solid rgba( 128, 128, 128, 0.35 );
	--xg-border-focus:  1px solid var( --xg-accent );
	--xg-shadow-focus:  0 0 0 3px color-mix( in srgb, var( --xg-accent ) 20%, transparent 80% );
	--xg-input-bg:      rgba( 255, 255, 255, 0.06 );
}

/* ── Wrapper ─────────────────────────────────────────────────── */
.xg-warranty-form-container {
	max-width: 860px;
	margin: 0 auto;
}

/* ── Notices ─────────────────────────────────────────────────── */
.xg-notice {
	padding: 14px 18px;
	border-radius: var( --xg-radius );
	margin-bottom: 24px;
	border-left: 4px solid currentColor;
	background: rgba( 0, 0, 0, 0.04 );
}
.xg-notice p { margin: 0; }

.xg-notice-success { color: #1a7f37; border-color: #1a7f37; background: rgba( 26, 127, 55, 0.06 ); }
.xg-notice-error   { color: #cf222e; border-color: #cf222e; background: rgba( 207, 34,  46, 0.06 ); }

/* ── Form sections ───────────────────────────────────────────── */
.xg-form-section {
	border: var( --xg-border );
	border-radius: var( --xg-radius );
	padding: 24px 24px 18px;
	margin-bottom: 24px;
	background: rgba( 255, 255, 255, 0.02 );
}

.xg-form-section legend {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	color: inherit;
	opacity: 0.6;
	padding: 0 8px;
}

/* ── Row grid ────────────────────────────────────────────────── */
.xg-form-row            { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 16px; }
.xg-form-row > .xg-form-group         { flex: 1 1 100%; }
.xg-col-2 > .xg-form-group            { flex: 1 1 calc( 50%   - 8px  ); min-width: 190px; }
.xg-col-3 > .xg-form-group            { flex: 1 1 calc( 33.3% - 11px ); min-width: 160px; }

/* ── Field groups ────────────────────────────────────────────── */
.xg-form-group { display: flex; flex-direction: column; }

.xg-form-group label {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: inherit;
	opacity: 0.7;
	margin-bottom: 6px;
}

/* Label for radio groups (a <span>, not a <label>, so no conflict) */
.xg-field-label {
	display: block;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	opacity: 0.7;
	margin-bottom: 8px;
}

.xg-required { color: #cf222e; margin-left: 2px; opacity: 1; }

.xg-field-hint {
	font-size: 11px;
	opacity: 0.55;
	margin-top: 4px;
	color: inherit;
}

.xg-field-error {
	font-size: 12px;
	color: #cf222e;
	margin-top: 4px;
	font-weight: 500;
}

/* ── Text inputs & native selects ────────────────────────────── */
.xg-form-group input[type="text"],
.xg-form-group input[type="email"],
.xg-form-group input[type="tel"],
.xg-form-group input[type="number"],
.xg-form-group select,
.xg-ss-display {
	font: inherit;
	color: inherit;
	background: var( --xg-input-bg );
	border: var( --xg-border );
	border-radius: var( --xg-radius );
	padding: 10px 14px;
	width: 100%;
	box-sizing: border-box;
	transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
	-webkit-appearance: none;
	appearance: none;
}

.xg-form-group input:focus,
.xg-form-group select:focus,
.xg-ss-display:focus {
	outline: none;
	border: var( --xg-border-focus );
	box-shadow: var( --xg-shadow-focus );
	background: color-mix( in srgb, var( --xg-accent ) 5%, var( --xg-input-bg ) 95% );
}

.xg-form-group input:hover:not( :focus ),
.xg-form-group select:hover:not( :focus ),
.xg-ss-display:hover:not( :focus ) {
	border-color: rgba( 128, 128, 128, 0.6 );
}

.xg-form-group input:user-invalid,
.xg-form-group select:user-invalid {
	border-color: #cf222e;
}

.xg-monospace {
	font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* Native select arrow */
.xg-form-group select:not( .xg-native-select ) {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	padding-right: 36px;
}

/* ── Searchable country select ───────────────────────────────── */
.xg-searchable-select { position: relative; width: 100%; }

.xg-native-select { display: none !important; }

.xg-ss-display {
	/* Override inherited color — use browser's form-field system colours
	   so text stays readable on any theme background (light or dark). */
	color: FieldText;
	background-color: Field;
	cursor: pointer;
	user-select: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	padding-right: 36px;
}

.xg-ss-display::placeholder {
	color: GrayText;
	opacity: 1;
}

.xg-ss-display.xg-ss-has-value { opacity: 1; }

/* Dropdown panel */
.xg-ss-panel {
	position: absolute;
	top: calc( 100% + 4px );
	left: 0;
	right: 0;
	background: Field;
	color: FieldText;
	border: var( --xg-border );
	border-radius: var( --xg-radius );
	box-shadow: 0 8px 32px rgba( 0, 0, 0, 0.3 );
	z-index: 9999;
	display: none;
	overflow: hidden;
}

.xg-ss-panel.xg-ss-open { display: block; }

.xg-ss-search-wrap { padding: 8px; border-bottom: var( --xg-border ); }

.xg-ss-search {
	width: 100%;
	box-sizing: border-box;
	font: inherit;
	font-size: 13px;
	color: FieldText;
	background: Field;
	border: var( --xg-border );
	border-radius: calc( var( --xg-radius ) - 2px );
	padding: 7px 10px;
}
.xg-ss-search:focus { outline: none; border: var( --xg-border-focus ); }

.xg-ss-list {
	max-height: 220px;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.xg-ss-option {
	padding: 9px 14px;
	cursor: pointer;
	font-size: 14px;
	color: FieldText;
	transition: background 0.1s;
}

.xg-ss-option:hover,
.xg-ss-option.xg-ss-focused {
	background: color-mix( in srgb, var( --xg-accent ) 12%, transparent 88% );
}

.xg-ss-option.xg-ss-selected {
	font-weight: 700;
	color: var( --xg-accent );
}

.xg-ss-empty {
	padding: 12px 14px;
	font-size: 13px;
	opacity: 0.5;
	text-align: center;
}

/* ── Upload areas ────────────────────────────────────────────── */
.xg-upload-note { font-size: 12px; opacity: 0.55; margin: 4px 0 0; }

.xg-upload-area {
	position: relative;
	border: 2px dashed rgba( 128, 128, 128, 0.35 );
	border-radius: var( --xg-radius );
	padding: 20px 12px;
	text-align: center;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	min-height: 84px;
	transition: border-color 0.15s, background 0.15s;
	background: var( --xg-input-bg );
}

.xg-upload-area:hover,
.xg-upload-area.xg-drag-over {
	border-color: var( --xg-accent );
	background: color-mix( in srgb, var( --xg-accent ) 6%, transparent 94% );
}

.xg-upload-area.xg-has-file {
	border-color: #1a7f37;
	border-style: solid;
	background: rgba( 26, 127, 55, 0.05 );
}

.xg-upload-area input[type="file"] {
	position: absolute;
	inset: 0;
	opacity: 0;
	width: 100%;
	height: 100%;
	cursor: pointer;
	z-index: 1;
}

.xg-upload-icon { color: inherit; opacity: 0.35; pointer-events: none; }
.xg-upload-area.xg-has-file .xg-upload-icon { opacity: 0.6; color: #1a7f37; }

.xg-upload-placeholder { font-size: 12px; opacity: 0.5; pointer-events: none; }
.xg-file-name { font-size: 12px; font-weight: 600; color: #1a7f37; word-break: break-all; pointer-events: none; }

/* ── Submit button ───────────────────────────────────────────── */
.xg-form-footer { text-align: center; padding-top: 8px; }

.xg-btn-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 13px 44px;
	background: var( --xg-accent );
	color: #fff;
	font: inherit;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.03em;
	border: none;
	border-radius: var( --xg-radius );
	cursor: pointer;
	transition: background 0.15s, transform 0.1s;
	min-width: 200px;
}

.xg-btn-submit:hover:not( :disabled ) {
	background: var( --xg-accent-hover, color-mix( in srgb, var( --xg-accent ) 80%, #000 20% ) );
	transform: translateY( -1px );
}

.xg-btn-submit:active:not( :disabled ) { transform: translateY( 0 ); }
.xg-btn-submit:disabled { opacity: 0.55; cursor: not-allowed; }

.xg-btn-spinner {
	display: inline-block;
	width: 16px;
	height: 16px;
	border: 2px solid rgba( 255, 255, 255, 0.4 );
	border-top-color: #fff;
	border-radius: 50%;
	animation: xg-spin 0.7s linear infinite;
}

@keyframes xg-spin { to { transform: rotate( 360deg ); } }

/* ── Product type radio cards ────────────────────────────────── */
.xg-product-cards {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 155px, 1fr ) );
	gap: 10px;
}

/* Reset .xg-form-group label styles that would bleed into card labels */
.xg-form-group .xg-product-card {
	text-transform: none;
	font-size: inherit;
	font-weight: inherit;
	letter-spacing: normal;
	opacity: 1;
	margin-bottom: 0;
	cursor: pointer;
	display: block;
}

.xg-product-card input[type="radio"] {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
	pointer-events: none;
}

.xg-product-card-inner {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 14px;
	border: var( --xg-border );
	border-radius: var( --xg-radius );
	background: var( --xg-input-bg );
	cursor: pointer;
	transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
	user-select: none;
	height: 100%;
	box-sizing: border-box;
}

.xg-product-card:hover .xg-product-card-inner {
	border-color: rgba( 128, 128, 128, 0.6 );
	background: color-mix( in srgb, var( --xg-accent ) 6%, var( --xg-input-bg ) 94% );
}

.xg-product-card input:checked + .xg-product-card-inner {
	border-color: var( --xg-accent );
	background: color-mix( in srgb, var( --xg-accent ) 14%, transparent 86% );
	box-shadow: var( --xg-shadow-focus );
}

.xg-product-card input:focus-visible + .xg-product-card-inner {
	outline: 2px solid var( --xg-accent );
	outline-offset: 2px;
}

/* Radio dot indicator */
.xg-product-check {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	border: 2px solid rgba( 128, 128, 128, 0.5 );
	border-radius: 50%;
	position: relative;
	transition: border-color 0.15s, background 0.15s;
}

.xg-product-card input:checked + .xg-product-card-inner .xg-product-check {
	border-color: var( --xg-accent );
	background: var( --xg-accent );
}

.xg-product-check::after {
	content: '';
	position: absolute;
	inset: 0;
	margin: auto;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #fff;
	transform: scale( 0 );
	transition: transform 0.15s;
}

.xg-product-card input:checked + .xg-product-card-inner .xg-product-check::after {
	transform: scale( 1 );
}

.xg-product-name {
	font-size: 13px;
	font-weight: 600;
	color: inherit;
	line-height: 1.3;
}

/* ── Responsive ──────────────────────────────────────────────── */
@media ( max-width: 640px ) {
	.xg-col-2 > .xg-form-group,
	.xg-col-3 > .xg-form-group { flex: 1 1 100%; }
	.xg-form-section { padding: 16px 14px; }
	.xg-btn-submit { width: 100%; }
	.xg-product-cards { grid-template-columns: 1fr 1fr; }
}