/* Submit button spinner */
#quoteSubmitBtn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

#quoteSubmitBtn .btn-spinner{
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.35);
  border-top-color: rgba(255,255,255,.95);
  display: none;
  animation: spin .75s linear infinite;
}

@keyframes spin{
  to { transform: rotate(360deg); }
}

/* Contact: submit + messenger row */
.quote-actions-row{
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.btn-messenger{
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.messenger-icon{
  width: 18px;
  height: 18px;
  display: inline-block;
}

/* Premium arrow */
.messenger-note{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--muted);
  opacity: .95;
}

.messenger-arrow{
  width: 20px;
  height: 20px;
  display: inline-block;
  transform: rotate(180deg);
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13.2 5.2a1 1 0 0 1 1.4 0l6.2 6.2a1 1 0 0 1 0 1.4l-6.2 6.2a1 1 0 1 1-1.4-1.4L17.6 13H4a1 1 0 1 1 0-2h13.6l-4.4-4.4a1 1 0 0 1 0-1.4z'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13.2 5.2a1 1 0 0 1 1.4 0l6.2 6.2a1 1 0 0 1 0 1.4l-6.2 6.2a1 1 0 1 1-1.4-1.4L17.6 13H4a1 1 0 1 1 0-2h13.6l-4.4-4.4a1 1 0 0 1 0-1.4z'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* Messenger Quick (areas section) */
.messenger-quick{
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.messenger-note{
  font-size: 13px;
  color: var(--muted);
  opacity: .95;
  line-height: 1.2;
  max-width: 260px;
}

.messenger-icon{
  width: 18px;
  height: 18px;
  object-fit: contain;
  display: block;
}

/* Quote Modal */
.quote-modal{
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
}

.quote-modal.is-open{ display:flex; }

.quote-modal-backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
}

.quote-modal-card{
  position: relative;
  width: min(520px, 92vw);
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.45);
  box-shadow: 0 18px 55px rgba(0,0,0,.55);
  padding: 18px;
}

[data-theme="light"] .quote-modal-card{
  background: rgba(255,255,255,.92);
  border-color: rgba(16,24,40,.12);
  box-shadow: 0 18px 55px rgba(16,24,40,.18);
}

.quote-modal-title{
  font-weight: 1000;
  font-size: 18px;
  letter-spacing: -.02em;
}

.quote-modal-text{
  margin-top: 8px;
  color: var(--muted);
  line-height: 1.45;
}

.quote-modal-actions{
  margin-top: 14px;
  display:flex;
  justify-content:flex-end;
}

/* loadbar animation (used by preloader if present) */
@keyframes loadbar{
  0%{transform: translateX(-120%)}
  100%{transform: translateX(320%)}
}

/* Keep note beside the Messenger button */
.messenger-note-inline{
  flex: 0 1 auto;      /* don’t force a new line */
  max-width: none;     /* allow it to sit beside */
  white-space: nowrap; /* keep it on one line */
}

/* On smaller screens, let it wrap nicely */
@media (max-width: 700px){
  .messenger-note-inline{
    white-space: normal;
    flex-basis: 100%;
  }
}

