/* PC Builder — Phase A layout skeleton.
 * Styling stays neutral + tasteful; deep theme matching happens in Phase F. */

.woaichat-builder {
  --wcb-primary: #0a84ff;
  --wcb-fg: #111827;
  --wcb-muted: #6b7280;
  --wcb-bg: #f8fafc;
  --wcb-card: #ffffff;
  --wcb-border: #e5e7eb;
  --wcb-ok: #16a34a;
  --wcb-warn: #d97706;
  --wcb-err: #dc2626;
  --wcb-radius: 12px;
  --wcb-shadow: 0 4px 16px rgba(15, 23, 42, 0.06);

  max-width: 1400px;
  margin: 0 auto 24px;
  padding: 0 16px;
  color: var(--wcb-fg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif;
  font-size: 15px;
  line-height: 1.5;
}

/* Hide redundant theme page-title hero on the builder page — most themes
 * render the WP page title as a centred banner above the content area, which
 * leaves a tall empty band before our hero. Selector list covers Martfury
 * (this site), Astra, Storefront, GeneratePress, OceanWP, Flatsome, Avada,
 * Twenty Twenty-* and similar. If your theme uses a different class, add it
 * to your theme's Custom CSS using the body.woaichat-builder-page selector.
 */
body.woaichat-builder-page .page-header,
body.woaichat-builder-page .page-title-bar,
body.woaichat-builder-page .page-title-wrapper,
body.woaichat-builder-page .entry-header,
body.woaichat-builder-page .martfury-page-header,
body.woaichat-builder-page .martfury-page-title,
body.woaichat-builder-page .tt-page-header,
body.woaichat-builder-page .tt-page-title,
body.woaichat-builder-page .ast-page-header-section,
body.woaichat-builder-page .storefront-breadcrumb + .entry-header,
body.woaichat-builder-page .page-headline,
body.woaichat-builder-page .site-content > header.entry-header,
body.woaichat-builder-page .elementor-page-title,
body.woaichat-builder-page .fusion-page-title-bar {
  display: none !important;
}

/* If the theme keeps a small breadcrumb bar with no title beside it, leave
 * it visible — only the centred hero with the duplicate "PC Builder" title
 * is what we want gone. */

.wcb-header {
  display: flex;
  gap: 24px;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 20px 0;
  border-bottom: 1px solid var(--wcb-border);
  margin-bottom: 20px;
}

.wcb-title {
  margin: 0 0 4px;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.wcb-subtitle {
  margin: 0;
  color: var(--wcb-muted);
  max-width: 520px;
}

/* ----- Hero (bilingual) ----- */

.wcb-hero { max-width: 720px; }

.wcb-hero-title {
  margin: 0 0 10px;
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.wcb-hero-en {
  display: block;
  font-size: 36px;
  background: linear-gradient(135deg, var(--wcb-primary) 0%, #6366f1 60%, #ec4899 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.wcb-hero-ar {
  display: block;
  font-size: 24px;
  font-weight: 700;
  color: var(--wcb-fg);
  margin-top: 4px;
  text-align: left;
}

.wcb-hero-subtitle {
  margin: 6px 0 0;
  color: var(--wcb-muted);
  max-width: 620px;
  font-size: 14px;
  line-height: 1.5;
}
.wcb-hero-subtitle-ar {
  margin-top: 4px;
  text-align: left;
  font-size: 13.5px;
}

.wcb-hero-features {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.wcb-hero-features li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(180deg, #eff6ff 0%, #e0e7ff 100%);
  color: #1e3a8a;
  border: 1px solid #c7dbff;
  border-radius: 999px;
  padding: 5px 12px 5px 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.wcb-feat-dot {
  width: 6px;
  height: 6px;
  background: var(--wcb-primary);
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.18);
}

@media (max-width: 700px) {
  .wcb-hero-en { font-size: 28px; }
  .wcb-hero-ar { font-size: 20px; }
  .wcb-hero-subtitle { font-size: 13px; }
}

.wcb-summary {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
}

.wcb-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #eef4ff;
  color: #1e3a8a;
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 500;
}
.wcb-status-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--wcb-primary);
}
.wcb-status.is-ok  { background: #dcfce7; color: #166534; }
.wcb-status.is-ok  .wcb-status-dot { background: var(--wcb-ok); }
.wcb-status.is-warn{ background: #fef3c7; color: #854d0e; }
.wcb-status.is-warn .wcb-status-dot{ background: var(--wcb-warn); }
.wcb-status.is-err { background: #fee2e2; color: #991b1b; }
.wcb-status.is-err .wcb-status-dot { background: var(--wcb-err); }

.wcb-subtotal {
  display: flex; flex-direction: column; align-items: flex-end;
  padding: 6px 14px;
  border-left: 1px solid var(--wcb-border);
}
.wcb-subtotal-label {
  font-size: 11px;
  color: var(--wcb-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.wcb-subtotal-value {
  font-size: 20px;
  font-weight: 700;
}

.wcb-offer-btn {
  background: var(--wcb-primary);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, opacity 0.15s ease;
}
.wcb-offer-btn:hover:not(:disabled) { background: #0969da; }
.wcb-offer-btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* Two-column layout:
 *   Left (2/3):  slots / part picker — visible at first glance, no scrolling
 *                needed to reach the picker.
 *   Right (1/3): stacked context column — chat (top), compatibility (middle),
 *                saved builds (bottom). The whole right column is sticky-pinned
 *                so the chat stays visible while the customer scrolls a long
 *                slot list on the left. Sticky range is bounded by .wcb-body
 *                itself.
 */
.wcb-body {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}
.wcb-side {
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: sticky;
  top: 20px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  /* Hide the scrollbar without losing scrollability. */
  scrollbar-width: thin;
}
.wcb-side::-webkit-scrollbar      { width: 6px; }
.wcb-side::-webkit-scrollbar-thumb{ background: #d4d4d8; border-radius: 4px; }

.wcb-slots {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.wcb-slot {
  background: var(--wcb-card);
  border: 1px solid var(--wcb-border);
  border-radius: var(--wcb-radius);
  padding: 16px 18px;
  box-shadow: var(--wcb-shadow);
}

.wcb-slot-head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 10px;
}

.wcb-slot-label {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
}
.wcb-req { color: var(--wcb-err); font-weight: 700; }

.wcb-slot-icon {
  width: 28px; height: 28px; flex: 0 0 28px;
  background: #f1f5f9;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--wcb-muted);
  font-weight: 700;
}
/* Simple two-letter icon fallbacks until theme-matched icons land. */
.wcb-icon-cpu::before         { content: "CPU"; font-size: 10px; }
.wcb-icon-motherboard::before { content: "MB";  }
.wcb-icon-ram::before         { content: "RAM"; font-size: 10px; }
.wcb-icon-storage::before     { content: "SSD"; font-size: 10px; }
.wcb-icon-gpu::before         { content: "GPU"; font-size: 10px; }
.wcb-icon-psu::before         { content: "PSU"; font-size: 10px; }
.wcb-icon-case::before        { content: "CS";  }
.wcb-icon-cooler::before      { content: "CLR"; font-size: 10px; }
.wcb-icon-fan::before         { content: "FAN"; font-size: 10px; }

.wcb-slot-choose {
  width: 100%;
  background: transparent;
  border: 1.5px dashed var(--wcb-border);
  border-radius: 10px;
  padding: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  color: var(--wcb-muted);
  text-align: left;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.wcb-slot-choose:hover:not(:disabled) {
  border-color: var(--wcb-primary);
  background: #f5faff;
  color: var(--wcb-fg);
}
.wcb-slot-choose:disabled { cursor: not-allowed; opacity: 0.6; }
.wcb-choose-plus {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: #e5edff;
  color: var(--wcb-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 16px;
  flex: 0 0 22px;
}
.wcb-choose-hint {
  margin-left: auto;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: #f1f5f9;
  color: var(--wcb-muted);
  padding: 2px 8px;
  border-radius: 6px;
}

.wcb-sidebar {
  background: var(--wcb-card);
  border: 1px solid var(--wcb-border);
  border-radius: var(--wcb-radius);
  height: 460px;
  flex: 0 0 auto;
  box-shadow: var(--wcb-shadow);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.wcb-sidebar:not(.wcb-chat-mounted) { padding: 18px; }
.wcb-sidebar-placeholder {
  color: var(--wcb-muted);
  text-align: center;
  padding: 40px 12px;
}
.wcb-sidebar-placeholder strong { color: var(--wcb-fg); font-size: 14px; display: block; margin-bottom: 6px; }
.wcb-sidebar-hint { font-size: 12px; margin-top: 14px; }

/* ----- Sidebar Build Assistant (chat) ----- */

.wcb-chat-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--wcb-border);
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
}
.wcb-chat-title {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--wcb-fg);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0;
}
.wcb-chat-sub {
  font-size: 11px;
  color: var(--wcb-muted);
  margin-top: 2px;
}
.wcb-chat-clear {
  background: transparent;
  border: 1px solid var(--wcb-border);
  border-radius: 6px;
  width: 28px;
  height: 28px;
  cursor: pointer;
  color: var(--wcb-muted);
  font-size: 14px;
  line-height: 1;
}
.wcb-chat-clear:hover { background: #f1f5f9; color: var(--wcb-fg); }

.wcb-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 12px 12px 6px;
  background: #fafafa;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.wcb-chat-msg {
  display: flex;
  animation: wcb-chat-fade 0.18s ease;
}
@keyframes wcb-chat-fade {
  from { opacity: 0; transform: translateY(3px); }
  to   { opacity: 1; transform: translateY(0); }
}
.wcb-chat-msg.user { justify-content: flex-end; }
.wcb-chat-bubble {
  max-width: 88%;
  padding: 8px 11px;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.5;
  word-wrap: break-word;
  white-space: pre-wrap;
}
.wcb-chat-msg.user .wcb-chat-bubble {
  background: var(--wcb-primary);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.wcb-chat-msg.assistant .wcb-chat-bubble {
  background: #ffffff;
  color: var(--wcb-fg);
  border: 1px solid var(--wcb-border);
  border-bottom-left-radius: 4px;
}
.wcb-chat-bubble a { color: inherit; text-decoration: underline; }
.wcb-chat-bubble strong { font-weight: 600; }
.wcb-chat-bubble ul { margin: 4px 0 4px 16px; padding: 0; }
.wcb-chat-bubble li { margin: 2px 0; }
.wcb-chat-bubble h3,
.wcb-chat-bubble h4 {
  margin: 8px 0 4px;
  font-size: 13px;
  font-weight: 700;
  color: var(--wcb-fg);
}
.wcb-chat-bubble h3:first-child,
.wcb-chat-bubble h4:first-child { margin-top: 0; }
.wcb-chat-bubble blockquote {
  margin: 6px 0;
  padding: 6px 10px;
  border-left: 3px solid var(--wcb-primary);
  background: #f1f5f9;
  border-radius: 0 6px 6px 0;
  font-size: 12.5px;
  color: var(--wcb-fg);
}
.wcb-chat-bubble hr {
  margin: 8px 0;
  border: none;
  border-top: 1px solid var(--wcb-border);
}
.wcb-chat-bubble table {
  width: 100%;
  border-collapse: collapse;
  margin: 6px 0;
  font-size: 12px;
}
.wcb-chat-bubble th,
.wcb-chat-bubble td {
  border: 1px solid var(--wcb-border);
  padding: 4px 6px;
  text-align: left;
  vertical-align: top;
}
.wcb-chat-bubble th { background: #f8fafc; font-weight: 600; }
.wcb-chat-bubble code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px;
  background: rgba(0, 0, 0, 0.06);
  padding: 1px 5px;
  border-radius: 3px;
}

.wcb-chat-typing {
  display: inline-flex;
  gap: 4px;
  padding: 2px 0;
}
.wcb-chat-typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--wcb-muted);
  animation: wcb-chat-bounce 1.2s infinite;
}
.wcb-chat-typing span:nth-child(2) { animation-delay: 0.15s; }
.wcb-chat-typing span:nth-child(3) { animation-delay: 0.30s; }
@keyframes wcb-chat-bounce {
  0%, 60%, 100% { transform: translateY(0);   opacity: 0.5; }
  30%           { transform: translateY(-4px); opacity: 1;   }
}

.wcb-chat-input-row {
  display: flex;
  align-items: stretch;
  border-top: 1px solid var(--wcb-border);
  background: #fff;
}
.wcb-chat-input {
  flex: 1;
  border: none;
  outline: none;
  resize: none;
  padding: 10px 12px;
  font: inherit;
  font-size: 13px;
  max-height: 100px;
  background: transparent;
  color: var(--wcb-fg);
}
.wcb-chat-send {
  background: var(--wcb-primary);
  color: #fff;
  border: none;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, opacity 0.15s ease;
}
.wcb-chat-send:hover:not(:disabled) { background: #0969da; }
.wcb-chat-send:disabled { opacity: 0.5; cursor: not-allowed; }

.wcb-chat-foot {
  padding: 6px 12px;
  font-size: 10.5px;
  color: var(--wcb-muted);
  text-align: center;
  background: #fafafa;
  border-top: 1px solid var(--wcb-border);
}

/* ----- Selected product card inside a slot ----- */

.wcb-selected {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 8px;
  background: #fafbff;
  border: 1px solid var(--wcb-border);
  border-radius: 10px;
}
.wcb-selected-img {
  width: 72px; height: 72px;
  object-fit: contain;
  background: #fff;
  border-radius: 8px;
  border: 1px solid var(--wcb-border);
}
.wcb-selected-img--ph { background: #f1f5f9; }
.wcb-selected-info { min-width: 0; }
.wcb-selected-name {
  display: inline-block;
  font-weight: 600;
  color: var(--wcb-fg);
  text-decoration: none;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wcb-selected-name:hover { text-decoration: underline; }
.wcb-selected-meta {
  display: flex; gap: 10px; align-items: center;
  margin-top: 3px;
  font-size: 12px;
  color: var(--wcb-muted);
}
.wcb-sku { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.wcb-selected-price {
  margin-top: 4px;
  display: flex; gap: 8px; align-items: baseline;
}
.wcb-price-current { font-weight: 700; }
.wcb-price-original {
  color: var(--wcb-muted);
  text-decoration: line-through;
  font-size: 13px;
}
.wcb-selected-actions {
  display: flex; gap: 6px; flex-direction: column; align-items: stretch;
}

/* Quantity stepper (RAM / storage / fans). Sits in the selected card body. */
.wcb-price-qty {
  color: var(--wcb-muted);
  font-size: 13px;
}
.wcb-qty-stepper {
  display: inline-flex;
  align-items: center;
  gap: 0;
  margin-top: 6px;
  border: 1px solid var(--wcb-border);
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  width: max-content;
}
.wcb-qty-btn {
  appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 6px 12px;
  color: var(--wcb-fg);
}
.wcb-qty-btn:hover { background: var(--wcb-soft, #f1f5f9); }
.wcb-qty-input {
  width: 44px;
  text-align: center;
  border: 0;
  border-left: 1px solid var(--wcb-border);
  border-right: 1px solid var(--wcb-border);
  padding: 6px 0;
  font: inherit;
  -moz-appearance: textfield;
}
.wcb-qty-input::-webkit-outer-spin-button,
.wcb-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* "+ Add another storage" button — sits between storage rows. */
.wcb-add-storage {
  appearance: none;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin: 6px 0 14px;
  padding: 10px 14px;
  background: #fff;
  border: 1px dashed var(--wcb-border);
  border-radius: 12px;
  color: var(--wcb-fg);
  cursor: pointer;
  font: inherit;
  font-weight: 600;
}
.wcb-add-storage:hover {
  border-style: solid;
  border-color: var(--wcb-primary, #0a84ff);
  color: var(--wcb-primary, #0a84ff);
}
.wcb-add-storage .wcb-choose-plus {
  font-size: 18px;
  line-height: 1;
}
.wcb-slot--extra .wcb-slot-extra-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 6px;
  border-radius: 4px;
  background: #e0f2fe;
  color: #075985;
  margin-left: 6px;
  vertical-align: middle;
}

/* Stock chips */
.wcb-stock {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  letter-spacing: 0.02em;
}
.wcb-stock-instock     { background: #dcfce7; color: #166534; }
.wcb-stock-outofstock  { background: #fee2e2; color: #991b1b; }
.wcb-stock-onbackorder { background: #fef3c7; color: #854d0e; }
.wcb-stock-unknown     { background: #f1f5f9; color: #475569; }

/* ----- Buttons used in picker / selected ----- */

.wcb-btn {
  appearance: none;
  border: 1px solid var(--wcb-border);
  background: #fff;
  color: var(--wcb-fg);
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.wcb-btn:hover:not(:disabled) { border-color: var(--wcb-primary); color: var(--wcb-primary); }
.wcb-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.wcb-btn-select { background: var(--wcb-primary); color: #fff; border-color: var(--wcb-primary); }
.wcb-btn-select:hover:not(:disabled) { background: #0969da; color: #fff; }
.wcb-btn-remove { color: #991b1b; border-color: #fecaca; }
.wcb-btn-remove:hover:not(:disabled) { background: #fee2e2; color: #991b1b; border-color: #fca5a5; }
.wcb-btn-ghost { background: transparent; }

.wcb-btn-cart {
  background: #ecfdf5;
  color: #166534;
  border-color: #bbf7d0;
}
.wcb-btn-cart:hover:not(:disabled) {
  background: #166534;
  color: #fff;
  border-color: #166534;
}

.wcb-cart-btn {
  background: #166534;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  margin-right: 8px;
  transition: background 0.15s ease, opacity 0.15s ease;
}
.wcb-cart-btn:hover:not(:disabled) { background: #14532d; }
.wcb-cart-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ----- Image-upload banner ----- */

.wcb-image-upload {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 14px;
  padding: 14px 18px;
  background: linear-gradient(120deg, #eef4ff 0%, #f5f3ff 100%);
  border: 1px dashed #c7dbff;
  border-radius: var(--wcb-radius);
  transition: border-color 0.2s ease, background 0.2s ease;
}
.wcb-image-upload--drag {
  border-color: var(--wcb-primary);
  background: linear-gradient(120deg, #dbeafe 0%, #ede9fe 100%);
}
.wcb-image-upload-text { flex: 1; min-width: 0; }
.wcb-image-upload-text strong { display: block; font-size: 14px; color: var(--wcb-fg); margin-bottom: 2px; }
.wcb-image-upload-text p     { margin: 0; font-size: 12.5px; color: var(--wcb-muted); }

.wcb-image-upload-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--wcb-primary);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, opacity 0.15s ease;
  flex-shrink: 0;
}
.wcb-image-upload-btn:hover:not(:disabled) { background: #0969da; }
.wcb-image-upload-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.wcb-image-upload-icon { font-size: 16px; line-height: 1; }
.wcb-image-upload--busy { opacity: 0.85; }

/* ----- Extraction summary modal ----- */

.wcb-extract-modal {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999998;
  padding: 20px;
  animation: wcb-fade 0.18s ease;
}
@keyframes wcb-fade { from { opacity: 0; } to { opacity: 1; } }
.wcb-extract-panel {
  background: #fff;
  border-radius: 14px;
  max-width: 680px;
  width: 100%;
  max-height: calc(100vh - 60px);
  overflow-y: auto;
  padding: 24px 26px 20px;
  position: relative;
  box-shadow: 0 30px 80px rgba(0,0,0,0.25);
}
.wcb-extract-close {
  position: absolute;
  top: 12px;
  right: 14px;
  background: transparent;
  border: none;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  color: var(--wcb-muted);
}
.wcb-extract-close:hover { color: var(--wcb-fg); }
.wcb-extract-title {
  margin: 0 30px 6px 0;
  font-size: 20px;
  font-weight: 700;
  color: var(--wcb-fg);
}
.wcb-extract-sub {
  margin: 0 0 14px;
  color: var(--wcb-muted);
  font-size: 13px;
}
.wcb-extract-h3 {
  margin: 16px 0 8px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--wcb-muted);
}
.wcb-extract-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.wcb-extract-item {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--wcb-border);
  border-radius: 10px;
  background: #fafbff;
}
.wcb-extract-item--unmatched { background: #fff7ed; border-color: #fed7aa; }
.wcb-extract-thumb {
  width: 56px; height: 56px;
  object-fit: contain;
  background: #fff;
  border-radius: 8px;
  border: 1px solid var(--wcb-border);
  flex-shrink: 0;
}
.wcb-extract-thumb--ph { background: #f1f5f9; }
.wcb-extract-info { flex: 1; min-width: 0; }
.wcb-extract-slot {
  font-size: 11px;
  font-weight: 700;
  color: var(--wcb-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.wcb-extract-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--wcb-fg);
  margin: 2px 0;
  word-break: break-word;
}
.wcb-extract-source {
  font-size: 12px;
  color: var(--wcb-muted);
  font-style: italic;
}
.wcb-extract-price {
  font-size: 13px;
  font-weight: 700;
  color: var(--wcb-fg);
  margin-top: 4px;
}
.wcb-extract-oos {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  background: #fee2e2;
  color: #991b1b;
  border-radius: 999px;
}

.wcb-extract-alts {
  margin-top: 8px;
  padding: 8px 10px;
  background: #fff;
  border: 1px solid var(--wcb-border);
  border-radius: 8px;
}
.wcb-extract-alts-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--wcb-muted);
  margin-bottom: 6px;
}
.wcb-extract-alts-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.wcb-extract-alt {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 6px;
  background: #fafbff;
  border: 1px solid var(--wcb-border);
  border-radius: 6px;
}
.wcb-extract-alt-thumb {
  width: 36px; height: 36px;
  object-fit: contain;
  background: #fff;
  border-radius: 4px;
  border: 1px solid var(--wcb-border);
  flex-shrink: 0;
}
.wcb-extract-alt-thumb--ph { background: #f1f5f9; }
.wcb-extract-alt-info { flex: 1; min-width: 0; }
.wcb-extract-alt-name {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--wcb-fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wcb-extract-alt-price {
  font-size: 11.5px;
  color: var(--wcb-muted);
}
.wcb-extract-alt-pick {
  padding: 5px 10px !important;
  font-size: 11.5px !important;
  flex-shrink: 0;
}

.wcb-extract-rfq-hint {
  margin: 10px 0 0;
  padding: 10px 12px;
  background: #fef3c7;
  border-radius: 8px;
  font-size: 12px;
  color: #854d0e;
}
.wcb-extract-empty {
  padding: 14px;
  text-align: center;
  color: var(--wcb-muted);
  background: #f8fafc;
  border-radius: 8px;
}
.wcb-extract-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 18px;
}

@media (max-width: 600px) {
  .wcb-image-upload { flex-direction: column; align-items: stretch; text-align: left; }
  .wcb-image-upload-btn { justify-content: center; }
  .wcb-extract-panel { padding: 18px 16px; }
}

/* ----- Toast notification ----- */

.wcb-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: #1f2937;
  color: #fff;
  padding: 10px 14px 10px 16px;
  border-radius: 10px;
  font-size: 13.5px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.18);
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 99999;
  max-width: 90vw;
  animation: wcb-toast-pop 0.2s ease;
}
@keyframes wcb-toast-pop {
  from { opacity: 0; transform: translate(-50%, 8px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
.wcb-toast--success { background: #14532d; }
.wcb-toast--error   { background: #991b1b; }
.wcb-toast--info    { background: #1f2937; }
.wcb-toast-link {
  color: #fff;
  text-decoration: underline;
  font-weight: 600;
}
.wcb-toast-link:hover { color: #fff; }
.wcb-toast-close {
  background: transparent;
  border: none;
  color: #fff;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
  margin-left: 4px;
  opacity: 0.7;
}
.wcb-toast-close:hover { opacity: 1; }

/* ----- Picker (expanded under a slot) ----- */

.wcb-picker {
  margin-top: 14px;
  padding: 14px;
  background: #fafbff;
  border: 1px solid var(--wcb-border);
  border-radius: 10px;
}
.wcb-picker-toolbar {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.wcb-picker-search {
  flex: 1;
  min-width: 200px;
  padding: 7px 10px;
  border: 1px solid var(--wcb-border);
  border-radius: 6px;
  font-size: 14px;
  background: #fff;
}
.wcb-picker-search:focus { outline: none; border-color: var(--wcb-primary); }
/* Match the Force-Compatibility chip so customers actually see the OOS
   toggle and understand the two filters AND-gate. */
.wcb-oos-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--wcb-fg);
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: 999px;
  padding: 5px 12px 5px 9px;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.wcb-oos-toggle:hover { background: #ffedd5; border-color: #fdba74; }
.wcb-oos-toggle input { accent-color: #c2410c; }

/* Cooler-only Air / Liquid / All segmented control. Compact pill row
   that sits next to the Force-Compat chip. */
.wcb-cooler-seg {
  display: inline-flex;
  border: 1px solid var(--wcb-border);
  border-radius: 999px;
  background: #f8fafc;
  overflow: hidden;
}
.wcb-cooler-seg-btn {
  background: transparent;
  border: 0;
  padding: 5px 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--wcb-muted);
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s ease, color 0.15s ease;
}
.wcb-cooler-seg-btn + .wcb-cooler-seg-btn { border-left: 1px solid var(--wcb-border); }
.wcb-cooler-seg-btn:hover { color: var(--wcb-fg); }
.wcb-cooler-seg-btn.is-active {
  background: var(--wcb-primary);
  color: #fff;
}
.wcb-compat-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--wcb-fg);
  background: #eef4ff;
  border: 1px solid #c7dbff;
  border-radius: 999px;
  padding: 5px 12px 5px 9px;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.wcb-compat-toggle:hover { background: #e1ecff; border-color: #a8c4ff; }
.wcb-compat-toggle input { accent-color: var(--wcb-primary); }

.wcb-compat-hidden {
  display: none;
  margin: -4px 0 8px;
  padding: 6px 10px;
  font-size: 12px;
  color: #854d0e;
  background: #fef3c7;
  border-radius: 6px;
}
.wcb-compat-hidden.is-visible { display: block; }
.wcb-picker-close {
  background: transparent;
  border: none;
  font-size: 22px;
  line-height: 1;
  width: 32px; height: 32px;
  border-radius: 6px;
  cursor: pointer;
  color: var(--wcb-muted);
}
.wcb-picker-close:hover { background: #f1f5f9; color: var(--wcb-fg); }

.wcb-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
  min-height: 120px;
}
@media (max-width: 760px) {
  /* Force two cards per row on mobile — single-column made it look
     like there was only one option per slot, customers weren't
     scrolling for more. */
  .wcb-picker-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .wcb-card { padding: 8px; gap: 6px; }
  .wcb-card-name { font-size: 12px; -webkit-line-clamp: 2; }
  .wcb-card-price { font-size: 13px; }
}

.wcb-card {
  background: #fff;
  border: 1px solid var(--wcb-border);
  border-radius: 10px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  cursor: grab;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.wcb-card:hover { border-color: var(--wcb-primary); box-shadow: 0 2px 10px rgba(10, 132, 255, 0.08); }
.wcb-card--dragging { opacity: 0.55; }

.wcb-card-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: #f8fafc;
  border-radius: 8px;
}
.wcb-card-img--ph { background: #f1f5f9; }
.wcb-card-body { flex: 1; min-height: 0; }
.wcb-card-name {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--wcb-fg);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
}
.wcb-card-meta { display: flex; gap: 8px; align-items: center; margin-top: 4px; }
.wcb-card-price { display: flex; gap: 6px; align-items: baseline; margin-top: 4px; font-weight: 700; }

.wcb-card-actions {
  display: flex;
  gap: 6px;
  justify-content: space-between;
  align-items: center;
}
.wcb-card-view {
  font-size: 12px;
  color: var(--wcb-muted);
  text-decoration: none;
}
.wcb-card-view:hover { color: var(--wcb-primary); text-decoration: underline; }

.wcb-picker-pager {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid var(--wcb-border);
}
.wcb-page-info { font-size: 13px; color: var(--wcb-muted); }

.wcb-loading, .wcb-empty, .wcb-error {
  grid-column: 1 / -1;
  padding: 36px 14px;
  text-align: center;
  color: var(--wcb-muted);
  font-size: 14px;
}
.wcb-error { color: #991b1b; background: #fef2f2; border-radius: 8px; }

/* ----- Drag-and-drop visual feedback on the slot drop zone ----- */

.wcb-slot-body.wcb-drop-active .wcb-slot-choose,
.wcb-slot-body.wcb-drop-active .wcb-selected {
  outline: 2px dashed var(--wcb-primary);
  outline-offset: 4px;
}

/* ----- Compatibility panel ----- */

.wcb-compat-host {
  background: var(--wcb-card);
  border: 1px solid var(--wcb-border);
  border-radius: var(--wcb-radius);
  padding: 14px 18px;
  box-shadow: var(--wcb-shadow);
  flex: 0 0 auto;
}
.wcb-compat-placeholder {
  color: var(--wcb-muted);
  font-size: 13px;
  text-align: center;
  padding: 28px 8px;
}
.wcb-compat-placeholder strong {
  display: block;
  font-size: 14px;
  color: var(--wcb-fg);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
}
.wcb-compat-placeholder p { margin: 0; }

.wcb-compat {
  display: none;
}
.wcb-compat--visible { display: block; }
.wcb-compat--loading { opacity: 0.7; }
.wcb-compat-title {
  margin: 0 0 10px;
  font-size: 14px;
  color: var(--wcb-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
}
.wcb-compat-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
}
.wcb-compat-row {
  display: grid;
  grid-template-columns: 24px minmax(180px, auto) 1fr;
  gap: 10px;
  align-items: baseline;
  font-size: 13px;
  padding: 6px 8px;
  border-radius: 8px;
  background: #f8fafc;
}
.wcb-compat-row.wcb-compat-pass    { background: #ecfdf5; }
.wcb-compat-row.wcb-compat-fail    { background: #fef2f2; }
.wcb-compat-row.wcb-compat-unknown { background: #fffbeb; }
.wcb-compat-row.wcb-compat-info    { background: #eff6ff; }

.wcb-compat-icon {
  width: 22px; height: 22px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700;
  font-size: 12px;
  color: #fff;
  background: #94a3b8;
}
.wcb-compat-pass    .wcb-compat-icon { background: var(--wcb-ok); }
.wcb-compat-fail    .wcb-compat-icon { background: var(--wcb-err); }
.wcb-compat-unknown .wcb-compat-icon { background: var(--wcb-warn); }
.wcb-compat-info    .wcb-compat-icon { background: #3b82f6; }

.wcb-compat-check { font-weight: 600; }
.wcb-compat-detail { color: var(--wcb-muted); }
@media (max-width: 700px) {
  .wcb-compat-row { grid-template-columns: 22px 1fr; }
  .wcb-compat-detail { grid-column: 2 / -1; font-size: 12px; }
}

.wcb-footer {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--wcb-border);
}
.wcb-footer-note {
  color: var(--wcb-muted);
  font-size: 12px;
  margin: 0;
}

/* ----- Best-Price Offer modal ----- */

/* The modal is appended to <body>, outside the .woaichat-builder root that
 * owns the CSS variable scope. Re-declare the vars here so descendant rules
 * (.wcb-btn-select { background: var(--wcb-primary) }, etc.) resolve — without
 * this, the Submit and Done buttons become transparent until :hover replaces
 * the var-based background with a literal colour. */
.wcb-offer-modal {
  --wcb-primary: #0a84ff;
  --wcb-fg: #111827;
  --wcb-muted: #6b7280;
  --wcb-bg: #f8fafc;
  --wcb-card: #ffffff;
  --wcb-border: #e5e7eb;
  --wcb-ok: #16a34a;
  --wcb-err: #dc2626;

  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999999;
  padding: 20px;
  animation: wcb-fade-in 0.15s ease-out;
}
@keyframes wcb-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.wcb-offer-panel {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.25);
  width: 100%;
  max-width: 460px;
  padding: 28px 28px 22px;
  position: relative;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif;
  color: #111827;
}

.wcb-offer-close {
  position: absolute;
  top: 10px; right: 12px;
  background: transparent;
  border: none;
  font-size: 26px;
  line-height: 1;
  width: 34px; height: 34px;
  border-radius: 8px;
  color: #6b7280;
  cursor: pointer;
}
.wcb-offer-close:hover { background: #f1f5f9; color: #111827; }

.wcb-offer-title {
  margin: 0 0 6px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.wcb-offer-sub {
  margin: 0 0 16px;
  color: #6b7280;
  font-size: 14px;
}

.wcb-offer-summary {
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 18px;
}
.wcb-offer-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  font-size: 14px;
  color: #374151;
}
.wcb-offer-summary-row + .wcb-offer-summary-row { margin-top: 4px; }
.wcb-offer-summary-row strong { font-size: 16px; color: #111827; }
.wcb-offer-summary-row--discount { color: #047857; }
.wcb-offer-summary-row--discount strong { color: #047857; font-size: 15px; }
.wcb-offer-summary-row--final {
  margin-top: 6px !important;
  padding-top: 6px;
  border-top: 1px dashed #e5e7eb;
  font-weight: 600;
}
.wcb-offer-summary-row--final strong { font-size: 18px; }

.wcb-offer-form { display: flex; flex-direction: column; gap: 12px; }

.wcb-offer-field { display: flex; flex-direction: column; gap: 4px; }
.wcb-offer-label { font-size: 13px; font-weight: 600; color: #374151; }
.wcb-offer-field input,
.wcb-offer-field textarea {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  color: #111827;
  background: #fff;
  box-sizing: border-box;
}
.wcb-offer-field input:focus,
.wcb-offer-field textarea:focus {
  outline: none;
  border-color: var(--wcb-primary, #0a84ff);
  box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.15);
}
.wcb-offer-field textarea { resize: vertical; min-height: 70px; }

.wcb-offer-err {
  color: #dc2626;
  font-size: 12px;
  min-height: 14px;
}
.wcb-offer-global-err {
  color: #dc2626;
  background: #fef2f2;
  border-radius: 8px;
  font-size: 13px;
  padding: 0;
}
.wcb-offer-global-err:not(:empty) { padding: 8px 12px; margin-top: 4px; }

.wcb-offer-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 8px;
}
.wcb-offer-actions .wcb-btn { padding: 9px 18px; font-size: 14px; }

/* Success state */
.wcb-offer-check {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: #dcfce7;
  color: #166534;
  display: flex; align-items: center; justify-content: center;
  font-size: 30px; font-weight: 700;
  margin: 6px auto 14px;
}
.wcb-offer-ref {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 14px;
  margin: 10px 0 18px;
}
.wcb-offer-ref-label {
  font-size: 11px;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.wcb-offer-ref-code {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #111827;
}
.wcb-offer-panel > .wcb-btn-select {
  align-self: stretch;
  padding: 10px 18px;
  font-size: 14px;
}

/* Success-state action buttons sit stacked, full-width. */
.wcb-offer-whatsapp {
  display: block;
  width: 100%;
  text-align: center;
  text-decoration: none;
  background: #25d366;
  color: #fff !important;
  border-color: #25d366;
  padding: 11px 18px;
  font-size: 15px;
  font-weight: 600;
  border-radius: 8px;
  box-sizing: border-box;
}
.wcb-offer-whatsapp:hover { background: #1ebe5b; border-color: #1ebe5b; }
.wcb-offer-done {
  display: block;
  width: 100%;
  text-align: center;
  margin-top: 8px;
  padding: 9px 18px;
  font-size: 14px;
  box-sizing: border-box;
}

/* RTL — minor mirror of close button position. The form itself is
 * direction-neutral because labels render above each input. */
[dir="rtl"] .wcb-offer-close { right: auto; left: 12px; }

@media (max-width: 500px) {
  .wcb-offer-panel { padding: 22px 18px 18px; border-radius: 12px; }
  .wcb-offer-title { font-size: 19px; }
}

/* CTA button shortcode */
.woaichat-builder-cta {
  display: inline-block;
  padding: 10px 22px;
  background: #0a84ff;
  color: #fff !important;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s ease;
}
.woaichat-builder-cta:hover { background: #0969da; }

/* Tablet & mobile — collapse to a single column with the slots first (so the
 * picker stays the primary focus on smaller screens), then chat / compat /
 * saves below it. Right column un-sticks since there's no left column to
 * pin against. */
@media (max-width: 1100px) {
  .wcb-body {
    grid-template-columns: 1fr;
  }
  .wcb-side {
    position: static;
    max-height: none;
    overflow: visible;
  }
  .wcb-sidebar { height: 460px; }
}

@media (max-width: 700px) {
  .wcb-sidebar { height: 380px; }
  .wcb-subtotal { border-left: none; padding: 6px 0; align-items: flex-start; }
  .wcb-summary { width: 100%; }
}

/* ----- Saved Builds (right column, bottom) ----- */

.wcb-saves {
  background: var(--wcb-card);
  border: 1px solid var(--wcb-border);
  border-radius: var(--wcb-radius);
  padding: 14px 14px 12px;
  box-shadow: var(--wcb-shadow);
  flex: 0 0 auto;
}
.wcb-saves-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}
.wcb-saves-title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--wcb-fg);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.wcb-saves-new-btn {
  background: var(--wcb-primary);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease;
}
.wcb-saves-new-btn:hover { background: #0969da; }

.wcb-saves-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: #f8fafc;
  border: 1px solid var(--wcb-border);
  border-radius: 8px;
  padding: 10px;
  margin-bottom: 12px;
}
.wcb-saves-form input,
.wcb-saves-form textarea {
  border: 1px solid var(--wcb-border);
  border-radius: 6px;
  padding: 7px 9px;
  font: inherit;
  font-size: 13px;
  background: #fff;
  color: var(--wcb-fg);
  resize: vertical;
}
.wcb-saves-form input:focus,
.wcb-saves-form textarea:focus { outline: none; border-color: var(--wcb-primary); }
.wcb-saves-form-actions {
  display: flex;
  gap: 6px;
}
.wcb-saves-form-actions .wcb-btn { flex: 1; padding: 6px 10px; }
.wcb-saves-form-error {
  display: none;
  font-size: 12px;
  color: #991b1b;
  background: #fef2f2;
  padding: 5px 8px;
  border-radius: 4px;
}

.wcb-saves-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.wcb-save-item {
  position: relative;
  border: 1px solid var(--wcb-border);
  border-radius: 8px;
  background: #fff;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.wcb-save-item:hover { border-color: var(--wcb-primary); background: #fafbff; }

.wcb-save-load {
  width: 100%;
  background: transparent;
  border: none;
  text-align: left;
  padding: 10px 30px 10px 12px;
  cursor: pointer;
  color: var(--wcb-fg);
  font: inherit;
}
.wcb-save-name {
  font-weight: 600;
  font-size: 13.5px;
  line-height: 1.3;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wcb-save-desc {
  font-size: 12px;
  color: var(--wcb-muted);
  margin-bottom: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.wcb-save-meta {
  display: flex;
  gap: 10px;
  align-items: baseline;
  font-size: 12px;
  color: var(--wcb-muted);
}
.wcb-save-total {
  margin-left: auto;
  font-weight: 700;
  color: var(--wcb-fg);
}
.wcb-save-date {
  font-size: 11px;
  color: var(--wcb-muted);
  margin-top: 3px;
}

.wcb-save-delete {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--wcb-muted);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.wcb-save-item:hover .wcb-save-delete,
.wcb-save-delete:focus { opacity: 1; }
.wcb-save-delete:hover { background: #fee2e2; color: #991b1b; }

.wcb-saves-empty {
  font-size: 12px;
  color: var(--wcb-muted);
  text-align: center;
  padding: 18px 6px;
  border: 1px dashed var(--wcb-border);
  border-radius: 8px;
}

.wcb-saves-userline {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--wcb-border);
  font-size: 11px;
  color: var(--wcb-muted);
}
.wcb-saves-login {
  margin-top: 12px;
  padding: 10px 12px;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: 8px;
  font-size: 12px;
  color: #7c2d12;
  line-height: 1.45;
}
.wcb-saves-login strong { font-size: 12.5px; }
.wcb-saves-login p { margin: 4px 0 8px; }
.wcb-saves-login-btn {
  display: inline-block;
  background: #c2410c;
  color: #fff !important;
  text-decoration: none;
  padding: 5px 12px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 12px;
}
.wcb-saves-login-btn:hover { background: #9a3412; }

/* ============================================================
   Featured Builds (admin presets)
   ============================================================ */
.wcb-presets {
  margin: 18px 0 22px;
  padding: 18px 20px;
  background: #fff;
  border: 1px solid var(--wcb-border);
  border-radius: 14px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}
.wcb-presets-head { margin-bottom: 14px; }
.wcb-presets-title {
  margin: 0 0 4px;
  font-size: 18px;
  font-weight: 700;
  color: var(--wcb-fg);
}
.wcb-presets-sub {
  margin: 0;
  font-size: 13px;
  color: var(--wcb-muted);
  line-height: 1.5;
}
.wcb-presets-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}
.wcb-preset-card {
  display: flex;
  flex-direction: column;
  text-align: left;
  padding: 0;
  background: #f8fafc;
  border: 1px solid var(--wcb-border);
  border-radius: 12px;
  cursor: pointer;
  overflow: hidden;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  font-family: inherit;
  color: inherit;
}
.wcb-preset-card:hover,
.wcb-preset-card:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.10);
  border-color: var(--wcb-primary);
  outline: none;
}
.wcb-preset-card-img {
  width: 100%;
  aspect-ratio: 16 / 10;
  /* `contain` keeps the case product photo whole — no aggressive crop that
     hides the side panels or the top of a tall tower. The neutral
     background fills the letterbox area. */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-color: #f8fafc;
  border-bottom: 1px solid var(--wcb-border);
}
.wcb-preset-card-img--ph { background: linear-gradient(135deg, #cbd5e1, #e2e8f0); }
.wcb-preset-card-body {
  padding: 12px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.wcb-preset-card-title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--wcb-fg);
  line-height: 1.3;
}
.wcb-preset-card-meta {
  font-size: 12px;
  color: var(--wcb-muted);
}
.wcb-preset-card-oos { color: #b45309; }
.wcb-preset-card-prices {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.wcb-preset-card-ref {
  font-size: 13px;
  color: var(--wcb-muted);
  text-decoration: line-through;
}
.wcb-preset-card-final {
  font-size: 18px;
  font-weight: 800;
  color: var(--wcb-fg);
}
.wcb-preset-card-save {
  margin-left: auto;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  color: #166534;
  background: #dcfce7;
  border-radius: 999px;
  padding: 3px 9px;
  /* unicode-bidi: isolate keeps the surrounding LTR layout from being
     reordered when the OMR currency symbol "ر.ع." pulls bidi neutrals
     (·, %) into the wrong slot. */
  unicode-bidi: isolate;
}
.wcb-preset-card-save-amount,
.wcb-preset-card-save-pct {
  unicode-bidi: isolate;
  white-space: nowrap;
}
.wcb-preset-card-save-pct::before {
  content: "·";
  margin-right: 6px;
  opacity: 0.55;
}
.wcb-preset-card-save-amount:first-child + .wcb-preset-card-save-pct::before { /* no-op, retained for future selector tweaks */ }
.wcb-preset-card-cta {
  margin-top: 4px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--wcb-primary);
}
.wcb-presets-active:not([hidden]) {
  margin-top: 14px;
  padding: 10px 14px;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: #065f46;
}
.wcb-presets-active-label { font-weight: 600; }
.wcb-presets-active-name  { font-weight: 700; }
.wcb-presets-clear {
  margin-left: auto;
  background: transparent;
  border: 1px solid #047857;
  color: #047857;
  padding: 3px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.wcb-presets-clear:hover { background: #047857; color: #fff; }

/* Header subtotal extension — discount + final rows */
.wcb-discount-row,
.wcb-final-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 4px;
  padding: 0 2px;
}
.wcb-discount-label,
.wcb-final-label {
  font-size: 12px;
  color: var(--wcb-muted);
}
.wcb-discount-value {
  font-size: 13px;
  font-weight: 700;
  color: #047857;
}
.wcb-final-row {
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px dashed var(--wcb-border);
}
.wcb-final-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--wcb-fg);
}
.wcb-final-value {
  font-size: 18px;
  font-weight: 800;
  color: var(--wcb-fg);
}

/* ============================================================
   Hero banner mode (replaces the text hero with the SVG banner)
   ============================================================ */
.wcb-header--banner {
  display: block;          /* stop the flex row — banner is full width */
  padding: 0;
  border-bottom: 0;
  margin-bottom: 18px;
}
.wcb-hero--banner {
  max-width: none;         /* override the 720px cap on .wcb-hero */
  margin: 0 0 14px;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 6px 22px rgba(15, 23, 42, 0.08);
  background: #0b0f17;     /* matches the SVG's bg gradient start so aspect-ratio gaps don't flash white */
  line-height: 0;          /* kill the inline-image whitespace under the SVG */
}
.wcb-hero-banner-img {
  display: block;
  width: 100%;
  height: auto;
}
@media (max-width: 700px) {
  .wcb-hero--banner { border-radius: 10px; }
}

/* Summary is a single horizontal bar below the banner. It must NEVER wrap on
   desktop — the offer button stays anchored to the right while the status
   pill grows into whatever horizontal space is available (long compatibility
   messages, multi-issue text, etc.). Discount + final rows are hidden via
   their `hidden` attr unless a preset is active; when they are hidden, the
   status pill takes their freed space because of `flex: 1 1 auto`. */
.wcb-summary--bar {
  flex-wrap: nowrap;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid var(--wcb-border);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}
.wcb-summary--bar .wcb-status {
  flex: 1 1 auto;          /* take all remaining horizontal space */
  min-width: 0;            /* allow the pill to shrink below content size */
  max-width: 100%;
  white-space: normal;     /* let long compat messages wrap inside the pill */
  word-break: break-word;
  align-items: flex-start;
  line-height: 1.35;
}
.wcb-summary--bar .wcb-summary-numbers {
  display: flex;
  flex-wrap: nowrap;
  gap: 16px;
  align-items: center;
  flex: 0 0 auto;          /* size to content, never shrink the price labels */
}
.wcb-summary--bar .wcb-offer-btn {
  flex: 0 0 auto;
  white-space: nowrap;     /* "Get Best Price Offer" never wraps mid-button */
}
/* `:not([hidden])` matters here — without it, this class rule (specificity
   0,0,2,0) outranks the user-agent `[hidden] { display: none }` (0,0,1,0)
   and the discount + You-pay rows stay visible even after JS sets the
   hidden attribute. Same trick used on .wcb-presets-active below. */
.wcb-summary--bar .wcb-discount-row:not([hidden]),
.wcb-summary--bar .wcb-final-row:not([hidden]) {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin: 0;
  padding: 0;
  border: 0;
}
.wcb-summary--bar .wcb-discount-label,
.wcb-summary--bar .wcb-final-label {
  font-size: 11px;
  color: var(--wcb-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.wcb-summary--bar .wcb-discount-value { font-size: 16px; font-weight: 700; color: #047857; }
.wcb-summary--bar .wcb-final-value    { font-size: 22px; font-weight: 800; color: var(--wcb-fg); }

@media (max-width: 760px) {
  .wcb-summary--bar { flex-wrap: wrap; padding: 10px; gap: 10px; }
  .wcb-summary--bar .wcb-status { flex-basis: 100%; }
  .wcb-summary--bar .wcb-summary-numbers { flex-basis: 100%; gap: 10px; justify-content: space-between; }
  /* Cart + offer share a row, half-and-half. Compact padding/font so
     they fit comfortably with the bar pinned. */
  .wcb-summary--bar .wcb-cart-btn,
  .wcb-summary--bar .wcb-offer-btn {
    flex: 1 1 calc(50% - 5px);
    width: auto;
    min-width: 0;
    padding: 9px 10px;
    font-size: 13px;
  }
  .wcb-summary--bar .wcb-offer-btn .wcb-offer-btn-en { font-size: 13px; line-height: 1.1; }
  .wcb-summary--bar .wcb-offer-btn .wcb-offer-btn-ar { font-size: 11px; line-height: 1.1; }
  /* Reset on its own line below the action pair — full width but
     compact, doesn't dominate the sticky strip. */
  .wcb-summary--bar .wcb-reset-btn {
    flex-basis: 100%;
    padding: 6px;
    font-size: 12px;
  }
}

/* ============================================================
   Mode tabs (Featured Build / Build Your Own / From a Photo)
   These are *alternative* entry points, not sequential steps —
   so no numbered chips, no arrows between them. The eyebrow line
   makes the "alternatives" framing explicit for the customer.
   ============================================================ */
.wcb-tabs {
  margin: 0 0 18px;
  background: #f1f5f9;
  border: 1px solid var(--wcb-border);
  border-radius: 14px;
  padding: 10px 12px 8px;
}
.wcb-tabs-eyebrow {
  margin: 0 4px 8px;
  font-size: 12px;
  color: var(--wcb-muted);
  letter-spacing: 0.01em;
}
.wcb-tabs-row {
  display: flex;
  gap: 6px;
}
.wcb-tab {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  background: transparent;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: var(--wcb-muted);
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.wcb-tab:hover { background: #e2e8f0; color: var(--wcb-fg); }
.wcb-tab:focus-visible {
  outline: 2px solid var(--wcb-primary);
  outline-offset: 1px;
}
.wcb-tab.is-active {
  background: #fff;
  color: var(--wcb-fg);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.10);
}
.wcb-tab-icon {
  flex-shrink: 0;
  display: inline-flex;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: #e2e8f0;
  color: var(--wcb-muted);
}
.wcb-tab.is-active .wcb-tab-icon {
  background: rgba(10, 132, 255, 0.12);
  color: var(--wcb-primary);
}
.wcb-tab-text { display: flex; flex-direction: column; min-width: 0; }
.wcb-tab-label {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
}
.wcb-tab-hint {
  font-size: 12px;
  color: var(--wcb-muted);
  line-height: 1.35;
  margin-top: 2px;
}
.wcb-tab.is-active .wcb-tab-hint { color: var(--wcb-fg); opacity: 0.72; }

@media (max-width: 720px) {
  .wcb-tabs-row { flex-direction: column; gap: 4px; }
  .wcb-tabs-eyebrow { margin-bottom: 6px; }
  .wcb-tab { padding: 10px 12px; }
  .wcb-tab-hint { display: none; }
}

/* Visibility gating per active tab. Slot picker is always visible — the tabs
   only switch which "entry-point" UI is shown above/around it. */
.woaichat-builder[data-active-tab="picker"] [data-wcb-presets],
.woaichat-builder[data-active-tab="image"]   [data-wcb-presets]      { display: none !important; }

.woaichat-builder[data-active-tab="picker"]  [data-wcb-image-upload],
.woaichat-builder[data-active-tab="presets"] [data-wcb-image-upload] { display: none !important; }

/* ============================================================
   Reset button — clears every selection and snaps back to the
   Build Your Own tab. Subtle ghost style so it doesn't compete
   with "Add full build to cart" / "Get Best Price Offer".
   ============================================================ */
.wcb-reset-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 10px;
  background: transparent;
  border: 1px solid var(--wcb-border);
  border-radius: 8px;
  color: var(--wcb-muted);
  font-size: 12.5px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.wcb-reset-btn:hover {
  background: #fef2f2;
  color: #b32d2e;
  border-color: #fecaca;
}
.wcb-reset-btn:focus-visible {
  outline: 2px solid var(--wcb-primary);
  outline-offset: 1px;
}
.wcb-reset-btn svg { display: block; }

@media (max-width: 760px) {
  .wcb-reset-btn { width: 100%; justify-content: center; padding: 8px; }
}

/* ============================================================
   Image-extract modal: auto-proposed alternative badge,
   reasoning line, and soft-compatibility warnings.
   ============================================================ */
.wcb-extract-auto {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  background: #ddd6fe;
  color: #5b21b6;
  font-size: 10px;
  font-weight: 700;
  border-radius: 999px;
  letter-spacing: 0.02em;
  vertical-align: middle;
}
.wcb-extract-reason {
  margin-top: 3px;
  font-size: 12px;
  font-style: italic;
  color: #475569;
  line-height: 1.4;
}
.wcb-extract-warns {
  margin: 6px 0 0;
  padding: 8px 10px 8px 22px;
  background: #fef3c7;
  border: 1px solid #fde68a;
  border-radius: 6px;
  font-size: 12px;
  color: #854d0e;
  line-height: 1.45;
}
.wcb-extract-warns li { margin: 0; }
.wcb-extract-warns li + li { margin-top: 3px; }
.wcb-extract-warns strong { color: #713f12; }

/* Bilingual "Get Best Price Offer" — English on top, Arabic underneath at
   a smaller size. Two-line stack reads naturally and keeps the button's
   horizontal footprint tight inside the no-wrap summary bar. */
.wcb-offer-btn .wcb-offer-btn-en {
  display: block;
  line-height: 1.15;
}
.wcb-offer-btn .wcb-offer-btn-ar {
  display: block;
  margin-top: 2px;
  font-size: 0.82em;
  font-weight: 500;
  opacity: 0.92;
  line-height: 1.15;
}

/* The visible upload card was collapsed into the "From a Photo or Quote"
   tab in v0.23.3. We keep the hidden <input type="file"> in the DOM so
   the JS can programmatically open the OS file picker, but everything
   else on the card is suppressed. */
.wcb-image-upload { display: none !important; }

/* Drag-over state on the image tab. The dashed outline + tinted background
   make it obvious the tab will accept a file drop. */
.wcb-tab[data-wcb-tab="image"].is-drag-over {
  background: rgba(10, 132, 255, 0.08);
  outline: 2px dashed var(--wcb-primary);
  outline-offset: -4px;
  color: var(--wcb-fg);
}
.wcb-tab[data-wcb-tab="image"].is-drag-over .wcb-tab-icon {
  background: var(--wcb-primary);
  color: #fff;
}
.wcb-tab[data-wcb-tab="image"].is-drag-over .wcb-tab-hint { opacity: 1; }

/* ============================================================
   Process flow diagram — replaces the cinematic SVG banner.
   Three numbered steps + arrow connectors, each with bilingual
   English + Arabic labels. Stacks vertically on narrow screens.
   ============================================================ */
.wcb-process {
  list-style: none;
  margin: 0 0 14px;
  padding: 18px 22px;
  background: linear-gradient(135deg, #0e1525 0%, #1e293b 60%, #0e1525 100%);
  border: 1px solid var(--wcb-border);
  border-radius: 14px;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 10px;
  color: #e2e8f0;
}
.wcb-process-step {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.wcb-process-num {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--wcb-primary);
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.01em;
  box-shadow: 0 0 0 4px rgba(10, 132, 255, 0.18);
}
.wcb-process-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.wcb-process-en {
  font-size: 14px;
  font-weight: 700;
  color: #f8fafc;
  line-height: 1.25;
}
.wcb-process-ar {
  font-size: 13px;
  font-weight: 600;
  color: #cbd5e1;
  line-height: 1.25;
  text-align: left;
}
.wcb-process-arrow {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  color: #64748b;
}

@media (max-width: 760px) {
  .wcb-process {
    flex-direction: column;
    align-items: stretch;
    padding: 14px 16px;
  }
  .wcb-process-arrow {
    transform: rotate(90deg);
    margin: 2px 0 2px 16px;
  }
}

/* ============================================================
   Mobile sticky summary bar
   On narrow viewports (≤ 760px), the summary stays pinned to the
   top of the viewport once the user scrolls past it. Goes back to
   its normal in-flow position when the customer scrolls back up.
   The bar already lives outside <header> so the sticky bound is
   the whole builder page, not just the header's height.
   ============================================================ */
@media (max-width: 760px) {
  .wcb-summary--bar {
    position: sticky;
    top: 0;
    z-index: 50;
    margin: 0 -16px 14px;             /* extend to the page edges so the
                                         elevated bar covers full width */
    padding: 8px 16px;                /* tighter than the desktop 12 14 */
    gap: 8px;
    border-radius: 0 0 12px 12px;     /* round only the bottom corners
                                         when stuck (visually "lifts" off) */
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.12);
  }
  /* First-load empty state: collapse the summary entirely on mobile so a
     fresh visitor sees the process flow + tabs without a tall empty
     pricing block hogging the viewport. The bar reappears as soon as
     they pick a part, load a preset, or extract a build from an image
     (updateOfferButton sets/clears the class on every state change). */
  .wcb-summary--bar.wcb-summary--empty { display: none; }
  /* Tighter status pill — long compat messages still wrap inside it,
     but everyday text doesn't waste a full row. */
  .wcb-summary--bar .wcb-status { padding: 4px 10px; font-size: 12px; }
  /* Compact action buttons. */
  .wcb-summary--bar .wcb-cart-btn,
  .wcb-summary--bar .wcb-offer-btn { padding: 7px 8px; }
  .wcb-summary--bar .wcb-reset-btn { padding: 5px; font-size: 11px; }
}

/* ============================================================
   Add-on sections: service (installation) + freebies
   Live at the BOTTOM of the slots column, after the last slot
   card. Visually distinct from the regular slot cards so the
   customer reads them as optional extras, not as parts they
   need to pick.
   ============================================================ */
.wcb-addon {
  background: #fff;
  border: 1px solid var(--wcb-border);
  border-radius: var(--wcb-radius);
  padding: 16px 18px;
  box-shadow: var(--wcb-shadow);
  margin-top: 4px;
}
.wcb-addon-head {
  margin-bottom: 12px;
}
.wcb-addon-title {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 700;
}
.wcb-addon-sub {
  margin: 0;
  font-size: 12.5px;
  color: var(--wcb-muted);
  line-height: 1.45;
}
.wcb-addon-disclaimer {
  margin: 8px 0 0;
  padding: 8px 10px;
  font-size: 12px;
  line-height: 1.45;
  color: #854d0e;
  background: #fef3c7;
  border: 1px solid #fde68a;
  border-radius: 6px;
}

/* ---- Service card ---- */
.wcb-addon-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 12px;
  background: #f8fafc;
  border: 1px solid var(--wcb-border);
  border-radius: 10px;
}
.wcb-addon-thumb {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 8px;
  background: #f1f5f9;
  flex-shrink: 0;
}
.wcb-addon-thumb--ph { background: #f1f5f9; }
.wcb-addon-info {
  flex: 1;
  min-width: 0;
}
.wcb-addon-name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--wcb-fg);
  line-height: 1.3;
}
.wcb-addon-price {
  font-size: 13px;
  font-weight: 700;
  color: var(--wcb-fg);
  margin-top: 2px;
}
.wcb-addon-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: #fff;
  border: 1px solid var(--wcb-border);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.wcb-addon-toggle:hover { background: #f1f5f9; }
.wcb-addon-toggle input { accent-color: var(--wcb-primary); }

/* ---- Freebies grid ---- */
.wcb-addon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
}
.wcb-addon-empty {
  margin: 0;
  font-size: 12.5px;
  color: var(--wcb-muted);
  font-style: italic;
}
.wcb-freebie-card {
  display: flex;
  flex-direction: column;
  text-align: left;
  padding: 0;
  background: #fff;
  border: 1px solid var(--wcb-border);
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  font-family: inherit;
  color: inherit;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.wcb-freebie-card:hover,
.wcb-freebie-card:focus-visible {
  border-color: var(--wcb-primary);
  box-shadow: 0 4px 14px rgba(10, 132, 255, 0.10);
  outline: none;
  transform: translateY(-1px);
}
.wcb-freebie-card.is-selected {
  border-color: var(--wcb-primary);
  background: #eff6ff;
  box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.18);
}
.wcb-freebie-card-img {
  width: 100%;
  aspect-ratio: 4 / 3;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-color: #f8fafc;
  border-bottom: 1px solid var(--wcb-border);
}
.wcb-freebie-card-img--ph { background: linear-gradient(135deg, #cbd5e1, #e2e8f0); }
.wcb-freebie-card-body {
  padding: 8px 10px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.wcb-freebie-card-name {
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.wcb-freebie-card-prices {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 12px;
}
.wcb-freebie-card-price {
  font-weight: 800;
  color: var(--wcb-fg);
}
.wcb-freebie-card-price--free {
  color: #166534;
  background: #dcfce7;
  border-radius: 999px;
  padding: 1px 8px;
  font-size: 11px;
  letter-spacing: 0.05em;
}
.wcb-freebie-card-strike {
  color: var(--wcb-muted);
  text-decoration: line-through;
  font-size: 11px;
}

@media (max-width: 760px) {
  .wcb-addon-card { flex-direction: column; align-items: stretch; text-align: center; }
  .wcb-addon-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   i18n — bilingual toggle (EN / AR), RTL adjustments
   ============================================================
   The PHP template renders BOTH languages for every static string as
   <span class="wcb-en">…</span><span class="wcb-ar">…</span>; CSS below
   shows one and hides the other based on the root's lang attribute. JS
   reads `currentLang` from localStorage and flips dir="rtl" + lang="ar"
   on #woaichat-builder, which cascades to every selector below. */

.woaichat-builder .wcb-en,
.woaichat-builder .wcb-ar { display: inline; }

.woaichat-builder:not([lang="ar"]) .wcb-ar { display: none; }
.woaichat-builder[lang="ar"]      .wcb-en { display: none; }

/* Tiny language toggle pinned to the top of the builder. Sits inside
   the builder container (not the WP header) so it's discoverable for
   anyone visiting /pc-builder/ directly. */
.wcb-lang-toggle {
  display: inline-flex;
  gap: 0;
  margin: 0 0 8px;
  padding: 2px;
  background: #f1f5f9;
  border: 1px solid var(--wcb-border);
  border-radius: 999px;
  align-self: flex-end;
}
.woaichat-builder { display: flex; flex-direction: column; }
.wcb-lang-btn {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 4px 12px;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  border-radius: 999px;
  color: #475569;
  line-height: 1.5;
}
.wcb-lang-btn:hover { color: var(--wcb-fg); }
.wcb-lang-btn.is-active {
  background: var(--wcb-primary, #0a84ff);
  color: #fff;
}

/* RTL adjustments. We mostly let the browser flip the layout via
   dir="rtl" — what's listed below are the spots where logical-property
   flipping isn't enough (icons, gradients, hard-coded text-align). */
.woaichat-builder[dir="rtl"] {
  text-align: right;
}
.woaichat-builder[dir="rtl"] .wcb-process-ar {
  text-align: right;
}
.woaichat-builder[dir="rtl"] .wcb-status-text,
.woaichat-builder[dir="rtl"] .wcb-summary-numbers,
.woaichat-builder[dir="rtl"] .wcb-slot-label,
.woaichat-builder[dir="rtl"] .wcb-addon-title,
.woaichat-builder[dir="rtl"] .wcb-addon-sub,
.woaichat-builder[dir="rtl"] .wcb-addon-disclaimer,
.woaichat-builder[dir="rtl"] .wcb-tab-text {
  text-align: right;
}
.woaichat-builder[dir="rtl"] .wcb-process-arrow svg { transform: scaleX(-1); }
.woaichat-builder[dir="rtl"] .wcb-selected-actions { align-items: stretch; }
.woaichat-builder[dir="rtl"] .wcb-tabs-row { direction: rtl; }

/* Legacy bilingual classes (wcb-process-en/ar): used by the 3-step header
   ribbon before the global wcb-en / wcb-ar pattern existed. Make them
   follow the same lang-driven visibility so the toggle applies to the
   whole builder consistently. */
.woaichat-builder:not([lang="ar"]) .wcb-process-ar { display: none; }
.woaichat-builder[lang="ar"]      .wcb-process-en { display: none; }