/* ========================================
   Custom HTML Editor
   ======================================== */

#opus-price-builder-app .custom-html-editor {
  @apply space-y-2;
}

#opus-price-builder-app .custom-html-editor__header {
  @apply flex items-center gap-2;
}

#opus-price-builder-app .custom-html-editor__btn {
  @apply flex items-center gap-1 px-2 py-1;
  @apply text-xs text-text-muted bg-surface-secondary rounded;
  @apply hover:bg-border transition-colors;
}

#opus-price-builder-app .custom-html-editor__btn--clear {
  @apply text-danger hover:bg-danger/10;
}

#opus-price-builder-app .custom-html-editor__textarea {
  @apply w-full p-3 text-sm font-mono;
  @apply bg-surface border border-border rounded-md;
  @apply resize-y min-h-[100px];
  @apply focus:outline-none focus:ring-2 focus:ring-primary;
}

#opus-price-builder-app .custom-html-editor__info {
  @apply flex items-start gap-1.5 text-xs text-text-muted;
}

#opus-price-builder-app .custom-html-editor__preview {
  @apply mt-2 p-3 bg-surface-secondary rounded-md;
}

#opus-price-builder-app .custom-html-editor__preview-label {
  @apply text-xs font-medium text-text-muted mb-2;
}

#opus-price-builder-app .custom-html-editor__preview-content {
  @apply text-sm;
}

/* ========================================
   Custom HTML Group (Default/Sidebar Mode)
   ======================================== */

#opus-price-builder-app .custom-html-group {
  @apply space-y-2;
}

#opus-price-builder-app .custom-html-group__header {
  @apply flex items-center gap-2;
}

#opus-price-builder-app .custom-html-group__btn {
  @apply flex items-center gap-1 px-2 py-1;
  @apply text-xs text-text-muted bg-surface-secondary rounded;
  @apply hover:bg-border transition-colors cursor-pointer;
}

#opus-price-builder-app .custom-html-group__btn--clear {
  @apply text-danger hover:bg-danger/10;
}

#opus-price-builder-app .custom-html-group__textarea {
  @apply w-full p-3 text-sm font-mono;
  @apply bg-surface border border-border rounded-md;
  @apply resize-y min-h-[100px];
  @apply focus:outline-none focus:ring-2 focus:ring-primary;
}

#opus-price-builder-app .custom-html-group__info {
  @apply flex items-start gap-1.5 text-xs text-text-muted;
}

#opus-price-builder-app .custom-html-group__preview {
  @apply mt-2 p-3 bg-surface-secondary rounded-md;
}

#opus-price-builder-app .custom-html-group__preview-label {
  @apply text-xs font-medium text-text-muted mb-2;
}

#opus-price-builder-app .custom-html-group__preview-content {
  @apply text-sm;
}

/* ========================================
   Custom JS Group (Default/Sidebar Mode)
   ======================================== */

#opus-price-builder-app .custom-js-group {
  @apply space-y-2;
}

#opus-price-builder-app .custom-js-group__header {
  @apply flex items-center justify-between gap-2 mb-2;
}

#opus-price-builder-app .custom-js-group__title {
  @apply text-xs font-medium text-text;
}

#opus-price-builder-app .custom-js-group__btn {
  @apply flex items-center gap-1 px-2 py-1;
  @apply text-xs text-text-muted bg-surface-secondary rounded;
  @apply hover:bg-border transition-colors cursor-pointer;
}

#opus-price-builder-app .custom-js-group__btn--clear {
  @apply text-danger hover:bg-danger/10;
}

#opus-price-builder-app .custom-js-group__warning {
  @apply flex items-start gap-2 p-3;
  @apply bg-warning/10 text-warning border border-warning/20 rounded-md;
  @apply text-xs;
}

#opus-price-builder-app .custom-js-group__info {
  @apply flex items-start gap-2 p-3;
  @apply bg-primary/10 text-primary border border-primary/20 rounded-md;
  @apply text-xs;
}

#opus-price-builder-app .custom-js-group__textarea, .floating-popover__custom-js textarea {
  @apply w-full p-3 text-sm font-mono;
  @apply bg-gray-900 text-green-400 border border-gray-700 rounded-md;
  @apply resize-y min-h-[120px];
  @apply focus:outline-none focus:ring-2 focus:ring-primary;
}

#opus-price-builder-app .custom-js-group__textarea::placeholder, .floating-popover__custom-js textarea::placeholder {
  @apply text-gray-500;
}

/* ========================================
   Custom CSS Group (Default/Sidebar Mode)
   ======================================== */

#opus-price-builder-app .custom-css-group {
  @apply space-y-2;
}

#opus-price-builder-app .custom-css-group__header {
  @apply flex items-center justify-between gap-2 mb-2;
}

#opus-price-builder-app .custom-css-group__title {
  @apply text-xs font-medium text-text;
}

#opus-price-builder-app .custom-css-group__btn {
  @apply flex items-center gap-1 px-2 py-1;
  @apply text-xs text-text-muted bg-surface-secondary rounded;
  @apply hover:bg-border transition-colors cursor-pointer;
}

#opus-price-builder-app .custom-css-group__btn--clear {
  @apply text-danger hover:bg-danger/10;
}

#opus-price-builder-app .custom-css-group__textarea, .floating-popover__custom-css textarea {
  @apply w-full p-3 text-sm font-mono;
  @apply bg-gray-900 text-blue-400 border border-gray-700 rounded-md;
  @apply resize-y min-h-[100px];
  @apply focus:outline-none focus:ring-2 focus:ring-primary;
}

#opus-price-builder-app .custom-css-group__textarea::placeholder, .floating-popover__custom-css textarea::placeholder {
  @apply text-gray-500;
}

#opus-price-builder-app .custom-css-group__info {
  @apply flex items-start gap-2 text-xs text-text-muted;
}


/* ========================================
   Placeholder Popover
   ======================================== */

 .placeholder-popover {
  @apply bg-surface border border-border rounded-lg shadow-lg z-[--z-popover];
  @apply p-3 w-64;
  animation: placeholderFadeIn 100ms ease-out;
  min-width: 400px;
}

@keyframes placeholderFadeIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

 .placeholder-popover__title {
  @apply text-xs font-semibold text-text-muted mb-2;
}

 .placeholder-popover__list {
  @apply flex flex-wrap gap-1;
}

 .placeholder-popover__item {
  @apply px-2 py-1 text-xs bg-surface-secondary rounded;
  @apply hover:bg-primary hover:text-white transition-colors;
  @apply cursor-pointer;

  code {
    @apply font-mono;
  }
}

 .placeholder-popover__arrow {
  @apply fill-surface;
}