.sm-note {
  border-radius: 8px;
  border-left: 4px solid transparent;
  padding: 15px 34px 13px 69px;
  margin: 8px 0;
  position: relative;
  display: block;
  width: 100%;
  max-width: 100%;
  border: solid 2px;
  line-height: 1.5;
}

.sm-note > *:last-child {
  margin-bottom: 0;
}

.sm-note::before {
  position: absolute;
  left: 19px;
  top: calc(15px + 0.6em);
  transform: translateY(-50%);
  width: 1.75rem;
  height: 1.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-size: 1.05rem;
  line-height: 1;
  font-weight: 700;
  font-family: "Segoe UI Symbol", "Noto Sans Symbols 2", "Arial Unicode MS", sans-serif;
  background: rgba(255, 255, 255, 0.65);
}

.sm-note ul,
.sm-note ol {
  margin: 4px 0 4px 18px;
}

.sm-note img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  margin-top: 4px;
}

.sm-note--warning {
  background: color-mix(in srgb, var(--color-error, #d63b3b) 12%, #ffffff);
  border-color: var(--color-error, #d63b3b);
  color: color-mix(in srgb, var(--color-error, #d63b3b) 72%, #000000);
}
.sm-note--warning::before {
  content: "";
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23d63b3b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M10.363 3.591l-8.106 13.534a1.914 1.914 0 0 0 1.636 2.871h16.214a1.914 1.914 0 0 0 1.636 -2.87l-8.106 -13.536a1.914 1.914 0 0 0 -3.274 0'/%3E%3Cpath d='M12 16h.01'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

.sm-note--info {
  background: color-mix(in srgb, var(--color-info, #7aafc0) 12%, #ffffff);
  border-color: var(--color-info, #7aafc0);
  color: color-mix(in srgb, var(--color-info, #7aafc0) 72%, #000000);
}
.sm-note--info::before {
  content: "";
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%237aafc0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M18 7v14l-6 -4l-6 4v-14a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

.sm-note--success {
  background: #eafaf3;
  border-color: var(--color-success, #1fad6e);
  color: #0f5132;
}
.sm-note--success::before {
  content: "";
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%231fad6e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M8.56 3.69a9 9 0 0 0 -2.92 1.95'/%3E%3Cpath d='M3.69 8.56a9 9 0 0 0 -.69 3.44'/%3E%3Cpath d='M3.69 15.44a9 9 0 0 0 1.95 2.92'/%3E%3Cpath d='M8.56 20.31a9 9 0 0 0 3.44 .69'/%3E%3Cpath d='M15.44 20.31a9 9 0 0 0 2.92 -1.95'/%3E%3Cpath d='M20.31 15.44a9 9 0 0 0 .69 -3.44'/%3E%3Cpath d='M20.31 8.56a9 9 0 0 0 -1.95 -2.92'/%3E%3Cpath d='M15.44 3.69a9 9 0 0 0 -3.44 -.69'/%3E%3Cpath d='M9 12l2 2l4 -4'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

.sm-note--note {
  background: #f5f7fa;
  border-color: #7c8aa0;
  color: #243447;
}
.sm-note--note::before {
  content: "";
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%237c8aa0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M22 9l-10 -4l-10 4l10 4l10 -4v6'/%3E%3Cpath d='M6 10.6v5.4a6 3 0 0 0 12 0v-5.4'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

/* Gutenberg list spacing styles for core/list block. */
.editor-styles-wrapper .wp-block-list.is-style-sm-list-compact > li {
  margin-bottom: 4px;
}

.editor-styles-wrapper .wp-block-list.is-style-sm-list-spacious > li {
  margin-bottom: 12px;
}

.block-editor-block-list__layout .sm-note {
  margin: 6px 0;
}

.sm-user-steps .sm-note,
.sm-user-step__content .sm-note {
  display: inline-block;
  width: fit-content;
  max-width: 100%;
}

.sm-user-steps {
  counter-reset: sm-step;
  margin: 14px 0;
}

.sm-user-steps > .sm-user-step,
.sm-user-steps > .block-editor-inner-blocks > .block-editor-block-list__layout > .sm-user-step {
  position: relative;
  margin: 0 0 12px;
  counter-increment: sm-step;
  border: 1px solid var(--color-border-light, rgba(15, 107, 132, 0.15));
  border-radius: 8px;
  background: #fdfefe;
  overflow: hidden;
}

.sm-user-step__header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px 10px 44px;
  background: var(--color-bg-light, #eaf4f7);
  border-bottom: 1px solid var(--color-border-light, rgba(15, 107, 132, 0.15));
  min-height: 46px;
}

.sm-user-step__header::before {
  content: counter(sm-step);
  position: absolute;
  left: 12px;
  top: 11px;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: var(--color-accent-2, #ba4a4a);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  line-height: 24px;
  text-align: center;
}

.sm-user-step__chevron {
  display: none;
}

.sm-user-step__title {
  margin: 0;
  font-size: 16px;
  color: var(--color-primary-dark, #0f6b84);
}

.sm-user-step__body {
  display: flex;
  align-items: stretch;
  gap: 12px;
  padding: 12px;
}

.sm-user-step__content {
  flex: 1.6;
  min-width: 0;
}

.sm-user-step__content > *:first-child {
  margin-top: 0;
}

.sm-user-step__content > *:last-child {
  margin-bottom: 0;
}

.sm-user-step__content:empty {
  display: none;
}

.sm-user-step__content:empty + .sm-user-step__image-slot {
  flex: 1 1 100%;
  width: 100%;
}

.sm-user-step__image-slot {
  flex: 1;
  border: 1px dashed var(--color-border-light, rgba(15, 107, 132, 0.15));
  border-radius: 8px;
  min-height: 160px;
  padding: 8px;
  background: #f9fcfc;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  overflow: hidden;
  box-sizing: border-box;
}

/* Backward compatibility for older saved markup that still outputs empty image slots. */
body:not(.wp-admin) .sm-user-step__image-slot.is-empty,
body:not(.wp-admin) .sm-user-step__image-slot:empty {
  display: none;
}

.sm-user-step__body > .sm-user-step__image-slot:only-child,
.sm-user-step__body.sm-user-step__body--image-only > .sm-user-step__image-slot {
  flex: 0 1 auto;
  width: auto;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.sm-user-step__image {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 360px;
  object-fit: contain;
  height: auto;
  border-radius: 6px;
}

.sm-user-step__image-actions {
  margin-top: 8px;
  display: flex;
  gap: 6px;
  justify-content: flex-end;
  flex-wrap: wrap;
  align-self: flex-end;
}

@media (max-width: 900px) {
  .sm-user-step__body {
    flex-direction: column;
  }
}

/* Editor-only cleanup for easier block editing (frontend remains unchanged). */
body.wp-admin .editor-styles-wrapper .sm-user-step__body {
  flex-direction: column;
  gap: 10px;
}

body.wp-admin .editor-styles-wrapper .sm-user-step__content,
body.wp-admin .editor-styles-wrapper .sm-user-step__image-slot {
  width: 100%;
  flex: 1 1 auto;
}

body.wp-admin .editor-styles-wrapper .sm-user-step__image-slot {
  min-height: 120px;
}

body.wp-admin .editor-styles-wrapper .sm-user-step__image-actions {
  justify-content: flex-end;
}

body.wp-admin .editor-styles-wrapper .sm-user-step {
  margin-bottom: 16px;
}

body.wp-admin .editor-styles-wrapper .sm-user-step__header {
  border-radius: 8px 8px 0 0;
}

body.wp-admin .editor-styles-wrapper .sm-user-step__body {
  border: 1px solid var(--color-border-light, rgba(15, 107, 132, 0.15));
  border-top: 0;
  border-radius: 0 0 8px 8px;
  background: #fcfefe;
}

body.wp-admin .editor-styles-wrapper .sm-user-step__image-slot {
  border-style: solid;
  background: #fff;
  padding: 10px;
}

body.wp-admin .editor-styles-wrapper .sm-user-step__image-slot .components-button {
  white-space: nowrap;
}

body.wp-admin .editor-styles-wrapper .sm-user-step__image-slot img {
  width: auto;
  max-width: 100%;
  max-height: 320px;
  object-fit: contain;
}

body.wp-admin .editor-styles-wrapper .sm-user-steps > .block-editor-inner-blocks > .block-editor-block-list__layout > .block-list-appender {
  margin: 4px 0 0;
}

body.wp-admin .editor-styles-wrapper .sm-user-steps > .block-editor-inner-blocks > .block-editor-block-list__layout > .block-list-appender .block-editor-button-block-appender {
  width: 100%;
  min-height: 44px;
  border: 1px dashed var(--color-border-light, rgba(15, 107, 132, 0.15));
  border-radius: 8px;
  justify-content: center;
}