/**
 * HaulerProShop - Shop Sidebar Styles
 * Sidebar con filtros, búsqueda y widgets
 */

/* ========================================
   VARIABLES
======================================== */
:root {
	--rh-primary: #FDB71B;
	--rh-primary-hover: #E6A515;
	--rh-text-dark: #1f2937;
	--rh-text-medium: #374151;
	--rh-text-light: #6b7280;
	--rh-text-muted: #9ca3af;
	--rh-bg-white: #ffffff;
	--rh-bg-gray-50: #f9fafb;
	--rh-bg-gray-100: #f3f4f6;
	--rh-border: #e5e7eb;
	--rh-border-light: #CBCBCB;
	--rh-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);
	--rh-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06);
	--rh-radius: 8px;
	--rh-radius-lg: 12px;
	--content-width: min(100%, 1140px);
	--row-gap: 2rem;
	--column-gap: 2rem;
}

/* ========================================
   LAYOUT
======================================== */
.rh-shop-wrapper {
	gap: var(--row-gap) var(--column-gap);
	height: 100%;
	margin: 0 auto;
	max-width: var(--content-width);
	padding-inline-end: 0;
	padding-inline-start: 0;
	width: 100%;
}

.rh-shop-layout {
	display: grid;
	grid-template-columns: 300px 1fr;
	gap: 2rem;
}

.rh-shop-sidebar {
	position: relative;

	& .rh-sidebar-toggle {
		display: none;
		width: 100%;
		padding: 1rem 1.5rem;
		background-color: var(--rh-primary);
		color: #000000;
		border: none;
		border-radius: var(--rh-radius);
		font-size: 1rem;
		font-weight: 600;
		cursor: pointer;
		margin-bottom: 1rem;
		transition: background-color 0.2s;

		&:hover {
			background-color: var(--rh-primary-hover);
		}

		& i {
			margin-right: 0.5rem;
			vertical-align: middle;
		}
	}

	& .rh-sidebar-inner {
		background: var(--rh-bg-white);
		border: 1px solid var(--rh-border);
		border-radius: var(--rh-radius-lg);
		padding: 1.5rem;
		box-shadow: var(--rh-shadow-sm);

		& .rh-filter-section {
			background: var(--rh-bg-white);
			border: 1px solid var(--rh-border);
			border-radius: var(--rh-radius-lg);
			padding: 1.375rem 1rem;
			margin-bottom: 1.5rem;
			box-shadow: var(--rh-shadow-sm);
			transition: box-shadow 0.3s ease;

			&:last-child {
				margin-bottom: 0;
			}

			&:hover {
				box-shadow: var(--rh-shadow-md);
			}

			& h4.rh-filter-title {
				display: flex;
				align-items: center;
				gap: 0.75rem;
				margin: 0 0 1.25rem 0;
				font-size: 0.9375rem;
				font-weight: 600;
				color: var(--rh-text-dark);
				letter-spacing: -0.01em;

				& i {
					font-size: 20px;
					color: var(--rh-primary);
					opacity: 0.9;
					transition: transform 0.2s ease;
					flex-shrink: 0;
				}
			}

			&:hover h4.rh-filter-title i {
				transform: rotate(-5deg);
			}

			& .widgettitle {
				display: none;
			}

			/* Filter List */
			& .rh-filter-list {
				list-style: none;
				margin: 0;
				padding: 0;

				& .rh-filter-item {
					margin-bottom: 0.5rem;

					& a {
						display: flex;
						align-items: center;
						justify-content: space-between;
						padding: 0.5rem 0.75rem;
						color: var(--rh-text-medium);
						border-radius: var(--rh-radius);
						transition: all 0.2s;
						text-decoration: none;

						&:hover,
						&.active {
							background-color: #fffbeb;
							color: var(--rh-primary);
						}
					}

					& .rh-filter-count {
						display: inline-flex;
						align-items: center;
						justify-content: center;
						min-width: 28px;
						height: 28px;
						padding: 0 0.5rem;
						background-color: var(--rh-bg-gray-100);
						color: var(--rh-text-light);
						font-size: 0.75rem;
						font-weight: 600;
						border-radius: 14px;
					}
				}
			}

			/* Search Form */
			& .rh-product-search-form {
				position: relative;

				& .rh-search-input-wrapper {
					position: relative;
					display: flex;
					align-items: center;
				}

				& .rh-product-search-field {
					width: 100%;
					padding: 0.625rem 2.75rem 0.625rem 1rem;
					border: 1px solid var(--rh-border);
					border-radius: var(--rh-radius);
					font-size: 0.875rem;
					color: var(--rh-text-medium);
					background-color: var(--rh-bg-white);
					transition: all 0.2s;

					&::placeholder {
						color: var(--rh-text-muted);
					}

					&:focus {
						outline: none;
						border-color: var(--rh-primary);
						box-shadow: 0 0 0 3px rgba(253, 183, 27, 0.1);
					}
				}

				& .rh-product-search-btn {
					position: absolute;
					right: 0.5rem;
					top: 50%;
					transform: translateY(-50%);
					width: 32px;
					height: 32px;
					display: flex;
					align-items: center;
					justify-content: center;
					background-color: var(--rh-primary);
					color: #000000;
					border: none;
					border-radius: var(--rh-radius);
					cursor: pointer;
					transition: all 0.2s;
					padding: 0;

					&:hover {
						background-color: var(--rh-primary-hover);
						transform: translateY(-50%) scale(1.05);
					}

					& i {
						font-size: 18px;
						color: #000000;
					}
				}
			}

			/* Recent Products */
			& .rh-recent-products {
				list-style: none;
				margin: 0;
				padding: 0;

				& .rh-recent-product-item {
					margin-bottom: 1rem;

					&:last-child {
						margin-bottom: 0;
					}

					& .rh-recent-product-link {
						display: flex;
						align-items: flex-start;
						gap: 0.75rem;
						text-decoration: none;
						padding: 0.5rem;
						border-radius: var(--rh-radius);
						transition: all 0.2s;

						&:hover {
							background-color: var(--rh-bg-gray-50);
						}

						& .rh-recent-product-image {
							flex-shrink: 0;
							width: 60px;
							height: 60px;
							border-radius: var(--rh-radius);
							overflow: hidden;
							background-color: var(--rh-bg-gray-50);

							& img {
								width: 100%;
								height: 100%;
								object-fit: cover;
							}
						}

						& .rh-recent-product-info {
							flex: 1;
							min-width: 0;
							display: flex;
							flex-direction: column;
							gap: 0.25rem;

							& .rh-recent-product-title {
								font-size: 0.875rem;
								font-weight: 500;
								color: var(--rh-text-dark);
								line-height: 1.3;
								display: -webkit-box;
								-webkit-line-clamp: 2;
								-webkit-box-orient: vertical;
								overflow: hidden;
							}
						}

						&:hover .rh-recent-product-title {
							color: var(--rh-primary);
						}

						& .rh-recent-product-price {
							font-size: 0.8125rem;
							color: var(--rh-primary);
							font-weight: 600;

							& del {
								font-size: 0.75rem;
								color: var(--rh-text-muted);
								margin-right: 0.25rem;
								font-weight: 400;
							}

							& ins {
								text-decoration: none;
								color: #ef4444;
								font-weight: 600;
							}
						}
					}
				}
			}

			/* Tags Cloud */
			& .rh-tags-cloud {
				display: flex;
				flex-wrap: wrap;
				gap: 0.5rem;

				& .rh-tag {
					display: inline-block;
					padding: 0.375rem 0.75rem;
					background-color: var(--rh-bg-gray-100);
					color: var(--rh-text-medium);
					font-size: 0.8125rem;
					border-radius: var(--rh-radius);
					text-decoration: none;
					transition: all 0.2s;

					&:hover {
						background-color: var(--rh-primary);
						color: #000000;
						transform: translateY(-2px);
					}
				}
			}

			/* Badges */
			& .rh-badge-mini {
				font-size: 1rem;
				margin-left: 0.25rem;
			}

			/* Price Filter Widget */
			& .price_slider_wrapper {
				padding: 0.5rem 0 1rem;

				& .price_slider {
					position: relative;
					height: 6px;
					background: var(--rh-bg-gray-100);
					border-radius: var(--rh-radius-lg);
					margin: 1rem 0 2rem;
					cursor: pointer;

					& .ui-slider-range {
						position: absolute;
						height: 100%;
						background: var(--rh-primary);
						border-radius: var(--rh-radius-lg);
						box-shadow: 0 1px 3px rgba(253, 183, 27, 0.3);
					}

					& .ui-slider-handle {
						position: absolute;
						width: 18px;
						height: 18px;
						background: var(--rh-bg-white);
						border: 2px solid var(--rh-primary);
						border-radius: 50%;
						top: 50%;
						transform: translateY(-50%);
						cursor: grab;
						transition: all 0.2s;

						&:hover {
							transform: translateY(-50%) scale(1.2);
							box-shadow: 0 2px 6px rgba(253, 183, 27, 0.4);
						}
					}
				}

				& .price_slider_amount {
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-size: 0.875rem;
					color: var(--rh-text-medium);

					& .price_label {
						font-weight: 500;
					}

					& button {
						padding: 0.5rem 1rem;
						background-color: var(--rh-primary);
						color: #000000;
						border: none;
						border-radius: var(--rh-radius);
						font-size: 0.875rem;
						font-weight: 600;
						cursor: pointer;
						transition: all 0.2s;

						&:hover {
							background-color: var(--rh-primary-hover);
						}
					}
				}
			}
		}
	}
}

/* ========================================
   TOOLBAR
======================================== */
.rh-shop-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1rem 1.5rem;
	background-color: var(--rh-bg-white);
	border: 1px solid var(--rh-border);
	border-radius: var(--rh-radius-lg);
	margin-bottom: 1.5rem;
	box-shadow: var(--rh-shadow-sm);

	& .woocommerce-result-count {
		margin: 0;
		font-size: 0.875rem;
		color: var(--rh-text-light);
		font-weight: 500;
	}

	& .woocommerce-ordering select {
		padding: 0.5rem 2rem 0.5rem 1rem;
		border: 1px solid var(--rh-border);
		border-radius: var(--rh-radius);
		background-color: var(--rh-bg-white);
		color: var(--rh-text-medium);
		font-size: 0.875rem;
		cursor: pointer;
		transition: border-color 0.2s;

		&:hover {
			border-color: var(--rh-primary);
		}

		&:focus {
			outline: none;
			border-color: var(--rh-primary);
			box-shadow: 0 0 0 3px rgba(253, 183, 27, 0.1);
		}
	}
}

/* ========================================
   RESPONSIVE
======================================== */
@media (max-width: 1024px) {
	.rh-shop-layout {
		grid-template-columns: 1fr;
	}

	.rh-shop-sidebar .rh-sidebar-toggle {
		display: flex;
	}

	.rh-shop-sidebar .rh-sidebar-inner {
		display: none;
		position: fixed;
		top: 0;
		left: 0;
		width: 320px;
		height: 100vh;
		overflow-y: auto;
		z-index: 9999;
		border-radius: 0;

		&.active {
			display: block;
			animation: slideInLeft 0.3s ease;
		}
	}

	.rh-sidebar-overlay {
		display: block;
	}
}

@media (max-width: 768px) {
	.rh-shop-toolbar {
		flex-direction: column;
		gap: 1rem;
		align-items: stretch;
	}

	.rh-shop-toolbar .woocommerce-result-count {
		text-align: center;
	}

	.rh-shop-toolbar .woocommerce-ordering {
		text-align: center;
	}
}

@media (max-width: 480px) {
	.rh-shop-sidebar .rh-sidebar-inner {
		width: 100%;
	}
}

@keyframes slideInLeft {
	from { transform: translateX(-100%); }
	to { transform: translateX(0); }
}