/* =======================================================================
   0. Imports & Root Variables
   ======================================================================= */

   @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');

   :root {
       /* Brand blues */
       --blue-500: #007bff;
       --blue-600: #0069d9;
       --blue-700: #004a99;
   
       /* Grays */
       --gray-50:  #f9f9f9;
       --gray-100: #f8f9fa;
       --gray-200: #f5f5f5;
       --gray-300: #e0e0e0;
       --gray-900: #333333;
   
       /* Spacing & radius */
       --space-xs: 0.3rem;
       --space-sm: 0.5rem;
       --space-md: 0.75rem;
       --space-lg: 1rem;
       --space-xl: 2rem;
   
       --radius-sm: 4px;
       --radius-md: 8px;
   
       /* Shadows */
       --shadow-sm: 0 2px 5px rgba(0, 0, 0, .1);
       --shadow-md: 0 4px 12px rgba(0, 0, 0, .1);
   }
   
   /* =======================================================================
      SAFARI NOTCH FIX
      ======================================================================= */
   
   /* Subtract the safe‑area inset so that the visible gap equals 0.7 rem
      (or 0.35 rem in the mobile override further down)                */
   html {
       background: var(--gray-100);
       padding-top: calc(env(safe-area-inset-top, 0px) - 0.7rem);
   }
   
   /* =======================================================================
      1. Reset & Global Styles
      ======================================================================= */
   
   * {
       box-sizing: border-box;
       margin: 0;
       padding: 0;
   }
   
   body {
       font-family: 'Roboto', sans-serif;
       font-size: 16px;
       line-height: 1.6;
       color: var(--gray-900);
       background: var(--gray-100);
   }
   
   .container {
       width: 90%;
       max-width: 1000px;
       margin: var(--space-xl) auto;
       padding: var(--space-xl);
       background: #fff;
       border-radius: var(--radius-md);
       box-shadow: var(--shadow-md);
   }
   
   h1 {
       margin-bottom: var(--space-xl);
       text-align: center;
       font-size: 2.5rem;
       font-weight: 500;
       color: var(--gray-900);
   }
   
   /* =======================================================================
      2. Search Bar & Controls
      ======================================================================= */
   
   .search-section {
       display: flex;
       flex-direction: column;
       gap: var(--space-lg);
       margin-bottom: var(--space-xl);
   }
   
   .search-section input,
   .search-section select,
   .search-section button {
       padding: var(--space-md) var(--space-lg);
       font-size: 1rem;
       border: 1px solid #ced4da;
       border-radius: var(--radius-md);
       transition: border-color .3s ease, box-shadow .3s ease;
   }
   
   .search-section input:focus,
   .search-section select:focus {
       outline: 0;
       border-color: var(--blue-500);
       box-shadow: 0 0 0 .2rem rgba(0, 123, 255, .25);
   }
   
   /* drop‑in fixed custom arrow */
   .search-section select {
       -webkit-appearance: none;
       -moz-appearance: none;
       appearance: none;
       padding-right: 2.5rem;
       background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16' height='16' fill='%23333'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E")
                  no-repeat right 0.75rem center/0.65rem 0.65rem;
   }
   
   .search-section select::-ms-expand { display: none; }
   
   .search-section button {
       background: var(--blue-500);
       color: #fff;
       border: none;
       cursor: pointer;
   }
   
   .search-section button:hover  { background: var(--blue-600); box-shadow: var(--shadow-sm); }
   .search-section button:active { transform: scale(.98); }
   
   /* =======================================================================
      3. Results Container
      ======================================================================= */
   
   #resultsContainer {
       margin-top: var(--space-xl);
   }
   
   /* =======================================================================
      4. Result Item
      ======================================================================= */
   
   .result-item {
       display: flex;
       align-items: flex-start;
       gap: var(--space-lg);
       margin-bottom: 1.5rem;
       padding-bottom: 1.5rem;
       border-bottom: 1px solid var(--gray-300);
       position: relative;
       overflow: hidden;
       cursor: pointer;
       transition: background-color .3s ease, box-shadow .3s ease;
   }
   
   .result-item:hover {
       background: var(--gray-50);
       box-shadow: var(--shadow-sm);
   }
   
   .result-thumb {
       width: 150px;
       aspect-ratio: 1/1;
       object-fit: cover;
       border-radius: var(--radius-md);
       flex-shrink: 0;
       max-width: 100%;
       height: auto;
   }
   
   .result-details {
       display: flex;
       flex-direction: column;
       flex: 1 1 0;
       min-width: 0;
   }
   
   /* =======================================================================
      5. Listing Title Styling
      ======================================================================= */
   .item-title {
       color: var(--gray-900);
       font-weight: 400;
       font-size: 1rem;
       line-height: 1.2;
       display: -webkit-box;
       -webkit-box-orient: vertical;
       -webkit-line-clamp: 2;
       overflow: hidden;
       text-overflow: ellipsis;
       margin-bottom: var(--space-md);
   }
   
   @media (min-width: 768px) {
       .item-title { font-size: 1.125rem; }
   }
   
   /* =======================================================================
      6. Details & Meta
      ======================================================================= */
   .bottom-line {
       display: flex;
       justify-content: space-between;
       align-items: flex-end;
       margin-top: auto;
   }
   
   .bottom-left {
       display: flex;
       flex-direction: column;
       gap: var(--space-xs);
       flex: 1 1 0;
       min-width: 0;
   }
   
   .price-container {
       display: flex;
       align-items: center;
       gap: var(--space-sm);
   }
   
   .price-label { font-size: 1rem; font-weight: 400; }
   .price-value { font-size: 1rem; font-weight: 700; }
   .shipping,
   .bids     { font-size: 1rem; }
   
   .time-left {
       margin-left: 1.5rem;
       font-size: 1rem;
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
       max-width: 30%;
   }
   
   /* =======================================================================
      7. Pagination
      ======================================================================= */
   .pagination-controls {
       display: flex;
       justify-content: center;
       align-items: center;
       gap: var(--space-lg);
       margin-top: var(--space-lg);
   }
   
   .pagination-controls button {
       padding: var(--space-md) 1.5rem;
       font-size: 1rem;
       background: var(--blue-500) !important;
       color: #fff;
       border: none;
       border-radius: var(--radius-sm);
       cursor: pointer;
       transition: background-color .3s ease;
   }
   
   .pagination-controls button:hover  { background: var(--blue-600); }
   .pagination-controls button:active { transform: scale(.98); }
   
   /* =======================================================================
      8. Helper Utilities
      ======================================================================= */
   .hidden      { display: none !important; }
   .fade-hidden { opacity: 0; pointer-events: none; }
   
   /* =======================================================================
      9. Responsive Queries
      ======================================================================= */
   
   @media (max-width: 600px) {
       .result-item    { gap: var(--space-sm); }
       .result-thumb   { width: 80px; }
       .result-details { width: calc(100% - 80px - var(--space-sm)); }
       .item-title {
           font-size: 1rem;
           white-space: normal;
           display: -webkit-box;
           -webkit-box-orient: vertical;
           -webkit-line-clamp: 2;
           line-clamp: 2;
           overflow: hidden;
       }
       .bottom-line   { margin-top: var(--space-sm); }
       .time-left     { margin-left: 1rem; font-size: .9rem; max-width: none; }
       .price-label,
       .price-value,
       .shipping,
       .bids          { font-size: .9rem; }
   }
   
   /* =======================================================================
      10. Progress Bar
      ======================================================================= */
   #progressBar {
       position: fixed;
       top: 0; left: 0;
       width: 100%; height: 4px;
       background: transparent;
       z-index: 10000;
       transition: opacity .3s ease;
   }
   #progressBar .progress {
       width: 0%; height: 100%;
       background: var(--blue-700);
       transition: width .4s ease;
   }
   
   /* =======================================================================
      11. Loading Indicator
      ======================================================================= */
   #loadingIndicator {
       position: fixed;
       top: 50%; left: 50%;
       transform: translate(-50%, -50%);
       z-index: 10001;
       display: flex;
       justify-content: center;
       align-items: center;
   }
   
   .spinner {
       width: 50px; height: 50px;
       border: 4px solid rgba(0, 0, 0, .1);
       border-top-color: var(--blue-500);
       border-radius: 50%;
       animation: spin 1s linear infinite;
   }
   
   @keyframes spin { to { transform: rotate(360deg); } }
   
   /* =======================================================================
      12. Hover & Layout Overrides
      ======================================================================= */
   /* Remove hover styling on cards */
   .result-item:hover {
       background-color: inherit !important;
       box-shadow: none !important;
   }
   
   /* Mobile: halve side padding/gutters */
   @media (max-width: 640px) {
       /* Reduce the padding as requested and compensate for the notch */
       html { padding-top: calc(env(safe-area-inset-top, 0px) - 0.7rem); }
   
       .container {
           margin: 0.7rem auto !important;
           width: 95% !important;
           padding: var(--space-sm) var(--space-sm) !important;
       }
   }
   
   /* Title color override */
   .container h1 { color: var(--blue-500) !important; }
   
   /* Mobile: title spans 90 vw and has bottom spacing */
   @media (max-width: 600px) {
       .container h1 {
           width: 90vw !important;
           max-width: none !important;
           margin-bottom: 0.5rem !important;
           white-space: nowrap !important;
           overflow: hidden !important;
           text-overflow: ellipsis !important;
           font-size: 1.6rem !important;
       }
   }