.icon-source-select {
  margin-bottom: 0;
}

:root {
  --color-primary-blue-50: #eaf3f9;
  --color-primary-blue-100: #cadbe9;
  --color-primary-blue-300: #7ea9ca;
  --color-primary-blue-500: #3c76a6;
  --color-primary-blue-900: #072642; /* Brand Deep Navy */

  --color-accent-yellow-500: #feff35; /* Lemon Yellow */
  --color-accent-yellow-600: #e4e624;

  --color-white: #ffffff;
  --color-black: #000000;

  --color-neutral-gray-100: #f4f4f5;
  --color-neutral-gray-200: #e4e4e7;
  --color-neutral-gray-300: #d1d1d5;
  --color-neutral-gray-400: #a1a1aa;
  --color-neutral-gray-600: #52525b;
  --color-neutral-gray-900: #242424;

  --color-success-green-500: #4ccb6d;

  --color-danger-red-300: #f87171;
  --color-danger-red-400: #ef4444;
  --color-danger-red-500: #ec3c43;
  --color-danger-red-600: #dc2626;
  --color-warning-yellow-500: var(--color-accent-yellow-500);

  /* Convenience Theme aliases (recommended) */
  --text-primary: var(--color-primary-blue-900);
  --text-primary-blue-900: var(--color-primary-blue-900);
  --text-primary-blue-500: var(--color-primary-blue-500);
  --text-primary-blue-300: var(--color-primary-blue-300);
  --text-accent-yellow-500: var(--color-accent-yellow-500);

  --text-neutral-gray-100: var(--color-neutral-gray-100);
  --text-neutral-gray-200: var(--color-neutral-gray-200);
  --text-neutral-gray-300: var(--color-neutral-gray-300);
  --text-neutral-gray-400: var(--color-neutral-gray-400);
  --text-neutral-gray-600: var(--color-neutral-gray-600);
  --text-neutral-gray-900: var(--color-neutral-gray-900);

  --text-success-green-500: var(--color-success-green-500);
  --text-danger-red-500: var(--color-danger-red-500);
  --text-warning-yellow-500: var(--color-accent-yellow-500);

  --text-white: var(--color-white);
  --text-black: var(--color-black);

  --bg-primary-blue-50: var(--color-primary-blue-50);
  --bg-primary-blue-100: var(--color-primary-blue-100);
  --bg-primary-blue-300: var(--color-primary-blue-300);
  --bg-primary-blue-500: var(--color-primary-blue-500);
  --bg-primary-blue-900: var(--color-primary-blue-900);

  --bg-white: var(--color-white);
  --bg-black: var(--color-black);

  --bg-neutral-gray-100: var(--color-neutral-gray-100);
  --bg-neutral-gray-200: var(--color-neutral-gray-200);
  --bg-neutral-gray-300: var(--color-neutral-gray-300);
  --bg-neutral-gray-400: var(--color-neutral-gray-400);
  --bg-neutral-gray-600: var(--color-neutral-gray-600);
  --bg-neutral-gray-900: var(--color-neutral-gray-900);

  --bg-accent-yellow-500: var(--color-accent-yellow-500);
  --bg-accent-yellow-600: var(--color-accent-yellow-600);

  --overlay-primary-blue-10: rgba(7, 38, 66, 0.1);
  --overlay-primary-blue-35: rgba(7, 38, 66, 0.35);
  --overlay-primary-blue-50: rgba(7, 38, 66, 0.5);
  --overlay-primary-blue-75: rgba(7, 38, 66, 0.75);
  --overlay-primary-blue-80: rgba(7, 38, 66, 0.8);

  --border-accent-yellow-500: var(--color-accent-yellow-500);
  --border-accent-yellow-600: var(--color-accent-yellow-600);
  --border-primary-blue-500: var(--color-primary-blue-500);
  --border-primary-blue-900: var(--color-primary-blue-900);
  --border-primary-blue-300: var(--color-primary-blue-300);
  --border-white: var(--color-white);
  --border-neutral-gray-200: var(--color-neutral-gray-200);
  --border-neutral-gray-300: var(--color-neutral-gray-300);
  --border-neutral-gray-400: var(--color-neutral-gray-400);
  --border-neutral-gray-600: var(--color-neutral-gray-600);
  --border-danger-red-300: var(--color-danger-red-300);
  --border-danger-red-400: var(--color-danger-red-400);
  --border-danger-red-500: var(--color-danger-red-500);
  --border-danger-red-600: var(--color-danger-red-600);

  /* shadow */
  --shadow-low: 0px 2px 4px rgba(36, 36, 36, 0.08);
  --shadow-medium: 0px 4px 12px rgba(7, 38, 66, 0.12);
  --shadow-high: 0px 16px 24px rgba(7, 38, 66, 0.2);
}

body {
  font-family: "Inter", sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Montserrat", sans-serif;
  overflow-wrap: break-word; /* Prevent overflow */
  margin-block-start: 0;
  margin-block-end: 0;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}

p {
  overflow-wrap: break-word; /* Prevent overflow */
  display: block;
  margin-block-start: 0;
  margin-block-end: 0;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  unicode-bidi: normal;
}

/* Typography/Body/Large — lead / prominent body */
.dmv-label-1 {
  font-weight: 500; /* stronger than regular for emphasis */
  font-size: 1rem; /* scales between mobile and desktop */
  line-height: 1; /* comfortable reading rhythm */
  letter-spacing: 0.01em;
  padding: 0;
  margin: 0;
}

.dmv-label-1 label.components-input-control__label {
  font-weight: 500 !important; /* stronger than regular for emphasis */
  font-size: 1rem !important; /* scales between mobile and desktop */
  line-height: 1 !important; /* comfortable reading rhythm */
  letter-spacing: 0.01em;
  padding: 0;
  margin-bottom: 8px;
  text-transform: capitalize !important;
  color: var(--text-primary) !important;
}

.dmv-label-1 .components-base-control__label {
  font-weight: 500; /* stronger than regular for emphasis */
  font-size: 1rem; /* scales between mobile and desktop */
  line-height: 1; /* comfortable reading rhythm */
  letter-spacing: 0.01em;
  padding: 0;
  margin-bottom: 8px;
  text-transform: capitalize;
  color: var(--text-primary);
}

.dmv-label-2 {
  font-weight: 500; /* stronger than regular for emphasis */
  font-size: 0.875rem; /* slightly smaller for secondary labels */
  line-height: 1; /* comfortable reading rhythm */
  letter-spacing: 0.01em;
  padding: 0;
  margin: 0;
}

@media (min-width: 600px) {
  .block-editor-block-list__block .block-editor-url-input,
  .block-editor-url-input,
  .components-popover .block-editor-url-input {
    min-width: auto;
  }
}

/* Professional error styling - Tailwind + Bootstrap inspired */
.is-error {
  /* Red outline with subtle glow (Tailwind: ring-2 ring-red-500/50) */

  input,
  textarea,
  .components-text-control__input,
  .components-textarea-control__input {
    outline: none !important;
    border-color: var(
      --border-danger-red-500
    ) !important; /* Tailwind red-500 */
    box-shadow:
      0 0 0 3px rgba(239, 68, 68, 0.1),
      /* Subtle red glow */ 0 1px 2px 0 rgba(239, 68, 68, 0.05); /* Soft shadow */
    background-color: rgba(239, 68, 68, 0.02); /* Ultra subtle bg */
  }

  /* Focus state */
  input:focus,
  textarea:focus,
  .components-text-control__input:focus,
  .components-textarea-control__input:focus {
    border-color: var(
      --border-danger-red-600
    ) !important; /* Tailwind red-600 */
    box-shadow:
      0 0 0 3px rgba(220, 38, 38, 0.1),
      /* Stronger glow on focus */ 0 4px 12px rgba(239, 68, 68, 0.15);
  }

  /* Hover state */
  input:hover,
  textarea:hover,
  .components-text-control__input:hover,
  .components-textarea-control__input:hover {
    border-color: var(
      --border-danger-red-300
    ) !important; /* Tailwind red-300 */
  }

  /* WP Gutenberg specific overrides */
  .components-base-control__label {
    color: var(--border-danger-red-600); /* Match error border */
  }

  /* Help text styling */
  .components-base-control__help {
    color: var(--border-danger-red-600);
    font-size: 0.875rem;
    font-weight: 500;
  }
}

/* Tag input error message styling */
.is-error {
  &.components-form-token-field__input-container {
    border-color: var(
      --border-danger-red-600
    ) !important; /* Tailwind red-600 */
    box-shadow:
      0 0 0 3px rgba(220, 38, 38, 0.1),
      /* Stronger glow on focus */ 0 4px 12px rgba(239, 68, 68, 0.15);

    &:focus {
      border-color: var(
        --border-danger-red-600
      ) !important; /* Tailwind red-600 */
      box-shadow:
        0 0 0 3px rgba(220, 38, 38, 0.1),
        /* Stronger glow on focus */ 0 4px 12px rgba(239, 68, 68, 0.15);
    }

    &:hover {
      border-color: var(
        --border-danger-red-300
      ) !important; /* Tailwind red-300 */
    }
  }
  .components-form-token-field__label {
    color: var(--border-danger-red-600); /* Match error border */
  }
}

/* Shake animation on first error (micro-interaction) */
@keyframes shake {
  0%,
  100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-2px);
  }
  75% {
    transform: translateX(2px);
  }
}

.is-error input:focus,
.is-error textarea:focus,
.is-error .components-text-control__input:focus,
.is-error .components-textarea-control__input:focus {
  animation: shake 0.3s ease-in-out;
}

/* ==========================================================
Token Field Messages - Visual Hierarchy 
Error: Highest priority, red, bold 
========================================================== */
.dmv-message--error {
  color: var(--text-danger-red-500);
  font-size: 0.875rem;
  font-weight: 500;
  margin-top: 4px;
}

/* Help: Secondary, grey, normal */
.dmv-message__help {
  color: var(--text-neutral-gray-600);
  font-size: 0.875rem;
  margin-top: 4px;
}

/* Status: Conditional feedback */
.dmv-message__status {
  color: var(--text-warning-yellow-500);
  font-size: 0.875rem;
  padding: 4px 8px;
  background: rgba(255, 193, 7, 0.1);
  border-radius: 4px;
}