/**
 * Enhanced Responsive Styles for Checkboxes and Select Boxes
 * Coupon Email System for WooCommerce
 * Ensures proper display from mobile to desktop screens
 */

/* ========================================
   RESPONSIVE SELECT BOXES
   ======================================== */

/* Base select styles - mobile first approach */
select,
.cesw_select_field,
.forminp-select select,
#_cesfw_mail_type,
#_cesfw_email_template,
select[name*="cesw_"],
select[name*="_cesfw_"],
.cesfw_threshold_wrapper select,
.cesw_coupon_spent_threshold_wrapper select,
.cesw_coupon_order_threshold_wrapper select {
	width: 100% !important;
	max-width: 100% !important;
	min-height: 44px; /* Touch-friendly minimum height */
	padding: 10px 35px 10px 12px;
	font-size: 16px; /* Prevents zoom on iOS */
	border: 2px solid #ddd;
	border-radius: 6px;
	background-color: #fff;
	background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2714%27%20height%3D%278%27%20viewBox%3D%270%200%2014%208%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%3Cpath%20d%3D%27M1%201l6%206%206-6%27%20stroke%3D%27%23666%27%20stroke-width%3D%272%27%20fill%3D%27none%27%20fill-rule%3D%27evenodd%27/%3E%3C%2Fsvg%3E');
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 14px;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	cursor: pointer;
	transition: all 0.3s ease;
	box-sizing: border-box;
}

/* Focus state for accessibility */
select:focus,
.cesw_select_field:focus,
select[name*="cesw_"]:focus,
select[name*="_cesfw_"]:focus {
	border-color: #007cba;
	outline: 3px solid rgba(0, 124, 186, 0.15);
	outline-offset: 0;
	box-shadow: 0 0 0 1px #007cba;
}

/* Hover state */
select:hover:not(:disabled),
.cesw_select_field:hover:not(:disabled) {
	border-color: #007cba;
	background-color: #f9f9f9;
}

/* Multiple select boxes */
select[multiple],
#cesw_select_coupon_product {
	min-height: 120px;
	padding: 8px;
	background-image: none;
}

/* ========================================
   RESPONSIVE CHECKBOXES
   ======================================== */

/* Modern checkbox design */
input[type="checkbox"],
.cesfw_threshold_checkbox,
.cesfw_threshold_order_checkbox,
.cesfw_checkbox_field input[type="checkbox"],
input[name*="cesw_"][type="checkbox"],
input[name*="_cesfw_"][type="checkbox"] {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	width: 22px;
	height: 22px;
	min-width: 22px;
	min-height: 22px;
	border: 2px solid #7e8993;
	border-radius: 4px;
	background-color: #fff;
	cursor: pointer;
	position: relative;
	transition: all 0.3s ease;
	vertical-align: middle;
	margin: 0 8px 0 0;
	flex-shrink: 0;
}

/* Checkbox hover state */
input[type="checkbox"]:hover:not(:disabled) {
	border-color: #007cba;
	background-color: #f0f8ff;
}

/* Checkbox focus state */
input[type="checkbox"]:focus {
	border-color: #007cba;
	outline: 3px solid rgba(0, 124, 186, 0.15);
	outline-offset: 0;
	box-shadow: 0 0 0 1px #007cba;
}

/* Checkbox checked state */
input[type="checkbox"]:checked {
	background-color: #007cba;
	border-color: #007cba;
}

/* Checkmark icon */
input[type="checkbox"]:checked::after {
	content: '';
	position: absolute;
	left: 5px;
	top: 1px;
	width: 6px;
	height: 11px;
	border: solid white;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

/* Disabled state */
input[type="checkbox"]:disabled,
select:disabled {
	opacity: 0.6;
	cursor: not-allowed;
	background-color: #f0f0f1;
}

/* ========================================
   TOGGLE SWITCH (Enhanced Responsive)
   ======================================== */

.cesfw_toggle {
	position: relative;
	display: inline-block;
	width: 60px;
	height: 32px;
	vertical-align: middle;
}

.cesfw_toggle input {
	opacity: 0;
	width: 0;
	height: 0;
}

.cesfw_slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #ccc;
	transition: .4s;
	border-radius: 34px;
}

.cesfw_slider:before {
	position: absolute;
	content: "";
	height: 24px;
	width: 24px;
	left: 4px;
	bottom: 4px;
	background-color: white;
	transition: .4s;
	border-radius: 50%;
	box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.cesfw_toggle input:checked + .cesfw_slider {
	background-color: #007cba;
}

.cesfw_toggle input:focus + .cesfw_slider {
	box-shadow: 0 0 0 3px rgba(0, 124, 186, 0.15);
}

.cesfw_toggle input:checked + .cesfw_slider:before {
	transform: translateX(28px);
}

/* ========================================
   CHECKBOX AND LABEL GROUPS
   ======================================== */

.cesfw_checkbox_field,
.cesw_checkbox_row,
.checkbox-group {
	display: flex;
	align-items: center;
	margin-bottom: 12px;
	flex-wrap: wrap;
	gap: 8px;
}

.cesfw_checkbox_field label,
.cesw_checkbox_row label,
.checkbox-group label {
	cursor: pointer;
	user-select: none;
	font-size: 14px;
	line-height: 1.5;
	margin: 0;
	flex: 1;
}

/* ========================================
   RESPONSIVE BREAKPOINTS
   ======================================== */

/* Small mobile devices (320px - 480px) */
@media only screen and (max-width: 480px) {
	/* Larger touch targets for mobile */
	input[type="checkbox"] {
		width: 24px;
		height: 24px;
		min-width: 24px;
		min-height: 24px;
	}
	
	select {
		min-height: 48px;
		font-size: 16px;
		padding: 12px 35px 12px 12px;
	}
	
	.cesfw_toggle {
		width: 56px;
		height: 30px;
	}
	
	.cesfw_toggle .cesfw_slider:before {
		height: 22px;
		width: 22px;
	}
	
	.cesfw_toggle input:checked + .cesfw_slider:before {
		transform: translateX(26px);
	}
	
	/* Stack labels below checkboxes on very small screens */
	.cesfw_checkbox_field,
	.cesw_checkbox_row {
		flex-direction: row;
		align-items: flex-start;
	}
	
	.cesfw_checkbox_field label,
	.cesw_checkbox_row label {
		font-size: 14px;
		line-height: 24px;
	}
}

/* Medium mobile devices and tablets (481px - 768px) */
@media only screen and (min-width: 481px) and (max-width: 768px) {
	input[type="checkbox"] {
		width: 22px;
		height: 22px;
	}
	
	select {
		min-height: 44px;
		font-size: 15px;
	}
	
	.cesfw_checkbox_field label,
	.cesw_checkbox_row label {
		font-size: 14px;
	}
}

/* Tablets and small laptops (769px - 1024px) */
@media only screen and (min-width: 769px) and (max-width: 1024px) {
	select {
		max-width: 500px !important;
	}
	
	.cesfw_checkbox_field,
	.cesw_checkbox_row {
		max-width: 500px;
	}
}

/* Desktop (1025px - 1440px) */
@media only screen and (min-width: 1025px) and (max-width: 1440px) {
	select {
		max-width: 500px !important;
	}
	
	.cesfw_checkbox_field,
	.cesw_checkbox_row {
		max-width: 600px;
	}
}

/* Large desktop (1441px and above) */
@media only screen and (min-width: 1441px) {
	select {
		max-width: 550px !important;
	}
	
	.cesfw_checkbox_field,
	.cesw_checkbox_row {
		max-width: 700px;
	}
}

/* ========================================
   TABLE RESPONSIVE ADJUSTMENTS
   ======================================== */

/* Make form tables responsive */
@media only screen and (max-width: 782px) {
	.form-table,
	.cesfw_table_wrapper table {
		display: block;
		overflow-x: auto;
	}
	
	.form-table th,
	.form-table td,
	.cesfw_table_wrapper th,
	.cesfw_table_wrapper td {
		display: block;
		width: 100% !important;
		padding: 10px !important;
		text-align: left !important;
	}
	
	.form-table th {
		padding-bottom: 5px !important;
		font-weight: 600;
	}
	
	.form-table td {
		padding-top: 5px !important;
	}
	
	/* Full width for mobile */
	.form-table select,
	.form-table input[type="checkbox"],
	.cesfw_table_wrapper select {
		width: 100% !important;
		max-width: 100% !important;
	}
}

/* ========================================
   ACCESSIBILITY IMPROVEMENTS
   ======================================== */

/* Focus visible for keyboard navigation */
input[type="checkbox"]:focus-visible,
select:focus-visible,
.cesfw_toggle input:focus-visible + .cesfw_slider {
	outline: 3px solid #007cba;
	outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
	input[type="checkbox"],
	select {
		border-width: 3px;
	}
	
	input[type="checkbox"]:checked::after {
		border-width: 0 3px 3px 0;
	}
}

/* Reduced motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
	input[type="checkbox"],
	select,
	.cesfw_toggle,
	.cesfw_slider,
	.cesfw_slider:before {
		transition: none;
	}
}

/* ========================================
   RTL SUPPORT
   ======================================== */

.rtl select {
	background-position: left 12px center;
	padding: 10px 12px 10px 35px;
}

.rtl input[type="checkbox"] {
	margin: 0 0 0 8px;
}

.rtl .cesfw_toggle input:checked + .cesfw_slider:before {
	transform: translateX(-28px);
}

/* ========================================
   PRINT STYLES
   ======================================== */

@media print {
	select,
	input[type="checkbox"] {
		border: 1px solid #000 !important;
		background: white !important;
	}
	
	.cesfw_toggle {
		display: none;
	}
}