@selwise/widget 0.0.3 → 1.0.1

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

@@ -1,860 +0,0 @@
-/**
- * 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