/* Modal shell */
.modal {
  position: fixed;
  inset: 0;
  display: none;
  z-index: 9999;
}

.modal.is-open {
  display: block;
}

/* Greyed-out background */
.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 20, 20, 0.55);
  backdrop-filter: blur(2px);
}

/* Panel holding your existing form */
.modal__panel {
  position: relative;
  width: min(640px, calc(100% - 1.5rem));
  margin: 4vh auto;
  background: var(--card, #fff);
  border-radius: var(--radius, 18px);
  box-shadow: var(--shadow, 0 10px 30px rgba(20,20,20,.15));
  padding: 1rem;
  max-height: 85vh;
  overflow: auto;
}

/* Close button */
.modal__close {
  position: sticky;
  top: 0;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.08);
  background: #fff;
  cursor: pointer;
}

/* Prevent background scroll while modal open */
body.modal-open {
  overflow: hidden;
}

.quote-success{
  padding: .25rem 0;
}

.success-title{
  margin: .25rem 0 .25rem;
}

.success-text{
  margin: 0 0 1rem;
}

.success-actions{
  display: grid;
  gap: .6rem;
  max-width: 420px;
}

.quote-loading{
  padding: 1rem 0;
}

.loader-card{
  display:grid;
  place-items:center;
  text-align:center;
  padding: 2rem 1rem;
  border-radius: var(--radius);
  border: 1px solid rgba(0,0,0,.06);
  background: rgba(255,255,255,.75);
}

.spinner{
  width: 48px;
  height: 48px;
  border-radius: 999px;
  border: 4px solid rgba(63,143,139,.18);
  border-top-color: rgba(63,143,139,.75);
  animation: spin 0.9s linear infinite;
  margin-bottom: .75rem;
}

@keyframes spin{
  to { transform: rotate(360deg); }
}

.loading-title{
  margin: 0 0 .25rem;
}

.loading-text{
  margin: 0;
  max-width: 50ch;
}

/* Center success + loading content */
.quote-success,
.quote-loading {
  text-align: center;
}

/* Center buttons visually */
.success-actions {
  margin-inline: auto;
  justify-items: center;
}

@media (max-width: 640px) {
  .modal__panel {
    margin: 2vh auto;
    max-height: 80vh;
    padding: .9rem 1rem;
  }
}


