{ position: absolute; opacity: 0; width: 0; height: 0; } /* Premium custom checkbox */ .yith-wcan-filter .filter-item label::after { content: ''; width: 18px; height: 18px; border: 2px solid #cbd5e0; border-radius: 6px; margin-right: 12px; background: linear-gradient(135deg, #ffffff 0%, #f7fafc 100%); transition: all 0.3s ease; flex-shrink: 0; position: relative; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); } /* Checked state - Premium */ /*.yith-wcan-filter .filter-item input[type="checkbox"]:checked + .term-label::before {*/ /* content: '✓';*/ /* position: absolute;*/ /* left: 20px;*/ /* top: 50%;*/ /* transform: translateY(-50%);*/ /* width: 18px;*/ /* height: 18px;*/ /* background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);*/ /* border-radius: 6px;*/ /* color: white;*/ /* display: flex;*/ /* align-items: center;*/ /* justify-content: center;*/ /* font-size: 11px;*/ /* font-weight: bold;*/ /* z-index: 2;*/ /* box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);*/ /*}*/ /* Tanda centang di tengah kotak */ .yith-wcan-filter .filter-item input[type="checkbox"]:checked + .term-label::before { content: '✓'; position: absolute; right: -17px; /* posisikan di kanan dalam kotak */ top: 50%; transform: translateY(-50%); width: 18px; height: 18px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 6px; color: white; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: bold; box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3); } .yith-wcan-filter .filter-item input[type="checkbox"]:checked + .term-label { background: linear-gradient(135deg, #f8faff 0%, #f0f4ff 100%); border-color: #667eea; color: #2d3748; font-weight: 600; padding-left: 45px; box-shadow: 0 4px 15px rgba(102, 126, 234, 0.1), 0 0 0 1px rgba(102, 126, 234, 0.1) inset; } /* Premium term label */ .yith-wcan-filter .term-label { text-decoration: none; color: #4a5568; font-size: 14px; font-weight: 500; transition: all 0.3s ease; flex-grow: 1; position: relative; z-index: 1; letter-spacing: -0.1px; } .yith-wcan-filter .filter-item:hover .term-label { color: #2d3748; } /* Premium count badge */ .yith-wcan-filter .filter-item .count { background: linear-gradient(135deg, #edf2f7 0%, #e2e8f0 100%); color: #718096; padding: 4px 8px; border-radius: 10px; font-size: 10px; font-weight: 700; margin-left: 8px; transition: all 0.3s ease; min-width: 28px; text-align: center; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); } .yith-wcan-filter .filter-item:hover .count { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; transform: scale(1.05); } .yith-wcan-filter .filter-item input[type="checkbox"]:checked + .term-label + .count { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3); } /* === MOBILE DROPDOWN FILTER - PREMIUM === */ .yith-wcan-filters .yith-wcan-dropdown-wrapper { background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%); border: 1px solid rgba(229, 231, 235, 0.8); border-radius: 16px; padding: 18px; box-shadow: 0 4px 25px rgba(0, 0, 0, 0.08), 0 1px 0 rgba(255, 255, 255, 0.8) inset; transition: all 0.3s ease; backdrop-filter: blur(10px); margin: 0; width: 100%; } .yith-wcan-filters .yith-wcan-dropdown-wrapper:hover { box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12), 0 1px 0 rgba(255, 255, 255, 0.8) inset; transform: translateY(-2px); } /* Premium dropdown container */ .yith-wcan-dropdown { border: 1.5px solid #e5e7eb; border-radius: 12px; background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%); padding: 10px 14px; cursor: pointer; position: relative; transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); margin: 0; } .yith-wcan-dropdown::after { content: '▼'; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: #6b7280; font-size: 9px; transition: transform 0.3s ease; } .yith-wcan-dropdown.open::after { transform: translateY(-50%) rotate(180deg); } .yith-wcan-dropdown.open { border-color: #667eea; background: linear-gradient(135deg, #ffffff 0%, #f8faff 100%); box-shadow: 0 4px 15px rgba(102, 126, 234, 0.15), 0 0 0 1px rgba(102, 126, 234, 0.1) inset; } /* Premium dropdown label */ .yith-wcan-dropdown .dropdown-label { font-size: 15px; font-weight: 600; color: #374151; letter-spacing: -0.1px; } /* Premium search field */ .yith-wcan-dropdown .search-field-container input { width: 100%; padding: 10px 12px; border: 1.5px solid #e5e7eb; border-radius: 8px; margin-bottom: 10px; transition: all 0.3s ease; background: #ffffff; font-size: 13px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.03); } .yith-wcan-dropdown .search-field-container input:focus { border-color: #667eea; outline: none; box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1), 0 4px 12px rgba(102, 126, 234, 0.1); transform: translateY(-1px); } /* Premium item list */ .yith-wcan-dropdown .matching-items { list-style: none; margin: 0; padding: 6px 0; max-height: 200px; overflow-y: auto; border-radius: 8px; } .yith-wcan-dropdown .matching-items li { padding: 8px 12px; border-radius: 8px; transition: all 0.3s ease; margin: 2px 4px; border: 1px solid transparent; } .yith-wcan-dropdown .matching-items li:hover { background: linear-gradient(135deg, #f8faff 0%, #f0f4ff 100%); border-color: rgba(102, 126, 234, 0.2); transform: translateX(4px); box-shadow: 0 2px 8px rgba(102, 126, 234, 0.1); } .yith-wcan-dropdown .matching-items li.active { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-color: transparent; } .yith-wcan-dropdown .matching-items li.active a { color: white; font-weight: 600; } /* Premium links */ .yith-wcan-dropdown .matching-items li a { text-decoration: none; display: block; color: #374151; font-weight: 500; transition: color 0.3s ease; font-size: 13px; } /* Remove additional wrapper containers */ .yith-wcan-filters .filters-container, .yith-wcan-filters form, .yith-wcan-filters > div { margin: 0 !important; padding: 10px !important; border: none !important; background: none !important; box-shadow: none !important; } /* Ensure direct container styling */ .elementor-widget-container > .yith-wcan-filters { margin: 0 !important; padding: 0 !important; } /* Responsive design */ @media (max-width: 768px) { .yith-wcan-filters { padding: 20px; border-radius: 14px; } .yith-wcan-filter .filter-item label { padding: 12px 14px; } .yith-wcan-filter .filter-title { font-size: 16px; margin-bottom: 16px; } .yith-wcan-filters .yith-wcan-dropdown-wrapper { padding: 16px; } } /* Focus state for accessibility */ .yith-wcan-filter .filter-item label:focus-within { outline: 2px solid #667eea; outline-offset: 2px; box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1); } /* Smooth animations */ .yith-wcan-filter .filter-item, .yith-wcan-dropdown { animation: fadeInUp 0.6s ease-out; } @keyframes fadeInUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /*------------------*/ /* 📱 MOBILE OPTIMIZATION - SMALLER FILTERS ON HANDPHONE */ @media (max-width: 480px) { /* 🌈 Container lebih kecil dan ringan */ .yith-wcan-filters { padding: 14px !important; border-radius: 10px !important; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05) !important; backdrop-filter: blur(6px) !important; } /* 🏷️ Judul filter lebih kecil */ .yith-wcan-filter .filter-title { font-size: 14.5px !important; margin-bottom: 12px !important; padding-bottom: 0px !important; } /* 📦 Checkbox item lebih padat */ .yith-wcan-filter .filter-item label { padding: 10px 12px !important; border-radius: 10px !important; font-size: 13px !important; } /* ✅ Kotak centang dan tanda centang lebih kecil */ .yith-wcan-filter .filter-item label::after { width: 14px !important; height: 14px !important; border-radius: 4px !important; margin-right: 8px !important; } .yith-wcan-filter .filter-item input[type="checkbox"]:checked + .term-label::before { width: 14px !important; height: 14px !important; font-size: 9px !important; right: -14px !important; } /* 🧾 Teks label dan count badge */ .yith-wcan-filter .term-label { font-size: 13px !important; } .yith-wcan-filter .filter-item .count { font-size: 9.5px !important; padding: 3px 6px !important; min-width: 24px !important; } /* 📥 Dropdown style lebih ramping */ .yith-wcan-filters .yith-wcan-dropdown-wrapper { padding: 12px !important; border-radius: 10px !important; } .yith-wcan-dropdown { padding: 8px 12px !important; border-radius: 10px !important; } .yith-wcan-dropdown .dropdown-label { font-size: 13px !important; } .yith-wcan-dropdown .search-field-container input { padding: 8px 10px !important; font-size: 12.5px !important; } .yith-wcan-dropdown .matching-items li { padding: 6px 10px !important; font-size: 13px !important; } /* 🎨 Kurangi efek hover agar ringan */ .yith-wcan-filter .filter-item label:hover { transform: none !important; box-shadow: 0 2px 6px rgba(102, 126, 234, 0.1) !important; } /* 🧩 Hilangkan margin besar antar filter */ .yith-wcan-filters .filters-container, .yith-wcan-filters form, .yith-wcan-filters > div { padding: 6px !important; } } " _transform_keep_proportions="yes" _transform_keep_proportions_hover="yes"]