/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

.vb-quote-progress {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10px, 1fr));
  gap: 3px;
  align-items: end;
}

.vb-quote-progress-cell {
  height: 14px;
  display: block;
  clip-path: polygon(0 100%, 12% 18%, 50% 0, 88% 18%, 100% 100%);
  border: 1px solid #dad4c8;
  background: #eee9df;
}

.vb-quote-progress-cell.is-completed {
  background: #84e7a5;
  border-color: #078a52;
}

.vb-quote-progress-cell.is-current {
  background: #c1b0ff;
  border-color: #43089f;
}

.vb-quote-progress-cell.is-remaining {
  background: #eee9df;
  border-color: #dad4c8;
}

.vb-card-spotlight {
  border: 2px solid #c8bea9;
  background: linear-gradient(180deg, #fffefc 0%, #fffaf2 100%);
  box-shadow: rgba(0, 0, 0, 0.18) 0px 6px 18px, rgba(0, 0, 0, 0.08) 0px -1px 1px inset;
}

.vb-mask-surface {
  cursor: pointer;
}

.vb-mask-word.is-help-clickable {
  cursor: help;
  text-decoration: underline dotted #43089f;
  text-underline-offset: 4px;
}

.vb-mask-surface.is-help-mode {
  cursor: help;
}

.vb-help-btn {
  background: #f4eeff;
  color: #32037d;
  border: 1px dashed #43089f;
  box-shadow: rgba(67, 8, 159, 0.22) -4px 4px 0px;
}

.vb-help-btn:hover {
  background: #e8dcff;
  color: #32037d;
  transform: translateY(-1px);
}