/* The published preview has its own public styles inside an isolated frame. */
.kconv-admin #kconv-published-panel[hidden],
.kconv-admin .kconv-canvas-paper[hidden] {
  display: none !important
}

#kconv-published-panel {
  width: 100%;
  max-width: 100%;
  margin: 0 auto
}

.kconv-rendered-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px
}

.kconv-rendered-toolbar p {
  margin: 0;
  color: #42583e;
  font-size: 12px;
  line-height: 1.5
}

.kconv-rendered-toolbar .button {
  font-size: 11px;
  white-space: nowrap
}

#kconv-published-frame {
  display: block;
  background: #fff;
  border: 1px solid #c8d5c5;
  border-radius: 10px;
  width: 100%;
  min-height: 180px;
  margin: 0 auto;
  transition: width .15s ease
}

#kconv-published-frame[hidden] {
  display: none
}

#kconv-published-panel[data-viewport=mobile] #kconv-published-frame {
  width: 360px;
  max-width: 100%
}

.kconv-admin #kconv-published-panel>.description {
  color: #42583e;
  font-size: 12px;
  line-height: 1.6;
  margin: 14px 0 0
}

.kconv-app-nav.is-editor .kconv-app-links {
  gap: 13px
}

.kconv-breadcrumb-current {
  align-self: center;
  color: #52634f;
  font-size: 12px;
  white-space: nowrap
}

.kconv-appearance-options {
  grid-template-columns: repeat(3, minmax(0, 1fr))
}

.kconv-branding-options {
  display: grid;
  gap: 18px;
  margin: 24px 0
}

.kconv-branding-options label {
  display: block;
  color: #263f31;
  font-weight: 600
}

.kconv-branding-options input {
  display: block;
  width: 100%;
  max-width: 640px;
  min-height: 44px;
  margin-top: 8px
}

.kconv-brand-swatch {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #42583e;
  margin: 15px 0
}

#kconv-brand-color-swatch {
  display: block;
  width: 28px;
  height: 28px;
  border: 1px solid #52634f;
  border-radius: 50%
}

.kconv-design-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  container: kconv-design-fields / inline-size
}

.kconv-design-fields>* {
  grid-column: 1/-1;
  min-width: 0
}

@container kconv-design-fields (min-width:520px) {
  .kconv-design-fields>.kconv-preview-field[data-kconv-width=half] {
    grid-column: auto/span 1
  }
}

.kconv-canvas-paper[data-kconv-font=serif] :is(.kconv-canvas-intro, #kconv-live-preview) {
  font-family: Georgia, "Times New Roman", serif
}

.kconv-canvas-paper[data-kconv-font=system] :is(.kconv-canvas-intro, #kconv-live-preview) {
  font-family: system-ui, -apple-system, sans-serif
}

.kconv-canvas-paper[data-kconv-width=standard] {
  max-width: 700px;
  margin: 0 auto
}

.kconv-canvas-paper[data-kconv-width=wide] {
  max-width: 960px;
  margin: 0 auto
}

.kconv-canvas-paper[data-kconv-width=full] {
  max-width: none
}

.kconv-canvas-paper .kconv-canvas-intro[hidden] {
  display: none
}

.kconv-canvas-paper .kconv-canvas-intro h2 {
  overflow-wrap: anywhere
}

.kconv-admin .kconv-canvas-paper #kconv-live-preview .kconv-preview-nav .button-primary,
.kconv-admin .kconv-canvas-paper #kconv-live-preview[data-mode=design] .kconv-preview-nav .button-primary:disabled {
  color: var(--kconv-style-ink, #fff) !important
}

.kconv-admin .kconv-canvas-paper[data-kconv-radius=square] #kconv-live-preview :is(input, select, textarea, .button) {
  border-radius: 0
}

.kconv-admin .kconv-canvas-paper[data-kconv-radius=rounded] #kconv-live-preview :is(input, select, textarea) {
  border-radius: 14px
}

.kconv-admin .kconv-canvas-paper[data-kconv-radius=rounded] #kconv-live-preview .button-primary {
  border-radius: 999px
}

.kconv-admin .kconv-canvas-paper #kconv-live-preview[data-mode=design] {
  padding-top: 18px
}

@media(max-width:782px) {
  .kconv-appearance-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px
  }

  .kconv-branding-options input {
    font-size: 16px
  }

  .kconv-app-nav.is-editor .kconv-app-links {
    width: auto;
    order: initial;
    min-height: 0
  }

  .kconv-app-nav.is-editor {
    padding-top: 12px;
    padding-bottom: 12px;
    gap: 10px 18px
  }

  .kconv-app-nav.is-editor .kconv-edition {
    margin-left: auto
  }

  .kconv-rendered-toolbar {
    flex-wrap: wrap
  }

  .kconv-breadcrumb-current {
    font-size: 11px
  }
}

@media(max-width:420px) {
  .kconv-app-nav.is-editor .kconv-brand img {
    width: 155px
  }

  .kconv-breadcrumb-current {
    display: none
  }

  .kconv-appearance-options {
    grid-template-columns: 1fr
  }

  .kconv-rendered-toolbar .button {
    min-height: 40px
  }
}

@media(prefers-reduced-motion:reduce) {
  #kconv-published-frame {
    transition: none
  }
}

.kconv-admin .kconv-appearance-panel>p {
  color: #52634f
}

.kconv-admin .kconv-library-create {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap
}