/**
* AutoFit AI Search - Shortcode Stylesheet
*
* v3.11.2 - LIGHT RESULTS PANEL IN DARK MODE (CSS-ONLY FIX):
*
* PROBLEM (introduced in v3.11.1):
* In v3.11.1, the CSS rules that applied the dark
* theme to individual result elements (product
* cards, section titles, pagination, sort control,
* empty-state) were removed. However, the
* .autofit-sc-results-container itself has no
* background of its own -- it inherited the dark
* background from the parent .autofit-search-card.
*
* As a result, in dark mode, the space behind the
* section titles and between product cards still
* appeared dark, even though the cards themselves
* were white.
*
* THE FIX:
* A single CSS rule now gives the results container
* its own white "panel" background whenever the
* card is in dark mode. This creates a clean visual
* separation:
* * Top portion (badge, title, input, send) = dark
* * Bottom portion (results) = white
*
* The rule is scoped to
* .autofit-search-card[data-autofit-theme="dark"]
* > .autofit-sc-results-container
* so it only applies in dark mode.
*
* A mobile override (max-width: 600px) reduces the
* panel padding from 20px to 16px to match the
* card's mobile padding.
*
* FILES CHANGED IN v3.11.2 (2 total):
* * autofit-ai-search.php
* * assets/css/autofit-shortcode.css (this file)
*
* NOTHING ELSE CHANGED -- every other rule is
* byte-for-byte identical to v3.11.1.
*
* v3.11.1 - SEARCH-SECTION-ONLY THEME + EDITABLE BADGE:
*
* Two coordinated display-only changes:
*
* 1. THEME SCOPE (Shortcode only):
* Previously, clicking the dark/light toggle applied
* the dark theme to the ENTIRE search card, including
* the results area (product cards, section titles,
* pagination buttons). Now the dark theme applies
* ONLY to the search-input portion:
* * the base card background
* * the title (h3)
* * the badge
* * the recent-search chips
* * the search input group (input + clear)
* * the send button
* The following remain permanently in light mode:
* * product cards
* * section wrappers and section titles
* * pagination buttons and ellipsis
* * sort control
* * empty-state messages
* * typo-correction banner
* * year-hint banner
* * suggestions wrapper
* * product badges
* The chat widget (autofit-assistant.css) is NOT
* affected by this change.
*
* 2. EDITABLE BADGE (icon + text):
* The badge now supports an image URL (rendered via
* AutoFit_Helper::render_icon_output() as an ![]()
* with class .autofit-badge-icon-img) OR an emoji
* string (rendered as with class
* .autofit-badge-icon-text).
*
* New CSS rules:
* .autofit-badge-icon-img -> 20x20 inline image
* .autofit-badge-icon-text -> inline emoji
* .autofit-badge-text -> the label
*
* In dark mode, the badge itself keeps its dark
* background (#1e40af) and the icon/text remain
* legible because they inherit the badge's color.
*
* FILES CHANGED IN v3.11.1 (6 total):
* * autofit-ai-search.php
* * includes/core/class-autofit-core.php
* * uninstall.php
* * includes/admin/class-autofit-admin.php
* * includes/frontend/class-autofit-shortcode.php
* * assets/css/autofit-shortcode.css (this file)
*
* NOTHING ELSE CHANGED -- every other rule is
* byte-for-byte identical to v3.7.7.
*
* v3.7.7 - COMPACT EMPTY-STATE (UI POLISH):
*
* The "محصولی با این مشخصات یافت نشد." empty-state
* box was too large on wide screens and had excessive
* vertical padding, making it stand out awkwardly
* against the rest of the search card.
*
* Changed in .autofit-section-empty:
* * padding: 40px 24px -> 16px 20px
* * font-size: 18px -> 14px
* * icon size: 48px -> 26px
* * icon margin: 18px -> 6px
* * max-width: none -> 340px (centered)
* * border-radius: 14px -> 10px
* * line-height: 1.8 -> 1.6
*
* Mobile breakpoints adjusted proportionally.
*
* v2.15.2 - THEME RING AROUND TOGGLE (VISUAL POLISH).
* v2.15.1 - NEUMORPHIC THEME TOGGLE (REDESIGN).
* v2.15.0 - DARK/LIGHT MODE + THEME TOGGLE.
* v2.14.4 - BOLDER / LARGER EMPTY-STATE MESSAGES.
* v2.14.3 - FIX: TOGGLE SPACING (host selector).
* v2.14.1 - TOGGLE POLISH (centered text + more spacing).
* v2.14.0 - COLLAPSIBLE SECTIONS + BOLDER TITLES (Phase 8).
* v2.13.3 - THREE-SECTION STYLES (Phase 7).
* v2.13.0 - TYPO CORRECTION BANNER (Phase 4).
* v2.12.0 - SORT CONTROL STYLES.
* v2.11.2 - PAGINATION POSITION.
* v2.11.0 - RESULTS PAGINATION STYLES.
* v2.8.46 - HYBRID PRODUCT BADGES.
* v2.8.25 - Mobile UX FIX.
* v2.8.20 - Price layout.
* v2.8.18 - Shortcode UX Polish.
* v2.8.17 - Mobile UX.
* v2.8.12 - FIX: Mobile grid overflow.
* v2.8.5 - Added: Suggested Products styles.
* v2.8.2 - All #id selectors migrated.
* v2.6.4 - Defensive CSS.
*/
/* =========================================================
Base wrapper
========================================================= */
.autofit-shortcode-wrapper {
width: 100%;
max-width: 100%;
margin: 20px auto;
font-family: Tahoma, Arial, sans-serif;
box-sizing: border-box;
padding: 0 10px;
touch-action: manipulation;
}
.autofit-shortcode-wrapper *,
.autofit-shortcode-wrapper *::before,
.autofit-shortcode-wrapper *::after {
box-sizing: border-box;
}
.autofit-shortcode-wrapper button,
.autofit-shortcode-wrapper .autofit-product-card,
.autofit-shortcode-wrapper .autofit-recent-item,
.autofit-shortcode-wrapper .autofit-suggestions-btn,
.autofit-shortcode-wrapper .autofit-sort-select,
.autofit-shortcode-wrapper .autofit-section-toggle,
.autofit-shortcode-wrapper .autofit-theme-toggle {
touch-action: manipulation;
}
.autofit-search-card {
background: #ffffff;
padding: 20px;
border-radius: 16px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
border: 1px solid #e2e8f0;
max-width: 100%;
overflow: hidden;
touch-action: manipulation;
transition: background-color 0.4s ease, border-color 0.4s ease, color 0.4s ease;
}
/* =========================================================
Header (2-column layout)
========================================================= */
.autofit-search-header-box {
margin-bottom: 15px;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px;
}
.autofit-header-info {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
flex: 1 1 auto;
min-width: 0;
}
.autofit-header-info h3 {
margin: 0;
font-size: 18px;
color: #1e293b;
font-weight: 700;
line-height: 1.3;
}
.autofit-badge {
background: #eff6ff;
color: #2563eb;
padding: 4px 12px;
border-radius: 20px;
font-size: 12px;
font-weight: 600;
white-space: nowrap;
display: inline-flex;
align-items: center;
gap: 6px;
transition: background-color 0.4s ease, color 0.4s ease;
}
/* =========================================================
v3.11.1: Editable badge (icon + text)
=========================================================
The badge now contains two children:
* .autofit-badge-icon-img (if a JPG/PNG/SVG URL is set)
OR
.autofit-badge-icon-text (if an emoji/text is set)
* .autofit-badge-text (the label)
The icon is rendered by AutoFit_Helper::render_icon_output(),
which appends "-img" or "-text" to the base class passed as
the third argument. In class-autofit-shortcode.php the base
class passed is "autofit-badge-icon", so the resulting class
is either "autofit-badge-icon-img" or "autofit-badge-icon-text".
========================================================= */
.autofit-badge .autofit-badge-icon-img {
display: inline-block;
width: 18px;
height: 18px;
object-fit: contain;
vertical-align: middle;
flex-shrink: 0;
border-radius: 4px;
}
.autofit-badge .autofit-badge-icon-text {
display: inline-block;
font-size: 14px;
line-height: 1;
vertical-align: middle;
flex-shrink: 0;
}
.autofit-badge .autofit-badge-text {
display: inline-block;
vertical-align: middle;
line-height: 1.2;
}
/* =========================================================
✅ v2.15.1 / v2.15.2: NEUMORPHIC THEME TOGGLE (108×59)
=========================================================
A soft 3D pill switch with:
* Radial highlight at top-left
* Linear gradient body
* Inset + outer shadows for depth
* ✅ v2.15.2: A 2px ring around the pill that adapts to theme
* Two SVG icons (moon + sun) that rotate smoothly
Sized 55% of the reference design (196×108 -> 108×59).
Uses CSS custom properties so the SAME button looks
correct on any background.
========================================================= */
/* ---------- LIGHT MODE (default) ---------- */
.autofit-theme-toggle {
/* Custom properties -- light mode values */
--autofit-toggle-pill-a: #f6f6f5;
--autofit-toggle-pill-b: #c9cbce;
--autofit-toggle-rim-hi: rgba(255, 255, 255, 0.95);
--autofit-toggle-rim-lo: rgba(0, 0, 0, 0.18);
--autofit-toggle-icon: #3a3d42;
--autofit-toggle-icon-glow: transparent;
--autofit-toggle-shadow: rgba(0, 0, 0, 0.15);
--autofit-toggle-focus: #6fa8ff;
/* ✅ v2.15.2: ring around the pill (adapts to theme) */
--autofit-toggle-ring: rgba(0, 0, 0, 0.85);
flex: 0 0 auto;
position: relative;
width: 108px;
height: 59px;
min-width: 108px;
min-height: 59px;
padding: 0;
margin: 0;
display: inline-flex;
align-items: center;
justify-content: center;
background:
radial-gradient(90px 70px at 30% 30%,
var(--autofit-toggle-rim-hi), transparent 60%),
linear-gradient(155deg,
var(--autofit-toggle-pill-a),
var(--autofit-toggle-pill-b));
border: none;
border-radius: 999px;
/* ✅ v2.15.2: added 0 0 0 2px ring layer */
box-shadow:
inset 0 2px 3px var(--autofit-toggle-rim-hi),
inset 0 -6px 10px var(--autofit-toggle-rim-lo),
0 0 0 2px var(--autofit-toggle-ring),
0 18px 30px -12px var(--autofit-toggle-shadow);
cursor: pointer;
-webkit-appearance: none;
appearance: none;
transition: box-shadow 0.4s ease, background 0.4s ease;
overflow: hidden;
touch-action: manipulation;
}
/* Outer rim highlight (subtle 3D edge) */
.autofit-theme-toggle::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
box-shadow: 0 1px 1px var(--autofit-toggle-rim-hi);
pointer-events: none;
}
.autofit-theme-toggle:hover {
box-shadow:
inset 0 2px 3px var(--autofit-toggle-rim-hi),
inset 0 -8px 12px var(--autofit-toggle-rim-lo),
0 0 0 2px var(--autofit-toggle-ring),
0 22px 36px -12px var(--autofit-toggle-shadow);
}
.autofit-theme-toggle:active {
transform: translateY(1px);
}
.autofit-theme-toggle:focus-visible {
outline: 2px solid var(--autofit-toggle-focus);
outline-offset: 4px;
}
/* ---------- ICONS (moon + sun) ---------- */
.autofit-theme-toggle .autofit-toggle-icon {
position: absolute;
top: 50%;
left: 50%;
width: 26px;
height: 26px;
display: block;
pointer-events: none;
transition:
opacity 0.45s ease,
transform 0.5s cubic-bezier(0.6, -0.2, 0.3, 1.3),
filter 0.5s ease;
}
/* Light mode: moon visible */
.autofit-theme-toggle .autofit-toggle-moon {
color: var(--autofit-toggle-icon);
opacity: 1;
transform: translate(-50%, -50%) scale(1) rotate(0deg);
filter: drop-shadow(0 1px 1px rgba(255, 255, 255, 0.5));
}
/* Light mode: sun hidden */
.autofit-theme-toggle .autofit-toggle-sun {
color: var(--autofit-toggle-icon);
opacity: 0;
transform: translate(-50%, -50%) scale(0.5) rotate(-90deg);
}
/* ---------- DARK MODE OVERRIDES (scoped) ---------- */
.autofit-search-card[data-autofit-theme="dark"] .autofit-theme-toggle {
--autofit-toggle-pill-a: #1c1f24;
--autofit-toggle-pill-b: #08090b;
--autofit-toggle-rim-hi: rgba(255, 255, 255, 0.08);
--autofit-toggle-rim-lo: rgba(0, 0, 0, 0.6);
--autofit-toggle-icon: #dfe6f5;
--autofit-toggle-icon-glow: #6fa8ff;
--autofit-toggle-shadow: rgba(0, 0, 0, 0.6);
--autofit-toggle-focus: #6fa8ff;
/* ✅ v2.15.2: WHITE ring in dark mode */
--autofit-toggle-ring: rgba(255, 255, 255, 0.9);
}
/* Dark mode: moon hidden */
.autofit-search-card[data-autofit-theme="dark"] .autofit-theme-toggle .autofit-toggle-moon {
opacity: 0;
transform: translate(-50%, -50%) scale(0.5) rotate(90deg);
filter: drop-shadow(0 0 8px var(--autofit-toggle-icon-glow));
}
/* Dark mode: sun visible with glow */
.autofit-search-card[data-autofit-theme="dark"] .autofit-theme-toggle .autofit-toggle-sun {
opacity: 1;
transform: translate(-50%, -50%) scale(1) rotate(0deg);
filter:
drop-shadow(0 0 10px var(--autofit-toggle-icon-glow))
drop-shadow(0 0 22px var(--autofit-toggle-icon-glow));
}
/* ---------- INACTIVE STATE (before JS loads) ---------- */
.autofit-theme-toggle.autofit-theme-toggle-inactive {
opacity: 0;
visibility: hidden;
}
.autofit-theme-toggle:not(.autofit-theme-toggle-inactive) {
opacity: 1;
visibility: visible;
transition:
opacity 0.2s ease,
visibility 0.2s ease,
box-shadow 0.4s ease,
background 0.4s ease;
}
/* =========================================================
Input group
========================================================= */
.autofit-search-card[data-autofit-instance] .autofit-search-input-group {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 8px !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
padding: 8px !important;
margin: 0 0 12px 0 !important;
background: #f8fafc !important;
border: 2px solid #cbd5e1 !important;
border-radius: 12px !important;
transition: border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease !important;
}
.autofit-search-card[data-autofit-instance] .autofit-search-input-group:focus-within {
border-color: #2563eb !important;
box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1) !important;
background: #fff !important;
}
.autofit-search-card[data-autofit-instance] .autofit-search-input-group.autofit-input-empty-hint {
border-color: #f59e0b !important;
box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.18) !important;
background: #fffbeb !important;
}
/* =========================================================
Input field
========================================================= */
.autofit-search-card[data-autofit-instance] .autofit-search-input-group > .autofit-sc-input {
display: block !important;
flex: 1 1 auto !important;
width: auto !important;
min-width: 0 !important;
max-width: none !important;
box-sizing: border-box !important;
padding: 8px 10px !important;
margin: 0 !important;
border: none !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
outline: none !important;
font-family: Tahoma, Arial, sans-serif !important;
font-size: 15px !important;
color: #1e293b !important;
line-height: 1.4 !important;
height: auto !important;
transform: none !important;
writing-mode: horizontal-tb !important;
float: none !important;
position: static !important;
text-indent: 0 !important;
direction: rtl !important;
text-align: right !important;
-webkit-appearance: none !important;
appearance: none !important;
}
.autofit-search-card[data-autofit-instance] .autofit-search-input-group > .autofit-sc-input::placeholder {
color: #94a3b8 !important;
opacity: 1 !important;
}
/* =========================================================
Clear button
========================================================= */
.autofit-search-card[data-autofit-instance] .autofit-search-input-group > .autofit-sc-clear-btn {
display: flex !important;
flex: 0 0 44px !important;
width: 44px !important;
min-width: 44px !important;
max-width: 44px !important;
height: 44px !important;
min-height: 44px !important;
max-height: 44px !important;
box-sizing: border-box !important;
padding: 0 !important;
margin: 0 !important;
background: #fff !important;
border: 1px solid #cbd5e1 !important;
border-radius: 8px !important;
color: #64748b !important;
align-items: center !important;
justify-content: center !important;
cursor: pointer !important;
box-shadow: none !important;
transform: none !important;
writing-mode: horizontal-tb !important;
float: none !important;
position: static !important;
text-align: center !important;
text-indent: 0 !important;
line-height: 1 !important;
font-size: 16px !important;
overflow: hidden !important;
}
.autofit-search-card[data-autofit-instance] .autofit-search-input-group > .autofit-sc-clear-btn:hover {
background: #f1f5f9 !important;
color: #0f172a !important;
}
.autofit-search-card[data-autofit-instance] .autofit-search-input-group > .autofit-sc-clear-btn:active {
background: #e2e8f0 !important;
color: #0f172a !important;
transform: translateY(1px) !important;
}
.autofit-search-card[data-autofit-instance] .autofit-search-input-group > .autofit-sc-clear-btn.autofit-sc-clear-hidden {
display: none !important;
}
.autofit-custom-icon-img {
width: 24px;
height: 24px;
object-fit: contain;
display: block;
pointer-events: none;
}
.autofit-custom-icon-text {
font-size: 18px;
line-height: 1;
pointer-events: none;
}
/* =========================================================
Send button
========================================================= */
.autofit-search-card[data-autofit-instance] > .autofit-sc-send-btn {
display: block !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
box-sizing: border-box !important;
padding: 12px !important;
margin: 12px 0 0 0 !important;
background: #2563eb !important;
color: #fff !important;
border: none !important;
border-radius: 12px !important;
font-family: Tahoma, Arial, sans-serif !important;
font-size: 15px !important;
font-weight: 600 !important;
line-height: 1.4 !important;
text-align: center !important;
text-transform: none !important;
text-indent: 0 !important;
letter-spacing: normal !important;
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2) !important;
cursor: pointer !important;
transform: none !important;
writing-mode: horizontal-tb !important;
float: none !important;
position: static !important;
white-space: normal !important;
word-break: normal !important;
overflow: visible !important;
vertical-align: middle !important;
direction: rtl !important;
min-height: 48px !important;
height: auto !important;
-webkit-appearance: none !important;
appearance: none !important;
transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease !important;
}
.autofit-search-card[data-autofit-instance] > .autofit-sc-send-btn:hover {
background: #1d4ed8 !important;
}
.autofit-search-card[data-autofit-instance] > .autofit-sc-send-btn:active {
background: #1e40af !important;
box-shadow: 0 2px 6px rgba(37, 99, 235, 0.3) !important;
transform: translateY(1px) !important;
}
.autofit-search-card[data-autofit-instance] > .autofit-sc-send-btn:focus-visible,
.autofit-search-card[data-autofit-instance] .autofit-search-input-group > .autofit-sc-clear-btn:focus-visible {
outline: 2px solid #2563eb !important;
outline-offset: 2px !important;
}
/* =========================================================
Results container
========================================================= */
.autofit-search-card[data-autofit-instance] > .autofit-sc-results-container {
margin-top: 25px;
display: block;
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
.autofit-search-card[data-autofit-instance] > .autofit-sc-results-container.autofit-sc-hidden {
display: none;
}
/* =========================================================
SECTION WRAPPER
========================================================= */
.autofit-section-host {
display: block;
width: 100%;
max-width: 100%;
box-sizing: border-box;
margin: 0 0 32px 0;
padding: 0;
}
.autofit-section-host:last-child {
margin-bottom: 0;
}
.autofit-section-host:empty {
display: none;
margin: 0;
}
.autofit-result-section {
display: block;
width: 100%;
max-width: 100%;
box-sizing: border-box;
margin: 0 0 30px 0;
padding: 0;
}
.autofit-result-section:last-child {
margin-bottom: 0;
}
.autofit-result-section + .autofit-result-section {
margin-top: 30px;
padding-top: 24px;
border-top: 2px dashed #e2e8f0;
}
/* =========================================================
COLLAPSIBLE TOGGLE BUTTON
========================================================= */
.autofit-result-section[data-collapsible="1"] {
margin: 0 !important;
padding: 0 !important;
}
.autofit-section-toggle {
display: block !important;
position: relative !important;
width: 100% !important;
max-width: 100% !important;
min-height: 56px !important;
padding: 15px 60px !important;
margin: 0 !important;
background: #0891b2 !important;
color: #ffffff !important;
border: none !important;
border-radius: 12px !important;
box-shadow: 0 4px 12px rgba(8, 145, 178, 0.22) !important;
font-family: Tahoma, Arial, sans-serif !important;
font-size: 18px !important;
font-weight: 700 !important;
line-height: 1.4 !important;
text-align: center !important;
text-indent: 0 !important;
text-transform: none !important;
letter-spacing: normal !important;
text-decoration: none !important;
direction: rtl !important;
cursor: pointer !important;
box-sizing: border-box !important;
-webkit-appearance: none !important;
appearance: none !important;
transform: none !important;
float: none !important;
white-space: normal !important;
vertical-align: middle !important;
transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease !important;
touch-action: manipulation;
}
.autofit-section-toggle:hover {
background: #0e7490 !important;
box-shadow: 0 6px 16px rgba(8, 145, 178, 0.32) !important;
}
.autofit-section-toggle:active {
transform: translateY(1px) !important;
box-shadow: 0 2px 6px rgba(8, 145, 178, 0.25) !important;
}
.autofit-section-toggle:focus-visible {
outline: 2px solid #0891b2 !important;
outline-offset: 2px !important;
}
.autofit-toggle-label {
display: inline !important;
text-align: center !important;
padding: 0 !important;
margin: 0 !important;
font: inherit !important;
color: inherit !important;
}
.autofit-result-section .autofit-toggle-icon {
position: absolute !important;
left: 14px !important;
top: 50% !important;
transform: translateY(-50%) !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 30px !important;
height: 30px !important;
background: rgba(255, 255, 255, 0.18) !important;
border-radius: 50% !important;
font-size: 13px !important;
line-height: 1 !important;
font-family: Arial, sans-serif !important;
transition: transform 0.25s ease !important;
pointer-events: none !important;
}
.autofit-result-section.autofit-section-open .autofit-toggle-icon {
transform: translateY(-50%) rotate(0deg) !important;
}
.autofit-result-section[data-section="suggestions"] .autofit-section-toggle {
background: #16a34a !important;
box-shadow: 0 4px 12px rgba(22, 163, 74, 0.22) !important;
}
.autofit-result-section[data-section="suggestions"] .autofit-section-toggle:hover {
background: #15803d !important;
box-shadow: 0 6px 16px rgba(22, 163, 74, 0.32) !important;
}
.autofit-result-section[data-section="suggestions"] .autofit-section-toggle:active {
box-shadow: 0 2px 6px rgba(22, 163, 74, 0.25) !important;
}
.autofit-result-section[data-section="suggestions"] .autofit-section-toggle:focus-visible {
outline-color: #16a34a !important;
}
/* Section body (collapsible wrapper) */
.autofit-section-body {
display: block;
width: 100%;
max-width: 100%;
box-sizing: border-box;
padding: 18px 0 0 0;
}
.autofit-section-body:empty {
display: none;
padding: 0;
}
/* =========================================================
SECTION TITLE (bolder, larger)
========================================================= */
.autofit-section-title {
margin: 0 0 18px 0;
padding: 0 0 12px 0;
font-family: Tahoma, Arial, sans-serif;
font-size: 20px;
font-weight: 800;
color: #0f172a;
line-height: 1.35;
letter-spacing: -0.2px;
text-align: right;
direction: rtl;
border-bottom: 3px solid #2563eb;
display: flex;
align-items: center;
gap: 10px;
}
.autofit-section-title::before {
content: "📋";
font-size: 22px;
flex-shrink: 0;
}
.autofit-result-section[data-section="near_matches"] .autofit-section-title {
border-bottom-color: #0891b2;
}
.autofit-result-section[data-section="near_matches"] .autofit-section-title::before {
content: "🔍";
}
.autofit-result-section[data-section="suggestions"] .autofit-section-title {
border-bottom-color: #16a34a;
}
.autofit-result-section[data-section="suggestions"] .autofit-section-title::before {
content: "💡";
}
/* =========================================================
Sort control + grid + pagination inside a section
========================================================= */
.autofit-section-sort {
margin: 0 0 16px 0;
padding: 0;
width: 100%;
display: flex;
align-items: center;
justify-content: flex-start;
direction: rtl;
text-align: right;
}
.autofit-section-sort:empty {
display: none;
margin: 0;
}
.autofit-section-grid {
display: grid;
grid-template-columns: repeat(var(--autofit-columns, 4), minmax(0, 1fr));
gap: 16px;
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
.autofit-section-pagination {
margin: 20px 0 0 0;
padding: 0;
width: 100%;
text-align: center;
direction: rtl;
}
.autofit-section-pagination:empty {
display: none;
margin: 0;
}
/* =========================================================
EMPTY STATE -- COMPACT (v3.7.7)
=========================================================
Reduced from the v2.14.4 "BOLD + LARGE" size, which was
too dominant on wide screens. New size is centered with a
max-width, has tighter padding, a smaller icon, and a
reduced font-size, so it reads as an inline hint rather
than a full-width block.
========================================================= */
.autofit-section-empty {
margin: 0 auto !important;
padding: 16px 20px !important;
max-width: 340px !important;
width: 100% !important;
text-align: center !important;
font-family: Tahoma, Arial, sans-serif !important;
font-size: 14px !important;
font-weight: 700 !important;
color: #334155 !important;
background: #f8fafc !important;
border: 2px dashed #94a3b8 !important;
border-radius: 10px !important;
line-height: 1.6 !important;
letter-spacing: -0.1px !important;
direction: rtl !important;
box-sizing: border-box !important;
}
.autofit-section-empty::before {
content: "🔎" !important;
display: block !important;
font-size: 26px !important;
line-height: 1 !important;
margin-bottom: 6px !important;
opacity: 0.85 !important;
}
/* =========================================================
Products grid (reused by sections)
========================================================= */
.autofit-sc-products-grid {
display: grid;
grid-template-columns: repeat(var(--autofit-columns, 4), minmax(0, 1fr));
gap: 16px;
width: 100%;
max-width: 100%;
}
.autofit-recent-searches {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.autofit-recent-item {
background: #f1f5f9;
border: 1px solid #e2e8f0;
color: #334155;
font-size: 12px;
padding: 5px 12px;
border-radius: 20px;
cursor: pointer;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
transition: background 0.2s;
min-height: 36px;
display: inline-flex;
align-items: center;
}
.autofit-recent-item:hover { background: #e2e8f0; }
/* =========================================================
Product Cards
========================================================= */
.autofit-product-card {
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 12px;
overflow: hidden;
transition: all 0.2s ease;
text-decoration: none;
color: inherit;
display: flex;
flex-direction: column;
min-width: 0;
max-width: 100%;
box-sizing: border-box;
contain: layout;
position: relative;
}
.autofit-product-card:hover {
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
border-color: #2563eb;
}
.autofit-product-card .autofit-product-image {
width: 100%;
aspect-ratio: 1 / 1;
object-fit: cover;
object-position: center;
background: #f8fafc;
display: block;
}
.autofit-product-card .autofit-product-info {
padding: 12px;
flex: 1;
display: flex;
flex-direction: column;
min-width: 0;
}
.autofit-product-card .autofit-product-name {
font-size: 13px;
font-weight: 600;
color: #1e293b;
margin-bottom: 8px;
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
min-height: 36px;
word-break: break-word;
overflow-wrap: anywhere;
min-width: 0;
}
.autofit-product-card .autofit-product-price {
font-size: 14px;
font-weight: 700;
color: #2563eb;
margin-top: auto;
word-break: break-word;
overflow-wrap: anywhere;
text-align: center;
white-space: pre-line;
line-height: 1.5;
}
.autofit-product-card .autofit-product-view {
text-align: center;
background: #2563eb;
color: #fff;
padding: 8px;
font-size: 12px;
font-weight: 600;
margin-top: 10px;
border-radius: 6px;
min-height: 40px;
display: flex;
align-items: center;
justify-content: center;
}
.autofit-product-card .autofit-product-view:hover { background: #1d4ed8; }
/* =========================================================
Skeleton Loading
========================================================= */
@keyframes autofitShortcodeSkeletonShimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
.autofit-skeleton-card {
pointer-events: none;
cursor: default;
}
.autofit-skeleton-card:hover {
transform: none !important;
box-shadow: none !important;
border-color: #e2e8f0 !important;
}
.autofit-skeleton-card .autofit-skeleton-img-full {
width: 100%;
aspect-ratio: 1 / 1;
background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%);
background-size: 200% 100%;
animation: autofitShortcodeSkeletonShimmer 1.5s infinite;
}
.autofit-skeleton-line {
height: 12px;
border-radius: 4px;
background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%);
background-size: 200% 100%;
animation: autofitShortcodeSkeletonShimmer 1.5s infinite;
margin-bottom: 8px;
}
.autofit-skeleton-name { width: 85%; }
.autofit-skeleton-price { width: 50%; height: 14px; }
/* =========================================================
Suggested Products Section (legacy button -- kept for compat)
========================================================= */
.autofit-suggestions-wrapper {
margin-top: 25px;
padding-top: 20px;
border-top: 2px dashed #e2e8f0;
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
.autofit-suggestions-btn {
display: block !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
box-sizing: border-box !important;
padding: 12px !important;
margin: 0 0 12px 0 !important;
background: #16a34a !important;
color: #ffffff !important;
border: none !important;
border-radius: 12px !important;
font-family: Tahoma, Arial, sans-serif !important;
font-size: 15px !important;
font-weight: 600 !important;
line-height: 1.4 !important;
text-align: center !important;
text-indent: 0 !important;
letter-spacing: normal !important;
text-transform: none !important;
box-shadow: 0 4px 12px rgba(22, 163, 74, 0.2) !important;
cursor: pointer !important;
transform: none !important;
writing-mode: horizontal-tb !important;
float: none !important;
position: static !important;
white-space: normal !important;
direction: rtl !important;
min-height: 48px !important;
height: auto !important;
-webkit-appearance: none !important;
appearance: none !important;
transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease !important;
}
.autofit-suggestions-btn:hover {
background: #15803d !important;
box-shadow: 0 6px 16px rgba(22, 163, 74, 0.35) !important;
}
.autofit-suggestions-btn:active {
background: #166534 !important;
box-shadow: 0 2px 6px rgba(22, 163, 74, 0.3) !important;
transform: translateY(1px) !important;
}
.autofit-suggestions-btn:focus-visible {
outline: 2px solid #16a34a !important;
outline-offset: 2px !important;
}
.autofit-suggestions-btn.autofit-suggestions-btn-active {
background: #15803d !important;
}
.autofit-suggestions-container {
display: none;
margin-top: 15px;
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
.autofit-suggestions-container.autofit-suggestions-visible {
display: grid;
grid-template-columns: repeat(var(--autofit-columns, 4), minmax(0, 1fr));
gap: 16px;
}
/* =========================================================
TYPO CORRECTION BANNER
========================================================= */
.autofit-typo-banner {
display: flex;
align-items: center;
gap: 10px;
background: #f0fdf4;
border: 1px solid #bbf7d0;
border-radius: 10px;
padding: 12px 14px;
margin: 0 0 14px 0;
direction: rtl;
text-align: right;
font-family: Tahoma, Arial, sans-serif;
box-sizing: border-box;
width: 100%;
max-width: 100%;
}
.autofit-typo-icon {
font-size: 18px;
line-height: 1;
flex-shrink: 0;
}
.autofit-typo-text {
flex: 1 1 auto;
min-width: 0;
}
.autofit-typo-main {
font-size: 13px;
font-weight: 700;
color: #166534;
line-height: 1.5;
margin-bottom: 3px;
word-break: break-word;
}
.autofit-typo-sub {
font-size: 11px;
color: #166534;
opacity: 0.8;
line-height: 1.4;
word-break: break-word;
}
.autofit-typo-cancel {
flex-shrink: 0;
background: #ffffff;
border: 1px solid #16a34a;
color: #16a34a;
border-radius: 6px;
padding: 6px 12px;
font-size: 11px;
font-weight: 600;
line-height: 1.3;
cursor: pointer;
min-height: 32px;
font-family: Tahoma, Arial, sans-serif;
white-space: nowrap;
transition: background-color 0.15s ease, color 0.15s ease;
-webkit-appearance: none;
appearance: none;
touch-action: manipulation;
}
.autofit-typo-cancel:hover {
background: #16a34a;
color: #ffffff;
}
.autofit-typo-cancel:active {
background: #15803d;
color: #ffffff;
}
.autofit-typo-cancel:focus-visible {
outline: 2px solid #16a34a;
outline-offset: 2px;
}
/* =========================================================
Year Hint Banner
========================================================= */
.autofit-year-hint-banner {
display: flex;
align-items: center;
gap: 6px;
background: #fefce8;
border: 1px solid #fde68a;
border-radius: 10px;
padding: 10px 14px;
margin: 0 0 14px 0;
text-align: right;
direction: rtl;
font-family: Tahoma, Arial, sans-serif;
font-size: 13px;
color: #92400e;
}
/* =========================================================
Top-level banners strip (typo + year hint)
========================================================= */
.autofit-sc-banners {
display: block;
width: 100%;
max-width: 100%;
box-sizing: border-box;
margin: 0 0 20px 0;
}
.autofit-sc-banners:empty {
display: none;
margin: 0;
}
/* =========================================================
Legacy SORT CONTROL (kept for compatibility)
========================================================= */
.autofit-sc-sort {
margin: 20px 0 0 0;
padding: 0;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
direction: rtl;
text-align: center;
}
.autofit-sc-sort:empty {
display: none;
margin: 0;
}
.autofit-sort-label {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: Tahoma, Arial, sans-serif;
font-size: 14px;
font-weight: 600;
color: #334155;
white-space: nowrap;
}
.autofit-sort-select {
display: inline-block;
min-width: 180px;
max-width: 100%;
height: 40px;
padding: 6px 12px;
margin: 0;
background: #ffffff;
color: #1e293b;
border: 1px solid #cbd5e1;
border-radius: 8px;
font-family: Tahoma, Arial, sans-serif;
font-size: 14px;
font-weight: 600;
line-height: 1.4;
text-align: right;
direction: rtl;
cursor: pointer;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2364748b' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: left 12px center;
padding-left: 32px;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
touch-action: manipulation;
}
.autofit-sort-select:hover {
border-color: #2563eb;
}
.autofit-sort-select:focus {
outline: none;
border-color: #2563eb;
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}
.autofit-sort-select:focus-visible {
outline: 2px solid #2563eb;
outline-offset: 2px;
}
/* =========================================================
Legacy PAGINATION (kept for compat)
========================================================= */
.autofit-sc-pagination {
margin: 16px 0 4px 0;
padding: 0;
width: 100%;
text-align: center;
direction: rtl;
}
.autofit-sc-pagination:empty {
display: none;
margin: 0;
}
.autofit-pagination-inner {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 6px;
padding: 4px 0;
}
.autofit-page-btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 40px;
min-height: 40px;
padding: 6px 12px;
margin: 0;
background: #ffffff;
color: #1e293b;
border: 1px solid #cbd5e1;
border-radius: 8px;
font-family: Tahoma, Arial, sans-serif;
font-size: 14px;
font-weight: 600;
line-height: 1.2;
text-align: center;
text-decoration: none;
cursor: pointer;
transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
-webkit-appearance: none;
appearance: none;
user-select: none;
}
.autofit-page-btn:hover {
background: #eff6ff;
border-color: #2563eb;
color: #1d4ed8;
}
.autofit-page-btn:active {
background: #dbeafe;
transform: translateY(1px);
}
.autofit-page-btn:focus-visible {
outline: 2px solid #2563eb;
outline-offset: 2px;
}
.autofit-page-btn.autofit-page-active {
background: #2563eb;
border-color: #2563eb;
color: #ffffff;
box-shadow: 0 2px 8px rgba(37, 99, 235, 0.35);
cursor: default;
}
.autofit-page-btn.autofit-page-active:hover {
background: #2563eb;
color: #ffffff;
}
.autofit-page-btn.autofit-page-disabled,
.autofit-page-btn[disabled] {
background: #f1f5f9;
border-color: #e2e8f0;
color: #94a3b8;
cursor: not-allowed;
opacity: 0.7;
}
.autofit-page-btn.autofit-page-disabled:hover,
.autofit-page-btn[disabled]:hover {
background: #f1f5f9;
border-color: #e2e8f0;
color: #94a3b8;
}
.autofit-page-ellipsis {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 24px;
min-height: 40px;
padding: 0 4px;
color: #64748b;
font-weight: 700;
user-select: none;
}
/* =========================================================
📱 MOBILE Optimizations
========================================================= */
@media (max-width: 900px) {
.autofit-sc-products-grid,
.autofit-section-grid,
.autofit-suggestions-container.autofit-suggestions-visible {
grid-template-columns: repeat(var(--autofit-columns-mobile, 2), minmax(0, 1fr));
gap: 12px;
}
}
@media (max-width: 600px) {
.autofit-search-card {
padding: 16px;
border-radius: 12px;
}
.autofit-header-info h3 {
font-size: 16px;
}
.autofit-search-card[data-autofit-instance] .autofit-search-input-group > .autofit-sc-input {
font-size: 16px !important;
}
.autofit-sc-products-grid,
.autofit-section-grid,
.autofit-suggestions-container.autofit-suggestions-visible {
grid-template-columns: repeat(var(--autofit-columns-mobile, 2), minmax(0, 1fr));
gap: 10px;
}
.autofit-search-card[data-autofit-instance] > .autofit-sc-results-container {
margin-top: 20px;
}
.autofit-product-card .autofit-product-info {
padding: 10px;
}
.autofit-product-card .autofit-product-name {
font-size: 12px;
-webkit-line-clamp: 2;
min-height: 34px;
}
.autofit-product-card .autofit-product-price {
font-size: 13px;
}
.autofit-product-card .autofit-product-view {
font-size: 11px;
padding: 8px;
min-height: 36px;
}
.autofit-search-card[data-autofit-instance] > .autofit-sc-send-btn {
font-size: 15px !important;
min-height: 52px !important;
padding: 14px !important;
}
.autofit-suggestions-btn {
font-size: 15px !important;
min-height: 52px !important;
padding: 14px !important;
}
.autofit-recent-item {
font-size: 12px;
padding: 6px 12px;
min-height: 36px;
}
/* Toggle + spacing */
.autofit-section-host {
margin-bottom: 24px;
}
.autofit-section-toggle {
min-height: 54px !important;
padding: 14px 55px !important;
font-size: 17px !important;
}
.autofit-result-section .autofit-toggle-icon {
width: 28px !important;
height: 28px !important;
font-size: 12px !important;
left: 12px !important;
}
/* ✅ v2.15.1: theme toggle -- scale 46% */
.autofit-theme-toggle {
width: 90px;
height: 49px;
min-width: 90px;
min-height: 49px;
}
.autofit-theme-toggle .autofit-toggle-icon {
width: 22px;
height: 22px;
}
/* ✅ v3.7.7: compact empty state on mobile */
.autofit-section-empty {
padding: 14px 16px !important;
font-size: 13px !important;
border-radius: 8px !important;
max-width: 300px !important;
line-height: 1.5 !important;
}
.autofit-section-empty::before {
font-size: 22px !important;
margin-bottom: 4px !important;
}
.autofit-section-title {
font-size: 18px;
padding-bottom: 10px;
margin-bottom: 14px;
border-bottom-width: 3px;
}
.autofit-section-title::before {
font-size: 20px;
}
.autofit-section-body {
padding-top: 14px;
}
.autofit-section-sort {
margin-bottom: 12px;
}
.autofit-sc-sort,
.autofit-section-sort {
margin-top: 16px;
}
.autofit-sort-label {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 6px;
font-size: 13px;
width: 100%;
}
.autofit-sort-select {
width: 100%;
min-width: 0;
max-width: 100%;
height: 44px;
font-size: 14px;
padding: 8px 32px 8px 12px;
background-position: left 10px center;
}
.autofit-sc-pagination,
.autofit-section-pagination {
margin: 14px 0 4px 0;
}
.autofit-pagination-inner {
gap: 4px;
}
.autofit-page-btn {
min-width: 36px;
min-height: 36px;
padding: 5px 9px;
font-size: 13px;
}
.autofit-typo-banner {
flex-wrap: wrap;
padding: 10px 12px;
}
.autofit-typo-text {
flex-basis: calc(100% - 32px);
}
.autofit-typo-cancel {
width: 100%;
margin-top: 8px;
min-height: 40px;
font-size: 12px;
}
/* ✅ v3.11.2: compact results panel on mobile */
.autofit-search-card[data-autofit-theme="dark"] > .autofit-sc-results-container {
padding: 16px;
}
}
@media (max-width: 380px) {
.autofit-sc-products-grid,
.autofit-section-grid,
.autofit-suggestions-container.autofit-suggestions-visible {
grid-template-columns: minmax(0, 1fr);
}
.autofit-product-card {
flex-direction: row;
align-items: center;
}
.autofit-product-card .autofit-product-image {
width: 80px;
height: 80px;
aspect-ratio: 1 / 1;
flex-shrink: 0;
}
.autofit-product-card .autofit-product-info {
flex: 1;
min-width: 0;
}
.autofit-page-ellipsis {
display: none;
}
.autofit-page-btn {
min-width: 34px;
min-height: 34px;
padding: 4px 7px;
font-size: 12px;
}
.autofit-sort-select {
font-size: 13px;
padding: 8px 30px 8px 10px;
}
.autofit-section-host {
margin-bottom: 20px;
}
.autofit-section-toggle {
min-height: 50px !important;
padding: 12px 50px !important;
font-size: 15px !important;
}
.autofit-result-section .autofit-toggle-icon {
left: 10px !important;
width: 26px !important;
height: 26px !important;
font-size: 11px !important;
}
/* ✅ v2.15.1: theme toggle -- scale 40% */
.autofit-theme-toggle {
width: 78px;
height: 43px;
min-width: 78px;
min-height: 43px;
}
.autofit-theme-toggle .autofit-toggle-icon {
width: 20px;
height: 20px;
}
/* ✅ v3.7.7: compact empty state on very small screens */
.autofit-section-empty {
padding: 12px 14px !important;
font-size: 12px !important;
border-radius: 8px !important;
}
.autofit-section-empty::before {
font-size: 20px !important;
margin-bottom: 4px !important;
}
.autofit-section-title {
font-size: 17px;
}
}
/* =========================================================
✅ v2.15.0 / v2.15.1 / v2.15.2 / v3.11.1: DARK MODE -- SCOPED TO CARD
=========================================================
Activates only when the card carries:
[data-autofit-theme="dark"]
The rest of the site is NEVER affected.
✅ v2.15.2: The dark-mode block also overrides the ring color
(handled by the --autofit-toggle-ring custom property in the
toggle's own rules).
✅ v3.11.1: ONLY the search-input portion responds to the theme
toggle. All rules that previously applied the dark theme to the
results area (product cards, section titles, pagination, sort
control, empty-state, typo banner, year-hint banner, suggestions
wrapper, product badges) have been REMOVED from this block.
The two rules that remain for the badge are:
* .autofit-badge -> dark bg + dark text
* .autofit-badge-icon-img -> preserves image visibility on dark
========================================================= */
.autofit-search-card[data-autofit-theme="dark"] {
background: #1e293b;
border-color: #334155;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}
.autofit-search-card[data-autofit-theme="dark"] .autofit-header-info h3 {
color: #f1f5f9;
}
.autofit-search-card[data-autofit-theme="dark"] .autofit-badge {
background: #1e40af;
color: #dbeafe;
}
/* v3.11.1: keep the badge icon readable in dark mode.
The image is not tinted; only a subtle drop-shadow is applied
to help it stand out against the dark badge background.
The emoji/text variant inherits the badge's color. */
.autofit-search-card[data-autofit-theme="dark"] .autofit-badge .autofit-badge-icon-img {
filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.4));
}
.autofit-search-card[data-autofit-theme="dark"] .autofit-search-input-group {
background: #0f172a !important;
border-color: #334155 !important;
}
.autofit-search-card[data-autofit-theme="dark"] .autofit-search-input-group > .autofit-sc-input {
color: #f1f5f9 !important;
}
.autofit-search-card[data-autofit-theme="dark"] .autofit-search-input-group > .autofit-sc-input::placeholder {
color: #64748b !important;
}
.autofit-search-card[data-autofit-theme="dark"] .autofit-search-input-group > .autofit-sc-clear-btn {
background: #1e293b !important;
border-color: #334155 !important;
color: #cbd5e1 !important;
}
.autofit-search-card[data-autofit-theme="dark"] .autofit-search-input-group > .autofit-sc-clear-btn:hover {
background: #334155 !important;
color: #ffffff !important;
}
.autofit-search-card[data-autofit-theme="dark"] .autofit-sc-send-btn {
background: #3b82f6 !important;
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3) !important;
}
.autofit-search-card[data-autofit-theme="dark"] .autofit-sc-send-btn:hover {
background: #2563eb !important;
}
.autofit-search-card[data-autofit-theme="dark"] .autofit-recent-item {
background: #1e293b;
border-color: #334155;
color: #cbd5e1;
}
.autofit-search-card[data-autofit-theme="dark"] .autofit-recent-item:hover {
background: #334155;
}
/* =========================================================
✅ v3.11.2: LIGHT RESULTS PANEL IN DARK MODE
=========================================================
PROBLEM (introduced in v3.11.1):
In v3.11.1, the rules that applied the dark theme to
individual result elements were removed. However, the
.autofit-sc-results-container itself has no background
of its own -- it inherited the dark background from the
parent .autofit-search-card. As a result, the space
behind the section titles and between product cards
still appeared dark, even though the cards themselves
were white.
THE FIX:
This rule gives the results container its own white
"panel" background whenever the card is in dark mode.
This creates a clean visual separation:
* Top portion (badge, title, input, send) = dark
* Bottom portion (results) = white
The rule only applies in dark mode. In light mode, the
container keeps its transparent background.
A mobile override (see @media max-width: 600px above)
reduces the panel padding from 20px to 16px to match
the card's mobile padding.
FILES CHANGED IN v3.11.2 (2 total):
* autofit-ai-search.php
* assets/css/autofit-shortcode.css (this file)
========================================================= */
.autofit-search-card[data-autofit-theme="dark"] > .autofit-sc-results-container {
background: #ffffff;
color: #0f172a;
padding: 20px;
border-radius: 12px;
}
/* =========================================================
prefers-reduced-motion
========================================================= */
@media (prefers-reduced-motion: reduce) {
.autofit-shortcode-wrapper,
.autofit-shortcode-wrapper * {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
.autofit-search-card[data-autofit-instance] > .autofit-sc-send-btn:active,
.autofit-search-card[data-autofit-instance] .autofit-search-input-group > .autofit-sc-clear-btn:active,
.autofit-suggestions-btn:active,
.autofit-page-btn:active,
.autofit-section-toggle:active,
.autofit-theme-toggle:active {
transform: none !important;
}
.autofit-toggle-icon {
transition: none !important;
}
.autofit-theme-toggle .autofit-toggle-icon {
transition: none !important;
}
}
/* =========================================================
HYBRID PRODUCT BADGES
========================================================= */
.autofit-product-badges {
position: absolute;
top: 8px;
left: 8px;
z-index: 3;
display: flex;
flex-direction: column;
gap: 4px;
pointer-events: none;
max-width: calc(100% - 16px);
}
.autofit-badge-out-of-stock,
.autofit-badge-on-sale,
.autofit-badge-new,
.autofit-badge-featured {
display: inline-block;
align-self: flex-start;
background: #dc2626;
color: #ffffff;
padding: 4px 10px;
font-size: 11px;
font-weight: 700;
line-height: 1.3;
border-radius: 4px;
white-space: nowrap;
font-family: Tahoma, Arial, sans-serif;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
text-shadow: none;
}
@media (max-width: 600px) {
.autofit-product-badges {
top: 6px;
left: 6px;
gap: 3px;
}
.autofit-badge-out-of-stock,
.autofit-badge-on-sale,
.autofit-badge-new,
.autofit-badge-featured {
font-size: 10px;
padding: 3px 8px;
border-radius: 3px;
}
}
@media (prefers-color-scheme: dark) {
.autofit-badge-out-of-stock,
.autofit-badge-on-sale,
.autofit-badge-new,
.autofit-badge-featured {
background: #dc2626;
color: #ffffff;
}
}