/**
 * DC Forms - Modern Design System
 * Compact, responsive, and accessible form styling
 *
 * @package DripCreate
 * @version 1.0.5
 */

/* ============================================
   CSS Variables - Design Tokens
   ============================================ */

:root {
  /* Primary Colors */
  --dc-primary: #6C70DC;
  --dc-primary-dark: #5558b8;
  --dc-primary-light: #8b8eec;

  /* Neutral Colors */
  --dc-gray-50: #f9fafb;
  --dc-gray-100: #f3f4f6;
  --dc-gray-200: #e5e7eb;
  --dc-gray-300: #d1d5db;
  --dc-gray-400: #9ca3af;
  --dc-gray-500: #6b7280;
  --dc-gray-600: #4b5563;
  --dc-gray-700: #374151;
  --dc-gray-800: #1f2937;
  --dc-gray-900: #111827;

  /* Semantic Colors */
  --dc-success: #10b981;
  --dc-success-light: #d1fae5;
  --dc-warning: #f59e0b;
  --dc-warning-light: #fef3c7;
  --dc-error: #ef4444;
  --dc-error-light: #fee2e2;
  --dc-info: #3b82f6;
  --dc-info-light: #dbeafe;

  /* Spacing Scale - COMPACT */
  --dc-space-xs: 0.25rem;   /* 4px */
  --dc-space-sm: 0.5rem;    /* 8px */
  --dc-space-md: 0.625rem;  /* 10px - Reduced from 16px */
  --dc-space-lg: 0.875rem;  /* 14px - Reduced from 24px */
  --dc-space-xl: 1.25rem;   /* 20px - Reduced from 32px */
  --dc-space-2xl: 1.75rem;  /* 28px - Reduced from 48px */

  /* Border Radius */
  --dc-radius-sm: 0.25rem;  /* 4px */
  --dc-radius-md: 0.5rem;   /* 8px */
  --dc-radius-lg: 0.75rem;  /* 12px */
  --dc-radius-xl: 1rem;     /* 16px */

  /* Shadows */
  --dc-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --dc-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --dc-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --dc-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);

  /* Transitions */
  --dc-transition: all 0.2s ease-in-out;
  --dc-transition-fast: all 0.15s ease-in-out;
  --dc-transition-slow: all 0.3s ease-in-out;
}

/* ============================================
   Base Reset & Box Model
   ============================================ */

.dc-form,
.dc-form * {
  box-sizing: border-box;
}

/* ============================================
   Form Container - Compact Card Design
   ============================================ */

.dc-form {
  background: var(--dc-gray-50);
  border: 1px solid var(--dc-gray-200);
  border-top: 3px solid var(--dc-primary);
  border-radius: var(--dc-radius-lg);
  padding: var(--dc-space-lg);
  max-width: 1200px;
  margin: 0 auto var(--dc-space-xl);
  font-size: 0.8125rem;
  color: var(--dc-gray-900);
  line-height: 1.5;
  box-shadow: var(--dc-shadow-sm);
}

/* Remove excessive bottom margin */
.dc-form:last-child {
  margin-bottom: 0;
}

/* ============================================
   Typography - Section Headers
   ============================================ */

.dc-form h1,
.dc-form h2,
.dc-form h3,
.dc-form h4 {
  font-weight: 600;
  color: var(--dc-gray-900);
  margin: 0;
  line-height: 1.25;
}

.dc-form h1 {
  font-size: 1.875rem; /* 30px */
}

.dc-form h2 {
  font-size: 1.5rem; /* 24px */
}

.dc-form h3 {
  font-size: 1rem; /* 16px */
}

.dc-form h4 {
  font-size: 0.875rem; /* 14px */
  color: var(--dc-gray-700);
}

/* Description text */
.dc-form p.description,
.dc-form .dc-description {
  font-size: 0.8125rem;
  color: var(--dc-gray-600);
  margin: var(--dc-space-xs) 0;
  line-height: 1.5;
}

/* ============================================
   Form Fields Container
   ============================================ */

.dc-form-fields {
  display: flex;
  flex-direction: column;
  gap: var(--dc-space-md);
}

/* ============================================
   Field Rows - Flexbox Layout (compatible with .dc-column-* width classes)
   ============================================ */

.dc-form-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin: 0 calc(-1 * var(--dc-space-sm));
  margin-bottom: var(--dc-space-md);
}

.dc-form-row:last-child {
  margin-bottom: 0;
}

/* ============================================
   Individual Field Styling
   ============================================ */

.dc-field {
  display: flex;
  flex-direction: column;
  gap: var(--dc-space-xs);
  min-width: 0; /* Prevent overflow in grid */
}

/* Field Label */
.dc-field label,
.dc-field .dc-field-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--dc-gray-700);
  margin-bottom: var(--dc-space-xs);
  display: block;
}

/* Required indicator */
.dc-field label .required,
.dc-field .required {
  color: var(--dc-error);
  margin-left: var(--dc-space-xs);
}

/* Field Input Container */
.dc-field-input {
  position: relative;
  width: 100%;
}

/* Base Input Styling */
.dc-field input[type="text"],
.dc-field input[type="email"],
.dc-field input[type="number"],
.dc-field input[type="password"],
.dc-field input[type="tel"],
.dc-field input[type="url"],
.dc-field input[type="date"],
.dc-field input[type="time"],
.dc-field input[type="datetime-local"],
.dc-field select,
.dc-field textarea {
  width: 100%;
  padding: var(--dc-space-sm) var(--dc-space-md);
  border: 1px solid var(--dc-gray-300);
  border-radius: var(--dc-radius-md);
  font-size: 0.875rem;
  font-family: inherit;
  line-height: 1.5;
  color: var(--dc-gray-900);
  background-color: white;
  transition: var(--dc-transition);
}

/* Textarea specific */
.dc-field textarea {
  min-height: 80px;
  resize: vertical;
}

/* Select specific */
.dc-field select {
  cursor: pointer;
  appearance: none;
  background-image: url('data:image/svg+xml;charset=UTF-8,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none"%3e%3cpath d="M7 7l3 3 3-3" stroke="%236b7280" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/%3e%3c/svg%3e');
  background-repeat: no-repeat;
  background-position: right var(--dc-space-sm) center;
  background-size: 1.5em;
  padding-right: 2.5rem;
}

/* Placeholder styling */
.dc-field input::placeholder,
.dc-field textarea::placeholder {
  color: var(--dc-gray-400);
}

/* Focus state */
.dc-field input:focus,
.dc-field select:focus,
.dc-field textarea:focus {
  outline: none;
  border-color: var(--dc-primary);
  box-shadow: 0 0 0 3px rgba(108, 112, 220, 0.1);
}

/* Hover state */
.dc-field input:hover:not(:focus):not(:disabled),
.dc-field select:hover:not(:focus):not(:disabled),
.dc-field textarea:hover:not(:focus):not(:disabled) {
  border-color: var(--dc-gray-400);
}

/* Disabled state */
.dc-field input:disabled,
.dc-field select:disabled,
.dc-field textarea:disabled {
  background-color: var(--dc-gray-100);
  color: var(--dc-gray-500);
  cursor: not-allowed;
  opacity: 0.6;
}

/* Read-only state */
.dc-field input:read-only,
.dc-field textarea:read-only {
  background-color: var(--dc-gray-50);
  color: var(--dc-gray-700);
}

/* ============================================
   Checkboxes & Radio Buttons
   ============================================ */

.dc-field input[type="checkbox"],
.dc-field input[type="radio"] {
  width: 1.125rem;
  height: 1.125rem;
  margin-right: var(--dc-space-sm);
  cursor: pointer;
  accent-color: var(--dc-primary);
}

.dc-field-checkbox label,
.dc-field-radio label {
  display: flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
}

/* ============================================
   Error States
   ============================================ */

.dc-field.has-error input,
.dc-field.has-error select,
.dc-field.has-error textarea {
  border-color: var(--dc-error);
  background-color: rgba(239, 68, 68, 0.04); /* very subtle — avoids clashing with level tints */
}

.dc-field.has-error input:focus,
.dc-field.has-error select:focus,
.dc-field.has-error textarea:focus {
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

.dc-field-error {
  display: flex;
  align-items: center;
  gap: var(--dc-space-xs);
  color: var(--dc-error);
  font-size: 0.8125rem;
  margin-top: var(--dc-space-xs);
  animation: shake 0.3s ease-in-out;
}

.dc-field-error::before {
  content: '⚠';
  font-size: 1rem;
  flex-shrink: 0;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

/* ============================================
   Success States
   ============================================ */

.dc-field.has-success input,
.dc-field.has-success select,
.dc-field.has-success textarea {
  border-color: var(--dc-success);
}

.dc-field-success {
  display: flex;
  align-items: center;
  gap: var(--dc-space-xs);
  color: var(--dc-success);
  font-size: 0.8125rem;
  margin-top: var(--dc-space-xs);
}

.dc-field-success::before {
  content: '✓';
  font-size: 1rem;
  font-weight: 600;
}

/* ============================================
   Field Hints & Help Text
   ============================================ */

.dc-field-hint {
  font-size: 0.8125rem;
  color: var(--dc-gray-600);
  margin-top: var(--dc-space-xs);
}

/* ============================================
   Tabs - Modern Tab Design
   ============================================ */

.dc-form-tabs {
  margin-bottom: var(--dc-space-lg);
  overflow: visible;
}

.dc-form-tabs-nav {
  display: flex;
  gap: var(--dc-space-xs);
  border-bottom: 2px solid var(--dc-gray-200);
  margin-bottom: var(--dc-space-lg);
  padding: 0;
  list-style: none;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.dc-form-tabs-nav::-webkit-scrollbar {
  height: 4px;
}

.dc-form-tabs-nav::-webkit-scrollbar-track {
  background: var(--dc-gray-100);
}

.dc-form-tabs-nav::-webkit-scrollbar-thumb {
  background: var(--dc-gray-300);
  border-radius: 2px;
}

.dc-form-tab-nav-item {
  flex-shrink: 0;
  margin: 0;
}

.dc-form-tab-link {
  display: flex;
  align-items: center;
  gap: var(--dc-space-sm);
  padding: var(--dc-space-sm) var(--dc-space-lg);
  border: none !important;
  border-bottom: 2px solid transparent !important;
  background: none !important;
  color: var(--dc-gray-500);
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  position: relative;
  transition: var(--dc-transition);
  white-space: nowrap;
  text-decoration: none;
  border-radius: 0;
  outline: none;
  box-shadow: none !important;
}

.dc-form-tab-link:hover {
  color: var(--dc-gray-900);
  border-bottom-color: var(--dc-gray-300) !important;
  background: none !important;
  box-shadow: none !important;
}

.dc-form-tab-link:focus,
.dc-form-tab-link:active,
.dc-form-tab-link:focus-visible {
  border: none !important;
  border-bottom: 2px solid transparent !important;
  outline: none !important;
  box-shadow: none !important;
}

.dc-form-tab-nav-item.active .dc-form-tab-link {
  background: none !important;
  border-bottom: 2px solid var(--dc-primary) !important;
  color: var(--dc-primary);
  font-weight: 600;
  box-shadow: none !important;
}

.dc-form-tab-nav-item.active .dc-form-tab-link:focus,
.dc-form-tab-nav-item.active .dc-form-tab-link:active,
.dc-form-tab-nav-item.active .dc-form-tab-link:focus-visible {
  border-bottom: 2px solid var(--dc-primary) !important;
}

.dc-form-tab-nav-item.active .dc-form-tab-link::after {
  display: none;
}

@keyframes slideIn {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

.dc-form-tab-icon {
  font-size: 1rem;
  display: flex;
  align-items: center;
}

/* WordPress converts emoji characters to <img class="emoji"> tags.
   Constrain them so they never blow out the tab height. */
.dc-form-tab-icon img.emoji,
.dc-form-tab-icon img {
  width: 1em;
  height: 1em;
  display: inline-block;
  vertical-align: -0.1em;
  margin: 0;
  box-shadow: none;
  border: none;
  background: none;
  padding: 0;
}

.dc-form-tab-label {
  font-weight: inherit;
}

/* Tab Content */
.dc-form-tab-content {
  display: none;
  animation: fadeIn 0.2s ease-in;
}

.dc-form-tab-content.active {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  column-gap: 0;
  row-gap: var(--dc-space-md);
  align-items: flex-start;
}

/* Groups inside tab content must always span full width as flex items */
.dc-form-tab-content > .dc-field-group {
  flex: 0 0 100%;
  min-width: 0;
  margin-bottom: 0; /* row-gap handles spacing */
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.dc-form-tab-description {
  font-size: 0.875rem;
  color: var(--dc-gray-600);
  margin-bottom: var(--dc-space-md);
  padding: var(--dc-space-md);
  background: var(--dc-gray-50);
  border-radius: var(--dc-radius-md);
  border-left: 3px solid var(--dc-primary);
}

/* ============================================
   Field Groups / Sections
   ============================================ */

/* ============================================
   Visual Hierarchy — Nesting Level Colors
   Level 1 clones (modules): indigo (brand-adjacent)
   Level 2 clones (videos):  teal (calm, cool)
   Level 3 clones (rules):   slate (neutral depth)
   Applied unconditionally to all DC Forms.
   ============================================ */
:root {
  --dc-level1-bg:     #ffffff;
  --dc-level1-border: rgba(99, 102, 241, 0.32);
  --dc-level1-header: transparent;
  --dc-level2-bg:     #ffffff;
  --dc-level2-border: rgba(13, 148, 136, 0.28);
  --dc-level2-header: transparent;
  --dc-level3-bg:     #ffffff;
  --dc-level3-border: rgba(100, 116, 139, 0.25);
  --dc-level3-header: transparent;
}

/* Level 1 clones (e.g. modules) */
.dc-field-group-fields > .dc-group-clone {
  border-left: 3px solid var(--dc-level1-border);
}
.dc-field-group-fields > .dc-group-clone > .dc-clone-header {
  border-radius: var(--dc-radius-sm) var(--dc-radius-sm) 0 0;
}

/* Level 2 clones (e.g. videos inside modules) */
.dc-group-clone .dc-field-group-fields > .dc-group-clone {
  border-left: 3px solid var(--dc-level2-border);
}

/* Level 3 clones (e.g. rules inside videos) */
.dc-group-clone .dc-group-clone .dc-field-group-fields > .dc-group-clone {
  border-left: 3px solid var(--dc-level3-border);
}

/* Level-colored left border accent on the drag-handle controls zone */
.dc-field-group-fields > .dc-group-clone > .dc-clone-header > .dc-clone-controls {
  border-left: 3px solid var(--dc-level1-border);
}
.dc-group-clone .dc-field-group-fields > .dc-group-clone > .dc-clone-header > .dc-clone-controls {
  border-left: 3px solid var(--dc-level2-border);
}
.dc-group-clone .dc-group-clone .dc-field-group-fields > .dc-group-clone > .dc-clone-header > .dc-clone-controls {
  border-left: 3px solid var(--dc-level3-border);
}

/* Nested field groups (inside clones) get a white background */
.dc-group-clone > .dc-clone-content > .dc-field-group,
.dc-group-clone > .dc-clone-content > .dc-field-group-fields > .dc-field-group {
  background: white;
  border-color: var(--dc-gray-200);
}

.dc-field-group {
  background: white;
  border: 1px solid var(--dc-gray-200);
  border-radius: var(--dc-radius-md);
  padding: var(--dc-space-md);
  margin-bottom: 0;
  box-shadow: var(--dc-shadow-sm);
}

.dc-field-group-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--dc-gray-100);
  border-radius: var(--dc-radius-md) var(--dc-radius-md) 0 0;
  padding: var(--dc-space-sm) var(--dc-space-md);
  border-bottom: 1px solid var(--dc-gray-200);
  margin-bottom: var(--dc-space-md);
  cursor: pointer;
  user-select: none;
}

.dc-field-group-title {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--dc-gray-500);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  line-height: 1.2;
}

/* Group clone count display (e.g., "Modules (4)") */
.dc-group-count {
  color: var(--dc-gray-600);
  font-weight: 500;
  font-size: 0.9em;
  margin-left: 0.25rem;
}

/* Groups with hidden titles */
.dc-field-group.no-title > .dc-field-group-header {
  min-height: 20px; /* Ensure header is still clickable for collapse */
  padding: var(--dc-space-xs) 0;
}

.dc-field-group.no-title.collapsible > .dc-field-group-header {
  cursor: pointer; /* Ensure cursor shows clickable even without title */
}

/* Arrow styles moved to HARDCODED ICONS section below - see line ~1479 */

.dc-field-group.collapsed .dc-field-group-fields {
  display: none;
}

.dc-field-group-fields {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  row-gap: var(--dc-space-md);
  column-gap: 0;
  align-items: stretch; /* fields in same row share height of tallest */
}

/* Fields without explicit column width default to full row */
.dc-field-group-fields > .dc-field-wrapper:not([class*="dc-column-"]),
.dc-clone-content > .dc-field-wrapper:not([class*="dc-column-"]) {
  width: 100%;
}

/* Column wrappers are flex containers so the inner .dc-field stretches to full height */
.dc-field-wrapper {
  display: flex;
  flex-direction: column;
  min-width: 0;        /* prevent flex item from overflowing its column width */
  box-sizing: border-box;
}
.dc-field-wrapper > .dc-field {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
/* File upload dropzones fill available column height */
.dc-field-wrapper > .dc-field .dc-field-tagify-file,
.dc-field-wrapper > .dc-field .dc-field-tagify-file .tagify {
  flex: 1 1 auto;
  min-height: 60px;
}

/* Nested groups always fill full width */
.dc-field-group-fields > .dc-field-group,
.dc-clone-content > .dc-field-group {
  width: 100%;
}

/* Clone functionality */
.dc-group-clone {
  position: relative;
  width: 100%; /* Always span full row in the flex .dc-field-group-fields container */
  box-sizing: border-box;
  padding: var(--dc-space-md);
  background: white;
  border: 1px solid var(--dc-gray-200);
  border-radius: var(--dc-radius-md);
  margin-bottom: 0;
}

.dc-group-clone-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  color: var(--dc-gray-400);
  border-radius: var(--dc-radius-sm);
  cursor: pointer;
  font-size: 0; /* hide any text, show only SVG */
  line-height: 1;
  transition: var(--dc-transition-fast);
  background-image: url('data:image/svg+xml;charset=UTF-8,%3csvg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="%239ca3af" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3e%3cpolyline points="3 6 5 6 21 6"/%3e%3cpath d="M19 6l-1 14H6L5 6"/%3e%3cpath d="M10 11v6M14 11v6"/%3e%3cpath d="M9 6V4h6v2"/%3e%3c/svg%3e');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px;
}

.dc-group-clone-remove:hover {
  color: var(--dc-error);
  background-color: var(--dc-error-light);
  background-image: url('data:image/svg+xml;charset=UTF-8,%3csvg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="%23ef4444" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3e%3cpolyline points="3 6 5 6 21 6"/%3e%3cpath d="M19 6l-1 14H6L5 6"/%3e%3cpath d="M10 11v6M14 11v6"/%3e%3cpath d="M9 6V4h6v2"/%3e%3c/svg%3e');
}

/* Add clone button */
.dc-field-group-add {
  padding: var(--dc-space-xs) var(--dc-space-md);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1;
  border-radius: 999px;
  border: 1px solid var(--dc-primary);
  background: white;
  color: var(--dc-primary);
  cursor: pointer;
  transition: var(--dc-transition);
  display: inline-flex;
  align-items: center;
  align-self: center;
  gap: var(--dc-space-xs);
  flex-shrink: 0;
  white-space: nowrap;
}

.dc-field-group-add:hover {
  background: var(--dc-primary);
  color: white;
}


/* ============================================
   Buttons - Primary & Secondary
   ============================================ */

.dc-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--dc-space-sm);
  padding: var(--dc-space-sm) var(--dc-space-lg);
  font-size: 0.875rem;
  font-weight: 500;
  font-family: inherit;
  border-radius: var(--dc-radius-md);
  border: none;
  cursor: pointer;
  transition: var(--dc-transition);
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
}

/* Primary button */
.dc-button-submit,
.dc-button-primary {
  background: var(--dc-primary);
  color: white;
  box-shadow: var(--dc-shadow-sm);
}

.dc-button-submit:hover,
.dc-button-primary:hover {
  background: var(--dc-primary-dark);
  box-shadow: var(--dc-shadow-md);
  transform: translateY(-1px);
}

.dc-button-submit:active,
.dc-button-primary:active {
  transform: translateY(0);
  box-shadow: var(--dc-shadow-sm);
}

/* Secondary button */
.dc-button-secondary {
  background: white;
  color: var(--dc-gray-700);
  border: 1px solid var(--dc-gray-300);
  box-shadow: var(--dc-shadow-sm);
}

.dc-button-secondary:hover {
  background: var(--dc-gray-50);
  border-color: var(--dc-gray-400);
}

/* Outline button */
.dc-button-outline {
  background: transparent;
  color: var(--dc-primary);
  border: 1px solid var(--dc-primary);
}

.dc-button-outline:hover {
  background: var(--dc-primary);
  color: white;
}

/* Button sizes */
.dc-button-sm {
  padding: var(--dc-space-xs) var(--dc-space-md);
  font-size: 0.8125rem;
}

.dc-button-lg {
  padding: var(--dc-space-md) var(--dc-space-xl);
  font-size: 1rem;
}

/* Disabled state */
.dc-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Loading state */
.dc-button.loading {
  position: relative;
  color: transparent;
  pointer-events: none;
}

.dc-button.loading::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  top: 50%;
  left: 50%;
  margin-left: -8px;
  margin-top: -8px;
  border: 2px solid currentColor;
  border-radius: 50%;
  border-top-color: transparent;
  animation: spin 0.6s linear infinite;
  color: inherit;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ============================================
   Form Actions / Submit Area
   ============================================ */

.dc-form-actions {
  display: flex;
  gap: var(--dc-space-md);
  padding-top: var(--dc-space-md);
  margin-top: var(--dc-space-lg);
  align-items: center;
}

.dc-form-actions > * {
  flex-shrink: 0;
}

/* ============================================
   Autosave Indicator
   Injected inside .dc-form-actions by dc-form-autosave.js, inline with Save button.
   JS toggles display: none / inline-flex — no phantom space when hidden.
   Background and color are set by JS per-status (pending/saving/success/error).
   ============================================ */

.dc-auto-save-indicator {
  display: none; /* hidden by default; JS sets inline-flex when active */
  align-items: center;
  padding: 6px 14px;
  border-radius: var(--dc-radius-sm, 4px);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
}

/* Fixed footer variant */
.dc-form-actions.fixed {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: white;
  padding: var(--dc-space-md);
  margin: 0;
  border-top: 1px solid var(--dc-gray-200);
  box-shadow: var(--dc-shadow-xl);
  z-index: 1000;
  animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

/* Add bottom padding to form when footer is fixed */
.dc-form.has-fixed-footer {
  padding-bottom: calc(60px + var(--dc-space-xl));
}

/* ============================================
   Column Layout System - Grid Based
   ============================================ */

.dc-col-1 { grid-column: span 1; }
.dc-col-2 { grid-column: span 2; }
.dc-col-3 { grid-column: span 3; }
.dc-col-4 { grid-column: span 4; }
.dc-col-5 { grid-column: span 5; }
.dc-col-6 { grid-column: span 6; }
.dc-col-7 { grid-column: span 7; }
.dc-col-8 { grid-column: span 8; }
.dc-col-9 { grid-column: span 9; }
.dc-col-10 { grid-column: span 10; }
.dc-col-11 { grid-column: span 11; }
.dc-col-12 { grid-column: span 12; }
.dc-col-full { grid-column: 1 / -1; }

/* ============================================
   Column Layout System - Flexbox Based
   ============================================ */

/* Column Width Classes - 12-column grid system using flexbox */
.dc-field-wrapper.dc-column-1,
.dc-field-wrapper.dc-column-2,
.dc-field-wrapper.dc-column-3,
.dc-field-wrapper.dc-column-4,
.dc-field-wrapper.dc-column-5,
.dc-field-wrapper.dc-column-6,
.dc-field-wrapper.dc-column-7,
.dc-field-wrapper.dc-column-8,
.dc-field-wrapper.dc-column-9,
.dc-field-wrapper.dc-column-10,
.dc-field-wrapper.dc-column-11,
.dc-field-wrapper.dc-column-12 {
  box-sizing: border-box;
  padding: 0 var(--dc-space-sm);
}

.dc-field-wrapper.dc-column-1 { width: 8.333333%; }
.dc-field-wrapper.dc-column-2 { width: 16.666667%; }
.dc-field-wrapper.dc-column-3 { width: 25%; }
.dc-field-wrapper.dc-column-4 { width: 33.333333%; }
.dc-field-wrapper.dc-column-5 { width: 41.666667%; }
.dc-field-wrapper.dc-column-6 { width: 50%; }
.dc-field-wrapper.dc-column-7 { width: 58.333333%; }
.dc-field-wrapper.dc-column-8 { width: 66.666667%; }
.dc-field-wrapper.dc-column-9 { width: 75%; }
.dc-field-wrapper.dc-column-10 { width: 83.333333%; }
.dc-field-wrapper.dc-column-11 { width: 91.666667%; }
.dc-field-wrapper.dc-column-12 { width: 100%; }

/* Fill column: shares remaining row space equally with sibling fill columns.
 * Conditionally-hidden siblings use position:absolute (out of flex flow),
 * so visible fill columns automatically expand to fill the full row.
 *   1 visible fill field → 100%
 *   2 visible fill fields → 50% each
 *   3 visible fill fields → 33% each
 * Use 'columns' => 'fill' in field config to apply this. */
.dc-field-wrapper.dc-column-fill {
  flex: 1 1 0;
  min-width: 120px;
  width: auto; /* Override the default width:100% from non-column fields */
  box-sizing: border-box;
  padding: 0 var(--dc-space-sm);
}

/* Ensure all inputs within column wrappers expand to full width */
.dc-field-wrapper .dc-field input[type="text"],
.dc-field-wrapper .dc-field input[type="number"],
.dc-field-wrapper .dc-field input[type="email"],
.dc-field-wrapper .dc-field input[type="url"],
.dc-field-wrapper .dc-field textarea,
.dc-field-wrapper .dc-field select {
  width: 100%;
  box-sizing: border-box;
}

/* Tagify elements expand to full width within their container */
.dc-field-wrapper .dc-field tags,
.dc-field-wrapper .dc-field .tagify {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* Ensure tagify field containers expand fully */
.dc-field-tagify-select,
.dc-field-tagify-tags,
.dc-field-tagify-mix,
.dc-field-tagify-date,
.dc-field-tagify-file,
.dc-field-tagify-seat,
.dc-field-tagify-password {
  width: 100%;
  box-sizing: border-box;
}

/* ── File Upload: "Outside" Layout ──────────────────────────────────────────────
   Tagify's "outside" pattern: .tagify__input (the editable area) is given order:-1
   so it renders ABOVE the tags visually, acting as a permanent drop zone.
   Tags accumulate as a list BELOW the drop zone.
   All Tagify JS features work unchanged — they operate on DOM structure, not CSS order.
   ─────────────────────────────────────────────────────────────────────────────── */

/* 1. Container: plain flex column, no border/background of its own */
.dc-field-tagify-file .tagify,
.dc-field-file .tagify {
  display: flex !important;
  flex-direction: column;
  gap: 4px;
  border: none !important;
  background: none !important;
  background-image: none !important;
  padding: 0 !important;
  min-height: unset !important;
  overflow: visible;
  cursor: default;
  box-shadow: none !important;
  transform: none !important;
}

/* 2. Drop zone: the .tagify__input, always at top via order:-1 */
.dc-field-tagify-file .tagify .tagify__input,
.dc-field-file .tagify .tagify__input {
  order: -1;
  flex: 0 0 auto;
  display: flex !important;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  width: 100% !important;
  box-sizing: border-box;
  border: 2px dashed #cbd5e0;
  border-radius: var(--dc-radius-sm);
  background-color: #f7fafc;
  background-image: repeating-linear-gradient(
    45deg,
    transparent, transparent 10px,
    rgba(203, 213, 224, 0.15) 10px, rgba(203, 213, 224, 0.15) 20px
  );
  padding: 12px 16px;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease;
  text-align: center;
  color: #a0aec0;
  font-size: 0.8125rem;
}

/* 3. Placeholder text via Tagify's native ::before (reads data-placeholder set by JS)
   IMPORTANT: Tagify's own CSS sets opacity:0 and position:absolute on ::before by default,
   only making it visible via .tagify--empty. We override both so the drop zone always
   shows a hint text (placeholder when empty, "✓ All uploaded" when full). */
.dc-field-tagify-file .tagify .tagify__input::before,
.dc-field-file .tagify .tagify__input::before {
  content: attr(data-placeholder) !important;
  color: #a0aec0;
  pointer-events: none;
  font-size: 0.8125rem;
  opacity: 1 !important;  /* Override Tagify's default opacity:0 */
  position: static;       /* Override Tagify's position:absolute — lets flex container centre it */
}

/* 4. Hover on container → style the drop zone */
.dc-field-tagify-file .tagify:hover .tagify__input,
.dc-field-file .tagify:hover .tagify__input {
  border-color: #4299e1;
  background-color: #ebf8ff;
}

/* 5. Focus-within */
.dc-field-tagify-file .tagify:focus-within .tagify__input,
.dc-field-file .tagify:focus-within .tagify__input {
  border-color: #3182ce;
  box-shadow: 0 0 0 3px rgba(49, 130, 206, 0.1);
  outline: none;
}

/* 6. Drag-over state — class is on container, feedback shown on drop zone input */
.dc-field-tagify-file .tagify.dc-drag-over .tagify__input,
.dc-field-file .tagify.dc-drag-over .tagify__input {
  border-color: #48bb78;
  border-style: solid;
  background-color: #f0fff4;
}
.dc-field-tagify-file .tagify.dc-drag-over .tagify__input::before,
.dc-field-file .tagify.dc-drag-over .tagify__input::before {
  content: '✓ Drop file here' !important;
  color: #38a169;
  font-weight: 600;
}

/* 7. Drag-invalid state */
.dc-field-tagify-file .tagify.dc-drag-invalid .tagify__input,
.dc-field-file .tagify.dc-drag-invalid .tagify__input {
  border-color: #f56565;
  border-style: solid;
  background-color: #fff5f5;
}
.dc-field-tagify-file .tagify.dc-drag-invalid .tagify__input::before,
.dc-field-file .tagify.dc-drag-invalid .tagify__input::before {
  content: '✗ Invalid file type' !important;
  color: #e53e3e;
  font-weight: 600;
}

/* 7b. Drag-full state — field is at max capacity */
.dc-field-tagify-file .tagify.dc-drag-full .tagify__input,
.dc-field-file .tagify.dc-drag-full .tagify__input {
  border-color: #ed8936;
  border-style: solid;
  background-color: #fffaf0;
  cursor: not-allowed;
}
.dc-field-tagify-file .tagify.dc-drag-full .tagify__input::before,
.dc-field-file .tagify.dc-drag-full .tagify__input::before {
  content: '⚠ Maximum files reached' !important;
  color: #c05621;
  font-weight: 600;
}

/* 8. At max capacity (tagify--hasMaxTags): collapse to slim "full" bar */
.dc-field-tagify-file .tagify.tagify--hasMaxTags .tagify__input,
.dc-field-file .tagify.tagify--hasMaxTags .tagify__input {
  display: none !important;
}

/* Pulse animation for processing preview */
@keyframes dc-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* File counter — uses class toggle instead of inline style */
.dc-file-counter {
  margin-left: 8px;
  font-size: 0.8125rem;
  color: #6b7280;
}
.dc-file-counter--full {
  color: #16a34a;
}

/* ── Inline upload notices ─────────────────────────────────────────────────── */
.dc-upload-notice {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 0.8rem;
  line-height: 1.4;
  margin-top: 4px;
  transition: opacity 0.3s ease;
  cursor: default;
}
.dc-upload-notice--error {
  background: #fff5f5;
  border: 1px solid #fed7d7;
  color: #c53030;
}
.dc-upload-notice--warning {
  background: #fffbeb;
  border: 1px solid #fde68a;
  color: #92400e;
}
.dc-upload-notice--info {
  background: #ebf8ff;
  border: 1px solid #bee3f8;
  color: #2b6cb0;
}
.dc-upload-notice-msg {
  flex: 1 1 0;
  min-width: 0;
}
.dc-upload-notice-close {
  flex-shrink: 0;
  background: none;
  border: none;
  padding: 0 2px;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  opacity: 0.5;
  color: inherit;
}
.dc-upload-notice-close:hover {
  opacity: 1;
}
.dc-upload-notice--hiding {
  opacity: 0;
}

/* 8. Uploading state */
.dc-field-tagify-file .tagify.tagify--loading .tagify__input,
.dc-field-file .tagify.tagify--loading .tagify__input {
  border-color: #48bb78;
  background-color: #f0fff4;
}

/* 9. Tags: full-width rows listed below the drop zone */
.dc-field-tagify-file .tagify__tag,
.dc-field-file .tagify__tag {
  display: flex !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 6px 10px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  box-sizing: border-box !important;
  overflow: hidden;
  cursor: grab;
}
.dc-field-tagify-file .tagify__tag:active,
.dc-field-file .tagify__tag:active {
  cursor: grabbing;
}

/* 10. Inner flex row inside each tag (preview image + filename) */
.dc-field-tagify-file .tagify__tag > div,
.dc-field-file .tagify__tag > div {
  display: flex;
  align-items: center;
  min-width: 0;
  overflow: hidden;
  flex: 1 1 auto;
}

/* 11. Filename: truncate with ellipsis */
.dc-field-tagify-file .tagify__tag-text,
.dc-field-file .tagify__tag-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 1 1 0;
}

/* Mobile: stack columns on small screens */
@media (max-width: 640px) {
  .dc-field-wrapper.dc-column-1,
  .dc-field-wrapper.dc-column-2,
  .dc-field-wrapper.dc-column-3,
  .dc-field-wrapper.dc-column-4,
  .dc-field-wrapper.dc-column-5,
  .dc-field-wrapper.dc-column-6,
  .dc-field-wrapper.dc-column-7,
  .dc-field-wrapper.dc-column-8,
  .dc-field-wrapper.dc-column-9,
  .dc-field-wrapper.dc-column-10,
  .dc-field-wrapper.dc-column-11,
  .dc-field-wrapper.dc-column-12 {
    width: 100%;
    padding: 0;
  }
}

/* ============================================
   Utility Classes
   ============================================ */

/* Spacing utilities */
.dc-mt-xs { margin-top: var(--dc-space-xs); }
.dc-mt-sm { margin-top: var(--dc-space-sm); }
.dc-mt-md { margin-top: var(--dc-space-md); }
.dc-mt-lg { margin-top: var(--dc-space-lg); }
.dc-mt-xl { margin-top: var(--dc-space-xl); }

.dc-mb-xs { margin-bottom: var(--dc-space-xs); }
.dc-mb-sm { margin-bottom: var(--dc-space-sm); }
.dc-mb-md { margin-bottom: var(--dc-space-md); }
.dc-mb-lg { margin-bottom: var(--dc-space-lg); }
.dc-mb-xl { margin-bottom: var(--dc-space-xl); }

.dc-pt-sm { padding-top: var(--dc-space-sm); }
.dc-pb-sm { padding-bottom: var(--dc-space-sm); }

/* Display utilities */
.dc-hidden { display: none !important; }
.dc-flex { display: flex; }
.dc-grid { display: grid; }
.dc-inline { display: inline; }
.dc-inline-block { display: inline-block; }

/* Text utilities */
.dc-text-xs { font-size: 0.75rem; }
.dc-text-sm { font-size: 0.875rem; }
.dc-text-base { font-size: 1rem; }
.dc-text-lg { font-size: 1.125rem; }
.dc-text-xl { font-size: 1.25rem; }

.dc-font-normal { font-weight: 400; }
.dc-font-medium { font-weight: 500; }
.dc-font-semibold { font-weight: 600; }
.dc-font-bold { font-weight: 700; }

.dc-text-left { text-align: left; }
.dc-text-center { text-align: center; }
.dc-text-right { text-align: right; }

.dc-text-gray { color: var(--dc-gray-600); }
.dc-text-primary { color: var(--dc-primary); }
.dc-text-success { color: var(--dc-success); }
.dc-text-warning { color: var(--dc-warning); }
.dc-text-error { color: var(--dc-error); }

/* ============================================
   Responsive Design - Mobile First
   ============================================ */

/* Tablet: 640px+ */
@media (min-width: 640px) {
  .dc-form {
    padding: var(--dc-space-lg);
  }
}

/* Desktop: 1024px+ */
@media (min-width: 1024px) {
  .dc-form {
    padding: var(--dc-space-xl);
  }

  .dc-form h1 {
    font-size: 2.25rem;
  }

  .dc-form h2 {
    font-size: 1.875rem;
  }
}

/* Large Desktop: 1280px+ */
@media (min-width: 1280px) {
  .dc-form {
    max-width: 1200px;
  }
}

/* Mobile adjustments: max-width 640px */
@media (max-width: 640px) {
  .dc-form {
    padding: var(--dc-space-md);
    border-radius: var(--dc-radius-md);
  }

  .dc-form-row {
    margin: 0;
    gap: var(--dc-space-sm);
  }

  .dc-form-tabs-nav {
    gap: var(--dc-space-xs);
  }

  .dc-form-tab-link {
    padding: var(--dc-space-xs) var(--dc-space-sm);
    font-size: 0.8125rem;
  }

  .dc-form-actions {
    flex-direction: column;
  }

  .dc-button {
    width: 100%;
  }

  /* Reset column spans on mobile */
  [class*="dc-col-"] {
    grid-column: 1 / -1;
  }

  /* Stack flexbox columns on mobile */
  .dc-form-row.flex-layout {
    margin: 0 -10px;
  }

  .dc-form-column {
    padding: 0 10px;
  }

  .dc-column-1, .dc-column-2, .dc-column-3,
  .dc-column-4, .dc-column-5, .dc-column-6,
  .dc-column-7, .dc-column-8, .dc-column-9,
  .dc-column-10, .dc-column-11 {
    width: 100%;
  }
}

/* Print styles */
@media print {
  .dc-form {
    box-shadow: none;
    padding: 0;
  }

  .dc-form-actions,
  .dc-button,
  .dc-field-group-add,
  .dc-group-clone-remove {
    display: none;
  }
}

/* ============================================
   Accessibility Enhancements
   ============================================ */

/* Focus visible for keyboard navigation */
.dc-button:focus-visible,
.dc-form-tab-link:focus-visible,
.dc-field input:focus-visible,
.dc-field select:focus-visible,
.dc-field textarea:focus-visible {
  outline: 2px solid var(--dc-primary);
  outline-offset: 2px;
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .dc-form {
    border: 2px solid currentColor;
  }

  .dc-field input,
  .dc-field select,
  .dc-field textarea {
    border-width: 2px;
  }
}

/* ============================================
   AGGRESSIVE OVERRIDES - Ensure styles apply everywhere
   ============================================ */

/* Target ALL inputs within dc-form, regardless of wrapper class */
.dc-form input[type="text"],
.dc-form input[type="email"],
.dc-form input[type="number"],
.dc-form input[type="password"],
.dc-form input[type="tel"],
.dc-form input[type="url"],
.dc-form input[type="date"],
.dc-form input[type="time"],
.dc-form input[type="datetime-local"],
.dc-form input[type="search"],
.dc-form input[type="color"],
.dc-form select,
.dc-form textarea {
  border-radius: var(--dc-radius-md);
  padding: var(--dc-space-sm) var(--dc-space-md);
  border: 1px solid var(--dc-gray-300);
  font-size: 0.875rem;
  line-height: 1.5;
  transition: var(--dc-transition);
}

/* Compact spacing for all form elements */
.dc-form .rwmb-field,
.dc-form .rwmb-input,
.dc-form .dc-field {
  margin-bottom: var(--dc-space-md);
}

/* Reduce vertical spacing between field rows */
.dc-form .rwmb-meta-box,
.dc-form .rwmb-form {
  display: flex;
  flex-direction: column;
  gap: var(--dc-space-md);
}

/* Compact labels */
.dc-form label,
.dc-form .rwmb-label {
  margin-bottom: var(--dc-space-xs);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--dc-gray-700);
}

/* Focus states for all inputs */
.dc-form input:focus,
.dc-form select:focus,
.dc-form textarea:focus {
  outline: none;
  border-color: var(--dc-primary);
  box-shadow: 0 0 0 3px rgba(108, 112, 220, 0.1);
}

/* Remove excessive spacing from WordPress/Meta Box defaults */
.dc-form .rwmb-field:last-child,
.dc-form .dc-field:last-child {
  margin-bottom: 0;
}

/* Compact form sections */
.dc-form .postbox,
.dc-form .postbox-container {
  margin-bottom: var(--dc-space-md);
  padding: var(--dc-space-md);
}

/* Compact tab content */
.dc-form [role="tabpanel"],
.dc-form .rwmb-tab-content {
  padding: var(--dc-space-md) 0;
}

/* Ensure select dropdowns have rounded corners and custom styling */
.dc-form select,
.dc-field-wrapper select,
.dc-field select,
.rwmb-field select,
.rwmb-input select,
select[class*="rwmb"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: white;
  background-image: url('data:image/svg+xml;charset=UTF-8,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none"%3e%3cpath d="M6 8l4 4 4-4" stroke="%234b5563" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/%3e%3c/svg%3e');
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 20px;
  padding-right: 36px;
  border-radius: var(--dc-radius-md);
  border: 1px solid var(--dc-gray-300);
  padding: var(--dc-space-sm) var(--dc-space-md);
  font-size: 0.875rem;
}

/* Submit button — full DC primary styling */
.dc-form button[type="submit"],
.dc-form input[type="submit"] {
  padding: var(--dc-space-sm) var(--dc-space-xl);
  border-radius: var(--dc-radius-md);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  pointer-events: auto;
  background: var(--dc-primary);
  color: white;
  border: none;
  box-shadow: var(--dc-shadow-sm);
  transition: var(--dc-transition);
  font-family: inherit;
  line-height: 1.5;
  display: inline-flex;
  align-items: center;
}

.dc-form button[type="submit"]:hover,
.dc-form input[type="submit"]:hover {
  background: var(--dc-primary-dark);
  box-shadow: var(--dc-shadow-md);
  transform: translateY(-1px);
}

.dc-form button[type="submit"]:active,
.dc-form input[type="submit"]:active {
  transform: translateY(0);
  box-shadow: var(--dc-shadow-sm);
}

/* WordPress admin .button classes — structural only to avoid conflicts */
.dc-form .button,
.dc-form .button-primary {
  padding: var(--dc-space-sm) var(--dc-space-lg);
  border-radius: var(--dc-radius-md);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  pointer-events: auto;
}

/* Remove excessive padding from field wrappers */
.dc-form .rwmb-field,
.dc-form .rwmb-input,
.dc-form .field-wrapper {
  padding: 0;
}

/* Compact grid/flex layouts */
.dc-form .rwmb-columns {
  gap: var(--dc-space-md);
}

/* Ensure checkboxes and radios are compact */
.dc-form input[type="checkbox"],
.dc-form input[type="radio"] {
  width: 1.125rem;
  height: 1.125rem;
  margin-right: var(--dc-space-sm);
  accent-color: var(--dc-primary);
}

/* ============================================
   HARDCODED ICONS - No icon font dependencies
   ============================================ */

/* Arrow styles consolidated below - see IMPROVED TOGGLE ICON ANIMATION section */


/* Better dropdown arrow - more visible */
.dc-form select,
.dc-form .rwmb-select select {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background-color: white !important;
  background-image: url('data:image/svg+xml;charset=UTF-8,%3csvg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"%3e%3cpath d="M6 8l4 4 4-4" stroke="%234b5563" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/%3e%3c/svg%3e') !important;
  background-repeat: no-repeat !important;
  background-position: right 8px center !important;
  background-size: 20px !important;
  padding-right: 36px !important;
}

/* Tab icons can use simple text characters */
.dc-form-tab-link::before {
  content: attr(data-icon) !important;
  margin-right: var(--dc-space-xs) !important;
  font-size: 1.1em !important;
}

/* Error icon */
.dc-field-error::before {
  content: '' !important;
  display: inline-block !important;
  width: 16px !important;
  height: 16px !important;
  margin-right: 4px !important;
  background-image: url('data:image/svg+xml;charset=UTF-8,%3csvg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"%3e%3ccircle cx="8" cy="8" r="7" stroke="%23ef4444" stroke-width="2" fill="none"/%3e%3cpath d="M8 4v5M8 11v1" stroke="%23ef4444" stroke-width="2" stroke-linecap="round"/%3e%3c/svg%3e') !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}

/* Success icon */
.dc-field-success::before {
  content: '' !important;
  display: inline-block !important;
  width: 16px !important;
  height: 16px !important;
  margin-right: 4px !important;
  background-image: url('data:image/svg+xml;charset=UTF-8,%3csvg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"%3e%3ccircle cx="8" cy="8" r="7" stroke="%2310b981" stroke-width="2" fill="none"/%3e%3cpath d="M5 8l2 2 4-4" stroke="%2310b981" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/%3e%3c/svg%3e') !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}

/* ============================================
   NESTED FORMS & GROUPS - Ensure compact styling applies deeply
   ============================================ */

/* Compact spacing for nested groups - EXTRA TIGHT */
.dc-form .rwmb-group-wrapper,
.dc-form .rwmb-group-clone,
.dc-form .dc-field-group,
.dc-form .dc-field-group .dc-field-group {
  margin-bottom: var(--dc-space-sm) !important;
  padding: var(--dc-space-sm) !important;
}

/* Nested group fields - EXTRA TIGHT */
.dc-form .rwmb-group-wrapper .rwmb-field,
.dc-form .rwmb-group-clone .rwmb-field,
.dc-form .dc-field-group .rwmb-field,
.dc-form .dc-field-group .dc-field {
  margin-bottom: var(--dc-space-sm) !important;
}

/* Nested inputs maintain rounded corners */
.dc-form .rwmb-group-wrapper input[type="text"],
.dc-form .rwmb-group-wrapper input[type="email"],
.dc-form .rwmb-group-wrapper input[type="number"],
.dc-form .rwmb-group-wrapper select,
.dc-form .rwmb-group-wrapper textarea,
.dc-form .rwmb-group-clone input[type="text"],
.dc-form .rwmb-group-clone input[type="email"],
.dc-form .rwmb-group-clone input[type="number"],
.dc-form .rwmb-group-clone select,
.dc-form .rwmb-group-clone textarea,
.dc-form .dc-field-group input[type="text"],
.dc-form .dc-field-group input[type="email"],
.dc-form .dc-field-group input[type="number"],
.dc-form .dc-field-group select,
.dc-form .dc-field-group textarea {
  border-radius: var(--dc-radius-md) !important;
  padding: var(--dc-space-sm) var(--dc-space-md) !important;
  border: 1px solid var(--dc-gray-300) !important;
}

/* Legacy MetaBox selectors — kept harmless, no longer rendered */
.dc-form .rwmb-group-title,
.dc-form .rwmb-clone-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--dc-gray-800);
  margin-bottom: 0;
}
/* dc-field-group-title styled via the lowercase uppercase-label rule below (line ~2070) */

/* Clone buttons inside groups */
.dc-form .rwmb-group-wrapper .rwmb-button,
.dc-form .rwmb-group-clone .rwmb-button,
.dc-form .dc-field-group button:not(.dc-group-clone-remove) {
  padding: var(--dc-space-xs) var(--dc-space-md) !important;
  font-size: 0.8125rem !important;
  border-radius: var(--dc-radius-md) !important;
  margin-top: var(--dc-space-sm) !important;
}

/* Nested collapsible sections */
.dc-form .dc-field-group .dc-field-group {
  background: white !important;
  border: 1px solid var(--dc-gray-300) !important;
  margin-top: var(--dc-space-md) !important;
}

/* Remove excessive spacing from nested last children */
.dc-form .rwmb-group-wrapper .rwmb-field:last-child,
.dc-form .rwmb-group-clone .rwmb-field:last-child,
.dc-form .dc-field-group .rwmb-field:last-child,
.dc-form .dc-field-group .dc-field:last-child {
  margin-bottom: 0 !important;
}

/* Nested labels maintain compact styling */
.dc-form .rwmb-group-wrapper label,
.dc-form .rwmb-group-clone label,
.dc-form .dc-field-group label {
  margin-bottom: var(--dc-space-xs) !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
}

/* Meta Box group wrapper specific fixes */
.dc-form .rwmb-group-wrapper {
  border: 1px solid var(--dc-gray-200) !important;
  border-radius: var(--dc-radius-md) !important;
  background: var(--dc-gray-50) !important;
}

/* Meta Box clone controls */
.dc-form .rwmb-group-controls {
  margin-top: var(--dc-space-sm) !important;
  gap: var(--dc-space-xs) !important;
}

/* Deeply nested forms (3+ levels) */
.dc-form .dc-field-group .dc-field-group .dc-field-group {
  padding: var(--dc-space-sm) !important;
  margin-bottom: var(--dc-space-sm) !important;
}

/* Nested select dropdowns maintain arrow */
.dc-form .rwmb-group-wrapper select,
.dc-form .rwmb-group-clone select,
.dc-form .dc-field-group select {
  appearance: none !important;
  background-image: url('data:image/svg+xml;charset=UTF-8,%3csvg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"%3e%3cpath d="M6 8l4 4 4-4" stroke="%234b5563" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/%3e%3c/svg%3e') !important;
  background-repeat: no-repeat !important;
  background-position: right 8px center !important;
  background-size: 20px !important;
  background-color: white !important;
  padding-right: 36px !important;
}

/* ============================================
   WIDE/SPAN FIELDS - Full width fields with rounded corners
   ============================================ */

/* Wide fields that span multiple columns */
.dc-form .rwmb-field[class*="col-"],
.dc-form .rwmb-field.full-width,
.dc-form .dc-field.full-width,
.dc-form .rwmb-field[data-width="100"],
.dc-form .dc-field[data-width="100"] {
  grid-column: 1 / -1 !important;
}

/* Ensure wide field inputs have rounded corners */
.dc-form .rwmb-field[class*="col-"] input[type="text"],
.dc-form .rwmb-field[class*="col-"] input[type="email"],
.dc-form .rwmb-field[class*="col-"] input[type="number"],
.dc-form .rwmb-field[class*="col-"] select,
.dc-form .rwmb-field[class*="col-"] textarea,
.dc-form .rwmb-field.full-width input,
.dc-form .rwmb-field.full-width select,
.dc-form .rwmb-field.full-width textarea {
  border-radius: var(--dc-radius-md) !important;
  padding: var(--dc-space-sm) var(--dc-space-md) !important;
}

/* Meta Box column classes */
.dc-form .rwmb-field.rwmb-col-12,
.dc-form .rwmb-field.rwmb-col-11,
.dc-form .rwmb-field.rwmb-col-10,
.dc-form .rwmb-field.rwmb-col-9,
.dc-form .rwmb-field.rwmb-col-8 {
  width: 100% !important;
}

.dc-form .rwmb-field.rwmb-col-12 input,
.dc-form .rwmb-field.rwmb-col-12 select,
.dc-form .rwmb-field.rwmb-col-12 textarea {
  border-radius: var(--dc-radius-md) !important;
}

/* ============================================
   IMPROVED TOGGLE ICON ANIMATION - Right arrow rotates to down arrow
   ============================================ */

/* Right-pointing arrow that rotates - ONLY for collapsible groups (direct children only) */
.dc-field-group.collapsible > .dc-field-group-header > .dc-field-group-title::before {
  content: '';
  display: inline-block;
  flex-shrink: 0;
  align-self: center;
  width: 0;
  height: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 5px solid var(--dc-gray-600);
  border-right: 0;
  transition: transform 0.2s ease-in-out;
  transform: rotate(0deg);
  transform-origin: 40% 50%;
  vertical-align: middle;
}

/* When expanded, rotate arrow down (90 degrees) */
.dc-field-group.collapsible:not(.collapsed) > .dc-field-group-header > .dc-field-group-title::before {
  transform: rotate(90deg);
}

/* When collapsed, arrow points right (0 degrees - default) */
.dc-field-group.collapsible.collapsed > .dc-field-group-header > .dc-field-group-title::before {
  transform: rotate(0deg);
}

/* Make collapsible group titles clickable with better cursor */
.dc-field-group.collapsible > .dc-field-group-header > .dc-field-group-title {
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 6px;
  line-height: 1.2;
}

/* Hide collapsed group content */
.dc-field-group.collapsed .dc-field-group-fields,
.dc-form .rwmb-group-wrapper.collapsed .rwmb-field {
  display: none !important;
}

/* Keep title visible when collapsed */
.dc-form .rwmb-group-wrapper.collapsed .rwmb-group-title,
.dc-form .rwmb-group-wrapper.collapsed .rwmb-group-controls {
  display: flex !important;
}

/* ============================================
   Clone Headers - Compact Design
   ============================================ */

/* Main clone header container — flush to card edges (card provides border + radius) */
.dc-clone-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0;
  background: var(--dc-gray-50);
  border: none;
  border-radius: 0;
  margin-bottom: 0;
  cursor: pointer;
  user-select: none;
  transition: var(--dc-transition-fast);
  min-height: 36px;
}

.dc-clone-header:hover {
  background: var(--dc-gray-100);
}

/* Left section - controls and title */
.dc-clone-left {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
}

/* ============================================
   Unified drag+arrow control zone
   The entire zone is the Sortable drag handle.
   Click ▲/▼ to step-move; click+drag anywhere else to reorder.
   ============================================ */
.dc-clone-controls {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0;
  cursor: grab;
  background: var(--dc-gray-100);
  border: none;
  border-right: 1px solid var(--dc-gray-200);
  border-radius: 0;
  padding: 0;
  min-width: 30px;
  width: 30px;
  height: 36px;
  user-select: none;
  flex-shrink: 0;
}

.dc-clone-controls:hover {
  background: var(--dc-gray-100);
}

.dc-clone-controls:active {
  cursor: grabbing;
}

/* Drag handle — grip dots SVG, prominent slate color */
.dc-clone-drag-handle {
  font-size: 0; /* hide any innerHTML text */
  width: 16px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  pointer-events: none; /* parent zone handles drag interaction */
  user-select: none;
  background: url('data:image/svg+xml;charset=UTF-8,%3csvg xmlns="http://www.w3.org/2000/svg" width="10" height="16" viewBox="0 0 10 16"%3e%3ccircle cx="3" cy="3" r="1.5" fill="%2394a3b8"/%3e%3ccircle cx="7" cy="3" r="1.5" fill="%2394a3b8"/%3e%3ccircle cx="3" cy="8" r="1.5" fill="%2394a3b8"/%3e%3ccircle cx="7" cy="8" r="1.5" fill="%2394a3b8"/%3e%3ccircle cx="3" cy="13" r="1.5" fill="%2394a3b8"/%3e%3ccircle cx="7" cy="13" r="1.5" fill="%2394a3b8"/%3e%3c/svg%3e') no-repeat center / 10px;
}

/* Up/Down arrow buttons — hidden for now (drag reordering is the primary method) */
/* !important required — the visual-styles block below also sets display and would win */
.dc-clone-arrow-up,
.dc-clone-arrow-down {
  display: none !important;
}

/* Up/Down arrow visual styles (kept for when they are re-enabled) */
.dc-clone-arrow-up,
.dc-clone-arrow-down {
  background: transparent none no-repeat center / 10px;
  border: none;
  cursor: pointer;
  font-size: 0; /* hide any innerHTML text, icon is via background-image */
  padding: 0;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 2px;
  transition: var(--dc-transition-fast);
}

.dc-clone-arrow-up {
  background-image: url('data:image/svg+xml;charset=UTF-8,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%236b7280" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"%3e%3cpolyline points="18 15 12 9 6 15"/%3e%3c/svg%3e');
}

.dc-clone-arrow-down {
  background-image: url('data:image/svg+xml;charset=UTF-8,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%236b7280" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"%3e%3cpolyline points="6 9 12 15 18 9"/%3e%3c/svg%3e');
}

.dc-clone-arrow-up:hover {
  background-color: rgba(108, 112, 220, 0.12);
  background-image: url('data:image/svg+xml;charset=UTF-8,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%236C70DC" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"%3e%3cpolyline points="18 15 12 9 6 15"/%3e%3c/svg%3e');
}

.dc-clone-arrow-down:hover {
  background-color: rgba(108, 112, 220, 0.12);
  background-image: url('data:image/svg+xml;charset=UTF-8,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%236C70DC" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"%3e%3cpolyline points="6 9 12 15 18 9"/%3e%3c/svg%3e');
}

.dc-clone-arrow-up:active,
.dc-clone-arrow-down:active {
  background-color: rgba(108, 112, 220, 0.2);
}

/* Clone title - COMPACT */
.dc-clone-title {
  margin: 0;
  font-size: 0.75rem; /* 12px */
  font-weight: 500;
  letter-spacing: 0;
  color: var(--dc-gray-800);
  line-height: 1.3;
}

/* Right section - delete button only (chevron is now in the left/title section) */
.dc-clone-right {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  padding-right: 10px;  /* breathing room from card right edge */
}

/* Collapse indicator - COMPACT */
.dc-clone-collapse-indicator {
  font-size: 0;         /* hide any text character in the DOM */
  line-height: 0;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background-image: url('data:image/svg+xml;charset=UTF-8,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%236b7280" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"%3e%3cpolyline points="6 9 12 15 18 9"/%3e%3c/svg%3e');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px;
  transition: transform 0.2s ease;
  opacity: 0.75;
}

/* Rotate indicator when collapsed */
.dc-clone-header.collapsed .dc-clone-collapse-indicator {
  transform: rotate(-90deg);
}

/* Hide clone content when header is in collapsed state (PHP-rendered or JS-toggled) */
.dc-clone-header.collapsed + .dc-clone-content {
  display: none;
}

/* Clone row with nested required-field errors (still collapsed).
   Red indicator on header so the user knows to open this row. */
.dc-group-clone.dc-clone-error > .dc-clone-header {
  border-color: rgba(239, 68, 68, 0.45);
  background-color: var(--dc-error-light);
}
.dc-group-clone.dc-clone-error > .dc-clone-header .dc-clone-controls {
  border-left-color: var(--dc-error) !important;
  background-color: rgba(239, 68, 68, 0.06);
}
.dc-group-clone.dc-clone-error > .dc-clone-header .dc-clone-title {
  color: var(--dc-error);
}

/* Remove button in header */
.dc-clone-remove-btn {
  background: transparent;
  color: var(--dc-gray-400);
  border: none;
  border-radius: var(--dc-radius-sm);
  padding: 2px;
  font-size: 0; /* hide text, icon via background */
  cursor: pointer;
  transition: var(--dc-transition-fast);
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-image: url('data:image/svg+xml;charset=UTF-8,%3csvg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="%239ca3af" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3e%3cpolyline points="3 6 5 6 21 6"/%3e%3cpath d="M19 6l-1 14H6L5 6"/%3e%3cpath d="M10 11v6M14 11v6"/%3e%3cpath d="M9 6V4h6v2"/%3e%3c/svg%3e');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px;
}

.dc-clone-remove-btn:hover {
  background-color: var(--dc-error-light);
  background-image: url('data:image/svg+xml;charset=UTF-8,%3csvg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="%23ef4444" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3e%3cpolyline points="3 6 5 6 21 6"/%3e%3cpath d="M19 6l-1 14H6L5 6"/%3e%3cpath d="M10 11v6M14 11v6"/%3e%3cpath d="M9 6V4h6v2"/%3e%3c/svg%3e');
}

.dc-clone-remove-btn:active {
  background-color: var(--dc-gray-200);
}

/* ============================================
   Compact Form Spacing - Reduce Vertical Height
   ============================================ */

/* Reduce spacing between fields */
.dc-form-fields {
  gap: var(--dc-space-sm); /* 8px instead of 10px */
}

/* Reduce field internal spacing */
.dc-field {
  gap: var(--dc-space-xs); /* 4px between label and input */
}

/* Reduce input padding for more compact inputs */
.dc-field input[type="text"],
.dc-field input[type="email"],
.dc-field input[type="number"],
.dc-field input[type="password"],
.dc-field input[type="tel"],
.dc-field input[type="url"],
.dc-field input[type="date"],
.dc-field select,
.dc-field textarea {
  padding: var(--dc-space-xs) var(--dc-space-sm); /* 4px 8px instead of 8px 10px */
  font-size: 0.8125rem; /* 13px instead of 14px */
  line-height: 1.4;
}

/* Compact textarea */
.dc-field textarea {
  min-height: 60px; /* Reduced from 80px */
  padding: var(--dc-space-sm); /* 8px all around */
}

/* Reduce spacing in field groups */
.dc-field-group {
  margin-bottom: 0;
}

/* Reduce padding in collapsible group content */
.dc-field-group-fields {
  padding: var(--dc-space-sm); /* 8px instead of larger default */
  gap: var(--dc-space-sm); /* 8px between nested fields */
}

/* More compact group headers */
.dc-field-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--dc-space-sm) var(--dc-space-md); /* 8px 10px */
  margin-bottom: var(--dc-space-sm); /* 8px */
  font-size: 0.875rem; /* 14px */
}

/* Group title — sentence case section label */
.dc-field-group-title {
  font-size: 0.75rem; /* 12px */
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--dc-gray-400); /* lighter tone — matches mockup var(--text3) */
}

/* Reduce label font size slightly */
.dc-field label,
.dc-field .dc-field-label {
  font-size: 0.8125rem; /* 13px instead of 14px */
  margin-bottom: var(--dc-space-xs); /* 4px */
}

/* Clone content — white card lifts off the tinted clone background */
.dc-clone-content {
  width: 100%;
  box-sizing: border-box;
  padding: 14px;  /* matches mockup .sub-tab-content padding */
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  row-gap: var(--dc-space-sm);
  column-gap: 0;
  background: white;
  border-top: 1px solid var(--dc-gray-100);
  border-radius: 0 0 var(--dc-radius-sm) var(--dc-radius-sm);
}

/* Tighter spacing for nested groups */
.dc-group-clone .dc-field-group {
  margin-bottom: 0;
}

/* Reduce description text size */
.dc-field .dc-description,
.dc-field-desc {
  font-size: 0.75rem; /* 12px */
  margin-top: var(--dc-space-xs); /* 4px */
  line-height: 1.4;
}

/* Compact form rows */
.dc-form-row {
  margin-bottom: var(--dc-space-sm); /* 8px instead of 10px */
}

/* ============================================
   Visual Improvements - Module & Video Styling
   ============================================ */

/* Module/video clone cards — box-shadow for depth */
.dc-field-group .dc-group-clone {
  background: white;
  border: 1px solid #e8eaed;
  border-radius: 6px;
  padding: 0;
  margin-bottom: 0;
  overflow: hidden;              /* clip header radius flush to card edges */
  transition: var(--dc-transition-fast);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
}

.dc-field-group .dc-group-clone:hover {
  border-color: #c7ccd3;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.09), 0 1px 3px rgba(0, 0, 0, 0.06);
}

/* Cloneable groups — clone cards must be edge-to-edge (no inset padding) */
.dc-field-group.dc-group-cloneable {
  padding: 0;
  overflow: hidden;
}
.dc-field-group.dc-group-cloneable > .dc-field-group-fields {
  padding: 0;
  gap: 0;
}
/* Gap between adjacent clone cards — matches mockup margin-bottom: 8px.
   !important needed to beat ultra-compact: .dc-field-group .dc-group-clone { margin-bottom: 0 !important } */
.dc-field-group.dc-group-cloneable > .dc-field-group-fields > .dc-group-clone {
  margin-bottom: 6px !important;
}
/* Group header inside cloneable group — fills the full width edge-to-edge, no heavy box */
.dc-field-group.dc-group-cloneable > .dc-field-group-header {
  background: transparent;
  border-bottom: none;
  border-left: none !important; /* beats ultra-compact border-left: 3px solid var(--dc-primary) */
  border-radius: 0;
  margin-bottom: 4px;
}

/* Tight spacing between video clones */
.dc-field-group[data-field-id="videos"] .dc-group-clone {
  margin-bottom: 4px;
  padding: 0;
  background: white;
  border: 1px solid #e8eaed;
  border-radius: 6px;
  overflow: hidden;
}

/* Compact bottom "Add" buttons */
.dc-group-add-bottom {
  padding: var(--dc-space-sm) var(--dc-space-md);
  font-size: 0.8125rem;
  margin-top: var(--dc-space-sm);
  border: 1px dashed #cbd5e1;
  background: transparent;
  color: var(--dc-primary);
  border-radius: var(--dc-radius-md);
  transition: var(--dc-transition-fast);
}

.dc-group-add-bottom:hover {
  background: var(--dc-gray-50);
  border-color: var(--dc-primary);
  border-style: solid;
}

/* Compact top "Add" buttons */
.dc-group-add-top {
  padding: var(--dc-space-xs) var(--dc-space-md);
  font-size: 0.8125rem;
}

/* ============================================
   File Upload Fields - Reduce Vertical Space
   ============================================ */

/* ULTRA-COMPACT file upload dropzones */
.tagify.tagify-file .tagify__input {
  min-height: 36px !important; /* MUCH smaller - from 60px */
  padding: var(--dc-space-xs) !important; /* 4px */
  font-size: 0.75rem !important; /* 12px */
  line-height: 1.3 !important;
}

/* Compact file upload tags */
.tagify.tagify-file tag {
  padding: 2px var(--dc-space-xs); /* Very compact */
  margin: 2px; /* Minimal margin */
  font-size: 0.75rem;
}

/* File upload helper text - smaller */
.tagify.tagify-file .tagify__input::before {
  font-size: 0.6875rem !important; /* 11px */
  padding: var(--dc-space-xs) !important;
  line-height: 1.2 !important;
}

/* Reduce spacing around tagify fields */
.tagify-wrapper {
  margin-bottom: var(--dc-space-sm);
}

/* ============================================
   Video Clone Specific Styling
   ============================================ */

/* Video clone headers - slight background for distinction */
[data-field-id="videos"] .dc-clone-header {
  background: #ffffff;
  border: 1px solid #e8eaed;
  margin-bottom: var(--dc-space-sm);
}

[data-field-id="videos"] .dc-clone-header:hover {
  background: #f9fafb;
  border-color: #d1d5db;
}

/* Video content wrapper */
[data-field-id="videos"] .dc-clone-content {
  background: transparent;
  padding: 14px;
}

/* Make video details group even more compact */
[data-field-id="video_details"] .dc-field-group-fields {
  padding: var(--dc-space-xs); /* 4px instead of 8px */
}

/* ============================================
   Collapsible Group Headers - Better Styling
   ============================================ */

/* section_rules, video_details headers */
.dc-field-group-header {
  background: #f9fafb;
  border: 1px solid #e8eaed;
  border-radius: var(--dc-radius-sm);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--dc-gray-700);
  transition: var(--dc-transition-fast);
}

.dc-field-group-header:hover {
  background: #f3f4f6;
  border-color: #d1d5db;
}

.dc-field-group.collapsed .dc-field-group-header {
  margin-bottom: 0;
}

/* ============================================
   Tab Navigation - Compact
   ============================================ */

.dc-form-tabs {
  gap: var(--dc-space-xs);
  margin-bottom: var(--dc-space-md);
}

.dc-form-tab {
  padding: var(--dc-space-sm) var(--dc-space-md);
  font-size: 0.8125rem;
}

/* ============================================
   ULTRA-COMPACT MODE - Maximum Space Saving
   ============================================ */

/* Video clone header — no margin (content has border-top separator) */
[data-field-id="videos"] .dc-clone-header {
  margin-bottom: 0;
}

/* Field group header — brand accent left stripe */
.dc-field-group-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 6px 10px !important;
  font-size: 0.75rem !important;
  min-height: 32px;
  border-left: 3px solid var(--dc-primary);
  border-radius: var(--dc-radius-sm) !important;
}

/* Spacing between clone rows */
.dc-field-group-fields {
  row-gap: 8px !important;
  column-gap: 0 !important;
}

/* Reduce all field margins */
.dc-field {
  margin-bottom: 4px !important;
}

/* Ultra-compact inputs */
.dc-field input[type="text"],
.dc-field input[type="email"],
.dc-field input[type="number"],
.dc-field select,
.dc-field textarea {
  padding: 3px 6px !important; /* Very compact */
  font-size: 0.75rem !important; /* 12px */
  line-height: 1.3 !important;
  min-height: 26px; /* Compact height */
}

/* Ultra-compact textarea */
.dc-field textarea {
  min-height: 50px !important; /* Very short */
  padding: 4px 6px !important;
}

/* Compact labels */
.dc-field label {
  font-size: 0.75rem !important; /* 12px */
  margin-bottom: 2px !important;
}

/* Remove excess spacing */
.dc-form-fields {
  gap: 4px !important;
}

/* Compact module spacing */
.dc-field-group .dc-group-clone {
  padding: 0 !important; /* No card-level padding — header is flush, content has its own padding */
  margin-bottom: 0 !important;
}

/* Tight tagify wrapper */
.tagify {
  margin: 0 !important;
  padding: 2px 4px !important;
  border-radius: var(--dc-radius-md) !important;
}

/* ============================================
   Tagify — DC Design System Integration
   Override Tagify's own CSS custom properties so
   all Tagify inputs inside DC forms use brand tokens.
   Scoped to .dc-form so it never leaks to other instances.
   ============================================ */

.dc-form .tagify {
  /* Border */
  --tags-border-color:       var(--dc-gray-300);
  --tags-hover-border-color: var(--dc-gray-400);
  --tags-focus-border-color: var(--dc-primary);

  /* Tag chip */
  --tag-bg:            rgba(108, 112, 220, 0.09);
  --tag-hover:         rgba(108, 112, 220, 0.18);
  --tag-text-color:    var(--dc-gray-800);
  --tag-border-radius: var(--dc-radius-sm);

  /* Placeholder text */
  --placeholder-color:       var(--dc-gray-400);
  --placeholder-color-focus: var(--dc-gray-300);

  /* Tag remove button */
  --tag-remove-btn-color:      var(--dc-gray-500);
  --tag-remove-btn-bg--hover:  var(--dc-error);

  /* Dropdown */
  --tagify-dd-color-primary: var(--dc-primary);

  /* Structure */
  min-height: 28px;
  border-radius: var(--dc-radius-md) !important;
  background: white;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Focus ring */
.dc-form .tagify.tagify--focus {
  box-shadow: 0 0 0 3px rgba(108, 112, 220, 0.12);
}

/* ── Tag remove button — visible circle, red on hover ── */
.dc-form .tagify__tag__removeBtn {
  width: 16px;
  height: 16px;
  background: var(--dc-gray-200);
  color: var(--dc-gray-500);
  border-radius: 50%;
  flex-shrink: 0;
  transition: background 0.15s ease, color 0.15s ease;
}

.dc-form .tagify__tag__removeBtn::after {
  font-size: 13px;
  line-height: 1;
}

.dc-form .tagify__tag__removeBtn:hover {
  background: var(--dc-error);
  color: #fff;
}

/* Select mode dropdown chevron — replace Tagify's plain ">" character */
.dc-form .tagify.tagify--select::after {
  content: '' !important;
  display: block;
  width: 20px;
  height: 20px;
  position: absolute;
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
  background: url('data:image/svg+xml;charset=UTF-8,%3csvg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"%3e%3cpath d="M6 8l4 4 4-4" stroke="%234b5563" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/%3e%3c/svg%3e') no-repeat center / 14px;
  pointer-events: none;
  transition: transform 0.15s ease;
}

.dc-form .tagify.tagify--select[aria-expanded="true"]::after {
  transform: translateY(-50%) rotate(180deg);
}

/* ============================================
   Conditional Field Visibility
   ============================================ */

/**
 * Hide conditionally invisible fields
 * CRITICAL: DO NOT use display:none - it removes fields from FormData!
 * This would cause autosave to skip hidden fields, losing data on save
 */
.dc-field-hidden {
  visibility: hidden !important;
  position: absolute !important;
  height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: none !important;
}

/* ============================================
   Number Stepper Widget (tagify-number)
   Matches Tagify visual shell — same border, radius, background.
   ============================================ */

.dc-number-widget {
  display: flex;
  align-items: center;
  width: 100%;
  border: 1px solid var(--dc-gray-200, #e5e7eb);
  border-radius: var(--dc-radius-md, 0.5rem);
  background: var(--dc-gray-50, #f9fafb);
  overflow: hidden;
  min-height: 34px;
}

.dc-number-widget:focus-within {
  border-color: var(--dc-primary, #6C70DC);
  box-shadow: 0 0 0 2px rgba(108, 112, 220, 0.15);
  background: #fff;
}

.dc-number-btn {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--dc-gray-500, #6b7280);
  font-size: 1rem;
  line-height: 1;
  padding: 0;
  transition: color 0.15s ease, background 0.15s ease;
  user-select: none;
  -webkit-user-select: none;
}

.dc-number-btn:hover {
  color: var(--dc-primary, #6C70DC);
  background: var(--dc-gray-100, #f3f4f6);
}

.dc-number-btn:active {
  background: var(--dc-gray-200, #e5e7eb);
}

.dc-number-input {
  flex: 1 1 0;
  min-width: 0;
  border: none;
  background: transparent;
  text-align: center;
  font-size: 0.875rem;
  font-family: inherit;
  color: var(--dc-gray-900, #111827);
  padding: 4px 2px;
  line-height: 1.4;
  outline: none;
  -moz-appearance: textfield; /* Firefox — hide native arrows */
  appearance: textfield;
}

/* Hide native spin buttons (Chrome/Safari/Edge) */
.dc-number-input::-webkit-outer-spin-button,
.dc-number-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* ============================================
   Clone Sub-Tab Navigation
   Sits at the top of .dc-clone-content when a
   group defines a 'subtabs' config array.
   Sub-tabs only appear once the accordion is
   expanded (they live inside .dc-clone-content).
   ============================================ */

.dc-clone-subtab-nav {
  display: flex;
  align-items: flex-end;
  gap: 0;
  width: 100%;
  border-bottom: 2px solid var(--dc-gray-200);
  background: none;
  padding: 0;
  margin-bottom: var(--dc-space-sm);
  flex: 0 0 100%;
}

.dc-clone-subtab-link {
  display: flex;
  align-items: center;
  gap: var(--dc-space-sm);
  padding: var(--dc-space-sm) var(--dc-space-lg);
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: none;
  color: var(--dc-gray-500);
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: var(--dc-transition);
  line-height: 1;
  text-transform: none;
  letter-spacing: 0;
}

.dc-clone-subtab-link:hover {
  color: var(--dc-gray-900);
  background: none;
  border-bottom-color: var(--dc-gray-300);
}

/* ── Active state — underline, level-1 clones (modules): indigo ── */
.dc-field-group-fields > .dc-group-clone .dc-clone-subtab-link.active {
  background: none;
  border-bottom: 2px solid #6C70DC;
  color: #6C70DC;
  font-weight: 600;
}

/* ── Active state — underline, level-2 clones (videos): teal ── */
.dc-group-clone .dc-field-group-fields > .dc-group-clone .dc-clone-subtab-link.active {
  background: none;
  border-bottom: 2px solid #0D9488;
  color: #0D9488;
  font-weight: 600;
}

/* ── Active state — underline, level-3+ clones: slate ── */
.dc-group-clone .dc-group-clone .dc-field-group-fields > .dc-group-clone .dc-clone-subtab-link.active {
  background: none;
  border-bottom: 2px solid #64748b;
  color: #64748b;
  font-weight: 600;
}

/* Optional icon inside a sub-tab button — set via 'icon' key in PHP subtab config */
.dc-subtab-icon {
  display: inline-flex;
  align-items: center;
  margin-right: 4px;
  opacity: 0.65;
  flex-shrink: 0;
  vertical-align: middle;
}
.dc-subtab-icon svg {
  width: 12px;
  height: 12px;
  display: block;
}
.dc-clone-subtab-link:hover .dc-subtab-icon,
.dc-clone-subtab-link.active .dc-subtab-icon {
  opacity: 1;
}

/* Sub-tab panels — stretch full width to match clone-content flex layout */
.dc-clone-subtab-panel {
  width: 100%;
  flex: 0 0 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  row-gap: var(--dc-space-sm);
  column-gap: 0;  /* no horizontal gap — column widths (dc-column-*) handle spacing */
}

/* Field groups inside subtab panels must also stretch full width */
.dc-clone-subtab-panel > .dc-field-group {
  flex: 0 0 100%;
  min-width: 0;
  width: 100%;
}

/* ── ALL .dc-field-group directly inside clone content areas → plain section style ──
   Applies regardless of whether the group is collapsible, cloneable, or a plain container.
   Context-driven: nested inside a clone = section divider, not a bordered card.
   The .dc-group-clone cards are unaffected (they are not .dc-field-group). */
.dc-clone-subtab-panel > .dc-field-group,
.dc-clone-content > .dc-field-group {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 0 !important;
}
.dc-clone-subtab-panel > .dc-field-group > .dc-field-group-header,
.dc-clone-content > .dc-field-group > .dc-field-group-header {
  border-left: none !important;
  border-radius: 0 !important;
  background: transparent;
  padding: 6px 0 !important;
}
.dc-clone-subtab-panel > .dc-field-group > .dc-field-group-fields,
.dc-clone-content > .dc-field-group > .dc-field-group-fields {
  padding: 0;
}
/* Re-add top spacing for direct non-group field wrappers (e.g. AND/OR logic select) */
.dc-clone-subtab-panel > .dc-field-group > .dc-field-group-fields > .dc-field-wrapper,
.dc-clone-content > .dc-field-group > .dc-field-group-fields > .dc-field-wrapper {
  padding-top: var(--dc-space-sm);
}