/* ShipGlobal result page final patch
   Load this AFTER index.css and tracking-wordpress-fix-v3.css
*/

/* Result page max width and outer padding */
#sg-tracking-app-wrapper main.relative > div[class~="relative"][class~="z-10"] {
  max-width: 1230px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 10px !important;
  padding-right: 10px !important;
}

/* H2: Track Your Shipment */
#sg-tracking-app-wrapper main.relative > div[class~="relative"][class~="z-10"] > div[class~="space-y-4"] > p:first-child {
  font-size: 28px !important;
  line-height: 1.25 !important;
  font-weight: 600 !important;
  color: #2E3C5E !important;
  margin-bottom: 12px !important;
}

/* Description below H2 */
#sg-tracking-app-wrapper main.relative > div[class~="relative"][class~="z-10"] > div[class~="space-y-4"] > p:nth-child(2) {
  font-size: 16px !important;
  line-height: 1.6 !important;
  font-weight: 400 !important;
  margin-bottom: 20px !important;
}

/* Tracking ID card */
#sg-tracking-app-wrapper main.relative > div[class~="relative"][class~="z-10"] > div[class~="mt-6"][class~="bg-white"] {
  margin-top: 20px !important;
  margin-bottom: 20px !important;
  padding-left: 10px !important;
  padding-right: 10px !important;
}

/* Result wrapper gap */
#sg-tracking-app-wrapper main.relative > div[class~="relative"][class~="z-10"] > div[class~="mt-10"][class~="space-y-10"] {
  margin-top: 20px !important;
}

/* Override Tailwind space-y-10 to 20px */
#sg-tracking-app-wrapper main.relative div[class~="space-y-10"] > :not([hidden]) ~ :not([hidden]) {
  margin-top: 20px !important;
}

/* Shipment Details and Tracking History cards */
#sg-tracking-app-wrapper main.relative div[class~="space-y-10"] > div[class~="bg-white"] {
  padding-left: 28px !important;
  padding-right: 28px !important;
  margin-bottom: 0 !important;
  border-radius: 12px !important;
}

/* H3: Shipment Details */
#sg-tracking-app-wrapper main.relative div[class~="space-y-10"] > div[class~="bg-white"]:first-child > div:first-child > p {
  font-size: 22px !important;
  line-height: 1.35 !important;
  font-weight: 600 !important;
  color: #2E3C5E !important;
}

/* H3: Tracking History */
#sg-tracking-app-wrapper main.relative div[class~="space-y-10"] > div[class~="bg-white"]:nth-child(2) > div:first-child {
  font-size: 22px !important;
  line-height: 1.35 !important;
  font-weight: 600 !important;
  color: #2E3C5E !important;
}

/* Tracking history stage text */
#sg-tracking-app-wrapper main.relative div[class~="space-y-10"] h3 {
  font-size: 16px !important;
  line-height: 1.4 !important;
  font-weight: 500 !important;
  color: #2E3C5E !important;
}

/* Tracking date and location */
#sg-tracking-app-wrapper main.relative div[class~="space-y-10"] p,
#sg-tracking-app-wrapper main.relative div[class~="space-y-10"] div[class*="italic"] {
  font-size: 14px !important;
  font-weight: 400 !important;
}

/* Keep tracking history line connected */
#sg-tracking-app-wrapper main.relative div[class~="space-y-10"] [class*="border-l"] {
  border-left-color: #02BC77 !important;
  border-left-width: 1px !important;
}

/* Mobile */
@media (max-width: 768px) {
  #sg-tracking-app-wrapper main.relative > div[class~="relative"][class~="z-10"] {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  #sg-tracking-app-wrapper main.relative div[class~="space-y-10"] > div[class~="bg-white"] {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  #sg-tracking-app-wrapper main.relative > div[class~="relative"][class~="z-10"] > div[class~="space-y-4"] > p:first-child {
    font-size: 24px !important;
  }

  #sg-tracking-app-wrapper main.relative div[class~="space-y-10"] > div[class~="bg-white"]:first-child > div:first-child > p,
  #sg-tracking-app-wrapper main.relative div[class~="space-y-10"] > div[class~="bg-white"]:nth-child(2) > div:first-child {
    font-size: 20px !important;
  }
}




/* =========================================================
   FINAL SMALL FIXES
   1. Add top padding inside Shipment Details and Tracking History
   2. Remove orange bg from X clear button
   3. Connect tracking points with green center line
   ========================================================= */

/* Add top padding above Shipment Details content */
#sg-tracking-app-wrapper main.relative div[class~="space-y-10"] > div[class~="bg-white"]:first-child {
  padding-top: 28px !important;
}

/* Add top padding above Tracking History content */
#sg-tracking-app-wrapper main.relative div[class~="space-y-10"] > div[class~="bg-white"]:nth-child(2) {
  padding-top: 28px !important;
}

/* Remove orange background from X button */
#sg-tracking-app-wrapper main.relative form button:not(:last-child),
#sg-tracking-app-wrapper main.relative form button:has(svg):not(:last-child) {
  background: transparent !important;
  background-color: transparent !important;
  color: #111827 !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  width: 32px !important;
  min-width: 32px !important;
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

/* X icon styling */
#sg-tracking-app-wrapper main.relative form button:not(:last-child) svg,
#sg-tracking-app-wrapper main.relative form button:has(svg):not(:last-child) svg {
  width: 22px !important;
  height: 22px !important;
  stroke: #111827 !important;
  color: #111827 !important;
}

/* Keep Track button orange */
#sg-tracking-app-wrapper main.relative form button:last-child {
  background: #f97300 !important;
  background-color: #f97300 !important;
  color: #ffffff !important;
}

/* Connected green vertical line in tracking history */
#sg-tracking-app-wrapper main.relative div[class~="space-y-10"] > div[class~="bg-white"]:nth-child(2) [class*="border-l"] {
  border-left-width: 2px !important;
  border-left-style: solid !important;
  border-left-color: #02bc77 !important;
}

/* Make sure green dots sit centered on the line */
#sg-tracking-app-wrapper main.relative div[class~="space-y-10"] > div[class~="bg-white"]:nth-child(2) [class*="rounded-full"][class*="bg-green"],
#sg-tracking-app-wrapper main.relative div[class~="space-y-10"] > div[class~="bg-white"]:nth-child(2) [class*="rounded-full"][class*="bg-emerald"] {
  background-color: #02bc77 !important;
  border-radius: 9999px !important;
  z-index: 2 !important;
}

/* Normal timeline dots */
#sg-tracking-app-wrapper main.relative div[class~="space-y-10"] > div[class~="bg-white"]:nth-child(2) [class*="rounded-full"][class*="bg-green"]:not(:has(svg)),
#sg-tracking-app-wrapper main.relative div[class~="space-y-10"] > div[class~="bg-white"]:nth-child(2) [class*="rounded-full"][class*="bg-emerald"]:not(:has(svg)) {
  width: 10px !important;
  height: 10px !important;
  min-width: 10px !important;
  min-height: 10px !important;
}

/* Delivered check circle */
#sg-tracking-app-wrapper main.relative div[class~="space-y-10"] > div[class~="bg-white"]:nth-child(2) [class*="rounded-full"][class*="bg-green"]:has(svg),
#sg-tracking-app-wrapper main.relative div[class~="space-y-10"] > div[class~="bg-white"]:nth-child(2) [class*="rounded-full"][class*="bg-emerald"]:has(svg) {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
}

#sg-tracking-app-wrapper main.relative form div button {
  background: transparent !important;
  background-color: transparent !important;
}