/* =============================================================================
   AI Engine — WooCommerce Assistant
   Product Carousel Styles
   v1.0.0

   Design principles:
   - Works inside any chatbot theme (light or dark)
   - Fully responsive: single card on mobile, scrollable on wider viewports
   - CSS scroll-snap for smooth, native feel — no JS libraries required
   - Subtle animations for engagement without distraction
   - High-contrast text and accessible focus states
   ============================================================================= */

/* ── Custom Properties ──────────────────────────────────────────────────────── */

.aiwoo-carousel-wrap {
  --aiwoo-card-width:      220px;
  --aiwoo-card-radius:     14px;
  --aiwoo-accent:          #7c5cfc;
  --aiwoo-accent-hover:    #5e3de8;
  --aiwoo-sale:            #e64980;
  --aiwoo-green:           #2dc97b;
  --aiwoo-muted:           #8b9eb0;
  --aiwoo-border:          rgba(120, 130, 160, 0.15);
  --aiwoo-shadow:          0 4px 20px rgba(0, 0, 0, 0.10);
  --aiwoo-shadow-hover:    0 8px 32px rgba(0, 0, 0, 0.18);
  --aiwoo-bg:              #ffffff;
  --aiwoo-bg-img:          #f4f6fa;
  --aiwoo-text:            #1a1f33;
  --aiwoo-text-secondary:  #546278;
  --aiwoo-btn-text:        #ffffff;
  --aiwoo-transition:      0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Dark-mode adaptation (respects system preference + most chatbot dark themes) */
@media (prefers-color-scheme: dark) {
  .aiwoo-carousel-wrap {
    --aiwoo-bg:             #1e2235;
    --aiwoo-bg-img:         #161926;
    --aiwoo-text:           #e8eaf0;
    --aiwoo-text-secondary: #8fa0b8;
    --aiwoo-border:         rgba(255, 255, 255, 0.08);
    --aiwoo-shadow:         0 4px 20px rgba(0, 0, 0, 0.35);
    --aiwoo-shadow-hover:   0 8px 32px rgba(0, 0, 0, 0.50);
  }
}

/* ── Carousel Wrapper ───────────────────────────────────────────────────────── */

.aiwoo-carousel-wrap {
  position:      relative;
  display:       flex;
  align-items:   center;
  gap:           6px;
  margin:        10px 0 4px;
  max-width:     100%;
  padding:       4px 0 8px;
  box-sizing:    border-box;
}

/* ── Scrollable Track ───────────────────────────────────────────────────────── */

.aiwoo-track {
  display:                grid;
  grid-auto-flow:         column;
  grid-auto-columns:      var(--aiwoo-card-width);
  gap:                    12px;
  overflow-x:             auto;
  scroll-snap-type:       x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width:        none;           /* Firefox */
  -ms-overflow-style:     none;           /* IE/Edge */
  padding:                4px 2px 10px;   /* extra bottom for shadow */
  flex:                   1;
  min-width:              0;
}

.aiwoo-track::-webkit-scrollbar {
  display: none;                          /* Chrome/Safari */
}

/* ── Product Card ───────────────────────────────────────────────────────────── */

.aiwoo-card {
  scroll-snap-align:  start;
  background:         var(--aiwoo-bg);
  border:             1px solid var(--aiwoo-border);
  border-radius:      var(--aiwoo-card-radius);
  box-shadow:         var(--aiwoo-shadow);
  display:            flex;
  flex-direction:     column;
  overflow:           hidden;
  transition:
    transform        var(--aiwoo-transition),
    box-shadow       var(--aiwoo-transition);
  will-change:        transform;
}

.aiwoo-card:hover {
  transform:    translateY(-3px);
  box-shadow:   var(--aiwoo-shadow-hover);
}

/* ── Card Image Area ────────────────────────────────────────────────────────── */

.aiwoo-card-img-link {
  position:       relative;
  display:        block;
  background:     var(--aiwoo-bg-img);
  overflow:       hidden;
  aspect-ratio:   1 / 1;
  border-radius:  var(--aiwoo-card-radius) var(--aiwoo-card-radius) 0 0;
  flex-shrink:    0;
}

.aiwoo-card-img {
  width:           100%;
  height:          100%;
  object-fit:      cover;
  display:         block;
  transition:      transform var(--aiwoo-transition);
}

.aiwoo-card-img-link:hover .aiwoo-card-img {
  transform: scale(1.06);
}

/* ── Sale Badge ─────────────────────────────────────────────────────────────── */

.aiwoo-badge-sale {
  position:        absolute;
  top:             10px;
  left:            10px;
  background:      var(--aiwoo-sale);
  color:           #fff;
  font-size:       10px;
  font-weight:     700;
  letter-spacing:  0.08em;
  padding:         3px 8px;
  border-radius:   20px;
  text-transform:  uppercase;
  line-height:     1;
  pointer-events:  none;
  box-shadow:      0 2px 6px rgba(230, 73, 128, 0.40);
}

/* ── Card Body ──────────────────────────────────────────────────────────────── */

.aiwoo-card-body {
  display:        flex;
  flex-direction: column;
  flex:           1;
  padding:        12px 12px 14px;
  gap:            4px;
}

.aiwoo-card-name {
  margin:       0;
  font-size:    13px;
  font-weight:  700;
  color:        var(--aiwoo-text);
  line-height:  1.35;
  display:      -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow:     hidden;
}

.aiwoo-card-desc {
  margin:         0;
  font-size:      11.5px;
  color:          var(--aiwoo-text-secondary);
  line-height:    1.45;
  display:        -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow:       hidden;
  min-height:     32px;
}

/* ── Pricing ────────────────────────────────────────────────────────────────── */

.aiwoo-card-pricing {
  display:      flex;
  align-items:  baseline;
  gap:          6px;
  margin-top:   2px;
}

.aiwoo-sale-price {
  font-size:    14px;
  font-weight:  700;
  color:        var(--aiwoo-accent);
  text-decoration: none;
  font-style:   normal;
}

.aiwoo-regular-price {
  font-size:    11px;
  color:        var(--aiwoo-muted);
  text-decoration: line-through;
}

/* ── Stock Status ───────────────────────────────────────────────────────────── */

.aiwoo-card-stock {
  margin:       0;
  font-size:    11px;
  font-weight:  600;
  letter-spacing: 0.02em;
}

.aiwoo-instock  { color: var(--aiwoo-green); }
.aiwoo-outofstock { color: var(--aiwoo-muted); }

/* ── View Product Button ────────────────────────────────────────────────────── */

.aiwoo-btn {
  display:         block;
  margin-top:      auto;
  padding:         8px 0;
  background:      var(--aiwoo-accent);
  color:           var(--aiwoo-btn-text) !important;
  text-align:      center;
  border-radius:   8px;
  font-size:       12px;
  font-weight:     600;
  text-decoration: none !important;
  letter-spacing:  0.03em;
  transition:
    background    var(--aiwoo-transition),
    transform     var(--aiwoo-transition);
  border:          none;
  cursor:          pointer;
}

.aiwoo-btn:hover {
  background:  var(--aiwoo-accent-hover);
  transform:   translateY(-1px);
  color:       var(--aiwoo-btn-text) !important;
}

.aiwoo-btn:focus-visible {
  outline:         3px solid var(--aiwoo-accent);
  outline-offset:  2px;
}

/* ── Navigation Buttons ─────────────────────────────────────────────────────── */

.aiwoo-nav {
  flex-shrink:     0;
  width:           32px;
  height:          32px;
  border-radius:   50%;
  border:          1px solid var(--aiwoo-border);
  background:      var(--aiwoo-bg);
  color:           var(--aiwoo-text);
  font-size:       20px;
  line-height:     1;
  display:         flex;
  align-items:     center;
  justify-content: center;
  cursor:          pointer;
  box-shadow:      var(--aiwoo-shadow);
  transition:
    background   var(--aiwoo-transition),
    transform    var(--aiwoo-transition),
    box-shadow   var(--aiwoo-transition);
  z-index:         2;
  padding:         0;
  user-select:     none;
  -webkit-tap-highlight-color: transparent;
}

.aiwoo-nav:hover {
  background:  var(--aiwoo-accent);
  color:       #fff;
  border-color: var(--aiwoo-accent);
  transform:   scale(1.10);
  box-shadow:  var(--aiwoo-shadow-hover);
}

.aiwoo-nav:focus-visible {
  outline:        3px solid var(--aiwoo-accent);
  outline-offset: 2px;
}

.aiwoo-nav:active {
  transform: scale(0.95);
}

/* ── Responsive ─────────────────────────────────────────────────────────────── */

/* Very narrow chatbot bubbles — hide nav, let native scroll take over */
@media (max-width: 320px) {
  .aiwoo-nav             { display: none; }
  .aiwoo-carousel-wrap   { padding: 0; }
}

/* Single-card: center it instead of left-aligning */
.aiwoo-track:has(.aiwoo-card:only-child) {
  justify-content: center;
  overflow: hidden;
}