/*
 * AnnGhar UI — Form Controls
 * ------------------------------------------------------------------
 * Restyles both our own .ag-field-wrapped inputs and WooCommerce
 * core's native .woocommerce-form-row inputs (used on the unmodified
 * parts of the address/account forms) identically, so there's never
 * a visible seam between "our" fields and "WooCommerce's" fields on
 * the same form.
 */

.ag-form {
	max-width: 640px;
}

.ag-field {
	position: relative;
	margin-bottom: 22px;
}

.ag-field label {
	display: block;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--ag-muted);
	text-transform: uppercase;
	letter-spacing: .04em;
	margin-bottom: 6px;
}

.ag-field input[type="text"],
.ag-field input[type="email"],
.ag-field input[type="tel"],
.ag-field input[type="password"],
.ag-field input[type="date"],
.ag-field select,
.ag-field textarea,
.ag-ui .woocommerce-form-row input[type="text"],
.ag-ui .woocommerce-form-row input[type="email"],
.ag-ui .woocommerce-form-row input[type="password"],
.ag-ui .woocommerce-form-row input[type="tel"],
.ag-ui .woocommerce-form-row select {
	width: 100%;
	padding: 13px 16px;
	border-radius: var(--ag-radius-sm);
	border: 1px solid var(--ag-border);
	background: var(--ag-white);
	font-size: 14.5px;
	color: var(--ag-text);
	transition: border-color .15s ease, box-shadow .15s ease;
}

.ag-field input:focus,
.ag-field select:focus,
.ag-field textarea:focus,
.ag-ui .woocommerce-form-row input:focus,
.ag-ui .woocommerce-form-row select:focus {
	outline: none;
	border-color: var(--ag-primary);
	box-shadow: 0 0 0 3px rgba(47, 107, 63, .14);
}

.ag-field input:disabled,
.ag-field input[readonly] {
	background: var(--ag-cream);
	color: var(--ag-muted);
}

.ag-field-hint {
	font-size: 12.5px;
	color: var(--ag-muted);
	margin-top: 6px;
	display: block;
}

.ag-field-hint.is-error {
	color: var(--ag-danger);
}

.ag-checkbox-row {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-bottom: 14px;
	font-size: 14px;
}

.ag-checkbox-row input {
	margin-top: 3px;
	accent-color: var(--ag-primary);
	width: 16px;
	height: 16px;
}

/* Profile header (Account Details) */

.ag-profile-header {
	display: flex;
	align-items: center;
	gap: 20px;
	margin-bottom: 28px;
}

.ag-profile-avatar {
	width: 84px;
	height: 84px;
	border-radius: 50%;
	overflow: hidden;
	border: 3px solid var(--ag-white);
	box-shadow: var(--ag-shadow);
	flex-shrink: 0;
}

.ag-profile-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.ag-profile-header__name {
	margin: 0 0 2px;
}

.ag-profile-header__email {
	color: var(--ag-muted);
	font-size: 14px;
}