/* =====================================================
   MAIN SECTION
===================================================== */

.spare-parts-section {

  padding: 45px 0 100px;

  background: #ffffff;
}



/* =====================================================
   HEADING
===================================================== */

.spare-parts-heading {

  max-width: 700px;

  margin: 0 auto 45px;

  text-align: center;
}


.spare-parts-heading > span {

  display: block;

  margin-bottom: 12px;

  font-size: 12px;

  font-weight: 700;

  letter-spacing: 3px;

  color: #075985;
}


.spare-parts-heading h2 {

  margin: 0 0 15px;

  font-size: clamp(36px, 5vw, 55px);

  color: #063f63;
}


.spare-parts-heading p {

  margin: 0;

  font-size: 16px;

  line-height: 1.7;

  color: #667085;
}



/* =====================================================
   SEARCH
===================================================== */

.spare-search {

  position: relative;

  max-width: 600px;

  margin: 0 auto 55px;
}


.spare-search input {

  width: 100%;

  box-sizing: border-box;

  padding: 16px 20px 16px 50px;

  border: 1px solid #d9e5ec;

  border-radius: 50px;

  outline: none;

  background: #f8fafb;

  color: #31566d;

  font-family: inherit;

  font-size: 15px;

  transition:
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}


.spare-search input:focus {

  border-color: #075985;

  box-shadow:
    0 0 0 4px
    rgba(7,89,133,0.08);
}


.search-icon {

  position: absolute;

  left: 20px;

  top: 50%;

  transform:
    translateY(-50%);

  font-size: 17px;

  opacity: 0.55;
}



/* =====================================================
   PARTS GRID
===================================================== */

.spare-parts-grid {

  display: grid;

  grid-template-columns:
    repeat(4, 1fr);

  gap: 22px;
}



/* =====================================================
   CARD
===================================================== */

.spare-part-card {

  overflow: hidden;

  background: white;

  border: 1px solid #e3edf2;

  border-radius: 16px;

  box-shadow:
    0 8px 25px
    rgba(0,0,0,0.05);

  opacity: 0;

  transform:
    translateY(45px);

  transition:
    opacity 0.7s ease,
    transform 0.7s ease,
    box-shadow 0.35s ease;
}


.spare-part-card.visible {

  opacity: 1;

  transform:
    translateY(0);
}


.spare-part-card:hover {

  transform:
    translateY(-6px);

  box-shadow:
    0 18px 40px
    rgba(0,0,0,0.11);
}



/* =====================================================
   PART IMAGE
===================================================== */

.spare-part-image {

  position: relative;

  height: 230px;

  display: flex;

  align-items: center;

  justify-content: center;

  overflow: hidden;

  background: #f5f8fa;
}


.spare-part-image img {

  width: 100%;

  height: 100%;

  object-fit: contain;

  padding: 15px;

  box-sizing: border-box;

  transition:
    transform 0.6s ease;
}


.spare-part-card:hover
.spare-part-image img {

  transform:
    scale(1.08);
}



/* =====================================================
   PART NUMBER
===================================================== */

.part-number {

  position: absolute;

  top: 12px;

  right: 14px;

  font-size: 38px;

  line-height: 1;

  font-weight: 900;

  color:
    rgba(7,89,133,0.13);
}



/* =====================================================
   CARD CONTENT
===================================================== */

.spare-part-content {

  padding: 20px;
}


.part-label {

  font-size: 10px;

  font-weight: 700;

  letter-spacing: 2px;

  color: #075985;
}


.spare-part-content h3 {

  min-height: 48px;

  margin:
    8px 0 5px;

  font-size: 17px;

  line-height: 1.4;

  color: #063f63;
}


.spare-part-content small {

  display: block;

  min-height: 34px;

  font-size: 11px;

  line-height: 1.5;

  color: #7b8993;
}



/* =====================================================
   CARD BOTTOM
===================================================== */

.part-bottom {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 10px;

  margin-top: 15px;

  padding-top: 15px;

  border-top: 1px solid #edf2f5;
}


.part-price {

  font-size: 14px;

  font-weight: 700;

  color: #075985;
}


.part-enquire-btn {

  padding: 8px 13px;

  border: none;

  border-radius: 7px;

  background: #ff9800;

  color: white;

  font-family: inherit;

  font-size: 12px;

  font-weight: 600;

  cursor: pointer;

  transition:
    background 0.3s ease,
    transform 0.3s ease;
}


.part-enquire-btn:hover {

  background: #ff9800;

  transform:
    translateY(-2px);
}



/* =====================================================
   NO RESULTS
===================================================== */

.no-spare-results {

  display: none;

  padding: 70px 20px;

  text-align: center;
}


.no-spare-results.show {

  display: block;
}


.no-spare-results h3 {

  margin: 0 0 8px;

  color: #063f63;
}


.no-spare-results p {

  margin: 0;

  color: #667085;
}



/* =====================================================
   MODAL
===================================================== */

.spare-modal {

  position: fixed;

  inset: 0;

  z-index: 9999;

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 20px;

  background:
    rgba(0,0,0,0.65);

  opacity: 0;

  visibility: hidden;

  transition:
    opacity 0.3s ease,
    visibility 0.3s ease;
}


.spare-modal.active {

  opacity: 1;

  visibility: visible;
}


.spare-modal-content {

  position: relative;

  width: 100%;

  max-width: 500px;

  max-height: 90vh;

  overflow-y: auto;

  padding: 35px;

  box-sizing: border-box;

  border-radius: 18px;

  background: white;

  box-shadow:
    0 25px 70px
    rgba(0,0,0,0.25);

  transform:
    scale(0.8)
    translateY(30px);

  transition:
    transform 0.4s
    cubic-bezier(.16,1,.3,1);
}


.spare-modal.active
.spare-modal-content {

  transform:
    scale(1)
    translateY(0);
}


.spare-modal-close {

  position: absolute;

  top: 15px;

  right: 18px;

  width: 35px;

  height: 35px;

  border: none;

  border-radius: 50%;

  background: #f1f5f7;

  color: #526b7b;

  font-size: 25px;

  cursor: pointer;

  transition:
    transform 0.3s ease;
}


.spare-modal-close:hover {

  transform:
    rotate(90deg);
}


.spare-modal-content h2 {

  margin:
    10px 40px 8px 0;
justify-content: center;
  color: #b8860b;
}


.spare-modal-content > p {

  margin-bottom: 25px;

  font-size: 14px;

  line-height: 1.6;

  color: #667085;
}



/* =====================================================
   FORM
===================================================== */

.spare-form-group {

  margin-bottom: 17px;
}


.spare-form-group label {

  display: block;

  margin-bottom: 7px;

  font-size: 13px;

  font-weight: 600;

  color: #31566d;
}


.spare-form-group input,
.spare-form-group textarea {

  width: 100%;

  box-sizing: border-box;

  padding: 12px 14px;

  border: 1px solid #d9e5ec;

  border-radius: 8px;

  outline: none;

  font-family: inherit;

  font-size: 14px;

  color: #31566d;
}


.spare-form-group textarea {

  resize: vertical;
}


.spare-form-group input:focus,
.spare-form-group textarea:focus {

  border-color: #075985;

  box-shadow:
    0 0 0 3px
    rgba(7,89,133,0.08);
}


.spare-submit-btn {

  width: 100%;

  padding: 13px;

  border: none;

  border-radius: 8px;

  background: #b8860b;

  color: white;

  font-family: inherit;

  font-size: 14px;

  font-weight: 600;

  cursor: pointer;

  transition:
    background 0.3s ease,
    transform 0.3s ease;
}


.spare-submit-btn:hover {

  background: #946c08;

  transform:
    translateY(-2px);
}



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

@keyframes spareHeroReveal {

  from {

    opacity: 0;

    transform:
      translateY(45px);
  }

  to {

    opacity: 1;

    transform:
      translateY(0);
  }

}



/* =====================================================
   TABLET
===================================================== */

@media (max-width: 1050px) {

  .spare-parts-grid {

    grid-template-columns:
      repeat(3, 1fr);
  }

}


@media (max-width: 800px) {

  .spare-parts-grid {

    grid-template-columns:
      repeat(2, 1fr);
  }

}



/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 550px) {

  .spare-parts-hero {

    min-height: 450px;
  }


  .spare-parts-hero h1 {

    font-size: 44px;
  }


  .spare-parts-hero p {

    font-size: 15px;
  }


  .spare-parts-section {

    padding:
      75px 0;
  }


  .spare-parts-grid {

    grid-template-columns:
      1fr;

    gap: 20px;
  }


  .spare-part-image {

    height: 260px;
  }


  .spare-modal-content {

    padding: 28px 22px;
  }

}