/**
 * Country Code Field Styles
 *
 * @package woo-cart-abandonment-recovery-pro
 * @since 1.1.3
 */

/* ==========================================================================
   Classic Checkout
   ========================================================================== */

/**
 * Limit the country code column to a narrower width than the default 47%.
 * WooCommerce uses .form-row-first / .form-row-last for a 50/50 split.
 * We apply more sensible proportions via specific field classes.
 */
.woocommerce-checkout .billing_country_code_field,
.woocommerce-checkout .shipping_country_code_field {
	width: 30% !important;
	clear: left;
}

.woocommerce-checkout .billing_phone_field,
.woocommerce-checkout .shipping_phone_field {
	width: 66% !important;
}

/* Ensure the <select> stretches to fill its column */
#billing_phone_country_code,
#shipping_phone_country_code {
	width: 100%;
	height: auto;
	box-sizing: border-box;
}

/* ==========================================================================
   Block Checkout
   ========================================================================== */

/**
 * Flex wrapper that holds the country-code dropdown + phone input side-by-side.
 */
.wc-phone-with-country {
	display: flex;
	flex-wrap: nowrap;
	gap: 10px;
	align-items: flex-start; /* top-align so labels stay in line */
	width: 100%;
}

/**
 * Country code dropdown column.
 * min-width keeps it readable; max-width prevents it from growing too large.
 */
.wc-country-code-field {
	flex: 0 0 auto;
	min-width: 110px;
	max-width: 180px;
	width: 35%;
}

/**
 * Phone input column – takes all remaining space.
 * min-width: 0 prevents the flex child from overflowing its container.
 */
.wc-phone-with-country .wc-block-components-text-input {
	flex: 1 1 auto;
	min-width: 0;
}

/* ==========================================================================
   Responsive – stack vertically on narrow screens
   ========================================================================== */

@media (max-width: 480px) {
	.wc-phone-with-country {
		flex-direction: column;
		gap: 0;
	}

	.wc-country-code-field {
		width: 100%;
		max-width: 100%;
	}

	.woocommerce-checkout .billing_country_code_field,
	.woocommerce-checkout .shipping_country_code_field,
	.woocommerce-checkout .billing_phone_field,
	.woocommerce-checkout .shipping_phone_field {
		width: 100% !important;
		clear: both;
	}
}