/* Base Styles */

      h1 {
        font-family: "Raleway", sans-serif;
        font-size: 2.5rem;
        font-weight: 700;
        margin-bottom: 1rem;
        color: #32383f;
      }
      h3 {
        font-family: "Raleway", sans-serif;
        font-weight: 600;
        color: #32383f;
      }
      p, label {
        font-size: 1rem;
      }
      
      /* Main Tabs Styling */
      .nav-tabs {
        border-bottom: 2px solid #e9ecef;
        margin-bottom: 2rem;
      }
      .nav-tabs .nav-link {
        font-weight: 600;
        padding: 0.75rem 1.5rem;
        border: none;
        color: #555;
        background: transparent;
        transition: color 0.3s ease;
      }
      .nav-tabs .nav-link.active {
        color: #32383f;
        border-bottom: 3px solid #94c045;
      }
      
      /* Sub-Pills for Profile Section */
      .nav-pills .nav-link {
        font-weight: 500;
        border-radius: 30px;
        color: #555;
        background-color: #f1f1f1;
        margin-right: 0.5rem;
        transition: background-color 0.3s ease, color 0.3s ease;
        padding: 0.5rem 1rem;
      }
      .nav-pills .nav-link.active {
        background-color: #94c045;
        color: #fff;
      }
      
      /* Card Styling */
      .card {
        border: none;
        border-radius: 10px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        margin-bottom: 1.5rem;
        background: #fff;
      }
      .card-body {
        padding: 1.5rem;
      }
      .card-title {
        font-family: "Raleway", sans-serif;
        font-size: 1.25rem;
        font-weight: 600;
        margin-bottom: 1rem;
        color: #32383f;
      }
      
      /* Form Elements */
      .form-label {
        font-weight: 600;
        margin-bottom: 0.5rem;
      }
      
      /* Table Styling for Shopping Cart */
      .table {
        font-size: 0.95rem;
      }
      thead.table-light th {
        background-color: #f8f9fa;
        font-weight: 600;
      }
      tfoot tr th,
      tfoot tr td {
        font-size: 1rem;
        font-weight: 600;
      }
      
      /* Button Styling */
      .btn-primary {
        background-color: #94c045;
        border-color: #94c045;
        font-weight: 600;
        border-radius: 30px;
        padding: 0.5rem 1.5rem;
        transition: background-color 0.3s ease;
      }
      .btn-primary:hover {
        background-color: #85bc3a;
        border-color: #85bc3a;
      }
      .btn-success {
        background-color: #28a745;
        border-color: #28a745;
        font-weight: 600;
        border-radius: 30px;
        padding: 0.5rem 1.5rem;
      }
      .btn-outline-primary {
        border: 2px solid #94c045;
        color: #94c045;
        font-weight: 600;
        border-radius: 30px;
        padding: 0.375rem 1rem;
        transition: background-color 0.3s ease, color 0.3s ease;
      }
      .btn-outline-primary:hover {
        background-color: #94c045;
        color: #fff;
      }
      
/*------------------ Favorites Card Styling -----------------------------*/
.favorites-card {
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  
  .favorites-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
  }
  
  /* Image Wrapper & Hover Effect */
  .favorites-img-wrapper {
    position: relative;
    overflow: hidden;
  }
  
  .favorites-img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    transition: transform 0.3s ease;
  }
  
  .favorites-card:hover .favorites-img {
    transform: scale(1.05);
  }
  
  /* Remove Favorite Button */
  .remove-favorite {
    top: 10px;
    right: 10px;
    border: none;
    background: rgba(220, 53, 69, 0.8); /* semi-transparent red */
    color: #fff;
    border-radius: 50%;
    padding: 0.25rem 0.35rem;
    cursor: pointer;
    transition: background 0.3s ease;
    z-index: 2;
  }
  
  .remove-favorite:hover {
    background: rgba(220, 53, 69, 1);
  }
  
  /* Favorites Badge */
  .favorites-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    font-size: 0.75rem;
    padding: 0.4rem 0.6rem;
    border-radius: 0.5rem;
    z-index: 2;
  }
  
  /* Card Body & Text */
  .favorites-card .card-body {
    padding: 1rem;
  }
  
  .favorites-card .card-title {
    font-family: "Raleway", sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: #32383f;
  }
  
  .favorites-card .card-text {
    font-size: 0.95rem;
    color: #666;
  }
  
  /* Button Styling */
  .favorites-card .btn {
    font-size: 0.9rem;
    font-weight: 600;
    border-radius: 30px;
  }
  
  /* Responsive Adjustments */
  @media (max-width: 480px) {
    .favorites-img {
      height: 150px;
    }
    .favorites-card .card-title {
      font-size: 1rem;
    }
    .favorites-card .card-text {
      font-size: 0.85rem;
    }
  }
  
  
  
      
      /* Responsive Adjustments */
      @media (max-width: 480px) {
        h1 {
          font-size: 1.75rem;
        }
        .nav-tabs .nav-link {
          font-size: 0.9rem;
          padding: 0.5rem 1rem;
        }
        .nav-pills .nav-link {
          font-size: 0.85rem;
          padding: 0.5rem 0.75rem;
        }
        .card-body {
          padding: 1rem;
        }

        .table {
          font-size: 0.85rem;
        }
      }
  
  /*--------------------- Cart Section -------------------------- */
  
/* Ensure the responsive container allows horizontal scrolling */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  /* Force the table to be wider than the viewport on mobile if needed */
  .professional-cart-table {
    min-width: 700px; /* Adjust as necessary */
    font-size: 0.95rem;
    margin-bottom: 1rem;
  }
  
  /* Product Thumbnail & Name */
  .product-thumb {
    width: 60px;
    height: 60px;
    object-fit: cover;
    margin-right: 10px;
  }
  .product-name {
    vertical-align: middle;
    font-weight: 500;
    color: #333;
  }
  
/* Quantity Controls - Force inline-flex for proper alignment */
.quantity-group {
    display: flex;              /* Use flex layout */
    flex-direction: row;        /* Ensure items are in one row */
    align-items: center;        /* Vertically center the items */
    justify-content: center;    /* Center horizontally */
  }
  
  /* Set a fixed width for the input to ensure consistency */
  .quantity-group .form-control {
    width: 1px;                /* Adjust as needed */
    margin: 0;
    padding: 0.375rem 0.75rem;
    text-align: center;
    border-radius: 0;           /* Remove rounding to match buttons */
  }

  /* Ensure the buttons have consistent padding and no extra margins */
  .quantity-group button {
    margin: 0;
    padding: 0.375rem 0.75rem;
    border-radius: 0;           /* Align with the input */
  }  

  .quantity-input {
    text-align: center;
  }
  
  /* Remove Item Button */
  .remove-item {
    transition: background-color 0.3s ease;
  }
  .remove-item:hover {
    background-color: #dc3545;
    color: #fff;
  }
  
  /* Order Summary & Coupon Section (unchanged) */
  .order-summary {
    border-radius: 8px;
    background: #fff;
  }
  .summary-list li {
    padding: 0.5rem 0;
  }
  .summary-list li:not(:last-child) {
    border-bottom: 1px solid #f1f1f1;
  }
  .checkout-btn {
    font-weight: 600;
    border-radius: 30px;
    padding: 0.5rem 1.5rem;
  }
  
  /* Coupon Section */
  .coupon-section label {
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
  }
  .apply-coupon {
    font-weight: 600;
    border-radius: 0 30px 30px 0;
  }
.checkout-btn {
        font-weight: 600;
        border-radius: 30px;
        padding: 0.5rem 1.5rem;
        background: #85bc3a;
      }
.checkout-btn:hover {
          background: #94c045;
        }
  /* Responsive Adjustments */
  @media (max-width: 480px) {
    .professional-cart-table {
      font-size: 0.85rem;
    }
    .product-thumb {
      width: 50px;
      height: 50px;
    }
    .quantity-group .form-control {
      max-width: 40px;
    }
    .summary-list li {
      padding: 0.4rem 0;
    }
  }

/*--------------------- Orders Section -------------------------- */

/* Order Card Styling */
.hover-shadow {
  transition: box-shadow 0.3s ease, transform 0.2s ease;
}

.hover-shadow:hover {
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15) !important;
  transform: translateY(-2px);
}

/* Order Status Badges */
.badge {
  font-size: 0.85rem;
  padding: 0.4rem 0.8rem;
  font-weight: 600;
}

/* Order Details Modal */
#orderDetailsModal .modal-header {
  background: linear-gradient(135deg, #94c045 0%, #85bc3a 100%);
  color: white;
  border-bottom: none;
}

#orderDetailsModal .modal-header .btn-close {
  filter: brightness(0) invert(1);
}

#orderDetailsModal .modal-body {
  max-height: 70vh;
  overflow-y: auto;
}

#orderDetailsModal h6.text-muted {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
  margin-bottom: 0.25rem;
}

/* Cancel Order Button */
#cancelOrderBtn {
  background: #dc3545;
  border: none;
  transition: all 0.3s ease;
}

#cancelOrderBtn:hover {
  background: #c82333;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(220, 53, 69, 0.3);
}

/* Responsive Adjustments for Orders */
@media (max-width: 768px) {
  #orderDetailsModal .col-md-6 {
    margin-bottom: 1rem;
  }
  
  #orderDetailsModal .text-md-end {
    text-align: left !important;
  }
}