.mpd-quote-page {
  --mpd-quote-page-bg: #fafafa;
  --mpd-quote-surface: #fafafa;
  --mpd-quote-surface-soft: #f1f3f7;
  --mpd-quote-header-menu-panel: var(--mpd-color-light-ink);
  --mpd-quote-option-selected-bg: #fff6fb;
  --mpd-quote-text: var(--mpd-color-ink);
  --mpd-quote-muted: var(--mpd-color-muted);
  --mpd-quote-page-text: var(--mpd-quote-text);
  --mpd-quote-page-muted: var(--mpd-quote-muted);
  --mpd-quote-form-surface: var(--mpd-quote-surface);
  --mpd-quote-form-text: var(--mpd-quote-text);
  --mpd-quote-form-muted: var(--mpd-quote-muted);
  --mpd-quote-field-background: var(--mpd-color-light-pure);
  --mpd-quote-field-border: 1px solid var(--mpd-quote-line);
  --mpd-quote-field-color: var(--mpd-quote-form-text);
  --mpd-quote-field-placeholder: var(--mpd-quote-muted);
  --mpd-quote-clear-background: rgba(39, 39, 47, 0.08);
  --mpd-quote-color-option-text: #27272f;
  --mpd-quote-action-background: rgba(255, 255, 255, 0.94);
  --mpd-quote-form-padding: clamp(1rem, 2.6vw, 1.75rem);
  --mpd-quote-line: rgba(39, 39, 47, 0.14);
  --mpd-quote-accent: var(--mpd-color-primary);
  --mpd-quote-blue: var(--mpd-color-blue);
  --mpd-quote-green: var(--mpd-color-green);
  --mpd-quote-shadow: 0 18px 48px rgba(39, 39, 47, 0.14);
  min-height: var(--mpd-vh, 100vh);
  padding: clamp(1.2rem, 3vw, 2.5rem) 0 0;
  background: var(--mpd-quote-page-bg);
  color: var(--mpd-quote-page-text);
}

body.mpd-context-quote_page .mpd-footer.mpd-site-footer {
  margin-top: 0;
}

html.mpd-color-mode-inverted body.mpd-color-mode-enabled .mpd-quote-page,
body.mpd-color-mode-current-inverted .mpd-quote-page,
body.mpd-invert .mpd-quote-page {
  --mpd-quote-page-bg: var(--mpd-color-mode-page, #15151d);
  --mpd-quote-page-text: var(--mpd-color-mode-heading, var(--mpd-color-light-pure));
  --mpd-quote-page-muted: var(--mpd-color-mode-muted, rgba(255, 255, 255, 0.64));
  --mpd-quote-form-surface: var(--mpd-color-dark-ink);
  --mpd-quote-form-text: var(--mpd-color-light-pure);
  --mpd-quote-form-muted: var(--mpd-color-light-pure);
  --mpd-quote-header-menu-panel: var(--mpd-color-mode-surface, #1d1f28);
  --mpd-quote-option-selected-bg: rgba(227, 0, 124, 0.12);
  --mpd-quote-action-background: var(--mpd-color-dark-ink);
  --mpd-quote-line: rgba(255, 255, 255, 0.16);
  --mpd-quote-field-background: #1d1f28;
  --mpd-quote-field-border: 1px solid rgba(255, 255, 255, 0.16);
  --mpd-quote-field-color: var(--mpd-color-mode-text, var(--mpd-color-light-ink));
  --mpd-quote-field-placeholder: var(--mpd-color-mode-muted-soft, rgba(255, 255, 255, 0.58));
  --mpd-quote-clear-background: rgba(255, 255, 255, 0.1);
}

.mpd-quote-page-shell {
  width: min(var(--mpd-layout-page-max), calc(100% - (var(--mpd-page-gutter) * 2)));
  margin: 0 auto;
  padding-bottom: 60px;
}

.mpd-quote-page-head {
  display: grid;
  max-width: 58rem;
  gap: 0.45rem;
  margin: 0 0 clamp(1rem, 2.4vw, 1.7rem);
}

.mpd-quote-page-head h1 {
  --mpd-h1-margin: 0;
  max-width: none;
  overflow-wrap: normal;
  white-space: nowrap;
}

.mpd-quote-page-head p:last-child {
  max-width: 54rem;
  margin: 0;
  color: var(--mpd-quote-page-muted);
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  line-height: 1.55;
}

.mpd-quote-page-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 0;
}

.mpd-quote-page-form {
  --mpd-field-background: var(--mpd-quote-field-background);
  --mpd-field-border: var(--mpd-quote-field-border);
  --mpd-field-color: var(--mpd-quote-field-color);
  --mpd-field-placeholder-color: var(--mpd-quote-field-placeholder);
  --mpd-field-focus-border-color: var(--mpd-quote-accent);
  --mpd-field-focus-outline: 3px solid rgba(227, 0, 124, 0.16);
  --mpd-quote-step-row-gap: 34px;
  --mpd-quote-field-column-gap: var(--mpd-gap-md);
}

.mpd-quote-page-form.is-sending {
  opacity: 0.74;
  pointer-events: none;
}

.mpd-quote-page-form[hidden] {
  display: none !important;
}

.mpd-quote-page-form .mpd-quote-step-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(0.7rem, 2vw, 1rem);
}

.mpd-quote-page-form .mpd-quote-progress {
  border-color: var(--mpd-quote-line);
  color: var(--mpd-quote-form-muted);
}

.mpd-quote-page-form .mpd-quote-current-title {
  margin: 0;
  min-width: 0;
  color: var(--mpd-quote-form-text);
  font-size: clamp(1.2rem, 2.35vw, 2rem);
  line-height: 1.12;
  overflow-wrap: anywhere;
}

.mpd-quote-page-form .mpd-quote-step {
  min-height: clamp(31rem, 58vh, 43rem);
  align-content: start;
}

.mpd-quote-page-form .mpd-quote-step,
.mpd-quote-page-form .mpd-quote-field-grid,
.mpd-quote-page-form .mpd-request-event-fields,
.mpd-quote-page-form .mpd-date-time-grid {
  row-gap: var(--mpd-quote-step-row-gap);
}

.mpd-quote-page-form .mpd-quote-step-note {
  margin: 0;
  color: var(--mpd-quote-form-muted);
  opacity: 1;
}

.mpd-quote-option-grid {
  display: grid;
  min-width: 0;
  gap: clamp(0.7rem, 1.5vw, 1rem);
}

.mpd-quote-custom-entry {
  min-width: 0;
}

.mpd-quote-custom-entry__control {
  position: relative;
  min-width: 0;
}

.mpd-quote-custom-entry__control .mpd-form-control {
  padding-right: 3.15rem;
}

.mpd-quote-custom-entry__clear {
  position: absolute;
  top: 50%;
  right: 0.65rem;
  display: inline-grid;
  width: 2.1rem;
  height: 2.1rem;
  min-width: 2.1rem;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--mpd-quote-clear-background);
  color: var(--mpd-quote-form-text);
  font: inherit;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1;
  transform: translateY(-50%);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.mpd-quote-custom-entry__clear[hidden] {
  display: none;
}

.mpd-quote-custom-entry__clear:hover,
.mpd-quote-custom-entry__clear:focus-visible {
  background: rgba(227, 0, 124, 0.14);
  color: var(--mpd-quote-accent);
  outline: none;
}

.mpd-quote-custom-entry__clear.is-guiding-clear {
  animation: mpdQuoteClearGuide 0.74s ease both;
}

@keyframes mpdQuoteClearGuide {
  0% {
    background: var(--mpd-quote-clear-background);
    color: var(--mpd-quote-form-text);
    box-shadow: 0 0 0 0 rgba(227, 0, 124, 0);
    transform: translateY(-50%) scale(1);
  }

  36% {
    background: rgba(227, 0, 124, 0.18);
    color: var(--mpd-quote-accent);
    box-shadow: 0 0 0 0.48rem rgba(227, 0, 124, 0.1);
    transform: translateY(-50%) scale(1.18);
  }

  68% {
    background: rgba(227, 0, 124, 0.12);
    color: var(--mpd-quote-accent);
    box-shadow: 0 0 0 0.25rem rgba(227, 0, 124, 0.05);
    transform: translateY(-50%) scale(0.96);
  }

  100% {
    background: var(--mpd-quote-clear-background);
    color: var(--mpd-quote-form-text);
    box-shadow: 0 0 0 0 rgba(227, 0, 124, 0);
    transform: translateY(-50%) scale(1);
  }
}

.mpd-quote-option-grid--events,
.mpd-quote-option-grid--services {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  row-gap: 0.2rem;
  column-gap: 0.2rem;
}

.mpd-quote-option-grid--colors {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
  justify-items: stretch;
  gap: clamp(0.65rem, 1.2vw, 0.9rem);
}

.mpd-quote-option,
.mpd-quote-color-option {
  display: grid;
  min-width: 0;
  height: 100%;
  min-height: 8.25rem;
  place-items: center;
  align-content: center;
  gap: 0.55rem;
  padding: 0.8rem 0.55rem;
  border: 1px solid var(--mpd-quote-line);
  border-radius: var(--mpd-radius);
  background: var(--mpd-quote-surface-soft);
  color: var(--mpd-quote-form-text);
  font: inherit;
  font-weight: 650;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, background-color 0.2s ease;
}

.mpd-quote-option-grid--events .mpd-quote-option,
.mpd-quote-option-grid--services .mpd-quote-option {
  min-height: 10rem;
  align-content: start;
  gap: 0rem;
  padding: 0.45rem;
  border-color: transparent;
  background: var(--mpd-quote-header-menu-panel);
  box-shadow: none;
  text-transform: uppercase;
}

.mpd-quote-color-option {
  width: 100%;
  height: auto;
  min-height: 4.15rem;
  grid-template-columns: auto minmax(0, 1fr);
  justify-content: start;
  justify-items: start;
  gap: 0.7rem;
  padding: 0.72rem 0.82rem;
  border: 1px solid var(--mpd-quote-line);
  border-radius: var(--mpd-radius);
  background: var(--mpd-quote-surface-soft);
  color: var(--mpd-quote-color-option-text);
  box-shadow: var(--mpd-shadow-null);
  text-align: left;
}

.mpd-quote-option:hover,
.mpd-quote-option:focus-visible,
.mpd-quote-color-option:hover,
.mpd-quote-color-option:focus-visible {
  border-color: var(--mpd-quote-accent);
  outline: none;
  box-shadow: 0 10px 24px rgba(39, 39, 47, 0.12);
  transform: translateY(-1px);
}

.mpd-quote-color-option:hover,
.mpd-quote-color-option:focus-visible {
  border-color: var(--mpd-quote-accent);
  box-shadow: 0 10px 24px rgba(39, 39, 47, 0.12);
  transform: translateY(-1px);
  z-index: 10;
}

.mpd-quote-option-grid--events .mpd-quote-option:hover,
.mpd-quote-option-grid--events .mpd-quote-option:focus-visible,
.mpd-quote-option-grid--services .mpd-quote-option:hover,
.mpd-quote-option-grid--services .mpd-quote-option:focus-visible {
  border-color: transparent;
  background: var(--mpd-quote-header-menu-panel);
  box-shadow: var(--mpd-shadow-md);
}

.mpd-quote-option.is-selected,
.mpd-quote-color-option.is-selected {
  border-color: var(--mpd-quote-accent);
  background: var(--mpd-quote-option-selected-bg);
  box-shadow: inset 0 0 0 2px rgba(227, 0, 124, 0.18);
}

.mpd-quote-color-option.is-selected {
  border-color: var(--mpd-quote-accent);
  background: var(--mpd-quote-option-selected-bg);
  box-shadow: inset 0 0 0 2px rgba(227, 0, 124, 0.18), var(--mpd-shadow-sm);
  outline: none;
  transform: translateY(-1px);
  z-index: 10;
}

html.mpd-color-mode-inverted body.mpd-color-mode-enabled .mpd-quote-color-option,
body.mpd-color-mode-current-inverted .mpd-quote-color-option,
body.mpd-invert .mpd-quote-color-option {
  border-color: rgba(255, 255, 255, 0.16);
  background: #181b24;
  color: var(--mpd-color-light-pure);
  box-shadow: var(--mpd-shadow-null);
}

html.mpd-color-mode-inverted body.mpd-color-mode-enabled .mpd-quote-color-option:hover,
html.mpd-color-mode-inverted body.mpd-color-mode-enabled .mpd-quote-color-option:focus-visible,
body.mpd-color-mode-current-inverted .mpd-quote-color-option:hover,
body.mpd-color-mode-current-inverted .mpd-quote-color-option:focus-visible,
body.mpd-invert .mpd-quote-color-option:hover,
body.mpd-invert .mpd-quote-color-option:focus-visible {
  border-color: var(--mpd-quote-accent);
  background: #20222b;
  color: var(--mpd-color-light-pure);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.24);
}

html.mpd-color-mode-inverted body.mpd-color-mode-enabled .mpd-quote-color-option.is-selected,
html.mpd-color-mode-inverted body.mpd-color-mode-enabled .mpd-quote-color-option.is-selected:hover,
html.mpd-color-mode-inverted body.mpd-color-mode-enabled .mpd-quote-color-option.is-selected:focus-visible,
body.mpd-color-mode-current-inverted .mpd-quote-color-option.is-selected,
body.mpd-color-mode-current-inverted .mpd-quote-color-option.is-selected:hover,
body.mpd-color-mode-current-inverted .mpd-quote-color-option.is-selected:focus-visible,
body.mpd-invert .mpd-quote-color-option.is-selected,
body.mpd-invert .mpd-quote-color-option.is-selected:hover,
body.mpd-invert .mpd-quote-color-option.is-selected:focus-visible {
  border-color: var(--mpd-quote-accent);
  background: var(--mpd-color-light-pure);
  color: var(--mpd-color-dark-ink);
  box-shadow: inset 0 0 0 2px rgba(227, 0, 124, 0.24), var(--mpd-shadow-sm);
}

.mpd-quote-option-grid--events .mpd-quote-option.is-selected,
.mpd-quote-option-grid--services .mpd-quote-option.is-selected {
  border-color: transparent;
  background: var(--mpd-quote-option-selected-bg);
  box-shadow: inset 0 0 0 2px rgba(227, 0, 124, 0.24), var(--mpd-shadow-sm);
}

.mpd-quote-option.is-disabled-by-custom,
.mpd-quote-option.is-disabled-by-custom:hover,
.mpd-quote-option.is-disabled-by-custom:focus-visible,
.mpd-quote-option.is-disabled-by-custom:active,
.mpd-quote-option:disabled,
.mpd-quote-option:disabled:hover,
.mpd-quote-option:disabled:focus-visible,
.mpd-quote-option:disabled:active {
  border-color: transparent;
  background: var(--mpd-quote-header-menu-panel);
  box-shadow: none;
  opacity: 0.42;
  filter: grayscale(0.18);
  transform: none;
  cursor: not-allowed;
  pointer-events: none;
}

.mpd-quote-option img {
  display: block;
  width: 4rem;
  height: 4rem;
  object-fit: contain;
}

.mpd-quote-option-grid--events .mpd-quote-option img,
.mpd-quote-option-grid--services .mpd-quote-option img {
  width: min(9rem, 34vw);
  height: min(7.4rem, 28vw);
  object-fit: contain;
}

.mpd-quote-option span,
.mpd-quote-color-option span {
  overflow-wrap: anywhere;
  line-height: 1.2;
}

.mpd-quote-option-grid--events .mpd-quote-option span,
.mpd-quote-option-grid--services .mpd-quote-option span {
  font-size: clamp(0.92rem, 2vw, 1.05rem);
  font-weight: 600;
  letter-spacing: 0;
}

.mpd-quote-color-dot {
  display: block;
  width: 1.55rem;
  height: 1.55rem;
  border: 1px solid var(--mpd-quote-line);
  border-radius: 50%;
  background: var(--mpd-quote-color, transparent);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.42);
}

.mpd-quote-color-name {
  display: block;
  min-width: 0;
  color: currentColor;
  font-size: 0.95rem;
  font-weight: 650;
  line-height: 1.15;
}

.mpd-quote-custom-occasion {
  max-width: 28rem;
}

.mpd-quote-page-form .mpd-quote-field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--mpd-quote-field-column-gap);
}

.mpd-quote-page-form .mpd-request-event-fields {
  display: grid;
  column-gap: var(--mpd-quote-field-column-gap);
}

.mpd-quote-page-form .mpd-request-event-fields,
.mpd-quote-page-form .mpd-date-time-grid,
.mpd-quote-page-form .mpd-date-time-grid > * {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.mpd-quote-page-form .mpd-date-time-field {
  position: relative;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  gap: 10px;
}

.mpd-quote-page-form .mpd-date-time-field .mpd-service-panel-heading {
  width: 100%;
  margin: 0 0 4px;
  padding: 0;
  color: var(--mpd-quote-form-muted);
  font: inherit;
  font-size: var(--mpd-font-size-sm);
  font-weight: 700;
  text-align: center;
  text-transform: none;
}

.mpd-quote-page-form .mpd-date-time-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--mpd-quote-field-column-gap);
}

.mpd-quote-page-form .mpd-date-picker,
.mpd-quote-page-form .mpd-time-picker {
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.mpd-quote-page-form .mpd-form-control,
.mpd-quote-page-form .mpd-ui-field {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  min-height: var(--mpd-field-height);
  border: var(--mpd-field-border);
  background-color: var(--mpd-field-background);
  color: var(--mpd-field-color);
  caret-color: var(--mpd-field-color);
  color-scheme: light;
}

.mpd-quote-page-form input.mpd-form-control,
.mpd-quote-page-form select.mpd-form-control {
  height: var(--mpd-field-height);
}

.mpd-quote-page-form input[type="date"].mpd-form-control,
.mpd-quote-page-form input[type="time"].mpd-form-control,
.mpd-quote-page-form select.mpd-form-control {
  display: block;
  width: 100%;
  inline-size: 100%;
  min-width: 0;
  min-inline-size: 0;
  max-width: 100%;
  max-inline-size: 100%;
}

.mpd-quote-page-form input[type="date"].mpd-form-control,
.mpd-quote-page-form input[type="time"].mpd-form-control,
.mpd-quote-page-form select.mpd-form-control {
  -webkit-appearance: none;
  appearance: none;
}

.mpd-quote-page-form .mpd-date-trigger {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: var(--mpd-field-height);
  height: var(--mpd-field-height);
  color: var(--mpd-field-placeholder-color);
  text-align: left;
  cursor: pointer;
}

.mpd-quote-page-form .mpd-date-trigger.has-value {
  color: var(--mpd-field-color);
}

.mpd-quote-page-form .mpd-date-trigger span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mpd-quote-page-form .mpd-time-picker select.mpd-form-control {
  min-height: var(--mpd-field-height);
  height: var(--mpd-field-height);
  color: var(--mpd-field-color);
  appearance: none;
  -webkit-appearance: none;
}

.mpd-quote-page-form .mpd-quote-vision-field {
  min-height: 5.25rem;
  resize: vertical;
}

.mpd-quote-reference-field {
  display: grid;
  gap: 10px;
}

.mpd-reference-upload-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mpd-gap-sm);
  min-height: var(--mpd-field-height);
  padding: 0.85rem 1.1rem;
  border: 1px dashed var(--mpd-quote-line);
  border-radius: var(--mpd-field-radius, 1.75rem);
  background: var(--mpd-quote-surface-soft);
  color: var(--mpd-quote-form-text);
  cursor: pointer;
}

.mpd-reference-upload-box:hover,
.mpd-reference-upload-box:focus-within {
  border-color: var(--mpd-quote-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mpd-quote-accent) 14%, transparent);
}

.mpd-reference-upload-title {
  font-weight: 800;
}

.mpd-reference-upload-meta {
  color: var(--mpd-quote-form-muted);
  font-size: var(--mpd-font-size-xs);
  text-align: right;
}

.mpd-reference-preview-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.mpd-reference-preview {
  position: relative;
  min-width: 0;
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid var(--mpd-quote-line);
  border-radius: 8px;
  background: var(--mpd-quote-surface-soft);
}

.mpd-reference-preview img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mpd-reference-preview-file {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  padding: 0.35rem;
  color: var(--mpd-quote-form-muted);
  font-size: var(--mpd-font-size-xs);
  font-weight: 800;
  text-transform: uppercase;
}

.mpd-reference-remove {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 999px;
  background: rgba(17, 17, 24, 0.78);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
}

.mpd-quote-page-form .mpd-date-popover {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  z-index: 30;
  width: min(19.25rem, calc(100vw - var(--mpd-page-gutter) - var(--mpd-page-gutter)));
  padding: var(--mpd-space-sm);
  border: var(--mpd-field-border);
  border-radius: var(--mpd-radius);
  background: var(--mpd-field-background);
  color: var(--mpd-field-color);
  box-shadow: var(--mpd-shadow-lg, 0 18px 60px rgb(39 39 47 / 22%));
}

.mpd-quote-page-form .mpd-date-popover[hidden] {
  display: none;
}

.mpd-quote-page-form .mpd-date-calendar-head {
  display: grid;
  grid-template-columns: 36px 1fr 36px;
  align-items: center;
  gap: var(--mpd-gap-sm);
}

.mpd-quote-page-form .mpd-date-calendar-head strong {
  color: var(--mpd-field-color);
  font-size: var(--mpd-font-size-md);
  font-weight: 600;
  text-align: center;
}

.mpd-quote-page-form .mpd-date-calendar-head button {
  display: inline-grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--mpd-field-placeholder-color);
  cursor: pointer;
}

.mpd-quote-page-form .mpd-date-calendar-head button:hover,
.mpd-quote-page-form .mpd-date-calendar-head button:focus-visible {
  background: rgba(227, 0, 124, 0.1);
  color: var(--mpd-field-focus-border-color);
  outline: none;
}

.mpd-quote-page-form .mpd-date-weekdays,
.mpd-quote-page-form .mpd-date-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: calc(var(--mpd-gap-sm) / 4);
}

.mpd-quote-page-form .mpd-date-weekdays {
  margin-top: var(--mpd-space-xs);
  color: var(--mpd-field-placeholder-color);
  font-size: var(--mpd-font-size-xs);
  font-weight: 700;
  text-align: center;
}

.mpd-quote-page-form .mpd-date-calendar-grid {
  margin-top: calc(var(--mpd-space-xs) * 0.75);
}

.mpd-quote-page-form .mpd-date-day {
  display: inline-grid;
  min-width: 0;
  height: 34px;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 50%;
  background: transparent;
  color: var(--mpd-field-color);
  font-size: calc(var(--mpd-font-size-sm) * 0.96);
  cursor: pointer;
}

.mpd-quote-page-form .mpd-date-day.is-outside {
  color: var(--mpd-field-placeholder-color);
  opacity: 0.55;
}

.mpd-quote-page-form .mpd-date-day.is-selected {
  border-color: var(--mpd-field-focus-border-color);
  color: var(--mpd-field-focus-border-color);
}

.mpd-quote-page-form .mpd-date-day:hover,
.mpd-quote-page-form .mpd-date-day:focus-visible {
  border-color: var(--mpd-field-focus-border-color);
  outline: none;
}

.mpd-quote-page-form .mpd-date-day:disabled {
  color: var(--mpd-quote-line);
  cursor: not-allowed;
}

.mpd-quote-page-form input:-webkit-autofill,
.mpd-quote-page-form input:-webkit-autofill:hover,
.mpd-quote-page-form input:-webkit-autofill:focus,
.mpd-quote-page-form textarea:-webkit-autofill,
.mpd-quote-page-form textarea:-webkit-autofill:hover,
.mpd-quote-page-form textarea:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--mpd-field-color);
  box-shadow: 0 0 0 1000px var(--mpd-field-background) inset;
  caret-color: var(--mpd-field-color);
}

html.mpd-color-mode-inverted body.mpd-color-mode-enabled .mpd-quote-page-form .mpd-ui-field,
body.mpd-color-mode-current-inverted .mpd-quote-page-form .mpd-ui-field,
body.mpd-invert .mpd-quote-page-form .mpd-ui-field {
  color-scheme: dark;
}

.mpd-quote-page-form .mpd-form-field > span,
.mpd-quote-page-form .mpd-form-field > label,
.mpd-quote-contact-method legend {
  color: var(--mpd-quote-form-muted);
  font-size: var(--mpd-font-size-sm);
  font-weight: 700;
  text-transform: none;
}

.mpd-quote-contact-method {
  margin: 0;
  padding: 0;
  border: 0;
}

.mpd-quote-contact-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--mpd-gap-sm);
}

.mpd-quote-contact-options label {
  position: relative;
  display: grid;
  min-height: 4rem;
  place-items: center;
  padding: 0.7rem;
  border: 1px solid var(--mpd-quote-line);
  border-radius: var(--mpd-radius);
  background: var(--mpd-quote-surface-soft);
  color: var(--mpd-quote-form-text);
  font-weight: 700;
  cursor: pointer;
}

.mpd-quote-contact-options input {
  position: absolute;
  inset: 50% auto auto 0.6rem;
  margin: 0;
  accent-color: var(--mpd-quote-accent);
  transform: translateY(-50%);
}

.mpd-quote-contact-options label:has(input:checked) {
  border-color: var(--mpd-quote-accent);
  background: #fff6fb;
  box-shadow: inset 0 0 0 2px rgba(227, 0, 124, 0.18);
}

html.mpd-color-mode-inverted body.mpd-color-mode-enabled .mpd-quote-contact-options label,
body.mpd-color-mode-current-inverted .mpd-quote-contact-options label,
body.mpd-invert .mpd-quote-contact-options label {
  border-color: rgba(255, 255, 255, 0.16);
  background: #181b24;
  color: var(--mpd-quote-form-text);
}

html.mpd-color-mode-inverted body.mpd-color-mode-enabled .mpd-quote-contact-options label:has(input:checked),
body.mpd-color-mode-current-inverted .mpd-quote-contact-options label:has(input:checked),
body.mpd-invert .mpd-quote-contact-options label:has(input:checked) {
  border-color: var(--mpd-quote-accent);
  background: #20212b;
  box-shadow: inset 0 0 0 2px rgba(227, 0, 124, 0.28);
}

.mpd-quote-page-form .mpd-request-dialog-actions {
  position: sticky;
  bottom: 0;
  left: auto;
  z-index: 2;
  width: auto;
  max-width: none;
  box-sizing: border-box;
  margin: 0 calc(var(--mpd-quote-form-padding) * -1) calc(var(--mpd-quote-form-padding) * -1);
  gap: 0.45rem var(--mpd-gap-sm);
  padding: 0.7rem var(--mpd-quote-form-padding) 1rem;
  border-top: 0;
  background: transparent;
  backdrop-filter: blur(12px);
}

.mpd-quote-page-form .mpd-request-error {
  flex: 1 0 100%;
  order: -1;
  margin: 0 0 -0.04rem;
  color: #b42357;
  font-size: 0.88rem;
  font-weight: 400;
  line-height: 1.25;
}

.mpd-quote-page-form .mpd-request-error.is-guiding-error {
  animation: mpdQuoteErrorGuide 0.74s ease both;
}

@keyframes mpdQuoteErrorGuide {
  0% {
    color: #b42357;
    transform: scale(1);
    text-shadow: 0 0 0 rgba(227, 0, 124, 0);
  }

  36% {
    color: var(--mpd-quote-accent);
    transform: scale(1.035);
    text-shadow: 0 0 0.5rem rgba(227, 0, 124, 0.24);
  }

  68% {
    color: var(--mpd-quote-accent);
    transform: scale(1.01);
    text-shadow: 0 0 0.28rem rgba(227, 0, 124, 0.18);
  }

  100% {
    color: #b42357;
    transform: scale(1);
    text-shadow: 0 0 0 rgba(227, 0, 124, 0);
  }
}

.mpd-quote-page-success {
  display: grid;
  min-height: min(34rem, 60vh);
  place-items: center;
  align-content: center;
  gap: var(--mpd-gap-md);
  text-align: center;
}

.mpd-quote-page-success[hidden] {
  display: none !important;
}

.mpd-quote-page-success h2,
.mpd-quote-page-success p {
  margin: 0;
}

.mpd-quote-page-success p {
  max-width: 34rem;
  color: var(--mpd-quote-muted);
}

@media (max-width: 860px) {
  .mpd-quote-option-grid--colors {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .mpd-quote-option-grid--events, .mpd-quote-option-grid--services {
      grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .mpd-quote-page-form .mpd-request-dialog-actions {
    border-top: 1px solid var(--mpd-quote-line);
  }
}

@media (max-width: 640px) {
  .mpd-quote-page {
    padding-top: 1rem;
  }

  .mpd-quote-page-head {
    justify-items: center;
    text-align: center;
  }

  .mpd-quote-page-head h1 {
    text-align: center;
  }

  .mpd-quote-page-form {
    --mpd-quote-step-row-gap: 14px;
    min-height: calc(var(--mpd-vh, 100vh) - 3rem);
    grid-template-rows: auto minmax(0, 1fr) auto auto;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
  }

  .mpd-quote-page-form .mpd-quote-step {
    min-height: 0;
  }

  .mpd-quote-page-form .mpd-quote-field-grid,
  .mpd-quote-page-form .mpd-date-time-grid {
    grid-template-columns: 1fr;
  }

  .mpd-reference-upload-box {
    align-items: flex-start;
    flex-direction: column;
  }

  .mpd-reference-upload-meta {
    text-align: left;
  }

  .mpd-quote-contact-options {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .mpd-quote-contact-options label {
    min-height: 3.65rem;
    padding: 0.58rem 0.45rem 0.58rem 1.72rem;
    font-size: 0.92rem;
    line-height: 1;
  }

  .mpd-quote-contact-options input {
    left: 0.48rem;
  }

  .mpd-quote-option-grid--colors {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(0.9rem, 4vw, 1.35rem);
  }

  .mpd-quote-color-option {
    width: 100%;
    min-height: 3.9rem;
    grid-template-columns: auto minmax(0, 1fr);
    justify-items: start;
    gap: 0.58rem;
    padding: 0.68rem 0.72rem;
    text-align: left;
  }

  .mpd-quote-option-grid--events,
  .mpd-quote-option-grid--services {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mpd-quote-option-grid--events .mpd-quote-option,
  .mpd-quote-option-grid--services .mpd-quote-option {
    min-height: 8.4rem;
    padding: 0.35rem;
  }

  .mpd-quote-option-grid--events .mpd-quote-option img,
  .mpd-quote-option-grid--services .mpd-quote-option img {
    width: min(7.2rem, 38vw);
    height: min(5.8rem, 30vw);
  }

  .mpd-quote-page-form .mpd-request-dialog-actions {
    justify-content: stretch;
  }

  .mpd-quote-page-form .mpd-request-dialog-actions .mpd-ui-button {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mpd-quote-custom-entry__clear.is-guiding-clear {
    animation: none;
    background: rgba(227, 0, 124, 0.18);
    color: var(--mpd-quote-accent);
    box-shadow: 0 0 0 0.36rem rgba(227, 0, 124, 0.08);
  }
}