/* Painel de montagem: etapas, campos do formulário, envio de fotos,
   frases de apoio, formatos, cores, dados legais e a barra do CONFIRMA. */

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 16px 18px 20px;
  min-width: 0;
}

/* etapas (abas) */
.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin: 0 0 16px;
  border-bottom: 1px solid var(--line);
}

.step-tab {
  display: flex;
  align-items: center;
  gap: 9px;
  border: 0;
  background: none;
  padding: 6px 2px 10px;
  margin-bottom: -1px;
  border-bottom: 3px solid transparent;
  color: var(--muted);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  text-align: left;
  min-width: 0;
}

.step-tab .k {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: var(--key);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 17px;
  font-weight: 800;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.4);
}

.step-tab[aria-selected='true'] {
  color: var(--text);
  border-bottom-color: var(--confirma);
}

.step-tab .done {
  display: none;
}

@media (max-width: 520px) {
  .step-tab {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 5px;
    font-size: 13px;
    padding-bottom: 8px;
  }

  .step-tab .k {
    width: 32px;
    height: 32px;
    font-size: 16px;
  }
}

.step-panel[hidden] {
  display: none;
}

.step-panel h2 {
  margin: 0 0 4px;
  font-size: 20px;
  font-weight: 800;
  font-stretch: 112%;
}

.help {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 14px;
  max-width: 62ch;
}

/* envio de foto */
.upload {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 12px 14px;
  margin: 0 0 14px;
  border-radius: 14px;
  border: 2px dashed var(--line);
  background: var(--panel-2);
  text-align: left;
  cursor: pointer;
}

.upload:hover {
  border-color: var(--muted);
}

.upload.done {
  border-style: solid;
}

.thumb {
  flex: none;
  width: 58px;
  height: 58px;
  border-radius: 12px;
  background: var(--line) center/cover no-repeat;
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: 26px;
  font-weight: 400;
}

.upload.done .thumb {
  color: transparent;
}

.upload strong {
  display: block;
  font-size: 16px;
}

.upload small {
  display: block;
  color: var(--muted);
  font-size: 13px;
}

.privacy {
  margin: 0 0 16px;
  font-size: 13px;
  color: var(--muted);
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

.privacy svg {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

/* campos */
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 0 14px;
  border: 0;
  padding: 0;
  min-width: 0;
}

.field > span,
.field > legend {
  font-weight: 700;
  font-size: 14px;
  padding: 0;
}

.field em {
  font-style: normal;
  font-weight: 500;
  color: var(--muted);
}

.field small {
  color: var(--muted);
  font-size: 12.5px;
}

.field input,
.field select {
  width: 100%;
  font: inherit;
  font-size: 16px;
  padding: 11px 13px;
  border-radius: 10px;
  border: 1.5px solid var(--line);
  background: var(--panel-2);
  color: var(--text);
}

.field input:focus,
.field select:focus {
  border-color: var(--focus);
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 25%, transparent);
}

.row2 {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 12px;
}

/* frases de apoio */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chip {
  border: 1.5px solid var(--line);
  background: var(--panel-2);
  border-radius: 999px;
  padding: 8px 14px;
  font-weight: 800;
  font-size: 14px;
  cursor: pointer;
}

.chip[aria-checked='true'] {
  background: var(--key);
  border-color: var(--key);
  color: #fff;
}

/* formatos */
.formats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.fmt {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 12px 10px;
  border-radius: 12px;
  border: 1.5px solid var(--line);
  background: var(--panel-2);
  cursor: pointer;
  text-align: left;
}

.fmt[aria-checked='true'] {
  border-color: var(--confirma);
  box-shadow: inset 0 0 0 1.5px var(--confirma);
}

.fmt b {
  font-size: 14px;
  line-height: 1.2;
}

.fmt small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.25;
}

.ico {
  display: block;
  background: var(--key);
  border-radius: 4px;
  position: relative;
}

.ico.sq {
  width: 30px;
  height: 30px;
}

.ico.tall {
  width: 20px;
  height: 34px;
}

.ico.circ::after {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: var(--panel-2);
}

.ico.split::after {
  content: '';
  position: absolute;
  left: 4px;
  right: 4px;
  top: 4px;
  height: 14px;
  background: var(--panel-2);
  border-radius: 2px;
}

.ico.tall::after {
  content: '';
  position: absolute;
  left: 3px;
  right: 3px;
  top: 3px;
  height: 18px;
  background: var(--panel-2);
  border-radius: 2px;
}

/* cores */
.swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.sw {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 0;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18);
  position: relative;
}

.sw[aria-checked='true'] {
  box-shadow:
    0 0 0 3px var(--panel),
    0 0 0 5.5px var(--text);
}

.sw.custom {
  background: conic-gradient(#d7191c, #f7c600, #0e9f4f, #1e5bd6, #6b2fb3, #d7191c);
  overflow: hidden;
}

.sw.custom input {
  position: absolute;
  inset: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  border: 0;
  padding: 0;
}

/* dados para material oficial */
details.legal {
  border-top: 1px solid var(--line);
  padding-top: 12px;
  margin-top: 4px;
}

details.legal summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 14px;
}

details.legal[open] summary {
  margin-bottom: 10px;
}

.next-row {
  display: flex;
  justify-content: flex-end;
  margin-top: 4px;
}

/* barra do CONFIRMA: fixa no celular, dentro do painel no computador */
.confirm-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  background: var(--page);
  background: color-mix(in srgb, var(--page) 88%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
}

@media (min-width: 900px) {
  .confirm-bar {
    position: sticky;
    bottom: 16px;
    padding: 18px 0 0;
    background: none;
    border: 0;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}