/* ==========================================================================
   Cart Pharma Search — Frontend Styles
   Plugin:  Cart Pharma Search 1.0.0
   Author:  Devzord
   Color palette: #8F4EC8 (Purple) / #ffffff (White) / #000000 (Black)
   ========================================================================== */

/* ── CSS Custom Properties (overridden by inline block from PHP) ── */
:root {
  --cps-primary:          #8F4EC8;
  --cps-accent:           #ffffff;
  --cps-radius:           12px;
  --cps-gradient-intensity: 0.6;

  /* Derived */
  --cps-primary-dark:  #6d3a9a;
  --cps-primary-light: #f3eaff;
  --cps-border:        #e8daf5;
  --cps-text:          #0f0f0f;
  --cps-text-muted:    #6b6b7b;
  --cps-surface:       #ffffff;
  --cps-surface-2:     #faf6ff;
  --cps-shadow:        0 12px 48px rgba(0, 0, 0, 0.14);
  --cps-speed:         220ms;
  --cps-easing:        cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================================================
   Theme Compatibility — protect plugin SVG icons from host-theme overrides.
   Many WP themes inject rules like `svg { fill: currentColor; stroke: none }`,
   `img,svg { max-width: 100%; height: auto }`, or `button svg { display:none }`.
   The !important blocks below are intentional and scoped to plugin elements.
   ========================================================================== */

/* 1. Global: every SVG inside any plugin element must be visible */
.cps-search-wrap svg,
.cps-fullscreen-overlay svg,
.cps-header-trigger svg,
.cps-header-bar svg {
  display:     inline-block !important;
  visibility:  visible      !important;
  overflow:    visible      !important;
  max-width:   none         !important;
  max-height:  none         !important;
}

/* 2. Stroke-based icons (line art: X, plus, search, arrow, etc.) */
.cps-clear-btn svg,
.cps-atc-btn svg,
.cps-fullscreen-close svg,
.cps-header-trigger svg,
.cps-header-bar__btn svg,
.cps-search-icon {
  fill:             none         !important;
  stroke:           currentColor !important;
  stroke-linecap:   round        !important;
  stroke-linejoin:  round        !important;
}

/* 3. Exact sizes — prevent `height: auto` from distorting proportions */
.cps-search-icon {
  width:        24px !important;
  height:       24px !important;
  stroke-width: 2    !important;
}
.cps-fullscreen-close svg {
  width:        22px !important;
  height:       22px !important;
  stroke-width: 2    !important;
}
.cps-atc-btn svg {
  width:  14px !important;
  height: 14px !important;
  stroke-width: 2.5 !important;
  flex-shrink: 0;
}
.cps-clear-btn svg {
  width:  12px !important;
  height: 12px !important;
  stroke-width: 3 !important;
  flex-shrink: 0;
}

/* 4. Colour guards: ATC button icon must stay white; clear button uses primary */
.cps-atc-btn { color: #ffffff !important; }
.cps-clear-btn { color: var(--cps-primary) !important; }
.cps-clear-btn:hover { color: #ffffff !important; }

/* ==========================================================================
   1. Search Wrap
   ========================================================================== */

.cps-search-wrap {
  position:    relative;
  width:       100%;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ==========================================================================
   2. Input
   ========================================================================== */

.cps-input-wrap {
  position:    relative;
  display:     flex;
  align-items: center;
}

.cps-input {
  width:         100%;
  padding:       12px 40px 12px 44px;
  border:        2px solid var(--cps-border);
  border-radius: var(--cps-radius);
  font-size:     15px;
  font-family:   inherit;
  color:         var(--cps-text);
  background:    var(--cps-surface);
  outline:       none;
  appearance:    none;
  -webkit-appearance: none;
  transition:    border-color var(--cps-speed) var(--cps-easing),
                 box-shadow   var(--cps-speed) var(--cps-easing);
}

.cps-input::placeholder { color: var(--cps-text-muted); }

/* Gradient focus ring */
.cps-input:focus {
  border-color: var(--cps-primary);
  box-shadow:   0 0 0 4px rgba(143, 78, 200, 0.14),
                0 0 0 1px var(--cps-primary);
}

/* Input style: minimal */
.cps-style-minimal .cps-input {
  border:        none;
  border-bottom: 2px solid var(--cps-border);
  border-radius: 0;
  padding-left:  36px;
  background:    transparent;
}

.cps-style-minimal .cps-input:focus {
  border-bottom-color: var(--cps-primary);
  box-shadow: none;
}

/* Input style: pill */
.cps-style-pill .cps-input {
  border-radius: 50px;
  padding-left:  48px;
}

/* Search icon */
.cps-search-icon {
  position:       absolute;
  left:           14px;
  color:          var(--cps-input-icon, var(--cps-text-muted));
  pointer-events: none;
  flex-shrink:    0;
  transition:     color var(--cps-speed) var(--cps-easing);
}

.cps-style-pill .cps-search-icon { left: 18px; }

.cps-input-wrap:focus-within .cps-search-icon {
  color: var(--cps-primary);
}

/* Clear button */
.cps-clear-btn {
  position:        absolute;
  right:           12px;
  width:           26px;
  height:          26px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  background:      var(--cps-primary-light);
  border:          none;
  border-radius:   50%;
  cursor:          pointer;
  color:           var(--cps-primary);
  transition:      background var(--cps-speed), color var(--cps-speed), transform 150ms;
  flex-shrink:     0;
}

.cps-clear-btn[hidden] { display: none; }

.cps-clear-btn:hover {
  background: var(--cps-primary);
  color:      #ffffff;
  transform:  scale(1.1);
}

/* ==========================================================================
   3. Results Panel
   ========================================================================== */

.cps-results {
  position:            absolute;
  top:                 calc(100% + 7px);
  left:                0;
  right:               0;
  background:          var(--cps-surface);
  border:              1px solid var(--cps-border);
  border-radius:       var(--cps-radius);
  box-shadow:          var(--cps-shadow);
  z-index:             999999;
  max-height:          480px;
  overflow-y:          auto;
  overflow-x:          hidden;
  overscroll-behavior: contain;
  animation:           cps-panel-in var(--cps-speed) cubic-bezier(0.34, 1.56, 0.64, 1) both;
  scroll-behavior:     smooth;
}

.cps-results[hidden] { display: none; }

.cps-results::-webkit-scrollbar       { width: 4px; }
.cps-results::-webkit-scrollbar-track { background: transparent; }
.cps-results::-webkit-scrollbar-thumb { background: var(--cps-border); border-radius: 4px; }

@keyframes cps-panel-in {
  from { opacity: 0; transform: translateY(-8px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0)    scale(1);    }
}

/* ==========================================================================
   4. Loader bar
   ========================================================================== */

.cps-loader-bar {
  height:           3px;
  background:       linear-gradient(90deg, transparent 0%, var(--cps-primary) 50%, transparent 100%);
  background-size:  200% 100%;
  animation:        cps-loader-anim 1.4s ease infinite;
  border-radius:    var(--cps-radius) var(--cps-radius) 0 0;
}

@keyframes cps-loader-anim {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}

/* ==========================================================================
   5. Result Items
   ========================================================================== */

.cps-result-list {
  display:        flex;
  flex-direction: column;
}

.cps-result-item {
  display:     flex;
  align-items: center;
  gap:         12px;
  padding:     10px 14px;
  cursor:      pointer;
  border-left: 3px solid transparent;
  transition:  background var(--cps-speed) var(--cps-easing),
               border-left-color var(--cps-speed) var(--cps-easing);
  min-height:  56px; /* touch-friendly */
  text-decoration: none;
  color: inherit;
}

.cps-result-item:hover {
  background:        rgba(143, 78, 200, 0.06);
  border-left-color: var(--cps-primary);
}

.cps-result-item.is-active {
  background:        linear-gradient(to right, rgba(143, 78, 200, calc(var(--cps-gradient-intensity) * 0.14)), rgba(143, 78, 200, 0.03));
  border-left-color: var(--cps-primary);
  outline:           none;
}

/* Product thumbnail */
.cps-result-img {
  width:        48px;
  height:       48px;
  object-fit:   cover;
  border-radius: 8px;
  flex-shrink:  0;
  background:   var(--cps-primary-light);
  border:       1px solid var(--cps-border);
  display:      block;
}

.cps-result-img--placeholder {
  display:         flex;
  align-items:     center;
  justify-content: center;
  color:           var(--cps-text-muted);
}

/* Post/page type icon */
.cps-result-type-icon {
  width:           36px;
  height:          36px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  background:      var(--cps-primary-light);
  border-radius:   8px;
  color:           var(--cps-primary);
  flex-shrink:     0;
}

/* Result text body */
.cps-result-body {
  flex:      1;
  min-width: 0;
  display:   flex;
  flex-direction: column;
  gap: 3px;
}

.cps-result-title {
  font-size:      14px;
  font-weight:    600;
  color:          var(--cps-text);
  white-space:    nowrap;
  overflow:       hidden;
  text-overflow:  ellipsis;
  line-height:    1.3;
  display:        block;
}

.cps-result-price {
  font-size:   13px;
  font-weight: 700;
  color:       var(--cps-primary);
  line-height: 1.2;
}

.cps-result-price ins { text-decoration: none; }

.cps-result-excerpt {
  font-size:     12px;
  color:         var(--cps-text-muted);
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
  display:       block;
}

.cps-result-meta {
  font-size:      11px;
  color:          var(--cps-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight:    600;
}

/* Stock badge */
.cps-stock-badge {
  display:       inline-block;
  font-size:     11px;
  padding:       1px 7px;
  border-radius: 4px;
  font-weight:   600;
}

.cps-out-of-stock {
  background: #fee2e2;
  color:      #dc2626;
}

/* Instant add-to-cart button */
.cps-atc-btn {
  flex-shrink:     0;
  width:           32px;
  height:          32px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  background:      var(--cps-primary);
  color:           #ffffff;
  border:          none;
  border-radius:   8px;
  cursor:          pointer;
  font-size:       11px;
  font-weight:     700;
  font-family:     inherit;
  transition:      background var(--cps-speed), transform 150ms;
  line-height:     1;
}

.cps-atc-btn:hover    { background: var(--cps-primary-dark); transform: scale(1.08); }
.cps-atc-btn:disabled { opacity: 0.65; transform: none; cursor: default; }
.cps-atc-btn.is-added { background: #16a34a; }

/* ==========================================================================
   6. No Results / Popular Items
   ========================================================================== */

.cps-no-results {
  padding:    28px 20px;
  text-align: center;
}

.cps-no-results__icon {
  color:         var(--cps-border);
  margin-bottom: 14px;
  line-height:   1;
}

.cps-no-results__msg {
  font-size:     14px;
  color:         var(--cps-text-muted);
  margin:        0 0 20px;
  line-height:   1.5;
}

.cps-no-results__msg strong { color: var(--cps-text); }

/* Popular products grid */
.cps-popular {
  text-align: left;
  margin-top: 12px;
}

.cps-popular__title {
  font-size:      11px;
  font-weight:    700;
  color:          var(--cps-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin:         0 0 10px;
  padding:        0 2px;
}

.cps-popular__grid {
  display:   flex;
  flex-wrap: wrap;
  gap:       8px;
}

.cps-popular-item {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  gap:             6px;
  width:           calc(33.333% - 6px);
  text-decoration: none;
  padding:         10px 8px;
  border:          1px solid var(--cps-border);
  border-radius:   10px;
  transition:      border-color var(--cps-speed), box-shadow var(--cps-speed);
  background:      var(--cps-surface);
}

.cps-popular-item:hover {
  border-color: var(--cps-primary);
  box-shadow:   0 3px 16px rgba(143, 78, 200, 0.12);
}

.cps-popular-item img {
  width:         52px;
  height:        52px;
  object-fit:    cover;
  border-radius: 7px;
  display:       block;
}

.cps-popular-item__name {
  font-size:     11px;
  font-weight:   600;
  color:         var(--cps-text);
  text-align:    center;
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
  width:         100%;
}

/* Category chips */
.cps-popular-cats {
  text-align: left;
  margin-top: 16px;
}

.cps-cat-chips {
  display:   flex;
  flex-wrap: wrap;
  gap:       6px;
}

.cps-cat-chip {
  display:         inline-block;
  padding:         5px 13px;
  border:          1px solid var(--cps-border);
  border-radius:   50px;
  font-size:       12px;
  font-weight:     600;
  color:           var(--cps-primary);
  text-decoration: none;
  transition:      background var(--cps-speed), border-color var(--cps-speed), color var(--cps-speed);
}

.cps-cat-chip:hover {
  background:   var(--cps-primary);
  color:        #ffffff;
  border-color: var(--cps-primary);
}

/* Error state */
.cps-hint-msg {
  padding:    16px 20px;
  text-align: center;
  font-size:  13px;
  color:      var(--cps-text-muted);
  font-style: italic;
}

.cps-error {
  padding:    24px 20px;
  text-align: center;
  font-size:  13px;
  color:      var(--cps-text-muted);
}

/* ==========================================================================
   7. Modal Mode — fullscreen overlay
   ========================================================================== */

.cps-modal-overlay {
  position:          fixed;
  inset:             0;
  background:        rgba(0, 0, 0, 0.75);
  z-index:           999997;
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  animation:         cps-overlay-in 200ms ease both;
}

.cps-modal-overlay[hidden] { display: none; }

@keyframes cps-overlay-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Fullscreen modal container */
.cps-mode-modal.cps-modal-open {
  position:   fixed;
  inset:      0;
  z-index:    999998;
  display:    flex;
  flex-direction: column;
  padding:    60px 20px 20px;
  box-sizing: border-box;
}

.cps-mode-modal.cps-modal-open .cps-input-wrap {
  position:   relative;
  top:        auto;
  left:       auto;
  transform:  none;
  width:      100%;
  max-width:  680px;
  margin:     0 auto;
  z-index:    999999;
}

.cps-mode-modal .cps-results {
  position:      relative;
  top:           auto;
  left:          auto;
  right:         auto;
  transform:     none;
  width:         100%;
  max-width:     680px;
  max-height:    calc(100vh - 160px);
  margin:        8px auto 0;
  border-radius: var(--cps-radius);
  z-index:       999999;
  animation:     cps-panel-in var(--cps-speed) cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.cps-body-locked { overflow: hidden; }

/* ==========================================================================
   8. Mobile — fullscreen
   ========================================================================== */

@media (max-width: 640px) {
  /* Dropdown results: bottom sheet */
  .cps-mode-dropdown .cps-results {
    position:      fixed;
    top:           auto;
    bottom:        0;
    left:          0;
    right:         0;
    border-radius: 18px 18px 0 0;
    max-height:    78vh;
    animation:     cps-panel-in-mobile var(--cps-speed) ease both;
  }

  @keyframes cps-panel-in-mobile {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0);    }
  }

  /* Fullscreen modal on mobile */
  .cps-mode-modal.cps-modal-open {
    padding: 16px 12px 0;
  }

  .cps-mode-modal .cps-results {
    max-width:     none;
    max-height:    calc(100vh - 100px);
    border-radius: 12px;
  }

  .cps-popular-item { width: calc(50% - 4px); }
  .cps-result-item  { min-height: 60px; }
}

/* ==========================================================================
   Header Search Trigger — icon button and compact search bar
   ========================================================================== */

/* ── Shared: both inline (shortcode) and floating (admin) ── */
.cps-header-trigger,
.cps-header-bar {
  transition: opacity var(--cps-speed) var(--cps-easing),
              transform var(--cps-speed) var(--cps-easing);
}

/* ── Fixed/floating mode — only when injected by the admin setting ── */
/* Add class  cps-trigger--fixed  to make the element position:fixed  */
.cps-trigger--fixed {
  position: fixed;
  top:      var(--cps-header-top, 16px);
  z-index:  99998;
}

/* Position variants (only relevant when floating) */
.cps-trigger--fixed.cps-header-left   { left: 16px; }
.cps-trigger--fixed.cps-header-center { left: 50%; transform: translateX(-50%); }
.cps-trigger--fixed.cps-header-right  { right: 16px; }

/* Nudge down when WP admin bar is visible (32px desktop / 46px mobile) */
.admin-bar .cps-trigger--fixed { top: calc(32px + var(--cps-header-top, 16px)); }

@media screen and (max-width: 782px) {
  .admin-bar .cps-trigger--fixed { top: calc(46px + var(--cps-header-top, 16px)); }
}

/* ── Icon button ── */
.cps-header-trigger {
  display:         flex;
  align-items:     center;
  justify-content: center;
  /* Button size = icon size + padding (scales with --cps-trigger-size).
     When no-background mode is on, PHP sets --cps-trigger-padding to 0 so
     the button shrinks to exactly the icon dimensions.
     In normal mode, --cps-trigger-padding is controlled by the Button Padding
     admin setting (default 24 px). */
  width:           calc(var(--cps-trigger-size, 20px) + var(--cps-trigger-padding, 24px));
  height:          calc(var(--cps-trigger-size, 20px) + var(--cps-trigger-padding, 24px));
  padding:         0;
  /* border and border-radius are set as inline styles by PHP so they override
     any theme CSS; these are CSS-var fallbacks for contexts where inline styles
     are absent (e.g. server-side cache edge cases). */
  border:          none;
  border-radius:   50%;
  background:      var(--cps-trigger-bg, var(--cps-primary)) !important;
  color:           var(--cps-trigger-icon, var(--cps-accent)) !important;
  cursor:          pointer;
  box-shadow:      var(--cps-trigger-shadow, 0 4px 16px rgba(0, 0, 0, 0.18));
  flex-shrink:     0;
  overflow:        visible; /* let the icon scale beyond the circle without clipping */
  transition:      background var(--cps-speed), border-color var(--cps-speed), color var(--cps-speed);
}

/* SVG inside the trigger: size from setting + its own transition for hover effect */
.cps-header-trigger svg {
  width:      var(--cps-trigger-size, 20px);
  height:     var(--cps-trigger-size, 20px);
  flex-shrink: 0;
  transition: transform 180ms var(--cps-easing), opacity 180ms;
  will-change: transform;
}

/* Hover/focus: background changes on the button, scale happens on the icon only.
   The scoped <style id> block output by PHP overrides this for custom hover colours. */
.cps-header-trigger:hover,
.cps-header-trigger:focus-visible {
  background: var(--cps-trigger-hover, var(--cps-primary-dark)) !important;
  outline:    none;
}

.cps-header-trigger:hover svg,
.cps-header-trigger:focus-visible svg {
  transform: scale(1.22);
}

/* ── Compact search bar ── */
.cps-header-bar {
  border-radius: 999px;
  box-shadow:    0 4px 16px rgba(0, 0, 0, 0.16);
  overflow:      hidden;
  flex-shrink:   0;
}

.cps-header-bar__btn {
  display:         flex;
  align-items:     center;
  gap:             8px;
  padding:         10px 20px 10px 14px;
  border:          none;
  background:      var(--cps-trigger-bg, var(--cps-primary));
  color:           var(--cps-trigger-icon, var(--cps-accent));
  font-size:       0.9rem;
  cursor:          pointer;
  white-space:     nowrap;
}

.cps-header-bar__btn:hover,
.cps-header-bar__btn:focus-visible {
  background: var(--cps-trigger-hover, var(--cps-primary-dark));
  outline:    none;
}

.cps-header-bar__btn svg {
  width:       var(--cps-trigger-size, 20px);
  height:      var(--cps-trigger-size, 20px);
  flex-shrink: 0;
}

/* ==========================================================================
   Fullscreen Search Overlay
   ========================================================================== */

.cps-fullscreen-overlay {
  /* Default: always hidden — does NOT rely on the [hidden] attribute because
     many WP themes reset [hidden] { display: block } and would override it. */
  display:         none;
  position:        fixed;
  inset:           0;
  z-index:         999999;
  background:      rgba(15, 15, 25, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  /* Flex column so the close button lives in normal flow above the card —
     this prevents it being clipped by browser chrome on mobile. */
  flex-direction:  column;
  align-items:     center;
  justify-content: flex-start;
  /* Vertical padding: respect notch / Dynamic Island on notched devices.
     Falls back to 16px on browsers that don't support env(). */
  padding-top:     max(16px, env(safe-area-inset-top, 16px));
  padding-bottom:  max(16px, env(safe-area-inset-bottom, 16px));
  overflow-y:      auto;
  opacity:         0;
  transition:      opacity 240ms var(--cps-easing);
}

/* Shown via JS by adding .cps-is-open */
.cps-fullscreen-overlay.cps-is-open {
  display: flex;
  opacity: 1;
}

/* During fade-out (.is-closing), keep visible until transition ends */
.cps-fullscreen-overlay.is-closing {
  display:        flex;
  opacity:        0;
  pointer-events: none;
}

/* ── Close button row ── */
/* The button is now a regular flex item above the card — no absolute positioning,
   can never be pushed behind the browser chrome on any device. */
.cps-fullscreen-close-row {
  display:         flex;
  justify-content: flex-end;
  width:           min(680px, 92vw);
  padding:         8px 0;
  flex-shrink:     0;
}

.cps-fullscreen-inner {
  width:          min(680px, 92vw);
  flex-shrink:    0;
  animation:      cps-fs-in 260ms var(--cps-easing) both;
}

@keyframes cps-fs-in {
  from { opacity: 0; transform: translateY(-12px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0)     scale(1);    }
}

/* ── Close button ── */
.cps-fullscreen-close {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           44px;
  height:          44px;
  padding:         0;
  border:          none;
  border-radius:   50%;
  background:      rgba(255, 255, 255, 0.14);
  color:           #ffffff;
  cursor:          pointer;
  transition:      background var(--cps-speed), transform 150ms;
  /* Larger tap target on mobile */
  touch-action:    manipulation;
  -webkit-tap-highlight-color: transparent;
}

.cps-fullscreen-close:hover,
.cps-fullscreen-close:focus-visible {
  background: rgba(255, 255, 255, 0.26);
  outline:    none;
  transform:  scale(1.08);
}

/* ── Fullscreen search wrap ── */
.cps-mode-fullscreen {
  background:    var(--cps-surface);
  border-radius: var(--cps-radius);
  box-shadow:    var(--cps-shadow);
  overflow:      hidden;
}

.cps-mode-fullscreen .cps-input-wrap {
  padding: 0;
}

.cps-mode-fullscreen .cps-input {
  font-size:  1.25rem;
  padding:    20px 20px 20px 52px;
  height:     auto;
  border:     none;
}

.cps-mode-fullscreen .cps-search-icon {
  left:       18px;
  top:        50%;
  transform:  translateY(-50%);
  width:      22px;
  height:     22px;
  color:      var(--cps-primary);
}

.cps-mode-fullscreen .cps-clear-btn {
  right: 18px;
}

.cps-mode-fullscreen .cps-results {
  position:      static;
  border-top:    1px solid var(--cps-border);
  border-radius: 0 0 var(--cps-radius) var(--cps-radius);
  box-shadow:    none;
  max-height:    60vh;
  overflow-y:    auto;
}

@media (max-width: 640px) {
  /* Narrower card on small phones */
  .cps-fullscreen-inner,
  .cps-fullscreen-close-row { width: 94vw; }

  /* Slightly larger close button — easier to tap */
  .cps-fullscreen-close {
    width:  48px;
    height: 48px;
  }

  .cps-mode-fullscreen .cps-input   { font-size: 1.05rem; padding: 16px 16px 16px 44px; }
  .cps-mode-fullscreen .cps-results { max-height: 60vh; }
}

/* ==========================================================================
   WoodMart Theme Compatibility
   WoodMart applies aggressive styles to input[type="search"] that override
   our layout. These rules restore the correct appearance and behaviour.
   The body.woodmart-theme / body.woodmart-body selectors are set by WoodMart
   itself, giving us safe specificity without affecting other themes.
   ========================================================================== */

/* 1. Restore input dimensions/style overridden by WoodMart */
body.woodmart-theme .cps-input,
body.woodmart-body  .cps-input,
.woodmart-theme     .cps-input {
  height:              auto       !important;
  min-height:          0         !important;
  max-height:          none      !important;
  padding:             12px 40px 12px 44px !important;
  border:              2px solid var(--cps-border) !important;
  border-radius:       var(--cps-radius) !important;
  background:          var(--cps-surface) !important;
  color:               var(--cps-text)    !important;
  font-size:           15px       !important;
  line-height:         1.5        !important;
  margin:              0          !important;
  box-sizing:          border-box !important;
  -webkit-appearance:  none       !important;
  appearance:          none       !important;
  box-shadow:          none       !important;
}

body.woodmart-theme .cps-input:focus,
body.woodmart-body  .cps-input:focus,
.woodmart-theme     .cps-input:focus {
  border-color: var(--cps-primary) !important;
  box-shadow:   0 0 0 4px rgba(143, 78, 200, 0.14),
                0 0 0 1px var(--cps-primary) !important;
  outline: none !important;
}

/* 2. Pill style — WoodMart must not flatten the pill border-radius */
body.woodmart-theme .cps-style-pill .cps-input,
body.woodmart-body  .cps-style-pill .cps-input {
  border-radius: 50px !important;
  padding-left:  48px !important;
}

/* 3. Minimal style — restore bottom-only border */
body.woodmart-theme .cps-style-minimal .cps-input,
body.woodmart-body  .cps-style-minimal .cps-input {
  border:        none              !important;
  border-bottom: 2px solid var(--cps-border) !important;
  border-radius: 0                 !important;
  background:    transparent       !important;
  box-shadow:    none              !important;
  padding-left:  36px              !important;
}

/* 4. Ensure the search wrap itself is never clipped by WoodMart Elementor
   sections that set overflow:hidden (e.g. sticky header rows). The dropdown
   escape is handled by the high z-index; here we just let the wrap paint
   outside its own bounds. */
body.woodmart-theme .cps-search-wrap,
body.woodmart-body  .cps-search-wrap {
  overflow: visible !important;
}

/* 5. WoodMart sometimes sets position:relative + overflow:hidden on header
   wrappers which creates a stacking context. When the shortcode is in icon/bar
   trigger mode the fullscreen overlay is placed at wp_footer (body level), so
   it is unaffected. This rule handles the inline dropdown case. */
body.woodmart-theme .cps-results,
body.woodmart-body  .cps-results {
  z-index: 999999 !important;
}

/* 6. WoodMart injects its own spinner/loading overlay on ajax calls — make
   sure it does not cover our fullscreen overlay */
body.woodmart-theme .cps-fullscreen-overlay,
body.woodmart-body  .cps-fullscreen-overlay {
  z-index: 999999 !important;
}