/**
 * Pro Components Styles
 *
 * Styles for Pro upgrade dialog, badges, and gates.
 */

/* Base Dialog Overlay */
.oppb-dialog-overlay {
  @apply fixed inset-0 bg-black/50 z-[--z-modal];
  animation: pboDialogFadeIn 150ms ease-out;
}

@keyframes pboDialogFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes pboDialogContentIn {
  from {
    opacity: 0;
    transform: translate(-50%, -48%) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

/* Base Dialog Content */
.oppb-dialog-content {
  @apply fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2;
  @apply bg-surface rounded-xl shadow-xl z-50;
  @apply p-6;
  animation: pboDialogContentIn 200ms ease-out;
}

/* Base Dialog Close */
.oppb-dialog-close {
  @apply absolute top-4 right-4 p-1.5 rounded-md;
  @apply text-text-muted hover:text-text hover:bg-surface-secondary;
  @apply transition-colors cursor-pointer border-none bg-transparent;
}

/* Pro Upgrade Dialog */
.oppb-pro-dialog {
  @apply max-w-md;
}

.oppb-pro-dialog__header {
  @apply text-center pb-4 border-b border-border mb-4;
}

.oppb-pro-dialog__icon {
  @apply w-16 h-16 mx-auto mb-3 rounded-full bg-gradient-to-br from-amber-400 to-orange-500 flex items-center justify-center text-white;
}

.oppb-pro-dialog__title {
  @apply text-xl font-semibold text-text m-0;
}

.oppb-pro-dialog__description {
  @apply text-sm text-text-muted mt-2 mb-0;
}

/* Features List */
.oppb-pro-dialog__features {
  @apply space-y-3 mb-6;
}

.oppb-pro-dialog__feature {
  @apply flex items-start gap-3 p-3 rounded-lg bg-surface-secondary transition-colors;
}

.oppb-pro-dialog__feature--highlighted {
  @apply bg-primary/10 ring-1 ring-primary/30;
}

.oppb-pro-dialog__feature-icon {
  @apply w-5 h-5 rounded-full bg-green-500 text-white flex items-center justify-center flex-shrink-0 mt-0.5;
}

.oppb-pro-dialog__feature-content {
  @apply flex-1;
}

.oppb-pro-dialog__feature-title {
  @apply text-sm font-medium text-text m-0;
}

.oppb-pro-dialog__feature-description {
  @apply text-xs text-text-muted mt-0.5 m-0;
}

/* Footer */
.oppb-pro-dialog__footer {
  @apply flex items-center justify-end gap-3 pt-4 border-t border-border;
}

/* Pro Badge */
.oppb-pro-badge {
  @apply inline-flex items-center gap-1 px-1.5 py-0.5 rounded font-semibold uppercase tracking-wider;
  @apply bg-gradient-to-r from-amber-400 to-orange-500 text-white;
}

.oppb-pro-badge--sm {
  @apply text-[9px] px-1 py-0.5;
}

.oppb-pro-badge--md {
  @apply text-[10px] px-1.5 py-0.5;
}

/* Pro Button (used in dialogs) */
.oppb-button-pro {
  @apply inline-flex items-center justify-center gap-2 px-4 py-2 rounded-md font-medium text-sm;
  @apply bg-gradient-to-r from-amber-500 to-orange-500 text-white;
  @apply hover:from-amber-600 hover:to-orange-600;
  @apply transition-all duration-200;
  @apply focus:outline-none focus:ring-2 focus:ring-orange-500/50 focus:ring-offset-2;
  @apply cursor-pointer border-none;
}

/* Upgrade Button (toolbar/footer) */
.oppb-upgrade-button {
  @apply inline-flex items-center justify-center gap-1.5 rounded-md font-medium;
  @apply bg-gradient-to-r from-amber-500 to-orange-500 text-white;
  @apply hover:from-amber-600 hover:to-orange-600;
  @apply transition-all duration-200;
  @apply focus:outline-none focus:ring-2 focus:ring-orange-500/50;
  @apply cursor-pointer border-none;
}

.oppb-upgrade-button--sm {
  @apply px-2.5 py-1.5 text-xs;
}

.oppb-upgrade-button--md {
  @apply px-3 py-2 text-sm;
}

/* Pro Feature Gate */
.oppb-pro-gate {
  @apply relative cursor-pointer;
}

.oppb-pro-gate__content {
  @apply opacity-50 pointer-events-none;
}

.oppb-pro-gate__overlay {
  @apply absolute inset-0 flex flex-col items-center justify-center gap-2 bg-surface/80 backdrop-blur-sm rounded-md;
  @apply text-text-muted;
}

/* Pro Label (inline with text) */
.oppb-pro-label {
  @apply inline-flex items-center gap-2;
}

.oppb-pro-label__text {
  @apply text-text-muted;
}

/* Pro Section Header */
.oppb-pro-section-header {
  @apply flex items-center gap-2 mb-2;
}

.oppb-pro-section-header__title {
  @apply text-xs font-semibold text-text-muted tracking-wider m-0;
}

/* Preset Card with Pro Badge */
.oppb-preset-card--pro {
  @apply relative;
}

.oppb-preset-card--pro .oppb-pro-badge {
  @apply absolute top-1 right-1 z-10;
}

.oppb-preset-card--pro.oppb-preset-card--locked {
  @apply opacity-60;
}

.oppb-preset-card--pro.oppb-preset-card--locked:hover {
  @apply opacity-80;
}

/* Settings Row with Pro Badge */
.oppb-settings-row--pro {
  @apply relative;
}

.oppb-settings-row--pro .oppb-pro-badge {
  @apply ml-2;
}

.oppb-settings-row--pro.oppb-settings-row--locked {
  @apply opacity-60 pointer-events-none;
}

/* Pro Notice (inline warning) */
.oppb-pro-notice {
  @apply flex items-center gap-2 px-3 py-2 rounded-md;
  @apply bg-amber-500/10 border border-amber-500/20;
  @apply text-xs text-amber-600;
}

.oppb-pro-notice__text {
  @apply flex-1;
}

/* Tab with Pro Badge */
.oppb-tab--pro {
  @apply relative inline-flex items-center gap-1;
}

/* Locked AI Helper Button */
.oppb-ai-helper-btn--locked {
  @apply opacity-80;
}

.oppb-ai-helper-btn--locked:hover {
  @apply opacity-100;
}

/* Locked Field (for container settings) */
.oppb-pro-locked-field {
  @apply w-full px-3 py-3 rounded-md border border-dashed border-border;
  @apply bg-surface-secondary/50 cursor-pointer;
  @apply hover:border-primary/50 hover:bg-primary/5;
  @apply transition-all duration-150;
}

.oppb-pro-locked-field__content {
  @apply flex items-center justify-center gap-2 text-xs text-text-muted;
}

/* Locked Switch (for container settings) */
.oppb-pro-locked-switch {
  @apply w-8 h-4 rounded-full bg-border flex items-center justify-center;
  @apply cursor-pointer hover:bg-border/80 transition-colors;
  @apply text-text-muted border-none;
}

/* Settings Section Locked */
.oppb-settings-section--locked {
  @apply relative;
}

/* Settings Card Locked */
.oppb-settings-card--locked {
  @apply relative cursor-pointer overflow-hidden;
}

.oppb-settings-locked-overlay {
  @apply absolute inset-0 z-10 flex flex-col items-center justify-center gap-3;
  @apply bg-surface/90 backdrop-blur-sm;
  @apply text-text-muted;
}

.oppb-settings-locked-overlay p {
  @apply text-sm font-medium m-0;
}

.oppb-settings-locked-content {
  @apply opacity-30 pointer-events-none;
}
