/**
 * DPS Design System (DPS UI Kit)
 * Unified Design Tokens, Standardized UI Components & Responsive Layout Utilities
 * Shared across all DPS Media WordPress Plugins
 *
 * @package DPS_WordPress_Security
 * @version 2.0.0
 */

:root {
  /* ==========================================================================
     1. BRAND & THEME COLOR PALETTE
     ========================================================================== */
  --dps-brand-50: #f0fdfa;
  --dps-brand-100: #ccfbf1;
  --dps-brand-200: #99f6e4;
  --dps-brand-300: #5eead4;
  --dps-brand-400: #2dd4bf;
  --dps-brand-500: #14b8a6;
  --dps-brand-600: #0d9488;
  --dps-brand-700: #0f766e;
  --dps-brand-800: #115e59;
  --dps-brand-900: #134e4a;
  --dps-brand-950: #042f2e;

  /* Primary Brand Tokens */
  --dps-primary: #0f766e;
  --dps-primary-hover: #0d9488;
  --dps-primary-active: #115e59;
  --dps-primary-light: #f0fdfa;
  --dps-primary-border: #ccfbf1;

  /* Accent & Gradients */
  --dps-accent: #3b82f6;
  --dps-accent-hover: #2563eb;
  --dps-gradient-primary: linear-gradient(135deg, #0f766e 0%, #0d9488 50%, #14b8a6 100%);
  --dps-gradient-cta: linear-gradient(135deg, #0d9488 0%, #2563eb 100%);
  --dps-gradient-gold: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);

  /* Neutrals & Slate */
  --dps-bg-app: #f8fafc;
  --dps-bg-card: #ffffff;
  --dps-bg-card-subtle: #f8fafc;
  --dps-bg-card-hover: #f1f5f9;

  --dps-text-main: #0f172a;
  --dps-text-body: #334155;
  --dps-text-muted: #64748b;
  --dps-text-light: #94a3b8;
  --dps-text-inverse: #ffffff;

  --dps-border-subtle: #f1f5f9;
  --dps-border-default: #e2e8f0;
  --dps-border-strong: #cbd5e1;
  --dps-border-focus: #14b8a6;

  /* Status Colors */
  --dps-success: #10b981;
  --dps-success-bg: #ecfdf5;
  --dps-success-border: #a7f3d0;

  --dps-warning: #f59e0b;
  --dps-warning-bg: #fffbeb;
  --dps-warning-border: #fde68a;

  --dps-danger: #ef4444;
  --dps-danger-bg: #fef2f2;
  --dps-danger-border: #fecaca;

  --dps-info: #3b82f6;
  --dps-info-bg: #eff6ff;
  --dps-info-border: #bfdbfe;

  /* ==========================================================================
     2. TYPOGRAPHY
     ========================================================================== */
  --dps-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --dps-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  --dps-font-size-xs: 0.75rem;    /* 12px */
  --dps-font-size-sm: 0.875rem;   /* 14px */
  --dps-font-size-base: 1rem;     /* 16px */
  --dps-font-size-lg: 1.125rem;   /* 18px */
  --dps-font-size-xl: 1.25rem;    /* 20px */
  --dps-font-size-2xl: 1.5rem;    /* 24px */
  --dps-font-size-3xl: 1.875rem;  /* 30px */

  --dps-line-height-tight: 1.25;
  --dps-line-height-snug: 1.375;
  --dps-line-height-normal: 1.5;
  --dps-line-height-relaxed: 1.625;

  /* ==========================================================================
     3. SHAPES & RADIUS
     ========================================================================== */
  --dps-radius-xs: 4px;
  --dps-radius-sm: 6px;
  --dps-radius-md: 8px;
  --dps-radius-lg: 12px;
  --dps-radius-xl: 16px;
  --dps-radius-2xl: 20px;
  --dps-radius-pill: 9999px;

  /* ==========================================================================
     4. SHADOWS & ELEVATION
     ========================================================================== */
  --dps-shadow-xs: 0 1px 2px 0 rgba(15, 23, 42, 0.04);
  --dps-shadow-sm: 0 1px 3px 0 rgba(15, 23, 42, 0.06), 0 1px 2px -1px rgba(15, 23, 42, 0.06);
  --dps-shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.07), 0 2px 4px -2px rgba(15, 23, 42, 0.07);
  --dps-shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -4px rgba(15, 23, 42, 0.04);
  --dps-shadow-xl: 0 20px 25px -5px rgba(15, 23, 42, 0.08), 0 8px 10px -6px rgba(15, 23, 42, 0.04);
  --dps-shadow-glow: 0 0 20px -3px rgba(13, 148, 136, 0.25);

  /* Transitions */
  --dps-transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --dps-transition-base: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --dps-transition-smooth: 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ==========================================================================
   5. STANDARDIZED REUSABLE UI COMPONENTS
   ========================================================================== */

/**
 * Standard Tool Container Card
 */
.dps-ui-card,
.gvw-tool-container,
.instaloader-card,
.vidbee-card,
.dps-comment-root,
.nguu-lai-container {
  background: var(--dps-bg-card);
  border: 1px solid var(--dps-border-default);
  border-radius: var(--dps-radius-xl) !important;
  box-shadow: var(--dps-shadow-md) !important;
  font-family: var(--dps-font-sans);
  color: var(--dps-text-main);
  transition: box-shadow var(--dps-transition-base), border-color var(--dps-transition-base);
  box-sizing: border-box;
}

.dps-ui-card:hover,
.instaloader-card:hover,
.vidbee-card:hover {
  box-shadow: var(--dps-shadow-lg) !important;
  border-color: var(--dps-border-strong);
}

/**
 * Standard Auth Bar (Top Toolbar of Tools)
 */
.dps-ui-auth-bar,
.instaloader-auth-bar,
.vidbee-auth-bar,
.auth-bar,
#nguu-lai-auth-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  padding: 10px 16px !important;
  background: var(--dps-bg-card-subtle) !important;
  border: 1px solid var(--dps-border-default) !important;
  border-radius: var(--dps-radius-lg) !important;
  margin-bottom: 20px !important;
  font-size: var(--dps-font-size-sm) !important;
}

/**
 * User Profile & Avatar in Auth Bar
 */
.dps-user-profile-badge,
.instaloader-user-profile,
.user-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-weight: 500 !important;
  color: var(--dps-text-main) !important;
}

.dps-user-avatar-sm,
.instaloader-user-avatar,
.user-avatar {
  width: 30px !important;
  height: 30px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  border: 2px solid var(--dps-primary-border) !important;
}

/**
 * Standard Quota Pill / Badge
 */
.dps-ui-quota-pill,
.instaloader-quota-pill,
.badge-unlimited {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 3px 10px !important;
  border-radius: var(--dps-radius-pill) !important;
  font-size: var(--dps-font-size-xs) !important;
  font-weight: 600 !important;
  background: var(--dps-brand-50) !important;
  color: var(--dps-brand-800) !important;
  border: 1px solid var(--dps-brand-200) !important;
}

/**
 * Standard URL Input Bar (Search / Submit Form)
 */
.dps-ui-input-group,
.instaloader-input-wrapper,
.vidbee-input-group {
  display: flex !important;
  align-items: center !important;
  background: var(--dps-bg-card) !important;
  border: 2px solid var(--dps-border-default) !important;
  border-radius: var(--dps-radius-pill) !important;
  padding: 4px 6px 4px 16px !important;
  transition: all var(--dps-transition-base) !important;
  box-shadow: var(--dps-shadow-xs) !important;
}

.dps-ui-input-group:focus-within,
.instaloader-input-wrapper:focus-within,
.vidbee-input-group:focus-within {
  border-color: var(--dps-primary) !important;
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.12), var(--dps-shadow-sm) !important;
}

.dps-ui-input,
.instaloader-input,
.vidbee-input {
  flex: 1 !important;
  border: none !important;
  outline: none !important;
  background: transparent !important;
  padding: 10px 12px 10px 0 !important;
  font-size: var(--dps-font-size-base) !important;
  color: var(--dps-text-main) !important;
  font-family: inherit !important;
}

.dps-ui-input::placeholder,
.instaloader-input::placeholder,
.vidbee-input::placeholder {
  color: var(--dps-text-light) !important;
}

/**
 * Standard Paste Button
 */
.dps-ui-btn-paste,
.instaloader-btn-paste,
.vidbee-btn-paste {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  border: none !important;
  background: transparent !important;
  color: var(--dps-text-muted) !important;
  cursor: pointer !important;
  transition: all var(--dps-transition-fast) !important;
  margin-right: 4px !important;
}

.dps-ui-btn-paste:hover,
.instaloader-btn-paste:hover,
.vidbee-btn-paste:hover {
  background: var(--dps-bg-card-hover) !important;
  color: var(--dps-primary) !important;
  transform: scale(1.05);
}

/**
 * Standard Submit CTA Button
 */
.dps-ui-btn-submit,
.instaloader-btn-submit,
.vidbee-submit-btn,
.gvw-primary-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 10px 24px !important;
  border-radius: var(--dps-radius-pill) !important;
  border: none !important;
  background: var(--dps-gradient-primary) !important;
  color: var(--dps-text-inverse) !important;
  font-weight: 600 !important;
  font-size: var(--dps-font-size-sm) !important;
  cursor: pointer !important;
  transition: all var(--dps-transition-base) !important;
  box-shadow: 0 2px 8px -1px rgba(15, 118, 110, 0.35) !important;
  white-space: nowrap !important;
}

.dps-ui-btn-submit:hover,
.instaloader-btn-submit:hover,
.vidbee-submit-btn:hover,
.gvw-primary-btn:hover {
  background: var(--dps-primary-hover) !important;
  box-shadow: 0 4px 14px -2px rgba(15, 118, 110, 0.45) !important;
  transform: translateY(-1px);
}

.dps-ui-btn-submit:active,
.instaloader-btn-submit:active,
.vidbee-submit-btn:active,
.gvw-primary-btn:active {
  transform: translateY(0);
}

/**
 * Standard Login Card (For Guest Prompt)
 */
.dps-ui-login-card,
.gvw-auth-card,
.dps-comment-guest-card,
.vidbee-login-wrapper {
  background: var(--dps-bg-card) !important;
  border: 1px solid var(--dps-border-default) !important;
  border-radius: var(--dps-radius-xl) !important;
  box-shadow: var(--dps-shadow-sm) !important;
  text-align: center !important;
  padding: 2.2rem 1.5rem !important;
}

/**
 * Standard Progress Bar
 */
.dps-ui-progress-bar-container,
.instaloader-progress-bar-container,
.vidbee-progress-container {
  width: 100% !important;
  height: 8px !important;
  background: var(--dps-border-subtle) !important;
  border-radius: var(--dps-radius-pill) !important;
  overflow: hidden !important;
  margin: 12px 0 !important;
}

.dps-ui-progress-bar,
.instaloader-progress-bar,
.vidbee-progress-bar {
  height: 100% !important;
  background: var(--dps-gradient-primary) !important;
  border-radius: var(--dps-radius-pill) !important;
  transition: width 0.3s ease !important;
}

/**
 * Standard Navigation Tabs
 */
.dps-ui-tab-btn,
.dps-sort-btn {
  padding: 6px 16px !important;
  border-radius: var(--dps-radius-pill) !important;
  border: 1px solid var(--dps-border-default) !important;
  background: var(--dps-bg-card) !important;
  color: var(--dps-text-muted) !important;
  font-weight: 500 !important;
  font-size: var(--dps-font-size-sm) !important;
  cursor: pointer !important;
  transition: all var(--dps-transition-fast) !important;
}

.dps-ui-tab-btn:hover,
.dps-sort-btn:hover {
  background: var(--dps-bg-card-hover) !important;
  color: var(--dps-text-main) !important;
  border-color: var(--dps-border-strong) !important;
}

.dps-ui-tab-btn.active,
.dps-sort-btn.active {
  background: var(--dps-brand-50) !important;
  color: var(--dps-brand-700) !important;
  border-color: var(--dps-brand-300) !important;
  font-weight: 600 !important;
}