/* =========================================================
   BOOWS Signature Field
   ========================================================= */

/* === Default Theme === */
.boows-signature {
  display: block;
  background-color: var(--boows-input-bg, #fff);
  width: 100%;
  max-width: 100%;
  min-height: 180px;
  border: 2px dashed rgba(var(--boows-col-primary-rgb, 8, 162, 154), 0.55);
  border-radius: var(--boows-default-border-container);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), inset 0 0 0 4px rgba(var(--boows-col-primary-rgb, 8, 162, 154), 0.07);
  cursor: crosshair;
  touch-action: none;
}

.boows-signature-container {
  position: relative;
  padding: var(--boows-space-2, .75rem);
  border: 1px solid var(--boows-input-border);
  border-radius: var(--boows-default-border-container);
  background: var(--boows-surface, #fff);
}

.boows-signature-hint {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin-bottom: .5rem;
  padding: .2rem .6rem;
  border-radius: 999px;
  background: rgba(var(--boows-col-primary-rgb, 8, 162, 154), .12);
  color: var(--boows-col-primary, #08a29a);
  font-size: .78rem;
  font-weight: 600;
}

.boows-signature-hint::before {
  content: "draw";
  font-family: "Material Icons";
  font-size: 1rem;
  line-height: 1;
}

.boows-signature-container:focus-within {
  border-color: var(--boows-col-primary);
  box-shadow: 0 0 0 .2rem rgba(var(--boows-col-primary-rgb, 8, 162, 154), .2);
}

.boows-signature-container .boows-submit {
  margin-top: var(--boows-whitespace-l1);
}

/* === Rounded Theme === */
body.boows-rounded .boows-signature {
  border-radius: var(--boows-default-border-container);
}

/* === Pill Theme === */
body.boows-pill .boows-signature {
  border-radius: 24px;
}