/* Background */
.quote-modal {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.6);
    justify-content: center;
    align-items: center;
}

/* Popup Box */
.quote-content {
    background: #fff;
    width: 90%;
    max-width: 500px;
    padding: 30px;
    border-radius: 12px;
    position: relative;
    animation: popup .3s ease;
}

@keyframes popup {
    from{
        transform:scale(.8);
        opacity:0;
    }
    to{
        transform:scale(1);
        opacity:1;
    }
}

.quote-content h2{
    text-align:center;
    margin-bottom:25px;
    color:#b8860b;
}

.quote-content input,
.quote-content select,
.quote-content textarea {
    width:100%;
    padding:12px;
    border:1px solid #ccc;
    border-radius:6px;
    font-size:15px;
    outline:none;
    margin-bottom:20px;
    box-sizing:border-box;

}

/* Fix phone field spacing */
.form-group {
    margin-bottom:20px;
}

.quote-content input:focus,
.quote-content select:focus,
.quote-content textarea:focus{
    border-color:#b8860b;
}

.quote-content button{
    width:100%;
    padding:13px;
    background:#b8860b;
    color:white;
    border:none;
    border-radius:6px;
    cursor:pointer;
    font-size:16px;
    transition:.3s;
}

.quote-content button:hover{
    background:#946c08;
}

.phone-box{
    display:flex;
    gap:10px;
}


.phone-box select{
      width:100px;
    padding:8px;
    font-size:13px;
}


.phone-box input{
    flex:1;
}


#phoneError{
    color:red;
    font-size:13px;
}



.close-btn{
    position:absolute;
    right:18px;
    top:12px;
    font-size:30px;
    cursor:pointer;
}

/* =====================================================
   QUOTE SUCCESS POPUP
===================================================== */

#quoteSuccessPopup,
#quoteErrorPopup {

  position: fixed;

  inset: 0;

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 20px;

  background:
    rgba(16, 47, 70, 0.35);

  z-index: 99999;
}


/* =====================================================
   SUCCESS BOX
===================================================== */

.quote-success-box {

  width: 100%;

  max-width: 380px;

  background: white;

  border-radius: 18px;

  padding: 35px 30px;

  text-align: center;

  box-shadow:
    0 20px 60px
    rgba(0, 0, 0, 0.20);

  animation:
    quotePopupAppear
    0.3s ease;
}


.quote-success-icon {

  width: 65px;

  height: 65px;

  margin: 0 auto 18px;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  background: #e5f7ed;

  color: #15803d;

  font-size: 32px;

  font-weight: bold;
}


.quote-success-box h3 {

  font-size: 21px;

  color: #102f46;

  margin-bottom: 10px;
}


.quote-success-box p {

  color: #7a8993;

  font-size: 14px;

  line-height: 1.6;
}


/* =====================================================
   ERROR BOX
===================================================== */

.quote-error-box {

  width: 100%;

  max-width: 380px;

  background: white;

  border-radius: 18px;

  padding: 35px 30px;

  text-align: center;

  box-shadow:
    0 20px 60px
    rgba(0, 0, 0, 0.20);

  animation:
    quotePopupAppear
    0.3s ease;
}


.quote-error-icon {

  width: 65px;

  height: 65px;

  margin: 0 auto 18px;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  background: #fee2e2;

  color: #dc2626;

  font-size: 32px;

  font-weight: bold;
}


.quote-error-box h3 {

  font-size: 21px;

  color: #102f46;

  margin-bottom: 10px;
}


.quote-error-box p {

  color: #7a8993;

  font-size: 14px;

  line-height: 1.6;
}


/* =====================================================
   POPUP ANIMATION
===================================================== */

@keyframes quotePopupAppear {

  from {

    opacity: 0;

    transform:
      translateY(15px)
      scale(0.96);

  }


  to {

    opacity: 1;

    transform:
      translateY(0)
      scale(1);

  }

}