/**
 * Advanced Signature Component Styles
 * CSS for styled-components SSR compatibility
 * Targets the generated styled-components classes by their semantic structure
 */

.form-advanced-signature-wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.form-advanced-signature-wrapper .form-sub-label-container {
  order: 1;
}

/* Container - first child of wrapper */
.form-advanced-signature-wrapper > div[class*="sc-"] {
  border: 1px solid #C8CEED !important;
  border-radius: 4px !important;
  overflow: hidden;
  background-color: #fff;
  font-family: 'Circular', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: 100%;
}

/* Tab Switcher - first div child of container */
.form-advanced-signature-wrapper > div[class*="sc-"] > div[class*="sc-"]:first-child {
  display: flex;
  width: 100%;
  height: 36px;
  flex-shrink: 0;
}

/* Tab Buttons */
.form-advanced-signature-wrapper button[class*="sc-"][aria-selected] {
  flex: 1;
  height: 36px;
  padding: 10px 26px;
  border: none;
  color: #0A1551;
  font-family: 'Circular', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 12px;
  line-height: 16px;
  text-align: center;
  cursor: pointer;
  outline: none;
  transition: background-color 0.15s ease;
  background-color: #F3F3FE;
}

.form-advanced-signature-wrapper button[class*="sc-"][aria-selected="true"] {
  background-color: #FFFFFF;
}

.form-advanced-signature-wrapper button[class*="sc-"][aria-selected]:first-child {
  border-right: 0.756098px solid #C8CEED;
  border-radius: 4px 0px 0px 0px;
}

.form-advanced-signature-wrapper button[class*="sc-"][aria-selected]:last-child {
  border-radius: 0px 4px 0px 0px;
}

.form-advanced-signature-wrapper button[class*="sc-"][aria-selected]:hover {
  background-color: #E8E8F8;
}

.form-advanced-signature-wrapper button[class*="sc-"][aria-selected="true"]:hover {
  background-color: #FFFFFF;
}

.form-advanced-signature-wrapper button[class*="sc-"][aria-selected]:focus-visible {
  box-shadow: inset 0 0 0 2px #0A1551;
}

/* Canvas Wrapper - second div child */
.form-advanced-signature-wrapper > div[class*="sc-"] > div[class*="sc-"]:nth-child(2) {
  position: relative;
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-sizing: border-box;
}

/* Canvas Container */
.form-advanced-signature-wrapper > div[class*="sc-"] > div[class*="sc-"]:nth-child(2) > div[class*="sc-"] {
  position: relative !important;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.form-advanced-signature-wrapper canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* Signature placeholder SVG with pen icon - target parent div with emptyCanvas class */
.form-advanced-signature-wrapper div.emptyCanvas canvas,
.form-advanced-signature-wrapper canvas.emptyCanvas,
.form-advanced-signature-wrapper canvas[data-empty="true"] {
  background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCAyMDAgNDMiPgogIDxwYXRoIHN0cm9rZT0iI0M4Q0VFRCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjEuNTgiIGQ9Ik0xIDM4LjYwMmMxMS4yNDYgMy4xOTcgMjIuMTgyLS45OSAzMS41MDgtNy4xNzIgNC45MzItMy4yNyA5LjgyNi03LjE4MyAxMi44MjUtMTIuMzQxIDEuMTk1LTIuMDU3IDIuNjU2LTUuNjI2LTEuMTA2LTUuNjU4LTQuMDkzLS4wMzQtNy4xNCAzLjY2Mi04LjY2OCA3LjAyMi0yLjE5IDQuODE5LTIuMjY4IDEwLjUyNi40MDcgMTUuMTcgMi41MzEgNC4zOTUgNi43NzggNi40NzQgMTEuODQ1IDUuNjIgNS4yOTMtLjg5MyA5LjkyLTQuNTA4IDEzLjc2NS03Ljk4NmE0MC43MTQgNDAuNzE0IDAgMCAwIDMuOTY2LTQuMDkzYy4xNDItLjE3LjY0Mi0xLjAwNi45NjYtMS4wNjQuMTItLjAyMS4yOTggMy42NDMuMzMgMy44NDMuMjg4IDEuNzkgMS4xOTEgMy44MDYgMy4zMDUgMy44NjcgMi42OS4wNzggNC45NC0yLjE3MiA2Ljc1LTMuODMuNjEtLjU1OSAyLjU1LTMuMjQxIDMuNTgzLTMuMjQxLjQyNSAwIDEuMjQ5IDIuMTQzIDEuNDM3IDIuNDI4IDIuNDg0IDMuNzY0IDYuMTMyIDIuNDAxIDguOTYtLjIzOC41Mi0uNDg1IDMuMzA1LTQuMzY3IDQuNDM2LTMuNjY3LjkxMS41NjMgMS4zMTMgMS44OTMgMS43OCAyLjc3OC43NiAxLjQ0MSAxLjcyMiAyLjQ2OCAzLjMzIDMuMDA0IDMuNDkzIDEuMTY2IDcuMjYxLTIuMTAyIDEwLjgwMy0yLjEwMiAxLjAzMyAwIDEuNTYxLjU2OCAyLjExIDEuMzUxLjc0OSAxLjA2OCAxLjUyMSAxLjgxMyAyLjg3MyAyLjEwMyA0LjE4OC44OTggNy42MTctMy4wNzcgMTEuNjY3LTIuNzI4IDEuMTgxLjEwMSAyLjA2MyAxLjI5MiAyLjk0OSAxLjkyNyAxLjc4OCAxLjI4IDMuOTM4IDIuMTY3IDYuMTI3IDIuNDc4IDMuNTA5LjQ5OSA3LjAyNy0uMTYyIDEwLjQ0Ny0uOSA1LjkwNS0xLjI3NyAxMS43NTItMi43OTkgMTcuNjY3LTQuMDMxIi8+CiAgPGcgZmlsbD0iI0M4Q0VFRCIgY2xpcC1wYXRoPSJ1cmwoI2EpIj4KICAgIDxwYXRoIGQ9Ik0xOTYuNTE0IDE3LjY1NyAxODQuNDkxIDMuMTNhLjY2NS42NjUgMCAwIDAtLjkzOC0uMDg5bC0yLjkwNSAyLjQwNWEuNjY2LjY2NiAwIDAgMC0uMDg5LjkzOGwxMi4wMjMgMTQuNTI2YS42NjQuNjY0IDAgMCAwIC40NTEuMjM5LjY2Ni42NjYgMCAwIDAgLjQ4OC0uMTVsMi45MDUtMi40MDVhLjY2Ni42NjYgMCAwIDAgLjA4OC0uOTM4em0tMTUuMDc3LTguMTIxLTEwLjU4MiAyLjg2OWEuNjY2LjY2NiAwIDAgMC0uNDcyLjQ4bC00LjIyOCAxNi43OTUgNy44Mi02LjQ3MmEzLjM0IDMuMzQgMCAwIDEgLjgxNS00LjEzNyAzLjMzNyAzLjMzNyAwIDAgMSA0LjY5My40NDIgMy4zMzggMy4zMzggMCAwIDEtLjQ0MiA0LjY5NCAzLjMyMiAzLjMyMiAwIDAgMS0yLjQzOC43NSAzLjMzNSAzLjMzNSAwIDAgMS0xLjc3OC0uNzIxbC03LjgyIDYuNDcxIDE3LjI4OS0xLjAxNGEuNjY4LjY2OCAwIDAgMCAuNTYxLS4zNzRsNC43OTYtOS44NTktOC4yMTQtOS45MjR6Ii8+CiAgPC9nPgogIDxkZWZzPgogICAgPGNsaXBQYXRoIGlkPSJhIj4KICAgICAgPHBhdGggZmlsbD0iI2ZmZiIgZD0iTTE2Ny41NzMgMGgzMnYzMmgtMzJ6IiB0cmFuc2Zvcm09InJvdGF0ZSg1LjM4NiAxNjcuNTczIDApIi8+CiAgICA8L2NsaXBQYXRoPgogIDwvZGVmcz4KPC9zdmc+') no-repeat center center !important;
  background-size: 65% !important;
}

/* Hide placeholder when static-signature-wrapper is present */
.form-advanced-signature-wrapper:has(.static-signature-wrapper) canvas.signatureCanvas,
.form-advanced-signature-wrapper .formAdvancedSignatureWrapper:has(.static-signature-wrapper) canvas.signatureCanvas,
.jfQuestion-fields .form-advanced-signature-wrapper:has(.static-signature-wrapper) canvas.signatureCanvas,
.jfField .form-advanced-signature-wrapper:has(.static-signature-wrapper) canvas.signatureCanvas {
  background: none !important;
}

/* Bottom Section - third div child */
.form-advanced-signature-wrapper > div[class*="sc-"] > div[class*="sc-"]:nth-child(3) {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 17px;
  height: 34px;
  min-height: 34px;
  flex-shrink: 0;
  border-top: 1px solid #E3E5F5;
  background-color: #fff;
}

/* Color Selector */
.form-advanced-signature-wrapper > div[class*="sc-"] > div[class*="sc-"]:nth-child(3) > div[class*="sc-"]:first-child {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0;
  gap: 4.77px;
  height: 8.17px;
}

/* Color Dots */
.form-advanced-signature-wrapper div[role="button"][aria-label*="color"] {
  width: 8.17px;
  height: 8.17px;
  border-radius: 50%;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  outline: none !important;
  flex: none;
  flex-grow: 0;
  flex-shrink: 0;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  pointer-events: auto;
  position: relative;
  z-index: 1;
  transform: none !important;
  transition: none !important;
}

.form-advanced-signature-wrapper div[role="button"][aria-label*="black"] {
  background-color: #000000;
}

.form-advanced-signature-wrapper div[role="button"][aria-label*="navy"] {
  background-color: #343C6A;
}

.form-advanced-signature-wrapper div[role="button"][aria-label*="blue"] {
  background-color: #0C0C91;
}

.form-advanced-signature-wrapper div[role="button"][aria-label*="red"] {
  background-color: #B80F00;
}

.form-advanced-signature-wrapper div[role="button"][data-selected="true"] {
  box-shadow: 0 0 0 2px #6C73A8 !important;
}

.form-advanced-signature-wrapper div[role="button"][aria-label*="color"]:active,
.form-advanced-signature-wrapper div[role="button"][aria-label*="color"]:focus,
.form-advanced-signature-wrapper div[role="button"][aria-label*="color"]:focus-visible {
  outline: none !important;
  transform: none !important;
}

/* Clear Button */
.form-advanced-signature-wrapper > div[class*="sc-"] > div[class*="sc-"]:nth-child(3) > button[class*="sc-"] {
  appearance: none;
  border: none;
  background: transparent;
  color: #6C73A8;
  font-family: 'Circular', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
  cursor: pointer;
  padding: 8px;
  outline: none;
  transition: color 0.15s ease;
  margin-left: auto;
}

.form-advanced-signature-wrapper > div[class*="sc-"] > div[class*="sc-"]:nth-child(3) > button[class*="sc-"]:hover {
  color: #0A1551;
}

.form-advanced-signature-wrapper > div[class*="sc-"] > div[class*="sc-"]:nth-child(3) > button[class*="sc-"]:focus-visible {
  text-decoration: underline;
}

/* Typing Input */
.form-advanced-signature-wrapper input[type="text"] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
  appearance: none;
  font-size: 32px;
  outline: none;
  padding: 0 20px;
  text-align: center;
  background: transparent;
  box-sizing: border-box;
}

.form-advanced-signature-wrapper input[type="text"]::placeholder {
  color: #C8CEED;
}

.form-advanced-signature-wrapper input[type="text"]:invalid {
  background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCAyMDAgNDMiPgogIDxwYXRoIHN0cm9rZT0iI0M4Q0VFRCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjEuNTgiIGQ9Ik0xIDM4LjYwMmMxMS4yNDYgMy4xOTcgMjIuMTgyLS45OSAzMS41MDgtNy4xNzIgNC45MzItMy4yNyA5LjgyNi03LjE4MyAxMi44MjUtMTIuMzQxIDEuMTk1LTIuMDU3IDIuNjU2LTUuNjI2LTEuMTA2LTUuNjU4LTQuMDkzLS4wMzQtNy4xNCAzLjY2Mi04LjY2OCA3LjAyMi0yLjE5IDQuODE5LTIuMjY4IDEwLjUyNi40MDcgMTUuMTcgMi41MzEgNC4zOTUgNi43NzggNi40NzQgMTEuODQ1IDUuNjIgNS4yOTMtLjg5MyA5LjkyLTQuNTA4IDEzLjc2NS03Ljk4NmE0MC43MTQgNDAuNzE0IDAgMCAwIDMuOTY2LTQuMDkzYy4xNDItLjE3LjY0Mi0xLjAwNi45NjYtMS4wNjQuMTItLjAyMS4yOTggMy42NDMuMzMgMy44NDMuMjg4IDEuNzkgMS4xOTEgMy44MDYgMy4zMDUgMy44NjcgMi42OS4wNzggNC45NC0yLjE3MiA2Ljc1LTMuODMuNjEtLjU1OSAyLjU1LTMuMjQxIDMuNTgzLTMuMjQxLjQyNSAwIDEuMjQ5IDIuMTQzIDEuNDM3IDIuNDI4IDIuNDg0IDMuNzY0IDYuMTMyIDIuNDAxIDguOTYtLjIzOC41Mi0uNDg1IDMuMzA1LTQuMzY3IDQuNDM2LTMuNjY3LjkxMS41NjMgMS4zMTMgMS44OTMgMS43OCAyLjc3OC43NiAxLjQ0MSAxLjcyMiAyLjQ2OCAzLjMzIDMuMDA0IDMuNDkzIDEuMTY2IDcuMjYxLTIuMTAyIDEwLjgwMy0yLjEwMiAxLjAzMyAwIDEuNTYxLjU2OCAyLjExIDEuMzUxLjc0OSAxLjA2OCAxLjUyMSAxLjgxMyAyLjg3MyAyLjEwMyA0LjE4OC44OTggNy42MTctMy4wNzcgMTEuNjY3LTIuNzI4IDEuMTgxLjEwMSAyLjA2MyAxLjI5MiAyLjk0OSAxLjkyNyAxLjc4OCAxLjI4IDMuOTM4IDIuMTY3IDYuMTI3IDIuNDc4IDMuNTA5LjQ5OSA3LjAyNy0uMTYyIDEwLjQ0Ny0uOSA1LjkwNS0xLjI3NyAxMS43NTItMi43OTkgMTcuNjY3LTQuMDMxIi8+CiAgPGcgZmlsbD0iI0M4Q0VFRCIgY2xpcC1wYXRoPSJ1cmwoI2EpIj4KICAgIDxwYXRoIGQ9Ik0xOTYuNTE0IDE3LjY1NyAxODQuNDkxIDMuMTNhLjY2NS42NjUgMCAwIDAtLjkzOC0uMDg5bC0yLjkwNSAyLjQwNWEuNjY2LjY2NiAwIDAgMC0uMDg5LjkzOGwxMi4wMjMgMTQuNTI2YS42NjQuNjY0IDAgMCAwIC40NTEuMjM5LjY2Ni42NjYgMCAwIDAgLjQ4OC0uMTVsMi45MDUtMi40MDVhLjY2Ni42NjYgMCAwIDAgLjA4OC0uOTM4em0tMTUuMDc3LTguMTIxLTEwLjU4MiAyLjg2OWEuNjY2LjY2NiAwIDAgMC0uNDcyLjQ4bC00LjIyOCAxNi43OTUgNy44Mi02LjQ3MmEzLjM0IDMuMzQgMCAwIDEgLjgxNS00LjEzNyAzLjMzNyAzLjMzNyAwIDAgMSA0LjY5My40NDIgMy4zMzggMy4zMzggMCAwIDEtLjQ0MiA0LjY5NCAzLjMyMiAzLjMyMiAwIDAgMS0yLjQzOC43NSAzLjMzNSAzLjMzNSAwIDAgMS0xLjc3OC0uNzIxbC03LjgyIDYuNDcxIDE3LjI4OS0xLjAxNGEuNjY4LjY2OCAwIDAgMCAuNTYxLS4zNzRsNC43OTYtOS44NTktOC4yMTQtOS45MjR6Ii8+CiAgPC9nPgogIDxkZWZzPgogICAgPGNsaXBQYXRoIGlkPSJhIj4KICAgICAgPHBhdGggZmlsbD0iI2ZmZiIgZD0iTTE2Ny41NzMgMGgzMnYzMmgtMzJ6IiB0cmFuc2Zvcm09InJvdGF0ZSg1LjM4NiAxNjcuNTczIDApIi8+CiAgICA8L2NsaXBQYXRoPgogIDwvZGVmcz4KPC9zdmc+') no-repeat center center;
  background-size: 65%;
}

/* Read-only state */
.form-advanced-signature-wrapper.readOnly button[class*="sc-"][aria-selected],
.form-advanced-signature-wrapper.readOnly div[role="button"],
.form-advanced-signature-wrapper.readOnly input,
.form-advanced-signature-wrapper.readOnly canvas {
  pointer-events: none;
}

.static-signature-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
  background-color: var(--form-colorscheme-input-bg-color, #fff) !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}

/* Cardform wrapper support */
.jfQuestion-fields .form-advanced-signature-wrapper .static-signature-wrapper,
.jfField .form-advanced-signature-wrapper .static-signature-wrapper {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 100 !important;
  background-color: #fff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  visibility: visible !important;
  opacity: 1 !important;
}

.static-signature-image {
  max-width: 90% !important;
  max-height: 90% !important;
  object-fit: contain !important;
  display: block !important;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  visibility: visible !important;
  opacity: 1 !important;
}