/* ==========================================================================
   Page Title / Breadcrumb Area (Consistent with other pages)
   ========================================================================== */
.page-title-area {
    background-color: var(--deep-blue); /* Or your desired background */
    padding: 2rem 0;
    text-align: center;
}

.page-title-content h1 {
    font-size: 2.5rem;
    color: var(--white);
    margin-bottom: 0.5rem;
}

.breadcrumb {
    justify-content: center;
    background-color: transparent;
    padding: 0;
    margin: 0;
}

.breadcrumb-item {
    color: rgba(255, 255, 255, 0.7);
}

.breadcrumb-item a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
}

.breadcrumb-item.active {
    color: var(--white);
    font-weight: 600;
}

/* ==========================================================================
  Tracking form
   ========================================================================== */
.tracking-form-section {
    padding: 7.1875rem 0 4.375rem;
}
.tracking-form {
  display: flex;
  max-width: 700px;
  margin: 0 auto;
}
.tracking-form input {
   width: calc(100% - 160px); /* Adjust based on button width */
   float: left;    /* Place next to the button */
   border: none;
  height: 50px;
  padding: 0 30px;
   background: rgba(255, 255, 255, 0.95);
   font-size: 1rem;
   color: var(--deep-blue); /* Input text color */
   transition: var(--transition-base);
   box-shadow: var(--box-shadow-lg);
    border-radius: var(--border-radius-lg) 0 0 var(--border-radius-lg) ;
}
.tracking-form input::placeholder {
   color: #99a3ba;
}
.tracking-form input:focus {
     outline: 2px solid var(--accent-blue); /* Clear focus outline */
     background: var(--white);
     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); /* Reduced shadow on focus */
}

.tracking-form button {
    width: 160px;
    background: var(--gradient-primary);
    color: var(--white);
    border: none;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-base);
    float: right;  /* Place button to the right */
    appearance: none; /* Remove default appearance */
    -webkit-appearance: none; /* For Safari */
    -moz-appearance: none;    /* For Firefox */
    border-radius: 0 var(--border-radius-lg) var(--border-radius-lg) 0;

}
.tracking-form button:hover {
  background: linear-gradient(135deg, var(--secondary-blue) 0%, var(--primary-blue) 100%);
}
/* ==========================================================================
   Tracking Progress Section
   ========================================================================== */
.tracking-progress-section {
    padding: 4.375rem 0; /*  70px / 16 = 4.375rem */
     background-color: var(--light-blue);
}
.tracking-section h6 {
    color: var(--accent-blue);
}
.tracking-section h2 {
    color: var(--deep-blue);
}
.tracking-progress-bar {
    display: flex;
    flex-wrap: nowrap; /* Prevent wrapping */
    overflow-x: auto;  /* Enable horizontal scrolling */
    gap: 2rem;        /* Space between steps */
    padding-bottom: 1rem; /* Space for scrollbar */
    -webkit-overflow-scrolling: touch; /* Enable smooth scrolling on iOS */
}

.tracking-progress-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex-shrink: 0;      /*  Prevent shrinking */
    width: 200px;       /*  Adjust width as needed */
    padding: 1rem;
    border-radius: var(--border-radius-sm);
    background-color: var(--white);
    box-shadow: var(--box-shadow-sm);
    transition: var(--transition-base);
}
.tracking-progress-step.active {
     background-color: var(--primary-blue); /* Or your desired active color */
    color: var(--white);
}
.tracking-progress-step.active .progress-icon {
    background-color: var(--white);
    color: var(--primary-blue);
}
 .tracking-progress-step.active .progress-info h5, .tracking-progress-step.active .progress-info p {
    color: var(--white);
}
.progress-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: var(--light-blue);
    color: var(--primary-blue);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 1rem;
     transition: var(--transition-base);
}

.progress-info h5 {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--deep-blue);
}
.progress-info p {
margin-bottom: 0;
}
.progress-location {
 font-style: italic;
}

/* ==========================================================================
   Barcode Section
   ========================================================================== */

.barcode-section {
    padding: 4.375rem 0;
     background-color: var(--white);
     text-align: center;
}

.barcode-wrapper {
     display: flex;
    flex-direction: column;
    align-items: center; /* Center items horizontally */
    gap: 1rem;        /* Space between barcode and logo */

}

.barcode-image {
    /* Add styles if needed to control barcode size/appearance */
}
.barcode-image img {
    max-width: 100%;  /*  Make sure the barcode is responsive */
    height: auto;
}

.company-logo img {
    max-width: 200px;  /* Adjust as needed */
    height: auto;
}

/* ==========================================================================
   Shipper/Receiver Info Section
   ========================================================================== */

.shipper-receiver-section {
    padding: 4.375rem 0;
     background-color: var(--light-blue);
}

.shipper-receiver-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Two columns */
    gap: 2rem;
}

.shipper-info,
.receiver-info {
    padding: 1.5rem;
    border-radius: var(--border-radius-md);
    background-color: var(--white);
     box-shadow: var(--box-shadow-sm);
}
.shipper-receiver-section h5 {
  font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--deep-blue);
}
.shipper-receiver-section strong {
  color: var(--deep-blue);
}
/* ==========================================================================
   Shipment Details Section
   ========================================================================== */

.shipment-details-section {
    padding: 4.375rem 0;
    background-color: var(--white);
}
.shipment-details-section h6 {
    color: var(--accent-blue);
    text-align: center;
}
.shipment-details-section h2 {
    color: var(--deep-blue);
    text-align: center;
}
.shipment-details-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr); /* 12-column grid for flexibility */
    gap: 2rem;
    align-items: start; /* Align items to the top */
}

.shipment-image {
    grid-column: span 4; /* Adjust as needed */
     border-radius: var(--border-radius-md); /* Add a border-radius */
    overflow: hidden;
}
.shipment-image img {
 width: 100%;
 height: auto;
}
.shipment-info {
    grid-column: span 8; /* Adjust as needed */
     display: grid;
    grid-template-columns: repeat(2, 1fr); /* Two columns for the info */
    gap: 1rem;
}

.info-group {
    /* No specific styles - let content flow */
    padding: 1rem;
    border-bottom: 1px solid #eee;

}
.info-group:nth-child(odd) {
     background-color: var(--light-blue);
     border-radius: var(--border-radius-md);
}
 .info-group h6 {
    font-weight: 600;
    margin-bottom: 0.25rem;
    color: var(--deep-blue);
     font-size: 1rem;
}

/* ==========================================================================
   Map Section
   ========================================================================== */

.map-section {
    padding: 4.375rem 0;
    background-color: var(--light-blue); /* Or your desired background */
}

.map-container {
    /*  No specific styles needed if the iframe takes 100% width/height */
}

/* ==========================================================================
   Print Receipt Section
   ========================================================================== */

.print-receipt-section {
    padding: 4.375rem 0;
    background-color: var(--white);
    text-align: center;
}

.print-receipt-wrapper {
    /* No specific styles needed - let the button style itself */
}

/* Responsive Adjustments */

@media (max-width: 991.98px) {
    .shipment-details-grid {
        grid-template-columns: 1fr; /* Single column on smaller screens */
    }
    .shipment-image {
        margin-bottom: 1rem; /* Add some spacing */
    }

}
@media (max-width: 768px) {
    .shipper-receiver-grid {
        grid-template-columns: 1fr; /* Single column on mobile */
    }
     .shipment-info {
       grid-template-columns: 1fr; /* Single column */
    }
}