/* ---- Shipping Calculator CSS ---- */

/* Main container */
.mpx-ship-cal {
  font-family: var(--mpx-ff-a) !important;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 1.25rem;
  width: 100%;
  padding: var(--mpx-pad-xxl, 2rem);
  margin: 0;
  border: 1px solid var(--mpx-brd-clr-a, #E0E0E0) !important;
  border-radius: var(--mpx-brd-lg, 1rem) !important;
  background: radial-gradient(circle, var(--mpx-clr-wh, #ffffff), var(--mpx-clr-owh, #fafafa)) !important;
}

/* Heading */
.mpx-ship-cal h2 {
  margin: 0;
  font-size: var(--mpx-fs-h5, 1.5rem) !important;
  font-weight: var(--mpx-fw-sb, 600) !important;
  line-height: var(--mpx-lh-h5, 1.8125rem) !important;
  color: var(--mpx-clr-bk, #000000) !important;
}

/* Hide field label from screen only */
.mpx-ship-cal .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Field group container */
.mpx-ship-cal .mpx-field-group {
  display: flex !important;
  flex-direction: row !important;
  justify-content: flex-start !important;
  align-items: center !important;
  gap: 1rem !important;
  width: 100% !important;
  padding: 0 1rem !important;
  border: 1px solid var(--mpx-brd-clr-a, #E0E0E0) !important;
  border-radius: var(--mpx-brd-sm, 0.25rem) !important;
  background-color: var(--mpx-clr-wh, #ffffff) !important;
  box-shadow: var(--mpx-shd-sm) !important;
  transition: border 0.6s ease, box-shadow 0.3s ease !important;
}

.mpx-ship-cal .mpx-field-group:hover {
  border: 1px solid var(--mpx-clr-sec, #E0E0E0) !important;
  box-shadow: var(--mpx-shd-hov) !important;
}

/* Field icon */
.mpx-ship-cal .mpx-form-icon {
  position: relative;
  width: 1.5rem;
  height: 1.5rem;
  color: var(--mpx-clr-gray-lt, #979797) !important;
}

/* Field */
.mpx-ship-cal .mpx-form-field {
  font-family: inherit;
  font-size: var(--mpx-fs-sm, 15px);
  font-weight: var(--mpx-fw-n, 400);
  background-color: var(--mpx-clr-wh, #ffffff) !important;
  border: none !important;
  outline: none !important;
  width: 100%;
  padding: 1rem 0 !important;
  color: var(--mpx-clr-bk, #000000) !important;
}

/* Field placeholder */
.mpx-ship-cal .mpx-form-field::placeholder {
  color: var(--mpx-clr-gray-lt, #979797) !important; 
}

/* Autofill override (Chrome) */
.mpx-ship-cal .mpx-field-group input:-webkit-autofill,
.mpx-ship-cal .mpx-field-group textarea:-webkit-autofill,
.mpx-ship-cal .mpx-field-group select:-webkit-autofill {
  -webkit-box-shadow: 0 0 0px 1000px var(--mpx-clr-wh, #ffffff) inset !important;
  box-shadow: 0 0 0px 1000px var(--mpx-clr-wh, #ffffff) inset !important;
  -webkit-text-fill-color: var(--mpx-clr-bk, #000000) !important;
  font-family: var(--mpx-ff-a, sans-serif) !important;
  transition: background-color 5000s ease-in-out 0s;
}

/* Autofill override (Firefox) */
.mpx-ship-cal .mpx-field-group input:-moz-autofill,
.mpx-ship-cal .mpx-field-group textarea:-moz-autofill,
.mpx-ship-cal .mpx-field-group select:-moz-autofill {
  box-shadow: 0 0 0px 1000px var(--mpx-clr-wh, #ffffff) inset !important;
  color: var(--mpx-clr-bk, #000000) !important;
  font-family: var(--mpx-ff-a, sans-serif) !important;
}

/* Submit button */
.mpx-ship-cal .mpx-form-btn {
  cursor: pointer;
  border: none !important;
  font-family: var(--mpx-ff-a, inherit) !important;
  font-size: var(--mpx-fs-sm, 15px) !important;
  line-height: var(--mpx-lh-sm, 1.5rem) !important;
  font-weight: 500 !important;
  width: 100% !important;
  padding: var(--mpx-btn-pad-md, 0.75rem 1.5rem) !important;
  border-radius: var(--mpx-brd-sm, 0.25rem) !important;
  background-color: var(--mpx-clr-acc-a, #000000) !important;
  color: var(--mpx-clr-bk, #ffffff) !important;
  transition: background 0.3s ease, color 0.3s ease;
}

.mpx-ship-cal .mpx-form-btn:hover {
  background-color: var(--mpx-clr-sec, #979797) !important;
  color: var(--mpx-clr-wh, #000000) !important;
}

/* Calculation results */
.mpx-ship-cal-result {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  font-size: var(--mpx-fs-body, 16px) !important;
  font-weight: 600;
}

.mpx-ship-cal .mpx-output-text {
  margin: 0 4px 0;
}

.mpx-ship-cal a {
  display: inline;
  white-space: normal;
  font-weight: 600;
  text-decoration: none;
  color: var(--mpx-clr-sec, #979797) !important;
  font-size: var(--mpx-fs-body, 16px) !important;
  
}

.mpx-ship-cal a:hover {
  color: var(--mpx-clr-sec, #979797) !important;
  text-decoration: underline;
  font-weight: 600;
  font-size: var(--mpx-fs-body, 16px) !important;
}

/* Rate output toggle */
#rateOutput {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, opacity 0.3s ease;
}

#rateOutput.show {
  max-height: 200px;
  opacity: 1;
}

/* Responsiveness */
@media (max-width: 768px) {
  .mpx-ship-cal {
    padding: 1.25rem;
  }
}

@media (max-width: 480px) {
  .mpx-ship-cal .mpx-form-field {
    font-size: 16px;
  }
}