/* =====================================================
 * WP Cargo Tracking Form - Dark Theme Premium Design
 * Goal: Sleek, full-width dark bar with a striking red button
 * ===================================================== */

/* --- Main Container (The Dark Bar) --- */
/*
 * দ্রষ্টব্য: এই ডিজাইনটি পুরো স্ক্রিন জুড়ে (বা একটি নির্দিষ্ট কন্টেইনার জুড়ে)
 * দেখতে ভালো লাগবে। #wpcargo-track-table এর ব্যাকগ্রাউন্ড হবে ডার্ক ব্লু/নেভি।
 */
#wpcargo-track-table {
    padding: 30px 40px;
    max-width: 100%;
    margin: 25px auto;
    text-align: center;
    font-family: "Poppins", "Inter", sans-serif;
    transition: all 0.3s 
ease-in-out; /* Slight border for definition */
}

/* --- Header Text --- */
#wpcargo-track-header h3 {
  font-size: 24px;
  font-weight: 600;
  color: #edf2f7; /* Very light, off-white text */
  margin-bottom: 25px;
  letter-spacing: 0.5px;
}

/* --- Form Layout --- */
#wpcargo-track-table form {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0; /* No gap between input and button */
  flex-wrap: nowrap;
}

/* --- Input Field (Tracking Number) --- */
#wpcargo-track-table input[type="text"] {
  flex: 1;
  min-width: 850px;
  padding: 16px 20px;
  /* Deep, slightly blue-grey background */
  background-color: #2d3748; 
  color: #ffffff; /* White text color */
  font-size: 17px;
  border: 2px solid #4a5568; /* Light grey border for contrast */
  /* Rounded edges only on the left side */
  border-radius: 8px 0 0 8px; 
  outline: none;
  transition: all 0.3s ease;
}

/* Placeholder Text Color in Dark Theme */
#wpcargo-track-table input[type="text"]::placeholder {
  color: #a0aec0; 
  opacity: 0.8;
}

/* Focus Effect - Red glow to match the button */
#wpcargo-track-table input[type="text"]:focus {
  border-color: #e53e3e; /* Bright Red */
  box-shadow: 0 0 0 3px rgba(229, 62, 62, 0.4); 
  background-color: #2a3340;
}

/* --- Submit Button (Track) --- */
#wpcargo-track-table input[type="submit"] {
  /* Striking Red Color */
  background: #e53e3e; 
  color: #ffffff;
  border: none;
  padding: 16px 25px; /* Same height as the input field */
  font-weight: 700;
  cursor: pointer;
  font-size: 17px;
  /* Rounded edges only on the right side */
  border-radius: 0 8px 8px 0; 
  letter-spacing: 0.5px;
  box-shadow: 0 4px 15px rgba(229, 62, 62, 0.4);
  transition: all 0.3s ease;
  /* Use a search icon (Font Awesome is recommended) */
  /* If you can't use an icon, just use 'TRACK' as text */
  content: "Track"; 
}

/* Optional: If using a search icon, adjust padding */
/* For a text button like 'Track' or 'Search' */
#wpcargo-track-table input[type="submit"] {
    min-width: 100px;
    text-transform: uppercase;
}
/* If you use a custom icon button (needs HTML structure change) */
/*
#wpcargo-track-table button.track-icon {
    padding: 16px 20px; 
    font-family: 'Font Awesome 5 Free';
    content: "\f002"; // Search icon code
}
*/

/* Button Hover Effect - Darken and Lift */
#wpcargo-track-table input[type="submit"]:hover {
  background: #c53030; /* Slightly darker red on hover */
  transform: scale(1.02);
  box-shadow: 0 6px 20px rgba(229, 62, 62, 0.6);
}

/* --- Example Text --- */
#wpcargo-track-table p {
  color: #a0aec0;
  font-size: 15px;
  margin-top: 25px;
}

#wpcargo-track-table strong {
  color: #edf2f7;
  font-weight: 700;
}

/* --- Mobile Responsive --- */
@media (max-width: 600px) {
  #wpcargo-track-table {
    padding: 25px 20px;
  }
  #wpcargo-track-table form {
    flex-direction: column;
    gap: 10px;
  }
  /* Remove rounded corners on both sides for full-width stack */
  #wpcargo-track-table input[type="text"],
  #wpcargo-track-table input[type="submit"] {
    width: 100%;
    min-width: unset;
    border-radius: 8px; /* Fully rounded corners on mobile */
  }
  #wpcargo-track-header h3 {
    font-size: 20px;
  }
}