/* ShipGlobal tracking app fixes for direct WordPress/Elementor loading */
#sg-tracking-app-wrapper {
  width: 100%;
  background: #f7f8fa;
  overflow-x: hidden;
  font-family: Poppins, Arial, sans-serif;
}

#sg-tracking-app-wrapper,
#sg-tracking-app-wrapper * ,
#sg-tracking-app-wrapper *::before,
#sg-tracking-app-wrapper *::after {
  box-sizing: border-box;
}

#sg-tracking-app-wrapper p,
#sg-tracking-app-wrapper h1,
#sg-tracking-app-wrapper h2,
#sg-tracking-app-wrapper h3 {
  margin-top: 0;
}

#sg-tracking-app-wrapper img {
  max-width: none;
}

#sg-tracking-app-wrapper input,
#sg-tracking-app-wrapper button {
  font-family: inherit;
  box-shadow: none;
}

/* Outer React layout */
#sg-tracking-app-wrapper > #root,
#sg-tracking-app-wrapper .relative.flex.flex-col,
#sg-tracking-app-wrapper .relative.flex.flex-col > main.flex-grow {
  width: 100%;
  background: #f7f8fa;
}

#sg-tracking-app-wrapper .relative.flex.flex-col > main.flex-grow {
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* First landing page: full background, boxed content */
#sg-tracking-app-wrapper .relative.flex.flex-col > main.flex-grow > section {
  background: #f7f8fa !important;
  min-height: auto !important;
  padding-top: 56px !important;
  padding-bottom: 76px !important;
}

#sg-tracking-app-wrapper .relative.flex.flex-col > main.flex-grow > section > div.flex {
  max-width: 1230px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 15px !important;
  padding-right: 15px !important;
  align-items: center !important;
}

#sg-tracking-app-wrapper .relative.flex.flex-col > main.flex-grow > section > div.flex > div:first-child {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Restore hero text size when WordPress/theme CSS interferes */
#sg-tracking-app-wrapper .relative.flex.flex-col > main.flex-grow > section > div.flex > div:first-child > p:first-child {
  font-size: 4rem !important;
  line-height: 1.08 !important;
  color: #2e3c5e !important;
  font-weight: 400 !important;
  margin-bottom: 0 !important;
}

#sg-tracking-app-wrapper .relative.flex.flex-col > main.flex-grow > section > div.flex > div:first-child > p:nth-child(2) {
  font-size: 5rem !important;
  line-height: 1.05 !important;
  color: #b66a4c !important;
  font-weight: 600 !important;
  margin-top: 16px !important;
  margin-bottom: 0 !important;
}

#sg-tracking-app-wrapper .relative.flex.flex-col > main.flex-grow > section > div.flex > div:first-child > p:nth-child(3) {
  font-size: 1.25rem !important;
  line-height: 2rem !important;
  color: #2e3c5e !important;
  max-width: 540px !important;
  margin-top: 28px !important;
}

/* Landing input/button */
#sg-tracking-app-wrapper input[type="text"] {
  border: 0 !important;
  outline: 0 !important;
}

#sg-tracking-app-wrapper button {
  border: 0 !important;
}

/* Result page: boxed width and normal dynamic height */
#sg-tracking-app-wrapper .relative.flex.flex-col > main.flex-grow > main.relative {
  max-width: 1230px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 35px 15px 80px !important;
  background: #f7f8fa !important;
  min-height: auto !important;
}

#sg-tracking-app-wrapper .relative.flex.flex-col > main.flex-grow > main.relative > div {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

#sg-tracking-app-wrapper .relative.flex.flex-col > main.flex-grow > main.relative > img {
  top: 0 !important;
  margin-top: 90px !important;
}

@media (max-width: 1024px) {
  #sg-tracking-app-wrapper .relative.flex.flex-col > main.flex-grow > section {
    padding-top: 42px !important;
    padding-bottom: 60px !important;
  }

  #sg-tracking-app-wrapper .relative.flex.flex-col > main.flex-grow > section > div.flex > div:first-child > p:first-child {
    font-size: 3.4rem !important;
  }

  #sg-tracking-app-wrapper .relative.flex.flex-col > main.flex-grow > section > div.flex > div:first-child > p:nth-child(2) {
    font-size: 4.2rem !important;
  }
}

@media (max-width: 768px) {
  #sg-tracking-app-wrapper .relative.flex.flex-col > main.flex-grow > section > div.flex,
  #sg-tracking-app-wrapper .relative.flex.flex-col > main.flex-grow > main.relative {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  #sg-tracking-app-wrapper .relative.flex.flex-col > main.flex-grow > section {
    padding-top: 35px !important;
    padding-bottom: 45px !important;
  }

  #sg-tracking-app-wrapper .relative.flex.flex-col > main.flex-grow > section > div.flex > div:first-child > p:first-child {
    font-size: 3.4rem !important;
    font-weight: 600 !important;
  }

  #sg-tracking-app-wrapper .relative.flex.flex-col > main.flex-grow > section > div.flex > div:first-child > p:nth-child(2) {
    font-size: 3.4rem !important;
  }

  #sg-tracking-app-wrapper .relative.flex.flex-col > main.flex-grow > section > div.flex > div:first-child > p:nth-child(3) {
    font-size: 1.55rem !important;
    line-height: 2.25rem !important;
  }
}


/* v3: keep the direct React app isolated from WordPress/Elementor layout */
#sg-tracking-app-wrapper {
  width: 100%;
  background: #f7f8fa !important;
  overflow-x: hidden;
  font-family: Poppins, sans-serif;
}
#sg-tracking-app-wrapper > #root {
  width: 100%;
  background: #f7f8fa !important;
}
#sg-tracking-app-wrapper main {
  max-width: 1230px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 15px !important;
  padding-right: 15px !important;
  box-sizing: border-box !important;
  background: #f7f8fa !important;
}
#sg-tracking-app-wrapper main section {
  background: #f7f8fa !important;
}
#sg-tracking-app-wrapper button,
#sg-tracking-app-wrapper input {
  font-family: inherit !important;
}
#sg-tracking-app-wrapper img {
  max-width: none;
}
@media (max-width: 768px) {
  #sg-tracking-app-wrapper main {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}
/* Main tracking wrapper */
#sg-tracking-app-wrapper {
  width: 100%;
  background: #f7f8fa !important;
  overflow-x: hidden;
  font-family: Poppins, sans-serif !important;
}

/* Keep app boxed like website */
#sg-tracking-app-wrapper main {
  max-width: 1230px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 15px !important;
  padding-right: 15px !important;
  box-sizing: border-box !important;
}

/* Background full row */
#sg-tracking-app-wrapper section {
  background: #f7f8fa !important;
}

/* Fix landing page spacing */
#sg-tracking-app-wrapper main section {
  padding-top: 55px !important;
  padding-bottom: 80px !important;
}

/* Remove extra spacing from old app header */
#sg-tracking-app-wrapper .mt-12 {
  margin-top: 0 !important;
}

/* Fix WordPress/Theme overriding button styles */
#sg-tracking-app-wrapper button {
  background: #f97300 !important;
  color: #ffffff !important;
  border: 0 !important;
  border-radius: 8px !important;
  font-family: Poppins, sans-serif !important;
  font-weight: 500 !important;
  box-shadow: none !important;
  outline: none !important;
  text-decoration: none !important;
  cursor: pointer !important;
}

/* Track button hover */
#sg-tracking-app-wrapper button:hover,
#sg-tracking-app-wrapper button:focus {
  background: #f97300 !important;
  color: #ffffff !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Fix input styling */
#sg-tracking-app-wrapper input {
  font-family: Poppins, sans-serif !important;
  color: #24314f !important;
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Fix placeholder */
#sg-tracking-app-wrapper input::placeholder {
  color: #6b7280 !important;
  opacity: 1 !important;
}

/* Keep images responsive but not broken by WordPress */
#sg-tracking-app-wrapper img {
  max-width: 100%;
  height: auto;
}

/* Result page spacing fix */
#sg-tracking-app-wrapper main > div {
  padding-top: 35px !important;
}

/* Shipment details/result cards */
#sg-tracking-app-wrapper [class*="rounded"] {
  box-sizing: border-box !important;
}

/* Tracking history text should not inherit WordPress font size */
#sg-tracking-app-wrapper h1,
#sg-tracking-app-wrapper h2,
#sg-tracking-app-wrapper h3,
#sg-tracking-app-wrapper p,
#sg-tracking-app-wrapper span,
#sg-tracking-app-wrapper div {
  font-family: Poppins, sans-serif !important;
}

/* Mobile fixes */
@media (max-width: 768px) {
  #sg-tracking-app-wrapper main {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  #sg-tracking-app-wrapper main section {
    padding-top: 35px !important;
    padding-bottom: 60px !important;
  }

  #sg-tracking-app-wrapper button {
    width: 100% !important;
    min-height: 56px !important;
    font-size: 18px !important;
  }

  #sg-tracking-app-wrapper input {
    min-height: 56px !important;
    font-size: 16px !important;
  }
}

/* =========================================================
   RESULT PAGE SECTION SPACING + HEADING FIX
   Add after all existing CSS
   ========================================================= */

/* Result page outer padding */
#sg-tracking-app-wrapper .relative.flex.flex-col > main.flex-grow > main.relative {
  padding-left: 25px !important;
  padding-right: 25px !important;
}

/* 1) Tracking ID section/card */
#sg-tracking-app-wrapper .relative.flex.flex-col > main.flex-grow > main.relative form {
  margin-bottom: 20px !important;
  padding-left: 10px !important;
  padding-right: 10px !important;
  box-sizing: border-box !important;
}

/* 2) Shipment Details section/card */
#sg-tracking-app-wrapper .relative.flex.flex-col > main.flex-grow > main.relative form + div {
  margin-top: 0 !important;
  margin-bottom: 20px !important;
  padding-left: 10px !important;
  padding-right: 10px !important;
  box-sizing: border-box !important;
}

/* 3) Tracking History section/card */
#sg-tracking-app-wrapper .relative.flex.flex-col > main.flex-grow > main.relative form + div + div {
  margin-top: 0 !important;
  margin-bottom: 20px !important;
  padding-left: 10px !important;
  padding-right: 10px !important;
  box-sizing: border-box !important;
}

/* Keep white card inner content comfortable */
#sg-tracking-app-wrapper .relative.flex.flex-col > main.flex-grow > main.relative form + div[class*="bg-white"],
#sg-tracking-app-wrapper .relative.flex.flex-col > main.flex-grow > main.relative form + div + div[class*="bg-white"] {
  padding-left: 28px !important;
  padding-right: 28px !important;
}

/* H2: Track Your Shipment */
#sg-tracking-app-wrapper .relative.flex.flex-col > main.flex-grow > main.relative > div > p:first-child,
#sg-tracking-app-wrapper .relative.flex.flex-col > main.flex-grow > main.relative > div > h1:first-child,
#sg-tracking-app-wrapper .relative.flex.flex-col > main.flex-grow > main.relative h1 {
  font-size: 28px !important;
  line-height: 1.25 !important;
  font-weight: 600 !important;
  color: #2E3C5E !important;
  margin-bottom: 12px !important;
}

/* H3: Shipment Details and Tracking History */
#sg-tracking-app-wrapper .relative.flex.flex-col > main.flex-grow > main.relative form + div > p:first-child,
#sg-tracking-app-wrapper .relative.flex.flex-col > main.flex-grow > main.relative form + div > h2:first-child,
#sg-tracking-app-wrapper .relative.flex.flex-col > main.flex-grow > main.relative form + div > h3:first-child,
#sg-tracking-app-wrapper .relative.flex.flex-col > main.flex-grow > main.relative form + div + div > p:first-child,
#sg-tracking-app-wrapper .relative.flex.flex-col > main.flex-grow > main.relative form + div + div > h2:first-child,
#sg-tracking-app-wrapper .relative.flex.flex-col > main.flex-grow > main.relative form + div + div > h3:first-child {
  font-size: 22px !important;
  line-height: 1.35 !important;
  font-weight: 600 !important;
  color: #2E3C5E !important;
  margin-bottom: 16px !important;
}

/* Mobile */
@media (max-width: 768px) {
  #sg-tracking-app-wrapper .relative.flex.flex-col > main.flex-grow > main.relative {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  #sg-tracking-app-wrapper .relative.flex.flex-col > main.flex-grow > main.relative form,
  #sg-tracking-app-wrapper .relative.flex.flex-col > main.flex-grow > main.relative form + div,
  #sg-tracking-app-wrapper .relative.flex.flex-col > main.flex-grow > main.relative form + div + div {
    margin-bottom: 20px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  #sg-tracking-app-wrapper .relative.flex.flex-col > main.flex-grow > main.relative form + div[class*="bg-white"],
  #sg-tracking-app-wrapper .relative.flex.flex-col > main.flex-grow > main.relative form + div + div[class*="bg-white"] {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  #sg-tracking-app-wrapper .relative.flex.flex-col > main.flex-grow > main.relative > div > p:first-child,
  #sg-tracking-app-wrapper .relative.flex.flex-col > main.flex-grow > main.relative > div > h1:first-child,
  #sg-tracking-app-wrapper .relative.flex.flex-col > main.flex-grow > main.relative h1 {
    font-size: 24px !important;
  }

  #sg-tracking-app-wrapper .relative.flex.flex-col > main.flex-grow > main.relative form + div > p:first-child,
  #sg-tracking-app-wrapper .relative.flex.flex-col > main.flex-grow > main.relative form + div > h2:first-child,
  #sg-tracking-app-wrapper .relative.flex.flex-col > main.flex-grow > main.relative form + div > h3:first-child,
  #sg-tracking-app-wrapper .relative.flex.flex-col > main.flex-grow > main.relative form + div + div > p:first-child,
  #sg-tracking-app-wrapper .relative.flex.flex-col > main.flex-grow > main.relative form + div + div > h2:first-child,
  #sg-tracking-app-wrapper .relative.flex.flex-col > main.flex-grow > main.relative form + div + div > h3:first-child {
    font-size: 20px !important;
  }
}