:root{
    --button-tag-color: #007bff;
    --box-shadow-order: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
  }
 body{
    font-family: var(--font-family-body);
  }
  #Order {
      max-width: 900px;
      margin: 0 auto;
      padding: var(--padding-m);
      background-color: var(--color-white);
      border-radius: 8px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }
    #Order h2 {
      text-align: center;
      color: var(--Primary-Text);
      font-size: var(--font-size-xxl);
      margin-bottom: var(--padding-m);
      text-align: center;
    }
      .input-wrapper {
      position: relative;
      width: 300px;
      margin: 0 auto 10px;
    }
    #mobile {
      width: 100%;
      padding: 12px;
      padding-right: var(--padding-xl); /* Space for clear icon */
      border: 1px solid #cccccc;
      border-radius: 5px;
      font-size: var(--font-size-l);
      box-sizing: border-box;
    }
    #mobile.invalid {
      border-color: #dc3545;
    }
    .clear-icon {
      display: none;
      position: absolute;
      right: 10px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 18px;
      color: #6c757d;
      cursor: pointer;

      @media (max-width: 600px) {
        right: 40px;
        font-size: 16px;
        
      }
    }
    .clear-icon:hover {
      color: #dc3545;
    }

    #searchButton {
      display: block;
      margin: 0 auto;
      padding: 12px 24px;
      border:2px solid var(--primary-color, #28a745);   
      background-color: var(--color-white);
      color: var(--primary-color, #28a745);
      font-size: var(--font-size-l);
      cursor: pointer;
      transition: background-color 0.3s ease;
      border-radius: var(--padding-s);
      @media (max-width: 600px) {
          padding: 10px 20px;
          font-size: var(--font-size-m);

      }
      &:hover {
        background-color: var(--primary-color, #28a745);
        color: var(--color-white);
        border:2px solid var(--primary-color, #28a745); 
      }
      &:active {
        background-color: var(--primary-color, #218838);
        color: var(--color-white);
        border:2px solid var(--primary-color, #28a745); 
      }
    }
    #searchButton:hover {
      background-color: #218838;
    }
    #loader {
      display: none;
      margin: 20px auto;
      width: 40px;
      height: 40px;
      border: 4px solid #f3f3f3;
      border-top: 4px solid #28a745;
      border-radius: 50%;
      animation: spin 1s linear infinite;
    }
    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
    #filterTags {
      display: flex;
      justify-content: center;
      gap: var(--padding-s);
      margin: 20px 0;
    }
    .tag {
      padding: 8px 16px;
      background-color: #e9ecef;
      border-radius: var(--padding-s);
      cursor: pointer;
      font-size: 14px;
      border: 1px solid var(--button-tag-color);
      transition: background-color 0.3s ease;
    }
    .tag:hover {
      background-color: #d6d8db;
    }
    .tag.active {
      background-color: var(--button-tag-color);
      color: var(--color-white);
    }
    #result {
      margin-top: 20px;
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(300px, 2fr));
      gap: 20px;
      justify-content: center;
      padding: 0 20px;
      box-sizing: border-box;
      max-width: 100%;
      overflow-x: auto;
      scrollbar-width: thin;
      scrollbar-color: #888 #f1f1f1;
      -ms-overflow-style: none; /* IE and Edge */
      &::-webkit-scrollbar {
        width: 8px;
      } 
      &::-webkit-scrollbar-track {
        background: #f1f1f1;
      }
      &::-webkit-scrollbar-thumb {
        background: #888;
        border-radius: 4px;
      }
      &::-webkit-scrollbar-thumb:hover {
        background: #555;
      }

    }
    #result:has(> :only-child){
      grid-template-columns: unset;
    }
    .order {
      background-color: #fafafa;
      border: 1px solid #dddddd;
      border-radius: 8px;
      padding: 20px;
      margin-bottom: 15px;
      box-shadow:var(--box-shadow-order);
    }
    .order h3 {
      color: #007bff;
      font-size: 20px;
      margin: 0 0 10px;
      text-align: center;
    }
    .order p {
      margin: 8px 0;
      font-size: 16px;
      color: #333333;
      border-bottom: 1px solid #555555;
      &:last-child {
        border-bottom: none;
        text-align: center;
        font-weight: var(--font-weight-xxl);
      }
    }
    .order p strong {
      color: #555555;
      font-weight: 600;
    }
    .error {
      color: var(--color-red);
      font-weight: bold;
      text-align: center;
      font-size: var(--font-size-l);
      padding: 16px 8px;
      border:var(--color-red) solid 2px;
      border-radius: var(--padding-s);
    }
    .raw-data {
      background-color: #f0f0f0;
      padding: 10px;
      font-family: monospace;
      font-size: 14px;
      border-radius: 5px;
      margin-top: var(--padding-s);
    }
    @media (max-width: 600px) {
      #mobile {
        width: 80%;
        margin-left: 33px;
      }
      #Order {
        padding: 15px;
      }
      #filterTags {
        flex-wrap: wrap;
        gap: 8px;
      }
      .tag {
        font-size: 12px;
        padding: 7px 13px;
      }
    }
    #col-md-4{
        padding-top: 100px;
    }
    .address-none,.gps-location{
        display: none;
    }
    p.status-processing- {
      color: #007bff; /* Blue for Processing */
    }
    p.status-return {
      color: #ffc107; /* Yellow for Return */
    }
    p.status-cancelled- {
      color: #dc3545; /* Red for Cancelled */
    }
    p.status-out-for-delivery{
      color: #28a745; /* Green for Out for Delivery */
    }
    p.status-delivered{
      color: #28a745; /* Green for Delivered */
    }
    p.status-opened {
      color: #17a2b8; /* Teal for Opened */
    }
p.status-unknown {
      color: #6c757d; /* Gray for Unknown */
    }
    .order {
  position: relative;
  background: #fff;
  padding: 15px;
  margin-bottom: 20px;
  border: 1px solid #ddd;
  border-radius: 5px;
  font-family: Arial, sans-serif;
  color: #000;
}

.pdf-loader {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 10px;
}

.download-btn {
  background: #007bff;
  color: white;
  border: none;
  padding: 8px 12px;
  cursor: pointer;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.download-btn:hover {
  background: #0056b3;
}

/* Ensure elements are PDF-friendly */
.order p, .order h3 {
  color: #000 !important;
  font-family: Arial, sans-serif !important;
  margin: 5px 0;
}