/* Missed-call text-back demo widget — dark/gold restyle.
   Lays on top of the site's compiled CSS. Keeps every original class and
   markup untouched; only the colour tokens change:
   - background: near-black / charcoal
   - primary accent: gold
   - secondary accent: deep navy
   - text: light on dark
*/

[hidden] {
  display: none !important;
}

/* ---------- "Make it yours" intake ---------- */
.mp-intake {
  padding: 16px 16px 18px;
  background: #12141a;
  border-color: #2a2f3a;
  border-width: 1px;
}
@media (min-width: 640px) {
  .mp-intake {
    padding: 18px 20px 20px;
  }
}
.mp-intake-title {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: #e8e4d9;
}
.mp-services {
  display: block;
  width: 100%;
  min-height: 56px;
  resize: vertical;
  line-height: 1.5;
  background: #1a1d26;
  border: 1px solid #2a2f3a;
  color: #e8e4d9;
}
.mp-fields {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .mp-fields {
    grid-template-columns: 1fr 1fr;
  }
  .mp-fields .mp-wide {
    grid-column: 1 / -1;
  }
}
.mp-field label.field-label {
  color: #c9c2b4;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.mp-field input.field,
.mp-field textarea.field,
.mp-field select.field {
  background: #1a1d26;
  border: 1px solid #2a2f3a;
  color: #e8e4d9;
}
.mp-field input.field:focus,
.mp-field textarea.field:focus,
.mp-field select.field:focus {
  border-color: #d4af7a;
  outline: 3px solid rgba(212, 175, 122, 0.28);
}
.mp-skip {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 6px 0 0;
  background: none;
  border: 0;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 500;
  color: #9a9488;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.mp-skip:hover {
  color: #e8e4d9;
}

/* "Reading your site…" state */
.mp-read {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 7px 0 0;
  font-size: 11.5px;
  font-weight: 600;
  color: #9a9488;
}
.mp-read .mp-spin {
  width: 11px;
  height: 11px;
  flex: 0 0 auto;
  border: 2px solid #2a2f3a;
  border-top-color: #d4af7a;
  border-radius: 50%;
  animation: mpSpin 0.8s linear infinite;
}
@keyframes mpSpin {
  to {
    transform: rotate(360deg);
  }
}
.mp-read .mp-ok {
  color: #c9b45b;
}

/* ---------- card footer note ---------- */
.mp-note {
  margin: 0;
  padding: 0 16px 14px;
  font-size: 10.5px;
  line-height: 1.45;
  color: #9a9488;
}
@media (min-width: 640px) {
  .mp-note {
    padding: 0 20px 16px;
  }
}

/* ---------- composer ---------- */
.mp-composer {
  border-top: 1px solid #2a2f3a;
  padding: 12px 16px 8px;
}
@media (min-width: 640px) {
  .mp-composer {
    padding: 12px 20px 10px;
  }
}

/* ---------- phone thread ---------- */
.mp-thread {
  background: #12141a;
}
.mp-sysrow {
  display: flex;
  justify-content: center;
  margin: 0 0 2px;
}
.mp-sys {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(212, 175, 122, 0.12);
  color: #c9c2b4;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.mp-sys::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #d4af7a;
}

.mp-row {
  display: flex;
  margin-top: 10px;
}
.mp-row:first-of-type {
  margin-top: 6px;
}
.mp-row--me {
  justify-content: flex-end;
}
.mp-bubble {
  max-width: 84%;
  padding: 9px 13px;
  font-size: 13px;
  line-height: 1.55;
  border-radius: 18px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.mp-bubble--ai {
  background: #1a1d26;
  border: 1px solid #2a2f3a;
  color: #e8e4d9;
  border-bottom-left-radius: 6px;
}
.mp-bubble--me {
  background: #d4af7a;
  color: #12141a;
  border-bottom-right-radius: 6px;
}

/* typing indicator */
.mp-dots {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 14px 15px;
}
.mp-dots i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #9a9488;
  animation: mpPulse 1.1s infinite ease-in-out;
}
.mp-dots i:nth-child(2) {
  animation-delay: 0.15s;
}
.mp-dots i:nth-child(3) {
  animation-delay: 0.3s;
}
@keyframes mpPulse {
  0%,
  60%,
  100% {
    opacity: 0.35;
    transform: translateY(0);
  }
  30% {
    opacity: 1;
    transform: translateY(-2px);
  }
}

/* booking summary shop line */
.mp-order-shop {
  margin: 4px 0 0;
  font-size: 11.5px;
  font-weight: 700;
  color: #e8e4d9;
}