:root {
  --saf-primary: #5a67d8;
  --saf-primary-hover: #4c51bf;
  --saf-flash-color: rgba(90, 103, 216, 0.25);
  --saf-gray-light: #f7fafc;
  --saf-border: #e2e8f0;
}

/* Autofill Button Styles */
.smart-autofill-btn-container {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  margin: 10px 0;
}

.smart-autofill-btn,
.smart-autofill-mix-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background-color: var(--saf-primary);
  color: #ffffff;
  border: none;
  border-radius: 4px;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s, transform 0.1s;
}

.smart-autofill-btn:hover,
.smart-autofill-mix-btn:hover {
  background-color: var(--saf-primary-hover);
  color: #ffffff;
}

.smart-autofill-btn:active,
.smart-autofill-mix-btn:active {
  transform: scale(0.97);
}

.smart-autofill-mix-btn {
  background-color: #319795;
}

.smart-autofill-mix-btn:hover {
  background-color: #2c7a7b;
}

/* Flash highlight animation for populated form fields */
@keyframes saf-highlight-flash {
  0% { background-color: var(--saf-flash-color); }
  100% { background-color: transparent; }
}

.saf-field-highlight {
  animation: saf-highlight-flash 1.2s ease-out;
}

/* Consent Box styling */
.smart-autofill-consent-wrapper {
  margin: 12px 0;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.smart-autofill-consent-wrapper label {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}

/* Custom Tooltip */
.saf-tooltip {
  position: relative;
  display: inline-block;
  cursor: help;
  margin-left: 6px;
  color: #718096;
}

.saf-tooltip .saf-tooltip-text {
  visibility: hidden;
  width: 220px;
  background-color: #2d3748;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 8px;
  position: absolute;
  z-index: 100;
  bottom: 125%;
  left: 50%;
  margin-left: -110px;
  opacity: 0;
  transition: opacity 0.2s;
  font-size: 12px;
  line-height: 1.4;
}

.saf-tooltip:hover .saf-tooltip-text {
  visibility: visible;
  opacity: 1;
}

/* User Settings/Clear panel under form */
.smart-autofill-user-panel {
  margin-top: 15px;
  padding: 10px;
  background-color: var(--saf-gray-light);
  border: 1px solid var(--saf-border);
  border-radius: 4px;
  font-size: 12px;
  color: #4a5568;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.saf-clear-data-link {
  color: #e53e3e;
  text-decoration: underline;
  cursor: pointer;
}

.saf-clear-data-link:hover {
  color: #c53030;
}