/* editor.css */

.article-section-image-editor {
  max-width: 100%;
}

.article-section-image-editor .components-text-control__input,
.article-section-image-editor .components-textarea-control__input {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.article-section-image-editor .components-textarea-control__input {
  min-height: 120px;
  resize: vertical;
}

/* Media upload button styles */
.article-section-image-editor .components-button.is-primary {
  background-color: #0073aa;
  border-color: #0073aa;
}

.article-section-image-editor .components-button.is-primary:hover {
  background-color: #005a87;
  border-color: #005a87;
}

.article-section-image-editor .components-button.is-destructive {
  color: #cc1818;
  border-color: #cc1818;
}

.article-section-image-editor .components-button.is-destructive:hover {
  background-color: #cc1818;
  border-color: #cc1818;
  color: #fff;
}

/* Inspector controls styling */
.article-section-image-editor .components-panel__body-title {
  font-weight: 600;
}

.article-section-image-editor .components-base-control__help {
  font-size: 12px;
  font-style: italic;
  color: #757575;
}

/* Block preview styling */
.article-section-image-editor h2 {
  font-family: var(--font-saol, Georgia, serif);
  margin: 0;
}

.article-section-image-editor .dashicons {
  font-size: 16px;
  line-height: 1;
}

/* Responsive preview */
@media (max-width: 782px) {
  .article-section-image-editor .components-text-control__input,
  .article-section-image-editor .components-textarea-control__input {
    font-size: 16px; /* Prevent zoom on iOS */
  }
}

/* Loading spinner */
.article-section-image-editor .components-spinner {
  display: block;
  margin: 20px auto;
}

/* Image preview container */
.article-section-image-editor .image-preview-container {
  position: relative;
  display: inline-block;
}

.article-section-image-editor .image-preview-container img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
}

/* Quick edit section */
.article-section-image-editor .quick-edit-section {
  border-top: 1px solid #ddd;
  margin-top: 16px;
  padding-top: 16px;
}

.article-section-image-editor .quick-edit-section .components-base-control {
  margin-bottom: 12px;
}

.article-section-image-editor .quick-edit-section .components-base-control:last-child {
  margin-bottom: 0;
}