/**
 * WooCommerce Select2 Form Control Styling
 * 
 * Makes Select2 dropdowns match theme's form-control inputs 1:1
 * Scoped to checkout, account, and address edit pages
 * 
 * @package RinnoTools
 * @version 1.0.0
 */

/* ============================================
   Select2 Container - Match form-control width
   ============================================ */
body.woocommerce-checkout .woocommerce-input-wrapper .select2,
body.woocommerce-account .woocommerce-input-wrapper .select2,
body.woocommerce-edit-address .woocommerce-input-wrapper .select2 {
	width: 100% !important;
	display: block;
}

/* ============================================
   Select2 Single Selection - Match form-control styling
   ============================================ */
body.woocommerce-checkout .select2-container--default .select2-selection--single,
body.woocommerce-account .select2-container--default .select2-selection--single,
body.woocommerce-edit-address .select2-container--default .select2-selection--single {
	height: auto !important;
	min-height: calc(1rem * 1.5 + 0.875rem * 2 + 4px); /* Match form-control height: font-size * line-height + padding-top + padding-bottom + border-top + border-bottom */
	padding: 0;
	border: 2px solid var(--checkout-border, #e5e7eb);
	border-radius: var(--checkout-radius-sm, 8px);
	background-color: var(--checkout-bg, #ffffff);
	transition: var(--checkout-transition, all 0.2s cubic-bezier(0.4, 0, 0.2, 1));
	font-family: inherit;
	-webkit-appearance: none;
	appearance: none;
}

/* Fallback for pages without checkout-stunning.css variables */
body.woocommerce-account .select2-container--default .select2-selection--single,
body.woocommerce-edit-address .select2-container--default .select2-selection--single {
	border: 2px solid #e5e7eb;
	border-radius: 8px;
	background-color: #ffffff;
	transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================
   Select2 Rendered Text - Match input text styling
   ============================================ */
body.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered,
body.woocommerce-account .select2-container--default .select2-selection--single .select2-selection__rendered,
body.woocommerce-edit-address .select2-container--default .select2-selection--single .select2-selection__rendered {
	padding: 0.875rem 1rem;
	padding-right: 2.5rem; /* Space for arrow */
	line-height: 1.5;
	color: var(--checkout-text, #1f2937);
	font-size: 1rem;
	font-family: inherit;
	display: flex;
	align-items: center;
	min-height: calc(1rem * 1.5 + 0.875rem * 2); /* Match input height: font-size * line-height + padding-top + padding-bottom */
}

/* Fallback for account pages */
body.woocommerce-account .select2-container--default .select2-selection--single .select2-selection__rendered,
body.woocommerce-edit-address .select2-container--default .select2-selection--single .select2-selection__rendered {
	color: #1f2937;
}

/* Placeholder text color */
body.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__placeholder,
body.woocommerce-account .select2-container--default .select2-selection--single .select2-selection__placeholder,
body.woocommerce-edit-address .select2-container--default .select2-selection--single .select2-selection__placeholder {
	color: var(--checkout-text-light, #9ca3af);
}

/* ============================================
   Select2 Arrow - Custom styling to match theme
   ============================================ */
body.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow,
body.woocommerce-account .select2-container--default .select2-selection--single .select2-selection__arrow,
body.woocommerce-edit-address .select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 100%;
	right: 1rem;
	top: 0;
	width: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Hide default triangle */
body.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow b,
body.woocommerce-account .select2-container--default .select2-selection--single .select2-selection__arrow b,
body.woocommerce-edit-address .select2-container--default .select2-selection--single .select2-selection__arrow b {
	border: none !important;
	width: 12px;
	height: 12px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 12px;
	margin: 0;
	position: relative;
	top: 0;
	left: 0;
}

/* ============================================
   Select2 Focus / Active State - Match form-control:focus
   ============================================ */
body.woocommerce-checkout .select2-container--open .select2-selection--single,
body.woocommerce-checkout .select2-container--focus .select2-selection--single,
body.woocommerce-account .select2-container--open .select2-selection--single,
body.woocommerce-account .select2-container--focus .select2-selection--single,
body.woocommerce-edit-address .select2-container--open .select2-selection--single,
body.woocommerce-edit-address .select2-container--focus .select2-selection--single {
	outline: none;
	border-color: var(--checkout-primary, #aa1c1c);
	box-shadow: 0 0 0 3px rgba(170, 28, 28, 0.1);
}

/* Fallback for account pages */
body.woocommerce-account .select2-container--open .select2-selection--single,
body.woocommerce-account .select2-container--focus .select2-selection--single,
body.woocommerce-edit-address .select2-container--open .select2-selection--single,
body.woocommerce-edit-address .select2-container--focus .select2-selection--single {
	border-color: #aa1c1c;
	box-shadow: 0 0 0 3px rgba(170, 28, 28, 0.1);
}

/* ============================================
   Select2 Error / Validation State
   ============================================ */
body.woocommerce-checkout .woocommerce-invalid .select2-container--default .select2-selection--single,
body.woocommerce-account .woocommerce-invalid .select2-container--default .select2-selection--single,
body.woocommerce-edit-address .woocommerce-invalid .select2-container--default .select2-selection--single {
	border-color: var(--checkout-error, #ef4444);
}

body.woocommerce-checkout .woocommerce-invalid .select2-container--open .select2-selection--single,
body.woocommerce-checkout .woocommerce-invalid .select2-container--focus .select2-selection--single,
body.woocommerce-account .woocommerce-invalid .select2-container--open .select2-selection--single,
body.woocommerce-account .woocommerce-invalid .select2-container--focus .select2-selection--single,
body.woocommerce-edit-address .woocommerce-invalid .select2-container--open .select2-selection--single,
body.woocommerce-edit-address .woocommerce-invalid .select2-container--focus .select2-selection--single {
	border-color: var(--checkout-error, #ef4444);
	box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

/* ============================================
   Select2 Dropdown Panel - Modern styling
   ============================================ */
body.woocommerce-checkout .select2-dropdown,
body.woocommerce-account .select2-dropdown,
body.woocommerce-edit-address .select2-dropdown {
	border: 2px solid var(--checkout-border, #e5e7eb);
	border-radius: var(--checkout-radius-sm, 8px);
	box-shadow: var(--checkout-shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05));
	background-color: var(--checkout-bg, #ffffff);
	margin-top: 4px;
	overflow: hidden;
}

/* Fallback for account pages */
body.woocommerce-account .select2-dropdown,
body.woocommerce-edit-address .select2-dropdown {
	border: 2px solid #e5e7eb;
	border-radius: 8px;
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
	background-color: #ffffff;
}

/* ============================================
   Select2 Results Options - Premium styling
   ============================================ */
body.woocommerce-checkout .select2-results__option,
body.woocommerce-account .select2-results__option,
body.woocommerce-edit-address .select2-results__option {
	padding: 0.75rem 1rem;
	font-size: 1rem;
	line-height: 1.5;
	color: var(--checkout-text, #1f2937);
	font-family: inherit;
	transition: var(--checkout-transition, all 0.2s cubic-bezier(0.4, 0, 0.2, 1));
}

/* Hover state */
body.woocommerce-checkout .select2-results__option--highlighted,
body.woocommerce-account .select2-results__option--highlighted,
body.woocommerce-edit-address .select2-results__option--highlighted {
	background-color: var(--checkout-surface, #f8f9fa);
	color: var(--checkout-text, #1f2937);
}

/* Selected state */
body.woocommerce-checkout .select2-results__option[aria-selected="true"],
body.woocommerce-account .select2-results__option[aria-selected="true"],
body.woocommerce-edit-address .select2-results__option[aria-selected="true"] {
	background-color: var(--checkout-primary, #aa1c1c);
	color: #ffffff;
	font-weight: 600;
}

/* ============================================
   Select2 Search Box (if enabled)
   ============================================ */
body.woocommerce-checkout .select2-search--dropdown .select2-search__field,
body.woocommerce-account .select2-search--dropdown .select2-search__field,
body.woocommerce-edit-address .select2-search--dropdown .select2-search__field {
	padding: 0.75rem 1rem;
	font-size: 1rem;
	border: 2px solid var(--checkout-border, #e5e7eb);
	border-radius: var(--checkout-radius-sm, 8px);
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	margin: 0;
	font-family: inherit;
}

body.woocommerce-checkout .select2-search--dropdown .select2-search__field:focus,
body.woocommerce-account .select2-search--dropdown .select2-search__field:focus,
body.woocommerce-edit-address .select2-search--dropdown .select2-search__field:focus {
	outline: none;
	border-color: var(--checkout-primary, #aa1c1c);
	box-shadow: 0 0 0 3px rgba(170, 28, 28, 0.1);
}

/* ============================================
   Select2 Disabled State
   ============================================ */
body.woocommerce-checkout .select2-container--disabled .select2-selection--single,
body.woocommerce-account .select2-container--disabled .select2-selection--single,
body.woocommerce-edit-address .select2-container--disabled .select2-selection--single {
	background-color: var(--checkout-surface, #f8f9fa);
	color: var(--checkout-text-muted, #6b7280);
	cursor: not-allowed;
	opacity: 0.6;
}

/* ============================================
   Responsive Adjustments
   ============================================ */
@media (max-width: 767.98px) {
	body.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered,
	body.woocommerce-account .select2-container--default .select2-selection--single .select2-selection__rendered,
	body.woocommerce-edit-address .select2-container--default .select2-selection--single .select2-selection__rendered {
		padding: 0.75rem 0.875rem;
		padding-right: 2.25rem;
		font-size: 16px; /* Prevent zoom on iOS */
	}
}