/**
 * CaptWiki Search Filter Widget — Styles
 *
 * Uses global CSS variables (--cw-*) defined in the global theme.
 * Supports dark mode via body.dark-mode selector.
 *
 * @since  1.2.0
 * @package captain-widgets-kit
 */

/* ======================================================================
   Variables (fallbacks when global vars not set)
   ====================================================================== */
.cw-search-filter {
	--cwf-bg:             var(--cw-bg,           #ffffff);
	--cwf-text:           var(--cw-text,          #111111);
	--cwf-border:         var(--cw-border,        #dddddd);
	--cwf-primary:        var(--cw-primary,       #2563eb);
	--cwf-muted:          var(--cw-muted,         #6b7280);
	--cwf-radius:         6px;
	--cwf-transition:     all 0.2s ease;
}

/* ======================================================================
   Wrapper
   ====================================================================== */
.cw-search-filter {
	position:   relative;
	display:    block;
	width:      100%;
}

.cw-filter-wrap {
	display:        flex;
	flex-wrap:      wrap;
	align-items:    flex-start;
	gap:            12px;
}

/* Direction modifiers */
.cw-filter-wrap.cw-flex-dir-row    { flex-direction: row; }
.cw-filter-wrap.cw-flex-dir-column { flex-direction: column; }

/* ======================================================================
   Single Filter Field
   ====================================================================== */
.cw-filter-field {
	display:        flex;
	flex-direction: column;
	flex:           1 1 auto;
	min-width:      160px;
}

/* ======================================================================
   Field Label
   ====================================================================== */
.cw-filter-label {
	display:        block;
	margin-bottom:  6px;
	font-size:      14px;
	font-weight:    600;
	color:          var(--cwf-text);
	line-height:    1.4;
	transition:     var(--cwf-transition);
}

/* ======================================================================
   Text Search Input
   ====================================================================== */
.cw-filter-search-wrap {
	position: relative;
	display:  flex;
	width:    100%;
}

.cw-filter-search-input {
	width:            100%;
	padding:          10px 36px 10px 14px;
	font-size:        14px;
	line-height:      1.5;
	color:            var(--cwf-text);
	background-color: var(--cwf-bg);
	border:           1px solid var(--cwf-border);
	border-radius:    var(--cwf-radius);
	outline:          none;
	transition:       var(--cwf-transition);
	box-sizing:       border-box;
}

.cw-filter-search-input:focus {
	border-color: var(--cwf-primary);
	box-shadow:   0 0 0 3px rgba(37, 99, 235, 0.15);
}

.cw-filter-search-input::placeholder {
	color: var(--cwf-muted);
}

.cw-filter-search-icon {
	position:   absolute;
	right:      10px;
	top:        50%;
	transform:  translateY(-50%);
	color:      var(--cwf-muted);
	pointer-events: none;
	display:    flex;
	align-items: center;
}

/* ======================================================================
   Checkbox
   ====================================================================== */
.cw-filter-checkbox-wrap {
	display:        flex;
	flex-direction: column;
	gap:            8px;
}

.cw-filter-checkbox {
	display: block;
}

.cw-filter-checkbox input[type="checkbox"] {
	position: absolute;
	width:    0;
	height:   0;
	opacity:  0;
}

.cw-filter-checkbox label {
	display:     flex;
	align-items: center;
	gap:         10px;
	cursor:      pointer;
	font-size:   14px;
	color:       var(--cwf-text);
	transition:  var(--cwf-transition);
	user-select: none;
}

.cw-check-icon {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	width:           20px;
	height:          20px;
	flex-shrink:     0;
	border:          2px solid var(--cwf-border);
	border-radius:   4px;
	background-color: var(--cwf-bg);
	color:           transparent;
	transition:      var(--cwf-transition);
}

.cw-filter-checkbox input[type="checkbox"]:checked + label .cw-check-icon {
	background-color: var(--cwf-primary);
	border-color:     var(--cwf-primary);
	color:            #ffffff;
}

.cw-filter-checkbox label:hover .cw-check-icon {
	border-color: var(--cwf-primary);
}

/* ======================================================================
   Radio
   ====================================================================== */
.cw-filter-radio-wrap {
	display:        flex;
	flex-direction: column;
	gap:            8px;
}

.cw-filter-radio {
	display: block;
}

.cw-filter-radio input[type="radio"] {
	position: absolute;
	width:    0;
	height:   0;
	opacity:  0;
}

.cw-filter-radio label {
	display:     flex;
	align-items: center;
	gap:         10px;
	cursor:      pointer;
	font-size:   14px;
	color:       var(--cwf-text);
	transition:  var(--cwf-transition);
	user-select: none;
}

.cw-radio-icon {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	width:           20px;
	height:          20px;
	flex-shrink:     0;
	border:          2px solid var(--cwf-border);
	border-radius:   50%;
	background-color: var(--cwf-bg);
	transition:      var(--cwf-transition);
}

.cw-radio-dot {
	width:            10px;
	height:           10px;
	border-radius:    50%;
	background-color: transparent;
	transition:       var(--cwf-transition);
}

.cw-filter-radio input[type="radio"]:checked + label .cw-radio-icon {
	border-color: var(--cwf-primary);
}

.cw-filter-radio input[type="radio"]:checked + label .cw-radio-dot {
	background-color: var(--cwf-primary);
}

.cw-filter-radio label:hover .cw-radio-icon {
	border-color: var(--cwf-primary);
}

/* ======================================================================
   Select / Dropdown
   ====================================================================== */
.cw-filter-select-wrap {
	position: relative;
	width:    100%;
}

.cw-filter-select {
	width:            100%;
	padding:          10px 36px 10px 14px;
	font-size:        14px;
	color:            var(--cwf-text);
	background-color: var(--cwf-bg);
	border:           1px solid var(--cwf-border);
	border-radius:    var(--cwf-radius);
	outline:          none;
	cursor:           pointer;
	transition:       var(--cwf-transition);
	-webkit-appearance: none;
	appearance:       none;
	box-sizing:       border-box;

	/* Custom arrow */
	background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat:   no-repeat;
	background-position: right 10px center;
}

.cw-filter-select:focus {
	border-color: var(--cwf-primary);
	box-shadow:   0 0 0 3px rgba(37, 99, 235, 0.15);
}

/* ======================================================================
   Count badge
   ====================================================================== */
.cw-filter-count {
	font-size:  12px;
	color:      var(--cwf-muted);
	margin-left: 2px;
}

.cw-filter-item-name {
	flex: 1;
}

/* ======================================================================
   Reset Button
   ====================================================================== */
.cw-filter-field--reset {
	flex:       0 0 auto;
	min-width:  0;
	align-self: flex-end;
}

.cw-filter-reset-btn {
	display:          inline-flex;
	align-items:      center;
	justify-content:  center;
	gap:              6px;
	padding:          10px 20px;
	font-size:        14px;
	font-weight:      500;
	color:            var(--cwf-text);
	background-color: transparent;
	border:           1px solid var(--cwf-border);
	border-radius:    var(--cwf-radius);
	cursor:           pointer;
	transition:       var(--cwf-transition);
	white-space:      nowrap;
}

.cw-filter-reset-btn:hover {
	color:            var(--cwf-primary);
	border-color:     var(--cwf-primary);
	background-color: rgba(37, 99, 235, 0.06);
}

.cw-filter-reset-btn:focus-visible {
	outline:    2px solid var(--cwf-primary);
	outline-offset: 2px;
}

/* ======================================================================
   Loading State on Listing Widget
   ====================================================================== */
.cwk-filter-loading {
	position: relative;
	min-height: 200px;
}

.cwk-filter-loading .dp-row {
	opacity:    0.4;
	pointer-events: none;
	transition: opacity 0.2s ease;
}

.cwk-filter-spinner {
	position:    absolute;
	top:         50%;
	left:        50%;
	transform:   translate(-50%, -50%);
	display:     flex;
	align-items: center;
	gap:         6px;
	z-index:     10;
}

.cwk-filter-spinner span {
	display:          inline-block;
	width:            10px;
	height:           10px;
	border-radius:    50%;
	background-color: var(--cw-primary, #2563eb);
	animation:        cwk-bounce 1.2s ease-in-out infinite;
}

.cwk-filter-spinner span:nth-child(1) { animation-delay: 0s; }
.cwk-filter-spinner span:nth-child(2) { animation-delay: 0.2s; }
.cwk-filter-spinner span:nth-child(3) { animation-delay: 0.4s; }

@keyframes cwk-bounce {
	0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
	40%           { transform: scale(1);   opacity: 1;   }
}

/* ======================================================================
   No Results
   ====================================================================== */
.captwiki-no-results {
	grid-column:  1 / -1;
	text-align:   center;
	padding:      40px 20px;
	color:        var(--cw-muted, #6b7280);
	font-size:    16px;
}

/* ======================================================================
   Dark Mode
   ====================================================================== */
body.dark-mode .cw-search-filter {
	--cwf-bg:     #111111;
	--cwf-text:   #ffffff;
	--cwf-border: #333333;
	--cwf-muted:  #9ca3af;
	--cwf-primary: #60a5fa;
}

body.dark-mode .cw-filter-search-input,
body.dark-mode .cw-filter-select {
	background-color: #1a1a1a;
}

body.dark-mode .cw-check-icon,
body.dark-mode .cw-radio-icon {
	background-color: #1a1a1a;
}

/* ======================================================================
   Responsive
   ====================================================================== */
@media (max-width: 767px) {
	.cw-filter-wrap.cw-flex-dir-row {
		flex-direction: column;
	}

	.cw-filter-field {
		min-width: 100%;
		flex:      1 1 100%;
	}

	.cw-filter-field--reset {
		align-self: stretch;
	}

	.cw-filter-reset-btn {
		width: 100%;
	}
}

/* ======================================================================
   Results Count Bar
   ====================================================================== */
.cw-filter-results-count {
	display:     flex;
	align-items: center;
	flex-wrap:   wrap;
	gap:         4px;
	font-size:   14px;
	color:       var(--cwf-muted);
	min-height:  24px;
	transition:  var(--cwf-transition);
}

.cw-count-num {
	font-weight:  700;
	color:        var(--cwf-primary);
	font-variant-numeric: tabular-nums;
	transition:   var(--cwf-transition);
}

/* ======================================================================
   Reset Button Wrap
   ====================================================================== */
.cw-filter-reset-wrap {
	display:     flex;
	align-items: center;
	flex-wrap:   wrap;
	gap:         8px;
}

/* Fixed / sticky reset */
.cw-filter-reset-wrap--fixed {
	position:   sticky;
	bottom:     16px;
	z-index:    50;
	background: var(--cwf-bg);
	padding:    8px 0;
}

/* ======================================================================
   Active Filter Tags
   ====================================================================== */
.cw-filter-active-tags {
	display:  flex;
	flex-wrap: wrap;
	gap:       6px;
	min-width: 0;
}

.cw-filter-active-tag {
	display:          inline-flex;
	align-items:      center;
	gap:              4px;
	padding:          3px 10px;
	font-size:        12px;
	font-weight:      500;
	color:            var(--cwf-primary);
	background-color: rgba(37, 99, 235, 0.08);
	border:           1px solid rgba(37, 99, 235, 0.2);
	border-radius:    20px;
	white-space:      nowrap;
	transition:       var(--cwf-transition);
}

/* Dark mode */
body.dark-mode .cw-filter-active-tag {
	color:            #60a5fa;
	background-color: rgba(96, 165, 250, 0.1);
	border-color:     rgba(96, 165, 250, 0.25);
}

body.dark-mode .cw-filter-reset-wrap--fixed {
	background: #111111;
}