/* ── SVG icon data URIs ─────────────────────────────────────────────────── */
/* These inline SVGs fix missing glyphicons in socialbase and power the
   ::before icons on links/add-more buttons that never had glyphicon spans. */

/* checkmark — white, for Save on blue */
/* eye — dark gray, for Preview */
/* trash — red, for Delete / Remove */
/* plus — blue, for Add another item */

/* ── Node edit form: main action bar ───────────────────────────────────── */

.node-form .form-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 20px 0 8px;
  border-top: 2px solid #e5e7eb;
  margin-top: 24px;
  flex-wrap: wrap;
}

/* Base for all buttons and links in the action bar */
.node-form .form-actions .button,
.node-form .form-actions .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 11px 28px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.4px;
  cursor: pointer;
  position: relative;
  text-decoration: none !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease;
  border: none;
}
.node-form .form-actions .button:hover,
.node-form .form-actions .btn:hover {
  transform: translateY(-2px);
  text-decoration: none !important;
}
.node-form .form-actions .button:active,
.node-form .form-actions .btn:active {
  transform: translateY(0);
}

/* Save — primary blue */
.node-form .form-actions .button--primary,
.node-form .form-actions .btn-success {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
  color: #fff !important;
  box-shadow: 0 4px 16px rgba(37, 99, 235, 0.38);
  border: none !important;
}
.node-form .form-actions .button--primary:hover,
.node-form .form-actions .btn-success:hover {
  background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%) !important;
  box-shadow: 0 7px 22px rgba(37, 99, 235, 0.52);
  color: #fff !important;
}

/* Preview — neutral gray */
.node-form .form-actions #edit-preview,
.node-form .form-actions .btn-default:not(.button--danger) {
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%) !important;
  color: #374151 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10);
  border: 1.5px solid #cbd5e1 !important;
}
.node-form .form-actions #edit-preview:hover,
.node-form .form-actions .btn-default:not(.button--danger):hover {
  background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%) !important;
  box-shadow: 0 5px 16px rgba(0, 0, 0, 0.15);
  color: #1f2937 !important;
}

/* Delete — danger link pushed to far right */
.node-form .form-actions .button--danger {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  background: transparent !important;
  color: #dc2626 !important;
  border: 1.5px solid #fca5a5 !important;
  box-shadow: none !important;
  margin-left: auto;
  order: 99;
  padding: 11px 24px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none !important;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}
.node-form .form-actions .button--danger:hover {
  background: #fee2e2 !important;
  border-color: #dc2626 !important;
  box-shadow: 0 4px 14px rgba(220, 38, 38, 0.2) !important;
  color: #b91c1c !important;
  transform: translateY(-2px);
  text-decoration: none !important;
}
.node-form .form-actions .button--danger:active {
  transform: translateY(0);
}

/* Trash icon on the Delete <a> link via ::before */
.node-form .form-actions .button--danger::before {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  flex-shrink: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23dc2626' d='M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z'/%3E%3C/svg%3E");
}

/* ── Glyphicon SVG fixes (socialbase reserves space but never fills them) ── */

/* Save → white checkmark */
.node-form .glyphicon-ok::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E");
}

/* Preview → dark gray eye */
.node-form .glyphicon-eye-open::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23374151' d='M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z'/%3E%3C/svg%3E");
}

/* Remove / Delete → red trash */
.node-form .glyphicon-trash::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23dc2626' d='M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z'/%3E%3C/svg%3E");
}

/* ── "Remove" buttons in field widgets (image / video / attachments) ─────── */

.node-form .field--widget-image-image .button,
.node-form .field--widget-media-library-widget .button,
.node-form [class*="field--widget"] .button[value="Remove"],
.node-form [class*="field--widget"] .btn[value="Remove"] {
  background: transparent !important;
  color: #dc2626 !important;
  border: 1px solid #fca5a5 !important;
  box-shadow: none;
  font-size: 13px;
  padding: 6px 14px;
  border-radius: 6px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
  text-decoration: none !important;
}
.node-form [class*="field--widget"] .button[value="Remove"]:hover,
.node-form [class*="field--widget"] .btn[value="Remove"]:hover {
  background: #fee2e2 !important;
  border-color: #dc2626 !important;
  transform: translateY(-1px);
}

/* Trash icon via the glyphicon span already inside these buttons */
.node-form [class*="field--widget"] .glyphicon-trash::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23dc2626' d='M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z'/%3E%3C/svg%3E");
}

/* ── "Add another item" button ───────────────────────────────────────────── */

.node-form .field-add-more-submit {
  background: transparent !important;
  color: #2563eb !important;
  border: 1.5px solid #93c5fd !important;
  box-shadow: none;
  font-size: 13px;
  font-weight: 600;
  padding: 7px 16px;
  border-radius: 6px;
  display: inline-flex !important;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
  text-decoration: none !important;
}
.node-form .field-add-more-submit:hover {
  background: #eff6ff !important;
  border-color: #2563eb !important;
  transform: translateY(-1px);
}

/* Plus icon on Add another item via ::before */
.node-form .field-add-more-submit::before {
  content: '';
  display: inline-block;
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%232563eb' d='M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z'/%3E%3C/svg%3E");
}

/* ── Cancel button ───────────────────────────────────────────────────────── */

.form-actions .itoldu-cancel-btn {
  display: inline-flex !important;
  align-items: center;
  gap: 5px;
  background: transparent !important;
  color: #6b7280 !important;
  border: 1.5px solid #d1d5db !important;
  box-shadow: none !important;
  font-size: 14px;
  font-weight: 600;
  padding: 11px 24px;
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none !important;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.form-actions .itoldu-cancel-btn:hover {
  background: #f3f4f6 !important;
  border-color: #9ca3af !important;
  color: #374151 !important;
  text-decoration: none !important;
  transform: none;
}