/**
 * Visual treatment for the ΑΦΜ field: a highlighted card, a small
 * "auto-fill" badge next to the label, and a magnifying-glass icon inside
 * the input, so it reads as an interactive/smart field rather than a
 * plain text box. Colors are CSS variables so the store can easily
 * override them (e.g. to match a theme) without touching selectors.
 */

:root {
	--oaw-accent: #2563eb;
	--oaw-accent-soft: #eff6ff;
	--oaw-accent-border: #93c5fd;
	--oaw-accent-text: #1e3a8a;
}

.oaw-afm-field {
	background: var(--oaw-accent-soft);
	border: 1.5px dashed var(--oaw-accent-border);
	border-radius: 10px;
	padding: 12px 14px 14px;
	box-sizing: border-box;
}

.oaw-afm-field label {
	font-weight: 600;
	color: var(--oaw-accent-text);
	display: block;
}

.oaw-afm-badge {
	display: inline-block;
	margin-left: 6px;
	padding: 2px 9px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	background: var(--oaw-accent);
	color: #fff;
	border-radius: 999px;
	vertical-align: middle;
}

.oaw-afm-hint {
	display: block;
	margin-top: 4px;
	font-weight: 400;
	font-size: 12.5px;
	line-height: 1.4;
	color: #475569;
}

.oaw-afm-field input[type='text'],
.oaw-afm-field input[type='tel'] {
	background-color: #fff;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>");
	background-repeat: no-repeat;
	background-position: 10px center;
	background-size: 16px 16px;
	padding-left: 34px;
}

.oaw-afm-notice {
	font-weight: 600;
}

.oaw-afm-retry-btn {
	background: none;
	border: none;
	padding: 0;
	margin-left: 4px;
	color: var(--oaw-accent);
	font-weight: 700;
	font-size: inherit;
	text-decoration: underline;
	cursor: pointer;
}

.oaw-afm-retry-btn:hover {
	color: var(--oaw-accent-text);
}