/* --- ANIMATED QUOTE SUCCESS MODAL CSS --- */
.quote-modal-overlay {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(5px);
  display: flex; align-items: center; justify-content: center;
  z-index: 99999;
  opacity: 0; visibility: hidden;
  /* Slightly longer fade for a softer background reveal */
  transition: opacity 0.4s ease, visibility 0.4s ease; 
}

.quote-modal-overlay.active {
  opacity: 1; visibility: visible;
}

.quote-modal-content {
  background: #ffffff; border-radius: 12px; padding: 40px 30px;
  max-width: 420px; width: 90%; text-align: center; position: relative;
  box-shadow: 0 15px 40px rgba(0,0,0,0.2);
  
  /* Start closer to the final size/position for less jerkiness */
  opacity: 0; transform: scale(0.95) translateY(20px);
  
  /* Custom smooth deceleration curve (looks much more premium) */
  transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.quote-modal-overlay.active .quote-modal-content {
  opacity: 1; transform: scale(1) translateY(0);
}

.quote-modal-close {
    position: absolute;
    top: 10px;
    right: 15px;
    width: 34px;
    height: 34px;
    background: #f2f2f2;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
        color: #818181;
    cursor: pointer;
    transition: color 0.2s, transform 0.2s;
    border: none;
    outline: none;
    padding: 6px;
}

.quote-modal-close:hover {
  color: #e7000b; background: #ffd5d8;
}

.quote-modal-close svg {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

.quote-modal-icon {
  font-size: 50px; line-height: 1;
  transform: scale(0.8); /* Start slightly larger so the pop isn't as violent */
  opacity: 0;
  /* Matches the smooth curve, delayed slightly so it happens after the box appears */
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.15s, opacity 0.4s ease 0.15s;
}

.quote-modal-overlay.active .quote-modal-icon {
  transform: scale(1);
  opacity: 1;
}

.quote-modal-icon svg{
    width: 75px;
    height: 75px;
}


.draw-circle {
    stroke-dasharray: 280; /* Circumference of the circle (2 * PI * 44) */
    stroke-dashoffset: 280;
    animation: draw 0.8s ease-out forwards;
  }
  
  .draw-check {
    stroke-dasharray: 50; /* Approximate length of the checkmark path */
    stroke-dashoffset: 50;
    animation: draw 0.4s ease-out 0.85s forwards; /* 0.85s delay to match your original code */
  }

  @keyframes draw {
    to {
      stroke-dashoffset: 0;
    }
  }

.quote-modal-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 2rem;
    font-weight: 300;
    line-height: 1.2;
    color: var(--forest);
    margin-bottom: 14px;
}

.quote-modal-desc {
    color: #555;
    font-size: 1rem;
    line-height: 1.5;
    font-weight: 300;
}

.quote-modal-btn {
  background: #2d5a3d; color: #ffffff; border: none; padding: 12px 24px;
  font-size: 1rem; font-weight: 600; border-radius: 8px; cursor: pointer;
  transition: background 0.3s ease, transform 0.2s ease; width: 100%;
}

.quote-modal-btn:hover {
  background: #1f422b; transform: translateY(-2px);
}