/**
 * International Address Field Styles
 * Complete styling for the enhanced address field component
 * Structural only - dynamic styling via form customization
 */

/* Main address field containers */
.address-field-container {
	display: flex;
	flex-direction: column;
	width: 100%;
	font-family: inherit;
}

.address-field-container.structured {
	gap: 0;
}

.address-field-container.one-line {
	gap: 8px;
}

/* Row grouping for side-by-side subfields */
.address-field-row {
	display: flex;
	gap: 12px;
	margin-bottom: 8px;
}

.address-field-row > .address-field-group,
.address-field-container.stacked .address-field-row > .address-field-group,
.address-field-container.inline .address-field-row > .address-field-group {
	flex: 1;
	margin-bottom: 0;
}

@media (max-width: 480px) {
	.address-field-row {
		flex-direction: column;
		gap: 0;
	}

	.address-field-row > .address-field-group {
		margin-bottom: 12px;
	}
}

/* Layout modes */
.address-field-container.stacked .address-field-group {
	display: flex;
	flex-direction: column;
	gap: 0;
	margin-bottom: 8px;
}

.address-field-container.inline .address-field-group {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 12px;
	margin-bottom: 8px;
}

.address-field-container.inline .address-field-label {
	min-width: 120px;
	flex-shrink: 0;
	padding-top: 8px;
}

/* RTL support */
.address-field-container.rtl {
	direction: rtl;
	text-align: right;
}

.address-field-container.ltr {
	direction: ltr;
	text-align: left;
}

/* RTL specific adjustments for inline layout */
.address-field-container.rtl.inline .address-field-group {
	flex-direction: row-reverse;
}

.address-field-container.rtl.inline .address-field-label {
	padding-left: 8px;
	padding-right: 0;
	text-align: right;
}

/* RTL adjustments for city-state-zip layout */
.address-field-container.rtl .address-city-state-zip {
	flex-direction: row-reverse;
}

/* RTL required indicator positioning */
.address-field-container.rtl .required-indicator {
	margin-left: 0;
	margin-right: 2px;
}

.address-field-container.rtl .address-field-label.required::after {
	margin-left: 0;
	margin-right: 2px;
}

/* RTL input alignment */
.address-field-container.rtl .address-field-input,
.address-field-container.rtl .address-field-select,
.address-field-container.rtl .address-field-textarea {
	text-align: right;
}

/* RTL focus states adjustment */
.address-field-container.rtl .address-field-input:focus,
.address-field-container.rtl .address-field-select:focus,
.address-field-container.rtl .address-field-textarea:focus {
	direction: rtl;
}

/* RTL placeholder alignment for supported browsers */
.address-field-container.rtl .address-field-input::placeholder,
.address-field-container.rtl .address-field-textarea::placeholder {
	text-align: right;
	direction: rtl;
}

/* RTL error message alignment */
.address-field-container.rtl .address-field-error {
	text-align: right;
	direction: rtl;
}

/* Legacy wrapper support */
.address-fields-wrapper {
	display: flex;
	flex-direction: column;
	gap: 12px;
	width: 100%;
}

/* RTL support for legacy wrapper */
.address-fields-wrapper.rtl {
	direction: rtl;
	text-align: right;
}

.address-fields-wrapper.rtl .address-city-state-zip {
	flex-direction: row-reverse;
}

.address-fields-wrapper.rtl input,
.address-fields-wrapper.rtl select,
.address-fields-wrapper.rtl textarea {
	text-align: right;
	direction: rtl;
}

.address-fields-wrapper.rtl label {
	text-align: right;
}

.address-fields-wrapper.rtl .validation-error {
	text-align: right;
	direction: rtl;
}

/* Field groups */
.address-field-group {
	position: relative;
	width: 100%;
}

.address-field-container > .address-field-group:last-child,
.address-field-container > .address-field-row:last-child {
	margin-bottom: 0;
}

.address-field-label {
	display: block;
	font-weight: 500;
	margin-bottom: 6px;
	line-height: 1.4;
}

.address-field-label.required::after {
	content: " *";
	color: inherit;
	opacity: 0.7;
}

.required-indicator {
	color: inherit;
	margin-left: 2px;
}

/* Input and select styling */
.address-field-input,
.address-field-select,
.address-field-textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 8px 12px;
	border: 1px solid #ddd;
	border-radius: 4px;
	font-size: inherit;
	font-family: inherit;
	line-height: 1.4;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.address-field-input:focus,
.address-field-select:focus,
.address-field-textarea:focus {
	outline: none;
	border-color: #007cba;
	box-shadow: 0 0 0 2px rgb(0 124 186 / 10%);
}

.address-field-input.error,
.address-field-select.error,
.address-field-textarea.error {
	border-color: #dc3545;
}

.address-field-input.error:focus,
.address-field-select.error:focus,
.address-field-textarea.error:focus {
	border-color: #dc3545;
	box-shadow: 0 0 0 2px rgb(220 53 69 / 10%);
}

/* One-line mode textarea */
.address-field-textarea {
	resize: vertical;
	min-height: 80px;
}

/* Error messages */
.address-field-error {
	display: block;
	margin-top: 4px;
	font-size: 0.875em;
	line-height: 1.4;
	color: #dc3545;
}

/* Loading state */
.address-field-loading {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	color: #666;
	font-style: italic;
	background-color: #f8f9fa;
	border: 1px dashed #ddd;
	border-radius: 4px;
}

/* Legacy address line containers */
.address-line {
	display: flex;
	flex-direction: column;
	gap: 4px;
	width: 100%;
}

.address-line label {
	display: block;
	font-weight: 500;
	margin-bottom: 4px;
}

.address-line input {
	width: 100%;
	box-sizing: border-box;
}

/* City, State, ZIP container */
.address-city-state-zip {
	display: flex;
	gap: 12px;
	width: 100%;
	flex-wrap: wrap;
}

.address-city {
	flex: 2;
	min-width: 150px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.address-state {
	flex: 1;
	min-width: 120px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.address-zip {
	flex: 1;
	min-width: 100px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.address-city label,
.address-state label,
.address-zip label {
	display: block;
	font-weight: 500;
	margin-bottom: 4px;
}

.address-city input,
.address-city select,
.address-state input,
.address-state select,
.address-zip input {
	width: 100%;
	box-sizing: border-box;
}

/* Country field container */
.address-country {
	display: flex;
	flex-direction: column;
	gap: 4px;
	width: 100%;
}

.address-country label {
	display: block;
	font-weight: 500;
	margin-bottom: 4px;
}

.address-country input,
.address-country select {
	width: 100%;
	box-sizing: border-box;
}

/* Form builder preview styles */
.form-builder-canvas .address-field-group .address-line,
.form-builder-canvas .address-field-group .address-city-state-zip,
.form-builder-canvas .address-field-group .address-country {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

/* RTL support for field groups */
.address-field-group.rtl {
	direction: rtl;
	text-align: right;
}

.address-field-group.rtl input,
.address-field-group.rtl select,
.address-field-group.rtl textarea {
	text-align: right;
	direction: rtl;
}

.address-field-group.rtl label {
	text-align: right;
}

.address-field-group.rtl .required-indicator {
	margin-left: 0;
	margin-right: 2px;
}

.address-field-group .address-line {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.address-field-group .address-city-state-zip {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}

.address-field-group .address-country {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

/* Responsive design */
@media (width <= 768px) {
	.address-city-state-zip {
		flex-direction: column;
		gap: 12px;
	}

	.address-city,
	.address-state,
	.address-zip {
		flex: none;
		min-width: auto;
		width: 100%;
	}

	/* RTL responsive adjustments */
	.address-field-container.rtl .address-city-state-zip {
		flex-direction: column;
	}

	.address-fields-wrapper.rtl .address-city-state-zip {
		flex-direction: column;
	}
}

@media (width <= 480px) {
	.address-fields-wrapper {
		gap: 10px;
	}

	.address-city-state-zip {
		gap: 10px;
	}
}

/* Validation error styling structure */
.address-fields-wrapper .validation-error,
.address-field-container .validation-error {
	display: block;
	margin-top: 4px;
	font-size: 0.875em;
	line-height: 1.4;
	color: #dc3545;
}

.address-line .validation-error,
.address-city .validation-error,
.address-state .validation-error,
.address-zip .validation-error,
.address-country .validation-error {
	display: block;
	margin-top: 4px;
	font-size: 0.875em;
	line-height: 1.4;
	color: #dc3545;
}

/* Focus states and accessibility */
.address-fields-wrapper input:focus,
.address-fields-wrapper select:focus {
	outline: 2px solid;
	outline-offset: 2px;
}

/* Autocomplete styling hooks */
.address-fields-wrapper [data-autocomplete-field],
.address-field-container [data-autocomplete-field] {
	position: relative;
}

/* Disabled state structure */
.address-fields-wrapper input:disabled,
.address-fields-wrapper select:disabled {
	cursor: not-allowed;
	opacity: 0.6;
}

/* Required field indicator structure */
.address-fields-wrapper label[required]::after,
.address-line label[required]::after,
.address-city label[required]::after,
.address-state label[required]::after,
.address-zip label[required]::after,
.address-country label[required]::after {
	content: " *";
	color: inherit;
}

/* RTL required field indicators */
.address-fields-wrapper.rtl label[required]::after,
.address-fields-wrapper.rtl .address-line label[required]::after,
.address-fields-wrapper.rtl .address-city label[required]::after,
.address-fields-wrapper.rtl .address-state label[required]::after,
.address-fields-wrapper.rtl .address-zip label[required]::after,
.address-fields-wrapper.rtl .address-country label[required]::after {
	content: "* ";
	margin-left: 0;
	margin-right: 2px;
}

/* State dropdown specific styling */
.address-state select option {
	padding: 4px 8px;
}

/* Country dropdown specific styling */
.address-country select option {
	padding: 4px 8px;
}

/* Form builder field group styling */
.form-builder-canvas .address-field-group {
	border: 1px dashed #ddd;
	padding: 15px;
	border-radius: 4px;
	background-color: #fafafa;
}

.form-builder-canvas .address-field-group:hover {
	border-color: #007cba;
	background-color: #f0f8ff;
}

/* Preview mode adjustments */
.form-preview .address-fields-wrapper {
	border: none;
	padding: 0;
	background: transparent;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
	.address-fields-wrapper input,
	.address-fields-wrapper select {
		border-width: 2px;
	}
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
	.address-fields-wrapper *,
	.address-field-group * {
		transition: none !important;
		animation: none !important;
	}
}