@selwise/widget 0.0.1

package/dist/npm/esm/modules/search/styles.js

@@ -0,0 +1,860 @@
+/**
+ * Search Module Styles
+ * CSS injection for search widget
+ */
+import { getShadow } from './utils/helpers.js';
+/**
+ * Generate all CSS styles for the search module
+ */
+export function generateSearchStyles(config, suggestionStyles) {
+    const c = config;
+    const s = c.styles || {};
+    const ss = suggestionStyles;
+    const imageSizes = { small: '40px', medium: '56px', large: '72px' };
+    const imgSize = imageSizes[c.imageSize] || '56px';
+    return `
+    /* Base Wrapper */
+    .ws-search-wrapper {
+      position: relative;
+      font-family: ${s.fontFamily || '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif'};
+      z-index: 999999;
+      box-sizing: border-box;
+    }
+    .ws-search-wrapper * { box-sizing: border-box; }
+    .ws-search-wrapper svg {
+      display: inline-block;
+      vertical-align: middle;
+      overflow: visible;
+    }
+
+    /* Input */
+    .ws-search-input-wrap { position: relative; }
+    .ws-search-input {
+      width: 100%;
+      padding: 12px 16px 12px ${s.inputIcon !== false ? '44px' : '16px'};
+      border-width: ${s.inputBorderWidth || '2px'};
+      border-style: solid;
+      border-color: ${s.inputBorder || '#e5e7eb'};
+      border-radius: ${s.inputRadius || '8px'};
+      font-size: ${s.inputSize === 'large' ? '16px' : (s.inputSize === 'xlarge' ? '18px' : '14px')};
+      color: ${s.textColor || '#1f2937'};
+      background: ${s.inputBg || '#f9fafb'};
+      outline: none;
+      transition: all 0.2s ease;
+    }
+    .ws-search-input.no-icon { padding-left: 16px; }
+    
+    .ws-search-input:focus {
+      border-color: ${s.inputFocus || s.accentColor || '#6366f1'};
+      background: ${s.backgroundColor || '#ffffff'};
+      box-shadow: 0 0 0 3px ${s.inputFocus || s.accentColor || '#6366f1'}20;
+    }
+    .ws-search-input::placeholder { color: #9ca3af; }
+
+    .ws-search-icon {
+      position: absolute;
+      left: 14px;
+      top: 50%;
+      transform: translateY(-50%);
+      width: 20px;
+      height: 20px;
+      color: ${s.accentColor || '#9ca3af'};
+      pointer-events: none;
+      display: ${s.inputIcon !== false ? 'block' : 'none'};
+    }
+
+    .ws-search-clear {
+      position: absolute;
+      right: 12px;
+      top: 50%;
+      transform: translateY(-50%);
+      width: 24px;
+      height: 24px;
+      background: #f3f4f6;
+      border: none;
+      border-radius: 50%;
+      cursor: pointer;
+      display: none;
+      align-items: center;
+      justify-content: center;
+      color: #6b7280;
+    }
+    .ws-search-clear:hover { background: #e5e7eb; color: #374151; }
+    .ws-search-wrapper.has-value .ws-search-clear { display: flex; }
+
+    /* Results Container */
+    .ws-search-results {
+      position: absolute;
+      top: 100%;
+      left: 0;
+      right: 0;
+      margin-top: 8px;
+      background: ${s.backgroundColor || '#ffffff'};
+      border-radius: ${s.containerRadius || '12px'};
+      box-shadow: ${getShadow(s.containerShadow || 'lg')};
+      max-height: ${s.maxHeight || '400px'};
+      overflow-y: auto;
+      display: none;
+      z-index: 1000000;
+      border: ${s.containerBorder ? '1px solid ' + (s.borderColor || '#e5e7eb') : 'none'};
+    }
+    .ws-search-results.open {
+      display: block;
+      animation: wsSearchFadeIn ${c.animationDuration}ms ease;
+    }
+
+    @keyframes wsSearchFadeIn {
+      from { opacity: 0; transform: translateY(-8px); }
+      to { opacity: 1; transform: translateY(0); }
+    }
+    @keyframes wsSearchSlideIn {
+      from { opacity: 0; transform: translateX(100%); }
+      to { opacity: 1; transform: translateX(0); }
+    }
+    @keyframes wsSearchScaleIn {
+      from { opacity: 0; transform: scale(0.95); }
+      to { opacity: 1; transform: scale(1); }
+    }
+
+    /* Result Items - Base Shared */
+    .ws-search-item {
+      display: flex;
+      align-items: center;
+      cursor: pointer;
+      transition: background 0.15s ease;
+      text-decoration: none;
+      color: inherit;
+    }
+    .ws-search-item:hover,
+    .ws-search-item.focused {
+      background: ${s.itemHoverBg || s.resultHoverBg || '#f9fafb'};
+    }
+    .ws-search-item:not(:last-child) {
+      border-bottom: ${s.resultDivider !== false ? '1px solid ' + (s.borderColor || '#f3f4f6') : 'none'};
+    }
+    
+    /* Layout: List (Standard) */
+    .ws-search-results.layout-list .ws-search-item {
+      gap: ${s.itemGap || '12px'};
+      padding: ${s.itemPadding || '12px'} 16px;
+    }
+
+    /* Layout: Compact (Dense) */
+    .ws-search-results.layout-compact .ws-search-item {
+      gap: 8px;
+      padding: 8px 12px;
+    }
+    .ws-search-results.layout-compact .ws-search-img {
+      width: 32px;
+      height: 32px;
+      border-radius: ${s.imageRadius || '4px'};
+    }
+    .ws-search-results.layout-compact .ws-search-desc { display: none; }
+    .ws-search-results.layout-compact .ws-search-price { font-size: 13px; }
+    .ws-search-results.layout-compact .ws-search-name { font-size: 13px; margin: 0; }
+    
+    /* Layout: Large (Prominent) */
+    .ws-search-results.layout-large .ws-search-item {
+      gap: 16px;
+      padding: 20px;
+    }
+    .ws-search-results.layout-large .ws-search-img {
+      width: 80px;
+      height: 80px;
+    }
+    .ws-search-results.layout-large .ws-search-name {
+      font-size: 16px;
+      margin-bottom: 6px;
+    }
+    .ws-search-results.layout-large .ws-search-desc {
+      -webkit-line-clamp: 3;
+      line-clamp: 3;
+    }
+
+    /* Grid Layout */
+    .ws-search-results.layout-grid .ws-search-items {
+      display: grid;
+      grid-template-columns: repeat(${s.gridColumns || 2}, 1fr);
+      gap: ${s.gridGap || '16px'};
+      padding: 12px;
+    }
+    .ws-search-results.layout-grid .ws-search-item {
+      flex-direction: column;
+      padding: ${s.itemPadding || '16px'};
+      border-radius: ${s.itemRadius || '12px'};
+      border: 1px solid ${s.borderColor || '#e5e7eb'};
+      box-shadow: ${getShadow(s.itemShadow || 'sm')};
+    }
+    .ws-search-results.layout-grid .ws-search-item:hover {
+      box-shadow: ${getShadow(s.itemHoverShadow || 'lg')};
+      ${s.itemHoverScale ? 'transform: scale(1.02);' : ''}
+    }
+
+    /* Image */
+    .ws-search-img {
+      width: ${imgSize};
+      height: ${imgSize};
+      height: ${imgSize};
+      object-fit: ${s.imageObjectFit || 'cover'};
+      border-radius: ${c.resultLayout === 'grid' ? '0' : (s.imageRadius || '8px')};
+      border: ${s.imageBorder ? '1px solid ' + (s.borderColor || '#e5e7eb') : 'none'};
+      aspect-ratio: ${s.cardAspect && s.cardAspect !== 'auto' ? s.cardAspect : 'auto'};
+      background: #f3f4f6;
+      flex-shrink: 0;
+    }
+    .ws-search-results.layout-grid .ws-search-img {
+      width: 100%;
+      height: ${s.imageHeight || '100px'};
+    }
+
+    /* Image Overlay & Text Overlay */
+    .ws-search-img-wrap {
+      position: relative;
+      overflow: hidden;
+      border-radius: ${c.resultLayout === 'grid' ? '0' : (s.imageRadius || '8px')};
+      flex-shrink: 0;
+    }
+    .ws-search-img-overlay {
+      position: absolute;
+      top: 0; left: 0; right: 0; bottom: 0;
+      background: rgba(0,0,0,0.4);
+      pointer-events: none;
+    }
+    .ws-search-text-overlay {
+      position: absolute;
+      left: 0; right: 0;
+      padding: 8px;
+      background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
+      color: #fff;
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-end;
+    }
+    .ws-search-text-overlay.pos-bottom { bottom: 0; height: 50%; }
+    .ws-search-text-overlay.pos-full { top: 0; bottom: 0; justify-content: flex-end; }
+    .ws-search-text-overlay.pos-center { top: 0; bottom: 0; justify-content: center; align-items: center; text-align: center; }
+
+    /* Content */
+    .ws-search-content { flex: 1; min-width: 0; }
+    .ws-search-name {
+      font-weight: ${s.titleWeight || 'medium'};
+      font-size: ${s.titleSize || '14px'};
+      color: ${s.textColor || '#1f2937'};
+      margin: 0 0 4px 0;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+    .ws-search-name mark {
+      background: ${s.highlightBg || '#fef08a'};
+      color: ${s.highlightText || 'inherit'};
+      padding: 0 2px;
+      border-radius: ${s.highlightRadius || '2px'};
+    }
+    .ws-search-desc {
+      font-size: ${s.descSize || '12px'};
+      color: #6b7280;
+      margin: 0;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      display: -webkit-box;
+      -webkit-line-clamp: ${c.resultLayout === 'large' ? 3 : 2};
+      -webkit-box-orient: vertical;
+      font-size: ${s.descSize || '12px'};
+      color: #6b7280;
+    }
+    .ws-search-price {
+      font-weight: 600;
+      font-size: ${s.priceSize || '14px'};
+      color: ${s.priceColor || s.accentColor || '#059669'};
+    }
+    .ws-search-old-price {
+      font-size: 12px;
+      color: ${s.originalPriceColor || '#9ca3af'};
+      text-decoration: line-through;
+      margin-left: 6px;
+    }
+    .ws-search-discount {
+      display: inline-block;
+      background: ${s.discountBadgeBg || '#dc2626'};
+      color: ${s.discountBadgeText || '#fff'};
+      font-size: 11px;
+      font-weight: 600;
+      padding: 2px 6px;
+      border-radius: ${s.badgeRadius || '4px'};
+      margin-left: 6px;
+    }
+    .ws-search-category {
+      font-size: 11px;
+      color: #9ca3af;
+      margin-top: 4px;
+    }
+    .ws-search-stock {
+      font-size: 11px;
+      padding: 2px 6px;
+      border-radius: 4px;
+      margin-top: 4px;
+      display: inline-block;
+    }
+    .ws-search-stock.in-stock { background: #dcfce7; color: #166534; }
+    .ws-search-stock.out-of-stock { background: #fee2e2; color: #991b1b; }
+
+    /* Loading & Empty */
+    .ws-search-loading, .ws-search-empty {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      padding: 32px 24px;
+      color: #6b7280;
+      text-align: center;
+    }
+    .ws-search-spinner {
+      width: 24px;
+      height: 24px;
+      border: 2px solid #e5e7eb;
+      border-top-color: ${s.accentColor || '#6366f1'};
+      border-radius: 50%;
+      animation: wsSearchSpin 0.8s linear infinite;
+      margin-bottom: 12px;
+    }
+    @keyframes wsSearchSpin { to { transform: rotate(360deg); } }
+
+    /* Footer */
+    .ws-search-footer {
+      padding: 10px 16px;
+      background: #f9fafb;
+      border-top: 1px solid #f3f4f6;
+      font-size: 11px;
+      color: #9ca3af;
+      text-align: center;
+    }
+
+    /* Category Chips */
+    .ws-search-categories {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 8px;
+      padding: 12px 16px;
+      border-bottom: 1px solid #f3f4f6;
+    }
+    .ws-search-cat-chip {
+      padding: 6px 12px;
+      border-radius: 9999px;
+      font-size: 12px;
+      font-weight: 500;
+      background: #f3f4f6;
+      color: #4b5563;
+      border: none;
+      cursor: pointer;
+      transition: all 0.15s;
+    }
+    .ws-search-cat-chip:hover { background: #e5e7eb; }
+    .ws-search-cat-chip.active {
+      background: ${s.categoryActiveBg || s.accentColor || '#6366f1'};
+      color: ${s.categoryActiveText || '#fff'};
+    }
+    .ws-search-cat-chip {
+       padding: ${s.categoryPadding || '6px 12px'};
+       border-radius: ${s.categoryRadius || '9999px'};
+       font-size: 12px;
+       font-weight: 500;
+       background: ${s.inputBg || '#f3f4f6'};
+       color: ${s.textColor || '#4b5563'};
+       border: none;
+       cursor: pointer;
+       transition: all 0.15s;
+    }
+
+    /* Overlay (Modal/Fullscreen/Sidebar) */
+    .ws-search-overlay {
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background: rgba(0,0,0,${(s.overlayOpacity || 50) / 100});
+      display: none;
+      align-items: flex-start;
+      justify-content: center;
+      padding-top: 100px;
+      z-index: 9999999;
+    }
+    .ws-search-overlay.open { display: flex; }
+    .ws-search-overlay.position-fullscreen {
+      padding: 0;
+      align-items: stretch;
+      z-index: 99999999; /* Higher for fullscreen */
+    }
+    .ws-search-overlay.position-sidebar {
+      justify-content: flex-end;
+      padding: 0;
+    }
+
+    /* Modal */
+    .ws-search-modal {
+      width: 90%;
+      max-width: ${s.modalWidth || '600px'};
+      max-height: ${s.modalMaxHeight || '80vh'};
+      background: ${s.backgroundColor || '#fff'};
+      border-radius: ${s.modalRadius || s.containerRadius || '12px'};
+      box-shadow: ${s.modalShadow || '0 25px 50px -12px rgba(0,0,0,0.25)'};
+      animation: wsSearchScaleIn ${c.animationDuration}ms ease;
+      overflow: hidden;
+      display: flex;
+      flex-direction: column;
+      position: relative; /* Context context */
+    }
+    .ws-search-modal .ws-search-results {
+      position: static;
+      margin: 0;
+      box-shadow: none;
+      border-top: 1px solid ${s.borderColor || '#e5e7eb'};
+      border-radius: 0;
+      flex: 1;
+    }
+
+    /* Inline Container for Inline Mode */
+    ${c.position === 'inline' ? `
+      ${c.selector || ''} .ws-search-container {
+         box-shadow: none;
+         max-width: 100%;
+         border-radius: ${s.inputRadius || '8px'};
+         padding: ${s.inputPaddingTop || 0} ${s.inputPaddingRight || 0} ${s.inputPaddingBottom || 0} ${s.inputPaddingLeft || 0};
+         margin: ${s.inputMarginTop || 0} ${s.inputMarginRight || 0} ${s.inputMarginBottom || 0} ${s.inputMarginLeft || 0};
+         border-width: ${s.inputBorderWidth || '1px'};
+         border-style: ${s.inputBorderStyle || 'solid'};
+         border-color: ${s.inputBorderColor || 'transparent'};
+         background: transparent;
+         position: relative;
+      }
+      ${c.selector || ''} .ws-search-results {
+         width: ${s.resultsWidth || '100%'};
+         ${s.resultsWidth ? 'right: auto;' : ''}
+      }
+    ` : ''}
+
+    /* Fullscreen */
+    .ws-search-fullscreen {
+      width: 100%;
+      height: 100%;
+      background: ${s.backgroundColor || '#fff'};
+      display: flex;
+      flex-direction: column;
+      animation: wsSearchFadeIn ${c.animationDuration}ms ease;
+    }
+    .ws-search-fullscreen .ws-search-input-wrap { padding: 24px; }
+    .ws-search-fullscreen .ws-search-results {
+      position: static;
+      margin: 0;
+      box-shadow: none;
+      flex: 1;
+      max-height: none;
+      border-radius: 0;
+    }
+
+    /* Sidebar Panel */
+    .ws-search-sidebar-panel {
+      width: ${s.sidebarWidth || s.panelWidth || '480px'};
+      max-width: 100%;
+      height: 100%;
+      background: ${s.backgroundColor || '#fff'};
+      box-shadow: ${s.sidebarShadow || '-10px 0 40px rgba(0,0,0,0.15)'};
+      animation: wsSearchSlideIn ${c.animationDuration}ms ease;
+      display: flex;
+      flex-direction: column;
+    }
+    .ws-search-sidebar-panel .ws-search-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 16px 20px;
+      border-bottom: 1px solid ${s.borderColor || '#e5e7eb'};
+    }
+    .ws-search-sidebar-panel .ws-search-input-wrap { padding: 16px 20px; }
+    .ws-search-sidebar-panel .ws-search-results {
+      position: static;
+      margin: 0;
+      box-shadow: none;
+      flex: 1;
+      max-height: none;
+      border-radius: 0;
+    }
+
+    /* Floating Button */
+    .ws-search-floating-btn {
+      position: fixed;
+      width: ${s.floatingButtonSize || '56px'};
+      height: ${s.floatingButtonSize || '56px'};
+      background: ${s.floatingButtonBg || s.accentColor || '#6366f1'};
+      border: ${s.floatingButtonBorder || 'none'};
+      border-radius: ${s.floatingButtonRadius || '50%'};
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      box-shadow: ${getShadow(s.floatingButtonShadow || 'lg', s.floatingButtonShadowColor)};
+      padding: ${s.floatingButtonPaddingTop || 0} ${s.floatingButtonPaddingRight || 0} ${s.floatingButtonPaddingBottom || 0} ${s.floatingButtonPaddingLeft || 0};
+      margin: ${s.floatingButtonMarginTop || 0} ${s.floatingButtonMarginRight || 0} ${s.floatingButtonMarginBottom || 0} ${s.floatingButtonMarginLeft || 0};
+      transition: all 0.2s ease;
+      z-index: 999998;
+    }
+    .ws-search-floating-btn.ws-embedded {
+       position: static;
+       transform: none !important;
+       z-index: auto;
+       /* Respect configured margin even if embedded, unless user explicitly sets it to 0 */
+       /* But wait, embedded might need resetting. Let's just inherit the margin defined above if it's not 0 */
+    }
+    .ws-search-floating-btn:hover {
+      transform: scale(1.05);
+      box-shadow: ${getShadow(s.floatingButtonHoverShadow || 'xl', s.floatingButtonShadowColor)};
+    }
+    .ws-search-floating-btn.ws-embedded:hover {
+       transform: scale(1.05);
+    }
+    .ws-search-floating-btn svg { width: 24px; height: 24px; color: ${s.floatingButtonIconColor || '#fff'}; }
+    .ws-search-floating-btn.bottom-right { bottom: ${s.floatingButtonOffset || '24px'}; right: ${s.floatingButtonOffset || '24px'}; }
+    .ws-search-floating-btn.bottom-left { bottom: ${s.floatingButtonOffset || '24px'}; left: ${s.floatingButtonOffset || '24px'}; }
+    .ws-search-floating-btn.top-right { top: ${s.floatingButtonOffset || '24px'}; right: ${s.floatingButtonOffset || '24px'}; }
+    .ws-search-floating-btn.top-left { top: ${s.floatingButtonOffset || '24px'}; left: ${s.floatingButtonOffset || '24px'}; }
+
+    /* Close Button */
+    .ws-search-close {
+      width: 32px;
+      height: 32px;
+      background: transparent;
+      border: none;
+      border-radius: 8px;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: #6b7280;
+      transition: all 0.15s;
+    }
+    .ws-search-close:hover { background: #f3f4f6; color: #1f2937; }
+
+    /* Mobile Responsive */
+    @media (max-width: 640px) {
+      .ws-search-modal { max-width: 100%; width: 100%; margin: 0; border-radius: 0; }
+      .ws-search-sidebar-panel { width: 100%; }
+    }
+    
+    /* Animations */
+    @keyframes ws-fade-in { from { opacity: 0; } to { opacity: 1; } }
+    @keyframes ws-slide-up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
+    @keyframes ws-scale-up { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }
+
+    .ws-search-overlay.anim-fade { animation: ws-fade-in ${c.animationDuration || 200}ms ease-out forwards; }
+    .ws-search-overlay.anim-slide { animation: ws-slide-up ${c.animationDuration || 200}ms ease-out forwards; }
+    .ws-search-overlay.anim-scale { animation: ws-scale-up ${c.animationDuration || 200}ms ease-out forwards; }
+    
+    /* Container specific animations for inline/dropdown */
+    .ws-search-results.anim-fade { animation: ws-fade-in ${c.animationDuration || 200}ms ease-out forwards; }
+    .ws-search-results.anim-slide { animation: ws-slide-up ${c.animationDuration || 200}ms ease-out forwards; }
+    .ws-search-results.anim-scale { animation: ws-scale-up ${c.animationDuration || 200}ms ease-out forwards; }
+
+    /* ========== Suggestions Styles (Modern & Beautiful) ========== */
+    .ws-suggestions {
+      padding: 0 !important;
+      margin: 0 !important;
+      box-sizing: border-box !important;
+      list-style: none !important;
+      background: transparent !important;
+    }
+    .ws-suggestions * {
+      box-sizing: border-box !important;
+      list-style: none !important;
+    }
+    
+    .ws-suggestions-section {
+      padding: ${ss.sectionSpacing || '16px'} 0 !important;
+      border-bottom: ${ss.sectionDivider !== false ? '1px solid ' + (ss.sectionDividerColor || s.borderColor || '#f3f4f6') : 'none'} !important;
+      margin: 0 !important;
+      background: transparent !important;
+    }
+    .ws-suggestions-section:last-child { 
+      border-bottom: none !important;
+      padding-bottom: 8px !important;
+    }
+    .ws-suggestions-section:first-child {
+      padding-top: 8px !important;
+    }
+    
+    .ws-suggestions-header {
+      display: flex !important;
+      align-items: center !important;
+      justify-content: space-between !important;
+      padding: 0 ${ss.sectionHeaderPadding || '20px'} 12px !important;
+      margin: 0 0 4px 0 !important;
+      background: transparent !important;
+      border: none !important;
+    }
+    .ws-suggestions-header span {
+      font-size: ${ss.sectionHeaderSize || '11px'} !important;
+      font-weight: ${ss.sectionHeaderWeight || '600'} !important;
+      color: ${ss.sectionHeaderColor || '#9ca3af'} !important;
+      text-transform: uppercase !important;
+      letter-spacing: 0.08em !important;
+      margin: 0 !important;
+      padding: 0 !important;
+      line-height: 1.4 !important;
+    }
+    
+    .ws-suggestions-clear {
+      font-size: 12px !important;
+      font-weight: 500 !important;
+      color: ${ss.recentClearColor || s.accentColor || '#6366f1'} !important;
+      background: transparent !important;
+      border: none !important;
+      cursor: pointer !important;
+      padding: 4px 10px !important;
+      border-radius: 6px !important;
+      text-transform: none !important;
+      letter-spacing: normal !important;
+      transition: all 0.15s ease !important;
+      margin: 0 !important;
+      line-height: 1.4 !important;
+    }
+    .ws-suggestions-clear:hover { 
+      background: ${ss.recentClearColor || s.accentColor || '#6366f1'}15 !important;
+    }
+    
+    /* Recent & Popular Search Items */
+    .ws-suggestion-item {
+      display: flex !important;
+      align-items: center !important;
+      gap: 14px !important;
+      padding: 12px 20px !important;
+      cursor: pointer !important;
+      transition: all 0.15s ease;
+      color: ${ss.recentTextColor || s.textColor || '#374151'};
+      text-decoration: none;
+      border-radius: 0;
+      margin: 0;
+      box-sizing: border-box;
+    }
+    .ws-suggestion-item:hover { 
+      background: ${ss.recentHoverBg || s.itemHoverBg || '#f8fafc'};
+    }
+    .ws-suggestion-item svg { 
+      width: 18px !important; 
+      height: 18px !important; 
+      min-width: 18px;
+      min-height: 18px;
+      max-width: 18px;
+      max-height: 18px;
+      color: ${ss.recentIconColor || '#d1d5db'}; 
+      flex-shrink: 0;
+      transition: color 0.15s ease;
+    }
+    .ws-suggestion-item:hover svg {
+      color: ${ss.recentIconColor || s.accentColor || '#6366f1'};
+    }
+    .ws-suggestion-text { 
+      flex: 1; 
+      font-size: 14px;
+      font-weight: 400;
+      color: ${ss.recentTextColor || s.textColor || '#374151'};
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    .ws-suggestion-remove {
+      opacity: 0;
+      padding: 6px;
+      border: none;
+      background: transparent;
+      cursor: pointer;
+      color: #9ca3af;
+      border-radius: 6px;
+      transition: all 0.15s ease;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    .ws-suggestion-item:hover .ws-suggestion-remove { opacity: 1; }
+    .ws-suggestion-remove:hover { 
+      background: #fef2f2; 
+      color: #ef4444;
+    }
+    .ws-suggestion-remove svg {
+      width: 14px !important;
+      height: 14px !important;
+      min-width: 14px;
+      min-height: 14px;
+      color: inherit !important;
+    }
+    
+    /* Popular Search specific */
+    .ws-popular-search-item svg {
+      color: ${ss.popularSearchIconColor || '#fbbf24'} !important;
+    }
+    .ws-popular-search-item:hover svg {
+      color: ${ss.popularSearchIconColor || '#f59e0b'} !important;
+    }
+    .ws-popular-search-item .ws-suggestion-text {
+      color: ${ss.popularSearchTextColor || s.textColor || '#374151'};
+    }
+
+    /* Popular Categories Grid - Modern Card Style */
+    .ws-popular-categories {
+      display: grid;
+      grid-template-columns: repeat(${ss.categoryColumns || 'auto-fill'}, minmax(${ss.categoryColumns ? '1fr' : '90px'}, 1fr));
+      gap: ${ss.categoryGap || '10px'};
+      padding: 0 20px;
+    }
+    .ws-category-card {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 10px;
+      padding: 16px 12px;
+      border-radius: ${ss.categoryCardRadius || '12px'};
+      background: ${ss.categoryCardBg || '#f8fafc'};
+      border: 1px solid ${ss.categoryCardBorder || 'transparent'};
+      cursor: pointer;
+      transition: all 0.2s ease;
+      text-decoration: none;
+      color: inherit;
+      box-shadow: ${ss.categoryCardShadow || 'none'};
+    }
+    .ws-category-card:hover {
+      background: ${ss.categoryCardHoverBg || '#f1f5f9'};
+      border-color: ${ss.categoryCardHoverBorder || s.accentColor || '#6366f1'};
+      transform: translateY(-2px);
+      box-shadow: 0 4px 12px rgba(0,0,0,0.08);
+    }
+    .ws-category-img {
+      width: ${ss.categoryImageSize || '48px'};
+      height: ${ss.categoryImageSize || '48px'};
+      border-radius: ${ss.categoryImageRadius || '10px'};
+      object-fit: cover;
+      background: ${ss.categoryImageBg || '#e2e8f0'};
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    .ws-category-img svg {
+      width: 22px !important;
+      height: 22px !important;
+      color: #94a3b8;
+    }
+    .ws-category-name {
+      font-size: ${ss.categoryNameSize || '12px'};
+      font-weight: 500;
+      text-align: center;
+      color: ${ss.categoryNameColor || s.textColor || '#475569'};
+      line-height: 1.3;
+      max-width: 100%;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+    }
+
+    /* Popular Products - Premium Card Style */
+    .ws-popular-products {
+      display: grid;
+      grid-template-columns: repeat(${ss.productColumns || 'auto-fill'}, minmax(${ss.productColumns ? '1fr' : '140px'}, 1fr));
+      gap: ${ss.productGap || '12px'};
+      padding: 0 20px;
+    }
+    .ws-product-card {
+      display: flex;
+      flex-direction: column;
+      border-radius: ${ss.productCardRadius || '12px'};
+      background: ${ss.productCardBg || '#ffffff'};
+      border: 1px solid ${ss.productCardBorder || '#e2e8f0'};
+      overflow: hidden;
+      cursor: pointer;
+      transition: all 0.2s ease;
+      text-decoration: none;
+      color: inherit;
+      box-shadow: ${ss.productCardShadow || '0 1px 3px rgba(0,0,0,0.04)'};
+    }
+    .ws-product-card:hover {
+      border-color: ${ss.productCardHoverBorder || s.accentColor || '#6366f1'};
+      box-shadow: ${ss.productCardHoverShadow || '0 8px 24px rgba(0,0,0,0.12)'};
+      transform: translateY(-3px);
+    }
+    .ws-product-card-img {
+      width: 100%;
+      height: ${ss.productImageHeight || '100px'};
+      object-fit: cover;
+      background: ${ss.productImageBg || '#f8fafc'};
+    }
+    .ws-product-card-img svg {
+      width: 28px !important;
+      height: 28px !important;
+    }
+    .ws-product-card-info {
+      padding: 12px;
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+    }
+    .ws-product-card-name {
+      font-size: ${ss.productNameSize || '13px'};
+      font-weight: 500;
+      color: ${ss.productNameColor || s.textColor || '#1e293b'};
+      margin: 0;
+      line-height: 1.4;
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+    }
+    .ws-product-card-prices {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      flex-wrap: wrap;
+    }
+    .ws-product-card-price {
+      font-size: ${ss.productPriceSize || '15px'};
+      font-weight: 700;
+      color: ${ss.productPriceColor || s.priceColor || '#059669'};
+    }
+    .ws-product-card-old-price {
+      font-size: 12px;
+      font-weight: 400;
+      color: ${ss.productOldPriceColor || '#9ca3af'};
+      text-decoration: line-through;
+    }
+    .ws-product-card-discount {
+      position: absolute;
+      top: 8px;
+      left: 8px;
+      font-size: 11px;
+      font-weight: 600;
+      color: #ffffff;
+      background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
+      padding: 3px 8px;
+      border-radius: 6px;
+      box-shadow: 0 2px 4px rgba(239, 68, 68, 0.3);
+    }
+    .ws-product-card-img-wrap {
+      position: relative;
+      overflow: hidden;
+    }
+
+    /* Custom CSS */
+    ${s.customCss || ''}
+  `;
+}
+/**
+ * Inject search styles into the document
+ */
+export function injectSearchStyles(config, suggestionStyles) {
+    if (document.getElementById('ws-search-styles'))
+        return;
+    const styles = document.createElement('style');
+    styles.id = 'ws-search-styles';
+    styles.textContent = generateSearchStyles(config, suggestionStyles);
+    document.head.appendChild(styles);
+}
+//# sourceMappingURL=styles.js.map