/**
 * Checkout Country Flags for WooCommerce – frontend styles
 *
 * Responsibilities:
 * - Hide the native <select> fields and Woo Blocks arrow.
 * - Render a custom dropdown with country flags.
 * - Provide helpers for flag shapes, borders and label visibility.
 *
 * Class prefix: .ccfw-*
 */

/* -------------------------------------------------------------------------- */
/*  Native select / Woo Blocks original UI                                    */
/* -------------------------------------------------------------------------- */

/* Hide the original <select> and the native Woo Blocks arrow/expand icon
 * whenever the custom dropdown is rendered.
 */
.ccfw-country-select-hidden,
.ccfw-country-dropdown + .wc-blocks-components-select__expand {
	display: none !important;
}

/* Move the original <select> off-screen while keeping it in the DOM
 * so WooCommerce logic and validations still work.
 */
.ccfw-country-select-hidden {
	position: absolute;
	left: -9999px;
}

/* -------------------------------------------------------------------------- */
/*  Dropdown wrapper & toggle                                                 */
/* -------------------------------------------------------------------------- */

/* Main dropdown wrapper */
.ccfw-country-dropdown {
	position: relative;
	width: 100%;
	font-size: 14px;
}

/* Main toggle button (mimics theme / Select2 styles applied via JS) */
.ccfw-country-toggle {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 8px 10px;
	border: 1px solid #ccc;
	border-radius: 4px;
	background: #fff;
	cursor: pointer;
}

/* -------------------------------------------------------------------------- */
/*  Flag base styles                                                          */
/* -------------------------------------------------------------------------- */

/* Flag element:
 * - Uses CSS custom properties so theme authors and helper classes
 *   can override size and border-radius if needed.
 */
.ccfw-country-flag {
	display: inline-block;
	width: var(--ccfw-flag-width, 22px);
	height: var(--ccfw-flag-height, 16px);
	margin-right: 8px;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	border-radius: var(--ccfw-flag-radius, 3px);
}

/* Optional border around flags when enabled via configuration.
 * NOTE: class name uses "cctf" prefix – keep consistent with JS and CSS usage.
 */
.cctf-flag-has-border .ccfw-country-flag {
	border: 1px solid #ffffff;
	box-shadow: 0 0 1px 1px grey;
}

/* Rectangular flags (default 4:3 style) */
.ccfw-shape-rect .ccfw-country-flag {
	aspect-ratio: 4 / 3;
}

/* Square flags */
.ccfw-shape-square .ccfw-country-flag {
	aspect-ratio: 1 / 1;
	width: 18px;
	height: 18px;
}

/* Circle flags – ignore custom radius, always fully rounded */
.ccfw-shape-circle .ccfw-country-flag {
	aspect-ratio: 1 / 1;
	width: 18px;
	height: 18px;
	border-radius: 999px; /* overrides CSS variable */
}

/* -------------------------------------------------------------------------- */
/*  Label & arrow                                                             */
/* -------------------------------------------------------------------------- */

/* Country name text next to the flag */
.ccfw-country-toggle .ccfw-country-label {
	flex: 1;
	text-align: left;
	font-weight: 400;
}

/* Arrow icon indicating dropdown state */
.ccfw-country-arrow {
	position: absolute;
	right: 8px;
	top: 50%;
	transform: translateY(-50%) rotate(0deg);
	display: flex;
	transition: transform 0.3s ease;
}

/* Rotate arrow when dropdown is open */
.ccfw-country-dropdown.is-open .ccfw-country-arrow {
	transform: translateY(-50%) rotate(180deg);
}

/* -------------------------------------------------------------------------- */
/*  Country list                                                              */
/* -------------------------------------------------------------------------- */

/* Dropdown list container */
.ccfw-country-menu {
	position: absolute;
	z-index: 9999;
	top: 100%;
	left: 0;
	right: 0;
	margin: 0;
	margin-top: 4px;
	padding: 4px 0;
	list-style: none;
	background: #fff;
	border: 1px solid #ccc;
	border-radius: 4px;
	max-height: 220px;
	overflow-y: auto;
	display: none;
}

/* Show the list when dropdown is open */
.ccfw-country-dropdown.is-open .ccfw-country-menu {
	display: block;
}

/* Country list item */
.ccfw-country-item {
	display: flex;
	align-items: center;
	padding: 6px 10px;
	cursor: pointer;
}

/* Hover state for country list items */
.ccfw-country-item:hover {
	background: #f5f5f5;
}

/* -------------------------------------------------------------------------- */
/*  Flag shape helpers (optional extra classes)                               */
/* -------------------------------------------------------------------------- */

/* These helpers set custom properties which are consumed by .ccfw-country-flag.
 * They can be used in combination with shape classes or independently.
 */

.ccfw-flag-square .ccfw-country-flag {
	--ccfw-flag-width: 18px;
	--ccfw-flag-height: 18px;
	--ccfw-flag-radius: 3px;
}

.ccfw-flag-circle .ccfw-country-flag {
	--ccfw-flag-width: 18px;
	--ccfw-flag-height: 18px;
	--ccfw-flag-radius: 50%;
}

.ccfw-flag-rect .ccfw-country-flag {
	--ccfw-flag-width: 24px;
	--ccfw-flag-height: 16px;
	--ccfw-flag-radius: 2px;
}

/* -------------------------------------------------------------------------- */
/*  Label visibility helpers                                                  */
/* -------------------------------------------------------------------------- */

/* Variant: hide the Woo Blocks label when plugin is configured to do so */
.ccfw-label-hidden > .wc-blocks-components-select__label {
	display: none;
}

/* -------------------------------------------------------------------------- */
/*  Theme integration helpers                                                 */
/* -------------------------------------------------------------------------- */

/* Allow theme authors to easily restore / inherit border style
 * from surrounding theme components if needed.
 */
.ccfw-country-toggle.ccfw-toggle-theme {
	border: inherit;
}