/**
 * International Telephone Input & Country Selector CSS
 * Universal Theme-Compatible Suite (100% Responsive & Seamless)
 */

/* ==========================================================================
   0. FORCE FULL WIDTH ON CONTACT FORM 7 SPAN WRAPPERS
   ========================================================================== */
.wpcf7-form-control-wrap,
.wpcf7-form-control-wrap.cfwl-wrap-full,
span.wpcf7-form-control-wrap {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	min-width: 100% !important;
	box-sizing: border-box !important;
	position: relative !important;
	margin: 0 !important;
}

/* ==========================================================================
   1. INTERNATIONAL TELEPHONE INPUT (.cfwl-iti-wrapper)
   ========================================================================== */
.cfwl-iti-wrapper {
	position: relative !important;
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	min-width: 100% !important;
	box-sizing: border-box !important;
	vertical-align: middle;
	font-family: inherit;
	margin: 0 !important;
	padding: 0 !important;
}

.cfwl-iti-wrapper * {
	box-sizing: border-box;
}

/* Phone Text Input - Base Layout */
.cfwl-iti-input,
input.cfwl-iti-input,
input[type="tel"].cfwl-iti-input {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	min-width: 100% !important;
	padding-left: 95px !important;
	box-sizing: border-box !important;
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
	color: inherit;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Fallback styles ONLY if theme has no .form-control */
.cfwl-iti-input:not(.form-control),
input.cfwl-iti-input:not(.form-control),
input[type="tel"].cfwl-iti-input:not(.form-control) {
	min-height: 44px;
	height: auto;
	padding-top: 8px;
	padding-bottom: 8px;
	padding-right: 12px;
	background-color: #fff;
	border: 1px solid #cbd5e1;
	border-radius: 6px;
}

.cfwl-iti-input:not(.form-control):focus,
input.cfwl-iti-input:not(.form-control):focus {
	border-color: #3b82f6;
	outline: none;
	box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

/* If theme uses .form-control (Bootstrap / Astra / Elementor / Divi) */
.cfwl-iti-input.form-control,
input.cfwl-iti-input.form-control {
	padding-left: 95px !important;
	width: 100% !important;
	display: block !important;
}

/* Flag & Country Dial Code Button */
.cfwl-iti-flag-btn {
	position: absolute !important;
	top: 1px !important;
	bottom: 1px !important;
	left: 1px !important;
	height: calc(100% - 2px) !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 0 8px 0 10px !important;
	background: #f8fafc !important;
	border: none !important;
	border-right: 1px solid #e2e8f0 !important;
	border-top-left-radius: inherit !important;
	border-bottom-left-radius: inherit !important;
	cursor: pointer !important;
	user-select: none !important;
	transition: background 0.15s ease;
	z-index: 3 !important;
	box-sizing: border-box !important;
	text-decoration: none !important;
	color: #334155 !important;
	font-family: inherit !important;
	line-height: 1 !important;
}

.cfwl-iti-flag-btn:hover,
.cfwl-iti-flag-btn:focus {
	background: #f1f5f9 !important;
	outline: none !important;
}

.cfwl-iti-selected-flag {
	display: flex !important;
	align-items: center !important;
	gap: 6px !important;
}

.cfwl-iti-flag-img,
.cfwl-cp-flag-img {
	width: 20px !important;
	height: 15px !important;
	object-fit: cover !important;
	border-radius: 2px !important;
	box-shadow: 0 0 1px rgba(0, 0, 0, 0.3) !important;
	display: inline-block !important;
	vertical-align: middle !important;
	flex-shrink: 0 !important;
}

.cfwl-iti-flag-emoji,
.cfwl-cp-item-flag {
	font-size: 18px !important;
	line-height: 1 !important;
	display: inline-flex !important;
	align-items: center !important;
	vertical-align: middle !important;
	font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif !important;
}

.cfwl-iti-dial-code {
	font-size: 13px !important;
	font-weight: 600 !important;
	color: #334155 !important;
	white-space: nowrap !important;
}

.cfwl-iti-arrow,
.cfwl-cp-arrow {
	display: inline-block !important;
	width: 0 !important;
	height: 0 !important;
	margin-left: 4px !important;
	border-left: 4px solid transparent !important;
	border-right: 4px solid transparent !important;
	border-top: 5px solid #64748b !important;
	transition: transform 0.2s ease !important;
	flex-shrink: 0 !important;
}

.cfwl-iti-wrapper.cfwl-iti-open .cfwl-iti-arrow,
.cfwl-country-picker-wrapper.cfwl-cp-open .cfwl-cp-arrow {
	transform: rotate(180deg) !important;
}

/* Floating Dropdown Menu (Phone & Country) */
.cfwl-iti-dropdown,
.cfwl-cp-dropdown {
	position: absolute !important;
	top: calc(100% + 4px) !important;
	left: 0 !important;
	width: 320px !important;
	max-width: 95vw !important;
	max-height: 290px !important;
	background: #ffffff !important;
	border: 1px solid #cbd5e1 !important;
	border-radius: 8px !important;
	box-shadow: 0 12px 28px -4px rgba(0, 0, 0, 0.15), 0 6px 12px -4px rgba(0, 0, 0, 0.08) !important;
	z-index: 999999 !important;
	display: none;
	flex-direction: column !important;
	overflow: hidden !important;
	animation: cfwlFadeDown 0.15s ease !important;
}

.cfwl-country-picker-wrapper .cfwl-cp-dropdown {
	width: 100% !important;
	min-width: 280px !important;
}

.cfwl-iti-wrapper.cfwl-iti-open .cfwl-iti-dropdown,
.cfwl-country-picker-wrapper.cfwl-cp-open .cfwl-cp-dropdown {
	display: flex !important;
}

@keyframes cfwlFadeDown {
	from { opacity: 0; transform: translateY(-4px); }
	to { opacity: 1; transform: translateY(0); }
}

.cfwl-iti-search-wrap,
.cfwl-cp-search-wrap {
	padding: 8px 10px !important;
	background: #f8fafc !important;
	border-bottom: 1px solid #e2e8f0 !important;
	box-sizing: border-box !important;
}

.cfwl-iti-search,
.cfwl-cp-search {
	width: 100% !important;
	height: 36px !important;
	padding: 0 10px 0 32px !important;
	font-size: 13px !important;
	color: #1e293b !important;
	border: 1px solid #cbd5e1 !important;
	border-radius: 6px !important;
	outline: none !important;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2394a3b8'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z'%3E%3C/path%3E%3C/svg%3E") no-repeat 9px center !important;
	background-size: 14px 14px !important;
	box-sizing: border-box !important;
}

.cfwl-iti-search:focus,
.cfwl-cp-search:focus {
	border-color: #3b82f6 !important;
	box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15) !important;
}

.cfwl-iti-country-list,
.cfwl-cp-list {
	list-style: none !important;
	margin: 0 !important;
	padding: 4px 0 !important;
	overflow-y: auto !important;
	max-height: 230px !important;
	flex: 1 !important;
}

.cfwl-iti-country-item,
.cfwl-cp-item {
	display: flex !important;
	align-items: center !important;
	padding: 8px 12px !important;
	cursor: pointer !important;
	font-size: 13px !important;
	color: #1e293b !important;
	transition: background 0.1s ease !important;
	user-select: none !important;
	box-sizing: border-box !important;
}

.cfwl-iti-country-item:hover,
.cfwl-cp-item:hover {
	background: #eff6ff !important;
	color: #1d4ed8 !important;
}

.cfwl-iti-country-item.cfwl-iti-active,
.cfwl-cp-item.cfwl-cp-active {
	background: #dbeafe !important;
	font-weight: 600 !important;
	color: #1d4ed8 !important;
}

.cfwl-iti-item-flag,
.cfwl-cp-item-flag {
	font-size: 18px !important;
	margin-right: 10px !important;
	line-height: 1 !important;
	flex-shrink: 0 !important;
	display: inline-flex !important;
	align-items: center !important;
}

.cfwl-iti-item-name,
.cfwl-cp-item-name {
	flex: 1 !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	margin-right: 8px !important;
	text-align: left !important;
}

.cfwl-iti-item-code,
.cfwl-cp-item-code {
	font-weight: 600 !important;
	color: #64748b !important;
	font-size: 12px !important;
	background: #f1f5f9 !important;
	padding: 2px 6px !important;
	border-radius: 4px !important;
	flex-shrink: 0 !important;
}

.cfwl-iti-divider,
.cfwl-cp-divider {
	height: 1px !important;
	background: #e2e8f0 !important;
	margin: 5px 0 !important;
	padding: 0 !important;
	list-style: none !important;
	pointer-events: none !important;
}

.cfwl-iti-preferred,
.cfwl-cp-preferred {
	background-color: #fafbfc !important;
}

.cfwl-iti-preferred:hover,
.cfwl-cp-preferred:hover {
	background-color: #eff6ff !important;
}

.cfwl-iti-no-results,
.cfwl-cp-no-results {
	padding: 16px !important;
	text-align: center !important;
	font-size: 13px !important;
	color: #94a3b8 !important;
}

.cfwl-cp-blank {
	color: #64748b !important;
	font-style: italic !important;
	border-bottom: 1px solid #f1f5f9 !important;
	margin-bottom: 4px !important;
}

/* ==========================================================================
   2. COUNTRY PICKER DROPDOWN BUTTON (.cfwl-country-picker-wrapper)
   ========================================================================== */
.cfwl-country-picker-wrapper {
	position: relative !important;
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	min-width: 100% !important;
	box-sizing: border-box !important;
	font-family: inherit !important;
	margin: 0 !important;
	padding: 0 !important;
}

.cfwl-cp-hidden-select {
	position: absolute !important;
	opacity: 0 !important;
	pointer-events: none !important;
	width: 1px !important;
	height: 1px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
}

/* Base button: completely flexible and inherits 100% from theme styles */
.cfwl-cp-btn {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 8px;
	width: 100% !important;
	max-width: 100% !important;
	min-width: 100% !important;
	padding-left: 14px !important;
	padding-right: 14px !important;
	box-sizing: border-box !important;
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	color: inherit;
	cursor: pointer !important;
	text-align: left !important;
	text-decoration: none !important;
	vertical-align: middle;
	transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, background-color 0.15s ease-in-out;
}

/* Default fallback styling ONLY when no theme class (like .form-control / .form-select) is present */
.cfwl-cp-btn:not(.form-control):not(.form-select) {
	min-height: 44px;
	padding: 8px 14px !important;
	background-color: #ffffff;
	border: 1px solid #cbd5e1;
	border-radius: 6px;
	color: #1e293b;
}

.cfwl-cp-btn:not(.form-control):not(.form-select):hover {
	border-color: #94a3b8;
}

.cfwl-cp-btn:not(.form-control):not(.form-select):focus,
.cfwl-country-picker-wrapper.cfwl-cp-open .cfwl-cp-btn:not(.form-control):not(.form-select) {
	border-color: #3b82f6;
	outline: none;
	box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

/* When theme uses .form-control / .form-select (Bootstrap, Astra, Elementor, Divi) */
.cfwl-cp-btn.form-control,
.cfwl-cp-btn.form-select {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	padding-left: 14px !important;
	padding-right: 14px !important;
	cursor: pointer;
}

.cfwl-country-picker-wrapper.cfwl-cp-open .cfwl-cp-btn.form-control,
.cfwl-country-picker-wrapper.cfwl-cp-open .cfwl-cp-btn.form-select {
	outline: 0;
	box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

/* Inner content */
.cfwl-cp-btn-inner {
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
	flex: 1 1 auto !important;
	min-width: 0 !important;
	overflow: hidden !important;
}

.cfwl-cp-selected-flag {
	font-size: 18px !important;
	line-height: 1 !important;
	display: inline-flex !important;
	align-items: center !important;
	flex-shrink: 0 !important;
}

.cfwl-cp-selected-name {
	flex: 1 1 auto !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	font-size: inherit !important;
	color: inherit !important;
	min-width: 0 !important;
}

.cfwl-cp-selected-name.cfwl-placeholder {
	opacity: 0.65;
}

/* Arrow indicator: matches theme font color automatically */
.cfwl-cp-arrow {
	display: inline-block !important;
	width: 0 !important;
	height: 0 !important;
	margin-left: 6px !important;
	border-left: 4px solid transparent !important;
	border-right: 4px solid transparent !important;
	border-top: 5px solid currentColor !important;
	opacity: 0.6 !important;
	transition: transform 0.2s ease !important;
	flex-shrink: 0 !important;
}

.cfwl-country-picker-wrapper.cfwl-cp-open .cfwl-cp-arrow {
	transform: rotate(180deg) !important;
}

/* Fallback native <select> styling - 100% theme friendly */
select.wpcf7-country-select,
select.cfwl-country-select {
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
	font-family: inherit;
	font-size: inherit;
	color: inherit;
}

.cfwl-select-divider {
	color: #94a3b8;
	font-size: 11px;
	letter-spacing: 2px;
}